AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add changelog page

Browse Source
This commit is contained in:
MuslemRahimi 2024-07-13 12:13:29 +02:00
parent 119e33c549
commit 35f8bd038f
4 changed files with 445 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/lib/components/Footer.svelte
View File

@ -48,11 +48,14 @@
</div>
<div class="flex-1 mb-2 sm:mb-0">
<p class="uppercase text-slate-100 md:mb-6">Services</p>
<p class="uppercase text-slate-100 md:mb-6">Products</p>
<ul class="list-reset mb-6">
<li class="mt-2 inline-block mr-2 md:block md:mr-0" >
<a href="/pricing" class="no-underline hover:underline text-gray-300 hover:text-yellow-400">Pricing</a>
</li>
<li class="mt-2 inline-block mr-2 md:block md:mr-0" >
<a href="/changelog" class="no-underline hover:underline text-gray-300 hover:text-yellow-400">Changelog</a>
</li>
<li class="mt-2 inline-block mr-2 md:block md:mr-0" >
<a href="https://stocknear.lemonsqueezy.com/affiliates" rel="noopener noreferrer" target="_blank" class="no-underline hover:underline text-gray-300 hover:text-yellow-400">Affiliate Program</a>
</li>

157
src/lib/components/ParticleEffect.svelte Normal file
View File

@ -0,0 +1,157 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
export let quantity = 30;
export let staticity = 50;
export let ease = 50;
let canvas: HTMLCanvasElement;
let canvasContainer: HTMLDivElement;
class ParticleAnimation {
canvas: HTMLCanvasElement;
context: CanvasRenderingContext2D;
dpr: number;
settings: { quantity: number; staticity: number; ease: number };
circles: any[];
canvasSize: { w: number; h: number };
initCanvas: () => void;
resizeCanvas: () => void;
drawCircle: (circle: any, update?: boolean) => void;
drawParticles: () => void;
animate: () => void;
constructor(el: HTMLCanvasElement, options = {}) {
this.canvas = el;
if (!this.canvas) return;
this.context = this.canvas.getContext('2d');
this.dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
this.settings = {
quantity: options.quantity || 30,
staticity: options.staticity || 50,
ease: options.ease || 50,
};
this.circles = [];
this.canvasSize = {
w: 0,
h: 0,
};
this.initCanvas = this.initCanvas.bind(this);
this.resizeCanvas = this.resizeCanvas.bind(this);
this.drawCircle = this.drawCircle.bind(this);
this.drawParticles = this.drawParticles.bind(this);
this.animate = this.animate.bind(this);
this.init();
}
init() {
this.initCanvas();
this.animate();
if (typeof window !== 'undefined') {
window.addEventListener('resize', this.initCanvas);
}
}
initCanvas() {
this.resizeCanvas();
this.drawParticles();
}
resizeCanvas() {
this.circles.length = 0;
this.canvasSize.w = this.canvas.parentElement.offsetWidth;
this.canvasSize.h = this.canvas.parentElement.offsetHeight;
this.canvas.width = this.canvasSize.w * this.dpr;
this.canvas.height = this.canvasSize.h * this.dpr;
this.canvas.style.width = this.canvasSize.w + 'px';
this.canvas.style.height = this.canvasSize.h + 'px';
this.context.scale(this.dpr, this.dpr);
}
circleParams() {
const x = Math.floor(Math.random() * this.canvasSize.w);
const y = Math.floor(Math.random() * this.canvasSize.h);
const translateX = 0;
const translateY = 0;
const size = Math.floor(Math.random() * 2) + 1;
const alpha = 0;
const targetAlpha = parseFloat((Math.random() * 0.6 + 0.1).toFixed(1));
const dx = (Math.random() - 0.5) * 0.2;
const dy = (Math.random() - 0.5) * 0.2;
return { x, y, translateX, translateY, size, alpha, targetAlpha, dx, dy };
}
drawCircle(circle, update = false) {
const { x, y, translateX, translateY, size, alpha } = circle;
this.context.translate(translateX, translateY);
this.context.beginPath();
this.context.arc(x, y, size, 0, 2 * Math.PI);
this.context.fillStyle = `rgba(255, 255, 255, ${alpha})`;
this.context.fill();
this.context.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
if (!update) {
this.circles.push(circle);
}
}
clearContext() {
this.context.clearRect(0, 0, this.canvasSize.w, this.canvasSize.h);
}
drawParticles() {
this.clearContext();
const particleCount = this.settings.quantity;
for (let i = 0; i < particleCount; i++) {
const circle = this.circleParams();
this.drawCircle(circle);
}
}
animate() {
this.clearContext();
this.circles.forEach((circle) => {
const { x, y, dx, dy, alpha, targetAlpha } = circle;
circle.x += dx;
circle.y += dy;
// Wrap particles around the canvas edges
if (circle.x > this.canvasSize.w) circle.x = 0;
if (circle.x < 0) circle.x = this.canvasSize.w;
if (circle.y > this.canvasSize.h) circle.y = 0;
if (circle.y < 0) circle.y = this.canvasSize.h;
circle.alpha += alpha < targetAlpha ? 0.01 : -0.01;
circle.alpha = Math.min(Math.max(circle.alpha, 0), targetAlpha);
this.drawCircle(circle, true);
});
if (typeof window !== 'undefined') {
window.requestAnimationFrame(this.animate);
}
}
}
let animation: ParticleAnimation;
onMount(() => {
if (canvas) {
animation = new ParticleAnimation(canvas, { quantity, staticity, ease });
}
});
onDestroy(() => {
if (typeof window !== 'undefined') {
window.removeEventListener('resize', animation.initCanvas);
}
});
</script>
<div bind:this={canvasContainer}>
<canvas bind:this={canvas} data-particle-animation></canvas>
</div>
<style>
canvas {
width: 100%;
height: 100%;
}
</style>

