ui fix
This commit is contained in:
MuslemRahimi
parent
b34a7c16c4
commit
d4bcc82c2f
@ -1,8 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { scoreComponent, stockTicker } from "$lib/store";
|
||||
|
||||
export let score;
|
||||
export let tier;
|
||||
export let score = 0;
|
||||
export let tier = "Free";
|
||||
|
||||
// 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"
|
||||
>
|
||||
<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 class="flex flex-row items-center justify-between">
|
||||
@ -36,7 +40,7 @@
|
||||
cy="18"
|
||||
r="16"
|
||||
fill="none"
|
||||
class="stroke-current text-[#303030]"
|
||||
class="stroke-current text-gray-300 dark:text-[#303030]"
|
||||
stroke-width="2"
|
||||
></circle>
|
||||
<!-- score Circle inside a group with rotation -->
|
||||
@ -48,10 +52,10 @@
|
||||
r="16"
|
||||
fill="none"
|
||||
class="stroke-current {score >= 7
|
||||
? 'text-[#00FC50]'
|
||||
? 'text-green-600 dark:text-[#00FC50]'
|
||||
: score >= 4
|
||||
? 'text-[#fff]'
|
||||
: 'text-[#FF2F1F]'}"
|
||||
? 'text-blue-900 dark:text-[#fff]'
|
||||
: 'text-red-600 dark:text-[#FF2F1F]'}"
|
||||
stroke-width="3"
|
||||
stroke-dasharray="100.48"
|
||||
stroke-dashoffset={100.48 -
|
||||
@ -61,13 +65,6 @@
|
||||
</circle>
|
||||
</g>
|
||||
<!-- 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>
|
||||
|
||||
<!-- Percentage Text -->
|
||||
@ -87,7 +84,7 @@
|
||||
</span>
|
||||
<div class="absolute top-0.5 flex items-center">
|
||||
<svg
|
||||
class="size-5 text-[#fff]"
|
||||
class="size-5 text-muted dark:text-[#fff]"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
style="max-width: 40px;"
|
||||
|
||||
@ -44,22 +44,20 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="space-y-3 overflow-hidden">
|
||||
<div class="space-y-3 overflow-hidden text-muted dark:text-white">
|
||||
<!--Start Content-->
|
||||
<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-row justify-start mr-auto items-center">
|
||||
<!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
|
||||
<div class="flex flex-row items-center">
|
||||
<h3
|
||||
class="mr-1 flex flex-row items-center text-white text-2xl font-bold"
|
||||
>
|
||||
<h3 class="mr-1 flex flex-row items-center text-2xl font-bold">
|
||||
Earnings Surprise
|
||||
</h3>
|
||||
<label
|
||||
class="{latestInfoDate(rawData?.date)
|
||||
? ''
|
||||
: 'hidden'} text-black bg-[#fff] ml-2 font-semibold not-italic text-xs rounded px-2 py-0.5"
|
||||
? 'border border-gray-300'
|
||||
: '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
|
||||
>
|
||||
</div>
|
||||
@ -67,9 +65,9 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-white text-[1rem] {latestInfoDate(rawData?.date)
|
||||
? 'bg-[#F9AB00]/10 p-3 rounded-md'
|
||||
: 'bg-default pl-1'} "
|
||||
class="text-[1rem] {latestInfoDate(rawData?.date)
|
||||
? 'bg-blue-100 p-3 rounded-md shadow'
|
||||
: ' pl-1'} "
|
||||
>
|
||||
<div class="mt-1">
|
||||
{removeCompanyStrings($displayCompanyName)} has released their quartely earnings
|
||||
@ -83,7 +81,7 @@
|
||||
|
||||
<li
|
||||
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=""
|
||||
>{abbreviateNumber(rawData?.revenue, true)}</span
|
||||
@ -94,14 +92,14 @@
|
||||
)}, with
|
||||
<span
|
||||
class=" {revenueRatio > 0
|
||||
? "before:content-['+'] text-[#00FC50]"
|
||||
: 'text-[#FF2F1F]'}">{revenueRatio}%</span
|
||||
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
|
||||
: 'text-red-600 dark:text-[#FF2F1F]'}">{revenueRatio}%</span
|
||||
>
|
||||
YoY {revenueRatio < 0 ? "decline" : "growth"}.
|
||||
</li>
|
||||
<li
|
||||
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>
|
||||
{rawData?.epsSurprise > 0 ? "exceeds" : "misses"} estimates by {rawData?.epsSurprise?.toFixed(
|
||||
@ -109,10 +107,10 @@
|
||||
)}, with
|
||||
<span
|
||||
class=" {epsRatio === null
|
||||
? 'text-white'
|
||||
? ''
|
||||
: epsRatio > 0
|
||||
? 'text-[#00FC50]'
|
||||
: 'text-[#FF2F1F]'}"
|
||||
? 'text-green-600 dark:text-[#00FC50]'
|
||||
: 'text-red-600 dark:text-[#FF2F1F]'}"
|
||||
>
|
||||
{epsRatio === null ? "n/a" : `${epsRatio}%`}
|
||||
</span>
|
||||
|
||||
@ -106,7 +106,7 @@
|
||||
<span
|
||||
class="{epsRatio > 0
|
||||
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
|
||||
: 'text-[#FF2F1F]'} ">{epsRatio}%</span
|
||||
: 'text-retext-[#FF2F1F]'} ">{epsRatio}%</span
|
||||
>
|
||||
{epsRatio > 0 ? "increase" : epsRatio < 0 ? "decrease" : ""} YoY.
|
||||
{:else}
|
||||
|
||||
@ -42,12 +42,12 @@
|
||||
}
|
||||
</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">
|
||||
<div class="flex flex-row items-center">
|
||||
<label
|
||||
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>
|
||||
</label>
|
||||
@ -77,21 +77,21 @@
|
||||
'-'
|
||||
? 'bg-white'
|
||||
: item?.changesPercentage >= 0
|
||||
? 'bg-[#00FC50]'
|
||||
: 'bg-[#FF2F1F]'}"
|
||||
? 'bg-green-600 dark:bg-[#00FC50]'
|
||||
: 'bg-red-600 dark:bg-[#FF2F1F]'}"
|
||||
></div>
|
||||
<!-- Item Content -->
|
||||
|
||||
<div class="w-full h-full">
|
||||
<div class="flex flex-col items-start">
|
||||
<div class="flex flex-row items-start w-full">
|
||||
<span class="text-white text-sm"
|
||||
<span class=" text-sm"
|
||||
>{formatDate(item?.date)}
|
||||
<!--
|
||||
·
|
||||
<a
|
||||
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
|
||||
</a>
|
||||
@ -99,15 +99,14 @@
|
||||
</span>
|
||||
{#if latestInfoDate(item?.date)}
|
||||
<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
|
||||
>
|
||||
{/if}
|
||||
<div
|
||||
class="text-white text-sm sm:text-[1rem] ml-auto"
|
||||
>
|
||||
<div class=" text-sm sm:text-[1rem] ml-auto">
|
||||
{#if item?.changesPercentage >= 0}
|
||||
<span class="text-[#00FC50] inline-block"
|
||||
<span
|
||||
class="text-green-600 dark:text-[#00FC50] inline-block"
|
||||
>+{item?.changesPercentage}%</span
|
||||
>
|
||||
<svg
|
||||
@ -140,7 +139,8 @@
|
||||
</g></svg
|
||||
>
|
||||
{:else if item?.changesPercentage < 0}
|
||||
<span class="text-[#FF2F1F] inline-block"
|
||||
<span
|
||||
class="text-red-600 dark:text-[#FF2F1F] inline-block"
|
||||
>{item?.changesPercentage}%
|
||||
</span>
|
||||
<svg
|
||||
@ -195,7 +195,7 @@
|
||||
>
|
||||
</span>
|
||||
{:else}
|
||||
<span class="text-white text-[1rem]">
|
||||
<span class=" text-[1rem]">
|
||||
{item?.text}
|
||||
</span>
|
||||
{/if}
|
||||
@ -217,11 +217,13 @@
|
||||
class="cursor-pointer flex justify-center items-center mt-5"
|
||||
>
|
||||
<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"
|
||||
viewBox="0 0 24 24"
|
||||
><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"
|
||||
/></svg
|
||||
>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
|
||||
<div
|
||||
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,
|
||||
)}
|
||||
{...$$restProps}
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
"name": "How much can I earn?",
|
||||
"acceptedAnswer": {
|
||||
"@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>
|
||||
</dt>
|
||||
<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
|
||||
make by promoting us.
|
||||
</dd>
|
||||
|
||||
@ -88,7 +88,7 @@
|
||||
</svelte:head>
|
||||
|
||||
<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
|
||||
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
|
||||
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
|
||||
><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
|
||||
>
|
||||
</div>
|
||||
@ -130,13 +130,14 @@
|
||||
><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"
|
||||
></path></svg
|
||||
><span class="ml-1 mr-2 font-bold text-zinc-300"><span>4.3</span>/5</span
|
||||
><span class="font-medium text-zinc-300"
|
||||
><span class="ml-1 mr-2 font-bold text-muted dark:text-zinc-300"
|
||||
><span>4.3</span>/5</span
|
||||
><span class="font-medium text-muted dark:text-zinc-300"
|
||||
>Rated "Excellent" on <a
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
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
|
||||
></span
|
||||
>
|
||||
@ -145,9 +146,7 @@
|
||||
|
||||
<div class="px-3">
|
||||
<div class="mx-auto text-center mb-8">
|
||||
<h1
|
||||
class="text-4xl sm:text-5xl font-bold text-white text-transparent pb-4"
|
||||
>
|
||||
<h1 class="text-4xl sm:text-5xl font-bold pb-4">
|
||||
Save Time & Maximize Profits
|
||||
</h1>
|
||||
</div>
|
||||
@ -155,7 +154,7 @@
|
||||
<!--<Discount/>-->
|
||||
|
||||
<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">
|
||||
<input
|
||||
@ -181,20 +180,22 @@
|
||||
>
|
||||
<div
|
||||
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>
|
||||
<p class="text-zinc-300 text-sm mt-1">Ideal for Beginners</p>
|
||||
<h3 class="text-3xl font-bold">Basic</h3>
|
||||
<p class="text-muted dark:text-zinc-300 text-sm mt-1">
|
||||
Ideal for Beginners
|
||||
</p>
|
||||
<div class="mt-4">
|
||||
<span class="text-4xl font-bold text-white">$0</span><span
|
||||
class="text-white text-xl ml-1">/Month</span
|
||||
<span class="text-4xl font-bold">$0</span><span class=" text-xl ml-1"
|
||||
>/Month</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<ul class="mt-6 mb-6 space-y-2">
|
||||
<li class="flex items-start">
|
||||
<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"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@ -205,11 +206,11 @@
|
||||
stroke-width="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
></path></svg
|
||||
><span class="text-white">1 Watchlist</span>
|
||||
><span class="">1 Watchlist</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<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"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@ -220,11 +221,11 @@
|
||||
stroke-width="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
></path></svg
|
||||
><span class="text-white">3 Price Alerts</span>
|
||||
><span class="">3 Price Alerts</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<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"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@ -235,12 +236,12 @@
|
||||
stroke-width="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
></path></svg
|
||||
><span class="text-white">Realtime Notification</span>
|
||||
><span class="">Realtime Notification</span>
|
||||
</li>
|
||||
|
||||
<li class="flex items-start">
|
||||
<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"
|
||||
version="1.1"
|
||||
fill="currentColor"
|
||||
@ -297,11 +298,13 @@
|
||||
</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 class="flex items-start">
|
||||
<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"
|
||||
version="1.1"
|
||||
fill="currentColor"
|
||||
@ -358,11 +361,13 @@
|
||||
</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 class="flex items-start">
|
||||
<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"
|
||||
version="1.1"
|
||||
fill="currentColor"
|
||||
@ -419,12 +424,14 @@
|
||||
</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 class="flex items-start">
|
||||
<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"
|
||||
version="1.1"
|
||||
fill="currentColor"
|
||||
@ -481,11 +488,11 @@
|
||||
</g></svg
|
||||
>
|
||||
|
||||
<span class="text-gray-400">Stock Screener</span>
|
||||
<span class="text-muted dark:text-gray-400">Stock Screener</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<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"
|
||||
version="1.1"
|
||||
fill="currentColor"
|
||||
@ -542,11 +549,13 @@
|
||||
</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 class="flex items-start">
|
||||
<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"
|
||||
version="1.1"
|
||||
fill="currentColor"
|
||||
@ -603,14 +612,16 @@
|
||||
</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>
|
||||
</ul>
|
||||
<div class="mt-auto pt-6 border-t border-zinc-700 mx-4">
|
||||
{#if !data?.user}
|
||||
<label
|
||||
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
|
||||
class="w-5 h-5 ml-2"
|
||||
fill="none"
|
||||
@ -630,23 +641,29 @@
|
||||
</div>
|
||||
<div
|
||||
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>
|
||||
<p class="text-zinc-300 text-sm mt-1">Best for Intermediate Traders</p>
|
||||
<h3 class="text-3xl font-bold">Plus</h3>
|
||||
<p class="text-muted dark:text-zinc-300 text-sm mt-1">
|
||||
Best for Intermediate Traders
|
||||
</p>
|
||||
<div class="mt-4">
|
||||
<span class="text-4xl font-bold text-white"
|
||||
>{mode ? "$7.50" : "$10"}</span
|
||||
><span class="text-white text-xl ml-1">/Month</span>
|
||||
<span class="text-4xl font-bold">{mode ? "$7.50" : "$10"}</span><span
|
||||
class=" text-xl ml-1">/Month</span
|
||||
>
|
||||
</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)
|
||||
</p>
|
||||
|
||||
<ul class="mt-6 mb-6 space-y-2">
|
||||
<li class="flex items-start">
|
||||
<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"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@ -657,11 +674,11 @@
|
||||
stroke-width="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
></path></svg
|
||||
><span class="text-white">Unlimited Watchlist</span>
|
||||
><span class="">Unlimited Watchlist</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<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"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@ -672,11 +689,11 @@
|
||||
stroke-width="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
></path></svg
|
||||
><span class="text-white">Unlimited Price Alerts</span>
|
||||
><span class="">Unlimited Price Alerts</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<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"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@ -689,11 +706,11 @@
|
||||
></path></svg
|
||||
>
|
||||
|
||||
<span class="text-white">Unlimited Stock Screener</span>
|
||||
<span class="">Unlimited Stock Screener</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<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"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@ -704,12 +721,12 @@
|
||||
stroke-width="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
></path></svg
|
||||
><span class="text-white">Realtime Notification</span>
|
||||
><span class="">Realtime Notification</span>
|
||||
</li>
|
||||
|
||||
<li class="flex items-start">
|
||||
<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"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@ -722,11 +739,11 @@
|
||||
></path></svg
|
||||
>
|
||||
|
||||
<span class="text-white">Hedge Fund Portfolio Access</span>
|
||||
<span class="">Hedge Fund Portfolio Access</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<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"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@ -739,11 +756,11 @@
|
||||
></path></svg
|
||||
>
|
||||
|
||||
<span class="text-white">US Congress Portfolio Access</span>
|
||||
<span class="">US Congress Portfolio Access</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<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"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@ -756,12 +773,12 @@
|
||||
></path></svg
|
||||
>
|
||||
|
||||
<span class="text-white">Financial History Access</span>
|
||||
<span class="">Financial History Access</span>
|
||||
</li>
|
||||
|
||||
<li class="flex items-start">
|
||||
<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"
|
||||
version="1.1"
|
||||
fill="currentColor"
|
||||
@ -818,11 +835,13 @@
|
||||
</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 class="flex items-start">
|
||||
<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"
|
||||
version="1.1"
|
||||
fill="currentColor"
|
||||
@ -879,14 +898,16 @@
|
||||
</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>
|
||||
</ul>
|
||||
<div class="mt-auto pt-6 border-t border-zinc-700 mx-4">
|
||||
<label
|
||||
for={!data?.user ? "userLogin" : ""}
|
||||
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
|
||||
class="w-5 h-5 ml-2"
|
||||
fill="none"
|
||||
@ -905,23 +926,29 @@
|
||||
</div>
|
||||
<div
|
||||
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>
|
||||
<p class="text-zinc-300 text-sm mt-1">Best for Professional Traders</p>
|
||||
<h3 class="text-3xl font-bold">Pro</h3>
|
||||
<p class="text-muted dark:text-zinc-300 text-sm mt-1">
|
||||
Best for Professional Traders
|
||||
</p>
|
||||
<div class="mt-4">
|
||||
<span class="text-4xl font-bold text-white"
|
||||
>{mode ? "$15" : "$20"}</span
|
||||
><span class="text-white text-xl ml-1">/Month</span>
|
||||
<span class="text-4xl font-bold">{mode ? "$15" : "$20"}</span><span
|
||||
class=" text-xl ml-1">/Month</span
|
||||
>
|
||||
</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)
|
||||
</p>
|
||||
|
||||
<ul class="mt-6 mb-6 space-y-2">
|
||||
<li class="flex items-start">
|
||||
<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"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@ -932,12 +959,12 @@
|
||||
stroke-width="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
></path></svg
|
||||
><span class="text-white">Everything in Plus and ...</span>
|
||||
><span class="">Everything in Plus and ...</span>
|
||||
</li>
|
||||
|
||||
<li class="flex items-start">
|
||||
<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"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@ -950,11 +977,11 @@
|
||||
></path></svg
|
||||
>
|
||||
|
||||
<span class="text-white">Realtime Options Activity</span>
|
||||
<span class="">Realtime Options Activity</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<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"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@ -967,14 +994,14 @@
|
||||
></path></svg
|
||||
>
|
||||
|
||||
<span class="text-white">Realtime Dark Pool Trades</span>
|
||||
<span class="">Realtime Dark Pool Trades</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="mt-auto pt-6 border-t border-zinc-700 mx-4">
|
||||
<label
|
||||
for={!data?.user ? "userLogin" : ""}
|
||||
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
|
||||
class="w-5 h-5 ml-2"
|
||||
fill="none"
|
||||
@ -993,17 +1020,17 @@
|
||||
</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+ -->
|
||||
<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>
|
||||
<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>
|
||||
<!-- 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!
|
||||
</p>
|
||||
<!-- Button container: full width on mobile, 1/4 width on md+ -->
|
||||
@ -1011,7 +1038,7 @@
|
||||
<label
|
||||
for={!data?.user ? "userLogin" : ""}
|
||||
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
|
||||
<svg
|
||||
@ -1036,9 +1063,7 @@
|
||||
<!--Feature Table-->
|
||||
<section class="py-8 md:py-12 mt-8 md:mt-10">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<h2
|
||||
class="text-3xl md:text-4xl font-bold text-white mb-6 md:mb-10 text-center"
|
||||
>
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6 md:mb-10 text-center">
|
||||
Compare plans & features
|
||||
</h2>
|
||||
<!-- Make sure the table can scroll horizontally on small screens -->
|
||||
@ -1052,29 +1077,27 @@
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="py-2 md:py-3 pt-8 font-semibold text-sm sm:text-lg text-white"
|
||||
>
|
||||
<th class="py-2 md:py-3 pt-8 font-semibold text-sm sm:text-lg">
|
||||
Research company stocks
|
||||
</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
|
||||
</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
|
||||
</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
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-sm md:text-white">
|
||||
<tbody class="text-sm md:">
|
||||
<tr>
|
||||
<td class="py-2 md:py-3">Full Market Access</td>
|
||||
<td class="py-2 md:py-3 text-center">❌</td>
|
||||
@ -1102,7 +1125,7 @@
|
||||
<tr>
|
||||
<td
|
||||
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
|
||||
</td>
|
||||
@ -1123,7 +1146,7 @@
|
||||
<tr>
|
||||
<td
|
||||
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
|
||||
</td>
|
||||
@ -1162,14 +1185,12 @@
|
||||
|
||||
<!--Start FAQ-->
|
||||
|
||||
<section class="bg-default">
|
||||
<section class="">
|
||||
<div class="mx-auto">
|
||||
<div class="py-12 md:py-10">
|
||||
<!-- Section header -->
|
||||
<div class="max-w-3xl mx-auto text-center pb-12 md:pb-14">
|
||||
<h2 class="text-4xl font-bold text-white">
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
<h2 class="text-4xl font-bold">Frequently Asked Questions</h2>
|
||||
</div>
|
||||
|
||||
<!-- Faqs -->
|
||||
@ -1177,12 +1198,12 @@
|
||||
<li>
|
||||
<details class="collapse collapse-arrow">
|
||||
<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
|
||||
>
|
||||
<div class="collapse-content">
|
||||
<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
|
||||
data and an extensive tool suite for every trader, featuring
|
||||
@ -1198,19 +1219,19 @@
|
||||
<li>
|
||||
<details class="collapse collapse-arrow">
|
||||
<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?
|
||||
</summary>
|
||||
<div class="collapse-content">
|
||||
<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
|
||||
of it for you.
|
||||
<a
|
||||
href={`mailto:${emailAddress}`}
|
||||
class="text-blue-400 underline"
|
||||
class="text-blue-500 dark:text-blue-400 underline"
|
||||
>
|
||||
{emailAddress}
|
||||
</a>
|
||||
@ -1222,14 +1243,14 @@
|
||||
<li>
|
||||
<details class="collapse collapse-arrow">
|
||||
<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
|
||||
plans?
|
||||
</summary>
|
||||
<div class="collapse-content">
|
||||
<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
|
||||
fees beyond our subscription plans.
|
||||
@ -1240,18 +1261,19 @@
|
||||
<li>
|
||||
<details class="collapse collapse-arrow">
|
||||
<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?
|
||||
</summary>
|
||||
<div class="collapse-content">
|
||||
<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.
|
||||
Just send an email to <a
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
@ -1261,13 +1283,13 @@
|
||||
<li>
|
||||
<details class="collapse collapse-arrow">
|
||||
<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?
|
||||
</summary>
|
||||
<div class="collapse-content">
|
||||
<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.
|
||||
</p>
|
||||
@ -1278,13 +1300,13 @@
|
||||
<li>
|
||||
<details class="collapse collapse-arrow">
|
||||
<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?
|
||||
</summary>
|
||||
<div class="collapse-content">
|
||||
<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
|
||||
account area that you get access to after signing up. You
|
||||
@ -1296,13 +1318,13 @@
|
||||
<li>
|
||||
<details class="collapse collapse-arrow">
|
||||
<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?
|
||||
</summary>
|
||||
<div class="collapse-content">
|
||||
<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
|
||||
myself—eliminating the need for a large team and costly
|
||||
|
||||
@ -391,201 +391,196 @@
|
||||
<div class="w-full">
|
||||
<div class="sm:flex sm:justify-start w-full">
|
||||
<!--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
|
||||
class="fixed top-0 left-0 right-0 z-20 sm:hidden {isScrolled
|
||||
? 'border-b border-gray-300 dark:border-gray-800 ease-in shadow'
|
||||
: 'ease-out'} m-auto w-full"
|
||||
>
|
||||
<div class="navbar h-full w-full px-4 bg-white dark:bg-default">
|
||||
<div
|
||||
class="{isScrolled
|
||||
? 'border-b border-gray-600 ease-in'
|
||||
: 'ease-out'} m-auto w-full"
|
||||
class="flex-1 shrink-0 flex flex-row items-center justify-between"
|
||||
>
|
||||
<div
|
||||
class="flex-1 shrink-0 flex flex-row items-center justify-between -mt-2"
|
||||
<a
|
||||
href={/^\/(stocks|etf|index)/.test($previousPage || "")
|
||||
? "/"
|
||||
: $previousPage || "/"}
|
||||
>
|
||||
<a
|
||||
href={/^\/(stocks|etf|index)/.test($previousPage || "")
|
||||
? "/"
|
||||
: $previousPage || "/"}
|
||||
<svg
|
||||
class="w-5 h-5 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 1024 1024"
|
||||
><g transform="rotate(-90 512 512)"
|
||||
><path
|
||||
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"
|
||||
/></g
|
||||
></svg
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 1024 1024"
|
||||
><g transform="rotate(-90 512 512)"
|
||||
><path
|
||||
fill="white"
|
||||
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
|
||||
></svg
|
||||
>
|
||||
</a>
|
||||
</a>
|
||||
|
||||
<div
|
||||
class={!isScrolled
|
||||
? "hidden"
|
||||
: "flex flex-col items-center ml-6 transition-transform ease-in"}
|
||||
<div
|
||||
class={!isScrolled
|
||||
? "hidden"
|
||||
: "flex flex-col items-center ml-6 transition-transform ease-in"}
|
||||
>
|
||||
<span class=" text-xs font-semibold">
|
||||
{$stockTicker}
|
||||
</span>
|
||||
<span class=" text-sm">
|
||||
{#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0}
|
||||
{$currentPortfolioPrice}
|
||||
{:else}
|
||||
{data?.getStockQuote?.price}
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!--Start Search Button-->
|
||||
<label class="ml-auto mr-4" for="searchBarModal">
|
||||
<svg
|
||||
class="w-6 h-6 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
d="m21 21l-4.343-4.343m0 0A8 8 0 1 0 5.343 5.343a8 8 0 0 0 11.314 11.314"
|
||||
/></svg
|
||||
>
|
||||
<span class=" text-xs font-semibold">
|
||||
{$stockTicker}
|
||||
</span>
|
||||
<span class=" text-sm">
|
||||
{#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0}
|
||||
{$currentPortfolioPrice}
|
||||
{:else}
|
||||
{data?.getStockQuote?.price}
|
||||
{/if}
|
||||
</span>
|
||||
</label>
|
||||
<!--End Search Button-->
|
||||
|
||||
<!--Start Share Button-->
|
||||
<label
|
||||
class="mr-4"
|
||||
on:click={() =>
|
||||
shareContent(
|
||||
"https://stocknear.com/stocks/" + $stockTicker,
|
||||
)}
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 inline-block"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
stroke="currentColor"
|
||||
><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
|
||||
id="SVGRepo_tracerCarrier"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></g><g id="SVGRepo_iconCarrier">
|
||||
<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"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</g></svg
|
||||
>
|
||||
</label>
|
||||
<!--End Share Button-->
|
||||
|
||||
<!--Start Watchlist-->
|
||||
|
||||
{#if data?.user}
|
||||
<div class="flex flex-col mr-4">
|
||||
{#if userWatchList?.length !== 0}
|
||||
<label
|
||||
for="addWatchListModal"
|
||||
class="cursor-pointer shrink-0"
|
||||
>
|
||||
{#if isTickerIncluded}
|
||||
<svg
|
||||
class="w-6 h-6 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><path
|
||||
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"
|
||||
/></svg
|
||||
>
|
||||
{:else}
|
||||
<svg
|
||||
class="w-6 h-6 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><path
|
||||
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"
|
||||
/></svg
|
||||
>
|
||||
{/if}
|
||||
</label>
|
||||
{:else if userWatchList?.length === 0}
|
||||
<label
|
||||
on:click={() => toggleUserWatchlist("firstList")}
|
||||
class="cursor-pointer shrink-0"
|
||||
>
|
||||
{#if isTickerIncluded}
|
||||
<svg
|
||||
class="w-6 h-6 inline-block text-muted dark:text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><path
|
||||
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"
|
||||
/></svg
|
||||
>
|
||||
{:else}
|
||||
<svg
|
||||
class="w-6 h-6 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><path
|
||||
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"
|
||||
/></svg
|
||||
>
|
||||
{/if}
|
||||
</label>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!--Start Search Button-->
|
||||
<label class="ml-auto mr-4" for="searchBarModal">
|
||||
{:else}
|
||||
<label for="userLogin" class="cursor-pointer shrink-0 mr-4">
|
||||
<svg
|
||||
class="w-6 h-6 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
viewBox="0 0 16 16"
|
||||
><path
|
||||
fill="none"
|
||||
stroke="white"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
d="m21 21l-4.343-4.343m0 0A8 8 0 1 0 5.343 5.343a8 8 0 0 0 11.314 11.314"
|
||||
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"
|
||||
/></svg
|
||||
>
|
||||
</label>
|
||||
<!--End Search Button-->
|
||||
{/if}
|
||||
<!--End Watchlist-->
|
||||
|
||||
<!--Start Share Button-->
|
||||
<label
|
||||
class="mr-4"
|
||||
on:click={() =>
|
||||
shareContent(
|
||||
"https://stocknear.com/stocks/" + $stockTicker,
|
||||
)}
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 inline-block"
|
||||
viewBox="0 0 24 24"
|
||||
<!--Start Price Alert-->
|
||||
<label
|
||||
on:click={() => ($openPriceAlert = true)}
|
||||
for={data?.user ? "priceAlertModal" : "userLogin"}
|
||||
class="mr-2"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-7 h-7 inline-block mt-1"
|
||||
viewBox="0 0 24 24"
|
||||
><g
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
stroke="#fff"
|
||||
><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
|
||||
id="SVGRepo_tracerCarrier"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></g><g id="SVGRepo_iconCarrier">
|
||||
<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"
|
||||
fill="#fff"
|
||||
></path>
|
||||
</g></svg
|
||||
>
|
||||
</label>
|
||||
<!--End Share Button-->
|
||||
|
||||
<!--Start Watchlist-->
|
||||
|
||||
{#if data?.user}
|
||||
<div class="flex flex-col mr-4">
|
||||
{#if userWatchList?.length !== 0}
|
||||
<label
|
||||
for="addWatchListModal"
|
||||
class="cursor-pointer shrink-0"
|
||||
>
|
||||
{#if isTickerIncluded}
|
||||
<svg
|
||||
class="w-6 h-6 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><path
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
{:else}
|
||||
<svg
|
||||
class="w-6 h-6 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><path
|
||||
fill="white"
|
||||
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
|
||||
>
|
||||
{/if}
|
||||
</label>
|
||||
{:else if userWatchList?.length === 0}
|
||||
<label
|
||||
on:click={() => toggleUserWatchlist("firstList")}
|
||||
class="cursor-pointer shrink-0"
|
||||
>
|
||||
{#if isTickerIncluded}
|
||||
<svg
|
||||
class="w-6 h-6 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><path
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
{:else}
|
||||
<svg
|
||||
class="w-6 h-6 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><path
|
||||
fill="white"
|
||||
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
|
||||
>
|
||||
{/if}
|
||||
</label>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<label
|
||||
for="userLogin"
|
||||
class="cursor-pointer shrink-0 mr-4"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><path
|
||||
fill="white"
|
||||
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
|
||||
>
|
||||
</label>
|
||||
{/if}
|
||||
<!--End Watchlist-->
|
||||
|
||||
<!--Start Price Alert-->
|
||||
<label
|
||||
on:click={() => ($openPriceAlert = true)}
|
||||
for={data?.user ? "priceAlertModal" : "userLogin"}
|
||||
class="mr-2"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
><path d="M3 5.231L6.15 3M21 5.231L17.85 3" /><circle
|
||||
cx="12"
|
||||
cy="13"
|
||||
r="8"
|
||||
/><path d="M9.5 13h5M12 10.5v5" /></g
|
||||
></svg
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-7 h-7 inline-block mt-1"
|
||||
viewBox="0 0 24 24"
|
||||
><g
|
||||
fill="none"
|
||||
stroke="white"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
><path d="M3 5.231L6.15 3M21 5.231L17.85 3" /><circle
|
||||
cx="12"
|
||||
cy="13"
|
||||
r="8"
|
||||
/><path d="M9.5 13h5M12 10.5v5" /></g
|
||||
></svg
|
||||
>
|
||||
</label>
|
||||
<!--End Price Alert -->
|
||||
</div>
|
||||
</label>
|
||||
<!--End Price Alert -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -794,15 +789,15 @@
|
||||
>
|
||||
<span
|
||||
class={displayLegend?.change >= 0
|
||||
? "before:content-['+'] text-[#00FC50]"
|
||||
: "text-[#FF2F1F]"}
|
||||
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
|
||||
: "text-red-600 dark:text-[#FF2F1F]"}
|
||||
>
|
||||
{displayLegend?.change}
|
||||
</span>
|
||||
<span
|
||||
class={displayLegend?.changesPercentage >= 0
|
||||
? "text-[#00FC50]"
|
||||
: "text-[#FF2F1F]"}
|
||||
? "text-green-600 dark:text-[#00FC50]"
|
||||
: "text-red-600 dark:text-[#FF2F1F]"}
|
||||
>
|
||||
({displayLegend?.changesPercentage}%)
|
||||
</span>
|
||||
@ -838,8 +833,8 @@
|
||||
<div
|
||||
class="mt-1.5 block text-sm xs:text-base sm:mt-0 sm:inline sm:text-lg {prePostData?.changesPercentage >=
|
||||
0
|
||||
? "before:content-['+'] text-[#00FC50]"
|
||||
: 'text-[#FF2F1F]'}"
|
||||
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
|
||||
: 'text-red-600 dark:text-[#FF2F1F]'}"
|
||||
>
|
||||
{prePostData?.changesPercentage?.toFixed(
|
||||
2,
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import highcharts from "$lib/highcharts.ts";
|
||||
import { mode } from "mode-watcher";
|
||||
|
||||
import {
|
||||
getCache,
|
||||
@ -85,13 +86,17 @@
|
||||
? data?.getStockQuote?.changesPercentage < 0
|
||||
: change < 0;
|
||||
|
||||
const lineColor = isNegative ? "#CC261A" : "#00FC50";
|
||||
const lineColor = isNegative
|
||||
? "#CC261A"
|
||||
: $mode === "light"
|
||||
? "#047857"
|
||||
: "#00FC50";
|
||||
const fillColorStart = isNegative
|
||||
? "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
|
||||
? "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 =
|
||||
rawData && rawData?.length ? new Date(rawData?.at(0)?.time) : new Date();
|
||||
@ -114,8 +119,9 @@
|
||||
|
||||
const options = {
|
||||
chart: {
|
||||
backgroundColor: "#09090B",
|
||||
backgroundColor: $mode === "light" ? "#fff" : "#09090B",
|
||||
height: 360,
|
||||
animation: false,
|
||||
events: {
|
||||
// Add touch event handling to hide tooltip on mobile
|
||||
load: function () {
|
||||
@ -150,7 +156,7 @@
|
||||
borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border
|
||||
borderWidth: 1,
|
||||
style: {
|
||||
color: "#fff",
|
||||
color: $mode === "light" ? "black" : "white",
|
||||
fontSize: "16px",
|
||||
padding: "10px",
|
||||
},
|
||||
@ -201,12 +207,12 @@
|
||||
tickLength: 0,
|
||||
categories: displayData === "1D" ? null : dateList,
|
||||
crosshair: {
|
||||
color: "#fff",
|
||||
color: $mode === "light" ? "black" : "white",
|
||||
width: 1,
|
||||
dashStyle: "Solid",
|
||||
},
|
||||
labels: {
|
||||
style: { color: "#fff" },
|
||||
style: { color: $mode === "light" ? "black" : "white" },
|
||||
distance: 20,
|
||||
formatter: function () {
|
||||
const date = new Date(this?.value);
|
||||
@ -251,10 +257,10 @@
|
||||
startOnTick: false,
|
||||
endOnTick: false,
|
||||
gridLineWidth: 1,
|
||||
gridLineColor: "#111827",
|
||||
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
|
||||
title: { text: null },
|
||||
labels: {
|
||||
style: { color: "white" },
|
||||
style: { color: $mode === "light" ? "black" : "white" },
|
||||
},
|
||||
opposite: true,
|
||||
// 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
|
||||
shouldUpdatePriceChart.set(false);
|
||||
oneDayPrice = [];
|
||||
@ -690,7 +696,8 @@
|
||||
<span
|
||||
class="block {displayData === interval
|
||||
? 'text-muted dark:text-white'
|
||||
: 'text-gray-400'}">{interval}</span
|
||||
: 'text-muted dark:text-gray-400'}"
|
||||
>{interval}</span
|
||||
>
|
||||
<div
|
||||
class="{displayData === interval
|
||||
@ -731,7 +738,8 @@
|
||||
<span
|
||||
class="block {displayData === interval
|
||||
? 'text-muted dark:text-white'
|
||||
: 'text-gray-400'}">{interval}</span
|
||||
: 'text-muted dark:text-gray-400'}"
|
||||
>{interval}</span
|
||||
>
|
||||
<div
|
||||
class="{displayData === interval
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user