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

ui fixes

Browse Source
This commit is contained in:
MuslemRahimi 2024-10-29 18:09:32 +01:00
parent cb31accd05
commit eb15bca8c6
10 changed files with 216 additions and 284 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -73,7 +73,7 @@
<td <td
class="{item?.avgChange1M >= 0 class="{item?.avgChange1M >= 0
? 'text-[#00FC50]' ? "before:content-['+'] text-[#00FC50]"
: 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]" : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
> >
{item?.avgChange1M?.toFixed(2) ?? "-"}% {item?.avgChange1M?.toFixed(2) ?? "-"}%
@ -81,7 +81,7 @@
<td <td
class="{item?.avgChange1Y >= 0 class="{item?.avgChange1Y >= 0
? 'text-[#00FC50]' ? "before:content-['+'] text-[#00FC50]"
: 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]" : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
> >
{item?.avgChange1Y?.toFixed(2) ?? "-"}% {item?.avgChange1Y?.toFixed(2) ?? "-"}%

17
src/routes/+layout.svelte
View File

@ -118,19 +118,10 @@
$page.url.pathname.startsWith("/options-flow") || $page.url.pathname.startsWith("/options-flow") ||
$page.url.pathname.startsWith("/options-zero-dte") || $page.url.pathname.startsWith("/options-zero-dte") ||
$page.url.pathname.startsWith("/login") || $page.url.pathname.startsWith("/login") ||
$page.url.pathname.startsWith("/register") ||
$page.url.pathname.startsWith("/etf") || $page.url.pathname.startsWith("/etf") ||
$page.url.pathname.startsWith("/stock-splits-calendar") ||
$page.url.pathname.startsWith("/dividends-calendar") ||
$page.url.pathname.startsWith("/earnings-calendar") ||
$page.url.pathname.startsWith("/market-mover") ||
$page.url.pathname.startsWith("/market-news") ||
$page.url.pathname.startsWith("/portfolio") || $page.url.pathname.startsWith("/portfolio") ||
$page.url.pathname.startsWith("/hedge-funds") || $page.url.pathname.startsWith("/hedge-funds") ||
$page.url.pathname.startsWith("/watchlist") || $page.url.pathname.startsWith("/community");
$page.url.pathname.startsWith("/community") ||
$page.url.pathname.startsWith("/stock-screener") ||
$page.url.pathname.startsWith("/price-alert");
//$: hideSidebar = $page.url.pathname.startsWith('/contact') || $page.url.pathname.startsWith('/imprint') || $page.url.pathname.startsWith('/privacy-policy') || $page.url.pathname.startsWith('/terms-of-use') || $page.url.pathname.startsWith('/about') || $page.url.pathname.startsWith('/community/create-post') || $page.url.pathname.startsWith('/login') || $page.url.pathname.startsWith('/register') //$: hideSidebar = $page.url.pathname.startsWith('/contact') || $page.url.pathname.startsWith('/imprint') || $page.url.pathname.startsWith('/privacy-policy') || $page.url.pathname.startsWith('/terms-of-use') || $page.url.pathname.startsWith('/about') || $page.url.pathname.startsWith('/community/create-post') || $page.url.pathname.startsWith('/login') || $page.url.pathname.startsWith('/register')
@ -539,6 +530,8 @@ const handleTwitchMessage = (event) => {
>Economic Calendar</a >Economic Calendar</a
> >
</Button> </Button>
<!--
<Button <Button
builders={[builder]} builders={[builder]}
type="submit" type="submit"
@ -549,7 +542,9 @@ const handleTwitchMessage = (event) => {
class="text-start w-full text-[1rem] text-white ml-4 mt-4" class="text-start w-full text-[1rem] text-white ml-4 mt-4"
>Stock Splits Calendar</a >Stock Splits Calendar</a
> >
</Button> </Button>
-->
</div> </div>
</Sheet.Close> </Sheet.Close>
</Accordion.Content> </Accordion.Content>
@ -1045,11 +1040,13 @@ const handleTwitchMessage = (event) => {
class="text-[1rem] text-white ml-4 mt-4" class="text-[1rem] text-white ml-4 mt-4"
>Economic Calendar</a >Economic Calendar</a
> >
<!--
<a <a
href="/stock-splits-calendar" href="/stock-splits-calendar"
class="text-[1rem] text-white ml-4 mt-4" class="text-[1rem] text-white ml-4 mt-4"
>Stock Splits Calendar</a >Stock Splits Calendar</a
> >
-->
</div> </div>
</Accordion.Content> </Accordion.Content>
</Accordion.Item> </Accordion.Item>

5
src/routes/+page.svelte
View File

@ -214,10 +214,9 @@
</div> </div>
<h1 <h1
class="hidden sm:block text-3xl lg:text-5xl text-white font-bold text-center mb-10 relative w-fit flex justify-center m-auto" class="hidden sm:block text-3xl lg:text-4xl text-white font-bold text-center mb-10 relative w-fit flex justify-center m-auto"
> >
Stock Analysis for Clear & <span class="italic text-[#FBCE3C]">Simple</span> Market Insight.
<span class="italic text-[#FBCE3C]">Data Freaks</span>
</h1> </h1>
<h1 <h1

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

@ -197,9 +197,9 @@
</svelte:head> </svelte:head>
<section <section
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40" class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 px-4 lg:px-3 mb-20"
> >
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4 sm:ml-0"> <div class="text-sm sm:text-[1rem] breadcrumbs">
<ul> <ul>
<li><a href="/" class="text-gray-300">Home</a></li> <li><a href="/" class="text-gray-300">Home</a></li>
<li class="text-gray-300">Economic Calendar</li> <li class="text-gray-300">Economic Calendar</li>
@ -212,60 +212,10 @@
class="relative flex justify-center items-start overflow-hidden w-full" class="relative flex justify-center items-start overflow-hidden w-full"
> >
<main class="w-full lg:w-3/4 lg:pr-5"> <main class="w-full lg:w-3/4 lg:pr-5">
<div <div class="mb-6 border-b-[2px]">
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" <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
> Economic Calendar
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10"> </h1>
<!-- 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"
>
Economic Calendar
</h1>
</div>
<span
class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center"
>
Stay updated on upcoming Economic Events worldwide.
</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"
>
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="5" result="glow" />
<feMerge>
<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)"
/>
</svg>
<div class="z-1 absolute top-0">
<img class="w-24 ml-5" src={logo} alt="logo" loading="lazy" />
</div>
</div>
<!-- End Column -->
</div>
</div> </div>
<!-- Page wrapper --> <!-- Page wrapper -->
@ -370,7 +320,7 @@
</div> </div>
<div <div
class="flex flex-row items-center w-fit m-auto sm:m-0 pt-6 pb-3" class="flex flex-row items-center w-full sm:w-fit m-auto sm:m-0 pt-6 pb-3"
> >
<div <div
class="grid grid-cols-2 sm:grid-cols-3 gap-y-3 sm:gap-y-0 gap-x-2.5 lg:grid-cols-3 w-full mt-3" class="grid grid-cols-2 sm:grid-cols-3 gap-y-3 sm:gap-y-0 gap-x-2.5 lg:grid-cols-3 w-full mt-3"
@ -379,7 +329,7 @@
<DropdownMenu.Trigger asChild let:builder> <DropdownMenu.Trigger asChild let:builder>
<Button <Button
builders={[builder]} builders={[builder]}
class="border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate" class="border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
> >
<span class="truncate text-white">Filter Country</span> <span class="truncate text-white">Filter Country</span>
<svg <svg
@ -444,7 +394,7 @@
<DropdownMenu.Trigger asChild let:builder> <DropdownMenu.Trigger asChild let:builder>
<Button <Button
builders={[builder]} builders={[builder]}
class="border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate" class="border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
> >
<span class="truncate text-white" <span class="truncate text-white"
>Filter Importance</span >Filter Importance</span
@ -529,7 +479,7 @@
{#if filterList?.length !== 0} {#if filterList?.length !== 0}
<Button <Button
on:click={() => handleReset()} on:click={() => handleReset()}
class="w-fit border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-start items-center px-3 py-2 text-white rounded-lg truncate" class="w-fit border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-start items-center px-3 py-2 text-white rounded-md truncate"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -556,6 +506,11 @@
{#each filterList?.length === 0 ? weekday : weekdayFiltered as day, index} {#each filterList?.length === 0 ? weekday : weekdayFiltered as day, index}
{#if index === selectedWeekday} {#if index === selectedWeekday}
{#if day?.length !== 0} {#if day?.length !== 0}
<h2 class="font-semibold text-white text-xl mt-5">
{formattedWeekday[index]?.split(", ")[1]} · {day?.length}
Events
</h2>
<div class="w-full overflow-x-scroll no-scrollbar"> <div class="w-full overflow-x-scroll no-scrollbar">
<table <table
class="table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4" class="table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
@ -602,7 +557,7 @@
<td <td
class="text-white text-sm sm:text-[1rem] border-b-[#09090B]" class="text-white text-sm sm:text-[1rem] border-b-[#09090B]"
> >
<label class="p-1.5 rounded-lg"> <label class="p-1.5 rounded-md">
{item?.time} {item?.time}
</label> </label>
</td> </td>
@ -745,7 +700,7 @@
</div> </div>
{:else} {:else}
<div <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]" class="text-white p-5 mt-5 w-fit m-auto rounded-md sm:flex sm:flex-row sm:items-center border border-slate-800 text-[1rem]"
> >
<svg <svg
class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
@ -777,7 +732,7 @@
> >
<div class="w-full flex justify-between items-center p-3 mt-3"> <div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription 🔥 Pro Subscription
</h2> </h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" /> <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div> </div>
@ -797,7 +752,7 @@
> >
<div class="w-full flex justify-between items-center p-3 mt-3"> <div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Earnings Calendar 🌟 Earnings Calendar
</h2> </h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" /> <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div> </div>
@ -816,7 +771,7 @@
> >
<div class="w-full flex justify-between items-center p-3 mt-3"> <div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Dividend Calendar 💸 Dividend Calendar
</h2> </h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" /> <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div> </div>

178
src/routes/industry/+layout.svelte
View File

@ -1,128 +1,110 @@
<script lang='ts'> <script lang="ts">
import { numberOfUnreadNotification } from '$lib/store'; import { numberOfUnreadNotification } from "$lib/store";
import { page } from '$app/stores'; import { page } from "$app/stores";
export let data;
export let data;
function handleMode(i) { function handleMode(i) {
activeIdx = i; activeIdx = i;
} }
const tabs = [ const tabs = [
{ {
title: "Overview", title: "Overview",
}, },
{ {
title: "Sectors", title: "Sectors",
}, },
{ {
title: "Industries", title: "Industries",
}, },
]; ];
let activeIdx = 0; let activeIdx = 0;
// Subscribe to the $page store to reactively update the activeIdx based on the URL // Subscribe to the $page store to reactively update the activeIdx based on the URL
$: if ($page.url.pathname === '/industry') { $: if ($page.url.pathname === "/industry") {
activeIdx = 0; activeIdx = 0;
} else if ($page.url.pathname.startsWith('/industry/sectors')) { } else if ($page.url.pathname.startsWith("/industry/sectors")) {
activeIdx = 1; activeIdx = 1;
} else if ($page.url.pathname.startsWith('/industry/all')) { } else if ($page.url.pathname.startsWith("/industry/all")) {
activeIdx = 2; activeIdx = 2;
} }
</script> </script>
<svelte:head> <svelte:head>
<title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Industry · stocknear</title> <title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Industry
· stocknear</title
>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<meta name="description" content="Lists of stocks industry and sectors."> <meta name="description" content="Lists of stocks industry and sectors." />
<!-- Other meta tags --> <!-- Other meta tags -->
<meta property="og:title" content="Industry · stocknear"/> <meta property="og:title" content="Industry · stocknear" />
<meta property="og:description" content="Lists of stocks industry and sectors."> <meta
<meta property="og:type" content="website"/> property="og:description"
content="Lists of stocks industry and sectors."
/>
<meta property="og:type" content="website" />
<!-- Add more Open Graph meta tags as needed --> <!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags --> <!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Industry · stocknear"/> <meta name="twitter:title" content="Industry · stocknear" />
<meta name="twitter:description" content="Lists of stocks industry and sectors."> <meta
name="twitter:description"
content="Lists of stocks industry and sectors."
/>
<!-- Add more Twitter meta tags as needed --> <!-- 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 px-4 lg:px-3 mb-20"
>
<div class="text-sm sm:text-[1rem] breadcrumbs">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
<li><span class="text-gray-300">Industry</span></li>
</ul>
</div>
<div class="mt-10 sm:mt-5 w-full m-auto mb-10 bg-[#09090B] overflow-hidden">
<div class="mb-6">
<h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
Stock Sectors & Industries
</h1>
</div>
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40"> <nav class="border-b-[2px] overflow-x-scroll whitespace-nowrap mb-5">
<ul
<div class="text-sm sm:text-[1rem] breadcrumbs ml-3 lg:ml-10"> class="flex flex-row items-center w-full text-[1rem] sm:text-lg text-white"
<ul> >
<li><a href="/" class="text-gray-300">Home</a></li> {#each tabs as item, i}
<li><span class="text-gray-300">Industry</span></li> <a
</ul> href={i === 0
</div> ? "/industry"
: i === 1
? "/industry/sectors"
: "/industry/all"}
on:click={() => handleMode(i)}
<div class="mt-10 sm:mt-5 w-full m-auto mb-10 bg-[#09090B] lg:px-10 overflow-hidden"> class="p-2 px-5 cursor-pointer {activeIdx === i
? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
<!--Start Top Winners/Losers--> >
<div class="flex flex-col justify-center items-center"> {item.title}
</a>
<div class="ml-4 sm:ml-2 text-start w-full text-white mb-1 text-2xl sm:text-3xl font-semibold"> {/each}
Stock Sectors & Industries </ul>
</div> </nav>
<div class="border-b mt-2 border-blue-400 w-full mb-7" />
<div class="ml-4 sm:ml-0 w-full mb-4">
<div class="bg-[#313131] w-fit relative mr-auto flex flex-wrap items-center justify-center rounded sm:rounded-lg p-1 -mt-3">
{#each tabs as item, i}
<a href={i === 0 ? '/industry' : i === 1 ? '/industry/sectors' : '/industry/all'}
on:click={() => handleMode(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>
{/if}
<span class="relative text-[1rem] block font-semibold duration-200 text-white">
{item.title}
</span>
</a>
{/each}
</div>
</div>
<div class="flex justify-center w-full m-auto overflow-hidden">
<main class="w-full">
<slot />
</main>
</div>
</div>
</div>
</section>
<div class="w-full flex flex-col justify-center items-center">
<div class="flex justify-center w-full m-auto overflow-hidden">
<main class="w-full">
<slot />
</main>
</div>
</div>
</div>
</section>

154
src/routes/industry/+page.svelte
View File

@ -1,106 +1,114 @@
<script lang='ts'> <script lang="ts">
import { screenWidth } from '$lib/store'; import { screenWidth } from "$lib/store";
import IndustryTable from '$lib/components/IndustryTable.svelte'; import IndustryTable from "$lib/components/IndustryTable.svelte";
import { industryList, sectorList } from '$lib/utils'; import { industryList, sectorList } from "$lib/utils";
import { goto } from '$app/navigation'; import { goto } from "$app/navigation";
export let data; export let data;
let rawData = data?.getSectorIndustryOverview; let rawData = data?.getSectorIndustryOverview;
const sectorNavigation = [ const sectorNavigation = [
{ {
title: 'Financial Services', title: "Financial Services",
link: '/list/financial-sector' link: "/list/financial-sector",
}, },
{ {
title: 'Finance', title: "Finance",
link: '/list/financial-sector' link: "/list/financial-sector",
}, },
{ {
title: 'Healthcare', title: "Healthcare",
link: '/list/healthcare-sector' link: "/list/healthcare-sector",
}, },
{ {
title: 'Technology', title: "Technology",
link: '/list/technology-sector' link: "/list/technology-sector",
}, },
{ {
title: 'Industrials', title: "Industrials",
link: '/list/industrials-sector' link: "/list/industrials-sector",
}, },
{ {
title: 'Energy', title: "Energy",
link: '/list/energy-sector' link: "/list/energy-sector",
}, },
{ {
title: 'Utilities', title: "Utilities",
link: '/list/utilities-sector' link: "/list/utilities-sector",
}, },
{ {
title: 'Consumer Cyclical', title: "Consumer Cyclical",
link: '/list/consumer-cyclical-sector' link: "/list/consumer-cyclical-sector",
}, },
{ {
title: 'Real Estate', title: "Real Estate",
link: '/list/real-estate-sector' link: "/list/real-estate-sector",
}, },
{ {
title: 'Basic Materials', title: "Basic Materials",
link: '/list/basic-materials-sector' link: "/list/basic-materials-sector",
}, },
{ {
title: 'Communication Services', title: "Communication Services",
link: '/list/communication-services-sector' link: "/list/communication-services-sector",
}, },
{ {
title: 'Consumer Defensive', title: "Consumer Defensive",
link: '/list/consumer-defensive-sector' link: "/list/consumer-defensive-sector",
}, },
] ];
$: charNumber = $screenWidth < 640 ? 20 : 30;
$: charNumber = $screenWidth < 640 ? 20 : 30;
</script> </script>
<section class="w-full overflow-hidden m-auto px-2 sm:px-0"> <section class="w-full overflow-hidden m-auto">
<div
class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4"
>
<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
>
We categorize stocks into {sectorList?.length} sectors and {industryList?.length}
industries, based on the company's primary business activity.
</div>
<!-- Page wrapper -->
<div class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4"> <div class="flex justify-center w-full m-auto h-full overflow-hidden">
<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> <!-- Content area -->
We categorize stocks into {sectorList?.length} sectors and {industryList?.length} industries, based on the company's primary business activity. <div class="w-full">
{#each sectorList as sector}
<div class="mt-4">
<a
href={sectorNavigation?.find((item) => item?.title === sector)
?.link}
class=" cursor-pointer text-white sm:hover:underline font-semibold text-lg sm:text-xl"
>
Sector: {sector}
<svg
class="inline-block h-6 w-6 -mt-1"
viewBox="0 0 20 20"
fill="white"
style="max-width:40px"
><path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
></path></svg
>
</a>
</div> </div>
<div class="border-t border-gray-600 mt-5" />
<IndustryTable {charNumber} industryList={rawData[sector]} />
<!-- Page wrapper --> <div class="border-t border-gray-600 mt-5" />
<div class="flex justify-center w-full m-auto h-full overflow-hidden"> {/each}
</div>
</div>
</section>
<!-- Content area -->
<div class="w-full">
{#each sectorList as sector}
<div class="mt-4">
<a href={sectorNavigation?.find(item => item?.title === sector)?.link} class=" cursor-pointer text-white sm:hover:underline font-semibold text-lg sm:text-xl ">
Sector: {sector} <svg class="inline-block h-6 w-6 -mt-1" viewBox="0 0 20 20" fill="white" style="max-width:40px"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</div>
<div class="border-t border-gray-600 mt-5 "/>
<IndustryTable charNumber = {charNumber} industryList = {rawData[sector]} />
<div class="border-t border-gray-600 mt-5"/>
{/each}
</div>
</section>

17
src/routes/industry/all/+page.svelte
View File

@ -5,21 +5,10 @@
export let data; export let data;
let rawData = data?.getIndustryOverview; let rawData = data?.getIndustryOverview;
function formatFilename(industryName) {
// Replace spaces with hyphens
let formattedName = industryName?.replace(/ /g, "-");
// Replace "&" with "and"
formattedName = formattedName?.replace(/&/g, "and");
// Remove any extra hyphens (e.g., from consecutive spaces)
formattedName = formattedName?.replace(/-{2,}/g, "-");
// Convert to lowercase for consistency
return "/list/industry/" + formattedName?.toLowerCase();
}
$: charNumber = $screenWidth < 640 ? 20 : 30; $: charNumber = $screenWidth < 640 ? 20 : 30;
</script> </script>
<section class="w-full overflow-hidden m-auto px-2 sm:px-0"> <section class="w-full overflow-hidden m-auto">
<!-- Page wrapper --> <!-- Page wrapper -->
<div class="flex justify-center w-full m-auto h-full overflow-hidden"> <div class="flex justify-center w-full m-auto h-full overflow-hidden">
<!-- Content area --> <!-- Content area -->
@ -101,7 +90,7 @@
<td <td
class="{item?.avgChange1M >= 0 class="{item?.avgChange1M >= 0
? 'text-[#00FC50]' ? "before:content-['+'] text-[#00FC50]"
: 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]" : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
> >
{item?.avgChange1M?.toFixed(2) ?? "-"}% {item?.avgChange1M?.toFixed(2) ?? "-"}%
@ -109,7 +98,7 @@
<td <td
class="{item?.avgChange1Y >= 0 class="{item?.avgChange1Y >= 0
? 'text-[#00FC50]' ? "before:content-['+'] text-[#00FC50]"
: 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]" : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
> >
{item?.avgChange1Y?.toFixed(2) ?? "-"}% {item?.avgChange1Y?.toFixed(2) ?? "-"}%

6
src/routes/industry/sectors/+page.svelte
View File

@ -60,7 +60,7 @@
$: charNumber = $screenWidth < 640 ? 20 : 30; $: charNumber = $screenWidth < 640 ? 20 : 30;
</script> </script>
<section class="w-full overflow-hidden m-auto px-2 sm:px-0"> <section class="w-full overflow-hidden m-auto">
<!-- Page wrapper --> <!-- Page wrapper -->
<div class="flex justify-center w-full m-auto h-full overflow-hidden"> <div class="flex justify-center w-full m-auto h-full overflow-hidden">
<!-- Content area --> <!-- Content area -->
@ -144,7 +144,7 @@
<td <td
class="{item?.avgChange1M >= 0 class="{item?.avgChange1M >= 0
? 'text-[#00FC50]' ? "before:content-['+'] text-[#00FC50]"
: 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]" : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
> >
{item?.avgChange1M?.toFixed(2) ?? "-"}% {item?.avgChange1M?.toFixed(2) ?? "-"}%
@ -152,7 +152,7 @@
<td <td
class="{item?.avgChange1Y >= 0 class="{item?.avgChange1Y >= 0
? 'text-[#00FC50]' ? "before:content-['+'] text-[#00FC50]"
: 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]" : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
> >
{item?.avgChange1Y?.toFixed(2) ?? "-"}% {item?.avgChange1Y?.toFixed(2) ?? "-"}%

16
src/routes/ipos/+page.svelte
View File

@ -85,10 +85,9 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each ipoList as item, index} {#each ipoList as item}
<tr <tr
on:click={() => goto("/stocks/" + item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
> >
<td <td
class="text-white text-sm sm:text-[1rem] text-start border-b-[#09090B] whitespace-nowrap" class="text-white text-sm sm:text-[1rem] text-start border-b-[#09090B] whitespace-nowrap"
@ -102,9 +101,14 @@
</td> </td>
<td <td
class="whitespace-nowrap text-blue-400 text-sm sm:text-[1rem] text-start border-b-[#09090B]" class="whitespace-nowrap text-sm sm:text-[1rem] text-start border-b-[#09090B]"
> >
{item?.symbol} <a
href={"/stocks/" + item?.symbol}
class="sm:hover:text-white text-blue-400"
>
{item?.symbol}
</a>
</td> </td>
<td <td
@ -118,7 +122,7 @@
<td <td
class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap" class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.ipoPrice !== null ? "$" + item?.ipoPrice : "-"} {item?.ipoPrice !== null ? item?.ipoPrice : "-"}
</td> </td>
<td <td

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

@ -218,9 +218,9 @@
</svelte:head> </svelte:head>
<section <section
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5" class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 px-4 lg:px-3 mb-20"
> >
<div class="text-sm sm:text-[1rem] breadcrumbs ml-3 lg:ml-10"> <div class="text-sm sm:text-[1rem] breadcrumbs">
<ul> <ul>
<li><a href="/" class="text-gray-300">Home</a></li> <li><a href="/" class="text-gray-300">Home</a></li>
{#if $page.url.pathname.startsWith("/list/industry")} {#if $page.url.pathname.startsWith("/list/industry")}
@ -240,9 +240,7 @@
</ul> </ul>
</div> </div>
<div <div class="mt-10 sm:mt-5 w-full m-auto mb-10 bg-[#09090B] overflow-hidden">
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--> <!--Start Top Winners/Losers-->
<div class="flex flex-col justify-center items-center"> <div class="flex flex-col justify-center items-center">
<div class="ml-2 text-start w-full text-white mb-2"> <div class="ml-2 text-start w-full text-white mb-2">
@ -255,7 +253,7 @@
{/each} {/each}
</div> </div>
<div class="border-b mt-2 border-blue-400 w-full mb-7" /> <div class="border-b-[2px] mt-2 w-full mb-7" />
<div class="flex justify-center w-full m-auto overflow-hidden"> <div class="flex justify-center w-full m-auto overflow-hidden">
<main class="w-full lg:w-3/4 lg:pr-10"> <main class="w-full lg:w-3/4 lg:pr-10">