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

modify layout

Browse Source
This commit is contained in:
MuslemRahimi 2024-08-11 10:04:28 +02:00
parent f4224b091d
commit fb80f7b968
7 changed files with 812 additions and 696 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
package-lock.json generated
View File

@ -53,6 +53,7 @@
"svelte-progress-bar": "^3.0.2", "svelte-progress-bar": "^3.0.2",
"svelte-range-slider-pips": "^2.3.1", "svelte-range-slider-pips": "^2.3.1",
"svelte-sonner": "^0.3.27", "svelte-sonner": "^0.3.27",
"svelte-splitpanes": "^8.0.5",
"svelte-tags-input": "^6.0.0", "svelte-tags-input": "^6.0.0",
"svelte-tiny-virtual-list": "^2.1.2", "svelte-tiny-virtual-list": "^2.1.2",
"tailwind-merge": "^2.4.0", "tailwind-merge": "^2.4.0",
@ -4673,8 +4674,15 @@
"node_modules/esm-env": { "node_modules/esm-env": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.0.0.tgz", "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.0.0.tgz",
"integrity": "sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==", "integrity": "sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA=="
"dev": true },
"node_modules/esm-env-robust": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/esm-env-robust/-/esm-env-robust-0.0.3.tgz",
"integrity": "sha512-90Gnuw2DALOqlL1581VxP3GHPUNHX9U+fQ+8FNcTTFClhY5gEggAAnJ3q1b2Oq23knRsjv8YpNeMRPaMLUymOA==",
"dependencies": {
"esm-env": "^1.0.0"
}
}, },
"node_modules/estree-walker": { "node_modules/estree-walker": {
"version": "2.0.2", "version": "2.0.2",
@ -7666,6 +7674,17 @@
"svelte": "^3.0.0 || ^4.0.0 || ^5.0.0-next.1" "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0-next.1"
} }
}, },
"node_modules/svelte-splitpanes": {
"version": "8.0.5",
"resolved": "https://registry.npmjs.org/svelte-splitpanes/-/svelte-splitpanes-8.0.5.tgz",
"integrity": "sha512-LUdNbuckYtGcBI5Us1ugYlw0fC6wnUEbUTgUY4TVLR/ZCsSrTw9Ftuf7NkM0tTRMCBG3ZmzPDfWuOlmSOXGU/A==",
"dependencies": {
"esm-env-robust": "0.0.3"
},
"peerDependencies": {
"svelte": "^4.2.18"
}
},
"node_modules/svelte-tags-input": { "node_modules/svelte-tags-input": {
"version": "6.0.1", "version": "6.0.1",
"resolved": "https://registry.npmjs.org/svelte-tags-input/-/svelte-tags-input-6.0.1.tgz", "resolved": "https://registry.npmjs.org/svelte-tags-input/-/svelte-tags-input-6.0.1.tgz",

1
package.json
View File

@ -95,6 +95,7 @@
"svelte-progress-bar": "^3.0.2", "svelte-progress-bar": "^3.0.2",
"svelte-range-slider-pips": "^2.3.1", "svelte-range-slider-pips": "^2.3.1",
"svelte-sonner": "^0.3.27", "svelte-sonner": "^0.3.27",
"svelte-splitpanes": "^8.0.5",
"svelte-tags-input": "^6.0.0", "svelte-tags-input": "^6.0.0",
"svelte-tiny-virtual-list": "^2.1.2", "svelte-tiny-virtual-list": "^2.1.2",
"tailwind-merge": "^2.4.0", "tailwind-merge": "^2.4.0",

583
src/routes/+layout.svelte
View File

@ -41,6 +41,8 @@
import MessageCircle from "lucide-svelte/icons/message-circle"; import MessageCircle from "lucide-svelte/icons/message-circle";
import AudioLine from "lucide-svelte/icons/audio-lines"; import AudioLine from "lucide-svelte/icons/audio-lines";
import { Pane, Splitpanes } from 'svelte-splitpanes';
export let data; export let data;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
@ -262,6 +264,9 @@ $: {
<div class="app {$page?.url?.pathname === '/' ? 'bg-[#000]' : ''}"> <div class="app {$page?.url?.pathname === '/' ? 'bg-[#000]' : ''}">
{#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] 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"> 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">
@ -312,249 +317,10 @@ $: {
{:else } {:else }
<div class="flex min-h-screen w-full flex-col bg-[#09090B]"> <div class="flex min-h-screen w-full flex-col bg-[#09090B]">
<aside class="fixed overflow-y-scroll scroller overflow-hidden inset-y-0 left-0 z-50 hidden 3xl:flex w-72 flex-col 3xl:border-r 3xl:border-gray-800 bg-[#141417]">
<nav class="flex flex-col items-center mr-auto gap-y-4 3xl:py-5 w-full">
<a
href="/"
class="-ml-3 mb-5 flex justify-end items-center h-9 w-9 shrink-0 gap-2 rounded-full text-lg font-semibold text-primary-foreground md:h-10 md:w-10 md:text-base"
>
<img class="avatar w-9 3xl:w-12 rounded-full" src={cloudFrontUrl+"/assets/stocknear_logo.png"} />
<span class="text-white text-xl">Stocknear</span>
</a>
<a href="/" class="flex flex-row items-center ml-9 w-full"> <Splitpanes class="w-full" theme="no-splitter" horizontal dblClickSplitter={false}>
<div class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8"> <Pane class="w-full navbar sticky {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} top-0 z-40 bg-[#09090B] border-b border-gray-800 flex h-14 items-center gap-4 px-4 sm:h-auto sm:px-6" size={6} minSize={10} maxSize={6}>
<Home class="h-5.5 w-5.5" />
</div>
<span class="ml-3 text-white">Home</span>
</a>
<div class="flex flex-row items-center ml-9 w-full mt-3">
<Accordion.Root class="w-full">
<Accordion.Item value="item-1">
<Accordion.Trigger class="">
<Stock class="h-5.5 w-5.5 mr-3 text-white ml-1"/>
<span class="text-white ml-1 mr-auto">Stocks</span>
</Accordion.Trigger>
<Accordion.Content class="border-l border-gray-500 ml-2 mt-5">
<div class="flex flex-col items-start">
<a href="/analysts" class="text-[1rem] text-white ml-4 mt-4">Top Analyst</a>
<a href="/analysts/top-stocks" class="text-[1rem] text-white ml-4 mt-4">Top Analyst Stocks</a>
<a href="/most-shorted-stocks" class="text-[1rem] text-white ml-4 mt-4">Shorted Stocks</a>
<a href="/stock-screener" class="text-[1rem] text-white ml-4 mt-4">Stock Screener</a>
<a href="/market-mover" class="text-[1rem] text-white ml-4 mt-4">Market Mover</a>
<a href="/heatmaps" class="text-[1rem] text-white ml-4 mt-4">Heatmaps</a>
<a href="/list" class="text-[1rem] text-white ml-4 mt-4">Stock Lists</a>
</div>
</Accordion.Content
>
</Accordion.Item>
</Accordion.Root>
</div>
<div class="flex flex-row items-center ml-9 w-full mt-3">
<Accordion.Root class="w-full">
<Accordion.Item value="item-1">
<Accordion.Trigger class="">
<Layers class="h-5.5 w-5.5 mr-3 text-white ml-1"/>
<span class="text-white ml-1 mr-auto">ETFs</span>
</Accordion.Trigger>
<Accordion.Content class="border-l border-gray-500 ml-2 mt-5">
<div class="flex flex-col items-start">
<a href="/etf/new-launches" class="text-[1rem] text-white ml-4 mt-4">New Launches</a>
<a href="/etf/etf-providers" class="text-[1rem] text-white ml-4 mt-4">ETF Providers</a>
</div>
</Accordion.Content
>
</Accordion.Item>
</Accordion.Root>
</div>
<div class="flex flex-row items-center ml-9 w-full mt-3">
<Accordion.Root class="w-full">
<Accordion.Item value="item-1">
<Accordion.Trigger class="">
<Calendar class="h-5.5 w-5.5 mr-3 text-white ml-1"/>
<span class="text-white ml-1 mr-auto">Calendar</span>
</Accordion.Trigger>
<Accordion.Content class="border-l border-gray-500 ml-2 mt-5">
<div class="flex flex-col items-start">
<a href="/dividends-calendar" class="text-[1rem] text-white ml-4 mt-4">Dividends Calendar</a>
<a href="/earnings-calendar" class="text-[1rem] text-white ml-4 mt-4">Earnings Calendar</a>
<a href="/ipos/2024" class="text-[1rem] text-white ml-4 mt-4">IPO Calendar</a>
<!--<a href="/fda-calendar" class="text-[1rem] text-white ml-4 mt-4">FDA Calendar</a>-->
<a href="/economic-calendar" class="text-[1rem] text-white ml-4 mt-4">Economic Calendar</a>
<a href="/stock-splits-calendar" class="text-[1rem] text-white ml-4 mt-4">Stock Splits Calendar</a>
</div>
</Accordion.Content
>
</Accordion.Item>
</Accordion.Root>
</div>
<div class="flex flex-row items-center ml-9 w-full mt-3">
<Accordion.Root class="w-full">
<Accordion.Item value="item-1">
<Accordion.Trigger class="">
<Option class="h-5.5 w-5.5 mr-3 text-white ml-1"/>
<span class="text-white ml-1 mr-auto">Options</span>
</Accordion.Trigger>
<Accordion.Content class="border-l border-gray-500 ml-2 mt-5">
<div class="flex flex-col items-start">
<a href="/options-flow" class="text-[1rem] text-white ml-4 mt-4">Options Flow</a>
<a href="/options-zero-dte" class="text-[1rem] text-white ml-4 mt-4">0DTE Flow</a>
</div>
</Accordion.Content
>
</Accordion.Item>
</Accordion.Root>
</div>
<div class="flex flex-row items-center ml-9 w-full mt-3">
<Accordion.Root class="w-full">
<Accordion.Item value="item-1">
<Accordion.Trigger class="">
<HandShake class="h-5.5 w-5.5 mr-3 text-white ml-1"/>
<span class="text-white ml-1 mr-auto">Congress</span>
</Accordion.Trigger>
<Accordion.Content class="border-l border-gray-500 ml-2 mt-5">
<div class="flex flex-col items-start">
<div class="flex flex-col items-start">
<a href="/politicians/flow-data" class="text-[1rem] text-white ml-4 mt-4">Congress Flow</a>
<a href="/politicians" class="text-[1rem] text-white ml-4 mt-4">All Politicians</a>
</div>
</div>
</Accordion.Content
>
</Accordion.Item>
</Accordion.Root>
</div>
<div class="flex flex-row items-center ml-9 w-full mt-3">
<Accordion.Root class="w-full">
<Accordion.Item value="item-1">
<Accordion.Trigger class="">
<AudioLine class="h-5.5 w-5.5 mr-3 text-white ml-1"/>
<span class="text-white ml-1 mr-auto">Tracker Datasets</span>
</Accordion.Trigger>
<Accordion.Content class="border-l border-gray-500 ml-2 mt-5">
<div class="flex flex-col items-start">
<a href="/cramer-tracker" class="text-[1rem] text-white ml-4 mt-4">Jim Cramer Tracker</a>
<a href="/most-retail-volume" class="text-[1rem] text-white ml-4 mt-4">Retail Trader Tracker</a>
<a href="/reddit-tracker" class="text-[1rem] text-white ml-4 mt-4">Reddit Tracker</a>
</div>
</Accordion.Content
>
</Accordion.Item>
</Accordion.Root>
</div>
<!--
<a href="/dark-pool-flow" class="flex flex-row items-center ml-9 w-full mt-3">
<div
class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8"
>
<Box class="h-5.5 w-5.5" />
</div>
<span class="ml-3 text-white">Dark Pool</span>
</a>
-->
<a href="/hedge-funds" class="flex flex-row items-center ml-9 w-full mt-3">
<div
class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8"
>
<Boxes class="h-5.5 w-5.5" />
</div>
<span class="ml-3 text-white">Hedge Funds</span>
</a>
<a href="/market-news" class="flex flex-row items-center ml-9 w-full mt-3">
<div
class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8"
>
<Newspaper class="h-5.5 w-5.5" />
</div>
<span class="ml-3 text-white">News</span>
</a>
<a href="/community" class="flex flex-row items-center ml-9 w-full mt-3">
<div
class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8"
>
<MessageCircle class="h-5.5 w-5.5" />
</div>
<span class="ml-3 text-white">Community</span>
</a>
</nav>
{#if data?.user?.tier === 'Free' || data?.user?.freeTrial === true}
<div class="mt-auto p-4 ">
<Card.Root
data-x-chunk-name="dashboard-02-chunk-0"
data-x-chunk-description="A card with a call to action"
>
<Card.Header class="p-2 pt-0 md:p-4">
<Card.Title>Upgrade to Pro</Card.Title>
<Card.Description>
{#if data?.user?.freeTrial === true}
Your free trial will be expired soon.
Upgrade now for unlimited access to all features!
{:else}
Unlock all features of the platform and level up your trading.
{/if}
</Card.Description>
</Card.Header>
<Card.Content class="p-2 pt-0 md:p-4 md:pt-0">
<a href="/pricing" class="flex justify-center items-center text-center rounded-lg text-sm py-2 m-auto text-center w-full bg-white text-black font-semibold hover:bg-white/80">
Upgrade
</a>
</Card.Content>
</Card.Root>
</div>
{/if}
</aside>
<div class="flex flex-col">
<header class="navbar {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} sticky top-0 z-40 bg-[#09090B] border-b border-gray-800 flex h-14 items-center gap-4 px-4 sm:h-auto sm:px-6">
<Sheet.Root> <Sheet.Root>
<Sheet.Trigger asChild let:builder> <Sheet.Trigger asChild let:builder>
<Button builders={[builder]} size="icon" class="sm:xl bg-[#09090B] text-white sm:hover:bg-[#27272A] border-none"> <Button builders={[builder]} size="icon" class="sm:xl bg-[#09090B] text-white sm:hover:bg-[#27272A] border-none">
@ -968,28 +734,353 @@ $: {
</DropdownMenu.Content> </DropdownMenu.Content>
</DropdownMenu.Root> </DropdownMenu.Root>
</header>
<main class="w-full"> </Pane>
<Pane>
<Splitpanes class="w-full" theme="modern-theme">
{#if $screenWidth >= 1536}
<Pane class="" size={14} minSize={6}>
<aside class="fixed overflow-y-scroll scroller overflow-hidden inset-y-0 left-0 z-50 hidden 3xl:flex w-72 flex-col 3xl:border-r 3xl:border-gray-800 bg-[#141417]">
<nav class="flex flex-col items-center mr-auto gap-y-4 3xl:py-5 w-full">
<a
href="/"
class="-ml-3 mb-5 flex justify-end items-center h-9 w-9 shrink-0 gap-2 rounded-full text-lg font-semibold text-primary-foreground md:h-10 md:w-10 md:text-base"
>
<img class="avatar w-9 3xl:w-12 rounded-full" src={cloudFrontUrl+"/assets/stocknear_logo.png"} />
<span class="text-white text-xl">Stocknear</span>
</a>
<a href="/" class="flex flex-row items-center ml-9 w-full">
<div class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8">
<Home class="h-5.5 w-5.5" />
</div>
<span class="ml-3 text-white">Home</span>
</a>
<div class="flex flex-row items-center ml-9 w-full mt-3">
<Accordion.Root class="w-full">
<Accordion.Item value="item-1">
<Accordion.Trigger class="">
<Stock class="h-5.5 w-5.5 mr-3 text-white ml-1"/>
<span class="text-white ml-1 mr-auto">Stocks</span>
</Accordion.Trigger>
<Accordion.Content class="border-l border-gray-500 ml-2 mt-5">
<div class="flex flex-col items-start">
<a href="/analysts" class="text-[1rem] text-white ml-4 mt-4">Top Analyst</a>
<a href="/analysts/top-stocks" class="text-[1rem] text-white ml-4 mt-4">Top Analyst Stocks</a>
<a href="/most-shorted-stocks" class="text-[1rem] text-white ml-4 mt-4">Shorted Stocks</a>
<a href="/stock-screener" class="text-[1rem] text-white ml-4 mt-4">Stock Screener</a>
<a href="/market-mover" class="text-[1rem] text-white ml-4 mt-4">Market Mover</a>
<a href="/heatmaps" class="text-[1rem] text-white ml-4 mt-4">Heatmaps</a>
<a href="/list" class="text-[1rem] text-white ml-4 mt-4">Stock Lists</a>
</div>
</Accordion.Content
>
</Accordion.Item>
</Accordion.Root>
</div>
<div class="flex flex-row items-center ml-9 w-full mt-3">
<Accordion.Root class="w-full">
<Accordion.Item value="item-1">
<Accordion.Trigger class="">
<Layers class="h-5.5 w-5.5 mr-3 text-white ml-1"/>
<span class="text-white ml-1 mr-auto">ETFs</span>
</Accordion.Trigger>
<Accordion.Content class="border-l border-gray-500 ml-2 mt-5">
<div class="flex flex-col items-start">
<a href="/etf/new-launches" class="text-[1rem] text-white ml-4 mt-4">New Launches</a>
<a href="/etf/etf-providers" class="text-[1rem] text-white ml-4 mt-4">ETF Providers</a>
</div>
</Accordion.Content
>
</Accordion.Item>
</Accordion.Root>
</div>
<div class="flex flex-row items-center ml-9 w-full mt-3">
<Accordion.Root class="w-full">
<Accordion.Item value="item-1">
<Accordion.Trigger class="">
<Calendar class="h-5.5 w-5.5 mr-3 text-white ml-1"/>
<span class="text-white ml-1 mr-auto">Calendar</span>
</Accordion.Trigger>
<Accordion.Content class="border-l border-gray-500 ml-2 mt-5">
<div class="flex flex-col items-start">
<a href="/dividends-calendar" class="text-[1rem] text-white ml-4 mt-4">Dividends Calendar</a>
<a href="/earnings-calendar" class="text-[1rem] text-white ml-4 mt-4">Earnings Calendar</a>
<a href="/ipos/2024" class="text-[1rem] text-white ml-4 mt-4">IPO Calendar</a>
<!--<a href="/fda-calendar" class="text-[1rem] text-white ml-4 mt-4">FDA Calendar</a>-->
<a href="/economic-calendar" class="text-[1rem] text-white ml-4 mt-4">Economic Calendar</a>
<a href="/stock-splits-calendar" class="text-[1rem] text-white ml-4 mt-4">Stock Splits Calendar</a>
</div>
</Accordion.Content
>
</Accordion.Item>
</Accordion.Root>
</div>
<div class="flex flex-row items-center ml-9 w-full mt-3">
<Accordion.Root class="w-full">
<Accordion.Item value="item-1">
<Accordion.Trigger class="">
<Option class="h-5.5 w-5.5 mr-3 text-white ml-1"/>
<span class="text-white ml-1 mr-auto">Options</span>
</Accordion.Trigger>
<Accordion.Content class="border-l border-gray-500 ml-2 mt-5">
<div class="flex flex-col items-start">
<a href="/options-flow" class="text-[1rem] text-white ml-4 mt-4">Options Flow</a>
<a href="/options-zero-dte" class="text-[1rem] text-white ml-4 mt-4">0DTE Flow</a>
</div>
</Accordion.Content
>
</Accordion.Item>
</Accordion.Root>
</div>
<div class="flex flex-row items-center ml-9 w-full mt-3">
<Accordion.Root class="w-full">
<Accordion.Item value="item-1">
<Accordion.Trigger class="">
<HandShake class="h-5.5 w-5.5 mr-3 text-white ml-1"/>
<span class="text-white ml-1 mr-auto">Congress</span>
</Accordion.Trigger>
<Accordion.Content class="border-l border-gray-500 ml-2 mt-5">
<div class="flex flex-col items-start">
<div class="flex flex-col items-start">
<a href="/politicians/flow-data" class="text-[1rem] text-white ml-4 mt-4">Congress Flow</a>
<a href="/politicians" class="text-[1rem] text-white ml-4 mt-4">All Politicians</a>
</div>
</div>
</Accordion.Content
>
</Accordion.Item>
</Accordion.Root>
</div>
<div class="flex flex-row items-center ml-9 w-full mt-3">
<Accordion.Root class="w-full">
<Accordion.Item value="item-1">
<Accordion.Trigger class="">
<AudioLine class="h-5.5 w-5.5 mr-3 text-white ml-1"/>
<span class="text-white ml-1 mr-auto">Tracker Datasets</span>
</Accordion.Trigger>
<Accordion.Content class="border-l border-gray-500 ml-2 mt-5">
<div class="flex flex-col items-start">
<a href="/cramer-tracker" class="text-[1rem] text-white ml-4 mt-4">Jim Cramer Tracker</a>
<a href="/most-retail-volume" class="text-[1rem] text-white ml-4 mt-4">Retail Trader Tracker</a>
<a href="/reddit-tracker" class="text-[1rem] text-white ml-4 mt-4">Reddit Tracker</a>
</div>
</Accordion.Content
>
</Accordion.Item>
</Accordion.Root>
</div>
<!--
<a href="/dark-pool-flow" class="flex flex-row items-center ml-9 w-full mt-3">
<div
class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8"
>
<Box class="h-5.5 w-5.5" />
</div>
<span class="ml-3 text-white">Dark Pool</span>
</a>
-->
<a href="/hedge-funds" class="flex flex-row items-center ml-9 w-full mt-3">
<div
class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8"
>
<Boxes class="h-5.5 w-5.5" />
</div>
<span class="ml-3 text-white">Hedge Funds</span>
</a>
<a href="/market-news" class="flex flex-row items-center ml-9 w-full mt-3">
<div
class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8"
>
<Newspaper class="h-5.5 w-5.5" />
</div>
<span class="ml-3 text-white">News</span>
</a>
<a href="/community" class="flex flex-row items-center ml-9 w-full mt-3">
<div
class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8"
>
<MessageCircle class="h-5.5 w-5.5" />
</div>
<span class="ml-3 text-white">Community</span>
</a>
</nav>
{#if data?.user?.tier === 'Free' || data?.user?.freeTrial === true}
<div class="mt-auto p-4 ">
<Card.Root
data-x-chunk-name="dashboard-02-chunk-0"
data-x-chunk-description="A card with a call to action"
>
<Card.Header class="p-2 pt-0 md:p-4">
<Card.Title>Upgrade to Pro</Card.Title>
<Card.Description>
{#if data?.user?.freeTrial === true}
Your free trial will be expired soon.
Upgrade now for unlimited access to all features!
{:else}
Unlock all features of the platform and level up your trading.
{/if}
</Card.Description>
</Card.Header>
<Card.Content class="p-2 pt-0 md:p-4 md:pt-0">
<a href="/pricing" class="flex justify-center items-center text-center rounded-lg text-sm py-2 m-auto text-center w-full bg-white text-black font-semibold hover:bg-white/80">
Upgrade
</a>
</Card.Content>
</Card.Root>
</div>
{/if}
</aside>
</Pane>
{/if}
<Pane class="w-full">
<main class="w-full overflow-y-auto bg-[#09090B] sm:p-4">
<slot /> <slot />
<Toaster class="bg-[#1A1A27] text-white text-medium"/> <Toaster class="bg-[#1A1A27] text-white text-medium"/>
{#if Cookie && $showCookieConsent === true} {#if Cookie && $showCookieConsent === true}
<Cookie /> <Cookie />
{/if} {/if}
</main>
</Pane>
</Splitpanes>
</Pane>
<Pane size={6} minSize={6} maxSize={6}>
{#if !hideFooter} {#if !hideFooter}
<Footer/> <Footer/>
{/if} {/if}
</main> </Pane>
</div> </Splitpanes>
</div> </div>
{/if} {/if}
</div> </div>
<style>
<style global lang="scss">
.scroller { .scroller {
scrollbar-width: thin; scrollbar-width: thin;
} }
.splitpanes.modern-theme {
.splitpanes__pane {
background-color: #f8f8f8;
}
.splitpanes__splitter {
background-color: #ccc;
position: relative;
&:before {
content: '';
position: absolute;
left: 0;
top: 0;
transition: opacity 0.4s;
background-color: #2db9d2;
opacity: 0;
z-index: 1;
}
&:hover:before {
opacity: 1;
}
&.splitpanes__splitter__active {
z-index: 2; /* Fix an issue of overlap fighting with a near hovered splitter */
}
}
}
.modern-theme {
&.splitpanes--vertical > .splitpanes__splitter:before {
left: -3px;
right: -3px;
height: 100%;
cursor: col-resize;
}
&.splitpanes--horizontal > .splitpanes__splitter:before {
top: -3px;
bottom: -3px;
width: 100%;
cursor: row-resize;
}
}
.splitpanes.no-splitter {
.splitpanes__pane {
background-color: #f8f8f8;
}
.splitpanes__splitter {
background-color: #ccc;
position: relative;
}
}
.no-splitter {
&.splitpanes--horizontal > .splitpanes__splitter:before {
width: 0.125rem;
pointer-events: none;
cursor: none;
}
&.splitpanes--vertical > .splitpanes__splitter:before {
height: 0.125rem;
pointer-events: none;
cursor: none;
}
}
</style> </style>

8
src/routes/community/+page.svelte
View File

@ -410,18 +410,18 @@ $: {
<body class="bg-[#09090B] text-slate-200 sm:mt-5 "> <body class="bg-[#09090B] text-slate-200 m-auto sm:mt-5 max-w-3xl sm:max-w-screen-xl">
<!-- Page wrapper --> <!-- Page wrapper -->
<div class="flex flex-col min-h-screen overflow-hidden pl-0 lg:pl-20 m-auto w-full max-w-6xl supports-[overflow:clip]:overflow-clip pb-40"> <div class="flex flex-col min-h-screen overflow-hidden pl-0 lg:pl-20 m-auto w-full supports-[overflow:clip]:overflow-clip pb-40">
<main class="m-auto w-full max-w-3xl lg:max-w-6xl"> <main class="m-auto w-full ">
<!--Start Header--> <!--Start Header-->
<div class="w-full max-w-6xl sm:rounded-2xl m-auto h-44 sm:h-60 shadow-sm shadow-black bg-center bg-cover bg-no-repeat" style="background-image: url('{communityBanner}');" /> <div class="w-full sm:rounded-2xl m-auto h-44 sm:h-60 shadow-sm shadow-black bg-center bg-cover bg-no-repeat" style="background-image: url('{communityBanner}');" />
<!--End Header--> <!--End Header-->

25
src/routes/corporate-lobbying-tracker/+page.svelte
View File

@ -101,7 +101,16 @@ function changeOrder(state:string) {
<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-40"> <section class="sm:pl-10 w-full max-w-3xl sm:max-w-screen-lg xxl:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40">
<div class="w-full overflow-hidden m-auto">
<div class="sm:p-0 flex justify-center m-auto w-full overflow-hidden ">
<div class="relative flex justify-center m-auto items-center overflow-hidden w-full">
<main class="w-full">
<div class="text-sm breadcrumbs ml-4"> <div class="text-sm breadcrumbs ml-4">
<ul> <ul>
@ -110,13 +119,7 @@ function changeOrder(state:string) {
</ul> </ul>
</div> </div>
<div class="w-full max-w-4xl overflow-hidden m-auto mt-5"> <div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden max-w-4xl">
<div class="relative flex justify-center items-center overflow-hidden w-full">
<main class="w-full">
<div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
<!-- Start Column --> <!-- Start Column -->
@ -170,7 +173,7 @@ function changeOrder(state:string) {
<div class="w-screen sm:w-full m-auto mt-20 sm:mt-10"> <div class="w-screen sm:w-full m-auto mt-20 sm:mt-10">
<div class="w-screen sm:w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll sm:overflow-hidden"> <div class="w-screen sm:w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll lg:overflow-hidden">
<table class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"> <table class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
<thead> <thead>
<tr class="bg-[#09090B]"> <tr class="bg-[#09090B]">
@ -241,6 +244,8 @@ function changeOrder(state:string) {
</div> </div>
{:else} {:else}
<div class="flex justify-center items-center h-80"> <div class="flex justify-center items-center h-80">
<div class="relative"> <div class="relative">
@ -253,6 +258,8 @@ function changeOrder(state:string) {
</main> </main>
</div> </div>
</div> </div>

11
src/routes/home/+page.svelte
View File

@ -176,8 +176,8 @@ onMount( async() => {
<div class="w-full max-w-screen overflow-hidden m-auto min-h-screen bg-[#09090B]"> <div class="w-full max-w-screen overflow-hidden m-auto min-h-screen bg-[#09090B]">
<div class="flex flex-col w-full max-w-7xl m-auto justify-center items-center"> <div class="flex flex-col w-full xl:max-w-screen-2xl m-auto justify-center items-center">
<div class="text-center mb-10 w-full px-4 sm:px-3 mt-10 3xl:ml-20"> <div class="text-center mb-10 w-full px-4 sm:px-3 mt-10 ">
{#if Feedback} {#if Feedback}
<Feedback data={data} /> <Feedback data={data} />
@ -388,7 +388,7 @@ onMount( async() => {
<Card.Content> <Card.Content>
<ul style="padding-left: 5px;"> <ul style="padding-left: 5px;">
{#each data?.getDashboard?.upcomingEarnings as item} {#each data?.getDashboard?.upcomingEarnings as item}
<li style="margin-left: 8px; line-height: 22px; margin-bottom: 20px; list-style-type: disc;"> <li style="margin-left: 8px; line-height: 22px; margin-bottom: 30px; list-style-type: disc;">
<strong>{item?.name}</strong> (<a href="/stocks/{item?.symbol}" class="text-blue-400 sm:hover:text-white">{item?.symbol}</a>) <strong>{item?.name}</strong> (<a href="/stocks/{item?.symbol}" class="text-blue-400 sm:hover:text-white">{item?.symbol}</a>)
{['Monday', 'Tuesday', 'Wednesday', 'Thursday'].includes(new Date().toLocaleDateString('en-US', { weekday: 'long' })) ? "will report tomorrow" : "will report monday"} {['Monday', 'Tuesday', 'Wednesday', 'Thursday'].includes(new Date().toLocaleDateString('en-US', { weekday: 'long' })) ? "will report tomorrow" : "will report monday"}
{#if item?.time} {#if item?.time}
@ -400,7 +400,6 @@ onMount( async() => {
during market. during market.
{/if} {/if}
{/if}Analysts estimate {abbreviateNumber(item?.revenueEst,true)} in revenue ({((item?.revenueEst/item?.revenuePrior-1)*100)?.toFixed(2)}% YoY) and ${item?.epsEst} in earnings per share ({((item?.epsEst/item?.epsPrior-1)*100)?.toFixed(2)}% YoY).</li> {/if}Analysts estimate {abbreviateNumber(item?.revenueEst,true)} in revenue ({((item?.revenueEst/item?.revenuePrior-1)*100)?.toFixed(2)}% YoY) and ${item?.epsEst} in earnings per share ({((item?.epsEst/item?.epsPrior-1)*100)?.toFixed(2)}% YoY).</li>
<div class="border-b w-11/12 m-auto border-gray-500 mb-5 mt-5"></div>
{/each} {/each}
</ul> </ul>
@ -423,10 +422,10 @@ onMount( async() => {
<li style="color: #fff; line-height: 22px; margin-top:10px; margin-left: 30px; margin-bottom: 10px; list-style-type: disc;"> <li style="color: #fff; line-height: 22px; margin-top:10px; margin-left: 30px; margin-bottom: 10px; list-style-type: disc;">
Revenue of {abbreviateNumber(item?.revenue,true)} ({(item?.revenue/item?.revenuePrior-1) > 0 ? '+' :''}{((item?.revenue/item?.revenuePrior-1)*100)?.toFixed(2)}% YoY) {item?.revenueSurprise > 0 ? 'beats' : 'misses'} by {abbreviateNumber(Math.abs(item?.revenueSurprise),true)}. Revenue of {abbreviateNumber(item?.revenue,true)} ({(item?.revenue/item?.revenuePrior-1) > 0 ? '+' :''}{((item?.revenue/item?.revenuePrior-1)*100)?.toFixed(2)}% YoY) {item?.revenueSurprise > 0 ? 'beats' : 'misses'} by {abbreviateNumber(Math.abs(item?.revenueSurprise),true)}.
</li> </li>
<li style="color: #fff; line-height: 22px; margin-top:0px; margin-left: 30px; list-style-type: disc;"> <li style="color: #fff; line-height: 22px; margin-top:0px; margin-left: 30px; margin-bottom: 30px; list-style-type: disc;">
EPS of ${item?.eps} ({(item?.eps/item?.epsPrior-1) > 0 ? '+' :''}{((item?.eps/item?.epsPrior-1)*100)?.toFixed(2)}% YoY) {item?.epsSurprise > 0 ? 'beats' : 'misses'} by ${Math.abs(item?.epsSurprise)?.toFixed(2)}. EPS of ${item?.eps} ({(item?.eps/item?.epsPrior-1) > 0 ? '+' :''}{((item?.eps/item?.epsPrior-1)*100)?.toFixed(2)}% YoY) {item?.epsSurprise > 0 ? 'beats' : 'misses'} by ${Math.abs(item?.epsSurprise)?.toFixed(2)}.
</li> </li>
<div class="border-b w-11/12 m-auto border-gray-500 mb-5 mt-5"></div>
{/each} {/each}
</ul> </ul>

21
src/routes/stocks/[tickerID]/+layout.svelte
View File

@ -396,16 +396,16 @@ $: isScrolled = y > 0;
<svelte:window bind:scrollY={y}/> <svelte:window bind:scrollY={y}/>
<body class="bg-[#09090B] pb-40"> <body class="bg-[#09090B] pb-40 lg:max-w-screen-2xl">
<!-- Page wrapper --> <!-- Page wrapper -->
<div class="flex flex-col min-h-screen overflow-hidden m-auto w-full mt-5 supports-[overflow:clip]:overflow-clip pb-40"> <div class="flex flex-col min-h-screen overflow-hidden w-full supports-[overflow:clip]:overflow-clip pb-40">
<main class="grow"> <main class="grow w-full">
<section> <section class="w-full">
<div class="w-full"> <div class="w-full">
<div class="sm:flex sm:justify-start w-full"> <div class="sm:flex sm:justify-start w-full">
<!--Start Mobile Navbar--> <!--Start Mobile Navbar-->
<div class="navbar w-screen sticky top-0 z-30 bg-[#09090B] sm:hidden "> <header class="navbar w-screen fixed sticky top-0 z-30 bg-[#09090B] sm:hidden" style="top: 0rem;">
<div class="{isScrolled ? 'border-b border-slate-800 ease-in' : 'ease-out'} m-auto w-full"> <div class="{isScrolled ? 'border-b border-slate-800 ease-in' : 'ease-out'} m-auto w-full">
@ -483,21 +483,21 @@ $: isScrolled = y > 0;
</div> </div>
</div> </div>
</div> </header>
<!--End Mobile Navbar--> <!--End Mobile Navbar-->
<div class="w-full xl:w-fit max-w-3xl sm:max-w-7xl m-auto px-3"> <div class="w-full xl:w-fit px-3">
<div class="md:flex md:justify-between md:divide-x md:divide-slate-800"> <div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
<!-- Main content --> <!-- Main content -->
<div class="pb-12 md:pb-20 w-full max-w-3xl lg:max-w-5xl"> <div class="pb-12 md:pb-20 w-full lg:max-w-3xl xl:max-w-5xl">
<div class="md:pr-6 lg:pr-10"> <div class="md:pr-6 lg:pr-10">
<!-----Start-Header-CandleChart-Indicators------> <!-----Start-Header-CandleChart-Indicators------>
<div class="m-auto pl-0 sm:pl-4 max-w-5xl overflow-hidden mb-5 md:mt-10"> <div class="m-auto pl-0 sm:pl-4 overflow-hidden mb-5 md:mt-10">
<div class="hidden sm:flex flex-row w-full justify-between items-center pb-10"> <div class="hidden sm:flex flex-row w-full justify-between items-center pb-10">
<Markethour /> <Markethour />
@ -668,7 +668,7 @@ $: isScrolled = y > 0;
</div> </div>
</div> </div>
<aside class="hidden xl:block w-fit max-w-xl 2xl:w-[120px] m-auto sm:m-0 md:shrink-0 md:pt-10 pb-12 md:pb-20"> <aside class="hidden lg:block w-fit max-w-xl 2xl:w-[120px] m-auto sm:m-0 md:shrink-0 md:pt-10 pb-12 md:pb-20">
<div class="sm:pl-10"> <div class="sm:pl-10">
<!--Start Company Info --> <!--Start Company Info -->
@ -943,5 +943,4 @@ $: isScrolled = y > 0;
background: #09090B; background: #09090B;
} }
</style> </style>