change color scheme to white
This commit is contained in:
MuslemRahimi
parent
e6d42b8f9d
commit
d7b73672fa
@ -68,7 +68,7 @@
|
||||
class="stroke-current {score >= 7
|
||||
? 'text-[#00FC50]'
|
||||
: score >= 4
|
||||
? 'text-[#FBCE3C]'
|
||||
? 'text-[#fff]'
|
||||
: 'text-[#FF2F1F]'}"
|
||||
stroke-width="3"
|
||||
stroke-dasharray="100.48"
|
||||
@ -115,7 +115,7 @@
|
||||
</span>
|
||||
<div class="absolute top-0.5 flex items-center">
|
||||
<svg
|
||||
class="size-5 text-[#FBCE3C]"
|
||||
class="size-5 text-[#fff]"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
style="max-width: 40px;"
|
||||
|
||||
@ -1,77 +1,67 @@
|
||||
<script lang='ts'>
|
||||
import toast from 'svelte-french-toast';
|
||||
import { stockTicker, etfTicker, cryptoTicker, assetType, screenWidth } from "$lib/store";
|
||||
import { page } from '$app/stores';
|
||||
<script lang="ts">
|
||||
import toast from "svelte-french-toast";
|
||||
import {
|
||||
stockTicker,
|
||||
etfTicker,
|
||||
cryptoTicker,
|
||||
assetType,
|
||||
screenWidth,
|
||||
} from "$lib/store";
|
||||
import { page } from "$app/stores";
|
||||
|
||||
export let data;
|
||||
|
||||
|
||||
let isClicked = false;
|
||||
|
||||
async function createPortfolio(event) {
|
||||
event.preventDefault();
|
||||
|
||||
async function createPortfolio(event) {
|
||||
const postData = { userId: data?.user?.id };
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
const postData = {'userId': data?.user?.id}
|
||||
|
||||
const response = await fetch('/api/create-portfolio', {
|
||||
method: 'POST',
|
||||
const response = await fetch("/api/create-portfolio", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(postData)
|
||||
});
|
||||
body: JSON.stringify(postData),
|
||||
});
|
||||
|
||||
const output = await response.json();
|
||||
const output = await response.json();
|
||||
|
||||
if (output?.message === "success") {
|
||||
isClicked = true;
|
||||
toast.success("Portfolio created successfully!", {
|
||||
style: "border-radius: 200px; background: #333; color: #fff;",
|
||||
});
|
||||
|
||||
if ( output?.message === 'success')
|
||||
{
|
||||
isClicked = true;
|
||||
toast.success('Portfolio created successfully!', {
|
||||
style: 'border-radius: 200px; background: #333; color: #fff;'});
|
||||
setTimeout(() => {
|
||||
const clicked = document.getElementById("addPortfolio");
|
||||
clicked.dispatchEvent(new MouseEvent("click"));
|
||||
|
||||
setTimeout(() => {
|
||||
const anchor = document.createElement("a");
|
||||
|
||||
const clicked = document.getElementById('addPortfolio');
|
||||
clicked.dispatchEvent(new MouseEvent('click'));
|
||||
|
||||
const anchor = document.createElement('a');
|
||||
|
||||
if ($page.url.pathname === '/portfolio')
|
||||
{
|
||||
anchor.href = '/portfolio';
|
||||
if ($page.url.pathname === "/portfolio") {
|
||||
anchor.href = "/portfolio";
|
||||
} else {
|
||||
if ($assetType === "etf") {
|
||||
anchor.href = `/etf/${$etfTicker}`;
|
||||
} else if ($assetType === "crypto") {
|
||||
anchor.href = `/crypto/${$cryptoTicker}`;
|
||||
} else {
|
||||
anchor.href = `/stocks/${$stockTicker}`;
|
||||
}
|
||||
else {
|
||||
if ($assetType === 'etf')
|
||||
{
|
||||
anchor.href = `/etf/${$etfTicker}`;
|
||||
}
|
||||
else if ($assetType === 'crypto')
|
||||
{
|
||||
anchor.href = `/crypto/${$cryptoTicker}`;
|
||||
}
|
||||
else {
|
||||
anchor.href = `/stocks/${$stockTicker}`;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
anchor.dataset.sveltekitReload = true;
|
||||
document.body.appendChild(anchor);
|
||||
anchor.dispatchEvent(new MouseEvent('click'));
|
||||
anchor.dataset.sveltekitReload = true;
|
||||
document.body.appendChild(anchor);
|
||||
anchor.dispatchEvent(new MouseEvent("click"));
|
||||
}, 500);
|
||||
} else {
|
||||
toast.error("Something went wrong. Please try again.", {
|
||||
style: "border-radius: 200px; background: #333; color: #fff;",
|
||||
});
|
||||
}
|
||||
}
|
||||
else {
|
||||
toast.error('Something went wrong. Please try again.', {
|
||||
style: 'border-radius: 200px; background: #333; color: #fff;'});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
let participationCheckbox = false;
|
||||
let ageCheckbox = false;
|
||||
@ -85,296 +75,402 @@ else {
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
{#if $screenWidth >= 640}
|
||||
<input type="checkbox" id="addPortfolio" class="modal-toggle" />
|
||||
<input type="checkbox" id="addPortfolio" class="modal-toggle" />
|
||||
|
||||
<dialog id="addPortfolio" class="modal modal-bottom sm:modal-middle overflow-hidden">
|
||||
<dialog
|
||||
id="addPortfolio"
|
||||
class="modal modal-bottom sm:modal-middle overflow-hidden"
|
||||
>
|
||||
<label
|
||||
for="addPortfolio"
|
||||
class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"
|
||||
></label>
|
||||
|
||||
<div class="modal-box w-full bg-[#09090B] overflow-hidden">
|
||||
<div class="flex flex-col w-full mt-10 sm:mt-0">
|
||||
<div class="text-white text-3xl font-bold mb-5">
|
||||
Portfolio Tournament 🔥🚀
|
||||
</div>
|
||||
|
||||
<label for="addPortfolio" class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"></label>
|
||||
|
||||
|
||||
<div class="modal-box w-full bg-[#09090B] overflow-hidden" >
|
||||
<div class="text-white text-lg font-medium mb-3">
|
||||
Terms and Conditions of Participation
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex flex-col w-full mt-10 sm:mt-0">
|
||||
|
||||
|
||||
<div class="text-white text-3xl font-bold mb-5">
|
||||
Portfolio Tournament 🔥🚀
|
||||
</div>
|
||||
|
||||
<div class="text-white text-lg font-medium mb-3">
|
||||
Terms and Conditions of Participation
|
||||
</div>
|
||||
|
||||
<div class="text-white text-sm border bg-[#313131] border-gray-800 p-3 rounded-lg overflow-y-scroll h-56">
|
||||
|
||||
<ol class="text-white list-decimal ml-3 p-2">
|
||||
<li class="p-1">The organizer of the Prize competition is stocknear.</li>
|
||||
<li class="p-1">Participation is free of charge.</li>
|
||||
<li class="p-1">
|
||||
All individuals worldwide who have reached the age of 18 and comply with the laws and regulations of their respective countries are eligible to participate. Persons involved in the conception and implementation of this prize competition are excluded - this explicitly does not apply to voluntary moderators or other voluntary members who have a special status on the platform.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The prerequisite for participation in the competition is the creation of a portfolio whereby the user can buy and sell shares. Each user starts with a play money of 100,000 $. To be considered in the final draw and eligible for any prizes, participants must make at least one trade (buy or sell shares) during the tournament period.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The prize competition will take place automated once a month for an indefinite period of time. The potential winners are drawn automatically, randomly on the first day of each month, whereby the chance of winning depends on the overall return of the portfolio. If a participant has collected too little return of the portfolio, the chance can also be 0 percent.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The prizes to be awarded may change from month to month.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
After the draw, the accounts of the winners will be checked for possible fraud attempts. If no abnormalities are found, the potential winners will be notified by email from stocknear.
|
||||
If any abnormalities are found, the draw will be repeated. The organizer reserves the right to refuse and reclaim prizes even after the fact and to permanently exclude participants from competitions in case of suspicion of attempted fraud or manipulation for their own benefit or the benefit of third parties as well as to temporarily or permanently block their accounts.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The potential winner must respond to the respective prize notification within 14 days,
|
||||
which will be sent via email, in order to claim the prize.
|
||||
Only a response via email will be considered.
|
||||
Otherwise, unclaimed prizes will be included in the next monthly draw.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The organizer points out that the availability and functionality of the prize draw cannot be guaranteed.
|
||||
The organizer is not responsible for entries not being included due to technical failures or other reasons.
|
||||
The prize competition may be terminated or removed due to external circumstances and constraints
|
||||
without any claims arising for the participants against the organizer.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The organizer reserves the right to change, discontinue, or suspend the game
|
||||
and the draw in whole or in part without prior notice in the event
|
||||
of unforeseen circumstances. These circumstances include, but are not limited to,
|
||||
the appearance of a computer virus, a program error, unauthorized intervention by third parties,
|
||||
or mechanical or technical problems beyond the control and influence of the organizer.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The organizer reserves the right to terminate the prize draw at any time without prior notice.
|
||||
In this case, any outstanding prizes will be properly awarded.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
Should individual provisions of these terms and conditions of participation be or become invalid,
|
||||
inadmissible, or unenforceable, this shall not affect the validity of the remaining terms
|
||||
and conditions. In place of the invalid, inadmissible, or unenforceable clause, provisions
|
||||
shall be deemed to have been agreed upon that come as close as possible to the economic objectives.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
Furthermore, the <a href="/imprint" class="text-blue-700 hover:underline">Imprint</a>, <a href="/terms-of-use" class="text-blue-700 hover:underline">
|
||||
Terms of Use
|
||||
</a> and our
|
||||
<a href="/privacy-policy" class="text-blue-700 hover:underline">
|
||||
Privacy Policy
|
||||
</a>
|
||||
apply.
|
||||
The applicable law and jurisdiction for this prize draw shall be determined based on the participant's
|
||||
country of residence. In case of any legal disputes, the competent courts of the participant's
|
||||
country of residence shall have exclusive jurisdiction.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The right of recourse to the courts is excluded.
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="form-control mt-5">
|
||||
<label class="label cursor-pointer flex flex-row">
|
||||
<input on:click={handleParticipation} checked={participationCheckbox} aria-describedby="helper-checkbox-text" type="checkbox" value="" class="w-6 h-6 bg-[#333333] border-slate-500 focus-none rounded ring-1">
|
||||
<span class="label-text text-white ml-3">I accept the Terms and Conditions of Participation
|
||||
in the monthly portfolio tournament.</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="form-control ">
|
||||
<label class="label cursor-pointer">
|
||||
<input on:click={handleAge} checked={ageCheckbox} aria-describedby="helper-checkbox-text" type="checkbox" value="" class="w-6 h-6 bg-[#333333] border-slate-500 focus-none rounded ring-1">
|
||||
<span class="label-text text-white ml-3 mr-auto">I'm at least 18 years old.</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{#if ageCheckbox && participationCheckbox && !isClicked}
|
||||
<form
|
||||
on:submit={createPortfolio}
|
||||
class="w-full max-w-lg pt-5 m-auto pb-8"
|
||||
<div
|
||||
class="text-white text-sm border bg-[#313131] border-gray-800 p-3 rounded-lg overflow-y-scroll h-56"
|
||||
>
|
||||
<button type="submit" class="btn bg-purple-600 hover:bg-purple-500 btn-md w-full rounded-lg m-auto text-white font-bold text-md">
|
||||
Create Portfolio
|
||||
</button>
|
||||
</form>
|
||||
{:else}
|
||||
<div class="w-full max-w-lg pt-5 m-auto pb-8">
|
||||
<label class="opacity-[0.4] cursor-not-allowed btn bg-purple-600 btn-md w-full rounded-lg m-auto text-white font-bold text-md">
|
||||
{#if !isClicked}
|
||||
Create Portfolio
|
||||
{:else}
|
||||
<div class="flex flex-row m-auto">
|
||||
<span class="loading loading-infinity"></span>
|
||||
<span class="text-white ml-2">Loading</span>
|
||||
<ol class="text-white list-decimal ml-3 p-2">
|
||||
<li class="p-1">
|
||||
The organizer of the Prize competition is stocknear.
|
||||
</li>
|
||||
<li class="p-1">Participation is free of charge.</li>
|
||||
<li class="p-1">
|
||||
All individuals worldwide who have reached the age of 18 and
|
||||
comply with the laws and regulations of their respective countries
|
||||
are eligible to participate. Persons involved in the conception
|
||||
and implementation of this prize competition are excluded - this
|
||||
explicitly does not apply to voluntary moderators or other
|
||||
voluntary members who have a special status on the platform.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The prerequisite for participation in the competition is the
|
||||
creation of a portfolio whereby the user can buy and sell shares.
|
||||
Each user starts with a play money of 100,000 $. To be considered
|
||||
in the final draw and eligible for any prizes, participants must
|
||||
make at least one trade (buy or sell shares) during the tournament
|
||||
period.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The prize competition will take place automated once a month for
|
||||
an indefinite period of time. The potential winners are drawn
|
||||
automatically, randomly on the first day of each month, whereby
|
||||
the chance of winning depends on the overall return of the
|
||||
portfolio. If a participant has collected too little return of the
|
||||
portfolio, the chance can also be 0 percent.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The prizes to be awarded may change from month to month.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
After the draw, the accounts of the winners will be checked for
|
||||
possible fraud attempts. If no abnormalities are found, the
|
||||
potential winners will be notified by email from stocknear. If any
|
||||
abnormalities are found, the draw will be repeated. The organizer
|
||||
reserves the right to refuse and reclaim prizes even after the
|
||||
fact and to permanently exclude participants from competitions in
|
||||
case of suspicion of attempted fraud or manipulation for their own
|
||||
benefit or the benefit of third parties as well as to temporarily
|
||||
or permanently block their accounts.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The potential winner must respond to the respective prize
|
||||
notification within 14 days, which will be sent via email, in
|
||||
order to claim the prize. Only a response via email will be
|
||||
considered. Otherwise, unclaimed prizes will be included in the
|
||||
next monthly draw.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The organizer points out that the availability and functionality
|
||||
of the prize draw cannot be guaranteed. The organizer is not
|
||||
responsible for entries not being included due to technical
|
||||
failures or other reasons. The prize competition may be terminated
|
||||
or removed due to external circumstances and constraints without
|
||||
any claims arising for the participants against the organizer.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The organizer reserves the right to change, discontinue, or
|
||||
suspend the game and the draw in whole or in part without prior
|
||||
notice in the event of unforeseen circumstances. These
|
||||
circumstances include, but are not limited to, the appearance of a
|
||||
computer virus, a program error, unauthorized intervention by
|
||||
third parties, or mechanical or technical problems beyond the
|
||||
control and influence of the organizer.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The organizer reserves the right to terminate the prize draw at
|
||||
any time without prior notice. In this case, any outstanding
|
||||
prizes will be properly awarded.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
Should individual provisions of these terms and conditions of
|
||||
participation be or become invalid, inadmissible, or
|
||||
unenforceable, this shall not affect the validity of the remaining
|
||||
terms and conditions. In place of the invalid, inadmissible, or
|
||||
unenforceable clause, provisions shall be deemed to have been
|
||||
agreed upon that come as close as possible to the economic
|
||||
objectives.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
Furthermore, the <a
|
||||
href="/imprint"
|
||||
class="text-blue-700 hover:underline">Imprint</a
|
||||
>,
|
||||
<a href="/terms-of-use" class="text-blue-700 hover:underline">
|
||||
Terms of Use
|
||||
</a>
|
||||
and our
|
||||
<a href="/privacy-policy" class="text-blue-700 hover:underline">
|
||||
Privacy Policy
|
||||
</a>
|
||||
apply. The applicable law and jurisdiction for this prize draw shall
|
||||
be determined based on the participant's country of residence. In case
|
||||
of any legal disputes, the competent courts of the participant's country
|
||||
of residence shall have exclusive jurisdiction.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The right of recourse to the courts is excluded.
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="form-control mt-5">
|
||||
<label class="label cursor-pointer flex flex-row">
|
||||
<input
|
||||
on:click={handleParticipation}
|
||||
checked={participationCheckbox}
|
||||
aria-describedby="helper-checkbox-text"
|
||||
type="checkbox"
|
||||
value=""
|
||||
class="w-6 h-6 bg-[#333333] border-slate-500 focus-none rounded ring-1"
|
||||
/>
|
||||
<span class="label-text text-white ml-3"
|
||||
>I accept the Terms and Conditions of Participation in the monthly
|
||||
portfolio tournament.</span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label cursor-pointer">
|
||||
<input
|
||||
on:click={handleAge}
|
||||
checked={ageCheckbox}
|
||||
aria-describedby="helper-checkbox-text"
|
||||
type="checkbox"
|
||||
value=""
|
||||
class="w-6 h-6 bg-[#333333] border-slate-500 focus-none rounded ring-1"
|
||||
/>
|
||||
<span class="label-text text-white ml-3 mr-auto"
|
||||
>I'm at least 18 years old.</span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{#if ageCheckbox && participationCheckbox && !isClicked}
|
||||
<form
|
||||
on:submit={createPortfolio}
|
||||
class="w-full max-w-lg pt-5 m-auto pb-8"
|
||||
>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn bg-[#fff] sm:hover:bg-gray-300 btn-md w-full rounded-lg m-auto text-white font-bold text-md"
|
||||
>
|
||||
Create Portfolio
|
||||
</button>
|
||||
</form>
|
||||
{:else}
|
||||
<div class="w-full max-w-lg pt-5 m-auto pb-8">
|
||||
<label
|
||||
class="opacity-[0.4] cursor-not-allowed btn bg-[#fff] btn-md w-full rounded-lg m-auto text-white font-bold text-md"
|
||||
>
|
||||
{#if !isClicked}
|
||||
Create Portfolio
|
||||
{:else}
|
||||
<div class="flex flex-row m-auto">
|
||||
<span class="loading loading-infinity"></span>
|
||||
<span class="text-white ml-2">Loading</span>
|
||||
</div>
|
||||
{/if}
|
||||
</label>
|
||||
</div>
|
||||
{/if}
|
||||
</label>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
|
||||
|
||||
{:else}
|
||||
<!--Start Drawer Sidewise for mobile-->
|
||||
|
||||
<!--Start Drawer Sidewise for mobile-->
|
||||
|
||||
<!--Start ESG Modal-->
|
||||
<div class="drawer drawer-end overflow-hidden w-screen" style="z-index: 9999;">
|
||||
<input id="addPortfolio" type="checkbox" class="drawer-toggle"/>
|
||||
<div
|
||||
class="drawer drawer-end overflow-hidden w-screen"
|
||||
style="z-index: 9999;"
|
||||
>
|
||||
<input id="addPortfolio" type="checkbox" class="drawer-toggle" />
|
||||
<div class="drawer-side overflow-y-scroll overflow-hidden">
|
||||
|
||||
|
||||
<div class="bg-[#000] min-h-screen px-5 pt-16 w-screen pb-20 overflow-y-scroll overflow-hidden">
|
||||
|
||||
<h1 class="text-white sm:hidden font-bold text-2xl mb-5">
|
||||
Portfolio Tournament 🔥🚀
|
||||
</h1>
|
||||
<div
|
||||
class="bg-[#000] min-h-screen px-5 pt-16 w-screen pb-20 overflow-y-scroll overflow-hidden"
|
||||
>
|
||||
<h1 class="text-white sm:hidden font-bold text-2xl mb-5">
|
||||
Portfolio Tournament 🔥🚀
|
||||
</h1>
|
||||
|
||||
<div class="text-white text-lg font-medium mb-3">
|
||||
Terms and Conditions of Participation
|
||||
</div>
|
||||
|
||||
<div class="text-white text-lg font-medium mb-3">
|
||||
Terms and Conditions of Participation
|
||||
</div>
|
||||
|
||||
<div class="text-white text-sm border bg-[#09090B] border-gray-800 p-3 rounded-lg overflow-y-scroll h-56">
|
||||
|
||||
<ol class="text-white list-decimal ml-3 p-2">
|
||||
<li class="p-1">The organizer of the Prize competition is stocknear.</li>
|
||||
<li class="p-1">Participation is free of charge.</li>
|
||||
<li class="p-1">
|
||||
All individuals worldwide who have reached the age of 18 and comply with the laws and regulations of their respective countries are eligible to participate. Persons involved in the conception and implementation of this prize competition are excluded - this explicitly does not apply to voluntary moderators or other voluntary members who have a special status on the platform.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The prerequisite for participation in the competition is the creation of a portfolio whereby the user can buy and sell shares. Each user starts with a play money of 100,000 $. To be considered in the final draw and eligible for any prizes, participants must make at least one trade (buy or sell shares) during the tournament period.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The prize competition will take place automated once a month for an indefinite period of time. The potential winners are drawn automatically, randomly on the first day of each month, whereby the chance of winning depends on the overall return of the portfolio. If a participant has collected too little return of the portfolio, the chance can also be 0 percent.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The prizes to be awarded may change from month to month.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
After the draw, the accounts of the winners will be checked for possible fraud attempts. If no abnormalities are found, the potential winners will be notified by email from stocknear.
|
||||
If any abnormalities are found, the draw will be repeated. The organizer reserves the right to refuse and reclaim prizes even after the fact and to permanently exclude participants from competitions in case of suspicion of attempted fraud or manipulation for their own benefit or the benefit of third parties as well as to temporarily or permanently block their accounts.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The potential winner must respond to the respective prize notification within 14 days,
|
||||
which will be sent via email, in order to claim the prize.
|
||||
Only a response via email will be considered.
|
||||
Otherwise, unclaimed prizes will be included in the next monthly draw.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The organizer points out that the availability and functionality of the prize draw cannot be guaranteed.
|
||||
The organizer is not responsible for entries not being included due to technical failures or other reasons.
|
||||
The prize competition may be terminated or removed due to external circumstances and constraints
|
||||
without any claims arising for the participants against the organizer.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The organizer reserves the right to change, discontinue, or suspend the game
|
||||
and the draw in whole or in part without prior notice in the event
|
||||
of unforeseen circumstances. These circumstances include, but are not limited to,
|
||||
the appearance of a computer virus, a program error, unauthorized intervention by third parties,
|
||||
or mechanical or technical problems beyond the control and influence of the organizer.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The organizer reserves the right to terminate the prize draw at any time without prior notice.
|
||||
In this case, any outstanding prizes will be properly awarded.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
Should individual provisions of these terms and conditions of participation be or become invalid,
|
||||
inadmissible, or unenforceable, this shall not affect the validity of the remaining terms
|
||||
and conditions. In place of the invalid, inadmissible, or unenforceable clause, provisions
|
||||
shall be deemed to have been agreed upon that come as close as possible to the economic objectives.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
Furthermore, the <a href="/imprint" class="text-blue-700 hover:underline">Imprint</a>, <a href="/terms-of-use" class="text-blue-700 hover:underline">
|
||||
Terms of Use
|
||||
</a> and our
|
||||
<a href="/privacy-policy" class="text-blue-700 hover:underline">
|
||||
Privacy Policy
|
||||
</a>
|
||||
apply.
|
||||
The applicable law and jurisdiction for this prize draw shall be determined based on the participant's
|
||||
country of residence. In case of any legal disputes, the competent courts of the participant's
|
||||
country of residence shall have exclusive jurisdiction.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The right of recourse to the courts is excluded.
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="form-control mt-5">
|
||||
<label class="label cursor-pointer flex flex-row">
|
||||
<input on:click={handleParticipation} checked={participationCheckbox} aria-describedby="helper-checkbox-text" type="checkbox" value="" class="w-6 h-6 bg-[#333333] border-slate-500 focus-none rounded ring-1">
|
||||
<span class="label-text text-white ml-3">I accept the Terms and Conditions of Participation
|
||||
in the monthly portfolio tournament.</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label cursor-pointer">
|
||||
<input on:click={handleAge} checked={ageCheckbox} aria-describedby="helper-checkbox-text" type="checkbox" value="" class="w-6 h-6 bg-[#333333] border-slate-500 focus-none rounded ring-1">
|
||||
<span class="label-text text-white ml-3 mr-auto">I'm at least 18 years old.</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{#if ageCheckbox && participationCheckbox && !isClicked}
|
||||
<form
|
||||
on:submit={createPortfolio}
|
||||
class="w-full max-w-lg m-auto pb-8 mt-10"
|
||||
<div
|
||||
class="text-white text-sm border bg-[#09090B] border-gray-800 p-3 rounded-lg overflow-y-scroll h-56"
|
||||
>
|
||||
<button type="submit" class="btn bg-purple-600 hover:bg-purple-500 btn-md w-full rounded-lg m-auto text-white font-bold text-md">
|
||||
Create Portfolio
|
||||
</button>
|
||||
</form>
|
||||
{:else}
|
||||
<div class="w-full max-w-lg m-auto pb-8 mt-10">
|
||||
<label class="opacity-[0.4] cursor-not-allowed btn bg-purple-600 btn-md w-full rounded-lg m-auto text-white font-bold text-md">
|
||||
{#if !isClicked}
|
||||
Create Portfolio
|
||||
{:else}
|
||||
<div class="flex flex-row m-auto">
|
||||
<span class="loading loading-infinity"></span>
|
||||
<span class="text-white ml-2">Loading</span>
|
||||
<ol class="text-white list-decimal ml-3 p-2">
|
||||
<li class="p-1">
|
||||
The organizer of the Prize competition is stocknear.
|
||||
</li>
|
||||
<li class="p-1">Participation is free of charge.</li>
|
||||
<li class="p-1">
|
||||
All individuals worldwide who have reached the age of 18 and
|
||||
comply with the laws and regulations of their respective countries
|
||||
are eligible to participate. Persons involved in the conception
|
||||
and implementation of this prize competition are excluded - this
|
||||
explicitly does not apply to voluntary moderators or other
|
||||
voluntary members who have a special status on the platform.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The prerequisite for participation in the competition is the
|
||||
creation of a portfolio whereby the user can buy and sell shares.
|
||||
Each user starts with a play money of 100,000 $. To be considered
|
||||
in the final draw and eligible for any prizes, participants must
|
||||
make at least one trade (buy or sell shares) during the tournament
|
||||
period.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The prize competition will take place automated once a month for
|
||||
an indefinite period of time. The potential winners are drawn
|
||||
automatically, randomly on the first day of each month, whereby
|
||||
the chance of winning depends on the overall return of the
|
||||
portfolio. If a participant has collected too little return of the
|
||||
portfolio, the chance can also be 0 percent.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The prizes to be awarded may change from month to month.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
After the draw, the accounts of the winners will be checked for
|
||||
possible fraud attempts. If no abnormalities are found, the
|
||||
potential winners will be notified by email from stocknear. If any
|
||||
abnormalities are found, the draw will be repeated. The organizer
|
||||
reserves the right to refuse and reclaim prizes even after the
|
||||
fact and to permanently exclude participants from competitions in
|
||||
case of suspicion of attempted fraud or manipulation for their own
|
||||
benefit or the benefit of third parties as well as to temporarily
|
||||
or permanently block their accounts.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The potential winner must respond to the respective prize
|
||||
notification within 14 days, which will be sent via email, in
|
||||
order to claim the prize. Only a response via email will be
|
||||
considered. Otherwise, unclaimed prizes will be included in the
|
||||
next monthly draw.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The organizer points out that the availability and functionality
|
||||
of the prize draw cannot be guaranteed. The organizer is not
|
||||
responsible for entries not being included due to technical
|
||||
failures or other reasons. The prize competition may be terminated
|
||||
or removed due to external circumstances and constraints without
|
||||
any claims arising for the participants against the organizer.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The organizer reserves the right to change, discontinue, or
|
||||
suspend the game and the draw in whole or in part without prior
|
||||
notice in the event of unforeseen circumstances. These
|
||||
circumstances include, but are not limited to, the appearance of a
|
||||
computer virus, a program error, unauthorized intervention by
|
||||
third parties, or mechanical or technical problems beyond the
|
||||
control and influence of the organizer.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The organizer reserves the right to terminate the prize draw at
|
||||
any time without prior notice. In this case, any outstanding
|
||||
prizes will be properly awarded.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
Should individual provisions of these terms and conditions of
|
||||
participation be or become invalid, inadmissible, or
|
||||
unenforceable, this shall not affect the validity of the remaining
|
||||
terms and conditions. In place of the invalid, inadmissible, or
|
||||
unenforceable clause, provisions shall be deemed to have been
|
||||
agreed upon that come as close as possible to the economic
|
||||
objectives.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
Furthermore, the <a
|
||||
href="/imprint"
|
||||
class="text-blue-700 hover:underline">Imprint</a
|
||||
>,
|
||||
<a href="/terms-of-use" class="text-blue-700 hover:underline">
|
||||
Terms of Use
|
||||
</a>
|
||||
and our
|
||||
<a href="/privacy-policy" class="text-blue-700 hover:underline">
|
||||
Privacy Policy
|
||||
</a>
|
||||
apply. The applicable law and jurisdiction for this prize draw shall
|
||||
be determined based on the participant's country of residence. In case
|
||||
of any legal disputes, the competent courts of the participant's country
|
||||
of residence shall have exclusive jurisdiction.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
The right of recourse to the courts is excluded.
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="form-control mt-5">
|
||||
<label class="label cursor-pointer flex flex-row">
|
||||
<input
|
||||
on:click={handleParticipation}
|
||||
checked={participationCheckbox}
|
||||
aria-describedby="helper-checkbox-text"
|
||||
type="checkbox"
|
||||
value=""
|
||||
class="w-6 h-6 bg-[#333333] border-slate-500 focus-none rounded ring-1"
|
||||
/>
|
||||
<span class="label-text text-white ml-3"
|
||||
>I accept the Terms and Conditions of Participation in the monthly
|
||||
portfolio tournament.</span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label cursor-pointer">
|
||||
<input
|
||||
on:click={handleAge}
|
||||
checked={ageCheckbox}
|
||||
aria-describedby="helper-checkbox-text"
|
||||
type="checkbox"
|
||||
value=""
|
||||
class="w-6 h-6 bg-[#333333] border-slate-500 focus-none rounded ring-1"
|
||||
/>
|
||||
<span class="label-text text-white ml-3 mr-auto"
|
||||
>I'm at least 18 years old.</span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{#if ageCheckbox && participationCheckbox && !isClicked}
|
||||
<form
|
||||
on:submit={createPortfolio}
|
||||
class="w-full max-w-lg m-auto pb-8 mt-10"
|
||||
>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn bg-[#fff] sm:hover:bg-gray-300 btn-md w-full rounded-lg m-auto text-white font-bold text-md"
|
||||
>
|
||||
Create Portfolio
|
||||
</button>
|
||||
</form>
|
||||
{:else}
|
||||
<div class="w-full max-w-lg m-auto pb-8 mt-10">
|
||||
<label
|
||||
class="opacity-[0.4] cursor-not-allowed btn bg-[#fff] btn-md w-full rounded-lg m-auto text-white font-bold text-md"
|
||||
>
|
||||
{#if !isClicked}
|
||||
Create Portfolio
|
||||
{:else}
|
||||
<div class="flex flex-row m-auto">
|
||||
<span class="loading loading-infinity"></span>
|
||||
<span class="text-white ml-2">Loading</span>
|
||||
</div>
|
||||
{/if}
|
||||
</label>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<label for="addPortfolio" class="absolute left-6 top-4 sm:hidden">
|
||||
<svg
|
||||
class="w-6 h-6 inline-block mb-0.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="#fff"
|
||||
d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"
|
||||
/></svg
|
||||
>
|
||||
<span class="text-white text-md font-medium"> Return </span>
|
||||
</label>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
<label for="addPortfolio" class="absolute left-6 top-4 sm:hidden">
|
||||
<svg class="w-6 h-6 inline-block mb-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"/></svg>
|
||||
<span class="text-white text-md font-medium">
|
||||
Return
|
||||
</span>
|
||||
</label>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
@ -174,7 +174,7 @@
|
||||
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/forecast/analyst`}
|
||||
class="rounded-md cursor-pointer w-11/12 py-2 h-full mt-6 text-lg text-center font-bold text-white m-auto hover:bg-purple-700 bg-purple-600 transition duration-100"
|
||||
class="rounded-md cursor-pointer w-11/12 py-2 h-full mt-6 text-lg text-center font-bold text-white m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
|
||||
>
|
||||
Analyst Ratings
|
||||
</a>
|
||||
|
||||
@ -162,7 +162,7 @@
|
||||
},
|
||||
lineStyle: {
|
||||
type: "dashed", // Set the line type to dashed
|
||||
color: "#FBCE3C",
|
||||
color: "#c2c7cf",
|
||||
},
|
||||
|
||||
showSymbol: false, // Show symbols for line plot points
|
||||
@ -176,7 +176,7 @@
|
||||
},
|
||||
lineStyle: {
|
||||
type: "dashed", // Set the line type to dashed
|
||||
color: "#FBCE3C",
|
||||
color: "#c2c7cf",
|
||||
},
|
||||
showSymbol: false, // Show symbols for line plot points
|
||||
},
|
||||
@ -506,7 +506,7 @@
|
||||
<!--
|
||||
<div class="mt-5 text-gray-100 text-sm sm:text-[1rem] sm:rounded-lg h-auto border border-slate-800 p-4">
|
||||
<svg class="w-5 h-5 inline-block mr-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"
|
||||
><path fill="#FBCE3C" 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
|
||||
><path fill="#fff" 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
|
||||
>
|
||||
For the current Fiscal Year we use available quarterly data. Complete annual data, used to compare against analyst estimates, is only finalized after the year ends.
|
||||
</div>
|
||||
|
||||
@ -1,28 +1,34 @@
|
||||
<script lang='ts'>
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
<script lang="ts">
|
||||
import { goto } from "$app/navigation";
|
||||
|
||||
export let data;
|
||||
|
||||
|
||||
function handleClick() {
|
||||
const label = document.getElementById('animated-label');
|
||||
label.classList.add('animate-bounce');
|
||||
const label = document.getElementById("animated-label");
|
||||
label.classList.add("animate-bounce");
|
||||
|
||||
goto('/community/create-post');
|
||||
goto("/community/create-post");
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<div class="sm:hidden fixed z-50 w-full h-16 max-w-3xl -right-5 bottom-5">
|
||||
<div class="h-full max-w-3xl mx-auto">
|
||||
<div class="h-full max-w-3xl mx-auto">
|
||||
<div class="flex items-center justify-end mr-10">
|
||||
<label id="animated-label" on:click={handleClick} class="inline-flex items-center justify-center w-14 h-14 font-medium bg-purple-600 bg-opacity-[0.8] rounded-full cursor-pointer">
|
||||
<svg class="w-4 h-4 text-white inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="m362.7 19.3l-48.4 48.4l130 130l48.4-48.4c25-25 25-65.5 0-90.5l-39.4-39.5c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2c-2.5 8.5-.2 17.6 6 23.8s15.3 8.5 23.7 6.1L151 475.7c14.1-4.2 27-11.8 37.4-22.2l233.3-233.2l-130-130z"/></svg>
|
||||
<label
|
||||
id="animated-label"
|
||||
on:click={handleClick}
|
||||
class="inline-flex items-center justify-center w-14 h-14 font-medium bg-[#fff] bg-opacity-[0.8] rounded-full cursor-pointer"
|
||||
>
|
||||
<svg
|
||||
class="w-4 h-4 text-white inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
><path
|
||||
fill="white"
|
||||
d="m362.7 19.3l-48.4 48.4l130 130l48.4-48.4c25-25 25-65.5 0-90.5l-39.4-39.5c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2c-2.5 8.5-.2 17.6 6 23.8s15.3 8.5 23.7 6.1L151 475.7c14.1-4.2 27-11.8 37.4-22.2l233.3-233.2l-130-130z"
|
||||
/></svg
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -83,10 +83,12 @@
|
||||
: ''} "
|
||||
>
|
||||
{#if activeIdx === i}
|
||||
<div class="absolute inset-0 rounded-md bg-purple-600"></div>
|
||||
<div class="absolute inset-0 rounded-md bg-[#fff]"></div>
|
||||
{/if}
|
||||
<span
|
||||
class="relative text-sm block font-medium duration-200 text-white"
|
||||
class="relative text-sm block font-semibold {activeIdx === i
|
||||
? 'text-black'
|
||||
: 'text-white'}"
|
||||
>
|
||||
{item.title}
|
||||
<svg
|
||||
@ -110,7 +112,7 @@
|
||||
<label
|
||||
class="{latestInfoDate(rawData?.date)
|
||||
? ''
|
||||
: 'hidden'} text-black bg-[#FBCE3C] mr-2 font-semibold not-italic text-xs rounded px-2 py-0.5"
|
||||
: 'hidden'} text-black bg-[#fff] mr-2 font-semibold not-italic text-xs rounded px-2 py-0.5"
|
||||
>New</label
|
||||
>
|
||||
Updated {rawData?.date}
|
||||
|
||||
@ -1,109 +1,117 @@
|
||||
<script lang='ts'>
|
||||
<script lang="ts">
|
||||
import { getImageURL, formatDate } from "$lib/utils";
|
||||
import toast from "svelte-french-toast";
|
||||
import {
|
||||
commentAdded,
|
||||
commentIdDeleted,
|
||||
screenWidth,
|
||||
replyCommentClicked,
|
||||
editCommentClicked,
|
||||
scrollToComment,
|
||||
} from "$lib/store";
|
||||
import TextEditor from "$lib/components/TextEditor.svelte";
|
||||
import { marked } from "marked";
|
||||
import { tick } from "svelte";
|
||||
|
||||
import {getImageURL, formatDate} from '$lib/utils';
|
||||
import toast from 'svelte-french-toast';
|
||||
import { commentAdded, commentIdDeleted, screenWidth, replyCommentClicked, editCommentClicked, scrollToComment } from '$lib/store';
|
||||
import TextEditor from '$lib/components/TextEditor.svelte';
|
||||
import { marked } from 'marked';
|
||||
import { tick } from 'svelte';
|
||||
|
||||
export let moderators
|
||||
export let moderators;
|
||||
export let comment;
|
||||
export let data;
|
||||
export let postId;
|
||||
export let opUserId;
|
||||
|
||||
export let upvoteButtonClicked
|
||||
export let downvoteButtonClicked
|
||||
export let upvoteCounter;
|
||||
export let downvoteCounter;
|
||||
export let userAlreadyVoted;
|
||||
export let upvoteButtonClicked;
|
||||
export let downvoteButtonClicked;
|
||||
export let upvoteCounter;
|
||||
export let downvoteCounter;
|
||||
export let userAlreadyVoted;
|
||||
|
||||
if (userAlreadyVoted) {
|
||||
upvoteButtonClicked =
|
||||
comment?.expand["alreadyVoted(comment)"]?.find(
|
||||
(item) => item?.user === data?.user?.id,
|
||||
)?.type === "upvote";
|
||||
downvoteButtonClicked =
|
||||
comment?.expand["alreadyVoted(comment)"]?.find(
|
||||
(item) => item?.user === data?.user?.id,
|
||||
)?.type === "downvote";
|
||||
} else {
|
||||
upvoteButtonClicked = false;
|
||||
downvoteButtonClicked = false;
|
||||
}
|
||||
|
||||
if (userAlreadyVoted) {
|
||||
upvoteButtonClicked = comment?.expand['alreadyVoted(comment)']?.find(item => item?.user === data?.user?.id)?.type === 'upvote';
|
||||
downvoteButtonClicked = comment?.expand['alreadyVoted(comment)']?.find(item => item?.user === data?.user?.id)?.type === 'downvote';
|
||||
} else {
|
||||
upvoteButtonClicked = false;
|
||||
downvoteButtonClicked = false;
|
||||
}
|
||||
function removeDuplicateClasses(str) {
|
||||
return str.replace(/class="([^"]*)"/g, (match, classAttr) => {
|
||||
return `class="${[...new Set(classAttr.split(" "))].join(" ")}"`;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
function removeDuplicateClasses(str) {
|
||||
return str.replace(/class="([^"]*)"/g, (match, classAttr) => {
|
||||
return `class="${[...new Set(classAttr.split(' '))].join(' ')}"`;
|
||||
});
|
||||
}
|
||||
|
||||
function addClassesToHtml(htmlString) {
|
||||
// Helper function to add a class to a specific tag
|
||||
function addClassToTag(tag, className) {
|
||||
function addClassesToHtml(htmlString) {
|
||||
// Helper function to add a class to a specific tag
|
||||
function addClassToTag(tag, className) {
|
||||
// Add class if the tag doesn't already have a class attribute
|
||||
const regex = new RegExp(`<${tag}(?![^>]*\\bclass=)([^>]*)>`, 'g');
|
||||
const regex = new RegExp(`<${tag}(?![^>]*\\bclass=)([^>]*)>`, "g");
|
||||
htmlString = htmlString.replace(regex, `<${tag} class="${className}"$1>`);
|
||||
|
||||
// Append the new class to tags that already have a class attribute, ensuring no duplicates
|
||||
const regexWithClass = new RegExp(`(<${tag}[^>]*\\bclass=["'][^"']*)(?!.*\\b${className}\\b)([^"']*)["']`, 'g');
|
||||
const regexWithClass = new RegExp(
|
||||
`(<${tag}[^>]*\\bclass=["'][^"']*)(?!.*\\b${className}\\b)([^"']*)["']`,
|
||||
"g",
|
||||
);
|
||||
htmlString = htmlString.replace(regexWithClass, `$1 ${className}$2"`);
|
||||
}
|
||||
}
|
||||
|
||||
// Add classes to headings
|
||||
addClassToTag('h1', 'text-lg');
|
||||
addClassToTag('h2', 'text-lg');
|
||||
addClassToTag('h3', 'text-lg');
|
||||
addClassToTag('h4', 'text-lg');
|
||||
addClassToTag('h5', 'text-lg');
|
||||
addClassToTag('h6', 'text-lg');
|
||||
// Add classes to headings
|
||||
addClassToTag("h1", "text-lg");
|
||||
addClassToTag("h2", "text-lg");
|
||||
addClassToTag("h3", "text-lg");
|
||||
addClassToTag("h4", "text-lg");
|
||||
addClassToTag("h5", "text-lg");
|
||||
addClassToTag("h6", "text-lg");
|
||||
|
||||
// Add classes to anchor tags
|
||||
addClassToTag('a', 'text-blue-400 hover:text-white underline');
|
||||
// Add classes to anchor tags
|
||||
addClassToTag("a", "text-blue-400 hover:text-white underline");
|
||||
|
||||
// Add classes to ordered lists
|
||||
addClassToTag('ol', 'list-decimal ml-10 text-sm');
|
||||
// Add classes to ordered lists
|
||||
addClassToTag("ol", "list-decimal ml-10 text-sm");
|
||||
|
||||
// Add classes to unordered lists
|
||||
addClassToTag('ul', 'list-disc ml-10 text-sm -mt-5');
|
||||
// Add classes to unordered lists
|
||||
addClassToTag("ul", "list-disc ml-10 text-sm -mt-5");
|
||||
|
||||
// Add classes to blockquotes and their paragraphs
|
||||
function addClassToBlockquote() {
|
||||
// Add classes to blockquotes and their paragraphs
|
||||
function addClassToBlockquote() {
|
||||
// Add class to blockquote
|
||||
htmlString = htmlString.replace(
|
||||
/<blockquote/g,
|
||||
'<blockquote class="pl-4 pr-4 rounded-lg bg-[#323232]"'
|
||||
/<blockquote/g,
|
||||
'<blockquote class="pl-4 pr-4 rounded-lg bg-[#323232]"',
|
||||
);
|
||||
|
||||
// Add class to p inside blockquote
|
||||
htmlString = htmlString.replace(
|
||||
/<blockquote([^>]*)>\s*<p/g,
|
||||
`<blockquote$1>\n<p class="text-sm font-medium leading-relaxed text-white"`
|
||||
/<blockquote([^>]*)>\s*<p/g,
|
||||
`<blockquote$1>\n<p class="text-sm font-medium leading-relaxed text-white"`,
|
||||
);
|
||||
}
|
||||
|
||||
addClassToBlockquote();
|
||||
|
||||
// Remove duplicate classes after all modifications
|
||||
htmlString = removeDuplicateClasses(htmlString);
|
||||
|
||||
return htmlString;
|
||||
}
|
||||
|
||||
addClassToBlockquote();
|
||||
const handleUpvote = async (event) => {
|
||||
event.preventDefault(); // prevent the default form submission behavior
|
||||
|
||||
// Remove duplicate classes after all modifications
|
||||
htmlString = removeDuplicateClasses(htmlString);
|
||||
const commentId = event.target.commentId.value;
|
||||
const postData = {
|
||||
postId: postId,
|
||||
commentId: commentId,
|
||||
userId: data?.user?.id,
|
||||
path: "upvote-comment",
|
||||
};
|
||||
|
||||
return htmlString;
|
||||
}
|
||||
|
||||
|
||||
|
||||
const handleUpvote = async (event) => {
|
||||
|
||||
event.preventDefault(); // prevent the default form submission behavior
|
||||
|
||||
const commentId = event.target.commentId.value;
|
||||
const postData = {
|
||||
'postId': postId,
|
||||
'commentId': commentId,
|
||||
'userId': data?.user?.id,
|
||||
'path': 'upvote-comment'
|
||||
};
|
||||
|
||||
upvoteButtonClicked = !upvoteButtonClicked;
|
||||
|
||||
upvoteButtonClicked = !upvoteButtonClicked;
|
||||
|
||||
if (upvoteButtonClicked) {
|
||||
if (downvoteButtonClicked) {
|
||||
@ -116,30 +124,27 @@ const handleUpvote = async (event) => {
|
||||
} else {
|
||||
upvoteCounter--;
|
||||
}
|
||||
const response = await fetch('/api/fastify-post-data', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
const response = await fetch("/api/fastify-post-data", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(postData)
|
||||
}); // make a POST request to the server with the FormData object
|
||||
|
||||
};
|
||||
body: JSON.stringify(postData),
|
||||
}); // make a POST request to the server with the FormData object
|
||||
};
|
||||
|
||||
const handleDownvote = async (event) => {
|
||||
event.preventDefault(); // prevent the default form submission behavior
|
||||
|
||||
const commentId = event.target.commentId.value;
|
||||
const postData = {
|
||||
commentId: commentId,
|
||||
userId: data?.user?.id,
|
||||
path: "downvote-comment",
|
||||
};
|
||||
|
||||
downvoteButtonClicked = !downvoteButtonClicked;
|
||||
|
||||
const handleDownvote = async (event) => {
|
||||
event.preventDefault(); // prevent the default form submission behavior
|
||||
|
||||
const commentId = event.target.commentId.value;
|
||||
const postData = {
|
||||
'commentId': commentId,
|
||||
'userId': data?.user?.id,
|
||||
'path': 'downvote-comment'
|
||||
};
|
||||
|
||||
downvoteButtonClicked = !downvoteButtonClicked;
|
||||
|
||||
|
||||
if (downvoteButtonClicked) {
|
||||
if (upvoteButtonClicked) {
|
||||
downvoteCounter += 1;
|
||||
@ -151,114 +156,95 @@ const handleDownvote = async (event) => {
|
||||
} else {
|
||||
downvoteCounter--;
|
||||
}
|
||||
|
||||
|
||||
const response = await fetch('/api/fastify-post-data', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
const response = await fetch("/api/fastify-post-data", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(postData)
|
||||
}); // make a POST request to the server with the FormData object
|
||||
|
||||
};
|
||||
|
||||
|
||||
let deleteCommentId = comment?.id
|
||||
|
||||
body: JSON.stringify(postData),
|
||||
}); // make a POST request to the server with the FormData object
|
||||
};
|
||||
|
||||
let deleteCommentId = comment?.id;
|
||||
|
||||
function isModerator(comment) {
|
||||
return moderators?.some(moderator => comment?.user === moderator?.user);
|
||||
return moderators?.some((moderator) => comment?.user === moderator?.user);
|
||||
}
|
||||
|
||||
|
||||
|
||||
function repeatedCharacters(str) {
|
||||
// This regex matches any character (.) followed by itself at least five times
|
||||
const regex = /(.)\1{10,}/;
|
||||
|
||||
// Test the string against the regex
|
||||
return regex?.test(str);
|
||||
// This regex matches any character (.) followed by itself at least five times
|
||||
const regex = /(.)\1{10,}/;
|
||||
|
||||
// Test the string against the regex
|
||||
return regex?.test(str);
|
||||
}
|
||||
|
||||
|
||||
|
||||
const handleDeleteComment = async () => {
|
||||
|
||||
|
||||
const postData = {
|
||||
'userId': data?.user?.id,
|
||||
'commentId': comment?.id,
|
||||
'commentUser': comment?.user,
|
||||
'path': 'delete-comment'
|
||||
const postData = {
|
||||
userId: data?.user?.id,
|
||||
commentId: comment?.id,
|
||||
commentUser: comment?.user,
|
||||
path: "delete-comment",
|
||||
};
|
||||
|
||||
const response = await fetch("/api/fastify-post-data", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(postData),
|
||||
}); // make a POST request to the server with the FormData object
|
||||
|
||||
const output = (await response.json())?.message;
|
||||
if (output === "success") {
|
||||
$commentIdDeleted = comment?.id;
|
||||
}
|
||||
|
||||
|
||||
|
||||
const response = await fetch('/api/fastify-post-data', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify(postData)
|
||||
}); // make a POST request to the server with the FormData object
|
||||
|
||||
const output = (await response.json())?.message;
|
||||
if (output === 'success')
|
||||
{
|
||||
$commentIdDeleted = comment?.id;
|
||||
|
||||
}
|
||||
|
||||
if (output === 'success') {
|
||||
toast.success('Comment deleted', {
|
||||
style: 'border-radius: 200px; background: #333; color: #fff;'
|
||||
|
||||
if (output === "success") {
|
||||
toast.success("Comment deleted", {
|
||||
style: "border-radius: 200px; background: #333; color: #fff;",
|
||||
});
|
||||
} else {
|
||||
toast.error('Something went wrong', {
|
||||
style: 'border-radius: 200px; background: #333; color: #fff;'
|
||||
} else {
|
||||
toast.error("Something went wrong", {
|
||||
style: "border-radius: 200px; background: #333; color: #fff;",
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
const handleReportComment = async () => {
|
||||
|
||||
toast.success('Comment reported.', {
|
||||
style: 'border-radius: 200px; background: #333; color: #fff'
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
toast.success("Comment reported.", {
|
||||
style: "border-radius: 200px; background: #333; color: #fff",
|
||||
});
|
||||
};
|
||||
|
||||
const toggle = (state) => {
|
||||
if (state === 'reply') {
|
||||
$replyCommentClicked[comment.id] = !$replyCommentClicked[comment.id]
|
||||
if (state === "reply") {
|
||||
$replyCommentClicked[comment.id] = !$replyCommentClicked[comment.id];
|
||||
$editCommentClicked[comment.id] = false;
|
||||
}
|
||||
else if (state === 'edit') {
|
||||
} else if (state === "edit") {
|
||||
$editCommentClicked[comment.id] = !$editCommentClicked[comment.id];
|
||||
$replyCommentClicked[comment.id] = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$replyCommentClicked[comment?.id] = false;
|
||||
$editCommentClicked[comment?.id] = false;
|
||||
|
||||
|
||||
$replyCommentClicked[comment?.id] = false
|
||||
$editCommentClicked[comment?.id] = false
|
||||
|
||||
|
||||
$: if ($scrollToComment?.length !== 0 && typeof window !== 'undefined') {
|
||||
$: if ($scrollToComment?.length !== 0 && typeof window !== "undefined") {
|
||||
// Wait for the DOM to update
|
||||
tick().then(() => {
|
||||
const commentElement = document.getElementById($scrollToComment);
|
||||
if (commentElement) {
|
||||
commentElement.scrollIntoView({ behavior: 'smooth', inline: 'nearest', block: "center"});
|
||||
commentElement.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
inline: "nearest",
|
||||
block: "center",
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
$: {
|
||||
if($commentAdded?.length !== 0) {
|
||||
@ -278,239 +264,335 @@ const handleDownvote = async (event) => {
|
||||
}
|
||||
|
||||
*/
|
||||
</script>
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<div class="comment border-l border-gray-500 mt-8">
|
||||
<div class="flex flex-row justify-start items-center -ml-4">
|
||||
<a href={'/community/user/'+comment?.expand?.user?.id} class="flex flex-row items-center justify-start">
|
||||
<label class="avatar w-7 h-7 flex-shrink-0 text-white text-xs sm:text-sm ml-1">
|
||||
<img class="flex-shrink-0 inline-block bg-slate-300 rounded-full"
|
||||
src={comment?.expand?.user?.avatar
|
||||
? getImageURL(comment?.expand?.user?.collectionId, comment?.expand?.user?.id, comment?.expand?.user?.avatar)
|
||||
: `https://avatar.vercel.sh/${comment?.expand?.user?.username}`}
|
||||
alt="User avatar" />
|
||||
</label>
|
||||
<span class="text-white ml-2 inline-block text-xs sm:text-sm">
|
||||
{comment?.expand?.user?.username}
|
||||
</span>
|
||||
{#if isModerator(comment)}
|
||||
<svg class="inline-block ml-1 w-3 h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#75d377" d="M256 32C174 69.06 121.38 86.46 32 96c0 77.59 5.27 133.36 25.29 184.51a348.86 348.86 0 0 0 71.43 112.41c49.6 52.66 104.17 80.4 127.28 87.08c23.11-6.68 77.68-34.42 127.28-87.08a348.86 348.86 0 0 0 71.43-112.41C474.73 229.36 480 173.59 480 96c-89.38-9.54-142-26.94-224-64Z"/></svg>
|
||||
{/if}
|
||||
{#if comment?.user === opUserId}
|
||||
<span class="text-[#756EFF] text-sm font-semibold ml-1">
|
||||
OP
|
||||
</span>
|
||||
{/if}
|
||||
<span class="text-white font-bold ml-1 mr-1">
|
||||
·
|
||||
</span>
|
||||
<span class="text-white text-xs">
|
||||
{formatDate(comment?.created)} ago
|
||||
</span>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="text-md text-slate-400 mb-1 pl-5 pt-3 whitespace-pre-wrap w-11/12 sm:w-5/6 ">
|
||||
|
||||
|
||||
<div id={comment?.id} class="text-sm text-[#D7DADC] rounded-lg {comment?.id === $scrollToComment ? 'pt-3 pl-3 pr-3 mb-5 bg-[#31304D]' : ''} whitespace-pre-line {repeatedCharacters(comment?.comment) === true ? 'break-all' : ''}">
|
||||
{#if !$editCommentClicked[comment?.id]}
|
||||
{@html addClassesToHtml(marked(comment?.comment))}
|
||||
{:else}
|
||||
<TextEditor
|
||||
data={data}
|
||||
postId={postId}
|
||||
commentId={comment?.id}
|
||||
inputValue={comment?.comment}
|
||||
placeholder={"Reply to the comment of @"+comment?.expand?.user?.username+"..."}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{#if comment?.image?.length !== 0}
|
||||
<div class="relative mr-auto -mt-5">
|
||||
<img
|
||||
src={getImageURL(comment?.collectionId, comment?.id, comment?.image)}
|
||||
class="w-auto max-w-36 max-h-[350px] sm:max-h-[550px] mr-auto"
|
||||
alt="comment Image"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex flex-col items-start w-full">
|
||||
<div class="pl-5 flex flex-row items-center {comment?.image?.length === 0 ? '-mt-8' : ''} ">
|
||||
<!--Start Voting-->
|
||||
<!--Start Upvote -->
|
||||
<form on:submit={handleUpvote}>
|
||||
<input type="hidden" name="commentId" value={comment?.id}>
|
||||
{#if !data?.user}
|
||||
<label for="userLogin" class="text-[#A6ADBB] cursor-pointer rounded-lg w-8 h-8 relative sm:hover:bg-[#333333] flex items-center justify-center">
|
||||
<svg class="rotate-180 w-4 h-4" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.171 512.171" xml:space="preserve"><path fill="currentColor" d="M479.046,283.925c-1.664-3.989-5.547-6.592-9.856-6.592H352.305V10.667C352.305,4.779,347.526,0,341.638,0H170.971 c-5.888,0-10.667,4.779-10.667,10.667v266.667H42.971c-4.309,0-8.192,2.603-9.856,6.571c-1.643,3.989-0.747,8.576,2.304,11.627 l212.8,213.504c2.005,2.005,4.715,3.136,7.552,3.136s5.547-1.131,7.552-3.115l213.419-213.504 C479.793,292.501,480.71,287.915,479.046,283.925z"></path></svg>
|
||||
</label>
|
||||
{:else}
|
||||
<button type="submit" class="{upvoteButtonClicked ? 'text-[#0076FE] bg-[#31304D]' : 'text-[#A6ADBB]'} cursor-pointer rounded-lg w-8 h-8 relative sm:hover:bg-[#333333] flex items-center justify-center">
|
||||
<svg class="rotate-180 w-4 h-4" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.171 512.171" xml:space="preserve"><path fill="currentColor" d="M479.046,283.925c-1.664-3.989-5.547-6.592-9.856-6.592H352.305V10.667C352.305,4.779,347.526,0,341.638,0H170.971 c-5.888,0-10.667,4.779-10.667,10.667v266.667H42.971c-4.309,0-8.192,2.603-9.856,6.571c-1.643,3.989-0.747,8.576,2.304,11.627 l212.8,213.504c2.005,2.005,4.715,3.136,7.552,3.136s5.547-1.131,7.552-3.115l213.419-213.504 C479.793,292.501,480.71,287.915,479.046,283.925z"></path></svg>
|
||||
</button >
|
||||
{/if}
|
||||
</form>
|
||||
<!--End Upvote-->
|
||||
<!--Start Downvote-->
|
||||
<span class="text-gray-200 text-sm ml-1.5 mr-1.5">
|
||||
{upvoteCounter - downvoteCounter }
|
||||
</span>
|
||||
<form on:submit={handleDownvote}>
|
||||
<input type="hidden" name="commentId" value={comment?.id} />
|
||||
{#if !data?.user}
|
||||
<label for="userLogin" class="mr-2 cursor-pointer rounded-lg w-8 h-8 relative sm:hover:bg-[#333333] flex items-center justify-center">
|
||||
<svg class="w-4 h-4 mt-0.5" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.171 512.171" xml:space="preserve"><path fill="currentColor" d="M479.046,283.925c-1.664-3.989-5.547-6.592-9.856-6.592H352.305V10.667C352.305,4.779,347.526,0,341.638,0H170.971 c-5.888,0-10.667,4.779-10.667,10.667v266.667H42.971c-4.309,0-8.192,2.603-9.856,6.571c-1.643,3.989-0.747,8.576,2.304,11.627 l212.8,213.504c2.005,2.005,4.715,3.136,7.552,3.136s5.547-1.131,7.552-3.115l213.419-213.504 C479.793,292.501,480.71,287.915,479.046,283.925z"></path></svg>
|
||||
</label>
|
||||
{:else}
|
||||
<button type="submit" class="{downvoteButtonClicked ? 'text-[#0076FE] bg-[#31304D]' : 'text-[#A6ADBB]'} mr-2 cursor-pointer rounded-lg w-8 h-8 relative sm:hover:bg-[#333333] flex items-center justify-center">
|
||||
<svg class="w-4 h-4 mt-0.5" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.171 512.171" xml:space="preserve"><path fill="currentColor" d="M479.046,283.925c-1.664-3.989-5.547-6.592-9.856-6.592H352.305V10.667C352.305,4.779,347.526,0,341.638,0H170.971 c-5.888,0-10.667,4.779-10.667,10.667v266.667H42.971c-4.309,0-8.192,2.603-9.856,6.571c-1.643,3.989-0.747,8.576,2.304,11.627 l212.8,213.504c2.005,2.005,4.715,3.136,7.552,3.136s5.547-1.131,7.552-3.115l213.419-213.504 C479.793,292.501,480.71,287.915,479.046,283.925z"></path></svg>
|
||||
</button>
|
||||
{/if}
|
||||
</form>
|
||||
<!--End Downvote-->
|
||||
<!--End Voting-->
|
||||
|
||||
<label class="mr-3 cursor-pointer text-[12.5px] font-bold text-[#8C8C8C]" for={!data?.user ? 'userLogin' : ''} on:click={() => toggle('reply')}>
|
||||
Reply
|
||||
</label>
|
||||
|
||||
{#if data?.user?.id === comment?.expand?.user?.id}
|
||||
<label class="mr-3 cursor-pointer text-[12.5px] font-bold text-[#8C8C8C]" for={!data?.user ? 'userLogin' : ''} on:click={() => toggle('edit')}>
|
||||
Edit
|
||||
</label>
|
||||
{/if}
|
||||
|
||||
{#if data?.user?.id === comment?.expand?.user?.id || data?.user?.id === moderators?.at(0).user}
|
||||
<label for={'delete'+deleteCommentId} class="cursor-pointer text-[12.5px] font-bold text-[#8C8C8C]">
|
||||
Delete
|
||||
</label>
|
||||
{/if}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="pl-8 w-full">
|
||||
|
||||
{#if $replyCommentClicked[comment?.id]}
|
||||
<div class="mt-3 -ml-3">
|
||||
{#if data?.user}
|
||||
<TextEditor
|
||||
data={data}
|
||||
postId={postId}
|
||||
commentId={comment?.id}
|
||||
placeholder={"Reply to the comment of @"+comment?.expand?.user?.username+"..."}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{#if comment?.children}
|
||||
<div class="ml-2">
|
||||
{#each comment.children as comment}
|
||||
<svelte:self
|
||||
{moderators}
|
||||
{comment}
|
||||
{data}
|
||||
{postId}
|
||||
{opUserId}
|
||||
upvoteCounter={comment?.upvote}
|
||||
downvoteCounter={comment?.downvote}
|
||||
userAlreadyVoted={comment?.expand['alreadyVoted(comment)']?.some(item => item?.user === data?.user?.id)}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="comment border-l border-gray-500 mt-8">
|
||||
<div class="flex flex-row justify-start items-center -ml-4">
|
||||
<a
|
||||
href={"/community/user/" + comment?.expand?.user?.id}
|
||||
class="flex flex-row items-center justify-start"
|
||||
>
|
||||
<label
|
||||
class="avatar w-7 h-7 flex-shrink-0 text-white text-xs sm:text-sm ml-1"
|
||||
>
|
||||
<img
|
||||
class="flex-shrink-0 inline-block bg-slate-300 rounded-full"
|
||||
src={comment?.expand?.user?.avatar
|
||||
? getImageURL(
|
||||
comment?.expand?.user?.collectionId,
|
||||
comment?.expand?.user?.id,
|
||||
comment?.expand?.user?.avatar,
|
||||
)
|
||||
: `https://avatar.vercel.sh/${comment?.expand?.user?.username}`}
|
||||
alt="User avatar"
|
||||
/>
|
||||
</label>
|
||||
<span class="text-white ml-2 inline-block text-xs sm:text-sm">
|
||||
{comment?.expand?.user?.username}
|
||||
</span>
|
||||
{#if isModerator(comment)}
|
||||
<svg
|
||||
class="inline-block ml-1 w-3 h-3"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
><path
|
||||
fill="#75d377"
|
||||
d="M256 32C174 69.06 121.38 86.46 32 96c0 77.59 5.27 133.36 25.29 184.51a348.86 348.86 0 0 0 71.43 112.41c49.6 52.66 104.17 80.4 127.28 87.08c23.11-6.68 77.68-34.42 127.28-87.08a348.86 348.86 0 0 0 71.43-112.41C474.73 229.36 480 173.59 480 96c-89.38-9.54-142-26.94-224-64Z"
|
||||
/></svg
|
||||
>
|
||||
{/if}
|
||||
{#if comment?.user === opUserId}
|
||||
<span class="text-[#756EFF] text-sm font-semibold ml-1"> OP </span>
|
||||
{/if}
|
||||
<span class="text-white font-bold ml-1 mr-1"> · </span>
|
||||
<span class="text-white text-xs">
|
||||
{formatDate(comment?.created)} ago
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<!--Start Delete Modal-->
|
||||
<input type="checkbox" id={'delete'+deleteCommentId} class="modal-toggle" />
|
||||
|
||||
<dialog id={'delete'+deleteCommentId} class="modal modal-bottom sm:modal-middle border border-slate-800">
|
||||
|
||||
<label for={'delete'+deleteCommentId} class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.05]"></label>
|
||||
|
||||
<div class="modal-box bg-[#09090B] p-5 border border-slate-600 shadow-none" >
|
||||
|
||||
<h3 class="font-bold text-md sm:text-lg sm:mb-10 text-white mt-5">
|
||||
Are you sure you want to delete the comment?
|
||||
</h3>
|
||||
|
||||
<div class="modal-action pb-4">
|
||||
<label for={'delete'+deleteCommentId} class="cursor-pointer text-sm px-3 py-3 rounded-lg m-auto text-white mr-5 bg-[#646464]">
|
||||
No, cancel
|
||||
</label>
|
||||
<label on:click={handleDeleteComment} for={'delete'+deleteCommentId} class="cursor-pointer text-sm px-3 py-3 rounded-lg m-auto text-white mr-5 bg-purple-600">
|
||||
Yes, I'm sure
|
||||
</label>
|
||||
|
||||
</div>
|
||||
<div
|
||||
class="text-md text-slate-400 mb-1 pl-5 pt-3 whitespace-pre-wrap w-11/12 sm:w-5/6"
|
||||
>
|
||||
<div
|
||||
id={comment?.id}
|
||||
class="text-sm text-[#D7DADC] rounded-lg {comment?.id === $scrollToComment
|
||||
? 'pt-3 pl-3 pr-3 mb-5 bg-[#31304D]'
|
||||
: ''} whitespace-pre-line {repeatedCharacters(comment?.comment) === true
|
||||
? 'break-all'
|
||||
: ''}"
|
||||
>
|
||||
{#if !$editCommentClicked[comment?.id]}
|
||||
{@html addClassesToHtml(marked(comment?.comment))}
|
||||
{:else}
|
||||
<TextEditor
|
||||
{data}
|
||||
{postId}
|
||||
commentId={comment?.id}
|
||||
inputValue={comment?.comment}
|
||||
placeholder={"Reply to the comment of @" +
|
||||
comment?.expand?.user?.username +
|
||||
"..."}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{#if comment?.image?.length !== 0}
|
||||
<div class="relative mr-auto -mt-5">
|
||||
<img
|
||||
src={getImageURL(comment?.collectionId, comment?.id, comment?.image)}
|
||||
class="w-auto max-w-36 max-h-[350px] sm:max-h-[550px] mr-auto"
|
||||
alt="comment Image"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-start w-full">
|
||||
<div
|
||||
class="pl-5 flex flex-row items-center {comment?.image?.length === 0
|
||||
? '-mt-8'
|
||||
: ''} "
|
||||
>
|
||||
<!--Start Voting-->
|
||||
<!--Start Upvote -->
|
||||
<form on:submit={handleUpvote}>
|
||||
<input type="hidden" name="commentId" value={comment?.id} />
|
||||
{#if !data?.user}
|
||||
<label
|
||||
for="userLogin"
|
||||
class="text-[#A6ADBB] cursor-pointer rounded-lg w-8 h-8 relative sm:hover:bg-[#333333] flex items-center justify-center"
|
||||
>
|
||||
<svg
|
||||
class="rotate-180 w-4 h-4"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512.171 512.171"
|
||||
xml:space="preserve"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M479.046,283.925c-1.664-3.989-5.547-6.592-9.856-6.592H352.305V10.667C352.305,4.779,347.526,0,341.638,0H170.971 c-5.888,0-10.667,4.779-10.667,10.667v266.667H42.971c-4.309,0-8.192,2.603-9.856,6.571c-1.643,3.989-0.747,8.576,2.304,11.627 l212.8,213.504c2.005,2.005,4.715,3.136,7.552,3.136s5.547-1.131,7.552-3.115l213.419-213.504 C479.793,292.501,480.71,287.915,479.046,283.925z"
|
||||
></path></svg
|
||||
>
|
||||
</label>
|
||||
{:else}
|
||||
<button
|
||||
type="submit"
|
||||
class="{upvoteButtonClicked
|
||||
? 'text-[#0076FE] bg-[#31304D]'
|
||||
: 'text-[#A6ADBB]'} cursor-pointer rounded-lg w-8 h-8 relative sm:hover:bg-[#333333] flex items-center justify-center"
|
||||
>
|
||||
<svg
|
||||
class="rotate-180 w-4 h-4"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512.171 512.171"
|
||||
xml:space="preserve"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M479.046,283.925c-1.664-3.989-5.547-6.592-9.856-6.592H352.305V10.667C352.305,4.779,347.526,0,341.638,0H170.971 c-5.888,0-10.667,4.779-10.667,10.667v266.667H42.971c-4.309,0-8.192,2.603-9.856,6.571c-1.643,3.989-0.747,8.576,2.304,11.627 l212.8,213.504c2.005,2.005,4.715,3.136,7.552,3.136s5.547-1.131,7.552-3.115l213.419-213.504 C479.793,292.501,480.71,287.915,479.046,283.925z"
|
||||
></path></svg
|
||||
>
|
||||
</button>
|
||||
{/if}
|
||||
</form>
|
||||
<!--End Upvote-->
|
||||
<!--Start Downvote-->
|
||||
<span class="text-gray-200 text-sm ml-1.5 mr-1.5">
|
||||
{upvoteCounter - downvoteCounter}
|
||||
</span>
|
||||
<form on:submit={handleDownvote}>
|
||||
<input type="hidden" name="commentId" value={comment?.id} />
|
||||
{#if !data?.user}
|
||||
<label
|
||||
for="userLogin"
|
||||
class="mr-2 cursor-pointer rounded-lg w-8 h-8 relative sm:hover:bg-[#333333] flex items-center justify-center"
|
||||
>
|
||||
<svg
|
||||
class="w-4 h-4 mt-0.5"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512.171 512.171"
|
||||
xml:space="preserve"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M479.046,283.925c-1.664-3.989-5.547-6.592-9.856-6.592H352.305V10.667C352.305,4.779,347.526,0,341.638,0H170.971 c-5.888,0-10.667,4.779-10.667,10.667v266.667H42.971c-4.309,0-8.192,2.603-9.856,6.571c-1.643,3.989-0.747,8.576,2.304,11.627 l212.8,213.504c2.005,2.005,4.715,3.136,7.552,3.136s5.547-1.131,7.552-3.115l213.419-213.504 C479.793,292.501,480.71,287.915,479.046,283.925z"
|
||||
></path></svg
|
||||
>
|
||||
</label>
|
||||
{:else}
|
||||
<button
|
||||
type="submit"
|
||||
class="{downvoteButtonClicked
|
||||
? 'text-[#0076FE] bg-[#31304D]'
|
||||
: 'text-[#A6ADBB]'} mr-2 cursor-pointer rounded-lg w-8 h-8 relative sm:hover:bg-[#333333] flex items-center justify-center"
|
||||
>
|
||||
<svg
|
||||
class="w-4 h-4 mt-0.5"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512.171 512.171"
|
||||
xml:space="preserve"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M479.046,283.925c-1.664-3.989-5.547-6.592-9.856-6.592H352.305V10.667C352.305,4.779,347.526,0,341.638,0H170.971 c-5.888,0-10.667,4.779-10.667,10.667v266.667H42.971c-4.309,0-8.192,2.603-9.856,6.571c-1.643,3.989-0.747,8.576,2.304,11.627 l212.8,213.504c2.005,2.005,4.715,3.136,7.552,3.136s5.547-1.131,7.552-3.115l213.419-213.504 C479.793,292.501,480.71,287.915,479.046,283.925z"
|
||||
></path></svg
|
||||
>
|
||||
</button>
|
||||
{/if}
|
||||
</form>
|
||||
<!--End Downvote-->
|
||||
<!--End Voting-->
|
||||
|
||||
<label
|
||||
class="mr-3 cursor-pointer text-[12.5px] font-bold text-[#8C8C8C]"
|
||||
for={!data?.user ? "userLogin" : ""}
|
||||
on:click={() => toggle("reply")}
|
||||
>
|
||||
Reply
|
||||
</label>
|
||||
|
||||
{#if data?.user?.id === comment?.expand?.user?.id}
|
||||
<label
|
||||
class="mr-3 cursor-pointer text-[12.5px] font-bold text-[#8C8C8C]"
|
||||
for={!data?.user ? "userLogin" : ""}
|
||||
on:click={() => toggle("edit")}
|
||||
>
|
||||
Edit
|
||||
</label>
|
||||
{/if}
|
||||
|
||||
{#if data?.user?.id === comment?.expand?.user?.id || data?.user?.id === moderators?.at(0).user}
|
||||
<label
|
||||
for={"delete" + deleteCommentId}
|
||||
class="cursor-pointer text-[12.5px] font-bold text-[#8C8C8C]"
|
||||
>
|
||||
Delete
|
||||
</label>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="pl-8 w-full">
|
||||
{#if $replyCommentClicked[comment?.id]}
|
||||
<div class="mt-3 -ml-3">
|
||||
{#if data?.user}
|
||||
<TextEditor
|
||||
{data}
|
||||
{postId}
|
||||
commentId={comment?.id}
|
||||
placeholder={"Reply to the comment of @" +
|
||||
comment?.expand?.user?.username +
|
||||
"..."}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</dialog>
|
||||
<!--End Delete Modal-->
|
||||
|
||||
|
||||
|
||||
<!--Start Delete Modal-->
|
||||
<input type="checkbox" id="reportComment" class="modal-toggle" />
|
||||
|
||||
<dialog id="reportComment" class="modal modal-bottom sm:modal-middle">
|
||||
|
||||
|
||||
<div class="modal-box" >
|
||||
<label for="reportComment" class="{$screenWidth < 640 ? 'hidden' : ''} btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</label>
|
||||
|
||||
<h3 class="font-bold text-md sm:text-lg sm:mb-10">
|
||||
Are you sure you want to report the comment?
|
||||
</h3>
|
||||
|
||||
<div class="modal-action">
|
||||
<label for="reportComment" class="btn text-xs text-white mr-5">
|
||||
No, cancel
|
||||
</label>
|
||||
<label on:click={handleReportComment} for="reportComment" class="btn bg-red-700 hover:bg-red-800 text-xs text-white mr-5">
|
||||
Yes, I'm sure
|
||||
</label>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
<!--End Delete Modal-->
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if comment?.children}
|
||||
<div class="ml-2">
|
||||
{#each comment.children as comment}
|
||||
<svelte:self
|
||||
{moderators}
|
||||
{comment}
|
||||
{data}
|
||||
{postId}
|
||||
{opUserId}
|
||||
upvoteCounter={comment?.upvote}
|
||||
downvoteCounter={comment?.downvote}
|
||||
userAlreadyVoted={comment?.expand["alreadyVoted(comment)"]?.some(
|
||||
(item) => item?.user === data?.user?.id,
|
||||
)}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!--Start Delete Modal-->
|
||||
<input type="checkbox" id={"delete" + deleteCommentId} class="modal-toggle" />
|
||||
|
||||
<dialog
|
||||
id={"delete" + deleteCommentId}
|
||||
class="modal modal-bottom sm:modal-middle border border-slate-800"
|
||||
>
|
||||
<label
|
||||
for={"delete" + deleteCommentId}
|
||||
class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.05]"
|
||||
></label>
|
||||
|
||||
<div class="modal-box bg-[#09090B] p-5 border border-slate-600 shadow-none">
|
||||
<h3 class="font-bold text-md sm:text-lg sm:mb-10 text-white mt-5">
|
||||
Are you sure you want to delete the comment?
|
||||
</h3>
|
||||
|
||||
<div class="modal-action pb-4">
|
||||
<label
|
||||
for={"delete" + deleteCommentId}
|
||||
class="cursor-pointer text-sm px-3 py-3 rounded-lg m-auto text-white mr-5 bg-[#646464]"
|
||||
>
|
||||
No, cancel
|
||||
</label>
|
||||
<label
|
||||
on:click={handleDeleteComment}
|
||||
for={"delete" + deleteCommentId}
|
||||
class="cursor-pointer text-sm px-3 py-3 rounded-lg m-auto text-white mr-5 bg-[#fff]"
|
||||
>
|
||||
Yes, I'm sure
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
<!--End Delete Modal-->
|
||||
|
||||
<!--Start Delete Modal-->
|
||||
<input type="checkbox" id="reportComment" class="modal-toggle" />
|
||||
|
||||
<dialog id="reportComment" class="modal modal-bottom sm:modal-middle">
|
||||
<div class="modal-box">
|
||||
<label
|
||||
for="reportComment"
|
||||
class="{$screenWidth < 640
|
||||
? 'hidden'
|
||||
: ''} btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</label
|
||||
>
|
||||
|
||||
<h3 class="font-bold text-md sm:text-lg sm:mb-10">
|
||||
Are you sure you want to report the comment?
|
||||
</h3>
|
||||
|
||||
<div class="modal-action">
|
||||
<label for="reportComment" class="btn text-xs text-white mr-5">
|
||||
No, cancel
|
||||
</label>
|
||||
<label
|
||||
on:click={handleReportComment}
|
||||
for="reportComment"
|
||||
class="btn bg-red-700 hover:bg-red-800 text-xs text-white mr-5"
|
||||
>
|
||||
Yes, I'm sure
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<!--End Delete Modal-->
|
||||
|
||||
<style>
|
||||
.comment {
|
||||
margin-inline-start: 1rem;
|
||||
}
|
||||
.comment.lines {
|
||||
position: relative;
|
||||
padding-inline-start: 1rem;
|
||||
}
|
||||
|
||||
/* Media query for mobile devices */
|
||||
@media (max-width: 640px) {
|
||||
.comment {
|
||||
margin-inline-start: 1rem;
|
||||
margin-inline-start: 0.5rem;
|
||||
}
|
||||
.comment.lines {
|
||||
position: relative;
|
||||
padding-inline-start: 1rem;
|
||||
padding-inline-start: 0.5rem;
|
||||
}
|
||||
|
||||
/* Media query for mobile devices */
|
||||
@media (max-width: 640px) {
|
||||
.comment {
|
||||
margin-inline-start: 0.5rem;
|
||||
}
|
||||
.comment.lines {
|
||||
padding-inline-start: 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -347,7 +347,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -1,91 +1,122 @@
|
||||
<script lang="ts">
|
||||
import { etfTicker, screenWidth } from "$lib/store";
|
||||
import { goto } from "$app/navigation";
|
||||
|
||||
import {etfTicker, screenWidth} from '$lib/store';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
export let dividendList;
|
||||
|
||||
let dividendHistoryList = [];
|
||||
let dividendYield;
|
||||
|
||||
$: {
|
||||
if($etfTicker && typeof window !== 'undefined')
|
||||
{
|
||||
dividendHistoryList = dividendList?.history;
|
||||
export let dividendList;
|
||||
|
||||
dividendYield = dividendList?.dividendYield;
|
||||
let dividendHistoryList = [];
|
||||
let dividendYield;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<!--Start Similar Stocks Card -->
|
||||
|
||||
<div class="space-y-3 lg:pt-5 lg:{dividendHistoryList?.length !== 0 ? '' : 'hidden'}">
|
||||
|
||||
<div class="sm:rounded-lg shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px]">
|
||||
|
||||
<div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">
|
||||
<div class="flex flex-row items-center w-full ml-2 pb-2 p-3">
|
||||
<span class="font-bold text-white text-2xl">
|
||||
Dividends
|
||||
</span>
|
||||
<span class="text-white font-semibold ml-auto text-[1rem]">
|
||||
Dividend Yield {dividendYield ?? '0'}%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{#if dividendList?.history?.at(0)?.length !== 0}
|
||||
|
||||
|
||||
|
||||
<div class="flex justify-start items-center w-full m-auto pl-2">
|
||||
<table class="table lg:table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-white font-semibold text-sm text-start bg-[#000] lg:bg-[#09090B]">Ex-Dividend</th>
|
||||
<th class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#09090B]">Payment Date</th>
|
||||
<th class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#09090B]">Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
$: {
|
||||
if ($etfTicker && typeof window !== "undefined") {
|
||||
dividendHistoryList = dividendList?.history;
|
||||
|
||||
<tbody>
|
||||
{#each dividendHistoryList?.slice(0,5) as item}
|
||||
<tr class="text-white bg-[#000] lg:bg-[#09090B] border-b border-[#000] lg:border-[#27272A]">
|
||||
<td class="text-start text-sm text-white font-medium">
|
||||
{new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
||||
</td>
|
||||
|
||||
|
||||
<td class="text-end text-sm text-white font-medium">
|
||||
{item?.paymentDate?.length !== 0 ? new Date(item?.paymentDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'}
|
||||
</td>
|
||||
dividendYield = dividendList?.dividendYield;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<td class="text-end text-sm text-white font-medium">
|
||||
${item?.adjDividend?.toFixed(2)}
|
||||
</td>
|
||||
<!--Start Similar Stocks Card -->
|
||||
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div
|
||||
class="space-y-3 lg:pt-5 lg:{dividendHistoryList?.length !== 0
|
||||
? ''
|
||||
: 'hidden'}"
|
||||
>
|
||||
<div
|
||||
class="sm:rounded-lg shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <=
|
||||
800
|
||||
? 'w-screen pt-16'
|
||||
: ''} md:w-[420px] xl:w-[450px]"
|
||||
>
|
||||
<div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">
|
||||
<div class="flex flex-row items-center w-full ml-2 pb-2 p-3">
|
||||
<span class="font-bold text-white text-2xl"> Dividends </span>
|
||||
<span class="text-white font-semibold ml-auto text-[1rem]">
|
||||
Dividend Yield {dividendYield ?? "0"}%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<label for="dividendModal" on:click={() => goto(`/etf/${$etfTicker}/dividends`)} class="rounded-lg cursor-pointer w-11/12 md:w-3/4 lg:w-11/12 py-2 h-full mt-8 lg:mt-6 text-[1rem] text-center font-semibold text-white m-auto hover:bg-purple-700 bg-purple-600 transition duration-100 ease-in">
|
||||
View Dividend History
|
||||
</label>
|
||||
|
||||
{:else}
|
||||
<h2 class="mt-20 justify-center items-center text-3xl font-medium text-slate-700 mb-20 m-auto">
|
||||
No data available
|
||||
<svg class="w-10 lg:w-12 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#334155" d="M18.68 12.32a4.49 4.49 0 0 0-6.36.01a4.49 4.49 0 0 0 0 6.36a4.508 4.508 0 0 0 5.57.63L21 22.39L22.39 21l-3.09-3.11c1.13-1.77.87-4.09-.62-5.57m-1.41 4.95c-.98.98-2.56.97-3.54 0c-.97-.98-.97-2.56.01-3.54c.97-.97 2.55-.97 3.53 0c.97.98.97 2.56 0 3.54M10.9 20.1a6.527 6.527 0 0 1-1.48-2.32C6.27 17.25 4 15.76 4 14v3c0 2.21 3.58 4 8 4c-.4-.26-.77-.56-1.1-.9M4 9v3c0 1.68 2.07 3.12 5 3.7v-.2c0-.93.2-1.85.58-2.69C6.34 12.3 4 10.79 4 9m8-6C7.58 3 4 4.79 4 7c0 2 3 3.68 6.85 4h.05c1.2-1.26 2.86-2 4.6-2c.91 0 1.81.19 2.64.56A3.215 3.215 0 0 0 20 7c0-2.21-3.58-4-8-4Z"/></svg>
|
||||
</h2>
|
||||
{/if}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--End Similar Stocks Card -->
|
||||
|
||||
{#if dividendList?.history?.at(0)?.length !== 0}
|
||||
<div class="flex justify-start items-center w-full m-auto pl-2">
|
||||
<table
|
||||
class="table lg:table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="text-white font-semibold text-sm text-start bg-[#000] lg:bg-[#09090B]"
|
||||
>Ex-Dividend</th
|
||||
>
|
||||
<th
|
||||
class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#09090B]"
|
||||
>Payment Date</th
|
||||
>
|
||||
<th
|
||||
class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#09090B]"
|
||||
>Amount</th
|
||||
>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{#each dividendHistoryList?.slice(0, 5) as item}
|
||||
<tr
|
||||
class="text-white bg-[#000] lg:bg-[#09090B] border-b border-[#000] lg:border-[#27272A]"
|
||||
>
|
||||
<td class="text-start text-sm text-white font-medium">
|
||||
{new Date(item?.date)?.toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
daySuffix: "2-digit",
|
||||
})}
|
||||
</td>
|
||||
|
||||
<td class="text-end text-sm text-white font-medium">
|
||||
{item?.paymentDate?.length !== 0
|
||||
? new Date(item?.paymentDate)?.toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
daySuffix: "2-digit",
|
||||
})
|
||||
: "n/a"}
|
||||
</td>
|
||||
|
||||
<td class="text-end text-sm text-white font-medium">
|
||||
${item?.adjDividend?.toFixed(2)}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<label
|
||||
for="dividendModal"
|
||||
on:click={() => goto(`/etf/${$etfTicker}/dividends`)}
|
||||
class="rounded-lg cursor-pointer w-11/12 md:w-3/4 lg:w-11/12 py-2 h-full mt-8 lg:mt-6 text-[1rem] text-center font-semibold text-white m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100 ease-in"
|
||||
>
|
||||
View Dividend History
|
||||
</label>
|
||||
{:else}
|
||||
<h2
|
||||
class="mt-20 justify-center items-center text-3xl font-medium text-slate-700 mb-20 m-auto"
|
||||
>
|
||||
No data available
|
||||
<svg
|
||||
class="w-10 lg:w-12 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="#334155"
|
||||
d="M18.68 12.32a4.49 4.49 0 0 0-6.36.01a4.49 4.49 0 0 0 0 6.36a4.508 4.508 0 0 0 5.57.63L21 22.39L22.39 21l-3.09-3.11c1.13-1.77.87-4.09-.62-5.57m-1.41 4.95c-.98.98-2.56.97-3.54 0c-.97-.98-.97-2.56.01-3.54c.97-.97 2.55-.97 3.53 0c.97.98.97 2.56 0 3.54M10.9 20.1a6.527 6.527 0 0 1-1.48-2.32C6.27 17.25 4 15.76 4 14v3c0 2.21 3.58 4 8 4c-.4-.26-.77-.56-1.1-.9M4 9v3c0 1.68 2.07 3.12 5 3.7v-.2c0-.93.2-1.85.58-2.69C6.34 12.3 4 10.79 4 9m8-6C7.58 3 4 4.79 4 7c0 2 3 3.68 6.85 4h.05c1.2-1.26 2.86-2 4.6-2c.91 0 1.81.19 2.64.56A3.215 3.215 0 0 0 20 7c0-2.21-3.58-4-8-4Z"
|
||||
/></svg
|
||||
>
|
||||
</h2>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--End Similar Stocks Card -->
|
||||
|
||||
@ -82,7 +82,7 @@
|
||||
<div class="fixed z-[100] bottom-8 sm:bottom-10 right-8 sm:right-16">
|
||||
<label
|
||||
for="feedbackInfo"
|
||||
class="inline-flex items-center justify-center w-12 h-12 sm:w-full sm:h-10 font-semibold bg-gray-700 sm:bg-[#FBCE3C] ml-1 mr-0 sm:mr-2 rounded-full cursor-pointer"
|
||||
class="inline-flex items-center justify-center w-12 h-12 sm:w-full sm:h-10 font-semibold bg-gray-700 sm:bg-[#fff] ml-1 mr-0 sm:mr-2 rounded-full cursor-pointer"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@ -185,7 +185,7 @@
|
||||
|
||||
<button
|
||||
on:click={() => sendFeedback()}
|
||||
class="mb-4 px-3 py-2 bg-[#FBCE3C] sm:hover:bg-[#e8b305] {rating?.length !==
|
||||
class="mb-4 px-3 py-2 bg-[#fff] sm:hover:bg-gray-300 {rating?.length !==
|
||||
0 && inputValue?.length !== 0
|
||||
? 'opacity-100 cursor-pointer'
|
||||
: 'opacity-60 cursor-not-allowed'} w-11/12 rounded-lg m-auto text-black font-semibold text-md"
|
||||
|
||||
@ -1,34 +1,65 @@
|
||||
<script lang='ts'>
|
||||
|
||||
<script lang="ts">
|
||||
let discordURL = import.meta.env.VITE_DISCORD_URL;
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="bg-[#09090B] border-t border-slate-800 z-20 sm:z-50 relative bottom-0 w-full sm:px-10 m-auto">
|
||||
<!--Footer-->
|
||||
<footer
|
||||
class="bg-[#09090B] border-t border-slate-800 z-20 sm:z-50 relative bottom-0 w-full sm:px-10 m-auto"
|
||||
>
|
||||
<div class="container mx-auto px-3">
|
||||
|
||||
<div class="w-full flex flex-col md:flex-row py-6">
|
||||
<div class="flex-1 mb-8">
|
||||
<div class="flex flex-row items-center mt-4">
|
||||
|
||||
|
||||
<a href={discordURL} rel="noopener noreferrer" target="_blank" class="flex flex-row items-center">
|
||||
<svg class="w-6 h-6 ml-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02zM8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12zm6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12z"/></svg>
|
||||
<a
|
||||
href={discordURL}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
class="flex flex-row items-center"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 ml-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="white"
|
||||
d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02zM8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12zm6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12z"
|
||||
/></svg
|
||||
>
|
||||
</a>
|
||||
|
||||
|
||||
<a href="https://twitter.com/intent/follow?screen_name=stocknear" rel="noopener noreferrer" target="_blank" class="flex flex-row items-center">
|
||||
<svg class="w-5 h-5 ml-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M18.205 2.25h3.308l-7.227 8.26l8.502 11.24H16.13l-5.214-6.817L4.95 21.75H1.64l7.73-8.835L1.215 2.25H8.04l4.713 6.231l5.45-6.231Zm-1.161 17.52h1.833L7.045 4.126H5.078L17.044 19.77Z"/></svg>
|
||||
</a>
|
||||
|
||||
<a href="https://github.com/stocknear" rel="noopener noreferrer" target="_blank" class="flex flex-row items-center ml-3">
|
||||
<svg class="w-6 h-6 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/></svg>
|
||||
<a
|
||||
href="https://twitter.com/intent/follow?screen_name=stocknear"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
class="flex flex-row items-center"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 ml-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="white"
|
||||
d="M18.205 2.25h3.308l-7.227 8.26l8.502 11.24H16.13l-5.214-6.817L4.95 21.75H1.64l7.73-8.835L1.215 2.25H8.04l4.713 6.231l5.45-6.231Zm-1.161 17.52h1.833L7.045 4.126H5.078L17.044 19.77Z"
|
||||
/></svg
|
||||
>
|
||||
</a>
|
||||
|
||||
|
||||
<a
|
||||
href="https://github.com/stocknear"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
class="flex flex-row items-center ml-3"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 ml-1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="white"
|
||||
d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
|
||||
/></svg
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
@ -38,22 +69,29 @@
|
||||
</span>
|
||||
<span class="relative flex h-3 w-3 ml-2">
|
||||
<span class="absolute inline-flex h-full w-full rounded-full"></span>
|
||||
<span class="relative inline-flex rounded-full h-3 w-3 bg-purple-600"></span>
|
||||
<span class="relative inline-flex rounded-full h-3 w-3 bg-[#fff]"></span>
|
||||
</span>
|
||||
</a>
|
||||
-->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex-1 mb-2 sm:mb-0">
|
||||
<p class="uppercase text-slate-100 md:mb-6">Products</p>
|
||||
<ul class="list-reset mb-6">
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0" >
|
||||
<a href="/pricing" class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400">Pricing</a>
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a
|
||||
href="/pricing"
|
||||
class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
|
||||
>Pricing</a
|
||||
>
|
||||
</li>
|
||||
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0" >
|
||||
<a href="/donation" class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400">Support Us ❤</a>
|
||||
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a
|
||||
href="/donation"
|
||||
class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
|
||||
>Support Us ❤</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -61,34 +99,54 @@
|
||||
<div class="flex-1 mb-2 sm:mb-0">
|
||||
<p class="uppercase text-slate-100 md:mb-6">Legal</p>
|
||||
<ul class="list-reset mb-6">
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0" >
|
||||
<a href="/terms-of-use" class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400">Terms of Use</a>
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a
|
||||
href="/terms-of-use"
|
||||
class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
|
||||
>Terms of Use</a
|
||||
>
|
||||
</li>
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0" >
|
||||
<a href="/privacy-policy" class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400">Privacy Policy</a>
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a
|
||||
href="/privacy-policy"
|
||||
class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
|
||||
>Privacy Policy</a
|
||||
>
|
||||
</li>
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0" >
|
||||
<a href="/imprint" class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400">Imprint</a>
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a
|
||||
href="/imprint"
|
||||
class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
|
||||
>Imprint</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex-1 mb-2 sm:mb-0">
|
||||
<p class="uppercase text-slate-100 md:mb-6">Company</p>
|
||||
<ul class="list-reset mb-6">
|
||||
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a href="/about" class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400">
|
||||
<a
|
||||
href="/about"
|
||||
class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
|
||||
>
|
||||
About Us
|
||||
</a>
|
||||
</li>
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a href="/contact" class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400">
|
||||
<a
|
||||
href="/contact"
|
||||
class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
|
||||
>
|
||||
Contact Us
|
||||
</a>
|
||||
</li>
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a href="/blog" class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400">
|
||||
<a
|
||||
href="/blog"
|
||||
class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
@ -99,7 +157,6 @@
|
||||
</a>
|
||||
</li>
|
||||
-->
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<!--
|
||||
@ -129,17 +186,13 @@
|
||||
</ul>
|
||||
</div>
|
||||
-->
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="hidden sm:flex flex-col">
|
||||
<div class="border-b border-gray-700 w-full"/>
|
||||
<div class="border-b border-gray-700 w-full" />
|
||||
<span class="flex flex-row items-center mt-6 text-md text-gray-300 mb-5">
|
||||
© 2024 Stocknear. All Rights Reserved.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@ -111,7 +111,7 @@
|
||||
data: amountList,
|
||||
type: "bar",
|
||||
itemStyle: {
|
||||
color: "#FBCE3C", // Change bar color to orange
|
||||
color: "#fff", // Change bar color to orange
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
@ -1,78 +1,65 @@
|
||||
<script lang='ts'>
|
||||
import { onMount } from 'svelte';
|
||||
//import { linkTitle } from '$lib/store';
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
//import { linkTitle } from '$lib/store';
|
||||
|
||||
export let value = '';
|
||||
export let placeholder = '';
|
||||
export let id;
|
||||
export let label;
|
||||
export let type = 'text';
|
||||
export let disabled = false;
|
||||
export let required = false;
|
||||
export let maxLength = 100;
|
||||
export let showCounter = false;
|
||||
export let hidden = false;
|
||||
export let errors;
|
||||
export let useTitle = false; // new prop
|
||||
export let value = "";
|
||||
export let placeholder = "";
|
||||
export let id;
|
||||
export let label;
|
||||
export let type = "text";
|
||||
export let disabled = false;
|
||||
export let required = false;
|
||||
export let maxLength = 100;
|
||||
export let showCounter = false;
|
||||
export let hidden = false;
|
||||
export let errors;
|
||||
export let useTitle = false; // new prop
|
||||
|
||||
let videoInput;
|
||||
let showVideo = false;
|
||||
let videoInput;
|
||||
let showVideo = false;
|
||||
|
||||
onMount( () => {
|
||||
window.addEventListener('dragover', (event) => event.preventDefault());
|
||||
window.addEventListener('drop', (event) => event.preventDefault());
|
||||
})
|
||||
onMount(() => {
|
||||
window.addEventListener("dragover", (event) => event.preventDefault());
|
||||
window.addEventListener("drop", (event) => event.preventDefault());
|
||||
});
|
||||
|
||||
const showPreview = (event) => {
|
||||
const target = event.target;
|
||||
const files = target.files;
|
||||
if (files.length > 0) {
|
||||
const showPreview = (event) => {
|
||||
const target = event.target;
|
||||
const files = target.files;
|
||||
if (files.length > 0) {
|
||||
if (files[0]?.name?.toLowerCase()?.includes(".mp4")) {
|
||||
videoInput = URL.createObjectURL(files[0]);
|
||||
} else {
|
||||
const src = URL.createObjectURL(files[0]);
|
||||
|
||||
const preview = document.getElementById("image-preview");
|
||||
preview.src = src;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (files[0]?.name?.toLowerCase()?.includes('.mp4'))
|
||||
{
|
||||
videoInput = URL.createObjectURL(files[0]);
|
||||
}
|
||||
else {
|
||||
let inputValue = value;
|
||||
|
||||
|
||||
const src = URL.createObjectURL(files[0]);
|
||||
//$: value = useTitle === false ? $linkTitle : '';
|
||||
|
||||
const preview = document.getElementById('image-preview');
|
||||
preview.src = src;
|
||||
}
|
||||
let counterColor;
|
||||
|
||||
}
|
||||
};
|
||||
$: counter = `${inputValue.length}/${maxLength}`;
|
||||
|
||||
$: {
|
||||
if (inputValue.length > maxLength) {
|
||||
counterColor = "text-error";
|
||||
} else {
|
||||
counterColor = "text-white";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let inputValue = value;
|
||||
|
||||
|
||||
//$: value = useTitle === false ? $linkTitle : '';
|
||||
|
||||
|
||||
|
||||
let counterColor;
|
||||
|
||||
$: counter = `${inputValue.length}/${maxLength}`;
|
||||
|
||||
$: {
|
||||
if (inputValue.length > maxLength) {
|
||||
counterColor = 'text-error';
|
||||
} else {
|
||||
counterColor = 'text-white';
|
||||
}
|
||||
}
|
||||
|
||||
function handleInput(event) {
|
||||
inputValue = event.target.value;
|
||||
if(inputValue?.toLowerCase()?.includes('.mp4'))
|
||||
{
|
||||
showVideo = true;
|
||||
}
|
||||
/*
|
||||
function handleInput(event) {
|
||||
inputValue = event.target.value;
|
||||
if (inputValue?.toLowerCase()?.includes(".mp4")) {
|
||||
showVideo = true;
|
||||
}
|
||||
/*
|
||||
if (useTitle) {
|
||||
// Check if the input value is a valid URL
|
||||
try {
|
||||
@ -90,10 +77,9 @@
|
||||
|
||||
$: value = useTitle === false ? $linkTitle : '';
|
||||
*/
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
/*
|
||||
async function getTitle(url) {
|
||||
try {
|
||||
|
||||
@ -115,129 +101,158 @@
|
||||
}
|
||||
*/
|
||||
|
||||
function handleDrop(e) {
|
||||
e.preventDefault();
|
||||
|
||||
function handleDrop(e) {
|
||||
e.preventDefault()
|
||||
let element_id = e.detail;
|
||||
}
|
||||
|
||||
let element_id = e.detail
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
const handleCancel= () => {
|
||||
inputValue = '';
|
||||
showVideo = false;
|
||||
}
|
||||
|
||||
let isHovering = false;
|
||||
|
||||
|
||||
$: {
|
||||
if(inputValue)
|
||||
{
|
||||
errors = null;
|
||||
}
|
||||
}
|
||||
const handleCancel = () => {
|
||||
inputValue = "";
|
||||
showVideo = false;
|
||||
};
|
||||
|
||||
let isHovering = false;
|
||||
|
||||
$: {
|
||||
if (inputValue) {
|
||||
errors = null;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class="form-control w-full max-w-2xl mb-2 {hidden ? 'hidden' : ''}">
|
||||
<label for={id} class="label font-medium pb-1">
|
||||
<span class="text-white label-text">{label}</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
{#if type === 'file'}
|
||||
<label for={id} class="flex flex-col items-center bg-[#313131] rounded-md cursor-pointer {inputValue.length === 0 ? 'p-10' : ''} {isHovering ? 'ring-2' : ''}"
|
||||
on:dragenter={() => isHovering = true}
|
||||
on:dragleave={() => isHovering = false}
|
||||
on:drop={handleDrop}
|
||||
>
|
||||
<label for={id} class="label font-medium pb-1">
|
||||
<span class="text-white label-text">{label}</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
{#if type === "file"}
|
||||
<label
|
||||
for={id}
|
||||
class="flex flex-col items-center bg-[#313131] rounded-md cursor-pointer {inputValue.length ===
|
||||
0
|
||||
? 'p-10'
|
||||
: ''} {isHovering ? 'ring-2' : ''}"
|
||||
on:dragenter={() => (isHovering = true)}
|
||||
on:dragleave={() => (isHovering = false)}
|
||||
on:drop={handleDrop}
|
||||
>
|
||||
{#if inputValue.length !== 0}
|
||||
<label
|
||||
on:click={handleCancel}
|
||||
class="btn btn-sm btn-circle bg-red-600 absolute right-0 -top-3 z-20"
|
||||
>✕</label
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
class="absolute inset-0 bg-cover object-fill bg-center bg-[#000]"
|
||||
></div>
|
||||
<img
|
||||
class="w-auto max-h-[400px] object-fill bg-center bg-contain z-10 {showVideo
|
||||
? 'hidden'
|
||||
: ''} "
|
||||
alt="Image preview"
|
||||
id="image-preview"
|
||||
loading="lazy"
|
||||
/>
|
||||
{:else}
|
||||
{#if !isHovering}
|
||||
<svg
|
||||
class="w-10 h-10"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
|
||||
id="SVGRepo_tracerCarrier"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></g><g id="SVGRepo_iconCarrier">
|
||||
<path
|
||||
opacity="0.4"
|
||||
d="M22.0206 16.8198L18.8906 9.49978C18.3206 8.15978 17.4706 7.39978 16.5006 7.34978C15.5406 7.29978 14.6106 7.96978 13.9006 9.24978L12.0006 12.6598C11.6006 13.3798 11.0306 13.8098 10.4106 13.8598C9.78063 13.9198 9.15063 13.5898 8.64063 12.9398L8.42063 12.6598C7.71063 11.7698 6.83063 11.3398 5.93063 11.4298C5.03063 11.5198 4.26063 12.1398 3.75063 13.1498L2.02063 16.5998C1.40063 17.8498 1.46063 19.2998 2.19063 20.4798C2.92063 21.6598 4.19063 22.3698 5.58063 22.3698H18.3406C19.6806 22.3698 20.9306 21.6998 21.6706 20.5798C22.4306 19.4598 22.5506 18.0498 22.0206 16.8198Z"
|
||||
fill="white"
|
||||
></path>
|
||||
<path
|
||||
d="M6.96984 8.38012C8.83657 8.38012 10.3498 6.86684 10.3498 5.00012C10.3498 3.13339 8.83657 1.62012 6.96984 1.62012C5.10312 1.62012 3.58984 3.13339 3.58984 5.00012C3.58984 6.86684 5.10312 8.38012 6.96984 8.38012Z"
|
||||
fill="white"
|
||||
></path>
|
||||
</g></svg
|
||||
>
|
||||
<span class="mt-2 mb-4 text-gray-200">Choose a file to upload</span>
|
||||
{:else}
|
||||
<svg
|
||||
class="w-10 h-10"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="#9D64D9"
|
||||
d="M6 20q-.825 0-1.413-.588T4 18v-3h2v3h12v-3h2v3q0 .825-.588 1.413T18 20H6Zm5-4V7.85l-2.6 2.6L7 9l5-5l5 5l-1.4 1.45l-2.6-2.6V16h-2Z"
|
||||
/></svg
|
||||
>
|
||||
<span class="mt-2 mb-4 text-gray-200">Drop here to upload</span>
|
||||
{/if}
|
||||
<span class="text-xs sm:text-sm text-gray-400 m-auto mb-5">
|
||||
We support jpg/jpeg, png, webp and mp4.
|
||||
</span>
|
||||
<span class="text-xs sm:text-sm text-gray-400 m-auto mb-5">
|
||||
File must be smaller than 5MB.
|
||||
</span>
|
||||
<label
|
||||
for={id}
|
||||
class="cursor-pointer rounded-md sm:hover:bg-gray-300 bg-[#fff] text-sm text-black font-semibold w-auto p-3"
|
||||
>
|
||||
Choose File
|
||||
</label>
|
||||
{/if}
|
||||
<input
|
||||
class="hidden rounded text-gray-300"
|
||||
{type}
|
||||
{placeholder}
|
||||
{required}
|
||||
{disabled}
|
||||
{id}
|
||||
name={id}
|
||||
value={inputValue}
|
||||
accept="image"
|
||||
on:change={showPreview}
|
||||
on:input={handleInput}
|
||||
autocomplete="off"
|
||||
/>
|
||||
|
||||
{#if inputValue.length !== 0}
|
||||
<label on:click={handleCancel} class="btn btn-sm btn-circle bg-red-600 absolute right-0 -top-3 z-20">✕</label>
|
||||
|
||||
<div class="absolute inset-0 bg-cover object-fill bg-center bg-[#000]"></div>
|
||||
<img class="w-auto max-h-[400px] object-fill bg-center bg-contain z-10 {showVideo ? 'hidden' : ''} "
|
||||
alt="Image preview"
|
||||
id="image-preview"
|
||||
loading="lazy" />
|
||||
{:else}
|
||||
{#if !isHovering}
|
||||
<svg class="w-10 h-10" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="0.4" d="M22.0206 16.8198L18.8906 9.49978C18.3206 8.15978 17.4706 7.39978 16.5006 7.34978C15.5406 7.29978 14.6106 7.96978 13.9006 9.24978L12.0006 12.6598C11.6006 13.3798 11.0306 13.8098 10.4106 13.8598C9.78063 13.9198 9.15063 13.5898 8.64063 12.9398L8.42063 12.6598C7.71063 11.7698 6.83063 11.3398 5.93063 11.4298C5.03063 11.5198 4.26063 12.1398 3.75063 13.1498L2.02063 16.5998C1.40063 17.8498 1.46063 19.2998 2.19063 20.4798C2.92063 21.6598 4.19063 22.3698 5.58063 22.3698H18.3406C19.6806 22.3698 20.9306 21.6998 21.6706 20.5798C22.4306 19.4598 22.5506 18.0498 22.0206 16.8198Z" fill="white" ></path> <path d="M6.96984 8.38012C8.83657 8.38012 10.3498 6.86684 10.3498 5.00012C10.3498 3.13339 8.83657 1.62012 6.96984 1.62012C5.10312 1.62012 3.58984 3.13339 3.58984 5.00012C3.58984 6.86684 5.10312 8.38012 6.96984 8.38012Z" fill="white"></path> </g></svg>
|
||||
<span class="mt-2 mb-4 text-gray-200">Choose a file to upload</span>
|
||||
{:else}
|
||||
<svg class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#9D64D9" d="M6 20q-.825 0-1.413-.588T4 18v-3h2v3h12v-3h2v3q0 .825-.588 1.413T18 20H6Zm5-4V7.85l-2.6 2.6L7 9l5-5l5 5l-1.4 1.45l-2.6-2.6V16h-2Z"/></svg>
|
||||
<span class="mt-2 mb-4 text-gray-200">Drop here to upload</span>
|
||||
{/if}
|
||||
<span class="text-xs sm:text-sm text-gray-400 m-auto mb-5 ">
|
||||
We support jpg/jpeg, png, webp and mp4.
|
||||
</span>
|
||||
<span class="text-xs sm:text-sm text-gray-400 m-auto mb-5 ">
|
||||
File must be smaller than 5MB.
|
||||
</span>
|
||||
<label for={id} class="cursor-pointer rounded-lg sm:hover:bg-purple-700 bg-purple-600 text-sm text-white font-bold w-auto p-3">
|
||||
Choose File
|
||||
</label>
|
||||
|
||||
{/if}
|
||||
<input class="hidden rounded text-gray-300"
|
||||
{type}
|
||||
{placeholder}
|
||||
{required}
|
||||
{disabled}
|
||||
{id}
|
||||
name={id}
|
||||
value={inputValue}
|
||||
accept="image"
|
||||
on:change={showPreview}
|
||||
on:input={handleInput}
|
||||
autocomplete="off"
|
||||
|
||||
/>
|
||||
{#if showVideo}
|
||||
<div
|
||||
class="absolute inset-0 bg-cover object-fill bg-center bg-[#000]"
|
||||
></div>
|
||||
<video controls class="w-auto max-h-[500px] z-10" src={videoInput}>
|
||||
</video>
|
||||
{/if}
|
||||
</label>
|
||||
{:else}
|
||||
<input
|
||||
class="input input-bordered w-full bg-[#313131] placeholder-gray-300 text-white whitespace-normal ring-2"
|
||||
{type}
|
||||
{placeholder}
|
||||
{required}
|
||||
{disabled}
|
||||
{id}
|
||||
name={id}
|
||||
value={inputValue}
|
||||
on:input={handleInput}
|
||||
autocomplete="off"
|
||||
/>
|
||||
{/if}
|
||||
{#if showCounter}
|
||||
<div class="flex justify-end mt-1 -mb-1">
|
||||
<span class={`label-text text-xs ${counterColor}`}>{counter}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if showVideo}
|
||||
<div class="absolute inset-0 bg-cover object-fill bg-center bg-[#000]"></div>
|
||||
<video controls
|
||||
class="w-auto max-h-[500px] z-10"
|
||||
src={videoInput}
|
||||
>
|
||||
</video>
|
||||
{/if}
|
||||
|
||||
|
||||
</label>
|
||||
{:else}
|
||||
<input
|
||||
class="input input-bordered w-full bg-[#313131] placeholder-gray-300 text-white whitespace-normal ring-2"
|
||||
{type}
|
||||
{placeholder}
|
||||
{required}
|
||||
{disabled}
|
||||
{id}
|
||||
name={id}
|
||||
value={inputValue}
|
||||
on:input={handleInput}
|
||||
autocomplete="off"
|
||||
/>
|
||||
{/if}
|
||||
{#if showCounter}
|
||||
<div class="flex justify-end mt-1 -mb-1">
|
||||
<span class={`label-text text-xs ${counterColor}`}>{counter}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if errors}
|
||||
<label for={id} class="label py-0 pt-1">
|
||||
<span class="label-text-alt text-error">
|
||||
{errors}
|
||||
</span>
|
||||
</label>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
{#if errors}
|
||||
<label for={id} class="label py-0 pt-1">
|
||||
<span class="label-text-alt text-error">
|
||||
{errors}
|
||||
</span>
|
||||
</label>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,56 +1,49 @@
|
||||
<script lang='ts'>
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import toast from 'svelte-french-toast';
|
||||
import {commentAdded} from '$lib/store';
|
||||
import { pb } from '$lib/pocketbase';
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
import toast from "svelte-french-toast";
|
||||
import { commentAdded } from "$lib/store";
|
||||
import { pb } from "$lib/pocketbase";
|
||||
|
||||
export let data;
|
||||
export let postId = '';
|
||||
export let data;
|
||||
export let postId = "";
|
||||
|
||||
let post = data?.getOnePost;
|
||||
let post = data?.getOnePost;
|
||||
|
||||
let imageId = 'image-input';
|
||||
let imageId = "image-input";
|
||||
|
||||
let expandField = false;
|
||||
let expandField = false;
|
||||
|
||||
//let characterCount = 0;
|
||||
|
||||
let inputValue = "";
|
||||
let imageInput = "";
|
||||
let imageComment;
|
||||
|
||||
const showPreview = (event) => {
|
||||
const target = event.target;
|
||||
const files = target.files;
|
||||
if (files.length > 0) {
|
||||
const src = URL.createObjectURL(files[0]);
|
||||
const preview = document.getElementById("image-preview");
|
||||
preview.src = src;
|
||||
}
|
||||
};
|
||||
|
||||
let inputValue = '';
|
||||
let imageInput = '';
|
||||
let imageComment;
|
||||
|
||||
|
||||
const showPreview = (event) => {
|
||||
const target = event.target;
|
||||
const files = target.files;
|
||||
if (files.length > 0) {
|
||||
const src = URL.createObjectURL(files[0]);
|
||||
const preview = document.getElementById('image-preview');
|
||||
preview.src = src;
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
const createComment = async (event) => {
|
||||
const createComment = async (event) => {
|
||||
event.preventDefault(); // prevent the default form submission behavior
|
||||
let output;
|
||||
let newComment;
|
||||
const userId = data?.user?.id;
|
||||
|
||||
if(inputValue.length !== 0)
|
||||
{
|
||||
const postData = {
|
||||
'comment': inputValue,
|
||||
'post': postId,
|
||||
'image': imageInput.length !== 0 ? imageInput[0] : '',
|
||||
'user': userId
|
||||
}
|
||||
if (inputValue.length !== 0) {
|
||||
const postData = {
|
||||
comment: inputValue,
|
||||
post: postId,
|
||||
image: imageInput.length !== 0 ? imageInput[0] : "",
|
||||
user: userId,
|
||||
};
|
||||
|
||||
/*
|
||||
/*
|
||||
const response = await fetch(fastifyURL+'/create-comment', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@ -62,313 +55,324 @@ const createComment = async (event) => {
|
||||
output = await response.json()
|
||||
}
|
||||
*/
|
||||
//Create comment in User Browser because i need to learn how to transfer images.
|
||||
try {
|
||||
newComment = await pb.collection('comments').create(postData);
|
||||
|
||||
newComment = await pb.collection("comments").getOne(newComment?.id, {
|
||||
expand: `user`})
|
||||
//Create comment in User Browser because i need to learn how to transfer images.
|
||||
try {
|
||||
newComment = await pb.collection("comments").create(postData);
|
||||
|
||||
newComment = await pb.collection("comments").getOne(newComment?.id, {
|
||||
expand: `user`,
|
||||
});
|
||||
|
||||
//User always upvotes their post in the intial state
|
||||
await pb.collection("comments").update(newComment.id, {
|
||||
"vote+": 1,
|
||||
})
|
||||
//User always upvotes their post in the intial state
|
||||
await pb.collection("comments").update(newComment.id, {
|
||||
"vote+": 1,
|
||||
});
|
||||
|
||||
const opPost = await pb.collection('posts').getOne(postId)
|
||||
//create new record for notifications collections
|
||||
if (userId !== opPost?.user)
|
||||
{
|
||||
const opPost = await pb.collection("posts").getOne(postId);
|
||||
//create new record for notifications collections
|
||||
if (userId !== opPost?.user) {
|
||||
let formDataNotifications = new FormData();
|
||||
formDataNotifications.append('opUser', opPost?.user);
|
||||
formDataNotifications.append('user', userId)
|
||||
formDataNotifications.append('post', postId);
|
||||
formDataNotifications.append('comment', newComment?.id)
|
||||
formDataNotifications.append('notifyType', 'comment');
|
||||
|
||||
await pb.collection('notifications').create(formDataNotifications);
|
||||
formDataNotifications.append("opUser", opPost?.user);
|
||||
formDataNotifications.append("user", userId);
|
||||
formDataNotifications.append("post", postId);
|
||||
formDataNotifications.append("comment", newComment?.id);
|
||||
formDataNotifications.append("notifyType", "comment");
|
||||
|
||||
await pb.collection("notifications").create(formDataNotifications);
|
||||
}
|
||||
output = "success";
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
output = "failure";
|
||||
}
|
||||
output = 'success'
|
||||
|
||||
}
|
||||
catch(e) {
|
||||
console.log(e);
|
||||
output = 'failure'
|
||||
}
|
||||
|
||||
if (output === 'success') {
|
||||
toast.success('Commented successfully', {
|
||||
style: 'border-radius: 200px; background: #333; color: #fff;'
|
||||
});
|
||||
if (output === "success") {
|
||||
toast.success("Commented successfully", {
|
||||
style: "border-radius: 200px; background: #333; color: #fff;",
|
||||
});
|
||||
|
||||
$commentAdded = newComment;
|
||||
$commentAdded = newComment;
|
||||
|
||||
//console.log("comment added: ", $commentAdded)
|
||||
inputValue = '';
|
||||
imageInput = '';
|
||||
//console.log("comment added: ", $commentAdded)
|
||||
inputValue = "";
|
||||
imageInput = "";
|
||||
|
||||
handleCancel()
|
||||
|
||||
|
||||
}
|
||||
else {
|
||||
toast.error('Something went wrong. Please try again...', {
|
||||
style: 'border-radius: 200px; background: #333; color: #fff;'
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
function handleInput(event) {
|
||||
inputValue = event.target.value;
|
||||
|
||||
const textarea = event.target;
|
||||
textarea.style.height = 'auto';
|
||||
textarea.style.height = Math.min(textarea.scrollHeight, 140) + 'px';
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
if (editor)
|
||||
{
|
||||
editor.innerHTML = '';
|
||||
}
|
||||
inputValue = '';
|
||||
imageInput = '';
|
||||
const closePopup = document.getElementById("mobileTextEditorModal");
|
||||
closePopup?.dispatchEvent(new MouseEvent('click'))
|
||||
|
||||
const textarea = document.querySelector('textarea');
|
||||
textarea.style.height = '36px'; // 48px are h-12 in tailwindcss
|
||||
|
||||
}
|
||||
|
||||
function handleImageInput(event) {
|
||||
imageInput = event.target.files;
|
||||
|
||||
expandField=true;
|
||||
}
|
||||
|
||||
|
||||
|
||||
const toolbarOptions = {
|
||||
container: [
|
||||
['bold', 'italic', 'underline','strike'],
|
||||
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
|
||||
['link'],
|
||||
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
|
||||
],
|
||||
handleCancel();
|
||||
} else {
|
||||
toast.error("Something went wrong. Please try again...", {
|
||||
style: "border-radius: 200px; background: #333; color: #fff;",
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function handleInput(event) {
|
||||
inputValue = event.target.value;
|
||||
|
||||
let quill;
|
||||
const textarea = event.target;
|
||||
textarea.style.height = "auto";
|
||||
textarea.style.height = Math.min(textarea.scrollHeight, 140) + "px";
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
if (editor) {
|
||||
editor.innerHTML = "";
|
||||
}
|
||||
inputValue = "";
|
||||
imageInput = "";
|
||||
const closePopup = document.getElementById("mobileTextEditorModal");
|
||||
closePopup?.dispatchEvent(new MouseEvent("click"));
|
||||
|
||||
const textarea = document.querySelector("textarea");
|
||||
textarea.style.height = "36px"; // 48px are h-12 in tailwindcss
|
||||
}
|
||||
|
||||
function handleImageInput(event) {
|
||||
imageInput = event.target.files;
|
||||
|
||||
expandField = true;
|
||||
}
|
||||
|
||||
const toolbarOptions = {
|
||||
container: [
|
||||
["bold", "italic", "underline", "strike"],
|
||||
[{ list: "ordered" }, { list: "bullet" }],
|
||||
["link"],
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
||||
],
|
||||
};
|
||||
|
||||
let quill;
|
||||
let editor;
|
||||
const regex = /^(\s*<p><br><\/p>\s*)*$/;
|
||||
|
||||
let loadingEditor = false;
|
||||
let loadingEditor = false;
|
||||
|
||||
onMount(async () => {
|
||||
onMount(async () => {
|
||||
const { default: Quill } = await import("quill");
|
||||
|
||||
const { default: Quill } = await import('quill');
|
||||
quill = new Quill(".quill-editor", {
|
||||
modules: {
|
||||
toolbar: toolbarOptions,
|
||||
},
|
||||
theme: "snow",
|
||||
placeholder: "Leave a comment...",
|
||||
keepFocus: true,
|
||||
});
|
||||
|
||||
quill = new Quill('.quill-editor', {
|
||||
modules: {
|
||||
toolbar: toolbarOptions,
|
||||
},
|
||||
theme: 'snow',
|
||||
placeholder: "Leave a comment...",
|
||||
keepFocus: true,
|
||||
});
|
||||
quill.on("text-change", function () {
|
||||
editor = quill.root;
|
||||
// Add text-4xl class to all h1 elements
|
||||
editor.querySelectorAll("h1").forEach((h1) => {
|
||||
h1.classList.add("text-4xl");
|
||||
});
|
||||
editor.querySelectorAll("h2").forEach((h2) => {
|
||||
h2.classList.add("text-3xl");
|
||||
});
|
||||
editor.querySelectorAll("h3").forEach((h3) => {
|
||||
h3.classList.add("text-xl");
|
||||
});
|
||||
editor.querySelectorAll("h4").forEach((h4) => {
|
||||
h4.classList.add("text-md");
|
||||
});
|
||||
editor.querySelectorAll("h5").forEach((h5) => {
|
||||
h5.classList.add("text-sm");
|
||||
});
|
||||
editor.querySelectorAll("h6").forEach((h6) => {
|
||||
h6.classList.add("text-xs");
|
||||
});
|
||||
|
||||
editor.querySelectorAll("a").forEach((a) => {
|
||||
a.classList.add("text-blue-400", "hover:text-white", "underline");
|
||||
});
|
||||
|
||||
quill.on('text-change', function() {
|
||||
editor = quill.root;
|
||||
// Add text-4xl class to all h1 elements
|
||||
editor.querySelectorAll('h1').forEach((h1) => {
|
||||
h1.classList.add('text-4xl');
|
||||
});
|
||||
editor.querySelectorAll('h2').forEach((h2) => {
|
||||
h2.classList.add('text-3xl');
|
||||
});
|
||||
editor.querySelectorAll('h3').forEach((h3) => {
|
||||
h3.classList.add('text-xl');
|
||||
});
|
||||
editor.querySelectorAll('h4').forEach((h4) => {
|
||||
h4.classList.add('text-md');
|
||||
});
|
||||
editor.querySelectorAll('h5').forEach((h5) => {
|
||||
h5.classList.add('text-sm');
|
||||
});
|
||||
editor.querySelectorAll('h6').forEach((h6) => {
|
||||
h6.classList.add('text-xs');
|
||||
});
|
||||
editor.querySelectorAll("ol").forEach((ol) => {
|
||||
ol.classList.add("list-decimal", "ml-10", "text-sm");
|
||||
});
|
||||
|
||||
editor.querySelectorAll('a').forEach((a) => {
|
||||
a.classList.add('text-blue-400', 'hover:text-white','underline');
|
||||
});
|
||||
editor.querySelectorAll("ul").forEach((ul) => {
|
||||
ul.classList.add("list-disc", "ml-10", "text-sm");
|
||||
});
|
||||
|
||||
editor.querySelectorAll('ol').forEach((ol) => {
|
||||
ol.classList.add('list-decimal', 'ml-10','text-sm');
|
||||
});
|
||||
|
||||
editor.querySelectorAll('ul').forEach((ul) => {
|
||||
ul.classList.add('list-disc', 'ml-10','text-sm');
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
/*
|
||||
editor.querySelectorAll('pre').forEach((pre) => {
|
||||
pre.classList.add('bg-[#23241F]', 'w-auto','h-auto','max-w-6xl','breaks-all');
|
||||
});
|
||||
*/
|
||||
|
||||
const contents = editor.innerHTML;
|
||||
inputValue = contents;
|
||||
const contents = editor.innerHTML;
|
||||
inputValue = contents;
|
||||
|
||||
console.log(inputValue)
|
||||
console.log(inputValue);
|
||||
|
||||
if (regex?.test(inputValue)) {
|
||||
editor.innerHTML = '';
|
||||
inputValue = '';
|
||||
}
|
||||
if (regex?.test(inputValue)) {
|
||||
editor.innerHTML = "";
|
||||
inputValue = "";
|
||||
}
|
||||
|
||||
//console.log(inputValue)
|
||||
//console.log(inputValue)
|
||||
|
||||
// Force Svelte to update the DOM
|
||||
$: {}
|
||||
});
|
||||
|
||||
loadingEditor = true;
|
||||
// Force Svelte to update the DOM
|
||||
$: {
|
||||
}
|
||||
});
|
||||
|
||||
loadingEditor = true;
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
onDestroy(() => {
|
||||
if (quill) {
|
||||
quill.off('text-change');
|
||||
quill.off("text-change");
|
||||
quill = null;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
1
|
||||
1;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
|
||||
<div class="drawer drawer-end overflow-hidden" style="z-index: 9999;">
|
||||
<input id="mobileTextEditorModal" type="checkbox" class="drawer-toggle"/>
|
||||
<div class="drawer-side overflow-hidden">
|
||||
<div class="rounded-xl bg-[#000] min-h-screen w-screen pb-20 overflow-y-auto overflow-hidden">
|
||||
<!--
|
||||
<input id="mobileTextEditorModal" type="checkbox" class="drawer-toggle" />
|
||||
<div class="drawer-side overflow-hidden">
|
||||
<div
|
||||
class="rounded-xl bg-[#000] min-h-screen w-screen pb-20 overflow-y-auto overflow-hidden"
|
||||
>
|
||||
<!--
|
||||
<h1 class="text-white sm:hidden font-medium text-xl mt-10 pl-2">
|
||||
{@html post?.title}
|
||||
</h1>
|
||||
-->
|
||||
|
||||
<h1 class="text-white text-lg pl-7 pt-16">
|
||||
Share your opinion
|
||||
</h1>
|
||||
|
||||
<!--Start Quill Editor-->
|
||||
<div class="{!loadingEditor ? 'hidden' : ''} mt-3 pl-7 pr-7">
|
||||
<div class="quill-editor min-h-[96px] h-[120px] resize-none focus-none ring-none rounded-none bg-[#2A303C] text-white">
|
||||
<h1 class="text-white text-lg pl-7 pt-16">Share your opinion</h1>
|
||||
|
||||
<!--Start Quill Editor-->
|
||||
<div class="{!loadingEditor ? 'hidden' : ''} mt-3 pl-7 pr-7">
|
||||
<div
|
||||
class="quill-editor min-h-[96px] h-[120px] resize-none focus-none ring-none rounded-none bg-[#2A303C] text-white"
|
||||
>
|
||||
<select class="ql-header" aria-label="Header" title="Header">
|
||||
<option selected></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<textarea placeholder="Loading editor..." class="{loadingEditor ? 'hidden' : ''} min-h-[96px] h-[120px] text-sm italic w-full resize-none focus-none ring-none rounded-none bg-[#2A303C] text-white"></textarea>
|
||||
<!--End Quill Editor-->
|
||||
|
||||
<textarea
|
||||
placeholder="Loading editor..."
|
||||
class="{loadingEditor
|
||||
? 'hidden'
|
||||
: ''} min-h-[96px] h-[120px] text-sm italic w-full resize-none focus-none ring-none rounded-none bg-[#2A303C] text-white"
|
||||
></textarea>
|
||||
<!--End Quill Editor-->
|
||||
|
||||
<textarea
|
||||
class="hidden"
|
||||
type="text"
|
||||
value={inputValue}
|
||||
on:input={handleInput}
|
||||
/>
|
||||
/>
|
||||
|
||||
<div class="flex flex-row justify-start mt-4 pb-16 pl-7 pr-7">
|
||||
|
||||
<div class="relative">
|
||||
<div class="flex flex-row justify-start mt-4 pb-16 pl-7 pr-7">
|
||||
<div class="relative">
|
||||
<label
|
||||
for={imageId}
|
||||
class="{imageInput.length !== 0
|
||||
? 'hidden'
|
||||
: ''} inline-flex mr-auto items-center py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg hover:bg-gray-800 cursor-pointer"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 inline-block"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
|
||||
id="SVGRepo_tracerCarrier"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></g><g id="SVGRepo_iconCarrier">
|
||||
<path
|
||||
opacity="0.4"
|
||||
d="M22.0206 16.8198L18.8906 9.49978C18.3206 8.15978 17.4706 7.39978 16.5006 7.34978C15.5406 7.29978 14.6106 7.96978 13.9006 9.24978L12.0006 12.6598C11.6006 13.3798 11.0306 13.8098 10.4106 13.8598C9.78063 13.9198 9.15063 13.5898 8.64063 12.9398L8.42063 12.6598C7.71063 11.7698 6.83063 11.3398 5.93063 11.4298C5.03063 11.5198 4.26063 12.1398 3.75063 13.1498L2.02063 16.5998C1.40063 17.8498 1.46063 19.2998 2.19063 20.4798C2.92063 21.6598 4.19063 22.3698 5.58063 22.3698H18.3406C19.6806 22.3698 20.9306 21.6998 21.6706 20.5798C22.4306 19.4598 22.5506 18.0498 22.0206 16.8198Z"
|
||||
fill="#A6ADBB"
|
||||
></path>
|
||||
<path
|
||||
d="M6.96984 8.38012C8.83657 8.38012 10.3498 6.86684 10.3498 5.00012C10.3498 3.13339 8.83657 1.62012 6.96984 1.62012C5.10312 1.62012 3.58984 3.13339 3.58984 5.00012C3.58984 6.86684 5.10312 8.38012 6.96984 8.38012Z"
|
||||
fill="#E5E7EB"
|
||||
></path>
|
||||
</g></svg
|
||||
>
|
||||
|
||||
|
||||
<label for={imageId} class="{imageInput.length !== 0 ? 'hidden' : ''} inline-flex mr-auto items-center py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg hover:bg-gray-800 cursor-pointer">
|
||||
|
||||
|
||||
<svg class="w-5 h-5 inline-block" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="0.4" d="M22.0206 16.8198L18.8906 9.49978C18.3206 8.15978 17.4706 7.39978 16.5006 7.34978C15.5406 7.29978 14.6106 7.96978 13.9006 9.24978L12.0006 12.6598C11.6006 13.3798 11.0306 13.8098 10.4106 13.8598C9.78063 13.9198 9.15063 13.5898 8.64063 12.9398L8.42063 12.6598C7.71063 11.7698 6.83063 11.3398 5.93063 11.4298C5.03063 11.5198 4.26063 12.1398 3.75063 13.1498L2.02063 16.5998C1.40063 17.8498 1.46063 19.2998 2.19063 20.4798C2.92063 21.6598 4.19063 22.3698 5.58063 22.3698H18.3406C19.6806 22.3698 20.9306 21.6998 21.6706 20.5798C22.4306 19.4598 22.5506 18.0498 22.0206 16.8198Z" fill="#A6ADBB" ></path> <path d="M6.96984 8.38012C8.83657 8.38012 10.3498 6.86684 10.3498 5.00012C10.3498 3.13339 8.83657 1.62012 6.96984 1.62012C5.10312 1.62012 3.58984 3.13339 3.58984 5.00012C3.58984 6.86684 5.10312 8.38012 6.96984 8.38012Z" fill="#E5E7EB"></path> </g></svg>
|
||||
|
||||
<input class="hidden rounded text-gray-200"
|
||||
type="file"
|
||||
id={imageId}
|
||||
name={imageId}
|
||||
on:input={handleImageInput}
|
||||
on:change={showPreview}
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
class="hidden rounded text-gray-200"
|
||||
type="file"
|
||||
id={imageId}
|
||||
name={imageId}
|
||||
on:input={handleImageInput}
|
||||
on:change={showPreview}
|
||||
/>
|
||||
</label>
|
||||
|
||||
{#if imageInput.length !== 0}
|
||||
<div class="ml-2">
|
||||
<label on:click={() => imageInput = ''} class="btn btn-xs btn-circle bg-red-600 absolute -top-2 -right-2">
|
||||
✕
|
||||
</label>
|
||||
<img class="object-contain w-10 h-10 mx-auto rounded"
|
||||
alt="Image preview"
|
||||
id="image-preview" />
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
|
||||
|
||||
</div>
|
||||
<div class="relative flex justify-end items-center ml-auto mr-2">
|
||||
<label on:click={handleCancel} class="inline-flex justify-end items-center py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg hover:bg-gray-800 cursor-pointer mr-3">
|
||||
Cancel
|
||||
</label>
|
||||
<label on:click={createComment} class="inline-flex justify-end items-center bg-purple-600 {inputValue.length !== 0 ? 'opacity-100 cursor-pointer' : 'opacity-60'} py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg focus:ring-purple-300">
|
||||
{#if imageInput.length !== 0}
|
||||
<div class="ml-2">
|
||||
<label
|
||||
on:click={() => (imageInput = "")}
|
||||
class="btn btn-xs btn-circle bg-red-600 absolute -top-2 -right-2"
|
||||
>
|
||||
✕
|
||||
</label>
|
||||
<img
|
||||
class="object-contain w-10 h-10 mx-auto rounded"
|
||||
alt="Image preview"
|
||||
id="image-preview"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="relative flex justify-end items-center ml-auto mr-2">
|
||||
<label
|
||||
on:click={handleCancel}
|
||||
class="inline-flex justify-end items-center py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg hover:bg-gray-800 cursor-pointer mr-3"
|
||||
>
|
||||
Cancel
|
||||
</label>
|
||||
<label
|
||||
on:click={createComment}
|
||||
class="inline-flex justify-end items-center bg-[#fff] {inputValue.length !==
|
||||
0
|
||||
? 'opacity-100 cursor-pointer'
|
||||
: 'opacity-60'} py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg focus:ring-purple-300"
|
||||
>
|
||||
Post
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<label on:click={() => handleCancel()} class="absolute left-6 top-4">
|
||||
<svg class="w-6 h-6 inline-block mb-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"/></svg>
|
||||
<span class="text-white text-md font-medium">
|
||||
Return
|
||||
</span>
|
||||
</label>
|
||||
|
||||
|
||||
<label on:click={() => handleCancel()} class="absolute left-6 top-4">
|
||||
<svg
|
||||
class="w-6 h-6 inline-block mb-0.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="#fff"
|
||||
d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"
|
||||
/></svg
|
||||
>
|
||||
<span class="text-white text-md font-medium"> Return </span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
@import '/src/lib/assets/style_quill.css';
|
||||
@import "/src/lib/assets/style_quill.css";
|
||||
|
||||
.quill-editor, textarea {
|
||||
touch-action: none; /* or 'none' if manipulation doesn't work */
|
||||
}
|
||||
|
||||
</style>
|
||||
.quill-editor,
|
||||
textarea {
|
||||
touch-action: none; /* or 'none' if manipulation doesn't work */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -153,7 +153,7 @@
|
||||
{#if newsList?.length !== rawData?.length}
|
||||
<label
|
||||
on:click={loadMoreData}
|
||||
class="shadow-lg rounded-md cursor-pointer w-5/6 sm:w-full sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto sm:hover:bg-purple-700 bg-purple-600"
|
||||
class="shadow-lg rounded-md cursor-pointer w-5/6 sm:w-full sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto sm:hover:bg-gray-300 bg-[#fff]"
|
||||
>
|
||||
Load More News
|
||||
</label>
|
||||
|
||||
@ -257,7 +257,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -66,9 +66,7 @@
|
||||
<span class="text-sm font-medium text-white text-opacity-[0.6]">
|
||||
Pay Yearly
|
||||
</span>
|
||||
<span class="text-[#FBCE3C] text-sm font-semibold">
|
||||
Save up 16%
|
||||
</span>
|
||||
<span class="text-[#fff] text-sm font-semibold"> Save up 16% </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -217,7 +215,7 @@
|
||||
{#if !data?.user}
|
||||
<label
|
||||
for="userLogin"
|
||||
class="py-3 cursor-pointer rounded-lg text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-100 ease-in-out group"
|
||||
class="py-3 cursor-pointer rounded-lg text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-100 ease-in-out group"
|
||||
>
|
||||
Get Sign In
|
||||
<span
|
||||
@ -537,7 +535,7 @@
|
||||
</div>
|
||||
<label
|
||||
for={"userLogin"}
|
||||
class="cursor-pointer py-3 rounded-lg text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-100 ease-in-out group"
|
||||
class="cursor-pointer py-3 rounded-lg text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-100 ease-in-out group"
|
||||
>
|
||||
30 Days Free Trial
|
||||
<span
|
||||
@ -616,19 +614,19 @@
|
||||
</div>
|
||||
|
||||
{#if data?.user?.tier === 'Pro' && !data?.user?.freeTrial}
|
||||
<a class="py-3 rounded-lg text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-100 ease-in-out group" href="#">
|
||||
<a class="py-3 rounded-lg text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-100 ease-in-out group" href="#">
|
||||
Active Plan
|
||||
</a>
|
||||
{:else if data?.user?.tier === 'Pro' && data?.user?.freeTrial === true}
|
||||
|
||||
<label for={!data?.user ? 'userLogin' : ''} on:click={() => purchasePlan('lifeTime')} class="py-3 rounded-lg text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-100 ease-in-out group">
|
||||
<label for={!data?.user ? 'userLogin' : ''} on:click={() => purchasePlan('lifeTime')} class="py-3 rounded-lg text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-100 ease-in-out group">
|
||||
Get Lifetime Access
|
||||
<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>
|
||||
</label>
|
||||
{:else}
|
||||
<label for={!data?.user ? 'userLogin' : ''} on:click={() => purchasePlan('lifeTime')} class="cursor-pointer py-3 rounded-lg text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-100 ease-in-out group">
|
||||
<label for={!data?.user ? 'userLogin' : ''} on:click={() => purchasePlan('lifeTime')} class="cursor-pointer py-3 rounded-lg text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-100 ease-in-out group">
|
||||
Get Lifetime Access
|
||||
<span class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out">
|
||||
<svg class="w-4 h-4 inline-block" 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>
|
||||
|
||||
@ -1,24 +1,24 @@
|
||||
<script lang='ts'>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from "svelte";
|
||||
|
||||
export let ruleName;
|
||||
export let title
|
||||
export let title;
|
||||
export let value;
|
||||
export let min;
|
||||
export let max;
|
||||
export let step;
|
||||
export let unit = '';
|
||||
export let unit = "";
|
||||
export let condition;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function changeRuleCondition(newCondition) {
|
||||
condition = newCondition
|
||||
dispatch('changeCondition', { rule: ruleName, condition: newCondition });
|
||||
condition = newCondition;
|
||||
dispatch("changeCondition", { rule: ruleName, condition: newCondition });
|
||||
}
|
||||
|
||||
function changeValue(val) {
|
||||
dispatch('changeValue', { rule: ruleName, value: val });
|
||||
dispatch("changeValue", { rule: ruleName, value: val });
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -27,12 +27,12 @@
|
||||
{title?.replace('[%]','')} {condition} {value} {unit}
|
||||
|
||||
<label on:click={() => changeRuleCondition('under')} class="ml-5 cursor-pointer flex flex-row mr-2 justify-center items-center">
|
||||
<input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2"
|
||||
<input type="radio" class="radio checked:bg-[#fff] bg-[#09090B] border border-slate-800 mr-2"
|
||||
checked={condition === 'under'} name={ruleName} />
|
||||
<span class="label-text text-white">Under</span>
|
||||
</label>
|
||||
<label on:click={() => changeRuleCondition('over')} class="cursor-pointer flex flex-row ml-2 justify-center items-center">
|
||||
<input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2"
|
||||
<input type="radio" class="radio checked:bg-[#fff] bg-[#09090B] border border-slate-800 mr-2"
|
||||
checked={condition === 'over'} name={ruleName} />
|
||||
<span class="label-text text-white">Over</span>
|
||||
</label>
|
||||
@ -43,64 +43,117 @@
|
||||
</div>
|
||||
-->
|
||||
|
||||
|
||||
<!--Start Added Rules-->
|
||||
<div class="flex items-center justify-between space-x-2 px-1 py-1.5 text-smaller leading-tight text-default">
|
||||
<!--Start Added Rules-->
|
||||
<div
|
||||
class="flex items-center justify-between space-x-2 px-1 py-1.5 text-smaller leading-tight text-default"
|
||||
>
|
||||
<div class="text-white text-[1rem]">
|
||||
{title?.replace('[%]','')}
|
||||
</div>
|
||||
{title?.replace("[%]", "")}
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<button class="mr-1.5 cursor-pointer text-gray-300 sm:hover:text-red-500 focus:outline-none" title="Remove filter">
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="CurrentColor" style="max-width:40px">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
<button
|
||||
class="mr-1.5 cursor-pointer text-gray-300 sm:hover:text-red-500 focus:outline-none"
|
||||
title="Remove filter"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="CurrentColor"
|
||||
style="max-width:40px"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="relative inline-block text-left">
|
||||
<div class="dropdown dropdown-end">
|
||||
<button
|
||||
tabindex="0"
|
||||
class="bg-[#000] h-[33px] flex flex-row justify-between items-center w-[150px] xs:w-[140px] sm:w-[150px] px-3 text-white rounded-lg truncate"
|
||||
>
|
||||
<span class="truncate ml-2">
|
||||
{#if value === "" || condition === ""}
|
||||
Any
|
||||
{:else}
|
||||
{condition} {value}{unit}
|
||||
{/if}
|
||||
</span>
|
||||
<svg
|
||||
class=" ml-1 h-6 w-6 xs:ml-2 inline-block"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
style="max-width:40px"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<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>
|
||||
</button>
|
||||
<div class="relative inline-block text-left">
|
||||
<div class="dropdown dropdown-end">
|
||||
<button tabindex="0" class="bg-[#000] h-[33px] flex flex-row justify-between items-center w-[150px] xs:w-[140px] sm:w-[150px] px-3 text-white rounded-lg truncate">
|
||||
<span class="truncate ml-2">
|
||||
{#if value === '' || condition === ''}
|
||||
Any
|
||||
{:else}
|
||||
{condition} {value}{unit}
|
||||
{/if}
|
||||
</span>
|
||||
<svg class=" ml-1 h-6 w-6 xs:ml-2 inline-block" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px" aria-hidden="true">
|
||||
<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>
|
||||
</button>
|
||||
|
||||
<div class="dropdown-content absolute z-40 mt-2 rounded-md bg-[#181C1F] py-1 shadow-lg border border-gray-600 focus:outline-none" tabindex="0" role="menu">
|
||||
</button>
|
||||
|
||||
<div class="select-none space-y-1 p-1 pb-2 pr-2 text-sm">
|
||||
<div class="flex items-center justify-start gap-x-1">
|
||||
<div class="relative inline-block flex flex-row items-center justify-center m-auto">
|
||||
<label on:click={() => changeRuleCondition('under')} class="cursor-pointer flex flex-row mr-2 justify-center items-center">
|
||||
<input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2"
|
||||
checked={condition === 'under'} name={ruleName} />
|
||||
<span class="label-text text-white">Under</span>
|
||||
</label>
|
||||
<label on:click={() => changeRuleCondition('over')} class="cursor-pointer flex flex-row ml-2 justify-center items-center">
|
||||
<input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2"
|
||||
checked={condition === 'over'} name={ruleName} />
|
||||
<span class="label-text text-white">Over</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="thin-scrollbar dark:styled-scrollbar dark:right-scrollbar max-h-[250px] overflow-y-auto overflow-x-hidden overscroll-contain border-t border-gray-600
|
||||
dark:border-dark-500 xl:max-h-[297px]">
|
||||
{#each step as newValue}
|
||||
<button on:click={() => changeValue(newValue)} class="block w-full border-b border-gray-600 px-4 py-2 text-left text-sm text-white last:border-0 sm:hover:bg-gray-100 sm:hover:text-gray-900
|
||||
focus:bg-blue-100 focus:text-gray-900 focus:outline-none">
|
||||
{condition} {newValue}{unit}
|
||||
</button>
|
||||
{/each}
|
||||
<div
|
||||
class="dropdown-content absolute z-40 mt-2 rounded-md bg-[#181C1F] py-1 shadow-lg border border-gray-600 focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
>
|
||||
<div class="select-none space-y-1 p-1 pb-2 pr-2 text-sm">
|
||||
<div class="flex items-center justify-start gap-x-1">
|
||||
<div
|
||||
class="relative inline-block flex flex-row items-center justify-center m-auto"
|
||||
>
|
||||
<label
|
||||
on:click={() => changeRuleCondition("under")}
|
||||
class="cursor-pointer flex flex-row mr-2 justify-center items-center"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
class="radio checked:bg-[#fff] bg-[#09090B] border border-slate-800 mr-2"
|
||||
checked={condition === "under"}
|
||||
name={ruleName}
|
||||
/>
|
||||
<span class="label-text text-white">Under</span>
|
||||
</label>
|
||||
<label
|
||||
on:click={() => changeRuleCondition("over")}
|
||||
class="cursor-pointer flex flex-row ml-2 justify-center items-center"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
class="radio checked:bg-[#fff] bg-[#09090B] border border-slate-800 mr-2"
|
||||
checked={condition === "over"}
|
||||
name={ruleName}
|
||||
/>
|
||||
<span class="label-text text-white">Over</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="thin-scrollbar dark:styled-scrollbar dark:right-scrollbar max-h-[250px] overflow-y-auto overflow-x-hidden overscroll-contain border-t border-gray-600
|
||||
dark:border-dark-500 xl:max-h-[297px]"
|
||||
>
|
||||
{#each step as newValue}
|
||||
<button
|
||||
on:click={() => changeValue(newValue)}
|
||||
class="block w-full border-b border-gray-600 px-4 py-2 text-left text-sm text-white last:border-0 sm:hover:bg-gray-100 sm:hover:text-gray-900
|
||||
focus:bg-blue-100 focus:text-gray-900 focus:outline-none"
|
||||
>
|
||||
{condition}
|
||||
{newValue}{unit}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--End Added Rules-->
|
||||
<!--End Added Rules-->
|
||||
|
||||
@ -85,7 +85,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -242,7 +242,7 @@
|
||||
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/forecast/analyst`}
|
||||
class="rounded cursor-pointer w-full m-auto py-2 h-full mt-6 text-lg text-center font-bold text-white hover:bg-purple-700 bg-purple-600 transition duration-100"
|
||||
class="rounded cursor-pointer w-full m-auto py-2 h-full mt-6 text-lg text-center font-semibold text-black sm:hover:hover:bg-gray-300 bg-[#ffff] transition duration-100"
|
||||
>
|
||||
Stock Forecasts
|
||||
</a>
|
||||
|
||||
@ -146,7 +146,7 @@
|
||||
data: dates?.map((date, index) => [date, notionalQuantity[index]]),
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
color: "#FBCE3C",
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
],
|
||||
@ -231,7 +231,7 @@
|
||||
: ''} "
|
||||
>
|
||||
{#if activeIdx === i}
|
||||
<div class="absolute inset-0 rounded-lg bg-purple-600"></div>
|
||||
<div class="absolute inset-0 rounded-lg bg-[#fff]"></div>
|
||||
{/if}
|
||||
<span
|
||||
class="relative text-sm block font-medium duration-200 text-white"
|
||||
|
||||
@ -1,21 +1,23 @@
|
||||
<script lang='ts'>
|
||||
import toast from 'svelte-french-toast';
|
||||
import {commentAdded, commentUpdated, replyCommentClicked, editCommentClicked} from '$lib/store';
|
||||
|
||||
export let data;
|
||||
export let postId = '';
|
||||
export let placeholder = 'Leave a comment';
|
||||
export let commentId; //Important for replyComent when clicked Cancel it should close the TextEditor;
|
||||
export let inputValue = '';
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
import toast from "svelte-french-toast";
|
||||
import {
|
||||
commentAdded,
|
||||
commentUpdated,
|
||||
replyCommentClicked,
|
||||
editCommentClicked,
|
||||
} from "$lib/store";
|
||||
|
||||
export let data;
|
||||
export let postId = "";
|
||||
export let placeholder = "Leave a comment";
|
||||
export let commentId; //Important for replyComent when clicked Cancel it should close the TextEditor;
|
||||
export let inputValue = "";
|
||||
|
||||
let ref;
|
||||
let isLoaded = true;
|
||||
//let imageId = 'image-input';
|
||||
let expandField = commentId?.length !== 0 ? true : false;
|
||||
let imageInput = '';
|
||||
let imageInput = "";
|
||||
|
||||
/*
|
||||
const showPreview = (event) => {
|
||||
@ -30,146 +32,133 @@
|
||||
};
|
||||
*/
|
||||
|
||||
async function handleComment(event) {
|
||||
if(isLoaded === true && inputValue?.length !== 0)
|
||||
{
|
||||
if($editCommentClicked[commentId]) {
|
||||
toast.promise(
|
||||
updateComment(event),
|
||||
{
|
||||
loading: 'Updating...',
|
||||
success: 'Updated successfully!',
|
||||
error: 'Something went wrong. Please try again...',
|
||||
},
|
||||
{
|
||||
style: 'border-radius: 200px; background: #333; color: #fff;',
|
||||
async function handleComment(event) {
|
||||
if (isLoaded === true && inputValue?.length !== 0) {
|
||||
if ($editCommentClicked[commentId]) {
|
||||
toast.promise(
|
||||
updateComment(event),
|
||||
{
|
||||
loading: "Updating...",
|
||||
success: "Updated successfully!",
|
||||
error: "Something went wrong. Please try again...",
|
||||
},
|
||||
{
|
||||
style: "border-radius: 200px; background: #333; color: #fff;",
|
||||
},
|
||||
);
|
||||
} else {
|
||||
toast.promise(
|
||||
createComment(event),
|
||||
{
|
||||
loading: "Creating...",
|
||||
success: "Commented successfully!",
|
||||
error: "Something went wrong. Please try again...",
|
||||
},
|
||||
{
|
||||
style: "border-radius: 200px; background: #333; color: #fff;",
|
||||
},
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
else {
|
||||
toast.promise(
|
||||
createComment(event),
|
||||
{
|
||||
loading: 'Creating...',
|
||||
success: 'Commented successfully!',
|
||||
error: 'Something went wrong. Please try again...',
|
||||
},
|
||||
{
|
||||
style: 'border-radius: 200px; background: #333; color: #fff;',
|
||||
}
|
||||
);
|
||||
|
||||
}
|
||||
isLoaded = true;
|
||||
}
|
||||
isLoaded = true;
|
||||
}
|
||||
|
||||
|
||||
const createComment = async (event) => {
|
||||
const createComment = async (event) => {
|
||||
event.preventDefault(); // prevent the default form submission behavior
|
||||
let output;
|
||||
|
||||
try {
|
||||
if(isLoaded === true && inputValue?.length !== 0)
|
||||
{
|
||||
if (isLoaded === true && inputValue?.length !== 0) {
|
||||
isLoaded = false;
|
||||
let formData = new FormData();
|
||||
|
||||
if ($replyCommentClicked[commentId]) {
|
||||
formData.append('reply', commentId)
|
||||
formData.append("reply", commentId);
|
||||
}
|
||||
formData.append('comment', inputValue)
|
||||
formData.append('post', postId)
|
||||
formData.append('image', imageInput.length !== 0 ? imageInput[0] : '')
|
||||
formData.append('user', data?.user?.id)
|
||||
formData.append("comment", inputValue);
|
||||
formData.append("post", postId);
|
||||
formData.append("image", imageInput.length !== 0 ? imageInput[0] : "");
|
||||
formData.append("user", data?.user?.id);
|
||||
|
||||
|
||||
const response = await fetch('/api/create-comment', {
|
||||
method: 'POST',
|
||||
const response = await fetch("/api/create-comment", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
}); // make a POST request to the server with the FormData object
|
||||
}); // make a POST request to the server with the FormData object
|
||||
|
||||
output = await response?.json()
|
||||
output = await response?.json();
|
||||
|
||||
if (output[0] === "success") {
|
||||
//Weird bug pocketbase says +1 for upvote but when i console.log(output[1]) i get upvote 0
|
||||
//Weird bug pocketbase does not expand correctly alreadyVoted when I create the comment but it works
|
||||
//when i retrieve all comments through the endpoint get-all-comments in fastify.
|
||||
//To circumvent this problem we manually check it again here:
|
||||
|
||||
if (output[0] === 'success') {
|
||||
//Weird bug pocketbase says +1 for upvote but when i console.log(output[1]) i get upvote 0
|
||||
//Weird bug pocketbase does not expand correctly alreadyVoted when I create the comment but it works
|
||||
//when i retrieve all comments through the endpoint get-all-comments in fastify.
|
||||
//To circumvent this problem we manually check it again here:
|
||||
let newComment = output[1];
|
||||
|
||||
let newComment = output[1];
|
||||
if (newComment?.upvote === 0) {
|
||||
newComment.upvote = 1;
|
||||
}
|
||||
|
||||
if (newComment?.upvote === 0) {
|
||||
newComment.upvote = 1;
|
||||
}
|
||||
if (!newComment?.expand["alreadyVoted(comment)"]) {
|
||||
newComment.expand["alreadyVoted(comment)"] = [];
|
||||
}
|
||||
|
||||
if (!newComment?.expand["alreadyVoted(comment)"]) {
|
||||
newComment.expand["alreadyVoted(comment)"] = [];
|
||||
}
|
||||
const alreadyVotedArray = newComment?.expand["alreadyVoted(comment)"];
|
||||
const hasAlreadyVoted = alreadyVotedArray?.some(
|
||||
(vote) => vote.type === "upvote" && vote.user === newComment?.user,
|
||||
);
|
||||
|
||||
const alreadyVotedArray = newComment?.expand["alreadyVoted(comment)"];
|
||||
const hasAlreadyVoted = alreadyVotedArray?.some(vote => vote.type === 'upvote' && vote.user === newComment?.user);
|
||||
if (!hasAlreadyVoted) {
|
||||
alreadyVotedArray.push({ type: "upvote", user: newComment?.user });
|
||||
}
|
||||
|
||||
if (!hasAlreadyVoted) {
|
||||
alreadyVotedArray.push({ type: 'upvote', user: newComment?.user });
|
||||
}
|
||||
$commentAdded = newComment;
|
||||
|
||||
inputValue = "";
|
||||
imageInput = "";
|
||||
|
||||
$commentAdded = newComment;
|
||||
|
||||
inputValue = '';
|
||||
imageInput = '';
|
||||
|
||||
handleCancel()
|
||||
|
||||
}
|
||||
handleCancel();
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
catch(e) {
|
||||
console.log(e)
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const updateComment = async (event) => {
|
||||
const updateComment = async (event) => {
|
||||
event.preventDefault(); // prevent the default form submission behavior
|
||||
let output;
|
||||
|
||||
try {
|
||||
if(isLoaded === true && inputValue?.length !== 0)
|
||||
{
|
||||
if (isLoaded === true && inputValue?.length !== 0) {
|
||||
isLoaded = false;
|
||||
let formData = new FormData();
|
||||
formData.append('comment', inputValue?.trimStart())
|
||||
formData.append('commentId', commentId)
|
||||
formData.append("comment", inputValue?.trimStart());
|
||||
formData.append("commentId", commentId);
|
||||
|
||||
const response = await fetch('/api/update-comment', {
|
||||
method: 'POST',
|
||||
const response = await fetch("/api/update-comment", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
}); // make a POST request to the server with the FormData object
|
||||
}); // make a POST request to the server with the FormData object
|
||||
|
||||
output = await response?.json()
|
||||
output = await response?.json();
|
||||
|
||||
if (output[0] === "success") {
|
||||
$commentUpdated = output[1];
|
||||
|
||||
if (output[0] === 'success') {
|
||||
$commentUpdated = output[1];
|
||||
|
||||
inputValue = '';
|
||||
imageInput = '';
|
||||
handleCancel()
|
||||
|
||||
}
|
||||
inputValue = "";
|
||||
imageInput = "";
|
||||
handleCancel();
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
catch(e) {
|
||||
console.log(e)
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
function handleInput(event) {
|
||||
function handleInput(event) {
|
||||
inputValue = event.target.value;
|
||||
/*
|
||||
/*
|
||||
const textarea = event.target;
|
||||
if($screenWidth >= 640)
|
||||
{
|
||||
@ -181,67 +170,65 @@ function handleInput(event) {
|
||||
textarea.style.height = Math.min(textarea.scrollHeight, 10000) + 'px';
|
||||
}
|
||||
*/
|
||||
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
function handleCancel() {
|
||||
if (commentId?.length !== 0) {
|
||||
$replyCommentClicked[commentId] = false;
|
||||
$editCommentClicked[commentId] = false;
|
||||
}
|
||||
|
||||
if (commentId?.length !== 0) {
|
||||
$replyCommentClicked[commentId] = false;
|
||||
$editCommentClicked[commentId] = false;
|
||||
inputValue = "";
|
||||
imageInput = "";
|
||||
expandField = false;
|
||||
|
||||
const textarea = document.querySelector("textarea");
|
||||
textarea.style.height = "48px"; // 48px are h-12 in tailwindcss
|
||||
}
|
||||
|
||||
inputValue = '';
|
||||
imageInput = '';
|
||||
expandField = false;
|
||||
|
||||
const textarea = document.querySelector('textarea');
|
||||
textarea.style.height = '48px'; // 48px are h-12 in tailwindcss
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
// Function to adjust textarea height
|
||||
function adjustHeight() {
|
||||
// Function to adjust textarea height
|
||||
function adjustHeight() {
|
||||
if (ref) {
|
||||
ref.style.height = 'auto';
|
||||
ref.style.height = Math.min(ref.scrollHeight, 10000) + 'px';
|
||||
ref.style.height = "auto";
|
||||
ref.style.height = Math.min(ref.scrollHeight, 10000) + "px";
|
||||
}
|
||||
}
|
||||
|
||||
function handleImageInput(event) {
|
||||
function handleImageInput(event) {
|
||||
imageInput = event.target.files;
|
||||
//console.log(imageInput)
|
||||
|
||||
}
|
||||
|
||||
|
||||
$: {
|
||||
if (expandField === true && typeof window !== 'undefined') {
|
||||
ref?.focus()
|
||||
if (expandField === true && typeof window !== "undefined") {
|
||||
ref?.focus();
|
||||
adjustHeight();
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
|
||||
|
||||
<div class="p-2 w-full max-w-xl mr-auto overflow-y-scroll {commentId?.length !== 0 ? '-ml-2' : ''}">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
|
||||
|
||||
<div
|
||||
class="p-2 w-full max-w-xl mr-auto overflow-y-scroll {commentId?.length !== 0
|
||||
? '-ml-2'
|
||||
: ''}"
|
||||
>
|
||||
<textarea
|
||||
on:click={() => expandField = true}
|
||||
class="rounded-lg text-sm {expandField ? 'min-h-24 h-auto border-[#1C4090]' : 'h-12 border-gray-500'} overflow-hidden sm:hover:border-[#1C4090] sm:hover:ring-1 transition sm:ease-out placeholder-gray-300 w-full bg-[#27272A] text-white border border-1 ring-2 sm:ring-0 ring-[#1C4090]"
|
||||
placeholder={placeholder}
|
||||
on:click={() => (expandField = true)}
|
||||
class="rounded-lg text-sm {expandField
|
||||
? 'min-h-24 h-auto border-[#1C4090]'
|
||||
: 'h-12 border-gray-500'} overflow-hidden sm:hover:border-[#1C4090] sm:hover:ring-1 transition sm:ease-out placeholder-gray-300 w-full bg-[#27272A] text-white border border-1 ring-2 sm:ring-0 ring-[#1C4090]"
|
||||
{placeholder}
|
||||
value={inputValue}
|
||||
bind:this={ref}
|
||||
on:input={handleInput}
|
||||
/>
|
||||
/>
|
||||
|
||||
{#if expandField}
|
||||
{#if expandField}
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-row items-center justify-end mt-4">
|
||||
<!--
|
||||
<!--
|
||||
<div class="relative">
|
||||
<label for={imageId} class="{imageInput.length !== 0 ? 'hidden' : ''} inline-flex mr-auto items-center py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg hover:bg-gray-800 cursor-pointer">
|
||||
<svg class="w-6 h-6 inline-block" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="0.4" d="M22.0206 16.8198L18.8906 9.49978C18.3206 8.15978 17.4706 7.39978 16.5006 7.34978C15.5406 7.29978 14.6106 7.96978 13.9006 9.24978L12.0006 12.6598C11.6006 13.3798 11.0306 13.8098 10.4106 13.8598C9.78063 13.9198 9.15063 13.5898 8.64063 12.9398L8.42063 12.6598C7.71063 11.7698 6.83063 11.3398 5.93063 11.4298C5.03063 11.5198 4.26063 12.1398 3.75063 13.1498L2.02063 16.5998C1.40063 17.8498 1.46063 19.2998 2.19063 20.4798C2.92063 21.6598 4.19063 22.3698 5.58063 22.3698H18.3406C19.6806 22.3698 20.9306 21.6998 21.6706 20.5798C22.4306 19.4598 22.5506 18.0498 22.0206 16.8198Z" fill="#A6ADBB" ></path> <path d="M6.96984 8.38012C8.83657 8.38012 10.3498 6.86684 10.3498 5.00012C10.3498 3.13339 8.83657 1.62012 6.96984 1.62012C5.10312 1.62012 3.58984 3.13339 3.58984 5.00012C3.58984 6.86684 5.10312 8.38012 6.96984 8.38012Z" fill="#E5E7EB"></path> </g></svg>
|
||||
@ -257,37 +244,45 @@ function handleImageInput(event) {
|
||||
</div>
|
||||
-->
|
||||
|
||||
<label on:click={handleCancel} class="inline-flex justify-end items-center py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg hover:bg-gray-800 cursor-pointer mr-3">
|
||||
Cancel
|
||||
<label
|
||||
on:click={handleCancel}
|
||||
class="inline-flex justify-end items-center py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg hover:bg-gray-800 cursor-pointer mr-3"
|
||||
>
|
||||
Cancel
|
||||
</label>
|
||||
{#if isLoaded}
|
||||
<label on:click={handleComment} class="inline-flex justify-end items-center bg-purple-600 sm:hover:bg-purple-700 duration-100 transition {inputValue.length !== 0 ? 'opacity-100 cursor-pointer' : 'opacity-60'} py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg focus:ring-purple-300">
|
||||
Post
|
||||
<label
|
||||
on:click={handleComment}
|
||||
class="inline-flex justify-end items-center bg-[#fff] sm:hover:bg-gray-300 duration-100 transition {inputValue.length !==
|
||||
0
|
||||
? 'opacity-100 cursor-pointer'
|
||||
: 'opacity-60'} py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg focus:ring-purple-300"
|
||||
>
|
||||
Post
|
||||
</label>
|
||||
{:else}
|
||||
<label class="cursor-not-allowed inline-flex justify-end items-center bg-purple-600 bg-opacity-40 py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg focus:ring-purple-300">
|
||||
Post
|
||||
</label>
|
||||
<label
|
||||
class="cursor-not-allowed inline-flex justify-end items-center bg-[#fff] bg-opacity-40 py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg focus:ring-purple-300"
|
||||
>
|
||||
Post
|
||||
</label>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
|
||||
{#if imageInput.length !== 0}
|
||||
<div class="relative mr-auto -mt-8">
|
||||
<label on:click={() => imageInput = ''} class="text-black w-7 h-7 text-center m-auto flex justify-center items-center rounded-full bg-white absolute top-0 -right-2">✕</label>
|
||||
<img class="object-contain max-w-full max-h-[150px] mx-auto"
|
||||
alt="Image preview"
|
||||
id="image-preview" />
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
|
||||
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if imageInput.length !== 0}
|
||||
<div class="relative mr-auto -mt-8">
|
||||
<label
|
||||
on:click={() => (imageInput = "")}
|
||||
class="text-black w-7 h-7 text-center m-auto flex justify-center items-center rounded-full bg-white absolute top-0 -right-2"
|
||||
>✕</label
|
||||
>
|
||||
<img
|
||||
class="object-contain max-w-full max-h-[150px] mx-auto"
|
||||
alt="Image preview"
|
||||
id="image-preview"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -91,7 +91,7 @@
|
||||
<div class="flex flex-row pt-1 pb-2">
|
||||
{#if earningDate}
|
||||
<div
|
||||
class="badge bg-[#FBCE3C] gap-2 mt-2 font-semibold text-sm text-black"
|
||||
class="badge bg-[#fff] gap-2 mt-2 font-semibold text-sm text-black"
|
||||
>
|
||||
Earnings Call - {earningDate}
|
||||
</div>
|
||||
|
||||
@ -1,83 +1,116 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
etfTicker,
|
||||
stockTicker,
|
||||
cryptoTicker,
|
||||
screenWidth,
|
||||
} from "$lib/store";
|
||||
import { goto } from "$app/navigation";
|
||||
import { abbreviateNumber, formatString } from "$lib/utils";
|
||||
import defaultLogo from "$lib/images/stocks/logo/default_logo.png";
|
||||
|
||||
import {etfTicker, stockTicker, cryptoTicker, screenWidth} from '$lib/store';
|
||||
import { goto } from '$app/navigation';
|
||||
import { abbreviateNumber, formatString } from '$lib/utils';
|
||||
import defaultLogo from '$lib/images/stocks/logo/default_logo.png';
|
||||
export let topHoldingList;
|
||||
|
||||
export let topHoldingList;
|
||||
let totalAssetPercentage = 0;
|
||||
|
||||
let totalAssetPercentage = 0;
|
||||
|
||||
async function stockSelector(ticker:string)
|
||||
{
|
||||
if (ticker?.length !== 0 && !['BTC', 'USD']?.includes(ticker)) {
|
||||
window?.scroll({ top: 0, left: 0, behavior: 'smooth' });
|
||||
stockTicker.update(value => ticker);
|
||||
goto("/stocks/"+ticker+"/")
|
||||
async function stockSelector(ticker: string) {
|
||||
if (ticker?.length !== 0 && !["BTC", "USD"]?.includes(ticker)) {
|
||||
window?.scroll({ top: 0, left: 0, behavior: "smooth" });
|
||||
stockTicker.update((value) => ticker);
|
||||
goto("/stocks/" + ticker + "/");
|
||||
} else if (ticker === "BTC") {
|
||||
window?.scroll({ top: 0, left: 0, behavior: "smooth" });
|
||||
cryptoTicker.update((value) => "BTCUSD");
|
||||
goto("/crypto/BTCUSD");
|
||||
}
|
||||
else if (ticker === 'BTC') {
|
||||
window?.scroll({ top: 0, left: 0, behavior: 'smooth' });
|
||||
cryptoTicker.update(value => 'BTCUSD');
|
||||
goto("/crypto/BTCUSD")
|
||||
}
|
||||
|
||||
$: {
|
||||
if ($etfTicker && typeof window !== "undefined") {
|
||||
totalAssetPercentage = topHoldingList
|
||||
?.slice(0, 5)
|
||||
?.reduce((acc, current) => acc + current?.weightPercentage, 0)
|
||||
?.toFixed(2);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$: {
|
||||
if($etfTicker && typeof window !== 'undefined')
|
||||
{
|
||||
totalAssetPercentage = topHoldingList?.slice(0, 5)?.reduce((acc, current) => acc + current?.weightPercentage, 0)?.toFixed(2);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--Start Similar Stocks Card -->
|
||||
|
||||
<div class="space-y-3 lg:pt-5 lg:{topHoldingList?.length !== 0 ? '' : 'hidden'}">
|
||||
|
||||
<div class="sm:rounded-sm shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px]">
|
||||
|
||||
<div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">
|
||||
|
||||
|
||||
<div class="-mt-10 lg:mt-0 flex flex-row items-center w-full ml-2 pb-2 p-3">
|
||||
<span class="hidden lg:block font-bold text-white text-2xl">
|
||||
Top Holdings
|
||||
</span>
|
||||
<span class="text-white font-semibold ml-auto text-[1rem]">
|
||||
{totalAssetPercentage}% of assets
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{#if topHoldingList?.length !== 0}
|
||||
|
||||
|
||||
|
||||
<div class="flex justify-start items-center w-full m-auto overflow-hidden">
|
||||
<table class="table table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-white font-semibold text-sm text-start bg-[#000] lg:bg-[#09090B]">Company</th>
|
||||
<th class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#09090B]">Market Value</th>
|
||||
<th class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#09090B]">Portfolio</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each topHoldingList?.slice(0,5) as item}
|
||||
|
||||
<!--Start Similar Stocks Card -->
|
||||
|
||||
<div
|
||||
class="space-y-3 lg:pt-5 lg:{topHoldingList?.length !== 0 ? '' : 'hidden'}"
|
||||
>
|
||||
<div
|
||||
class="sm:rounded-sm shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <=
|
||||
800
|
||||
? 'w-screen pt-16'
|
||||
: ''} md:w-[420px] xl:w-[450px]"
|
||||
>
|
||||
<div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">
|
||||
<div
|
||||
class="-mt-10 lg:mt-0 flex flex-row items-center w-full ml-2 pb-2 p-3"
|
||||
>
|
||||
<span class="hidden lg:block font-bold text-white text-2xl">
|
||||
Top Holdings
|
||||
</span>
|
||||
<span class="text-white font-semibold ml-auto text-[1rem]">
|
||||
{totalAssetPercentage}% of assets
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{#if topHoldingList?.length !== 0}
|
||||
<div
|
||||
class="flex justify-start items-center w-full m-auto overflow-hidden"
|
||||
>
|
||||
<table
|
||||
class="table table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="text-white font-semibold text-sm text-start bg-[#000] lg:bg-[#09090B]"
|
||||
>Company</th
|
||||
>
|
||||
<th
|
||||
class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#09090B]"
|
||||
>Market Value</th
|
||||
>
|
||||
<th
|
||||
class="text-white font-semibold text-sm text-end bg-[#000] lg:bg-[#09090B]"
|
||||
>Portfolio</th
|
||||
>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each topHoldingList?.slice(0, 5) as item}
|
||||
{#if item?.asset !== null}
|
||||
<tr on:click={() => stockSelector(item?.asset)} class="lg:shake-ticker sm:hover:text-white text-blue-400 cursor-pointer lg:hover:bg-[#245073] lg:hover:bg-opacity-[0.2] bg-[#000] lg:bg-[#09090B] border-b border-[#000] lg:border-[#27272A]">
|
||||
<tr
|
||||
on:click={() => stockSelector(item?.asset)}
|
||||
class="lg:shake-ticker sm:hover:text-white text-blue-400 cursor-pointer lg:hover:bg-[#245073] lg:hover:bg-opacity-[0.2] bg-[#000] lg:bg-[#09090B] border-b border-[#000] lg:border-[#27272A]"
|
||||
>
|
||||
<td class="">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="rounded-full w-10 h-10 relative flex items-center justify-center">
|
||||
<img style="clip-path: circle(50%);" class="w-6 h-6 rounded-full" src={item?.asset?.length !== 0 ? `https://financialmodelingprep.com/image-stock/${item?.asset}.png` : defaultLogo} loading="lazy"/>
|
||||
<div
|
||||
class="rounded-full w-10 h-10 relative flex items-center justify-center"
|
||||
>
|
||||
<img
|
||||
style="clip-path: circle(50%);"
|
||||
class="w-6 h-6 rounded-full"
|
||||
src={item?.asset?.length !== 0
|
||||
? `https://financialmodelingprep.com/image-stock/${item?.asset}.png`
|
||||
: defaultLogo}
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col ml-3 w-full">
|
||||
<span class="text-sm font-medium">{item?.asset ?? '-'}</span>
|
||||
<span class="text-sm font-medium"
|
||||
>{item?.asset ?? "-"}</span
|
||||
>
|
||||
<span class="text-white text-sm">
|
||||
{#if typeof item?.name !== 'undefined'}
|
||||
{item?.name?.length > 20 ? formatString(item?.name?.slice(0,20)) + "..." : formatString(item?.name)}
|
||||
{#if typeof item?.name !== "undefined"}
|
||||
{item?.name?.length > 20
|
||||
? formatString(item?.name?.slice(0, 20)) + "..."
|
||||
: formatString(item?.name)}
|
||||
{:else}
|
||||
n/a
|
||||
{/if}
|
||||
@ -86,36 +119,46 @@ $: {
|
||||
</div>
|
||||
</td>
|
||||
|
||||
|
||||
<td class="text-white text-end font-semibold ">
|
||||
{item?.marketValue !== null ? abbreviateNumber(item?.marketValue, true) : '-'}
|
||||
</td>
|
||||
|
||||
<td class="text-white font-semibold text-end">
|
||||
{abbreviateNumber(item?.weightPercentage?.toFixed(2))}%
|
||||
</td>
|
||||
<td class="text-white text-end font-semibold">
|
||||
{item?.marketValue !== null
|
||||
? abbreviateNumber(item?.marketValue, true)
|
||||
: "-"}
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<td class="text-white font-semibold text-end">
|
||||
{abbreviateNumber(item?.weightPercentage?.toFixed(2))}%
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<label for="topHoldingModal" on:click={() => goto(`/etf/${$etfTicker}/holdings`)} class="rounded-lg cursor-pointer w-11/12 md:w-3/4 lg:w-11/12 py-2 h-full mt-8 lg:mt-6 text-[1rem] text-center font-semibold text-white m-auto hover:bg-purple-700 bg-purple-600 transition duration-100 ease-in">
|
||||
View All Holdings
|
||||
</label>
|
||||
|
||||
{:else}
|
||||
<h2 class="mt-20 justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
|
||||
No data available
|
||||
<svg class="w-10 lg:w-12 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#334155" d="M18.68 12.32a4.49 4.49 0 0 0-6.36.01a4.49 4.49 0 0 0 0 6.36a4.508 4.508 0 0 0 5.57.63L21 22.39L22.39 21l-3.09-3.11c1.13-1.77.87-4.09-.62-5.57m-1.41 4.95c-.98.98-2.56.97-3.54 0c-.97-.98-.97-2.56.01-3.54c.97-.97 2.55-.97 3.53 0c.97.98.97 2.56 0 3.54M10.9 20.1a6.527 6.527 0 0 1-1.48-2.32C6.27 17.25 4 15.76 4 14v3c0 2.21 3.58 4 8 4c-.4-.26-.77-.56-1.1-.9M4 9v3c0 1.68 2.07 3.12 5 3.7v-.2c0-.93.2-1.85.58-2.69C6.34 12.3 4 10.79 4 9m8-6C7.58 3 4 4.79 4 7c0 2 3 3.68 6.85 4h.05c1.2-1.26 2.86-2 4.6-2c.91 0 1.81.19 2.64.56A3.215 3.215 0 0 0 20 7c0-2.21-3.58-4-8-4Z"/></svg>
|
||||
</h2>
|
||||
{/if}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--End Similar Stocks Card -->
|
||||
|
||||
<label
|
||||
for="topHoldingModal"
|
||||
on:click={() => goto(`/etf/${$etfTicker}/holdings`)}
|
||||
class="rounded-lg cursor-pointer w-11/12 md:w-3/4 lg:w-11/12 py-2 h-full mt-8 lg:mt-6 text-[1rem] text-center font-semibold text-white m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100 ease-in"
|
||||
>
|
||||
View All Holdings
|
||||
</label>
|
||||
{:else}
|
||||
<h2
|
||||
class="mt-20 justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto"
|
||||
>
|
||||
No data available
|
||||
<svg
|
||||
class="w-10 lg:w-12 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="#334155"
|
||||
d="M18.68 12.32a4.49 4.49 0 0 0-6.36.01a4.49 4.49 0 0 0 0 6.36a4.508 4.508 0 0 0 5.57.63L21 22.39L22.39 21l-3.09-3.11c1.13-1.77.87-4.09-.62-5.57m-1.41 4.95c-.98.98-2.56.97-3.54 0c-.97-.98-.97-2.56.01-3.54c.97-.97 2.55-.97 3.53 0c.97.98.97 2.56 0 3.54M10.9 20.1a6.527 6.527 0 0 1-1.48-2.32C6.27 17.25 4 15.76 4 14v3c0 2.21 3.58 4 8 4c-.4-.26-.77-.56-1.1-.9M4 9v3c0 1.68 2.07 3.12 5 3.7v-.2c0-.93.2-1.85.58-2.69C6.34 12.3 4 10.79 4 9m8-6C7.58 3 4 4.79 4 7c0 2 3 3.68 6.85 4h.05c1.2-1.26 2.86-2 4.6-2c.91 0 1.81.19 2.64.56A3.215 3.215 0 0 0 20 7c0-2.21-3.58-4-8-4Z"
|
||||
/></svg
|
||||
>
|
||||
</h2>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--End Similar Stocks Card -->
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
|
||||
<a
|
||||
href="/pricing"
|
||||
class="mt-10 flex justify-center text-[1rem] items-center px-5 w-fit m-auto rounded-md btn text-white bg-purple-600 hover:bg-purple-500 transition duration-150 ease-in-out group"
|
||||
class="mt-10 flex justify-center text-[1rem] items-center px-5 w-fit m-auto rounded-md btn text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-150 ease-in-out group"
|
||||
>
|
||||
Become a Pro
|
||||
<span
|
||||
|
||||
@ -78,7 +78,7 @@
|
||||
>
|
||||
{#if latestInfoDate(item?.date)}
|
||||
<label
|
||||
class="bg-[#FBCE3C] rounded text-black font-semibold text-xs px-2 py-0.5 ml-3"
|
||||
class="bg-[#fff] rounded text-black font-semibold text-xs px-2 py-0.5 ml-3"
|
||||
>New</label
|
||||
>
|
||||
{/if}
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
|
||||
<TabsPrimitive.Trigger
|
||||
class={cn(
|
||||
" inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-2 text-[1rem] font-semibold ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[#FBCE3C] data-[state=active]:text-black data-[state=active]:shadow-sm",
|
||||
" inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-2 text-[1rem] font-semibold ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[#fff] data-[state=active]:text-black data-[state=active]:shadow-sm",
|
||||
className,
|
||||
)}
|
||||
{value}
|
||||
|
||||
@ -914,7 +914,7 @@ const handleTwitchMessage = (event) => {
|
||||
{:else}
|
||||
<a
|
||||
href="/login"
|
||||
class="inline-flex items-center justify-center rounded-lg bg-purple-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition-all duration-150 hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600"
|
||||
class="inline-flex items-center justify-center rounded-md bg-[#fff] px-4 py-2 text-sm font-semibold text-black shadow-sm transition-all duration-150 sm:hover:bg-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600"
|
||||
>
|
||||
Login
|
||||
</a>
|
||||
|
||||
@ -146,7 +146,7 @@
|
||||
<!--
|
||||
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial === true}
|
||||
<div
|
||||
class="mb-5 relative isolate sm:rounded text-center flex justify-center items-center gap-x-6 overflow-hidden bg-purple-600 px-6 py-3.5 sm:py-2.5 sm:px-3.5 sm:before:flex-1"
|
||||
class="mb-5 relative isolate sm:rounded text-center flex justify-center items-center gap-x-6 overflow-hidden bg-[#fff] px-6 py-3.5 sm:py-2.5 sm:px-3.5 sm:before:flex-1"
|
||||
>
|
||||
<div
|
||||
class="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
|
||||
@ -177,12 +177,12 @@
|
||||
class="mx-2 inline h-0.5 w-0.5 fill-current"
|
||||
aria-hidden="true"><circle cx="1" cy="1" r="1" /></svg
|
||||
>
|
||||
Save <strong class="text-[#FBCE3C]">16%</strong> on Pro Subscription and
|
||||
Save <strong class="text-[#fff]">16%</strong> on Pro Subscription and
|
||||
boost your investing game!
|
||||
</p>
|
||||
<a
|
||||
href="/pricing"
|
||||
class="flex-none rounded-full m-auto sm:m-0 px-3.5 py-1 text-[1rem] font-semibold text-black shadow-sm bg-[#FBCE3C] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"
|
||||
class="flex-none rounded-full m-auto sm:m-0 px-3.5 py-1 text-[1rem] font-semibold text-black shadow-sm bg-[#fff] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"
|
||||
>
|
||||
Get Pro Now <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
@ -207,7 +207,7 @@
|
||||
</a>
|
||||
<div class="absolute top-[-1.2rem] -right-5 sm:-right-8 rotate-[7deg]">
|
||||
<span
|
||||
class="bg-[#FBCE3C] text-black text-sm sm:text-[0.9rem] rounded font-semibold sm:me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300"
|
||||
class="bg-[#fff] text-black text-sm sm:text-[0.9rem] rounded font-semibold sm:me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300"
|
||||
>
|
||||
New
|
||||
</span>
|
||||
@ -218,7 +218,7 @@
|
||||
<h1
|
||||
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"
|
||||
>
|
||||
Clear & <span class="italic text-[#FBCE3C]">Simple</span> Market Insight.
|
||||
Clear & <span class="italic text-[#fff]">Simple</span> Market Insight.
|
||||
</h1>
|
||||
|
||||
<h1
|
||||
@ -430,7 +430,7 @@
|
||||
>
|
||||
<a
|
||||
href="/options-flow"
|
||||
class="ml-auto rounded-md text-xs sm:text-sm px-2 sm:px-3 py-2 font-semibold bg-[#FBCE3C] text-black"
|
||||
class="ml-auto rounded-md text-xs sm:text-sm px-2 sm:px-3 py-2 font-semibold bg-[#fff] text-black"
|
||||
>
|
||||
View All
|
||||
<ArrowUpRight
|
||||
@ -627,7 +627,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
@ -649,7 +649,7 @@
|
||||
>
|
||||
<a
|
||||
href="/earnings-calendar"
|
||||
class="ml-auto rounded-md text-xs sm:text-sm px-2 sm:px-3 py-2 font-semibold bg-[#FBCE3C] text-black"
|
||||
class="ml-auto rounded-md text-xs sm:text-sm px-2 sm:px-3 py-2 font-semibold bg-[#fff] text-black"
|
||||
>
|
||||
View All
|
||||
<ArrowUpRight
|
||||
@ -713,7 +713,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
@ -792,7 +792,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
<script lang="ts">
|
||||
|
||||
|
||||
import { numberOfUnreadNotification } from '$lib/store';
|
||||
import { numberOfUnreadNotification } from "$lib/store";
|
||||
|
||||
export let data;
|
||||
/*
|
||||
@ -18,272 +16,389 @@
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
||||
|
||||
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} About · stocknear</title>
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} About
|
||||
· stocknear</title
|
||||
>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<meta name="description" content="Welcome to Stocknear — a site that aims to be the internet's best source of free stock data and information for small investors.">
|
||||
<meta
|
||||
name="description"
|
||||
content="Welcome to Stocknear — a site that aims to be the internet's best source of free stock data and information for small investors."
|
||||
/>
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content="About · stocknear"/>
|
||||
<meta property="og:description" content="Welcome to Stocknear — a site that aims to be the internet's best source of free stock data and information for small investors.">
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:title" content="About · stocknear" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Welcome to Stocknear — a site that aims to be the internet's best source of free stock data and information for small investors."
|
||||
/>
|
||||
<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="About · stocknear"/>
|
||||
<meta name="twitter:description" content="Welcome to Stocknear — a site that aims to be the internet's best source of free stock data and information for small investors.">
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="About · stocknear" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="Welcome to Stocknear — a site that aims to be the internet's best source of free stock data and information for small investors."
|
||||
/>
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
</svelte:head>
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<div class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-10 mb-40">
|
||||
|
||||
<!--Start Mission-->
|
||||
<div class="bg-[#09090B] w-full hover:border-slate-500 border-slate-600 h-auto sm:p-10 mt-3">
|
||||
<div
|
||||
class="bg-[#09090B] w-full hover:border-slate-500 border-slate-600 h-auto sm:p-10 mt-3"
|
||||
>
|
||||
<div class="text-white text-3xl sm:text-5xl text-center p-3 sm:mt-5">
|
||||
<span class="font-bold">
|
||||
A stock analysis platform by the users, for the users.
|
||||
</span>
|
||||
<span class="font-bold">
|
||||
A stock analysis platform by the users, for the users.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="text-white text-[1rem] sm:text-lg mt-3 text-center px-5">
|
||||
Our mission is to create the first large-scale stock analysis platform in which the platform's interests are aligned with those of the user—a platform founded on ethical design principles. At the heart of these principles is the concept of complete transparency.
|
||||
Our mission is to create the first large-scale stock analysis platform
|
||||
in which the platform's interests are aligned with those of the user—a
|
||||
platform founded on ethical design principles. At the heart of these
|
||||
principles is the concept of complete transparency.
|
||||
|
||||
<!-- Start Image -->
|
||||
<div class="m-auto flex justify-center mt-6">
|
||||
<div class="relative">
|
||||
<div class="z-1 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
||||
<img class="w-24 sm:w-28 mr-4" src={cloudFrontUrl+"/assets/globe.png"} alt="logo" loading="lazy">
|
||||
</div>
|
||||
<svg id="visual" viewBox="0 0 960 540" width="380" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
|
||||
<defs>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="12" result="glow"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="glow"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g transform="translate(506.6556351091302 253.49315711627338)">
|
||||
<path d="M141.5 -60.2C185.5 -5.4 224.8 73.5 200.5 122.1C176.1 170.7 88 188.8 -4.7 191.5C-97.4 194.3 -194.9 181.5 -236.6 122.9C-278.3 64.3 -264.3 -40.1 -215.6 -97.5C-166.9 -155 -83.4 -165.5 -17.4 -155.5C48.7 -145.5 97.4 -114.9 141.5 -60.2" fill="#1E40AF" stroke-width="10" filter="url(#glow)"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- Start Image -->
|
||||
<div class="m-auto flex justify-center mt-6">
|
||||
<div class="relative">
|
||||
<div
|
||||
class="z-1 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
||||
>
|
||||
<img
|
||||
class="w-24 sm:w-28 mr-4"
|
||||
src={cloudFrontUrl + "/assets/globe.png"}
|
||||
alt="logo"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<!-- End Image -->
|
||||
<svg
|
||||
id="visual"
|
||||
viewBox="0 0 960 540"
|
||||
width="380"
|
||||
height="200"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
version="1.1"
|
||||
>
|
||||
<defs>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="12" result="glow" />
|
||||
<feMerge>
|
||||
<feMergeNode in="glow" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g transform="translate(506.6556351091302 253.49315711627338)">
|
||||
<path
|
||||
d="M141.5 -60.2C185.5 -5.4 224.8 73.5 200.5 122.1C176.1 170.7 88 188.8 -4.7 191.5C-97.4 194.3 -194.9 181.5 -236.6 122.9C-278.3 64.3 -264.3 -40.1 -215.6 -97.5C-166.9 -155 -83.4 -165.5 -17.4 -155.5C48.7 -145.5 97.4 -114.9 141.5 -60.2"
|
||||
fill="#1E40AF"
|
||||
stroke-width="10"
|
||||
filter="url(#glow)"
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Image -->
|
||||
</div>
|
||||
</div>
|
||||
<!--End Mission-->
|
||||
|
||||
|
||||
<div
|
||||
class="bg-[#09090B] w-full hover:border-slate-500 border-slate-600 h-auto pl-1 pr-1 sm:pl-0 sm:pr-0 pb-10 mb-8"
|
||||
>
|
||||
<div class="text-3xl sm:text-5xl text-white text-center p-3">
|
||||
<span class="font-bold"> Proudly Open Source </span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bg-[#09090B] w-full hover:border-slate-500 border-slate-600 h-auto pl-1 pr-1 sm:pl-0 sm:pr-0 pb-10 mb-8">
|
||||
<div class="text-3xl sm:text-5xl text-white text-center p-3 ">
|
||||
<span class="font-bold">
|
||||
Proudly Open Source
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="text-[1rem] sm:text-lg text-white text-center w-11/12 sm:w-1/2 m-auto mb-8">
|
||||
Stocknear is committed to open source & transparency. You can also run it locally or self-hosted.
|
||||
<div
|
||||
class="text-[1rem] sm:text-lg text-white text-center w-11/12 sm:w-1/2 m-auto mb-8"
|
||||
>
|
||||
Stocknear is committed to open source & transparency. You can also run
|
||||
it locally or self-hosted.
|
||||
</div>
|
||||
|
||||
<div class="w-11/12 sm:w-1/2 m-auto text-center">
|
||||
<a href="https://github.com/stocknear" rel="noopener noreferrer" target="_blank"
|
||||
<a
|
||||
href="https://github.com/stocknear"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
class="w-fit sm:w-54 inline-flex animate-shine items-center justify-center rounded-xl text-sm border border-neutral-900 bg-[linear-gradient(110deg,#252626,55%,#fff,45%,#252626)] bg-[length:200%_100%] px-4 py-2 font-medium transition-colors"
|
||||
>
|
||||
<div class="m-auto flex-shrink-0 flex justify-center items-center">
|
||||
<svg class="w-8 h-8 sm:w-10 sm:h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/></svg>
|
||||
|
||||
<span class="text-white text-[1rem] ml-2 font-semibold">
|
||||
stocknear
|
||||
{data?.getFrontendStars+data?.getBackendStars}
|
||||
</span>
|
||||
<svg class="ml-1 w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#fff" d="m18.7 4.627l2.247 4.31a2.27 2.27 0 0 0 1.686 1.189l4.746.65c2.538.35 3.522 3.479 1.645 5.219l-3.25 2.999a2.225 2.225 0 0 0-.683 2.04l.793 4.398c.441 2.45-2.108 4.36-4.345 3.24l-4.536-2.25a2.282 2.282 0 0 0-2.006 0l-4.536 2.25c-2.238 1.11-4.786-.79-4.345-3.24l.793-4.399c.14-.75-.12-1.52-.682-2.04l-3.251-2.998c-1.877-1.73-.893-4.87 1.645-5.22l4.746-.65a2.23 2.23 0 0 0 1.686-1.189l2.248-4.309c1.144-2.17 4.264-2.17 5.398 0"/></svg>
|
||||
</div>
|
||||
<div class="m-auto flex-shrink-0 flex justify-center items-center">
|
||||
<svg
|
||||
class="w-8 h-8 sm:w-10 sm:h-10"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="#fff"
|
||||
d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
|
||||
/></svg
|
||||
>
|
||||
|
||||
<span class="text-white text-[1rem] ml-2 font-semibold">
|
||||
stocknear
|
||||
{data?.getFrontendStars + data?.getBackendStars}
|
||||
</span>
|
||||
<svg
|
||||
class="ml-1 w-4 h-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
><path
|
||||
fill="#fff"
|
||||
d="m18.7 4.627l2.247 4.31a2.27 2.27 0 0 0 1.686 1.189l4.746.65c2.538.35 3.522 3.479 1.645 5.219l-3.25 2.999a2.225 2.225 0 0 0-.683 2.04l.793 4.398c.441 2.45-2.108 4.36-4.345 3.24l-4.536-2.25a2.282 2.282 0 0 0-2.006 0l-4.536 2.25c-2.238 1.11-4.786-.79-4.345-3.24l.793-4.399c.14-.75-.12-1.52-.682-2.04l-3.251-2.998c-1.877-1.73-.893-4.87 1.645-5.22l4.746-.65a2.23 2.23 0 0 0 1.686-1.189l2.248-4.309c1.144-2.17 4.264-2.17 5.398 0"
|
||||
/></svg
|
||||
>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
<div class="text-white text-sm font-semibold font-mono mt-5">
|
||||
Leave a star to support us
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Start Section-->
|
||||
<div class="bg-[#09090B] w-full hover:border-slate-500 border-slate-600 h-auto pl-1 pr-1 sm:pl-0 sm:pr-0 pb-10 mb-8">
|
||||
<div class="text-3xl sm:text-5xl text-white text-center p-3 mt-10 sm:mt-5">
|
||||
<span class="font-bold">
|
||||
No ads. No tracking.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="text-white text-[1rem] sm:text-lg mt-3 text-center px-5">
|
||||
Stocknear has no ads or affiliate marketing, or tracking.
|
||||
Your attention and data are never monetized. If you're skeptical, just look at our code <a href="https://github.com/stocknear" rel="noopener noreferrer" target="_blank" class="text-blue-400 sm:hover:text-white sm:hover:underline" >here</a>.
|
||||
</div>
|
||||
</div>
|
||||
<!--End Section-->
|
||||
|
||||
|
||||
<!-- Start Section-->
|
||||
<div class="bg-[#09090B] w-full hover:border-slate-500 border-slate-600 h-auto pb-10 mb-8">
|
||||
<div class="text-3xl sm:text-5xl text-white text-center p-3 mt-10 sm:mt-5">
|
||||
<span class="font-bold">
|
||||
No Dark Patterns
|
||||
</span>
|
||||
<div class="text-white text-sm font-semibold font-mono mt-5">
|
||||
Leave a star to support us
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="text-white text-[1rem] sm:text-lg mt-3 text-center px-5">
|
||||
On Stocknear, you won't encounter intrusive pop-ups prompting you to sign up unless it's essential for accessing all platform features. We don't manipulate you into using our platform more than you want to. If you wish to cancel your subscription, there's no survey to fill out; you can cancel it in just 2 seconds.
|
||||
</div>
|
||||
<!-- Start Section-->
|
||||
<div
|
||||
class="bg-[#09090B] w-full hover:border-slate-500 border-slate-600 h-auto pl-1 pr-1 sm:pl-0 sm:pr-0 pb-10 mb-8"
|
||||
>
|
||||
<div
|
||||
class="text-3xl sm:text-5xl text-white text-center p-3 mt-10 sm:mt-5"
|
||||
>
|
||||
<span class="font-bold"> No ads. No tracking. </span>
|
||||
</div>
|
||||
|
||||
<div class="text-white text-[1rem] sm:text-lg mt-3 text-center px-5">
|
||||
Stocknear has no ads or affiliate marketing, or tracking. Your attention
|
||||
and data are never monetized. If you're skeptical, just look at our code <a
|
||||
href="https://github.com/stocknear"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
class="text-blue-400 sm:hover:text-white sm:hover:underline">here</a
|
||||
>.
|
||||
</div>
|
||||
</div>
|
||||
<!--End Section-->
|
||||
|
||||
<!-- Start Section-->
|
||||
<div
|
||||
class="bg-[#09090B] w-full hover:border-slate-500 border-slate-600 h-auto pb-10 mb-8"
|
||||
>
|
||||
<div
|
||||
class="text-3xl sm:text-5xl text-white text-center p-3 mt-10 sm:mt-5"
|
||||
>
|
||||
<span class="font-bold"> No Dark Patterns </span>
|
||||
</div>
|
||||
|
||||
<div class="text-white text-[1rem] sm:text-lg mt-3 text-center px-5">
|
||||
On Stocknear, you won't encounter intrusive pop-ups prompting you to
|
||||
sign up unless it's essential for accessing all platform features. We
|
||||
don't manipulate you into using our platform more than you want to. If
|
||||
you wish to cancel your subscription, there's no survey to fill out; you
|
||||
can cancel it in just 2 seconds.
|
||||
</div>
|
||||
</div>
|
||||
<!--End Section-->
|
||||
|
||||
<!--Start Why we need this -->
|
||||
<div class="bg-[#09090B] w-full hover:border-slate-500 border-slate-600 h-auto pb-10 mb-8">
|
||||
<div class="text-3xl sm:text-5xl text-white text-center p-3 mt-10 sm:mt-5">
|
||||
<span class="font-bold">
|
||||
What we offer
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="bg-[#09090B] w-full hover:border-slate-500 border-slate-600 h-auto pb-10 mb-8"
|
||||
>
|
||||
<div
|
||||
class="text-3xl sm:text-5xl text-white text-center p-3 mt-10 sm:mt-5"
|
||||
>
|
||||
<span class="font-bold"> What we offer </span>
|
||||
</div>
|
||||
|
||||
<div class="text-white text-[1rem] sm:text-lg mt-3 text-center pl-3 pr-3 sm:pl-10 sm:pr-10">
|
||||
We provide retail traders with high-quality, accurate data that is only available to hedge funds and institutional investors. By bridging the gap between <span class="text-[#FBCE3C] font-semibold italic">Wall Street</span> and <span class="text-[#FBCE3C] font-semibold italic">Retail Traders</span>, we enhance your stock analysis with a wide range of data sources. Take control of your investments, make informed decisions, and execute profitable trades using our comprehensive data presented in an intuitive UI.
|
||||
<!-- Start Image -->
|
||||
<div class="m-auto flex justify-center mt-5">
|
||||
<div class="relative">
|
||||
<div class="z-1 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
||||
<img class="w-20 mr-8" src={cloudFrontUrl+"/assets/no_money_logo.png"} alt="logo" loading="lazy">
|
||||
</div>
|
||||
<svg id="visual" viewBox="0 0 960 540" width="380" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
|
||||
<defs>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="12" result="glow"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="glow"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g transform="translate(506.6556351091302 253.49315711627338)">
|
||||
<path d="M141.5 -60.2C185.5 -5.4 224.8 73.5 200.5 122.1C176.1 170.7 88 188.8 -4.7 191.5C-97.4 194.3 -194.9 181.5 -236.6 122.9C-278.3 64.3 -264.3 -40.1 -215.6 -97.5C-166.9 -155 -83.4 -165.5 -17.4 -155.5C48.7 -145.5 97.4 -114.9 141.5 -60.2" fill="#1E40AF" stroke-width="10" filter="url(#glow)"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="text-white text-[1rem] sm:text-lg mt-3 text-center pl-3 pr-3 sm:pl-10 sm:pr-10"
|
||||
>
|
||||
We provide retail traders with high-quality, accurate data that is only
|
||||
available to hedge funds and institutional investors. By bridging the
|
||||
gap between <span class="text-[#fff] font-semibold italic"
|
||||
>Wall Street</span
|
||||
>
|
||||
and
|
||||
<span class="text-[#fff] font-semibold italic">Retail Traders</span>, we
|
||||
enhance your stock analysis with a wide range of data sources. Take
|
||||
control of your investments, make informed decisions, and execute
|
||||
profitable trades using our comprehensive data presented in an intuitive
|
||||
UI.
|
||||
<!-- Start Image -->
|
||||
<div class="m-auto flex justify-center mt-5">
|
||||
<div class="relative">
|
||||
<div
|
||||
class="z-1 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
||||
>
|
||||
<img
|
||||
class="w-20 mr-8"
|
||||
src={cloudFrontUrl + "/assets/no_money_logo.png"}
|
||||
alt="logo"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<!-- End Image -->
|
||||
<svg
|
||||
id="visual"
|
||||
viewBox="0 0 960 540"
|
||||
width="380"
|
||||
height="200"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
version="1.1"
|
||||
>
|
||||
<defs>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="12" result="glow" />
|
||||
<feMerge>
|
||||
<feMergeNode in="glow" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g transform="translate(506.6556351091302 253.49315711627338)">
|
||||
<path
|
||||
d="M141.5 -60.2C185.5 -5.4 224.8 73.5 200.5 122.1C176.1 170.7 88 188.8 -4.7 191.5C-97.4 194.3 -194.9 181.5 -236.6 122.9C-278.3 64.3 -264.3 -40.1 -215.6 -97.5C-166.9 -155 -83.4 -165.5 -17.4 -155.5C48.7 -145.5 97.4 -114.9 141.5 -60.2"
|
||||
fill="#1E40AF"
|
||||
stroke-width="10"
|
||||
filter="url(#glow)"
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Image -->
|
||||
</div>
|
||||
</div>
|
||||
<!--End Why we need this -->
|
||||
|
||||
|
||||
<!--Start Why we need this -->
|
||||
<div class="bg-[#09090B] w-full bg-[#09090B] sm:border-t hover:border-slate-500 border-slate-600 h-auto sm:p-10 mt-3 mb-20 sm:mb-8">
|
||||
<div class="text-3xl sm:text-5xl font-bold text-white text-center p-3 mt-10 sm:mt-5">
|
||||
<span class="font-bold">
|
||||
Why choose us
|
||||
</span>
|
||||
<!--Start Why we need this -->
|
||||
<div
|
||||
class="bg-[#09090B] w-full bg-[#09090B] sm:border-t hover:border-slate-500 border-slate-600 h-auto sm:p-10 mt-3 mb-20 sm:mb-8"
|
||||
>
|
||||
<div
|
||||
class="text-3xl sm:text-5xl font-bold text-white text-center p-3 mt-10 sm:mt-5"
|
||||
>
|
||||
<span class="font-bold"> Why choose us </span>
|
||||
</div>
|
||||
|
||||
<div class="-mt-10 sm:mt-0 text-white text-[1rem] sm:text-lg text-center pl-3 pr-3 sm:pl-10 sm:pr-10">
|
||||
<br class="mb-8 sm:mb-5">
|
||||
We love data and want to understand what drives the stock market.
|
||||
We collaborate with top data vendors to provide clear and actionable insights, giving you a competitive advantage over other traders.
|
||||
<br>
|
||||
<br>
|
||||
<div
|
||||
class="-mt-10 sm:mt-0 text-white text-[1rem] sm:text-lg text-center pl-3 pr-3 sm:pl-10 sm:pr-10"
|
||||
>
|
||||
<br class="mb-8 sm:mb-5" />
|
||||
We love data and want to understand what drives the stock market. We collaborate
|
||||
with top data vendors to provide clear and actionable insights, giving you
|
||||
a competitive advantage over other traders.
|
||||
<br />
|
||||
<br />
|
||||
|
||||
As a physicist, I prioritize transparency and rigorous analysis.
|
||||
During my PhD in theoretical particle physics, I developed models to describe New Physics effects beyond our current knowledge of the universe, as shown by my publication record <a href="https://inspirehep.net/authors/1838037" target="_blank" class="hover:text-white text-blue-400 underline">here</a>.
|
||||
<br class="mb-5">
|
||||
Unlike most financial websites run by programmers, I combine my programming skills with a scientific approach.
|
||||
<br>
|
||||
<br>
|
||||
If you find value in stocknear's approach to tackling stock analysis tasks, that's great. If not, I wish you all the best on your trading journey and maybe we will see us again in the future.
|
||||
<!-- Start Image -->
|
||||
<div class="m-auto flex justify-center mt-5">
|
||||
<div class="relative">
|
||||
<div class="z-2 absolute mt-3">
|
||||
<img class="w-56 sm:w-64 ml-16 sm:ml-10 mt-12 sm:mt-8" src={cloudFrontUrl+"/assets/community_logo.png"} alt="logo" loading="lazy">
|
||||
</div>
|
||||
<svg id="visual" viewBox="0 0 960 540" width="380" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
|
||||
<defs>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="12" result="glow"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="glow"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g transform="translate(506.6556351091302 253.49315711627338)">
|
||||
<path d="M141.5 -60.2C185.5 -5.4 224.8 73.5 200.5 122.1C176.1 170.7 88 188.8 -4.7 191.5C-97.4 194.3 -194.9 181.5 -236.6 122.9C-278.3 64.3 -264.3 -40.1 -215.6 -97.5C-166.9 -155 -83.4 -165.5 -17.4 -155.5C48.7 -145.5 97.4 -114.9 141.5 -60.2" fill="#1E40AF" stroke-width="10" filter="url(#glow)"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
As a physicist, I prioritize transparency and rigorous analysis. During
|
||||
my PhD in theoretical particle physics, I developed models to describe
|
||||
New Physics effects beyond our current knowledge of the universe, as
|
||||
shown by my publication record
|
||||
<a
|
||||
href="https://inspirehep.net/authors/1838037"
|
||||
target="_blank"
|
||||
class="hover:text-white text-blue-400 underline">here</a
|
||||
>.
|
||||
<br class="mb-5" />
|
||||
Unlike most financial websites run by programmers, I combine my programming
|
||||
skills with a scientific approach.
|
||||
<br />
|
||||
<br />
|
||||
If you find value in stocknear's approach to tackling stock analysis tasks,
|
||||
that's great. If not, I wish you all the best on your trading journey and
|
||||
maybe we will see us again in the future.
|
||||
<!-- Start Image -->
|
||||
<div class="m-auto flex justify-center mt-5">
|
||||
<div class="relative">
|
||||
<div class="z-2 absolute mt-3">
|
||||
<img
|
||||
class="w-56 sm:w-64 ml-16 sm:ml-10 mt-12 sm:mt-8"
|
||||
src={cloudFrontUrl + "/assets/community_logo.png"}
|
||||
alt="logo"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<!-- End Image -->
|
||||
<svg
|
||||
id="visual"
|
||||
viewBox="0 0 960 540"
|
||||
width="380"
|
||||
height="200"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
version="1.1"
|
||||
>
|
||||
<defs>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="12" result="glow" />
|
||||
<feMerge>
|
||||
<feMergeNode in="glow" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g transform="translate(506.6556351091302 253.49315711627338)">
|
||||
<path
|
||||
d="M141.5 -60.2C185.5 -5.4 224.8 73.5 200.5 122.1C176.1 170.7 88 188.8 -4.7 191.5C-97.4 194.3 -194.9 181.5 -236.6 122.9C-278.3 64.3 -264.3 -40.1 -215.6 -97.5C-166.9 -155 -83.4 -165.5 -17.4 -155.5C48.7 -145.5 97.4 -114.9 141.5 -60.2"
|
||||
fill="#1E40AF"
|
||||
stroke-width="10"
|
||||
filter="url(#glow)"
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Image -->
|
||||
</div>
|
||||
</div>
|
||||
<!--End Why we need this -->
|
||||
|
||||
|
||||
<!--Start Team -->
|
||||
<div class="bg-[#09090B] w-full bg-[#09090B] sm:border-t hover:border-slate-500 border-slate-600 h-auto sm:p-10 mt-3">
|
||||
<div class="text-3xl sm:text-5xl font-bold text-white text-center p-3 mt-10 sm:mt-5">
|
||||
<!--Start Team -->
|
||||
<div
|
||||
class="bg-[#09090B] w-full bg-[#09090B] sm:border-t hover:border-slate-500 border-slate-600 h-auto sm:p-10 mt-3"
|
||||
>
|
||||
<div
|
||||
class="text-3xl sm:text-5xl font-bold text-white text-center p-3 mt-10 sm:mt-5"
|
||||
>
|
||||
Team
|
||||
</div>
|
||||
|
||||
<div class="text-white text-[1rem] sm:text-lg mt-3 text-center">
|
||||
<!-- Team members -->
|
||||
<div class="sm:flex sm:flex-wrap sm:justify-center mb-4">
|
||||
<!-- 1st member -->
|
||||
<div class="m-auto flex justify-center items-center mt-6">
|
||||
<div class="flex flex-col justify-center items-center w-full">
|
||||
<img class="rounded-full mb-4 w-20 sm:w-28" src={cloudFrontUrl+"/assets/mrahimi.webp"} alt="Founder" loading="lazy"/>
|
||||
<h4 class="text-lg mb-1">
|
||||
Dr. Muslem Rahimi
|
||||
</h4>
|
||||
<div class="text-white mb-6">
|
||||
Chief of Nothing
|
||||
</div>
|
||||
<span class="text-[1.1rem] p-3 text-gray-300">
|
||||
During my PhD in physics, I was developing models to describe New Physics.
|
||||
Now I'm developing a stock analysis platform to help small investors.
|
||||
</span>
|
||||
</div>
|
||||
<!-- 1st member -->
|
||||
<div class="m-auto flex justify-center items-center mt-6">
|
||||
<div class="flex flex-col justify-center items-center w-full">
|
||||
<img
|
||||
class="rounded-full mb-4 w-20 sm:w-28"
|
||||
src={cloudFrontUrl + "/assets/mrahimi.webp"}
|
||||
alt="Founder"
|
||||
loading="lazy"
|
||||
/>
|
||||
<h4 class="text-lg mb-1">Dr. Muslem Rahimi</h4>
|
||||
<div class="text-white mb-6">Chief of Nothing</div>
|
||||
<span class="text-[1.1rem] p-3 text-gray-300">
|
||||
During my PhD in physics, I was developing models to describe
|
||||
New Physics. Now I'm developing a stock analysis platform to
|
||||
help small investors.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--End Team -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
@ -342,7 +342,7 @@
|
||||
class="text-base font-semibold leading-4 text-white md:leading-7"
|
||||
>
|
||||
<div
|
||||
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#FBCE3C]"
|
||||
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@ -371,7 +371,7 @@
|
||||
class="text-base font-semibold leading-4 text-white md:leading-7"
|
||||
>
|
||||
<div
|
||||
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#FBCE3C]"
|
||||
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@ -401,7 +401,7 @@
|
||||
class="text-base font-semibold leading-4 text-white md:leading-7"
|
||||
>
|
||||
<div
|
||||
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#FBCE3C]"
|
||||
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@ -431,7 +431,7 @@
|
||||
class="text-base font-semibold leading-4 text-white md:leading-7"
|
||||
>
|
||||
<div
|
||||
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#FBCE3C]"
|
||||
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
|
||||
import { sectorNavigation } from "$lib/utils";
|
||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||
import { onMount } from "svelte";
|
||||
import HoverStockChart from "$lib/components/HoverStockChart.svelte";
|
||||
@ -23,55 +24,6 @@
|
||||
}).format(analystStats?.numOfAnalysts);
|
||||
let numOfStocks = analystStats?.numOfStocks;
|
||||
|
||||
function sectorSelector(sector) {
|
||||
let path;
|
||||
switch (sector) {
|
||||
case "Financials":
|
||||
path = "financial";
|
||||
break;
|
||||
case "Healthcare":
|
||||
path = "healthcare";
|
||||
break;
|
||||
case "Information Technology":
|
||||
path = "technology";
|
||||
break;
|
||||
case "Technology":
|
||||
path = "technology";
|
||||
break;
|
||||
case "Financial Services":
|
||||
path = "financial";
|
||||
break;
|
||||
case "Industrials":
|
||||
path = "industrials";
|
||||
break;
|
||||
case "Energy":
|
||||
path = "energy";
|
||||
break;
|
||||
case "Utilities":
|
||||
path = "utilities";
|
||||
break;
|
||||
case "Consumer Cyclical":
|
||||
path = "consumer-cyclical";
|
||||
break;
|
||||
case "Real Estate":
|
||||
path = "real-estate";
|
||||
break;
|
||||
case "Basic Materials":
|
||||
path = "basic-materials";
|
||||
break;
|
||||
case "Communication Services":
|
||||
path = "communication-services";
|
||||
break;
|
||||
case "Consumer Defensive":
|
||||
path = "consumer-defensive";
|
||||
break;
|
||||
default:
|
||||
// Handle default case if needed
|
||||
break;
|
||||
}
|
||||
return path;
|
||||
}
|
||||
|
||||
async function handleScroll() {
|
||||
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
||||
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
||||
@ -273,7 +225,9 @@
|
||||
>
|
||||
{#each data?.getAnalystStats?.mainSectors as sector}
|
||||
<a
|
||||
href={"/list/sector/" + sectorSelector(sector)}
|
||||
href={sectorNavigation?.find(
|
||||
(listItem) => listItem?.title === sector,
|
||||
)?.link}
|
||||
class="cursor-pointer w-fit border border-gray-600 px-3 sm:px-4 py-2 text-sm sm:text-[1rem] font-medium rounded-md sm:hover:text-blue-400 text-white underline underline-offset-4"
|
||||
>
|
||||
{sector}
|
||||
@ -342,7 +296,7 @@
|
||||
|
||||
<div class="absolute top-3 flex items-center">
|
||||
<svg
|
||||
class="size-5 text-[#FBCE3C]"
|
||||
class="size-5 text-[#fff]"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
style="max-width: 40px;"
|
||||
|
||||
@ -183,7 +183,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
@ -322,7 +322,7 @@
|
||||
class="text-base font-semibold leading-4 text-white md:leading-7"
|
||||
>
|
||||
<div
|
||||
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#FBCE3C]"
|
||||
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@ -351,7 +351,7 @@
|
||||
class="text-base font-semibold leading-4 text-white md:leading-7"
|
||||
>
|
||||
<div
|
||||
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#FBCE3C]"
|
||||
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@ -381,7 +381,7 @@
|
||||
class="text-base font-semibold leading-4 text-white md:leading-7"
|
||||
>
|
||||
<div
|
||||
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#FBCE3C]"
|
||||
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@ -411,7 +411,7 @@
|
||||
class="text-base font-semibold leading-4 text-white md:leading-7"
|
||||
>
|
||||
<div
|
||||
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#FBCE3C]"
|
||||
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@ -1,115 +1,144 @@
|
||||
<script lang ='ts'>
|
||||
import { numberOfUnreadNotification, discordMembers} from '$lib/store';
|
||||
import {getImageURL} from '$lib/utils';
|
||||
|
||||
export let data;
|
||||
|
||||
|
||||
//let discordURL = import.meta.env.VITE_DISCORD_URL;
|
||||
const article = data?.getArticle;
|
||||
//const discordData = data?.getDiscordWidget;
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<script lang 'ts'></script>
|
||||
|
||||
<svelte:head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {article?.title} · stocknear</title>
|
||||
<meta name="description" content="Latest articles on stocks, finance and investing">
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content="{article?.title}"/>
|
||||
<meta property="og:description" content="{article?.abstract}"/>
|
||||
<meta property="og:type" content="article"/>
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
|
||||
{article?.title} · stocknear</title
|
||||
>
|
||||
<meta
|
||||
name="description"
|
||||
content="Latest articles on stocks, finance and investing"
|
||||
/>
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content={article?.title} />
|
||||
<meta property="og:description" content={article?.abstract} />
|
||||
<meta property="og:type" content="article" />
|
||||
<!-- 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="{article?.title}"/>
|
||||
<meta name="twitter:description" content="{article?.abstract}"/>
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
<!-- Twitter specific meta tags -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content={article?.title} />
|
||||
<meta name="twitter:description" content={article?.abstract} />
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
</svelte:head>
|
||||
|
||||
|
||||
<section class="w-full max-w-3xl sm:max-w-screen-xl 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>
|
||||
<li><a href="/blog" class="text-gray-300">All Blog Post</a></li>
|
||||
<li class="text-gray-300">Post</li>
|
||||
</ul>
|
||||
</div>
|
||||
<section
|
||||
class="w-full max-w-3xl sm:max-w-screen-xl 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>
|
||||
<li><a href="/blog" class="text-gray-300">All Blog Post</a></li>
|
||||
<li class="text-gray-300">Post</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mt-3 w-full max-w-4xl h-72 flex flex-col bg-cover bg-center bg-no-repeat rounded-lg"
|
||||
style="background-image: url('{article?.cover
|
||||
? getImageURL(article?.collectionId, article?.id, article?.cover)
|
||||
: ''}');"
|
||||
/>
|
||||
|
||||
<div class="mt-3 w-full max-w-4xl h-72 flex flex-col bg-cover bg-center bg-no-repeat rounded-lg"
|
||||
style="background-image: url('{article?.cover ? getImageURL(article?.collectionId, article?.id, article?.cover) : ''}');" />
|
||||
|
||||
<main class="grow m-auto">
|
||||
<div class="w-full max-w-4xl ">
|
||||
<div class="sm:flex sm:justify-start">
|
||||
|
||||
<!-- Main content -->
|
||||
<div class="md:grow pt-6 pb-12 w-full sm:mr-4 rounded-2xl sm:rounded-none">
|
||||
<div class="sm:pr-5">
|
||||
<!--Start Title-->
|
||||
<h1 class="text-white font-bold text-3xl bg-[#111011] sm:bg-[#09090B] p-6 sm:p-3 rounded-t-xl -mt-36 sm:mt-0 bg-opacity-[0.9]">
|
||||
{@html article?.title}
|
||||
</h1>
|
||||
<!--End Title-->
|
||||
<!--Start Writer-->
|
||||
<div class="flex flex-row items-center pl-3 pr-3 pt-8 pb-6">
|
||||
<a href={"/community/user/"+article?.user} class="cursor-pointer text-sm text-slate-200 flex flex-row items-center">
|
||||
<img
|
||||
class="rounded-full w-10 h-10 mr-2"
|
||||
src={article?.expand?.user?.avatar
|
||||
? getImageURL(article?.expand?.user?.collectionId, article?.expand?.user?.id, article?.expand?.user?.avatar)
|
||||
: `https://avatar.vercel.sh/${article?.expand?.user?.username}`}
|
||||
alt="User avatar" loading='lazy'/>
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="text-white text-sm">
|
||||
mrahimi
|
||||
</span>
|
||||
<span class="text-white text-opacity-[0.7] text-sm">
|
||||
{article?.readingTime} min read · {new Date(article?.created)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<main class="grow m-auto">
|
||||
<div class="w-full max-w-4xl">
|
||||
<div class="sm:flex sm:justify-start">
|
||||
<!-- Main content -->
|
||||
<div
|
||||
class="md:grow pt-6 pb-12 w-full sm:mr-4 rounded-2xl sm:rounded-none"
|
||||
>
|
||||
<div class="sm:pr-5">
|
||||
<!--Start Title-->
|
||||
<h1
|
||||
class="text-white font-bold text-3xl bg-[#111011] sm:bg-[#09090B] p-6 sm:p-3 rounded-t-xl -mt-36 sm:mt-0 bg-opacity-[0.9]"
|
||||
>
|
||||
{@html article?.title}
|
||||
</h1>
|
||||
<!--End Title-->
|
||||
<!--Start Writer-->
|
||||
<div class="flex flex-row items-center pl-3 pr-3 pt-8 pb-6">
|
||||
<a
|
||||
href={"/community/user/" + article?.user}
|
||||
class="cursor-pointer text-sm text-slate-200 flex flex-row items-center"
|
||||
>
|
||||
<img
|
||||
class="rounded-full w-10 h-10 mr-2"
|
||||
src={article?.expand?.user?.avatar
|
||||
? getImageURL(
|
||||
article?.expand?.user?.collectionId,
|
||||
article?.expand?.user?.id,
|
||||
article?.expand?.user?.avatar,
|
||||
)
|
||||
: `https://avatar.vercel.sh/${article?.expand?.user?.username}`}
|
||||
alt="User avatar"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="text-white text-sm"> mrahimi </span>
|
||||
<span class="text-white text-opacity-[0.7] text-sm">
|
||||
{article?.readingTime} min read · {new Date(
|
||||
article?.created,
|
||||
)?.toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
daySuffix: "2-digit",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!--End Write-->
|
||||
|
||||
</div>
|
||||
<!--End Write-->
|
||||
<!--Start Description-->
|
||||
<div class="text-white text-lg p-6 sm:p-3">
|
||||
{@html article?.description}
|
||||
</div>
|
||||
<!--End Description-->
|
||||
|
||||
|
||||
<!--Start Description-->
|
||||
<div class="text-white text-lg p-6 sm:p-3">
|
||||
{@html article?.description}
|
||||
</div>
|
||||
<!--End Description-->
|
||||
{#if !data?.user}
|
||||
<div
|
||||
class="rounded-lg border border-slate-800 w-11/12 sm:w-full m-auto p-6 mt-16"
|
||||
>
|
||||
<span
|
||||
class="text-white text-md text-center p-4 mb-3 flex justify-center"
|
||||
>
|
||||
Stay up to date with the market without the redudant BS
|
||||
</span>
|
||||
<a
|
||||
class="w-64 flex mb-5 justify-center items-center m-auto btn text-white bg-[#fff] sm:hover:bg-gray-300 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>
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if !data?.user}
|
||||
<div class="rounded-lg border border-slate-800 w-11/12 sm:w-full m-auto p-6 mt-16">
|
||||
|
||||
<span class="text-white text-md text-center p-4 mb-3 flex justify-center">
|
||||
Stay up to date with the market without the redudant BS
|
||||
</span>
|
||||
<a class="w-64 flex mb-5 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>
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<!--
|
||||
<!-- Sidebar -->
|
||||
<!--
|
||||
<aside class="hidden sm:inline-block min-h-screen sm:w-96 pt-[1rem]">
|
||||
|
||||
|
||||
@ -199,66 +228,66 @@ const article = data?.getArticle;
|
||||
|
||||
</aside>
|
||||
-->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
#content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#content:before,
|
||||
#content:after {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
border-color: #FF8C6C; /* or whatever color */
|
||||
border-style: solid; /* or whatever style */
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
#content:before {
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-width: 1px 0 0 1px;
|
||||
}
|
||||
|
||||
#content:after {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-width: 0 1px 1px 0;
|
||||
}
|
||||
|
||||
|
||||
.grid-background {
|
||||
background: linear-gradient(to bottom, #27272A, #111011);
|
||||
width: 24rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.grid-background::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 10%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:
|
||||
repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0.15) 1px, transparent 1px, transparent 40px),
|
||||
repeating-linear-gradient(to right, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0.15) 1px, transparent 1px, transparent 40px);
|
||||
background-size: 20px 100% 100% 20px; /* Adjust the grid spacing as needed */
|
||||
}
|
||||
|
||||
</style>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
#content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#content:before,
|
||||
#content:after {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
border-color: #ff8c6c; /* or whatever color */
|
||||
border-style: solid; /* or whatever style */
|
||||
content: " ";
|
||||
}
|
||||
|
||||
#content:before {
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-width: 1px 0 0 1px;
|
||||
}
|
||||
|
||||
#content:after {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-width: 0 1px 1px 0;
|
||||
}
|
||||
|
||||
.grid-background {
|
||||
background: linear-gradient(to bottom, #27272a, #111011);
|
||||
width: 24rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.grid-background::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 10%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
to bottom,
|
||||
rgba(255, 255, 255, 0.15) 0,
|
||||
rgba(255, 255, 255, 0.15) 1px,
|
||||
transparent 1px,
|
||||
transparent 40px
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
to right,
|
||||
rgba(255, 255, 255, 0.15) 0,
|
||||
rgba(255, 255, 255, 0.15) 1px,
|
||||
transparent 1px,
|
||||
transparent 40px
|
||||
);
|
||||
background-size: 20px 100% 100% 20px; /* Adjust the grid spacing as needed */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,257 +1,312 @@
|
||||
<script>
|
||||
import { numberOfUnreadNotification } from '$lib/store';
|
||||
import ParticleEffect from '$lib/components/ParticleEffect.svelte';
|
||||
import { numberOfUnreadNotification } from "$lib/store";
|
||||
import ParticleEffect from "$lib/components/ParticleEffect.svelte";
|
||||
|
||||
export let data;
|
||||
export let data;
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<svelte:head>
|
||||
<title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Changelog · stocknear</title>
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Changelog
|
||||
· stocknear</title
|
||||
>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content="Changelog · stocknear"/>
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:title" content="Changelog · stocknear" />
|
||||
<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="Changelog · stocknear"/>
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Changelog · stocknear" />
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
</svelte:head>
|
||||
|
||||
|
||||
<section class="w-full max-w-5xl overflow-hidden m-auto min-h-screen pb-40">
|
||||
<body class="font-inter antialiased text-slate-100 tracking-tight">
|
||||
<!-- Page wrapper -->
|
||||
<div
|
||||
class="flex flex-col min-h-screen overflow-hidden supports-[overflow:clip]:overflow-clip"
|
||||
>
|
||||
<!-- Page content -->
|
||||
<main class="grow">
|
||||
<!-- Content -->
|
||||
<section class="relative">
|
||||
<!-- Radial gradient -->
|
||||
<div
|
||||
class="absolute flex items-center justify-center top-0 -translate-y-1/2 left-1/2 -translate-x-1/2 pointer-events-none w-[500px] aspect-square"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div
|
||||
class="absolute inset-0 translate-z-0 bg-gradient-to-r from-[#E8BB28] to-purple-600 rounded-full blur-[120px] opacity-20"
|
||||
></div>
|
||||
<div
|
||||
class="absolute w-32 h-32 translate-z-0 bg-gradient-to-r from-[#E8BB28] to-purple-700 rounded-full blur-[80px] opacity-40"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- Particles animation -->
|
||||
<div class="absolute inset-0 h-96 z-10" aria-hidden="true">
|
||||
<ParticleEffect quantity={50} staticity={40} ease={60} />
|
||||
</div>
|
||||
|
||||
<section class="w-full max-w-5xl overflow-hidden m-auto min-h-screen pb-40">
|
||||
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div class="pt-32 pb-12 md:pt-40 md:pb-20">
|
||||
<!-- Page header -->
|
||||
<div class="text-center pb-12 md:pb-20">
|
||||
<h1
|
||||
class="text-4xl sm:text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#E8BB28] to-purple-500 via-slate-200 to-slate-200/60 pb-4"
|
||||
>
|
||||
What's New
|
||||
</h1>
|
||||
<div class="max-w-3xl m-auto flex justify-center items-center">
|
||||
<p class="w-5/6 text-center text-xl sm:text-2xl text-white">
|
||||
New updates and improvements to Stocknear.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<body class="font-inter antialiased text-slate-100 tracking-tight">
|
||||
<!-- Content -->
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="relative">
|
||||
<div
|
||||
class="absolute h-full top-4 left-[2px] w-0.5 bg-slate-800 [mask-image:_linear-gradient(0deg,transparent,theme(colors.white)_150px,theme(colors.white))] -z-10 overflow-hidden after:absolute after:h-4 after:top-0 after:-translate-y-full after:left-0 after:w-0.5 after:bg-[linear-gradient(180deg,_transparent,_theme(colors.purple.500/.65)_25%,_theme(colors.purple.200)_50%,_theme(colors.purple.500/.65)_75%,_transparent)] after:animate-shine"
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
<!-- Post -->
|
||||
|
||||
<!-- Page wrapper -->
|
||||
<div class="flex flex-col min-h-screen overflow-hidden supports-[overflow:clip]:overflow-clip">
|
||||
|
||||
|
||||
|
||||
<!-- Page content -->
|
||||
<main class="grow">
|
||||
|
||||
<!-- Content -->
|
||||
<section class="relative">
|
||||
|
||||
<!-- Radial gradient -->
|
||||
<div class="absolute flex items-center justify-center top-0 -translate-y-1/2 left-1/2 -translate-x-1/2 pointer-events-none w-[500px] aspect-square" aria-hidden="true">
|
||||
<div class="absolute inset-0 translate-z-0 bg-gradient-to-r from-[#E8BB28] to-purple-600 rounded-full blur-[120px] opacity-20"></div>
|
||||
<div class="absolute w-32 h-32 translate-z-0 bg-gradient-to-r from-[#E8BB28] to-purple-700 rounded-full blur-[80px] opacity-40"></div>
|
||||
<article class="pt-12 first-of-type:pt-0 group">
|
||||
<div class="md:flex">
|
||||
<div class="w-48 shrink-0">
|
||||
<time
|
||||
class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3"
|
||||
>
|
||||
<span class="ml-[1.625rem] md:ml-5"
|
||||
>Aug 05,- Aug 11, 2024</span
|
||||
>
|
||||
</time>
|
||||
</div>
|
||||
<div
|
||||
class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none"
|
||||
>
|
||||
<header>
|
||||
<h2
|
||||
class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3"
|
||||
>
|
||||
Weekly Update
|
||||
</h2>
|
||||
</header>
|
||||
<ol class="text-white list-disc ml-5 sm:ml-3">
|
||||
<li class="p-1">
|
||||
Feature Enhancement: Make echarts tree-shakeable to
|
||||
increase performance of charts.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
Feature Enhancement: Filter out Market News to
|
||||
increase signal/noise ratio
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Particles animation -->
|
||||
<div class="absolute inset-0 h-96 z-10" aria-hidden="true">
|
||||
<ParticleEffect quantity={50} staticity={40} ease={60} />
|
||||
</article>
|
||||
|
||||
<article class="pt-12 first-of-type:pt-0 group">
|
||||
<div class="md:flex">
|
||||
<div class="w-48 shrink-0">
|
||||
<time
|
||||
class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3"
|
||||
>
|
||||
<span class="ml-[1.625rem] md:ml-5"
|
||||
>July 29- Aug 04, 2024</span
|
||||
>
|
||||
</time>
|
||||
</div>
|
||||
<div
|
||||
class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none"
|
||||
>
|
||||
<header>
|
||||
<h2
|
||||
class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3"
|
||||
>
|
||||
Weekly Update
|
||||
</h2>
|
||||
</header>
|
||||
<ol class="text-white list-disc ml-5 sm:ml-3">
|
||||
<li class="p-1">New Feature: Dividend Kings</li>
|
||||
<li class="p-1">New Feature: Dividend Aristocrats</li>
|
||||
<li class="p-1">
|
||||
New Feature: Update Dashboard for logged in Users.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
Performance: Increasing the loading time of the
|
||||
website by 2x.
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div class="pt-32 pb-12 md:pt-40 md:pb-20">
|
||||
|
||||
<!-- Page header -->
|
||||
<div class="text-center pb-12 md:pb-20">
|
||||
<h1 class="text-4xl sm:text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#E8BB28] to-purple-500 via-slate-200 to-slate-200/60 pb-4">
|
||||
What's New
|
||||
</h1>
|
||||
<div class="max-w-3xl m-auto flex justify-center items-center">
|
||||
<p class="w-5/6 text-center text-xl sm:text-2xl text-white">New updates and improvements to Stocknear.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="relative">
|
||||
<div class="absolute h-full top-4 left-[2px] w-0.5 bg-slate-800 [mask-image:_linear-gradient(0deg,transparent,theme(colors.white)_150px,theme(colors.white))] -z-10 overflow-hidden after:absolute after:h-4 after:top-0 after:-translate-y-full after:left-0 after:w-0.5 after:bg-[linear-gradient(180deg,_transparent,_theme(colors.purple.500/.65)_25%,_theme(colors.purple.200)_50%,_theme(colors.purple.500/.65)_75%,_transparent)] after:animate-shine" aria-hidden="true"></div>
|
||||
<!-- Post -->
|
||||
</article>
|
||||
|
||||
<article class="pt-12 first-of-type:pt-0 group">
|
||||
<div class="md:flex">
|
||||
<div class="w-48 shrink-0">
|
||||
<time class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3">
|
||||
<span class="ml-[1.625rem] md:ml-5">Aug 05,- Aug 11, 2024</span>
|
||||
</time>
|
||||
</div>
|
||||
<div class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none">
|
||||
<header>
|
||||
<h2 class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3">
|
||||
Weekly Update
|
||||
</h2>
|
||||
</header>
|
||||
<ol class="text-white list-disc ml-5 sm:ml-3">
|
||||
<li class="p-1">
|
||||
Feature Enhancement: Make echarts tree-shakeable to increase performance of charts.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
Feature Enhancement: Filter out Market News to increase signal/noise ratio
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="pt-12 first-of-type:pt-0 group">
|
||||
<div class="md:flex">
|
||||
<div class="w-48 shrink-0">
|
||||
<time
|
||||
class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3"
|
||||
>
|
||||
<span class="ml-[1.625rem] md:ml-5"
|
||||
>July 15-21, 2024</span
|
||||
>
|
||||
</time>
|
||||
</div>
|
||||
<div
|
||||
class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none"
|
||||
>
|
||||
<header>
|
||||
<h2
|
||||
class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3"
|
||||
>
|
||||
Weekly Update
|
||||
</h2>
|
||||
</header>
|
||||
<ol class="text-white list-disc ml-5 sm:ml-3">
|
||||
<li class="p-1">
|
||||
New Feature: Add Jim Cramer Tracker.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
New Feature: Add Swap data for stocks.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
New Feature: Adding Dashboard for logged in Users.
|
||||
</li>
|
||||
<li class="p-1">Sidebar Improved.</li>
|
||||
<li class="p-1">
|
||||
Adding Implied Volatility for ETFs.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
Enhancing UI/UX of Options 0DTE Flow for easier
|
||||
navigation.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
Bugfixing: Display info box if share statistics
|
||||
component does not have historical shares.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
Bugfixing: Options bubble crashes if data is empty.
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="pt-12 first-of-type:pt-0 group">
|
||||
<div class="md:flex">
|
||||
<div class="w-48 shrink-0">
|
||||
<time class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3">
|
||||
<span class="ml-[1.625rem] md:ml-5">July 29- Aug 04, 2024</span>
|
||||
</time>
|
||||
</div>
|
||||
<div class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none">
|
||||
<header>
|
||||
<h2 class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3">
|
||||
Weekly Update
|
||||
</h2>
|
||||
</header>
|
||||
<ol class="text-white list-disc ml-5 sm:ml-3">
|
||||
<li class="p-1">
|
||||
New Feature: Dividend Kings
|
||||
</li>
|
||||
<li class="p-1">
|
||||
New Feature: Dividend Aristocrats
|
||||
</li>
|
||||
<li class="p-1">
|
||||
New Feature: Update Dashboard for logged in Users.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
Performance: Increasing the loading time of the website by 2x.
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="pt-12 first-of-type:pt-0 group">
|
||||
<div class="md:flex">
|
||||
<div class="w-48 shrink-0">
|
||||
<time
|
||||
class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3"
|
||||
>
|
||||
<span class="ml-[1.625rem] md:ml-5"
|
||||
>July 8-12, 2024</span
|
||||
>
|
||||
</time>
|
||||
</div>
|
||||
<div
|
||||
class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none"
|
||||
>
|
||||
<header>
|
||||
<h2
|
||||
class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3"
|
||||
>
|
||||
Weekly Update
|
||||
</h2>
|
||||
</header>
|
||||
<ol class="text-white list-disc ml-5 sm:ml-3">
|
||||
<li class="p-1">
|
||||
New Feature: Adding Realtime Darkpool Trades of
|
||||
Hedge Funds & Major Institutional Traders
|
||||
</li>
|
||||
<li class="p-1">
|
||||
New Feature: Adding AI Analyst Insight
|
||||
</li>
|
||||
<li class="p-1">
|
||||
Improving frontend and backend code for faster
|
||||
loading times.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
Enhancing UI/UX for easier navigation.
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="pt-12 first-of-type:pt-0 group">
|
||||
<div class="md:flex">
|
||||
<div class="w-48 shrink-0">
|
||||
<time class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3">
|
||||
<span class="ml-[1.625rem] md:ml-5">July 15-21, 2024</span>
|
||||
</time>
|
||||
</div>
|
||||
<div class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none">
|
||||
<header>
|
||||
<h2 class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3">
|
||||
Weekly Update
|
||||
</h2>
|
||||
</header>
|
||||
<ol class="text-white list-disc ml-5 sm:ml-3">
|
||||
<li class="p-1">
|
||||
New Feature: Add Jim Cramer Tracker.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
New Feature: Add Swap data for stocks.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
New Feature: Adding Dashboard for logged in Users.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
Sidebar Improved.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
Adding Implied Volatility for ETFs.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
Enhancing UI/UX of Options 0DTE Flow for easier navigation.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
Bugfixing: Display info box if share statistics component does not have historical shares.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
Bugfixing: Options bubble crashes if data is empty.
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="pt-12 first-of-type:pt-0 group">
|
||||
<div class="md:flex">
|
||||
<div class="w-48 shrink-0">
|
||||
<time
|
||||
class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3"
|
||||
>
|
||||
<span class="ml-[1.625rem] md:ml-5"
|
||||
>July 1-5, 2024</span
|
||||
>
|
||||
</time>
|
||||
</div>
|
||||
<div
|
||||
class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none"
|
||||
>
|
||||
<header>
|
||||
<h2
|
||||
class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3"
|
||||
>
|
||||
Weekly Update
|
||||
</h2>
|
||||
</header>
|
||||
<ol class="text-white list-disc ml-5 sm:ml-3">
|
||||
<li class="p-1">
|
||||
New Feature: Adding Implied Volatility
|
||||
</li>
|
||||
<li class="p-1">
|
||||
New Feature: Adding Options Net Flow
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="pt-12 first-of-type:pt-0 group">
|
||||
<div class="md:flex">
|
||||
<div class="w-48 shrink-0">
|
||||
<time class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3">
|
||||
<span class="ml-[1.625rem] md:ml-5">July 8-12, 2024</span>
|
||||
</time>
|
||||
</div>
|
||||
<div class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none">
|
||||
<header>
|
||||
<h2 class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3">
|
||||
Weekly Update
|
||||
</h2>
|
||||
</header>
|
||||
<ol class="text-white list-disc ml-5 sm:ml-3">
|
||||
<li class="p-1">
|
||||
New Feature: Adding Realtime Darkpool Trades of Hedge Funds & Major Institutional Traders
|
||||
</li>
|
||||
<li class="p-1">
|
||||
New Feature: Adding AI Analyst Insight
|
||||
</li>
|
||||
<li class="p-1">
|
||||
Improving frontend and backend code for faster loading times.
|
||||
</li>
|
||||
<li class="p-1">
|
||||
Enhancing UI/UX for easier navigation.
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="pt-12 first-of-type:pt-0 group">
|
||||
<div class="md:flex">
|
||||
<div class="w-48 shrink-0">
|
||||
<time
|
||||
class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3"
|
||||
>
|
||||
<span class="ml-[1.625rem] md:ml-5"
|
||||
>June 28, 2024</span
|
||||
>
|
||||
</time>
|
||||
</div>
|
||||
<div
|
||||
class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none"
|
||||
>
|
||||
<header>
|
||||
<h2
|
||||
class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3"
|
||||
>
|
||||
Announcement 🎉
|
||||
</h2>
|
||||
</header>
|
||||
<span class="text-white">
|
||||
Starting today, I'll keep you updated on the changes
|
||||
from the past week: new features, improvements, bug
|
||||
fixes, and more.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<article class="pt-12 first-of-type:pt-0 group">
|
||||
<div class="md:flex">
|
||||
<div class="w-48 shrink-0">
|
||||
<time class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3">
|
||||
<span class="ml-[1.625rem] md:ml-5">July 1-5, 2024</span>
|
||||
</time>
|
||||
</div>
|
||||
<div class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none">
|
||||
<header>
|
||||
<h2 class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3">
|
||||
Weekly Update
|
||||
</h2>
|
||||
</header>
|
||||
<ol class="text-white list-disc ml-5 sm:ml-3">
|
||||
<li class="p-1">
|
||||
New Feature: Adding Implied Volatility
|
||||
</li>
|
||||
<li class="p-1">
|
||||
New Feature: Adding Options Net Flow
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="pt-12 first-of-type:pt-0 group">
|
||||
<div class="md:flex">
|
||||
<div class="w-48 shrink-0">
|
||||
<time class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3">
|
||||
<span class="ml-[1.625rem] md:ml-5">June 28, 2024</span>
|
||||
</time>
|
||||
</div>
|
||||
<div class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none">
|
||||
<header>
|
||||
<h2 class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3">
|
||||
Announcement 🎉
|
||||
</h2>
|
||||
</header>
|
||||
<span class="text-white">
|
||||
Starting today, I'll keep you updated on the changes from the past week: new features, improvements, bug fixes, and more.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<!--
|
||||
<!-- Pagination -->
|
||||
<!--
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<ul class="flex items-center justify-between mt-12 pl-8 md:pl-48">
|
||||
<li>
|
||||
@ -271,72 +326,101 @@ export let data;
|
||||
</ul>
|
||||
</div>
|
||||
-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
{#if !data?.user}
|
||||
<section class="mt-10">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div class="relative px-8 py-12 md:py-20 rounded-[3rem] overflow-hidden">
|
||||
<!-- Radial gradient -->
|
||||
<div class="absolute flex items-center justify-center top-0 -translate-y-1/2 left-1/2 -translate-x-1/2 pointer-events-none -z-10 w-1/3 aspect-square" aria-hidden="true">
|
||||
<div class="absolute inset-0 translate-z-0 bg-purple-500 rounded-full blur-[120px] opacity-70"></div>
|
||||
<div class="absolute w-1/4 h-1/4 translate-z-0 bg-purple-400 rounded-full blur-[40px]"></div>
|
||||
</div>
|
||||
<!-- Blurred shape -->
|
||||
<div class="absolute bottom-0 translate-y-1/2 left-0 blur-2xl opacity-50 pointer-events-none -z-10" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="434" height="427">
|
||||
<defs>
|
||||
<linearGradient id="bs5-a" x1="19.609%" x2="50%" y1="14.544%" y2="100%">
|
||||
<stop offset="0%" stop-color="#A855F7" />
|
||||
<stop offset="100%" stop-color="#6366F1" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path fill="url(#bs5-a)" fill-rule="evenodd" d="m0 0 461 369-284 58z" transform="matrix(1 0 0 -1 0 427)" />
|
||||
</svg>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<div>
|
||||
<div class="text-2xl sm:text-4xl font-bold inline-flex pb-3">
|
||||
Start your free trial today
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-center m-auto text-[1rem] sm:text-lg text-white font-medium pb-4">
|
||||
Try Stocknear Platform for 30 days. No credit card required.
|
||||
</h2>
|
||||
<a href='/register'
|
||||
class="animate-shine mt-5 w-56 sm:w-80 m-auto group relative grid overflow-hidden rounded-xl px-6 py-3 shadow-[0_1000px_0_0_hsl(0_0%_20%)_inset] transition-colors"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
class="spark mask-gradient animate-flip before:animate-kitrotate absolute inset-0 h-[100%] w-[100%] overflow-hidden rounded-xl [mask:linear-gradient(white,_transparent_50%)] before:absolute before:aspect-square before:w-[200%] before:rotate-[-90deg] before:bg-[conic-gradient(from_0deg,transparent_0_340deg,white_360deg)] before:content-[''] before:[inset:0_auto_auto_50%] before:[translate:-50%_-15%]"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="backdrop absolute inset-px rounded-[11px] bg-[#FBCE3C] transition-colors duration-200 group-hover:bg-[#be9204"
|
||||
/>
|
||||
<span class="z-10 text-black text-[1rem] sm:text-lg font-semibold">
|
||||
<slot>Free trial for 30 days</slot>
|
||||
</span>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</section>
|
||||
<!-- CTA -->
|
||||
{#if !data?.user}
|
||||
<section class="mt-10">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div
|
||||
class="relative px-8 py-12 md:py-20 rounded-[3rem] overflow-hidden"
|
||||
>
|
||||
<!-- Radial gradient -->
|
||||
<div
|
||||
class="absolute flex items-center justify-center top-0 -translate-y-1/2 left-1/2 -translate-x-1/2 pointer-events-none -z-10 w-1/3 aspect-square"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div
|
||||
class="absolute inset-0 translate-z-0 bg-purple-500 rounded-full blur-[120px] opacity-70"
|
||||
></div>
|
||||
<div
|
||||
class="absolute w-1/4 h-1/4 translate-z-0 bg-purple-400 rounded-full blur-[40px]"
|
||||
></div>
|
||||
</div>
|
||||
<!-- Blurred shape -->
|
||||
<div
|
||||
class="absolute bottom-0 translate-y-1/2 left-0 blur-2xl opacity-50 pointer-events-none -z-10"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="434"
|
||||
height="427"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="bs5-a"
|
||||
x1="19.609%"
|
||||
x2="50%"
|
||||
y1="14.544%"
|
||||
y2="100%"
|
||||
>
|
||||
<stop offset="0%" stop-color="#A855F7" />
|
||||
<stop
|
||||
offset="100%"
|
||||
stop-color="#6366F1"
|
||||
stop-opacity="0"
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
fill="url(#bs5-a)"
|
||||
fill-rule="evenodd"
|
||||
d="m0 0 461 369-284 58z"
|
||||
transform="matrix(1 0 0 -1 0 427)"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<div>
|
||||
<div
|
||||
class="text-2xl sm:text-4xl font-bold inline-flex pb-3"
|
||||
>
|
||||
Start your free trial today
|
||||
</div>
|
||||
</div>
|
||||
<h2
|
||||
class="text-center m-auto text-[1rem] sm:text-lg text-white font-medium pb-4"
|
||||
>
|
||||
Try Stocknear Platform for 30 days. No credit card required.
|
||||
</h2>
|
||||
<a
|
||||
href="/register"
|
||||
class="animate-shine mt-5 w-56 sm:w-80 m-auto group relative grid overflow-hidden rounded-xl px-6 py-3 shadow-[0_1000px_0_0_hsl(0_0%_20%)_inset] transition-colors"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
class="spark mask-gradient animate-flip before:animate-kitrotate absolute inset-0 h-[100%] w-[100%] overflow-hidden rounded-xl [mask:linear-gradient(white,_transparent_50%)] before:absolute before:aspect-square before:w-[200%] before:rotate-[-90deg] before:bg-[conic-gradient(from_0deg,transparent_0_340deg,white_360deg)] before:content-[''] before:[inset:0_auto_auto_50%] before:[translate:-50%_-15%]"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="backdrop absolute inset-px rounded-[11px] bg-[#fff] transition-colors duration-200 group-hover:bg-[#be9204"
|
||||
/>
|
||||
<span
|
||||
class="z-10 text-black text-[1rem] sm:text-lg font-semibold"
|
||||
>
|
||||
<slot>Free trial for 30 days</slot>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</section>
|
||||
|
||||
@ -311,7 +311,7 @@
|
||||
<main class="m-auto w-full">
|
||||
<!--Start Header-->
|
||||
<div
|
||||
class="w-full sm:rounded-lg m-auto h-44 sm:h-60 shadow-sm shadow-black bg-center bg-cover bg-no-repeat"
|
||||
class="w-full sm:rounded-md m-auto h-44 sm:h-60 shadow-sm shadow-black bg-center bg-cover bg-no-repeat"
|
||||
style="background-image: url('{communityBanner}');"
|
||||
/>
|
||||
<!--End Header-->
|
||||
@ -560,7 +560,7 @@
|
||||
<div class="flex justify-center items-center mb-8 pt-5">
|
||||
<a
|
||||
href="/community/create-post"
|
||||
class="rounded-lg cursor-pointer w-11/12 py-2 h-full mt-2 text-md text-center font-semibold text-white m-auto hover:bg-purple-700 bg-purple-600 mb-6 duration-100"
|
||||
class="rounded-md cursor-pointer w-11/12 py-2 h-full mt-2 text-md text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] mb-6 duration-100"
|
||||
>
|
||||
Create Post
|
||||
</a>
|
||||
@ -573,7 +573,7 @@
|
||||
{#if discordData?.length !== 0}
|
||||
<div class="space-y-3 mb-5">
|
||||
<div
|
||||
class="bg-[#141417] border border-gray-800 h-auto sm:w-96 rounded-lg"
|
||||
class="bg-[#141417] border border-gray-800 h-auto sm:w-96 rounded-md"
|
||||
>
|
||||
<!--Start Image-->
|
||||
<div class="flex flex-row items-center w-full p-3">
|
||||
@ -675,7 +675,7 @@
|
||||
href={discordURL}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
class="rounded-lg cursor-pointer w-11/12 py-2 h-full mt-2 text-md text-center font-semibold text-white m-auto hover:bg-purple-700 bg-purple-600 mb-6 duration-100"
|
||||
class="rounded-md cursor-pointer w-11/12 py-2 h-full mt-2 text-md text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] mb-6 duration-100"
|
||||
>
|
||||
Join Us
|
||||
</a>
|
||||
@ -689,7 +689,7 @@
|
||||
<!--Community Rules-->
|
||||
<div class="space-y-3 mt-5 fixed sticky" style="top: 5rem;">
|
||||
<div
|
||||
class="bg-[#141417] border border-gray-800 sm:w-96 rounded-lg"
|
||||
class="bg-[#141417] border border-gray-800 sm:w-96 rounded-md"
|
||||
>
|
||||
<!--Start Header-->
|
||||
<div
|
||||
@ -702,7 +702,7 @@
|
||||
<!--End Header-->
|
||||
|
||||
<!--Start Content-->
|
||||
<div class="w-full pl-7 text-gray-300">
|
||||
<div class="w-full pl-7 text-white">
|
||||
<ol class="list-decimal pl-4 pr-4 pb-5 pt-4">
|
||||
<li class="text-[1rem] mb-3">
|
||||
Avoid Purely Policital Discussion
|
||||
|
||||
@ -1,269 +1,284 @@
|
||||
<script lang='ts'>
|
||||
<script lang="ts">
|
||||
import { enhance } from "$app/forms";
|
||||
import Input from "$lib/components/Input.svelte";
|
||||
import TextArea from "$lib/components/TextArea.svelte";
|
||||
import Tags from "$lib/components/Tags.svelte";
|
||||
import toast from "svelte-french-toast";
|
||||
import { numberOfUnreadNotification } from "$lib/store";
|
||||
|
||||
import { enhance } from '$app/forms';
|
||||
import Input from '$lib/components/Input.svelte';
|
||||
import TextArea from '$lib/components/TextArea.svelte';
|
||||
import Tags from '$lib/components/Tags.svelte'
|
||||
import toast from 'svelte-french-toast';
|
||||
import { numberOfUnreadNotification } from '$lib/store';
|
||||
|
||||
export let form;
|
||||
let isClicked = false;
|
||||
let loading = false;
|
||||
|
||||
const submitPost = () => {
|
||||
loading = true;
|
||||
return async ({ result, update}) => {
|
||||
switch (result.type) {
|
||||
case 'redirect':
|
||||
isClicked = true;
|
||||
toast.success('Posted successfully!', {
|
||||
style: 'border-radius: 200px; background: #333; color: #fff;'});
|
||||
await update();
|
||||
break;
|
||||
case 'failure':
|
||||
toast.error('Invalid inputs', {
|
||||
style: 'border-radius: 200px; background: #333; color: #fff;'});
|
||||
await update();
|
||||
break;
|
||||
|
||||
case 'error':
|
||||
toast.error(result.error.message, {
|
||||
style: 'border-radius: 200px; background: #333; color: #fff;'});
|
||||
break;
|
||||
default:
|
||||
await update();
|
||||
}
|
||||
loading = false;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
let postType = 'text';
|
||||
export let form;
|
||||
let isClicked = false;
|
||||
let loading = false;
|
||||
|
||||
async function changePostType(state)
|
||||
{
|
||||
switch (state)
|
||||
{
|
||||
case 'text':
|
||||
postType = 'text';
|
||||
break;
|
||||
case 'image':
|
||||
postType = 'image';
|
||||
break;
|
||||
case 'link':
|
||||
postType = 'link';
|
||||
//title = await getTitle()
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<svelte:head>
|
||||
<title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Create a Post · stocknear</title>
|
||||
<meta name="description" content="
|
||||
Create a post to share your insights, latest news and memes to the stocknear community.">
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
</svelte:head>
|
||||
|
||||
|
||||
<div class="flex justify-start items-start m-auto max-w-5xl w-full min-h-screen p-2 pt-10 pb-40">
|
||||
|
||||
<div class="w-full">
|
||||
<form
|
||||
action= {postType === 'text' ? '?/createPostText' : postType === 'image' ? '?/createPostImage' : '?/createPostLink'}
|
||||
method="POST"
|
||||
class="flex flex-col space-y-2 w-full items-center"
|
||||
enctype="multipart/form-data"
|
||||
use:enhance={submitPost}
|
||||
>
|
||||
<h3 class="text-3xl font-bold mb-3 text-white">Create a Post</h3>
|
||||
<!--<p class="mt-2 text-lg">We'll need the title, tagline, url, and description</p>-->
|
||||
|
||||
<div class="w-full max-w-3xl pt-10 flex justify-center items-center m-auto pb-5 bg-[#09090B]" style="top: 4rem;">
|
||||
<!--<svg class="w-4 h-4 sm:w-6 sm:h-6 inline-block mr-0 sm:mr-2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M2.66992 7.16979V5.34979C2.66992 4.19979 3.59992 3.27979 4.73992 3.27979H19.2599C20.4099 3.27979 21.3299 4.20979 21.3299 5.34979V7.16979" stroke="#A6ADBB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path opacity="0.4" d="M12 20.7199V4.10986" stroke="#A6ADBB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M8.06055 20.7202H15.9405" stroke="#A6ADBB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>-->
|
||||
|
||||
<div class="flex flex-col items-center mr-5 sm:mr-10">
|
||||
<label class="tab font-semibold hover:text-gray-300 {postType === 'text' ? 'text-gray-200' : 'text-[#9A9996]'}" on:click={() => changePostType('text')}>
|
||||
<span class="text-lg sm:text-2xl">Text</span>
|
||||
</label>
|
||||
<div class="{postType === 'text' ? 'bg-[#75D377]' : 'bg-[#09090B]'} h-1 w-[3rem]" />
|
||||
</div>
|
||||
|
||||
|
||||
<!--<svg class="w-5 h-5 sm:w-6 sm:h-6 inline-block mr-0 sm:mr-2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="0.4" d="M22.0206 16.8198L18.8906 9.49978C18.3206 8.15978 17.4706 7.39978 16.5006 7.34978C15.5406 7.29978 14.6106 7.96978 13.9006 9.24978L12.0006 12.6598C11.6006 13.3798 11.0306 13.8098 10.4106 13.8598C9.78063 13.9198 9.15063 13.5898 8.64063 12.9398L8.42063 12.6598C7.71063 11.7698 6.83063 11.3398 5.93063 11.4298C5.03063 11.5198 4.26063 12.1398 3.75063 13.1498L2.02063 16.5998C1.40063 17.8498 1.46063 19.2998 2.19063 20.4798C2.92063 21.6598 4.19063 22.3698 5.58063 22.3698H18.3406C19.6806 22.3698 20.9306 21.6998 21.6706 20.5798C22.4306 19.4598 22.5506 18.0498 22.0206 16.8198Z" fill="{ postType === 'image' ? 'white' : '#A6ADBB'}" ></path> <path d="M6.96984 8.38012C8.83657 8.38012 10.3498 6.86684 10.3498 5.00012C10.3498 3.13339 8.83657 1.62012 6.96984 1.62012C5.10312 1.62012 3.58984 3.13339 3.58984 5.00012C3.58984 6.86684 5.10312 8.38012 6.96984 8.38012Z" fill="#E5E7EB"></path> </g></svg>-->
|
||||
<div class="flex flex-col items-center mr-5">
|
||||
<label class="tab font-semibold hover:text-gray-200 {postType === 'image' ? 'text-gray-200' : 'text-[#9A9996]'}" on:click={() => changePostType('image')}>
|
||||
<span class="text-lg sm:text-2xl">Image/Video</span>
|
||||
</label>
|
||||
<div class="{postType === 'image' ? 'bg-[#75D377]' : 'bg-[#09090B]'} h-1 w-[8rem] sm:w-[4rem]" />
|
||||
</div>
|
||||
<!--<svg class="w-5 h-5 sm:w-6 sm:h-6 inline-block" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="{ postType === 'link' ? 'white' : '#A6ADBB'}"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.975 14.51a1.05 1.05 0 0 0 0-1.485 2.95 2.95 0 0 1 0-4.172l3.536-3.535a2.95 2.95 0 1 1 4.172 4.172l-1.093 1.092a1.05 1.05 0 0 0 1.485 1.485l1.093-1.092a5.05 5.05 0 0 0-7.142-7.142L9.49 7.368a5.05 5.05 0 0 0 0 7.142c.41.41 1.075.41 1.485 0zm2.05-5.02a1.05 1.05 0 0 0 0 1.485 2.95 2.95 0 0 1 0 4.172l-3.5 3.5a2.95 2.95 0 1 1-4.171-4.172l1.025-1.025a1.05 1.05 0 0 0-1.485-1.485L3.87 12.99a5.05 5.05 0 0 0 7.142 7.142l3.5-3.5a5.05 5.05 0 0 0 0-7.142 1.05 1.05 0 0 0-1.485 0z" fill="{ postType === 'link' ? 'white' : '#A6ADBB'}"></path></g></svg>-->
|
||||
<div class="flex flex-col items-center">
|
||||
<label class="tab font-semibold hover:text-gray-200 {postType === 'link' ? 'text-gray-200' : 'text-[#9A9996]'}" on:click={() => changePostType('link')}>
|
||||
<span class="text-lg sm:text-2xl">Link</span>
|
||||
</label>
|
||||
<div class="{postType === 'link' ? 'bg-[#75D377]' : 'bg-[#09090B]'} h-1 w-[3rem]" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<Input
|
||||
id="title"
|
||||
label=""
|
||||
placeholder='Title'
|
||||
value={form?.data?.title}
|
||||
errors={form?.errors?.title}
|
||||
disabled={loading}
|
||||
maxLength = {300}
|
||||
showCounter = {true}
|
||||
/>
|
||||
|
||||
|
||||
<Input
|
||||
id="link"
|
||||
label=""
|
||||
placeholder='Url'
|
||||
value={form?.data?.link}
|
||||
errors={form?.errors?.link}
|
||||
hidden={postType === 'link' ? false : true}
|
||||
disabled={loading}
|
||||
useTitle = {true}
|
||||
|
||||
/>
|
||||
|
||||
|
||||
<TextArea
|
||||
id="description"
|
||||
label=""
|
||||
placeholder='Write your Post Content here (optional)'
|
||||
value={form?.data?.description}
|
||||
errors={form?.errors?.description}
|
||||
hidden={postType === 'text' ? false : true}
|
||||
disabled={loading}
|
||||
/>
|
||||
|
||||
<Input
|
||||
id="thumbnail"
|
||||
label=""
|
||||
type="file"
|
||||
errors={form?.errors?.thumbnail}
|
||||
hidden={postType === 'image' ? false : true}
|
||||
disabled={loading}
|
||||
/>
|
||||
|
||||
<Tags
|
||||
id = "atLeastOneTag"
|
||||
errors ={form?.errors?.atLeastOneTag}
|
||||
placeholder={'Please pick at least 1 tag but no more than 3' }
|
||||
/>
|
||||
|
||||
|
||||
<span class="hidden sm:block text-white text-sm sm:text-[1rem] text-start w-full max-w-2xl">
|
||||
Use <a href="/markdown-guide" rel="noopener noreferrer" target="_blank" class="text-blue-500 sm:hover:text-white">
|
||||
Markdown
|
||||
</a> to format posts.
|
||||
</span>
|
||||
|
||||
const submitPost = () => {
|
||||
loading = true;
|
||||
return async ({ result, update }) => {
|
||||
switch (result.type) {
|
||||
case "redirect":
|
||||
isClicked = true;
|
||||
toast.success("Posted successfully!", {
|
||||
style: "border-radius: 200px; background: #333; color: #fff;",
|
||||
});
|
||||
await update();
|
||||
break;
|
||||
case "failure":
|
||||
toast.error("Invalid inputs", {
|
||||
style: "border-radius: 200px; background: #333; color: #fff;",
|
||||
});
|
||||
await update();
|
||||
break;
|
||||
|
||||
<input type="hidden" name="postType" value={postType}>
|
||||
|
||||
<div class="w-full max-w-sm sm:max-w-2xl pt-5 sm:pt-3">
|
||||
case "error":
|
||||
toast.error(result.error.message, {
|
||||
style: "border-radius: 200px; background: #333; color: #fff;",
|
||||
});
|
||||
break;
|
||||
default:
|
||||
await update();
|
||||
}
|
||||
loading = false;
|
||||
};
|
||||
};
|
||||
|
||||
{#if !loading && !isClicked}
|
||||
<button type="submit" class="btn bg-purple-600 hover:bg-purple-500 w-full max-w-2xl normal-case text-lg mb-3">
|
||||
<span class="text-white">Post</span>
|
||||
</button>
|
||||
{:else}
|
||||
<label class="cursor-not-allowed btn bg-purple-600 w-full max-w-2xl normal-case text-lg mb-3">
|
||||
<div class="flex flex-row m-auto">
|
||||
<span class="loading loading-infinity"></span>
|
||||
<span class="text-white ml-2">Loading</span>
|
||||
</div>
|
||||
</label>
|
||||
{/if}
|
||||
let postType = "text";
|
||||
|
||||
<span class="sm:hidden text-white text-sm sm:text-[1rem] text-start w-full max-w-sm sm:max-w-2xl ">
|
||||
Use <a href="/markdown-guide" rel="noopener noreferrer" target="_blank" class="text-blue-500 sm:hover:text-white">
|
||||
Markdown
|
||||
</a> to format posts.
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
async function changePostType(state) {
|
||||
switch (state) {
|
||||
case "text":
|
||||
postType = "text";
|
||||
break;
|
||||
case "image":
|
||||
postType = "image";
|
||||
break;
|
||||
case "link":
|
||||
postType = "link";
|
||||
//title = await getTitle()
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="hidden xl:inline-block pt-[150px] pl-10">
|
||||
<svelte:head>
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Create
|
||||
a Post · stocknear</title
|
||||
>
|
||||
<meta
|
||||
name="description"
|
||||
content="
|
||||
Create a post to share your insights, latest news and memes to the stocknear community."
|
||||
/>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
</svelte:head>
|
||||
|
||||
|
||||
<!-- Sidebar content -->
|
||||
<div class="lg:pl-2 z-20 h-full">
|
||||
|
||||
<!-- Sidebar content -->
|
||||
<div
|
||||
class="flex justify-start items-start m-auto max-w-5xl w-full min-h-screen p-2 pt-10 pb-40"
|
||||
>
|
||||
<div class="w-full">
|
||||
<form
|
||||
action={postType === "text"
|
||||
? "?/createPostText"
|
||||
: postType === "image"
|
||||
? "?/createPostImage"
|
||||
: "?/createPostLink"}
|
||||
method="POST"
|
||||
class="flex flex-col space-y-2 w-full items-center"
|
||||
enctype="multipart/form-data"
|
||||
use:enhance={submitPost}
|
||||
>
|
||||
<h3 class="text-3xl font-bold mb-3 text-white">Create a Post</h3>
|
||||
<!--<p class="mt-2 text-lg">We'll need the title, tagline, url, and description</p>-->
|
||||
|
||||
|
||||
<!--Community Rules-->
|
||||
<div class="space-y-3 mt-5 fixed sticky" style="top: 5rem;">
|
||||
<div class="bg-[#141417] border border-gray-800 sm:w-96 rounded-lg">
|
||||
<!--Start Header-->
|
||||
<div class="bg-[#141417] border-b border-slate-700 w-full pl-6 pr-6 pt-6 pb-4 rounded-t-lg">
|
||||
<span class="text-white text-xl ml-1 font-semibold">
|
||||
Community Rules
|
||||
</span>
|
||||
</div>
|
||||
<!--End Header-->
|
||||
<div
|
||||
class="w-full max-w-3xl pt-10 flex justify-center items-center m-auto pb-5 bg-[#09090B]"
|
||||
style="top: 4rem;"
|
||||
>
|
||||
<!--<svg class="w-4 h-4 sm:w-6 sm:h-6 inline-block mr-0 sm:mr-2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M2.66992 7.16979V5.34979C2.66992 4.19979 3.59992 3.27979 4.73992 3.27979H19.2599C20.4099 3.27979 21.3299 4.20979 21.3299 5.34979V7.16979" stroke="#A6ADBB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path opacity="0.4" d="M12 20.7199V4.10986" stroke="#A6ADBB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M8.06055 20.7202H15.9405" stroke="#A6ADBB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>-->
|
||||
|
||||
<!--Start Content-->
|
||||
<div class="w-full pl-7 text-gray-300">
|
||||
<ol class="list-decimal pl-4 pr-4 pb-5 pt-4">
|
||||
<li class="text-[1rem] mb-3">
|
||||
Avoid Purely Policital Discussion
|
||||
</li>
|
||||
<li class="text-[1rem] mb-3">
|
||||
No violence or gory contents
|
||||
</li>
|
||||
<li class="text-[1rem] mb-3">
|
||||
No Advertisement, Self-Promotion, Fundraising, or Begging
|
||||
</li>
|
||||
<li class="text-[1rem]">
|
||||
No illegal activities
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
</div>
|
||||
<!--End Content-->
|
||||
<div class="flex flex-col items-center mr-5 sm:mr-10">
|
||||
<label
|
||||
class="tab font-semibold hover:text-gray-300 {postType === 'text'
|
||||
? 'text-gray-200'
|
||||
: 'text-[#9A9996]'}"
|
||||
on:click={() => changePostType("text")}
|
||||
>
|
||||
<span class="text-lg sm:text-2xl">Text</span>
|
||||
</label>
|
||||
<div
|
||||
class="{postType === 'text'
|
||||
? 'bg-[#75D377]'
|
||||
: 'bg-[#09090B]'} h-1 w-[3rem]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--<svg class="w-5 h-5 sm:w-6 sm:h-6 inline-block mr-0 sm:mr-2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="0.4" d="M22.0206 16.8198L18.8906 9.49978C18.3206 8.15978 17.4706 7.39978 16.5006 7.34978C15.5406 7.29978 14.6106 7.96978 13.9006 9.24978L12.0006 12.6598C11.6006 13.3798 11.0306 13.8098 10.4106 13.8598C9.78063 13.9198 9.15063 13.5898 8.64063 12.9398L8.42063 12.6598C7.71063 11.7698 6.83063 11.3398 5.93063 11.4298C5.03063 11.5198 4.26063 12.1398 3.75063 13.1498L2.02063 16.5998C1.40063 17.8498 1.46063 19.2998 2.19063 20.4798C2.92063 21.6598 4.19063 22.3698 5.58063 22.3698H18.3406C19.6806 22.3698 20.9306 21.6998 21.6706 20.5798C22.4306 19.4598 22.5506 18.0498 22.0206 16.8198Z" fill="{ postType === 'image' ? 'white' : '#A6ADBB'}" ></path> <path d="M6.96984 8.38012C8.83657 8.38012 10.3498 6.86684 10.3498 5.00012C10.3498 3.13339 8.83657 1.62012 6.96984 1.62012C5.10312 1.62012 3.58984 3.13339 3.58984 5.00012C3.58984 6.86684 5.10312 8.38012 6.96984 8.38012Z" fill="#E5E7EB"></path> </g></svg>-->
|
||||
<div class="flex flex-col items-center mr-5">
|
||||
<label
|
||||
class="tab font-semibold hover:text-gray-200 {postType === 'image'
|
||||
? 'text-gray-200'
|
||||
: 'text-[#9A9996]'}"
|
||||
on:click={() => changePostType("image")}
|
||||
>
|
||||
<span class="text-lg sm:text-2xl">Image/Video</span>
|
||||
</label>
|
||||
<div
|
||||
class="{postType === 'image'
|
||||
? 'bg-[#75D377]'
|
||||
: 'bg-[#09090B]'} h-1 w-[8rem] sm:w-[4rem]"
|
||||
/>
|
||||
</div>
|
||||
<!--<svg class="w-5 h-5 sm:w-6 sm:h-6 inline-block" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="{ postType === 'link' ? 'white' : '#A6ADBB'}"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.975 14.51a1.05 1.05 0 0 0 0-1.485 2.95 2.95 0 0 1 0-4.172l3.536-3.535a2.95 2.95 0 1 1 4.172 4.172l-1.093 1.092a1.05 1.05 0 0 0 1.485 1.485l1.093-1.092a5.05 5.05 0 0 0-7.142-7.142L9.49 7.368a5.05 5.05 0 0 0 0 7.142c.41.41 1.075.41 1.485 0zm2.05-5.02a1.05 1.05 0 0 0 0 1.485 2.95 2.95 0 0 1 0 4.172l-3.5 3.5a2.95 2.95 0 1 1-4.171-4.172l1.025-1.025a1.05 1.05 0 0 0-1.485-1.485L3.87 12.99a5.05 5.05 0 0 0 7.142 7.142l3.5-3.5a5.05 5.05 0 0 0 0-7.142 1.05 1.05 0 0 0-1.485 0z" fill="{ postType === 'link' ? 'white' : '#A6ADBB'}"></path></g></svg>-->
|
||||
<div class="flex flex-col items-center">
|
||||
<label
|
||||
class="tab font-semibold hover:text-gray-200 {postType === 'link'
|
||||
? 'text-gray-200'
|
||||
: 'text-[#9A9996]'}"
|
||||
on:click={() => changePostType("link")}
|
||||
>
|
||||
<span class="text-lg sm:text-2xl">Link</span>
|
||||
</label>
|
||||
<div
|
||||
class="{postType === 'link'
|
||||
? 'bg-[#75D377]'
|
||||
: 'bg-[#09090B]'} h-1 w-[3rem]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--End Community Rules-->
|
||||
|
||||
|
||||
</div>
|
||||
<Input
|
||||
id="title"
|
||||
label=""
|
||||
placeholder="Title"
|
||||
value={form?.data?.title}
|
||||
errors={form?.errors?.title}
|
||||
disabled={loading}
|
||||
maxLength={300}
|
||||
showCounter={true}
|
||||
/>
|
||||
|
||||
</aside>
|
||||
<Input
|
||||
id="link"
|
||||
label=""
|
||||
placeholder="Url"
|
||||
value={form?.data?.link}
|
||||
errors={form?.errors?.link}
|
||||
hidden={postType === "link" ? false : true}
|
||||
disabled={loading}
|
||||
useTitle={true}
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<TextArea
|
||||
id="description"
|
||||
label=""
|
||||
placeholder="Write your Post Content here (optional)"
|
||||
value={form?.data?.description}
|
||||
errors={form?.errors?.description}
|
||||
hidden={postType === "text" ? false : true}
|
||||
disabled={loading}
|
||||
/>
|
||||
|
||||
<Input
|
||||
id="thumbnail"
|
||||
label=""
|
||||
type="file"
|
||||
errors={form?.errors?.thumbnail}
|
||||
hidden={postType === "image" ? false : true}
|
||||
disabled={loading}
|
||||
/>
|
||||
|
||||
<Tags
|
||||
id="atLeastOneTag"
|
||||
errors={form?.errors?.atLeastOneTag}
|
||||
placeholder={"Please pick at least 1 tag but no more than 3"}
|
||||
/>
|
||||
|
||||
<span
|
||||
class="hidden sm:block text-white text-sm sm:text-[1rem] text-start w-full max-w-2xl"
|
||||
>
|
||||
Use <a
|
||||
href="/markdown-guide"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
class="text-blue-500 sm:hover:text-white"
|
||||
>
|
||||
Markdown
|
||||
</a> to format posts.
|
||||
</span>
|
||||
|
||||
<input type="hidden" name="postType" value={postType} />
|
||||
|
||||
<div class="w-full max-w-sm sm:max-w-2xl pt-5 sm:pt-3">
|
||||
{#if !loading && !isClicked}
|
||||
<button
|
||||
type="submit"
|
||||
class="btn bg-[#fff] sm:hover:bg-gray-300 w-full max-w-2xl normal-case text-lg mb-3"
|
||||
>
|
||||
<span class="text-black">Post</span>
|
||||
</button>
|
||||
{:else}
|
||||
<label
|
||||
class="cursor-not-allowed btn bg-[#fff] w-full max-w-2xl normal-case text-lg mb-3"
|
||||
>
|
||||
<div class="flex flex-row m-auto">
|
||||
<span class="loading loading-infinity"></span>
|
||||
<span class="text-black ml-2">Loading</span>
|
||||
</div>
|
||||
</label>
|
||||
{/if}
|
||||
|
||||
<span
|
||||
class="sm:hidden text-white text-sm sm:text-[1rem] text-start w-full max-w-sm sm:max-w-2xl"
|
||||
>
|
||||
Use <a
|
||||
href="/markdown-guide"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
class="text-blue-500 sm:hover:text-white"
|
||||
>
|
||||
Markdown
|
||||
</a> to format posts.
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="hidden xl:inline-block pt-[150px] pl-10">
|
||||
<!-- Sidebar content -->
|
||||
<div class="lg:pl-2 z-20 h-full">
|
||||
<!-- Sidebar content -->
|
||||
|
||||
<!--Community Rules-->
|
||||
<div class="space-y-3 mt-5 fixed sticky" style="top: 5rem;">
|
||||
<div class="bg-[#141417] border border-gray-800 sm:w-96 rounded-lg">
|
||||
<!--Start Header-->
|
||||
<div
|
||||
class="bg-[#141417] border-b border-slate-700 w-full pl-6 pr-6 pt-6 pb-4 rounded-t-lg"
|
||||
>
|
||||
<span class="text-white text-xl ml-1 font-semibold">
|
||||
Community Rules
|
||||
</span>
|
||||
</div>
|
||||
<!--End Header-->
|
||||
|
||||
<!--Start Content-->
|
||||
<div class="w-full pl-7 text-gray-300">
|
||||
<ol class="list-decimal pl-4 pr-4 pb-5 pt-4">
|
||||
<li class="text-[1rem] mb-3">
|
||||
Avoid Purely Policital Discussion
|
||||
</li>
|
||||
<li class="text-[1rem] mb-3">No violence or gory contents</li>
|
||||
<li class="text-[1rem] mb-3">
|
||||
No Advertisement, Self-Promotion, Fundraising, or Begging
|
||||
</li>
|
||||
<li class="text-[1rem]">No illegal activities</li>
|
||||
</ol>
|
||||
</div>
|
||||
<!--End Content-->
|
||||
</div>
|
||||
</div>
|
||||
<!--End Community Rules-->
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
@ -956,7 +956,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -624,7 +624,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
d="M273.857 21.904c-24.193.012-51.198 5.552-81.1 17.467c143.7 12.608 150.35 129.263 84.032 132.814c-85.27 4.565-53.232-57.217-133.34-103.03C200.445 201.48 94.44 190.33 21.054 59.23c12.805 85.755 24.28 116.942 78.26 153.596C261.996 323.294 94.618 347.8 36.82 245.53c14.568 93.454 68.364 132.803 131.707 139.93c-42.753 24.49-99.452 32.49-143.01 25.556c51.025 42.317 131.606 40.94 193.515 8.576c-37.137 36.123-97.446 70.644-116.803 74.728H276.36C517 405.563 530.305 232.45 454.827 124.492c-2.433 26.21-10.08 49.507-25.545 70.23c-18.48-102.394-69.02-172.86-155.426-172.818zm2.82 184.666l141.384 52.155c.286-3.207.86-6.495 1.747-9.807c5.62-20.973 21.605-34.913 35.705-31.135s20.973 23.842 15.353 44.815c-5.62 20.974-21.603 34.914-35.703 31.136a18 18 0 0 1-2.113-.72l-60.58 49.394l70.637 19.584l-140.023 84.71l65.848-68.866l-31.32-7.006l-150.335 122.58l158.06-196.89l-137.39-41.137l137.006 5.654l-68.275-54.467z"
|
||||
/></svg
|
||||
>
|
||||
@ -834,7 +834,7 @@
|
||||
<div class="w-full max-w-lg pt-3">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn bg-purple-600 sm:hover:bg-purple-700 duration-100 text-white w-full max-w-lg normal-case"
|
||||
class="btn bg-[#fff] sm:hover:bg-gray-300 duration-100 text-white w-full max-w-lg normal-case"
|
||||
>Update your data</button
|
||||
>
|
||||
</div>
|
||||
@ -872,7 +872,7 @@
|
||||
<div class="w-full max-w-lg pt-3">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn bg-purple-600 text-white hover:bg-purple-500 w-full max-w-lg normal-case text-md"
|
||||
class="btn bg-[#fff] text-white sm:hover:bg-gray-300 w-full max-w-lg normal-case text-md"
|
||||
>Update Password</button
|
||||
>
|
||||
</div>
|
||||
@ -1029,7 +1029,7 @@
|
||||
{:else if subscriptionData?.status_formatted === "Cancelled"}
|
||||
<label
|
||||
for="reactivateSubscriptionModal"
|
||||
class="cursor-pointer text-white bg-purple-600 sm:hover:bg-purple-700 text-sm sm:text-[1rem] px-4 py-2 rounded-lg mt-5"
|
||||
class="cursor-pointer text-white bg-[#fff] sm:hover:bg-gray-300 text-sm sm:text-[1rem] px-4 py-2 rounded-lg mt-5"
|
||||
>
|
||||
Reactivate Subscription
|
||||
</label>
|
||||
|
||||
@ -263,7 +263,7 @@
|
||||
viewBox="0 0 256 256"
|
||||
>
|
||||
<path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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>
|
||||
|
||||
@ -173,7 +173,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -165,7 +165,7 @@
|
||||
{#if newsList?.length !== rawNews?.length}
|
||||
<label
|
||||
on:click={loadMoreData}
|
||||
class="shadow-lg rounded-lg cursor-pointer w-5/6 sm:w-3/5 sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6]"
|
||||
class="shadow-lg rounded-lg cursor-pointer w-5/6 sm:w-3/5 sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto hover:bg-[#fff] bg-[#fff] bg-opacity-[0.6]"
|
||||
>
|
||||
Load More News
|
||||
</label>
|
||||
@ -179,7 +179,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -130,7 +130,7 @@ updateYearRange()
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -390,7 +390,7 @@
|
||||
on:click={() => toggleDate(index)}
|
||||
class=" m-auto w-full cursor-pointer h-16 {index ===
|
||||
selectedWeekday
|
||||
? 'bg-[#FBCE3C] text-black font-semibold'
|
||||
? 'bg-[#fff] text-black font-semibold'
|
||||
: ''} rounded-md sm:rounded-none flex bg-[#09090B] border border-gray-600 mb-3"
|
||||
>
|
||||
<div
|
||||
@ -547,7 +547,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -390,7 +390,7 @@
|
||||
on:click={() => toggleDate(index)}
|
||||
class=" m-auto w-full cursor-pointer h-16 {index ===
|
||||
selectedWeekday
|
||||
? 'bg-[#FBCE3C] text-black font-semibold'
|
||||
? 'bg-[#fff] text-black font-semibold'
|
||||
: ''} rounded-md sm:rounded-none flex bg-[#09090B] border border-gray-600 mb-3"
|
||||
>
|
||||
<div
|
||||
@ -613,7 +613,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -252,7 +252,7 @@
|
||||
on:click={() => toggleDate(index)}
|
||||
class=" m-auto w-full cursor-pointer h-16 {index ===
|
||||
selectedWeekday
|
||||
? 'bg-[#FBCE3C] text-black font-semibold'
|
||||
? 'bg-[#fff] text-black font-semibold'
|
||||
: ''} rounded sm:rounded-none flex bg-[#09090B] border border-gray-600 mb-3"
|
||||
>
|
||||
<div
|
||||
@ -704,7 +704,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { goto } from "$app/navigation";
|
||||
import { numberOfUnreadNotification, screenWidth } from "$lib/store";
|
||||
import { numberOfUnreadNotification } from "$lib/store";
|
||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||
import { Chart } from "svelte-echarts";
|
||||
import Lazy from "$lib/components/Lazy.svelte";
|
||||
@ -660,7 +659,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
@ -792,10 +791,10 @@
|
||||
<li class="w-full">
|
||||
<label
|
||||
on:click={() => changeTablePeriod("annual")}
|
||||
class="cursor-pointer rounded-l-lg inline-block w-full py-2.5 text-white {filterRule ===
|
||||
class="cursor-pointer rounded-l-md inline-block w-full py-1.5 {filterRule ===
|
||||
'annual'
|
||||
? 'bg-purple-600'
|
||||
: 'bg-[#2A303C]'} font-semibold border-r border-gray-600"
|
||||
? 'bg-[#fff] text-black'
|
||||
: 'bg-[#2A303C] text-white'} font-semibold border-r border-gray-600"
|
||||
aria-current="page"
|
||||
>
|
||||
Annual
|
||||
@ -805,10 +804,10 @@
|
||||
{#if data?.user?.tier === "Pro"}
|
||||
<label
|
||||
on:click={() => changeTablePeriod("quarterly")}
|
||||
class="cursor-pointer inline-block w-full py-2.5 {filterRule ===
|
||||
class="cursor-pointer inline-block w-full py-1.5 {filterRule ===
|
||||
'quarterly'
|
||||
? 'bg-purple-600'
|
||||
: 'bg-[#2A303C]'} font-semibold text-white rounded-r-lg"
|
||||
? 'bg-[#fff] text-black'
|
||||
: 'bg-[#2A303C] text-white'} font-semibold rounded-r-md"
|
||||
>
|
||||
Quartely
|
||||
</label>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -173,7 +173,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -153,7 +153,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -198,7 +198,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -165,7 +165,7 @@
|
||||
{#if newsList?.length !== rawNews?.length}
|
||||
<label
|
||||
on:click={loadMoreData}
|
||||
class="shadow-lg rounded-lg cursor-pointer w-5/6 sm:w-3/5 sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6]"
|
||||
class="shadow-lg rounded-lg cursor-pointer w-5/6 sm:w-3/5 sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto hover:bg-[#fff] bg-[#fff] bg-opacity-[0.6]"
|
||||
>
|
||||
Load More News
|
||||
</label>
|
||||
@ -179,7 +179,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -595,7 +595,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
@ -732,7 +732,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
@ -761,9 +761,7 @@
|
||||
: ''} "
|
||||
>
|
||||
{#if activeEX === i}
|
||||
<div
|
||||
class="absolute inset-0 rounded-lg bg-purple-600"
|
||||
></div>
|
||||
<div class="absolute inset-0 rounded-lg bg-[#fff]"></div>
|
||||
{/if}
|
||||
<span
|
||||
class="relative text-sm block font-medium duration-200 text-white"
|
||||
@ -796,9 +794,7 @@
|
||||
: ''} "
|
||||
>
|
||||
{#if activeIdx === i}
|
||||
<div
|
||||
class="absolute inset-0 rounded-lg bg-purple-600"
|
||||
></div>
|
||||
<div class="absolute inset-0 rounded-lg bg-[#fff]"></div>
|
||||
{/if}
|
||||
<span
|
||||
class="relative text-sm block font-medium duration-200 text-white"
|
||||
@ -928,7 +924,7 @@
|
||||
</div>
|
||||
{:else if item?.neutral_ratio > (item?.bull_ratio ?? 0) && item?.neutral_ratio > (item?.bear_ratio ?? 0)}
|
||||
<div
|
||||
class="badge bg-[#FBCE3C] text-black font-semibold gap-2"
|
||||
class="badge bg-[#fff] text-black font-semibold gap-2"
|
||||
>
|
||||
{item?.neutral_ratio?.toFixed(0)}% Neutral
|
||||
</div>
|
||||
@ -976,7 +972,7 @@
|
||||
</div>
|
||||
{:else if item?.midpoint_ratio > (item?.ask_ratio ?? 0) && item?.midpoint_ratio > (item?.bid_ratio ?? 0)}
|
||||
<div
|
||||
class="badge bg-[#FBCE3C] text-black font-semibold gap-2"
|
||||
class="badge bg-[#fff] text-black font-semibold gap-2"
|
||||
>
|
||||
{item?.midpoint_ratio?.toFixed(0)}% Midpoint
|
||||
</div>
|
||||
@ -1093,7 +1089,7 @@
|
||||
: 'text-[#FF2F1F]'} text-end"
|
||||
>
|
||||
<div
|
||||
class="rounded-lg w-fit px-2 text-center font-semibold badge gap-2 bg-[#FBCE3C] text-black m-auto flex justify-center items-center"
|
||||
class="rounded-lg w-fit px-2 text-center font-semibold badge gap-2 bg-[#fff] text-black m-auto flex justify-center items-center"
|
||||
>
|
||||
{item?.strike_price}
|
||||
</div>
|
||||
@ -1137,7 +1133,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -130,7 +130,7 @@ updateYearRange()
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -52,7 +52,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -157,7 +157,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -152,7 +152,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -381,7 +381,7 @@ async function exportTreemap() {
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
@ -401,8 +401,8 @@ async function exportTreemap() {
|
||||
class="cursor-pointer text-blue-400 sm:hover:text-white"
|
||||
>{highestAvgCategory}</label
|
||||
>
|
||||
surged ahead as the top performer with an impressive average
|
||||
return of
|
||||
surged ahead as the top performer with an impressive average return
|
||||
of
|
||||
<span class="text-white font-medium"
|
||||
>{highestAvg?.toFixed(2)}%</span
|
||||
>.
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
displayCompanyName,
|
||||
} from "$lib/store";
|
||||
import cardBackground from "$lib/images/bg-hedge-funds.png";
|
||||
import { abbreviateNumber, formatString } from "$lib/utils";
|
||||
import { abbreviateNumber, formatString, sectorNavigation } from "$lib/utils";
|
||||
|
||||
import PercentIcon from "lucide-svelte/icons/percent";
|
||||
import MoneyIcon from "lucide-svelte/icons/circle-dollar-sign";
|
||||
@ -23,55 +23,6 @@
|
||||
export let data;
|
||||
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
||||
|
||||
function sectorSelector(sector) {
|
||||
let path;
|
||||
switch (sector) {
|
||||
case "Financials":
|
||||
path = "financial";
|
||||
break;
|
||||
case "Healthcare":
|
||||
path = "healthcare";
|
||||
break;
|
||||
case "Information Technology":
|
||||
path = "technology";
|
||||
break;
|
||||
case "Technology":
|
||||
path = "technology";
|
||||
break;
|
||||
case "Financial Services":
|
||||
path = "financial";
|
||||
break;
|
||||
case "Industrials":
|
||||
path = "industrials";
|
||||
break;
|
||||
case "Energy":
|
||||
path = "energy";
|
||||
break;
|
||||
case "Utilities":
|
||||
path = "utilities";
|
||||
break;
|
||||
case "Consumer Cyclical":
|
||||
path = "consumer-cyclical";
|
||||
break;
|
||||
case "Real Estate":
|
||||
path = "real-estate";
|
||||
break;
|
||||
case "Basic Materials":
|
||||
path = "basic-materials";
|
||||
break;
|
||||
case "Communication Services":
|
||||
path = "communication-services";
|
||||
break;
|
||||
case "Consumer Defensive":
|
||||
path = "consumer-defensive";
|
||||
break;
|
||||
default:
|
||||
// Handle default case if needed
|
||||
break;
|
||||
}
|
||||
return path;
|
||||
}
|
||||
|
||||
let isLoaded = false;
|
||||
let rawData = data?.getHedgeFundsData;
|
||||
displayCompanyName.update(() => rawData?.name ?? "Company Data");
|
||||
@ -408,7 +359,7 @@
|
||||
type: "bar",
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
color: "#FBCE3C", // Change bar color to white
|
||||
color: "#fff", // Change bar color to white
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -582,14 +533,14 @@
|
||||
<aside class="relative fixed w-full sm:w-1/3">
|
||||
<!--Start Card-->
|
||||
<div
|
||||
class="w-full bg-[#141417] border border-gray-800 rounded-lg h-auto pb-4"
|
||||
class="w-full bg-[#141417] border border-gray-800 rounded-md h-auto pb-4"
|
||||
>
|
||||
<div class="flex flex-col relative">
|
||||
<img
|
||||
class="absolute w-full m-auto rounded-lg"
|
||||
class="absolute w-full m-auto rounded-md"
|
||||
src={cardBackground}
|
||||
/>
|
||||
<div class="flex flex-col justify-center items-center rounded-lg">
|
||||
<div class="flex flex-col justify-center items-center rounded-md">
|
||||
<div
|
||||
class="mt-10 rounded-full border border-slate-600 w-24 h-24 relative hedge-fund-striped bg-[#20202E] flex items-center justify-center"
|
||||
>
|
||||
@ -666,7 +617,7 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full bg-[#141417] border border-gray-800 rounded-lg h-fit pb-4 mt-5"
|
||||
class="w-full bg-[#141417] border border-gray-800 rounded-md h-fit pb-4 mt-5"
|
||||
>
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<h2
|
||||
@ -699,7 +650,9 @@
|
||||
>
|
||||
<td class="text-[1rem] whitespace-nowrap">
|
||||
<a
|
||||
href={"/list/sector/" + sectorSelector(name)}
|
||||
href={sectorNavigation?.find(
|
||||
(item) => item?.title === name,
|
||||
)?.link}
|
||||
class="text-blue-400 sm:hover:text-white"
|
||||
>
|
||||
{name}
|
||||
@ -737,7 +690,7 @@
|
||||
>
|
||||
<!--Start Total Amount Traded-->
|
||||
<div
|
||||
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] rounded-lg h-20"
|
||||
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] rounded-md h-20"
|
||||
>
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="font-medium text-gray-200 text-sm">AUM</span>
|
||||
@ -752,7 +705,7 @@
|
||||
|
||||
<!--Start-->
|
||||
<div
|
||||
class="sm:hidden flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20"
|
||||
class="sm:hidden flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-md h-20"
|
||||
>
|
||||
<div class="flex flex-col items-start">
|
||||
<span
|
||||
@ -829,7 +782,7 @@
|
||||
|
||||
<!--Start-->
|
||||
<div
|
||||
class="sm:hidden flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20"
|
||||
class="sm:hidden flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-md h-20"
|
||||
>
|
||||
<div class="flex flex-col items-start">
|
||||
<span
|
||||
@ -906,7 +859,7 @@
|
||||
|
||||
<!--Start-->
|
||||
<div
|
||||
class="sm:hidden flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20"
|
||||
class="sm:hidden flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-md h-20"
|
||||
>
|
||||
<div class="flex flex-col items-start">
|
||||
<span
|
||||
@ -993,7 +946,7 @@
|
||||
|
||||
<main class="w-full mt-10 sm:mt-0 sm:pl-10">
|
||||
{#if isLoaded && Object?.keys(optionsData)?.length !== 0}
|
||||
<div class="bg-[#09090B] rounded-lg sm:min-h-[330px] mb-10 sm:mb-6">
|
||||
<div class="bg-[#09090B] rounded-md sm:min-h-[330px] mb-10 sm:mb-6">
|
||||
<div class="flex flex-row justify-start items-center">
|
||||
{#if activePlotIdx === 0}
|
||||
<PercentIcon class="h-6 w-6 shrink-0 inline-block" />
|
||||
@ -1009,7 +962,7 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-lg p-1 mt-5"
|
||||
class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-5"
|
||||
>
|
||||
{#each plotTabs as item, i}
|
||||
<button
|
||||
@ -1020,12 +973,13 @@
|
||||
: ''} "
|
||||
>
|
||||
{#if activePlotIdx === i}
|
||||
<div
|
||||
class="absolute inset-0 rounded-lg sm:rounded-lg bg-purple-600"
|
||||
></div>
|
||||
<div class="absolute inset-0 rounded-md bg-[#fff]"></div>
|
||||
{/if}
|
||||
<span
|
||||
class="relative block text-sm font-medium duration-200 text-white"
|
||||
class="relative block text-sm font-semibold {activePlotIdx ===
|
||||
i
|
||||
? 'text-black'
|
||||
: 'text-white'}"
|
||||
>
|
||||
{item?.title}
|
||||
</span>
|
||||
@ -1088,7 +1042,7 @@
|
||||
<div class="w-full grid grid-cols-4 gap-y-3 lg:gap-y-3 gap-x-3">
|
||||
<!--Start Total Amount Traded-->
|
||||
<div
|
||||
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] rounded-lg h-20"
|
||||
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] rounded-md h-20"
|
||||
>
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="font-medium text-gray-200 text-[1rem]">AUM</span>
|
||||
@ -1103,7 +1057,7 @@
|
||||
|
||||
<!--Start-->
|
||||
<div
|
||||
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20"
|
||||
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-md h-20"
|
||||
>
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="font-medium text-gray-200 text-[1rem]"
|
||||
@ -1171,7 +1125,7 @@
|
||||
|
||||
<!--Start-->
|
||||
<div
|
||||
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20"
|
||||
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-md h-20"
|
||||
>
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="font-medium text-gray-200 text-[1rem]"
|
||||
@ -1239,7 +1193,7 @@
|
||||
|
||||
<!--Start-->
|
||||
<div
|
||||
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20"
|
||||
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-md h-20"
|
||||
>
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="font-medium text-gray-200 text-[1rem]"
|
||||
@ -1320,26 +1274,29 @@
|
||||
</span>
|
||||
|
||||
<div class="w-64 mt-5">
|
||||
<div class="relative right-0 bg-[#313131] rounded-lg">
|
||||
<div class="relative right-0 bg-[#313131] rounded-md">
|
||||
<div
|
||||
class="relative flex flex-row items-center p-1 list-none rounded-lg"
|
||||
class="relative flex flex-row items-center p-1 list-none rounded-md"
|
||||
>
|
||||
{#each tabs as item, i}
|
||||
<button
|
||||
on:click={() => changeTab(i)}
|
||||
class="group relative z-[1] rounded-lg px-6 py-1 border z-30 flex items-center justify-center w-full px-0 py-1 mb-0 border-0 bg-inherit {activeIdx ===
|
||||
class="group relative z-[1] rounded-md px-6 py-1 border z-30 flex items-center justify-center w-full px-0 py-1 mb-0 border-0 bg-inherit {activeIdx ===
|
||||
i
|
||||
? 'z-0'
|
||||
: ''} "
|
||||
>
|
||||
{#if activeIdx === i}
|
||||
<div
|
||||
class="absolute inset-0 rounded-lg sm:rounded-lg bg-purple-600"
|
||||
class="absolute inset-0 rounded-md bg-[#fff]"
|
||||
></div>
|
||||
{/if}
|
||||
|
||||
<span
|
||||
class="relative text-sm block font-medium duration-200 text-white"
|
||||
class="relative text-sm block font-semibold {activeIdx ===
|
||||
i
|
||||
? 'text-black'
|
||||
: 'text-white'}"
|
||||
>
|
||||
{item?.title}
|
||||
</span>
|
||||
@ -1706,14 +1663,14 @@
|
||||
class="flex justify-center items-center m-auto sm:mt-24 mt-32 mb-6"
|
||||
>
|
||||
<div
|
||||
class="text-gray-100 text-sm sm:text-[1rem] sm:rounded-lg h-auto border border-gray-800 p-4"
|
||||
class="text-gray-100 text-sm sm:text-[1rem] sm:rounded-md h-auto border border-gray-800 p-4"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 inline-block mr-2 flex-shrink-0"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -193,7 +193,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -89,7 +89,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
@ -239,7 +239,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -225,7 +225,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -164,7 +164,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -162,7 +162,7 @@
|
||||
|
||||
{#if !data?.user}
|
||||
<a
|
||||
class="w-96 mt-6 m-auto flex m-auto justify-center items-center m-auto btn text-white bg-purple-600 hover:bg-purple-500 transition duration-150 ease-in-out group"
|
||||
class="w-96 mt-6 m-auto flex m-auto justify-center items-center m-auto btn text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-150 ease-in-out group"
|
||||
href="/register"
|
||||
>
|
||||
Get Newsletter
|
||||
@ -200,7 +200,7 @@
|
||||
errors=''
|
||||
/>
|
||||
<div class="w-full sm:w-5/6 max-w-lg m-auto pb-5">
|
||||
<button type="submit" class="py-3 bg-purple-600 text-white hover:bg-purple-500 w-full rounded-lg m-auto font-bold text-md">
|
||||
<button type="submit" class="py-3 bg-[#fff] text-white sm:hover:bg-gray-300 w-full rounded-lg m-auto font-bold text-md">
|
||||
Subscribe
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -62,7 +62,19 @@
|
||||
},
|
||||
cost_basis: {
|
||||
label: "Premium",
|
||||
step: ["10M", "5M", "1M", "500K", "100K", "50K", "10K", "5K"],
|
||||
step: [
|
||||
"10M",
|
||||
"5M",
|
||||
"1M",
|
||||
"500K",
|
||||
"400K",
|
||||
"300K",
|
||||
"200K",
|
||||
"100K",
|
||||
"50K",
|
||||
"10K",
|
||||
"5K",
|
||||
],
|
||||
defaultCondition: "over",
|
||||
defaultValue: "any",
|
||||
},
|
||||
@ -1304,7 +1316,7 @@ function sendMessage(message) {
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2"
|
||||
class="radio checked:bg-[#fff] bg-[#09090B] border border-slate-800 mr-2"
|
||||
checked={ruleCondition[row?.rule] ===
|
||||
"under"}
|
||||
name={row?.rule}
|
||||
@ -1320,7 +1332,7 @@ function sendMessage(message) {
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2"
|
||||
class="radio checked:bg-[#fff] bg-[#09090B] border border-slate-800 mr-2"
|
||||
checked={ruleCondition[row?.rule] ===
|
||||
"over"}
|
||||
name={row?.rule}
|
||||
@ -1418,7 +1430,7 @@ function sendMessage(message) {
|
||||
: flowSentiment === 'Bearish'
|
||||
? 'text-[#FF2F1F]'
|
||||
: flowSentiment === 'Neutral'
|
||||
? 'text-[#FBCE3C]'
|
||||
? 'text-[#fff]'
|
||||
: 'text-white'}">{flowSentiment}</span
|
||||
>
|
||||
</div>
|
||||
@ -1951,7 +1963,7 @@ function sendMessage(message) {
|
||||
class="td {optionsWatchlist.optionsId?.includes(
|
||||
displayedData[index]?.id,
|
||||
)
|
||||
? 'text-[#FBCE3C]'
|
||||
? 'text-[#fff]'
|
||||
: 'text-white'}"
|
||||
>
|
||||
<svg
|
||||
@ -2081,7 +2093,7 @@ function sendMessage(message) {
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -869,7 +869,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -311,7 +311,7 @@
|
||||
</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"
|
||||
class="w-64 flex mt-10 justify-center items-center m-auto btn text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-150 ease-in-out group"
|
||||
href="/register"
|
||||
>
|
||||
Get Started
|
||||
|
||||
@ -112,7 +112,7 @@ function toggleMode()
|
||||
>
|
||||
<!--
|
||||
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial === true}
|
||||
<div class="mb-5 -mt-10 sm:-mt-5 relative sm:rounded isolate text-center flex justify-center items-center gap-x-6 overflow-hidden bg-purple-600 px-6 py-3.5 sm:py-2.5 sm:px-3.5 sm:before:flex-1">
|
||||
<div class="mb-5 -mt-10 sm:-mt-5 relative sm:rounded isolate text-center flex justify-center items-center gap-x-6 overflow-hidden bg-[#fff] px-6 py-3.5 sm:py-2.5 sm:px-3.5 sm:before:flex-1">
|
||||
<div class="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl" aria-hidden="true">
|
||||
<div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30" style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"></div>
|
||||
</div>
|
||||
@ -122,7 +122,7 @@ function toggleMode()
|
||||
<div class="w-full m-auto flex flex-col sm:flex-row justify-center items-center gap-x-4 gap-y-2">
|
||||
<p class="text-[1rem] text-white">
|
||||
<strong class="font-semibold text-lg text-[1rem] text-white">🎃 Limited Halloween Special</strong><svg viewBox="0 0 2 2" class="mx-2 inline h-0.5 w-0.5 fill-current" aria-hidden="true"><circle cx="1" cy="1" r="1" /></svg>
|
||||
Save <strong class="text-[#FBCE3C]">16%</strong> with Promo Code: <strong class="text-[#FBCE3C]">HALLOWEEN</strong>
|
||||
Save <strong class="text-[#fff]">16%</strong> with Promo Code: <strong class="text-[#fff]">HALLOWEEN</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -138,7 +138,7 @@ function toggleMode()
|
||||
Flexible plans and features
|
||||
</h1>
|
||||
<div
|
||||
class="w-full flex justify-center items-center h-16 bg-[#09090B] rounded-lg"
|
||||
class="w-full flex justify-center items-center h-16 bg-[#09090B] rounded-md"
|
||||
>
|
||||
<p
|
||||
class="font-medium font-serif text-center w-3/4 sm:w-full text-white text-[1rem] sm:text-xl italic"
|
||||
@ -163,7 +163,7 @@ function toggleMode()
|
||||
<span class="text-sm font-semibold text-white">
|
||||
Pay Yearly
|
||||
</span>
|
||||
<span class="text-[#FBCE3C] text-sm font-semibold">
|
||||
<span class="text-[#fff] text-sm font-semibold">
|
||||
Save up 16%
|
||||
</span>
|
||||
</div>
|
||||
@ -179,7 +179,7 @@ function toggleMode()
|
||||
>
|
||||
<!-- Pricing Card -->
|
||||
<div
|
||||
class="order-last sm:order-1 flex flex-col p-6 lg:p-8 mx-auto w-full text-center text-white border border-gray-800 bg-[#09090B] rounded-lg"
|
||||
class="order-last sm:order-1 flex flex-col p-6 lg:p-8 mx-auto w-full text-center text-white border border-gray-800 bg-[#09090B] rounded-md"
|
||||
>
|
||||
<div class="flex flex-row items-center justify-start items-center mt-2">
|
||||
<img
|
||||
@ -316,7 +316,7 @@ function toggleMode()
|
||||
{#if !data?.user}
|
||||
<label
|
||||
for="userLogin"
|
||||
class="py-3 cursor-pointer rounded-lg text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-100 ease-in-out group"
|
||||
class="py-3 cursor-pointer rounded-md text-black font-semibold bg-[#fff] sm:hover:bg-gray-300 transition duration-100 ease-in-out group"
|
||||
>
|
||||
Get Sign In
|
||||
<span
|
||||
@ -331,7 +331,7 @@ function toggleMode()
|
||||
><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"
|
||||
fill="black"
|
||||
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
|
||||
@ -345,7 +345,7 @@ function toggleMode()
|
||||
|
||||
<!-- Pricing Card -->
|
||||
<div
|
||||
class="sm:order-2 rounded-lg box sm:-mt-10 flex flex-col p-6 lg:p-8 mx-auto w-full text-center text-white bg-[#27272A]"
|
||||
class="sm:order-2 rounded-md box sm:-mt-10 flex flex-col p-6 lg:p-8 mx-auto w-full text-center text-white bg-[#27272A]"
|
||||
>
|
||||
<!--<div class="{!mode ? 'hidden' : ''} ribbon ribbon-top-right"><span class="text-white">Discount</span></div>-->
|
||||
|
||||
@ -721,7 +721,7 @@ function toggleMode()
|
||||
</div>
|
||||
{#if data?.user?.tier === "Pro" && !data?.user?.freeTrial}
|
||||
<a
|
||||
class="py-3 rounded-lg text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-150 ease-in-out group"
|
||||
class="py-3 rounded-md text-black font-semibold bg-[#fff] sm:hover:bg-gray-300 transition duration-150 ease-in-out group"
|
||||
href="#"
|
||||
>
|
||||
Active Plan
|
||||
@ -730,7 +730,7 @@ function toggleMode()
|
||||
<label
|
||||
for={!data?.user ? "userLogin" : ""}
|
||||
on:click={() => purchasePlan()}
|
||||
class="cursor-pointer py-3 rounded-lg text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-100 ease-in-out group"
|
||||
class="cursor-pointer py-3 rounded-md text-black font-semibold bg-[#fff] sm:hover:bg-gray-300 transition duration-100 ease-in-out group"
|
||||
>
|
||||
Get Pro
|
||||
<span
|
||||
@ -745,7 +745,7 @@ function toggleMode()
|
||||
><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"
|
||||
fill="black"
|
||||
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
|
||||
@ -757,7 +757,7 @@ function toggleMode()
|
||||
<label
|
||||
for={!data?.user ? "userLogin" : ""}
|
||||
on:click={() => purchasePlan()}
|
||||
class="cursor-pointer py-3 rounded-lg text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-100 ease-in-out group"
|
||||
class="cursor-pointer py-3 rounded-md text-black font-semibold bg-[#fff] sm:hover:bg-gray-300 transition duration-100 ease-in-out group"
|
||||
>
|
||||
Get Pro
|
||||
<span
|
||||
@ -772,7 +772,7 @@ function toggleMode()
|
||||
><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"
|
||||
fill="black"
|
||||
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
|
||||
@ -790,7 +790,7 @@ function toggleMode()
|
||||
|
||||
<!--Start Pricing Card-->
|
||||
<!--
|
||||
<div class="sm:h-[660px] sm:order-2 box sm:-mt-10 flex flex-col p-6 lg:p-8 mx-auto ring-[1px] ring-gray-400 rounded-lg w-full text-center text-white">
|
||||
<div class="sm:h-[660px] sm:order-2 box sm:-mt-10 flex flex-col p-6 lg:p-8 mx-auto ring-[1px] ring-gray-400 rounded-md w-full text-center text-white">
|
||||
|
||||
<div class="absolute top-0 left-1/2 transform -translate-x-1/2 rounded-b-2xl flex flex-row border-l border-r border-b border-gray-400 items-center p-2">
|
||||
<span class="text-white text-md font-semibold px-3">
|
||||
@ -837,19 +837,19 @@ function toggleMode()
|
||||
</div>
|
||||
|
||||
{#if data?.user?.tier === 'Pro' && !data?.user?.freeTrial}
|
||||
<a class="py-3 rounded-lg text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-100 ease-in-out group" href="#">
|
||||
<a class="py-3 rounded-md text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-100 ease-in-out group" href="#">
|
||||
Active Plan
|
||||
</a>
|
||||
{:else if data?.user?.tier === 'Pro' && data?.user?.freeTrial === true}
|
||||
|
||||
<label for={!data?.user ? 'userLogin' : ''} on:click={() => purchasePlan('lifeTime')} class="py-3 rounded-lg text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-100 ease-in-out group">
|
||||
<label for={!data?.user ? 'userLogin' : ''} on:click={() => purchasePlan('lifeTime')} class="py-3 rounded-md text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-100 ease-in-out group">
|
||||
Get Lifetime Access
|
||||
<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>
|
||||
</label>
|
||||
{:else}
|
||||
<label for={!data?.user ? 'userLogin' : ''} on:click={() => purchasePlan('lifeTime')} class="cursor-pointer py-3 rounded-lg text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-100 ease-in-out group">
|
||||
<label for={!data?.user ? 'userLogin' : ''} on:click={() => purchasePlan('lifeTime')} class="cursor-pointer py-3 rounded-md text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-100 ease-in-out group">
|
||||
Get Lifetime Access
|
||||
<span class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out">
|
||||
<svg class="w-4 h-4 inline-block" 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>
|
||||
@ -1327,7 +1327,7 @@ function toggleMode()
|
||||
<label
|
||||
for={!data?.user ? "userLogin" : ""}
|
||||
on:click={() => purchasePlan()}
|
||||
class="cursor-pointer w-56 py-3 px-6 rounded-lg text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-100 ease-in-out group"
|
||||
class="cursor-pointer w-56 py-3 px-6 rounded-md text-black font-semibold bg-[#fff] sm:hover:bg-gray-300 transition duration-100 ease-in-out group"
|
||||
>
|
||||
Become a Pro
|
||||
<span
|
||||
@ -1342,7 +1342,7 @@ function toggleMode()
|
||||
><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"
|
||||
fill="black"
|
||||
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
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -173,7 +173,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -2506,7 +2506,7 @@ const handleKeyDown = (event) => {
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
class="radio ring-0 checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2"
|
||||
class="radio ring-0 checked:bg-[#fff] bg-[#09090B] border border-slate-800 mr-2"
|
||||
checked={ruleCondition[row?.rule] ===
|
||||
"under"}
|
||||
name={row?.rule}
|
||||
@ -2522,7 +2522,7 @@ const handleKeyDown = (event) => {
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2"
|
||||
class="radio checked:bg-[#fff] bg-[#09090B] border border-slate-800 mr-2"
|
||||
checked={ruleCondition[row?.rule] ===
|
||||
"over"}
|
||||
name={row?.rule}
|
||||
@ -2651,7 +2651,7 @@ const handleKeyDown = (event) => {
|
||||
<div class="text-white font-bold text-xl sm:text-2xl flex justify-start items-center">
|
||||
{ruleOfList.length} Rules Preview
|
||||
</div>
|
||||
<label on:click={handleResetAll} class="ml-auto cursor-pointer transition bg-purple-600 sm:hover:bg-purple-700 border border-slate-800 py-2 px-3 rounded-lg text-white text-sm">
|
||||
<label on:click={handleResetAll} class="ml-auto cursor-pointer transition bg-[#fff] sm:hover:bg-gray-300 border border-slate-800 py-2 px-3 rounded-lg text-white text-sm">
|
||||
Reset All
|
||||
</label>
|
||||
</div>
|
||||
@ -3053,7 +3053,7 @@ const handleKeyDown = (event) => {
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
@ -3241,7 +3241,7 @@ const handleKeyDown = (event) => {
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="mt-10 btn bg-purple-600 sm:hover:bg-purple-700 duration-100 btn-md w-full rounded-lg m-auto text-white font-bold text-md"
|
||||
class="mt-10 btn bg-[#fff] sm:hover:bg-gray-300 duration-100 btn-md w-full rounded-lg m-auto text-white font-bold text-md"
|
||||
>
|
||||
Create Strategy
|
||||
</button>
|
||||
@ -3275,7 +3275,7 @@ const handleKeyDown = (event) => {
|
||||
<label
|
||||
for="deleteStrategy"
|
||||
on:click={handleDeleteStrategy}
|
||||
class="mt-5 btn bg-purple-600 hover:bg-purple-500 btn-md w-full rounded-lg m-auto text-white font-bold text-md"
|
||||
class="mt-5 btn bg-[#fff] sm:hover:bg-gray-300 btn-md w-full rounded-lg m-auto text-white font-bold text-md"
|
||||
>
|
||||
Proceed
|
||||
</label>
|
||||
|
||||
@ -359,8 +359,8 @@
|
||||
on:click={() => toggleDate(index)}
|
||||
class="w-11/12 sm:w-full m-auto 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"
|
||||
? 'bg-[#fff] sm:hover:bg-gray-300'
|
||||
: ''} rounded sm:rounded-none flex bg-[#09090B] sm:hover:bg-[#fff] transition duration-50 border border-gray-600 mb-3"
|
||||
>
|
||||
<div
|
||||
class=" flex flex-row justify-center items-center w-full"
|
||||
@ -518,7 +518,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -452,7 +452,7 @@ function handleTypeOfTrade(state:string)
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
|
||||
/></svg
|
||||
>
|
||||
@ -479,7 +479,7 @@ function handleTypeOfTrade(state:string)
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
|
||||
/></svg
|
||||
>
|
||||
@ -581,7 +581,7 @@ function handleTypeOfTrade(state:string)
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
|
||||
/></svg
|
||||
>
|
||||
@ -613,7 +613,7 @@ function handleTypeOfTrade(state:string)
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
|
||||
/></svg
|
||||
>
|
||||
@ -742,7 +742,7 @@ function handleTypeOfTrade(state:string)
|
||||
class="sm:ml-4 border-b-[2px] overflow-x-scroll md:overflow-hidden whitespace-nowrap"
|
||||
>
|
||||
<ul
|
||||
class="flex flex-row items-center w-full text-sm sm:text-[1rem] text-white"
|
||||
class="flex flex-row items-center w-full text-[1rem] text-white"
|
||||
>
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}`}
|
||||
|
||||
@ -82,7 +82,7 @@
|
||||
type: "bar",
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
color: "#FBCE3C",
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
],
|
||||
@ -154,7 +154,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
|
||||
@ -220,7 +220,7 @@
|
||||
type: "bar",
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
color: "#FBCE3C",
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
],
|
||||
@ -399,7 +399,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
@ -421,10 +421,10 @@
|
||||
<li class="w-full">
|
||||
<label
|
||||
on:click={() => (filterRule = "annual")}
|
||||
class="cursor-pointer rounded-l-lg inline-block w-full py-1.5 sm:py-2.5 text-white {filterRule ===
|
||||
class="cursor-pointer rounded-l-md inline-block w-full text-sm py-1.5 {filterRule ===
|
||||
'annual'
|
||||
? 'bg-purple-600'
|
||||
: 'bg-[#2A303C]'} font-semibold border-r border-gray-600"
|
||||
? 'bg-[#fff] text-black'
|
||||
: 'bg-[#2A303C] text-white'} font-semibold"
|
||||
aria-current="page"
|
||||
>
|
||||
Annual
|
||||
@ -434,17 +434,17 @@
|
||||
{#if data?.user?.tier === "Pro"}
|
||||
<label
|
||||
on:click={() => (filterRule = "quartely")}
|
||||
class="cursor-pointer inline-block w-full py-1.5 sm:py-2.5 {filterRule ===
|
||||
class="cursor-pointer inline-block w-full py-1.5 text-sm {filterRule ===
|
||||
'quartely'
|
||||
? 'bg-purple-600'
|
||||
: 'bg-[#2A303C]'} font-semibold text-white rounded-r-lg"
|
||||
? 'bg-[#fff] text-black'
|
||||
: 'bg-[#2A303C] text-white'} font-semibold rounded-r-md"
|
||||
>
|
||||
Quartely
|
||||
</label>
|
||||
{:else}
|
||||
<a
|
||||
href="/pricing"
|
||||
class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-2.5 bg-[#2A303C] font-semibold text-white rounded-r-lg"
|
||||
class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#2A303C] font-semibold text-white rounded-r-md"
|
||||
>
|
||||
<span class="">Quarterly</span>
|
||||
<svg
|
||||
|
||||
@ -300,7 +300,7 @@
|
||||
type: "bar",
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
color: "#FBCE3C",
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
],
|
||||
@ -484,7 +484,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#FBCE3C"
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
@ -501,15 +501,15 @@
|
||||
</div>
|
||||
|
||||
<ul
|
||||
class="text-[0.8rem] font-medium text-center w-56 sm:w-56 pb-6 flex justify-center sm:justify-end items-center m-auto sm:m-0 sm:ml-auto"
|
||||
class="text-[0.8rem] font-medium text-center w-56 w-56 pb-6 flex justify-center sm:justify-end items-center m-auto sm:m-0 sm:ml-auto"
|
||||
>
|
||||
<li class="w-full">
|
||||
<label
|
||||
on:click={() => (filterRule = "annual")}
|
||||
class="cursor-pointer rounded-l-lg inline-block w-full py-2.5 text-white {filterRule ===
|
||||
class="cursor-pointer rounded-l-md inline-block w-full text-sm py-1.5 {filterRule ===
|
||||
'annual'
|
||||
? 'bg-purple-600'
|
||||
: 'bg-[#2A303C]'} font-semibold border-r border-gray-600"
|
||||
? 'bg-[#fff] text-black'
|
||||
: 'bg-[#2A303C] text-white'} font-semibold"
|
||||
aria-current="page"
|
||||
>
|
||||
Annual
|
||||
@ -519,17 +519,17 @@
|
||||
{#if data?.user?.tier === "Pro"}
|
||||
<label
|
||||
on:click={() => (filterRule = "quartely")}
|
||||
class="cursor-pointer inline-block w-full py-2.5 {filterRule ===
|
||||
class="cursor-pointer inline-block w-full py-1.5 text-sm {filterRule ===
|
||||
'quartely'
|
||||
? 'bg-purple-600'
|
||||
: 'bg-[#2A303C]'} font-semibold text-white rounded-r-lg"
|
||||
? 'bg-[#fff] text-black'
|
||||
: 'bg-[#2A303C] text-white'} font-semibold rounded-r-md"
|
||||
>
|
||||
Quartely
|
||||
</label>
|
||||
{:else}
|
||||
<a
|
||||
href="/pricing"
|
||||
class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-2.5 bg-[#2A303C] font-semibold text-white rounded-r-lg"
|
||||
class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#2A303C] font-semibold text-white rounded-r-md"
|
||||
>
|
||||
<span class="">Quarterly</span>
|
||||
<svg
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user