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

update ui

Browse Source
This commit is contained in:
MuslemRahimi 2024-07-12 01:11:54 +02:00
parent 6a2f9fda19
commit b1b796e3f9
4 changed files with 63 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app.css
View File

@ -59,7 +59,6 @@
.shake-ticker:hover img { .shake-ticker:hover img {
animation-name: shake; animation-name: shake;
animation-duration: 0.5s; animation-duration: 0.5s;

16
src/routes/+layout.svelte
View File

@ -356,14 +356,14 @@ $: {
<svelte:window bind:innerWidth/> <svelte:window bind:innerWidth/>
<div class="app"> <div class="app {$page?.url?.pathname === '/' ? 'bg-[#000]' : ''}">
<!--<ViewTransition />--> <!--<ViewTransition />-->
<!--Start Navbar--> <!--Start Navbar-->
{#if !data?.user} {#if !data?.user}
<header <header
class="sticky {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} inset-x-0 top-0 z-30 mx-auto w-full max-w-screen-md border border-[#202020] bg-[#313131] py-3 shadow backdrop-blur-lg md:top-3 md:rounded-3xl lg:max-w-screen-lg"> class="sticky {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} inset-x-0 top-0 z-30 mx-auto w-full max-w-screen-md border border-[#202020] py-3 sm:py-4 shadow-lg sm:backdrop-blur-sm bg-[#202020] sm:bg-opacity-80 md:top-3 md:rounded-2xl lg:max-w-screen-lg">
<div class="px-4"> <div class="px-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex shrink-0"> <div class="flex shrink-0">
@ -377,25 +377,25 @@ $: {
</div> </div>
<div class="hidden md:flex md:items-center md:justify-center md:gap-5"> <div class="hidden md:flex md:items-center md:justify-center md:gap-5">
<a aria-current="page" <a aria-current="page"
class="inline-block rounded-lg px-2 py-1 text-[0.90rem] font-semibold text-white transition-all duration-200 hover:bg-[#313131]" class="inline-block rounded-lg px-2 py-1 text-[0.90rem] font-semibold text-white transition-all duration-200 hover:bg-purple-600"
href="/">Home</a> href="/">Home</a>
<a aria-current="page" <a aria-current="page"
class="inline-block rounded-lg px-2 py-1 text-[0.90rem] font-semibold text-white transition-all duration-200 hover:bg-[#313131]" class="inline-block rounded-lg px-2 py-1 text-[0.90rem] font-semibold text-white transition-all duration-200 hover:bg-purple-600"
href="/about">About Us</a> href="/about">About Us</a>
<a class="inline-block rounded-lg px-2 py-1 text-[0.90rem] font-semibold text-white transition-all duration-200 hover:bg-[#313131]" <a class="inline-block rounded-lg px-2 py-1 text-[0.90rem] font-semibold text-white transition-all duration-200 hover:bg-purple-600"
href="/pricing">Pricing</a> href="/pricing">Pricing</a>
</div> </div>
<div class="flex items-center justify-end gap-3"> <div class="flex items-center justify-end gap-3">
<a class="items-center justify-center rounded-xl bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 transition-all duration-150 hover:bg-gray-50 sm:inline-flex" <a class="items-center justify-center rounded-xl bg-gray-200 px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 transition-all duration-150 hover:bg-white sm:inline-flex"
href="/register">Start Trial</a> href="/register">Start Trial</a>
<a class="inline-flex items-center justify-center rounded-xl bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm transition-all duration-150 hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600" <a class="inline-flex items-center justify-center rounded-xl bg-purple-600 px-3 py-2 text-sm font-semibold text-white shadow-sm transition-all duration-150 hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600"
href="/login">Login</a> href="/login">Login</a>
</div> </div>
</div> </div>
</div> </div>
</header> </header>
{:else } {:else }
<div id="navbar" class="navbar {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} border-b border-[#0F0F0F] w-screen sticky top-0 z-40 bg-[#313131]"> <div id="navbar" class="navbar {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} border-b border-[#0F0F0F] w-screen sticky top-0 z-40 bg-[#202020]">
<div class="w-full max-w-[1600px] m-auto "> <div class="w-full max-w-[1600px] m-auto ">
<div class="flex flex-row items-center w-full xl:px-2"> <div class="flex flex-row items-center w-full xl:px-2">

73
src/routes/+page.svelte
View File

@ -3,6 +3,7 @@
import Marquee from '$lib/components/Marquee.svelte'; import Marquee from '$lib/components/Marquee.svelte';
import Discount from '$lib/components/Discount.svelte'; import Discount from '$lib/components/Discount.svelte';
import { intersect } from 'svelte-intersection-observer-action';
export let data; export let data;
@ -11,6 +12,19 @@
const frontendStars = data?.getFrontendStars; const frontendStars = data?.getFrontendStars;
const backendStars = data?.getBackendStars; const backendStars = data?.getBackendStars;
const threshold = 0.4 // change the threshold value to 0.4 for 40%
const rootMargin = '-0px 0px'
const intersectOptions = { callback, threshold, rootMargin }
function callback(entry: IntersectionObserverEntry) {
if (entry.intersectionRatio > threshold) {
entry.target.classList.remove('invisible')
entry.target.classList.add('animate-fade-in-once')
}
}
</script> </script>
@ -48,7 +62,6 @@ class="hidden sm:block [mask-image:linear-gradient(to_bottom_right,white,transpa
/> />
<div class="w-full max-w-screen overflow-hidden m-auto min-h-screen bg-[#000]"> <div class="w-full max-w-screen overflow-hidden m-auto min-h-screen bg-[#000]">
@ -157,7 +170,7 @@ class="hidden sm:block [mask-image:linear-gradient(to_bottom_right,white,transpa
</div> </div>
<!-- End Column --> <!-- End Column -->
<h1 class="text-white w-5/6 sm:w-full m-auto text-3xl sm:text-4xl font-bold mt-14 mb-5"> <h1 class="text-white w-5/6 sm:w-full m-auto text-3xl sm:text-4xl font-bold mt-14 mb-5">
Explore High Quality Datasets Explore High Quality Datasets
@ -178,20 +191,19 @@ class="hidden sm:block [mask-image:linear-gradient(to_bottom_right,white,transpa
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-4 w-full m-auto"> <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-4 w-full m-auto">
<div use:intersect={intersectOptions} class="card bg-[#121016] sm:w-96 shadow-xl rounded-none sm:rounded-lg invisible box-content">
<div class="card bg-[#121016] sm:w-96 shadow-xl rounded-none sm:rounded-lg"> <div class="card-body">
<div class="card-body"> <h2 class="card-title text-white text-2xl font-bold">
<h2 class="card-title text-white text-2xl font-bold"> <svg class="w-9 h-9 inline-block mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15"><path fill="none" stroke="#fff" stroke-linejoin="round" d="M.5 3.498L7.5.5l7 2.998m-14 0l7 2.998m-7-2.998V3.5m14-.002l-7 2.998m7-2.998V11.5l-7 3m7-11.002L7.5 6.5v8m0-8.004V14.5m0-8.004L.5 3.5m7 11l-7-3v-8"/></svg>
<svg class="w-9 h-9 inline-block mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15"><path fill="none" stroke="#fff" stroke-linejoin="round" d="M.5 3.498L7.5.5l7 2.998m-14 0l7 2.998m-7-2.998V3.5m14-.002l-7 2.998m7-2.998V11.5l-7 3m7-11.002L7.5 6.5v8m0-8.004V14.5m0-8.004L.5 3.5m7 11l-7-3v-8"/></svg> Dark Pool
Dark Pool </h2>
</h2> <span class="text-start text-white">
<span class="text-start text-white"> Access high-volume, privately negotiated trades from exclusive exchanges, typically used by institutional investors. This data is now available to you!
Access high-volume, privately negotiated trades from exclusive exchanges, typically used by institutional investors. This data is now available to you! </span>
</span> </div>
</div> </div>
</div>
<div class="card bg-[#121016] sm:w-96 shadow-xl rounded-none sm:rounded-lg"> <div use:intersect={intersectOptions} class="card bg-[#121016] sm:w-96 shadow-xl rounded-none sm:rounded-lg invisible box-content">
<div class="card-body"> <div class="card-body">
<h2 class="card-title text-white text-2xl font-bold"> <h2 class="card-title text-white text-2xl font-bold">
<svg class="w-10 h-10 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14 16V8c0-.943 0-1.414-.293-1.707S12.943 6 12 6s-1.414 0-1.707.293S10 7.057 10 8v8c0 .943 0 1.414.293 1.707S11.057 18 12 18s1.414 0 1.707-.293S14 16.943 14 16m7-7V7c0-.943 0-1.414-.293-1.707S19.943 5 19 5s-1.414 0-1.707.293S17 6.057 17 7v2c0 .943 0 1.414.293 1.707S18.057 11 19 11s1.414 0 1.707-.293S21 9.943 21 9M7 14v-2c0-.943 0-1.414-.293-1.707S5.943 10 5 10s-1.414 0-1.707.293S3 11.057 3 12v2c0 .943 0 1.414.293 1.707S4.057 16 5 16s1.414 0 1.707-.293S7 14.943 7 14m5 7v-3m7-5v-2m-7-5V3m7 2V3M5 18v-2m0-6V8" color="#F9784E"/></svg> <svg class="w-10 h-10 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14 16V8c0-.943 0-1.414-.293-1.707S12.943 6 12 6s-1.414 0-1.707.293S10 7.057 10 8v8c0 .943 0 1.414.293 1.707S11.057 18 12 18s1.414 0 1.707-.293S14 16.943 14 16m7-7V7c0-.943 0-1.414-.293-1.707S19.943 5 19 5s-1.414 0-1.707.293S17 6.057 17 7v2c0 .943 0 1.414.293 1.707S18.057 11 19 11s1.414 0 1.707-.293S21 9.943 21 9M7 14v-2c0-.943 0-1.414-.293-1.707S5.943 10 5 10s-1.414 0-1.707.293S3 11.057 3 12v2c0 .943 0 1.414.293 1.707S4.057 16 5 16s1.414 0 1.707-.293S7 14.943 7 14m5 7v-3m7-5v-2m-7-5V3m7 2V3M5 18v-2m0-6V8" color="#F9784E"/></svg>
@ -203,7 +215,7 @@ class="hidden sm:block [mask-image:linear-gradient(to_bottom_right,white,transpa
</div> </div>
</div> </div>
<div class="card bg-[#121016] sm:w-96 shadow-xl rounded-none sm:rounded-lg"> <div use:intersect={intersectOptions} class="card bg-[#121016] sm:w-96 shadow-xl rounded-none sm:rounded-lg invisible box-content">
<div class="card-body"> <div class="card-body">
<h2 class="card-title text-white text-2xl font-bold"> <h2 class="card-title text-white text-2xl font-bold">
<svg class="w-10 h-10 inline-block " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#fff" d="M4 7a1 1 0 0 0 0 2h2.22l2.624 10.5c.223.89 1.02 1.5 1.937 1.5h12.47c.903 0 1.67-.6 1.907-1.47L27.75 10h-2.094l-2.406 9H10.78L8.157 8.5A1.984 1.984 0 0 0 6.22 7zm18 14c-1.645 0-3 1.355-3 3s1.355 3 3 3s3-1.355 3-3s-1.355-3-3-3m-9 0c-1.645 0-3 1.355-3 3s1.355 3 3 3s3-1.355 3-3s-1.355-3-3-3m3-14v5h-3l4 4l4-4h-3V7zm-3 16c.564 0 1 .436 1 1c0 .564-.436 1-1 1c-.564 0-1-.436-1-1c0-.564.436-1 1-1m9 0c.564 0 1 .436 1 1c0 .564-.436 1-1 1c-.564 0-1-.436-1-1c0-.564.436-1 1-1"/></svg> <svg class="w-10 h-10 inline-block " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#fff" d="M4 7a1 1 0 0 0 0 2h2.22l2.624 10.5c.223.89 1.02 1.5 1.937 1.5h12.47c.903 0 1.67-.6 1.907-1.47L27.75 10h-2.094l-2.406 9H10.78L8.157 8.5A1.984 1.984 0 0 0 6.22 7zm18 14c-1.645 0-3 1.355-3 3s1.355 3 3 3s3-1.355 3-3s-1.355-3-3-3m-9 0c-1.645 0-3 1.355-3 3s1.355 3 3 3s3-1.355 3-3s-1.355-3-3-3m3-14v5h-3l4 4l4-4h-3V7zm-3 16c.564 0 1 .436 1 1c0 .564-.436 1-1 1c-.564 0-1-.436-1-1c0-.564.436-1 1-1m9 0c.564 0 1 .436 1 1c0 .564-.436 1-1 1c-.564 0-1-.436-1-1c0-.564.436-1 1-1"/></svg>
@ -215,7 +227,7 @@ class="hidden sm:block [mask-image:linear-gradient(to_bottom_right,white,transpa
</div> </div>
</div> </div>
<div class="card bg-[#121016] sm:w-96 shadow-xl rounded-none sm:rounded-lg"> <div use:intersect={intersectOptions} class="card bg-[#121016] sm:w-96 shadow-xl rounded-none sm:rounded-lg invisible box-content">
<div class="card-body"> <div class="card-body">
<h2 class="card-title text-white text-2xl font-bold text-start"> <h2 class="card-title text-white text-2xl font-bold text-start">
<svg class="w-9 h-9 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#fff" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0S96 57.3 96 128s57.3 128 128 128m95.8 32.6L272 480l-32-136l32-56h-96l32 56l-32 136l-47.8-191.4C56.9 292 0 350.3 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-72.1-56.9-130.4-128.2-133.8"/></svg> <svg class="w-9 h-9 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#fff" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0S96 57.3 96 128s57.3 128 128 128m95.8 32.6L272 480l-32-136l32-56h-96l32 56l-32 136l-47.8-191.4C56.9 292 0 350.3 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-72.1-56.9-130.4-128.2-133.8"/></svg>
@ -227,7 +239,7 @@ class="hidden sm:block [mask-image:linear-gradient(to_bottom_right,white,transpa
</div> </div>
</div> </div>
<div class="card bg-[#121016] sm:w-96 shadow-xl rounded-none sm:rounded-lg"> <div use:intersect={intersectOptions} class="card bg-[#121016] sm:w-96 shadow-xl rounded-none sm:rounded-lg invisible box-content">
<div class="card-body"> <div class="card-body">
<h2 class="card-title text-white text-2xl font-bold text-start"> <h2 class="card-title text-white text-2xl font-bold text-start">
<svg class="w-10 h-10 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#fff" d="M247.002 32v47.725a56.5 56.5 0 0 1 17.996 0V32zM256 96.998c-11.5 0-23.002 5.001-23.002 15.002v10.1c7.37-2 15.05-3.098 23.002-3.098c7.953 0 15.632 1.098 23.002 3.098V112c0-10-11.502-15.002-23.002-15.002m0 40c-28.25 0-53.982 17.938-72.867 42.488c-16.345 21.249-26.934 47.277-29.496 67.516h204.726c-2.562-20.239-13.15-46.267-29.496-67.516c-18.885-24.55-44.617-42.488-72.867-42.488m-80 78.004h32v17.996h-32zm64 0h32v17.996h-32zm64 0h32v17.996h-32zm-170.29 49.996l-7.53 16.004h259.64l-7.53-16.004zm1.292 34v28.004h17.996v-28.004zm56 0v28.004h17.996v-28.004zm56 0v28.004h17.996v-28.004zm56 0v28.004h17.996v-28.004zm56 0v28.004h17.996v-28.004zm-270.004 46v16.004h334.004v-16.004zm14.004 34v60.004h17.996v-60.004zm48 0v60.004h17.996v-60.004zm48 0v60.004h17.996v-60.004zm48 0v60.004h17.996v-60.004zm48 0v60.004h17.996v-60.004zm48 0v60.004h17.996v-60.004zm48 0v60.004h17.996v-60.004zm-350.004 78v30.004h430.004v-30.004z"/></svg> <svg class="w-10 h-10 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#fff" d="M247.002 32v47.725a56.5 56.5 0 0 1 17.996 0V32zM256 96.998c-11.5 0-23.002 5.001-23.002 15.002v10.1c7.37-2 15.05-3.098 23.002-3.098c7.953 0 15.632 1.098 23.002 3.098V112c0-10-11.502-15.002-23.002-15.002m0 40c-28.25 0-53.982 17.938-72.867 42.488c-16.345 21.249-26.934 47.277-29.496 67.516h204.726c-2.562-20.239-13.15-46.267-29.496-67.516c-18.885-24.55-44.617-42.488-72.867-42.488m-80 78.004h32v17.996h-32zm64 0h32v17.996h-32zm64 0h32v17.996h-32zm-170.29 49.996l-7.53 16.004h259.64l-7.53-16.004zm1.292 34v28.004h17.996v-28.004zm56 0v28.004h17.996v-28.004zm56 0v28.004h17.996v-28.004zm56 0v28.004h17.996v-28.004zm56 0v28.004h17.996v-28.004zm-270.004 46v16.004h334.004v-16.004zm14.004 34v60.004h17.996v-60.004zm48 0v60.004h17.996v-60.004zm48 0v60.004h17.996v-60.004zm48 0v60.004h17.996v-60.004zm48 0v60.004h17.996v-60.004zm48 0v60.004h17.996v-60.004zm48 0v60.004h17.996v-60.004zm-350.004 78v30.004h430.004v-30.004z"/></svg>
@ -239,7 +251,7 @@ class="hidden sm:block [mask-image:linear-gradient(to_bottom_right,white,transpa
</div> </div>
</div> </div>
<div class="card bg-[#121016] sm:w-96 shadow-xl rounded-none sm:rounded-lg"> <div use:intersect={intersectOptions} class="card bg-[#121016] sm:w-96 shadow-xl rounded-none sm:rounded-lg invisible box-content">
<div class="card-body"> <div class="card-body">
<h2 class="card-title text-white text-2xl font-bold text-start"> <h2 class="card-title text-white text-2xl font-bold text-start">
<svg class="w-10 h-10 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#fff" d="M9.228 2.183a1.33 1.33 0 0 1 1.543 0l5.852 4.152c.727.516.363 1.662-.528 1.664H3.907c-.894 0-1.26-1.147-.53-1.664zM10 5.874a.833.833 0 1 0 0-1.667a.833.833 0 0 0 0 1.667M4.5 9v4h2V9zM3 16.166c0-1.197.97-2.167 2.166-2.167h9.667A2.17 2.17 0 0 1 17 16.166v.333a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5zm12.5-7.167v4h-2V9zm-3 0v4h-2V9zm-3 0v4h-2V9z"/></svg> <svg class="w-10 h-10 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#fff" d="M9.228 2.183a1.33 1.33 0 0 1 1.543 0l5.852 4.152c.727.516.363 1.662-.528 1.664H3.907c-.894 0-1.26-1.147-.53-1.664zM10 5.874a.833.833 0 1 0 0-1.667a.833.833 0 0 0 0 1.667M4.5 9v4h2V9zM3 16.166c0-1.197.97-2.167 2.166-2.167h9.667A2.17 2.17 0 0 1 17 16.166v.333a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5zm12.5-7.167v4h-2V9zm-3 0v4h-2V9zm-3 0v4h-2V9z"/></svg>
@ -254,6 +266,8 @@ class="hidden sm:block [mask-image:linear-gradient(to_bottom_right,white,transpa
</div> </div>
<h2 class="text-white text-3xl sm:text-4xl font-bold mt-16 w-5/6 sm:w-1/2 text-center m-auto"> <h2 class="text-white text-3xl sm:text-4xl font-bold mt-16 w-5/6 sm:w-1/2 text-center m-auto">
AI-Powered Algorithms to assist you in any way AI-Powered Algorithms to assist you in any way
@ -499,7 +513,6 @@ class="hidden sm:block [mask-image:linear-gradient(to_bottom_right,white,transpa
<style lang='scss'> <style lang='scss'>
.overlay { .overlay {
@ -532,5 +545,25 @@ class="hidden sm:block [mask-image:linear-gradient(to_bottom_right,white,transpa
.box-content:nth-child(1) {
transition-delay: 0ms;
}
.box-content:nth-child(2) {
transition-delay: 200ms;
}
.box-content:nth-child(3) {
transition-delay: 400ms;
}
.box-content:nth-child(4) {
transition-delay: 500ms;
}
.box-content:nth-child(5) {
transition-delay: 600ms;
}
.box-content:nth-child(6) {
transition-delay: 700ms;
}
.box-content:nth-child(7) {
transition-delay: 800ms;
}
</style> </style>

4
tailwind.config.cjs
View File

@ -13,7 +13,7 @@ module.exports = {
}, },
animation: { animation: {
marquee: "marquee var(--duration) linear infinite", marquee: "marquee var(--duration) linear infinite",
'fade-in-once': 'fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards', 'fade-in-once': 'fadeIn 0.9s ease-in-out forwards',
'flip': "flip 6s infinite steps(2, end)", 'flip': "flip 6s infinite steps(2, end)",
"kitrotate": "kitrotate 3s linear infinite both", "kitrotate": "kitrotate 3s linear infinite both",
shine: "shine 4s linear infinite", shine: "shine 4s linear infinite",
@ -39,7 +39,7 @@ module.exports = {
fadeIn: { fadeIn: {
'0%': { '0%': {
opacity: '0', opacity: '0',
transform: 'translateY(5px) scale(0.98)', transform: 'translateY(25px) scale(0.98)',
}, },
'100%': { '100%': {
opacity: '1', opacity: '1',