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

ui fix

Browse Source
This commit is contained in:
MuslemRahimi 2025-03-09 17:16:35 +01:00
parent b34a7c16c4
commit d4bcc82c2f
9 changed files with 378 additions and 356 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/lib/components/AIScore.svelte
View File

@ -1,8 +1,8 @@
<script lang="ts"> <script lang="ts">
import { scoreComponent, stockTicker } from "$lib/store"; import { scoreComponent, stockTicker } from "$lib/store";
export let score; export let score = 0;
export let tier; export let tier = "Free";
// Use the correct reactive declaration // Use the correct reactive declaration
$: { $: {
@ -20,7 +20,11 @@
class="flex flex-col items-center w-auto p-4 sm:p-4 rounded-md relative" class="flex flex-col items-center w-auto p-4 sm:p-4 rounded-md relative"
> >
<div class="relative"> <div class="relative">
<h3 class="text-center text-sm sm:text-[1rem] mb-2">AI Score</h3> <h3
class="font-semibold dark:font-normal text-center text-sm sm:text-[1rem] mb-2"
>
AI Score
</h3>
</div> </div>
<div class="flex flex-row items-center justify-between"> <div class="flex flex-row items-center justify-between">
@ -36,7 +40,7 @@
cy="18" cy="18"
r="16" r="16"
fill="none" fill="none"
class="stroke-current text-[#303030]" class="stroke-current text-gray-300 dark:text-[#303030]"
stroke-width="2" stroke-width="2"
></circle> ></circle>
<!-- score Circle inside a group with rotation --> <!-- score Circle inside a group with rotation -->
@ -48,10 +52,10 @@
r="16" r="16"
fill="none" fill="none"
class="stroke-current {score >= 7 class="stroke-current {score >= 7
? 'text-[#00FC50]' ? 'text-green-600 dark:text-[#00FC50]'
: score >= 4 : score >= 4
? 'text-[#fff]' ? 'text-blue-900 dark:text-[#fff]'
: 'text-[#FF2F1F]'}" : 'text-red-600 dark:text-[#FF2F1F]'}"
stroke-width="3" stroke-width="3"
stroke-dasharray="100.48" stroke-dasharray="100.48"
stroke-dashoffset={100.48 - stroke-dashoffset={100.48 -
@ -61,13 +65,6 @@
</circle> </circle>
</g> </g>
<!-- Text in the middle --> <!-- Text in the middle -->
<text
x="18"
y="21"
text-anchor="middle"
font-size="10"
fill="#000">{["Pro", "Plus"]?.includes(tier) ? score : 0}</text
>
</svg> </svg>
<!-- Percentage Text --> <!-- Percentage Text -->
@ -87,7 +84,7 @@
</span> </span>
<div class="absolute top-0.5 flex items-center"> <div class="absolute top-0.5 flex items-center">
<svg <svg
class="size-5 text-[#fff]" class="size-5 text-muted dark:text-[#fff]"
viewBox="0 0 20 20" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
style="max-width: 40px;" style="max-width: 40px;"

30
src/lib/components/EarningsSurprise.svelte
View File

@ -44,22 +44,20 @@
} }
</script> </script>
<div class="space-y-3 overflow-hidden"> <div class="space-y-3 overflow-hidden text-muted dark:text-white">
<!--Start Content--> <!--Start Content-->
<div class="w-auto lg:w-full p-1 flex flex-col m-auto"> <div class="w-auto lg:w-full p-1 flex flex-col m-auto">
<div class="flex flex-col items-center w-full mb-3"> <div class="flex flex-col items-center w-full mb-3">
<div class="flex flex-row justify-start mr-auto items-center"> <div class="flex flex-row justify-start mr-auto items-center">
<!--<img class="h-10 inline-block mr-2" src={copilotIcon} />--> <!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<h3 <h3 class="mr-1 flex flex-row items-center text-2xl font-bold">
class="mr-1 flex flex-row items-center text-white text-2xl font-bold"
>
Earnings Surprise Earnings Surprise
</h3> </h3>
<label <label
class="{latestInfoDate(rawData?.date) class="{latestInfoDate(rawData?.date)
? '' ? 'border border-gray-300'
: 'hidden'} text-black bg-[#fff] ml-2 font-semibold not-italic text-xs rounded px-2 py-0.5" : 'hidden'} shadow bg-blue-100 dark:text-black dark:bg-[#fff] ml-2 font-semibold not-italic text-xs rounded px-2 py-0.5"
>New</label >New</label
> >
</div> </div>
@ -67,9 +65,9 @@
</div> </div>
<div <div
class="text-white text-[1rem] {latestInfoDate(rawData?.date) class="text-[1rem] {latestInfoDate(rawData?.date)
? 'bg-[#F9AB00]/10 p-3 rounded-md' ? 'bg-blue-100 p-3 rounded-md shadow'
: 'bg-default pl-1'} " : ' pl-1'} "
> >
<div class="mt-1"> <div class="mt-1">
{removeCompanyStrings($displayCompanyName)} has released their quartely earnings {removeCompanyStrings($displayCompanyName)} has released their quartely earnings
@ -83,7 +81,7 @@
<li <li
class="ml-[20px] sm:ml-[30px]" class="ml-[20px] sm:ml-[30px]"
style="color: #fff; line-height: 22px; margin-top:10px; margin-bottom: 10px; list-style-type: disc;" style="line-height: 22px; margin-top:10px; margin-bottom: 10px; list-style-type: disc;"
> >
Revenue of <span class="" Revenue of <span class=""
>{abbreviateNumber(rawData?.revenue, true)}</span >{abbreviateNumber(rawData?.revenue, true)}</span
@ -94,14 +92,14 @@
)}, with )}, with
<span <span
class=" {revenueRatio > 0 class=" {revenueRatio > 0
? "before:content-['+'] text-[#00FC50]" ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: 'text-[#FF2F1F]'}">{revenueRatio}%</span : 'text-red-600 dark:text-[#FF2F1F]'}">{revenueRatio}%</span
> >
YoY {revenueRatio < 0 ? "decline" : "growth"}. YoY {revenueRatio < 0 ? "decline" : "growth"}.
</li> </li>
<li <li
class="ml-[20px] sm:ml-[30px]" class="ml-[20px] sm:ml-[30px]"
style="color: #fff; line-height: 22px; margin-top: 0px; margin-bottom: 0px; list-style-type: disc;" style="line-height: 22px; margin-top: 0px; margin-bottom: 0px; list-style-type: disc;"
> >
EPS of <span class="">{rawData?.eps}</span> EPS of <span class="">{rawData?.eps}</span>
{rawData?.epsSurprise > 0 ? "exceeds" : "misses"} estimates by {rawData?.epsSurprise?.toFixed( {rawData?.epsSurprise > 0 ? "exceeds" : "misses"} estimates by {rawData?.epsSurprise?.toFixed(
@ -109,10 +107,10 @@
)}, with )}, with
<span <span
class=" {epsRatio === null class=" {epsRatio === null
? 'text-white' ? ''
: epsRatio > 0 : epsRatio > 0
? 'text-[#00FC50]' ? 'text-green-600 dark:text-[#00FC50]'
: 'text-[#FF2F1F]'}" : 'text-red-600 dark:text-[#FF2F1F]'}"
> >
{epsRatio === null ? "n/a" : `${epsRatio}%`} {epsRatio === null ? "n/a" : `${epsRatio}%`}
</span> </span>

