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

lightmode fix index page

Browse Source
This commit is contained in:
MuslemRahimi 2025-04-03 21:55:36 +02:00
parent 3169248abf
commit d69a8dd4e6
7 changed files with 218 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/IndexSidecard.svelte
View File

@ -21,10 +21,10 @@
</script> </script>
<div class="px-0.5 lg:px-0"> <div class="px-0.5 lg:px-0">
<h2 class="mb-2 text-2xl text-white font-semibold"> <h2 class="mb-2 text-2xl font-bold">
About {$indexTicker} About {$indexTicker}
</h2> </h2>
<p class="text-gray-200"> <p>
{description} {description}
</p> </p>
</div> </div>

64
src/routes/index/[tickerID]/+layout.svelte
View File

@ -365,7 +365,7 @@
<svelte:window bind:scrollY={y} /> <svelte:window bind:scrollY={y} />
<body <body
class="bg-default w-full max-w-screen sm:max-w-[1250px] min-h-screen overflow-hidden" class=" w-full max-w-screen sm:max-w-[1250px] min-h-screen overflow-hidden"
> >
<!-- Page wrapper --> <!-- Page wrapper -->
<div class="mt-5 flex flex-col w-full relative w-full"> <div class="mt-5 flex flex-col w-full relative w-full">
@ -374,7 +374,7 @@
<div class="w-full"> <div class="w-full">
<div class="sm:flex sm:justify-start w-full sm:max-w-[1250px]"> <div class="sm:flex sm:justify-start w-full sm:max-w-[1250px]">
<!--Start Mobile Navbar--> <!--Start Mobile Navbar-->
<div class="fixed top-0 left-0 right-0 z-20 bg-default sm:hidden"> <div class="fixed top-0 left-0 right-0 z-20 sm:hidden">
<div class="navbar w-full px-4 py-2"> <div class="navbar w-full px-4 py-2">
<div <div
class="{isScrolled class="{isScrolled
@ -407,10 +407,10 @@
? "hidden" ? "hidden"
: "flex flex-col items-center ml-6 transition-transform ease-in"} : "flex flex-col items-center ml-6 transition-transform ease-in"}
> >
<span class="text-white text-xs font-semibold"> <span class=" text-xs font-semibold">
{$indexTicker} {$indexTicker}
</span> </span>
<span class="text-white text-sm"> <span class=" text-sm">
{#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0} {#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0}
{$currentPortfolioPrice} {$currentPortfolioPrice}
{:else} {:else}
@ -528,7 +528,7 @@
{:else} {:else}
<label <label
for="userLogin" for="userLogin"
class="cursor-pointer shrink-0 text-white mr-4" class="cursor-pointer shrink-0 mr-4"
> >
<svg <svg
class="w-6 h-6 inline-block" class="w-6 h-6 inline-block"
@ -593,7 +593,7 @@
<div class="flex flex-col ml-auto mr-2"> <div class="flex flex-col ml-auto mr-2">
{#if userWatchList?.length !== 0} {#if userWatchList?.length !== 0}
<div <div
class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center" class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative flex items-center justify-center"
> >
<label <label
for="addWatchListModal" for="addWatchListModal"
@ -624,7 +624,7 @@
</div> </div>
{:else if userWatchList?.length === 0} {:else if userWatchList?.length === 0}
<div <div
class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center" class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative flex items-center justify-center"
> >
<label <label
on:click={() => on:click={() =>
@ -658,11 +658,11 @@
</div> </div>
{:else} {:else}
<div <div
class="shrink-0 ml-auto mr-2 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center" class="shrink-0 ml-auto mr-2 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative flex items-center justify-center"
> >
<label <label
for="userLogin" for="userLogin"
class="cursor-pointer shrink-0 text-white" class="cursor-pointer shrink-0"
> >
<svg <svg
class="w-7 h-7 inline-block" class="w-7 h-7 inline-block"
@ -681,12 +681,12 @@
<!--Start Price Alert --> <!--Start Price Alert -->
<div <div
class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center" class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative flex items-center justify-center"
> >
<label <label
on:click={() => ($openPriceAlert = true)} on:click={() => ($openPriceAlert = true)}
for={data?.user ? "priceAlertModal" : "userLogin"} for={data?.user ? "priceAlertModal" : "userLogin"}
class="cursor-pointer shrink-0 text-white" class="cursor-pointer shrink-0"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -721,9 +721,7 @@
<div <div
class="flex flex-row justify-between items-center w-full sm:-mt-[50px] mb-5 sm:mb-10" class="flex flex-row justify-between items-center w-full sm:-mt-[50px] mb-5 sm:mb-10"
> >
<h1 <h1 class="text-2xl lg:text-3xl font-bold">
class="text-2xl lg:text-3xl font-bold text-white"
>
{$displayCompanyName?.length > charNumber {$displayCompanyName?.length > charNumber
? $displayCompanyName?.slice(0, charNumber) + ? $displayCompanyName?.slice(0, charNumber) +
"..." "..."
@ -735,7 +733,7 @@
</div> </div>
<div <div
class="-mt-5 sm:-mt-8 mb-5 flex flex-row items-end space-x-2 xs:space-x-3 sm:space-x-5 text-white" class="-mt-5 sm:-mt-8 mb-5 flex flex-row items-end space-x-2 xs:space-x-3 sm:space-x-5"
> >
<div class="w-full max-w-[50%] whitespace-nowrap"> <div class="w-full max-w-[50%] whitespace-nowrap">
<div <div
@ -757,14 +755,14 @@
<span <span
class={displayLegend?.change >= 0 class={displayLegend?.change >= 0
? "before:content-['+'] text-green-800 dark:text-[#00FC50]" ? "before:content-['+'] text-green-800 dark:text-[#00FC50]"
: "text-[#FF2F1F]"} : "text-red-800 dark:text-[#FF2F1F]"}
> >
{displayLegend?.change} {displayLegend?.change}
</span> </span>
<span <span
class={displayLegend?.changesPercentage >= 0 class={displayLegend?.changesPercentage >= 0
? "text-[#00FC50]" ? "text-green-800 dark:text-[#00FC50]"
: "text-[#FF2F1F]"} : "text-red-800 dark:text-[#FF2F1F]"}
> >
({displayLegend?.changesPercentage}%) ({displayLegend?.changesPercentage}%)
</span> </span>
@ -861,18 +859,16 @@
<!--Start Ticker Section--> <!--Start Ticker Section-->
<nav <nav
class="sm:ml-4 border-b-[2px] overflow-x-auto md:overflow-hidden whitespace-nowrap" class="sm:ml-4 border-b-[2px] border-[#2C6288] dark:border-white overflow-x-auto whitespace-nowrap no-scrollbar"
>
<ul
class="flex flex-row items-center w-full text-[1rem] text-white"
> >
<ul class="flex flex-row items-center w-full text-[1rem]">
<a <a
href={`/index/${$indexTicker}`} href={`/index/${$indexTicker}`}
on:click={() => changeSection("overview")} on:click={() => changeSection("overview")}
class="p-2 px-5 cursor-pointer {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'overview' 'overview'
? 'text-white bg-secondary font-semibold' ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}" : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
> >
Overview Overview
</a> </a>
@ -882,8 +878,8 @@
on:click={() => changeSection("holdings")} on:click={() => changeSection("holdings")}
class="p-2 px-5 cursor-pointer {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'holdings' 'holdings'
? 'text-white bg-secondary font-semibold' ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}" : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
> >
Holdings Holdings
</a> </a>
@ -892,8 +888,8 @@
on:click={() => changeSection("options")} on:click={() => changeSection("options")}
class="p-2 px-5 cursor-pointer {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'options' 'options'
? 'text-white bg-secondary font-semibold' ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}" : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
> >
Options Options
</a> </a>
@ -903,8 +899,8 @@
on:click={() => changeSection("history")} on:click={() => changeSection("history")}
class="p-2 px-5 cursor-pointer {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'history' 'history'
? 'text-white bg-secondary font-semibold' ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}" : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
> >
History History
</a> </a>
@ -948,12 +944,12 @@
<div class="modal-box rounded-md w-full bg-secondary border border-gray-600"> <div class="modal-box rounded-md w-full bg-secondary border border-gray-600">
<label <label
for="addWatchListModal" for="addWatchListModal"
class="cursor-pointer bg-secondary absolute right-5 top-2 text-[1rem] sm:text-[1.5rem] text-white" class="cursor-pointer bg-secondary absolute right-5 top-2 text-[1rem] sm:text-[1.5rem]"
> >
✕ ✕
</label> </label>
<div class="text-white"> <div class="">
<h3 class="font-semibold text-lg sm:text-xl mb-10">Add to Watchlist</h3> <h3 class="font-semibold text-lg sm:text-xl mb-10">Add to Watchlist</h3>
<div class="flex flex-col items-center w-full max-w-3xl bg-secondary"> <div class="flex flex-col items-center w-full max-w-3xl bg-secondary">
@ -970,10 +966,10 @@
: 'border-gray-600'}" : 'border-gray-600'}"
> >
<div class="flex flex-col items-center w-full"> <div class="flex flex-col items-center w-full">
<span class="ml-1 text-white mr-auto"> <span class="ml-1 mr-auto">
{item?.title} {item?.title}
</span> </span>
<span class="ml-1 text-white text-sm mr-auto"> <span class="ml-1 text-sm mr-auto">
{item?.ticker?.length} {item?.ticker?.length}
{item?.ticker?.length !== 1 ? "Companies" : "Company"} {item?.ticker?.length !== 1 ? "Companies" : "Company"}
</span> </span>

60
src/routes/index/[tickerID]/+page.svelte
View File

@ -187,11 +187,11 @@
// Loop through each point in the shared tooltip // Loop through each point in the shared tooltip
this.points?.forEach((point) => { this.points?.forEach((point) => {
tooltipContent += `<span class="text-white text-[1rem] font-[501]">${point.series.name}: ${point.y}</span><br>`; tooltipContent += `<span class=" text-[1rem] font-[501]">${point.series.name}: ${point.y}</span><br>`;
}); });
// Append the formatted date at the end // Append the formatted date at the end
tooltipContent += `<span class="text-white m-auto text-black text-sm font-normal">${formattedDate}</span><br>`; tooltipContent += `<span class=" m-auto text-black text-sm font-normal">${formattedDate}</span><br>`;
return tooltipContent; return tooltipContent;
}, },
@ -664,7 +664,7 @@
description={`Get a real-time ${data?.companyName} (${$indexTicker}) stock chart, price quote with breaking news, financials, statistics, charts and more.`} description={`Get a real-time ${data?.companyName} (${$indexTicker}) stock chart, price quote with breaking news, financials, statistics, charts and more.`}
/> />
<section class="bg-default min-h-screen pb-40 overflow-hidden w-full"> <section class=" min-h-screen pb-40 overflow-hidden w-full">
<div class="w-full m-auto overflow-hidden"> <div class="w-full m-auto overflow-hidden">
<div <div
class="md:flex md:justify-between md:divide-x md:divide-slate-800 w-full" class="md:flex md:justify-between md:divide-x md:divide-slate-800 w-full"
@ -684,9 +684,7 @@
<div <div
class="flex h-full w-full flex-col items-center justify-center rounded-sm border border-gray-800 p-6 text-center md:p-12" class="flex h-full w-full flex-col items-center justify-center rounded-sm border border-gray-800 p-6 text-center md:p-12"
> >
<div <div class="mb-4 text-[1rem] sm:text-xl font-semibold">
class="mb-4 text-white text-[1rem] sm:text-xl font-semibold"
>
No {displayData} chart data available No {displayData} chart data available
</div> </div>
</div> </div>
@ -708,8 +706,8 @@
<span <span
class="block px-3 py-1 rounded duration-100 ease-in-out class="block px-3 py-1 rounded duration-100 ease-in-out
{displayData === interval {displayData === interval
? 'bg-gray-200 text-muted dark:bg-primary dark:text-white font-semibold' ? 'bg-gray-200 text-muted dark:bg-primary dark: font-semibold'
: 'bg-transparent text-muted dark:text-gray-400 dark:sm:hover:text-white sm:hover:bg-gray-100 dark:sm:hover:bg-primary'}" : 'bg-transparent text-muted dark:text-gray-400 dark:sm:hover: sm:hover:bg-gray-100 dark:sm:hover:bg-primary'}"
> >
{interval} {interval}
</span> </span>
@ -758,14 +756,12 @@
<div <div
class="mt-10 lg:mt-0 order-5 lg:order-1 flex flex-row space-x-2 sm:space-x-3 xs:space-x-4" class="mt-10 lg:mt-0 order-5 lg:order-1 flex flex-row space-x-2 sm:space-x-3 xs:space-x-4"
> >
<table <table class="w-[50%] text-sm sm:text-[1rem] lg:min-w-[250px]">
class="w-[50%] text-sm text-white sm:text-[1rem] lg:min-w-[250px]"
>
<tbody> <tbody>
<tr <tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm sm:text-[1rem]"
>Open</td >Open</td
> >
<td <td
@ -775,9 +771,9 @@
> >
<tr <tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm sm:text-[1rem]"
>Volume</td >Volume</td
> >
<td <td
@ -789,9 +785,9 @@
> >
<tr <tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm sm:text-[1rem]"
>Market Cap</td >Market Cap</td
> >
<td <td
@ -801,9 +797,9 @@
> >
<tr <tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm sm:text-[1rem]"
>Price Avg 50</td >Price Avg 50</td
> >
<td <td
@ -813,9 +809,9 @@
> >
<tr <tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm sm:text-[1rem]"
>Day's Range</td >Day's Range</td
> >
<td <td
@ -827,12 +823,12 @@
> >
</tbody> </tbody>
</table> </table>
<table class="w-[50%] text-sm text-white lg:min-w-[250px]"> <table class="w-[50%] text-sm lg:min-w-[250px]">
<tbody> <tbody>
<tr <tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm sm:text-[1rem]"
>Previous Close</td >Previous Close</td
> >
<td <td
@ -842,9 +838,9 @@
> >
<tr <tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm sm:text-[1rem]"
>Avg. Volume</td >Avg. Volume</td
> >
<td <td
@ -856,9 +852,9 @@
> >
<tr <tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm sm:text-[1rem]"
>Holdings >Holdings
</td> </td>
<td <td
@ -870,9 +866,9 @@
> >
<tr <tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm sm:text-[1rem]"
>Price Avg 200</td >Price Avg 200</td
> >
<td <td
@ -882,9 +878,9 @@
> >
<tr <tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 text-sm sm:text-[1rem]"
>52-Week Range</td >52-Week Range</td
> >
<td <td

101
src/routes/index/[tickerID]/history/+page.svelte
View File

@ -7,11 +7,10 @@
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
import ArrowLogo from "lucide-svelte/icons/move-up-right"; import ArrowLogo from "lucide-svelte/icons/move-up-right";
import SEO from "$lib/components/SEO.svelte"; import SEO from "$lib/components/SEO.svelte";
import { onMount } from "svelte"; import { onMount } from "svelte";
import { removeCompanyStrings } from "$lib/utils";
export let data; export let data;
let isLoaded = false;
let timePeriod = "Daily"; let timePeriod = "Daily";
let rawData = data?.getData || []; let rawData = data?.getData || [];
let originalData = []; let originalData = [];
@ -259,36 +258,34 @@
} }
$: { $: {
if (timePeriod && typeof window !== "undefined") { if (timePeriod) {
isLoaded = false;
rawData = prepareDataset(data?.getData, timePeriod); rawData = prepareDataset(data?.getData, timePeriod);
originalData = rawData; originalData = rawData;
stockList = rawData?.slice(0, 50); stockList = rawData?.slice(0, 50);
isLoaded = true;
} }
} }
</script> </script>
<SEO <SEO
title={`${$displayCompanyName} (${$indexTicker}) Historical Stock Price Data`} title={`${$displayCompanyName} (${$indexTicker}) Stock Price History · Stocknear`}
description={`Get a complete stock price history for ${$displayCompanyName} (${$indexTicker}), starting from its first trading day. Includes open, high, low, close and volume.`} description={`Get a complete stock price history for ${$displayCompanyName} (${$indexTicker}), starting from its first trading day. Includes open, high, low, close and volume.`}
/> />
<section <section
class="bg-default overflow-hidden text-white h-full min-h-screen mb-20 sm:mb-0 w-full mt-2 sm:mt-0" class=" overflow-hidden h-full min-h-screen mb-20 sm:mb-0 w-full mt-2 sm:mt-0"
> >
<div class="w-full overflow-hidden m-auto mt-5"> <div class="w-full overflow-hidden m-auto mt-5">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden"> <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<div <div
class="relative flex justify-center items-start overflow-hidden w-full" class="relative flex justify-center items-start overflow-hidden w-full"
> >
<main class="w-full lg:w-3/4"> <main class="w-full lg:w-3/4 lg:pr-10">
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto"> <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto">
<div <div
class="flex flex-col sm:flex-row items-start w-full sm:justify-between md:space-x-4 md:border-0 w-full mb-5" class="flex flex-col sm:flex-row items-start w-full sm:justify-between md:space-x-4 md:border-0 w-full mb-3"
> >
<h1 class="text-xl sm:text-2xl font-bold mb-3 sm:mb-0"> <h1 class="text-xl sm:text-2xl font-bold mb-3 sm:mb-0">
{$indexTicker} Stock Price History {removeCompanyStrings($displayCompanyName)} Stock Price History
</h1> </h1>
<div <div
class="flex flex-row items-center ml-auto w-fit mt-2 sm:mt-0" class="flex flex-row items-center ml-auto w-fit mt-2 sm:mt-0"
@ -298,11 +295,9 @@
<DropdownMenu.Trigger asChild let:builder> <DropdownMenu.Trigger asChild let:builder>
<Button <Button
builders={[builder]} builders={[builder]}
class="w-fit sm:w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate" class="shadow-sm w-fit border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 rounded-md truncate"
>
<span class="truncate text-white px-1"
>{timePeriod}</span
> >
<span class="truncate px-1">{timePeriod}</span>
<svg <svg
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block" class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
viewBox="0 0 20 20" viewBox="0 0 20 20"
@ -321,20 +316,20 @@
<DropdownMenu.Content <DropdownMenu.Content
class="w-56 h-fit max-h-72 overflow-y-auto scroller" class="w-56 h-fit max-h-72 overflow-y-auto scroller"
> >
<DropdownMenu.Label class="text-gray-400"> <DropdownMenu.Label class="text-muted dark:text-gray-400">
Select time frame Select time frame
</DropdownMenu.Label> </DropdownMenu.Label>
<DropdownMenu.Separator /> <DropdownMenu.Separator />
<DropdownMenu.Group> <DropdownMenu.Group>
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => (timePeriod = "Daily")} on:click={() => (timePeriod = "Daily")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
Daily Daily
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => (timePeriod = "Weekly")} on:click={() => (timePeriod = "Weekly")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
Weekly Weekly
</DropdownMenu.Item> </DropdownMenu.Item>
@ -342,7 +337,7 @@
{#each ["Monthly", "Quarterly", "Annual"] as entry} {#each ["Monthly", "Quarterly", "Annual"] as entry}
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => goto("/pricing")} on:click={() => goto("/pricing")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
{entry} {entry}
<svg <svg
@ -350,7 +345,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
fill="#A3A3A3" fill="currentColor"
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z" d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
/></svg /></svg
> >
@ -359,19 +354,19 @@
{:else} {:else}
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => (timePeriod = "Monthly")} on:click={() => (timePeriod = "Monthly")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
Monthly Monthly
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => (timePeriod = "Quarterly")} on:click={() => (timePeriod = "Quarterly")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
Quarterly Quarterly
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => (timePeriod = "Annual")} on:click={() => (timePeriod = "Annual")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
Annual Annual
</DropdownMenu.Item> </DropdownMenu.Item>
@ -383,9 +378,9 @@
<Button <Button
on:click={() => exportData()} on:click={() => exportData()}
class="ml-2 w-fit border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate" class="shadow-sm ml-2 border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 rounded-md truncate"
> >
<span class="truncate text-white">Download</span> <span class="truncate">Download</span>
<svg <svg
class="{['Pro', 'Plus']?.includes(data?.user?.tier) class="{['Pro', 'Plus']?.includes(data?.user?.tier)
? 'hidden' ? 'hidden'
@ -393,21 +388,20 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
fill="#A3A3A3" fill="currentColor"
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z" d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
/></svg /></svg
> >
</Button> </Button>
</div> </div>
</div> </div>
{#if isLoaded}
{#if rawData?.length !== 0} {#if rawData?.length !== 0}
<div class="w-full m-auto mt-2"> <div class="w-full m-auto">
<div <div
class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto" class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto"
> >
<table <table
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto" class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full border border-gray-300 dark:border-gray-800 m-auto"
> >
<thead> <thead>
<TableHeader {columns} {sortOrders} {sortData} /> <TableHeader {columns} {sortOrders} {sortData} />
@ -416,7 +410,7 @@
<tbody> <tbody>
{#each stockList as item, index} {#each stockList as item, index}
<tr <tr
class="sm:hover:bg-[#245073]/10 border-b border-gray-800 odd:bg-odd {index + class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
1 === 1 ===
rawData?.length && rawData?.length &&
!['Pro', 'Plus']?.includes(data?.user?.tier) !['Pro', 'Plus']?.includes(data?.user?.tier)
@ -424,7 +418,7 @@
: ''}" : ''}"
> >
<td <td
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
> >
{#if timePeriod === "Weekly"} {#if timePeriod === "Weekly"}
Week of {new Date(item?.time).toLocaleString( Week of {new Date(item?.time).toLocaleString(
@ -433,7 +427,7 @@
month: "short", month: "short",
day: "numeric", day: "numeric",
year: "numeric", year: "numeric",
daySuffix: "2-digit", timeZone: "Europe/Berlin",
}, },
)} )}
{:else} {:else}
@ -441,54 +435,52 @@
month: "short", month: "short",
day: "numeric", day: "numeric",
year: "numeric", year: "numeric",
daySuffix: "2-digit", timeZone: "Europe/Berlin",
})} })}
{/if} {/if}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.open?.toFixed(2)} {item?.open?.toFixed(2)}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.high?.toFixed(2)} {item?.high?.toFixed(2)}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.low?.toFixed(2)} {item?.low?.toFixed(2)}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.close?.toFixed(2)} {item?.close?.toFixed(2)}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.change !== null ? item?.change : "n/a"} {item?.change !== null ? item?.change : "n/a"}
</td> </td>
<td <td
class="text-sm sm:text-[1rem] {item?.changesPercentage >= class="text-sm sm:text-[1rem] {item?.changesPercentage >=
0 && item?.changesPercentage !== null 0 && item?.changesPercentage !== null
? "text-[#00FC50] before:content-['+'] " ? "text-green-800 dark:text-[#00FC50] before:content-['+'] "
: item?.changesPercentage < 0 && : item?.changesPercentage < 0 &&
item?.changesPercentage !== null item?.changesPercentage !== null
? 'text-red-800 dark:text-[#FF2F1F]' ? 'text-red-800 dark:text-[#FF2F1F]'
: 'text-white'} text-end" : ''} text-end"
> >
{item?.changesPercentage !== null {item?.changesPercentage !== null
? item?.changesPercentage + "%" ? item?.changesPercentage + "%"
: "n/a"} : "n/a"}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.volume {item?.volume?.toLocaleString("en-US")}
? item?.volume?.toLocaleString("en-US")
: "n/a"}
</td> </td>
</tr> </tr>
{/each} {/each}
@ -501,22 +493,9 @@
text={`No price history are available for ${$displayCompanyName}.`} text={`No price history are available for ${$displayCompanyName}.`}
/> />
{/if} {/if}
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
>
<span
class="loading loading-spinner loading-md text-gray-400"
></span>
</label>
</div>
</div>
{/if}
</div> </div>
</main> </main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4"> <aside class="hidden lg:block relative fixed w-1/4 mt-3">
<div <div
class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100" class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
> >
@ -528,9 +507,7 @@
<h2 class="text-start text-xl font-semibold ml-3"> <h2 class="text-start text-xl font-semibold ml-3">
Stock Screener Stock Screener
</h2> </h2>
<ArrowLogo <ArrowLogo class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:" />
class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
/>
</div> </div>
<span class="p-3 ml-3 mr-3"> <span class="p-3 ml-3 mr-3">
Filter, sort and analyze all stocks to find your next Filter, sort and analyze all stocks to find your next
@ -548,9 +525,7 @@
> >
<div class="w-full flex justify-between items-center p-3 mt-3"> <div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold ml-3">Watchlist</h2> <h2 class="text-start text-xl font-semibold ml-3">Watchlist</h2>
<ArrowLogo <ArrowLogo class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:" />
class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
/>
</div> </div>
<span class="p-3 ml-3 mr-3"> <span class="p-3 ml-3 mr-3">
Keep track of your favorite stocks in real-time. Keep track of your favorite stocks in real-time.