63
src/routes/+page.svelte
View File

@ -183,7 +183,15 @@ class="hidden sm:block [mask-image:linear-gradient(to_bottom_right,white,transpa
class="h-[1px] animate-border-width rounded-full bg-gradient-to-r from-[rgba(251,206,60,0)] via-white to-[rgba(188,126,254,0)] transition-all duration-1000"
/>
</div>
<div class="overlay m-auto flex justify-center items-center w-fit sm:w-[820px] h-full">
<div class="absolute flex items-center justify-center -top-[-140px] sm:top-[270px] -translate-y-1/2 left-1/2 -translate-x-1/2 pointer-events-none w-96 sm:w-[900px] aspect-square">
<div class="absolute inset-0 translate-z-0 bg-gradient-to-t from-[#E8BB28] to-purple-600 rounded-full blur-[1600px] opacity-[0.15]"></div>
<div class="absolute w-64 h-64 translate-z-0 bg-gradient-to-t from-[#E8BB28] to-purple-900 rounded-full blur-[800px] "></div>
</div>
<div class="overlay m-auto flex justify-center z-20 items-center w-fit sm:w-[820px] h-full">
<img class="w-full" src={cloudFrontUrl+"/assets/showcase-stock.png"} loading = 'lazy' alt="logo">
</div>
</div>
@ -321,23 +329,36 @@ class="hidden sm:block [mask-image:linear-gradient(to_bottom_right,white,transpa
</div>
</section>
<h2 use:intersect={intersectOptions} class="invisible text-white text-3xl sm:text-4xl text-center m-auto font-bold mt-20 w-11/12 sm:w-1/2 mb-10">
Realtime Options Flow from Hedge Funds & Major Institutions
</h2>
<div use:intersect={intersectOptions} class="invisible relative">
<div class="absolute -top-4 flex w-full justify-center">
<div use:intersect={intersectOptions} class="invisible relative mb-4">
<div class="absolute top-0 flex w-full justify-center">
<div
class="h-[1px] animate-border-width rounded-full bg-gradient-to-r from-[rgba(251,206,60,0)] via-white to-[rgba(188,126,254,0)] transition-all duration-1000"
/>
</div>
<div class="absolute flex items-center justify-center -top-[-140px] sm:top-[270px] -translate-y-1/2 left-1/2 -translate-x-1/2 pointer-events-none w-96 sm:w-[900px] aspect-square">
<div class="absolute inset-0 translate-z-0 bg-gradient-to-t from-[#E8BB28] to-purple-600 rounded-full blur-[1600px] opacity-[0.15]"></div>
<div class="absolute w-64 h-64 translate-z-0 bg-gradient-to-t from-[#E8BB28] to-purple-900 rounded-full blur-[800px] "></div>
</div>
<div class="overlay m-auto flex justify-center items-center w-fit sm:w-[820px] h-full">
<img class="w-full" src={cloudFrontUrl+"/assets/showcase-options-flow.png"} loading = 'lazy' alt="logo">
</div>
</div>
<section>
@ -518,23 +539,23 @@ class="hidden sm:block [mask-image:linear-gradient(to_bottom_right,white,transpa
.overlay {
position: relative;
}
}
.overlay img {
width: 100%;
height: auto;
}
.overlay::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 1), transparent 90%);
}
.overlay img {
width: 100%;
height: auto;
}
.overlay::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 50%);
pointer-events: none; /* Ensure the overlay doesn't interfere with interaction */
}
.bg-radial-gradient {
top: 0;

242
src/routes/changelog/+page.svelte Normal file
View File

@ -0,0 +1,242 @@
<script>
import { numberOfUnreadNotification } from '$lib/store';
import ParticleEffect from '$lib/components/ParticleEffect.svelte';
export let data;
</script>
<svelte:head>
<title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Changelog · stocknear</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<!-- Other meta tags -->
<meta property="og:title" content="Changelog · stocknear"/>
<meta property="og:type" content="website"/>
<!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="Changelog · stocknear"/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<section class="w-full max-w-5xl overflow-hidden m-auto min-h-screen pb-40">
<body class="font-inter antialiased text-slate-100 tracking-tight">
<!-- Page wrapper -->
<div class="flex flex-col min-h-screen overflow-hidden supports-[overflow:clip]:overflow-clip">
<!-- Page content -->
<main class="grow">
<!-- Content -->
<section class="relative">
<!-- Radial gradient -->
<div class="absolute flex items-center justify-center top-0 -translate-y-1/2 left-1/2 -translate-x-1/2 pointer-events-none w-[500px] aspect-square" aria-hidden="true">
<div class="absolute inset-0 translate-z-0 bg-gradient-to-r from-[#E8BB28] to-purple-600 rounded-full blur-[120px] opacity-20"></div>
<div class="absolute w-32 h-32 translate-z-0 bg-gradient-to-r from-[#E8BB28] to-purple-700 rounded-full blur-[80px] opacity-40"></div>
</div>
<!-- Particles animation -->
<div class="absolute inset-0 h-96 z-10" aria-hidden="true">
<ParticleEffect quantity={50} staticity={40} ease={60} />
</div>
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="pt-32 pb-12 md:pt-40 md:pb-20">
<!-- Page header -->
<div class="text-center pb-12 md:pb-20">
<h1 class="text-4xl sm:text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#E8BB28] to-purple-500 via-slate-200 to-slate-200/60 pb-4">
What's New
</h1>
<div class="max-w-3xl m-auto flex justify-center items-center">
<p class="w-5/6 text-center text-xl sm:text-2xl text-white">New updates and improvements to Stocknear.</p>
</div>
</div>
<!-- Content -->
<div class="max-w-3xl mx-auto">
<div class="relative">
<div class="absolute h-full top-4 left-[2px] w-0.5 bg-slate-800 [mask-image:_linear-gradient(0deg,transparent,theme(colors.white)_150px,theme(colors.white))] -z-10 overflow-hidden after:absolute after:h-4 after:top-0 after:-translate-y-full after:left-0 after:w-0.5 after:bg-[linear-gradient(180deg,_transparent,_theme(colors.purple.500/.65)_25%,_theme(colors.purple.200)_50%,_theme(colors.purple.500/.65)_75%,_transparent)] after:animate-shine" aria-hidden="true"></div>
<!-- Post -->
<article class="pt-12 first-of-type:pt-0 group">
<div class="md:flex">
<div class="w-48 shrink-0">
<time class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3">
<span class="ml-[1.625rem] md:ml-5">July 8-12, 2024</span>
</time>
</div>
<div class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none">
<header>
<h2 class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3">
Weekly Update
</h2>
</header>
<ol class="text-white list-disc ml-5 sm:ml-3">
<li class="p-1">
New Feature: Adding Realtime Darkpool Trades of Hedge Funds & Major Institutional Traders
</li>
<li class="p-1">
New Feature: Adding AI Analyst Insight
</li>
<li class="p-1">
Improving frontend and backend code for faster loading times.
</li>
<li class="p-1">
Enhancing UI/UX for easier navigation.
</li>
</ol>
</div>
</div>
</article>
<article class="pt-12 first-of-type:pt-0 group">
<div class="md:flex">
<div class="w-48 shrink-0">
<time class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3">
<span class="ml-[1.625rem] md:ml-5">July 1-5, 2024</span>
</time>
</div>
<div class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none">
<header>
<h2 class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3">
Weekly Update
</h2>
</header>
<ol class="text-white list-disc ml-5 sm:ml-3">
<li class="p-1">
New Feature: Adding Implied Volatility
</li>
<li class="p-1">
New Feature: Adding Options Net Flow
</li>
</ol>
</div>
</div>
</article>
<article class="pt-12 first-of-type:pt-0 group">
<div class="md:flex">
<div class="w-48 shrink-0">
<time class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3">
<span class="ml-[1.625rem] md:ml-5">June 28, 2024</span>
</time>
</div>
<div class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none">
<header>
<h2 class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3">
Announcement 🎉
</h2>
</header>
<span class="text-white">
Starting today, I'll keep you updated on the changes from the past week: new features, improvements, bug fixes, and more.
</span>
</div>
</div>
</article>
</div>
</div>
<!-- Pagination -->
<!--
<div class="max-w-3xl mx-auto">
<ul class="flex items-center justify-between mt-12 pl-8 md:pl-48">
<li>
<span class="btn-sm text-slate-700 transition duration-150 ease-in-out group [background:linear-gradient(theme(colors.slate.900),_theme(colors.slate.900))_padding-box,_conic-gradient(theme(colors.slate.400),_theme(colors.slate.700)_25%,_theme(colors.slate.700)_75%,_theme(colors.slate.400)_100%)_border-box] relative before:absolute before:inset-0 before:bg-slate-800/30 before:rounded-full before:pointer-events-none cursor-not-allowed">
<span class="relative inline-flex items-center">
<span class="tracking-normal text-slate-700 mr-1">&lt;-</span> Previous Page
</span>
</span>
</li>
<li>
<a class="btn-sm text-slate-300 hover:text-white transition duration-150 ease-in-out group [background:linear-gradient(theme(colors.slate.900),_theme(colors.slate.900))_padding-box,_conic-gradient(theme(colors.slate.400),_theme(colors.slate.700)_25%,_theme(colors.slate.700)_75%,_theme(colors.slate.400)_100%)_border-box] relative before:absolute before:inset-0 before:bg-slate-800/30 before:rounded-full before:pointer-events-none" href="#0">
<span class="relative inline-flex items-center">
Next Page <span class="tracking-normal text-purple-500 group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out ml-1">-&gt;</span>
</span>
</a>
</li>
</ul>
</div>
-->
</div>
</div>
</section>
<!-- CTA -->
{#if !data?.user}
<section class="mt-10">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="relative px-8 py-12 md:py-20 rounded-[3rem] overflow-hidden">
<!-- Radial gradient -->
<div class="absolute flex items-center justify-center top-0 -translate-y-1/2 left-1/2 -translate-x-1/2 pointer-events-none -z-10 w-1/3 aspect-square" aria-hidden="true">
<div class="absolute inset-0 translate-z-0 bg-purple-500 rounded-full blur-[120px] opacity-70"></div>
<div class="absolute w-1/4 h-1/4 translate-z-0 bg-purple-400 rounded-full blur-[40px]"></div>
</div>
<!-- Blurred shape -->
<div class="absolute bottom-0 translate-y-1/2 left-0 blur-2xl opacity-50 pointer-events-none -z-10" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="434" height="427">
<defs>
<linearGradient id="bs5-a" x1="19.609%" x2="50%" y1="14.544%" y2="100%">
<stop offset="0%" stop-color="#A855F7" />
<stop offset="100%" stop-color="#6366F1" stop-opacity="0" />
</linearGradient>
</defs>
<path fill="url(#bs5-a)" fill-rule="evenodd" d="m0 0 461 369-284 58z" transform="matrix(1 0 0 -1 0 427)" />
</svg>
</div>
<!-- Content -->
<div class="max-w-3xl mx-auto text-center">
<div>
<div class="text-2xl sm:text-4xl font-bold inline-flex pb-3">
Start your free trial today
</div>
</div>
<h2 class="text-center m-auto text-[1rem] sm:text-lg text-white font-medium pb-4">
Try Stocknear Platform for 7 days. No credit card required.
</h2>
<a href='/register'
class="animate-shine mt-5 w-56 sm:w-80 m-auto group relative grid overflow-hidden rounded-xl px-6 py-3 shadow-[0_1000px_0_0_hsl(0_0%_20%)_inset] transition-colors"
>
<span>
<span
class="spark mask-gradient animate-flip before:animate-kitrotate absolute inset-0 h-[100%] w-[100%] overflow-hidden rounded-xl [mask:linear-gradient(white,_transparent_50%)] before:absolute before:aspect-square before:w-[200%] before:rotate-[-90deg] before:bg-[conic-gradient(from_0deg,transparent_0_340deg,white_360deg)] before:content-[''] before:[inset:0_auto_auto_50%] before:[translate:-50%_-15%]"
/>
</span>
<span
class="backdrop absolute inset-px rounded-[11px] bg-[#FBCE3C] transition-colors duration-200 group-hover:bg-[#be9204"
/>
<span class="z-10 text-black text-[1rem] sm:text-lg font-semibold">
<slot>Free trial for 7 days</slot>
</span>
</a>
</div>
</div>
</div>
</section>
{/if}
</main>
</div>
</body>
</section>