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
275 lines
26 KiB
HTML
275 lines
26 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<script src="./support.js"></script>
|
||
</head>
|
||
<body>
|
||
<x-dc>
|
||
<helmet>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
|
||
<style>
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
html,body{background:#06060B;color:#F0F0F0;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
|
||
::selection{background:rgba(0,212,160,.28);color:#F0F0F0}
|
||
a{color:#00D4A0;text-decoration:none}
|
||
a:hover{color:#5cf0cf}
|
||
.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
|
||
@keyframes vy-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-rowin{0%{opacity:0;transform:translateY(9px)}100%{opacity:var(--o,1);transform:translateY(0)}}
|
||
@keyframes vy-glitch{0%,90%,100%{transform:translate(0,0);clip-path:inset(0 0 0 0);text-shadow:none}91%{transform:translate(-1.5px,0);clip-path:inset(12% 0 42% 0);text-shadow:1.6px 0 #FF4757,-1.6px 0 #00D4A0}93%{transform:translate(1.5px,0);clip-path:inset(58% 0 8% 0);text-shadow:-1.6px 0 #FF4757,1.6px 0 #00D4A0}95%{transform:translate(-1px,0);clip-path:inset(32% 0 30% 0);text-shadow:1px 0 #00D4A0}96%{clip-path:inset(70% 0 4% 0)}}
|
||
@keyframes vy-wirein{0%{opacity:0;transform:translateY(4px)}8%,86%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-3px)}}
|
||
.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(1100px 640px at 74% -8%,rgba(0,212,160,.07),transparent 60%),#06060B">
|
||
|
||
<!-- top bar -->
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:16px 48px;border-bottom:1px solid #14141E">
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<svg width="28" height="28" 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:17px;letter-spacing:.3em;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:26px">
|
||
<a href="#proof" class="mono" style="font-size:10px;letter-spacing:.18em;color:#B8BCC8">THE RECORD</a>
|
||
<a href="#pricing" class="mono" style="font-size:10px;letter-spacing:.18em;color:#B8BCC8">PRICING</a>
|
||
<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:11px;color:#B8BCC8;letter-spacing:.06em">--:--:--</span>
|
||
</div>
|
||
<button style="cursor:pointer;height:36px;padding:0 18px;border-radius:9px;background:#00D4A0;border:none;color:#06060B;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:10.5px;letter-spacing:.1em">OPEN THE TERMINAL</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- hero -->
|
||
<div style="max-width:1240px;margin:0 auto;padding:76px 48px 0;display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center">
|
||
<div>
|
||
<div class="mono" style="font-size:10.5px;letter-spacing:.3em;color:#00D4A0;margin-bottom:20px">SPORTS INTELLIGENCE TERMINAL</div>
|
||
<h1 style="font-size:56px;font-weight:800;letter-spacing:-.025em;line-height:1.02;text-wrap:pretty">Every line, graded before you bet it.</h1>
|
||
<p style="margin-top:18px;max-width:460px;color:#B8BCC8;font-size:16px;line-height:1.55">312 props graded tonight across 47 games — ranked by edge, verified against closing lines, settled in public. Misses included.</p>
|
||
<div style="display:flex;align-items:center;gap:12px;margin-top:30px">
|
||
<button style="cursor:pointer;height:48px;padding:0 26px;border-radius:11px;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;height:48px;padding:0 22px;border-radius:11px;background:transparent;border:1px solid #2A2A38;color:#B8BCC8;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:11px;letter-spacing:.1em">SEE THE PUBLIC RECORD</button>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:20px;margin-top:26px">
|
||
<span class="mono" style="display:inline-flex;align-items:center;gap:6px;font-size:9.5px;letter-spacing:.12em;color:#00D4A0"><span style="width:5px;height:5px;border-radius:50%;background:#00D4A0"></span>CLV-VERIFIED</span>
|
||
<span class="mono" style="font-size:9.5px;letter-spacing:.12em;color:#707080">RECORD PUBLIC</span>
|
||
<span class="mono" style="font-size:9.5px;letter-spacing:.12em;color:#707080">MISSES INCLUDED</span>
|
||
</div>
|
||
</div>
|
||
<!-- live board proof -->
|
||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04)">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid #14141E">
|
||
<span class="mono" style="font-size:10px;letter-spacing:.24em;color:#F0F0F0;font-weight:700">EDGE BOARD</span>
|
||
<span 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">LIVE</span></span>
|
||
</div>
|
||
<div style="--o:1;opacity:1;display:flex;align-items:center;gap:11px;padding:12px 16px;box-shadow:inset 2px 0 0 rgba(0,212,160,.55);animation:vy-rowin .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.15s">
|
||
<span class="mono" style="font-size:10.5px;color:#00D4A0;font-weight:700;width:18px">01</span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13.5px;font-weight:700">Jokić <span style="color:#B8BCC8;font-weight:500">o27.5 PTS</span></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:18px;padding:0 7px;border-radius:5px;background:rgba(0,212,160,.14);color:#00D4A0;font-weight:800;font-size:10.5px;border:1px solid rgba(0,212,160,.3)">A+</span>
|
||
<span class="mono" data-react data-fmt="edge" style="font-size:12.5px;font-weight:700;color:#00D4A0;width:52px;text-align:right;padding:1px 3px;border-radius:4px">+8.4%</span>
|
||
</div>
|
||
<div style="--o:.9;opacity:.9;display:flex;align-items:center;gap:11px;padding:12px 16px;border-top:1px solid #101018;animation:vy-rowin .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.22s">
|
||
<span class="mono" style="font-size:10.5px;color:#707080;width:18px">02</span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13.5px;font-weight:700">Skenes <span style="color:#B8BCC8;font-weight:500">o6.5 K</span></div><div class="mono" style="font-size:8.5px;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:18px;padding:0 7px;border-radius:5px;background:rgba(0,212,160,.1);color:#00D4A0;font-weight:800;font-size:10.5px;border:1px solid rgba(0,212,160,.24)">A</span>
|
||
<span class="mono" data-react data-fmt="edge" style="font-size:12.5px;font-weight:700;color:#00D4A0;width:52px;text-align:right;padding:1px 3px;border-radius:4px">+6.1%</span>
|
||
</div>
|
||
<div style="--o:.9;opacity:.9;display:flex;align-items:center;gap:11px;padding:12px 16px;border-top:1px solid #101018;box-shadow:inset 2px 0 0 rgba(0,212,160,.4);animation:vy-rowin .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.29s">
|
||
<span class="mono" style="font-size:10.5px;color:#707080;width:18px">03</span>
|
||
<div style="flex:1;min-width:0"><div style="display:flex;align-items:center;gap:7px"><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:13.5px;font-weight:700">Edwards <span style="color:#B8BCC8;font-weight:500">o5.5 AST</span></span></div><div class="mono" style="font-size:8.5px;color:#00D4A0;margin-top:2px">LIVE · Q3 4:12</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:rgba(0,212,160,.1);color:#00D4A0;font-weight:800;font-size:10.5px;border:1px solid rgba(0,212,160,.24)">A</span>
|
||
<span class="mono" data-react data-fmt="edge" style="font-size:12.5px;font-weight:700;color:#00D4A0;width:52px;text-align:right;padding:1px 3px;border-radius:4px">+5.2%</span>
|
||
</div>
|
||
<div style="--o:.65;opacity:.65;display:flex;align-items:center;gap:11px;padding:12px 16px;border-top:1px solid #101018;animation:vy-rowin .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.36s">
|
||
<span class="mono" style="font-size:10.5px;color:#707080;width:18px">04</span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13.5px;font-weight:600">Judge <span style="color:#B8BCC8;font-weight:500">o1.5 TB</span></div><div class="mono" style="font-size:8.5px;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:18px;padding:0 7px;border-radius:5px;background:#14141E;color:#F0F0F0;font-weight:800;font-size:10.5px;border:1px solid #1E1E2A">B</span>
|
||
<span class="mono" data-react data-fmt="edge" style="font-size:12.5px;font-weight:700;color:#00D4A0;width:52px;text-align:right;padding:1px 3px;border-radius:4px">+3.4%</span>
|
||
</div>
|
||
<div style="--o:.45;opacity:.45;display:flex;align-items:center;gap:11px;padding:12px 16px;border-top:1px solid #101018;animation:vy-rowin .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.43s">
|
||
<span class="mono" style="font-size:10.5px;color:#707080;width:18px">05</span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13.5px;font-weight:600">LaVine <span style="color:#B8BCC8;font-weight:500">o22.5 PTS</span></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,#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:18px;padding:0 7px;border-radius:5px;background:rgba(255,71,87,.1);color:#FF4757;font-weight:800;font-size:10.5px;border:1px solid rgba(255,71,87,.28)">D</span>
|
||
<span class="mono" style="font-size:12.5px;font-weight:700;color:#FF4757;width:52px;text-align:right">-1.2%</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid #101018;background:#08080D">
|
||
<span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#4a4a58">+ 42 GRADED READS · PRO</span>
|
||
<span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#707080">RANKED BY EDGE</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- proof: tier record -->
|
||
<div id="proof" style="max-width:1240px;margin:0 auto;padding:96px 48px 0">
|
||
<div style="display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:center">
|
||
<div>
|
||
<div class="mono" style="font-size:10px;letter-spacing:.28em;color:#00D4A0;margin-bottom:14px">THE PROOF</div>
|
||
<h2 style="font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.1;text-wrap:pretty">The grades calibrate. That's the product.</h2>
|
||
<p style="margin-top:14px;max-width:420px;color:#B8BCC8;font-size:14.5px;line-height:1.6">A+ reads hit 80%. D reads lose — so we tell you to fade them. Every grade settles against the closing line in public, misses included.</p>
|
||
</div>
|
||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;overflow:hidden">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:13px 20px;border-bottom:1px solid #14141E">
|
||
<span class="mono" style="font-size:10px;letter-spacing:.24em;color:#F0F0F0;font-weight:700">TIER RECORD</span>
|
||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080">SEASON · ALL SPORTS</span>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:56px 1fr 90px 70px;gap:12px;align-items:center;padding:10px 20px 4px">
|
||
<span class="mono" style="font-size:8px;letter-spacing:.16em;color:#4a4a58">TIER</span><span class="mono" style="font-size:8px;letter-spacing:.16em;color:#4a4a58">HIT RATE</span><span class="mono" style="font-size:8px;letter-spacing:.16em;color:#4a4a58;text-align:right">RECORD</span><span class="mono" style="font-size:8px;letter-spacing:.16em;color:#4a4a58;text-align:right">ROI</span>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:56px 1fr 90px 70px;gap:12px;align-items:center;padding:9px 20px">
|
||
<span class="mono" style="font-size:15px;font-weight:800;color:#00D4A0;text-shadow:0 0 12px rgba(0,212,160,.4)">A+</span>
|
||
<div style="height:6px;border-radius:3px;background:#14141E;overflow:hidden"><div style="width:80%;height:100%;background:#00D4A0"></div></div>
|
||
<span class="mono" style="font-size:12px;color:#F0F0F0;text-align:right">24–6</span><span class="mono" style="font-size:12px;color:#00D4A0;text-align:right;font-weight:700">+31%</span>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:56px 1fr 90px 70px;gap:12px;align-items:center;padding:9px 20px">
|
||
<span class="mono" style="font-size:15px;font-weight:800;color:#00D4A0">A</span>
|
||
<div style="height:6px;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:12px;color:#F0F0F0;text-align:right">41–19</span><span class="mono" style="font-size:12px;color:#00D4A0;text-align:right;font-weight:700">+18%</span>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:56px 1fr 90px 70px;gap:12px;align-items:center;padding:9px 20px">
|
||
<span class="mono" style="font-size:15px;font-weight:800;color:#F0F0F0">B</span>
|
||
<div style="height:6px;border-radius:3px;background:#14141E;overflow:hidden"><div style="width:58%;height:100%;background:#B8BCC8"></div></div>
|
||
<span class="mono" style="font-size:12px;color:#B8BCC8;text-align:right">58–42</span><span class="mono" style="font-size:12px;color:#B8BCC8;text-align:right">+6%</span>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:56px 1fr 90px 70px;gap:12px;align-items:center;padding:9px 20px">
|
||
<span class="mono" style="font-size:15px;font-weight:800;color:#B8BCC8">C</span>
|
||
<div style="height:6px;border-radius:3px;background:#14141E;overflow:hidden"><div style="width:52%;height:100%;background:#707080"></div></div>
|
||
<span class="mono" style="font-size:12px;color:#707080;text-align:right">30–28</span><span class="mono" style="font-size:12px;color:#707080;text-align:right">+1%</span>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:56px 1fr 90px 70px;gap:12px;align-items:center;padding:9px 20px 14px">
|
||
<span class="mono" style="font-size:15px;font-weight:800;color:#FF4757">D</span>
|
||
<div style="height:6px;border-radius:3px;background:#14141E;overflow:hidden"><div style="width:38%;height:100%;background:#FF4757"></div></div>
|
||
<span class="mono" style="font-size:12px;color:#707080;text-align:right">12–20</span><span class="mono" style="font-size:12px;color:#FF4757;text-align:right;font-weight:700">FADE ✓</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- feature triptych -->
|
||
<div style="max-width:1240px;margin:0 auto;padding:96px 48px 0">
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px">
|
||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;padding:24px">
|
||
<div class="mono" style="font-size:9.5px;letter-spacing:.24em;color:#00D4A0;margin-bottom:12px">RANKED, NOT NOISY</div>
|
||
<div style="font-size:17px;font-weight:700;letter-spacing:-.01em">One board. Every sport. Sorted by edge.</div>
|
||
<p style="margin-top:9px;color:#B8BCC8;font-size:13px;line-height:1.55">The A-tier read floats to the top at full color; everything else dims. You see the one thing that matters in a glance.</p>
|
||
</div>
|
||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;padding:24px">
|
||
<div class="mono" style="font-size:9.5px;letter-spacing:.24em;color:#00D4A0;margin-bottom:12px">ALIVE DURING THE SLATE</div>
|
||
<div style="font-size:17px;font-weight:700;letter-spacing:-.01em">Grades that react while the game runs.</div>
|
||
<p style="margin-top:9px;color:#B8BCC8;font-size:13px;line-height:1.55">A number pulses the instant a line moves. Live grades firm and ease with pace and usage — on the board, and on your lock screen.</p>
|
||
</div>
|
||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;padding:24px">
|
||
<div class="mono" style="font-size:9.5px;letter-spacing:.24em;color:#FFB347;margin-bottom:12px">MATH THAT SAYS NO</div>
|
||
<div style="font-size:17px;font-weight:700;letter-spacing:-.01em">Correlation warnings that trim your stake.</div>
|
||
<p style="margin-top:9px;color:#B8BCC8;font-size:13px;line-height:1.55">Same-game legs move together — books pay as if they don't. VYNDR prices the true parlay and sizes the stake to the real risk.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- pricing -->
|
||
<div id="pricing" style="max-width:880px;margin:0 auto;padding:96px 48px 90px">
|
||
<div style="text-align:center;margin-bottom:30px">
|
||
<div class="mono" style="font-size:10px;letter-spacing:.28em;color:#00D4A0;margin-bottom:12px">ONE DECISION</div>
|
||
<h2 style="font-size:32px;font-weight:800;letter-spacing:-.02em">The free tier is the trial.</h2>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1.25fr;gap:16px;align-items:stretch">
|
||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;padding:24px;display:flex;flex-direction:column">
|
||
<div style="display:flex;align-items:center;justify-content:space-between"><span class="mono" style="font-size:10px;letter-spacing:.24em;color:#B8BCC8;font-weight:700">FREE</span><span class="mono" style="font-size:15px;color:#707080">$0</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:13px;color:#B8BCC8"><span style="color:#707080">✓</span> Live scores + the wire</span>
|
||
<span style="display:flex;align-items:center;gap:9px;font-size:13px;color:#B8BCC8"><span style="color:#707080">✓</span> Tonight's top 3 grades</span>
|
||
<span style="display:flex;align-items:center;gap:9px;font-size:13px;color:#707080"><span>—</span> Board ranks 4–47 stay sealed</span>
|
||
</div>
|
||
<div style="flex:1"></div>
|
||
<button style="cursor:pointer;width:100%;margin-top:20px;height:44px;border-radius:11px;background:transparent;border:1px solid #2A2A38;color:#B8BCC8;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:11px;letter-spacing:.1em">START FREE</button>
|
||
</div>
|
||
<div style="border-radius:16px;background:linear-gradient(180deg,#0F1512,#0A0A10);border:1px solid rgba(0,212,160,.4);box-shadow:0 30px 60px -34px rgba(0,212,160,.28),inset 0 1px 0 rgba(0,212,160,.12);padding:24px">
|
||
<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:8.5px;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:8px;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:13px;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:13px"><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:13px"><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:13px"><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:13px"><span style="color:#00D4A0;font-weight:700">✓</span> Correlation math on every slip</span>
|
||
</div>
|
||
<button style="cursor:pointer;width:100%;margin-top:20px;height:46px;border-radius:11px;background:#00D4A0;border:none;color:#06060B;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:12px;letter-spacing:.1em">UPGRADE TO PRO</button>
|
||
<div class="mono" style="font-size:9px;letter-spacing:.06em;color:#707080;text-align:center;margin-top:10px">cancel anytime · no trial — the free tier is the trial</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- footer -->
|
||
<div style="border-top:1px solid #14141E">
|
||
<div style="max-width:1240px;margin:0 auto;padding:22px 48px;display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between">
|
||
<div style="display:flex;align-items:center;gap:10px">
|
||
<span class="mono" style="font-weight:800;font-size:12px;letter-spacing:.26em">VYND<span style="color:#00D4A0">R</span></span>
|
||
<span class="mono" data-wire style="font-size:9.5px;color:#707080;letter-spacing:.04em">Session open — 312 props graded.</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:18px">
|
||
<a href="Vyndr System.dc.html" class="mono" style="font-size:9px;letter-spacing:.16em">DESKTOP SYSTEM</a>
|
||
<a href="Vyndr Mobile.dc.html" class="mono" style="font-size:9px;letter-spacing:.16em">MOBILE SPEC</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</x-dc>
|
||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":1440,"height":1000}}">
|
||
class Component extends DCLogic {
|
||
renderVals(){ return { rootRef:(n)=>{ this.rootNode=n; } }; }
|
||
|
||
componentDidMount(){
|
||
const tick=()=>{
|
||
const el=this.rootNode && this.rootNode.querySelector('[data-sync-clock]');
|
||
if(el){const d=new Date();const p=n=>String(n).padStart(2,'0');el.textContent=p(d.getHours())+':'+p(d.getMinutes())+':'+p(d.getSeconds());}
|
||
};
|
||
tick(); this._clock=setInterval(tick,1000);
|
||
this._booted=false; this._bt=setTimeout(()=>{this._booted=true;},1400);
|
||
this._rx=setInterval(()=>{
|
||
if(!this._booted || !this.rootNode) return;
|
||
const cells=[...this.rootNode.querySelectorAll('[data-react]')];
|
||
if(!cells.length) return;
|
||
const c=cells[Math.floor(Math.random()*cells.length)];
|
||
const cur=parseFloat(c.textContent.replace(/[^0-9.\-]/g,''));
|
||
if(isNaN(cur)) return;
|
||
const up=Math.random()<0.6;
|
||
const n=cur+(up?0.2:-0.2);
|
||
c.textContent=(n>=0?'+':'')+n.toFixed(1)+'%';
|
||
c.style.color=n>=0?'#00D4A0':'#FF4757';
|
||
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);
|
||
},2800);
|
||
this._we=[
|
||
['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'],
|
||
['CLV','Tonight: +2.8% closing-line value across 14 edges.','#B8BCC8']
|
||
];
|
||
this._wi=0;
|
||
this._wire=setInterval(()=>{
|
||
const w=this.rootNode && this.rootNode.querySelector('[data-wire]');
|
||
if(!w) return;
|
||
const [tag,msg,col]=this._we[this._wi%this._we.length];this._wi++;
|
||
w.innerHTML='<span style="color:'+col+';font-weight:700">'+tag+'</span><span style="color:#2A2A38"> · </span>'+msg;
|
||
w.style.animation='none';void w.offsetWidth;
|
||
w.style.animation='vy-wirein 6.4s ease-out';
|
||
},6500);
|
||
}
|
||
|
||
componentWillUnmount(){ clearInterval(this._clock); clearInterval(this._rx); clearInterval(this._wire); clearTimeout(this._bt); }
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|