sbb45/Flamy-Trade_svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Главная страница + адаптив

Browse Source
This commit is contained in:
sbb45
2026-05-27 10:57:39 +05:00
parent 8bda936c4b
commit a566bab1ae
13 changed files with 174 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/DashboardMockup.svelte
+1 -1
View File
@@ -62,7 +62,7 @@
}
</script>
<div class="w-full max-w-170 z-20" style="perspective: 1000px;">
<div class="w-full max-w-170 z-20 mx-auto lg:mx-0" style="perspective: 1000px;">
<div
class="overflow-hidden rounded-2xl border border-white/10 bg-zinc-950 shadow-[0_40px_100px_rgba(0,0,0,0.7),0_0_0_1px_rgba(255,255,255,0.04)] will-change-transform"
style="transform: perspective(1000px) rotateY(-6deg) rotateX(3deg); transform-style: preserve-3d;"
src/lib/components/layout/Footer.svelte
+21 -34
View File
@@ -1,55 +1,42 @@
<script lang="ts">
import Logo from '$lib/components/ui/Logo.svelte';
const yr = new Date().getFullYear();
const navLinks = [
{ href: '/dashboard', label: 'Дашборд' },
{ href: '/blog', label: 'Блог' },
{ href: '/about', label: 'О проекте' }
{ id: 0, href: '/dashboard', label: 'Дашборд' },
{ id: 1, href: '/blog', label: 'Блог' },
{ id: 2, href: '/about', label: 'О проекте' }
];
</script>
<footer class="mt-auto border-t border-white/6 bg-bg-e">
<div class="mx-auto max-w-400 px-5 py-14 sm:px-10">
<div class="mx-auto max-w-400 px-5 py-20 sm:px-10">
<div class="grid grid-cols-2 gap-10 sm:grid-cols-4">
<div class="grid grid-cols-2 gap-10 sm:grid-cols-4 sm:justify-between">
<div class="col-span-2 flex flex-col gap-4 sm:col-span-1">
<a href="/" class="flex items-center gap-2.5 no-underline">
<svg width="24" height="24" viewBox="0 0 26 26" fill="none">
<rect width="26" height="26" rx="6" fill="rgba(255,69,0,0.08)" />
<path
d="M7 20 C7 20 9.5 13 13 15.5 C16.5 18 17 10 20 7"
stroke="#fe4b07"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
fill="none"
/>
<circle cx="20" cy="7" r="1.6" fill="#fe4b07" />
</svg>
<span class="font-display text-sm font-black tracking-tighter">
FLAMY<span class="text-primary">TRADE</span>
</span>
</a>
<p class="max-w-[200px] text-[0.8125rem] leading-relaxed text-zinc-600">
<Logo />
<p class="max-w-55 text-base leading-[1.2] text-zinc-600">
ML-прогнозы для рыночных инструментов. Только исследования.
</p>
</div>
<div class="flex flex-col gap-3">
<span class="font-mono text-[0.6rem] tracking-widest text-zinc-600 uppercase">Навигация</span>
{#each navLinks as link}
<div class="flex flex-col gap-1">
<span class="font-mono text-base tracking-widest text-zinc-600 uppercase mb-1">Навигация</span>
{#each navLinks as link (link.id)}
<a
href={link.href}
class="text-[0.8125rem] text-desc no-underline transition-colors duration-150 hover:text-zinc-100"
class="text-base text-desc no-underline transition-colors duration-150 hover:text-zinc-100"
>
{link.label}
</a>
{/each}
</div>
<div class="col-span-2 flex flex-col gap-3 sm:col-span-2">
<span class="font-mono text-[0.6rem] tracking-widest text-zinc-600 uppercase">Дисклеймер</span>
<p class="max-w-[380px] text-xs leading-relaxed text-zinc-600">
<div class="col-span-2 flex flex-col gap-1.5 sm:col-span-2 ml-auto">
<span class="font-mono text-base tracking-widest text-zinc-600 uppercase">Дисклеймер</span>
<p class="max-w-85 text-sm leading-relaxed text-zinc-600">
Материалы являются результатом работы исследовательской ML-модели и используются в
демонстрационных целях. Не являются индивидуальной инвестиционной рекомендацией.
</p>
@@ -57,11 +44,11 @@
</div>
<div
class="mt-10 flex flex-col items-start justify-between gap-2 border-t border-white/6 pt-8 sm:flex-row sm:items-center"
class="mt-20 flex flex-col items-start justify-between gap-2 border-t border-white/6 pt-12 sm:flex-row sm:items-center"
>
<span class="text-xs text-zinc-600">© {yr} Flamy Trade</span>
<span class="text-xs text-zinc-600">
implemented in
<span class="text-base text-zinc-600">© {yr} Flamy Trade</span>
<span class="text-base text-zinc-600">
Разработано
<a
href="https://flamy.studio"
target="_blank"
src/lib/components/layout/Header.svelte
+64 -5
View File
@@ -1,6 +1,6 @@
<script lang="ts">
// Ссылки
import { cn } from '$lib/utils';
import Logo from '$lib/components/ui/Logo.svelte';
const menuLinks = [
{ id: 0, href: 'reg', text: 'Главная' },
@@ -8,13 +8,16 @@
{ id: 2, href: 'reg', text: 'Блог' },
{ id: 3, href: 'reg', text: 'Открыть дашборд', isButton: true }
];
let mobileOpen = $state(false);
</script>
<header class="fixed right-0 left-0 border-b border-b-bg-h bg-bg-e py-5 z-9999">
<div class="mx-auto flex max-w-400 items-center justify-between">
<a href="/" class="font-display text-lg font-semibold uppercase">Flamy Trade</a>
<header class="fixed right-0 left-0 border-b border-b-bg-h bg-bg-e z-9999">
<div class="mx-auto flex max-w-400 items-center justify-between px-5 py-5 sm:px-10 lg:px-0">
<Logo />
<nav>
<!-- Десктопная навигация -->
<nav class="hidden lg:block">
<ul class="flex items-center justify-center gap-5.5 transition-colors duration-300">
{#each menuLinks as link (link.id)}
<li>
@@ -28,5 +31,61 @@
{/each}
</ul>
</nav>
<!-- Мобильная кнопка гамбургера -->
<button
class="flex flex-col justify-center gap-1.5 p-1 lg:hidden"
onclick={() => (mobileOpen = !mobileOpen)}
aria-label={mobileOpen ? 'Закрыть меню' : 'Открыть меню'}
aria-expanded={mobileOpen}
>
<span
class={cn(
'block h-0.5 w-6 bg-title transition-all duration-200',
mobileOpen && 'translate-y-2 rotate-45'
)}
></span>
<span
class={cn(
'block h-0.5 w-6 bg-title transition-all duration-200',
mobileOpen && 'opacity-0 scale-x-0'
)}
></span>
<span
class={cn(
'block h-0.5 w-6 bg-title transition-all duration-200',
mobileOpen && '-translate-y-2 -rotate-45'
)}
></span>
</button>
</div>
<!-- Мобильное выпадающее меню -->
{#if mobileOpen}
<nav class="border-t border-white/6 px-5 pb-4 sm:px-10 lg:hidden">
<ul class="flex flex-col">
{#each menuLinks as link (link.id)}
<li>
{#if link.isButton}
<a
href={link.href}
class="nav-btn mt-3 block text-center"
onclick={() => (mobileOpen = false)}
>
{link.text}
</a>
{:else}
<a
href={link.href}
class="nav-link block border-b border-white/6 py-3.5 last:border-0"
onclick={() => (mobileOpen = false)}
>
{link.text}
</a>
{/if}
</li>
{/each}
</ul>
</nav>
{/if}
</header>
src/lib/components/ui/Logo.svelte
+9
View File
@@ -0,0 +1,9 @@
<script lang="ts">
</script>
<a href="/" class="flex items-center gap-2.5 no-underline max-w-fit">
<img src="images/icons/logo.svg" alt="Логотип" class="w-8 h-8" />
<span class="font-display text-xl font-black tracking-tighter">
FLAMY<span class="text-primary">TRADE</span>
</span>
</a>
src/routes/+page.svelte
-2
View File
@@ -16,6 +16,4 @@
<Stats />
<BlogPreview posts={[]} />
<Cta />
<div class="noise"></div>
</main>
src/routes/_sections/About.svelte
+8 -4
View File
@@ -4,14 +4,18 @@
</script>
<div class="relative bg-bg-e">
<section class="flex h-[70vh] items-center justify-center gap-40">
<section
class="flex flex-col items-start gap-10 px-5 py-16
sm:px-10 sm:py-20
lg:flex-row lg:items-center lg:justify-center lg:gap-40 lg:h-[70vh] lg:py-0"
>
<div>
<h2 class="font-display text-7xl font-bold">Дашборд</h2>
<p class="mt-8 max-w-140 text-xl text-desc">
<h2 class="font-display text-4xl font-bold sm:text-5xl lg:text-7xl">Дашборд</h2>
<p class="mt-6 max-w-full text-base text-desc sm:text-lg sm:mt-8 lg:mt-8 lg:max-w-140 lg:text-xl">
Все инструменты одним взглядом. Интерактивные графики, уровни входа и выхода, статистика
winrate — доступно без регистрации.
</p>
<ul class="mt-6 mb-10 flex flex-col gap-1 text-xl text-desc">
<ul class="mt-5 mb-8 flex flex-col gap-2 text-base text-desc sm:text-lg lg:text-xl lg:gap-1 lg:mt-6 lg:mb-10">
<li class="flex items-center gap-2">
<span class="h-2 w-2 shrink-0 rounded-full bg-primary"></span>
Интерактивные свечные графики с прогнозом
src/routes/_sections/Cta.svelte
+17 -14
View File
@@ -2,25 +2,28 @@
import Button from '$lib/components/ui/Button.svelte';
</script>
<section class="flex flex-col items-center justify-center overflow-hidden px-5 py-36 text-center sm:px-10">
<div
class="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_100%_80%_at_50%_110%,rgba(255,69,0,0.12)_0%,transparent_65%)]"
></div>
<div
class="pointer-events-none absolute inset-0 opacity-10"
style="background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 80%);"
></div>
<div class="relative flex flex-col items-center gap-8">
<span class="font-mono text-[0.6875rem] tracking-widest text-primary">НАЧАТЬ</span>
<div class="relative overflow-hidden">
<section
class="flex flex-col items-center justify-center overflow-hidden text-center z-20 px-5 min-h-[70vh] sm:px-10 lg:h-[80vh] lg:min-h-0"
>
<div class="relative flex flex-col items-center justify-center gap-6 lg:gap-8">
<h2
class="font-display font-black uppercase leading-[0.9] tracking-tighter text-[clamp(4rem,10vw,9rem)]"
class="font-display font-black uppercase leading-[0.9] tracking-tighter text-[clamp(2.5rem,10vw,9rem)]"
>
ОТКРОЙТЕ<br /><span class="text-primary">ДАШБОРД</span>
</h2>
<Button href="/dashboard">Открыть дашборд</Button>
<p class="max-w-[26rem] font-mono text-[0.6875rem] leading-relaxed text-zinc-600">
Материалы носят исследовательский характер. Не являются инвестиционными рекомендациями.
<p class="font-mono text-sm leading-[1.2] text-zinc-600 sm:text-lg">
Материалы носят исследовательский характер.<br />Не являются инвестиционными рекомендациями.
</p>
</div>
</section>
<div
class="pointer-events-none absolute -top-180 left-0 w-140 h-320 rotate-80 bg-primary/20 rounded-full blur-3xl z-10"
></div>
<div
class="pointer-events-none absolute -bottom-180 right-0 w-140 h-320 rotate-80 bg-primary/20 rounded-full blur-3xl z-10"
></div>
<div class="noise"></div>
</div>
src/routes/_sections/Features.svelte
+5 -3
View File
@@ -40,7 +40,7 @@
<h2 class="mb-16 font-display text-4xl font-black uppercase tracking-tighter">ВОЗМОЖНОСТИ</h2>
<div class="border-t border-white/6">
{#each features as f}
{#each features as f (f.num)}
<div
class="group cursor-default border-b border-white/6 py-6 transition-colors duration-150 hover:bg-primary/2.5
md:grid md:grid-cols-[80px_1fr_1fr] md:items-center md:gap-8 md:py-8"
@@ -53,15 +53,17 @@
</span>
<span
class="mt-1 block font-display text-xl font-bold tracking-tight
md:mt-0 md:text-[clamp(1rem,1.8vw,1.5rem)]"
md:mt-0 md:text-[clamp(1rem,1.8vw,1.6rem)]"
>
{f.title}
</span>
<span class="mt-1 block text-sm leading-relaxed text-desc md:mt-0">
<span class="mt-1 block text-lg leading-[1.4] text-desc md:mt-0">
{f.desc}
</span>
</div>
{/each}
</div>
<div class="noise"></div>
</section>
</div>
src/routes/_sections/Hero.svelte
+15 -10
View File
@@ -3,20 +3,24 @@
import DashboardMockup from '$lib/components/DashboardMockup.svelte';
</script>
<section class="flex h-screen items-center justify-between pt-16">
<div style="transform: perspective(1000px) rotateY(6deg) rotateX(3deg); z-index: 20;">
<h1 class="flex flex-col font-display text-[100px] leading-[0.95] font-black uppercase">
<span> Рыночный </span>
<span class="text-[128px]"> прогноз </span>
<span class="text-[64px] leading-none text-primary"> от ML-модели </span>
<section
class="flex flex-col gap-10 min-h-screen px-5 pt-24 pb-14
sm:px-10 sm:pt-28
lg:flex-row lg:items-center lg:justify-between lg:h-screen lg:min-h-0 lg:px-0 lg:pt-16 lg:pb-0 lg:gap-0"
>
<div class="z-20 lg:[transform:perspective(1000px)_rotateY(6deg)_rotateX(3deg)]">
<h1 class="flex flex-col font-display leading-[0.95] font-black uppercase">
<span class="text-[clamp(2.5rem,10vw,6.25rem)]"> Рыночный </span>
<span class="text-[clamp(3rem,13vw,8rem)]"> прогноз </span>
<span class="text-[clamp(1.5rem,6.5vw,4rem)] leading-none text-primary"> от ML-модели </span>
</h1>
<p class="mt-10 max-w-180 text-2xl leading-[1.1] text-desc">
<p class="mt-6 max-w-full text-base leading-[1.3] text-desc sm:text-xl sm:mt-8 lg:mt-10 lg:max-w-180 lg:text-2xl lg:leading-[1.1]">
Исторические свечи, прогнозная зона, уровни входа и выхода — всё на одном интерактивном
графике. Горизонт 19 свечей, таймфрейм 5M.
</p>
<div class="mt-10 flex items-center justify-start gap-4">
<div class="mt-8 flex items-center justify-start gap-4 lg:mt-10">
<Button href="/dashboard">Открыть дашборд</Button>
<Button href="/about" variant="secondary">Как работает</Button>
</div>
@@ -28,6 +32,7 @@
<span
class="absolute -top-60 left-0 z-0 h-80 w-full rotate-3 rounded-full bg-primary opacity-30 blur-[200px]"
></span>
<span class="absolute bottom-35 left-0 z-0 h-px w-full bg-bg-h"></span>
<span class="absolute top-55 left-0 z-0 h-px w-full bg-bg-h"></span>
<span class="absolute bottom-35 left-0 z-0 h-px w-full bg-bg-h hidden lg:block"></span>
<span class="absolute top-55 left-0 z-0 h-px w-full bg-bg-h hidden lg:block"></span>
<div class="noise"></div>
</section>
src/routes/_sections/Stats.svelte
+12 -10
View File
@@ -10,18 +10,20 @@
<div class="relative border-b border-white/6 bg-bg-e">
<div class="noise"></div>
<section class="px-5 py-24 sm:px-10 sm:py-32">
<div class="grid grid-cols-1 overflow-hidden rounded-xl border border-white/6 sm:grid-cols-3">
{#each stats as stat, i}
<section class="flex justify-center items-center px-5 py-14 sm:px-10 sm:py-20 lg:py-0">
<div
class="relative overflow-hidden px-8 py-12 border-white/6 sm:px-14 sm:py-16
class="grid grid-cols-1 overflow-hidden rounded-xl border border-white/6 w-full sm:w-max sm:grid-cols-3"
>
{#each stats as stat, i (stat.num)}
<div
class="relative overflow-hidden px-8 py-10 border-white/6 sm:px-14 sm:py-16
{i > 0 ? 'border-t sm:border-t-0 sm:border-l' : ''}"
>
<div
class="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_80%_60%_at_50%_100%,rgba(255,69,0,0.04)_0%,transparent_70%)]"
class="pointer-events-none absolute w-full h-full left-0 -bottom-80 bg-primary/40 rounded-3xl blur-3xl"
></div>
<div class="relative flex flex-col gap-3">
<div class="flex items-baseline gap-1">
<div class="relative flex flex-col gap-4 text-center">
<div class="flex items-baseline justify-center gap-1">
<span
class="font-display font-black leading-none tracking-tighter text-[clamp(3.5rem,9vw,8rem)]"
>
@@ -35,11 +37,11 @@
</span>
{/if}
</div>
<div class="flex flex-col gap-0.5">
<span class="font-mono text-[0.6875rem] tracking-widest text-primary">
<div class="flex flex-col">
<span class="font-mono text-lg tracking-widest leading-none text-primary">
{stat.label}
</span>
<span class="text-[0.8125rem] text-desc">{stat.sub}</span>
<span class="text-xl text-desc leading-[1.2]">{stat.sub}</span>
</div>
</div>
</div>
src/routes/_sections/Ticker.svelte
+2 -2
View File
@@ -14,8 +14,8 @@
<div class="overflow-hidden border-y border-white/6 bg-bg-e py-2.5">
<div class="ticker-track flex whitespace-nowrap">
{#each [0, 1] as _}
{#each items as item}
{#each [0, 1] as _i (_i)}
{#each items as item (item)}
<span class="px-8 font-mono text-[0.6875rem] tracking-widest text-zinc-500">{item}</span>
<span class="font-mono text-[0.6875rem] text-zinc-700 opacity-30">·</span>
{/each}
src/routes/layout.css
+1 -1
View File
@@ -42,7 +42,7 @@
}
section {
@apply relative mx-auto max-w-400 min-h-175 max-h-300;
@apply relative mx-auto max-w-400 lg:min-h-175 lg:max-h-300;
}
}
static/images/icons/logo.svg
+12
View File
@@ -0,0 +1,12 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_21_7)">
<path d="M18.4615 0H5.53846C2.47965 0 0 2.47965 0 5.53846V18.4615C0 21.5203 2.47965 24 5.53846 24H18.4615C21.5203 24 24 21.5203 24 18.4615V5.53846C24 2.47965 21.5203 0 18.4615 0Z" fill="#FF4500" fill-opacity="0.08"/>
<path d="M6.46155 18.4615C6.46155 18.4615 8.76924 12 12 14.3077C15.2308 16.6154 15.6923 9.23078 18.4615 6.46155" stroke="#FE4B07" stroke-width="1.66154" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18.4615 7.93847C19.2772 7.93847 19.9385 7.27722 19.9385 6.46154C19.9385 5.64586 19.2772 4.98462 18.4615 4.98462C17.6459 4.98462 16.9846 5.64586 16.9846 6.46154C16.9846 7.27722 17.6459 7.93847 18.4615 7.93847Z" fill="#FE4B07"/>
</g>
<defs>
<clipPath id="clip0_21_7">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 895 B