2
src/lib/components/NextEarnings.svelte
View File

@ -106,7 +106,7 @@
<span <span
class="{epsRatio > 0 class="{epsRatio > 0
? "before:content-['+'] text-green-600 dark:text-[#00FC50]" ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: 'text-[#FF2F1F]'} ">{epsRatio}%</span : 'text-retext-[#FF2F1F]'} ">{epsRatio}%</span
> >
{epsRatio > 0 ? "increase" : epsRatio < 0 ? "decrease" : ""} YoY. {epsRatio > 0 ? "increase" : epsRatio < 0 ? "decrease" : ""} YoY.
{:else} {:else}

32
src/lib/components/WIIM.svelte
View File

@ -42,12 +42,12 @@
} }
</script> </script>
<section class="overflow-hidden text-white h-full mt-5"> <section class="overflow-hidden text-muted dark:text-white h-full mt-5">
<main class="overflow-hidden"> <main class="overflow-hidden">
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<label <label
for="whyPriceMovedInfo" for="whyPriceMovedInfo"
class="mr-1 cursor-pointer flex flex-row items-center text-white text-2xl font-bold" class="mr-1 cursor-pointer flex flex-row items-center text-2xl font-bold"
> >
<h2>Why Price Moved</h2> <h2>Why Price Moved</h2>
</label> </label>
@ -77,21 +77,21 @@
'-' '-'
? 'bg-white' ? 'bg-white'
: item?.changesPercentage >= 0 : item?.changesPercentage >= 0
? 'bg-[#00FC50]' ? 'bg-green-600 dark:bg-[#00FC50]'
: 'bg-[#FF2F1F]'}" : 'bg-red-600 dark:bg-[#FF2F1F]'}"
></div> ></div>
<!-- Item Content --> <!-- Item Content -->
<div class="w-full h-full"> <div class="w-full h-full">
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<div class="flex flex-row items-start w-full"> <div class="flex flex-row items-start w-full">
<span class="text-white text-sm" <span class=" text-sm"
>{formatDate(item?.date)} >{formatDate(item?.date)}
<!-- <!--
&#183; &#183;
<a <a
href={item?.url} href={item?.url}
class="inline-block text-sm text-white sm:hover:underline sm:hover:underline-offset-4" class="inline-block text-sm sm:hover:underline sm:hover:underline-offset-4"
> >
Source Source
</a> </a>
@ -99,15 +99,14 @@
</span> </span>
{#if latestInfoDate(item?.date)} {#if latestInfoDate(item?.date)}
<label <label
class="bg-[#fff] rounded text-black font-semibold text-xs px-2 py-0.5 ml-3" class="shadow bg-blue-100 border border-gray-200 dark:border-0 dark:bg-[#fff] rounded text-black font-semibold text-xs px-2 py-0.5 ml-3"
>New</label >New</label
> >
{/if} {/if}
<div <div class=" text-sm sm:text-[1rem] ml-auto">
class="text-white text-sm sm:text-[1rem] ml-auto"
>
{#if item?.changesPercentage >= 0} {#if item?.changesPercentage >= 0}
<span class="text-[#00FC50] inline-block" <span
class="text-green-600 dark:text-[#00FC50] inline-block"
>+{item?.changesPercentage}%</span >+{item?.changesPercentage}%</span
> >
<svg <svg
@ -140,7 +139,8 @@
</g></svg </g></svg
> >
{:else if item?.changesPercentage < 0} {:else if item?.changesPercentage < 0}
<span class="text-[#FF2F1F] inline-block" <span
class="text-red-600 dark:text-[#FF2F1F] inline-block"
>{item?.changesPercentage}% >{item?.changesPercentage}%
</span> </span>
<svg <svg
@ -195,7 +195,7 @@
> >
</span> </span>
{:else} {:else}
<span class="text-white text-[1rem]"> <span class=" text-[1rem]">
{item?.text} {item?.text}
</span> </span>
{/if} {/if}
@ -217,11 +217,13 @@
class="cursor-pointer flex justify-center items-center mt-5" class="cursor-pointer flex justify-center items-center mt-5"
> >
<svg <svg
class="w-10 h-10 transform {showFullHistory ? 'rotate-180' : ''} " class="w-10 h-10 transform text-gray-400 dark:text-[#2A323C] {showFullHistory
? 'rotate-180'
: ''} "
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="#2A323C" fill="currentColor"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 13.5L7.5 11l1.42-1.41L12 12.67l3.08-3.08L16.5 11L12 15.5z" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 13.5L7.5 11l1.42-1.41L12 12.67l3.08-3.08L16.5 11L12 15.5z"
/></svg /></svg
> >

2
src/lib/components/shadcn/card/card.svelte
View File

@ -10,7 +10,7 @@
<div <div
class={cn( class={cn(
"rounded-md border border-gray-300 dark:border-gray-800 bg-white dark:bg-default text-muted dark:text-white shadow-xs", "rounded-md border border-gray-300 dark:border-gray-800 bg-white dark:bg-default text-muted dark:text-white shadow",
className, className,
)} )}
{...$$restProps} {...$$restProps}

4
src/routes/affiliate-program/+page.svelte
View File

@ -24,7 +24,7 @@
"name": "How much can I earn?", "name": "How much can I earn?",
"acceptedAnswer": { "acceptedAnswer": {
"@type": "Answer", "@type": "Answer",
"text": "You can earn up to $24.00 commission on every referral that results in a successful sale. There's no limit to how much you can make by promoting us." "text": "You can earn up to $119.8 commission on every referral that results in a successful sale. There's no limit to how much you can make by promoting us."
} }
}, },
{ {
@ -184,7 +184,7 @@
</p> </p>
</dt> </dt>
<dd class="ml-16 mt-2"> <dd class="ml-16 mt-2">
You can earn up to <strong>$36.00</strong> commission on every referral You can earn up to <strong>$119.8</strong> commission on every referral
that results in a successful sale. There's no limit to how much you can that results in a successful sale. There's no limit to how much you can
make by promoting us. make by promoting us.
</dd> </dd>

242
src/routes/pricing/+page.svelte
View File

@ -88,7 +88,7 @@
</svelte:head> </svelte:head>
<section <section
class="bg-default min-h-screen mb-40 w-full max-w-3xl sm:max-w-5xl m-auto text-white" class=" min-h-screen mb-40 w-full max-w-3xl sm:max-w-5xl m-auto text-muted dark:"
> >
<div <div
class="flex flex-col sm:flex-row w-full mx-auto justify-center items-center sm:space-x-8 text-sm relative pt-5 pb-20" class="flex flex-col sm:flex-row w-full mx-auto justify-center items-center sm:space-x-8 text-sm relative pt-5 pb-20"
@ -106,7 +106,7 @@
><path ><path
d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
></path></svg ></path></svg
><span class="font-medium text-zinc-300" ><span class="font-medium text-muted dark:text-zinc-300"
>Trusted by <span>4,000</span>+ Traders</span >Trusted by <span>4,000</span>+ Traders</span
> >
</div> </div>
@ -130,13 +130,14 @@
><path ><path
d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
></path></svg ></path></svg
><span class="ml-1 mr-2 font-bold text-zinc-300"><span>4.3</span>/5</span ><span class="ml-1 mr-2 font-bold text-muted dark:text-zinc-300"
><span class="font-medium text-zinc-300" ><span>4.3</span>/5</span
><span class="font-medium text-muted dark:text-zinc-300"
>Rated "Excellent" on <a >Rated "Excellent" on <a
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
href="https://www.trustpilot.com/review/stocknear.com" href="https://www.trustpilot.com/review/stocknear.com"
class="sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4" class="sm:hover: sm:hover:underline sm:hover:underline-offset-4"
>Trustpilot</a >Trustpilot</a
></span ></span
> >
@ -145,9 +146,7 @@
<div class="px-3"> <div class="px-3">
<div class="mx-auto text-center mb-8"> <div class="mx-auto text-center mb-8">
<h1 <h1 class="text-4xl sm:text-5xl font-bold pb-4">
class="text-4xl sm:text-5xl font-bold text-white text-transparent pb-4"
>
Save Time & Maximize Profits Save Time & Maximize Profits
</h1> </h1>
</div> </div>
@ -155,7 +154,7 @@
<!--<Discount/>--> <!--<Discount/>-->
<div class="flex flex-row items-center justify-end"> <div class="flex flex-row items-center justify-end">
<span class="text-[1rem] font-semibold text-white mr-3"> Monthly </span> <span class="text-[1rem] font-semibold mr-3"> Monthly </span>
<label class="inline-flex cursor-pointer relative"> <label class="inline-flex cursor-pointer relative">
<input <input
@ -181,20 +180,22 @@
> >
<div <div
style="opacity: 1; transform: translateY(20px);" style="opacity: 1; transform: translateY(20px);"
class="flex flex-col relative bg-zinc-900 bg-opacity-80 backdrop-filter backdrop-blur-lg rounded-xl overflow-visible border border-zinc-600 p-6 isolate" class="flex flex-col relative bg-zinc-300 dark:bg-zinc-900 bg-opacity-80 backdrop-filter backdrop-blur-lg rounded-xl overflow-visible border border-zinc-300 dark:border-zinc-600 p-6 isolate"
> >
<h3 class="text-3xl font-bold text-white">Basic</h3> <h3 class="text-3xl font-bold">Basic</h3>
<p class="text-zinc-300 text-sm mt-1">Ideal for Beginners</p> <p class="text-muted dark:text-zinc-300 text-sm mt-1">
Ideal for Beginners
</p>
<div class="mt-4"> <div class="mt-4">
<span class="text-4xl font-bold text-white">$0</span><span <span class="text-4xl font-bold">$0</span><span class=" text-xl ml-1"
class="text-white text-xl ml-1">/Month</span >/Month</span
> >
</div> </div>
<ul class="mt-6 mb-6 space-y-2"> <ul class="mt-6 mb-6 space-y-2">
<li class="flex items-start"> <li class="flex items-start">
<svg <svg
class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5" class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -205,11 +206,11 @@
stroke-width="2" stroke-width="2"
d="M5 13l4 4L19 7" d="M5 13l4 4L19 7"
></path></svg ></path></svg
><span class="text-white">1 Watchlist</span> ><span class="">1 Watchlist</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg <svg
class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5" class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -220,11 +221,11 @@
stroke-width="2" stroke-width="2"
d="M5 13l4 4L19 7" d="M5 13l4 4L19 7"
></path></svg ></path></svg
><span class="text-white">3 Price Alerts</span> ><span class="">3 Price Alerts</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg <svg
class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5" class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -235,12 +236,12 @@
stroke-width="2" stroke-width="2"
d="M5 13l4 4L19 7" d="M5 13l4 4L19 7"
></path></svg ></path></svg
><span class="text-white">Realtime Notification</span> ><span class="">Realtime Notification</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg <svg
class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5" class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
viewBox="0 0 64 64" viewBox="0 0 64 64"
version="1.1" version="1.1"
fill="currentColor" fill="currentColor"
@ -297,11 +298,13 @@
</g></svg </g></svg
> >
<span class="text-gray-400">Hedge Fund Portfolio Access</span> <span class="text-muted dark:text-gray-400"
>Hedge Fund Portfolio Access</span
>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg <svg
class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5" class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
viewBox="0 0 64 64" viewBox="0 0 64 64"
version="1.1" version="1.1"
fill="currentColor" fill="currentColor"
@ -358,11 +361,13 @@
</g></svg </g></svg
> >
<span class="text-gray-400">US Congress Portfolio Access</span> <span class="text-muted dark:text-gray-400"
>US Congress Portfolio Access</span
>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg <svg
class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5" class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
viewBox="0 0 64 64" viewBox="0 0 64 64"
version="1.1" version="1.1"
fill="currentColor" fill="currentColor"
@ -419,12 +424,14 @@
</g></svg </g></svg
> >
<span class="text-gray-400">Financial History Access</span> <span class="text-muted dark:text-gray-400"
>Financial History Access</span
>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg <svg
class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5" class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
viewBox="0 0 64 64" viewBox="0 0 64 64"
version="1.1" version="1.1"
fill="currentColor" fill="currentColor"
@ -481,11 +488,11 @@
</g></svg </g></svg
> >
<span class="text-gray-400">Stock Screener</span> <span class="text-muted dark:text-gray-400">Stock Screener</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg <svg
class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5" class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
viewBox="0 0 64 64" viewBox="0 0 64 64"
version="1.1" version="1.1"
fill="currentColor" fill="currentColor"
@ -542,11 +549,13 @@
</g></svg </g></svg
> >
<span class="text-gray-400">Realtime Options Activity</span> <span class="text-muted dark:text-gray-400"
>Realtime Options Activity</span
>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg <svg
class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5" class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
viewBox="0 0 64 64" viewBox="0 0 64 64"
version="1.1" version="1.1"
fill="currentColor" fill="currentColor"
@ -603,14 +612,16 @@
</g></svg </g></svg
> >
<span class="text-gray-400">Realtime Dark Pool Trades</span> <span class="text-muted dark:text-gray-400"
>Realtime Dark Pool Trades</span
>
</li> </li>
</ul> </ul>
<div class="mt-auto pt-6 border-t border-zinc-700 mx-4"> <div class="mt-auto pt-6 border-t border-zinc-700 mx-4">
{#if !data?.user} {#if !data?.user}
<label <label
for="userLogin" for="userLogin"
class="cursor-pointer w-full py-3 px-4 bg-blue-600 text-white rounded-lg font-semibold sm:hover:bg-blue-700 transition duration-100 flex items-center justify-center" class="text-white cursor-pointer w-full py-3 px-4 bg-blue-600 rounded-lg font-semibold sm:hover:bg-blue-700 transition duration-100 flex items-center justify-center"
>Get Registered Now<svg >Get Registered Now<svg
class="w-5 h-5 ml-2" class="w-5 h-5 ml-2"
fill="none" fill="none"
@ -630,23 +641,29 @@
</div> </div>
<div <div
style="opacity: 1; transform: translateY(20px);" style="opacity: 1; transform: translateY(20px);"
class="flex flex-col relative bg-zinc-900 bg-opacity-80 backdrop-filter backdrop-blur-lg rounded-xl overflow-visible border border-zinc-600 p-6 isolate" class="flex flex-col relative bg-zinc-300 dark:bg-zinc-900 bg-opacity-80 backdrop-filter backdrop-blur-lg rounded-xl overflow-visible border border-zinc-300 dark:border-zinc-600 p-6 isolate"
> >
<h3 class="text-3xl font-bold text-white">Plus</h3> <h3 class="text-3xl font-bold">Plus</h3>
<p class="text-zinc-300 text-sm mt-1">Best for Intermediate Traders</p> <p class="text-muted dark:text-zinc-300 text-sm mt-1">
Best for Intermediate Traders
</p>
<div class="mt-4"> <div class="mt-4">
<span class="text-4xl font-bold text-white" <span class="text-4xl font-bold">{mode ? "$7.50" : "$10"}</span><span
>{mode ? "$7.50" : "$10"}</span class=" text-xl ml-1">/Month</span
><span class="text-white text-xl ml-1">/Month</span> >
</div> </div>
<p class="text-gray-400 text-sm mt-1 mx-4 {!mode ? 'hidden' : ''}"> <p
class="text-muted dark:text-gray-400 text-sm mt-1 mx-4 {!mode
? 'hidden'
: ''}"
>
(Billed Annually) (Billed Annually)
</p> </p>
<ul class="mt-6 mb-6 space-y-2"> <ul class="mt-6 mb-6 space-y-2">
<li class="flex items-start"> <li class="flex items-start">
<svg <svg
class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5" class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -657,11 +674,11 @@
stroke-width="2" stroke-width="2"
d="M5 13l4 4L19 7" d="M5 13l4 4L19 7"
></path></svg ></path></svg
><span class="text-white">Unlimited Watchlist</span> ><span class="">Unlimited Watchlist</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg <svg
class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5" class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -672,11 +689,11 @@
stroke-width="2" stroke-width="2"
d="M5 13l4 4L19 7" d="M5 13l4 4L19 7"
></path></svg ></path></svg
><span class="text-white">Unlimited Price Alerts</span> ><span class="">Unlimited Price Alerts</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg <svg
class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5" class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -689,11 +706,11 @@
></path></svg ></path></svg
> >
<span class="text-white">Unlimited Stock Screener</span> <span class="">Unlimited Stock Screener</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg <svg
class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5" class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -704,12 +721,12 @@
stroke-width="2" stroke-width="2"
d="M5 13l4 4L19 7" d="M5 13l4 4L19 7"
></path></svg ></path></svg
><span class="text-white">Realtime Notification</span> ><span class="">Realtime Notification</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg <svg
class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5" class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -722,11 +739,11 @@
></path></svg ></path></svg
> >
<span class="text-white">Hedge Fund Portfolio Access</span> <span class="">Hedge Fund Portfolio Access</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg <svg
class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5" class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -739,11 +756,11 @@
></path></svg ></path></svg
> >
<span class="text-white">US Congress Portfolio Access</span> <span class="">US Congress Portfolio Access</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg <svg
class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5" class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -756,12 +773,12 @@
></path></svg ></path></svg
> >
<span class="text-white">Financial History Access</span> <span class="">Financial History Access</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg <svg
class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5" class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
viewBox="0 0 64 64" viewBox="0 0 64 64"
version="1.1" version="1.1"
fill="currentColor" fill="currentColor"
@ -818,11 +835,13 @@
</g></svg </g></svg
> >
<span class="text-gray-400">Realtime Options Activity</span> <span class="text-muted dark:text-gray-400"
>Realtime Options Activity</span
>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg <svg
class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5" class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
viewBox="0 0 64 64" viewBox="0 0 64 64"
version="1.1" version="1.1"
fill="currentColor" fill="currentColor"
@ -879,14 +898,16 @@
</g></svg </g></svg
> >
<span class="text-gray-400">Realtime Dark Pool Trades</span> <span class="text-muted dark:text-gray-400"
>Realtime Dark Pool Trades</span
>
</li> </li>
</ul> </ul>
<div class="mt-auto pt-6 border-t border-zinc-700 mx-4"> <div class="mt-auto pt-6 border-t border-zinc-700 mx-4">
<label <label
for={!data?.user ? "userLogin" : ""} for={!data?.user ? "userLogin" : ""}
on:click={() => purchasePlan("plus")} on:click={() => purchasePlan("plus")}
class="cursor-pointer w-full py-3 px-4 bg-blue-600 text-white rounded-lg font-semibold sm:hover:bg-blue-700 transition duration-100 flex items-center justify-center" class="text-white cursor-pointer w-full py-3 px-4 bg-blue-600 rounded-lg font-semibold sm:hover:bg-blue-700 transition duration-100 flex items-center justify-center"
>Unlock Plus Access Now<svg >Unlock Plus Access Now<svg
class="w-5 h-5 ml-2" class="w-5 h-5 ml-2"
fill="none" fill="none"
@ -905,23 +926,29 @@
</div> </div>
<div <div
style="opacity: 1; transform: translateY(20px);" style="opacity: 1; transform: translateY(20px);"
class="flex flex-col relative bg-zinc-900 bg-opacity-80 backdrop-filter backdrop-blur-lg rounded-xl overflow-visible border border-zinc-600 p-6 isolate" class="flex flex-col relative bg-zinc-300 dark:bg-zinc-900 bg-opacity-80 backdrop-filter backdrop-blur-lg rounded-xl overflow-visible border border-zinc-300 dark:border-zinc-600 p-6 isolate"
> >
<h3 class="text-3xl font-bold text-white">Pro</h3> <h3 class="text-3xl font-bold">Pro</h3>
<p class="text-zinc-300 text-sm mt-1">Best for Professional Traders</p> <p class="text-muted dark:text-zinc-300 text-sm mt-1">
Best for Professional Traders
</p>
<div class="mt-4"> <div class="mt-4">
<span class="text-4xl font-bold text-white" <span class="text-4xl font-bold">{mode ? "$15" : "$20"}</span><span
>{mode ? "$15" : "$20"}</span class=" text-xl ml-1">/Month</span
><span class="text-white text-xl ml-1">/Month</span> >
</div> </div>
<p class="text-gray-400 text-sm mt-1 mx-4 {!mode ? 'hidden' : ''}"> <p
class="text-muted dark:text-gray-400 text-sm mt-1 mx-4 {!mode
? 'hidden'
: ''}"
>
(Billed Annually) (Billed Annually)
</p> </p>
<ul class="mt-6 mb-6 space-y-2"> <ul class="mt-6 mb-6 space-y-2">
<li class="flex items-start"> <li class="flex items-start">
<svg <svg
class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5" class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -932,12 +959,12 @@
stroke-width="2" stroke-width="2"
d="M5 13l4 4L19 7" d="M5 13l4 4L19 7"
></path></svg ></path></svg
><span class="text-white">Everything in Plus and ...</span> ><span class="">Everything in Plus and ...</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg <svg
class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5" class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -950,11 +977,11 @@
></path></svg ></path></svg
> >
<span class="text-white">Realtime Options Activity</span> <span class="">Realtime Options Activity</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg <svg
class="w-5 h-5 mr-2 text-white flex-shrink-0 mt-0.5" class="w-5 h-5 mr-2 flex-shrink-0 mt-0.5"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -967,14 +994,14 @@
></path></svg ></path></svg
> >
<span class="text-white">Realtime Dark Pool Trades</span> <span class="">Realtime Dark Pool Trades</span>
</li> </li>
</ul> </ul>
<div class="mt-auto pt-6 border-t border-zinc-700 mx-4"> <div class="mt-auto pt-6 border-t border-zinc-700 mx-4">
<label <label
for={!data?.user ? "userLogin" : ""} for={!data?.user ? "userLogin" : ""}
on:click={() => purchasePlan("pro")} on:click={() => purchasePlan("pro")}
class="cursor-pointer w-full py-3 px-4 bg-blue-600 text-white rounded-lg font-semibold sm:hover:bg-blue-700 transition duration-100 flex items-center justify-center" class="text-white cursor-pointer w-full py-3 px-4 bg-blue-600 rounded-lg font-semibold sm:hover:bg-blue-700 transition duration-100 flex items-center justify-center"
>Unlock Pro Access Now<svg >Unlock Pro Access Now<svg
class="w-5 h-5 ml-2" class="w-5 h-5 ml-2"
fill="none" fill="none"
@ -993,17 +1020,17 @@
</div> </div>
<div <div
class="text-left w-full col-span-1 lg:col-span-3 bg-zinc-900 bg-opacity-80 backdrop-filter backdrop-blur-lg rounded-xl overflow-visible border border-zinc-600 p-6 isolate translate-y-5 opacity-100 transition-all duration-300" class="text-left w-full col-span-1 lg:col-span-3 bg-zinc-300 dark:bg-zinc-900 bg-opacity-80 backdrop-filter backdrop-blur-lg rounded-xl overflow-visible border border-zinc-200 dark:border-zinc-600 p-6 isolate translate-y-5 opacity-100 transition-all duration-300"
> >
<!-- Responsive header: stacks vertically on mobile, horizontal on md+ --> <!-- Responsive header: stacks vertically on mobile, horizontal on md+ -->
<div class="flex flex-row items-center justify-between"> <div class="flex flex-row items-center justify-between">
<h3 class="text-2xl md:text-3xl font-bold text-white">Lifetime</h3> <h3 class="text-2xl md:text-3xl font-bold">Lifetime</h3>
<div> <div>
<span class="text-3xl md:text-4xl font-bold text-white">$599</span> <span class="text-3xl md:text-4xl font-bold">$599</span>
</div> </div>
</div> </div>
<!-- Responsive paragraph text --> <!-- Responsive paragraph text -->
<p class="text-white md:text-lg mt-2"> <p class=" md:text-lg mt-2">
Everything in Pro, pay once, never again! Everything in Pro, pay once, never again!
</p> </p>
<!-- Button container: full width on mobile, 1/4 width on md+ --> <!-- Button container: full width on mobile, 1/4 width on md+ -->
@ -1011,7 +1038,7 @@
<label <label
for={!data?.user ? "userLogin" : ""} for={!data?.user ? "userLogin" : ""}
on:click={() => purchasePlan("lifeTime")} on:click={() => purchasePlan("lifeTime")}
class="cursor-pointer w-full py-3 px-4 bg-blue-600 text-white rounded-lg font-semibold sm:hover:bg-blue-700 transition duration-100 flex items-center justify-center" class="text-white cursor-pointer w-full py-3 px-4 bg-blue-600 rounded-lg font-semibold sm:hover:bg-blue-700 transition duration-100 flex items-center justify-center"
> >
Get Lifetime Now Get Lifetime Now
<svg <svg
@ -1036,9 +1063,7 @@
<!--Feature Table--> <!--Feature Table-->
<section class="py-8 md:py-12 mt-8 md:mt-10"> <section class="py-8 md:py-12 mt-8 md:mt-10">
<div class="max-w-6xl mx-auto"> <div class="max-w-6xl mx-auto">
<h2 <h2 class="text-3xl md:text-4xl font-bold mb-6 md:mb-10 text-center">
class="text-3xl md:text-4xl font-bold text-white mb-6 md:mb-10 text-center"
>
Compare plans &amp; features Compare plans &amp; features
</h2> </h2>
<!-- Make sure the table can scroll horizontally on small screens --> <!-- Make sure the table can scroll horizontally on small screens -->
@ -1052,29 +1077,27 @@
</colgroup> </colgroup>
<thead> <thead>
<tr> <tr>
<th <th class="py-2 md:py-3 pt-8 font-semibold text-sm sm:text-lg">
class="py-2 md:py-3 pt-8 font-semibold text-sm sm:text-lg text-white"
>
Research company stocks Research company stocks
</th> </th>
<th <th
class="py-2 md:py-3 font-semibold text-white text-center text-sm sm:text-lg" class="py-2 md:py-3 font-semibold text-center text-sm sm:text-lg"
> >
Free Free
</th> </th>
<th <th
class="py-2 md:py-3 font-semibold text-white text-center text-sm sm:text-lg" class="py-2 md:py-3 font-semibold text-center text-sm sm:text-lg"
> >
Plus Plus
</th> </th>
<th <th
class="py-2 md:py-3 font-semibold text-white text-center text-sm sm:text-lg" class="py-2 md:py-3 font-semibold text-center text-sm sm:text-lg"
> >
Pro Pro
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody class="text-sm md:text-white"> <tbody class="text-sm md:">
<tr> <tr>
<td class="py-2 md:py-3">Full Market Access</td> <td class="py-2 md:py-3">Full Market Access</td>
<td class="py-2 md:py-3 text-center">❌</td> <td class="py-2 md:py-3 text-center">❌</td>
@ -1102,7 +1125,7 @@
<tr> <tr>
<td <td
colspan="4" colspan="4"
class="py-2 md:py-3 pt-8 font-semibold text-sm sm:text-lg text-white" class="py-2 md:py-3 pt-8 font-semibold text-sm sm:text-lg"
> >
Unusual Activity Unusual Activity
</td> </td>
@ -1123,7 +1146,7 @@
<tr> <tr>
<td <td
colspan="4" colspan="4"
class="py-2 md:py-3 pt-8 font-semibold text-sm sm:text-lg text-white" class="py-2 md:py-3 pt-8 font-semibold text-sm sm:text-lg"
> >
Trade Ideas Trade Ideas
</td> </td>
@ -1162,14 +1185,12 @@
<!--Start FAQ--> <!--Start FAQ-->
<section class="bg-default"> <section class="">
<div class="mx-auto"> <div class="mx-auto">
<div class="py-12 md:py-10"> <div class="py-12 md:py-10">
<!-- Section header --> <!-- Section header -->
<div class="max-w-3xl mx-auto text-center pb-12 md:pb-14"> <div class="max-w-3xl mx-auto text-center pb-12 md:pb-14">
<h2 class="text-4xl font-bold text-white"> <h2 class="text-4xl font-bold">Frequently Asked Questions</h2>
Frequently Asked Questions
</h2>
</div> </div>
<!-- Faqs --> <!-- Faqs -->
@ -1177,12 +1198,12 @@
<li> <li>
<details class="collapse collapse-arrow"> <details class="collapse collapse-arrow">
<summary <summary
class="collapse-title text-white text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5" class="collapse-title text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5"
>What are the advantages of Stocknear Service?</summary >What are the advantages of Stocknear Service?</summary
> >
<div class="collapse-content"> <div class="collapse-content">
<p <p
class="text-sm sm:text-[1rem] pb-5 text-gray-200 overflow-hidden transition-all duration-300 ease-in-out" class="text-sm sm:text-[1rem] pb-5 dark:text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
> >
Stocknear Service provides simplified, actionable trading Stocknear Service provides simplified, actionable trading
data and an extensive tool suite for every trader, featuring data and an extensive tool suite for every trader, featuring
@ -1198,19 +1219,19 @@
<li> <li>
<details class="collapse collapse-arrow"> <details class="collapse collapse-arrow">
<summary <summary
class="collapse-title text-white text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5" class="collapse-title text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5"
> >
Can I change my plan at any time? Can I change my plan at any time?
</summary> </summary>
<div class="collapse-content"> <div class="collapse-content">
<p <p
class="text-sm sm:text-[1rem] pb-5 text-gray-200 transition-all duration-300 ease-in-out" class="text-sm sm:text-[1rem] pb-5 dark:text-gray-200 transition-all duration-300 ease-in-out"
> >
Yes! Simply reach out to us via email, and we’ll take care Yes! Simply reach out to us via email, and we’ll take care
of it for you. of it for you.
<a <a
href={`mailto:${emailAddress}`} href={`mailto:${emailAddress}`}
class="text-blue-400 underline" class="text-blue-500 dark:text-blue-400 underline"
> >
{emailAddress} {emailAddress}
</a> </a>
@ -1222,14 +1243,14 @@
<li> <li>
<details class="collapse collapse-arrow"> <details class="collapse collapse-arrow">
<summary <summary
class="collapse-title text-white text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5" class="collapse-title text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5"
> >
Are there any commissions in addition to the subscription Are there any commissions in addition to the subscription
plans? plans?
</summary> </summary>
<div class="collapse-content"> <div class="collapse-content">
<p <p
class="text-sm sm:text-[1rem] pb-5 text-gray-200 overflow-hidden transition-all duration-300 ease-in-out" class="text-sm sm:text-[1rem] pb-5 dark:text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
> >
No, we do not charge any additional commissions or hidden No, we do not charge any additional commissions or hidden
fees beyond our subscription plans. fees beyond our subscription plans.
@ -1240,18 +1261,19 @@
<li> <li>
<details class="collapse collapse-arrow"> <details class="collapse collapse-arrow">
<summary <summary
class="collapse-title text-white text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5" class="collapse-title text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5"
> >
Can I request a refund? Can I request a refund?
</summary> </summary>
<div class="collapse-content"> <div class="collapse-content">
<p <p
class="text-sm sm:text-[1rem] pb-5 text-gray-200 overflow-hidden transition-all duration-300 ease-in-out" class="text-sm sm:text-[1rem] pb-5 dark:text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
> >
We offer a 30 day money back guarantee, no questions asked. We offer a 30 day money back guarantee, no questions asked.
Just send an email to <a Just send an email to <a
href={`mailto:${emailAddress}`} href={`mailto:${emailAddress}`}
class="text-blue-400 underline">{emailAddress}</a class="text-blue-500 dark:text-blue-400 underline"
>{emailAddress}</a
> and you will get a full refund. > and you will get a full refund.
</p> </p>
</div> </div>
@ -1261,13 +1283,13 @@
<li> <li>
<details class="collapse collapse-arrow"> <details class="collapse collapse-arrow">
<summary <summary
class="collapse-title text-white text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5" class="collapse-title text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5"
> >
What are my payment options? What are my payment options?
</summary> </summary>
<div class="collapse-content"> <div class="collapse-content">
<p <p
class="text-sm sm:text-[1rem] pb-5 text-gray-200 overflow-hidden transition-all duration-300 ease-in-out" class="text-sm sm:text-[1rem] pb-5 dark:text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
> >
We support Credit Card & Paypal payments. We support Credit Card & Paypal payments.
</p> </p>
@ -1278,13 +1300,13 @@
<li> <li>
<details class="collapse collapse-arrow"> <details class="collapse collapse-arrow">
<summary <summary
class="collapse-title text-white text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5" class="collapse-title text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5"
> >
Can I cancel at any time? Can I cancel at any time?
</summary> </summary>
<div class="collapse-content"> <div class="collapse-content">
<p <p
class="text-sm sm:text-[1rem] pb-5 text-gray-200 overflow-hidden transition-all duration-300 ease-in-out" class="text-sm sm:text-[1rem] pb-5 dark:text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
> >
Of course. There is a "Cancel Subscription" button in your Of course. There is a "Cancel Subscription" button in your
account area that you get access to after signing up. You account area that you get access to after signing up. You
@ -1296,13 +1318,13 @@
<li> <li>
<details class="collapse collapse-arrow"> <details class="collapse collapse-arrow">
<summary <summary
class="collapse-title text-white text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5" class="collapse-title text-[1rem] sm:text-xl flex sm:hover:underline sm:hover:underline-offset-4 items-center justify-between w-full text-left py-5"
> >
Why is Stocknear so much cheaper than other platforms? Why is Stocknear so much cheaper than other platforms?
</summary> </summary>
<div class="collapse-content"> <div class="collapse-content">
<p <p
class="text-sm sm:text-[1rem] pb-5 text-gray-200 overflow-hidden transition-all duration-300 ease-in-out" class="text-sm sm:text-[1rem] pb-5 dark:text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
> >
Stocknear is a solo project, which means I handle everything Stocknear is a solo project, which means I handle everything
myself—eliminating the need for a large team and costly myself—eliminating the need for a large team and costly

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

@ -391,15 +391,14 @@
<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="fixed top-0 left-0 right-0 z-20 sm:hidden">
<div class="navbar w-full px-4 py-2">
<div <div
class="{isScrolled class="fixed top-0 left-0 right-0 z-20 sm:hidden {isScrolled
? 'border-b border-gray-600 ease-in' ? 'border-b border-gray-300 dark:border-gray-800 ease-in shadow'
: 'ease-out'} m-auto w-full" : 'ease-out'} m-auto w-full"
> >
<div class="navbar h-full w-full px-4 bg-white dark:bg-default">
<div <div
class="flex-1 shrink-0 flex flex-row items-center justify-between -mt-2" class="flex-1 shrink-0 flex flex-row items-center justify-between"
> >
<a <a
href={/^\/(stocks|etf|index)/.test($previousPage || "") href={/^\/(stocks|etf|index)/.test($previousPage || "")
@ -412,7 +411,7 @@
viewBox="0 0 1024 1024" viewBox="0 0 1024 1024"
><g transform="rotate(-90 512 512)" ><g transform="rotate(-90 512 512)"
><path ><path
fill="white" fill="currentColor"
d="M104.704 685.248a64 64 0 0 0 90.496 0l316.8-316.8l316.8 316.8a64 64 0 0 0 90.496-90.496L557.248 232.704a64 64 0 0 0-90.496 0L104.704 594.752a64 64 0 0 0 0 90.496z" d="M104.704 685.248a64 64 0 0 0 90.496 0l316.8-316.8l316.8 316.8a64 64 0 0 0 90.496-90.496L557.248 232.704a64 64 0 0 0-90.496 0L104.704 594.752a64 64 0 0 0 0 90.496z"
/></g /></g
></svg ></svg
@ -444,7 +443,7 @@
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
fill="none" fill="none"
stroke="white" stroke="currentColor"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="1.5" stroke-width="1.5"
@ -467,7 +466,7 @@
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
stroke="#fff" stroke="currentColor"
><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
id="SVGRepo_tracerCarrier" id="SVGRepo_tracerCarrier"
stroke-linecap="round" stroke-linecap="round"
@ -475,7 +474,7 @@
></g><g id="SVGRepo_iconCarrier"> ></g><g id="SVGRepo_iconCarrier">
<path <path
d="M20.3359 3.22136L3.87333 8.70889C3.56801 8.81066 3.55033 9.23586 3.84614 9.36263L9.89655 11.9557C9.96078 11.9832 10.0347 11.9752 10.0916 11.9346L16.0235 7.69749C16.2073 7.56618 16.4338 7.79266 16.3025 7.97648L12.0654 13.9084C12.0248 13.9653 12.0168 14.0392 12.0443 14.1034L14.6374 20.1539C14.7641 20.4497 15.1893 20.432 15.2911 20.1267L20.7786 3.66408C20.8698 3.39046 20.6095 3.13015 20.3359 3.22136Z" d="M20.3359 3.22136L3.87333 8.70889C3.56801 8.81066 3.55033 9.23586 3.84614 9.36263L9.89655 11.9557C9.96078 11.9832 10.0347 11.9752 10.0916 11.9346L16.0235 7.69749C16.2073 7.56618 16.4338 7.79266 16.3025 7.97648L12.0654 13.9084C12.0248 13.9653 12.0168 14.0392 12.0443 14.1034L14.6374 20.1539C14.7641 20.4497 15.1893 20.432 15.2911 20.1267L20.7786 3.66408C20.8698 3.39046 20.6095 3.13015 20.3359 3.22136Z"
fill="#fff" fill="currentColor"
></path> ></path>
</g></svg </g></svg
> >
@ -497,7 +496,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="#fff" fill="currentColor"
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
/></svg /></svg
> >
@ -507,7 +506,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="white" fill="currentColor"
d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
/></svg /></svg
> >
@ -520,11 +519,11 @@
> >
{#if isTickerIncluded} {#if isTickerIncluded}
<svg <svg
class="w-6 h-6 inline-block" class="w-6 h-6 inline-block text-muted dark:text-white"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="#fff" fill="currentColor"
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
/></svg /></svg
> >
@ -534,7 +533,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="white" fill="currentColor"
d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
/></svg /></svg
> >
@ -543,16 +542,13 @@
{/if} {/if}
</div> </div>
{:else} {:else}
<label <label for="userLogin" class="cursor-pointer shrink-0 mr-4">
for="userLogin"
class="cursor-pointer shrink-0 mr-4"
>
<svg <svg
class="w-6 h-6 inline-block" class="w-6 h-6 inline-block"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="white" fill="currentColor"
d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
/></svg /></svg
> >
@ -572,7 +568,7 @@
viewBox="0 0 24 24" viewBox="0 0 24 24"
><g ><g
fill="none" fill="none"
stroke="white" stroke="currentColor"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="1.5" stroke-width="1.5"
@ -588,7 +584,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<!--End Mobile Navbar--> <!--End Mobile Navbar-->
<div class="pt-14 sm:pt-0 w-full px-3 sm:px-0 lg:pr-3"> <div class="pt-14 sm:pt-0 w-full px-3 sm:px-0 lg:pr-3">
@ -794,15 +789,15 @@
> >
<span <span
class={displayLegend?.change >= 0 class={displayLegend?.change >= 0
? "before:content-['+'] text-[#00FC50]" ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: "text-[#FF2F1F]"} : "text-red-600 dark:text-[#FF2F1F]"}
> >
{displayLegend?.change} {displayLegend?.change}
</span> </span>
<span <span
class={displayLegend?.changesPercentage >= 0 class={displayLegend?.changesPercentage >= 0
? "text-[#00FC50]" ? "text-green-600 dark:text-[#00FC50]"
: "text-[#FF2F1F]"} : "text-red-600 dark:text-[#FF2F1F]"}
> >
({displayLegend?.changesPercentage}%) ({displayLegend?.changesPercentage}%)
</span> </span>
@ -838,8 +833,8 @@
<div <div
class="mt-1.5 block text-sm xs:text-base sm:mt-0 sm:inline sm:text-lg {prePostData?.changesPercentage >= class="mt-1.5 block text-sm xs:text-base sm:mt-0 sm:inline sm:text-lg {prePostData?.changesPercentage >=
0 0
? "before:content-['+'] text-[#00FC50]" ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: 'text-[#FF2F1F]'}" : 'text-red-600 dark:text-[#FF2F1F]'}"
> >
{prePostData?.changesPercentage?.toFixed( {prePostData?.changesPercentage?.toFixed(
2, 2,

32
src/routes/stocks/[tickerID]/+page.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import highcharts from "$lib/highcharts.ts"; import highcharts from "$lib/highcharts.ts";
import { mode } from "mode-watcher";
import { import {
getCache, getCache,
@ -85,13 +86,17 @@
? data?.getStockQuote?.changesPercentage < 0 ? data?.getStockQuote?.changesPercentage < 0
: change < 0; : change < 0;
const lineColor = isNegative ? "#CC261A" : "#00FC50"; const lineColor = isNegative
? "#CC261A"
: $mode === "light"
? "#047857"
: "#00FC50";
const fillColorStart = isNegative const fillColorStart = isNegative
? "rgba(204, 38, 26, 0.3)" ? "rgba(204, 38, 26, 0.3)"
: "rgba(0, 252, 80, 0.3)"; : "rgb(4, 120, 87, 0.3)"; //"rgba(0, 252, 80, 0.3)";
const fillColorEnd = isNegative const fillColorEnd = isNegative
? "rgba(204, 38, 26, 0.004)" ? "rgba(204, 38, 26, 0.004)"
: "rgba(0, 252, 80, 0.004)"; : "rgb(4, 120, 87, 0.004)"; //"rgba(0, 252, 80, 0.004)";
const baseDate = const baseDate =
rawData && rawData?.length ? new Date(rawData?.at(0)?.time) : new Date(); rawData && rawData?.length ? new Date(rawData?.at(0)?.time) : new Date();
@ -114,8 +119,9 @@
const options = { const options = {
chart: { chart: {
backgroundColor: "#09090B", backgroundColor: $mode === "light" ? "#fff" : "#09090B",
height: 360, height: 360,
animation: false,
events: { events: {
// Add touch event handling to hide tooltip on mobile // Add touch event handling to hide tooltip on mobile
load: function () { load: function () {
@ -150,7 +156,7 @@
borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border
borderWidth: 1, borderWidth: 1,
style: { style: {
color: "#fff", color: $mode === "light" ? "black" : "white",
fontSize: "16px", fontSize: "16px",
padding: "10px", padding: "10px",
}, },
@ -201,12 +207,12 @@
tickLength: 0, tickLength: 0,
categories: displayData === "1D" ? null : dateList, categories: displayData === "1D" ? null : dateList,
crosshair: { crosshair: {
color: "#fff", color: $mode === "light" ? "black" : "white",
width: 1, width: 1,
dashStyle: "Solid", dashStyle: "Solid",
}, },
labels: { labels: {
style: { color: "#fff" }, style: { color: $mode === "light" ? "black" : "white" },
distance: 20, distance: 20,
formatter: function () { formatter: function () {
const date = new Date(this?.value); const date = new Date(this?.value);
@ -251,10 +257,10 @@
startOnTick: false, startOnTick: false,
endOnTick: false, endOnTick: false,
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: "#111827", gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
title: { text: null }, title: { text: null },
labels: { labels: {
style: { color: "white" }, style: { color: $mode === "light" ? "black" : "white" },
}, },
opposite: true, opposite: true,
// Add a dashed plot line at the previous close value // Add a dashed plot line at the previous close value
@ -636,7 +642,7 @@
} }
$: { $: {
if ($stockTicker) { if ($stockTicker || $mode) {
// add a check to see if running on client-side // add a check to see if running on client-side
shouldUpdatePriceChart.set(false); shouldUpdatePriceChart.set(false);
oneDayPrice = []; oneDayPrice = [];
@ -690,7 +696,8 @@
<span <span
class="block {displayData === interval class="block {displayData === interval
? 'text-muted dark:text-white' ? 'text-muted dark:text-white'
: 'text-gray-400'}">{interval}</span : 'text-muted dark:text-gray-400'}"
>{interval}</span
> >
<div <div
class="{displayData === interval class="{displayData === interval
@ -731,7 +738,8 @@
<span <span
class="block {displayData === interval class="block {displayData === interval
? 'text-muted dark:text-white' ? 'text-muted dark:text-white'
: 'text-gray-400'}">{interval}</span : 'text-muted dark:text-gray-400'}"
>{interval}</span
> >
<div <div
class="{displayData === interval class="{displayData === interval