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

refactor code

Browse Source
This commit is contained in:
MuslemRahimi 2024-10-24 23:07:05 +02:00
parent 37cbd599ff
commit 3f1ac5ef40
13 changed files with 4129 additions and 3114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
src/routes/analysts/+page.svelte
View File

@ -1,12 +1,10 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { numberOfUnreadNotification } from '$lib/store';
import { sortTableData } from '$lib/utils';
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
import ArrowLogo from 'lucide-svelte/icons/move-up-right';
import TableHeader from '$lib/components/Table/TableHeader.svelte';
import { numberOfUnreadNotification } from "$lib/store";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
import TableHeader from "$lib/components/Table/TableHeader.svelte";
import { onMount } from 'svelte';
import { onMount } from "svelte";
export let data;
@ -28,28 +26,28 @@
onMount(async () => {
isLoaded = true;
window.addEventListener('scroll', handleScroll);
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
window.removeEventListener("scroll", handleScroll);
};
});
let columns = [
{ key: 'rank', label: 'Rank', align: 'left' },
{ key: 'analystName', label: 'Analyst', align: 'left' },
{ key: 'successRate', label: 'Success Rate', align: 'right' },
{ key: 'avgReturn', label: 'Avg. Return', align: 'right' },
{ key: 'totalRatings', label: 'Total Ratings', align: 'right' },
{ key: 'lastRating', label: 'Last Rating', align: 'right' },
{ key: "rank", label: "Rank", align: "left" },
{ key: "analystName", label: "Analyst", align: "left" },
{ key: "successRate", label: "Success Rate", align: "right" },
{ key: "avgReturn", label: "Avg. Return", align: "right" },
{ key: "totalRatings", label: "Total Ratings", align: "right" },
{ key: "lastRating", label: "Last Rating", align: "right" },
];
let sortOrders = {
rank: { order: 'none', type: 'number' },
analystName: { order: 'none', type: 'string' },
successRate: { order: 'none', type: 'number' },
avgReturn: { order: 'none', type: 'number' },
totalRatings: { order: 'none', type: 'number' },
lastRating: { order: 'none', type: 'date' },
rank: { order: "none", type: "number" },
analystName: { order: "none", type: "string" },
successRate: { order: "none", type: "number" },
avgReturn: { order: "none", type: "number" },
totalRatings: { order: "none", type: "number" },
lastRating: { order: "none", type: "date" },
};
const sortData = (key) => {
@ -57,12 +55,12 @@
let finalList = [];
for (const k in sortOrders) {
if (k !== key) {
sortOrders[k].order = 'none';
sortOrders[k].order = "none";
}
}
// Cycle through 'none', 'asc', 'desc' for the clicked key
const orderCycle = ['none', 'asc', 'desc'];
const orderCycle = ["none", "asc", "desc"];
const originalData = rawData?.slice(0, 40);
const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
sortOrders[key].order =
@ -70,7 +68,7 @@
const sortOrder = sortOrders[key].order;
// Reset to original data when 'none' and stop further sorting
if (sortOrder === 'none') {
if (sortOrder === "none") {
analytRatingList = [...originalData]; // Reset to original data (spread to avoid mutation)
return;
}
@ -81,24 +79,24 @@
let valueA, valueB;
switch (type) {
case 'date':
case "date":
valueA = new Date(a[key]);
valueB = new Date(b[key]);
break;
case 'string':
case "string":
valueA = a[key].toUpperCase();
valueB = b[key].toUpperCase();
return sortOrder === 'asc'
return sortOrder === "asc"
? valueA.localeCompare(valueB)
: valueB.localeCompare(valueA);
case 'number':
case "number":
default:
valueA = parseFloat(a[key]);
valueB = parseFloat(b[key]);
break;
}
if (sortOrder === 'asc') {
if (sortOrder === "asc") {
return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
} else {
return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
@ -114,7 +112,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Top
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Top
Wall Street Stock Analysts · stocknear
</title>
<meta
@ -214,7 +212,7 @@
<div class="z-1 absolute top-4">
<img
class="w-36 ml-2"
src={cloudFrontUrl + '/assets/analyst_logo.png'}
src={cloudFrontUrl + "/assets/analyst_logo.png"}
alt="logo"
loading="lazy"
/>
@ -255,7 +253,7 @@
>
<div class="flex flex-col items-start">
<a
href={'/analysts/' + item?.analystId}
href={"/analysts/" + item?.analystId}
class="sm:hover:text-white text-blue-400 font-medium"
>{item?.analystName}
</a>
@ -339,15 +337,15 @@
>
{item?.lastRating !== null
? new Date(item?.lastRating)?.toLocaleString(
'en-US',
"en-US",
{
month: 'short',
day: 'numeric',
year: 'numeric',
daySuffix: '2-digit',
month: "short",
day: "numeric",
year: "numeric",
daySuffix: "2-digit",
},
)
: 'n/a'}
: "n/a"}
</td>
</tr>
{/each}
@ -375,12 +373,12 @@
</div>
</main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div
on:click={() => goto('/pricing')}
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<div
<a
href={"/pricing"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
@ -392,15 +390,17 @@
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools
</span>
</div>
</a>
</div>
{/if}
<div
on:click={() => goto('/analysts/top-stocks')}
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<a
href={"/analysts/top-stocks"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Top Stocks Picks ⭐
@ -410,14 +410,16 @@
<span class="text-white p-3 ml-3 mr-3">
Get the latest top Wall Street analyst ratings.
</span>
</div>
</a>
</div>
<div
on:click={() => goto('/most-shorted-stocks')}
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<a
href={"/most-shorted-stocks"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Top Shorted Stocks 🍋
@ -427,7 +429,7 @@
<span class="text-white p-3 ml-3 mr-3">
Never miss out another short squeeze
</span>
</div>
</a>
</div>
</aside>
</div>

346
src/routes/analysts/top-stocks/+page.svelte
View File

@ -1,22 +1,19 @@
<script lang='ts'>
import { goto } from '$app/navigation';
import { numberOfUnreadNotification, screenWidth } from '$lib/store';
import { abbreviateNumber } from '$lib/utils';
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
import { onMount } from 'svelte';
<script lang="ts">
import { goto } from "$app/navigation";
import { numberOfUnreadNotification, screenWidth } from "$lib/store";
import { abbreviateNumber } from "$lib/utils";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import { onMount } from "svelte";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
import TableHeader from '$lib/components/Table/TableHeader.svelte';
import TableHeader from "$lib/components/Table/TableHeader.svelte";
export let data;
let isLoaded = false;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
let rawData = data?.getTopAnalystStocks;
let analytRatingList = rawData?.slice(0,50) ?? [];
let analytRatingList = rawData?.slice(0, 50) ?? [];
async function handleScroll() {
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
@ -28,36 +25,34 @@
}
}
onMount(async () => {
isLoaded = true;
window.addEventListener('scroll', handleScroll);
onMount(async () => {
isLoaded = true;
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
window.removeEventListener("scroll", handleScroll);
};
})
});
let columns = [
{ key: 'rank', label: 'Rank', align: 'left' },
{ key: 'ticker', label: 'Symbol', align: 'left' },
{ key: 'name', label: 'Name', align: 'left' },
{ key: 'counter', label: 'Ratings Count', align: 'right' },
{ key: 'priceTarget', label: 'Price Target', align: 'right' },
{ key: 'price', label: 'Current Price', align: 'right' },
{ key: 'marketCap', label: 'Market Cap', align: 'right' },
{ key: 'upside', label: 'Upside', align: 'right' },
{ key: "rank", label: "Rank", align: "left" },
{ key: "ticker", label: "Symbol", align: "left" },
{ key: "name", label: "Name", align: "left" },
{ key: "counter", label: "Ratings Count", align: "right" },
{ key: "priceTarget", label: "Price Target", align: "right" },
{ key: "price", label: "Current Price", align: "right" },
{ key: "marketCap", label: "Market Cap", align: "right" },
{ key: "upside", label: "Upside", align: "right" },
];
let sortOrders = {
rank: { order: 'none', type: 'number' },
ticker: { order: 'none', type: 'string' },
name: { order: 'none', type: 'string' },
counter: { order: 'none', type: 'number' },
priceTarget: { order: 'none', type: 'number' },
price: { order: 'none', type: 'number' },
marketCap: { order: 'none', type: 'number' },
upside: { order: 'none', type: 'number' },
rank: { order: "none", type: "number" },
ticker: { order: "none", type: "string" },
name: { order: "none", type: "string" },
counter: { order: "none", type: "number" },
priceTarget: { order: "none", type: "number" },
price: { order: "none", type: "number" },
marketCap: { order: "none", type: "number" },
upside: { order: "none", type: "number" },
};
const sortData = (key) => {
@ -65,12 +60,12 @@ window.addEventListener('scroll', handleScroll);
let finalList = [];
for (const k in sortOrders) {
if (k !== key) {
sortOrders[k].order = 'none';
sortOrders[k].order = "none";
}
}
// Cycle through 'none', 'asc', 'desc' for the clicked key
const orderCycle = ['none', 'asc', 'desc'];
const orderCycle = ["none", "asc", "desc"];
const originalData = rawData?.slice(0, 40);
const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
sortOrders[key].order =
@ -78,7 +73,7 @@ window.addEventListener('scroll', handleScroll);
const sortOrder = sortOrders[key].order;
// Reset to original data when 'none' and stop further sorting
if (sortOrder === 'none') {
if (sortOrder === "none") {
analytRatingList = [...originalData]; // Reset to original data (spread to avoid mutation)
return;
}
@ -89,24 +84,24 @@ window.addEventListener('scroll', handleScroll);
let valueA, valueB;
switch (type) {
case 'date':
case "date":
valueA = new Date(a[key]);
valueB = new Date(b[key]);
break;
case 'string':
case "string":
valueA = a[key].toUpperCase();
valueB = b[key].toUpperCase();
return sortOrder === 'asc'
return sortOrder === "asc"
? valueA.localeCompare(valueB)
: valueB.localeCompare(valueA);
case 'number':
case "number":
default:
valueA = parseFloat(a[key]);
valueB = parseFloat(b[key]);
break;
}
if (sortOrder === 'asc') {
if (sortOrder === "asc") {
return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
} else {
return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
@ -118,38 +113,45 @@ window.addEventListener('scroll', handleScroll);
};
$: charNumber = $screenWidth < 640 ? 30 : 20;
</script>
</script>
<svelte:head>
<svelte:head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Top 100 Strong Buy Stocks · stocknear
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Top
100 Strong Buy Stocks · stocknear
</title>
<meta name="description" content={`The top 100 "Strong Buy" stocks according to the best performing Wall Street analysts, with a rating of 5 stars.`} />
<meta
name="description"
content={`The top 100 "Strong Buy" stocks according to the best performing Wall Street analysts, with a rating of 5 stars.`}
/>
<!-- Other meta tags -->
<meta property="og:title" content={`Top 100 Strong Buy Stocks · stocknear`}/>
<meta property="og:description" content={`The top 100 "Strong Buy" stocks according to the best performing Wall Street analysts, with a rating of 5 stars.`} />
<meta property="og:type" content="website"/>
<meta property="og:title" content={`Top 100 Strong Buy Stocks · stocknear`} />
<meta
property="og:description"
content={`The top 100 "Strong Buy" stocks according to the best performing Wall Street analysts, with a rating of 5 stars.`}
/>
<meta property="og:type" content="website" />
<!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content={`Top 100 Strong Buy Stocks · stocknear`}/>
<meta name="twitter:description" content={`The top 100 "Strong Buy" stocks according to the best performing Wall Street analysts, with a rating of 5 stars.`} />
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content={`Top 100 Strong Buy Stocks · stocknear`}
/>
<meta
name="twitter:description"
content={`The top 100 "Strong Buy" stocks according to the best performing Wall Street analysts, with a rating of 5 stars.`}
/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
</svelte:head>
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
<section
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3"
>
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
@ -158,193 +160,259 @@ window.addEventListener('scroll', handleScroll);
</div>
<div class="w-full overflow-hidden m-auto mt-5">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
<div class="relative flex justify-center items-start overflow-hidden w-full">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<div
class="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4 lg:pr-5">
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
<div
class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
<!-- Start Column -->
<div>
<div class="flex flex-row justify-center items-center">
<h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5">
<h1
class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
>
Top Stocks
</h1>
</div>
<span class="text-white text-md font-medium text-center flex justify-center items-center ">
<span
class="text-white text-md font-medium text-center flex justify-center items-center"
>
Uncover 'Strong Buy' stocks from 5-star Wall Street analysts
</span>
</div>
<!-- End Column -->
<!-- Start Column -->
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0">
<svg class="w-40 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<div
class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"
>
<svg
class="w-40 -my-5"
viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="5" result="glow"/>
<feGaussianBlur stdDeviation="5" result="glow" />
<feMerge>
<feMergeNode in="glow"/>
<feMergeNode in="SourceGraphic"/>
<feMergeNode in="glow" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" />
<path
fill="#1E40AF"
d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
transform="translate(100 100)"
filter="url(#glow)"
/>
</svg>
<div class="z-1 absolute top-0">
<img class="w-28 ml-6" src={cloudFrontUrl+'/assets/wsb_diamond_hands_logo.png'} alt="logo" loading="lazy">
<img
class="w-28 ml-6"
src={cloudFrontUrl + "/assets/wsb_diamond_hands_logo.png"}
alt="logo"
loading="lazy"
/>
</div>
</div>
<!-- End Column -->
</div>
</div>
<div class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] border border-gray-800 sm:rounded-lg h-auto p-5 ">
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
Strong Buy stocks by top-rated analysts with a star rating of 4 or above, known for their exceptional accuracy and returns. Stocks are ranked based on the volume of analyst ratings.
<div
class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] border border-gray-800 sm:rounded-lg h-auto p-5"
>
<svg
class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
/></svg
>
Strong Buy stocks by top-rated analysts with a star rating of 4 or above,
known for their exceptional accuracy and returns. Stocks are ranked based
on the volume of analyst ratings.
</div>
<div class="w-screen sm:w-full m-auto mt-10">
{#if isLoaded}
<div class="w-screen sm:w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll sm:overflow-hidden">
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
<div
class="w-screen sm:w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll sm:overflow-hidden"
>
<table
class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
>
<thead>
<TableHeader {columns} {sortOrders} {sortData} />
</thead>
<tbody>
{#each analytRatingList as item, index}
<tr class="border-b border-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === rawData?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white text-center">
<tr
class="border-b border-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index +
1 ===
rawData?.length && data?.user?.tier !== 'Pro'
? 'opacity-[0.1]'
: ''}"
>
<td
class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white text-center"
>
{item?.rank}
</td>
<td class="text-sm sm:text-[1rem] whitespace-nowrap text-start">
<a href={"/stocks/"+item?.ticker} class="sm:hover:text-white text-blue-400">
<td
class="text-sm sm:text-[1rem] whitespace-nowrap text-start"
>
<a
href={"/stocks/" + item?.ticker}
class="sm:hover:text-white text-blue-400"
>
{item?.ticker}
</a>
</td>
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-white text-start">
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
<td
class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-white text-start"
>
{item?.name?.length > charNumber
? item?.name?.slice(0, charNumber) + "..."
: item?.name}
</td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white">
<td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"
>
{item?.counter}
</td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white">
<td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"
>
{item?.priceTarget?.toFixed(2)}
</td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white">
<td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"
>
{item?.price?.toFixed(2)}
</td>
<td class="text-end font-medium text-white text-sm sm:text-[1rem] whitespace-nowrap">
{item?.marketCap !== null ? abbreviateNumber(item?.marketCap) : '-'}
<td
class="text-end font-medium text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.marketCap !== null
? abbreviateNumber(item?.marketCap)
: "-"}
</td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white">
<td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"
>
{#if Number(item?.upside) >= 0}
<span class="text-[#37C97D]">+{Number(item?.upside)?.toFixed(2)}%</span>
<span class="text-[#37C97D]"
>+{Number(item?.upside)?.toFixed(2)}%</span
>
{:else}
<span class="text-[#B84242]">{Number(item?.upside)?.toFixed(2)}%</span>
<span class="text-[#B84242]"
>{Number(item?.upside)?.toFixed(2)}%</span
>
{/if}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
<UpgradeToPro data={data} title="Get stock forecasts from Wall Street's highest rated professionals"/>
<UpgradeToPro
{data}
title="Get stock forecasts from Wall Street's highest rated professionals"
/>
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md text-gray-400"></span>
<label
class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
>
<span
class="loading loading-spinner loading-md text-gray-400"
></span>
</label>
</div>
</div>
{/if}
</div>
</main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
<div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/pricing"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription 🔥
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools
</span>
</div>
</a>
</div>
{/if}
<div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/analysts"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Top Analyst 📊
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Get the latest top Wall Street analyst ratings
</span>
</div>
</a>
</div>
<div on:click={() => goto('/most-shorted-stocks')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/most-shorted-stocks"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Top Shorted Stocks 🍋
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Never miss out another short squeeze
</span>
</a>
</div>
</div>
</aside>
</div>
</div>
</div>
</section>
</section>

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

@ -1,36 +1,30 @@
<script lang='ts'>
import { goto } from '$app/navigation';
import { numberOfUnreadNotification, screenWidth } from '$lib/store';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
import { onMount } from 'svelte';
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
<script lang="ts">
import { numberOfUnreadNotification, screenWidth } from "$lib/store";
import InfiniteLoading from "$lib/components/InfiniteLoading.svelte";
import { onMount } from "svelte";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
export let data;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
let isLoaded = false;
let rawData = []
let rawData = [];
let displayList = [];
let order = 'highToLow';
let order = "highToLow";
const sortByAmount = (tickerList) => {
return tickerList?.sort(function(a, b) {
if(order === 'highToLow')
{
return tickerList?.sort(function (a, b) {
if (order === "highToLow") {
return b?.amount - a?.amount;
}
else {
} else {
return a?.amount - b?.amount;
}
});
}
};
async function infiniteHandler({ detail: { loaded, complete } })
{
async function infiniteHandler({ detail: { loaded, complete } }) {
if (displayList?.length === rawData?.length) {
complete();
} else {
@ -45,68 +39,74 @@
const date = new Date(dateString);
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0'); // Months are zero-based
const day = date.getDate().toString().padStart(2, '0');
const month = (date.getMonth() + 1).toString().padStart(2, "0"); // Months are zero-based
const day = date.getDate().toString().padStart(2, "0");
const hours = date.getHours() % 12 || 12; // Convert to 12-hour format
const minutes = date.getMinutes().toString().padStart(2, '0');
const ampm = date.getHours() >= 12 ? 'PM' : 'AM';
const minutes = date.getMinutes().toString().padStart(2, "0");
const ampm = date.getHours() >= 12 ? "PM" : "AM";
return `${year}/${month}/${day} ${hours}:${minutes} ${ampm}`;
}
}
onMount(() => {
rawData = data?.getCorporateLobbyingTracker ?? [];
displayList = rawData?.slice(0,50) ?? []
displayList = rawData?.slice(0, 50) ?? [];
isLoaded = true;
})
});
function changeOrder(state:string) {
if (state === 'highToLow')
{
order = 'lowToHigh';
}
else {
order = 'highToLow';
function changeOrder(state: string) {
if (state === "highToLow") {
order = "lowToHigh";
} else {
order = "highToLow";
}
displayList = sortByAmount(rawData)?.slice(0,50);
displayList = sortByAmount(rawData)?.slice(0, 50);
}
}
$: charNumber = $screenWidth < 640 ? 15 : 20;
</script>
$: charNumber = $screenWidth < 640 ? 15 : 20;
</script>
<svelte:head>
<svelte:head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Latest Lobbiyng Disclosure Tracker · stocknear
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Latest
Lobbiyng Disclosure Tracker · stocknear
</title>
<meta name="description" content={`Track the latest senate lobbying spending of US companies.`} />
<meta
name="description"
content={`Track the latest senate lobbying spending of US companies.`}
/>
<!-- Other meta tags -->
<meta property="og:title" content={`Latest Lobbiyng Disclosure Tracker · stocknear`}/>
<meta property="og:description" content={`Track the latest senate lobbying spending of US companies.`} />
<meta property="og:type" content="website"/>
<meta
property="og:title"
content={`Latest Lobbiyng Disclosure Tracker · stocknear`}
/>
<meta
property="og:description"
content={`Track the latest senate lobbying spending of US companies.`}
/>
<meta property="og:type" content="website" />
<!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content={`Latest Lobbiyng Disclosure Tracker · stocknear`}/>
<meta name="twitter:description" content={`Track the latest senate lobbying spending of US companies.`} />
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content={`Latest Lobbiyng Disclosure Tracker · stocknear`}
/>
<meta
name="twitter:description"
content={`Track the latest senate lobbying spending of US companies.`}
/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
</svelte:head>
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
<section
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3"
>
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
@ -115,114 +115,165 @@ $: charNumber = $screenWidth < 640 ? 15 : 20;
</div>
<div class="w-full overflow-hidden m-auto mt-5">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
<div class="relative flex justify-center items-start overflow-hidden w-full">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<div
class="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4 lg:pr-5">
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
<div
class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
<!-- Start Column -->
<div>
<div class="flex flex-row justify-center items-center">
<h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5">
<h1
class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
>
Lobbying Tracker
</h1>
</div>
<span class="text-white text-md font-medium text-center flex justify-center items-center ">
<span
class="text-white text-md font-medium text-center flex justify-center items-center"
>
Track the latest lobbying spendings of US stock companies
</span>
</div>
<!-- End Column -->
<!-- Start Column -->
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0">
<svg class="w-40 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<div
class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"
>
<svg
class="w-40 -my-5"
viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="5" result="glow"/>
<feGaussianBlur stdDeviation="5" result="glow" />
<feMerge>
<feMergeNode in="glow"/>
<feMergeNode in="SourceGraphic"/>
<feMergeNode in="glow" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" />
<path
fill="#1E40AF"
d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
transform="translate(100 100)"
filter="url(#glow)"
/>
</svg>
<div class="z-1 absolute top-4">
<img class="w-fit" src={cloudFrontUrl+'/assets/lobbying_logo.png'} alt="logo" loading="lazy">
<img
class="w-fit"
src={cloudFrontUrl + "/assets/lobbying_logo.png"}
alt="logo"
loading="lazy"
/>
</div>
</div>
<!-- End Column -->
</div>
</div>
{#if isLoaded}
<div class="w-screen sm:w-full flex flex-row items-start mt-20 sm:mt-10">
<div class="w-screen sm:w-full rounded-none sm:rounded-lg mb-4 overflow-x-scroll lg:overflow-hidden">
<table class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
<div
class="w-screen sm:w-full flex flex-row items-start mt-20 sm:mt-10"
>
<div
class="w-screen sm:w-full rounded-none sm:rounded-lg mb-4 overflow-x-scroll lg:overflow-hidden"
>
<table
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
>
<thead>
<tr class="bg-[#09090B] border-b border-[#27272A]">
<th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
<th
class="text-start bg-[#09090B] text-white text-[1rem] font-semibold"
>
Date
</th>
<th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
<th
class="text-start bg-[#09090B] text-white text-[1rem] font-semibold"
>
Symbol
</th>
<th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
<th
class="text-start bg-[#09090B] text-white text-[1rem] font-semibold"
>
Name
</th>
<th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
<th
class="text-end bg-[#09090B] text-white text-[1rem] font-semibold"
>
Sector
</th>
<th on:click={() => { changeOrder(order); }} class="cursor-pointer text-end bg-[#09090B] text-white text-[1rem] font-semibold">
<th
on:click={() => {
changeOrder(order);
}}
class="cursor-pointer text-end bg-[#09090B] text-white text-[1rem] font-semibold"
>
Amount
<svg class="w-5 h-5 inline-block {order === 'highToLow' ? '' : 'rotate-180'}" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<svg
class="w-5 h-5 inline-block {order === 'highToLow'
? ''
: 'rotate-180'}"
viewBox="0 0 20 20"
fill="currentColor"
style="max-width:40px"
><path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
></path></svg
>
</th>
</tr>
</thead>
<tbody>
{#each displayList as item, index}
<tr class="sm:hover:bg-[#245073] border-b border-[#27272A] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === displayList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
<td class="text-start text-sm sm:text-[1rem] text-white whitespace-nowrap">
<tr
class="sm:hover:bg-[#245073] border-b border-[#27272A] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index +
1 ===
displayList?.length && data?.user?.tier !== 'Pro'
? 'opacity-[0.1]'
: ''}"
>
<td
class="text-start text-sm sm:text-[1rem] text-white whitespace-nowrap"
>
{formatDate(item?.date)}
</td>
<td class="text-blue-400 text-sm sm:text-[1rem] text-start">
<a href={"/stocks/"+item?.ticker} class="sm:hover:text-white text-blue-400">
<td
class="text-blue-400 text-sm sm:text-[1rem] text-start"
>
<a
href={"/stocks/" + item?.ticker}
class="sm:hover:text-white text-blue-400"
>
{item?.ticker}
</a>
</td>
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-white text-start">
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
<td
class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-white text-start"
>
{item?.name?.length > charNumber
? item?.name?.slice(0, charNumber) + "..."
: item?.name}
</td>
<td class="text-end text-sm sm:text-[1rem] font-medium text-white whitespace-nowrap">
<td
class="text-end text-sm sm:text-[1rem] font-medium text-white whitespace-nowrap"
>
{item?.sector}
</td>
@ -232,90 +283,92 @@ $: charNumber = $screenWidth < 640 ? 15 : 20;
maximumFractionDigits: 0,
}).format(item?.amount)}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
<InfiniteLoading on:infinite={infiniteHandler} />
</div>
<UpgradeToPro data={data} title="Get the latest lobbying spendings in realtime of US stock companies"/>
<UpgradeToPro
{data}
title="Get the latest lobbying spendings in realtime of US stock companies"
/>
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md text-gray-400"></span>
<label
class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
>
<span class="loading loading-spinner loading-md text-gray-400"
></span>
</label>
</div>
</div>
{/if}
</main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
<div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/pricing"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription
Pro Subscription 🔥
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools.
</span>
</div>
</a>
</div>
{/if}
<div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/analysts"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Wallstreet Analyst
Top Analyst 📊
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Get the latest top Wall Street analyst ratings.
Get the latest top Wall Street analyst ratings
</span>
</div>
</a>
</div>
<div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/politicians"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Congress Trading
Congress Trading 🇺🇸
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Get the latest top Congress trading insights.
</span>
</a>
</div>
</div>
</aside>
</div>
</div>
</div>
</section>
</section>

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

@ -1,9 +1,7 @@
<script lang="ts">
import { goto } from "$app/navigation";
import { numberOfUnreadNotification, screenWidth } from "$lib/store";
import { onMount } from "svelte";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
import * as Card from "$lib/components/shadcn/card/index.ts";
export let data;
@ -12,7 +10,6 @@
let isLoaded = false;
let rawData = data?.getCramerTracker ?? [];
let displayList = rawData?.slice(0, 50) ?? [];
let cumulativeList = [];
let winRate;
function sectorSelector(sector) {
@ -421,10 +418,10 @@
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div
on:click={() => goto("/pricing")}
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<div
<a
href={"/pricing"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
@ -436,15 +433,17 @@
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools.
</span>
</div>
</a>
</div>
{/if}
<div
on:click={() => goto("/reddit-tracker")}
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<a
href={"/reddit-tracker"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Reddit Tracker 🚀
@ -454,14 +453,16 @@
<span class="text-white p-3 ml-3 mr-3">
Get the latest trends of r/Wallstreetbets
</span>
</div>
</a>
</div>
<div
on:click={() => goto("/sentiment-tracker")}
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<a
href={"/sentiment-tracker"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Sentiment Tracker <svg
@ -491,7 +492,7 @@
<span class="text-white p-3 ml-3 mr-3">
Follow the daily trends of retail investors
</span>
</div>
</a>
</div>
</aside>
</div>

25
src/routes/dividends-calendar/+page.svelte
View File

@ -9,7 +9,6 @@
} from "date-fns";
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
import dividendsLogo from "$lib/images/dividends_calendar_logo.png";
import { goto } from "$app/navigation";
import { abbreviateNumber } from "$lib/utils";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
@ -582,30 +581,32 @@
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div
on:click={() => goto("/pricing")}
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<div
<a
href={"/pricing"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription
Pro Subscription 🔥
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools.
</span>
</div>
</a>
</div>
{/if}
<div
on:click={() => goto("/earnings-calendar")}
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<a
href={"/earnings-calendar"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Earnings Calendar 🌟
@ -615,14 +616,16 @@
<span class="text-white p-3 ml-3 mr-3">
Get the latest Earnings of companies
</span>
</div>
</a>
</div>
<div
on:click={() => goto("/economic-calendar")}
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<a
href={"/economic-calendar"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Economic Events 🌍
@ -632,7 +635,7 @@
<span class="text-white p-3 ml-3 mr-3">
Stay updated on upcoming Economic Events worldwide.
</span>
</div>
</a>
</div>
</aside>
</div>

662
src/routes/earnings-calendar/+page.svelte
View File

@ -1,16 +1,19 @@
<script lang="ts">
import { format, startOfWeek, addDays, addWeeks, subWeeks, differenceInWeeks } from 'date-fns'
import { screenWidth, numberOfUnreadNotification } from '$lib/store';
import { goto } from '$app/navigation';
import { abbreviateNumber } from '$lib/utils';
import {
format,
startOfWeek,
addDays,
addWeeks,
subWeeks,
differenceInWeeks,
} from "date-fns";
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
import { abbreviateNumber } from "$lib/utils";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
export let data;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
let currentWeek = startOfWeek(new Date(), { weekStartsOn: 1 });
let earningsCalendar = data?.getEarningsCalendar;
const maxWeeksChange = 4; // Maximum allowed week change
@ -19,16 +22,21 @@
const today = new Date();
let formattedMonday = startOfWeek(currentWeek, { weekStartsOn: 1 });
let formattedTuesday = format( addDays(formattedMonday, 1), "EEE, MMM d");
let formattedWednesday = format( addDays(formattedMonday, 2), "EEE, MMM d");
let formattedThursday = format( addDays(formattedMonday, 3), "EEE, MMM d");
let formattedFriday = format( addDays(formattedMonday, 4), "EEE, MMM d");
formattedMonday = format( formattedMonday, "EEE, MMM d");
let formattedTuesday = format(addDays(formattedMonday, 1), "EEE, MMM d");
let formattedWednesday = format(addDays(formattedMonday, 2), "EEE, MMM d");
let formattedThursday = format(addDays(formattedMonday, 3), "EEE, MMM d");
let formattedFriday = format(addDays(formattedMonday, 4), "EEE, MMM d");
formattedMonday = format(formattedMonday, "EEE, MMM d");
let formattedWeekday = [formattedMonday, formattedTuesday,formattedWednesday, formattedThursday, formattedFriday];
let formattedWeekday = [
formattedMonday,
formattedTuesday,
formattedWednesday,
formattedThursday,
formattedFriday,
];
let weekday = [];
let startDate = startOfWeek(currentWeek, { weekStartsOn: 1 });
let endDate = addDays(startDate, 4);
let formattedStartDate = format(startDate, "yyyy-MM-dd");
@ -56,62 +64,66 @@
},
];
let currentDate = new Date();
let currentWeekday = Math.min((currentDate.getDay() + 6) % 7, 4);
let selectedWeekday = currentWeekday;
function toggleDate(index)
{
if($screenWidth > 640) {
selectedWeekday = index
function toggleDate(index) {
if ($screenWidth > 640) {
selectedWeekday = index;
}
}
function clickWeekday (state, index) {
if (state==='next' && selectedWeekday+1 <=4)
{
selectedWeekday = selectedWeekday +1;
}
else if( state === 'previous' && selectedWeekday-1 >=0)
{
selectedWeekday --;
}
else if (state=== 'previous' && index === 0 && differenceInWeeks(currentWeek, today) > -maxWeeksChange)
{
changeWeek(state)
function clickWeekday(state, index) {
if (state === "next" && selectedWeekday + 1 <= 4) {
selectedWeekday = selectedWeekday + 1;
} else if (state === "previous" && selectedWeekday - 1 >= 0) {
selectedWeekday--;
} else if (
state === "previous" &&
index === 0 &&
differenceInWeeks(currentWeek, today) > -maxWeeksChange
) {
changeWeek(state);
selectedWeekday = 4;
}
else if (state=== 'next' && index === 4 && differenceInWeeks(currentWeek, today) < maxWeeksChange)
{
changeWeek(state)
} else if (
state === "next" &&
index === 4 &&
differenceInWeeks(currentWeek, today) < maxWeeksChange
) {
changeWeek(state);
selectedWeekday = 0;
}
}
async function changeWeek(state) {
async function changeWeek(state) {
//Limit the user to go back max 4 weeks and look forward 4 weeks
if (state === 'previous' && differenceInWeeks(currentWeek, today) > -maxWeeksChange) {
if (
state === "previous" &&
differenceInWeeks(currentWeek, today) > -maxWeeksChange
) {
currentWeek = subWeeks(currentWeek, 1);
} else if (state === 'next' && differenceInWeeks(currentWeek, today) < maxWeeksChange) {
} else if (
state === "next" &&
differenceInWeeks(currentWeek, today) < maxWeeksChange
) {
currentWeek = addWeeks(currentWeek, 1);
}
formattedMonday = startOfWeek(currentWeek, { weekStartsOn: 1 });
formattedTuesday = format( addDays(formattedMonday, 1), "EEE, MMM d");
formattedWednesday = format( addDays(formattedMonday, 2), "EEE, MMM d");
formattedThursday = format( addDays(formattedMonday, 3), "EEE, MMM d");
formattedFriday = format( addDays(formattedMonday, 4), "EEE, MMM d");
formattedMonday = format( formattedMonday, "EEE, MMM d");
formattedTuesday = format(addDays(formattedMonday, 1), "EEE, MMM d");
formattedWednesday = format(addDays(formattedMonday, 2), "EEE, MMM d");
formattedThursday = format(addDays(formattedMonday, 3), "EEE, MMM d");
formattedFriday = format(addDays(formattedMonday, 4), "EEE, MMM d");
formattedMonday = format(formattedMonday, "EEE, MMM d");
formattedWeekday = [formattedMonday, formattedTuesday,formattedWednesday, formattedThursday, formattedFriday];
formattedWeekday = [
formattedMonday,
formattedTuesday,
formattedWednesday,
formattedThursday,
formattedFriday,
];
weekday = [];
startDate = startOfWeek(currentWeek, { weekStartsOn: 1 });
@ -141,43 +153,11 @@ async function changeWeek(state) {
},
];
earningsCalendar = daysOfWeek?.map((day) => {
return {
name: day.name,
data: data?.getEarningsCalendar?.filter(
(item) => item?.date === day?.date
),
};
});
if (earningsCalendar?.length) {
// Loop through each day of the week
for (let i = 0; i < earningsCalendar.length; i++) {
const dayData = earningsCalendar[i].data;
// Filter out entries with company name "---"
// Sort and map the filtered data
weekday[i] = dayData
.sort((a, b) => b.marketCap - a.marketCap)
}
}
}
$: {
if( earningsCalendar)
{
earningsCalendar = daysOfWeek?.map((day) => {
return {
name: day.name,
data: data?.getEarningsCalendar?.filter(
(item) => item?.date === day?.date
(item) => item?.date === day?.date,
),
};
});
@ -190,71 +170,91 @@ $: {
// Filter out entries with company name "---"
// Sort and map the filtered data
weekday[i] = dayData
.sort((a, b) => b.marketCap - a.marketCap)
weekday[i] = dayData.sort((a, b) => b.marketCap - a.marketCap);
}
}
}
$: {
if (earningsCalendar) {
earningsCalendar = daysOfWeek?.map((day) => {
return {
name: day.name,
data: data?.getEarningsCalendar?.filter(
(item) => item?.date === day?.date,
),
};
});
if (earningsCalendar?.length) {
// Loop through each day of the week
for (let i = 0; i < earningsCalendar.length; i++) {
const dayData = earningsCalendar[i].data;
// Filter out entries with company name "---"
// Sort and map the filtered data
weekday[i] = dayData.sort((a, b) => b.marketCap - a.marketCap);
}
}
}
}
}
}
$: {
if (currentWeek)
{
if (differenceInWeeks(currentWeek, today) > -maxWeeksChange)
{
$: {
if (currentWeek) {
if (differenceInWeeks(currentWeek, today) > -maxWeeksChange) {
previousMax = false;
}
else {
} else {
previousMax = true;
}
}
}
$: {
if (currentWeek)
{
if (differenceInWeeks(currentWeek, today) < maxWeeksChange)
{
nextMax = false;
}
else {
$: {
if (currentWeek) {
if (differenceInWeeks(currentWeek, today) < maxWeeksChange) {
nextMax = false;
} else {
nextMax = true;
}
}
}
}
</script>
<svelte:head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Earnings
Calendar · stocknear
</title>
<meta
name="description"
content={`A list of upcoming earnings on the US stock market, with dates, times and estimated revenue and earnings growth.`}
/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Earnings Calendar · stocknear
</title>
<meta name="description" content={`A list of upcoming earnings on the US stock market, with dates, times and estimated revenue and earnings growth.`} />
<!-- Other meta tags -->
<meta property="og:title" content={`Earnings Calendar · stocknear`}/>
<meta property="og:description" content={`A list of upcoming earnings on the US stock market, with dates, times and estimated revenue and earnings growth.`} />
<meta property="og:type" content="website"/>
<!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content={`Earnings Calendar · stocknear`}/>
<meta name="twitter:description" content={`A list of upcoming earnings on the US stock market, with dates, times and estimated revenue and earnings growth.`} />
<!-- Add more Twitter meta tags as needed -->
<!-- Other meta tags -->
<meta property="og:title" content={`Earnings Calendar · stocknear`} />
<meta
property="og:description"
content={`A list of upcoming earnings on the US stock market, with dates, times and estimated revenue and earnings growth.`}
/>
<meta property="og:type" content="website" />
<!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={`Earnings Calendar · stocknear`} />
<meta
name="twitter:description"
content={`A list of upcoming earnings on the US stock market, with dates, times and estimated revenue and earnings growth.`}
/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40">
<section
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40"
>
<div class="text-sm sm:text-[1rem] breadcrumbs">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
@ -263,263 +263,429 @@ $: {
</div>
<div class="w-full overflow-hidden m-auto mt-5">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
<div class="relative flex justify-center items-start overflow-hidden w-full">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<div
class="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4 lg:pr-5">
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
<div
class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
<!-- Start Column -->
<div>
<div class="flex flex-row justify-center items-center">
<h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5">
<h1
class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
>
Earnings Calendar
</h1>
</div>
<span class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center ">
<span
class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center"
>
Stay updated on upcoming Earnings Calls in the stock market.
</span>
</div>
<!-- End Column -->
<!-- Start Column -->
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0">
<svg class="w-36 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<div
class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"
>
<svg
class="w-36 -my-5"
viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="5" result="glow"/>
<feGaussianBlur stdDeviation="5" result="glow" />
<feMerge>
<feMergeNode in="glow"/>
<feMergeNode in="SourceGraphic"/>
<feMergeNode in="glow" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" />
<path
fill="#1E40AF"
d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
transform="translate(100 100)"
filter="url(#glow)"
/>
</svg>
<div class="z-1 absolute top-0">
<img class="w-20 ml-5" src={cloudFrontUrl+"/assets/earnings_calender_logo.png"} alt="logo" loading="lazy">
<img
class="w-20 ml-5"
src={cloudFrontUrl + "/assets/earnings_calender_logo.png"}
alt="logo"
loading="lazy"
/>
</div>
</div>
<!-- End Column -->
</div>
</div>
<!-- Page wrapper -->
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<!-- Cards -->
<div class=" w-full flex flex-row justify-center m-auto items-center pl-2 pr-2 sm:pl-0 sm:pr-0">
<div
class=" w-full flex flex-row justify-center m-auto items-center pl-2 pr-2 sm:pl-0 sm:pr-0"
>
<!-- Start Columns -->
<label on:click={() => changeWeek('previous')} class="{previousMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3">
<svg class="w-6 h-6 m-auto rotate-180 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
<label
on:click={() => changeWeek("previous")}
class="{previousMax
? 'opacity-80'
: ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3"
>
<svg
class="w-6 h-6 m-auto rotate-180"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="white"
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
/></svg
>
</label>
{#each weekday as day,index}
<div class="w-full {index === selectedWeekday ? '' : 'hidden sm:block'}">
<label on:click={() => toggleDate(index)} class="w-11/12 m-auto sm:w-full cursor-pointer h-16 {index === selectedWeekday ? 'bg-purple-600 sm:hover:bg-purple-700' : ''} rounded sm:rounded-none flex bg-[#09090B] sm:hover:bg-purple-600 transition duration-50 border border-gray-600 mb-3">
<div class=" flex flex-row justify-center items-center w-full ">
<label on:click={() => clickWeekday('previous', index) } class="{previousMax === true && index === 0? 'opacity-20' : ''} sm:hidden ml-auto">
<svg class="w-8 h-8 inline-block rotate-180 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
{#each weekday as day, index}
<div
class="w-full {index === selectedWeekday
? ''
: 'hidden sm:block'}"
>
<label
on:click={() => toggleDate(index)}
class="w-11/12 m-auto sm:w-full cursor-pointer h-16 {index ===
selectedWeekday
? 'bg-purple-600 sm:hover:bg-purple-700'
: ''} rounded sm:rounded-none flex bg-[#09090B] sm:hover:bg-purple-600 transition duration-50 border border-gray-600 mb-3"
>
<div
class=" flex flex-row justify-center items-center w-full"
>
<label
on:click={() => clickWeekday("previous", index)}
class="{previousMax === true && index === 0
? 'opacity-20'
: ''} sm:hidden ml-auto"
>
<svg
class="w-8 h-8 inline-block rotate-180"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="white"
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
/></svg
>
</label>
<div class="flex flex-col items-center text-white truncate m-auto p-1">
<span class="font-medium text-md">{formattedWeekday[index]}</span>
<span class="text-[1rem] sm:text-sm m-auto pt-1 pb-1"> {day?.length} Earnings</span>
<div
class="flex flex-col items-center text-white truncate m-auto p-1"
>
<span class="font-medium text-md"
>{formattedWeekday[index]}</span
>
<span class="text-[1rem] sm:text-sm m-auto pt-1 pb-1">
{day?.length} Earnings</span
>
</div>
<label on:click={() => clickWeekday('next', index) } class="{nextMax === true && index === 4? 'opacity-20' : ''} sm:hidden mr-auto">
<svg class="w-8 h-8 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
<label
on:click={() => clickWeekday("next", index)}
class="{nextMax === true && index === 4
? 'opacity-20'
: ''} sm:hidden mr-auto"
>
<svg
class="w-8 h-8 inline-block"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="white"
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
/></svg
>
</label>
</div>
</label>
</div>
{/each}
<label on:click={() => changeWeek('next')} class="{nextMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3">
<svg class="w-6 h-6 m-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
<label
on:click={() => changeWeek("next")}
class="{nextMax
? 'opacity-80'
: ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3"
>
<svg
class="w-6 h-6 m-auto"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="white"
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
/></svg
>
</label>
</div>
{#each weekday as day,index}
{#each weekday as day, index}
{#if index === selectedWeekday}
{#if day?.length !== 0}
<div class="w-full overflow-x-scroll no-scrollbar">
<table class="table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto mt-4 ">
<table
class="table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto mt-4"
>
<thead>
<tr class="whitespace-nowrap">
<th class="text-start text-white font-semibold text-sm">Symbol</th>
<th class="text-start text-white font-semibold text-sm">Company Name</th>
<th class="text-white font-semibold text-sm text-end">Market Cap</th>
<th class="text-white font-semibold text-sm text-end">Revenue Estimate</th>
<th class="text-white font-semibold text-sm text-end">EPS Estimate</th>
<th class="text-white font-semibold text-sm text-end text-end">Earnings Time</th>
<th
class="text-start text-white font-semibold text-sm"
>Symbol</th
>
<th
class="text-start text-white font-semibold text-sm"
>Company Name</th
>
<th
class="text-white font-semibold text-sm text-end"
>Market Cap</th
>
<th
class="text-white font-semibold text-sm text-end"
>Revenue Estimate</th
>
<th
class="text-white font-semibold text-sm text-end"
>EPS Estimate</th
>
<th
class="text-white font-semibold text-sm text-end text-end"
>Earnings Time</th
>
</tr>
</thead>
<tbody>
{#each day as item, index}
<!-- row -->
<tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]">
<td class="text-blue-400 border-b-[#09090B] text-start text-sm sm:text-[1rem]">
<a href={"/stocks/"+item?.symbol} class="sm:hover:text-white text-blue-400">{item?.symbol}</a>
<tr
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
>
<td
class="text-blue-400 border-b-[#09090B] text-start text-sm sm:text-[1rem]"
>
<a
href={"/stocks/" + item?.symbol}
class="sm:hover:text-white text-blue-400"
>{item?.symbol}</a
>
</td>
<td class="text-white whitespace-nowrap text-sm sm:text-[1rem] border-b-[#09090B]">
{item?.name.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name}
<td
class="text-white whitespace-nowrap text-sm sm:text-[1rem] border-b-[#09090B]"
>
{item?.name.length > 20
? item?.name?.slice(0, 20) + "..."
: item?.name}
</td>
<td class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem]">
{item?.marketCap !== null ? abbreviateNumber(item?.marketCap) : '-'}
<td
class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem]"
>
{item?.marketCap !== null
? abbreviateNumber(item?.marketCap)
: "-"}
</td>
<td class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem]">
<div class="flex flex-row items-center justify-end">
<td
class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem]"
>
<div
class="flex flex-row items-center justify-end"
>
<span>
{(item?.revenueEst !== null) ? abbreviateNumber(item?.revenueEst) : '-'}
{item?.revenueEst !== null
? abbreviateNumber(item?.revenueEst)
: "-"}
</span>
{#if item?.revenueEst !== null && item?.revenueEst !== null}
{#if (item?.revenueEst/item?.revenuePrior-1) >= 0}
{#if item?.revenueEst / item?.revenuePrior - 1 >= 0}
<span class="ml-1 text-[#22C55E]">
+{((item?.revenueEst/item?.revenuePrior-1)*100)?.toFixed(2)}%
+{(
(item?.revenueEst /
item?.revenuePrior -
1) *
100
)?.toFixed(2)}%
</span>
{:else}
<span class="ml-1 text-[#FF2F1F]">
{((item?.revenueEst/item?.revenuePrior-1)*100)?.toFixed(2)}%
{(
(item?.revenueEst /
item?.revenuePrior -
1) *
100
)?.toFixed(2)}%
</span>
{/if}
{/if}
</div>
</td>
<td class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem]">
<div class="flex flex-row items-center justify-end">
<td
class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem]"
>
<div
class="flex flex-row items-center justify-end"
>
<span>
{item?.epsEst !== null ? item?.epsEst?.toFixed(2) : '-'}
{item?.epsEst !== null
? item?.epsEst?.toFixed(2)
: "-"}
</span>
{#if item?.epsEst !== null && item?.epsPrior !== null}
{#if (item?.epsEst/item?.epsPrior-1) >= 0}
{#if item?.epsEst / item?.epsPrior - 1 >= 0}
<span class="ml-1 text-[#22C55E]">
+{((item?.epsEst/item?.epsPrior-1)*100)?.toFixed(2)}%
+{(
(item?.epsEst / item?.epsPrior - 1) *
100
)?.toFixed(2)}%
</span>
{:else}
<span class="ml-1 text-[#FF2F1F]">
{((item?.epsEst/item?.epsPrior-1)*100)?.toFixed(2)}%
{(
(item?.epsEst / item?.epsPrior - 1) *
100
)?.toFixed(2)}%
</span>
{/if}
{/if}
</div>
</td>
<td class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap">
{#if item?.release === 'amc'}
<svg class="w-4 h-4 inline-block mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#70A1EF" d="M232.13 143.64a6 6 0 0 0-6-1.49a90.07 90.07 0 0 1-112.27-112.3a6 6 0 0 0-7.49-7.48a102.88 102.88 0 0 0-51.89 36.31a102 102 0 0 0 142.84 142.84a102.88 102.88 0 0 0 36.31-51.89a6 6 0 0 0-1.5-5.99m-42 48.29a90 90 0 0 1-126-126a90.9 90.9 0 0 1 35.52-28.27a102.06 102.06 0 0 0 118.69 118.69a90.9 90.9 0 0 1-28.24 35.58Z"/></svg>
<td
class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
{#if item?.release === "amc"}
<svg
class="w-4 h-4 inline-block mr-1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#70A1EF"
d="M232.13 143.64a6 6 0 0 0-6-1.49a90.07 90.07 0 0 1-112.27-112.3a6 6 0 0 0-7.49-7.48a102.88 102.88 0 0 0-51.89 36.31a102 102 0 0 0 142.84 142.84a102.88 102.88 0 0 0 36.31-51.89a6 6 0 0 0-1.5-5.99m-42 48.29a90 90 0 0 1-126-126a90.9 90.9 0 0 1 35.52-28.27a102.06 102.06 0 0 0 118.69 118.69a90.9 90.9 0 0 1-28.24 35.58Z"
/></svg
>
After Close
{:else}
<svg class="w-4 h-4 inline-block mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><g fill="#FEC001"><path d="M184 128a56 56 0 1 1-56-56a56 56 0 0 1 56 56Z" opacity=".2"/><path d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0Zm72 88a64 64 0 1 1-64-64a64.07 64.07 0 0 1 64 64Zm-16 0a48 48 0 1 0-48 48a48.05 48.05 0 0 0 48-48ZM58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32ZM192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72Zm5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8Zm80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8Zm112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16Z"/></g></svg>
<svg
class="w-4 h-4 inline-block mr-1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><g fill="#FEC001"
><path
d="M184 128a56 56 0 1 1-56-56a56 56 0 0 1 56 56Z"
opacity=".2"
/><path
d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0Zm72 88a64 64 0 1 1-64-64a64.07 64.07 0 0 1 64 64Zm-16 0a48 48 0 1 0-48 48a48.05 48.05 0 0 0 48-48ZM58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32ZM192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72Zm5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8Zm80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8Zm112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16Z"
/></g
></svg
>
Before Open
{/if}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
{:else}
<div class="text-white p-5 mt-5 w-fit m-auto rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-[1rem]">
<svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
<div
class="text-white p-5 mt-5 w-fit m-auto rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-[1rem]"
>
<svg
class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
/></svg
>
No Earnings available for the day.
</div>
{/if}
{/if}
{/each}
</div>
</div>
</main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
<div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/pricing"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription 🔥
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools.
</span>
</div>
</a>
</div>
{/if}
<div on:click={() => goto('/dividends-calendar')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/dividends-calendar"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Dividend Calendar 💸
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Stay updated on upcoming Dividends in the stock market.
</span>
</div>
</a>
</div>
<div on:click={() => goto('/economic-calendar')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/economic-calendar"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Economic Events 🌍
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Stay updated on upcoming Economic Events worldwide.
</span>
</a>
</div>
</div>
</aside>
</div>
</div>
</div>
</section>
</section>

738
src/routes/economic-calendar/+page.svelte
View File

File diff suppressed because it is too large Load Diff

457
src/routes/list/+layout.svelte
View File

@ -1,244 +1,250 @@
<script lang='ts'>
import { numberOfUnreadNotification } from '$lib/store';
import { page } from '$app/stores';
import { industryList } from '$lib/utils';
<script lang="ts">
import { numberOfUnreadNotification } from "$lib/store";
import { page } from "$app/stores";
import { industryList } from "$lib/utils";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
import { goto } from '$app/navigation';
export let data;
function formatFilename(industryName) {
let formattedName = industryName?.replace(/ /g, '-')
.replace(/&/g, 'and')
.replace(/-{2,}/g, '-')
function formatFilename(industryName) {
let formattedName = industryName
?.replace(/ /g, "-")
.replace(/&/g, "and")
.replace(/-{2,}/g, "-")
.toLowerCase();
return formattedName;
}
}
let navigationIndustry = industryList.map(industry => ({
let navigationIndustry = industryList.map((industry) => ({
title: industry,
link: `/list/industry/${formatFilename(industry)}`
}));
link: `/list/industry/${formatFilename(industry)}`,
}));
let navigation = [
{
title: "Stock Lists",
link: "/list",
},
{
title: "Mega-Cap Stocks",
link: "/list/mega-cap-stocks",
},
{
title: "Large-Cap Stocks",
link: "/list/large-cap-stocks",
},
{
title: "Mid-Cap Stocks",
link: "/list/mid-cap-stocks",
},
{
title: "Small-Cap Stocks",
link: "/list/small-cap-stocks",
},
{
title: "Micro-Cap Stocks",
link: "/list/micro-cap-stocks",
},
{
title: "Nano-Cap Stocks",
link: "/list/nano-cap-stocks",
},
{
title: "All Stocks Listed on the NASDAQ",
link: "/list/nasdaq-stocks",
},
{
title: "All Stocks Listed on the NYSE",
link: "/list/nyse-stocks",
},
{
title: "All Stocks Listed on XETRA",
link: "/list/xetra-stocks",
},
{
title: "All Stocks Listed on AMEX",
link: "/list/amex-stocks",
},
{
title: "Dow Jones Industrial Average Stocks List",
link: "/list/dow-jones-stocks",
},
{
title: "NASDAQ 100 Index Stocks List",
link: "/list/nasdaq-100-stocks",
},
{
title: "S&P 500 Index Stocks List",
link: "/list/sp-500-stocks",
},
{
title: "German Companies on the US Stock Market",
link: "/list/german-stocks-us",
},
{
title: "Canadian Companies on the US Stock Market",
link: "/list/canadian-stocks-us",
},
{
title: "Chinese Companies on the US Stock Market",
link: "/list/chinese-stocks-us",
},
{
title: "Indian Companies on the US Stock Market",
link: "/list/indian-stocks-us",
},
{
title: "Israeli Companies on the US Stock Market",
link: "/list/israeli-stocks-us",
},
{
title: "UK Companies on the US Stock Market",
link: "/list/uk-stocks-us",
},
{
title: "Japanese Companies on the US Stock Market",
link: "/list/japanese-stocks-us",
},
{
title: "Financials Sector Stocks",
link: "/list/financial-sector",
},
{
title: "Healthcare Sector Stocks",
link: "/list/healthcare-sector",
},
{
title: "Technology Sector Stocks",
link: "/list/technology-sector",
},
{
title: "Industrials Sector Stocks",
link: "/list/industrials-sector",
},
{
title: "Energy Sector Stocks",
link: "/list/energy-sector",
},
{
title: "Utilities Sector Stocks",
link: "/list/utilities-sector",
},
{
title: "Consumer Cyclical Sector Stocks",
link: "/list/consumer-cyclical-sector",
},
{
title: "Real Estate Sector Stocks",
link: "/list/real-estate-sector",
},
{
title: "Basic Materials Sector Stocks",
link: "/list/basic-materials-sector",
},
{
title: "Communication Services Sector Stocks",
link: "/list/communication-services-sector",
},
{
title: "Consumer Defensive Sector Stocks",
link: "/list/consumer-defensive-sector",
},
{
title: "Delisted Companies",
link: "/list/delisted-stocks",
},
{
title: "Bitcoin ETFs",
link: "/list/bitcoin-etfs",
},
{
title: "Magnificent Seven Stocks",
link: "/list/magnificent-seven",
},
{
title: "Dividend Kings",
link: "/list/dividend-kings",
},
{
title: "Dividend Aristocrats",
link: "/list/dividend-aristocrats",
},
{
title: "All Active REITs on the US Stock Market",
link: "/list/reit-stocks",
},
];
let navigation = [
{
title: 'Stock Lists',
link: '/list'
},
{
title: 'Mega-Cap Stocks',
link: '/list/mega-cap-stocks'
},
{
title: 'Large-Cap Stocks',
link: '/list/large-cap-stocks'
},
{
title: 'Mid-Cap Stocks',
link: '/list/mid-cap-stocks'
},
{
title: 'Small-Cap Stocks',
link: '/list/small-cap-stocks'
},
{
title: 'Micro-Cap Stocks',
link: '/list/micro-cap-stocks'
},
{
title: 'Nano-Cap Stocks',
link: '/list/nano-cap-stocks'
},
{
title: 'All Stocks Listed on the NASDAQ',
link: '/list/nasdaq-stocks'
},
{
title: 'All Stocks Listed on the NYSE',
link: '/list/nyse-stocks'
},
{
title: 'All Stocks Listed on XETRA',
link: '/list/xetra-stocks'
},
{
title: 'All Stocks Listed on AMEX',
link: '/list/amex-stocks'
},
{
title: 'Dow Jones Industrial Average Stocks List',
link: '/list/dow-jones-stocks'
},
{
title: 'NASDAQ 100 Index Stocks List',
link: '/list/nasdaq-100-stocks'
},
{
title: 'S&P 500 Index Stocks List',
link: '/list/sp-500-stocks'
},
{
title: 'German Companies on the US Stock Market',
link: '/list/german-stocks-us'
},
{
title: 'Canadian Companies on the US Stock Market',
link: '/list/canadian-stocks-us'
},
{
title: 'Chinese Companies on the US Stock Market',
link: '/list/chinese-stocks-us'
},
{
title: 'Indian Companies on the US Stock Market',
link: '/list/indian-stocks-us'
},
{
title: 'Israeli Companies on the US Stock Market',
link: '/list/israeli-stocks-us'
},
{
title: 'UK Companies on the US Stock Market',
link: '/list/uk-stocks-us'
},
{
title: 'Japanese Companies on the US Stock Market',
link: '/list/japanese-stocks-us'
},
{
title: 'Financials Sector Stocks',
link: '/list/financial-sector'
},
{
title: 'Healthcare Sector Stocks',
link: '/list/healthcare-sector'
},
{
title: 'Technology Sector Stocks',
link: '/list/technology-sector'
},
{
title: 'Industrials Sector Stocks',
link: '/list/industrials-sector'
},
{
title: 'Energy Sector Stocks',
link: '/list/energy-sector'
},
{
title: 'Utilities Sector Stocks',
link: '/list/utilities-sector'
},
{
title: 'Consumer Cyclical Sector Stocks',
link: '/list/consumer-cyclical-sector'
},
{
title: 'Real Estate Sector Stocks',
link: '/list/real-estate-sector'
},
{
title: 'Basic Materials Sector Stocks',
link: '/list/basic-materials-sector'
},
{
title: 'Communication Services Sector Stocks',
link: '/list/communication-services-sector'
},
{
title: 'Consumer Defensive Sector Stocks',
link: '/list/consumer-defensive-sector'
},
{
title: 'Delisted Companies',
link: '/list/delisted-stocks'
},
{
title: 'Bitcoin ETFs',
link: '/list/bitcoin-etfs'
},
{
title: 'Magnificent Seven Stocks',
link: '/list/magnificent-seven'
},
{
title: 'Dividend Kings',
link: '/list/dividend-kings'
},
{
title: 'Dividend Aristocrats',
link: '/list/dividend-aristocrats'
},
{
title: 'All Active REITs on the US Stock Market',
link: '/list/reit-stocks'
},
];
navigation = [...navigationIndustry, ...navigation];
let updatedNavigation = navigation?.map(item => {
navigation = [...navigationIndustry, ...navigation];
let updatedNavigation = navigation?.map((item) => {
return {
...item,
link: item.link + '/'
link: item.link + "/",
};
});
});
const combinedNavigation = navigation?.concat(updatedNavigation);
const combinedNavigation = navigation?.concat(updatedNavigation);
</script>
<svelte:head>
<title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Stock Lists · stocknear</title>
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Stock
Lists · stocknear</title
>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="description" content="Lists of stocks that share common characteristics. See companies ranked by market cap, employee count, sales or others.">
<meta
name="description"
content="Lists of stocks that share common characteristics. See companies ranked by market cap, employee count, sales or others."
/>
<!-- Other meta tags -->
<meta property="og:title" content="Stock Lists · stocknear"/>
<meta property="og:description" content="Lists of stocks that share common characteristics. See companies ranked by market cap, employee count, sales or others.">
<meta property="og:type" content="website"/>
<meta property="og:title" content="Stock Lists · stocknear" />
<meta
property="og:description"
content="Lists of stocks that share common characteristics. See companies ranked by market cap, employee count, sales or others."
/>
<meta property="og:type" content="website" />
<!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="Stock Lists · stocknear"/>
<meta name="twitter:description" content="Lists of stocks that share common characteristics. See companies ranked by market cap, employee count, sales or others.">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Stock Lists · stocknear" />
<meta
name="twitter:description"
content="Lists of stocks that share common characteristics. See companies ranked by market cap, employee count, sales or others."
/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40">
<section
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40"
>
<div class="text-sm sm:text-[1rem] breadcrumbs ml-3 lg:ml-10">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
{#if $page.url.pathname.startsWith('/list/industry')}
{#if $page.url.pathname.startsWith("/list/industry")}
<li><a href="/industry" class="text-gray-300">Industry</a></li>
{:else}
<li><a href="/list/" class="text-gray-300">Lists</a></li>
{/if}
{#if $page.url.pathname.startsWith('/list/')}
{#if $page.url.pathname.startsWith("/list/")}
<li>
<span class="text-gray-300">
{combinedNavigation?.find((item) => item?.link === $page.url.pathname)?.title}
{combinedNavigation?.find(
(item) => item?.link === $page.url.pathname,
)?.title}
</span>
</li>
{/if}
</ul>
</div>
<div class="mt-10 sm:mt-5 w-full m-auto mb-10 bg-[#09090B] px-3 lg:px-10 overflow-hidden">
<div
class="mt-10 sm:mt-5 w-full m-auto mb-10 bg-[#09090B] px-3 lg:px-10 overflow-hidden"
>
<!--Start Top Winners/Losers-->
<div class="flex flex-col justify-center items-center">
<div class="ml-2 text-start w-full text-white mb-2">
{#each navigation as item}
{#if item?.link === $page.url.pathname}
@ -252,70 +258,71 @@ const combinedNavigation = navigation?.concat(updatedNavigation);
<div class="border-b mt-2 border-blue-400 w-full mb-7" />
<div class="flex justify-center w-full m-auto overflow-hidden">
<main class="w-full lg:w-3/4 lg:pr-10">
<slot />
</main>
<aside class="hidden lg:block relative fixed w-1/4 -mt-4">
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
<div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/pricing"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription 🔥
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools.
</span>
</div>
</a>
</div>
{/if}
<div on:click={() => goto('/watchlist/stocks')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/watchlist/stocks"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Watchlist ⭐
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Build your watchlist to keep track of their performance.
</span>
</div>
</a>
</div>
<div on:click={() => goto('/stock-screener')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/stock-screener"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Stock Screener 🔎
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Build your Stock Screener to find profitable stocks.
</span>
</a>
</div>
</div>
</aside>
</div>
</div>
</div>
</section>
</section>

24
src/routes/most-shorted-stocks/+page.svelte
View File

@ -1,5 +1,4 @@
<script lang="ts">
import { goto } from "$app/navigation";
import { numberOfUnreadNotification, screenWidth } from "$lib/store";
import { abbreviateNumber } from "$lib/utils";
import { onMount } from "svelte";
@ -249,7 +248,6 @@
<tbody>
{#each stockList as item, index}
<tr
on:click={() => goto(`/stocks/${item?.symbol}`)}
class="border-b border-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index +
1 ===
stockList?.length && data?.user?.tier !== 'Pro'
@ -330,10 +328,10 @@
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div
on:click={() => goto("/pricing")}
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<div
<a
href={"/pricing"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
@ -345,15 +343,17 @@
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools
</span>
</div>
</a>
</div>
{/if}
<div
on:click={() => goto("/analysts")}
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<a
href={"/analysts"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Top Analyst 📊
@ -363,14 +363,16 @@
<span class="text-white p-3 ml-3 mr-3">
Get the latest top Wall Street analyst ratings
</span>
</div>
</a>
</div>
<div
on:click={() => goto("/analysts/top-stocks")}
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<a
href={"/analysts/top-stocks"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Top Stocks Picks ⭐
@ -380,7 +382,7 @@
<span class="text-white p-3 ml-3 mr-3">
Get the latest top Wall Street analyst ratings.
</span>
</div>
</a>
</div>
</aside>
</div>

1102
src/routes/politicians/flow-data/+page.svelte
View File

File diff suppressed because it is too large Load Diff

615
src/routes/price-alert/+page.svelte
View File

@ -1,33 +1,49 @@
<script lang='ts'>
import { numberOfUnreadNotification } from '$lib/store';
//import { enhance } from '$app/forms';
import toast from 'svelte-french-toast';
import { goto } from '$app/navigation';
import {screenWidth } from '$lib/store';
import MiniPlot from '$lib/components/MiniPlot.svelte';
import { onMount } from 'svelte';
import ArrowLogo from "lucide-svelte/icons/move-up-right";
<script lang="ts">
import { numberOfUnreadNotification } from "$lib/store";
import { abbreviateNumber } from "$lib/utils";
//import { enhance } from '$app/forms';
import toast from "svelte-french-toast";
import { goto } from "$app/navigation";
import { screenWidth } from "$lib/store";
import MiniPlot from "$lib/components/MiniPlot.svelte";
import { onMount } from "svelte";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
export let data;
export let data;
const rawData = data?.getMiniPlotsIndex;
const rawData = data?.getMiniPlotsIndex;
function getCurrentDateFormatted() {
function getCurrentDateFormatted() {
// Get current date
let date = new Date();
// If today is Saturday or Sunday, move to the previous Friday
if (date.getDay() === 6) { // Saturday
if (date.getDay() === 6) {
// Saturday
date.setDate(date.getDate() - 1);
} else if (date.getDay() === 0) { // Sunday
} else if (date.getDay() === 0) {
// Sunday
date.setDate(date.getDate() - 2);
}
// Define months array for formatting
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
const months = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
];
// Get formatted date components
const month = months[date.getMonth()];
@ -36,43 +52,79 @@ function getCurrentDateFormatted() {
// Return formatted date
return `${month} ${day}, ${year}`;
}
}
let editMode = false;
let numberOfChecked = 0;
let deletePriceAlertList = [];
let editMode = false;
let numberOfChecked = 0;
let deletePriceAlertList = [];
let priceDataSP500;
let priceDataNasdaq;
let priceDataDowJones;
let priceDataRussel2000;
let priceDataSP500;
let priceDataNasdaq;
let priceDataDowJones;
let priceDataRussel2000;
let changeSP500, changeNasdaq, changeDowJones, changeRussel2000;
let previousCloseSP500, previousCloseNasdaq, previousCloseDowJones, previousCloseRussel2000;
// Assign values based on the symbol
rawData?.forEach(({ symbol, priceData, changesPercentage, previousClose }) => {
let changeSP500, changeNasdaq, changeDowJones, changeRussel2000;
let previousCloseSP500,
previousCloseNasdaq,
previousCloseDowJones,
previousCloseRussel2000;
// Assign values based on the symbol
rawData?.forEach(
({ symbol, priceData, changesPercentage, previousClose }) => {
switch (symbol) {
case "SPY":
priceDataSP500 = priceData?.map(({ time, value }) => ({ time: Date?.parse(time), value}));
priceDataSP500 = priceDataSP500?.filter(item => item.value !== 0 && item.value !== null && item.value !== undefined)
priceDataSP500 = priceData?.map(({ time, value }) => ({
time: Date?.parse(time),
value,
}));
priceDataSP500 = priceDataSP500?.filter(
(item) =>
item.value !== 0 &&
item.value !== null &&
item.value !== undefined,
);
changeSP500 = changesPercentage;
previousCloseSP500 = previousClose;
break;
case "QQQ":
priceDataNasdaq = priceData?.map(({ time, value }) => ({ time: Date?.parse(time), value}));
priceDataNasdaq = priceDataNasdaq?.filter(item => item.value !== 0 && item.value !== null && item.value !== undefined)
priceDataNasdaq = priceData?.map(({ time, value }) => ({
time: Date?.parse(time),
value,
}));
priceDataNasdaq = priceDataNasdaq?.filter(
(item) =>
item.value !== 0 &&
item.value !== null &&
item.value !== undefined,
);
changeNasdaq = changesPercentage;
previousCloseNasdaq = previousClose;
break;
case "DIA":
priceDataDowJones = priceData?.map(({ time, value }) => ({ time: Date?.parse(time), value}));
priceDataDowJones = priceDataDowJones?.filter(item => item.value !== 0 && item.value !== null && item.value !== undefined)
changeDowJones = changesPercentage
priceDataDowJones = priceData?.map(({ time, value }) => ({
time: Date?.parse(time),
value,
}));
priceDataDowJones = priceDataDowJones?.filter(
(item) =>
item.value !== 0 &&
item.value !== null &&
item.value !== undefined,
);
changeDowJones = changesPercentage;
previousCloseDowJones = previousClose;
break;
case "IWM":
priceDataRussel2000 = priceData?.map(({ time, value }) => ({ time: Date?.parse(time), value}));
priceDataRussel2000 = priceDataRussel2000?.filter(item => item.value !== 0 && item.value !== null && item.value !== undefined)
priceDataRussel2000 = priceData?.map(({ time, value }) => ({
time: Date?.parse(time),
value,
}));
priceDataRussel2000 = priceDataRussel2000?.filter(
(item) =>
item.value !== 0 &&
item.value !== null &&
item.value !== undefined,
);
changeRussel2000 = changesPercentage;
previousCloseRussel2000 = previousClose;
break;
@ -80,25 +132,22 @@ rawData?.forEach(({ symbol, priceData, changesPercentage, previousClose }) => {
// Handle unknown symbol
break;
}
});
},
);
let isLoaded = false;
let priceAlertList = data?.getPriceAlert;
let isLoaded = false;
let priceAlertList = data?.getPriceAlert;
function stockSelector(symbol, assetType) {
function stockSelector(symbol, assetType) {
if (editMode) {
} else {
goto(
`/${assetType === "stock" ? "stocks" : assetType === "etf" ? "etf" : "crypto"}/${symbol}`,
);
}
else {
goto(`/${assetType === 'stock' ? 'stocks' : assetType === 'etf' ? 'etf' : 'crypto'}/${symbol}`)
}
}
async function handleFilter(priceAlertId) {
async function handleFilter(priceAlertId) {
const filterSet = new Set(deletePriceAlertList);
// Check if the new filter already exists in the list
@ -108,92 +157,83 @@ async function handleFilter(priceAlertId) {
} else {
// If it doesn't exist, add it to the list
filterSet?.add(priceAlertId);
}
deletePriceAlertList = Array?.from(filterSet);
numberOfChecked = deletePriceAlertList?.length;
}
async function handleDelete() {
}
async function handleDelete() {
if (numberOfChecked === 0) {
toast.error(`You need to select symbols before you can delete them`, {
style: 'border-radius: 10px; background: #333; color: #fff; padding: 12px; margin-top: 10px; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);',
style:
"border-radius: 10px; background: #333; color: #fff; padding: 12px; margin-top: 10px; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);",
});
}
else {
priceAlertList = priceAlertList?.filter(item => !deletePriceAlertList?.includes(item?.id));
} else {
priceAlertList = priceAlertList?.filter(
(item) => !deletePriceAlertList?.includes(item?.id),
);
priceAlertList = [...priceAlertList];
const postData = {
'priceAlertIdList': deletePriceAlertList,
'path': 'delete-price-alert'
}
priceAlertIdList: deletePriceAlertList,
path: "delete-price-alert",
};
const response = await fetch('/api/fastify-post-data', {
method: 'POST',
const response = await fetch("/api/fastify-post-data", {
method: "POST",
headers: {
"Content-Type": "application/json"
"Content-Type": "application/json",
},
body: JSON.stringify(postData)
body: JSON.stringify(postData),
});
deletePriceAlertList = [];
numberOfChecked = 0;
editMode = !editMode
editMode = !editMode;
}
}
}
onMount( async () => {
isLoaded = true;
});
$: charNumber = $screenWidth < 640 ? 15 : 40;
onMount(async () => {
isLoaded = true;
});
$: charNumber = $screenWidth < 640 ? 15 : 40;
</script>
<svelte:head>
<title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Price Alert · stocknear</title>
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Price
Alert · stocknear</title
>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="description" content="Set a price alert and get instant notification.">
<meta
name="description"
content="Set a price alert and get instant notification."
/>
<!-- Other meta tags -->
<meta property="og:title" content="Price Alert · stocknear"/>
<meta property="og:description" content="Set a price alert and get instant notification.">
<meta property="og:type" content="website"/>
<meta property="og:title" content="Price Alert · stocknear" />
<meta
property="og:description"
content="Set a price alert and get instant notification."
/>
<meta property="og:type" content="website" />
<!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="Price Alert · stocknear"/>
<meta name="twitter:description" content="Set a price alert and get instant notification.">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Price Alert · stocknear" />
<meta
name="twitter:description"
content="Set a price alert and get instant notification."
/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
<section
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3"
>
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
@ -202,17 +242,15 @@ $: charNumber = $screenWidth < 640 ? 15 : 40;
</div>
<div class="w-full overflow-hidden m-auto mt-5">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
<div class="relative flex justify-center items-start overflow-hidden w-full">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<div
class="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4 lg:pr-5">
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
<div
class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
<!-- Start Column -->
<div>
<div class="flex flex-row justify-center items-center">
@ -221,201 +259,322 @@ $: charNumber = $screenWidth < 640 ? 15 : 40;
</h1>
</div>
<span class="text-white text-md font-medium text-center flex justify-center items-center ">
Get email notifications instantly when your alert goes off, so you never miss out!
<span
class="text-white text-md font-medium text-center flex justify-center items-center"
>
Get email notifications instantly when your alert goes off, so
you never miss out!
</span>
</div>
<!-- End Column -->
<!-- Start Column -->
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0">
<svg class="w-40 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<div
class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"
>
<svg
class="w-40 -my-5"
viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="5" result="glow"/>
<feGaussianBlur stdDeviation="5" result="glow" />
<feMerge>
<feMergeNode in="glow"/>
<feMergeNode in="SourceGraphic"/>
<feMergeNode in="glow" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" />
<path
fill="#1E40AF"
d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
transform="translate(100 100)"
filter="url(#glow)"
/>
</svg>
<div class="z-1 absolute top-2">
<img class="w-[120px] h-fit ml-10" src={cloudFrontUrl+"/assets/price_alert_logo.png"} alt="logo" loading='lazy'>
<img
class="w-[120px] h-fit ml-10"
src={cloudFrontUrl + "/assets/price_alert_logo.png"}
alt="logo"
loading="lazy"
/>
</div>
</div>
<!-- End Column -->
</div>
</div>
{#if isLoaded}
<div class="sm:hidden">
<div class="text-white text-xs sm:text-sm pb-5 sm:pb-2 pl-3 sm:pl-0">
<div
class="text-white text-xs sm:text-sm pb-5 sm:pb-2 pl-3 sm:pl-0"
>
Stock Indexes - {getCurrentDateFormatted()}
</div>
<div class="w-full -mt-4 sm:mt-0 mb-8 m-auto flex justify-start sm:justify-center items-center p-3 sm:p-0">
<div class="w-full grid grid-cols-2 md:grid-cols-4 gap-y-3 lg:gap-y-0 gap-x-3 ">
<MiniPlot title="S&P500" priceData = {priceDataSP500} changesPercentage={changeSP500} previousClose={previousCloseSP500}/>
<MiniPlot title="Nasdaq" priceData = {priceDataNasdaq} changesPercentage={changeNasdaq} previousClose={previousCloseNasdaq}/>
<MiniPlot title="Dow" priceData = {priceDataDowJones} changesPercentage={changeDowJones} previousClose={previousCloseDowJones}/>
<MiniPlot title="Russel" priceData = {priceDataRussel2000} changesPercentage={changeRussel2000} previousClose={previousCloseRussel2000}/>
<div
class="w-full -mt-4 sm:mt-0 mb-8 m-auto flex justify-start sm:justify-center items-center p-3 sm:p-0"
>
<div
class="w-full grid grid-cols-2 md:grid-cols-4 gap-y-3 lg:gap-y-0 gap-x-3"
>
<MiniPlot
title="S&P500"
priceData={priceDataSP500}
changesPercentage={changeSP500}
previousClose={previousCloseSP500}
/>
<MiniPlot
title="Nasdaq"
priceData={priceDataNasdaq}
changesPercentage={changeNasdaq}
previousClose={previousCloseNasdaq}
/>
<MiniPlot
title="Dow"
priceData={priceDataDowJones}
changesPercentage={changeDowJones}
previousClose={previousCloseDowJones}
/>
<MiniPlot
title="Russel"
priceData={priceDataRussel2000}
changesPercentage={changeRussel2000}
previousClose={previousCloseRussel2000}
/>
</div>
</div>
</div>
{#if priceAlertList?.length === 0}
<div class="flex flex-col justify-center items-center m-auto pt-8">
<span class="text-white font-bold text-white text-xl sm:text-3xl">
<div
class="flex flex-col justify-center items-center m-auto pt-8"
>
<span
class="text-white font-bold text-white text-xl sm:text-3xl"
>
No Alerts set
</span>
<span class="text-white text-sm sm:text-[1rem] m-auto p-4 text-center">
Create price alerts for your stocks that have the most potential in your opinion.
<span
class="text-white text-sm sm:text-[1rem] m-auto p-4 text-center"
>
Create price alerts for your stocks that have the most
potential in your opinion.
</span>
{#if !data?.user}
<a class="w-64 flex mt-10 justify-center items-center m-auto btn text-white bg-purple-600 hover:bg-purple-500 transition duration-150 ease-in-out group" href="/register">
<a
class="w-64 flex mt-10 justify-center items-center m-auto btn text-white bg-purple-600 hover:bg-purple-500 transition duration-150 ease-in-out group"
href="/register"
>
Get Started
<span class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><g fill="none"><path d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"/><path fill="white" d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"/></g></g></svg>
<span
class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out"
>
<svg
class="w-4 h-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><g transform="rotate(90 12 12)"
><g fill="none"
><path
d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"
/><path
fill="white"
d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"
/></g
></g
></svg
>
</span>
</a>
{/if}
</div>
{:else}
<div class="flex flex-row justify-end items-center pr-4 sm:pr-0 pb-2">
<div
class="flex flex-row justify-end items-center pr-4 sm:pr-0 pb-2"
>
{#if editMode}
<label on:click={handleDelete} class="border text-sm border-gray-600 ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2 pl-3 pr-4 font-semibold text-white shadow-sm bg-[#09090B] sm:hover:bg-[#09090B]/60 ease-out">
<svg class="inline-block w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M10 5h4a2 2 0 1 0-4 0M8.5 5a3.5 3.5 0 1 1 7 0h5.75a.75.75 0 0 1 0 1.5h-1.32l-1.17 12.111A3.75 3.75 0 0 1 15.026 22H8.974a3.75 3.75 0 0 1-3.733-3.389L4.07 6.5H2.75a.75.75 0 0 1 0-1.5zm2 4.75a.75.75 0 0 0-1.5 0v7.5a.75.75 0 0 0 1.5 0zM14.25 9a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-1.5 0v-7.5a.75.75 0 0 1 .75-.75m-7.516 9.467a2.25 2.25 0 0 0 2.24 2.033h6.052a2.25 2.25 0 0 0 2.24-2.033L18.424 6.5H5.576z"/></svg>
<label
on:click={handleDelete}
class="border text-sm border-gray-600 ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2 pl-3 pr-4 font-semibold text-white shadow-sm bg-[#09090B] sm:hover:bg-[#09090B]/60 ease-out"
>
<svg
class="inline-block w-5 h-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="white"
d="M10 5h4a2 2 0 1 0-4 0M8.5 5a3.5 3.5 0 1 1 7 0h5.75a.75.75 0 0 1 0 1.5h-1.32l-1.17 12.111A3.75 3.75 0 0 1 15.026 22H8.974a3.75 3.75 0 0 1-3.733-3.389L4.07 6.5H2.75a.75.75 0 0 1 0-1.5zm2 4.75a.75.75 0 0 0-1.5 0v7.5a.75.75 0 0 0 1.5 0zM14.25 9a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-1.5 0v-7.5a.75.75 0 0 1 .75-.75m-7.516 9.467a2.25 2.25 0 0 0 2.24 2.033h6.052a2.25 2.25 0 0 0 2.24-2.033L18.424 6.5H5.576z"
/></svg
>
<span class="ml-1 text-white text-sm">
{numberOfChecked}
</span>
</label>
{/if}
<label on:click={() => editMode = !editMode} class="border text-sm border-gray-600 ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2 pl-3 pr-4 font-semibold text-white shadow-sm bg-[#09090B] sm:hover:bg-[#09090B]/60 ease-out">
<svg class="inline-block w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="white" d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640z"/><path fill="white" d="m469.952 554.24l52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z"/></svg>
<label
on:click={() => (editMode = !editMode)}
class="border text-sm border-gray-600 ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2 pl-3 pr-4 font-semibold text-white shadow-sm bg-[#09090B] sm:hover:bg-[#09090B]/60 ease-out"
>
<svg
class="inline-block w-5 h-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1024 1024"
><path
fill="white"
d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640z"
/><path
fill="white"
d="m469.952 554.24l52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z"
/></svg
>
{#if !editMode}
<span class="ml-1 text-white text-sm">
Edit
</span>
<span class="ml-1 text-white text-sm"> Edit </span>
{:else}
<span class="ml-1 text-white text-sm">
Cancel
</span>
<span class="ml-1 text-white text-sm"> Cancel </span>
{/if}
</label>
</div>
<!--Start Table-->
<div class="w-screen sm:w-full rounded-lg overflow-hidden overflow-x-scroll no-scrollbar">
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto mt-4 ">
<div
class="w-screen sm:w-full rounded-lg overflow-hidden overflow-x-scroll no-scrollbar"
>
<table
class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto mt-4"
>
<!-- head -->
<thead>
<tr class="">
<th class="text-white font-semibold text-[1rem] ">Symbol</th>
<th class="text-white font-semibold text-[1rem] ">Company</th>
<th class="text-white font-semibold text-end text-[1rem] ">Volume</th>
<th class="text-white font-semibold text-end text-[1rem] ">Price when Created</th>
<th class="text-white font-semibold text-end text-[1rem] ">Price Target</th>
<th class="text-white font-semibold text-end text-[1rem] ">Current Price</th>
<th class="text-white font-semibold text-end text-[1rem] ">Change</th>
<th class="text-white font-semibold text-[1rem]"
>Symbol</th
>
<th class="text-white font-semibold text-[1rem]"
>Company</th
>
<th class="text-white font-semibold text-end text-[1rem]"
>Volume</th
>
<th class="text-white font-semibold text-end text-[1rem]"
>Price when Created</th
>
<th class="text-white font-semibold text-end text-[1rem]"
>Price Target</th
>
<th class="text-white font-semibold text-end text-[1rem]"
>Current Price</th
>
<th class="text-white font-semibold text-end text-[1rem]"
>Change</th
>
</tr>
</thead>
<tbody class="p-3">
{#each priceAlertList as item, index}
<!-- row -->
<tr on:click={() => stockSelector(item?.symbol, item?.assetType)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] cursor-pointer">
<td on:click={() => handleFilter(item?.id)} class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] flex flex-row items-center">
<input type="checkbox" checked={deletePriceAlertList?.includes(item?.id) ?? false} class="{!editMode ? 'hidden' : ''} bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 mr-3" />
<tr
on:click={() =>
stockSelector(item?.symbol, item?.assetType)}
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] cursor-pointer"
>
<td
on:click={() => handleFilter(item?.id)}
class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] flex flex-row items-center"
>
<input
type="checkbox"
checked={deletePriceAlertList?.includes(item?.id) ??
false}
class="{!editMode
? 'hidden'
: ''} bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 mr-3"
/>
{item?.symbol}
</td>
<td on:click={() => handleFilter(item?.id)} class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
<td
on:click={() => handleFilter(item?.id)}
class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
>
{item?.name?.length > charNumber
? item?.name?.slice(0, charNumber) + "..."
: item?.name}
</td>
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
{new Intl.NumberFormat("en", {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}).format(item?.volume)}
<td
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
>
{abbreviateNumber(item?.volume)}
</td>
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
${item?.priceWhenCreated}
<td
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
>
{item?.priceWhenCreated}
</td>
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
${item?.targetPrice}
<td
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
>
{item?.targetPrice}
</td>
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
${item.price?.toFixed(2)}
<td
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
>
{item.price?.toFixed(2)}
</td>
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
{#if item?.changesPercentage >=0}
<span class="text-[#37C97D]">+{item?.changesPercentage?.toFixed(2)}%</span>
<td
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
>
{#if item?.changesPercentage >= 0}
<span class="text-[#37C97D]"
>+{item?.changesPercentage?.toFixed(2)}%</span
>
{:else}
<span class="text-[#FF2F1F]">{item?.changesPercentage?.toFixed(2)}% </span>
<span class="text-[#FF2F1F]"
>{item?.changesPercentage?.toFixed(2)}%
</span>
{/if}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
<!--End Table-->
{/if}
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md text-gray-400"></span>
<label
class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
>
<span class="loading loading-spinner loading-md text-gray-400"
></span>
</label>
</div>
</div>
{/if}
</main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
<div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div
on:click={() => goto("/pricing")}
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<div
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription 🔥
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools.
@ -424,43 +583,45 @@ $: charNumber = $screenWidth < 640 ? 15 : 40;
</div>
{/if}
<div on:click={() => goto('/watchlist/stocks')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/watchlist/stocks"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Watchlist ⭐
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Build your watchlist to keep track of their performance.
</span>
</div>
</a>
</div>
<div on:click={() => goto('/stock-screener')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/stock-screener"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Stock Screener 🔎
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Build your Stock Screener to find profitable stocks.
</span>
</a>
</div>
</div>
</aside>
</div>
</div>
</div>
</section>
</section>

1
src/routes/sitemap.xml/+server.ts
View File

@ -15,6 +15,7 @@ const pages = [
{ title: "/donation" },
//{title: "/portfolio"},
{ title: "/sentiment-tracker" },
{ title: "/insider-tracker" },
{ title: "/industry" },
{ title: "/industry/sectors" },
{ title: "/industry/all" },

173
src/routes/watchlist/+layout.svelte
View File

@ -1,19 +1,17 @@
<script lang='ts'>
import ScrollToTop from '$lib/components/ScrollToTop.svelte';
import ArrowLogo from "lucide-svelte/icons/move-up-right";
import { goto } from '$app/navigation';
import { page } from '$app/stores';
<script lang="ts">
import ArrowLogo from "lucide-svelte/icons/move-up-right";
import { goto } from "$app/navigation";
import { page } from "$app/stores";
export let data;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
export let data;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
function handleMode(i) {
function handleMode(i) {
activeIdx = i;
if(activeIdx === 0) {
goto("/watchlist/stocks")
if (activeIdx === 0) {
goto("/watchlist/stocks");
} else if (activeIdx === 1) {
goto("/watchlist/options")
goto("/watchlist/options");
}
}
@ -26,15 +24,14 @@ function handleMode(i) {
},
];
let activeIdx = 0;
let activeIdx = 0;
// Subscribe to the $page store to reactively update the activeIdx based on the URL
$: if ($page.url.pathname === '/watchlist/stocks') {
$: if ($page.url.pathname === "/watchlist/stocks") {
activeIdx = 0;
} else if ($page.url.pathname.startsWith('/watchlist/options')) {
} else if ($page.url.pathname.startsWith("/watchlist/options")) {
activeIdx = 1;
}
</script>
<!-- HEADER FOR BETTER SEO -->
@ -43,11 +40,9 @@ let activeIdx = 0;
<meta name="viewport" content="width=device-width" />
</svelte:head>
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
<section
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3"
>
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
@ -56,14 +51,14 @@ let activeIdx = 0;
</div>
<div class="w-full overflow-hidden m-auto mt-5">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
<div class="relative flex justify-center items-start overflow-hidden w-full">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<div
class="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4 lg:pr-5">
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
<div
class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
<!-- Start Column -->
<div>
@ -73,81 +68,100 @@ let activeIdx = 0;
</h1>
</div>
<span class="text-white text-md font-medium text-center flex justify-center items-center ">
Monitor the performance and recent updates of your favorite options.
<span
class="text-white text-md font-medium text-center flex justify-center items-center"
>
Monitor the performance and recent updates of your favorite
options.
</span>
</div>
<!-- End Column -->
<!-- Start Column -->
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0">
<svg class="w-40 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<div
class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"
>
<svg
class="w-40 -my-5"
viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="5" result="glow"/>
<feGaussianBlur stdDeviation="5" result="glow" />
<feMerge>
<feMergeNode in="glow"/>
<feMergeNode in="SourceGraphic"/>
<feMergeNode in="glow" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" />
<path
fill="#1E40AF"
d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
transform="translate(100 100)"
filter="url(#glow)"
/>
</svg>
<div class="z-1 absolute top-3 right-10 ">
<img class="w-24" src={cloudFrontUrl+(activeIdx === 0 ? "/assets/watchlist_logo.png" : "/assets/options_logo.png") } alt="logo" loading='lazy'>
<div class="z-1 absolute top-3 right-10">
<img
class="w-24"
src={cloudFrontUrl +
(activeIdx === 0
? "/assets/watchlist_logo.png"
: "/assets/options_logo.png")}
alt="logo"
loading="lazy"
/>
</div>
</div>
<!-- End Column -->
</div>
</div>
<div class="bg-[#313131] w-52 sm:w-fit relative m-auto sm:m-0 sm:mr-auto flex sm:flex-wrap items-center justify-center rounded-lg p-1 -mt-3">
<div
class="bg-[#313131] w-52 sm:w-fit relative m-auto sm:m-0 sm:mr-auto flex sm:flex-wrap items-center justify-center rounded-lg p-1 -mt-3"
>
{#each tabs as item, i}
<a href={i === 0 ? '/watchlist/stocks' : '/watchlist/options'}
<a
href={i === 0 ? "/watchlist/stocks" : "/watchlist/options"}
on:click={() => handleMode(i)}
class="group relative z-[1] rounded-full px-6 py-1 {activeIdx === i
class="group relative z-[1] rounded-full px-6 py-1 {activeIdx ===
i
? 'z-0'
: ''} "
>
{#if activeIdx === i}
<div
class="absolute inset-0 rounded-lg bg-purple-600"
></div>
<div class="absolute inset-0 rounded-lg bg-purple-600"></div>
{/if}
<span class="relative text-[1rem] sm:text-lg block font-semibold duration-200 text-white">
<span
class="relative text-[1rem] sm:text-lg block font-semibold duration-200 text-white"
>
{item.title}
</span>
</a>
{/each}
</div>
<div class="sm:border-b mt-5 border-slate-700" />
<slot />
</main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
<div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div
on:click={() => goto("/pricing")}
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<div
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription 🔥
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools.
@ -156,46 +170,45 @@ let activeIdx = 0;
</div>
{/if}
<div on:click={() => goto('/price-alert')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/price-alert"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Price Alert ⏰
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Customize your alerts to never miss out again
</span>
</div>
</a>
</div>
<div on:click={() => goto('/stock-screener')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/stock-screener"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Stock Screener 🔎
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Build your Stock Screener to find profitable stocks.
</span>
</a>
</div>
</div>
</aside>
</div>
</div>
</div>
</section>