133 lines
4.2 KiB
Svelte
133 lines
4.2 KiB
Svelte
<script lang="ts">
|
|
type Direction = 'bull' | 'bear' | 'flat';
|
|
|
|
type Signal = {
|
|
sym: string;
|
|
dir: Direction;
|
|
conf: number;
|
|
};
|
|
|
|
const signals: Signal[] = [
|
|
{ sym: 'BTCUSDT', dir: 'bull', conf: 73 },
|
|
{ sym: 'ETHUSDT', dir: 'bear', conf: 68 },
|
|
{ sym: 'SOLUSDT', dir: 'bull', conf: 81 },
|
|
{ sym: 'BNBUSDT', dir: 'flat', conf: 52 },
|
|
{ sym: 'XRPUSDT', dir: 'bull', conf: 76 },
|
|
{ sym: 'ADAUSDT', dir: 'bear', conf: 61 },
|
|
{ sym: 'DOGEUSDT', dir: 'bull', conf: 59 },
|
|
{ sym: 'LINKUSDT', dir: 'bear', conf: 64 }
|
|
];
|
|
|
|
const dirColor: Record<Direction, string> = {
|
|
bull: 'text-emerald-400',
|
|
bear: 'text-red-400',
|
|
flat: 'text-zinc-500'
|
|
};
|
|
|
|
const dirBorder: Record<Direction, string> = {
|
|
bull: 'border-l-emerald-400',
|
|
bear: 'border-l-red-400',
|
|
flat: 'border-l-zinc-500'
|
|
};
|
|
|
|
const dirStroke: Record<Direction, string> = {
|
|
bull: 'bg-emerald-400',
|
|
bear: 'bg-red-400',
|
|
flat: 'bg-zinc-500'
|
|
};
|
|
|
|
const dirBadgeBg: Record<Direction, string> = {
|
|
bull: 'bg-emerald-400/10',
|
|
bear: 'bg-red-400/10',
|
|
flat: 'bg-zinc-500/10'
|
|
};
|
|
|
|
const dirArrow: Record<Direction, string> = {
|
|
bull: '▲',
|
|
bear: '▼',
|
|
flat: '—'
|
|
};
|
|
|
|
const dirLabel: Record<Direction, string> = {
|
|
bull: 'BULL',
|
|
bear: 'BEAR',
|
|
flat: 'FLAT'
|
|
};
|
|
</script>
|
|
|
|
<div class="z-20 hidden h-full w-full max-w-140 items-center justify-end lg:flex">
|
|
<div
|
|
class="w-full overflow-hidden rounded-2xl border border-white/8 bg-zinc-950 shadow-[0_0_0_1px_rgba(255,255,255,0.03),0_40px_80px_rgba(0,0,0,0.5),0_0_80px_rgba(255,69,0,0.05)]"
|
|
>
|
|
<div class="flex items-center justify-between border-b border-white/6 bg-white/2.5 px-4 py-3.5">
|
|
<div class="flex items-center gap-2">
|
|
<div class="flex gap-1.5">
|
|
<div class="h-2 w-2 rounded-full bg-[#ff5f57]"></div>
|
|
<div class="h-2 w-2 rounded-full bg-[#febc2e]"></div>
|
|
<div class="h-2 w-2 rounded-full bg-[#28c840]"></div>
|
|
</div>
|
|
<span class="font-mono text-[0.57rem] tracking-widest text-zinc-500">
|
|
FLAMY TRADE · СИГНАЛЫ
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="inline-flex h-1.5 w-1.5 animate-ping rounded-full bg-emerald-400 opacity-75"
|
|
></span>
|
|
<span class="font-mono text-[0.57rem] tracking-widest text-emerald-400">LIVE</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="grid grid-cols-[1fr_56px_76px] gap-2.5 border-b border-white/6 bg-white/1 px-4 py-3.5"
|
|
>
|
|
<span class="font-mono text-[0.55rem] tracking-widest text-zinc-600">ИНСТРУМЕНТ</span>
|
|
<span class="text-right font-mono text-[0.55rem] tracking-widest text-zinc-600">КОНФИД.</span>
|
|
<span class="pl-2 font-mono text-[0.55rem] tracking-widest text-zinc-600">ПРОГНОЗ</span>
|
|
</div>
|
|
|
|
{#each signals as signal, i (signal.sym)}
|
|
<div
|
|
class="grid grid-cols-[1fr_56px_76px] items-center gap-2.5 border-l-2 px-4 py-3 {dirBorder[
|
|
signal.dir
|
|
]} {i < signals.length - 1 ? 'border-b border-b-white/[0.06]' : ''}"
|
|
>
|
|
<span class="font-display text-[0.6875rem] font-black tracking-tight text-zinc-100">
|
|
{signal.sym}
|
|
</span>
|
|
|
|
<div class="flex flex-col items-end gap-1">
|
|
<span class="font-mono text-[0.5625rem] text-zinc-300">{signal.conf}%</span>
|
|
<div class="h-0.5 w-11 rounded-full bg-zinc-800">
|
|
<div
|
|
class="h-full rounded-full transition-[width] duration-300 {dirStroke[signal.dir]}"
|
|
style="width: {signal.conf}%"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="inline-flex items-center gap-1 rounded px-2 py-0.5 {dirBadgeBg[signal.dir]}">
|
|
<span class="text-[0.5rem] leading-none {dirColor[signal.dir]}"
|
|
>{dirArrow[signal.dir]}</span
|
|
>
|
|
<span
|
|
class="font-mono text-[0.4375rem] font-semibold tracking-wider {dirColor[signal.dir]}"
|
|
>{dirLabel[signal.dir]}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
|
|
<div class="flex items-center justify-between border-t border-white/6 bg-white/1 px-4 py-2">
|
|
<span class="font-mono text-[0.6rem] tracking-wider text-zinc-600">
|
|
ГОРИЗОНТ 19 СВЕЧЕЙ · 5 Mоделей
|
|
</span>
|
|
<a
|
|
href="/dashboard"
|
|
class="font-mono text-[0.6rem] tracking-wider text-orange-400 transition-opacity duration-200 hover:opacity-70"
|
|
>
|
|
ВСЕ СИГНАЛЫ →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|