15
src/routes/index/[tickerID]/holdings/+page.svelte
View File

@ -1,8 +1,5 @@
<script lang="ts"> <script lang="ts">
import { import { indexTicker, displayCompanyName } from "$lib/store";
indexTicker,
displayCompanyName,
} from "$lib/store";
import { formatString } from "$lib/utils"; import { formatString } from "$lib/utils";
import Table from "$lib/components/Table/Table.svelte"; import Table from "$lib/components/Table/Table.svelte";
import Infobox from "$lib/components/Infobox.svelte"; import Infobox from "$lib/components/Infobox.svelte";
@ -57,11 +54,13 @@
let htmlOutput = generateStatementInfoHTML(); let htmlOutput = generateStatementInfoHTML();
</script> </script>
<SEO
<SEO title={`${$displayCompanyName} (${$indexTicker}) Holdings List`} description={`Get the Holdings List of ${$displayCompanyName} (${$indexTicker}).`} /> title={`${$displayCompanyName} (${$indexTicker}) Holdings List`}
description={`Get the Holdings List of ${$displayCompanyName} (${$indexTicker}).`}
/>
<section <section
class="bg-default overflow-hidden text-white h-full min-h-screen mb-20 sm:mb-0 w-full mt-2 sm:mt-0" class=" overflow-hidden h-full min-h-screen mb-20 sm:mb-0 w-full mt-2 sm:mt-0"
> >
<div class="flex justify-center m-auto h-full overflow-hidden w-full"> <div class="flex justify-center m-auto h-full overflow-hidden w-full">
<div <div
@ -80,7 +79,7 @@
</div> </div>
{/if} {/if}
</div> </div>
<div class="mt-5 mb-10"> <div class="mt-5 mb-5">
<Infobox text={htmlOutput} /> <Infobox text={htmlOutput} />
</div> </div>

