alexei.dolgolyov/maraphon-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: add vex config + redesign mockups, ignore debug scratch

Browse Source 
Commit the shared vex code-search config (.vex.toml) and the UI redesign
mockups under design/. Add the throwaway debugging dumps (_dump*.ps1,
_pages*.txt) to .gitignore so they stay local.
This commit is contained in:
Admin
2026-05-29 14:03:12 +03:00
parent 42e62c1ed2
commit 690d98d194
4 changed files with 709 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+4
View File
@@ -84,3 +84,7 @@ spike/captures/
# Claude Code per-session task metadata (local only)
.claude/
# Throwaway debugging scratch (PowerShell dumps, raw page captures)
_dump*.ps1
_pages*.txt
.vex.toml
+57
View File
@@ -0,0 +1,57 @@
# vex configuration — https://github.com/tenatarika/vex
#
# Place this file in your project root as .vex.toml
# Glob patterns to exclude from indexing (gitignore syntax, on top of .gitignore)
# exclude = [
# "vendor/**",
# "node_modules/**",
# "*.generated.go",
# "dist/**",
# ]
# Default output format: "text", "json", or "compact"
# format = "text"
# Enable semantic embeddings by default (slower indexing, enables meaning-based search)
semantic = true
# Automatically run `vex update` before search if the index is stale
auto_update = true
# Embedder used for semantic indexing. Known IDs: minilm-l6-v2 (default).
# Changing the embedder requires a full reindex.
# embedder = "minilm-l6-v2"
# Cache directory override. Defaults to the platform cache location.
# macOS: ~/Library/Caches/vex
# Linux: $XDG_CACHE_HOME/vex (fallback: ~/.cache/vex)
# Windows: %LOCALAPPDATA%\vex (fallback: %USERPROFILE%\AppData\Local\vex)
# Accepts absolute paths, "~/..." or paths relative to this file (e.g. "./.vex/cache").
# Can also be overridden per-invocation with --cache-dir or $VEX_CACHE_DIR.
# cache_dir = "./.vex/cache"
# Store the index inside the project as `<project>/.vex_cache/`. Useful when
# the cache should travel with the project (e.g. on a moved or renamed
# directory). vex writes a `.gitignore` inside it so contents are not
# committed. Overridden by `cache_dir`, `--cache-dir`, or $VEX_CACHE_DIR.
# local_cache = false
# Thread count for parallel indexing (index/update/watch).
# * unset — 80% of available cores, rounded up (default, leaves headroom)
# * 0 — use all cores (explicit opt-in to max throughput)
# * N — exactly N workers
# Overridable per-invocation with `-j/--jobs` or $VEX_JOBS.
# jobs = 4
# Build the persistent call-graph section. Disabling falls back to live-scan
# for `vex callers`/`vex callees` (slower per-query, but saves indexing
# time on large monorepos). The opt-out is persisted in the manifest so
# `vex update` does not silently re-add the section.
# Per-invocation override: `vex index --no-call-graph`.
# call_graph = true
# Build the BM25 channel. Disabling drops the third RRF channel and keeps
# only structural (+ semantic). Same persistence rules as `call_graph`.
# Per-invocation override: `vex index --no-bm25`.
# bm25 = true
design/index.html
+7
View File
@@ -0,0 +1,7 @@
<!doctype html>
<meta charset="utf-8">
<title>Marathon — Redesign Directions</title>
<meta http-equiv="refresh" content="0; url=redesign-mockups.html">
<body style="background:#05060a;color:#aeb8c8;font-family:monospace;padding:40px">
<a href="redesign-mockups.html" style="color:#34e07f">Open Marathon redesign mockups →</a>
</body>
design/redesign-mockups.html
+641
View File
@@ -0,0 +1,641 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Marathon — Redesign Directions</title>
<!-- Distinct type per direction: Archivo+JetBrains Mono / Anton+DM Sans+Space Mono / Outfit+Manrope+IBM Plex Mono -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700;800;900&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=IBM+Plex+Mono:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700;800&family=Manrope:wght@400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet" />
<style>
/* ============================================================
META CHROME (not part of any design — the direction switcher)
============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background:#05060a; min-height:100vh; font-family:"JetBrains Mono",monospace; }
a{ text-decoration:none; color:inherit; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
svg{ display:block; }
.ico{ width:18px; height:18px; flex:none; }
.switch{
position:fixed; inset:0 0 auto 0; height:54px; z-index:9999;
display:flex; align-items:center; gap:18px;
padding:0 18px;
background:rgba(8,10,16,.86);
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(255,255,255,.08);
}
.switch__label{
font:600 11px/1 "JetBrains Mono",monospace; letter-spacing:.22em; text-transform:uppercase;
color:#5b6678; white-space:nowrap;
}
.switch__label b{ color:#cdd6e4; font-weight:700; }
.switch__tabs{ display:flex; gap:8px; }
.tab{
display:flex; flex-direction:column; gap:2px;
padding:7px 14px; border-radius:9px;
border:1px solid rgba(255,255,255,.10);
background:rgba(255,255,255,.03);
transition:border-color .18s, background .18s, transform .18s;
}
.tab:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,.24); }
.tab__name{ font:700 12.5px/1 "JetBrains Mono",monospace; letter-spacing:.04em; color:#aeb8c8; }
.tab__tag{ font:500 9.5px/1 "JetBrains Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:#5b6678; }
.tab[data-for="noir"].is-on{ background:rgba(43,213,118,.12); border-color:rgba(43,213,118,.5); }
.tab[data-for="noir"].is-on .tab__name{ color:#34e07f; }
.tab[data-for="velocity"].is-on{ background:rgba(198,244,0,.16); border-color:rgba(198,244,0,.6); }
.tab[data-for="velocity"].is-on .tab__name{ color:#dcff4a; }
.tab[data-for="aurora"].is-on{ background:rgba(139,124,255,.18); border-color:rgba(139,124,255,.6); }
.tab[data-for="aurora"].is-on .tab__name{ color:#b3a8ff; }
.switch__hint{ margin-left:auto; font:500 10px/1 "JetBrains Mono",monospace; letter-spacing:.16em; text-transform:uppercase; color:#3f4859; }
.stage{ display:none; min-height:100vh; padding-top:54px; position:relative; }
.stage.is-active{ display:block; }
.stage .fx{ position:absolute; inset:54px 0 0 0; pointer-events:none; z-index:0; overflow:hidden; }
.mount{ position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){
*{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}
/* ============================================================
SHARED STRUCTURE (styled differently under each .d-* scope)
============================================================ */
.app{ display:grid; grid-template-rows:auto 1fr; min-height:calc(100vh - 54px); }
.body{ display:grid; grid-template-columns:248px minmax(0,1fr); min-height:0; }
.main{ min-width:0; overflow:auto; }
.bar{ display:flex; align-items:center; gap:14px; padding:0 22px; height:62px; }
.bar__spacer{ flex:1; }
.bar__tools{ display:flex; align-items:center; gap:14px; }
.brand{ display:flex; align-items:baseline; gap:10px; }
.locale{ display:inline-flex; overflow:hidden; }
.nav{ display:flex; flex-direction:column; min-height:0; overflow:auto; }
.nav-link{ display:flex; align-items:center; gap:12px; }
.nav-link .lbl{ flex:1; }
.badge{ display:inline-grid; place-items:center; }
.stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.stat{ display:flex; flex-direction:column; }
.grid2{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); }
@media (max-width:1080px){ .grid2{ grid-template-columns:1fr; } .stats{ grid-template-columns:repeat(2,1fr); } }
.feed{ display:flex; flex-direction:column; }
.signal{ display:grid; }
.sig-mkts{ display:flex; flex-wrap:wrap; }
.mkt{ display:inline-flex; align-items:baseline; }
.pipe{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.step{ display:flex; align-items:center; }
.sporticon{ display:inline-grid; place-items:center; flex:none; font-weight:700; }
@keyframes rise{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
@keyframes pulse{ 0%,100%{ opacity:.35; transform:scale(1);} 50%{ opacity:1; transform:scale(1.25);} }
/* ════════════════════════════════════════════════════════════
DIRECTION 1 — TERMINAL NOIR (dark trading terminal)
Archivo (heavy numerals) + JetBrains Mono. Neon-on-black, grid.
════════════════════════════════════════════════════════════ */
.d-noir{
--bg:#070a0f; --bg2:#0b0f16; --card:#0d1219; --card2:#10161f;
--line:#1b2330; --line2:#28303d;
--ink:#e7eef6; --mut:#828d9e; --dim:#5a6475;
--grn:#2bd576; --red:#ff5a6e; --cyan:#36e0ff; --amber:#ffb02e; --signal:#ff4d5e;
background:var(--bg); color:var(--ink);
font-family:"JetBrains Mono",monospace;
}
.d-noir .fx{
background:
radial-gradient(900px 480px at 78% -6%, rgba(54,224,255,.07), transparent 60%),
radial-gradient(760px 520px at 4% 108%, rgba(43,213,118,.06), transparent 60%),
linear-gradient(transparent 95%, rgba(255,255,255,.022) 95%),
linear-gradient(90deg, transparent 95%, rgba(255,255,255,.022) 95%);
background-size:auto,auto,38px 38px,38px 38px;
}
.d-noir .bar{ background:linear-gradient(180deg,#0c1118,#0a0e14); border-bottom:1px solid var(--line); }
.d-noir .bar__menu{ color:var(--mut); display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--line); border-radius:6px; }
.d-noir .bar__menu:hover{ color:var(--ink); border-color:var(--line2); }
.d-noir .brand__mark{ font:800 19px/1 "Archivo",sans-serif; letter-spacing:-.01em; }
.d-noir .brand__mark::first-letter{ color:var(--grn); }
.d-noir .brand__sub{ font:500 10px/1 "JetBrains Mono"; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); border-left:1px solid var(--line2); padding-left:10px; }
.d-noir .capture{ display:inline-flex; align-items:center; gap:8px; font:600 10.5px/1 "JetBrains Mono"; letter-spacing:.16em; text-transform:uppercase; color:var(--grn); padding:6px 10px; border:1px solid rgba(43,213,118,.35); border-radius:6px; background:rgba(43,213,118,.07); }
.d-noir .capture__dot{ width:7px; height:7px; border-radius:50%; background:var(--grn); box-shadow:0 0 10px var(--grn); animation:pulse 1.6s ease-in-out infinite; }
.d-noir .locale{ border:1px solid var(--line2); border-radius:6px; }
.d-noir .locale__btn{ padding:6px 11px; font:600 10.5px/1 "JetBrains Mono"; letter-spacing:.12em; color:var(--dim); }
.d-noir .locale__btn+.locale__btn{ border-left:1px solid var(--line2); }
.d-noir .locale__btn.is-active{ background:var(--grn); color:#04130b; }
.d-noir .theme{ width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:6px; color:var(--mut); }
.d-noir .theme:hover{ color:var(--cyan); border-color:var(--line2); }
.d-noir .nav{ background:var(--bg2); border-right:1px solid var(--line); padding:14px 12px; gap:2px; }
.d-noir .nav__brandblock{ padding:8px 10px 16px; }
.d-noir .nav__group{ font:600 10px/1 "JetBrains Mono"; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); padding:18px 10px 8px; }
.d-noir .nav-link{ padding:9px 11px; border-radius:7px; color:var(--mut); font:500 13px/1 "JetBrains Mono"; border-left:2px solid transparent; transition:background .14s,color .14s; }
.d-noir .nav-link svg{ color:var(--dim); }
.d-noir .nav-link:hover{ background:rgba(255,255,255,.04); color:var(--ink); }
.d-noir .nav-link.is-active{ background:rgba(43,213,118,.10); color:#eafff3; border-left-color:var(--grn); }
.d-noir .nav-link.is-active svg{ color:var(--grn); }
.d-noir .badge{ min-width:18px; height:18px; padding:0 5px; border-radius:5px; background:var(--signal); color:#fff; font:700 10px/18px "JetBrains Mono"; box-shadow:0 0 12px rgba(255,77,94,.6); }
.d-noir .main{ padding:30px 34px 46px; }
.d-noir .hero{ max-width:760px; animation:rise .5s both; }
.d-noir .kicker{ font:600 10.5px/1 "JetBrains Mono"; letter-spacing:.26em; text-transform:uppercase; color:var(--cyan); }
.d-noir .title{ font:800 clamp(30px,4.4vw,50px)/1.02 "Archivo",sans-serif; letter-spacing:-.02em; margin:14px 0 12px; }
.d-noir .lede{ color:var(--mut); font:400 14px/1.6 "JetBrains Mono"; max-width:62ch; margin:0; }
.d-noir .stats{ gap:14px; margin:30px 0; animation:rise .5s .06s both; }
.d-noir .stat{ background:linear-gradient(180deg,var(--card),var(--card2)); border:1px solid var(--line); border-radius:10px; padding:16px 18px; gap:10px; position:relative; overflow:hidden; }
.d-noir .stat::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--cyan); opacity:.5; }
.d-noir .stat--alert::after{ background:var(--signal); opacity:.9; box-shadow:0 0 18px var(--signal); }
.d-noir .stat__label{ font:600 10px/1 "JetBrains Mono"; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.d-noir .stat__value{ font:800 34px/1 "Archivo",sans-serif; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.d-noir .stat--alert .stat__value{ color:var(--signal); }
.d-noir .stat__delta{ font:500 11px/1 "JetBrains Mono"; color:var(--grn); }
.d-noir .stat__delta.dn{ color:var(--red); }
.d-noir .stat__delta.flat{ color:var(--dim); }
.d-noir .grid2{ gap:22px; animation:rise .5s .12s both; }
.d-noir .side{ display:flex; flex-direction:column; gap:22px; }
.d-noir .panel{ background:linear-gradient(180deg,var(--card),var(--card2)); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.d-noir .panel__head{ display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--line); }
.d-noir .panel__more{ font:600 10.5px/1 "JetBrains Mono"; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); }
.d-noir .panel__more:hover{ text-decoration:underline; }
.d-noir .signal{ grid-template-columns:54px 1fr auto; gap:14px; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line); transition:background .14s; }
.d-noir .signal:last-child{ border-bottom:0; }
.d-noir .signal:hover{ background:rgba(54,224,255,.04); }
.d-noir .signal__time{ font:500 11px/1.4 "JetBrains Mono"; color:var(--dim); }
.d-noir .sporticon{ width:26px; height:26px; border-radius:7px; font:800 11px/1 "Archivo"; }
.d-noir .si-football{ background:rgba(43,213,118,.16); color:var(--grn); }
.d-noir .si-basketball{ background:rgba(255,176,46,.16); color:var(--amber); }
.d-noir .si-tennis{ background:rgba(54,224,255,.16); color:var(--cyan); }
.d-noir .si-hockey{ background:rgba(139,156,255,.18); color:#9db0ff; }
.d-noir .sig-mid{ display:flex; align-items:center; gap:11px; min-width:0; }
.d-noir .sig-teams{ font:500 14px/1.2 "Archivo",sans-serif; color:var(--ink); }
.d-noir .sig-sub{ font:500 10.5px/1 "JetBrains Mono"; letter-spacing:.06em; color:var(--dim); margin-top:4px; }
.d-noir .sig-mkts{ gap:7px; margin-top:9px; }
.d-noir .mkt{ gap:6px; padding:4px 8px; border:1px solid var(--line); border-radius:6px; background:var(--bg); font-family:"JetBrains Mono"; }
.d-noir .mkt__k{ font:700 10px/1; color:var(--dim); }
.d-noir .mkt__pre{ font-size:11.5px; color:var(--mut); text-decoration:line-through; text-decoration-color:var(--line2); }
.d-noir .mkt__arr{ color:var(--dim); font-size:11px; }
.d-noir .mkt__post{ font-weight:700; font-size:12.5px; }
.d-noir .mkt.up .mkt__post{ color:var(--grn); }
.d-noir .mkt.dn .mkt__post{ color:var(--red); }
.d-noir .sig-right{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.d-noir .sev{ font:700 9.5px/1 "JetBrains Mono"; letter-spacing:.14em; text-transform:uppercase; padding:4px 8px; border-radius:5px; border:1px solid currentColor; }
.d-noir .sev--high{ color:var(--signal); background:rgba(255,77,94,.10); }
.d-noir .sev--medium{ color:var(--amber); background:rgba(255,176,46,.10); }
.d-noir .sev--low{ color:var(--dim); background:rgba(255,255,255,.03); }
.d-noir .score{ display:flex; align-items:center; gap:8px; }
.d-noir .score__bar{ width:60px; height:5px; border-radius:3px; background:var(--line2); overflow:hidden; }
.d-noir .score__fill{ height:100%; background:linear-gradient(90deg,var(--amber),var(--signal)); }
.d-noir .score__n{ font:800 13px/1 "Archivo"; font-variant-numeric:tabular-nums; }
.d-noir .pipe{ padding:8px 10px; }
.d-noir .step{ gap:13px; padding:11px 8px; border-bottom:1px dashed var(--line); }
.d-noir .step:last-child{ border-bottom:0; }
.d-noir .step__idx{ font:800 12px/1 "Archivo"; color:var(--dim); width:24px; }
.d-noir .step__lbl{ flex:1; font:500 13px/1.2 "JetBrains Mono"; }
.d-noir .step__lbl small{ display:block; color:var(--dim); font-size:10.5px; margin-top:3px; letter-spacing:.06em; }
.d-noir .dot{ width:8px; height:8px; border-radius:50%; }
.d-noir .dot--ok{ background:var(--grn); box-shadow:0 0 9px var(--grn); }
.d-noir .dot--run{ background:var(--cyan); box-shadow:0 0 9px var(--cyan); animation:pulse 1.4s infinite; }
.d-noir .dot--idle{ background:var(--line2); }
.d-noir .concept{ padding:18px; }
.d-noir .concept h4{ margin:0 0 6px; font:800 16px/1.1 "Archivo"; }
.d-noir .concept p{ margin:0 0 12px; font:400 12px/1.6 "JetBrains Mono"; color:var(--mut); }
.d-noir .concept .meta{ font:500 10px/1.5 "JetBrains Mono"; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); }
/* ════════════════════════════════════════════════════════════
DIRECTION 2 — VELOCITY (neo-brutalist sportsbook)
Anton (slammed caps) + DM Sans + Space Mono. Acid lime, hard shadows.
════════════════════════════════════════════════════════════ */
.d-velocity{
--paper:#f3f1e9; --paper2:#fffef8; --ink:#0a0a0a; --ink2:#26241e;
--lime:#c6f400; --blue:#244bff; --red:#ff3b30; --amber:#ff8a00;
--shadow:6px 6px 0 var(--ink);
background:var(--paper); color:var(--ink);
font-family:"DM Sans",sans-serif;
}
.d-velocity .fx{
background:
repeating-linear-gradient(135deg, transparent 0 22px, rgba(10,10,10,.025) 22px 24px);
}
.d-velocity .bar{ background:var(--ink); color:var(--paper2); height:64px; border-bottom:3px solid var(--ink); }
.d-velocity .bar__menu{ width:38px; height:38px; display:grid; place-items:center; border:2px solid var(--paper2); border-radius:9px; color:var(--paper2); }
.d-velocity .bar__menu:hover{ background:var(--lime); color:var(--ink); border-color:var(--lime); }
.d-velocity .brand__mark{ font:400 26px/1 "Anton",sans-serif; letter-spacing:.02em; text-transform:uppercase; color:var(--paper2); }
.d-velocity .brand__mark::first-letter{ color:var(--lime); }
.d-velocity .brand__sub{ font:700 10px/1 "Space Mono"; letter-spacing:.18em; text-transform:uppercase; color:var(--lime); }
.d-velocity .capture{ display:inline-flex; align-items:center; gap:8px; font:700 10.5px/1 "Space Mono"; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); background:var(--lime); padding:8px 12px; border-radius:8px; }
.d-velocity .capture__dot{ width:8px; height:8px; border-radius:50%; background:var(--ink); animation:pulse 1.3s infinite; }
.d-velocity .locale{ border:2px solid var(--paper2); border-radius:8px; }
.d-velocity .locale__btn{ padding:7px 11px; font:700 10.5px/1 "Space Mono"; color:var(--paper2); }
.d-velocity .locale__btn+.locale__btn{ border-left:2px solid var(--paper2); }
.d-velocity .locale__btn.is-active{ background:var(--lime); color:var(--ink); }
.d-velocity .theme{ width:38px; height:38px; display:grid; place-items:center; border:2px solid var(--paper2); border-radius:9px; color:var(--paper2); }
.d-velocity .theme:hover{ background:var(--lime); color:var(--ink); border-color:var(--lime); }
.d-velocity .nav{ background:var(--paper2); border-right:3px solid var(--ink); padding:18px 14px; gap:6px; }
.d-velocity .nav__group{ font:700 10px/1 "Space Mono"; letter-spacing:.18em; text-transform:uppercase; color:#9a958a; padding:16px 8px 8px; }
.d-velocity .nav-link{ padding:11px 12px; border:2px solid transparent; border-radius:10px; font:700 13.5px/1 "DM Sans"; color:var(--ink2); }
.d-velocity .nav-link:hover{ border-color:var(--ink); transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink); }
.d-velocity .nav-link.is-active{ background:var(--lime); border-color:var(--ink); box-shadow:var(--shadow); }
.d-velocity .badge{ min-width:20px; height:20px; padding:0 6px; border-radius:6px; background:var(--red); color:#fff; font:700 11px/20px "Space Mono"; border:2px solid var(--ink); }
.d-velocity .main{ padding:30px 34px 50px; }
.d-velocity .hero{ max-width:820px; animation:rise .45s both; }
.d-velocity .kicker{ display:inline-block; font:700 11px/1 "Space Mono"; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); background:var(--lime); padding:6px 10px; border:2px solid var(--ink); border-radius:6px; transform:rotate(-1.5deg); }
.d-velocity .title{ font:400 clamp(44px,7vw,82px)/.92 "Anton",sans-serif; letter-spacing:.005em; text-transform:uppercase; margin:18px 0 14px; }
.d-velocity .title em{ font-style:normal; color:var(--blue); -webkit-text-stroke:2px var(--ink); }
.d-velocity .lede{ color:var(--ink2); font:500 15.5px/1.55 "DM Sans"; max-width:60ch; margin:0; }
.d-velocity .stats{ gap:18px; margin:34px 0; animation:rise .45s .05s both; }
.d-velocity .stat{ background:var(--paper2); border:3px solid var(--ink); border-radius:14px; box-shadow:var(--shadow); padding:18px 20px; gap:8px; position:relative; }
.d-velocity .stat__label{ font:700 10.5px/1 "Space Mono"; letter-spacing:.12em; text-transform:uppercase; color:var(--ink2); }
.d-velocity .stat__value{ font:400 46px/1 "Anton",sans-serif; letter-spacing:.01em; }
.d-velocity .stat__value::after{ content:""; display:block; width:46px; height:6px; background:var(--lime); margin-top:6px; }
.d-velocity .stat--alert{ background:var(--ink); color:var(--paper2); }
.d-velocity .stat--alert .stat__label{ color:var(--lime); }
.d-velocity .stat--alert .stat__value::after{ background:var(--red); }
.d-velocity .stat__delta{ font:700 12px/1 "Space Mono"; color:var(--ink2); }
.d-velocity .stat--alert .stat__delta{ color:var(--red); }
.d-velocity .grid2{ gap:24px; animation:rise .45s .1s both; }
.d-velocity .side{ display:flex; flex-direction:column; gap:24px; }
.d-velocity .panel{ background:var(--paper2); border:3px solid var(--ink); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; }
.d-velocity .panel__head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:3px solid var(--ink); background:var(--lime); }
.d-velocity .panel__head .kicker{ transform:none; background:var(--ink); color:var(--lime); }
.d-velocity .panel__more{ font:700 11px/1 "Space Mono"; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.d-velocity .panel__more:hover{ text-decoration:underline; }
.d-velocity .signal{ grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding:16px 20px; border-bottom:2px solid var(--ink); transition:background .12s; }
.d-velocity .signal:last-child{ border-bottom:0; }
.d-velocity .signal:hover{ background:#faf7e8; }
.d-velocity .sporticon{ width:46px; height:46px; border-radius:11px; border:2px solid var(--ink); font:400 17px/1 "Anton"; }
.d-velocity .si-football{ background:var(--lime); }
.d-velocity .si-basketball{ background:var(--amber); color:#fff; }
.d-velocity .si-tennis{ background:#34d6c0; }
.d-velocity .si-hockey{ background:var(--blue); color:#fff; }
.d-velocity .sig-time{ font:700 11px/1 "Space Mono"; color:#8c887d; margin-bottom:5px; }
.d-velocity .sig-teams{ font:400 21px/1 "Anton",sans-serif; text-transform:uppercase; letter-spacing:.01em; }
.d-velocity .sig-mkts{ gap:9px; margin-top:11px; }
.d-velocity .mkt{ gap:6px; padding:5px 9px; border:2px solid var(--ink); border-radius:7px; font-family:"Space Mono"; background:var(--paper); }
.d-velocity .mkt__k{ font:700 11px/1; color:#8c887d; }
.d-velocity .mkt__pre{ font-size:12px; color:#8c887d; text-decoration:line-through; }
.d-velocity .mkt__arr{ color:var(--ink); }
.d-velocity .mkt__post{ font-weight:700; font-size:14px; }
.d-velocity .mkt.up{ background:var(--lime); }
.d-velocity .mkt.dn{ background:#ffe2df; }
.d-velocity .mkt.dn .mkt__post{ color:var(--red); }
.d-velocity .sig-right{ display:flex; flex-direction:column; align-items:flex-end; gap:9px; }
.d-velocity .sev{ font:700 10px/1 "Space Mono"; letter-spacing:.1em; text-transform:uppercase; padding:6px 10px; border:2px solid var(--ink); border-radius:7px; }
.d-velocity .sev--high{ background:var(--red); color:#fff; }
.d-velocity .sev--medium{ background:var(--amber); color:var(--ink); }
.d-velocity .sev--low{ background:var(--paper); color:var(--ink2); }
.d-velocity .score__n{ font:400 30px/1 "Anton"; }
.d-velocity .score__bar{ display:none; }
.d-velocity .pipe{ padding:10px 14px; }
.d-velocity .step{ gap:14px; padding:13px 8px; border-bottom:2px dashed var(--ink); }
.d-velocity .step:last-child{ border-bottom:0; }
.d-velocity .step__idx{ font:400 24px/1 "Anton"; color:var(--ink); width:34px; }
.d-velocity .step__lbl{ flex:1; font:700 14px/1.2 "DM Sans"; }
.d-velocity .step__lbl small{ display:block; font:700 11px/1 "Space Mono"; color:#8c887d; margin-top:4px; letter-spacing:.05em; }
.d-velocity .dot{ width:13px; height:13px; border:2px solid var(--ink); border-radius:4px; }
.d-velocity .dot--ok{ background:var(--lime); }
.d-velocity .dot--run{ background:var(--blue); animation:pulse 1.3s infinite; }
.d-velocity .dot--idle{ background:var(--paper); }
.d-velocity .concept{ padding:20px; }
.d-velocity .concept h4{ margin:0 0 8px; font:400 26px/.95 "Anton"; text-transform:uppercase; }
.d-velocity .concept p{ margin:0 0 12px; font:500 13px/1.55 "DM Sans"; color:var(--ink2); }
.d-velocity .concept .meta{ font:700 10.5px/1.5 "Space Mono"; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); background:var(--lime); display:inline-block; padding:4px 8px; border:2px solid var(--ink); border-radius:6px; }
/* ════════════════════════════════════════════════════════════
DIRECTION 3 — AURORA (refined premium fintech, dark glass)
Outfit + Manrope + IBM Plex Mono. Indigo glass, aurora glow.
════════════════════════════════════════════════════════════ */
.d-aurora{
--bg:#0a0d1a; --glass:rgba(255,255,255,.045); --glass2:rgba(255,255,255,.07);
--line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
--ink:#eef1fb; --mut:#9aa3c0; --dim:#6b7494;
--violet:#8b7cff; --teal:#3dd6c4; --coral:#ff7a8a; --gold:#ffce6b; --grn:#5fe0a0;
background:var(--bg); color:var(--ink);
font-family:"Manrope",sans-serif;
}
.d-aurora .fx::before,.d-aurora .fx::after{ content:""; position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; }
.d-aurora .fx::before{ width:620px; height:620px; left:-120px; top:-140px; background:radial-gradient(circle,#5a47d6,transparent 70%); animation:drift1 22s ease-in-out infinite alternate; }
.d-aurora .fx::after{ width:560px; height:560px; right:-100px; bottom:-160px; background:radial-gradient(circle,#1f8f88,transparent 70%); animation:drift2 26s ease-in-out infinite alternate; }
@keyframes drift1{ to{ transform:translate(80px,60px) scale(1.1);} }
@keyframes drift2{ to{ transform:translate(-70px,-50px) scale(1.15);} }
.d-aurora .fx .glow3{ position:absolute; width:420px; height:420px; left:46%; top:30%; border-radius:50%; filter:blur(100px); opacity:.32; background:radial-gradient(circle,#b06bff,transparent 70%); }
.d-aurora .bar{ background:rgba(12,16,30,.6); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); height:64px; }
.d-aurora .bar__menu{ width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--line); border-radius:11px; color:var(--mut); background:var(--glass); }
.d-aurora .bar__menu:hover{ color:var(--ink); border-color:var(--line2); }
.d-aurora .brand__mark{ font:600 20px/1 "Outfit",sans-serif; letter-spacing:-.01em; }
.d-aurora .brand__mark::first-letter{ color:var(--violet); }
.d-aurora .brand__sub{ font:500 10px/1 "IBM Plex Mono"; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }
.d-aurora .capture{ display:inline-flex; align-items:center; gap:8px; font:500 10.5px/1 "IBM Plex Mono"; letter-spacing:.12em; text-transform:uppercase; color:var(--grn); padding:7px 12px; border-radius:20px; background:rgba(95,224,160,.10); border:1px solid rgba(95,224,160,.3); }
.d-aurora .capture__dot{ width:7px; height:7px; border-radius:50%; background:var(--grn); box-shadow:0 0 10px var(--grn); animation:pulse 1.7s infinite; }
.d-aurora .locale{ border:1px solid var(--line); border-radius:20px; background:var(--glass); }
.d-aurora .locale__btn{ padding:7px 13px; font:500 10.5px/1 "IBM Plex Mono"; letter-spacing:.1em; color:var(--dim); border-radius:20px; }
.d-aurora .locale__btn.is-active{ background:linear-gradient(120deg,var(--violet),#6d8bff); color:#fff; }
.d-aurora .theme{ width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--line); border-radius:11px; color:var(--mut); background:var(--glass); }
.d-aurora .theme:hover{ color:var(--violet); border-color:var(--line2); }
.d-aurora .nav{ background:rgba(12,16,30,.4); backdrop-filter:blur(10px); border-right:1px solid var(--line); padding:18px 14px; gap:3px; }
.d-aurora .nav__group{ font:500 10px/1 "IBM Plex Mono"; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); padding:18px 12px 9px; }
.d-aurora .nav-link{ padding:10px 13px; border-radius:12px; font:600 13.5px/1 "Manrope"; color:var(--mut); position:relative; transition:background .16s,color .16s; }
.d-aurora .nav-link svg{ color:var(--dim); }
.d-aurora .nav-link:hover{ background:var(--glass); color:var(--ink); }
.d-aurora .nav-link.is-active{ background:linear-gradient(120deg,rgba(139,124,255,.22),rgba(109,139,255,.10)); color:#fff; border:1px solid rgba(139,124,255,.32); }
.d-aurora .nav-link.is-active svg{ color:var(--violet); }
.d-aurora .badge{ min-width:19px; height:19px; padding:0 6px; border-radius:10px; background:linear-gradient(120deg,var(--coral),#ff5d8f); color:#fff; font:700 10.5px/19px "IBM Plex Mono"; }
.d-aurora .main{ padding:32px 38px 50px; }
.d-aurora .hero{ max-width:780px; animation:rise .55s both; }
.d-aurora .kicker{ font:500 11px/1 "IBM Plex Mono"; letter-spacing:.24em; text-transform:uppercase; background:linear-gradient(120deg,var(--violet),var(--teal)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.d-aurora .title{ font:600 clamp(32px,4.6vw,54px)/1.04 "Outfit",sans-serif; letter-spacing:-.02em; margin:14px 0 14px; }
.d-aurora .title em{ font-style:normal; background:linear-gradient(120deg,#b9aaff,var(--teal)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.d-aurora .lede{ color:var(--mut); font:400 15.5px/1.65 "Manrope"; max-width:62ch; margin:0; }
.d-aurora .stats{ gap:18px; margin:32px 0; animation:rise .55s .07s both; }
.d-aurora .stat{ background:var(--glass); border:1px solid var(--line); border-radius:18px; padding:20px; gap:11px; backdrop-filter:blur(12px); position:relative; overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,.25); }
.d-aurora .stat::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,var(--line2),transparent); }
.d-aurora .stat__label{ font:500 10.5px/1 "IBM Plex Mono"; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.d-aurora .stat__value{ font:600 38px/1 "Outfit",sans-serif; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.d-aurora .stat--alert .stat__value{ background:linear-gradient(120deg,var(--coral),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.d-aurora .stat__delta{ display:inline-flex; align-items:center; gap:5px; align-self:flex-start; font:600 11px/1 "IBM Plex Mono"; color:var(--grn); background:rgba(95,224,160,.10); padding:4px 8px; border-radius:8px; }
.d-aurora .stat__delta.dn{ color:var(--coral); background:rgba(255,122,138,.10); }
.d-aurora .stat__delta.flat{ color:var(--dim); background:var(--glass2); }
.d-aurora .grid2{ gap:24px; animation:rise .55s .14s both; }
.d-aurora .side{ display:flex; flex-direction:column; gap:24px; }
.d-aurora .panel{ background:var(--glass); border:1px solid var(--line); border-radius:20px; overflow:hidden; backdrop-filter:blur(12px); box-shadow:0 10px 36px rgba(0,0,0,.28); }
.d-aurora .panel__head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); }
.d-aurora .panel__more{ font:500 11px/1 "IBM Plex Mono"; letter-spacing:.1em; text-transform:uppercase; color:var(--violet); }
.d-aurora .panel__more:hover{ color:#b9aaff; }
.d-aurora .signal{ grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding:16px 22px; border-bottom:1px solid var(--line); transition:background .16s; }
.d-aurora .signal:last-child{ border-bottom:0; }
.d-aurora .signal:hover{ background:var(--glass2); }
.d-aurora .sporticon{ width:42px; height:42px; border-radius:13px; font:600 15px/1 "Outfit"; border:1px solid var(--line2); }
.d-aurora .si-football{ background:linear-gradient(135deg,rgba(95,224,160,.22),rgba(95,224,160,.06)); color:var(--grn); }
.d-aurora .si-basketball{ background:linear-gradient(135deg,rgba(255,206,107,.22),rgba(255,206,107,.06)); color:var(--gold); }
.d-aurora .si-tennis{ background:linear-gradient(135deg,rgba(61,214,196,.22),rgba(61,214,196,.06)); color:var(--teal); }
.d-aurora .si-hockey{ background:linear-gradient(135deg,rgba(139,124,255,.26),rgba(139,124,255,.06)); color:#b9aaff; }
.d-aurora .sig-time{ font:500 11px/1 "IBM Plex Mono"; color:var(--dim); margin-bottom:5px; }
.d-aurora .sig-teams{ font:600 16px/1.15 "Outfit",sans-serif; color:var(--ink); }
.d-aurora .sig-mkts{ gap:8px; margin-top:11px; }
.d-aurora .mkt{ gap:6px; padding:5px 10px; border:1px solid var(--line); border-radius:10px; background:var(--glass); font-family:"IBM Plex Mono"; }
.d-aurora .mkt__k{ font:600 10px/1; color:var(--dim); }
.d-aurora .mkt__pre{ font-size:11.5px; color:var(--dim); text-decoration:line-through; text-decoration-color:var(--line2); }
.d-aurora .mkt__arr{ color:var(--dim); }
.d-aurora .mkt__post{ font-weight:600; font-size:12.5px; }
.d-aurora .mkt.up .mkt__post{ color:var(--grn); }
.d-aurora .mkt.dn .mkt__post{ color:var(--coral); }
.d-aurora .sig-right{ display:flex; flex-direction:column; align-items:flex-end; gap:9px; }
.d-aurora .sev{ font:600 9.5px/1 "IBM Plex Mono"; letter-spacing:.12em; text-transform:uppercase; padding:5px 11px; border-radius:20px; }
.d-aurora .sev--high{ color:#fff; background:linear-gradient(120deg,var(--coral),#ff5d8f); }
.d-aurora .sev--medium{ color:#3a2c08; background:linear-gradient(120deg,var(--gold),#ffb24d); }
.d-aurora .sev--low{ color:var(--mut); background:var(--glass2); border:1px solid var(--line); }
.d-aurora .score{ display:flex; align-items:center; gap:9px; }
.d-aurora .score__bar{ width:54px; height:5px; border-radius:4px; background:var(--glass2); overflow:hidden; }
.d-aurora .score__fill{ height:100%; border-radius:4px; background:linear-gradient(90deg,var(--violet),var(--coral)); }
.d-aurora .score__n{ font:600 15px/1 "Outfit"; font-variant-numeric:tabular-nums; }
.d-aurora .pipe{ padding:10px 14px; }
.d-aurora .step{ gap:14px; padding:13px 10px; border-bottom:1px solid var(--line); }
.d-aurora .step:last-child{ border-bottom:0; }
.d-aurora .step__idx{ font:600 14px/1 "Outfit"; color:var(--dim); width:26px; }
.d-aurora .step__lbl{ flex:1; font:600 13.5px/1.2 "Manrope"; }
.d-aurora .step__lbl small{ display:block; font:400 11px/1 "IBM Plex Mono"; color:var(--dim); margin-top:4px; letter-spacing:.04em; }
.d-aurora .dot{ width:9px; height:9px; border-radius:50%; }
.d-aurora .dot--ok{ background:var(--grn); box-shadow:0 0 10px var(--grn); }
.d-aurora .dot--run{ background:var(--teal); box-shadow:0 0 10px var(--teal); animation:pulse 1.5s infinite; }
.d-aurora .dot--idle{ background:var(--line2); }
.d-aurora .concept{ padding:22px; }
.d-aurora .concept h4{ margin:0 0 8px; font:600 19px/1.1 "Outfit"; }
.d-aurora .concept p{ margin:0 0 14px; font:400 13px/1.65 "Manrope"; color:var(--mut); }
.d-aurora .concept .meta{ font:500 10px/1.5 "IBM Plex Mono"; letter-spacing:.1em; text-transform:uppercase; background:linear-gradient(120deg,var(--violet),var(--teal)); -webkit-background-clip:text; background-clip:text; color:transparent; }
</style>
</head>
<body data-active="noir">
<!-- icon sprite -->
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
<symbol id="i-menu" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></symbol>
<symbol id="i-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z"/></symbol>
<symbol id="i-grid" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><rect x="3.5" y="3.5" width="7" height="7" rx="1.2"/><rect x="13.5" y="3.5" width="7" height="7" rx="1.2"/><rect x="3.5" y="13.5" width="7" height="7" rx="1.2"/><rect x="13.5" y="13.5" width="7" height="7" rx="1.2"/></symbol>
<symbol id="i-clock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></symbol>
<symbol id="i-bolt" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"><path d="M13 3 5 13h6l-1 8 8-10h-6z"/></symbol>
<symbol id="i-warn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4 3 19h18z"/><path d="M12 10v4M12 16.5v.4"/></symbol>
<symbol id="i-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="m8.5 12 2.5 2.5 4.5-5"/></symbol>
<symbol id="i-insight" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18h6M10 21h4"/><path d="M12 3a6 6 0 0 0-3.5 10.9c.5.4.5 1 .5 1.6h6c0-.6 0-1.2.5-1.6A6 6 0 0 0 12 3z"/></symbol>
<symbol id="i-receipt" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3.5h12v17l-2.2-1.4-2 1.4-1.8-1.4-1.8 1.4-2-1.4L6 20.5z"/><path d="M9 8h6M9 12h6"/></symbol>
<symbol id="i-stats" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19V10M10 19V5M15 19v-6M20 19v-9"/></symbol>
<symbol id="i-gear" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M5 8h7M16 8h3"/><circle cx="14" cy="8" r="2.2"/><path d="M5 16h3M12 16h7"/><circle cx="10" cy="16" r="2.2"/></symbol>
</svg>
<!-- ===== direction switcher ===== -->
<div class="switch">
<span class="switch__label"><b>Marathon</b> · Redesign</span>
<div class="switch__tabs">
<button class="tab is-on" data-for="noir"><span class="tab__name">Terminal Noir</span><span class="tab__tag">Dark · Quant</span></button>
<button class="tab" data-for="velocity"><span class="tab__name">Velocity</span><span class="tab__tag">Brutalist · Sport</span></button>
<button class="tab" data-for="aurora"><span class="tab__name">Aurora</span><span class="tab__tag">Premium · Glass</span></button>
</div>
<span class="switch__hint">Press 1 · 2 · 3 to switch</span>
</div>
<!-- ===== stages ===== -->
<section class="stage d-noir is-active" data-stage="noir"><div class="fx"></div><div class="mount"></div></section>
<section class="stage d-velocity" data-stage="velocity"><div class="fx"></div><div class="mount"></div></section>
<section class="stage d-aurora" data-stage="aurora"><div class="fx"><span class="glow3"></span></div><div class="mount"></div></section>
<script>
const NAV = [
["Analysis", null],
["Dashboard","i-grid",true], ["Pre-Match","i-clock"], ["Live","i-bolt"],
["Anomalies","i-warn",false,3], ["Results","i-check"], ["Insights","i-insight"],
["My Bets","i-receipt"], ["Backtest","i-stats"],
["System", null],
["Settings","i-gear"],
];
const STATS = [
["Events tracked","1,284","+38 today","up"],
["Snapshots today","38,902","+5.1K live","up"],
["Anomalies","47","+6 today","alert"],
["Sports covered","4","all active","flat"],
];
const SIGNALS = [
{t:"14:32", sport:"Football", ic:"football", mono:"F", teams:"Динамо Минск — БАТЭ", league:"BLR · Vysshaya Liga", sev:"high", score:0.82, gap:"72s",
mkts:[["1","1.85","2.40","up"],["X","3.40","3.05","dn"],["2","4.20","2.95","dn"]]},
{t:"13:58", sport:"Basketball", ic:"basketball", mono:"B", teams:"ЦСКА — Зенит", league:"VTB United", sev:"medium", score:0.57, gap:"48s",
mkts:[["1","1.62","1.95","up"],["2","2.30","1.88","dn"]]},
{t:"12:10", sport:"Tennis", ic:"tennis", mono:"T", teams:"Medvedev — Sinner", league:"ATP Masters 1000", sev:"low", score:0.41, gap:"35s",
mkts:[["1","1.40","1.55","up"],["2","2.95","2.55","dn"]]},
{t:"11:25", sport:"Hockey", ic:"hockey", mono:"H", teams:"Динамо Мн — Спартак", league:"KHL", sev:"high", score:0.74, gap:"65s",
mkts:[["1","2.10","2.85","up"],["X","3.80","3.40","dn"],["2","3.05","2.40","dn"]]},
];
const PIPE = [
["01","Schedule scan","Every 6h","ok"],
["02","Capture snapshots","30s pre · 5s live","ok"],
["03","Detect anomalies","Running now","run"],
["04","Export workbook","Manual","idle"],
];
const SEV_LABEL = {high:"High", medium:"Medium", low:"Low"};
const META = {
noir: {name:"Terminal Noir", pick:"Pick this if you read Marathon as a precision instrument — dense, fast, every number first. Closest in spirit to the current build, taken fully dark and neon-lit.", fonts:"Type · Archivo + JetBrains Mono"},
velocity: {name:"Velocity", pick:"Pick this if you want energy and impact — loud, confident, unmistakably about sport. Hard edges, acid lime, slammed headlines.", fonts:"Type · Anton + DM Sans + Space Mono"},
aurora: {name:"Aurora", pick:"Pick this if you want a calm, premium product feel — soft glass, drifting aurora light, refined gradients. Modern fintech polish.", fonts:"Type · Outfit + Manrope"},
};
function navHTML(){
return NAV.map(item=>{
if(item[1]===null) return `<div class="nav__group">${item[0]}</div>`;
const [label,icon,active,badge]=item;
return `<a class="nav-link${active?" is-active":""}">
<svg class="ico"><use href="#${icon}"/></svg>
<span class="lbl">${label}</span>
${badge?`<span class="badge">${badge}</span>`:""}
</a>`;
}).join("");
}
function statsHTML(){
return STATS.map(([label,val,delta,kind])=>`
<div class="stat${kind==="alert"?" stat--alert":""}">
<span class="stat__label">${label}</span>
<span class="stat__value">${val}</span>
<span class="stat__delta ${kind}">${delta}</span>
</div>`).join("");
}
function mktsHTML(mkts){
return mkts.map(([k,pre,post,dir])=>`
<span class="mkt ${dir}">
<span class="mkt__k">${k}</span>
<span class="mkt__pre">${pre}</span>
<span class="mkt__arr">→</span>
<span class="mkt__post">${post}</span>
</span>`).join("");
}
function signalsHTML(){
return SIGNALS.map(s=>`
<div class="signal">
<span class="sporticon si-${s.ic}">${s.mono}</span>
<div class="sig-mid">
<div style="min-width:0">
<div class="sig-time">${s.t} · ${s.sport} · ${s.league}</div>
<div class="sig-teams">${s.teams}</div>
<div class="sig-mkts">${mktsHTML(s.mkts)}</div>
</div>
</div>
<div class="sig-right">
<span class="sev sev--${s.sev}">${SEV_LABEL[s.sev]}</span>
<span class="score">
<span class="score__bar"><span class="score__fill" style="width:${Math.round(s.score*100)}%"></span></span>
<span class="score__n">${s.score.toFixed(2)}</span>
</span>
</div>
</div>`).join("");
}
function pipeHTML(){
return PIPE.map(([idx,lbl,sub,st])=>`
<li class="step">
<span class="step__idx">${idx}</span>
<span class="step__lbl">${lbl}<small>${sub}</small></span>
<span class="dot dot--${st}"></span>
</li>`).join("");
}
function dashboardHTML(key){
const m = META[key];
return `
<div class="app">
<header class="bar">
<button class="bar__menu" aria-label="Menu"><svg class="ico"><use href="#i-menu"/></svg></button>
<div class="brand">
<span class="brand__mark">Marathon</span>
<span class="brand__sub">Odds Lab · v0.1</span>
</div>
<div class="bar__spacer"></div>
<div class="bar__tools">
<span class="capture"><span class="capture__dot"></span>Capturing</span>
<div class="locale"><button class="locale__btn is-active">RU</button><button class="locale__btn">EN</button></div>
<button class="theme" aria-label="Theme"><svg class="ico"><use href="#i-moon"/></svg></button>
</div>
</header>
<div class="body">
<nav class="nav">${navHTML()}</nav>
<main class="main">
<section class="hero">
<span class="kicker">Odds Intelligence</span>
<h1 class="title">Suspension-flip <em>radar</em></h1>
<p class="lede">Live watch on frozen markets that reopen inverted — the moment a bookmaker swaps underdog and favourite. Sorted by confidence, newest first.</p>
</section>
<div class="stats">${statsHTML()}</div>
<div class="grid2">
<section class="panel">
<header class="panel__head"><span class="kicker">Latest signals</span><a class="panel__more">View all →</a></header>
<div class="feed">${signalsHTML()}</div>
</section>
<aside class="side">
<section class="panel">
<header class="panel__head"><span class="kicker">Pipeline</span></header>
<ol class="pipe">${pipeHTML()}</ol>
</section>
<section class="panel concept">
<h4>${m.name}</h4>
<p>${m.pick}</p>
<span class="meta">${m.fonts}</span>
</section>
</aside>
</div>
</main>
</div>
</div>`;
}
// mount each stage
document.querySelectorAll(".stage").forEach(st=>{
st.querySelector(".mount").innerHTML = dashboardHTML(st.dataset.stage);
});
// switcher
const stages = document.querySelectorAll(".stage");
const tabs = document.querySelectorAll(".tab");
function show(key){
document.body.dataset.active = key;
stages.forEach(s=>s.classList.toggle("is-active", s.dataset.stage===key));
tabs.forEach(t=>t.classList.toggle("is-on", t.dataset.for===key));
// re-trigger entrance animation
const active = document.querySelector(".stage.is-active .main");
if(active){ active.style.animation="none"; void active.offsetWidth; active.style.animation=""; }
window.scrollTo(0,0);
}
tabs.forEach(t=>t.addEventListener("click",()=>show(t.dataset.for)));
addEventListener("keydown",e=>{
if(e.key==="1") show("noir");
if(e.key==="2") show("velocity");
if(e.key==="3") show("aurora");
});
</script>
</body>
</html>