This commit is contained in:
MuslemRahimi 2025-03-09 10:40:40 +01:00
parent bc5d1f237d
commit b34a7c16c4
7 changed files with 192 additions and 156 deletions

View File

@ -13,16 +13,14 @@
}
</script>
<section class="overflow-hidden text-white">
<section class="overflow-hidden text-muted dark:text-white">
<main class="overflow-hidden">
<div class="w-full">
<div
class="flex flex-col items-center w-auto p-4 sm:p-4 bg-default sm:bg-default rounded-md relative"
class="flex flex-col items-center w-auto p-4 sm:p-4 rounded-md relative"
>
<div class="relative">
<h3 class="text-center text-white text-sm sm:text-[1rem] mb-2">
AI Score
</h3>
<h3 class="text-center text-sm sm:text-[1rem] mb-2">AI Score</h3>
</div>
<div class="flex flex-row items-center justify-between">
@ -77,7 +75,7 @@
class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
>
{#if ["Pro", "Plus"]?.includes(tier)}
<span class="text-center text-white text-xl font-semibold">
<span class="text-center text-xl font-semibold">
{score}
</span>
{:else}
@ -107,7 +105,7 @@
</div>
</div>
</div>
<h4 class="text-center text-white text-sm mt-1 font-semibold">
<h4 class="text-center text-sm mt-1 font-semibold">
{#if ["Pro", "Plus"]?.includes(tier)}
{#if score === 10}
Strong Buy

View File

@ -102,13 +102,13 @@
}
</script>
<div class="space-y-3 overflow-hidden">
<div class="space-y-3 overflow-hidden text-muted dark:text-white">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto">
<div class="flex flex-col items-center w-full mb-1">
<div class="flex flex-row justify-start mr-auto items-center">
<div class="flex flex-row items-center">
<label
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>News</h2>
</label>
@ -116,9 +116,9 @@
</div>
</div>
<div class=" mt-1 sm:mt-0 text-white">
<div class=" mt-1 sm:mt-0">
<div
class="hflex flex-row items-center justify-between overflow-x-auto border-b border-gray-600 py-1.5"
class="hflex flex-row items-center justify-between overflow-x-auto border-b border-gray-300 dark:border-gray-600 py-1.5"
>
<ul
class="hide-scroll mb-0.5 flex flex-row overflow-x-auto whitespace-nowrap text-lg"
@ -126,9 +126,9 @@
<li>
<button
on:click={() => (displaySection = "all")}
class="rounded-md px-3 py-0.5 sm:hover:bg-secondary {displaySection ===
class="cursor-pointer rounded-md px-3 py-0.5 sm:hover:bg-blue-50 dark:sm:hover:bg-secondary {displaySection ===
'all'
? 'bg-secondary'
? 'bg-blue-50 dark:bg-secondary'
: ''}">All</button
>
</li>
@ -136,9 +136,9 @@
<li>
<button
on:click={() => (displaySection = "videos")}
class="rounded-md px-3 py-0.5 ml-2 sm:hover:bg-secondary {displaySection ===
class="ml-1 cursor-pointer rounded-md px-3 py-0.5 sm:hover:bg-blue-50 dark:sm:hover:bg-secondary {displaySection ===
'videos'
? 'bg-secondary'
? 'bg-blue-50 dark:bg-secondary'
: ''}">Videos</button
>
</li>
@ -147,9 +147,9 @@
<li>
<button
on:click={() => getPressRelease()}
class="rounded-md px-3 py-0.5 ml-2 sm:hover:bg-secondary {displaySection ===
class="ml-1 cursor-pointer rounded-md px-3 py-0.5 sm:hover:bg-blue-50 dark:sm:hover:bg-secondary {displaySection ===
'press-releases'
? 'bg-secondary'
? 'bg-blue-50 dark:bg-secondary'
: ''}"
><span class="inline sm:hidden">Press</span><span
class="hidden sm:inline">Press Releases</span
@ -165,7 +165,7 @@
{#if filteredNewsList?.length > 0}
<div class="grid grid-cols-1 gap-2 pb-5 pt-5">
{#each filteredNewsList as item, index (item.url)}
<div class="w-full flex flex-col bg-default rounded-md m-auto">
<div class="w-full flex flex-col rounded-md m-auto">
{#if checkIfYoutubeVideo(item.url)}
{#if showVideo[index]}
<!-- Show the YouTube iframe when the user clicks play -->
@ -196,17 +196,17 @@
</div>
{/if}
<div class="mt-3 w-full">
<h3 class="text-sm text-white/80 truncate mb-2">
<h3 class="text-sm dark:text-white/80 truncate mb-2">
{formatDate(item?.publishedDate)} &#183; {item?.site}
</h3>
<a
href={item?.url}
rel="noopener noreferrer"
target="_blank"
class="text-lg sm:text-xl font-bold text-white"
class="text-lg sm:text-xl font-bold"
>
{item?.title}
<p class="text-white text-sm mt-2 font-normal">
<p class=" text-sm mt-2 font-normal">
{item?.text?.length > 200
? item?.text?.slice(0, 200) + "..."
: item?.text}
@ -239,10 +239,10 @@
href={item?.url}
rel="noopener noreferrer"
target="_blank"
class="text-lg sm:text-xl font-bold text-white"
class="text-lg sm:text-xl font-bold"
>
{item?.title}
<p class="text-white text-sm mt-2 font-normal">
<p class=" text-sm mt-2 font-normal">
{item?.text?.length > 200
? item?.text?.slice(0, 200) + "..."
: item?.text}
@ -252,7 +252,9 @@
</div>
{/if}
</div>
<hr class="border-gray-600 w-full m-auto mt-5 mb-5" />
<hr
class="border-gray-300 dark:border-gray-600 w-full m-auto mt-5 mb-5"
/>
{/each}
</div>
{:else}

View File

@ -35,23 +35,21 @@
</script>
{#if Object?.keys(rawData)?.length !== 0}
<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 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">
Next Earnings Release
</h3>
</div>
</div>
</div>
<div class="text-white text-[1rem]">
<div class=" text-[1rem]">
{$displayCompanyName} is scheduled to release its earnings on {new Date(
rawData?.date ?? null,
)?.toLocaleString("en-US", {
@ -89,10 +87,10 @@
>, reflecting a
<span
class="{revenueRatio >= 0 && revenueRatio !== 'Infinity'
? "before:content-['+'] text-[#00FC50]"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: revenueRatio < 0 && revenueRatio !== 'Infinity'
? 'text-[#FF2F1F]'
: 'text-white'} "
? 'text-red-600 dark:text-[#FF2F1F]'
: 'text-muted dark:text-white'} "
>{revenueRatio !== "Infinity"
? abbreviateNumber(revenueRatio) + "%"
: "n/a"}</span
@ -107,7 +105,7 @@
<span class="font-semibold">{rawData?.epsEst}</span>, making a
<span
class="{epsRatio > 0
? "before:content-['+'] text-[#00FC50]"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: 'text-[#FF2F1F]'} ">{epsRatio}%</span
>
{epsRatio > 0 ? "increase" : epsRatio < 0 ? "decrease" : ""} YoY.

View File

@ -2,6 +2,7 @@
import { stockTicker } from "$lib/store";
import { sectorNavigation } from "$lib/utils";
import highcharts from "$lib/highcharts.ts";
import { mode } from "mode-watcher";
export let data;
@ -62,15 +63,15 @@
const options = {
chart: {
type: "column",
backgroundColor: "#09090B",
plotBackgroundColor: "#09090B",
backgroundColor: $mode === "light" ? "#fff" : "#09090B",
plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
height: 250,
animation: false,
},
title: {
text: `<div class="text-gray-200 mt-3 text-center font-normal text-2xl">Price Target: <span class="${changesPercentage >= 0 ? "text-[#00FC50]" : "text-[#FF2F1F]"}">$${priceTarget}</span></div>
<div class="text-gray-200 mb-2 text-center font-normal text-xl">(${changesPercentage}% ${changesPercentage >= 0 ? "upside" : "downside"})</div>
<div class="text-gray-200 text-center font-normal text-xl flex justify-center items-center">Analyst Consensus: <span class="ml-1 ${consensusRating === "Buy" ? "text-[#00FC50]" : consensusRating === "Sell" ? "text-[#FF2F1F]" : consensusRating === "Hold" ? "text-[#D5AB31]" : "text-white"}">${consensusRating ?? "n/a"}</span></div>`,
text: `<div class="text-muted dark:text-gray-200 mt-3 text-center font-normal text-2xl">Price Target: <span class="${changesPercentage >= 0 ? "text-green-500 dark:text-[#00FC50]" : "text-[#FF2F1F]"}">$${priceTarget}</span></div>
<div class="text-muted dark:text-gray-200 mb-2 text-center font-normal text-xl">(${changesPercentage}% ${changesPercentage >= 0 ? "upside" : "downside"})</div>
<div class="text-muted dark:text-gray-200 text-center font-normal text-xl flex justify-center items-center">Analyst Consensus: <span class="ml-1 ${consensusRating === "Buy" ? "text-green-500 dark:text-[#00FC50]" : consensusRating === "Sell" ? "text-red-500 dark:text-[#FF2F1F]" : consensusRating === "Hold" ? "text-orange-500 dark:text-[#D5AB31]" : "text-muted dark:text-white"}">${consensusRating ?? "n/a"}</span></div>`,
style: {
color: "white",
// Using inline CSS for margin-top and margin-bottom
@ -83,14 +84,17 @@
gridLineWidth: 0,
labels: {
rotation: 0,
style: { color: "white", fontSize: "12.5px" },
style: {
color: $mode === "light" ? "black" : "white",
fontSize: "12.5px",
},
},
},
yAxis: {
gridLineWidth: 1,
gridLineColor: "#111827",
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
labels: {
style: { color: "white" },
style: { color: $mode === "light" ? "black" : "white" },
formatter: function () {
return Math.floor(this.value); // Ensures whole numbers only
},
@ -148,7 +152,7 @@
}
$: {
if ($stockTicker) {
if ($stockTicker || $mode) {
info = data?.getStockDeck;
ipoDate =
info?.ipoDate !== null && info?.ipoDate?.length > 0
@ -198,69 +202,69 @@
}
</script>
<div class="space-y-3">
<div class="space-y-3 text-muted dark:text-white">
<div class="h-auto w-full">
<!--Start Content-->
<div class="w-auto lg:w-full flex flex-col m-auto">
<h2 class="mb-2 text-2xl text-white font-semibold">
<h2 class="mb-2 text-2xl font-semibold">
About {$stockTicker}
</h2>
<p class="text-gray-200">
<p class="dark:text-gray-200">
{snippet}
</p>
<div class="inline-block">
<a
href={`/stocks/${$stockTicker}/profile`}
class="w-full text-md mt-1 cursor-pointer sm:hover:text-white text-blue-400 sm:hover:underline"
class="w-full text-md mt-1 cursor-pointer sm:hover:text-muted dark:sm:hover:text-white text-blue-500 dark:text-blue-400 sm:hover:underline"
>
[Show more]
</a>
</div>
<div class="mt-3 grid grid-cols-2 gap-3 w-full">
<div class="col-span-1 text-gray-200">
<div class="col-span-1 dark:text-gray-200">
<span class="block font-semibold">Industry</span>
<a
href={getIndustryHref(industry)}
class="sm:hover:text-blue-400 text-white underline underline-offset-4"
class="sm:hover:text-blue-500 dark:sm:hover:text-blue-400 underline underline-offset-4"
>{industry}</a
>
</div>
<div class="col-span-1 text-gray-200">
<div class="col-span-1 dark:text-gray-200">
<span class="block font-semibold">Sector</span>
<a
href={sectorNavigation?.find((item) => item?.title === sector)
?.link}
class="sm:hover:text-blue-400 text-white underline underline-offset-4"
class="sm:hover:text-blue-500 dark:sm:hover:text-blue-400 underline underline-offset-4"
>{sector}</a
>
</div>
<div class="col-span-1 text-gray-200">
<div class="col-span-1 dark:text-gray-200">
<span class="block font-semibold">IPO Date</span>
<span>{ipoDate}</span>
</div>
<div class="col-span-1 text-gray-200">
<div class="col-span-1 dark:text-gray-200">
<span class="block font-semibold">Employees</span>
<a
href={`/stocks/${$stockTicker}/profile/employees`}
class="sm:hover:text-blue-400 text-white underline underline-offset-4"
class="sm:hover:text-blue-500 dark:sm:hover:text-blue-400 underline underline-offset-4"
>{new Intl.NumberFormat("en")?.format(employees)}</a
>
</div>
<div class="col-span-1 text-gray-200">
<div class="col-span-1 dark:text-gray-200">
<span class="block font-semibold">Stock Exchange</span>
<span>{exchange}</span>
</div>
<div class="col-span-1 text-gray-200">
<div class="col-span-1 dark:text-gray-200">
<span class="block font-semibold">Ticker Symbol</span>
<span>{$stockTicker}</span>
</div>
{#if website}
<div class="col-span-1 whitespace-nowrap text-gray-200">
<div class="col-span-1 whitespace-nowrap dark:text-gray-200">
<span class="block font-semibold">Website</span>
<a
href={website}
class="sm:hover:text-white truncate text-blue-400"
class="sm:hover:text-muted dark:sm:hover:text-white truncate text-blue-500 dark:text-blue-400"
target="_blank">{website}</a
>
</div>
@ -268,7 +272,7 @@
</div>
<a
href={`/stocks/${$stockTicker}/profile`}
class="rounded cursor-pointer w-full m-auto py-2 h-full mt-6 text-[1rem] text-center font-semibold text-black sm:hover:hover:bg-gray-300 bg-[#ffff] transition duration-100"
class="rounded cursor-pointer w-full m-auto py-2 h-full mt-6 text-[1rem] text-center font-semibold text-white dark:text-black sm:hover:text-muted dark:sm:hover:bg-gray-300 bg-[#3C74D4] dark:bg-[#ffff] transition duration-100"
>
Full Company Profile
</a>
@ -286,8 +290,8 @@
<div class="h-auto w-full">
<!--Start Content-->
<div class="w-auto lg:w-full flex flex-col m-auto pb-10">
<h2 class="mb-2 text-2xl text-white font-semibold">Analyst Forecast</h2>
<p class="text-gray-200">
<h2 class="mb-2 text-2xl font-semibold">Analyst Forecast</h2>
<p class="dark:text-gray-200">
According to {numOfAnalyst} analyst ratings, the average rating for {$stockTicker}
stock is "{consensusRating}." The 12-month stock price forecast is ${priceTarget},
which is {changesPercentage > 0 ? "an increase" : "a decrease"} of {changesPercentage}%
@ -295,13 +299,13 @@
</p>
<div
class="mt-3 border border-gray-700 rounded"
class="mt-3 border border-gray-300 dark:border-gray-700 rounded"
use:highcharts={configAnalyst}
></div>
<a
href={`/stocks/${$stockTicker}/forecast/analyst`}
class="rounded cursor-pointer w-full m-auto py-2 h-full mt-6 text-[1rem] font-semibold text-center text-black sm:hover:hover:bg-gray-300 bg-[#ffff] transition duration-100"
class="rounded cursor-pointer w-full m-auto py-2 h-full mt-6 text-[1rem] text-center font-semibold text-white dark:text-black sm:hover:text-muted dark:sm:hover:bg-gray-300 bg-[#3C74D4] dark:bg-[#ffff] transition duration-100"
>
Stock Forecasts
</a>

View File

@ -72,8 +72,10 @@
description="Join Stocknear's Affiliate Program and earn up to 20% commission on every sale. Refer customers and start earning cash today!"
/>
<main class="text-white w-full">
<section class="border-b border-gray-600 sm:rounded-md w-full">
<main class="text-muted dark:text-white w-full">
<section
class="border-b border-gray-200 dark:border-none shadow dark:border-gray-800 sm:rounded-md w-full bg-gray-100 dark:bg-gray-500/20"
>
<div class="mx-auto max-w-7xl px-6 py-16 sm:py-2 md:px-8">
<div class="text-center">
<img
@ -82,18 +84,17 @@
alt="Stocknear Logo"
loading="lazy"
/>
<h1 class="mt-1 text-4xl font-bold text-white sm:text-5xl lg:text-6xl">
<h1 class="mt-1 text-4xl font-bold sm:text-5xl lg:text-6xl">
Affiliate Program
</h1>
<p
class="mx-auto mt-5 max-w-3xl text-xl leading-normal text-white md:mt-7 md:text-2xl"
class="mx-auto mt-5 max-w-3xl text-xl leading-normal md:mt-7 md:text-2xl"
>
Become a Stocknear affiliate today &amp; earn up to <strong
>20%</strong
> on each sale!
Become a Stocknear affiliate today &amp; earn <strong>20%</strong> on each
sale!
</p>
<p
class="mx-auto max-w-3xl text-lg sm:text-xl leading-normal text-white mt-3 mb-8"
class="mx-auto max-w-3xl text-lg sm:text-xl leading-normal mt-3 mb-8"
>
Refer customers and start earning cash today!
</p>
@ -102,7 +103,7 @@
href="https://affiliates.lemonsqueezy.com/programs/stocknear"
rel="noopener noreferrer"
target="_blank"
class="bg-purple-600 sm:hover:bg-purple-700 transition-colors ease-out duration-50 text-white px-5 py-3 text-lg font-semibold rounded-md"
class="text-white bg-[#3B82F6] sm:hover:bg-blue-700 transition-colors ease-out duration-50 px-5 py-3 text-lg font-semibold rounded-md"
>
Become an affiliate
</a>
@ -111,7 +112,7 @@
</div>
</section>
<section class="border-t border-gray-600 text-white">
<section class="border-t border-gray-300 dark:border-0 dark:border-gray-600">
<div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20">
<dl
class="space-y-10 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-12 md:space-y-0"
@ -119,7 +120,7 @@
<div class="relative">
<dt>
<div
class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-white text-black"
class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-[#3B82F6] text-white dark:bg-white dark:text-black"
>
<svg
class="w-6 h-6"
@ -154,7 +155,7 @@
<div class="relative">
<dt>
<div
class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-white text-black"
class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-[#3B82F6] text-white dark:bg-white dark:text-black"
>
<svg
class="w-6 h-6"
@ -183,7 +184,7 @@
</p>
</dt>
<dd class="ml-16 mt-2">
You can earn up to <strong>$24.00</strong> commission on every referral
You can earn up to <strong>$36.00</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>
@ -191,7 +192,44 @@
<div class="relative">
<dt>
<div
class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-white text-black"
class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-[#3B82F6] text-white dark:bg-white dark:text-black"
>
<svg
class="w-6 h-6"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.75 9.25V6.5M19.25 6.5V10.5C19.25 10.9324 18.7796 11.3281 18 11.6335M19.25 6.5C19.25 7.4665 16.8995 8.25 14 8.25C11.1005 8.25 8.75 7.4665 8.75 6.5M19.25 6.5C19.25 5.5335 16.8995 4.75 14 4.75C11.1005 4.75 8.75 5.5335 8.75 6.5"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M15.25 13.5V17.5C15.25 18.4665 12.8995 19.25 10 19.25C7.10051 19.25 4.75 18.4665 4.75 17.5V13.5M15.25 13.5C15.25 14.4665 12.8995 15.25 10 15.25C7.10051 15.25 4.75 14.4665 4.75 13.5M15.25 13.5C15.25 12.5335 12.8995 11.75 10 11.75C7.10051 11.75 4.75 12.5335 4.75 13.5"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</div>
<p class="ml-16 text-lg font-semibold leading-6">
Do you support recurrent commissions?
</p>
</dt>
<dd class="ml-16 mt-2">
Yes, we offer recurring commissions! That means as long as your
referred customer remains a subscriber, youll continue earning 20%
on every payment they make. 🚀
</dd>
</div>
<div class="relative">
<dt>
<div
class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-[#3B82F6] text-white dark:bg-white dark:text-black"
>
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24">
<path
@ -237,7 +275,7 @@
<div class="relative">
<dt>
<div
class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-white text-black"
class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-[#3B82F6] text-white dark:bg-white dark:text-black"
>
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24">
<path
@ -276,7 +314,7 @@
<div class="relative">
<dt>
<div
class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-white text-black"
class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-[#3B82F6] text-white dark:bg-white dark:text-black"
>
<svg
class="w-6 h-6"
@ -306,7 +344,7 @@
<div class="relative">
<dt>
<div
class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-white text-black"
class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-[#3B82F6] text-white dark:bg-white dark:text-black"
>
<svg
class="w-6 h-6"
@ -372,9 +410,11 @@
</div>
</section>
<section class="border-t border-gray-600 text-white">
<section
class="border-t border-gray-200 shadow dark:border-gray-800 bg-gray-100 sm:rounded-md dark:bg-gray-500/20"
>
<div
class="mx-auto max-w-7xl px-6 py-12 lg:px-8 lg:py-28 bg-gray-500/20 rounded mt-10 mb-10"
class="mx-auto max-w-7xl px-6 py-12 lg:px-8 lg:py-28 rounded mt-10 mb-10"
>
<div class="m-auto flex flex-col justify-center items-center">
<h2 class="text-2xl font-semibold">Start earning cash today!</h2>
@ -383,7 +423,7 @@
href="https://affiliates.lemonsqueezy.com/programs/stocknear"
rel="noopener noreferrer"
target="_blank"
class="bg-purple-600 sm:hover:bg-purple-700 transition-colors ease-out duration-50 text-white px-5 py-3 text-lg font-semibold rounded-md"
class="text-white bg-[#3B82F6] sm:hover:bg-blue-600 transition-colors ease-out duration-50 px-5 py-3 text-lg font-semibold rounded-md"
>
Become an affiliate
</a>

View File

@ -382,7 +382,7 @@
<svelte:window bind:scrollY={y} />
<body
class="bg-default w-full max-w-screen sm:max-w-[1250px] min-h-screen overflow-hidden"
class="text-muted dark:text-white w-full max-w-screen sm:max-w-[1250px] min-h-screen overflow-hidden"
>
<!-- Page wrapper -->
<div class="mt-5 flex flex-col w-full relative w-full sm:max-w-[1250px]">
@ -391,7 +391,7 @@
<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 bg-default sm:hidden">
<div class="fixed top-0 left-0 right-0 z-20 sm:hidden">
<div class="navbar w-full px-4 py-2">
<div
class="{isScrolled
@ -424,10 +424,10 @@
? "hidden"
: "flex flex-col items-center ml-6 transition-transform ease-in"}
>
<span class="text-white text-xs font-semibold">
<span class=" text-xs font-semibold">
{$stockTicker}
</span>
<span class="text-white text-sm">
<span class=" text-sm">
{#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0}
{$currentPortfolioPrice}
{:else}
@ -545,7 +545,7 @@
{:else}
<label
for="userLogin"
class="cursor-pointer shrink-0 text-white mr-4"
class="cursor-pointer shrink-0 mr-4"
>
<svg
class="w-6 h-6 inline-block"
@ -610,7 +610,7 @@
<div class="flex flex-col ml-auto mr-2">
{#if userWatchList?.length !== 0}
<div
class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative flex items-center justify-center"
>
<label
for="addWatchListModal"
@ -641,7 +641,7 @@
</div>
{:else if userWatchList?.length === 0}
<div
class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative flex items-center justify-center"
>
<label
on:click={() =>
@ -675,11 +675,11 @@
</div>
{:else}
<div
class="shrink-0 ml-auto mr-2 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
class="shrink-0 ml-auto mr-2 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative flex items-center justify-center"
>
<label
for="userLogin"
class="cursor-pointer shrink-0 text-white"
class="cursor-pointer shrink-0"
>
<svg
class="w-7 h-7 inline-block"
@ -698,12 +698,12 @@
<!--Start Price Alert -->
<div
class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center"
class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative flex items-center justify-center"
>
<label
on:click={() => ($openPriceAlert = true)}
for={data?.user ? "priceAlertModal" : "userLogin"}
class="cursor-pointer shrink-0 text-white"
class="cursor-pointer shrink-0"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -750,9 +750,7 @@
<div
class="flex flex-row justify-between items-center w-full sm:-mt-[50px] mb-5 sm:mb-10"
>
<h1
class="text-2xl lg:text-3xl font-bold text-white"
>
<h1 class="text-2xl lg:text-3xl font-bold">
{$displayCompanyName?.length > charNumber
? $displayCompanyName?.slice(0, charNumber) +
"..."
@ -775,7 +773,7 @@
</div>
<div
class="-mt-5 sm:-mt-8 mb-5 flex flex-row items-end space-x-2 xs:space-x-3 sm:space-x-5 text-white"
class="-mt-5 sm:-mt-8 mb-5 flex flex-row items-end space-x-2 xs:space-x-3 sm:space-x-5"
>
<div class="w-full max-w-[50%] whitespace-nowrap">
<div
@ -903,16 +901,14 @@
<nav
class="sm:ml-4 border-b-[2px] overflow-x-auto whitespace-nowrap no-scrollbar"
>
<ul
class="flex flex-row items-center w-full text-[1rem] text-white"
>
<ul class="flex flex-row items-center w-full text-[1rem]">
<a
href={`/stocks/${$stockTicker}`}
on:click={() => changeSection("overview")}
class="p-2 px-5 cursor-pointer {displaySection ===
'overview'
? 'text-white bg-secondary font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
>
Overview
</a>
@ -921,8 +917,8 @@
on:click={() => changeSection("financials")}
class="p-2 px-5 cursor-pointer {displaySection ===
'financials'
? 'text-white bg-secondary font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
>
Financials
</a>
@ -931,8 +927,8 @@
on:click={() => changeSection("statistics")}
class="p-2 px-5 cursor-pointer {displaySection ===
'statistics'
? 'text-white bg-secondary font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
>Statistics</a
>
@ -941,8 +937,8 @@
on:click={() => changeSection("metrics")}
class="p-2 px-5 cursor-pointer {displaySection ===
'metrics'
? 'text-white bg-secondary font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
>Metrics</a
>
@ -952,8 +948,8 @@
on:click={() => changeSection("forecast")}
class="p-2 px-5 cursor-pointer {displaySection ===
'forecast'
? 'text-white bg-secondary font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
>
Forecast
</a>
@ -963,8 +959,8 @@
on:click={() => changeSection("dark-pool")}
class="p-2 px-5 cursor-pointer {displaySection ===
'dark-pool'
? 'text-white bg-secondary font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
>
Dark Pool
</a>
@ -973,8 +969,8 @@
on:click={() => changeSection("options")}
class="p-2 px-5 cursor-pointer {displaySection ===
'options'
? 'text-white bg-secondary font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
>
Options
</a>
@ -984,8 +980,8 @@
on:click={() => changeSection("insider")}
class="p-2 px-5 cursor-pointer {displaySection ===
'insider'
? 'text-white bg-secondary font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
>
Insider
</a>
@ -994,8 +990,8 @@
on:click={() => changeSection("dividends")}
class="p-2 px-5 cursor-pointer {displaySection ===
'dividends'
? 'text-white bg-secondary font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
>
Dividends
</a>
@ -1004,8 +1000,8 @@
on:click={() => changeSection("history")}
class="p-2 px-5 cursor-pointer {displaySection ===
'history'
? 'text-white bg-secondary font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
>
History
</a>
@ -1014,8 +1010,8 @@
on:click={() => changeSection("profile")}
class="p-2 px-5 cursor-pointer {displaySection ===
'profile'
? 'text-white bg-secondary font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}"
>
Profile
</a>

View File

@ -658,7 +658,9 @@
description={`Get a real-time ${data?.companyName} (${$stockTicker}) stock chart, price quote with breaking news, financials, statistics, charts and more.`}
/>
<section class="bg-default min-h-screen pb-40 overflow-hidden w-full">
<section
class="text-muted dark:text-white min-h-screen pb-40 overflow-hidden w-full"
>
<div class="w-full m-auto overflow-hidden">
<div
class="md:flex md:justify-between md:divide-x md:divide-slate-800 w-full"
@ -672,7 +674,7 @@
<div class="sm:pl-7 mt-4 mb-5 lg:flex lg:flex-row lg:gap-x-4 w-full">
{#if dataMapping[displayData]?.length === 0}
<div
class="order-1 lg:order-5 m-auto grow overflow-hidden border-gray-800 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
class="order-1 lg:order-5 m-auto grow overflow-hidden border-gray-300 dark:border-gray-800 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
>
<div class="flex items-center justify-between py-1 sm:pt-0.5">
<div class="hide-scroll overflow-x-auto">
@ -687,7 +689,7 @@
>
<span
class="block {displayData === interval
? 'text-white'
? 'text-muted dark:text-white'
: 'text-gray-400'}">{interval}</span
>
<div
@ -703,11 +705,9 @@
</div>
<div class="h-[360px]">
<div
class="flex h-full w-full flex-col items-center justify-center rounded-sm border border-gray-800 p-6 text-center md:p-12"
class="flex h-full w-full flex-col items-center justify-center rounded-sm border border-gray-300 dark:border-gray-800 p-6 text-center md:p-12"
>
<div
class="mb-4 text-white text-[1rem] sm:text-xl font-semibold"
>
<div class="mb-4 text-[1rem] sm:text-xl font-semibold">
No {displayData} chart data available
</div>
</div>
@ -715,7 +715,7 @@
</div>
{:else}
<div
class="order-1 lg:order-5 grow overflow-hidden border-gray-800 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
class="order-1 lg:order-5 grow overflow-hidden border-gray-300 dark:border-gray-800 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
>
<div class="flex items-center justify-between py-1 sm:pt-0.5">
<div class="hide-scroll overflow-x-auto">
@ -730,13 +730,13 @@
>
<span
class="block {displayData === interval
? 'text-white'
? 'text-muted dark:text-white'
: 'text-gray-400'}">{interval}</span
>
<div
class="{displayData === interval
? `bg-[${displayLegend?.graphChange < 0 ? '#FF2F1F' : '#00FC50'}] `
: 'bg-default'} mt-1 h-[3px] w-[1.5rem] m-auto rounded-full"
: 'bg-white dark:bg-default'} mt-1 h-[3px] w-[1.5rem] m-auto rounded-full"
/>
</button>
</li>
@ -754,7 +754,7 @@
{displayLegend?.graphChange ??
data?.getStockQuote?.changesPercentage?.toFixed(2)}%
</span>
<span class="hidden text-gray-200 sm:block"
<span class="hidden text-muted dark:text-gray-200 sm:block"
>({displayData})</span
>
</div>
@ -783,12 +783,10 @@
<div
class="mt-10 lg:mt-0 order-5 lg:order-1 flex flex-row space-x-2 sm:space-x-3 xs:space-x-4"
>
<table
class="w-[50%] text-sm text-white sm:text-[1rem] lg:min-w-[250px]"
>
<table class="w-[50%] text-sm sm:text-[1rem] lg:min-w-[250px]">
<tbody
><tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Bid</td
@ -803,12 +801,12 @@
></tr
>
<tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
><a
href={`/stocks/${$stockTicker}/statistics/market-cap`}
class="sm:hover:text-blue-400 text-white underline underline-offset-4"
class="sm:hover:text-blue-400 underline underline-offset-4"
>Market Cap</a
></td
>
@ -822,7 +820,7 @@
></tr
>
<tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Revenue (ttm)</td
@ -836,7 +834,7 @@
></tr
>
<tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Net Income (ttm)</td
@ -850,7 +848,7 @@
>
<tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>EPS (ttm)</td
@ -861,7 +859,7 @@
></tr
>
<tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>PE Ratio (ttm)</td
@ -872,7 +870,7 @@
></tr
>
<tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Forward PE</td
@ -883,7 +881,7 @@
></tr
>
<tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
><a
@ -893,8 +891,8 @@
: ""}
class={data?.getAnalystSummary?.consensusRating !==
undefined
? "sm:hover:text-blue-400 text-white underline underline-offset-4"
: "text-white cursor-text"}>Analyst</a
? "sm:hover:text-blue-400 underline underline-offset-4"
: " cursor-text"}>Analyst</a
>
</td>
<td
@ -908,10 +906,10 @@
>
</tbody>
</table>
<table class="w-[50%] text-sm text-white lg:min-w-[250px]">
<table class="w-[50%] text-sm lg:min-w-[250px]">
<tbody
><tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Ask</td
@ -926,7 +924,7 @@
></tr
>
<tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Volume</td
@ -939,7 +937,7 @@
></tr
>
<tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Avg. Volume (20D)</td
@ -954,7 +952,7 @@
></tr
>
<tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Open</td
@ -965,7 +963,7 @@
></tr
>
<tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Previous Close</td
@ -976,7 +974,7 @@
></tr
>
<tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Day's Range</td
@ -989,7 +987,7 @@
></tr
>
<tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>52-Week Range</td
@ -1002,7 +1000,7 @@
></tr
>
<tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0"
class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-1 text-sm"
>Beta</td