39
src/routes/index/[tickerID]/options/+page.svelte
View File

@ -142,7 +142,7 @@
description={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$indexTicker}).`} description={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$indexTicker}).`}
/> />
<section class="w-full bg-default overflow-hidden text-white min-h-screen"> <section class="w-full overflow-hidden min-h-screen">
<div class="w-full flex h-full overflow-hidden"> <div class="w-full flex h-full overflow-hidden">
<div <div
class="w-full relative flex justify-center items-center overflow-hidden" class="w-full relative flex justify-center items-center overflow-hidden"
@ -160,7 +160,7 @@
{#if rawData?.length > 0} {#if rawData?.length > 0}
{#if optionList?.length !== 0} {#if optionList?.length !== 0}
<h3 class="text-xl sm:text-2xl text-white font-bold text-start"> <h3 class="text-xl sm:text-2xl font-bold text-start">
Historical {$indexTicker} Data Historical {$indexTicker} Data
</h3> </h3>
@ -170,12 +170,27 @@
> >
<thead class="text-muted dark:text-white dark:bg-default"> <thead class="text-muted dark:text-white dark:bg-default">
<tr class=""> <tr class="">
<td class=" font-semibold text-sm text-start">Date</td> <td class=" font-semibold text-sm sm:text-[1rem] text-start"
<td class=" font-semibold text-sm text-end">% Change</td> >Date</td
<td class=" font-semibold text-sm text-end">P/C</td> >
<td class=" font-semibold text-sm text-center">Volume</td> <td class=" font-semibold text-sm sm:text-[1rem] text-end"
<td class=" font-semibold text-sm text-center">C Volume</td> >% Change</td
<td class=" font-semibold text-sm text-center">P Volume</td> >
<td class=" font-semibold text-sm sm:text-[1rem] text-end"
>P/C</td
>
<td
class=" font-semibold text-sm sm:text-[1rem] text-center"
>Volume</td
>
<td
class=" font-semibold text-sm sm:text-[1rem] text-center"
>C Volume</td
>
<td
class=" font-semibold text-sm sm:text-[1rem] text-center"
>P Volume</td
>
<!-- <!--
<td class=" font-semibold text-sm text-end" <td class=" font-semibold text-sm text-end"
>Vol/30D</td >Vol/30D</td
@ -340,11 +355,11 @@
</td> </td>
<td class=" text-sm sm:text-[1rem] text-end"> <td class=" text-sm sm:text-[1rem] text-end">
{#if item?.changeOI >= 0} {#if item?.changeOI >= 0 && item?.changeOI}
<span class="text-green-800 dark:text-[#00FC50]" <span class="text-green-800 dark:text-[#00FC50]"
>+{item?.changeOI?.toLocaleString("en-US")}</span >+{item?.changeOI?.toLocaleString("en-US")}</span
> >
{:else if item?.changeOI < 0} {:else if item?.changeOI < 0 && item?.changeOI}
<span class="text-red-800 dark:text-[#FF2F1F]" <span class="text-red-800 dark:text-[#FF2F1F]"
>{item?.changeOI?.toLocaleString("en-US")} >{item?.changeOI?.toLocaleString("en-US")}
</span> </span>
@ -354,13 +369,13 @@
</td> </td>
<td class=" text-sm sm:text-[1rem] text-end"> <td class=" text-sm sm:text-[1rem] text-end">
{#if item?.changesPercentageOI >= 0} {#if item?.changesPercentageOI >= 0 && item?.changesPercentageOI}
<span class="text-green-800 dark:text-[#00FC50]" <span class="text-green-800 dark:text-[#00FC50]"
>+{item?.changesPercentageOI >= 1000 >+{item?.changesPercentageOI >= 1000
? abbreviateNumber(item?.changesPercentageOI) ? abbreviateNumber(item?.changesPercentageOI)
: item?.changesPercentageOI?.toFixed(2)}%</span : item?.changesPercentageOI?.toFixed(2)}%</span
> >
{:else if item?.changesPercentageOI < 0} {:else if item?.changesPercentageOI < 0 && item?.changesPercentageOI}
<span class="text-red-800 dark:text-[#FF2F1F]" <span class="text-red-800 dark:text-[#FF2F1F]"
>{item?.changesPercentageOI <= -1000 >{item?.changesPercentageOI <= -1000
? abbreviateNumber(item?.changesPercentageOI) ? abbreviateNumber(item?.changesPercentageOI)

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

@ -381,7 +381,7 @@
<svelte:window bind:scrollY={y} /> <svelte:window bind:scrollY={y} />
<body <body
class="text-muted dark:text-white w-full max-w-screen sm:max-w-[1250px] min-h-screen overflow-hidden" class=" w-full max-w-screen sm:max-w-[1250px] min-h-screen overflow-hidden"
> >
<!-- Page wrapper --> <!-- Page wrapper -->
<div class=" flex flex-col w-full relative w-full sm:max-w-[1250px]"> <div class=" flex flex-col w-full relative w-full sm:max-w-[1250px]">
@ -909,7 +909,7 @@
on:click={() => changeSection("overview")} on:click={() => changeSection("overview")}
class="p-2 px-5 cursor-pointer {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'overview' 'overview'
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold' ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}" : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
> >
Overview Overview
@ -919,7 +919,7 @@
on:click={() => changeSection("financials")} on:click={() => changeSection("financials")}
class="p-2 px-5 cursor-pointer {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'financials' 'financials'
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold' ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}" : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
> >
Financials Financials
@ -929,7 +929,7 @@
on:click={() => changeSection("statistics")} on:click={() => changeSection("statistics")}
class="p-2 px-5 cursor-pointer {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'statistics' 'statistics'
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold' ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}" : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
>Statistics</a >Statistics</a
> >
@ -939,7 +939,7 @@
on:click={() => changeSection("metrics")} on:click={() => changeSection("metrics")}
class="p-2 px-5 cursor-pointer {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'metrics' 'metrics'
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold' ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}" : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
>Metrics</a >Metrics</a
> >
@ -950,7 +950,7 @@
on:click={() => changeSection("forecast")} on:click={() => changeSection("forecast")}
class="p-2 px-5 cursor-pointer {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'forecast' 'forecast'
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold' ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}" : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
> >
Forecast Forecast
@ -961,7 +961,7 @@
on:click={() => changeSection("dark-pool")} on:click={() => changeSection("dark-pool")}
class="p-2 px-5 cursor-pointer {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'dark-pool' 'dark-pool'
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold' ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}" : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
> >
Dark Pool Dark Pool
@ -971,7 +971,7 @@
on:click={() => changeSection("options")} on:click={() => changeSection("options")}
class="p-2 px-5 cursor-pointer {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'options' 'options'
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold' ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}" : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
> >
Options Options
@ -982,7 +982,7 @@
on:click={() => changeSection("insider")} on:click={() => changeSection("insider")}
class="p-2 px-5 cursor-pointer {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'insider' 'insider'
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold' ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}" : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
> >
Insider Insider
@ -992,7 +992,7 @@
on:click={() => changeSection("dividends")} on:click={() => changeSection("dividends")}
class="p-2 px-5 cursor-pointer {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'dividends' 'dividends'
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold' ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}" : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
> >
Dividends Dividends
@ -1002,7 +1002,7 @@
on:click={() => changeSection("history")} on:click={() => changeSection("history")}
class="p-2 px-5 cursor-pointer {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'history' 'history'
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold' ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}" : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
> >
History History
@ -1012,7 +1012,7 @@
on:click={() => changeSection("profile")} on:click={() => changeSection("profile")}
class="p-2 px-5 cursor-pointer {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'profile' 'profile'
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold' ? ' bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}" : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
> >
Profile Profile