builtbykev
f549422758
Drops the updated claude.ai/design bundle into specs/design-reference/ as the build reference. New since the Jul-18 export: Vyndr Price Triplet.dc.html (the reality-corrected ACT 01 — five honesty states incl. EDGE-NOT-TAKEABLE, and the projection-then-price read-card hierarchy), Vyndr Offseason.dc.html, Vyndr Intelligence.dc.html, PNG export masters, and 83 archetype glyphs (74 display + 9 classifier-legacy). Reference material only. No product code touched. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VCNgGSt5qvcLxaeQqa7Zpj
1086 lines
132 KiB
HTML
1086 lines
132 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&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}
|
||
a{color:#00D4A0;text-decoration:none}
|
||
a:hover{color:#5cf0cf}
|
||
.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
|
||
@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-glitch{0%,90%,100%{transform:translate(0,0);clip-path:inset(0 0 0 0);text-shadow:none}91%{transform:translate(-1px,0);clip-path:inset(12% 0 42% 0);text-shadow:1.2px 0 #FF4757,-1.2px 0 #00D4A0}93%{transform:translate(1px,0);clip-path:inset(58% 0 8% 0);text-shadow:-1.2px 0 #FF4757,1.2px 0 #00D4A0}95%{transform:translate(-1px,0);clip-path:inset(32% 0 30% 0);text-shadow:1px 0 #00D4A0}96%{clip-path:inset(70% 0 4% 0)}}
|
||
.rx-up{animation:vy-rxup .75s ease-out}
|
||
.rx-down{animation:vy-rxdown .75s ease-out}
|
||
</style>
|
||
</helmet>
|
||
<div ref="{{ rootRef }}" style="min-height:100vh;background:radial-gradient(900px 500px at 70% -10%,rgba(0,212,160,.05),transparent 60%),#06060B;padding:40px 32px 80px">
|
||
|
||
<div style="max-width:1400px;margin:0 auto">
|
||
<div style="display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:34px">
|
||
<div>
|
||
<div class="mono" style="font-size:11px;letter-spacing:.34em;color:#00D4A0;margin-bottom:12px">VYNDR MOBILE · COMPANION SPEC</div>
|
||
<h1 style="font-size:30px;font-weight:800;letter-spacing:-.02em">The terminal, in a pocket.</h1>
|
||
<p style="margin-top:8px;max-width:520px;color:#B8BCC8;font-size:13.5px;line-height:1.5">Same tokens, same ranked density, same earned motion — recomposed for thumbs. Tab bar owns navigation; one hero per screen survives the shrink.</p>
|
||
</div>
|
||
<a href="Vyndr System.dc.html" class="mono" style="font-size:10px;letter-spacing:.18em">◂ DESKTOP SYSTEM</a>
|
||
</div>
|
||
|
||
<div style="display:flex;flex-wrap:wrap;gap:34px;justify-content:center;align-items:flex-start">
|
||
|
||
<!-- ============ SCREEN 1 · TERMINAL ============ -->
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#707080;margin-bottom:12px;text-align:center">01 · TERMINAL</div>
|
||
<x-import component-from-global-scope="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="390px,844px">
|
||
<div style="display:flex;flex-direction:column;height:100%;background:#06060B;font-family:'Inter',system-ui,sans-serif;color:#F0F0F0;padding-top:54px">
|
||
<!-- app bar -->
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid #14141E">
|
||
<div style="display:flex;align-items:center;gap:9px">
|
||
<svg width="24" height="24" viewBox="0 0 32 32" fill="none"><rect x="1" y="1" width="30" height="30" rx="7" fill="#0E0E14" stroke="#2A2A38" stroke-width="1"></rect><path d="M8 9 L16 24 L24 9" fill="none" stroke="#F0F0F0" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16 24 L24 9" fill="none" stroke="#00D4A0" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"></path><circle cx="24" cy="9" r="2" fill="#00D4A0"></circle></svg>
|
||
<span class="mono" style="font-weight:800;font-size:14px;letter-spacing:.26em;animation:vy-glitch 6.5s steps(1) infinite">VYND<span style="color:#00D4A0">R</span></span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:7px">
|
||
<span style="width:6px;height:6px;border-radius:50%;background:#00D4A0;animation:vy-syncdot 1.4s ease-in-out infinite"></span>
|
||
<span class="mono" data-sync-clock style="font-size:10px;color:#B8BCC8;letter-spacing:.06em">--:--:--</span>
|
||
</div>
|
||
</div>
|
||
<!-- breadth strip -->
|
||
<div style="display:flex;align-items:center;gap:18px;padding:10px 16px;border-bottom:1px solid #14141E">
|
||
<span class="mono" style="font-size:9.5px;letter-spacing:.08em;color:#707080">EDGES <span data-react data-fmt="int" style="color:#F0F0F0;font-weight:700;font-size:11px;padding:1px 3px;border-radius:4px">14</span></span>
|
||
<span class="mono" style="font-size:9.5px;letter-spacing:.08em;color:#707080">AVG CLV <span data-react data-fmt="edge" style="color:#00D4A0;font-weight:700;font-size:11px;padding:1px 3px;border-radius:4px">+2.8%</span></span>
|
||
<span class="mono" style="font-size:9.5px;letter-spacing:.08em;color:#707080;margin-left:auto">47 GAMES</span>
|
||
</div>
|
||
<!-- board -->
|
||
<div style="flex:1;overflow:hidden">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:12px 16px 8px">
|
||
<span class="mono" style="font-size:10px;letter-spacing:.24em;color:#F0F0F0;font-weight:700">EDGE BOARD</span>
|
||
<span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#707080">EDGE ▼</span>
|
||
</div>
|
||
<!-- rows -->
|
||
<div style="display:flex;align-items:center;gap:10px;padding:11px 16px;border-top:1px solid #101018;box-shadow:inset 2px 0 0 rgba(0,212,160,.55)">
|
||
<span class="mono" style="font-size:10px;color:#00D4A0;font-weight:700;width:16px">01</span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:700">Jokić <span style="color:#B8BCC8;font-weight:500">o27.5 PTS</span></div><div class="mono" style="font-size:8px;letter-spacing:.1em;color:#707080;margin-top:2px">NBA · <span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#0E4DA4,#4C8BF5);vertical-align:-1.5px;margin-right:3px"></span>DEN @ <span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#0C2340,#236192);vertical-align:-1.5px;margin-right:3px"></span>MIN</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;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" data-react data-fmt="edge" style="font-size:12px;font-weight:700;color:#00D4A0;width:48px;text-align:right;padding:1px 3px;border-radius:4px">+8.4%</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:10px;padding:11px 16px;border-top:1px solid #101018">
|
||
<span class="mono" style="font-size:10px;color:#707080;font-weight:600;width:16px">02</span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:700">Skenes <span style="color:#B8BCC8;font-weight:500">o6.5 K</span></div><div class="mono" style="font-size:8px;letter-spacing:.1em;color:#707080;margin-top:2px">MLB · <span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#2b2b2b,#c9a227);vertical-align:-1.5px;margin-right:3px"></span>PIT @ <span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#0E3386,#CC3433);vertical-align:-1.5px;margin-right:3px"></span>CHC</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;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" data-react data-fmt="edge" style="font-size:12px;font-weight:700;color:#00D4A0;width:48px;text-align:right;padding:1px 3px;border-radius:4px">+6.1%</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:10px;padding:11px 16px;border-top:1px solid #101018;box-shadow:inset 2px 0 0 rgba(0,212,160,.4)">
|
||
<span class="mono" style="font-size:10px;color:#707080;font-weight:600;width:16px">03</span>
|
||
<div style="flex:1;min-width:0"><div style="display:flex;align-items:center;gap:6px"><span style="width:6px;height:6px;border-radius:50%;background:#00D4A0;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:8px;letter-spacing:.1em;color:#00D4A0;margin-top:2px">LIVE · Q3 4:12</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;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" data-react data-fmt="edge" style="font-size:12px;font-weight:700;color:#00D4A0;width:48px;text-align:right;padding:1px 3px;border-radius:4px">+5.2%</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:10px;padding:11px 16px;border-top:1px solid #101018;opacity:.85">
|
||
<span class="mono" style="font-size:10px;color:#707080;font-weight:600;width:16px">04</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:8px;letter-spacing:.1em;color:#707080;margin-top:2px">MLB · <span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#1b3a6b,#0C2340);vertical-align:-1.5px;margin-right:3px"></span>NYY @ <span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#BD3039,#6b1c22);vertical-align:-1.5px;margin-right:3px"></span>BOS</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:5px;background:#14141E;color:#F0F0F0;font-weight:800;font-size:10px;border:1px solid #1E1E2A">B</span>
|
||
<span class="mono" data-react data-fmt="edge" style="font-size:12px;font-weight:700;color:#00D4A0;width:48px;text-align:right;padding:1px 3px;border-radius:4px">+3.4%</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:10px;padding:11px 16px;border-top:1px solid #101018;opacity:.7">
|
||
<span class="mono" style="font-size:10px;color:#707080;font-weight:600;width:16px">05</span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:600">McDavid <span style="color:#B8BCC8;font-weight:500">o1.5 PTS</span></div><div class="mono" style="font-size:8px;letter-spacing:.1em;color:#707080;margin-top:2px">NHL · EDM @ CGY</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:5px;background:#14141E;color:#F0F0F0;font-weight:800;font-size:10px;border:1px solid #1E1E2A">B</span>
|
||
<span class="mono" data-react data-fmt="edge" style="font-size:12px;font-weight:700;color:#00D4A0;width:48px;text-align:right;padding:1px 3px;border-radius:4px">+3.0%</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:10px;padding:11px 16px;border-top:1px solid #101018;opacity:.55">
|
||
<span class="mono" style="font-size:10px;color:#707080;font-weight:600;width:16px">06</span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:600">LaVine <span style="color:#B8BCC8;font-weight:500">o22.5 PTS</span></div><div class="mono" style="font-size:8px;letter-spacing:.1em;color:#707080;margin-top:2px">NBA · <span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#CE1141,#6d0a22);vertical-align:-1.5px;margin-right:3px"></span>CHI @ <span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#00471B,#0a7a3a);vertical-align:-1.5px;margin-right:3px"></span>MIL</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:5px;background:rgba(255,71,87,.1);color:#FF4757;font-weight:800;font-size:10px;border:1px solid rgba(255,71,87,.28)">D</span>
|
||
<span class="mono" style="font-size:12px;font-weight:700;color:#FF4757;width:48px;text-align:right">-1.2%</span>
|
||
</div>
|
||
</div>
|
||
<!-- wire -->
|
||
<div style="display:flex;align-items:center;gap:9px;padding:9px 16px;border-top:1px solid #14141E;background:#08080D">
|
||
<span class="mono" style="font-size:8px;letter-spacing:.22em;color:#00D4A0;font-weight:800;flex:none">WIRE</span>
|
||
<span class="mono" data-wire style="font-size:9.5px;color:#B8BCC8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1">Jokić 25.5 → 27.5 since open. Grade holds A+.</span>
|
||
</div>
|
||
<!-- tab bar -->
|
||
<div style="display:flex;align-items:center;justify-content:space-around;padding:10px 8px 6px;border-top:1px solid #14141E;background:rgba(6,6,11,.9)">
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px;padding:2px 0">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path stroke="#00D4A0" stroke-width="2" stroke-linecap="round" d="M4 6h16M4 12h16M4 18h9"/></svg>
|
||
<span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#00D4A0;font-weight:700">BOARD</span>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px;padding:2px 0">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path stroke="#707080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M4 16l5-5 3 3 8-8"/></svg>
|
||
<span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">STREAKS</span>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px;padding:2px 0">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path stroke="#707080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 5v14M5 12h14"/></svg>
|
||
<span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">BUILD</span>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px;padding:2px 0">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path stroke="#707080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M5 4h14v16H5zM8 9h8M8 13h6"/></svg>
|
||
<span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">LEDGER</span>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px;padding:2px 0">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="9" r="3.4" stroke="#707080" stroke-width="2"/><path stroke="#707080" stroke-width="2" stroke-linecap="round" d="M5.5 19c1.4-3 4-4.4 6.5-4.4S17.1 16 18.5 19"/></svg>
|
||
<span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">/u</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</x-import>
|
||
</div>
|
||
|
||
<!-- ============ SCREEN 2 · GRADE REVEAL ============ -->
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#707080;margin-bottom:12px;text-align:center">02 · GRADE REVEAL</div>
|
||
<x-import component-from-global-scope="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="390px,844px">
|
||
<div style="display:flex;flex-direction:column;height:100%;background:#06060B;font-family:'Inter',system-ui,sans-serif;color:#F0F0F0;padding-top:54px">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid #14141E">
|
||
<span class="mono" style="font-size:11px;color:#B8BCC8">◂ BOARD</span>
|
||
<span class="mono" style="font-size:9px;letter-spacing:.2em;color:#00D4A0">CLV-VERIFIED</span>
|
||
</div>
|
||
<div style="flex:1;overflow:hidden;padding:22px 18px">
|
||
<div class="mono" style="font-size:9.5px;letter-spacing:.26em;color:#707080;margin-bottom:18px">DECLASSIFIED · TOP GRADE</div>
|
||
<div style="display:flex;align-items:center;gap:18px">
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:5px">
|
||
<div class="mono" style="font-size:74px;line-height:.82;font-weight:800;color:#00D4A0;text-shadow:0 0 30px rgba(0,212,160,.5)">A+</div>
|
||
<div class="mono" style="font-size:8.5px;letter-spacing:.24em;color:#707080">TIER</div>
|
||
</div>
|
||
<div style="flex:1;min-width:0">
|
||
<div style="display:flex;align-items:center;gap:9px;margin-bottom:7px">
|
||
<span style="width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,#0E4DA4,#4C8BF5);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;color:#fff">NJ</span>
|
||
<div><div style="font-weight:700;font-size:14.5px;line-height:1.1">Nikola Jokić</div><div class="mono" style="font-size:9px;color:#707080">C · DEN · <span style="color:#B8BCC8">CONFIRMED</span></div></div>
|
||
</div>
|
||
<div style="font-size:14px;font-weight:600">Over 27.5 Points</div>
|
||
<div style="display:flex;align-items:center;gap:8px;margin-top:6px"><span class="mono" style="font-size:10px;color:#B8BCC8">DK <span style="color:#F0F0F0">-114</span></span><span class="mono" style="font-size:11px;color:#00D4A0">▲</span><span class="mono" style="font-size:9px;color:#707080">opened 25.5</span></div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:18px">
|
||
<svg width="100%" height="38" viewBox="0 0 220 38" preserveAspectRatio="none" style="display:block">
|
||
<polyline points="0,30 30,30 55,27 80,28 105,20 130,19 155,11 185,9 214,5" fill="none" stroke="#00D4A0" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round" opacity=".9"></polyline>
|
||
<polyline points="0,30 30,30 55,27 80,28 105,20 130,19 155,11 185,9 214,5 214,38 0,38" fill="rgba(0,212,160,.07)" stroke="none"></polyline>
|
||
<circle cx="214" cy="5" r="2.6" fill="#00D4A0" style="animation:vy-livedot 1.5s ease-in-out infinite"></circle>
|
||
</svg>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-top:4px">
|
||
<span class="mono" style="font-size:8px;letter-spacing:.1em;color:#4a4a58">OPEN 25.5</span>
|
||
<span class="mono" style="font-size:8px;letter-spacing:.1em;color:#00D4A0">STEAM ▲</span>
|
||
<span class="mono" style="font-size:8px;letter-spacing:.1em;color:#4a4a58">NOW 27.5</span>
|
||
</div>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:18px;background:#1E1E2A;border:1px solid #1E1E2A;border-radius:10px;overflow:hidden">
|
||
<div style="background:#0E0E14;padding:11px 12px"><div class="mono" style="font-size:8.5px;letter-spacing:.16em;color:#707080;margin-bottom:5px">EDGE</div><div class="mono" data-react data-fmt="edge" style="font-size:17px;font-weight:800;color:#00D4A0;padding:1px 3px;border-radius:4px">+8.4%</div></div>
|
||
<div style="background:#0E0E14;padding:11px 12px"><div class="mono" style="font-size:8.5px;letter-spacing:.16em;color:#707080;margin-bottom:5px">L10 HIT</div><div class="mono" style="font-size:17px;font-weight:800;color:#F0F0F0">8<span style="color:#707080;font-size:11px">/10</span></div></div>
|
||
<div style="background:#0E0E14;padding:11px 12px"><div class="mono" style="font-size:8.5px;letter-spacing:.16em;color:#707080;margin-bottom:5px">PROJ</div><div class="mono" style="font-size:17px;font-weight:800;color:#F0F0F0">30.8</div></div>
|
||
</div>
|
||
<div style="margin-top:14px;background:#0A0A10;border:1px solid #14141E;border-radius:10px;padding:13px 14px">
|
||
<div style="display:flex;align-items:center;gap:7px;margin-bottom:7px"><span style="width:4px;height:4px;border-radius:50%;background:#00D4A0"></span><span class="mono" style="font-size:8.5px;letter-spacing:.22em;color:#B8BCC8">VYNDR INTELLIGENCE</span></div>
|
||
<p style="font-size:12px;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> boards to <span style="color:#F0F0F0">CONDUCTOR</span>-type bigs. Line lagged the matchup by <span class="mono" style="color:#00D4A0">2.0</span>.</p>
|
||
</div>
|
||
<button style="cursor:pointer;width:100%;margin-top:16px;height:46px;border-radius:12px;background:#00D4A0;border:none;color:#06060B;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:11.5px;letter-spacing:.1em">SHARE THE READ</button>
|
||
<button style="cursor:pointer;width:100%;margin-top:9px;height:44px;border-radius:12px;background:transparent;border:1px solid #2A2A38;color:#B8BCC8;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:10.5px;letter-spacing:.1em">ADD TO SLIP</button>
|
||
</div>
|
||
</div>
|
||
</x-import>
|
||
</div>
|
||
|
||
<!-- ============ SCREEN 4 · BUILD (SLIP) ============ -->
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#707080;margin-bottom:12px;text-align:center">03 · BUILD</div>
|
||
<x-import component-from-global-scope="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="390px,844px">
|
||
<div style="display:flex;flex-direction:column;height:100%;background:#06060B;font-family:'Inter',system-ui,sans-serif;color:#F0F0F0;padding-top:54px">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid #14141E">
|
||
<span class="mono" style="font-size:11px;letter-spacing:.22em;color:#F0F0F0;font-weight:700">PARLAY SLIP</span>
|
||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080">2 LEGS</span>
|
||
</div>
|
||
<div style="flex:1;overflow:hidden;padding:14px 16px">
|
||
<div style="display:flex;align-items:center;gap:11px;padding:13px 14px;border-radius:12px;background:rgba(0,212,160,.05);border:1px solid #1E1E2A;box-shadow:inset 2px 0 0 #00D4A0">
|
||
<span style="width:20px;height:20px;flex:none;border-radius:6px;background:#00D4A0;display:flex;align-items:center;justify-content:center"><svg width="12" height="12" 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></span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13.5px;font-weight:600">Jokić o27.5 PTS</div><div class="mono" style="font-size:8.5px;color:#707080;margin-top:2px">NBA · <span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#0E4DA4,#4C8BF5);vertical-align:-1.5px;margin-right:3px"></span>DEN @ <span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#0C2340,#236192);vertical-align:-1.5px;margin-right:3px"></span>MIN</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;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">+105</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:13px 14px;border-radius:12px;background:rgba(0,212,160,.05);border:1px solid #1E1E2A;box-shadow:inset 2px 0 0 #00D4A0;margin-top:9px">
|
||
<span style="width:20px;height:20px;flex:none;border-radius:6px;background:#00D4A0;display:flex;align-items:center;justify-content:center"><svg width="12" height="12" 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></span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13.5px;font-weight:600">Edwards o5.5 AST</div><div class="mono" style="font-size:8.5px;color:#707080;margin-top:2px">NBA · <span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#0E4DA4,#4C8BF5);vertical-align:-1.5px;margin-right:3px"></span>DEN @ <span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#0C2340,#236192);vertical-align:-1.5px;margin-right:3px"></span>MIN</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;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">+130</span>
|
||
</div>
|
||
<div style="margin-top:12px;padding:12px 13px;border-radius:11px;background:rgba(255,179,71,.08);border:1px solid rgba(255,179,71,.28)">
|
||
<div style="display:flex;align-items:center;gap:7px;margin-bottom:5px"><svg width="12" height="12" 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:8.5px;letter-spacing:.14em;color:#FFB347;font-weight:700">SAME-GAME CORRELATION</span></div>
|
||
<span class="mono" style="font-size:9.5px;line-height:1.45;color:#B8BCC8;display:block">DEN @ MIN — legs move together. Real edge shrinks; stake trimmed to size the true risk.</span>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#14141E;border:1px solid #14141E;border-radius:12px;overflow:hidden;margin-top:12px">
|
||
<div style="background:#0A0A10;padding:12px 13px"><div class="mono" style="font-size:8px;letter-spacing:.14em;color:#707080;margin-bottom:5px">COMBINED</div><div class="mono" style="font-size:16px;font-weight:800;color:#F0F0F0">+371</div></div>
|
||
<div style="background:#0A0A10;padding:12px 13px"><div class="mono" style="font-size:8px;letter-spacing:.14em;color:#707080;margin-bottom:5px">GRADE</div><div class="mono" style="font-size:16px;font-weight:800;color:#FFB347">A-</div></div>
|
||
<div style="background:#0A0A10;padding:12px 13px"><div class="mono" style="font-size:8px;letter-spacing:.14em;color:#707080;margin-bottom:5px">STAKE</div><div class="mono" style="font-size:16px;font-weight:800;color:#FFB347">0.4u</div></div>
|
||
</div>
|
||
<div style="margin-top:14px;display:flex;flex-direction:column;gap:8px">
|
||
<div class="mono" style="font-size:8.5px;letter-spacing:.18em;color:#4a4a58">ADD FROM TONIGHT'S A/B READS</div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:12px;background:#0A0A10;border:1px solid #1E1E2A">
|
||
<span style="width:20px;height:20px;flex:none;border-radius:6px;border:1.5px solid #2A2A38"></span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:600;color:#B8BCC8">Skenes o6.5 K</div></div>
|
||
<span class="mono" style="font-size:11px;color:#B8BCC8">-120</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:12px;background:#0A0A10;border:1px solid #1E1E2A">
|
||
<span style="width:20px;height:20px;flex:none;border-radius:6px;border:1.5px solid #2A2A38"></span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:600;color:#B8BCC8">Judge o1.5 TB</div></div>
|
||
<span class="mono" style="font-size:11px;color:#B8BCC8">+140</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="padding:10px 16px 8px">
|
||
<button style="cursor:pointer;width:100%;height:46px;border-radius:12px;background:#00D4A0;border:none;color:#06060B;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:11.5px;letter-spacing:.1em">TRACK SLIP · 0.4u</button>
|
||
</div>
|
||
</div>
|
||
</x-import>
|
||
</div>
|
||
|
||
<!-- ============ SCREEN 5 · LIVE ACTIVITY ============ -->
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#707080;margin-bottom:12px;text-align:center">04 · LOCK SCREEN · LIVE ACTIVITY</div>
|
||
<x-import component-from-global-scope="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="390px,844px">
|
||
<div style="display:flex;flex-direction:column;height:100%;background:radial-gradient(500px 400px at 50% -5%,rgba(0,212,160,.08),transparent 55%),#06060B;font-family:'Inter',system-ui,sans-serif;color:#F0F0F0;padding-top:54px">
|
||
<!-- dynamic island pill -->
|
||
<div style="display:flex;justify-content:center;margin-top:2px">
|
||
<div style="display:flex;align-items:center;gap:9px;height:36px;padding:0 15px;border-radius:20px;background:#000;border:1px solid #14141E">
|
||
<svg width="17" height="17" viewBox="0 0 32 32" fill="none"><path d="M8 9 L16 24 L24 9" fill="none" stroke="#F0F0F0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16 24 L24 9" fill="none" stroke="#00D4A0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>
|
||
<span class="mono" style="font-size:10px;color:#B8BCC8">Edwards <span style="color:#00D4A0;font-weight:700">A</span></span>
|
||
<span style="width:5px;height:5px;border-radius:50%;background:#00D4A0;animation:vy-livedot 1.5s ease-in-out infinite"></span>
|
||
</div>
|
||
</div>
|
||
<!-- lock clock -->
|
||
<div style="text-align:center;margin-top:26px">
|
||
<div class="mono" style="font-size:13px;letter-spacing:.1em;color:#B8BCC8">Wednesday, July 16</div>
|
||
<div style="font-size:76px;font-weight:700;letter-spacing:-.02em;line-height:1;margin-top:4px;font-family:'Inter',sans-serif">9:41</div>
|
||
</div>
|
||
<!-- live activity card -->
|
||
<div style="margin:34px 14px 0;border-radius:22px;background:rgba(14,14,20,.86);backdrop-filter:blur(20px);border:1px solid #1E1E2A;overflow:hidden">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #14141E">
|
||
<div style="display:flex;align-items:center;gap:8px">
|
||
<svg width="18" height="18" viewBox="0 0 32 32" fill="none"><rect x="1" y="1" width="30" height="30" rx="7" fill="#0E0E14" stroke="#2A2A38" stroke-width="1"></rect><path d="M8 9 L16 24 L24 9" fill="none" stroke="#F0F0F0" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16 24 L24 9" fill="none" stroke="#00D4A0" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"></path><circle cx="24" cy="9" r="2" fill="#00D4A0"></circle></svg>
|
||
<span class="mono" style="font-size:10px;letter-spacing:.22em;font-weight:800">VYND<span style="color:#00D4A0">R</span></span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:6px"><span style="width:6px;height:6px;border-radius:50%;background:#00D4A0;animation:vy-livedot 1.5s ease-in-out infinite"></span><span class="mono" style="font-size:9px;letter-spacing:.16em;color:#00D4A0;font-weight:700">LIVE · Q3 4:12</span></div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:16px;padding:14px 16px">
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:3px">
|
||
<span class="mono" data-react data-fmt="grade" style="font-size:40px;line-height:.85;font-weight:800;color:#00D4A0;text-shadow:0 0 20px rgba(0,212,160,.5);padding:1px 3px;border-radius:5px">A</span>
|
||
<span class="mono" style="font-size:7.5px;letter-spacing:.2em;color:#707080">LIVE TIER</span>
|
||
</div>
|
||
<div style="flex:1;min-width:0">
|
||
<div style="font-size:14px;font-weight:700">Edwards o5.5 AST</div>
|
||
<div class="mono" style="font-size:9.5px;color:#B8BCC8;margin-top:3px">4 AST · pacing <span style="color:#00D4A0">▲</span> · usage +6%</div>
|
||
<div style="display:flex;align-items:center;gap:5px;margin-top:9px">
|
||
<span style="flex:1;height:4px;border-radius:2px;background:#00D4A0"></span>
|
||
<span style="flex:1;height:4px;border-radius:2px;background:#00D4A0"></span>
|
||
<span style="flex:1;height:4px;border-radius:2px;background:#00D4A0"></span>
|
||
<span style="flex:1;height:4px;border-radius:2px;background:#00D4A0;opacity:.5"></span>
|
||
<span style="flex:1;height:4px;border-radius:2px;background:#2A2A38"></span>
|
||
<span style="flex:1;height:4px;border-radius:2px;background:#2A2A38"></span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-top:4px"><span class="mono" style="font-size:7.5px;letter-spacing:.1em;color:#4a4a58">4 OF 6</span><span class="mono" style="font-size:7.5px;letter-spacing:.1em;color:#707080">NEEDS 2 · 16 MIN LEFT</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- second notification -->
|
||
<div style="margin:10px 14px 0;border-radius:18px;background:rgba(14,14,20,.7);backdrop-filter:blur(20px);border:1px solid #14141E;padding:12px 16px;display:flex;align-items:center;gap:11px">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path stroke="#FFB347" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 3 2 20h20L12 3zM12 10v4M12 17v.5"/></svg>
|
||
<div style="flex:1;min-width:0"><span class="mono" style="font-size:9px;letter-spacing:.14em;color:#FFB347;font-weight:700">STEAM ALERT</span><div class="mono" style="font-size:10px;color:#B8BCC8;margin-top:2px">Skenes K line 6.5 → 7.5 — grade re-check at first pitch.</div></div>
|
||
<span class="mono" style="font-size:8.5px;color:#4a4a58">now</span>
|
||
</div>
|
||
<div style="flex:1"></div>
|
||
<div class="mono" style="text-align:center;font-size:9px;letter-spacing:.18em;color:#4a4a58;padding-bottom:18px">THE TERMINAL WATCHES WHILE YOU DON'T</div>
|
||
</div>
|
||
</x-import>
|
||
</div>
|
||
|
||
<!-- ============ SCREEN 3 · /u PROFILE ============ -->
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#707080;margin-bottom:12px;text-align:center">05 · /u RECORD</div>
|
||
<x-import component-from-global-scope="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="390px,844px">
|
||
<div style="display:flex;flex-direction:column;height:100%;background:#06060B;font-family:'Inter',system-ui,sans-serif;color:#F0F0F0;padding-top:54px">
|
||
<div style="flex:1;overflow:hidden;padding:18px 18px 0">
|
||
<div style="display:flex;align-items:center;gap:13px;margin-bottom:16px">
|
||
<div style="width:54px;height:54px;flex:none;border-radius:13px;background:linear-gradient(135deg,#00D4A0,#0a5f4c);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:18px;color:#06060B">EH</div>
|
||
<div style="flex:1;min-width:0">
|
||
<div style="display:flex;align-items:center;gap:7px"><span style="font-weight:800;font-size:17px">@edgehunter</span></div>
|
||
<div style="display:flex;align-items:center;gap:7px;margin-top:4px">
|
||
<span class="mono" style="display:inline-flex;align-items:center;gap:5px;height:18px;padding:0 7px;border-radius:5px;background:rgba(0,212,160,.12);border:1px solid rgba(0,212,160,.35);color:#00D4A0;font-size:8px;font-weight:700;letter-spacing:.08em"><span style="width:4px;height:4px;border-radius:50%;background:#00D4A0"></span>CLV-VERIFIED</span>
|
||
<span class="mono" style="font-size:9px;color:#707080">412 graded</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#14141E;border:1px solid #14141E;border-radius:12px;overflow:hidden">
|
||
<div style="background:#0C0C12;padding:14px 16px"><div class="mono" style="font-size:8.5px;letter-spacing:.16em;color:#707080;margin-bottom:6px">HIT RATE</div><div class="mono" style="font-size:24px;font-weight:800;color:#00D4A0;line-height:.9">64.2<span style="font-size:13px">%</span></div></div>
|
||
<div style="background:#0C0C12;padding:14px 16px"><div class="mono" style="font-size:8.5px;letter-spacing:.16em;color:#707080;margin-bottom:6px">UNITS</div><div class="mono" style="font-size:24px;font-weight:800;color:#00D4A0;line-height:.9">+38.6<span style="font-size:13px;color:#707080">u</span></div></div>
|
||
<div style="background:#0C0C12;padding:14px 16px"><div class="mono" style="font-size:8.5px;letter-spacing:.16em;color:#707080;margin-bottom:6px">ROI</div><div class="mono" style="font-size:24px;font-weight:800;color:#F0F0F0;line-height:.9">+11.4<span style="font-size:13px;color:#707080">%</span></div></div>
|
||
<div style="background:#0C0C12;padding:14px 16px"><div class="mono" style="font-size:8.5px;letter-spacing:.16em;color:#707080;margin-bottom:6px">AVG CLV</div><div class="mono" style="font-size:24px;font-weight:800;color:#F0F0F0;line-height:.9">+3.1<span style="font-size:13px;color:#707080">%</span></div></div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin:18px 0 10px">
|
||
<span class="mono" style="font-size:9px;letter-spacing:.18em;color:#B8BCC8">GRADE HISTORY · L18</span>
|
||
<span style="display:flex;align-items:center;gap:9px"><span style="display:flex;align-items:center;gap:4px"><span style="width:7px;height:7px;border-radius:2px;background:#00D4A0"></span><span class="mono" style="font-size:8px;color:#707080">HIT</span></span><span style="display:flex;align-items:center;gap:4px"><span style="width:7px;height:7px;border-radius:2px;background:#FF4757"></span><span class="mono" style="font-size:8px;color:#707080">MISS</span></span></span>
|
||
</div>
|
||
<div ref="{{ gradeHistoryRef }}" style="display:grid;grid-template-columns:repeat(6,1fr);gap:6px"></div>
|
||
<div class="mono" style="font-size:9px;letter-spacing:.18em;color:#B8BCC8;margin:18px 0 10px">ARCHETYPE FINGERPRINT</div>
|
||
<div style="display:flex;flex-direction:column;gap:10px">
|
||
<div><div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px"><span class="mono" style="font-size:9.5px;color:#FF6B4A;font-weight:700;letter-spacing:.06em">TORCH</span><span class="mono" style="font-size:9.5px;color:#F0F0F0;font-weight:700">32%</span></div><div style="height:5px;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:4px"><span class="mono" style="font-size:9.5px;color:#FF9F45;font-weight:700;letter-spacing:.06em">BOMBER</span><span class="mono" style="font-size:9.5px;color:#F0F0F0;font-weight:700">24%</span></div><div style="height:5px;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:4px"><span class="mono" style="font-size:9.5px;color:#7C5CFF;font-weight:700;letter-spacing:.06em">ALPHA</span><span class="mono" style="font-size:9.5px;color:#F0F0F0;font-weight:700">18%</span></div><div style="height:5px;border-radius:3px;background:#14141E;overflow:hidden"><div style="width:18%;height:100%;background:#7C5CFF"></div></div></div>
|
||
</div>
|
||
</div>
|
||
<div style="padding:12px 18px 8px">
|
||
<button style="cursor:pointer;width:100%;height:46px;border-radius:12px;background:#00D4A0;border:none;color:#06060B;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:11.5px;letter-spacing:.1em">SHARE MY RECORD</button>
|
||
</div>
|
||
</div>
|
||
</x-import>
|
||
</div>
|
||
|
||
<!-- ============ 06 LANDING ============ -->
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#707080;margin-bottom:12px;text-align:center">06 · LANDING</div>
|
||
<x-import component-from-global-scope="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="390px,844px">
|
||
<div style="display:flex;flex-direction:column;height:100%;background:radial-gradient(500px 380px at 70% -5%,rgba(0,212,160,.07),transparent 60%),#06060B;font-family:'Inter',system-ui,sans-serif;color:#F0F0F0;padding-top:54px">
|
||
<div style="padding:26px 22px 0">
|
||
<div style="display:flex;align-items:center;gap:10px">
|
||
<svg width="30" height="30" viewBox="0 0 32 32" fill="none"><rect x="1" y="1" width="30" height="30" rx="7" fill="#0E0E14" stroke="#2A2A38" stroke-width="1"></rect><path d="M8 9 L16 24 L24 9" fill="none" stroke="#F0F0F0" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16 24 L24 9" fill="none" stroke="#00D4A0" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"></path><circle cx="24" cy="9" r="2" fill="#00D4A0"></circle></svg>
|
||
<span class="mono" style="font-weight:800;font-size:16px;letter-spacing:.28em;animation:vy-glitch 6.5s steps(1) infinite">VYND<span style="color:#00D4A0">R</span></span>
|
||
</div>
|
||
<h1 style="font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.05;margin-top:26px">Every line,<br/>graded before<br/>you bet it.</h1>
|
||
<p style="margin-top:12px;color:#B8BCC8;font-size:14px;line-height:1.5;max-width:300px">The sports intelligence terminal. 312 props graded tonight, every grade settled in public.</p>
|
||
</div>
|
||
<!-- live proof -->
|
||
<div style="margin:22px 18px 0;border-radius:14px;background:#0A0A10;border:1px solid #1E1E2A;overflow:hidden">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #14141E">
|
||
<span class="mono" style="font-size:8.5px;letter-spacing:.22em;color:#F0F0F0;font-weight:700">LIVE · TOP OF THE BOARD</span>
|
||
<span style="display:flex;align-items:center;gap:5px"><span style="width:5px;height:5px;border-radius:50%;background:#00D4A0;animation:vy-syncdot 1.4s ease-in-out infinite"></span><span class="mono" data-sync-clock style="font-size:9px;color:#B8BCC8">--:--:--</span></span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:10px;padding:11px 14px;box-shadow:inset 2px 0 0 rgba(0,212,160,.55)">
|
||
<div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:700">Jokić <span style="color:#B8BCC8;font-weight:500">o27.5 PTS</span></div><div class="mono" style="font-size:8px;color:#707080;margin-top:2px">NBA · <span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#0E4DA4,#4C8BF5);vertical-align:-1.5px;margin-right:3px"></span>DEN @ <span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#0C2340,#236192);vertical-align:-1.5px;margin-right:3px"></span>MIN</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;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" data-react data-fmt="edge" style="font-size:12px;font-weight:700;color:#00D4A0;padding:1px 3px;border-radius:4px">+8.4%</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:10px;padding:11px 14px;border-top:1px solid #101018;opacity:.8">
|
||
<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:8px;color:#707080;margin-top:2px">MLB · <span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#2b2b2b,#c9a227);vertical-align:-1.5px;margin-right:3px"></span>PIT @ <span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#0E3386,#CC3433);vertical-align:-1.5px;margin-right:3px"></span>CHC</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;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:12px;font-weight:700;color:#00D4A0">+6.1%</span>
|
||
</div>
|
||
</div>
|
||
<!-- trust row -->
|
||
<div style="display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px">
|
||
<span class="mono" style="display:inline-flex;align-items:center;gap:5px;font-size:8.5px;letter-spacing:.1em;color:#00D4A0"><span style="width:4px;height:4px;border-radius:50%;background:#00D4A0"></span>CLV-VERIFIED</span>
|
||
<span class="mono" style="font-size:8.5px;letter-spacing:.1em;color:#707080">RECORD PUBLIC</span>
|
||
<span class="mono" style="font-size:8.5px;letter-spacing:.1em;color:#707080">MISSES INCLUDED</span>
|
||
</div>
|
||
<div style="flex:1"></div>
|
||
<div style="padding:0 18px 14px">
|
||
<button style="cursor:pointer;width:100%;height:48px;border-radius:12px;background:#00D4A0;border:none;color:#06060B;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:12px;letter-spacing:.1em">OPEN THE TERMINAL</button>
|
||
<button style="cursor:pointer;width:100%;margin-top:9px;height:44px;border-radius:12px;background:transparent;border:1px solid #2A2A38;color:#B8BCC8;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:10.5px;letter-spacing:.1em">SEE THE PUBLIC RECORD</button>
|
||
</div>
|
||
</div>
|
||
</x-import>
|
||
</div>
|
||
|
||
<!-- ============ 07 PRICING ============ -->
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#707080;margin-bottom:12px;text-align:center">07 · PRICING</div>
|
||
<x-import component-from-global-scope="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="390px,844px">
|
||
<div style="display:flex;flex-direction:column;height:100%;background:#06060B;font-family:'Inter',system-ui,sans-serif;color:#F0F0F0;padding-top:54px">
|
||
<div style="padding:20px 18px 0;text-align:center">
|
||
<div class="mono" style="font-size:9px;letter-spacing:.3em;color:#707080">ONE DECISION</div>
|
||
<div style="display:inline-flex;border:1px solid #2A2A38;border-radius:9px;overflow:hidden;margin-top:14px">
|
||
<span class="mono" style="font-size:10px;letter-spacing:.14em;color:#707080;padding:8px 22px">FREE</span>
|
||
<span class="mono" style="font-size:10px;letter-spacing:.14em;color:#06060B;background:#00D4A0;padding:8px 22px;font-weight:800">PRO</span>
|
||
</div>
|
||
</div>
|
||
<!-- hero tier: THE DESK -->
|
||
<div style="margin:18px 16px 0;border-radius:16px;background:linear-gradient(180deg,#0F1512,#0A0A10);border:1px solid rgba(0,212,160,.4);box-shadow:0 24px 50px -30px rgba(0,212,160,.3),inset 0 1px 0 rgba(0,212,160,.12);padding:20px 18px">
|
||
<div style="display:flex;align-items:center;justify-content:space-between">
|
||
<span class="mono" style="font-size:10px;letter-spacing:.24em;color:#00D4A0;font-weight:800">THE DESK</span>
|
||
<span class="mono" style="font-size:8px;letter-spacing:.14em;color:#707080;border:1px solid #2A2A38;border-radius:5px;padding:2px 7px">ALL SPORTS</span>
|
||
</div>
|
||
<div style="display:flex;align-items:flex-end;gap:7px;margin-top:12px">
|
||
<span class="mono" style="font-size:44px;font-weight:800;line-height:.85">$44.99</span>
|
||
<span class="mono" style="font-size:12px;color:#707080;padding-bottom:4px">/mo</span>
|
||
</div>
|
||
<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"><span style="color:#00D4A0;font-weight:700">✓</span> The full edge board — every graded read, nightly</span>
|
||
<span style="display:flex;align-items:center;gap:9px;font-size:12.5px"><span style="color:#00D4A0;font-weight:700">✓</span> Live grade-shift + steam alerts on lock screen</span>
|
||
<span style="display:flex;align-items:center;gap:9px;font-size:12.5px"><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"><span style="color:#00D4A0;font-weight:700">✓</span> Correlation math on every slip</span>
|
||
</div>
|
||
<button style="cursor:pointer;width:100%;margin-top:18px;height:48px;border-radius:12px;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:8.5px;letter-spacing:.06em;color:#707080;text-align:center;margin-top:9px">cancel anytime · no trial — the free tier is the trial</div>
|
||
</div>
|
||
<!-- free tier -->
|
||
<div style="margin:12px 16px 0;border-radius:14px;background:#0A0A10;border:1px solid #1E1E2A;padding:16px 18px">
|
||
<div style="display:flex;align-items:center;justify-content:space-between">
|
||
<span class="mono" style="font-size:10px;letter-spacing:.22em;color:#B8BCC8;font-weight:700">FREE</span>
|
||
<span class="mono" style="font-size:12px;color:#707080">$0</span>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:7px;margin-top:11px">
|
||
<span style="display:flex;align-items:center;gap:9px;font-size:12px;color:#B8BCC8"><span style="color:#707080">✓</span> Live scores + the wire</span>
|
||
<span style="display:flex;align-items:center;gap:9px;font-size:12px;color:#B8BCC8"><span style="color:#707080">✓</span> Tonight's top 3 grades</span>
|
||
<span style="display:flex;align-items:center;gap:9px;font-size:12px;color:#707080"><span>—</span> Board ranks 4–47 stay sealed</span>
|
||
</div>
|
||
</div>
|
||
<div style="flex:1"></div>
|
||
<div class="mono" style="text-align:center;font-size:8.5px;letter-spacing:.16em;color:#4a4a58;padding-bottom:16px">412 GRADED · RECORD PUBLIC · MISSES INCLUDED</div>
|
||
</div>
|
||
</x-import>
|
||
</div>
|
||
|
||
<!-- ============ 08 STREAKS ============ -->
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#707080;margin-bottom:12px;text-align:center">08 · STREAKS</div>
|
||
<x-import component-from-global-scope="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="390px,844px">
|
||
<div style="display:flex;flex-direction:column;height:100%;background:#06060B;font-family:'Inter',system-ui,sans-serif;color:#F0F0F0;padding-top:54px">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid #14141E">
|
||
<span class="mono" style="font-size:11px;letter-spacing:.22em;color:#F0F0F0;font-weight:700">STREAKS</span>
|
||
<span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#707080">RANKED · LENGTH ▼</span>
|
||
</div>
|
||
<div style="flex:1;overflow:hidden;padding:14px 16px">
|
||
<!-- hero streak -->
|
||
<div style="border-radius:16px;background:linear-gradient(180deg,#0F0F17,#0A0A10);border:1px solid #2A2A38;padding:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)">
|
||
<div style="display:flex;align-items:center;gap:11px">
|
||
<div style="width:44px;height:44px;flex:none;border-radius:10px;background:linear-gradient(135deg,#552583,#8b5cc7);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:13px;color:#FDB927">LA</div>
|
||
<div style="flex:1;min-width:0">
|
||
<div style="font-weight:700;font-size:15px">Luka Dončić</div>
|
||
<div class="mono" style="font-size:9px;color:#707080;margin-top:2px">o29.5 PTS · built vs bottom-10 defenses</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:baseline;gap:9px;margin-top:14px">
|
||
<span class="mono" style="font-size:56px;font-weight:800;line-height:.85;color:#00D4A0;text-shadow:0 0 26px rgba(0,212,160,.4)">11</span>
|
||
<span class="mono" style="font-size:12px;color:#00D4A0;letter-spacing:.12em">STRAIGHT</span>
|
||
<span class="mono" style="font-size:9px;color:#707080;letter-spacing:.1em;margin-left:auto">100% · L11</span>
|
||
</div>
|
||
</div>
|
||
<!-- rows -->
|
||
<div style="display:flex;align-items:center;gap:12px;padding:14px 4px;border-bottom:1px solid #101018;margin-top:8px">
|
||
<div style="width:38px;height:38px;flex:none;border-radius:9px;background:linear-gradient(135deg,#134A8E,#3f7fd0);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:11px;color:#fff">TOR</div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13.5px;font-weight:600">Vladimir Guerrero Jr.</div><div class="mono" style="font-size:8.5px;color:#FFB347;margin-top:2px">o1.5 TB · correlated w/ team total</div></div>
|
||
<div style="text-align:right"><span class="mono" style="font-size:24px;font-weight:800;color:#FFB347;line-height:.9">7</span><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">STRAIGHT</div></div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:14px 4px;border-bottom:1px solid #101018;opacity:.85">
|
||
<div style="width:38px;height:38px;flex:none;border-radius:9px;background:linear-gradient(135deg,#1b3a6b,#0C2340);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:11px;color:#fff">NYY</div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13.5px;font-weight:600">Aaron Judge</div><div class="mono" style="font-size:8.5px;color:#707080;margin-top:2px">o1.5 TB · vs LHP only</div></div>
|
||
<div style="text-align:right"><span class="mono" style="font-size:24px;font-weight:800;color:#F0F0F0;line-height:.9">5</span><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">STRAIGHT</div></div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:14px 4px;opacity:.65">
|
||
<div style="width:38px;height:38px;flex:none;border-radius:9px;background:linear-gradient(135deg,#FC4C02,#8a2a00);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:11px;color:#fff">EDM</div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13.5px;font-weight:600">Connor McDavid</div><div class="mono" style="font-size:8.5px;color:#707080;margin-top:2px">o1.5 PTS · home only</div></div>
|
||
<div style="text-align:right"><span class="mono" style="font-size:24px;font-weight:800;color:#B8BCC8;line-height:.9">4</span><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">STRAIGHT</div></div>
|
||
</div>
|
||
</div>
|
||
<!-- tab bar: STREAKS active -->
|
||
<div style="display:flex;align-items:center;justify-content:space-around;padding:10px 8px 6px;border-top:1px solid #14141E;background:rgba(6,6,11,.9)">
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path stroke="#707080" stroke-width="2" stroke-linecap="round" d="M4 6h16M4 12h16M4 18h9"/></svg><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">BOARD</span></div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path stroke="#00D4A0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M4 16l5-5 3 3 8-8"/></svg><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#00D4A0;font-weight:700">STREAKS</span></div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path stroke="#707080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 5v14M5 12h14"/></svg><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">BUILD</span></div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path stroke="#707080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M5 4h14v16H5zM8 9h8M8 13h6"/></svg><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">LEDGER</span></div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="9" r="3.4" stroke="#707080" stroke-width="2"/><path stroke="#707080" stroke-width="2" stroke-linecap="round" d="M5.5 19c1.4-3 4-4.4 6.5-4.4S17.1 16 18.5 19"/></svg><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">/u</span></div>
|
||
</div>
|
||
</div>
|
||
</x-import>
|
||
</div>
|
||
|
||
<!-- ============ 09 LEDGER · PENDING ============ -->
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#707080;margin-bottom:12px;text-align:center">09 · LEDGER · PENDING</div>
|
||
<x-import component-from-global-scope="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="390px,844px">
|
||
<div style="display:flex;flex-direction:column;height:100%;background:#06060B;font-family:'Inter',system-ui,sans-serif;color:#F0F0F0;padding-top:54px">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid #14141E">
|
||
<span class="mono" style="font-size:11px;letter-spacing:.22em;color:#F0F0F0;font-weight:700">LEDGER</span>
|
||
<div style="display:inline-flex;border:1px solid #2A2A38;border-radius:8px;overflow:hidden">
|
||
<span class="mono" style="font-size:9px;letter-spacing:.12em;color:#06060B;background:#00D4A0;padding:5px 13px;font-weight:800">PENDING</span>
|
||
<span class="mono" style="font-size:9px;letter-spacing:.12em;color:#707080;padding:5px 13px">SETTLED</span>
|
||
</div>
|
||
</div>
|
||
<div style="flex:1;overflow:hidden;padding:4px 16px">
|
||
<div style="display:flex;align-items:center;gap:11px;padding:13px 0;border-bottom:1px solid #101018;box-shadow:inset 0 0 0 transparent">
|
||
<span style="width:6px;height:6px;flex:none;border-radius:50%;background:#00D4A0;animation:vy-livedot 1.5s ease-in-out infinite"></span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13.5px;font-weight:600">Edwards o5.5 AST</div><div class="mono" style="font-size:8.5px;color:#00D4A0;margin-top:2px">LIVE · 4 OF 6 · Q3 4:12</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;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:11px;color:#B8BCC8;width:36px;text-align:right">1.0u</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:13px 0;border-bottom:1px solid #101018">
|
||
<span style="width:6px;height:6px;flex:none;border-radius:50%;background:#2A2A38"></span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13.5px;font-weight:600">Jokić o27.5 PTS</div><div class="mono" style="font-size:8.5px;color:#707080;margin-top:2px">TIP 10:05 PM · DK -114</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;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:11px;color:#B8BCC8;width:36px;text-align:right">1.5u</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:13px 0;border-bottom:1px solid #101018">
|
||
<span style="width:6px;height:6px;flex:none;border-radius:50%;background:#2A2A38"></span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13.5px;font-weight:600">Parlay · Jokić + Edwards</div><div class="mono" style="font-size:8.5px;color:#FFB347;margin-top:2px">CORRELATED · STAKE TRIMMED</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:5px;background:#14141E;color:#FFB347;font-weight:800;font-size:10px;border:1px solid rgba(255,179,71,.3)">A-</span>
|
||
<span class="mono" style="font-size:11px;color:#B8BCC8;width:36px;text-align:right">0.4u</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:13px 0;opacity:.75">
|
||
<span style="width:6px;height:6px;flex:none;border-radius:50%;background:#2A2A38"></span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13.5px;font-weight:600">Skenes o6.5 K</div><div class="mono" style="font-size:8.5px;color:#707080;margin-top:2px">FIRST PITCH 7:10 PM</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;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:11px;color:#B8BCC8;width:36px;text-align:right">1.0u</span>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#14141E;border:1px solid #14141E;border-radius:12px;overflow:hidden;margin-top:14px">
|
||
<div style="background:#0A0A10;padding:12px 13px"><div class="mono" style="font-size:8px;letter-spacing:.14em;color:#707080;margin-bottom:5px">AT RISK</div><div class="mono" style="font-size:16px;font-weight:800;color:#F0F0F0">3.9u</div></div>
|
||
<div style="background:#0A0A10;padding:12px 13px"><div class="mono" style="font-size:8px;letter-spacing:.14em;color:#707080;margin-bottom:5px">TO WIN</div><div class="mono" style="font-size:16px;font-weight:800;color:#F0F0F0">5.6u</div></div>
|
||
<div style="background:#0A0A10;padding:12px 13px"><div class="mono" style="font-size:8px;letter-spacing:.14em;color:#707080;margin-bottom:5px">AVG GRADE</div><div class="mono" style="font-size:16px;font-weight:800;color:#00D4A0">A</div></div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-around;padding:10px 8px 6px;border-top:1px solid #14141E;background:rgba(6,6,11,.9)">
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path stroke="#707080" stroke-width="2" stroke-linecap="round" d="M4 6h16M4 12h16M4 18h9"/></svg><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">BOARD</span></div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path stroke="#707080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M4 16l5-5 3 3 8-8"/></svg><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">STREAKS</span></div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path stroke="#707080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 5v14M5 12h14"/></svg><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">BUILD</span></div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path stroke="#00D4A0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M5 4h14v16H5zM8 9h8M8 13h6"/></svg><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#00D4A0;font-weight:700">LEDGER</span></div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="9" r="3.4" stroke="#707080" stroke-width="2"/><path stroke="#707080" stroke-width="2" stroke-linecap="round" d="M5.5 19c1.4-3 4-4.4 6.5-4.4S17.1 16 18.5 19"/></svg><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">/u</span></div>
|
||
</div>
|
||
</div>
|
||
</x-import>
|
||
</div>
|
||
|
||
<!-- ============ 10 LEDGER · SETTLED + TIER RECORD ============ -->
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#707080;margin-bottom:12px;text-align:center">10 · LEDGER · SETTLED + TIER RECORD</div>
|
||
<x-import component-from-global-scope="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="390px,844px">
|
||
<div style="display:flex;flex-direction:column;height:100%;background:#06060B;font-family:'Inter',system-ui,sans-serif;color:#F0F0F0;padding-top:54px">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid #14141E">
|
||
<span class="mono" style="font-size:11px;letter-spacing:.22em;color:#F0F0F0;font-weight:700">LEDGER</span>
|
||
<div style="display:inline-flex;border:1px solid #2A2A38;border-radius:8px;overflow:hidden">
|
||
<span class="mono" style="font-size:9px;letter-spacing:.12em;color:#707080;padding:5px 13px">PENDING</span>
|
||
<span class="mono" style="font-size:9px;letter-spacing:.12em;color:#06060B;background:#00D4A0;padding:5px 13px;font-weight:800">SETTLED</span>
|
||
</div>
|
||
</div>
|
||
<div style="flex:1;overflow:hidden;padding:4px 16px">
|
||
<div style="display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid #101018">
|
||
<div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:600">Jokić o27.5 PTS</div><div class="mono" style="font-size:8.5px;color:#707080;margin-top:2px">settled 30 · CLV +2.4%</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;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:10px;color:#00D4A0;font-weight:700;width:34px;text-align:right">HIT</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid #101018">
|
||
<div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:600">Edwards o5.5 REB</div><div class="mono" style="font-size:8.5px;color:#707080;margin-top:2px">settled 4 · CLV −0.8%</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:5px;background:#14141E;color:#B8BCC8;font-weight:800;font-size:10px;border:1px solid #1E1E2A">C</span>
|
||
<span class="mono" style="font-size:10px;color:#FF4757;font-weight:700;width:34px;text-align:right">MISS</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:12px 0">
|
||
<div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:600">Skenes o6.5 K</div><div class="mono" style="font-size:8.5px;color:#707080;margin-top:2px">settled 8 · CLV +4.0%</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;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:10px;color:#00D4A0;font-weight:700;width:34px;text-align:right">HIT</span>
|
||
</div>
|
||
<!-- tier record calibration -->
|
||
<div style="border-radius:14px;background:#0A0A10;border:1px solid #1E1E2A;overflow:hidden;margin-top:10px">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid #14141E">
|
||
<span class="mono" style="font-size:9px;letter-spacing:.22em;color:#F0F0F0;font-weight:700">TIER RECORD</span>
|
||
<span class="mono" style="font-size:8px;letter-spacing:.12em;color:#707080">SEASON · ALL SPORTS</span>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:44px 1fr 64px 48px;gap:8px;align-items:center;padding:8px 14px 4px">
|
||
<span class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#4a4a58">TIER</span><span class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#4a4a58">HIT RATE</span><span class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#4a4a58;text-align:right">RECORD</span><span class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#4a4a58;text-align:right">ROI</span>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:44px 1fr 64px 48px;gap:8px;align-items:center;padding:7px 14px">
|
||
<span class="mono" style="font-size:12px;font-weight:800;color:#00D4A0;text-shadow:0 0 10px rgba(0,212,160,.4)">A+</span>
|
||
<div style="height:5px;border-radius:3px;background:#14141E;overflow:hidden"><div style="width:80%;height:100%;background:#00D4A0"></div></div>
|
||
<span class="mono" style="font-size:10.5px;color:#F0F0F0;text-align:right">24–6</span><span class="mono" style="font-size:10.5px;color:#00D4A0;text-align:right;font-weight:700">+31%</span>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:44px 1fr 64px 48px;gap:8px;align-items:center;padding:7px 14px">
|
||
<span class="mono" style="font-size:12px;font-weight:800;color:#00D4A0">A</span>
|
||
<div style="height:5px;border-radius:3px;background:#14141E;overflow:hidden"><div style="width:68%;height:100%;background:rgba(0,212,160,.75)"></div></div>
|
||
<span class="mono" style="font-size:10.5px;color:#F0F0F0;text-align:right">41–19</span><span class="mono" style="font-size:10.5px;color:#00D4A0;text-align:right;font-weight:700">+18%</span>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:44px 1fr 64px 48px;gap:8px;align-items:center;padding:7px 14px">
|
||
<span class="mono" style="font-size:12px;font-weight:800;color:#F0F0F0">B</span>
|
||
<div style="height:5px;border-radius:3px;background:#14141E;overflow:hidden"><div style="width:58%;height:100%;background:#B8BCC8"></div></div>
|
||
<span class="mono" style="font-size:10.5px;color:#B8BCC8;text-align:right">58–42</span><span class="mono" style="font-size:10.5px;color:#B8BCC8;text-align:right">+6%</span>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:44px 1fr 64px 48px;gap:8px;align-items:center;padding:7px 14px">
|
||
<span class="mono" style="font-size:12px;font-weight:800;color:#B8BCC8">C</span>
|
||
<div style="height:5px;border-radius:3px;background:#14141E;overflow:hidden"><div style="width:52%;height:100%;background:#707080"></div></div>
|
||
<span class="mono" style="font-size:10.5px;color:#707080;text-align:right">30–28</span><span class="mono" style="font-size:10.5px;color:#707080;text-align:right">+1%</span>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:44px 1fr 64px 48px;gap:8px;align-items:center;padding:7px 14px 12px">
|
||
<span class="mono" style="font-size:12px;font-weight:800;color:#FF4757">D</span>
|
||
<div style="height:5px;border-radius:3px;background:#14141E;overflow:hidden"><div style="width:38%;height:100%;background:#FF4757"></div></div>
|
||
<span class="mono" style="font-size:10.5px;color:#707080;text-align:right">12–20</span><span class="mono" style="font-size:10.5px;color:#FF4757;text-align:right">FADE ✓</span>
|
||
</div>
|
||
<div class="mono" style="padding:9px 14px;border-top:1px solid #14141E;font-size:8px;letter-spacing:.08em;color:#707080">THE GRADES CALIBRATE — A+ HITS 80%, D LOSES. THAT'S THE PRODUCT.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display:flex;align-items:center;justify-content:space-around;padding:10px 8px 6px;border-top:1px solid #14141E;background:rgba(6,6,11,.9)">
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path stroke="#707080" stroke-width="2" stroke-linecap="round" d="M4 6h16M4 12h16M4 18h9"/></svg><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">BOARD</span></div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path stroke="#707080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M4 16l5-5 3 3 8-8"/></svg><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">STREAKS</span></div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path stroke="#707080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 5v14M5 12h14"/></svg><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">BUILD</span></div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path stroke="#00D4A0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M5 4h14v16H5zM8 9h8M8 13h6"/></svg><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#00D4A0;font-weight:700">LEDGER</span></div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="9" r="3.4" stroke="#707080" stroke-width="2"/><path stroke="#707080" stroke-width="2" stroke-linecap="round" d="M5.5 19c1.4-3 4-4.4 6.5-4.4S17.1 16 18.5 19"/></svg><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">/u</span></div>
|
||
</div>
|
||
</div>
|
||
</x-import>
|
||
</div>
|
||
|
||
<!-- ============ 11 EMPTY STATE ============ -->
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#707080;margin-bottom:12px;text-align:center">11 · EMPTY STATE</div>
|
||
<x-import component-from-global-scope="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="390px,844px">
|
||
<div style="display:flex;flex-direction:column;height:100%;background:#06060B;font-family:'Inter',system-ui,sans-serif;color:#F0F0F0;padding-top:54px">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid #14141E">
|
||
<span class="mono" style="font-size:11px;letter-spacing:.22em;color:#F0F0F0;font-weight:700">EDGE BOARD</span>
|
||
<span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#707080">A-TIER FILTER ON</span>
|
||
</div>
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 30px">
|
||
<div class="mono" style="font-size:12px;letter-spacing:.4em;color:#FF4757;font-weight:800;animation:vy-glitch 5s steps(1) infinite">TRANSMISSION QUIET</div>
|
||
<div style="font-size:18px;font-weight:700;margin-top:16px;letter-spacing:-.01em">No reads cleared the A-tier threshold yet.</div>
|
||
<p style="color:#B8BCC8;font-size:12.5px;line-height:1.55;margin-top:9px">312 props graded — none hit the edge floor. That's the system protecting you, not a bug. Grades refresh as lines move.</p>
|
||
<button style="cursor:pointer;margin-top:22px;height:44px;padding:0 20px;border-radius:11px;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;margin-top:9px;height:42px;padding:0 18px;border-radius:11px;background:transparent;border:1px solid #2A2A38;color:#B8BCC8;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:10.5px;letter-spacing:.08em">NOTIFY WHEN LIVE</button>
|
||
</div>
|
||
<div class="mono" style="text-align:center;font-size:8.5px;letter-spacing:.16em;color:#4a4a58;padding-bottom:16px">THE ENGINE IS STILL WATCHING</div>
|
||
</div>
|
||
</x-import>
|
||
</div>
|
||
|
||
<!-- ============ 12 SCAN ============ -->
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#707080;margin-bottom:12px;text-align:center">12 · SCAN</div>
|
||
<x-import component-from-global-scope="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" keyboard="{{ true }}" hint-size="390px,844px">
|
||
<div style="display:flex;flex-direction:column;height:100%;background:#06060B;font-family:'Inter',system-ui,sans-serif;color:#F0F0F0;padding-top:54px">
|
||
<div style="padding:12px 16px">
|
||
<div style="display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:12px;background:#0E0E14;border:1px solid rgba(0,212,160,.4)">
|
||
<svg width="15" height="15" 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>
|
||
<span class="mono" style="font-size:13px;color:#F0F0F0">jok<span style="display:inline-block;width:2px;height:15px;background:#00D4A0;vertical-align:-2px;animation:vy-syncdot 1.1s steps(1) infinite"></span></span>
|
||
</div>
|
||
</div>
|
||
<div style="flex:1;overflow:hidden;padding:0 16px">
|
||
<div class="mono" style="font-size:8px;letter-spacing:.2em;color:#4a4a58;padding:8px 0 6px">TOP MATCH</div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:12px;background:#0A0A10;border:1px solid #1E1E2A;box-shadow:inset 2px 0 0 rgba(0,212,160,.55)">
|
||
<span style="width:36px;height:36px;flex:none;border-radius:9px;background:linear-gradient(135deg,#0E4DA4,#4C8BF5);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:11px;color:#fff">NJ</span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13.5px;font-weight:700">Nikola Jokić</div><div class="mono" style="font-size:8.5px;color:#707080;margin-top:2px">C · DEN · CONDUCTOR</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;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>
|
||
</div>
|
||
<div class="mono" style="font-size:8px;letter-spacing:.2em;color:#4a4a58;padding:12px 0 6px">READS TONIGHT</div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;background:#0A0A10;border:1px solid #1E1E2A">
|
||
<div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:600">Jokić o27.5 PTS</div><div class="mono" style="font-size:8.5px;color:#707080;margin-top:2px">DK -114 · steam ▲</div></div>
|
||
<span class="mono" style="font-size:11px;color:#00D4A0;font-weight:700">+8.4%</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;background:#0A0A10;border:1px solid #1E1E2A;margin-top:7px;opacity:.8">
|
||
<div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:600">Jokić o12.5 REB</div><div class="mono" style="font-size:8.5px;color:#707080;margin-top:2px">FD -108 · flat</div></div>
|
||
<span class="mono" style="font-size:11px;color:#B8BCC8">+1.2%</span>
|
||
</div>
|
||
<div class="mono" style="font-size:8px;letter-spacing:.2em;color:#4a4a58;padding:12px 0 6px">RECENT</div>
|
||
<div style="display:flex;gap:7px;flex-wrap:wrap">
|
||
<span class="mono" style="font-size:9.5px;color:#B8BCC8;background:#0E0E14;border:1px solid #1E1E2A;border-radius:7px;padding:6px 10px">skenes</span>
|
||
<span class="mono" style="font-size:9.5px;color:#B8BCC8;background:#0E0E14;border:1px solid #1E1E2A;border-radius:7px;padding:6px 10px">den @ min</span>
|
||
<span class="mono" style="font-size:9.5px;color:#B8BCC8;background:#0E0E14;border:1px solid #1E1E2A;border-radius:7px;padding:6px 10px">ufc 312</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</x-import>
|
||
</div>
|
||
|
||
<!-- ============ 13 PLAYER ============ -->
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#707080;margin-bottom:12px;text-align:center">13 · PLAYER</div>
|
||
<x-import component-from-global-scope="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="390px,844px">
|
||
<div style="display:flex;flex-direction:column;height:100%;background:linear-gradient(180deg,rgba(14,77,164,.12),transparent 220px),#06060B;font-family:'Inter',system-ui,sans-serif;color:#F0F0F0;padding-top:54px">
|
||
<div style="padding:16px 18px 0">
|
||
<div style="display:flex;align-items:center;gap:13px">
|
||
<div style="width:60px;height:60px;flex:none;border-radius:14px;background:linear-gradient(135deg,#0E4DA4,#1a2f5a);border:1px solid rgba(76,139,245,.4);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:20px;color:#8fb4ff">NJ</div>
|
||
<div style="flex:1;min-width:0">
|
||
<div style="display:flex;align-items:center;gap:8px"><span style="font-weight:800;font-size:19px">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:8px;font-weight:700;letter-spacing:.08em">CONFIRMED</span></div>
|
||
<div class="mono" style="font-size:9.5px;color:#707080;margin-top:3px">C · #15 · Denver Nuggets · vs <span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#0C2340,#236192);vertical-align:-1.5px;margin-right:3px"></span>MIN tonight</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:8px;margin-top:12px">
|
||
<span style="display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:7px;background:rgba(108,140,255,.1);border:1px solid rgba(108,140,255,.4)"><svg width="13" height="13" 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:9.5px;letter-spacing:.08em;color:#6C8CFF;font-weight:700">CONDUCTOR 62%</span></span>
|
||
<span style="display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:7px;background:#0B0B11;border:1px solid #1E1E2A;opacity:.75"><svg width="11" height="11" 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:.08em;color:#B8BCC8">TORCH 38%</span></span>
|
||
</div>
|
||
<!-- hero stat -->
|
||
<div style="border-radius:14px;background:#0E0E14;border:1px solid #1E1E2A;padding:15px 16px;margin-top:14px">
|
||
<div style="display:flex;align-items:baseline;justify-content:space-between">
|
||
<span class="mono" style="font-size:9px;letter-spacing:.16em;color:#707080">PTS / GAME · L15</span>
|
||
<span class="mono" style="font-size:9px;color:#00D4A0">▲ +2.3</span>
|
||
</div>
|
||
<div style="display:flex;align-items:flex-end;gap:11px;margin-top:7px">
|
||
<span class="mono" style="font-size:40px;font-weight:800;line-height:.9">28.6</span>
|
||
<div style="padding-bottom:4px"><div class="mono" style="font-size:10px;color:#00D4A0;font-weight:700">#4 <span style="color:#707080;font-weight:400">of 82 C</span></div><div class="mono" style="font-size:8.5px;color:#707080">MIN allows 26.1</div></div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:4px;margin-top:11px">
|
||
<span style="width:11px;height:11px;border-radius:3px;background:#00D4A0"></span><span style="width:11px;height:11px;border-radius:3px;background:#00D4A0"></span><span style="width:11px;height:11px;border-radius:3px;background:#FF4757"></span><span style="width:11px;height:11px;border-radius:3px;background:#00D4A0"></span><span style="width:11px;height:11px;border-radius:3px;background:#00D4A0"></span><span style="width:11px;height:11px;border-radius:3px;background:#00D4A0"></span><span style="width:11px;height:11px;border-radius:3px;background:#00D4A0"></span><span style="width:11px;height:11px;border-radius:3px;background:#FF4757"></span><span style="width:11px;height:11px;border-radius:3px;background:#00D4A0"></span><span style="width:11px;height:11px;border-radius:3px;background:#00D4A0"></span>
|
||
<span style="flex:1"></span><span class="mono" style="font-size:8px;color:#707080;letter-spacing:.1em">L10</span>
|
||
</div>
|
||
</div>
|
||
<!-- tonight's reads -->
|
||
<div class="mono" style="font-size:8px;letter-spacing:.2em;color:#4a4a58;padding:14px 0 7px">TONIGHT'S READS</div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;background:#0A0A10;border:1px solid #1E1E2A;box-shadow:inset 2px 0 0 rgba(0,212,160,.55)">
|
||
<div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:700">o27.5 PTS</div><div class="mono" style="font-size:8.5px;color:#707080;margin-top:2px">DK -114 · opened 25.5 · steam ▲</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;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" data-react data-fmt="edge" style="font-size:11.5px;font-weight:700;color:#00D4A0;padding:1px 3px;border-radius:4px">+8.4%</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;background:#0A0A10;border:1px solid #1E1E2A;margin-top:7px;opacity:.8">
|
||
<div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:600">o12.5 REB</div><div class="mono" style="font-size:8.5px;color:#707080;margin-top:2px">FD -108 · flat</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;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:#B8BCC8">+1.2%</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;background:#0A0A10;border:1px solid #1E1E2A;margin-top:7px;opacity:.6">
|
||
<div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:600">o9.5 AST</div><div class="mono" style="font-size:8.5px;color:#707080;margin-top:2px">MGM -115 · drifting ▼</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:5px;background:#14141E;color:#B8BCC8;font-weight:800;font-size:10px;border:1px solid #1E1E2A">C</span>
|
||
<span class="mono" style="font-size:11.5px;color:#707080">+0.3%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</x-import>
|
||
</div>
|
||
|
||
<!-- ============ 14 TEAM HUB ============ -->
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#707080;margin-bottom:12px;text-align:center">14 · TEAM HUB</div>
|
||
<x-import component-from-global-scope="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="390px,844px">
|
||
<div style="display:flex;flex-direction:column;height:100%;background:linear-gradient(180deg,rgba(14,77,164,.16),transparent 200px),#06060B;font-family:'Inter',system-ui,sans-serif;color:#F0F0F0;padding-top:54px">
|
||
<div style="padding:16px 18px 0">
|
||
<div style="display:flex;align-items:center;gap:13px">
|
||
<div style="width:54px;height:54px;flex:none;border-radius:13px;background:linear-gradient(135deg,#0E4DA4,#4C8BF5);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:15px;color:#fff">DEN</div>
|
||
<div style="flex:1;min-width:0">
|
||
<div style="font-weight:800;font-size:19px">Denver Nuggets</div>
|
||
<div class="mono" style="font-size:9.5px;color:#707080;margin-top:3px">53–24 · 2ND WEST · @ <span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#0C2340,#236192);vertical-align:-1.5px;margin-right:3px"></span>MIN TONIGHT</div>
|
||
</div>
|
||
<div style="text-align:right"><span class="mono" style="font-size:20px;font-weight:800;color:#00D4A0">+2.1</span><div class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">NET RTG L10</div></div>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#14141E;border:1px solid #14141E;border-radius:12px;overflow:hidden;margin-top:14px">
|
||
<div style="background:#0C0C12;padding:11px 13px"><div class="mono" style="font-size:8px;letter-spacing:.14em;color:#707080;margin-bottom:4px">PACE</div><div class="mono" style="font-size:15px;font-weight:800">98.4 <span style="font-size:9px;color:#707080">#12</span></div></div>
|
||
<div style="background:#0C0C12;padding:11px 13px"><div class="mono" style="font-size:8px;letter-spacing:.14em;color:#707080;margin-bottom:4px">OFF RTG</div><div class="mono" style="font-size:15px;font-weight:800;color:#00D4A0">121.2 <span style="font-size:9px;color:#707080">#2</span></div></div>
|
||
<div style="background:#0C0C12;padding:11px 13px"><div class="mono" style="font-size:8px;letter-spacing:.14em;color:#707080;margin-bottom:4px">DEF RTG</div><div class="mono" style="font-size:15px;font-weight:800">114.8 <span style="font-size:9px;color:#707080">#18</span></div></div>
|
||
</div>
|
||
<div class="mono" style="font-size:8px;letter-spacing:.2em;color:#4a4a58;padding:14px 0 7px">ROTATION · RANKED BY TONIGHT'S EDGE</div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:11px 4px;border-bottom:1px solid #101018">
|
||
<span class="mono" style="font-size:10px;color:#00D4A0;font-weight:700;width:16px">01</span>
|
||
<div style="flex:1;min-width:0"><div style="display:flex;align-items:center;gap:7px"><span style="font-size:13.5px;font-weight:700">Jokić</span><svg width="12" height="12" 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></div><div class="mono" style="font-size:8px;color:#707080;margin-top:2px">C · 28.6 PPG · o27.5</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;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>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:11px 4px;border-bottom:1px solid #101018;opacity:.85">
|
||
<span class="mono" style="font-size:10px;color:#707080;font-weight:600;width:16px">02</span>
|
||
<div style="flex:1;min-width:0"><div style="display:flex;align-items:center;gap:7px"><span style="font-size:13.5px;font-weight:600">Murray</span><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></div><div class="mono" style="font-size:8px;color:#707080;margin-top:2px">PG · 21.3 PPG · o20.5</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:5px;background:#14141E;color:#F0F0F0;font-weight:800;font-size:10px;border:1px solid #1E1E2A">B</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:11px 4px;border-bottom:1px solid #101018;opacity:.7">
|
||
<span class="mono" style="font-size:10px;color:#707080;font-weight:600;width:16px">03</span>
|
||
<div style="flex:1;min-width:0"><div style="display:flex;align-items:center;gap:7px"><span style="font-size:13.5px;font-weight:600">Gordon</span><svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path fill="none" stroke="#E87B4A" 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"/></svg></div><div class="mono" style="font-size:8px;color:#707080;margin-top:2px">PF · 14.8 PPG · o13.5</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:5px;background:#14141E;color:#B8BCC8;font-weight:800;font-size:10px;border:1px solid #1E1E2A">C</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:11px 4px;opacity:.55">
|
||
<span class="mono" style="font-size:10px;color:#707080;font-weight:600;width:16px">04</span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13.5px;font-weight:600;color:#B8BCC8">Porter Jr. <span class="mono" style="font-size:8px;color:#FFB347">GTD</span></div><div class="mono" style="font-size:8px;color:#707080;margin-top:2px">SF · 16.4 PPG · awaiting status</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:5px;background:#14141E;color:#707080;font-weight:800;font-size:10px;border:1px solid #1E1E2A">—</span>
|
||
</div>
|
||
<div style="margin-top:12px;background:#0A0A10;border:1px solid #14141E;border-radius:11px;padding:11px 13px">
|
||
<div style="display:flex;align-items:center;gap:7px;margin-bottom:5px"><span style="width:4px;height:4px;border-radius:50%;background:#00D4A0"></span><span class="mono" style="font-size:8px;letter-spacing:.2em;color:#B8BCC8">TEAM READ</span></div>
|
||
<p style="font-size:11.5px;line-height:1.5;color:#B8BCC8">MIN concedes +3.1 boards to CONDUCTOR bigs and plays top-5 pace — DEN's edge concentrates in Jokić props, not the spread.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</x-import>
|
||
</div>
|
||
|
||
<!-- ============ 15 EXPLORE ============ -->
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#707080;margin-bottom:12px;text-align:center">15 · EXPLORE</div>
|
||
<x-import component-from-global-scope="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="390px,844px">
|
||
<div style="display:flex;flex-direction:column;height:100%;background:#06060B;font-family:'Inter',system-ui,sans-serif;color:#F0F0F0;padding-top:54px">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid #14141E">
|
||
<span class="mono" style="font-size:11px;letter-spacing:.22em;color:#F0F0F0;font-weight:700">EXPLORE</span>
|
||
<span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#707080">FUTURES · NEWS</span>
|
||
</div>
|
||
<div style="flex:1;overflow:hidden;padding:12px 16px">
|
||
<!-- hero future -->
|
||
<div style="border-radius:15px;background:linear-gradient(180deg,#0F0F17,#0A0A10);border:1px solid #2A2A38;padding:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)">
|
||
<div class="mono" style="font-size:8px;letter-spacing:.22em;color:#707080">FUTURES · MVP · MISPRICED</div>
|
||
<div style="display:flex;align-items:center;gap:12px;margin-top:11px">
|
||
<span style="width:40px;height:40px;flex:none;border-radius:10px;background:linear-gradient(135deg,#0E4DA4,#4C8BF5);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:12px;color:#fff">NJ</span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:14.5px;font-weight:700">Jokić MVP</div><div class="mono" style="font-size:8.5px;color:#707080;margin-top:2px">DK +320 · model fair +190</div></div>
|
||
<div style="text-align:right"><span class="mono" data-react data-fmt="edge" style="font-size:18px;font-weight:800;color:#00D4A0;padding:1px 3px;border-radius:4px">+9.3%</span><div class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">EDGE</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="mono" style="font-size:8px;letter-spacing:.2em;color:#4a4a58;padding:13px 0 6px">MORE FUTURES</div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:11px 4px;border-bottom:1px solid #101018;opacity:.85">
|
||
<div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:600">Thunder to win West</div><div class="mono" style="font-size:8.5px;color:#707080;margin-top:2px">FD +240 · fair +215</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:5px;background:#14141E;color:#F0F0F0;font-weight:800;font-size:10px;border:1px solid #1E1E2A">B</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:11px 4px;border-bottom:1px solid #101018;opacity:.65">
|
||
<div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:600">Skenes NL Cy Young</div><div class="mono" style="font-size:8.5px;color:#707080;margin-top:2px">MGM +150 · fair +160</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:5px;background:#14141E;color:#B8BCC8;font-weight:800;font-size:10px;border:1px solid #1E1E2A">C</span>
|
||
</div>
|
||
<div class="mono" style="font-size:8px;letter-spacing:.2em;color:#4a4a58;padding:13px 0 6px">THE WIRE · TONIGHT</div>
|
||
<div style="display:flex;gap:10px;padding:10px 12px;border-radius:11px;background:#0A0A10;border:1px solid #14141E">
|
||
<span class="mono" style="font-size:8px;color:#4a4a58;flex:none;padding-top:2px">8:42</span>
|
||
<div style="min-width:0"><span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#FFB347;font-weight:700">INJURY</span><div style="font-size:12px;color:#B8BCC8;line-height:1.45;margin-top:2px">Porter Jr. GTD (ankle) — Jokić usage read firms if he sits.</div></div>
|
||
</div>
|
||
<div style="display:flex;gap:10px;padding:10px 12px;border-radius:11px;background:#0A0A10;border:1px solid #14141E;margin-top:7px;opacity:.8">
|
||
<span class="mono" style="font-size:8px;color:#4a4a58;flex:none;padding-top:2px">7:15</span>
|
||
<div style="min-width:0"><span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#00D4A0;font-weight:700">STEAM</span><div style="font-size:12px;color:#B8BCC8;line-height:1.45;margin-top:2px">Sharp money on Skenes K over — line 6.5 → 7.5 at three books.</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</x-import>
|
||
</div>
|
||
|
||
<!-- ============ 16 COMBAT ============ -->
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#707080;margin-bottom:12px;text-align:center">16 · COMBAT MATCHUP</div>
|
||
<x-import component-from-global-scope="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="390px,844px">
|
||
<div style="display:flex;flex-direction:column;height:100%;background:#06060B;font-family:'Inter',system-ui,sans-serif;color:#F0F0F0;padding-top:54px">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid #14141E">
|
||
<span class="mono" style="font-size:10px;letter-spacing:.18em;color:#707080">UFC 312 · LW · 5 RND</span>
|
||
<span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#00D4A0">CLV-VERIFIED</span>
|
||
</div>
|
||
<div style="flex:1;overflow:hidden;padding:14px 16px">
|
||
<!-- fighters stacked -->
|
||
<div style="border-radius:14px;background:#0A0A10;border:1px solid #1E1E2A;padding:14px">
|
||
<div style="display:flex;align-items:center;gap:11px">
|
||
<div style="width:42px;height:42px;flex:none;border-radius:10px;background:linear-gradient(135deg,#7C6CC0,#332a5a);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:13px;color:#d8ccff">IM</div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:14px;font-weight:700">Islam M.</div><div class="mono" style="font-size:8px;color:#707080;margin-top:2px">26–1 · ORTHODOX · 70"</div></div>
|
||
<span class="mono" style="font-size:9.5px;color:#7C6CC0;font-weight:700">GRAPPLER 80%</span>
|
||
</div>
|
||
<div style="height:5px;border-radius:3px;background:#14141E;overflow:hidden;margin-top:9px"><div style="width:80%;height:100%;background:#7C6CC0"></div></div>
|
||
<div style="display:flex;gap:5px;margin-top:9px;flex-wrap:wrap">
|
||
<span class="mono" style="font-size:8px;color:#B8BCC8;background:#0B0B11;border:1px solid #1E1E2A;border-radius:5px;padding:3px 7px"><span style="color:#00D4A0">✓</span> COMBAT SAMBO</span>
|
||
<span class="mono" style="font-size:8px;color:#B8BCC8;background:#0B0B11;border:1px solid #1E1E2A;border-radius:5px;padding:3px 7px"><span style="color:#00D4A0">✓</span> DAGESTAN WRESTLING</span>
|
||
</div>
|
||
</div>
|
||
<!-- verdict -->
|
||
<div style="display:flex;align-items:center;justify-content:center;gap:10px;padding:11px 0">
|
||
<span style="flex:1;height:1px;background:#14141E"></span>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:22px;padding:0 11px;border-radius:7px;background:rgba(124,108,192,.14);color:#b3a6e8;font-weight:700;font-size:9.5px;border:1px solid rgba(124,108,192,.35)">GRAPPLER EDGE</span>
|
||
<span style="flex:1;height:1px;background:#14141E"></span>
|
||
</div>
|
||
<div style="border-radius:14px;background:#0A0A10;border:1px solid #1E1E2A;padding:14px">
|
||
<div style="display:flex;align-items:center;gap:11px">
|
||
<div style="width:42px;height:42px;flex:none;border-radius:10px;background:linear-gradient(135deg,#FF6B4A,#5a281c);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:13px;color:#ffd4c6">AV</div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:14px;font-weight:700">Alex V.</div><div class="mono" style="font-size:8px;color:#707080;margin-top:2px">26–3 · ORTHODOX · 71.5"</div></div>
|
||
<span class="mono" style="font-size:9.5px;color:#FF6B4A;font-weight:700">PRESSURE 72%</span>
|
||
</div>
|
||
<div style="height:5px;border-radius:3px;background:#14141E;overflow:hidden;margin-top:9px"><div style="width:72%;height:100%;background:#FF6B4A"></div></div>
|
||
<div style="display:flex;gap:5px;margin-top:9px;flex-wrap:wrap">
|
||
<span class="mono" style="font-size:8px;color:#B8BCC8;background:#0B0B11;border:1px solid #1E1E2A;border-radius:5px;padding:3px 7px"><span style="color:#00D4A0">✓</span> ELITE TDD 94%</span>
|
||
<span class="mono" style="font-size:8px;color:#707080;background:#0B0B11;border:1px dashed #2A2A38;border-radius:5px;padding:3px 7px"><span style="color:#FFB347">?</span> WRESTLING BASE</span>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:11px;padding:10px 12px;border-radius:10px;background:rgba(255,179,71,.07);border:1px solid rgba(255,179,71,.22)">
|
||
<span class="mono" style="font-size:8px;letter-spacing:.14em;color:#FFB347;font-weight:700">RECENT-FORM OVERRIDE</span>
|
||
<div class="mono" style="font-size:9.5px;color:#B8BCC8;line-height:1.45;margin-top:3px">Volk stuffed 11 of 12 TDs last 3 fights → pushes DECISION over submission.</div>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:11px">
|
||
<div style="background:#0A0A10;border:1px solid #1E1E2A;border-radius:11px;padding:10px 12px"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080;margin-bottom:4px">ML · ISLAM -230</div><span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:5px;background:rgba(0,212,160,.12);color:#00D4A0;font-weight:800;font-size:10px;border:1px solid rgba(0,212,160,.28)">A-</span></div>
|
||
<div style="background:#0A0A10;border:1px solid #1E1E2A;border-radius:11px;padding:10px 12px"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080;margin-bottom:4px">DECISION · +120</div><span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:5px;background:rgba(0,212,160,.12);color:#00D4A0;font-weight:800;font-size:10px;border:1px solid rgba(0,212,160,.28)">A</span></div>
|
||
<div style="background:#0A0A10;border:1px solid #1E1E2A;border-radius:11px;padding:10px 12px"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080;margin-bottom:4px">SUB · +280</div><span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:5px;background:#14141E;color:#F0F0F0;font-weight:800;font-size:10px;border:1px solid #1E1E2A">B+</span></div>
|
||
<div style="background:#0A0A10;border:1px solid #1E1E2A;border-radius:11px;padding:10px 12px"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080;margin-bottom:4px">O2.5 RND · -140</div><span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:5px;background:rgba(0,212,160,.12);color:#00D4A0;font-weight:800;font-size:10px;border:1px solid rgba(0,212,160,.28)">A-</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</x-import>
|
||
</div>
|
||
|
||
<!-- ============ 17 PITCHER ============ -->
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#707080;margin-bottom:12px;text-align:center">17 · PITCHER IDENTITY</div>
|
||
<x-import component-from-global-scope="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="390px,844px">
|
||
<div style="display:flex;flex-direction:column;height:100%;background:linear-gradient(180deg,rgba(201,162,39,.08),transparent 200px),#06060B;font-family:'Inter',system-ui,sans-serif;color:#F0F0F0;padding-top:54px">
|
||
<div style="padding:16px 18px 0">
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<div style="width:52px;height:52px;flex:none;border-radius:12px;background:linear-gradient(135deg,#2b2b2b,#c9a227);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:13px;color:#fff">PIT</div>
|
||
<div style="flex:1;min-width:0">
|
||
<div style="display:flex;align-items:center;gap:7px"><span style="font-weight:800;font-size:18px">Paul Skenes</span><span class="mono" style="display:inline-flex;align-items:center;height:16px;padding:0 6px;border-radius:4px;background:rgba(0,212,160,.12);border:1px solid rgba(0,212,160,.3);color:#00D4A0;font-size:8px;font-weight:700">CONFIRMED</span></div>
|
||
<div class="mono" style="font-size:9px;color:#707080;margin-top:3px">RHP · #30 · PIT · vs <span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#0E3386,#CC3433);vertical-align:-1.5px;margin-right:3px"></span>CHC 7:10</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:7px;margin-top:11px">
|
||
<span style="display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:7px;background:rgba(124,92,255,.12);border:1px solid rgba(124,92,255,.4)"><svg width="12" height="12" 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:9px;color:#7C5CFF;font-weight:700">ALPHA</span></span>
|
||
<span style="display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:7px;background:#0B0B11;border:1px solid #1E1E2A;opacity:.8"><svg width="11" height="11" 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:8.5px;color:#FF7A5A;font-weight:600">PUNCHOUT</span></span>
|
||
<span class="mono" style="font-size:8.5px;color:#707080;margin-left:auto">TUNNELER</span>
|
||
</div>
|
||
<!-- arsenal -->
|
||
<div style="border-radius:13px;background:#0A0A10;border:1px solid #1E1E2A;overflow:hidden;margin-top:13px">
|
||
<div style="display:grid;grid-template-columns:1fr 48px 40px 46px;gap:7px;padding:9px 13px 6px;border-bottom:1px solid #14141E">
|
||
<span class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#4a4a58">PITCH</span><span class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#4a4a58;text-align:right">VELO</span><span class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#4a4a58;text-align:right">USE</span><span class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#4a4a58;text-align:right">WHIFF</span>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 48px 40px 46px;gap:7px;align-items:center;padding:8px 13px;border-bottom:1px solid #101018"><span style="display:flex;align-items:center;gap:7px"><span style="width:5px;height:5px;border-radius:2px;background:#FF7A5A"></span><span style="font-size:12px;font-weight:600">4-Seam</span></span><span class="mono" style="font-size:11px;text-align:right">99.1</span><span class="mono" style="font-size:10px;color:#B8BCC8;text-align:right">32%</span><span class="mono" style="font-size:10px;color:#B8BCC8;text-align:right">26%</span></div>
|
||
<div style="display:grid;grid-template-columns:1fr 48px 40px 46px;gap:7px;align-items:center;padding:8px 13px;border-bottom:1px solid #101018"><span style="display:flex;align-items:center;gap:7px"><span style="width:5px;height:5px;border-radius:2px;background:#E0803D"></span><span style="font-size:12px;font-weight:600">Splinker</span></span><span class="mono" style="font-size:11px;text-align:right">94.2</span><span class="mono" style="font-size:10px;color:#B8BCC8;text-align:right">24%</span><span class="mono" style="font-size:11px;color:#00D4A0;font-weight:700;text-align:right">38%</span></div>
|
||
<div style="display:grid;grid-template-columns:1fr 48px 40px 46px;gap:7px;align-items:center;padding:8px 13px"><span style="display:flex;align-items:center;gap:7px"><span style="width:5px;height:5px;border-radius:2px;background:#7C5CFF"></span><span style="font-size:12px;font-weight:600">Slider</span></span><span class="mono" style="font-size:11px;text-align:right">87.0</span><span class="mono" style="font-size:10px;color:#B8BCC8;text-align:right">22%</span><span class="mono" style="font-size:11px;color:#00D4A0;font-weight:700;text-align:right">41%</span></div>
|
||
</div>
|
||
<div style="margin-top:11px;background:#0A0A10;border:1px solid #14141E;border-radius:11px;padding:11px 13px">
|
||
<div style="display:flex;align-items:center;gap:7px;margin-bottom:5px"><span style="width:4px;height:4px;border-radius:50%;background:#7C5CFF"></span><span class="mono" style="font-size:8px;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 — whiffs cluster the 3rd time through.</p>
|
||
</div>
|
||
<div class="mono" style="font-size:8px;letter-spacing:.2em;color:#4a4a58;padding:13px 0 7px">ONE IDENTITY → MANY PROPS</div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;background:#0A0A10;border:1px solid #1E1E2A;box-shadow:inset 2px 0 0 rgba(0,212,160,.55)">
|
||
<div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:700">o6.5 K</div><div class="mono" style="font-size:8.5px;color:#707080;margin-top:2px">line moved 6.5 → 7.5 · steam ▲</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;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;font-weight:700;color:#00D4A0">+6.1%</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;background:#0A0A10;border:1px solid #1E1E2A;margin-top:7px;opacity:.8">
|
||
<div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:600">o16.5 OUTS</div><div class="mono" style="font-size:8.5px;color:#707080;margin-top:2px">workload steady L5</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 6px;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:#00D4A0">+4.2%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</x-import>
|
||
</div>
|
||
|
||
<!-- ============ 18 ARCHETYPES ============ -->
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#707080;margin-bottom:12px;text-align:center">18 · ARCHETYPES</div>
|
||
<x-import component-from-global-scope="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="390px,844px">
|
||
<div style="display:flex;flex-direction:column;height:100%;background:#06060B;font-family:'Inter',system-ui,sans-serif;color:#F0F0F0;padding-top:54px">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid #14141E">
|
||
<span class="mono" style="font-size:11px;letter-spacing:.22em;color:#F0F0F0;font-weight:700">ARCHETYPES</span>
|
||
<span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#707080">83 MARKS · 8 SPORTS</span>
|
||
</div>
|
||
<div style="display:flex;gap:7px;padding:12px 16px 4px;flex-wrap:wrap">
|
||
<span class="mono" style="font-size:9px;letter-spacing:.1em;color:#06060B;background:#00D4A0;border-radius:7px;padding:5px 11px;font-weight:800">NBA</span>
|
||
<span class="mono" style="font-size:9px;letter-spacing:.1em;color:#B8BCC8;background:#0E0E14;border:1px solid #1E1E2A;border-radius:7px;padding:5px 11px">MLB</span>
|
||
<span class="mono" style="font-size:9px;letter-spacing:.1em;color:#B8BCC8;background:#0E0E14;border:1px solid #1E1E2A;border-radius:7px;padding:5px 11px">NFL</span>
|
||
<span class="mono" style="font-size:9px;letter-spacing:.1em;color:#B8BCC8;background:#0E0E14;border:1px solid #1E1E2A;border-radius:7px;padding:5px 11px">MMA</span>
|
||
<span class="mono" style="font-size:9px;letter-spacing:.1em;color:#B8BCC8;background:#0E0E14;border:1px solid #1E1E2A;border-radius:7px;padding:5px 11px">+4</span>
|
||
</div>
|
||
<div style="flex:1;overflow:hidden;padding:10px 16px">
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:9px">
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 6px;border-radius:12px;background:#0E0E14;border:1px solid #1E1E2A"><div style="width:40px;height:40px;border-radius:10px;background:rgba(255,107,74,.09);border:1.5px solid rgba(255,107,74,.42);display:flex;align-items:center;justify-content:center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill="#FF6B4A" 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="#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></div><span class="mono" style="font-size:8.5px;letter-spacing:.1em;font-weight:700;color:#FF6B4A">TORCH</span></div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 6px;border-radius:12px;background:#0E0E14;border:1px solid #1E1E2A"><div style="width:40px;height:40px;border-radius:10px;background:rgba(108,140,255,.09);border:1.5px solid rgba(108,140,255,.42);display:flex;align-items:center;justify-content:center"><svg width="24" height="24" 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></div><span class="mono" style="font-size:8.5px;letter-spacing:.1em;font-weight:700;color:#6C8CFF">CONDUCTOR</span></div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 6px;border-radius:12px;background:#0E0E14;border:1px solid #1E1E2A"><div style="width:40px;height:40px;border-radius:10px;background:rgba(176,124,255,.09);border:1.5px solid rgba(176,124,255,.42);display:flex;align-items:center;justify-content:center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill="none" stroke="#B07CFF" stroke-width="2.2" stroke-linejoin="round" d="M12 3 4 19h16z"/><path fill="#B07CFF" fill-opacity=".18" d="m12 9 4 8H8z"/></svg></div><span class="mono" style="font-size:8.5px;letter-spacing:.1em;font-weight:700;color:#B07CFF">ARCHITECT</span></div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 6px;border-radius:12px;background:#0E0E14;border:1px solid #1E1E2A"><div style="width:40px;height:40px;border-radius:10px;background:rgba(69,183,232,.09);border:1.5px solid rgba(69,183,232,.42);display:flex;align-items:center;justify-content:center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill="#45B7E8" fill-opacity=".18" d="M13 2 4 14h6l-1 8 9-13h-6z"/><path fill="none" stroke="#45B7E8" stroke-width="1.8" stroke-linejoin="round" d="M13 2 4 14h6l-1 8 9-13h-6z"/></svg></div><span class="mono" style="font-size:8.5px;letter-spacing:.1em;font-weight:700;color:#45B7E8">BOLT</span></div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 6px;border-radius:12px;background:#0E0E14;border:1px solid #1E1E2A"><div style="width:40px;height:40px;border-radius:10px;background:rgba(255,138,61,.09);border:1.5px solid rgba(255,138,61,.42);display:flex;align-items:center;justify-content:center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill="#FF8A3D" 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="#FF8A3D" 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"/></svg></div><span class="mono" style="font-size:8.5px;letter-spacing:.1em;font-weight:700;color:#FF8A3D">IGNITER</span></div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 6px;border-radius:12px;background:#0E0E14;border:1px solid #1E1E2A"><div style="width:40px;height:40px;border-radius:10px;background:rgba(76,111,165,.09);border:1.5px solid rgba(76,111,165,.42);display:flex;align-items:center;justify-content:center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill="#4C6FA5" fill-opacity=".16" d="M5 5h3v2h2V5h4v2h2V5h3v6c0 5-4 7-7 8-3-1-7-3-7-8V5Z"/><path fill="none" stroke="#4C6FA5" stroke-width="2" stroke-linejoin="round" d="M5 5h3v2h2V5h4v2h2V5h3v6c0 5-4 7-7 8-3-1-7-3-7-8V5Z"/></svg></div><span class="mono" style="font-size:8.5px;letter-spacing:.1em;font-weight:700;color:#4C6FA5">FORTRESS</span></div>
|
||
</div>
|
||
<!-- blend explainer -->
|
||
<div style="margin-top:13px;border-radius:13px;background:#0A0A10;border:1px solid #1E1E2A;padding:13px 14px">
|
||
<div class="mono" style="font-size:8px;letter-spacing:.2em;color:#B8BCC8;margin-bottom:9px">THE BLEND · EVERY PLAYER IS A FINGERPRINT</div>
|
||
<div style="display:flex;align-items:center;gap:11px">
|
||
<span style="width:32px;height:32px;flex:none;border-radius:8px;background:linear-gradient(135deg,#0E4DA4,#4C8BF5);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:10px;color:#fff">NJ</span>
|
||
<div style="flex:1">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px"><span class="mono" style="font-size:8.5px;color:#6C8CFF;font-weight:700">CONDUCTOR</span><span class="mono" style="font-size:9px;color:#F0F0F0;font-weight:700">62%</span></div>
|
||
<div style="height:4px;border-radius:2px;background:#14141E;overflow:hidden;margin-bottom:7px"><div style="width:62%;height:100%;background:#6C8CFF"></div></div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px"><span class="mono" style="font-size:8.5px;color:#B8BCC8">TORCH</span><span class="mono" style="font-size:9px;color:#B8BCC8">38%</span></div>
|
||
<div style="height:4px;border-radius:2px;background:#14141E;overflow:hidden"><div style="width:38%;height:100%;background:#FF6B4A;opacity:.6"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</x-import>
|
||
</div>
|
||
|
||
<!-- ============ 19 CORRELATION DETAIL ============ -->
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#707080;margin-bottom:12px;text-align:center">19 · CORRELATION DETAIL</div>
|
||
<x-import component-from-global-scope="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="390px,844px">
|
||
<div style="display:flex;flex-direction:column;height:100%;background:#06060B;font-family:'Inter',system-ui,sans-serif;color:#F0F0F0;padding-top:54px">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid #14141E">
|
||
<span class="mono" style="font-size:11px;color:#B8BCC8">◂ SLIP</span>
|
||
<span class="mono" style="font-size:8.5px;letter-spacing:.16em;color:#FFB347">CORRELATION READ</span>
|
||
</div>
|
||
<div style="flex:1;overflow:hidden;padding:18px 18px 0">
|
||
<div style="text-align:center">
|
||
<div class="mono" style="font-size:9px;letter-spacing:.26em;color:#707080">JOKIĆ o27.5 × EDWARDS o5.5</div>
|
||
<div class="mono" style="font-size:64px;font-weight:800;line-height:.85;color:#FFB347;margin-top:14px">r=.62</div>
|
||
<div class="mono" style="font-size:9px;letter-spacing:.2em;color:#FFB347;margin-top:8px">STRONGLY CORRELATED</div>
|
||
</div>
|
||
<div style="margin-top:20px;background:#0A0A10;border:1px solid #14141E;border-radius:12px;padding:13px 15px">
|
||
<div style="display:flex;align-items:center;gap:7px;margin-bottom:6px"><span style="width:4px;height:4px;border-radius:50%;background:#FFB347"></span><span class="mono" style="font-size:8px;letter-spacing:.2em;color:#B8BCC8">WHY THEY MOVE TOGETHER</span></div>
|
||
<p style="font-size:12px;line-height:1.55;color:#B8BCC8">Same game, same pace engine. A fast DEN @ MIN inflates both point and assist volume — when one hits, the other usually has. Books price the parlay as if independent; it isn't.</p>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px">
|
||
<div style="background:#0A0A10;border:1px solid #1E1E2A;border-radius:11px;padding:11px 13px"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080;margin-bottom:4px">BOOK PAYS AS IF</div><div class="mono" style="font-size:15px;font-weight:800;color:#F0F0F0">+371</div></div>
|
||
<div style="background:#0A0A10;border:1px solid #1E1E2A;border-radius:11px;padding:11px 13px"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080;margin-bottom:4px">TRUE FAIR VALUE</div><div class="mono" style="font-size:15px;font-weight:800;color:#FFB347">+295</div></div>
|
||
</div>
|
||
<div style="margin-top:12px;padding:12px 14px;border-radius:11px;background:rgba(255,179,71,.08);border:1px solid rgba(255,179,71,.28)">
|
||
<div style="display:flex;align-items:center;justify-content:space-between">
|
||
<span class="mono" style="font-size:8.5px;letter-spacing:.16em;color:#FFB347;font-weight:700">VYNDR STAKE GUIDANCE</span>
|
||
<span class="mono" style="font-size:15px;font-weight:800;color:#FFB347">0.4u</span>
|
||
</div>
|
||
<div class="mono" style="font-size:9.5px;color:#B8BCC8;line-height:1.45;margin-top:5px">Sized to the true fair value, not the payout. Keep the legs — trim the stake.</div>
|
||
</div>
|
||
</div>
|
||
<div style="padding:12px 18px 8px">
|
||
<button style="cursor:pointer;width:100%;height:46px;border-radius:12px;background:#00D4A0;border:none;color:#06060B;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:11.5px;letter-spacing:.1em">KEEP SLIP AT 0.4u</button>
|
||
</div>
|
||
</div>
|
||
</x-import>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</x-dc>
|
||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":1400,"height":1050}}">
|
||
class Component extends DCLogic {
|
||
renderVals(){
|
||
return {
|
||
rootRef:(n)=>{ this.rootNode=n; },
|
||
gradeHistoryRef:(n)=>{ this.gradeHistory=n; this.buildGradeHistory(); },
|
||
true: true
|
||
};
|
||
}
|
||
|
||
buildGradeHistory(){
|
||
if(!this.gradeHistory || this.gradeHistory.childElementCount) return;
|
||
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]];
|
||
const tc=g=>g.indexOf('A')===0?'#00D4A0':g==='B'?'#F0F0F0':g==='C'?'#B8BCC8':'#FF4757';
|
||
this.gradeHistory.innerHTML=seq.map(([g,hit])=>'<div class="mono" style="aspect-ratio:1;border-radius:7px;background:'+(hit?'rgba(0,212,160,.10)':'rgba(255,71,87,.12)')+';border:1px solid '+(hit?'rgba(0,212,160,.28)':'rgba(255,71,87,.4)')+';display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:'+tc(g)+'">'+g+'</div>').join('');
|
||
}
|
||
|
||
componentDidMount(){
|
||
const tick=()=>{
|
||
if(!this.rootNode) return;
|
||
this.rootNode.querySelectorAll('[data-sync-clock]').forEach(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);
|
||
|
||
this._wireEntries=[
|
||
['STEAM','Jokić 25.5 → 27.5 since open. Grade holds A+.','#00D4A0'],
|
||
['LIVE','Edwards o5.5 AST pacing ▲ — usage +6%.','#00D4A0'],
|
||
['FLAG','Same-game legs correlated — stake trimmed.','#FFB347'],
|
||
['FADE','LaVine o22.5 drifting — graded D.','#FF4757']
|
||
];
|
||
this._wi=0;
|
||
this._wire=setInterval(()=>{
|
||
if(!this.rootNode) return;
|
||
const w=this.rootNode.querySelector('[data-wire]');
|
||
if(!w) return;
|
||
const [tag,msg,col]=this._wireEntries[this._wi%this._wireEntries.length];this._wi++;
|
||
w.innerHTML='<span style="color:'+col+';font-weight:700">'+tag+'</span><span style="color:#2A2A38"> · </span>'+msg;
|
||
},6000);
|
||
|
||
this._rx=setInterval(()=>{
|
||
if(!this.rootNode) return;
|
||
const cells=[...this.rootNode.querySelectorAll('[data-react]')];
|
||
if(!cells.length) return;
|
||
const c=cells[Math.floor(Math.random()*cells.length)];
|
||
const fmt=c.getAttribute('data-fmt');
|
||
const up=Math.random()<0.6;
|
||
const cur=parseFloat(c.textContent.replace(/[^0-9.\-]/g,''));
|
||
if(fmt!=='grade' && isNaN(cur)) return;
|
||
if(fmt==='grade'){c.textContent=up?'A+':'A';}
|
||
else if(fmt==='edge'){const n=cur+(up?0.2:-0.2);c.textContent=(n>=0?'+':'')+n.toFixed(1)+'%';c.style.color=n>=0?'#00D4A0':'#FF4757';}
|
||
else if(fmt==='int'){c.textContent=String(Math.max(9,Math.min(19,Math.round(cur)+(up?1:-1))));}
|
||
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);
|
||
},3000);
|
||
}
|
||
|
||
componentWillUnmount(){
|
||
clearInterval(this._clock);
|
||
clearInterval(this._wire);
|
||
clearInterval(this._rx);
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|