builtbykev
93a220e0ca
- specs/design-reference/vyndr-system.html + support.js (global visual reference) - D1 override (sport-agnostic athlete-id ingestion), D3 override (book SVGs in-wave) - Addition 1 (ingestion-time id resolve+store), Addition 2 (record by grade tier), Addition 3 (mockup is global reference; live wordmark kept) - revised 6-wave sequence Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1572 lines
156 KiB
HTML
1572 lines
156 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<script src="./support.js"></script>
|
||
</head>
|
||
<body>
|
||
<x-dc>
|
||
<helmet>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<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=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
|
||
<style>
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
html,body{background:#06060B;color:#F0F0F0;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
|
||
::selection{background:rgba(0,212,160,.28);color:#F0F0F0}
|
||
a{color:#00D4A0;text-decoration:none}
|
||
a:hover{color:#5cf0cf}
|
||
.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
|
||
@keyframes vy-breathe{0%,100%{box-shadow:0 0 0 0 rgba(0,212,160,0),inset 0 0 0 1px rgba(0,212,160,.35)}50%{box-shadow:0 0 22px -4px rgba(0,212,160,.32),inset 0 0 0 1px rgba(0,212,160,.6)}}
|
||
@keyframes vy-livedot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
|
||
@keyframes vy-syncdot{0%,100%{opacity:1}50%{opacity:.2}}
|
||
@keyframes vy-rxup{0%{background:rgba(0,212,160,.28)}100%{background:rgba(0,212,160,0)}}
|
||
@keyframes vy-rxdown{0%{background:rgba(255,71,87,.26)}100%{background:rgba(255,71,87,0)}}
|
||
@keyframes vy-arrive{0%{opacity:0;transform:scale(.88) translateY(10px);filter:blur(6px)}60%{opacity:1;transform:scale(1.015) translateY(0);filter:blur(0)}100%{opacity:1;transform:scale(1) translateY(0)}}
|
||
@keyframes vy-scan{0%{transform:translateY(-120%)}100%{transform:translateY(320%)}}
|
||
@keyframes vy-glitch{0%,90%,100%{transform:translate(0,0);clip-path:inset(0 0 0 0);text-shadow:none}91%{transform:translate(-1.5px,0);clip-path:inset(12% 0 42% 0);text-shadow:1.6px 0 #FF4757,-1.6px 0 #00D4A0}93%{transform:translate(1.5px,0);clip-path:inset(58% 0 8% 0);text-shadow:-1.6px 0 #FF4757,1.6px 0 #00D4A0}95%{transform:translate(-1px,0);clip-path:inset(32% 0 30% 0);text-shadow:1px 0 #00D4A0}96%{transform:translate(1px,0);clip-path:inset(70% 0 4% 0);text-shadow:none}}
|
||
.vy-grain{position:fixed;inset:0;z-index:5;pointer-events:none;mix-blend-mode:overlay;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:140px}
|
||
.vy-vignette{position:fixed;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 200px 40px rgba(0,0,0,.55),inset 0 90px 120px -60px rgba(0,212,160,.05)}
|
||
@keyframes vy-rowin{0%{opacity:0;transform:translateY(9px)}100%{opacity:var(--o,1);transform:translateY(0)}}
|
||
@keyframes vy-bootline{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
|
||
@keyframes vy-eventin{0%{opacity:0;transform:translateY(-3px)}12%,80%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-3px)}}
|
||
@keyframes vy-cmdin{0%{opacity:0;transform:translateY(-10px) scale(.98)}100%{opacity:1;transform:none}}
|
||
@keyframes vy-detailin{0%{opacity:0;transform:translateY(-2px)}100%{opacity:1;transform:none}}
|
||
.rx-up{animation:vy-rxup .75s ease-out}
|
||
.rx-down{animation:vy-rxdown .75s ease-out}
|
||
.vy-scanwrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit}
|
||
.vy-scanwrap::before{content:"";position:absolute;left:0;right:0;height:38%;background:linear-gradient(180deg,transparent,rgba(0,212,160,.07),transparent);animation:vy-scan 5.5s linear infinite}
|
||
</style>
|
||
</helmet>
|
||
<div ref="{{ rootRef }}" style="min-height:100vh;background:radial-gradient(1200px 700px at 78% -8%,rgba(0,212,160,.06),transparent 60%),#06060B;padding:0 0 120px">
|
||
<div class="vy-vignette" aria-hidden="true"></div>
|
||
<div class="vy-grain" aria-hidden="true"></div>
|
||
|
||
<!-- ============ ⌘K COMMAND BAR ============ -->
|
||
<sc-if value="{{ cmdOpen }}" hint-placeholder-val="{{ false }}">
|
||
<div onClick="{{ closeCmd }}" style="position:fixed;inset:0;z-index:60;background:rgba(4,4,8,.72);backdrop-filter:blur(7px);display:flex;align-items:flex-start;justify-content:center;padding-top:11vh">
|
||
<div onClick="{{ stopCmd }}" style="width:min(580px,92vw);border-radius:16px;background:#0E0E14;border:1px solid #2A2A38;box-shadow:0 44px 100px -30px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden;animation:vy-cmdin .18s ease-out">
|
||
<div style="display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid #14141E">
|
||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7" stroke="#707080" stroke-width="2"/><path stroke="#707080" stroke-width="2" stroke-linecap="round" d="M20 20l-4-4"/></svg>
|
||
<input data-cmd-input onInput="{{ onCmdInput }}" placeholder="Search players, teams, reads, actions…" style="flex:1;min-width:0;background:transparent;border:none;outline:none;color:#F0F0F0;font-family:'Inter',sans-serif;font-size:15px" />
|
||
<span class="mono" style="font-size:9px;letter-spacing:.1em;color:#4a4a58;border:1px solid #2A2A38;border-radius:5px;padding:2px 6px">ESC</span>
|
||
</div>
|
||
<div data-cmd-list style="max-height:54vh;overflow:auto;padding:8px">
|
||
<div class="mono" style="font-size:8.5px;letter-spacing:.2em;color:#4a4a58;padding:10px 12px 6px">JUMP TO</div>
|
||
<div data-cmd-item data-tags="dashboard slate edge board" style="cursor:pointer;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px" style-hover="background:#14141E">
|
||
<span style="width:24px;height:24px;border-radius:6px;background:#14141E;display:flex;align-items:center;justify-content:center"><svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path stroke="#B8BCC8" stroke-width="2" stroke-linecap="round" d="M4 6h16M4 12h16M4 18h10"/></svg></span>
|
||
<span style="flex:1;font-size:13px;color:#F0F0F0">Tonight's Slate <span style="color:#707080">· Edge Board</span></span>
|
||
<span class="mono" style="font-size:9px;color:#4a4a58">↵</span>
|
||
</div>
|
||
<div data-cmd-item data-tags="ledger record settled" style="cursor:pointer;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px" style-hover="background:#14141E">
|
||
<span style="width:24px;height:24px;border-radius:6px;background:#14141E;display:flex;align-items:center;justify-content:center"><svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path stroke="#B8BCC8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M5 4h14v16H5zM8 9h8M8 13h8M8 17h5"/></svg></span>
|
||
<span style="flex:1;font-size:13px;color:#F0F0F0">Ledger <span style="color:#707080">· settled history</span></span>
|
||
<span class="mono" style="font-size:9px;color:#4a4a58">↵</span>
|
||
</div>
|
||
<div data-cmd-item data-tags="streaks billboard" style="cursor:pointer;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px" style-hover="background:#14141E">
|
||
<span style="width:24px;height:24px;border-radius:6px;background:#14141E;display:flex;align-items:center;justify-content:center"><svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path stroke="#B8BCC8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M4 16l5-5 3 3 8-8"/></svg></span>
|
||
<span style="flex:1;font-size:13px;color:#F0F0F0">Streaks</span>
|
||
<span class="mono" style="font-size:9px;color:#4a4a58">↵</span>
|
||
</div>
|
||
<div class="mono" style="font-size:8.5px;letter-spacing:.2em;color:#4a4a58;padding:14px 12px 6px">PLAYERS</div>
|
||
<div data-cmd-item data-tags="jokic nuggets nba den" style="cursor:pointer;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px" style-hover="background:#14141E">
|
||
<span style="width:24px;height:24px;border-radius:6px;background:linear-gradient(135deg,#0E4DA4,#1a2f5a);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:9px;color:#8fb4ff">NJ</span>
|
||
<span style="flex:1;font-size:13px;color:#F0F0F0">Nikola Jokić <span style="color:#707080">· C · DEN</span></span>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:16px;padding:0 6px;border-radius:4px;background:rgba(0,212,160,.14);color:#00D4A0;font-weight:800;font-size:9px">A+</span>
|
||
</div>
|
||
<div data-cmd-item data-tags="skenes pirates mlb pit" style="cursor:pointer;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px" style-hover="background:#14141E">
|
||
<span style="width:24px;height:24px;border-radius:6px;background:linear-gradient(135deg,#2b2b2b,#c9a227);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:9px;color:#fff">PIT</span>
|
||
<span style="flex:1;font-size:13px;color:#F0F0F0">Paul Skenes <span style="color:#707080">· RHP · PIT</span></span>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:16px;padding:0 6px;border-radius:4px;background:rgba(0,212,160,.1);color:#00D4A0;font-weight:800;font-size:9px">A</span>
|
||
</div>
|
||
<div data-cmd-item data-tags="edwards timberwolves nba min" style="cursor:pointer;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px" style-hover="background:#14141E">
|
||
<span style="width:24px;height:24px;border-radius:6px;background:linear-gradient(135deg,#0C2340,#236192);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:9px;color:#9fc0e8">MIN</span>
|
||
<span style="flex:1;font-size:13px;color:#F0F0F0">Anthony Edwards <span style="color:#707080">· SG · MIN</span></span>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:16px;padding:0 6px;border-radius:4px;background:rgba(0,212,160,.1);color:#00D4A0;font-weight:800;font-size:9px">A</span>
|
||
</div>
|
||
<div class="mono" style="font-size:8.5px;letter-spacing:.2em;color:#4a4a58;padding:14px 12px 6px">ACTIONS</div>
|
||
<div data-cmd-item data-tags="generate share card settle" style="cursor:pointer;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px" style-hover="background:#14141E">
|
||
<span style="width:24px;height:24px;border-radius:6px;background:rgba(0,212,160,.12);display:flex;align-items:center;justify-content:center"><svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path stroke="#00D4A0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M4 12v7h16v-7M12 3v12M8 7l4-4 4 4"/></svg></span>
|
||
<span style="flex:1;font-size:13px;color:#F0F0F0">Generate share card</span>
|
||
<span class="mono" style="font-size:9px;color:#4a4a58">↵</span>
|
||
</div>
|
||
<div data-cmd-item data-tags="export profile u record" style="cursor:pointer;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px" style-hover="background:#14141E">
|
||
<span style="width:24px;height:24px;border-radius:6px;background:rgba(0,212,160,.12);display:flex;align-items:center;justify-content:center"><svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path stroke="#00D4A0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 4v11M8 11l4 4 4-4M5 20h14"/></svg></span>
|
||
<span style="flex:1;font-size:13px;color:#F0F0F0">Export /u public record</span>
|
||
<span class="mono" style="font-size:9px;color:#4a4a58">↵</span>
|
||
</div>
|
||
<div data-cmd-empty class="mono" style="display:none;padding:22px 12px;text-align:center;font-size:11px;letter-spacing:.08em;color:#707080">NO MATCHES · TRANSMISSION QUIET</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid #14141E;background:#0A0A10">
|
||
<span class="mono" style="font-size:9px;letter-spacing:.12em;color:#4a4a58">↑ ↓ NAVIGATE · ↵ OPEN · ESC CLOSE</span>
|
||
<span class="mono" style="font-size:9px;letter-spacing:.12em;color:#00D4A0">VYNDR TERMINAL</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</sc-if>
|
||
|
||
<!-- ============ TOP BAR ============ -->
|
||
<div style="position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:14px 40px;background:rgba(6,6,11,.82);backdrop-filter:blur(14px);border-bottom:1px solid #14141E">
|
||
<div style="display:flex;align-items:center;gap:14px">
|
||
<div class="vy-glitch mono" style="font-weight:800;font-size:19px;letter-spacing:.32em;color:#F0F0F0;animation:vy-glitch 6.5s steps(1) infinite">VYND<span style="color:#00D4A0">R</span></div>
|
||
<div style="width:1px;height:16px;background:#2A2A38"></div>
|
||
<div class="mono" style="font-size:10.5px;letter-spacing:.34em;color:#707080">SPORTS INTELLIGENCE TERMINAL</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:20px">
|
||
<span class="mono" data-event style="font-size:10.5px;letter-spacing:.1em;color:#00D4A0;opacity:0;min-width:0;white-space:nowrap"></span>
|
||
<div style="display:flex;align-items:center;gap:16px;padding-right:18px;border-right:1px solid #1E1E2A">
|
||
<div style="display:flex;flex-direction:column;align-items:flex-end;gap:1px">
|
||
<span class="mono" data-breadth-edges style="font-size:12px;color:#F0F0F0;font-weight:700;line-height:1">14</span>
|
||
<span class="mono" style="font-size:8px;letter-spacing:.16em;color:#707080;line-height:1">EDGES</span>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:flex-end;gap:1px">
|
||
<span class="mono" data-breadth-clv style="font-size:12px;color:#00D4A0;font-weight:700;line-height:1">+2.8%</span>
|
||
<span class="mono" style="font-size:8px;letter-spacing:.16em;color:#707080;line-height:1">AVG CLV</span>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:8px">
|
||
<span style="width:7px;height:7px;border-radius:50%;background:#00D4A0;animation:vy-syncdot 1.4s ease-in-out infinite"></span>
|
||
<span class="mono" style="font-size:11px;letter-spacing:.18em;color:#B8BCC8">SYNC</span>
|
||
<span class="mono" data-sync-clock style="font-size:12px;color:#F0F0F0;letter-spacing:.06em">--:--:--</span>
|
||
</div>
|
||
<button onClick="{{ openCmd }}" style="cursor:pointer;display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 9px;border-radius:7px;background:#101018;border:1px solid #1E1E2A" style-hover="background:#14141E;border-color:#2A2A38">
|
||
<span class="mono" style="font-size:9.5px;letter-spacing:.1em;color:#707080">SEARCH</span>
|
||
<span class="mono" style="font-size:9px;color:#B8BCC8;background:#06060B;border:1px solid #2A2A38;border-radius:4px;padding:1px 5px;letter-spacing:.02em">⌘K</span>
|
||
</button>
|
||
<div class="mono" style="font-size:11px;color:#707080;letter-spacing:.12em">$44.99<span style="color:#2A2A38">/mo</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="max-width:1240px;margin:0 auto;padding:0 40px">
|
||
|
||
<!-- ============ MASTHEAD ============ -->
|
||
<div style="padding:52px 0 30px">
|
||
<div class="mono" style="font-size:11px;letter-spacing:.34em;color:#00D4A0;margin-bottom:16px">VISUAL SYSTEM · v2</div>
|
||
<h1 style="font-size:44px;font-weight:800;letter-spacing:-.02em;line-height:1.02;max-width:760px">The instrument, not the sportsbook.</h1>
|
||
<p style="margin-top:16px;max-width:560px;color:#B8BCC8;font-size:15px;line-height:1.55">Dense but ranked. Mostly still, then it reacts — a number pulses the instant a line moves, a card breathes when its game goes live. One hero per screen.</p>
|
||
</div>
|
||
|
||
<!-- ============ HERO ASSEMBLY ============ -->
|
||
<div data-screen-label="Hero assembly" style="margin-top:14px">
|
||
<div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px">
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<span class="mono" style="font-size:12px;letter-spacing:.28em;color:#F0F0F0;font-weight:700">TONIGHT'S SLATE</span>
|
||
<span class="mono" style="font-size:10.5px;letter-spacing:.2em;color:#707080">MULTI-LEAGUE · 47 GAMES · 312 PROPS GRADED</span>
|
||
</div>
|
||
<span class="mono" style="font-size:10.5px;letter-spacing:.2em;color:#707080">RANKED BY EDGE</span>
|
||
</div>
|
||
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
|
||
<!-- LEFT: ranked edge board -->
|
||
<div ref="{{ boardRef }}" style="position:relative;border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;overflow:hidden;box-shadow:0 30px 60px -34px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.03)">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:15px 16px 13px">
|
||
<div style="display:flex;align-items:center;gap:9px">
|
||
<span class="mono" style="font-size:10.5px;letter-spacing:.24em;color:#F0F0F0;font-weight:700">EDGE BOARD</span>
|
||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080">14 LIVE</span>
|
||
</div>
|
||
<span class="mono" style="font-size:9px;letter-spacing:.16em;color:#707080">SORTED · EDGE ▼</span>
|
||
</div>
|
||
<div style="height:1px;background:#14141E;transform-origin:left;animation:vy-bootline .6s ease-out both"></div>
|
||
<div style="display:grid;grid-template-columns:20px 1fr auto 58px;align-items:center;gap:12px;padding:9px 16px 7px">
|
||
<span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#4a4a58">#</span>
|
||
<span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#4a4a58">READ</span>
|
||
<span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#4a4a58;justify-self:end">GRD</span>
|
||
<span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#4a4a58;justify-self:end">EDGE</span>
|
||
</div>
|
||
|
||
<div data-row="jokic" style="--o:1;opacity:1;display:grid;grid-template-columns:20px 1fr auto 58px;align-items:center;gap:12px;padding:9px 16px;border-top:1px solid #101018;box-shadow:inset 2px 0 0 rgba(0,212,160,.55);animation:vy-rowin .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.14s">
|
||
<span class="mono" style="font-size:11px;color:#00D4A0;font-weight:700">01</span>
|
||
<div style="min-width:0"><div style="display:flex;align-items:center;gap:8px"><span style="width:7px;height:7px;border-radius:2px;background:#4C8BF5;flex:none"></span><span style="font-size:13px;font-weight:700">Jokić <span style="color:#B8BCC8;font-weight:500">o27.5 PTS</span></span></div><div class="mono" style="font-size:8.5px;letter-spacing:.1em;color:#707080;margin-top:3px;padding-left:15px">NBA · DEN @ MIN</div></div>
|
||
<span class="mono" style="justify-self:end;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:rgba(0,212,160,.14);color:#00D4A0;font-weight:800;font-size:10.5px;border:1px solid rgba(0,212,160,.3)">A+</span>
|
||
<span class="mono" data-react data-fmt="edge" style="justify-self:end;text-align:right;font-size:12.5px;font-weight:700;color:#00D4A0;padding:1px 4px;border-radius:5px">+8.4%</span>
|
||
</div>
|
||
<div data-row="skenes" style="--o:1;opacity:1;display:grid;grid-template-columns:20px 1fr auto 58px;align-items:center;gap:12px;padding:9px 16px;border-top:1px solid #101018;animation:vy-rowin .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.2s">
|
||
<span class="mono" style="font-size:11px;color:#707080;font-weight:600">02</span>
|
||
<div style="min-width:0"><div style="display:flex;align-items:center;gap:8px"><span style="width:7px;height:7px;border-radius:2px;background:#C9A227;flex:none"></span><span style="font-size:13px;font-weight:700">Skenes <span style="color:#B8BCC8;font-weight:500">o6.5 K</span></span></div><div class="mono" style="font-size:8.5px;letter-spacing:.1em;color:#707080;margin-top:3px;padding-left:15px">MLB · PIT @ CHC</div></div>
|
||
<span class="mono" style="justify-self:end;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:rgba(0,212,160,.1);color:#00D4A0;font-weight:800;font-size:10.5px;border:1px solid rgba(0,212,160,.24)">A</span>
|
||
<span class="mono" data-react data-fmt="edge" style="justify-self:end;text-align:right;font-size:12.5px;font-weight:700;color:#00D4A0;padding:1px 4px;border-radius:5px">+6.1%</span>
|
||
</div>
|
||
<div data-row="edwards" style="--o:1;opacity:1;display:grid;grid-template-columns:20px 1fr auto 58px;align-items:center;gap:12px;padding:9px 16px;border-top:1px solid #101018;box-shadow:inset 2px 0 0 rgba(0,212,160,.4);animation:vy-rowin .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.26s">
|
||
<span class="mono" style="font-size:11px;color:#707080;font-weight:600">03</span>
|
||
<div style="min-width:0"><div style="display:flex;align-items:center;gap:8px"><span style="width:7px;height:7px;border-radius:50%;background:#00D4A0;flex:none;animation:vy-livedot 1.5s ease-in-out infinite"></span><span style="font-size:13px;font-weight:700">Edwards <span style="color:#B8BCC8;font-weight:500">o5.5 AST</span></span></div><div class="mono" style="font-size:8.5px;letter-spacing:.1em;color:#00D4A0;margin-top:3px;padding-left:15px">LIVE · Q3 4:12 · DEN @ MIN</div></div>
|
||
<span class="mono" style="justify-self:end;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:rgba(0,212,160,.1);color:#00D4A0;font-weight:800;font-size:10.5px;border:1px solid rgba(0,212,160,.24)">A</span>
|
||
<span class="mono" data-react data-fmt="edge" style="justify-self:end;text-align:right;font-size:12.5px;font-weight:700;color:#00D4A0;padding:1px 4px;border-radius:5px">+5.2%</span>
|
||
</div>
|
||
<div data-row="judge" style="--o:.86;opacity:.86;display:grid;grid-template-columns:20px 1fr auto 58px;align-items:center;gap:12px;padding:9px 16px;border-top:1px solid #101018;animation:vy-rowin .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.32s">
|
||
<span class="mono" style="font-size:11px;color:#707080;font-weight:600">04</span>
|
||
<div style="min-width:0"><div style="display:flex;align-items:center;gap:8px"><span style="width:7px;height:7px;border-radius:2px;background:#1b3a6b;flex:none"></span><span style="font-size:13px;font-weight:600">Judge <span style="color:#B8BCC8;font-weight:500">o1.5 TB</span></span></div><div class="mono" style="font-size:8.5px;letter-spacing:.1em;color:#707080;margin-top:3px;padding-left:15px">MLB · NYY @ BOS</div></div>
|
||
<span class="mono" style="justify-self:end;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:#14141E;color:#F0F0F0;font-weight:800;font-size:10.5px;border:1px solid #1E1E2A">B</span>
|
||
<span class="mono" data-react data-fmt="edge" style="justify-self:end;text-align:right;font-size:12.5px;font-weight:700;color:#00D4A0;padding:1px 4px;border-radius:5px">+3.4%</span>
|
||
</div>
|
||
<div data-row="mcdavid" style="--o:.86;opacity:.86;display:grid;grid-template-columns:20px 1fr auto 58px;align-items:center;gap:12px;padding:9px 16px;border-top:1px solid #101018;animation:vy-rowin .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.38s">
|
||
<span class="mono" style="font-size:11px;color:#707080;font-weight:600">05</span>
|
||
<div style="min-width:0"><div style="display:flex;align-items:center;gap:8px"><span style="width:7px;height:7px;border-radius:2px;background:#FC4C02;flex:none"></span><span style="font-size:13px;font-weight:600">McDavid <span style="color:#B8BCC8;font-weight:500">o1.5 PTS</span></span></div><div class="mono" style="font-size:8.5px;letter-spacing:.1em;color:#707080;margin-top:3px;padding-left:15px">NHL · EDM @ CGY</div></div>
|
||
<span class="mono" style="justify-self:end;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:#14141E;color:#F0F0F0;font-weight:800;font-size:10.5px;border:1px solid #1E1E2A">B</span>
|
||
<span class="mono" data-react data-fmt="edge" style="justify-self:end;text-align:right;font-size:12.5px;font-weight:700;color:#00D4A0;padding:1px 4px;border-radius:5px">+3.0%</span>
|
||
</div>
|
||
<div data-row="mahomes" style="--o:.86;opacity:.86;display:grid;grid-template-columns:20px 1fr auto 58px;align-items:center;gap:12px;padding:9px 16px;border-top:1px solid #101018;animation:vy-rowin .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.44s">
|
||
<span class="mono" style="font-size:11px;color:#707080;font-weight:600">06</span>
|
||
<div style="min-width:0"><div style="display:flex;align-items:center;gap:8px"><span style="width:7px;height:7px;border-radius:2px;background:#E31837;flex:none"></span><span style="font-size:13px;font-weight:600">Mahomes <span style="color:#B8BCC8;font-weight:500">o274.5 PYD</span></span></div><div class="mono" style="font-size:8.5px;letter-spacing:.1em;color:#707080;margin-top:3px;padding-left:15px">NFL · KC @ BUF</div></div>
|
||
<span class="mono" style="justify-self:end;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:#14141E;color:#F0F0F0;font-weight:800;font-size:10.5px;border:1px solid #1E1E2A">B</span>
|
||
<span class="mono" data-react data-fmt="edge" style="justify-self:end;text-align:right;font-size:12.5px;font-weight:700;color:#00D4A0;padding:1px 4px;border-radius:5px">+2.6%</span>
|
||
</div>
|
||
<div data-row="betts" style="--o:.64;opacity:.64;display:grid;grid-template-columns:20px 1fr auto 58px;align-items:center;gap:12px;padding:9px 16px;border-top:1px solid #101018;animation:vy-rowin .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.5s">
|
||
<span class="mono" style="font-size:11px;color:#707080;font-weight:600">07</span>
|
||
<div style="min-width:0"><div style="display:flex;align-items:center;gap:8px"><span style="width:7px;height:7px;border-radius:2px;background:#2f7fd0;flex:none"></span><span style="font-size:13px;font-weight:600">Betts <span style="color:#B8BCC8;font-weight:500">o1.5 TB</span></span></div><div class="mono" style="font-size:8.5px;letter-spacing:.1em;color:#707080;margin-top:3px;padding-left:15px">MLB · LAD @ SD</div></div>
|
||
<span class="mono" style="justify-self:end;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:#14141E;color:#B8BCC8;font-weight:800;font-size:10.5px;border:1px solid #1E1E2A">C</span>
|
||
<span class="mono" data-react data-fmt="edge" style="justify-self:end;text-align:right;font-size:12.5px;font-weight:700;color:#00D4A0;padding:1px 4px;border-radius:5px">+2.1%</span>
|
||
</div>
|
||
<div data-row="brunson" style="--o:.64;opacity:.64;display:grid;grid-template-columns:20px 1fr auto 58px;align-items:center;gap:12px;padding:9px 16px;border-top:1px solid #101018;animation:vy-rowin .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.56s">
|
||
<span class="mono" style="font-size:11px;color:#707080;font-weight:600">08</span>
|
||
<div style="min-width:0"><div style="display:flex;align-items:center;gap:8px"><span style="width:7px;height:7px;border-radius:2px;background:#F58426;flex:none"></span><span style="font-size:13px;font-weight:600">Brunson <span style="color:#B8BCC8;font-weight:500">o24.5 PTS</span></span></div><div class="mono" style="font-size:8.5px;letter-spacing:.1em;color:#707080;margin-top:3px;padding-left:15px">NBA · NYK @ BOS</div></div>
|
||
<span class="mono" style="justify-self:end;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:#14141E;color:#B8BCC8;font-weight:800;font-size:10.5px;border:1px solid #1E1E2A">C</span>
|
||
<span class="mono" data-react data-fmt="edge" style="justify-self:end;text-align:right;font-size:12.5px;font-weight:700;color:#00D4A0;padding:1px 4px;border-radius:5px">+1.4%</span>
|
||
</div>
|
||
<div data-row="curry" style="--o:.48;opacity:.48;display:grid;grid-template-columns:20px 1fr auto 58px;align-items:center;gap:12px;padding:9px 16px;border-top:1px solid #101018;animation:vy-rowin .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.62s">
|
||
<span class="mono" style="font-size:11px;color:#707080;font-weight:600">09</span>
|
||
<div style="min-width:0"><div style="display:flex;align-items:center;gap:8px"><span style="width:7px;height:7px;border-radius:2px;background:#1D428A;flex:none"></span><span style="font-size:13px;font-weight:600">Curry <span style="color:#B8BCC8;font-weight:500">o4.5 3PM</span></span></div><div class="mono" style="font-size:8.5px;letter-spacing:.1em;color:#707080;margin-top:3px;padding-left:15px">NBA · GSW @ SAC</div></div>
|
||
<span class="mono" style="justify-self:end;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:#14141E;color:#707080;font-weight:800;font-size:10.5px;border:1px solid #1E1E2A">C</span>
|
||
<span class="mono" data-react data-fmt="edge" style="justify-self:end;text-align:right;font-size:12.5px;font-weight:700;color:#00D4A0;padding:1px 4px;border-radius:5px">+0.4%</span>
|
||
</div>
|
||
<div data-row="lavine" style="--o:.48;opacity:.48;display:grid;grid-template-columns:20px 1fr auto 58px;align-items:center;gap:12px;padding:9px 16px;border-top:1px solid #101018;animation:vy-rowin .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.68s">
|
||
<span class="mono" style="font-size:11px;color:#707080;font-weight:600">10</span>
|
||
<div style="min-width:0"><div style="display:flex;align-items:center;gap:8px"><span style="width:7px;height:7px;border-radius:2px;background:#CE1141;flex:none"></span><span style="font-size:13px;font-weight:600">LaVine <span style="color:#B8BCC8;font-weight:500">o22.5 PTS</span></span></div><div class="mono" style="font-size:8.5px;letter-spacing:.1em;color:#707080;margin-top:3px;padding-left:15px">NBA · CHI @ MIL</div></div>
|
||
<span class="mono" style="justify-self:end;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:rgba(255,71,87,.1);color:#FF4757;font-weight:800;font-size:10.5px;border:1px solid rgba(255,71,87,.28)">D</span>
|
||
<span class="mono" data-react data-fmt="edge" style="justify-self:end;text-align:right;font-size:12.5px;font-weight:700;color:#FF4757;padding:1px 4px;border-radius:5px">-1.2%</span>
|
||
</div>
|
||
<div style="padding:11px 16px;border-top:1px solid #101018;display:flex;align-items:center;justify-content:space-between">
|
||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#4a4a58">+ 37 GRADED READS BELOW</span>
|
||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080">VIEW ALL ▸</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- RIGHT: hero grade reveal -->
|
||
<div style="position:relative;border-radius:16px;background:linear-gradient(180deg,#12121C,#0C0C12);border:1px solid #2A2A38;overflow:hidden;box-shadow:0 30px 60px -34px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);animation:vy-arrive .7s cubic-bezier(.2,.8,.2,1) both">
|
||
<div class="vy-scanwrap"></div>
|
||
<div style="position:relative;padding:22px 24px">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
|
||
<span class="mono" style="font-size:10.5px;letter-spacing:.28em;color:#707080">DECLASSIFIED · TOP GRADE TONIGHT</span>
|
||
<span class="mono" style="font-size:10px;letter-spacing:.18em;color:#00D4A0">CLV-VERIFIED</span>
|
||
</div>
|
||
|
||
<div style="display:flex;align-items:center;gap:20px">
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px">
|
||
<div class="mono" style="font-size:82px;line-height:.82;font-weight:800;color:#00D4A0;text-shadow:0 0 34px rgba(0,212,160,.5)">A+</div>
|
||
<div class="mono" style="font-size:9.5px;letter-spacing:.24em;color:#707080">TIER</div>
|
||
</div>
|
||
<div style="flex:1;min-width:0">
|
||
<div style="display:flex;align-items:center;gap:10px;margin-bottom:8px">
|
||
<span style="width:38px;height:38px;border-radius:9px;background:linear-gradient(135deg,#0E4DA4,#4C8BF5);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#fff">NJ</span>
|
||
<div>
|
||
<div style="font-weight:700;font-size:16px;line-height:1.1">Nikola Jokić</div>
|
||
<div class="mono" style="font-size:10.5px;color:#707080;letter-spacing:.08em">C · DEN · <span style="color:#B8BCC8">CONFIRMED</span></div>
|
||
</div>
|
||
</div>
|
||
<div style="font-size:15px;font-weight:600;line-height:1.35">Over 27.5 Points</div>
|
||
<div style="display:flex;align-items:center;gap:10px;margin-top:8px">
|
||
<span class="mono" style="font-size:11px;color:#B8BCC8">DK <span style="color:#F0F0F0">-114</span></span>
|
||
<span class="mono" style="font-size:12px;color:#00D4A0">▲</span>
|
||
<span class="mono" style="font-size:10.5px;color:#707080;letter-spacing:.1em">opened 25.5</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- edge + stat context row -->
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:20px;background:#1E1E2A;border:1px solid #1E1E2A;border-radius:10px;overflow:hidden">
|
||
<div style="background:#0E0E14;padding:12px 14px">
|
||
<div class="mono" style="font-size:9.5px;letter-spacing:.18em;color:#707080;margin-bottom:6px">EDGE</div>
|
||
<div class="mono" data-react data-fmt="edge" style="font-size:20px;font-weight:800;color:#00D4A0;padding:1px 4px;border-radius:5px">+8.4%</div>
|
||
</div>
|
||
<div style="background:#0E0E14;padding:12px 14px">
|
||
<div class="mono" style="font-size:9.5px;letter-spacing:.18em;color:#707080;margin-bottom:6px">L10 HIT</div>
|
||
<div class="mono" style="font-size:20px;font-weight:800;color:#F0F0F0">8<span style="color:#707080;font-size:13px">/10</span></div>
|
||
</div>
|
||
<div style="background:#0E0E14;padding:12px 14px">
|
||
<div class="mono" style="font-size:9.5px;letter-spacing:.18em;color:#707080;margin-bottom:6px">PROJ</div>
|
||
<div class="mono" style="font-size:20px;font-weight:800;color:#F0F0F0">30.8</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- last 10 dot strip + legend -->
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-top:16px">
|
||
<div style="display:flex;align-items:center;gap:5px">
|
||
<span style="width:14px;height:14px;border-radius:4px;background:#00D4A0"></span>
|
||
<span style="width:14px;height:14px;border-radius:4px;background:#00D4A0"></span>
|
||
<span style="width:14px;height:14px;border-radius:4px;background:#FF4757"></span>
|
||
<span style="width:14px;height:14px;border-radius:4px;background:#00D4A0"></span>
|
||
<span style="width:14px;height:14px;border-radius:4px;background:#00D4A0"></span>
|
||
<span style="width:14px;height:14px;border-radius:4px;background:#00D4A0"></span>
|
||
<span style="width:14px;height:14px;border-radius:4px;background:#FF4757"></span>
|
||
<span style="width:14px;height:14px;border-radius:4px;background:#00D4A0"></span>
|
||
<span style="width:14px;height:14px;border-radius:4px;background:#00D4A0"></span>
|
||
<span style="width:14px;height:14px;border-radius:4px;background:#00D4A0"></span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<span style="display:flex;align-items:center;gap:5px"><span style="width:9px;height:9px;border-radius:2px;background:#00D4A0"></span><span class="mono" style="font-size:9.5px;color:#707080;letter-spacing:.1em">HIT</span></span>
|
||
<span style="display:flex;align-items:center;gap:5px"><span style="width:9px;height:9px;border-radius:2px;background:#FF4757"></span><span class="mono" style="font-size:9.5px;color:#707080;letter-spacing:.1em">MISS</span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- VYNDR intelligence panel -->
|
||
<div style="margin-top:16px;background:#0A0A10;border:1px solid #14141E;border-radius:10px;padding:14px 16px">
|
||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">
|
||
<span style="width:5px;height:5px;border-radius:50%;background:#00D4A0"></span>
|
||
<span class="mono" style="font-size:9.5px;letter-spacing:.24em;color:#B8BCC8">VYNDR INTELLIGENCE</span>
|
||
</div>
|
||
<p style="font-size:12.5px;line-height:1.5;color:#B8BCC8">MIN plays the 4th-fastest pace vs. centers and concedes <span class="mono" style="color:#F0F0F0">+3.1</span> rebounds to <span style="color:#F0F0F0">CONDUCTOR</span>-type bigs. Line lagged the pace matchup by <span class="mono" style="color:#00D4A0">2.0</span> — the steam confirms it.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ COMPONENT GALLERY ============ -->
|
||
<div data-screen-label="Component gallery" style="margin-top:64px">
|
||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:6px">
|
||
<span class="mono" style="font-size:12px;letter-spacing:.28em;color:#F0F0F0;font-weight:700">COMPONENT SYSTEM</span>
|
||
<span class="mono" style="font-size:10.5px;letter-spacing:.18em;color:#707080">THE PARTS EVERY SURFACE INHERITS</span>
|
||
</div>
|
||
<div style="height:1px;background:#14141E;margin:14px 0 26px"></div>
|
||
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:26px 34px">
|
||
|
||
<!-- STAT BLOCK -->
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#00D4A0;margin-bottom:12px">02 · STAT BLOCK</div>
|
||
<div style="border-radius:14px;background:#0E0E14;border:1px solid #1E1E2A;padding:18px">
|
||
<div style="display:flex;align-items:baseline;justify-content:space-between">
|
||
<span class="mono" style="font-size:10px;letter-spacing:.16em;color:#707080">PTS / GAME · L15</span>
|
||
<span class="mono" style="font-size:10px;letter-spacing:.12em;color:#00D4A0">▲ +2.3</span>
|
||
</div>
|
||
<div style="display:flex;align-items:flex-end;gap:12px;margin-top:8px">
|
||
<span class="mono" style="font-size:46px;font-weight:800;line-height:.9;color:#F0F0F0">28.6</span>
|
||
<div style="padding-bottom:6px">
|
||
<div class="mono" style="font-size:11px;color:#00D4A0;font-weight:700">#4 <span style="color:#707080;font-weight:400">of 82 C</span></div>
|
||
<div class="mono" style="font-size:10px;color:#707080">vs MIN allows 26.1</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:4px;margin-top:14px">
|
||
<span style="width:12px;height:12px;border-radius:3px;background:#00D4A0"></span>
|
||
<span style="width:12px;height:12px;border-radius:3px;background:#00D4A0"></span>
|
||
<span style="width:12px;height:12px;border-radius:3px;background:#FF4757"></span>
|
||
<span style="width:12px;height:12px;border-radius:3px;background:#00D4A0"></span>
|
||
<span style="width:12px;height:12px;border-radius:3px;background:#00D4A0"></span>
|
||
<span style="width:12px;height:12px;border-radius:3px;background:#00D4A0"></span>
|
||
<span style="width:12px;height:12px;border-radius:3px;background:#00D4A0"></span>
|
||
<span style="width:12px;height:12px;border-radius:3px;background:#FF4757"></span>
|
||
<span style="width:12px;height:12px;border-radius:3px;background:#00D4A0"></span>
|
||
<span style="width:12px;height:12px;border-radius:3px;background:#00D4A0"></span>
|
||
<span style="flex:1"></span>
|
||
<span class="mono" style="font-size:9.5px;color:#707080;letter-spacing:.1em">L10</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PLAYER IDENTITY BLOCK -->
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#00D4A0;margin-bottom:12px">03 · PLAYER IDENTITY</div>
|
||
<div style="border-radius:14px;background:#0E0E14;border:1px solid #1E1E2A;padding:18px;display:flex;gap:15px;align-items:center">
|
||
<div style="position:relative;width:64px;height:64px;flex:none">
|
||
<div style="width:64px;height:64px;border-radius:12px;background:linear-gradient(135deg,#0E4DA4,#1a2f5a);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:22px;color:#8fb4ff;border:1px solid rgba(76,139,245,.4)">NJ</div>
|
||
<span style="position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:'JetBrains Mono',monospace;font-size:7.5px;letter-spacing:.14em;color:#4a4a58">HEADSHOT SLOT</span>
|
||
</div>
|
||
<div style="flex:1;min-width:0">
|
||
<div style="display:flex;align-items:center;gap:8px">
|
||
<span style="font-weight:700;font-size:17px">Nikola Jokić</span>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:4px;background:rgba(0,212,160,.12);border:1px solid rgba(0,212,160,.3);color:#00D4A0;font-size:9px;font-weight:700;letter-spacing:.08em">CONFIRMED</span>
|
||
</div>
|
||
<div class="mono" style="font-size:11px;color:#707080;margin-top:3px;letter-spacing:.06em">C · #15 · Denver Nuggets</div>
|
||
<div style="display:flex;align-items:center;gap:8px;margin-top:10px">
|
||
<span style="display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:6px;background:#14141E;border:1px solid #2A2A38">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="16" r="2.6" fill="#6C8CFF"/><path fill="none" stroke="#6C8CFF" stroke-width="2.2" stroke-linecap="round" d="M12 14 6 5M12 14l6-9M12 14v-4"/></svg>
|
||
<span class="mono" style="font-size:10px;letter-spacing:.1em;color:#6C8CFF;font-weight:700">CONDUCTOR</span>
|
||
</span>
|
||
<span style="display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:6px;background:#0B0B11;border:1px solid #1E1E2A;opacity:.7">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path fill="#FF6B4A" fill-opacity=".2" d="M12 2c3.5 4.5 5.5 6 5.5 10a5.5 5.5 0 0 1-11 0C6.5 8 8.5 6.5 12 2Z"/><path fill="none" stroke="#FF6B4A" stroke-width="2.2" stroke-linejoin="round" d="M12 7c2 2.6 3 3.8 3 6a3 3 0 0 1-6 0c0-2.2 1-3.4 3-6Z"/></svg>
|
||
<span class="mono" style="font-size:9.5px;letter-spacing:.1em;color:#B8BCC8;font-weight:600">TORCH</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LINE DISPLAY -->
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#00D4A0;margin-bottom:12px">04 · LINE DISPLAY</div>
|
||
<div style="border-radius:14px;background:#0E0E14;border:1px solid #1E1E2A;overflow:hidden">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid #14141E">
|
||
<span style="font-weight:600;font-size:13px">Jokić o27.5 PTS</span>
|
||
<span class="mono" style="font-size:10px;letter-spacing:.14em;color:#00D4A0">STEAM ▲</span>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:11px 16px;background:rgba(0,212,160,.05);border-left:2px solid #00D4A0">
|
||
<span style="font-weight:700;font-size:12px;color:#F0F0F0;letter-spacing:.03em">DraftKings</span>
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<span class="mono" data-react data-fmt="odds" style="font-size:12px;color:#F0F0F0">-114</span>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:16px;padding:0 6px;border-radius:4px;background:rgba(0,212,160,.14);color:#00D4A0;font-size:9px;font-weight:700;letter-spacing:.08em">BEST</span>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-top:1px solid #14141E">
|
||
<span style="font-weight:600;font-size:12px;color:#B8BCC8">FanDuel</span>
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<span class="mono" data-react data-fmt="odds" style="font-size:12px;color:#B8BCC8">-120</span>
|
||
<span class="mono" style="font-size:11px;color:#FF9F45">▲</span>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-top:1px solid #14141E">
|
||
<span style="font-weight:600;font-size:12px;color:#B8BCC8">BetMGM</span>
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<span class="mono" data-react data-fmt="odds" style="font-size:12px;color:#B8BCC8">-118</span>
|
||
<span class="mono" style="font-size:11px;color:#707080">—</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:11px 16px;background:#0A0A10;border-top:1px solid #14141E">
|
||
<span class="mono" style="font-size:10px;letter-spacing:.14em;color:#707080">CLV vs CLOSE</span>
|
||
<span class="mono" data-react data-fmt="edge" style="font-size:12px;font-weight:700;color:#00D4A0;padding:1px 4px;border-radius:5px">+2.4%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- GRADE REVEAL (compact variant) -->
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#00D4A0;margin-bottom:12px">05 · GRADE REVEAL · tiers</div>
|
||
<div style="border-radius:14px;background:#0E0E14;border:1px solid #1E1E2A;padding:18px">
|
||
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:10px">
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:7px">
|
||
<div class="mono" style="font-size:30px;font-weight:800;color:#00D4A0;text-shadow:0 0 18px rgba(0,212,160,.45)">A</div>
|
||
<div class="mono" style="font-size:9px;letter-spacing:.14em;color:#00D4A0">EDGE</div>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:7px">
|
||
<div class="mono" style="font-size:30px;font-weight:800;color:#F0F0F0">B</div>
|
||
<div class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080">LEAN</div>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:7px">
|
||
<div class="mono" style="font-size:30px;font-weight:800;color:#B8BCC8">C</div>
|
||
<div class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080">PASS</div>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:7px">
|
||
<div class="mono" style="font-size:30px;font-weight:800;color:#707080">D</div>
|
||
<div class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080">FADE</div>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:7px">
|
||
<div class="mono" style="font-size:30px;font-weight:800;color:#FF4757">F</div>
|
||
<div class="mono" style="font-size:9px;letter-spacing:.14em;color:#FF4757">AVOID</div>
|
||
</div>
|
||
</div>
|
||
<div style="height:1px;background:#14141E;margin:16px 0"></div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between">
|
||
<span class="mono" style="font-size:10px;color:#707080;letter-spacing:.1em">GLOW RESERVED FOR A-TIER ONLY</span>
|
||
<span class="mono" style="font-size:10px;color:#B8BCC8">EDGE COLORED BY SIGN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ ARCHETYPE GLYPHS ============ -->
|
||
<div data-screen-label="Archetype glyphs" style="margin-top:64px">
|
||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:6px">
|
||
<span class="mono" style="font-size:12px;letter-spacing:.28em;color:#F0F0F0;font-weight:700">ARCHETYPE GLYPHS</span>
|
||
<span class="mono" style="font-size:10.5px;letter-spacing:.18em;color:#707080">FULL SYSTEM · 74 UNIQUE MARKS · 8 SPORTS</span>
|
||
</div>
|
||
<div style="height:1px;background:#14141E;margin:14px 0 20px"></div>
|
||
|
||
<p style="max-width:660px;color:#B8BCC8;font-size:13px;line-height:1.55;margin-bottom:6px">One grid, one weight, one construction logic — filled base plus weighted stroke, so each mark reads as an emblem before the word. Colors deduped <span style="color:#F0F0F0">off signal-green</span> so <span class="mono" style="color:#00D4A0">#00D4A0</span> stays uniquely "edge."</p>
|
||
<p style="max-width:660px;color:#707080;font-size:11.5px;line-height:1.5;margin-bottom:22px"><span class="mono" style="color:#B8BCC8">↺</span> marks names reused across sports — the vocabulary is a language: a <span class="mono" style="color:#B8BCC8">WALL</span> is the immovable last line in every sport.</p>
|
||
|
||
<!-- rendered glyph grid -->
|
||
<div ref="{{ glyphGridRef }}" style="display:grid;grid-template-columns:repeat(6,1fr);gap:12px"></div>
|
||
|
||
<!-- BLEND EXAMPLE -->
|
||
<div style="margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center">
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#00D4A0;margin-bottom:12px">THE BLEND · MULTI-ARCHETYPE FINGERPRINT</div>
|
||
<p style="color:#B8BCC8;font-size:13px;line-height:1.55">Players aren't one archetype — they carry a weighted blend. The mark system <span style="color:#F0F0F0">combines</span>: primary dominant + supporting muted. This is the moat nobody copies.</p>
|
||
</div>
|
||
<div style="border-radius:14px;background:#0E0E14;border:1px solid #1E1E2A;padding:20px">
|
||
<div style="display:flex;align-items:center;gap:9px;margin-bottom:16px">
|
||
<span style="width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,#8B1A1A,#d34a3a);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;color:#fff">TB</span>
|
||
<div>
|
||
<div style="font-weight:700;font-size:14px">Brandon Lowe</div>
|
||
<div class="mono" style="font-size:10px;color:#707080">2B · Tampa Bay Rays</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:16px">
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:8px">
|
||
<div style="width:56px;height:56px;border-radius:12px;background:rgba(255,159,69,.1);border:1.5px solid rgba(255,159,69,.5);display:flex;align-items:center;justify-content:center">
|
||
<svg width="30" height="30" viewBox="0 0 24 24" fill="none"><path fill="#FF9F45" fill-opacity=".2" d="M12 3l7 9h-4v8H9v-8H5z"/><path fill="none" stroke="#FF9F45" stroke-width="2" stroke-linejoin="round" d="M12 3l7 9h-4v8H9v-8H5z"/></svg>
|
||
</div>
|
||
<div class="mono" style="font-size:9px;letter-spacing:.12em;color:#FF9F45;font-weight:700">BOMBER</div>
|
||
</div>
|
||
<div style="flex:1">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:5px">
|
||
<span class="mono" style="font-size:10px;color:#FF9F45;letter-spacing:.1em">PRIMARY · BOMBER</span>
|
||
<span class="mono" style="font-size:11px;color:#F0F0F0;font-weight:700">54%</span>
|
||
</div>
|
||
<div style="height:6px;border-radius:3px;background:#14141E;overflow:hidden;margin-bottom:14px"><div style="width:54%;height:100%;background:#FF9F45"></div></div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:5px">
|
||
<span class="mono" style="font-size:10px;color:#B8BCC8;letter-spacing:.1em">SUPPORTING · DRIVER</span>
|
||
<span class="mono" style="font-size:11px;color:#B8BCC8;font-weight:700">46%</span>
|
||
</div>
|
||
<div style="height:6px;border-radius:3px;background:#14141E;overflow:hidden"><div style="width:46%;height:100%;background:#5A7D9A"></div></div>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.72">
|
||
<div style="width:44px;height:44px;border-radius:10px;background:#0B0B11;border:1px solid #1E1E2A;display:flex;align-items:center;justify-content:center">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill="none" stroke="#5A7D9A" stroke-width="2.4" stroke-linecap="round" d="M5 19 17 7"/><circle cx="19" cy="5" r="2.2" fill="#5A7D9A"/><path fill="none" stroke="#5A7D9A" stroke-width="1.8" stroke-linecap="round" d="M4 14a10 10 0 0 0 6 6"/></svg>
|
||
</div>
|
||
<div class="mono" style="font-size:8.5px;letter-spacing:.1em;color:#B8BCC8">DRIVER</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ STREAKS BILLBOARD ============ -->
|
||
<div data-screen-label="Streaks billboard" style="margin-top:64px">
|
||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:6px">
|
||
<span class="mono" style="font-size:12px;letter-spacing:.28em;color:#F0F0F0;font-weight:700">STREAKS</span>
|
||
<span class="mono" style="font-size:10.5px;letter-spacing:.18em;color:#707080">A BLOOMBERG ALERT, NOT A LOG LINE</span>
|
||
</div>
|
||
<div style="height:1px;background:#14141E;margin:14px 0 20px"></div>
|
||
|
||
<div style="display:flex;flex-direction:column;gap:10px">
|
||
<!-- streak row 1 -->
|
||
<div style="display:flex;align-items:center;gap:20px;border-radius:14px;background:#0E0E14;border:1px solid #1E1E2A;padding:16px 22px">
|
||
<div style="position:relative;width:52px;height:52px;flex:none;border-radius:11px;background:linear-gradient(135deg,#552583,#8b5cc7);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:15px;color:#FDB927">LA</div>
|
||
<div style="flex:1;min-width:0">
|
||
<div style="display:flex;align-items:center;gap:9px">
|
||
<span style="font-weight:700;font-size:16px">Luka Dončić</span>
|
||
<span style="display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:6px;background:#14141E;border:1px solid #2A2A38">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path fill="#FF6B4A" fill-opacity=".2" d="M12 2c3.5 4.5 5.5 6 5.5 10a5.5 5.5 0 0 1-11 0C6.5 8 8.5 6.5 12 2Z"/><path fill="none" stroke="#FF6B4A" stroke-width="2.2" stroke-linejoin="round" d="M12 7c2 2.6 3 3.8 3 6a3 3 0 0 1-6 0c0-2.2 1-3.4 3-6Z"/></svg>
|
||
<span class="mono" style="font-size:9px;letter-spacing:.1em;color:#FF6B4A;font-weight:700">TORCH</span>
|
||
</span>
|
||
</div>
|
||
<div class="mono" style="font-size:11px;color:#707080;margin-top:4px;letter-spacing:.04em">o29.5 PTS · built vs bottom-10 defenses</div>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:flex-end;gap:2px">
|
||
<div style="display:flex;align-items:baseline;gap:6px">
|
||
<span class="mono" style="font-size:38px;font-weight:800;line-height:.9;color:#00D4A0;text-shadow:0 0 22px rgba(0,212,160,.4)">11</span>
|
||
<span class="mono" style="font-size:12px;color:#00D4A0;letter-spacing:.1em">STRAIGHT</span>
|
||
</div>
|
||
<span class="mono" style="font-size:10px;color:#707080;letter-spacing:.1em">HIT RATE 100% · L11</span>
|
||
</div>
|
||
</div>
|
||
<!-- streak row 2 (amber caution) -->
|
||
<div style="display:flex;align-items:center;gap:20px;border-radius:14px;background:#0E0E14;border:1px solid #1E1E2A;padding:16px 22px">
|
||
<div style="width:52px;height:52px;flex:none;border-radius:11px;background:linear-gradient(135deg,#134A8E,#3f7fd0);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:15px;color:#fff">TOR</div>
|
||
<div style="flex:1;min-width:0">
|
||
<div style="display:flex;align-items:center;gap:9px">
|
||
<span style="font-weight:700;font-size:16px">Vladimir Guerrero Jr.</span>
|
||
<span style="display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:6px;background:#14141E;border:1px solid #2A2A38">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path fill="#FF9F45" fill-opacity=".22" d="M12 3l7 9h-4v8H9v-8H5z"/><path fill="none" stroke="#FF9F45" stroke-width="2" stroke-linejoin="round" d="M12 3l7 9h-4v8H9v-8H5z"/></svg>
|
||
<span class="mono" style="font-size:9px;letter-spacing:.1em;color:#FF9F45;font-weight:700">BOMBER</span>
|
||
</span>
|
||
</div>
|
||
<div class="mono" style="font-size:11px;color:#707080;margin-top:4px;letter-spacing:.04em">o1.5 TB · <span style="color:#FFB347">correlated w/ team total</span></div>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:flex-end;gap:2px">
|
||
<div style="display:flex;align-items:baseline;gap:6px">
|
||
<span class="mono" style="font-size:38px;font-weight:800;line-height:.9;color:#FFB347">7</span>
|
||
<span class="mono" style="font-size:12px;color:#FFB347;letter-spacing:.1em">STRAIGHT</span>
|
||
</div>
|
||
<span class="mono" style="font-size:10px;color:#707080;letter-spacing:.1em">CAUTION · CORRELATION FLAG</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ============ /u PUBLIC PROFILE ============ -->
|
||
<div data-screen-label="/u public profile" style="margin-top:64px">
|
||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:6px">
|
||
<span class="mono" style="font-size:12px;letter-spacing:.28em;color:#F0F0F0;font-weight:700">PUBLIC RECORD</span>
|
||
<span class="mono" style="font-size:10.5px;letter-spacing:.18em;color:#707080">vyndr.io/u/edgehunter · THE VERIFIED WEAPON</span>
|
||
</div>
|
||
<div style="height:1px;background:#14141E;margin:14px 0 22px"></div>
|
||
|
||
<div style="border-radius:18px;background:linear-gradient(180deg,#0F0F17,#0A0A10);border:1px solid #2A2A38;overflow:hidden;box-shadow:0 30px 70px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04)">
|
||
<!-- profile header -->
|
||
<div style="display:flex;align-items:center;gap:20px;padding:26px 28px;border-bottom:1px solid #14141E">
|
||
<div style="width:74px;height:74px;flex:none;border-radius:16px;background:linear-gradient(135deg,#00D4A0,#0a5f4c);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:24px;color:#06060B">EH</div>
|
||
<div style="flex:1;min-width:0">
|
||
<div style="display:flex;align-items:center;gap:10px">
|
||
<span style="font-weight:800;font-size:22px;letter-spacing:-.01em">@edgehunter</span>
|
||
<span class="mono" style="display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px;border-radius:6px;background:rgba(0,212,160,.12);border:1px solid rgba(0,212,160,.35);color:#00D4A0;font-size:9.5px;font-weight:700;letter-spacing:.1em"><span style="width:5px;height:5px;border-radius:50%;background:#00D4A0"></span>CLV-VERIFIED</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:14px;margin-top:8px">
|
||
<span style="display:inline-flex;align-items:center;gap:6px">
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" style="color:#FF6B4A"><path fill="currentColor" fill-opacity=".2" d="M12 2c3.5 4.5 5.5 6 5.5 10a5.5 5.5 0 0 1-11 0C6.5 8 8.5 6.5 12 2Z"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round" d="M12 7c2 2.6 3 3.8 3 6a3 3 0 0 1-6 0c0-2.2 1-3.4 3-6Z"/></svg>
|
||
<span class="mono" style="font-size:11px;letter-spacing:.1em;color:#FF6B4A;font-weight:700">TORCH-HEAVY BETTOR</span>
|
||
</span>
|
||
<span class="mono" style="font-size:11px;color:#707080;letter-spacing:.05em">412 graded · since Mar '24</span>
|
||
</div>
|
||
</div>
|
||
<button style="cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:9px;background:#00D4A0;border:none;color:#06060B;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:11px;letter-spacing:.08em">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path stroke="#06060B" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M4 12v7h16v-7M12 3v12M8 7l4-4 4 4"/></svg>
|
||
SHARE CARD
|
||
</button>
|
||
</div>
|
||
|
||
<!-- stat rail -->
|
||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#14141E;border-bottom:1px solid #14141E">
|
||
<div style="background:#0C0C12;padding:18px 22px">
|
||
<div class="mono" style="font-size:9.5px;letter-spacing:.18em;color:#707080;margin-bottom:8px">HIT RATE</div>
|
||
<div class="mono" style="font-size:32px;font-weight:800;color:#00D4A0;line-height:.9">64.2<span style="font-size:16px">%</span></div>
|
||
</div>
|
||
<div style="background:#0C0C12;padding:18px 22px">
|
||
<div class="mono" style="font-size:9.5px;letter-spacing:.18em;color:#707080;margin-bottom:8px">UNITS</div>
|
||
<div class="mono" style="font-size:32px;font-weight:800;color:#00D4A0;line-height:.9">+38.6<span style="font-size:16px;color:#707080">u</span></div>
|
||
</div>
|
||
<div style="background:#0C0C12;padding:18px 22px">
|
||
<div class="mono" style="font-size:9.5px;letter-spacing:.18em;color:#707080;margin-bottom:8px">ROI</div>
|
||
<div class="mono" style="font-size:32px;font-weight:800;color:#F0F0F0;line-height:.9">+11.4<span style="font-size:16px;color:#707080">%</span></div>
|
||
</div>
|
||
<div style="background:#0C0C12;padding:18px 22px">
|
||
<div class="mono" style="font-size:9.5px;letter-spacing:.18em;color:#707080;margin-bottom:8px">AVG CLV</div>
|
||
<div class="mono" style="font-size:32px;font-weight:800;color:#F0F0F0;line-height:.9">+3.1<span style="font-size:16px;color:#707080">%</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- grade history -->
|
||
<div style="padding:22px 28px;border-bottom:1px solid #14141E">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px">
|
||
<span class="mono" style="font-size:10px;letter-spacing:.2em;color:#B8BCC8">GRADE HISTORY · LAST 24</span>
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<span style="display:flex;align-items:center;gap:5px"><span style="width:9px;height:9px;border-radius:2px;background:#00D4A0"></span><span class="mono" style="font-size:9px;color:#707080;letter-spacing:.1em">HIT</span></span>
|
||
<span style="display:flex;align-items:center;gap:5px"><span style="width:9px;height:9px;border-radius:2px;background:#FF4757"></span><span class="mono" style="font-size:9px;color:#707080;letter-spacing:.1em">MISS</span></span>
|
||
</div>
|
||
</div>
|
||
<div ref="{{ gradeHistoryRef }}" style="display:grid;grid-template-columns:repeat(12,1fr);gap:7px"></div>
|
||
</div>
|
||
|
||
<!-- fingerprint + log -->
|
||
<div style="display:grid;grid-template-columns:1fr 1.2fr;gap:1px;background:#14141E">
|
||
<div style="background:#0A0A10;padding:22px 26px">
|
||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#B8BCC8;margin-bottom:16px">ARCHETYPE FINGERPRINT</div>
|
||
<div style="display:flex;flex-direction:column;gap:14px">
|
||
<div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
|
||
<span style="display:inline-flex;align-items:center;gap:7px"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" style="color:#FF6B4A"><path fill="currentColor" fill-opacity=".2" d="M12 2c3.5 4.5 5.5 6 5.5 10a5.5 5.5 0 0 1-11 0C6.5 8 8.5 6.5 12 2Z"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round" d="M12 7c2 2.6 3 3.8 3 6a3 3 0 0 1-6 0c0-2.2 1-3.4 3-6Z"/></svg><span class="mono" style="font-size:11px;color:#FF6B4A;font-weight:700;letter-spacing:.06em">TORCH</span></span>
|
||
<span class="mono" style="font-size:11px;color:#F0F0F0;font-weight:700">32%</span>
|
||
</div>
|
||
<div style="height:6px;border-radius:3px;background:#14141E;overflow:hidden"><div style="width:32%;height:100%;background:#FF6B4A"></div></div>
|
||
</div>
|
||
<div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
|
||
<span style="display:inline-flex;align-items:center;gap:7px"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" style="color:#FF9F45"><path fill="currentColor" fill-opacity=".2" d="M12 3l7 9h-4v8H9v-8H5z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M12 3l7 9h-4v8H9v-8H5z"/></svg><span class="mono" style="font-size:11px;color:#FF9F45;font-weight:700;letter-spacing:.06em">BOMBER</span></span>
|
||
<span class="mono" style="font-size:11px;color:#F0F0F0;font-weight:700">24%</span>
|
||
</div>
|
||
<div style="height:6px;border-radius:3px;background:#14141E;overflow:hidden"><div style="width:24%;height:100%;background:#FF9F45"></div></div>
|
||
</div>
|
||
<div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
|
||
<span style="display:inline-flex;align-items:center;gap:7px"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" style="color:#7C5CFF"><path fill="currentColor" fill-opacity=".18" d="M12 3 4 20h16z"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round" d="M12 3 4 20h16zM8.5 14h7"/></svg><span class="mono" style="font-size:11px;color:#7C5CFF;font-weight:700;letter-spacing:.06em">ALPHA</span></span>
|
||
<span class="mono" style="font-size:11px;color:#F0F0F0;font-weight:700">18%</span>
|
||
</div>
|
||
<div style="height:6px;border-radius:3px;background:#14141E;overflow:hidden"><div style="width:18%;height:100%;background:#7C5CFF"></div></div>
|
||
</div>
|
||
<div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
|
||
<span style="display:inline-flex;align-items:center;gap:7px"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" style="color:#6C8CFF"><circle cx="12" cy="16" r="2.6" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M12 14 6 5M12 14l6-9M12 14v-4"/></svg><span class="mono" style="font-size:11px;color:#6C8CFF;font-weight:700;letter-spacing:.06em">CONDUCTOR</span></span>
|
||
<span class="mono" style="font-size:11px;color:#F0F0F0;font-weight:700">14%</span>
|
||
</div>
|
||
<div style="height:6px;border-radius:3px;background:#14141E;overflow:hidden"><div style="width:14%;height:100%;background:#6C8CFF"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background:#0A0A10;padding:22px 26px">
|
||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#B8BCC8;margin-bottom:16px">RECENT SETTLED</div>
|
||
<div style="display:flex;flex-direction:column;gap:2px">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #12121A">
|
||
<div style="min-width:0"><div style="font-size:12.5px;font-weight:600">Jokić o27.5 PTS</div><div class="mono" style="font-size:9.5px;color:#707080">DEN · settled 30 · CLV +2.4%</div></div>
|
||
<div style="display:flex;align-items:center;gap:10px"><span class="mono" style="display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:rgba(0,212,160,.14);color:#00D4A0;font-weight:800;font-size:10px">A</span><span class="mono" style="font-size:10px;color:#00D4A0;letter-spacing:.1em;font-weight:700">HIT</span></div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #12121A">
|
||
<div style="min-width:0"><div style="font-size:12.5px;font-weight:600">Judge o1.5 TB</div><div class="mono" style="font-size:9.5px;color:#707080">NYY · settled 2 · CLV +1.1%</div></div>
|
||
<div style="display:flex;align-items:center;gap:10px"><span class="mono" style="display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:#14141E;color:#B8BCC8;font-weight:800;font-size:10px">B</span><span class="mono" style="font-size:10px;color:#00D4A0;letter-spacing:.1em;font-weight:700">HIT</span></div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #12121A">
|
||
<div style="min-width:0"><div style="font-size:12.5px;font-weight:600">Edwards o5.5 REB</div><div class="mono" style="font-size:9.5px;color:#707080">MIN · settled 4 · CLV −0.8%</div></div>
|
||
<div style="display:flex;align-items:center;gap:10px"><span class="mono" style="display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:#14141E;color:#707080;font-weight:800;font-size:10px">C</span><span class="mono" style="font-size:10px;color:#FF4757;letter-spacing:.1em;font-weight:700">MISS</span></div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:9px 0">
|
||
<div style="min-width:0"><div style="font-size:12.5px;font-weight:600">Skenes o6.5 K</div><div class="mono" style="font-size:9.5px;color:#707080">PIT · settled 8 · CLV +4.0%</div></div>
|
||
<div style="display:flex;align-items:center;gap:10px"><span class="mono" style="display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:rgba(0,212,160,.14);color:#00D4A0;font-weight:800;font-size:10px">A+</span><span class="mono" style="font-size:10px;color:#00D4A0;letter-spacing:.1em;font-weight:700">HIT</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ SHARE CARDS ============ -->
|
||
<div data-screen-label="Share cards" style="margin-top:64px">
|
||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:6px">
|
||
<span class="mono" style="font-size:12px;letter-spacing:.28em;color:#F0F0F0;font-weight:700">SHARE CARDS</span>
|
||
<span class="mono" style="font-size:10.5px;letter-spacing:.18em;color:#707080">STOP-THE-SCROLL · TIMELINE IS CUSTOMER #1</span>
|
||
</div>
|
||
<div style="height:1px;background:#14141E;margin:14px 0 26px"></div>
|
||
|
||
<div style="display:flex;flex-wrap:wrap;gap:34px;align-items:flex-start;justify-content:center">
|
||
|
||
<!-- PORTRAIT 1080x1350 -->
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.16em;color:#707080;margin-bottom:10px;text-align:center">THE SETTLE · 1080 × 1350</div>
|
||
<div style="width:360px;height:450px;border-radius:14px;overflow:hidden;border:1px solid #2A2A38;box-shadow:0 24px 60px -24px rgba(0,0,0,.8)">
|
||
<div style="width:1080px;height:1350px;transform:scale(.3333);transform-origin:top left;background:radial-gradient(700px 500px at 80% 0%,rgba(0,212,160,.09),transparent 60%),#06060B;color:#F0F0F0;padding:72px 68px;display:flex;flex-direction:column">
|
||
<div style="display:flex;align-items:center;justify-content:space-between">
|
||
<span class="mono" style="font-size:34px;font-weight:800;letter-spacing:.3em">VYND<span style="color:#00D4A0">R</span></span>
|
||
<span class="mono" style="font-size:22px;letter-spacing:.1em;color:#707080">JUL 11</span>
|
||
</div>
|
||
<div style="margin-top:56px">
|
||
<div class="mono" style="font-size:26px;letter-spacing:.3em;color:#707080">DAILY SETTLE</div>
|
||
<div style="display:flex;align-items:flex-end;gap:28px;margin-top:14px">
|
||
<span class="mono" style="font-size:180px;font-weight:800;line-height:.82;color:#00D4A0;text-shadow:0 0 60px rgba(0,212,160,.45)">+5.4u</span>
|
||
</div>
|
||
<div class="mono" style="font-size:34px;margin-top:16px;color:#B8BCC8;letter-spacing:.05em">7–2 · <span style="color:#F0F0F0">78% HIT</span> · 9 GRADED</div>
|
||
</div>
|
||
<div style="margin-top:56px;display:flex;flex-direction:column;gap:0;flex:1">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:24px 0;border-top:1px solid #1E1E2A">
|
||
<span style="font-size:34px;font-weight:600">Jokić o27.5 PTS</span>
|
||
<span style="display:flex;align-items:center;gap:20px"><span class="mono" style="padding:6px 16px;border-radius:9px;background:rgba(0,212,160,.14);color:#00D4A0;font-weight:800;font-size:30px">A+</span><span class="mono" style="font-size:28px;color:#00D4A0;font-weight:700;width:120px;text-align:right">HIT</span></span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:24px 0;border-top:1px solid #1E1E2A">
|
||
<span style="font-size:34px;font-weight:600">Skenes o6.5 K</span>
|
||
<span style="display:flex;align-items:center;gap:20px"><span class="mono" style="padding:6px 16px;border-radius:9px;background:rgba(0,212,160,.14);color:#00D4A0;font-weight:800;font-size:30px">A</span><span class="mono" style="font-size:28px;color:#00D4A0;font-weight:700;width:120px;text-align:right">HIT</span></span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:24px 0;border-top:1px solid #1E1E2A">
|
||
<span style="font-size:34px;font-weight:600;color:#B8BCC8">Edwards o5.5 REB</span>
|
||
<span style="display:flex;align-items:center;gap:20px"><span class="mono" style="padding:6px 16px;border-radius:9px;background:#14141E;color:#707080;font-weight:800;font-size:30px">C</span><span class="mono" style="font-size:28px;color:#FF4757;font-weight:700;width:120px;text-align:right">MISS</span></span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:24px 0;border-top:1px solid #1E1E2A">
|
||
<span style="font-size:34px;font-weight:600">Judge o1.5 TB</span>
|
||
<span style="display:flex;align-items:center;gap:20px"><span class="mono" style="padding:6px 16px;border-radius:9px;background:#14141E;color:#B8BCC8;font-weight:800;font-size:30px">B</span><span class="mono" style="font-size:28px;color:#00D4A0;font-weight:700;width:120px;text-align:right">HIT</span></span>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding-top:34px;border-top:1px solid #2A2A38">
|
||
<span class="mono" style="font-size:30px;font-weight:700;color:#F0F0F0">@edgehunter</span>
|
||
<span class="mono" style="display:inline-flex;align-items:center;gap:12px;font-size:24px;letter-spacing:.12em;color:#00D4A0"><span style="width:12px;height:12px;border-radius:50%;background:#00D4A0"></span>CLV-VERIFIED</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- OG 1200x630 -->
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.16em;color:#707080;margin-bottom:10px;text-align:center">GRADE REVEAL · 1200 × 630 OG</div>
|
||
<div style="width:540px;height:283px;border-radius:14px;overflow:hidden;border:1px solid #2A2A38;box-shadow:0 24px 60px -24px rgba(0,0,0,.8)">
|
||
<div style="width:1200px;height:630px;transform:scale(.45);transform-origin:top left;background:radial-gradient(700px 500px at 78% 0%,rgba(0,212,160,.1),transparent 60%),#06060B;color:#F0F0F0;padding:56px 60px;display:flex;flex-direction:column">
|
||
<div style="display:flex;align-items:center;justify-content:space-between">
|
||
<span class="mono" style="font-size:30px;font-weight:800;letter-spacing:.3em">VYND<span style="color:#00D4A0">R</span></span>
|
||
<span class="mono" style="display:inline-flex;align-items:center;gap:12px;font-size:22px;letter-spacing:.14em;color:#00D4A0"><span style="width:11px;height:11px;border-radius:50%;background:#00D4A0"></span>CLV-VERIFIED</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:48px;margin-top:auto;margin-bottom:auto">
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:10px">
|
||
<span class="mono" style="font-size:170px;line-height:.8;font-weight:800;color:#00D4A0;text-shadow:0 0 66px rgba(0,212,160,.5)">A+</span>
|
||
<span class="mono" style="font-size:22px;letter-spacing:.24em;color:#707080">TIER</span>
|
||
</div>
|
||
<div style="flex:1;border-left:1px solid #1E1E2A;padding-left:44px">
|
||
<div style="font-size:52px;font-weight:800;letter-spacing:-.01em;line-height:1.05">Nikola Jokić</div>
|
||
<div style="font-size:40px;font-weight:600;margin-top:12px;color:#F0F0F0">Over 27.5 Points</div>
|
||
<div style="display:flex;align-items:center;gap:40px;margin-top:34px">
|
||
<div><div class="mono" style="font-size:20px;letter-spacing:.16em;color:#707080">EDGE</div><div class="mono" style="font-size:52px;font-weight:800;color:#00D4A0;line-height:1">+8.4%</div></div>
|
||
<div><div class="mono" style="font-size:20px;letter-spacing:.16em;color:#707080">L10</div><div class="mono" style="font-size:52px;font-weight:800;color:#F0F0F0;line-height:1">8/10</div></div>
|
||
<div><div class="mono" style="font-size:20px;letter-spacing:.16em;color:#707080">DK</div><div class="mono" style="font-size:52px;font-weight:800;color:#F0F0F0;line-height:1">−114</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mono" style="font-size:24px;letter-spacing:.06em;color:#707080">vyndr.io/u/edgehunter</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ COMBAT HEAD-TO-HEAD ============ -->
|
||
<div data-screen-label="Combat head-to-head" style="margin-top:64px">
|
||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:6px">
|
||
<span class="mono" style="font-size:12px;letter-spacing:.28em;color:#F0F0F0;font-weight:700">STYLE MATCHUP</span>
|
||
<span class="mono" style="font-size:10.5px;letter-spacing:.18em;color:#707080">COMBAT · STYLES MAKE FIGHTS · FIGHT-WEEK WEAPON</span>
|
||
</div>
|
||
<div style="height:1px;background:#14141E;margin:14px 0 22px"></div>
|
||
|
||
<div style="border-radius:18px;background:linear-gradient(180deg,#0F0F17,#0A0A10);border:1px solid #2A2A38;overflow:hidden;box-shadow:0 30px 70px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04)">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid #14141E">
|
||
<span class="mono" style="font-size:10px;letter-spacing:.22em;color:#707080">UFC 312 · LIGHTWEIGHT · 5 RND MAIN</span>
|
||
<span class="mono" style="font-size:10px;letter-spacing:.18em;color:#00D4A0">CLV-VERIFIED READ</span>
|
||
</div>
|
||
|
||
<div style="display:grid;grid-template-columns:1fr 132px 1fr">
|
||
<!-- FIGHTER A -->
|
||
<div style="padding:22px 22px 22px 24px">
|
||
<div style="display:flex;align-items:center;gap:13px;margin-bottom:16px">
|
||
<div style="width:52px;height:52px;flex:none;border-radius:12px;background:linear-gradient(135deg,#7C6CC0,#332a5a);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:16px;color:#d8ccff">IM</div>
|
||
<div><div style="font-weight:700;font-size:16px">Islam M.</div><div class="mono" style="font-size:10px;color:#707080;margin-top:2px">26–1 · ORTHODOX · 70" REACH</div></div>
|
||
</div>
|
||
<div style="margin-bottom:8px"><div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:5px"><span style="display:inline-flex;align-items:center;gap:6px"><svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path fill="none" stroke="#7C6CC0" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M6 4v9M6 13l-3-3M6 13l3-3M18 20v-9M18 11l-3 3M18 11l3 3"/><path stroke="#7C6CC0" stroke-width="2.2" stroke-linecap="round" d="M9 12h6"/></svg><span class="mono" style="font-size:10px;color:#7C6CC0;font-weight:700;letter-spacing:.06em">GRAPPLER</span></span><span class="mono" style="font-size:11px;color:#F0F0F0;font-weight:700">80%</span></div><div style="height:6px;border-radius:3px;background:#14141E;overflow:hidden"><div style="width:80%;height:100%;background:#7C6CC0"></div></div></div>
|
||
<div style="margin-bottom:16px"><div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:5px"><span style="display:inline-flex;align-items:center;gap:6px"><svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path fill="none" stroke="#FF7A4A" stroke-width="2.4" stroke-linecap="round" d="M3 12h8"/><path fill="none" stroke="#FF7A4A" stroke-width="2.1" stroke-linejoin="round" d="M12 8h7v8h-7z"/></svg><span class="mono" style="font-size:9.5px;color:#B8BCC8;font-weight:600;letter-spacing:.06em">STRIKER</span></span><span class="mono" style="font-size:10px;color:#B8BCC8">30%</span></div><div style="height:5px;border-radius:3px;background:#14141E;overflow:hidden"><div style="width:30%;height:100%;background:#5A5A6A"></div></div></div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:6px">
|
||
<span class="mono" style="display:inline-flex;align-items:center;gap:5px;font-size:9px;letter-spacing:.04em;color:#B8BCC8;background:#0B0B11;border:1px solid #1E1E2A;border-radius:6px;padding:4px 8px"><span style="color:#00D4A0">✓</span>COMBAT SAMBO</span>
|
||
<span class="mono" style="display:inline-flex;align-items:center;gap:5px;font-size:9px;letter-spacing:.04em;color:#B8BCC8;background:#0B0B11;border:1px solid #1E1E2A;border-radius:6px;padding:4px 8px"><span style="color:#00D4A0">✓</span>DAGESTAN WRESTLING</span>
|
||
<span class="mono" style="display:inline-flex;align-items:center;gap:5px;font-size:9px;letter-spacing:.04em;color:#B8BCC8;background:#0B0B11;border:1px solid #1E1E2A;border-radius:6px;padding:4px 8px"><span style="color:#00D4A0">✓</span>BJJ BROWN</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CENTER VERDICT -->
|
||
<div style="position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:22px 8px;border-left:1px solid #14141E;border-right:1px solid #14141E;background:#08080D">
|
||
<div class="mono" style="font-size:9px;letter-spacing:.24em;color:#707080">VERDICT</div>
|
||
<div class="mono" style="font-size:26px;font-weight:800;color:#F0F0F0;letter-spacing:.06em">VS</div>
|
||
<div class="mono" style="display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:6px;background:rgba(124,108,192,.14);color:#b3a6e8;font-weight:700;font-size:10px;border:1px solid rgba(124,108,192,.35)">GRAPPLER EDGE</div>
|
||
</div>
|
||
|
||
<!-- FIGHTER B -->
|
||
<div style="padding:22px 24px 22px 22px;text-align:right">
|
||
<div style="display:flex;align-items:center;gap:13px;margin-bottom:16px;flex-direction:row-reverse">
|
||
<div style="width:52px;height:52px;flex:none;border-radius:12px;background:linear-gradient(135deg,#FF6B4A,#5a281c);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:16px;color:#ffd4c6">AV</div>
|
||
<div><div style="font-weight:700;font-size:16px">Alex V.</div><div class="mono" style="font-size:10px;color:#707080;margin-top:2px">26–3 · ORTHODOX · 71.5" REACH</div></div>
|
||
</div>
|
||
<div style="margin-bottom:8px"><div style="display:flex;align-items:center;justify-content:space-between;flex-direction:row-reverse;margin-bottom:5px"><span style="display:inline-flex;align-items:center;gap:6px;flex-direction:row-reverse"><svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path fill="none" stroke="#FF6B4A" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M3 8h9M3 12h9M3 16h9M9 6l4 6-4 6"/><path stroke="#FF6B4A" stroke-width="2.6" stroke-linecap="round" d="M18 4v16"/></svg><span class="mono" style="font-size:10px;color:#FF6B4A;font-weight:700;letter-spacing:.06em">PRESSURE</span></span><span class="mono" style="font-size:11px;color:#F0F0F0;font-weight:700">72%</span></div><div style="height:6px;border-radius:3px;background:#14141E;overflow:hidden;transform:scaleX(-1)"><div style="width:72%;height:100%;background:#FF6B4A"></div></div></div>
|
||
<div style="margin-bottom:16px"><div style="display:flex;align-items:center;justify-content:space-between;flex-direction:row-reverse;margin-bottom:5px"><span style="display:inline-flex;align-items:center;gap:6px;flex-direction:row-reverse"><svg width="13" height="13" viewBox="0 0 24 24" fill="none"><circle cx="15" cy="9" r="5" stroke="#7AA6D8" stroke-width="2"/><path stroke="#7AA6D8" stroke-width="2" stroke-linecap="round" d="M15 6v6M12 9h6M3 20l6.5-6.5"/></svg><span class="mono" style="font-size:9.5px;color:#B8BCC8;font-weight:600;letter-spacing:.06em">TECHNICIAN</span></span><span class="mono" style="font-size:10px;color:#B8BCC8">44%</span></div><div style="height:5px;border-radius:3px;background:#14141E;overflow:hidden;transform:scaleX(-1)"><div style="width:44%;height:100%;background:#5A5A6A"></div></div></div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end">
|
||
<span class="mono" style="display:inline-flex;align-items:center;gap:5px;font-size:9px;letter-spacing:.04em;color:#B8BCC8;background:#0B0B11;border:1px solid #1E1E2A;border-radius:6px;padding:4px 8px"><span style="color:#00D4A0">✓</span>KICKBOXING</span>
|
||
<span class="mono" style="display:inline-flex;align-items:center;gap:5px;font-size:9px;letter-spacing:.04em;color:#B8BCC8;background:#0B0B11;border:1px solid #1E1E2A;border-radius:6px;padding:4px 8px"><span style="color:#00D4A0">✓</span>ELITE TDD 94%</span>
|
||
<span class="mono" style="display:inline-flex;align-items:center;gap:5px;font-size:9px;letter-spacing:.04em;color:#707080;background:#0B0B11;border:1px dashed #2A2A38;border-radius:6px;padding:4px 8px"><span style="color:#FFB347">?</span>WRESTLING BASE</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- the read + one-analysis-many-grades -->
|
||
<div style="padding:16px 20px;border-top:1px solid #14141E;background:#08080D">
|
||
<p style="font-size:13.5px;line-height:1.5;color:#F0F0F0;margin-bottom:4px">Takedown defense is the whole fight. <span style="color:#B8BCC8">Islam's chain-wrestling beats a pure striker — but Volk's 94% TDD is the one variable that flips it.</span></p>
|
||
<div style="display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 11px;border-radius:8px;background:rgba(255,179,71,.07);border:1px solid rgba(255,179,71,.2)">
|
||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#FFB347;font-weight:700">RECENT-FORM OVERRIDE</span>
|
||
<span class="mono" style="font-size:10.5px;color:#B8BCC8;letter-spacing:.02em">Volk stuffed 11 of 12 TDs last 3 fights → pushes this toward DECISION, not submission.</span>
|
||
</div>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:#14141E;border-top:1px solid #14141E">
|
||
<div style="background:#0A0A10;padding:13px 14px"><div class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080;margin-bottom:6px">MONEYLINE</div><div style="display:flex;align-items:center;gap:7px"><span class="mono" style="display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:5px;background:rgba(0,212,160,.12);color:#00D4A0;font-weight:800;font-size:11px;border:1px solid rgba(0,212,160,.28)">A-</span><span class="mono" style="font-size:11px;color:#B8BCC8">Islam -230</span></div></div>
|
||
<div style="background:#0A0A10;padding:13px 14px"><div class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080;margin-bottom:6px">DECISION</div><div style="display:flex;align-items:center;gap:7px"><span class="mono" style="display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:5px;background:rgba(0,212,160,.12);color:#00D4A0;font-weight:800;font-size:11px;border:1px solid rgba(0,212,160,.28)">A</span><span class="mono" style="font-size:11px;color:#B8BCC8">+120</span></div></div>
|
||
<div style="background:#0A0A10;padding:13px 14px"><div class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080;margin-bottom:6px">SUBMISSION</div><div style="display:flex;align-items:center;gap:7px"><span class="mono" style="display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:5px;background:#14141E;color:#F0F0F0;font-weight:800;font-size:11px;border:1px solid #1E1E2A">B+</span><span class="mono" style="font-size:11px;color:#B8BCC8">+280</span></div></div>
|
||
<div style="background:#0A0A10;padding:13px 14px"><div class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080;margin-bottom:6px">KO / TKO</div><div style="display:flex;align-items:center;gap:7px"><span class="mono" style="display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:5px;background:#14141E;color:#707080;font-weight:800;font-size:11px;border:1px solid #1E1E2A">C</span><span class="mono" style="font-size:11px;color:#B8BCC8">+650</span></div></div>
|
||
<div style="background:#0A0A10;padding:13px 14px"><div class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080;margin-bottom:6px">O 2.5 RND</div><div style="display:flex;align-items:center;gap:7px"><span class="mono" style="display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:5px;background:rgba(0,212,160,.12);color:#00D4A0;font-weight:800;font-size:11px;border:1px solid rgba(0,212,160,.28)">A-</span><span class="mono" style="font-size:11px;color:#B8BCC8">-140</span></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ LIVE GRADE-SHIFT + PRICING + EMPTY ============ -->
|
||
<div data-screen-label="Live + system states" style="margin-top:64px">
|
||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:6px">
|
||
<span class="mono" style="font-size:12px;letter-spacing:.28em;color:#F0F0F0;font-weight:700">SYSTEM SURFACES</span>
|
||
<span class="mono" style="font-size:10.5px;letter-spacing:.18em;color:#707080">LIVE GRADE-SHIFT · THE $44.99 TIER · EMPTY STATE</span>
|
||
</div>
|
||
<div style="height:1px;background:#14141E;margin:14px 0 22px"></div>
|
||
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start">
|
||
|
||
<!-- LIVE GRADE-SHIFT -->
|
||
<div style="position:relative;border-radius:16px;background:#0E0E14;border:1px solid #1E1E2A;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid #14141E">
|
||
<div style="display:flex;align-items:center;gap:9px"><span style="width:7px;height:7px;border-radius:50%;background:#00D4A0;animation:vy-livedot 1.5s ease-in-out infinite"></span><span class="mono" style="font-size:10px;letter-spacing:.2em;color:#00D4A0;font-weight:700">LIVE GRADE</span></div>
|
||
<span class="mono" style="font-size:10px;letter-spacing:.14em;color:#707080">Q3 4:12 · DEN @ MIN</span>
|
||
</div>
|
||
<div style="padding:20px 18px">
|
||
<div style="display:flex;align-items:center;gap:18px">
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:5px">
|
||
<div class="mono" data-lg-grade style="font-size:64px;line-height:.82;font-weight:800;color:#00D4A0;text-shadow:0 0 30px rgba(0,212,160,.45)">A+</div>
|
||
<div class="mono" style="font-size:9px;letter-spacing:.2em;color:#707080">LIVE TIER</div>
|
||
</div>
|
||
<div style="flex:1;min-width:0">
|
||
<div style="font-weight:700;font-size:15px">Edwards o5.5 AST</div>
|
||
<div class="mono" data-lg-note style="font-size:10.5px;color:#00D4A0;margin-top:6px;letter-spacing:.04em">GRADE FIRMED ▲ 04:12</div>
|
||
<div style="display:flex;align-items:center;gap:14px;margin-top:12px">
|
||
<span class="mono" style="font-size:10px;color:#B8BCC8">PACE <span style="color:#00D4A0">▲</span></span>
|
||
<span class="mono" style="font-size:10px;color:#B8BCC8">USAGE <span style="color:#00D4A0">▲</span></span>
|
||
<span class="mono" style="font-size:10px;color:#B8BCC8">MATCHUP <span style="color:#00D4A0">✓</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- grade over game-time -->
|
||
<div style="margin-top:18px">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px"><span class="mono" style="font-size:9px;letter-spacing:.16em;color:#707080">GRADE · BY GAME CLOCK</span><span class="mono" data-lg-edge data-react data-fmt="edge" style="font-size:11px;font-weight:700;color:#00D4A0;padding:1px 4px;border-radius:5px">+6.8%</span></div>
|
||
<div style="display:flex;align-items:flex-end;gap:5px;height:40px">
|
||
<div style="flex:1;height:44%;border-radius:3px 3px 0 0;background:#2A2A38"></div>
|
||
<div style="flex:1;height:52%;border-radius:3px 3px 0 0;background:#3A3A48"></div>
|
||
<div style="flex:1;height:48%;border-radius:3px 3px 0 0;background:#2A2A38"></div>
|
||
<div style="flex:1;height:64%;border-radius:3px 3px 0 0;background:rgba(0,212,160,.5)"></div>
|
||
<div style="flex:1;height:72%;border-radius:3px 3px 0 0;background:rgba(0,212,160,.6)"></div>
|
||
<div style="flex:1;height:70%;border-radius:3px 3px 0 0;background:rgba(0,212,160,.55)"></div>
|
||
<div style="flex:1;height:88%;border-radius:3px 3px 0 0;background:rgba(0,212,160,.8)"></div>
|
||
<div style="flex:1;height:100%;border-radius:3px 3px 0 0;background:#00D4A0"></div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-top:6px"><span class="mono" style="font-size:8.5px;color:#4a4a58">TIP</span><span class="mono" style="font-size:8.5px;color:#4a4a58">NOW</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PRICING TIER (the $44.99 done right) -->
|
||
<div style="position:relative;border-radius:16px;background:linear-gradient(180deg,#0F1512,#0A0A10);border:1px solid rgba(0,212,160,.4);overflow:hidden;box-shadow:0 30px 60px -34px rgba(0,212,160,.25),inset 0 1px 0 rgba(0,212,160,.12)">
|
||
<div class="vy-scanwrap"></div>
|
||
<div style="position:relative;padding:22px 22px 20px">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
|
||
<span class="mono" style="font-size:10px;letter-spacing:.24em;color:#00D4A0;font-weight:700">VYNDR PRO</span>
|
||
<span style="display:inline-flex;border:1px solid #2A2A38;border-radius:6px;overflow:hidden"><span class="mono" style="font-size:8.5px;letter-spacing:.12em;color:#707080;padding:3px 9px">FREE</span><span class="mono" style="font-size:8.5px;letter-spacing:.12em;color:#06060B;background:#00D4A0;padding:3px 9px;font-weight:700">PRO</span></span>
|
||
</div>
|
||
<div style="display:flex;align-items:flex-end;gap:8px">
|
||
<span class="mono" style="font-size:52px;font-weight:800;line-height:.85;color:#F0F0F0">$44.99</span>
|
||
<span class="mono" style="font-size:13px;color:#707080;padding-bottom:6px">/mo</span>
|
||
</div>
|
||
<p style="font-size:12.5px;line-height:1.5;color:#B8BCC8;margin-top:12px">Priced like a subscription. Performs like a $1M desk. <span style="color:#707080">Free gives you live scores + tonight's top 3 grades — Pro unlocks the whole board.</span></p>
|
||
<div style="display:flex;flex-direction:column;gap:9px;margin-top:16px">
|
||
<span style="display:flex;align-items:center;gap:9px;font-size:12.5px;color:#F0F0F0"><span style="color:#00D4A0;font-weight:700">✓</span> Every graded read, every league, every night</span>
|
||
<span style="display:flex;align-items:center;gap:9px;font-size:12.5px;color:#F0F0F0"><span style="color:#00D4A0;font-weight:700">✓</span> CLV-verified public record + share cards</span>
|
||
<span style="display:flex;align-items:center;gap:9px;font-size:12.5px;color:#F0F0F0"><span style="color:#00D4A0;font-weight:700">✓</span> Live grade-shift + steam alerts</span>
|
||
<span style="display:flex;align-items:center;gap:9px;font-size:12.5px;color:#F0F0F0"><span style="color:#00D4A0;font-weight:700">✓</span> Archetype fingerprints + combat style engine</span>
|
||
</div>
|
||
<button style="cursor:pointer;width:100%;margin-top:20px;height:44px;border-radius:11px;background:#00D4A0;border:none;color:#06060B;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:12px;letter-spacing:.1em">UPGRADE TO PRO</button>
|
||
<div class="mono" style="font-size:9.5px;letter-spacing:.06em;color:#707080;text-align:center;margin-top:11px">cancel anytime · no trial — the free tier is the trial</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- EMPTY / ERROR STATE (404-quality bar) -->
|
||
<div style="margin-top:16px;position:relative;border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;overflow:hidden">
|
||
<div class="vy-scanwrap"></div>
|
||
<div style="position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 24px">
|
||
<div class="vy-glitch mono" style="font-size:13px;letter-spacing:.4em;color:#FF4757;font-weight:800;animation:vy-glitch 5s steps(1) infinite">TRANSMISSION QUIET</div>
|
||
<div style="font-size:19px;font-weight:700;margin-top:16px;letter-spacing:-.01em">No reads cleared the A-tier threshold yet.</div>
|
||
<p style="max-width:420px;color:#B8BCC8;font-size:13px;line-height:1.55;margin-top:8px">The engine graded 312 props tonight — none hit the edge floor. That's the system protecting you, not a bug. Grades refresh as lines move.</p>
|
||
<div style="display:flex;align-items:center;gap:12px;margin-top:22px">
|
||
<button style="cursor:pointer;height:38px;padding:0 18px;border-radius:10px;background:#00D4A0;border:none;color:#06060B;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:11px;letter-spacing:.08em">VIEW ALL GRADES</button>
|
||
<button style="cursor:pointer;height:38px;padding:0 16px;border-radius:10px;background:transparent;border:1px solid #2A2A38;color:#B8BCC8;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:11px;letter-spacing:.08em">NOTIFY WHEN LIVE</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ PITCHER IDENTITY LAYER ============ -->
|
||
<div data-screen-label="Pitcher identity" style="margin-top:64px">
|
||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:6px">
|
||
<span class="mono" style="font-size:12px;letter-spacing:.28em;color:#F0F0F0;font-weight:700">PITCHER IDENTITY</span>
|
||
<span class="mono" style="font-size:10.5px;letter-spacing:.18em;color:#707080">THE ARSENAL READ · ONE IDENTITY → MANY PROPS</span>
|
||
</div>
|
||
<div style="height:1px;background:#14141E;margin:14px 0 22px"></div>
|
||
|
||
<div style="border-radius:18px;background:linear-gradient(180deg,#0F0F17,#0A0A10);border:1px solid #2A2A38;overflow:hidden;box-shadow:0 30px 70px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04)">
|
||
<div style="display:grid;grid-template-columns:1fr 1.35fr">
|
||
<!-- identity -->
|
||
<div style="padding:22px 24px;border-right:1px solid #14141E">
|
||
<div style="display:flex;align-items:center;gap:14px;margin-bottom:18px">
|
||
<div style="width:58px;height:58px;flex:none;border-radius:13px;background:linear-gradient(135deg,#2b2b2b,#c9a227);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:15px;color:#fff">PIT</div>
|
||
<div>
|
||
<div style="display:flex;align-items:center;gap:8px"><span style="font-weight:700;font-size:17px">Paul Skenes</span><span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:4px;background:rgba(0,212,160,.12);border:1px solid rgba(0,212,160,.3);color:#00D4A0;font-size:9px;font-weight:700;letter-spacing:.06em">CONFIRMED</span></div>
|
||
<div class="mono" style="font-size:10.5px;color:#707080;margin-top:3px;letter-spacing:.05em">RHP · #30 · Pittsburgh · vs CHC</div>
|
||
</div>
|
||
</div>
|
||
<div class="mono" style="font-size:9px;letter-spacing:.2em;color:#707080;margin-bottom:10px">IDENTITY BLEND</div>
|
||
<div style="display:flex;align-items:center;gap:10px;margin-bottom:10px">
|
||
<span style="display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:7px;background:rgba(124,92,255,.12);border:1px solid rgba(124,92,255,.4)"><svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path fill="#7C5CFF" fill-opacity=".16" d="M12 3 4 20h16z"/><path fill="none" stroke="#7C5CFF" stroke-width="2.2" stroke-linejoin="round" d="M12 3 4 20h16zM8.5 14h7"/></svg><span class="mono" style="font-size:10.5px;color:#7C5CFF;font-weight:700;letter-spacing:.06em">ALPHA</span></span>
|
||
<span style="display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:7px;background:#0B0B11;border:1px solid #1E1E2A;opacity:.85"><svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path fill="none" stroke="#FF7A5A" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" d="M7 4v16M7 12l9-8M9 13l7 7"/></svg><span class="mono" style="font-size:9.5px;color:#FF7A5A;font-weight:600;letter-spacing:.06em">PUNCHOUT</span></span>
|
||
</div>
|
||
<div style="margin-top:16px;padding:12px 14px;border-radius:10px;background:#08080D;border:1px solid #14141E">
|
||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px"><span style="width:5px;height:5px;border-radius:50%;background:#7C5CFF"></span><span class="mono" style="font-size:9px;letter-spacing:.2em;color:#B8BCC8">APPROACH · TUNNELER</span></div>
|
||
<p style="font-size:11.5px;line-height:1.5;color:#B8BCC8">Splinker + slider tunnel off the 99mph 4-seam — hitters commit early and miss. Whiffs cluster the 3rd time through.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- arsenal -->
|
||
<div style="padding:22px 24px">
|
||
<div style="display:grid;grid-template-columns:1fr 56px 46px 52px;gap:8px;padding-bottom:9px;border-bottom:1px solid #14141E">
|
||
<span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#4a4a58">PITCH</span>
|
||
<span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#4a4a58;text-align:right">VELO</span>
|
||
<span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#4a4a58;text-align:right">USE</span>
|
||
<span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#4a4a58;text-align:right">WHIFF</span>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 56px 46px 52px;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #101018"><span style="display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:2px;background:#FF7A5A"></span><span style="font-size:12.5px;font-weight:600">4-Seam</span></span><span class="mono" style="font-size:12px;color:#F0F0F0;text-align:right">99.1</span><span class="mono" style="font-size:11px;color:#B8BCC8;text-align:right">32%</span><span class="mono" style="font-size:11px;color:#B8BCC8;text-align:right">26%</span></div>
|
||
<div style="display:grid;grid-template-columns:1fr 56px 46px 52px;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #101018"><span style="display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:2px;background:#E0803D"></span><span style="font-size:12.5px;font-weight:600">Splinker</span></span><span class="mono" style="font-size:12px;color:#F0F0F0;text-align:right">94.2</span><span class="mono" style="font-size:11px;color:#B8BCC8;text-align:right">24%</span><span class="mono" style="font-size:12px;color:#00D4A0;font-weight:700;text-align:right">38%</span></div>
|
||
<div style="display:grid;grid-template-columns:1fr 56px 46px 52px;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #101018"><span style="display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:2px;background:#7C5CFF"></span><span style="font-size:12.5px;font-weight:600">Slider</span></span><span class="mono" style="font-size:12px;color:#F0F0F0;text-align:right">87.0</span><span class="mono" style="font-size:11px;color:#B8BCC8;text-align:right">22%</span><span class="mono" style="font-size:12px;color:#00D4A0;font-weight:700;text-align:right">41%</span></div>
|
||
<div style="display:grid;grid-template-columns:1fr 56px 46px 52px;gap:8px;align-items:center;padding:8px 0"><span style="display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:2px;background:#6C9CB0"></span><span style="font-size:12.5px;font-weight:600;color:#B8BCC8">Curve</span></span><span class="mono" style="font-size:12px;color:#B8BCC8;text-align:right">82.5</span><span class="mono" style="font-size:11px;color:#707080;text-align:right">14%</span><span class="mono" style="font-size:11px;color:#B8BCC8;text-align:right">33%</span></div>
|
||
</div>
|
||
</div>
|
||
<!-- one identity many props -->
|
||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#14141E;border-top:1px solid #14141E">
|
||
<div style="background:#0A0A10;padding:13px 15px"><div class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080;margin-bottom:6px">STRIKEOUTS O6.5</div><div style="display:flex;align-items:center;gap:7px"><span class="mono" style="display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:5px;background:rgba(0,212,160,.12);color:#00D4A0;font-weight:800;font-size:11px;border:1px solid rgba(0,212,160,.28)">A</span><span class="mono" data-react data-fmt="edge" style="font-size:11px;color:#00D4A0;font-weight:700;padding:1px 4px;border-radius:5px">+6.1%</span></div></div>
|
||
<div style="background:#0A0A10;padding:13px 15px"><div class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080;margin-bottom:6px">OUTS O16.5</div><div style="display:flex;align-items:center;gap:7px"><span class="mono" style="display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:5px;background:rgba(0,212,160,.1);color:#00D4A0;font-weight:800;font-size:11px;border:1px solid rgba(0,212,160,.24)">A-</span><span class="mono" style="font-size:11px;color:#00D4A0;font-weight:700">+4.2%</span></div></div>
|
||
<div style="background:#0A0A10;padding:13px 15px"><div class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080;margin-bottom:6px">EARNED RUNS U2.5</div><div style="display:flex;align-items:center;gap:7px"><span class="mono" style="display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:5px;background:#14141E;color:#F0F0F0;font-weight:800;font-size:11px;border:1px solid #1E1E2A">B+</span><span class="mono" style="font-size:11px;color:#00D4A0;font-weight:700">+2.4%</span></div></div>
|
||
<div style="background:#0A0A10;padding:13px 15px"><div class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080;margin-bottom:6px">1ST-INNING K</div><div style="display:flex;align-items:center;gap:7px"><span class="mono" style="display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:5px;background:#14141E;color:#B8BCC8;font-weight:800;font-size:11px;border:1px solid #1E1E2A">B</span><span class="mono" style="font-size:11px;color:#00D4A0;font-weight:700">+1.6%</span></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ CORRELATION / PARLAY BUILDER ============ -->
|
||
<div data-screen-label="Correlation builder" style="margin-top:64px">
|
||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:6px">
|
||
<span class="mono" style="font-size:12px;letter-spacing:.28em;color:#F0F0F0;font-weight:700">CORRELATION BUILDER</span>
|
||
<span class="mono" style="font-size:10.5px;letter-spacing:.18em;color:#707080">PARLAY MATH · THE STAKE-DOWN SIGNAL · TAP TO BUILD</span>
|
||
</div>
|
||
<div style="height:1px;background:#14141E;margin:14px 0 22px"></div>
|
||
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start">
|
||
<!-- legs -->
|
||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)">
|
||
<div style="padding:14px 16px;border-bottom:1px solid #14141E"><span class="mono" style="font-size:10px;letter-spacing:.22em;color:#F0F0F0;font-weight:700">TONIGHT'S A/B READS</span><span class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080;margin-left:8px">TAP TO ADD</span></div>
|
||
<div ref="{{ parlayLegsRef }}">
|
||
<div data-leg="jokic" data-dec="2.05" data-game="DENMIN" data-grade="A+" data-label="Jokić o27.5 PTS" data-sub="NBA · DEN @ MIN" data-odds="+105" style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid #101018;cursor:pointer">
|
||
<span data-check style="width:18px;height:18px;flex:none;border-radius:5px;border:1.5px solid #2A2A38;display:flex;align-items:center;justify-content:center"></span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:600">Jokić <span style="color:#B8BCC8;font-weight:500">o27.5 PTS</span></div><div class="mono" style="font-size:8.5px;letter-spacing:.1em;color:#707080;margin-top:2px">NBA · DEN @ MIN</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:rgba(0,212,160,.14);color:#00D4A0;font-weight:800;font-size:10px;border:1px solid rgba(0,212,160,.3)">A+</span>
|
||
<span class="mono" style="font-size:11.5px;color:#F0F0F0;width:42px;text-align:right">+105</span>
|
||
</div>
|
||
<div data-leg="edwards" data-dec="2.30" data-game="DENMIN" data-grade="A" data-label="Edwards o5.5 AST" data-sub="NBA · DEN @ MIN" data-odds="+130" style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid #101018;cursor:pointer">
|
||
<span data-check style="width:18px;height:18px;flex:none;border-radius:5px;border:1.5px solid #2A2A38;display:flex;align-items:center;justify-content:center"></span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:600">Edwards <span style="color:#B8BCC8;font-weight:500">o5.5 AST</span></div><div class="mono" style="font-size:8.5px;letter-spacing:.1em;color:#707080;margin-top:2px">NBA · DEN @ MIN</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:rgba(0,212,160,.1);color:#00D4A0;font-weight:800;font-size:10px;border:1px solid rgba(0,212,160,.24)">A</span>
|
||
<span class="mono" style="font-size:11.5px;color:#F0F0F0;width:42px;text-align:right">+130</span>
|
||
</div>
|
||
<div data-leg="skenes" data-dec="1.83" data-game="PITCHC" data-grade="A" data-label="Skenes o6.5 K" data-sub="MLB · PIT @ CHC" data-odds="-120" style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid #101018;cursor:pointer">
|
||
<span data-check style="width:18px;height:18px;flex:none;border-radius:5px;border:1.5px solid #2A2A38;display:flex;align-items:center;justify-content:center"></span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:600">Skenes <span style="color:#B8BCC8;font-weight:500">o6.5 K</span></div><div class="mono" style="font-size:8.5px;letter-spacing:.1em;color:#707080;margin-top:2px">MLB · PIT @ CHC</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:rgba(0,212,160,.1);color:#00D4A0;font-weight:800;font-size:10px;border:1px solid rgba(0,212,160,.24)">A</span>
|
||
<span class="mono" style="font-size:11.5px;color:#F0F0F0;width:42px;text-align:right">-120</span>
|
||
</div>
|
||
<div data-leg="judge" data-dec="2.40" data-game="NYYBOS" data-grade="B" data-label="Judge o1.5 TB" data-sub="MLB · NYY @ BOS" data-odds="+140" style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid #101018;cursor:pointer">
|
||
<span data-check style="width:18px;height:18px;flex:none;border-radius:5px;border:1.5px solid #2A2A38;display:flex;align-items:center;justify-content:center"></span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:600">Judge <span style="color:#B8BCC8;font-weight:500">o1.5 TB</span></div><div class="mono" style="font-size:8.5px;letter-spacing:.1em;color:#707080;margin-top:2px">MLB · NYY @ BOS</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:#14141E;color:#F0F0F0;font-weight:800;font-size:10px;border:1px solid #1E1E2A">B</span>
|
||
<span class="mono" style="font-size:11.5px;color:#F0F0F0;width:42px;text-align:right">+140</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- slip -->
|
||
<div style="border-radius:16px;background:linear-gradient(180deg,#0F0F17,#0A0A10);border:1px solid #2A2A38;overflow:hidden;box-shadow:0 30px 60px -34px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04)">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #14141E">
|
||
<span class="mono" style="font-size:10px;letter-spacing:.22em;color:#F0F0F0;font-weight:700">PARLAY SLIP</span>
|
||
<span class="mono" data-parlay-count style="font-size:10px;letter-spacing:.14em;color:#707080">2 LEGS</span>
|
||
</div>
|
||
<div data-parlay-legs style="padding:8px 10px;min-height:96px"></div>
|
||
<div data-parlay-warn style="display:none;margin:0 12px 12px;padding:11px 13px;border-radius:10px;background:rgba(255,179,71,.08);border:1px solid rgba(255,179,71,.28)">
|
||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:5px"><svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path fill="none" stroke="#FFB347" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" d="M12 3 2 20h20L12 3zM12 10v4M12 17v.5"/></svg><span class="mono" style="font-size:9px;letter-spacing:.16em;color:#FFB347;font-weight:700">SAME-GAME CORRELATION</span></div>
|
||
<span class="mono" data-parlay-warntext style="font-size:10.5px;line-height:1.45;color:#B8BCC8;letter-spacing:.02em"></span>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#14141E;border-top:1px solid #14141E">
|
||
<div style="background:#0A0A10;padding:13px 15px"><div class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080;margin-bottom:6px">COMBINED</div><div class="mono" data-parlay-odds style="font-size:19px;font-weight:800;color:#F0F0F0">+320</div></div>
|
||
<div style="background:#0A0A10;padding:13px 15px"><div class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080;margin-bottom:6px">GRADE</div><div class="mono" data-parlay-grade style="font-size:19px;font-weight:800;color:#FFB347">B</div></div>
|
||
<div style="background:#0A0A10;padding:13px 15px"><div class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080;margin-bottom:6px">VYNDR STAKE</div><div class="mono" data-parlay-stake style="font-size:19px;font-weight:800;color:#FFB347">0.4u</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div data-screen-label="footer" style="margin-top:64px">
|
||
<div style="padding-top:22px;border-top:1px solid #14141E;display:flex;align-items:center;justify-content:space-between">
|
||
<span class="mono" style="font-size:10px;letter-spacing:.16em;color:#707080">COMPONENTS · 74 GLYPHS · EDGE BOARD · /u · SHARE · COMBAT · LIVE GRADE · PRO · STATES</span>
|
||
<span class="mono" style="font-size:10px;letter-spacing:.16em;color:#00D4A0">VYNDR VISUAL SYSTEM · v2</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</x-dc>
|
||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":1240,"height":2400},"reactionsLive":{"editor":"boolean","default":true,"tsType":"boolean","section":"Behavior"},"reactionSpeed":{"editor":"range","default":2300,"min":800,"max":5000,"step":100,"unit":"ms","tsType":"number","section":"Behavior"}}">
|
||
class Component extends DCLogic {
|
||
constructor(props){
|
||
super(props);
|
||
this.rootNode = null;
|
||
this.glyphGrid = null;
|
||
this.state = { cmdOpen:false };
|
||
}
|
||
|
||
renderVals(){
|
||
return {
|
||
rootRef: (n)=>{ this.rootNode = n; },
|
||
glyphGridRef: (n)=>{ this.glyphGrid = n; },
|
||
gradeHistoryRef: (n)=>{ this.gradeHistory = n; },
|
||
boardRef: (n)=>{ this.board = n; },
|
||
parlayLegsRef: (n)=>{ this.parlayLegs = n; },
|
||
cmdOpen: this.state.cmdOpen,
|
||
openCmd: ()=>{ this.openCmdBar(); },
|
||
closeCmd: ()=>{ this.setState({cmdOpen:false}); },
|
||
stopCmd: (e)=>{ e.stopPropagation(); },
|
||
onCmdInput: (e)=>{ this.filterCmd(e.target.value); }
|
||
};
|
||
}
|
||
|
||
glyphDefs(){
|
||
// Master mark library. Colors deduped OFF signal-green #00D4A0 (and off reserved amber #FFB347 / red #FF4757).
|
||
// Each mark: duotone — filled base + weighted stroke, currentColor, 24 grid.
|
||
return {
|
||
TORCH:{c:'#FF6B4A',g:'<path fill="currentColor" fill-opacity=".16" d="M12 2c3.5 4.5 5.5 6 5.5 10a5.5 5.5 0 0 1-11 0C6.5 8 8.5 6.5 12 2Z"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round" d="M12 7c2 2.6 3 3.8 3 6a3 3 0 0 1-6 0c0-2.2 1-3.4 3-6Z"/>'},
|
||
CONDUCTOR:{c:'#6C8CFF',g:'<circle cx="12" cy="16" r="2.6" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M12 14 6 5M12 14l6-9M12 14v-4"/>'},
|
||
ARCHITECT:{c:'#B07CFF',g:'<path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round" d="M12 3 4 19h16z"/><path fill="currentColor" fill-opacity=".18" d="m12 9 4 8H8z"/>'},
|
||
LINK:{c:'#7AA6FF',g:'<path fill="none" stroke="currentColor" stroke-width="2.3" d="M9.5 9a4 4 0 1 0 0 6"/><path fill="none" stroke="currentColor" stroke-width="2.3" d="M14.5 9a4 4 0 1 1 0 6"/><path stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M9 12h6"/>'},
|
||
FORTRESS:{c:'#4C6FA5',g:'<path fill="currentColor" fill-opacity=".16" d="M5 5h3v2h2V5h4v2h2V5h3v6c0 5-4 7-7 8-3-1-7-3-7-8V5Z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M5 5h3v2h2V5h4v2h2V5h3v6c0 5-4 7-7 8-3-1-7-3-7-8V5Z"/>'},
|
||
PISTON:{c:'#E87B4A',g:'<path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M8 4h8v16H8zM12 8v8M9.5 10.5 12 8l2.5 2.5M9.5 13.5 12 16l2.5-2.5"/>'},
|
||
ARTILLERY:{c:'#C98A5A',g:'<path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M3 20C7 8 14 6 20 6"/><path fill="currentColor" d="M20 6l-4 .3 2 3.4z"/><path stroke="currentColor" stroke-width="1.8" stroke-linecap="round" d="M19 4v-2M22 7h-2"/>'},
|
||
SENTINEL:{c:'#4FA0C4',g:'<path fill="currentColor" fill-opacity=".16" d="M12 3 5 6v5c0 5 3.5 7.5 7 9 3.5-1.5 7-4 7-9V6z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M12 3 5 6v5c0 5 3.5 7.5 7 9 3.5-1.5 7-4 7-9V6z"/><circle cx="12" cy="11" r="2" fill="currentColor"/>'},
|
||
IGNITER:{c:'#FF8A3D',g:'<path fill="currentColor" d="M12 2c.6 4.8 2.4 6.6 7.2 7.2C14.4 9.8 12.6 11.6 12 16.4 11.4 11.6 9.6 9.8 4.8 9.2 9.6 8.6 11.4 6.8 12 2Z"/><path fill="currentColor" d="M18 15c.3 2 1 2.7 3 3-2 .3-2.7 1-3 3-.3-2-1-2.7-3-3 2-.3 2.7-1 3-3Z"/>'},
|
||
SURGE:{c:'#FFA24A',g:'<path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M4 18l4-4 3 2 5-6"/><path stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M16 10h4v4"/>'},
|
||
PRISM:{c:'#B36CFF',g:'<path fill="currentColor" fill-opacity=".16" d="M11 4 3 19h8z"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round" d="M11 4 3 19h8z"/><path stroke="currentColor" stroke-width="1.8" stroke-linecap="round" d="M11 9h10M11 12h10M11 15h10"/>'},
|
||
GLUE:{c:'#8A94A8',g:'<path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M9 4C6 4 6 12 9 12 6 12 6 20 9 20M15 4c3 0 3 8 0 8 3 0 3 8 0 8"/><circle cx="12" cy="12" r="1.8" fill="currentColor"/>'},
|
||
BOLT:{c:'#45B7E8',g:'<path fill="currentColor" fill-opacity=".18" d="M13 2 4 14h6l-1 8 9-13h-6z"/><path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" d="M13 2 4 14h6l-1 8 9-13h-6z"/>'},
|
||
BRUISER:{c:'#C05A5A',g:'<path fill="currentColor" fill-opacity=".16" d="M5 8h14v10H5z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M5 8h14v10H5zM8 8V6M11 8V5M14 8V5M17 8V6"/>'},
|
||
LOCKDOWN:{c:'#5A6474',g:'<path fill="currentColor" fill-opacity=".16" d="M5 10h14v10H5z"/><path fill="none" stroke="currentColor" stroke-width="2.1" stroke-linejoin="round" d="M5 10h14v10H5zM8 10V7a4 4 0 0 1 8 0v3"/><circle cx="12" cy="15" r="1.6" fill="currentColor"/>'},
|
||
ANCHOR:{c:'#4C86C4',g:'<circle cx="12" cy="5" r="2.2" fill="none" stroke="currentColor" stroke-width="2.1"/><path fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" d="M12 7v12M6 13c0 4 3 6 6 6s6-2 6-6M4 13h4M16 13h4"/>'},
|
||
SPARK:{c:'#F0A93D',g:'<circle cx="12" cy="12" r="3" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M12 3v3M12 18v3M4.5 7.5l2.2 2.2M17.3 14.3l2.2 2.2M4.5 16.5l2.2-2.2M17.3 9.7l2.2-2.2"/>'},
|
||
SHIELD:{c:'#5A8CA8',g:'<path fill="currentColor" fill-opacity=".16" d="M12 3 5 6v5c0 5 3.5 7.5 7 9 3.5-1.5 7-4 7-9V6z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M12 3 5 6v5c0 5 3.5 7.5 7 9 3.5-1.5 7-4 7-9V6z"/><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="m9 11 2 2 4-4"/>'},
|
||
RANGE:{c:'#C77CE0',g:'<path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M4 17a8 8 0 0 1 16 0"/><path stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M12 17V7"/><path fill="currentColor" d="M12 5l-2.4 4h4.8z"/>'},
|
||
ENGINE:{c:'#E0803D',g:'<circle cx="12" cy="12" r="3.6" fill="none" stroke="currentColor" stroke-width="2.2"/><path stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M12 4v3M12 17v3M4 12h3M17 12h3M6.5 6.5l2 2M15.5 15.5l2 2M17.5 6.5l-2 2M6.5 17.5l2-2"/>'},
|
||
HUB:{c:'#6C9CD8',g:'<circle cx="12" cy="12" r="2.5" fill="currentColor"/><circle cx="12" cy="4.5" r="1.7" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="5" cy="8.5" r="1.7" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="19" cy="8.5" r="1.7" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="8" cy="19" r="1.7" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="16" cy="19" r="1.7" fill="none" stroke="currentColor" stroke-width="1.8"/><path stroke="currentColor" stroke-width="1.5" d="M12 9.5V6M10 10.5 6.4 9M14 10.5l3.6-1.5M10.6 13.8 9 17.5M13.4 13.8 15 17.5"/>'},
|
||
BOMBER:{c:'#FF9F45',g:'<path fill="currentColor" fill-opacity=".18" d="M12 3l7 9h-4v8H9v-8H5z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M12 3l7 9h-4v8H9v-8H5z"/>'},
|
||
SLASH:{c:'#E0C64A',g:'<path fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" d="M6 18 18 6M10 19 19 10M5 14 13 6"/>'},
|
||
CATALYST:{c:'#E88AC0',g:'<path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M3 12h11M10 7l5 5-5 5"/><path fill="currentColor" fill-opacity=".2" d="M16 8h5v8h-5z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M16 8h5v8h-5z"/>'},
|
||
DRIVER:{c:'#5A7D9A',g:'<path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" d="M5 19 17 7"/><circle cx="19" cy="5" r="2.2" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" d="M4 14a10 10 0 0 0 6 6"/>'},
|
||
GHOST:{c:'#3FD8E0',g:'<path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M4 6l6 6-6 6M11 6l6 6-6 6"/>'},
|
||
WEDGE:{c:'#9AA0C0',g:'<path fill="currentColor" fill-opacity=".18" d="M12 4 4 20h8z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M12 4 4 20h16zM12 4v16"/>'},
|
||
MIRROR:{c:'#B0B6C8',g:'<path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M9 5 4 12l5 7M15 5l5 7-5 7"/><path stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-dasharray="2 2.6" d="M12 4v16"/>'},
|
||
UNICORN:{c:'#C77CE0',g:'<path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M5 20c1-7 6-11 13-13M18 7l-1-4M18 7l4-1"/>'},
|
||
SWISS:{c:'#8A94A8',g:'<path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M12 4v16M4 12h16M6.5 6.5l11 11M17.5 6.5l-11 11"/>'},
|
||
ALPHA:{c:'#7C5CFF',g:'<path fill="currentColor" fill-opacity=".16" d="M12 3 4 20h16z"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round" d="M12 3 4 20h16zM8.5 14h7"/>'},
|
||
PUNCHOUT:{c:'#FF7A5A',g:'<path fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" d="M7 4v16M7 12l9-8M9 13l7 7"/>'},
|
||
SINKER:{c:'#5A9AB0',g:'<path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M5 5c6 1 9 5 9 13"/><path fill="currentColor" d="M14 20l-3-4.5 6 .4z"/>'},
|
||
WORKHORSE:{c:'#C89B5A',g:'<path fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" d="M4 7h16M4 12h16M4 17h16"/>'},
|
||
HAMMER:{c:'#FF4D6D',g:'<path fill="currentColor" fill-opacity=".18" d="M6 4h11v5H6z"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M6 4h11v5H6zM11.5 9v11M8 20h7"/>'},
|
||
BRIDGE:{c:'#6C9CB0',g:'<path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M4 18v-8a8 8 0 0 1 16 0v8M4 14h16M9 18v-4M15 18v-4"/>'},
|
||
CANNON:{c:'#4FB0C6',g:'<path fill="currentColor" fill-opacity=".16" d="M4 15l12-6 3 3-9 8-6-1z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M4 15l12-6 3 3-9 8-6-1z"/><circle cx="19" cy="6" r="2.2" fill="currentColor"/>'},
|
||
MAESTRO:{c:'#D9A441',g:'<path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M5 19 16 6"/><circle cx="17" cy="5" r="1.9" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" d="M5 9c2-2 5-2 7 0M4 13c2.5-2.5 6-2.5 9 0"/>'},
|
||
'BELL COW':{c:'#B5895A',g:'<path fill="currentColor" fill-opacity=".16" d="M6 17c0-6 2-9 6-9s6 3 6 9z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M6 17c0-6 2-9 6-9s6 3 6 9zM4 17h16M12 8V5"/><circle cx="12" cy="20" r="1.6" fill="currentColor"/>'},
|
||
LIGHTNING:{c:'#E8C34A',g:'<path fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M9 4l7 8-7 8"/><path stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M3 9h4M2 15h5"/>'},
|
||
BURNER:{c:'#FF7A4A',g:'<path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M3 19 19 5M14 5h5v5"/><path stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M4 14l2 2M8 10l2 2"/>'},
|
||
CHAINMOVER:{c:'#7A94A8',g:'<path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M4 12h9M10 8l4 4-4 4"/><path stroke="currentColor" stroke-width="2.6" stroke-linecap="round" d="M18 5v14"/>'},
|
||
SEAM:{c:'#6CB0C0',g:'<path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-dasharray="3 3" d="M7 4v16M17 4v16"/><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" d="M12 20v-9"/><path fill="currentColor" d="M12 5l-3 5h6z"/>'},
|
||
HUNTER:{c:'#C05A5A',g:'<path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M5 4c8 0 12 5 12 14M17 18l-4-2M17 18l-1-4"/><circle cx="6" cy="6" r="1.6" fill="currentColor"/>'},
|
||
PLUG:{c:'#5A6474',g:'<path fill="currentColor" fill-opacity=".16" d="M6 6h12v12H6z"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round" d="M6 6h12v12H6z"/><path stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M12 2v4M12 18v4"/>'},
|
||
ISLAND:{c:'#4C86C4',g:'<circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 3"/><circle cx="12" cy="10" r="2.3" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M8.5 17c1-2.5 6-2.5 7 0"/>'},
|
||
CENTERFIELD:{c:'#5A9AB0',g:'<path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M3 16a9 9 0 0 1 18 0"/><circle cx="12" cy="9" r="2.2" fill="currentColor"/><path stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M3 16h3M18 16h3"/>'},
|
||
LEG:{c:'#C89B5A',g:'<path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M7 20h10M9 20v-7M15 20v-7M7 13h10"/><path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-dasharray="3 3" d="M12 13c0-5-4-6-4-9"/><circle cx="8" cy="4" r="1.8" fill="currentColor"/>'},
|
||
SNIPER:{c:'#E85D9E',g:'<circle cx="12" cy="12" r="7" fill="none" stroke="currentColor" stroke-width="2"/><path stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M12 3v4M12 17v4M3 12h4M17 12h4"/><circle cx="12" cy="12" r="2" fill="currentColor"/>'},
|
||
SETUP:{c:'#6C8CFF',g:'<path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M4 16c5 2 10-1 12-8"/><path fill="currentColor" d="M16 8l-4 1 1.4 3.6z"/><circle cx="4" cy="16" r="2.2" fill="currentColor"/>'},
|
||
WALL:{c:'#5A7D9A',g:'<path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M4 5h16v14H4z"/><path stroke="currentColor" stroke-width="1.8" d="M4 9.7h16M4 14.3h16M11 5v4.7M8 9.7v4.6M15 9.7v4.6M11 14.3V19"/>'},
|
||
REARGUARD:{c:'#7C6CC0',g:'<path fill="currentColor" fill-opacity=".16" d="M12 3 5 6v6c0 5 4 7 7 8 3-1 7-3 7-8V6z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M12 3 5 6v6c0 5 4 7 7 8 3-1 7-3 7-8V6z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 16v-6M9.5 12.5 12 10l2.5 2.5"/>'},
|
||
PEST:{c:'#E0803D',g:'<path fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" d="M12 4l1.8 2.8L17 6l-.8 3.2L19 11l-2.8 1.8L17 16l-3.2-.8L12 18l-1.8-2.8L7 16l.8-3.2L5 11l2.8-1.8L7 6l3.2.8z"/><circle cx="12" cy="11" r="1.6" fill="currentColor"/>'},
|
||
ENFORCER:{c:'#C05A5A',g:'<path fill="currentColor" fill-opacity=".16" d="M4 9h6v9H4zM14 9h6v9h-6z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M4 9h6v9H4zM14 9h6v9h-6zM4 9c0-2 1.5-3 3-3s3 1 3 3M14 9c0-2 1.5-3 3-3s3 1 3 3"/>'},
|
||
VAULT:{c:'#5A9AB0',g:'<path fill="currentColor" fill-opacity=".16" d="M7 5h10l1 8c0 4-3 6-6 6s-6-2-6-6z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M7 5h10l1 8c0 4-3 6-6 6s-6-2-6-6z"/><path stroke="currentColor" stroke-width="1.7" stroke-linecap="round" d="M9 9h6M9 12h6M11 15h2"/>'},
|
||
HOWITZER:{c:'#B5895A',g:'<path fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" d="M4 20 15 9"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M15 9l4-1-1 4"/><path stroke="currentColor" stroke-width="1.8" stroke-linecap="round" d="M18 14l2 2M20 11l2 1"/>'},
|
||
FINISHER:{c:'#FF7A5A',g:'<path fill="none" stroke="currentColor" stroke-width="1.9" d="M4 6h16v12H4z"/><path stroke="currentColor" stroke-width="1.3" d="M4 10h16M4 14h16M9 6v12M15 6v12"/><circle cx="17" cy="9" r="2.1" fill="currentColor"/>'},
|
||
TOWER:{c:'#6C9CB0',g:'<circle cx="12" cy="6" r="2.6" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M12 9v8M8 20l4-3 4 3M8 13h8"/>'},
|
||
MOTOR:{c:'#E0A03D',g:'<path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M6 8a7 7 0 0 1 12 2M18 16a7 7 0 0 1-12-2"/><path fill="currentColor" d="M18 5l1.4 4.2-4.2-1zM6 19l-1.4-4.2 4.2 1z"/>'},
|
||
BLADE:{c:'#B36CFF',g:'<path fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" d="M4 20C10 18 16 12 20 4"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M13 5l7-1-1 7"/>'},
|
||
PRESSURE:{c:'#FF6B4A',g:'<path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M3 8h9M3 12h9M3 16h9M9 6l4 6-4 6"/><path stroke="currentColor" stroke-width="2.6" stroke-linecap="round" d="M18 4v16"/>'},
|
||
COUNTER:{c:'#6C8CFF',g:'<path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M4 9h11M11 5l4 4-4 4M20 15H9M13 11l-4 4 4 4"/>'},
|
||
TECHNICIAN:{c:'#7AA6D8',g:'<circle cx="15" cy="9" r="5" fill="none" stroke="currentColor" stroke-width="2"/><path stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M15 6v6M12 9h6"/><path stroke="currentColor" stroke-width="2.4" stroke-linecap="round" d="M3 20l6.5-6.5"/>'},
|
||
SLUGGER:{c:'#C05A5A',g:'<path fill="currentColor" fill-opacity=".18" d="M12 2l2.4 5.6L20 8l-4 4 1.6 6L12 15l-5.6 3L8 12 4 8l5.6-.4z"/><path fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" d="M12 2l2.4 5.6L20 8l-4 4 1.6 6L12 15l-5.6 3L8 12 4 8l5.6-.4z"/>'},
|
||
PHANTOM:{c:'#9B8CFF',g:'<path fill="currentColor" fill-opacity=".16" d="M6 18V11a6 6 0 0 1 12 0v7l-2-2-2 2-2-2-2 2z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M6 18V11a6 6 0 0 1 12 0v7l-2-2-2 2-2-2-2 2z"/><circle cx="10" cy="11" r="1" fill="currentColor"/><circle cx="14" cy="11" r="1" fill="currentColor"/>'},
|
||
SOUTHPAW:{c:'#E0C64A',g:'<circle cx="10" cy="6" r="2.2" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M10 8v6M10 10l-5 1M10 11l5 3M10 14l-3 6M10 14l4 5"/>'},
|
||
GRAPPLER:{c:'#7C6CC0',g:'<path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M6 4v9M6 13l-3-3M6 13l3-3M18 20v-9M18 11l-3 3M18 11l3 3"/><path stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M9 12h6"/>'},
|
||
STRIKER:{c:'#FF7A4A',g:'<path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" d="M3 12h8"/><path fill="currentColor" fill-opacity=".2" d="M12 8h7v8h-7z"/><path fill="none" stroke="currentColor" stroke-width="2.1" stroke-linejoin="round" d="M12 8h7v8h-7z"/><path stroke="currentColor" stroke-width="1.8" stroke-linecap="round" d="M20 6l2-1M20.5 12H22M20 18l2 1"/>'},
|
||
IRON:{c:'#8A94A8',g:'<path fill="currentColor" fill-opacity=".16" d="M4 8h7v2c0 2 2 3 4 3h5v1c0 4-4 6-8 6s-8-3-8-8z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M4 8h7v2c0 2 2 3 4 3h5v1c0 4-4 6-8 6s-8-3-8-8z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M9 5h6v3"/>'},
|
||
GRINDER:{c:'#5A7D9A',g:'<path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M4 15c3-4 5-4 8 0s5 4 8 0"/><path stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M4 20h16"/><circle cx="12" cy="9" r="1.8" fill="currentColor"/>'},
|
||
AGGRESSOR:{c:'#FF6B4A',g:'<path fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M4 20 15 9M15 9h-5M15 9v5"/><path stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M17 16l3 3"/><circle cx="19" cy="6" r="1.8" fill="currentColor"/>'},
|
||
SURGEON:{c:'#7AA6D8',g:'<path fill="none" stroke="currentColor" stroke-width="2" d="M4 5h16v14H4z"/><path stroke="currentColor" stroke-width="1.6" d="M4 12h16M12 5v14"/><circle cx="16.5" cy="8.5" r="2" fill="currentColor"/>'},
|
||
TOPSPIN:{c:'#B36CFF',g:'<path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M18.5 8a7 7 0 1 0 1.2 6"/><path fill="currentColor" d="M20 5l-.3 4.6L16 7.4z"/><path stroke="currentColor" stroke-width="1.6" stroke-linecap="round" d="M9 12.5c1.5-1.5 4.5-1.5 6 0"/>'},
|
||
RETURNER:{c:'#6C9CB0',g:'<path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M20 6 8 18M8 18h6M8 18v-6"/><path stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M4 4l3.5 3.5"/>'}
|
||
};
|
||
}
|
||
|
||
sportSets(){
|
||
return [
|
||
{sport:'NBA', names:['TORCH','CONDUCTOR','ARCHITECT','LINK','FORTRESS','PISTON','ARTILLERY','SENTINEL','IGNITER','SURGE','PRISM','GLUE','BOLT','BRUISER','LOCKDOWN']},
|
||
{sport:'WNBA', names:['ANCHOR','CONDUCTOR','SPARK','SHIELD','RANGE','PRISM','IGNITER','ENGINE','HUB']},
|
||
{sport:'MLB', names:['BOMBER','SLASH','CATALYST','DRIVER','GHOST','WEDGE','MIRROR','UNICORN','SWISS','ALPHA','PUNCHOUT','SINKER','WORKHORSE','HAMMER','BRIDGE']},
|
||
{sport:'NFL', names:['CANNON','MAESTRO','BELL COW','LIGHTNING','BURNER','CHAINMOVER','SEAM','ANCHOR','HUNTER','PLUG','HAMMER','ISLAND','CENTERFIELD','SWISS','LEG']},
|
||
{sport:'HOCKEY', names:['SNIPER','SETUP','WALL','REARGUARD','PEST','WORKHORSE','ENFORCER','SPARK','VAULT','HOWITZER']},
|
||
{sport:'SOCCER', names:['FINISHER','MAESTRO','TOWER','MOTOR','BLADE','WALL']},
|
||
{sport:'BOXING / MMA', names:['PRESSURE','COUNTER','TECHNICIAN','SLUGGER','PHANTOM','SOUTHPAW','GRAPPLER','STRIKER','IRON','FINISHER']},
|
||
{sport:'TENNIS', names:['CANNON','GRINDER','AGGRESSOR','SURGEON','TOPSPIN','RETURNER']}
|
||
];
|
||
}
|
||
|
||
buildGlyphs(){
|
||
if(!this.glyphGrid) return;
|
||
const defs=this.glyphDefs();
|
||
const sets=this.sportSets();
|
||
// count appearances to flag cross-sport reuse
|
||
const seen={};
|
||
sets.forEach(s=>s.names.forEach(n=>{seen[n]=(seen[n]||0)+1;}));
|
||
let html='';
|
||
sets.forEach(grp=>{
|
||
html+='<div style="grid-column:1/-1;display:flex;align-items:center;gap:12px;margin:20px 0 4px"><span class="mono" style="font-size:11px;letter-spacing:.24em;color:#F0F0F0;font-weight:700">'+grp.sport+'</span><span class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080">'+grp.names.length+' MARKS</span><span style="flex:1;height:1px;background:#14141E"></span></div>';
|
||
grp.names.forEach(n=>{
|
||
const d=defs[n]; if(!d) return;
|
||
const shared=seen[n]>1;
|
||
html+='<div style="position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;padding:15px 6px;border-radius:12px;background:#0E0E14;border:1px solid #1E1E2A">'
|
||
+(shared?'<span class="mono" title="shared across sports" style="position:absolute;top:7px;right:8px;font-size:8px;letter-spacing:.06em;color:#4a4a58">\u21ba</span>':'')
|
||
+'<div style="width:46px;height:46px;border-radius:11px;background:'+this.hexA(d.c,0.09)+';border:1.5px solid '+this.hexA(d.c,0.42)+';display:flex;align-items:center;justify-content:center;color:'+d.c+'">'
|
||
+'<svg width="27" height="27" viewBox="0 0 24 24" fill="none">'+d.g+'</svg></div>'
|
||
+'<div class="mono" style="font-size:9px;letter-spacing:.08em;font-weight:700;color:'+d.c+';text-align:center;line-height:1.1">'+n+'</div>'
|
||
+'</div>';
|
||
});
|
||
});
|
||
this.glyphGrid.innerHTML=html;
|
||
}
|
||
|
||
hexA(hex,a){
|
||
const h=hex.replace('#','');
|
||
const r=parseInt(h.substring(0,2),16),gg=parseInt(h.substring(2,4),16),b=parseInt(h.substring(4,6),16);
|
||
return 'rgba('+r+','+gg+','+b+','+a+')';
|
||
}
|
||
|
||
buildGradeHistory(){
|
||
if(!this.gradeHistory) return;
|
||
// tier -> color; each entry: grade + hit/miss. Mostly hits (64%).
|
||
const seq=[
|
||
['A+',1],['A',1],['B',1],['A',1],['C',0],['A+',1],['B',1],['A',1],
|
||
['A',1],['B',0],['A+',1],['A',1],['C',1],['B',1],['A',0],['A+',1],
|
||
['B',1],['A',1],['A+',1],['C',0],['A',1],['B',1],['A',1],['A+',1]
|
||
];
|
||
const tierColor=g=> g.indexOf('A')===0 ? '#00D4A0' : g==='B' ? '#F0F0F0' : g==='C' ? '#B8BCC8' : '#FF4757';
|
||
let html='';
|
||
seq.forEach(([g,hit])=>{
|
||
const tint = hit ? 'rgba(0,212,160,.10)' : 'rgba(255,71,87,.12)';
|
||
const bord = hit ? 'rgba(0,212,160,.28)' : 'rgba(255,71,87,.4)';
|
||
html+='<div class="mono" style="aspect-ratio:1;border-radius:7px;background:'+tint+';border:1px solid '+bord+';display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:'+tierColor(g)+'">'+g+'</div>';
|
||
});
|
||
this.gradeHistory.innerHTML=html;
|
||
}
|
||
|
||
clock(){ const d=new Date(); const p=n=>String(n).padStart(2,'0'); return p(d.getMinutes())+':'+p(d.getSeconds()); }
|
||
|
||
setupParlay(){
|
||
if(!this.parlayLegs) return;
|
||
const legs=[...this.parlayLegs.querySelectorAll('[data-leg]')];
|
||
legs.forEach(l=>{
|
||
l.addEventListener('click',()=>{
|
||
l.dataset.sel = l.dataset.sel==='1' ? '0' : '1';
|
||
this.paintLeg(l);
|
||
this.updateParlay();
|
||
});
|
||
});
|
||
// default: jokic + edwards (demonstrates the correlation flag)
|
||
legs.forEach(l=>{ if(l.getAttribute('data-leg')==='jokic'||l.getAttribute('data-leg')==='edwards'){ l.dataset.sel='1'; } this.paintLeg(l); });
|
||
this.updateParlay();
|
||
}
|
||
|
||
paintLeg(l){
|
||
const on=l.dataset.sel==='1';
|
||
const chk=l.querySelector('[data-check]');
|
||
l.style.background = on ? 'rgba(0,212,160,.05)' : '';
|
||
l.style.boxShadow = on ? 'inset 2px 0 0 #00D4A0' : '';
|
||
if(chk){
|
||
chk.style.borderColor = on ? '#00D4A0' : '#2A2A38';
|
||
chk.style.background = on ? '#00D4A0' : 'transparent';
|
||
chk.innerHTML = on ? '<svg width="11" height="11" viewBox="0 0 24 24" fill="none"><path stroke="#06060B" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="M5 12l5 5L20 6"/></svg>' : '';
|
||
}
|
||
}
|
||
|
||
gradeRank(g){ return {'A+':0,'A':1,'A-':2,'B+':3,'B':4,'C':5,'D':6,'F':7}[g] ?? 4; }
|
||
rankGrade(r){ return ['A+','A','A-','B+','B','C','D','F'][Math.max(0,Math.min(7,r))]; }
|
||
gradeColor(g){ return g.indexOf('A')===0 ? '#00D4A0' : (g[0]==='B'?'#F0F0F0':(g[0]==='C'?'#B8BCC8':'#FF4757')); }
|
||
|
||
updateParlay(){
|
||
if(!this.rootNode || !this.parlayLegs) return;
|
||
const sel=[...this.parlayLegs.querySelectorAll('[data-leg]')].filter(l=>l.dataset.sel==='1');
|
||
const legsBox=this.rootNode.querySelector('[data-parlay-legs]');
|
||
const count=this.rootNode.querySelector('[data-parlay-count]');
|
||
const oddsEl=this.rootNode.querySelector('[data-parlay-odds]');
|
||
const gradeEl=this.rootNode.querySelector('[data-parlay-grade]');
|
||
const stakeEl=this.rootNode.querySelector('[data-parlay-stake]');
|
||
const warn=this.rootNode.querySelector('[data-parlay-warn]');
|
||
const warnText=this.rootNode.querySelector('[data-parlay-warntext]');
|
||
|
||
if(count) count.textContent = sel.length+' LEG'+(sel.length===1?'':'S');
|
||
|
||
// slip legs list
|
||
if(legsBox){
|
||
if(!sel.length){
|
||
legsBox.innerHTML='<div class="mono" style="display:flex;align-items:center;justify-content:center;height:96px;font-size:10.5px;letter-spacing:.12em;color:#4a4a58">TAP READS TO BUILD A SLIP</div>';
|
||
} else {
|
||
legsBox.innerHTML = sel.map(l=>'<div style="display:flex;align-items:center;justify-content:space-between;padding:8px 8px"><span style="font-size:12.5px;font-weight:600">'+l.getAttribute('data-label')+'</span><span class="mono" style="font-size:11px;color:#B8BCC8">'+l.getAttribute('data-odds')+'</span></div>').join('');
|
||
}
|
||
}
|
||
|
||
// combined decimal odds
|
||
let dec=1; sel.forEach(l=>{ dec*=parseFloat(l.getAttribute('data-dec'))||1; });
|
||
let american='—';
|
||
if(sel.length){ american = dec>=2 ? '+'+Math.round((dec-1)*100) : '-'+Math.round(100/(dec-1)); }
|
||
if(oddsEl) oddsEl.textContent = american;
|
||
|
||
// correlation: any two selected share a game
|
||
const games={}; let corr=false; let corrGame='';
|
||
sel.forEach(l=>{ const g=l.getAttribute('data-game'); if(games[g]){corr=true;corrGame=g;} games[g]=(games[g]||0)+1; });
|
||
|
||
// grade: worst selected, downgraded a tier if correlated
|
||
let grade='—', gcol='#707080';
|
||
if(sel.length){
|
||
let worst=Math.max(...sel.map(l=>this.gradeRank(l.getAttribute('data-grade'))));
|
||
if(corr) worst=Math.min(7,worst+1);
|
||
grade=this.rankGrade(worst);
|
||
gcol=corr ? '#FFB347' : this.gradeColor(grade);
|
||
}
|
||
if(gradeEl){ gradeEl.textContent=grade; gradeEl.style.color=gcol; }
|
||
|
||
// stake recommendation
|
||
let stake='—', scol='#707080';
|
||
if(sel.length===1){ stake='1.0u'; scol='#00D4A0'; }
|
||
else if(sel.length>1 && !corr){ stake='0.75u'; scol='#F0F0F0'; }
|
||
else if(sel.length>1 && corr){ stake='0.4u'; scol='#FFB347'; }
|
||
if(stakeEl){ stakeEl.textContent=stake; stakeEl.style.color=scol; }
|
||
|
||
// warning
|
||
if(warn){
|
||
if(corr){
|
||
warn.style.display='';
|
||
const gm = corrGame==='DENMIN'?'DEN @ MIN':corrGame;
|
||
if(warnText) warnText.textContent = gm+' — legs move together. Books cap combined value and the true edge shrinks; VYNDR trims the stake to size the real risk.';
|
||
} else {
|
||
warn.style.display='none';
|
||
}
|
||
}
|
||
}
|
||
|
||
liveGradeTick(){
|
||
const g=this.rootNode.querySelector('[data-lg-grade]');
|
||
if(!g) return;
|
||
const up=Math.random()<0.62;
|
||
g.textContent = up ? 'A+' : 'A';
|
||
g.style.animation='none'; void g.offsetWidth;
|
||
g.style.animation='vy-arrive .5s cubic-bezier(.2,.8,.2,1)';
|
||
const e=this.rootNode.querySelector('[data-lg-edge]');
|
||
if(e) this.nudge(e, up);
|
||
const note=this.rootNode.querySelector('[data-lg-note]');
|
||
if(note){
|
||
note.textContent = (up ? 'GRADE FIRMED ▲ ' : 'GRADE EASED ▼ ') + this.clock();
|
||
note.style.color = up ? '#00D4A0' : '#FFB347';
|
||
}
|
||
}
|
||
|
||
openCmdBar(){
|
||
this.setState({cmdOpen:true});
|
||
let t=0;
|
||
const p=setInterval(()=>{
|
||
t++;
|
||
const item=this.rootNode && this.rootNode.querySelector('[data-cmd-item]');
|
||
if(item){ this.initCmd(); clearInterval(p); }
|
||
if(t>30) clearInterval(p);
|
||
},20);
|
||
}
|
||
|
||
initCmd(){
|
||
if(!this.rootNode) return;
|
||
const i=this.rootNode.querySelector('[data-cmd-input]');
|
||
if(i){ i.value=''; try{ i.focus(); }catch(e){} }
|
||
this.filterCmd('');
|
||
}
|
||
|
||
filterCmd(q){
|
||
if(!this.rootNode) return;
|
||
q=(q||'').trim().toLowerCase();
|
||
const items=[...this.rootNode.querySelectorAll('[data-cmd-item]')];
|
||
let shown=0;
|
||
items.forEach(it=>{
|
||
const hay=(it.getAttribute('data-tags')||'')+' '+it.textContent.toLowerCase();
|
||
const match=!q || hay.toLowerCase().indexOf(q)>-1;
|
||
it.style.display=match?'flex':'none';
|
||
if(match) shown++;
|
||
});
|
||
// hide section headers with no visible items below is overkill; just toggle empty state
|
||
const empty=this.rootNode.querySelector('[data-cmd-empty]');
|
||
if(empty) empty.style.display= shown? 'none':'block';
|
||
// hide section headers whose group has no visible items
|
||
const list=this.rootNode.querySelector('[data-cmd-list]');
|
||
if(list){
|
||
const kids=[...list.children];
|
||
kids.forEach((el,idx)=>{
|
||
if(el.hasAttribute('data-cmd-item')||el.hasAttribute('data-cmd-empty')) return;
|
||
let vis=false;
|
||
for(let j=idx+1;j<kids.length;j++){
|
||
const n=kids[j];
|
||
if(!n.hasAttribute('data-cmd-item')){ if(n.hasAttribute('data-cmd-empty')) continue; else break; }
|
||
if(n.style.display!=='none'){ vis=true; break; }
|
||
}
|
||
el.style.display = vis ? '' : 'none';
|
||
});
|
||
}
|
||
}
|
||
|
||
setupBoardHover(){
|
||
if(!this.board) return;
|
||
const RAT={
|
||
jokic:'MIN 4th-fastest pace vs C · line lagged the matchup by +2.0',
|
||
skenes:'CHC whiff rate 8th-worst vs RHP · K number soft into the start',
|
||
edwards:'Usage +6% live w/ Gobert off · MIN pushing pace late',
|
||
judge:'BOS bullpen LHP-heavy · Judge TB vs LHP top-5 in the league',
|
||
mcdavid:'CGY concedes the most high-danger chances · PP1 minutes heavy',
|
||
mahomes:'BUF secondary banged up · pass rate over expectation in spot',
|
||
betts:'SD throwing RHP · Betts barrel% top-5 vs velocity',
|
||
brunson:'BOS drops coverage · Brunson mid-range volume travels',
|
||
curry:'SAC transition D 22nd · GSW 3PA rate elevated on the road',
|
||
lavine:'MIL perimeter D 3rd · usage down w/ Giddey on — the FADE'
|
||
};
|
||
this.board.querySelectorAll('[data-row]').forEach(r=>{
|
||
const key=r.getAttribute('data-row');
|
||
r.style.transition='background .15s ease,opacity .15s ease';
|
||
r.style.cursor='pointer';
|
||
r.addEventListener('mouseenter',()=>{
|
||
r.dataset.o = r.style.opacity || '1';
|
||
r.style.opacity='1';
|
||
r.style.background='rgba(255,255,255,.028)';
|
||
if(r._detail) return;
|
||
const d=document.createElement('div');
|
||
d.setAttribute('style','padding:0 16px 10px 51px;background:rgba(255,255,255,.028);animation:vy-detailin .16s ease-out');
|
||
d.innerHTML='<div style="display:flex;align-items:flex-start;justify-content:space-between;gap:14px"><span class="mono" style="font-size:9.5px;letter-spacing:.04em;line-height:1.45;color:#B8BCC8">'+(RAT[key]||'')+'</span><span class="mono" style="font-size:9px;letter-spacing:.12em;color:#00D4A0;white-space:nowrap;flex:none">VIEW READ \u25B8</span></div>';
|
||
r.insertAdjacentElement('afterend',d);
|
||
r._detail=d;
|
||
});
|
||
r.addEventListener('mouseleave',()=>{
|
||
r.style.opacity = r.dataset.o || '1';
|
||
r.style.background='';
|
||
if(r._detail){ r._detail.remove(); r._detail=null; }
|
||
});
|
||
});
|
||
}
|
||
|
||
componentDidUpdate(prevProps, prevState){
|
||
if(this.state.cmdOpen && (!prevState || !prevState.cmdOpen) && this.rootNode){
|
||
const i=this.rootNode.querySelector('[data-cmd-input]');
|
||
if(i){ i.value=''; this.filterCmd(''); setTimeout(()=>i.focus(),20); }
|
||
}
|
||
}
|
||
|
||
componentDidMount(){
|
||
this.buildGlyphs();
|
||
this.buildGradeHistory();
|
||
this.setupBoardHover();
|
||
this.setupParlay();
|
||
this._key=(e)=>{
|
||
const k=(e.key||'').toLowerCase();
|
||
if((e.metaKey||e.ctrlKey) && k==='k'){ e.preventDefault(); if(this.state.cmdOpen){ this.setState({cmdOpen:false}); } else { this.openCmdBar(); } }
|
||
else if(e.key==='Escape' && this.state.cmdOpen){ this.setState({cmdOpen:false}); }
|
||
};
|
||
document.addEventListener('keydown',this._key);
|
||
|
||
// live grade-shift micro-view — grade reacts to game state
|
||
this._lg=setInterval(()=>{
|
||
if(this.props.reactionsLive===false || !this._booted || !this.rootNode) return;
|
||
this.liveGradeTick();
|
||
},3600);
|
||
// sync clock
|
||
const tick=()=>{
|
||
const el=this.rootNode && this.rootNode.querySelector('[data-sync-clock]');
|
||
if(el){const d=new Date();const p=n=>String(n).padStart(2,'0');el.textContent=p(d.getHours())+':'+p(d.getMinutes())+':'+p(d.getSeconds());}
|
||
};
|
||
tick();
|
||
this._clock=setInterval(tick,1000);
|
||
|
||
// EARNED MOTION: nothing pulses until boot completes, then reactions
|
||
// fire only as discrete "events" (a real datum changing), not on a loop.
|
||
this._booted=false;
|
||
this._bootTimer=setTimeout(()=>{ this._booted=true; },1500);
|
||
|
||
const speed=this.props.reactionSpeed||2300;
|
||
this._evi=0;
|
||
this._rx=setInterval(()=>{
|
||
if(this.props.reactionsLive===false) return;
|
||
if(!this._booted || !this.rootNode) return;
|
||
this.fireEvent();
|
||
},speed);
|
||
}
|
||
|
||
events(){
|
||
// discrete, opponent/market-specific truths — the chip text matches the row it moves
|
||
return [
|
||
{row:'jokic', chip:'STEAM · Jokić o27.5 ▲', up:true},
|
||
{row:'mahomes', chip:'LINE MOVE · Mahomes 274.5 ▼', up:false},
|
||
{row:'edwards', chip:'LIVE · Edwards o5.5 AST ▲', up:true},
|
||
{row:'betts', chip:'CLV · Betts o1.5 TB ▲', up:true},
|
||
{row:'skenes', chip:'STEAM · Skenes o6.5 K ▲', up:true},
|
||
{row:'lavine', chip:'FADE · LaVine drifting ▼', up:false},
|
||
{row:'mcdavid', chip:'CLV · McDavid o1.5 ▲', up:true},
|
||
{row:'judge', chip:'LINE MOVE · Judge o1.5 ▲', up:true}
|
||
];
|
||
}
|
||
|
||
fireEvent(){
|
||
const evs=this.events();
|
||
const ev=evs[this._evi % evs.length]; this._evi++;
|
||
const row=this.rootNode.querySelector('[data-row="'+ev.row+'"]');
|
||
if(row){
|
||
const cell=row.querySelector('[data-react]');
|
||
if(cell) this.nudge(cell, ev.up);
|
||
}
|
||
// occasionally also move the hero panel edge (the declassified read)
|
||
if(this._evi % 3===0){
|
||
const hero=this.rootNode.querySelector('.vy-scanwrap');
|
||
const panel=hero && hero.parentElement;
|
||
const heroEdge=panel && panel.querySelector('[data-react][data-fmt="edge"]');
|
||
if(heroEdge) this.nudge(heroEdge, ev.up);
|
||
}
|
||
this.showEvent(ev.chip, ev.up);
|
||
this.tickBreadth(ev.up);
|
||
}
|
||
|
||
showEvent(text, up){
|
||
const el=this.rootNode.querySelector('[data-event]');
|
||
if(!el) return;
|
||
el.textContent=text;
|
||
el.style.color = up ? '#00D4A0' : '#FF4757';
|
||
el.style.animation='none';
|
||
void el.offsetWidth;
|
||
el.style.animation='vy-eventin 2.6s ease-out';
|
||
}
|
||
|
||
tickBreadth(up){
|
||
const clv=this.rootNode.querySelector('[data-breadth-clv]');
|
||
if(clv){
|
||
let v=parseFloat(clv.textContent.replace(/[^0-9.\-]/g,''));
|
||
v=Math.max(1.2,Math.min(4.4, v+(up?0.1:-0.1)));
|
||
clv.textContent='+'+v.toFixed(1)+'%';
|
||
clv.classList.remove('rx-up','rx-down');void clv.offsetWidth;
|
||
clv.classList.add(up?'rx-up':'rx-down');
|
||
setTimeout(()=>clv.classList.remove('rx-up','rx-down'),760);
|
||
}
|
||
const eg=this.rootNode.querySelector('[data-breadth-edges]');
|
||
if(eg && Math.random()<0.5){
|
||
let n=parseInt(eg.textContent,10)||14;
|
||
n=Math.max(9,Math.min(19,n+(up?1:-1)));
|
||
eg.textContent=String(n);
|
||
}
|
||
}
|
||
|
||
nudge(c, forceUp){
|
||
const fmt=c.getAttribute('data-fmt');
|
||
const cur=parseFloat(c.textContent.replace(/[^0-9.\-]/g,''));
|
||
if(isNaN(cur)) return;
|
||
let up = (forceUp===undefined) ? (Math.random()<0.5) : !!forceUp;
|
||
let next=cur;
|
||
if(fmt==='line'){next=cur+(up?0.5:-0.5);c.textContent=next.toFixed(1);}
|
||
else if(fmt==='score'){next=cur+(up? (Math.random()<0.5?2:3):0);if(next===cur)up=true;c.textContent=String(Math.round(next));}
|
||
else if(fmt==='odds'){const step=up?2:-2;next=cur+step*2;c.textContent=(next>0?'+':'')+Math.round(next);}
|
||
else if(fmt==='edge'||fmt==='pct'){next=cur+(up?0.2:-0.2);const s=next>=0?'+':'';c.textContent=s+next.toFixed(1)+'%';
|
||
c.style.color = next>=0 ? '#00D4A0' : '#FF4757';}
|
||
// flash — the reaction to truth
|
||
c.classList.remove('rx-up','rx-down');
|
||
void c.offsetWidth;
|
||
c.classList.add(up?'rx-up':'rx-down');
|
||
setTimeout(()=>{c.classList.remove('rx-up','rx-down');},760);
|
||
}
|
||
|
||
componentWillUnmount(){
|
||
clearInterval(this._clock);
|
||
clearInterval(this._rx);
|
||
clearTimeout(this._bootTimer);
|
||
clearInterval(this._lg);
|
||
if(this._key) document.removeEventListener('keydown',this._key);
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|