Design bundle: Price Triplet (ACT 01) + Offseason/Intelligence + 83 glyphs
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
This commit is contained in:
@@ -1,10 +1,23 @@
|
||||
# VYNDR VISUAL SYSTEM — CODE HANDOFF
|
||||
|
||||
## SESSION 2 (Jul 17) — Offseason & Intelligence expansion
|
||||
Two new design files, same package format. System law unchanged (tokens, grade colors, glow-A-only, THE VERB IS "READ").
|
||||
|
||||
- `Vyndr Offseason.dc.html` — Surface 1. Hub home (NFL desktop + 390, NBA Summer-League variant with OUTLOOK ONLY / NOT GRADED honesty block), season-long board (open→NOW→VYNDR triplet — open `#707080`, now `#F0F0F0` 700, model `#00D4A0` 800; ladder grouping: player header row + nested market lines at `padding-left:52px`), season read reveal (news-annotated movement, NEWS-DRIVEN FACTORS, WHAT WOULD CHANGE THIS READ kill conditions), news/outlook feed + row anatomy + quiet-wire empty state. Sport state lives IN the sport tab (`NFL · CAMP −5D`), never a separate offseason tab. Kickoff countdown is computed live from the real date (`Sep 10 2026`) — ambient, top-right, never the hero. New mobile tab bar: SLATE · EXPLORE · READ-FAB (50px green circle, void-colored V, `translateY(-14px)`, 6px void ring) · LEDGER · MORE.
|
||||
- `Vyndr Intelligence.dc.html` — Surfaces 2–5 + M2.
|
||||
- S2 line shopping: MOVEMENT STRIP primitive defined once (row 86×20 silent / reveal full-width annotated / laws: steps not curves, green only when move favors the read, FLAT = hairline + `FLAT · [N]D`). Book comparison: 7 BookChips (24px tile, brand-color mono wordmark, `image-slot` overlay for licensed logos — DK `#53D337`, FD `#1493FF`, MGM `#C4A45E`, CZR `#AD9660`, B365 `#FFE100`, ESPN BET `#D50A0A`, Fanatics `#2E6BFF`), best number crowned (green inset bar + BEST NUMBER chip + row tint `rgba(0,212,160,.04)`), disagreement mark (dots on an axis around the VYNDR reference line; SPLIT chip amber when spread wide). Push-to-book: primary green deep-link + secondary book buttons, geo-gated (buttons never render disabled — they don't render), affiliate microcopy verbatim. Geo-empty honest state included.
|
||||
- S3 article media: hero template + 4 hero graphic archetypes (A line path · B distribution · C mark-at-scale · D matchup card — all generated data visuals, never stock), inline figures (stat callout triptych, comparison bars, pull quote — one max, caption law: every figure names its data), article card (thumb = hero graphic re-cropped), article OG 1200×630.
|
||||
- S4 CLV: per-read chip `BEAT CLOSE +2.0` / `MISSED CLOSE −1.0` — color follows CLV sign, never the result; aggregate joins record line (`BEAT CLOSE 61%` + `AVG CLV`); no-data state names the tracking start date + N≥100 threshold, never a fake 0%. Calibration curve: headline claim ("When we say 70%, it hits 68.2%"), dots vs dashed perfect line, dot size = sample, buckets under N 30 render hollow/unlabeled.
|
||||
- S5 The Report: hybrid email — dark billboard header + dark record band survive every client; light paper body (`#F7F6F2` / ink `#1A1A22` / green shifts to `#00A57D` on paper). 600px single column, system-font fallbacks, no images required to read. Signup module + /report archive (every issue shows its own day record).
|
||||
- M2 crops in-file at 50%: square 1080×1080, story 1080×1920 (recomposed — hero letter scales, dot strip replaces table; dashed safe zones are design-time only, strip on export), X 1200×675, NEW record billboard 1080×1350 (30D record + tier hit-rate bars, C-tier honestly under .500). Exact-size PNG masters in `exports/` (square 1080×1080, story 1080×1920, X 1200×675, record 1080×1350, article OG 1200×630). Every S2–S5 surface also ships at 390 (Act 06 in the Intelligence file): market sheet (44px book rows, compact disagreement axis, sticky deep-link CTA), article view, ledger with per-read CLV chips + compact calibration card, /report signup + archive.
|
||||
- Sample data is anchored to Jul 2026 reality; every number is a spec for what the live feed renders. Truth laws: no "tonight" off-slate, visible timestamps, honest empty states throughout.
|
||||
|
||||
|
||||
Two design components, both open directly in a browser. All styling is inline (no stylesheets to port); every value below is already in the markup.
|
||||
|
||||
## Files
|
||||
- `Vyndr Landing.dc.html` — desktop marketing landing: hero + live board proof, TIER RECORD calibration band, feature triptych, FREE / THE DESK pricing (no trial), wire footer.
|
||||
- `assets/glyphs/` — all 74 archetype marks as individual SVGs (`currentColor`, 24-grid) + `MANIFEST.md` (name → hex → file). Generated from `glyphDefs()`; wire these into `archetypes.js`.
|
||||
- `assets/glyphs/` — all 83 archetype marks (74 display + 9 classifier-legacy) as individual SVGs (`currentColor`, 24-grid) + `MANIFEST.md` (name → hex → file). Generated from `glyphDefs()`; wire these into `archetypes.js`.
|
||||
- `exports/` — rasterized share cards: `settle-1080x1350.png` (exact) and `grade-reveal-og.png` (1080×566, same 1.9:1 ratio as 1200×630 OG).
|
||||
- `image-slot.js` + `.image-slots.state.json` — drag-and-drop real-asset targets (player headshot, streaks rows, combat fighters) layered over monogram fallbacks; empty chrome hidden via `image-slot::part(empty){opacity:0}`. Design-time tooling, not product code.
|
||||
- `Vyndr System.dc.html` — desktop terminal: components, 74 glyphs, edge board, /u profile, share cards, streaks, combat, pitcher, correlation builder, pricing, empty state, ⌘K, THE WIRE.
|
||||
@@ -13,8 +26,6 @@ Two design components, both open directly in a browser. All styling is inline (n
|
||||
|
||||
Desktop /u profile also carries the TIER RECORD calibration strip (matches mobile screen 10 and the landing band).
|
||||
|
||||
> **BOOK ROSTER NOTE (2026-07, security follow-up item 7):** ESPN BET is defunct — PENN rebranded it to **theScore Bet** (Dec 1 2025); ESPN is now exclusive with DraftKings. The product BookChip set (`web/src/lib/books.js`) was updated (ESPN BET removed, theScore Bet added). The **design mockups' BookChip row still shows ESPN BET** — it needs the same one-swap to theScore Bet (mono `TS`) whenever the design files are refreshed.
|
||||
|
||||
## Tokens (exact)
|
||||
- Surfaces: `#06060B` void · `#0E0E14` card · `#14141E` elevated · row hairline `#101018` · deep panel `#0A0A10`
|
||||
- Signal green `#00D4A0` — ONE meaning: edge / active / A-tier / primary CTA. Never decorative.
|
||||
@@ -41,5 +52,5 @@ Desktop /u profile also carries the TIER RECORD calibration strip (matches mobil
|
||||
Alive = punctuated stillness (react to truth, then rest). Dense but RANKED — one bold mono hero figure among muted context; dim ranks progressively (1 / .86 / .64 / .48). One animated hero per zone. Real entities always (team-colored monograms until licensed assets drop in — headshot slots marked). No trial: free tier is the trial. Premium is produced, never claimed.
|
||||
|
||||
## Rev 3 (Jul 16)
|
||||
- Matchup lines carry inline team chips (10-12px before each abbr) — swap for licensed TeamLogo imgs at the same size (resolver built).
|
||||
- 9 classifier-legacy marks added (BRUSH/WHIFF/CONNECTOR/DISTRIBUTOR/FASTBREAK/FLEX/HYBRID/SWITCH/SWITCHBOARD) — 83 total. Fallback renders, never user-facing names.
|
||||
- Matchup lines everywhere now carry inline team-gradient chips (10-12px, before each abbr) — recognition without weight; chips sit inside rows so the ranked opacity ramp dims them too. Pattern: `<span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,<c1>,<c2>);vertical-align:-1.5px;margin-right:3px"></span>ABR`. Swap for licensed logo imgs at the same size when assets land.
|
||||
- 9 classifier-legacy marks added to `glyphDefs()` + `assets/glyphs/`: BRUSH #E0B84A, WHIFF #E86A6A, CONNECTOR #9AB0C4, DISTRIBUTOR #7AB8D8, FASTBREAK #4AA0E8, FLEX #A08AC8, HYBRID #C88AB0, SWITCH #C0B08A, SWITCHBOARD #90A0E8. Same 24-grid duotone language; colors deduped off signal-green/amber/red.
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,274 @@
|
||||
<!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>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,961 @@
|
||||
<!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-bootline{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
|
||||
@keyframes vy-arrive{0%{opacity:0;transform:scale(.88) translateY(10px);filter:blur(6px)}60%{opacity:1;transform:scale(1.015) translateY(0);filter:blur(0)}100%{opacity:1;transform:scale(1) translateY(0)}}
|
||||
@keyframes vy-glitch{0%,90%,100%{transform:translate(0,0);clip-path:inset(0 0 0 0);text-shadow:none}91%{transform:translate(-1.5px,0);clip-path:inset(12% 0 42% 0);text-shadow:1.6px 0 #FF4757,-1.6px 0 #00D4A0}93%{transform:translate(1.5px,0);clip-path:inset(58% 0 8% 0);text-shadow:-1.6px 0 #FF4757,1.6px 0 #00D4A0}95%{transform:translate(-1px,0);clip-path:inset(32% 0 30% 0);text-shadow:1px 0 #00D4A0}96%{transform:translate(1px,0);clip-path:inset(70% 0 4% 0);text-shadow:none}}
|
||||
@keyframes vy-cursor{0%,49%{opacity:1}50%,100%{opacity: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}
|
||||
.vy-grain{position:fixed;inset:0;z-index:5;pointer-events:none;mix-blend-mode:overlay;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:140px}
|
||||
.vy-vignette{position:fixed;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 200px 40px rgba(0,0,0,.55),inset 0 90px 120px -60px rgba(0,212,160,.05)}
|
||||
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
|
||||
[data-reveal].vy-in{opacity:1;transform:none}
|
||||
.vy-still *{animation-play-state:paused !important}
|
||||
html{scroll-behavior:smooth}
|
||||
</style>
|
||||
<script src="image-slot.js"></script>
|
||||
<style>image-slot::part(empty){opacity:0}</style>
|
||||
</helmet>
|
||||
<div ref="{{ rootRef }}" class="{{ stillClass }}" style="min-height:100vh;background:radial-gradient(1200px 700px at 78% -8%,rgba(0,212,160,.06),transparent 60%),#06060B;padding:0 0 120px">
|
||||
<div class="vy-vignette" aria-hidden="true"></div>
|
||||
<div class="vy-grain" aria-hidden="true"></div>
|
||||
|
||||
<!-- ============ THE WIRE ============ -->
|
||||
<div style="position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;align-items:center;gap:14px;height:36px;padding:0 40px;background:rgba(6,6,11,.88);backdrop-filter:blur(14px);border-top:1px solid #14141E">
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.26em;color:#00D4A0;font-weight:800;flex:none">THE WIRE</span>
|
||||
<span style="width:1px;height:14px;background:#1E1E2A;flex:none"></span>
|
||||
<span class="mono" data-wire-time style="font-size:10px;color:#707080;letter-spacing:.06em;flex:none">--:--:--</span>
|
||||
<span class="mono" data-wire style="font-size:11px;color:#B8BCC8;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1">Offseason desk open — 214 NFL season lines repriced on news.</span>
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.16em;color:#4a4a58;flex:none">LOG ▸</span>
|
||||
</div>
|
||||
|
||||
<div style="max-width:1240px;margin:0 auto;padding:0 40px">
|
||||
|
||||
<!-- ============ MASTHEAD ============ -->
|
||||
<div style="padding:52px 0 30px">
|
||||
<div class="mono" style="font-size:11px;letter-spacing:.34em;color:#00D4A0;margin-bottom:16px">SESSION 2 · SURFACE 1 · THE OFFSEASON HUB</div>
|
||||
<h1 style="font-size:38px;font-weight:800;letter-spacing:-.02em;line-height:1.05">Every sport is always in season.<span class="mono" style="color:#00D4A0;animation:vy-cursor 1.1s steps(1) infinite">▌</span></h1>
|
||||
<p style="margin-top:12px;max-width:640px;color:#B8BCC8;font-size:14px;line-height:1.55">A sport is in one of two states: LIVE SLATE or OFFSEASON HUB. The hub lives inside the sport — tapping NFL gets NFL, whatever NFL is today. Season-long is a different read: no "tonight," longer horizons, lines that move on news. The story is the movement — open, current, model.</p>
|
||||
<div class="mono" style="margin-top:14px;font-size:10px;letter-spacing:.16em;color:#707080"><a href="Vyndr System.dc.html">◂ DESKTOP SYSTEM</a> · <a href="Vyndr Mobile.dc.html">MOBILE</a> · <a href="Vyndr Intelligence.dc.html">INTELLIGENCE (S2-5) ▸</a></div>
|
||||
</div>
|
||||
|
||||
<!-- ============ ACT 01 · HUB HOME ============ -->
|
||||
<div data-reveal style="margin-top:14px;display:flex;align-items:baseline;gap:18px;border-bottom:1px solid #14141E;padding-bottom:18px">
|
||||
<span class="mono" style="font-size:64px;font-weight:800;line-height:.8;color:#14141E;-webkit-text-stroke:1px #2A2A38">01</span>
|
||||
<div><div class="mono" style="font-size:13px;letter-spacing:.3em;color:#F0F0F0;font-weight:800">HUB HOME</div><div style="font-size:12.5px;color:#707080;margin-top:5px">Per sport. NFL primary · NBA variant. Countdown is ambient context, never the hero — the hero is what changed today.</div></div>
|
||||
</div>
|
||||
|
||||
<div id="hub" data-screen-label="Hub home · NFL desktop" style="margin-top:44px">
|
||||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
|
||||
<span class="mono" style="font-size:12px;letter-spacing:.28em;color:#F0F0F0;font-weight:700">NFL HUB · DESKTOP</span>
|
||||
<span class="mono" style="font-size:9.5px;letter-spacing:.14em;color:#707080">SPORT TAB STATE LIVES IN THE TAB · NEVER A SEPARATE "OFFSEASON" TAB</span>
|
||||
</div>
|
||||
|
||||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;overflow:hidden;box-shadow:0 30px 60px -34px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.03)">
|
||||
<!-- terminal top bar w/ sport states -->
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 20px;border-bottom:1px solid #14141E;background:rgba(6,6,11,.6)">
|
||||
<div style="display:flex;align-items:center;gap:10px;flex:none">
|
||||
<svg width="22" height="22" 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:13px;letter-spacing:.26em;animation:vy-glitch 7s steps(1) infinite">VYND<span style="color:#00D4A0">R</span></span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:6px;flex:1;justify-content:center">
|
||||
<span class="mono" style="display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:7px;font-size:9.5px;letter-spacing:.12em;color:#B8BCC8"><span style="width:5px;height:5px;border-radius:50%;background:#00D4A0;animation:vy-livedot 1.5s ease-in-out infinite"></span>MLB · 9 LIVE</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:7px;background:#14141E;border:1px solid #2A2A38;font-size:9.5px;letter-spacing:.12em;color:#F0F0F0;font-weight:700">NFL · CAMP −5D</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:7px;font-size:9.5px;letter-spacing:.12em;color:#707080">NBA · SL DAY 8</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:7px;font-size:9.5px;letter-spacing:.12em;color:#707080">NHL · FA</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:7px;font-size:9.5px;letter-spacing:.12em;color:#707080">UFC · SAT</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;flex:none">
|
||||
<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>
|
||||
|
||||
<!-- hub header: countdown = ambient -->
|
||||
<div style="display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:22px 24px 0;flex-wrap:wrap">
|
||||
<div>
|
||||
<div style="display:flex;align-items:baseline;gap:12px">
|
||||
<span style="font-size:26px;font-weight:800;letter-spacing:-.01em">NFL</span>
|
||||
<span class="mono" style="font-size:10px;letter-spacing:.26em;color:#707080">THE OFFSEASON DESK</span>
|
||||
</div>
|
||||
<div class="mono" style="font-size:9.5px;letter-spacing:.14em;color:#4a4a58;margin-top:6px">OUTLOOKS REPRICE ON NEWS · NOT GAME ODDS · AS OF JUL 17</div>
|
||||
</div>
|
||||
<div class="mono" style="font-size:11px;letter-spacing:.2em;color:#707080"><span data-kickoff style="color:#B8BCC8;font-weight:700">{{ kickoffDays }}</span> DAYS TO KICKOFF · THU SEP 10</div>
|
||||
</div>
|
||||
|
||||
<!-- key dates strip -->
|
||||
<div style="padding:18px 24px 4px">
|
||||
<div style="position:relative;height:34px">
|
||||
<div style="position:absolute;left:0;right:0;top:8px;height:1px;background:#1E1E2A"></div>
|
||||
<div style="position:absolute;left:0;top:8px;height:1px;width:22%;background:#2A2A38"></div>
|
||||
<div style="position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:repeat(6,1fr)">
|
||||
<div><span style="display:block;width:7px;height:7px;border-radius:50%;background:#2A2A38;margin-top:5px"></span><div class="mono" style="font-size:8px;letter-spacing:.1em;color:#4a4a58;margin-top:6px">TAG DDL · JUL 15</div></div>
|
||||
<div><span style="display:block;width:9px;height:9px;border-radius:50%;background:#F0F0F0;margin-top:4px;box-shadow:0 0 0 3px rgba(240,240,240,.12)"></span><div class="mono" style="font-size:8px;letter-spacing:.1em;color:#F0F0F0;margin-top:5px;font-weight:700">CAMPS · JUL 22</div></div>
|
||||
<div><span style="display:block;width:7px;height:7px;border-radius:50%;background:#1E1E2A;border:1px solid #2A2A38;margin-top:5px"></span><div class="mono" style="font-size:8px;letter-spacing:.1em;color:#707080;margin-top:6px">HOF GAME · JUL 30</div></div>
|
||||
<div><span style="display:block;width:7px;height:7px;border-radius:50%;background:#1E1E2A;border:1px solid #2A2A38;margin-top:5px"></span><div class="mono" style="font-size:8px;letter-spacing:.1em;color:#707080;margin-top:6px">PRESEASON · AUG 6</div></div>
|
||||
<div><span style="display:block;width:7px;height:7px;border-radius:50%;background:#1E1E2A;border:1px solid #2A2A38;margin-top:5px"></span><div class="mono" style="font-size:8px;letter-spacing:.1em;color:#707080;margin-top:6px">FINAL CUTS · SEP 1</div></div>
|
||||
<div style="justify-self:end;text-align:right"><span style="display:inline-block;width:9px;height:9px;border-radius:50%;background:#00D4A0;margin-top:4px;box-shadow:0 0 10px rgba(0,212,160,.5)"></span><div class="mono" style="font-size:8px;letter-spacing:.1em;color:#00D4A0;margin-top:5px;font-weight:700">KICKOFF · SEP 10</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid;grid-template-columns:1.25fr 1fr;gap:16px;padding:16px 24px 22px">
|
||||
<!-- WHAT CHANGED TODAY -->
|
||||
<div style="border-radius:12px;background:#0E0E14;border:1px solid #1E1E2A;overflow:hidden">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:14px 16px 12px">
|
||||
<span class="mono" style="font-size:10.5px;letter-spacing:.24em;color:#F0F0F0;font-weight:700">WHAT CHANGED TODAY</span>
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080">4 EVENTS · JUL 17</span>
|
||||
</div>
|
||||
<div style="height:1px;background:#14141E;transform-origin:left;animation:vy-bootline .6s ease-out both"></div>
|
||||
<div style="--o:1;opacity:1;padding:12px 16px;border-top:1px solid #101018;box-shadow:inset 2px 0 0 rgba(0,212,160,.55);animation:vy-rowin .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.14s">
|
||||
<div style="display:flex;align-items:center;gap:8px"><span class="mono" style="font-size:8.5px;letter-spacing:.12em;color:#707080;flex:none">11:42 AM</span><span class="mono" style="display:inline-flex;align-items:center;height:15px;padding:0 6px;border-radius:4px;background:#14141E;border:1px solid #1E1E2A;font-size:8px;letter-spacing:.14em;color:#B8BCC8;flex:none">CLEARED</span></div>
|
||||
<div style="font-size:13.5px;font-weight:700;margin-top:6px">Nabers cleared for camp — no restrictions</div>
|
||||
<div class="mono" style="font-size:9px;letter-spacing:.08em;color:#707080;margin-top:5px"><span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#0B2265,#5a7fd4);vertical-align:-1.5px;margin-right:3px"></span>NYG · REC YDS <span style="color:#4a4a58">1,050.5</span> → <span data-react data-fmt="line" style="color:#F0F0F0;font-weight:700;padding:1px 3px;border-radius:4px">1,120.5</span> · <span style="color:#00D4A0">VYNDR 1,188</span> · <a href="#reveal" class="mono" style="font-size:9px;letter-spacing:.12em">READ ▸</a></div>
|
||||
</div>
|
||||
<div style="--o:.86;opacity:.86;padding:12px 16px;border-top:1px solid #101018;animation:vy-rowin .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.22s">
|
||||
<div style="display:flex;align-items:center;gap:8px"><span class="mono" style="font-size:8.5px;letter-spacing:.12em;color:#707080;flex:none">10:15 AM</span><span class="mono" style="display:inline-flex;align-items:center;height:15px;padding:0 6px;border-radius:4px;background:#14141E;border:1px solid #1E1E2A;font-size:8px;letter-spacing:.14em;color:#B8BCC8;flex:none">CAMP REPORT</span></div>
|
||||
<div style="font-size:13.5px;font-weight:600;margin-top:6px">Worthy running clear WR1 reps in KC installs</div>
|
||||
<div class="mono" style="font-size:9px;letter-spacing:.08em;color:#707080;margin-top:5px"><span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#E31837,#FFB81C);vertical-align:-1.5px;margin-right:3px"></span>KC · REC YDS <span style="color:#4a4a58">990.5</span> → <span data-react data-fmt="line" style="color:#F0F0F0;font-weight:700;padding:1px 3px;border-radius:4px">1,024.5</span> · <span style="color:#00D4A0">VYNDR 1,061</span> · <span class="mono" style="color:#4a4a58">READ ▸</span></div>
|
||||
</div>
|
||||
<div style="--o:.86;opacity:.86;padding:12px 16px;border-top:1px solid #101018;animation:vy-rowin .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.3s">
|
||||
<div style="display:flex;align-items:center;gap:8px"><span class="mono" style="font-size:8.5px;letter-spacing:.12em;color:#707080;flex:none">9:30 AM</span><span class="mono" style="display:inline-flex;align-items:center;height:15px;padding:0 6px;border-radius:4px;background:rgba(255,179,71,.08);border:1px solid rgba(255,179,71,.25);font-size:8px;letter-spacing:.14em;color:#FFB347;flex:none">CONTRACT</span></div>
|
||||
<div style="font-size:13.5px;font-weight:600;margin-top:6px">Higgins restructure done — reports Tuesday</div>
|
||||
<div class="mono" style="font-size:9px;letter-spacing:.08em;color:#707080;margin-top:5px"><span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#FB4F14,#1a1a1a);vertical-align:-1.5px;margin-right:3px"></span>CIN · BURROW PASS TD <span style="color:#4a4a58">27.5</span> → <span data-react data-fmt="half" style="color:#F0F0F0;font-weight:700;padding:1px 3px;border-radius:4px">28.5</span> · <span style="color:#00D4A0">VYNDR 29.8</span> · <span class="mono" style="color:#4a4a58">READ ▸</span></div>
|
||||
</div>
|
||||
<div style="--o:.64;opacity:.64;padding:12px 16px;border-top:1px solid #101018;animation:vy-rowin .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.38s">
|
||||
<div style="display:flex;align-items:center;gap:8px"><span class="mono" style="font-size:8.5px;letter-spacing:.12em;color:#707080;flex:none">8:05 AM</span><span class="mono" style="display:inline-flex;align-items:center;height:15px;padding:0 6px;border-radius:4px;background:#14141E;border:1px solid #1E1E2A;font-size:8px;letter-spacing:.14em;color:#B8BCC8;flex:none">DEPTH</span></div>
|
||||
<div style="font-size:13.5px;font-weight:600;margin-top:6px">Bills name Coleman the starting X receiver</div>
|
||||
<div class="mono" style="font-size:9px;letter-spacing:.08em;color:#707080;margin-top:5px"><span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#00338D,#C60C30);vertical-align:-1.5px;margin-right:3px"></span>BUF · REC YDS <span style="color:#4a4a58">815.5</span> → <span style="color:#F0F0F0;font-weight:700">815.5</span> · <span style="color:#707080">FLAT · MODEL HOLDS 862</span></div>
|
||||
</div>
|
||||
<div style="padding:11px 16px;border-top:1px solid #101018;display:flex;align-items:center;justify-content:space-between">
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#4a4a58">SOURCE-LINKED · EVERY IMPACT SHOWS THE REPRICE</span>
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080">FULL FEED ▸</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SEASON BOARD PREVIEW + report signup -->
|
||||
<div style="display:flex;flex-direction:column;gap:16px">
|
||||
<div style="border-radius:12px;background:#0E0E14;border:1px solid #1E1E2A;overflow:hidden">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:14px 16px 12px">
|
||||
<span class="mono" style="font-size:10.5px;letter-spacing:.24em;color:#F0F0F0;font-weight:700">SEASON BOARD</span>
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080">BIGGEST MODEL−MARKET GAPS</span>
|
||||
</div>
|
||||
<div style="height:1px;background:#14141E"></div>
|
||||
<div style="--o:1;opacity:1;display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid #101018;box-shadow:inset 2px 0 0 rgba(0,212,160,.55)">
|
||||
<div style="flex:1;min-width:0"><div style="font-size:12.5px;font-weight:700">Nabers <span style="color:#B8BCC8;font-weight:500">o1,120.5 Rec Yds</span></div><div class="mono" style="font-size:8px;letter-spacing:.1em;color:#707080;margin-top:2px">O 1,050.5 · NOW 1,120.5 · <span style="color:#00D4A0">M 1,188</span></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;width:46px;text-align:right;padding:1px 3px;border-radius:4px">+6.0%</span>
|
||||
</div>
|
||||
<div style="--o:.86;opacity:.86;display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid #101018">
|
||||
<div style="flex:1;min-width:0"><div style="font-size:12.5px;font-weight:600">Allen <span style="color:#B8BCC8;font-weight:500">o37.5 Pass+Rush TD</span></div><div class="mono" style="font-size:8px;letter-spacing:.1em;color:#707080;margin-top:2px">O 36.5 · NOW 37.5 · <span style="color:#00D4A0">M 40.2</span></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:11.5px;font-weight:700;color:#00D4A0;width:46px;text-align:right;padding:1px 3px;border-radius:4px">+4.8%</span>
|
||||
</div>
|
||||
<div style="--o:.64;opacity:.64;display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid #101018">
|
||||
<div style="flex:1;min-width:0"><div style="font-size:12.5px;font-weight:600">Chiefs <span style="color:#B8BCC8;font-weight:500">u11.5 Wins</span></div><div class="mono" style="font-size:8px;letter-spacing:.1em;color:#707080;margin-top:2px">O 11.5 · NOW 11.5 · <span style="color:#00D4A0">M 10.8</span></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;font-weight:700;color:#00D4A0;width:46px;text-align:right">+3.1%</span>
|
||||
</div>
|
||||
<div style="padding:11px 16px;border-top:1px solid #101018;display:flex;align-items:center;justify-content:space-between">
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#4a4a58">214 SEASON LINES</span>
|
||||
<a href="#board" class="mono" style="font-size:9px;letter-spacing:.14em">FULL BOARD ▸</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- report signup slim (spec'd in Intelligence S5) -->
|
||||
<div style="border-radius:12px;background:#0E0E14;border:1px solid #1E1E2A;padding:14px 16px;display:flex;align-items:center;gap:12px">
|
||||
<div style="flex:1;min-width:0">
|
||||
<div class="mono" style="font-size:9.5px;letter-spacing:.22em;color:#F0F0F0;font-weight:700">THE VYNDR REPORT</div>
|
||||
<div style="font-size:11px;color:#707080;margin-top:3px">The offseason, read daily. One email, no noise.</div>
|
||||
</div>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:7px;background:#00D4A0;color:#06060B;font-weight:800;font-size:9.5px;letter-spacing:.14em;flex:none">SUBSCRIBE</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- hub mobile: NFL + NBA variant -->
|
||||
<div data-screen-label="Hub home · mobile NFL + NBA" style="margin-top:44px">
|
||||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
|
||||
<span class="mono" style="font-size:12px;letter-spacing:.28em;color:#F0F0F0;font-weight:700">HUB HOME · 390</span>
|
||||
<span class="mono" style="font-size:9.5px;letter-spacing:.14em;color:#707080">NEW TAB BAR — SLATE · EXPLORE · READ FAB · LEDGER · MORE</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:34px;justify-content:center;align-items:flex-start">
|
||||
|
||||
<div>
|
||||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#707080;margin-bottom:12px;text-align:center">S1-A · NFL 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:#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">
|
||||
<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">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>
|
||||
<div style="display:flex;align-items:center;gap:6px;padding:9px 16px;border-bottom:1px solid #14141E;overflow:hidden">
|
||||
<span class="mono" style="display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:6px;font-size:8.5px;letter-spacing:.1em;color:#B8BCC8;flex:none"><span style="width:4px;height:4px;border-radius:50%;background:#00D4A0"></span>MLB 9</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:#14141E;border:1px solid #2A2A38;font-size:8.5px;letter-spacing:.1em;color:#F0F0F0;font-weight:700;flex:none">NFL · CAMP −5D</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font-size:8.5px;letter-spacing:.1em;color:#707080;flex:none">NBA · SL</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font-size:8.5px;letter-spacing:.1em;color:#707080;flex:none">NHL</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:baseline;justify-content:space-between;padding:14px 16px 10px">
|
||||
<div style="display:flex;align-items:baseline;gap:8px"><span style="font-size:19px;font-weight:800">NFL</span><span class="mono" style="font-size:8px;letter-spacing:.22em;color:#707080">OFFSEASON DESK</span></div>
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.12em;color:#707080"><span data-kickoff style="color:#B8BCC8;font-weight:700">{{ kickoffDays }}</span>D TO KICKOFF</span>
|
||||
</div>
|
||||
<div style="flex:1;overflow:hidden">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:4px 16px 6px">
|
||||
<span class="mono" style="font-size:9.5px;letter-spacing:.22em;color:#F0F0F0;font-weight:700">WHAT CHANGED TODAY</span>
|
||||
<span class="mono" style="font-size:8px;letter-spacing:.12em;color:#707080">JUL 17</span>
|
||||
</div>
|
||||
<div style="padding:10px 16px;border-top:1px solid #101018;box-shadow:inset 2px 0 0 rgba(0,212,160,.55)">
|
||||
<div style="font-size:12.5px;font-weight:700;line-height:1.3">Nabers cleared for camp — no restrictions</div>
|
||||
<div class="mono" style="font-size:8.5px;letter-spacing:.06em;color:#707080;margin-top:4px"><span style="display:inline-block;width:9px;height:9px;border-radius:3px;background:linear-gradient(135deg,#0B2265,#5a7fd4);vertical-align:-1px;margin-right:3px"></span>NYG · REC YDS <span style="color:#4a4a58">1,050.5</span> → <span style="color:#F0F0F0;font-weight:700">1,120.5</span> · <span style="color:#00D4A0">M 1,188</span></div>
|
||||
</div>
|
||||
<div style="padding:10px 16px;border-top:1px solid #101018;opacity:.85">
|
||||
<div style="font-size:12.5px;font-weight:600;line-height:1.3">Worthy running clear WR1 reps in KC installs</div>
|
||||
<div class="mono" style="font-size:8.5px;letter-spacing:.06em;color:#707080;margin-top:4px"><span style="display:inline-block;width:9px;height:9px;border-radius:3px;background:linear-gradient(135deg,#E31837,#FFB81C);vertical-align:-1px;margin-right:3px"></span>KC · REC YDS <span style="color:#4a4a58">990.5</span> → <span style="color:#F0F0F0;font-weight:700">1,024.5</span> · <span style="color:#00D4A0">M 1,061</span></div>
|
||||
</div>
|
||||
<div style="padding:10px 16px;border-top:1px solid #101018;opacity:.7">
|
||||
<div style="font-size:12.5px;font-weight:600;line-height:1.3">Higgins restructure done — reports Tuesday</div>
|
||||
<div class="mono" style="font-size:8.5px;letter-spacing:.06em;color:#707080;margin-top:4px"><span style="display:inline-block;width:9px;height:9px;border-radius:3px;background:linear-gradient(135deg,#FB4F14,#1a1a1a);vertical-align:-1px;margin-right:3px"></span>CIN · PASS TD <span style="color:#4a4a58">27.5</span> → <span style="color:#F0F0F0;font-weight:700">28.5</span> · <span style="color:#00D4A0">M 29.8</span></div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:12px 16px 6px;border-top:1px solid #14141E;margin-top:2px">
|
||||
<span class="mono" style="font-size:9.5px;letter-spacing:.22em;color:#F0F0F0;font-weight:700">SEASON BOARD</span>
|
||||
<span class="mono" style="font-size:8px;letter-spacing:.12em;color:#00D4A0">FULL BOARD ▸</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid #101018;box-shadow:inset 2px 0 0 rgba(0,212,160,.55)">
|
||||
<div style="flex:1;min-width:0"><div style="font-size:12.5px;font-weight:700">Nabers <span style="color:#B8BCC8;font-weight:500">o1,120.5 Rec Yds</span></div><div class="mono" style="font-size:8px;letter-spacing:.08em;color:#707080;margin-top:2px">O 1,050.5 → 1,120.5 · <span style="color:#00D4A0">M 1,188</span></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:10px;padding:10px 16px;border-top:1px solid #101018;opacity:.85">
|
||||
<div style="flex:1;min-width:0"><div style="font-size:12.5px;font-weight:600">Allen <span style="color:#B8BCC8;font-weight:500">o37.5 P+R TD</span></div><div class="mono" style="font-size:8px;letter-spacing:.08em;color:#707080;margin-top:2px">O 36.5 → 37.5 · <span style="color:#00D4A0">M 40.2</span></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>
|
||||
</div>
|
||||
<!-- key dates compact -->
|
||||
<div style="display:flex;align-items:center;gap:0;padding:12px 16px 0">
|
||||
<div style="flex:1;text-align:left"><div class="mono" style="font-size:7.5px;letter-spacing:.1em;color:#F0F0F0;font-weight:700">CAMPS</div><div class="mono" style="font-size:7.5px;color:#4a4a58;margin-top:1px">JUL 22</div></div>
|
||||
<div style="flex:1;text-align:center"><div class="mono" style="font-size:7.5px;letter-spacing:.1em;color:#707080">PRESEASON</div><div class="mono" style="font-size:7.5px;color:#4a4a58;margin-top:1px">AUG 6</div></div>
|
||||
<div style="flex:1;text-align:center"><div class="mono" style="font-size:7.5px;letter-spacing:.1em;color:#707080">CUTS</div><div class="mono" style="font-size:7.5px;color:#4a4a58;margin-top:1px">SEP 1</div></div>
|
||||
<div style="flex:1;text-align:right"><div class="mono" style="font-size:7.5px;letter-spacing:.1em;color:#00D4A0;font-weight:700">KICKOFF</div><div class="mono" style="font-size:7.5px;color:#4a4a58;margin-top:1px">SEP 10</div></div>
|
||||
</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">Nabers 1,050.5 → 1,120.5 on camp clearance.</span>
|
||||
</div>
|
||||
<!-- tab bar w/ READ fab -->
|
||||
<div style="position:relative;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"></path></svg>
|
||||
<span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#00D4A0;font-weight:700">SLATE</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="11" cy="11" r="6.5" stroke="#707080" stroke-width="2"></circle><path stroke="#707080" stroke-width="2" stroke-linecap="round" d="M19.5 19.5 16 16"></path></svg>
|
||||
<span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">EXPLORE</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:3px;min-width:60px;padding:0;transform:translateY(-14px)">
|
||||
<span style="width:50px;height:50px;border-radius:50%;background:#00D4A0;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px -6px rgba(0,212,160,.55),0 0 0 6px #06060B"><svg width="24" height="24" viewBox="0 0 32 32" fill="none"><path d="M8 9 L16 24 L24 9" fill="none" stroke="#06060B" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"></path><circle cx="24" cy="9" r="2.2" fill="#06060B"></circle></svg></span>
|
||||
<span class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#00D4A0;font-weight:800">READ</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"></path></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="5" cy="12" r="1.8" fill="#707080"></circle><circle cx="12" cy="12" r="1.8" fill="#707080"></circle><circle cx="19" cy="12" r="1.8" fill="#707080"></circle></svg>
|
||||
<span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">MORE</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-import>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#707080;margin-bottom:12px;text-align:center">S1-B · NBA VARIANT · SUMMER LEAGUE HONESTY</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">
|
||||
<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">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>
|
||||
<div style="display:flex;align-items:center;gap:6px;padding:9px 16px;border-bottom:1px solid #14141E;overflow:hidden">
|
||||
<span class="mono" style="display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:6px;font-size:8.5px;letter-spacing:.1em;color:#B8BCC8;flex:none"><span style="width:4px;height:4px;border-radius:50%;background:#00D4A0"></span>MLB 9</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font-size:8.5px;letter-spacing:.1em;color:#707080;flex:none">NFL · CAMP</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:#14141E;border:1px solid #2A2A38;font-size:8.5px;letter-spacing:.1em;color:#F0F0F0;font-weight:700;flex:none">NBA · SL DAY 8</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font-size:8.5px;letter-spacing:.1em;color:#707080;flex:none">NHL</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:baseline;justify-content:space-between;padding:14px 16px 10px">
|
||||
<div style="display:flex;align-items:baseline;gap:8px"><span style="font-size:19px;font-weight:800">NBA</span><span class="mono" style="font-size:8px;letter-spacing:.22em;color:#707080">SUMMER DESK</span></div>
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.12em;color:#707080">95D TO OPENING NIGHT</span>
|
||||
</div>
|
||||
<div style="flex:1;overflow:hidden">
|
||||
<!-- summer league: outlook only, engine refuses -->
|
||||
<div style="margin:2px 16px 0;border-radius:11px;background:#0E0E14;border:1px solid #1E1E2A;overflow:hidden">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:11px 13px 9px">
|
||||
<span class="mono" style="font-size:9.5px;letter-spacing:.2em;color:#F0F0F0;font-weight:700">SUMMER LEAGUE · LAS VEGAS</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:15px;padding:0 6px;border-radius:4px;background:rgba(255,179,71,.08);border:1px solid rgba(255,179,71,.25);font-size:7.5px;letter-spacing:.12em;color:#FFB347">OUTLOOK ONLY</span>
|
||||
</div>
|
||||
<div style="padding:0 13px 10px;font-size:10.5px;line-height:1.45;color:#707080">We don't grade Summer League props. Ten-day samples against fringe rosters aren't signal — they're noise wearing a jersey. We read minutes, roles, and rotation intent instead.</div>
|
||||
<div style="padding:10px 13px;border-top:1px solid #101018">
|
||||
<div style="display:flex;align-items:center;gap:9px"><span style="width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#1E1E2A,#2A2A38);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:9px;color:#B8BCC8;flex:none">AD</span><div style="flex:1;min-width:0"><div style="font-size:12px;font-weight:700">Dybantsa <span class="mono" style="font-size:8px;color:#707080;letter-spacing:.08em">F · R</span></div><div class="mono" style="font-size:8px;letter-spacing:.06em;color:#707080;margin-top:1px">31 MIN/G · USAGE-HEAVY · STARTER-TRACK</div></div><span class="mono" style="display:inline-flex;align-items:center;height:15px;padding:0 6px;border-radius:4px;background:#14141E;border:1px solid #1E1E2A;font-size:7.5px;letter-spacing:.12em;color:#707080;flex:none">NOT GRADED</span></div>
|
||||
</div>
|
||||
<div style="padding:10px 13px;border-top:1px solid #101018;opacity:.85">
|
||||
<div style="display:flex;align-items:center;gap:9px"><span style="width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#1E1E2A,#2A2A38);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:9px;color:#B8BCC8;flex:none">CB</span><div style="flex:1;min-width:0"><div style="font-size:12px;font-weight:600">Boozer <span class="mono" style="font-size:8px;color:#707080;letter-spacing:.08em">F · R</span></div><div class="mono" style="font-size:8px;letter-spacing:.06em;color:#707080;margin-top:1px">28 MIN/G · CLOSING LINEUPS · ROTATION LOCK</div></div><span class="mono" style="display:inline-flex;align-items:center;height:15px;padding:0 6px;border-radius:4px;background:#14141E;border:1px solid #1E1E2A;font-size:7.5px;letter-spacing:.12em;color:#707080;flex:none">NOT GRADED</span></div>
|
||||
</div>
|
||||
<div style="padding:10px 13px;border-top:1px solid #101018;opacity:.7">
|
||||
<div style="display:flex;align-items:center;gap:9px"><span style="width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#1E1E2A,#2A2A38);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:9px;color:#B8BCC8;flex:none">DP</span><div style="flex:1;min-width:0"><div style="font-size:12px;font-weight:600">Peterson <span class="mono" style="font-size:8px;color:#707080;letter-spacing:.08em">G · R</span></div><div class="mono" style="font-size:8px;letter-spacing:.06em;color:#707080;margin-top:1px">24 MIN/G · SECOND UNIT · WATCHLIST</div></div><span class="mono" style="display:inline-flex;align-items:center;height:15px;padding:0 6px;border-radius:4px;background:#14141E;border:1px solid #1E1E2A;font-size:7.5px;letter-spacing:.12em;color:#707080;flex:none">NOT GRADED</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- futures preview -->
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:14px 16px 6px">
|
||||
<span class="mono" style="font-size:9.5px;letter-spacing:.22em;color:#F0F0F0;font-weight:700">SEASON BOARD</span>
|
||||
<span class="mono" style="font-size:8px;letter-spacing:.12em;color:#00D4A0">FULL BOARD ▸</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid #101018;box-shadow:inset 2px 0 0 rgba(0,212,160,.55)">
|
||||
<div style="flex:1;min-width:0"><div style="font-size:12.5px;font-weight:700">Wembanyama <span style="color:#B8BCC8;font-weight:500">MVP</span></div><div class="mono" style="font-size:8px;letter-spacing:.08em;color:#707080;margin-top:2px">O +420 → +330 · <span style="color:#00D4A0">FAIR +270</span></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>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid #101018;opacity:.85">
|
||||
<div style="flex:1;min-width:0"><div style="font-size:12.5px;font-weight:600">Thunder <span style="color:#B8BCC8;font-weight:500">o61.5 Wins</span></div><div class="mono" style="font-size:8px;letter-spacing:.08em;color:#707080;margin-top:2px">O 60.5 → 61.5 · <span style="color:#00D4A0">M 60.9</span> · THIN</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>
|
||||
<!-- key dates -->
|
||||
<div style="display:flex;align-items:center;gap:0;padding:12px 16px 0">
|
||||
<div style="flex:1;text-align:left"><div class="mono" style="font-size:7.5px;letter-spacing:.1em;color:#F0F0F0;font-weight:700">SL ENDS</div><div class="mono" style="font-size:7.5px;color:#4a4a58;margin-top:1px">JUL 19</div></div>
|
||||
<div style="flex:1;text-align:center"><div class="mono" style="font-size:7.5px;letter-spacing:.1em;color:#707080">MEDIA DAY</div><div class="mono" style="font-size:7.5px;color:#4a4a58;margin-top:1px">SEP 28</div></div>
|
||||
<div style="flex:1;text-align:center"><div class="mono" style="font-size:7.5px;letter-spacing:.1em;color:#707080">CAMPS</div><div class="mono" style="font-size:7.5px;color:#4a4a58;margin-top:1px">SEP 29</div></div>
|
||||
<div style="flex:1;text-align:right"><div class="mono" style="font-size:7.5px;letter-spacing:.1em;color:#00D4A0;font-weight:700">OPENER</div><div class="mono" style="font-size:7.5px;color:#4a4a58;margin-top:1px">OCT 20</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<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" style="font-size:9.5px;color:#B8BCC8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1">Wemby MVP steams +420 → +330 since June.</span>
|
||||
</div>
|
||||
<div style="position:relative;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"></path></svg>
|
||||
<span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#00D4A0;font-weight:700">SLATE</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="11" cy="11" r="6.5" stroke="#707080" stroke-width="2"></circle><path stroke="#707080" stroke-width="2" stroke-linecap="round" d="M19.5 19.5 16 16"></path></svg>
|
||||
<span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">EXPLORE</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:3px;min-width:60px;padding:0;transform:translateY(-14px)">
|
||||
<span style="width:50px;height:50px;border-radius:50%;background:#00D4A0;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px -6px rgba(0,212,160,.55),0 0 0 6px #06060B"><svg width="24" height="24" viewBox="0 0 32 32" fill="none"><path d="M8 9 L16 24 L24 9" fill="none" stroke="#06060B" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"></path><circle cx="24" cy="9" r="2.2" fill="#06060B"></circle></svg></span>
|
||||
<span class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#00D4A0;font-weight:800">READ</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"></path></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="5" cy="12" r="1.8" fill="#707080"></circle><circle cx="12" cy="12" r="1.8" fill="#707080"></circle><circle cx="19" cy="12" r="1.8" fill="#707080"></circle></svg>
|
||||
<span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">MORE</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-import>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ ACT 02 · SEASON-LONG BOARD ============ -->
|
||||
<div data-reveal style="margin-top:110px;display:flex;align-items:baseline;gap:18px;border-bottom:1px solid #14141E;padding-bottom:18px">
|
||||
<span class="mono" style="font-size:64px;font-weight:800;line-height:.8;color:#14141E;-webkit-text-stroke:1px #2A2A38">02</span>
|
||||
<div><div class="mono" style="font-size:13px;letter-spacing:.3em;color:#F0F0F0;font-weight:800">SEASON-LONG BOARD</div><div style="font-size:12.5px;color:#707080;margin-top:5px">The open → current → model triplet is the signature. Ladder pattern: one row per player, lines nested.</div></div>
|
||||
</div>
|
||||
|
||||
<div id="board" data-screen-label="Season board · desktop" style="margin-top:44px">
|
||||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
|
||||
<span class="mono" style="font-size:12px;letter-spacing:.28em;color:#F0F0F0;font-weight:700">NFL SEASON BOARD · DESKTOP</span>
|
||||
<span class="mono" style="font-size:9.5px;letter-spacing:.14em;color:#707080">OPEN DIM · NOW WHITE · MODEL GREEN — ONE READING ORDER, EVERY ROW</span>
|
||||
</div>
|
||||
|
||||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;overflow:hidden;box-shadow:0 30px 60px -34px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.03)">
|
||||
<!-- filters -->
|
||||
<div style="display:flex;align-items:center;gap:6px;padding:14px 16px;border-bottom:1px solid #14141E;flex-wrap:wrap">
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:7px;background:#14141E;border:1px solid #2A2A38;font-size:9px;letter-spacing:.14em;color:#F0F0F0;font-weight:700">ALL MARKETS</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:7px;font-size:9px;letter-spacing:.14em;color:#707080">PASSING</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:7px;font-size:9px;letter-spacing:.14em;color:#707080">RUSH / REC</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:7px;font-size:9px;letter-spacing:.14em;color:#707080">TDS</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:7px;font-size:9px;letter-spacing:.14em;color:#707080">WIN TOTALS</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:7px;font-size:9px;letter-spacing:.14em;color:#707080">DIVISIONS</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:7px;font-size:9px;letter-spacing:.14em;color:#707080">AWARDS</span>
|
||||
<span class="mono" style="margin-left:auto;font-size:9px;letter-spacing:.16em;color:#707080">SORTED · MODEL GAP ▼</span>
|
||||
</div>
|
||||
<!-- column heads -->
|
||||
<div style="display:grid;grid-template-columns:1fr 88px 88px 88px 64px 44px 150px;align-items:center;gap:12px;padding:9px 16px 7px">
|
||||
<span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#4a4a58">PLAYER / MARKET</span>
|
||||
<span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#4a4a58;justify-self:end">OPEN</span>
|
||||
<span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#4a4a58;justify-self:end">NOW</span>
|
||||
<span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#00D4A0;justify-self:end">VYNDR</span>
|
||||
<span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#4a4a58;justify-self:end">EDGE</span>
|
||||
<span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#4a4a58;justify-self:end">GRD</span>
|
||||
<span class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#4a4a58;justify-self:end">MOVE · SINCE OPEN</span>
|
||||
</div>
|
||||
<div style="height:1px;background:#14141E;transform-origin:left;animation:vy-bootline .6s ease-out both"></div>
|
||||
|
||||
<!-- ladder: NABERS -->
|
||||
<div style="display:flex;align-items:center;gap:10px;padding:11px 16px 7px;border-top:1px solid #101018">
|
||||
<span style="position:relative;width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#0B2265,#5a7fd4);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:9px;color:#cdd9ff;flex:none">MN<image-slot id="hs-nabers" shape="rounded" radius="7" style="position:absolute;inset:0" placeholder="Nabers headshot"></image-slot></span>
|
||||
<span style="font-size:13.5px;font-weight:700">Malik Nabers</span>
|
||||
<span class="mono" style="font-size:9px;color:#707080;letter-spacing:.08em">WR · NYG</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;gap:5px;height:18px;padding:0 8px;border-radius:5px;background:rgba(255,122,74,.09);border:1px solid rgba(255,122,74,.28);font-size:8.5px;letter-spacing:.14em;color:#FF7A4A;font-weight:700"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" style="color:#FF7A4A"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M3 19 19 5M14 5h5v5"></path><path stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M4 14l2 2M8 10l2 2"></path></svg>BURNER</span>
|
||||
<span class="mono" style="margin-left:auto;font-size:8.5px;letter-spacing:.12em;color:#4a4a58">2 LINES</span>
|
||||
</div>
|
||||
<div style="--o:1;opacity:1;display:grid;grid-template-columns:1fr 88px 88px 88px 64px 44px 150px;align-items:center;gap:12px;padding:8px 16px 8px 52px;box-shadow:inset 2px 0 0 rgba(0,212,160,.55)">
|
||||
<span style="font-size:12.5px;font-weight:600;color:#B8BCC8">Receiving Yards <span class="mono" style="font-size:8.5px;color:#4a4a58;letter-spacing:.1em">O/U</span></span>
|
||||
<span class="mono" style="justify-self:end;font-size:11.5px;color:#707080">1,050.5</span>
|
||||
<span class="mono" data-react data-fmt="line" style="justify-self:end;font-size:12.5px;font-weight:700;color:#F0F0F0;padding:1px 4px;border-radius:5px">1,120.5</span>
|
||||
<span class="mono" style="justify-self:end;font-size:12.5px;font-weight:800;color:#00D4A0">1,188</span>
|
||||
<span class="mono" style="justify-self:end;font-size:11.5px;font-weight:700;color:#00D4A0">+6.0%</span>
|
||||
<span class="mono" style="justify-self:end;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:rgba(0,212,160,.14);color:#00D4A0;font-weight:800;font-size:10.5px;border:1px solid rgba(0,212,160,.3)">A+</span>
|
||||
<span style="justify-self:end;display:flex;align-items:center;gap:8px"><svg width="86" height="20" viewBox="0 0 86 20" preserveAspectRatio="none" style="display:block"><polyline points="0,16 18,16 18,12 40,12 40,9 62,9 62,4 86,4" fill="none" stroke="#00D4A0" stroke-width="1.5" stroke-linejoin="round" opacity=".85"></polyline><circle cx="86" cy="4" r="2.2" fill="#00D4A0"></circle></svg><span class="mono" style="font-size:9px;color:#00D4A0;font-weight:700">▲ +70.0</span></span>
|
||||
</div>
|
||||
<div style="--o:.86;opacity:.86;display:grid;grid-template-columns:1fr 88px 88px 88px 64px 44px 150px;align-items:center;gap:12px;padding:8px 16px 10px 52px;border-bottom:1px solid #101018">
|
||||
<span style="font-size:12.5px;font-weight:500;color:#B8BCC8">Receptions <span class="mono" style="font-size:8.5px;color:#4a4a58;letter-spacing:.1em">O/U</span></span>
|
||||
<span class="mono" style="justify-self:end;font-size:11.5px;color:#707080">88.5</span>
|
||||
<span class="mono" data-react data-fmt="half" style="justify-self:end;font-size:12.5px;font-weight:700;color:#F0F0F0;padding:1px 4px;border-radius:5px">92.5</span>
|
||||
<span class="mono" style="justify-self:end;font-size:12.5px;font-weight:800;color:#00D4A0">97.0</span>
|
||||
<span class="mono" style="justify-self:end;font-size:11.5px;font-weight:700;color:#00D4A0">+3.2%</span>
|
||||
<span class="mono" style="justify-self:end;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:#14141E;color:#F0F0F0;font-weight:800;font-size:10.5px;border:1px solid #1E1E2A">B</span>
|
||||
<span style="justify-self:end;display:flex;align-items:center;gap:8px"><svg width="86" height="20" viewBox="0 0 86 20" preserveAspectRatio="none" style="display:block"><polyline points="0,14 26,14 26,11 56,11 56,7 86,7" fill="none" stroke="#B8BCC8" stroke-width="1.5" stroke-linejoin="round" opacity=".6"></polyline><circle cx="86" cy="7" r="2" fill="#B8BCC8"></circle></svg><span class="mono" style="font-size:9px;color:#B8BCC8;font-weight:700">▲ +4.0</span></span>
|
||||
</div>
|
||||
|
||||
<!-- ladder: ALLEN -->
|
||||
<div style="display:flex;align-items:center;gap:10px;padding:11px 16px 7px;border-top:1px solid #101018">
|
||||
<span style="width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#00338D,#C60C30);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:9px;color:#bcd0ff;flex:none">JA</span>
|
||||
<span style="font-size:13.5px;font-weight:700">Josh Allen</span>
|
||||
<span class="mono" style="font-size:9px;color:#707080;letter-spacing:.08em">QB · BUF</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;gap:5px;height:18px;padding:0 8px;border-radius:5px;background:rgba(217,164,65,.09);border:1px solid rgba(217,164,65,.28);font-size:8.5px;letter-spacing:.14em;color:#D9A441;font-weight:700"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" style="color:#D9A441"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M5 19 16 6"></path><circle cx="17" cy="5" r="1.9" fill="currentColor"></circle><path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" d="M5 9c2-2 5-2 7 0M4 13c2.5-2.5 6-2.5 9 0"></path></svg>MAESTRO</span>
|
||||
<span class="mono" style="margin-left:auto;font-size:8.5px;letter-spacing:.12em;color:#4a4a58">3 LINES</span>
|
||||
</div>
|
||||
<div style="--o:.86;opacity:.86;display:grid;grid-template-columns:1fr 88px 88px 88px 64px 44px 150px;align-items:center;gap:12px;padding:8px 16px 8px 52px">
|
||||
<span style="font-size:12.5px;font-weight:500;color:#B8BCC8">Pass + Rush TD <span class="mono" style="font-size:8.5px;color:#4a4a58;letter-spacing:.1em">O/U</span></span>
|
||||
<span class="mono" style="justify-self:end;font-size:11.5px;color:#707080">36.5</span>
|
||||
<span class="mono" data-react data-fmt="half" style="justify-self:end;font-size:12.5px;font-weight:700;color:#F0F0F0;padding:1px 4px;border-radius:5px">37.5</span>
|
||||
<span class="mono" style="justify-self:end;font-size:12.5px;font-weight:800;color:#00D4A0">40.2</span>
|
||||
<span class="mono" style="justify-self:end;font-size:11.5px;font-weight:700;color:#00D4A0">+4.8%</span>
|
||||
<span class="mono" style="justify-self:end;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:rgba(0,212,160,.1);color:#00D4A0;font-weight:800;font-size:10.5px;border:1px solid rgba(0,212,160,.24)">A</span>
|
||||
<span style="justify-self:end;display:flex;align-items:center;gap:8px"><svg width="86" height="20" viewBox="0 0 86 20" preserveAspectRatio="none" style="display:block"><polyline points="0,13 34,13 34,9 86,9" fill="none" stroke="#B8BCC8" stroke-width="1.5" stroke-linejoin="round" opacity=".6"></polyline><circle cx="86" cy="9" r="2" fill="#B8BCC8"></circle></svg><span class="mono" style="font-size:9px;color:#B8BCC8;font-weight:700">▲ +1.0</span></span>
|
||||
</div>
|
||||
<div style="--o:.86;opacity:.86;display:grid;grid-template-columns:1fr 88px 88px 88px 64px 44px 150px;align-items:center;gap:12px;padding:8px 16px 8px 52px">
|
||||
<span style="font-size:12.5px;font-weight:500;color:#B8BCC8">Passing Yards <span class="mono" style="font-size:8.5px;color:#4a4a58;letter-spacing:.1em">O/U</span></span>
|
||||
<span class="mono" style="justify-self:end;font-size:11.5px;color:#707080">3,895.5</span>
|
||||
<span class="mono" data-react data-fmt="line" style="justify-self:end;font-size:12.5px;font-weight:700;color:#F0F0F0;padding:1px 4px;border-radius:5px">3,940.5</span>
|
||||
<span class="mono" style="justify-self:end;font-size:12.5px;font-weight:800;color:#00D4A0">4,080</span>
|
||||
<span class="mono" style="justify-self:end;font-size:11.5px;font-weight:700;color:#00D4A0">+3.6%</span>
|
||||
<span class="mono" style="justify-self:end;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:#14141E;color:#F0F0F0;font-weight:800;font-size:10.5px;border:1px solid #1E1E2A">B</span>
|
||||
<span style="justify-self:end;display:flex;align-items:center;gap:8px"><svg width="86" height="20" viewBox="0 0 86 20" preserveAspectRatio="none" style="display:block"><polyline points="0,13 40,13 40,10 86,10" fill="none" stroke="#B8BCC8" stroke-width="1.5" stroke-linejoin="round" opacity=".6"></polyline><circle cx="86" cy="10" r="2" fill="#B8BCC8"></circle></svg><span class="mono" style="font-size:9px;color:#B8BCC8;font-weight:700">▲ +45.0</span></span>
|
||||
</div>
|
||||
<div style="--o:.64;opacity:.64;display:grid;grid-template-columns:1fr 88px 88px 88px 64px 44px 150px;align-items:center;gap:12px;padding:8px 16px 10px 52px;border-bottom:1px solid #101018">
|
||||
<span style="font-size:12.5px;font-weight:500;color:#B8BCC8">MVP <span class="mono" style="font-size:8.5px;color:#4a4a58;letter-spacing:.1em">AWARDS</span></span>
|
||||
<span class="mono" style="justify-self:end;font-size:11.5px;color:#707080">+650</span>
|
||||
<span class="mono" data-react data-fmt="odds" style="justify-self:end;font-size:12.5px;font-weight:700;color:#F0F0F0;padding:1px 4px;border-radius:5px">+600</span>
|
||||
<span class="mono" style="justify-self:end;font-size:12.5px;font-weight:800;color:#00D4A0">+490</span>
|
||||
<span class="mono" style="justify-self:end;font-size:11.5px;font-weight:700;color:#00D4A0">+2.6%</span>
|
||||
<span class="mono" style="justify-self:end;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:#14141E;color:#F0F0F0;font-weight:800;font-size:10.5px;border:1px solid #1E1E2A">B</span>
|
||||
<span style="justify-self:end;display:flex;align-items:center;gap:8px"><svg width="86" height="20" viewBox="0 0 86 20" preserveAspectRatio="none" style="display:block"><polyline points="0,12 50,12 50,9 86,9" fill="none" stroke="#B8BCC8" stroke-width="1.5" stroke-linejoin="round" opacity=".6"></polyline><circle cx="86" cy="9" r="2" fill="#B8BCC8"></circle></svg><span class="mono" style="font-size:9px;color:#B8BCC8;font-weight:700">▲ 650→600</span></span>
|
||||
</div>
|
||||
|
||||
<!-- ladder: BIJAN -->
|
||||
<div style="display:flex;align-items:center;gap:10px;padding:11px 16px 7px;border-top:1px solid #101018">
|
||||
<span style="width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#A71930,#1a1a1a);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:9px;color:#ffb8c4;flex:none">BR</span>
|
||||
<span style="font-size:13.5px;font-weight:700">Bijan Robinson</span>
|
||||
<span class="mono" style="font-size:9px;color:#707080;letter-spacing:.08em">RB · ATL</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;gap:5px;height:18px;padding:0 8px;border-radius:5px;background:rgba(181,137,90,.09);border:1px solid rgba(181,137,90,.28);font-size:8.5px;letter-spacing:.14em;color:#B5895A;font-weight:700"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" style="color:#B5895A"><path fill="currentColor" fill-opacity=".16" d="M6 17c0-6 2-9 6-9s6 3 6 9z"></path><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M6 17c0-6 2-9 6-9s6 3 6 9zM4 17h16M12 8V5"></path><circle cx="12" cy="20" r="1.6" fill="currentColor"></circle></svg>BELL COW</span>
|
||||
<span class="mono" style="margin-left:auto;font-size:8.5px;letter-spacing:.12em;color:#4a4a58">2 LINES</span>
|
||||
</div>
|
||||
<div style="--o:.64;opacity:.64;display:grid;grid-template-columns:1fr 88px 88px 88px 64px 44px 150px;align-items:center;gap:12px;padding:8px 16px 8px 52px">
|
||||
<span style="font-size:12.5px;font-weight:500;color:#B8BCC8">Rushing Yards <span class="mono" style="font-size:8.5px;color:#4a4a58;letter-spacing:.1em">O/U</span></span>
|
||||
<span class="mono" style="justify-self:end;font-size:11.5px;color:#707080">1,275.5</span>
|
||||
<span class="mono" data-react data-fmt="line" style="justify-self:end;font-size:12.5px;font-weight:700;color:#F0F0F0;padding:1px 4px;border-radius:5px">1,290.5</span>
|
||||
<span class="mono" style="justify-self:end;font-size:12.5px;font-weight:800;color:#00D4A0">1,342</span>
|
||||
<span class="mono" style="justify-self:end;font-size:11.5px;font-weight:700;color:#00D4A0">+2.2%</span>
|
||||
<span class="mono" style="justify-self:end;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:#14141E;color:#B8BCC8;font-weight:800;font-size:10.5px;border:1px solid #1E1E2A">C</span>
|
||||
<span style="justify-self:end;display:flex;align-items:center;gap:8px"><svg width="86" height="20" viewBox="0 0 86 20" preserveAspectRatio="none" style="display:block"><polyline points="0,12 60,12 60,10 86,10" fill="none" stroke="#B8BCC8" stroke-width="1.5" stroke-linejoin="round" opacity=".5"></polyline><circle cx="86" cy="10" r="2" fill="#B8BCC8"></circle></svg><span class="mono" style="font-size:9px;color:#B8BCC8;font-weight:700">▲ +15.0</span></span>
|
||||
</div>
|
||||
<div style="--o:.48;opacity:.48;display:grid;grid-template-columns:1fr 88px 88px 88px 64px 44px 150px;align-items:center;gap:12px;padding:8px 16px 10px 52px;border-bottom:1px solid #101018">
|
||||
<span style="font-size:12.5px;font-weight:500;color:#B8BCC8">Rushing TD <span class="mono" style="font-size:8.5px;color:#4a4a58;letter-spacing:.1em">O/U</span></span>
|
||||
<span class="mono" style="justify-self:end;font-size:11.5px;color:#707080">11.5</span>
|
||||
<span class="mono" style="justify-self:end;font-size:12.5px;font-weight:700;color:#F0F0F0">11.5</span>
|
||||
<span class="mono" style="justify-self:end;font-size:12.5px;font-weight:800;color:#00D4A0">12.4</span>
|
||||
<span class="mono" style="justify-self:end;font-size:11.5px;font-weight:700;color:#00D4A0">+1.4%</span>
|
||||
<span class="mono" style="justify-self:end;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:#14141E;color:#B8BCC8;font-weight:800;font-size:10.5px;border:1px solid #1E1E2A">C</span>
|
||||
<span style="justify-self:end;display:flex;align-items:center;gap:8px"><svg width="86" height="20" viewBox="0 0 86 20" preserveAspectRatio="none" style="display:block"><polyline points="0,11 86,11" fill="none" stroke="#4a4a58" stroke-width="1.5" opacity=".7"></polyline></svg><span class="mono" style="font-size:9px;color:#4a4a58;font-weight:700">FLAT · 41D</span></span>
|
||||
</div>
|
||||
|
||||
<!-- ladder: WIN TOTALS -->
|
||||
<div style="display:flex;align-items:center;gap:10px;padding:11px 16px 7px;border-top:1px solid #101018">
|
||||
<span class="mono" style="font-size:10px;letter-spacing:.24em;color:#F0F0F0;font-weight:700">TEAM WIN TOTALS</span>
|
||||
<span class="mono" style="margin-left:auto;font-size:8.5px;letter-spacing:.12em;color:#4a4a58">32 TEAMS</span>
|
||||
</div>
|
||||
<div style="--o:.86;opacity:.86;display:grid;grid-template-columns:1fr 88px 88px 88px 64px 44px 150px;align-items:center;gap:12px;padding:8px 16px 8px 52px">
|
||||
<span style="font-size:12.5px;font-weight:600;color:#B8BCC8"><span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#0076B6,#B0B7BC);vertical-align:-1.5px;margin-right:6px"></span>DET Lions <span class="mono" style="font-size:8.5px;color:#4a4a58;letter-spacing:.1em">WINS O/U</span></span>
|
||||
<span class="mono" style="justify-self:end;font-size:11.5px;color:#707080">10.5</span>
|
||||
<span class="mono" data-react data-fmt="half" style="justify-self:end;font-size:12.5px;font-weight:700;color:#F0F0F0;padding:1px 4px;border-radius:5px">11.5</span>
|
||||
<span class="mono" style="justify-self:end;font-size:12.5px;font-weight:800;color:#00D4A0">11.9</span>
|
||||
<span class="mono" style="justify-self:end;font-size:11.5px;font-weight:700;color:#00D4A0">+1.9%</span>
|
||||
<span class="mono" style="justify-self:end;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:#14141E;color:#B8BCC8;font-weight:800;font-size:10.5px;border:1px solid #1E1E2A">C</span>
|
||||
<span style="justify-self:end;display:flex;align-items:center;gap:8px"><svg width="86" height="20" viewBox="0 0 86 20" preserveAspectRatio="none" style="display:block"><polyline points="0,14 44,14 44,8 86,8" fill="none" stroke="#B8BCC8" stroke-width="1.5" stroke-linejoin="round" opacity=".6"></polyline><circle cx="86" cy="8" r="2" fill="#B8BCC8"></circle></svg><span class="mono" style="font-size:9px;color:#B8BCC8;font-weight:700">▲ +1.0</span></span>
|
||||
</div>
|
||||
<div style="--o:.86;opacity:.86;display:grid;grid-template-columns:1fr 88px 88px 88px 64px 44px 150px;align-items:center;gap:12px;padding:8px 16px 10px 52px;border-bottom:1px solid #101018">
|
||||
<span style="font-size:12.5px;font-weight:600;color:#B8BCC8"><span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#E31837,#FFB81C);vertical-align:-1.5px;margin-right:6px"></span>KC Chiefs <span class="mono" style="font-size:8.5px;color:#4a4a58;letter-spacing:.1em">WINS O/U · MODEL LEANS UNDER</span></span>
|
||||
<span class="mono" style="justify-self:end;font-size:11.5px;color:#707080">11.5</span>
|
||||
<span class="mono" style="justify-self:end;font-size:12.5px;font-weight:700;color:#F0F0F0">11.5</span>
|
||||
<span class="mono" style="justify-self:end;font-size:12.5px;font-weight:800;color:#00D4A0">10.8</span>
|
||||
<span class="mono" style="justify-self:end;font-size:11.5px;font-weight:700;color:#00D4A0">+3.1%</span>
|
||||
<span class="mono" style="justify-self:end;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;background:#14141E;color:#F0F0F0;font-weight:800;font-size:10.5px;border:1px solid #1E1E2A">B</span>
|
||||
<span style="justify-self:end;display:flex;align-items:center;gap:8px"><svg width="86" height="20" viewBox="0 0 86 20" preserveAspectRatio="none" style="display:block"><polyline points="0,10 86,10" fill="none" stroke="#4a4a58" stroke-width="1.5" opacity=".7"></polyline></svg><span class="mono" style="font-size:9px;color:#4a4a58;font-weight:700">FLAT · 62D</span></span>
|
||||
</div>
|
||||
|
||||
<div style="padding:12px 16px;border-top:1px solid #101018;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px">
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#4a4a58">+ 207 SEASON LINES · REPRICED ON NEWS · LAST REPRICE JUL 17 · 11:42 AM ET</span>
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080">EDGE = MODEL VS CURRENT · ODDS MARKETS GRADED ON FAIR PRICE</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- board mobile -->
|
||||
<div data-screen-label="Season board · mobile" style="margin-top:44px">
|
||||
<div style="display:flex;flex-wrap:wrap;gap:34px;justify-content:center;align-items:flex-start">
|
||||
<div>
|
||||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#707080;margin-bottom:12px;text-align:center">S1-C · SEASON BOARD · 390</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">
|
||||
<div style="display:flex;align-items:center;gap:9px">
|
||||
<span class="mono" style="font-size:11px;color:#707080">◂</span>
|
||||
<span class="mono" style="font-weight:800;font-size:11px;letter-spacing:.2em">NFL <span style="color:#707080;font-weight:600">· SEASON BOARD</span></span>
|
||||
</div>
|
||||
<span class="mono" style="font-size:8.5px;letter-spacing:.12em;color:#707080">214 LINES</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:6px;padding:9px 16px;border-bottom:1px solid #14141E">
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:6px;background:#14141E;border:1px solid #2A2A38;font-size:8.5px;letter-spacing:.1em;color:#F0F0F0;font-weight:700;flex:none">ALL</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:6px;font-size:8.5px;letter-spacing:.1em;color:#707080;flex:none">PASS</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:6px;font-size:8.5px;letter-spacing:.1em;color:#707080;flex:none">RUSH/REC</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:6px;font-size:8.5px;letter-spacing:.1em;color:#707080;flex:none">WINS</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:6px;font-size:8.5px;letter-spacing:.1em;color:#707080;flex:none">AWARDS</span>
|
||||
</div>
|
||||
<div style="flex:1;overflow:hidden">
|
||||
<!-- player group -->
|
||||
<div style="display:flex;align-items:center;gap:8px;padding:12px 16px 6px">
|
||||
<span style="width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,#0B2265,#5a7fd4);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:8px;color:#cdd9ff;flex:none">MN</span>
|
||||
<span style="font-size:13px;font-weight:700">Nabers</span>
|
||||
<span class="mono" style="font-size:8px;color:#707080;letter-spacing:.08em">WR · NYG</span>
|
||||
<span class="mono" style="margin-left:auto;display:inline-flex;align-items:center;gap:4px;height:16px;padding:0 6px;border-radius:4px;background:rgba(255,122,74,.09);border:1px solid rgba(255,122,74,.28);font-size:7.5px;letter-spacing:.12em;color:#FF7A4A;font-weight:700">BURNER</span>
|
||||
</div>
|
||||
<div style="padding:9px 16px;border-top:1px solid #101018;box-shadow:inset 2px 0 0 rgba(0,212,160,.55);display:flex;align-items:center;gap:10px">
|
||||
<div style="flex:1;min-width:0">
|
||||
<div style="font-size:12.5px;font-weight:600;color:#B8BCC8">Rec Yds</div>
|
||||
<div class="mono" style="font-size:9px;letter-spacing:.04em;color:#707080;margin-top:3px"><span style="color:#4a4a58">1,050.5</span> → <span style="color:#F0F0F0;font-weight:700;font-size:11px">1,120.5</span> · <span style="color:#00D4A0;font-weight:700">V 1,188</span></div>
|
||||
</div>
|
||||
<span class="mono" style="font-size:10px;font-weight:700;color:#00D4A0;flex:none">▲ +70</span>
|
||||
<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);flex:none">A+</span>
|
||||
</div>
|
||||
<div style="padding:9px 16px;border-top:1px solid #101018;opacity:.85;display:flex;align-items:center;gap:10px">
|
||||
<div style="flex:1;min-width:0">
|
||||
<div style="font-size:12.5px;font-weight:500;color:#B8BCC8">Receptions</div>
|
||||
<div class="mono" style="font-size:9px;letter-spacing:.04em;color:#707080;margin-top:3px"><span style="color:#4a4a58">88.5</span> → <span style="color:#F0F0F0;font-weight:700;font-size:11px">92.5</span> · <span style="color:#00D4A0;font-weight:700">V 97.0</span></div>
|
||||
</div>
|
||||
<span class="mono" style="font-size:10px;font-weight:700;color:#B8BCC8;flex:none">▲ +4</span>
|
||||
<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;flex:none">B</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;padding:12px 16px 6px;border-top:1px solid #101018">
|
||||
<span style="width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,#00338D,#C60C30);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:8px;color:#bcd0ff;flex:none">JA</span>
|
||||
<span style="font-size:13px;font-weight:700">Allen</span>
|
||||
<span class="mono" style="font-size:8px;color:#707080;letter-spacing:.08em">QB · BUF</span>
|
||||
<span class="mono" style="margin-left:auto;display:inline-flex;align-items:center;gap:4px;height:16px;padding:0 6px;border-radius:4px;background:rgba(217,164,65,.09);border:1px solid rgba(217,164,65,.28);font-size:7.5px;letter-spacing:.12em;color:#D9A441;font-weight:700">MAESTRO</span>
|
||||
</div>
|
||||
<div style="padding:9px 16px;border-top:1px solid #101018;opacity:.85;display:flex;align-items:center;gap:10px">
|
||||
<div style="flex:1;min-width:0">
|
||||
<div style="font-size:12.5px;font-weight:500;color:#B8BCC8">Pass + Rush TD</div>
|
||||
<div class="mono" style="font-size:9px;letter-spacing:.04em;color:#707080;margin-top:3px"><span style="color:#4a4a58">36.5</span> → <span style="color:#F0F0F0;font-weight:700;font-size:11px">37.5</span> · <span style="color:#00D4A0;font-weight:700">V 40.2</span></div>
|
||||
</div>
|
||||
<span class="mono" style="font-size:10px;font-weight:700;color:#B8BCC8;flex:none">▲ +1</span>
|
||||
<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);flex:none">A</span>
|
||||
</div>
|
||||
<div style="padding:9px 16px;border-top:1px solid #101018;opacity:.7;display:flex;align-items:center;gap:10px">
|
||||
<div style="flex:1;min-width:0">
|
||||
<div style="font-size:12.5px;font-weight:500;color:#B8BCC8">MVP <span class="mono" style="font-size:7.5px;color:#4a4a58;letter-spacing:.1em">FAIR PRICE</span></div>
|
||||
<div class="mono" style="font-size:9px;letter-spacing:.04em;color:#707080;margin-top:3px"><span style="color:#4a4a58">+650</span> → <span style="color:#F0F0F0;font-weight:700;font-size:11px">+600</span> · <span style="color:#00D4A0;font-weight:700">V +490</span></div>
|
||||
</div>
|
||||
<span class="mono" style="font-size:10px;font-weight:700;color:#B8BCC8;flex:none">▲</span>
|
||||
<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;flex:none">B</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;padding:12px 16px 6px;border-top:1px solid #101018">
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.2em;color:#F0F0F0;font-weight:700">TEAM WIN TOTALS</span>
|
||||
</div>
|
||||
<div style="padding:9px 16px;border-top:1px solid #101018;opacity:.85;display:flex;align-items:center;gap:10px">
|
||||
<div style="flex:1;min-width:0">
|
||||
<div style="font-size:12.5px;font-weight:500;color:#B8BCC8"><span style="display:inline-block;width:9px;height:9px;border-radius:3px;background:linear-gradient(135deg,#0076B6,#B0B7BC);vertical-align:-1px;margin-right:4px"></span>DET Wins</div>
|
||||
<div class="mono" style="font-size:9px;letter-spacing:.04em;color:#707080;margin-top:3px"><span style="color:#4a4a58">10.5</span> → <span style="color:#F0F0F0;font-weight:700;font-size:11px">11.5</span> · <span style="color:#00D4A0;font-weight:700">V 11.9</span></div>
|
||||
</div>
|
||||
<span class="mono" style="font-size:10px;font-weight:700;color:#B8BCC8;flex:none">▲ +1</span>
|
||||
<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;flex:none">C</span>
|
||||
</div>
|
||||
</div>
|
||||
<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" style="font-size:9.5px;color:#B8BCC8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1">Last reprice 11:42 AM — Nabers rec yds.</span>
|
||||
</div>
|
||||
</div>
|
||||
</x-import>
|
||||
</div>
|
||||
|
||||
<!-- reveal mobile -->
|
||||
<div>
|
||||
<div class="mono" style="font-size:10px;letter-spacing:.2em;color:#707080;margin-bottom:12px;text-align:center">S1-D · SEASON READ REVEAL · 390</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:#707080">◂ BOARD</span>
|
||||
<span class="mono" style="font-size:8.5px;letter-spacing:.16em;color:#707080">SEASON READ</span>
|
||||
<span class="mono" style="font-size:11px;color:#707080">⋯</span>
|
||||
</div>
|
||||
<div style="flex:1;overflow:hidden;padding:18px 16px 0">
|
||||
<div style="display:flex;align-items:center;gap:11px">
|
||||
<span style="position:relative;width:44px;height:44px;border-radius:11px;background:linear-gradient(135deg,#0B2265,#5a7fd4);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#cdd9ff;flex:none">MN<image-slot id="hs-nabers-m" shape="rounded" radius="11" style="position:absolute;inset:0" placeholder="Nabers headshot"></image-slot></span>
|
||||
<div style="flex:1;min-width:0">
|
||||
<div style="font-weight:700;font-size:16px">Malik Nabers</div>
|
||||
<div class="mono" style="font-size:9px;color:#707080;letter-spacing:.08em;margin-top:2px">WR · NYG · <span style="color:#FF7A4A">BURNER</span></div>
|
||||
</div>
|
||||
<span class="mono" style="font-size:34px;font-weight:800;color:#00D4A0;text-shadow:0 0 22px rgba(0,212,160,.5);flex:none">A+</span>
|
||||
</div>
|
||||
<div style="font-size:14.5px;font-weight:700;margin-top:14px">Over 1,120.5 Receiving Yards <span style="color:#707080;font-weight:500">· 2026 season</span></div>
|
||||
<!-- triplet band -->
|
||||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:12px;background:#1E1E2A;border:1px solid #1E1E2A;border-radius:10px;overflow:hidden">
|
||||
<div style="background:#0E0E14;padding:10px 12px"><div class="mono" style="font-size:8px;letter-spacing:.16em;color:#707080;margin-bottom:4px">OPEN · MAR 4</div><div class="mono" style="font-size:15px;font-weight:700;color:#707080">1,050.5</div></div>
|
||||
<div style="background:#0E0E14;padding:10px 12px"><div class="mono" style="font-size:8px;letter-spacing:.16em;color:#707080;margin-bottom:4px">NOW</div><div class="mono" style="font-size:15px;font-weight:800;color:#F0F0F0">1,120.5</div></div>
|
||||
<div style="background:#0E0E14;padding:10px 12px"><div class="mono" style="font-size:8px;letter-spacing:.16em;color:#00D4A0;margin-bottom:4px">VYNDR</div><div class="mono" style="font-size:15px;font-weight:800;color:#00D4A0">1,188</div></div>
|
||||
</div>
|
||||
<!-- movement with news markers -->
|
||||
<div style="margin-top:14px">
|
||||
<svg width="100%" height="46" viewBox="0 0 358 46" preserveAspectRatio="none" style="display:block">
|
||||
<polyline points="0,36 40,36 40,30 110,30 110,24 200,24 200,16 290,16 290,8 358,8" fill="none" stroke="#00D4A0" stroke-width="1.6" stroke-linejoin="round" opacity=".9"></polyline>
|
||||
<polyline points="0,36 40,36 40,30 110,30 110,24 200,24 200,16 290,16 290,8 358,8 358,46 0,46" fill="rgba(0,212,160,.06)" stroke="none"></polyline>
|
||||
<circle cx="40" cy="30" r="2.4" fill="#B8BCC8"></circle>
|
||||
<circle cx="200" cy="16" r="2.4" fill="#B8BCC8"></circle>
|
||||
<circle cx="290" cy="8" r="2.8" 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:7.5px;letter-spacing:.1em;color:#4a4a58">MAR 12 · FA</span>
|
||||
<span class="mono" style="font-size:7.5px;letter-spacing:.1em;color:#4a4a58">APR 25 · DRAFT</span>
|
||||
<span class="mono" style="font-size:7.5px;letter-spacing:.1em;color:#00D4A0">JUL 16 · CLEARED</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- season context -->
|
||||
<div style="margin-top:14px;background:#0A0A10;border:1px solid #14141E;border-radius:10px;padding:12px 14px">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:7px">
|
||||
<span style="width:5px;height:5px;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:11.5px;line-height:1.5;color:#B8BCC8">Pre-injury target share <span class="mono" style="color:#F0F0F0">28%</span> with no added competition. Market repriced the clearance <span class="mono" style="color:#00D4A0">+70</span> but still carries the injury discount — on current form the number is <span class="mono" style="color:#00D4A0">68</span> yards light.</p>
|
||||
</div>
|
||||
<!-- what would change this read -->
|
||||
<div style="margin-top:12px">
|
||||
<div class="mono" style="font-size:8.5px;letter-spacing:.2em;color:#707080;margin-bottom:7px">WHAT WOULD CHANGE THIS READ</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid #101018"><span class="mono" style="font-size:10px;color:#FF4757;flex:none">▼</span><span style="font-size:11px;color:#B8BCC8;flex:1">Soft-tissue setback in camp</span><span class="mono" style="font-size:8px;color:#4a4a58;letter-spacing:.1em">RE-GRADE ≤ B</span></div>
|
||||
<div style="display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid #101018"><span class="mono" style="font-size:10px;color:#FF4757;flex:none">▼</span><span style="font-size:11px;color:#B8BCC8;flex:1">QB room change before Week 1</span><span class="mono" style="font-size:8px;color:#4a4a58;letter-spacing:.1em">RE-RUN MODEL</span></div>
|
||||
<div style="display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid #101018"><span class="mono" style="font-size:10px;color:#B8BCC8;flex:none">▲</span><span style="font-size:11px;color:#B8BCC8;flex:1">Slot usage in preseason installs</span><span class="mono" style="font-size:8px;color:#4a4a58;letter-spacing:.1em">MODEL ↑</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:10px 16px 14px">
|
||||
<div class="mono" style="font-size:7.5px;letter-spacing:.1em;color:#4a4a58;text-align:center;margin-bottom:8px">MODEL RUN JUL 17 · 6:00 AM ET · SETTLES WK 18 · CLV TRACKED FROM LOCK</div>
|
||||
<div style="display:flex;gap:10px">
|
||||
<span class="mono" style="flex:1;display:inline-flex;align-items:center;justify-content:center;height:44px;border-radius:11px;background:#00D4A0;color:#06060B;font-weight:800;font-size:11px;letter-spacing:.14em">LOCK THE READ</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;justify-content:center;height:44px;width:88px;border-radius:11px;background:#14141E;border:1px solid #2A2A38;color:#B8BCC8;font-weight:700;font-size:10px;letter-spacing:.12em">SHOP ▸</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-import>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ ACT 03 · SEASON READ REVEAL · DESKTOP ============ -->
|
||||
<div data-reveal style="margin-top:110px;display:flex;align-items:baseline;gap:18px;border-bottom:1px solid #14141E;padding-bottom:18px">
|
||||
<span class="mono" style="font-size:64px;font-weight:800;line-height:.8;color:#14141E;-webkit-text-stroke:1px #2A2A38">03</span>
|
||||
<div><div class="mono" style="font-size:13px;letter-spacing:.3em;color:#F0F0F0;font-weight:800">SEASON READ REVEAL</div><div style="font-size:12.5px;color:#707080;margin-top:5px">The grade reveal at a season horizon — no "tonight." News-driven factors, movement annotated with events, and what would change the read.</div></div>
|
||||
</div>
|
||||
|
||||
<div id="reveal" data-screen-label="Season reveal · desktop" style="margin-top:44px">
|
||||
<div style="display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:start">
|
||||
<div style="position:relative;border-radius:16px;background:linear-gradient(180deg,#12121C,#0C0C12);border:1px solid #2A2A38;overflow:hidden;box-shadow:0 30px 60px -34px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);animation:vy-arrive .7s cubic-bezier(.2,.8,.2,1) both">
|
||||
<div style="position:relative;padding:22px 24px">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
|
||||
<span class="mono" style="font-size:10.5px;letter-spacing:.28em;color:#707080">SEASON READ · 2026 · NFL</span>
|
||||
<span class="mono" style="font-size:10px;letter-spacing:.18em;color:#00D4A0">CLV TRACKED FROM LOCK</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:20px">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px">
|
||||
<div class="mono" style="font-size:82px;line-height:.82;font-weight:800;color:#00D4A0;text-shadow:0 0 34px rgba(0,212,160,.5)">A+</div>
|
||||
<div class="mono" style="font-size:9.5px;letter-spacing:.24em;color:#707080">TIER</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:0">
|
||||
<div style="display:flex;align-items:center;gap:10px;margin-bottom:8px">
|
||||
<span style="position:relative;width:38px;height:38px;border-radius:9px;background:linear-gradient(135deg,#0B2265,#5a7fd4);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#cdd9ff">MN<image-slot id="hs-nabers-d" shape="rounded" radius="9" style="position:absolute;inset:0" placeholder="Nabers headshot"></image-slot></span>
|
||||
<div>
|
||||
<div style="font-weight:700;font-size:16px;line-height:1.1">Malik Nabers</div>
|
||||
<div class="mono" style="font-size:10.5px;color:#707080;letter-spacing:.08em">WR · NYG · <span style="color:#FF7A4A">BURNER</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:15px;font-weight:600;line-height:1.35">Over 1,120.5 Receiving Yards <span style="color:#707080;font-weight:500">· season</span></div>
|
||||
<div style="margin-top:12px">
|
||||
<svg width="100%" height="40" viewBox="0 0 420 40" preserveAspectRatio="none" style="display:block">
|
||||
<polyline points="0,32 48,32 48,27 130,27 130,21 236,21 236,14 340,14 340,7 420,7" fill="none" stroke="#00D4A0" stroke-width="1.6" stroke-linejoin="round" opacity=".9"></polyline>
|
||||
<polyline points="0,32 48,32 48,27 130,27 130,21 236,21 236,14 340,14 340,7 420,7 420,40 0,40" fill="rgba(0,212,160,.07)" stroke="none"></polyline>
|
||||
<circle cx="48" cy="27" r="2.4" fill="#B8BCC8"></circle>
|
||||
<circle cx="236" cy="14" r="2.4" fill="#B8BCC8"></circle>
|
||||
<circle cx="340" cy="7" r="2.8" 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:8.5px;letter-spacing:.12em;color:#4a4a58">OPEN 1,050.5 · MAR 4</span>
|
||||
<span class="mono" style="font-size:8.5px;letter-spacing:.12em;color:#4a4a58">MAR 12 FA · APR 25 DRAFT</span>
|
||||
<span class="mono" style="font-size:8.5px;letter-spacing:.12em;color:#00D4A0">JUL 16 CLEARED · NOW 1,120.5</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:20px;background:#1E1E2A;border:1px solid #1E1E2A;border-radius:10px;overflow:hidden">
|
||||
<div style="background:#0E0E14;padding:12px 14px"><div class="mono" style="font-size:9.5px;letter-spacing:.18em;color:#707080;margin-bottom:6px">OPEN</div><div class="mono" style="font-size:20px;font-weight:700;color:#707080">1,050.5</div></div>
|
||||
<div style="background:#0E0E14;padding:12px 14px"><div class="mono" style="font-size:9.5px;letter-spacing:.18em;color:#707080;margin-bottom:6px">NOW</div><div class="mono" data-react data-fmt="line" style="font-size:20px;font-weight:800;color:#F0F0F0;padding:1px 4px;border-radius:5px">1,120.5</div></div>
|
||||
<div style="background:#0E0E14;padding:12px 14px"><div class="mono" style="font-size:9.5px;letter-spacing:.18em;color:#00D4A0;margin-bottom:6px">VYNDR</div><div class="mono" style="font-size:20px;font-weight:800;color:#00D4A0">1,188</div></div>
|
||||
</div>
|
||||
<div style="margin-top:16px;background:#0A0A10;border:1px solid #14141E;border-radius:10px;padding:14px 16px">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">
|
||||
<span style="width:5px;height:5px;border-radius:50%;background:#00D4A0"></span>
|
||||
<span class="mono" style="font-size:9.5px;letter-spacing:.24em;color:#B8BCC8">VYNDR INTELLIGENCE</span>
|
||||
</div>
|
||||
<p style="font-size:12.5px;line-height:1.5;color:#B8BCC8">On current form: pre-injury target share <span class="mono" style="color:#F0F0F0">28%</span>, no added target competition, QB continuity intact. The market repriced the clearance <span class="mono" style="color:#00D4A0">+70</span> yards but still carries last season's injury discount. Our season sim puts the number <span class="mono" style="color:#00D4A0">68</span> yards light — the news, not the noise, moved this line.</p>
|
||||
</div>
|
||||
<div class="mono" style="margin-top:14px;font-size:8.5px;letter-spacing:.12em;color:#4a4a58">MODEL RUN JUL 17 · 6:00 AM ET · SETTLES WK 18 · JAN 3 2027 · NO "TONIGHT" ON A SEASON READ</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- factors + change-the-read -->
|
||||
<div style="display:flex;flex-direction:column;gap:16px">
|
||||
<div style="border-radius:12px;background:#0E0E14;border:1px solid #1E1E2A;overflow:hidden">
|
||||
<div style="padding:14px 16px 12px"><span class="mono" style="font-size:10.5px;letter-spacing:.24em;color:#F0F0F0;font-weight:700">NEWS-DRIVEN FACTORS</span></div>
|
||||
<div style="height:1px;background:#14141E"></div>
|
||||
<div style="padding:11px 16px;border-top:1px solid #101018;display:flex;align-items:center;gap:10px"><span class="mono" style="font-size:8px;letter-spacing:.1em;color:#4a4a58;width:44px;flex:none">JUL 16</span><span style="font-size:11.5px;color:#B8BCC8;flex:1">Cleared for camp — no restrictions</span><span class="mono" style="font-size:9.5px;color:#00D4A0;font-weight:700">MODEL ▲</span></div>
|
||||
<div style="padding:11px 16px;border-top:1px solid #101018;display:flex;align-items:center;gap:10px;opacity:.86"><span class="mono" style="font-size:8px;letter-spacing:.1em;color:#4a4a58;width:44px;flex:none">APR 25</span><span style="font-size:11.5px;color:#B8BCC8;flex:1">No WR drafted in first four rounds</span><span class="mono" style="font-size:9.5px;color:#00D4A0;font-weight:700">MODEL ▲</span></div>
|
||||
<div style="padding:11px 16px;border-top:1px solid #101018;display:flex;align-items:center;gap:10px;opacity:.64"><span class="mono" style="font-size:8px;letter-spacing:.1em;color:#4a4a58;width:44px;flex:none">MAR 12</span><span style="font-size:11.5px;color:#B8BCC8;flex:1">O-line additions in free agency</span><span class="mono" style="font-size:9.5px;color:#B8BCC8;font-weight:700">NEUTRAL</span></div>
|
||||
</div>
|
||||
<div style="border-radius:12px;background:#0E0E14;border:1px solid #1E1E2A;overflow:hidden">
|
||||
<div style="padding:14px 16px 12px"><span class="mono" style="font-size:10.5px;letter-spacing:.24em;color:#F0F0F0;font-weight:700">WHAT WOULD CHANGE THIS READ</span></div>
|
||||
<div style="height:1px;background:#14141E"></div>
|
||||
<div style="padding:11px 16px;border-top:1px solid #101018;display:flex;align-items:center;gap:10px"><span class="mono" style="font-size:11px;color:#FF4757;flex:none">▼</span><span style="font-size:11.5px;color:#B8BCC8;flex:1">Soft-tissue setback in camp</span><span class="mono" style="font-size:8px;color:#4a4a58;letter-spacing:.1em">RE-GRADE ≤ B</span></div>
|
||||
<div style="padding:11px 16px;border-top:1px solid #101018;display:flex;align-items:center;gap:10px"><span class="mono" style="font-size:11px;color:#FF4757;flex:none">▼</span><span style="font-size:11.5px;color:#B8BCC8;flex:1">QB room change before Week 1</span><span class="mono" style="font-size:8px;color:#4a4a58;letter-spacing:.1em">RE-RUN MODEL</span></div>
|
||||
<div style="padding:11px 16px;border-top:1px solid #101018;display:flex;align-items:center;gap:10px"><span class="mono" style="font-size:11px;color:#B8BCC8;flex:none">▲</span><span style="font-size:11.5px;color:#B8BCC8;flex:1">Heavy slot usage in preseason installs</span><span class="mono" style="font-size:8px;color:#4a4a58;letter-spacing:.1em">MODEL ↑</span></div>
|
||||
<div style="padding:11px 16px;border-top:1px solid #101018"><span class="mono" style="font-size:8.5px;letter-spacing:.12em;color:#4a4a58">EVERY SEASON READ NAMES ITS KILL CONDITIONS — HONESTY IS THE PRODUCT</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ ACT 04 · NEWS / OUTLOOK FEED ============ -->
|
||||
<div data-reveal style="margin-top:110px;display:flex;align-items:baseline;gap:18px;border-bottom:1px solid #14141E;padding-bottom:18px">
|
||||
<span class="mono" style="font-size:64px;font-weight:800;line-height:.8;color:#14141E;-webkit-text-stroke:1px #2A2A38">04</span>
|
||||
<div><div class="mono" style="font-size:13px;letter-spacing:.3em;color:#F0F0F0;font-weight:800">NEWS / OUTLOOK FEED</div><div style="font-size:12.5px;color:#707080;margin-top:5px">Event → affected entities → line impact → article. One anatomy, reused in the hub, the reveal, and /blog.</div></div>
|
||||
</div>
|
||||
|
||||
<div data-screen-label="News feed + anatomy" style="margin-top:44px;display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:start">
|
||||
<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:15px 16px 13px">
|
||||
<span class="mono" style="font-size:10.5px;letter-spacing:.24em;color:#F0F0F0;font-weight:700">THE FEED · NFL</span>
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080">EVENTS THAT MOVED OUTLOOKS ONLY</span>
|
||||
</div>
|
||||
<div style="height:1px;background:#14141E"></div>
|
||||
<div style="padding:9px 16px 5px"><span class="mono" style="font-size:8.5px;letter-spacing:.2em;color:#4a4a58">TODAY · JUL 17</span></div>
|
||||
<div style="--o:1;opacity:1;padding:12px 16px;border-top:1px solid #101018;box-shadow:inset 2px 0 0 rgba(0,212,160,.55)">
|
||||
<div style="display:flex;align-items:center;gap:8px"><span class="mono" style="font-size:8.5px;letter-spacing:.12em;color:#707080">11:42 AM</span><span class="mono" style="display:inline-flex;align-items:center;height:15px;padding:0 6px;border-radius:4px;background:#14141E;border:1px solid #1E1E2A;font-size:8px;letter-spacing:.14em;color:#B8BCC8">CLEARED</span><span class="mono" style="font-size:8px;letter-spacing:.1em;color:#4a4a58">SOURCE · TEAM REPORT</span></div>
|
||||
<div style="font-size:14px;font-weight:700;margin-top:6px;line-height:1.35">Nabers cleared for camp with no restrictions — the injury discount is now the market's mistake</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap">
|
||||
<span class="mono" style="display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:6px;background:#14141E;border:1px solid #1E1E2A;font-size:9px;letter-spacing:.08em;color:#B8BCC8"><span style="width:9px;height:9px;border-radius:3px;background:linear-gradient(135deg,#0B2265,#5a7fd4)"></span>NYG</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:6px;background:#14141E;border:1px solid #1E1E2A;font-size:9px;letter-spacing:.08em;color:#B8BCC8">M. NABERS</span>
|
||||
<span class="mono" style="font-size:9.5px;color:#707080">REC YDS <span style="color:#4a4a58">1,050.5</span> → <span style="color:#F0F0F0;font-weight:700">1,120.5</span> · <span style="color:#00D4A0">V 1,188</span></span>
|
||||
<a href="Vyndr Intelligence.dc.html#articles" class="mono" style="margin-left:auto;font-size:9px;letter-spacing:.14em">FULL ARTICLE ▸</a>
|
||||
</div>
|
||||
</div>
|
||||
<div style="--o:.86;opacity:.86;padding:12px 16px;border-top:1px solid #101018">
|
||||
<div style="display:flex;align-items:center;gap:8px"><span class="mono" style="font-size:8.5px;letter-spacing:.12em;color:#707080">10:15 AM</span><span class="mono" style="display:inline-flex;align-items:center;height:15px;padding:0 6px;border-radius:4px;background:#14141E;border:1px solid #1E1E2A;font-size:8px;letter-spacing:.14em;color:#B8BCC8">CAMP REPORT</span><span class="mono" style="font-size:8px;letter-spacing:.1em;color:#4a4a58">SOURCE · BEAT POOL</span></div>
|
||||
<div style="font-size:14px;font-weight:600;margin-top:6px;line-height:1.35">Worthy running clear WR1 reps in KC installs</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap">
|
||||
<span class="mono" style="display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:6px;background:#14141E;border:1px solid #1E1E2A;font-size:9px;letter-spacing:.08em;color:#B8BCC8"><span style="width:9px;height:9px;border-radius:3px;background:linear-gradient(135deg,#E31837,#FFB81C)"></span>KC</span>
|
||||
<span class="mono" style="font-size:9.5px;color:#707080">REC YDS <span style="color:#4a4a58">990.5</span> → <span style="color:#F0F0F0;font-weight:700">1,024.5</span> · <span style="color:#00D4A0">V 1,061</span></span>
|
||||
<span class="mono" style="margin-left:auto;font-size:9px;letter-spacing:.14em;color:#4a4a58">FULL ARTICLE ▸</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="--o:.7;opacity:.7;padding:12px 16px;border-top:1px solid #101018">
|
||||
<div style="display:flex;align-items:center;gap:8px"><span class="mono" style="font-size:8.5px;letter-spacing:.12em;color:#707080">9:30 AM</span><span class="mono" style="display:inline-flex;align-items:center;height:15px;padding:0 6px;border-radius:4px;background:rgba(255,179,71,.08);border:1px solid rgba(255,179,71,.25);font-size:8px;letter-spacing:.14em;color:#FFB347">CONTRACT</span><span class="mono" style="font-size:8px;letter-spacing:.1em;color:#4a4a58">SOURCE · LEAGUE FILING</span></div>
|
||||
<div style="font-size:14px;font-weight:600;margin-top:6px;line-height:1.35">Higgins restructure keeps the WR2 in stripes — Burrow's ceiling holds</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap">
|
||||
<span class="mono" style="display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:6px;background:#14141E;border:1px solid #1E1E2A;font-size:9px;letter-spacing:.08em;color:#B8BCC8"><span style="width:9px;height:9px;border-radius:3px;background:linear-gradient(135deg,#FB4F14,#1a1a1a)"></span>CIN</span>
|
||||
<span class="mono" style="font-size:9.5px;color:#707080">PASS TD <span style="color:#4a4a58">27.5</span> → <span style="color:#F0F0F0;font-weight:700">28.5</span> · <span style="color:#00D4A0">V 29.8</span></span>
|
||||
<span class="mono" style="margin-left:auto;font-size:9px;letter-spacing:.14em;color:#4a4a58">FULL ARTICLE ▸</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:9px 16px 5px;border-top:1px solid #101018"><span class="mono" style="font-size:8.5px;letter-spacing:.2em;color:#4a4a58">WED · JUL 16</span></div>
|
||||
<div style="--o:.55;opacity:.55;padding:12px 16px;border-top:1px solid #101018">
|
||||
<div style="display:flex;align-items:center;gap:8px"><span class="mono" style="font-size:8.5px;letter-spacing:.12em;color:#707080">4:40 PM</span><span class="mono" style="display:inline-flex;align-items:center;height:15px;padding:0 6px;border-radius:4px;background:rgba(255,71,87,.08);border:1px solid rgba(255,71,87,.25);font-size:8px;letter-spacing:.14em;color:#FF4757">INJURY</span></div>
|
||||
<div style="font-size:14px;font-weight:600;margin-top:6px;line-height:1.35">Kincaid tweaks hamstring in conditioning — monitoring, not moving</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap">
|
||||
<span class="mono" style="display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:6px;background:#14141E;border:1px solid #1E1E2A;font-size:9px;letter-spacing:.08em;color:#B8BCC8"><span style="width:9px;height:9px;border-radius:3px;background:linear-gradient(135deg,#00338D,#C60C30)"></span>BUF</span>
|
||||
<span class="mono" style="font-size:9.5px;color:#707080">REC YDS <span style="color:#F0F0F0;font-weight:700">625.5</span> · <span style="color:#707080">HELD · WATCHING</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- honest empty -->
|
||||
<div style="margin:14px 16px 16px;border:1px dashed #1E1E2A;border-radius:10px;padding:16px;text-align:center">
|
||||
<div class="mono" style="font-size:9px;letter-spacing:.22em;color:#707080">QUIET WIRE</div>
|
||||
<div style="font-size:12px;color:#707080;margin-top:6px">No outlook-moving news since 11:42 AM. We don't manufacture movement.</div>
|
||||
<div class="mono" style="font-size:8px;letter-spacing:.12em;color:#4a4a58;margin-top:6px">EMPTY STATE · RENDERS WHEN A DAY HAS NO EVENTS</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- anatomy spec -->
|
||||
<div style="border-radius:12px;background:#0E0E14;border:1px solid #1E1E2A;padding:16px">
|
||||
<div class="mono" style="font-size:10.5px;letter-spacing:.24em;color:#F0F0F0;font-weight:700;margin-bottom:12px">ROW ANATOMY</div>
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<div style="display:flex;gap:10px;align-items:baseline"><span class="mono" style="font-size:9px;color:#00D4A0;width:18px;flex:none">1</span><div><div class="mono" style="font-size:9.5px;letter-spacing:.14em;color:#B8BCC8">TIME + EVENT TAG + SOURCE</div><div style="font-size:11px;color:#707080;margin-top:2px">Tag color = meaning: neutral grey, CONTRACT amber, INJURY red. Never green — green is edge only.</div></div></div>
|
||||
<div style="display:flex;gap:10px;align-items:baseline"><span class="mono" style="font-size:9px;color:#00D4A0;width:18px;flex:none">2</span><div><div class="mono" style="font-size:9.5px;letter-spacing:.14em;color:#B8BCC8">HEADLINE</div><div style="font-size:11px;color:#707080;margin-top:2px">Editorial voice — states what happened and why the desk cares. Weight 700 only when the event repriced a line.</div></div></div>
|
||||
<div style="display:flex;gap:10px;align-items:baseline"><span class="mono" style="font-size:9px;color:#00D4A0;width:18px;flex:none">3</span><div><div class="mono" style="font-size:9.5px;letter-spacing:.14em;color:#B8BCC8">AFFECTED CHIPS</div><div style="font-size:11px;color:#707080;margin-top:2px">Existing TeamChip + player chips. Tap target ≥ 44px on mobile.</div></div></div>
|
||||
<div style="display:flex;gap:10px;align-items:baseline"><span class="mono" style="font-size:9px;color:#00D4A0;width:18px;flex:none">4</span><div><div class="mono" style="font-size:9.5px;letter-spacing:.14em;color:#B8BCC8">LINE IMPACT</div><div style="font-size:11px;color:#707080;margin-top:2px">old → new · VYNDR model. FLAT + HELD are honest values — a non-move is information.</div></div></div>
|
||||
<div style="display:flex;gap:10px;align-items:baseline"><span class="mono" style="font-size:9px;color:#00D4A0;width:18px;flex:none">5</span><div><div class="mono" style="font-size:9.5px;letter-spacing:.14em;color:#B8BCC8">FULL ARTICLE ▸</div><div style="font-size:11px;color:#707080;margin-top:2px">Present only when an article exists. No dead links, no "coming soon."</div></div></div>
|
||||
</div>
|
||||
<div style="margin-top:14px;padding-top:12px;border-top:1px solid #14141E">
|
||||
<div class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#4a4a58;line-height:1.7">REUSED IN · HUB "WHAT CHANGED TODAY" · REVEAL FACTORS · /BLOG FEED · THE REPORT EMAIL</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-screen-label="footer" style="margin-top:64px">
|
||||
<div style="padding-top:22px;border-top:1px solid #14141E;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px">
|
||||
<span class="mono" style="font-size:10px;letter-spacing:.16em;color:#707080">HUB HOME · SEASON BOARD · SEASON REVEAL · THE FEED · NFL + NBA · DESKTOP + 390</span>
|
||||
<span class="mono" style="font-size:10px;letter-spacing:.16em;color:#00D4A0">VYNDR · SESSION 2 · SURFACE 1</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"motion":{"editor":"boolean","default":true,"tsType":"boolean","section":"Behavior"},"reactions":{"editor":"boolean","default":true,"tsType":"boolean","section":"Behavior"}}">
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
const kick = Math.max(0, Math.ceil((new Date('2026-09-10T13:00:00-04:00') - Date.now()) / 864e5));
|
||||
return {
|
||||
rootRef: (n) => { this.rootNode = n; },
|
||||
kickoffDays: String(kick),
|
||||
stillClass: (this.props.motion ?? true) ? '' : 'vy-still'
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
this._t = [];
|
||||
const tick = () => {
|
||||
const now = new Date();
|
||||
const s = now.toLocaleTimeString('en-US', { hour12: false });
|
||||
document.querySelectorAll('[data-sync-clock]').forEach(el => el.textContent = s);
|
||||
const wt = document.querySelector('[data-wire-time]');
|
||||
if (wt) wt.textContent = s;
|
||||
};
|
||||
tick();
|
||||
this._t.push(setInterval(tick, 1000));
|
||||
|
||||
const entries = [
|
||||
'Nabers 1,050.5 → 1,120.5 on camp clearance. Grade holds A+.',
|
||||
'Worthy rec yds repriced +34.0 on WR1 camp reps.',
|
||||
'KC win total: market 11.5, model 10.8 — under lean logged.',
|
||||
'NBA · Wemby MVP steams +420 → +330 since June.',
|
||||
'Summer League stays ungraded — low-signal market refused.',
|
||||
'214 NFL season lines live · last reprice 11:42 AM ET.'
|
||||
];
|
||||
let wi = 0;
|
||||
this._t.push(setInterval(() => {
|
||||
const el = document.querySelector('[data-wire]');
|
||||
if (!el) return;
|
||||
wi = (wi + 1) % entries.length;
|
||||
el.textContent = entries[wi];
|
||||
el.style.animation = 'none';
|
||||
void el.offsetWidth;
|
||||
el.style.animation = 'vy-wirein 6s ease both';
|
||||
}, 6000));
|
||||
|
||||
// reactions: gated post-boot, fire on "data events" only
|
||||
const fmt = {
|
||||
line: v => v.toLocaleString('en-US', { minimumFractionDigits: 1, maximumFractionDigits: 1 }),
|
||||
half: v => v.toFixed(1),
|
||||
edge: v => (v >= 0 ? '+' : '') + v.toFixed(1) + '%',
|
||||
odds: v => (v >= 0 ? '+' : '') + Math.round(v),
|
||||
int: v => String(Math.round(v))
|
||||
};
|
||||
const nudge = () => {
|
||||
if (!(this.props.reactions ?? true)) return;
|
||||
const cells = [...document.querySelectorAll('[data-react]')];
|
||||
if (!cells.length) return;
|
||||
const el = cells[Math.floor(Math.random() * cells.length)];
|
||||
const f = el.getAttribute('data-fmt') || 'half';
|
||||
let v = parseFloat(el.textContent.replace(/[,%+]/g, ''));
|
||||
if (isNaN(v)) return;
|
||||
let up;
|
||||
if (f === 'edge') { const d = (Math.random() - .45) * .3; up = d >= 0; v += d; }
|
||||
else if (f === 'odds') { const d = Math.random() < .5 ? -25 : 25; up = d < 0; v += d; }
|
||||
else { const step = f === 'line' && v > 500 ? (Math.random() < .5 ? -1 : 1) * (Math.random() < .7 ? 1 : 2) : (Math.random() < .5 ? -.5 : .5); up = step > 0; v += step; }
|
||||
el.textContent = fmt[f] ? fmt[f](v) : v;
|
||||
el.classList.remove('rx-up', 'rx-down');
|
||||
void el.offsetWidth;
|
||||
el.classList.add(up ? 'rx-up' : 'rx-down');
|
||||
};
|
||||
this._t.push(setTimeout(() => { this._t.push(setInterval(nudge, 5200)); }, 1800));
|
||||
|
||||
// scroll reveal
|
||||
const secs = [...(this.rootNode || document).querySelectorAll('[data-reveal],[data-screen-label]')];
|
||||
secs.forEach(s => { if (!s.hasAttribute('data-reveal')) s.setAttribute('data-reveal', ''); });
|
||||
this._io = new IntersectionObserver(ents => {
|
||||
ents.forEach(e => { if (e.isIntersecting) { e.target.classList.add('vy-in'); this._io.unobserve(e.target); } });
|
||||
}, { rootMargin: '0px 0px -8% 0px' });
|
||||
secs.forEach(s => this._io.observe(s));
|
||||
}
|
||||
componentWillUnmount() {
|
||||
(this._t || []).forEach(t => { clearInterval(t); clearTimeout(t); });
|
||||
if (this._io) this._io.disconnect();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,426 @@
|
||||
<!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-bootline{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
|
||||
@keyframes vy-arrive{0%{opacity:0;transform:scale(.88) translateY(10px);filter:blur(6px)}60%{opacity:1;transform:scale(1.015) translateY(0);filter:blur(0)}100%{opacity:1;transform:scale(1) translateY(0)}}
|
||||
@keyframes vy-glitch{0%,90%,100%{transform:translate(0,0);clip-path:inset(0 0 0 0);text-shadow:none}91%{transform:translate(-1.5px,0);clip-path:inset(12% 0 42% 0);text-shadow:1.6px 0 #FF4757,-1.6px 0 #00D4A0}93%{transform:translate(1.5px,0);clip-path:inset(58% 0 8% 0);text-shadow:-1.6px 0 #FF4757,1.6px 0 #00D4A0}95%{transform:translate(-1px,0);clip-path:inset(32% 0 30% 0);text-shadow:1px 0 #00D4A0}96%{transform:translate(1px,0);clip-path:inset(70% 0 4% 0);text-shadow:none}}
|
||||
@keyframes vy-cursor{0%,49%{opacity:1}50%,100%{opacity: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}
|
||||
.vy-grain{position:fixed;inset:0;z-index:5;pointer-events:none;mix-blend-mode:overlay;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:140px}
|
||||
.vy-vignette{position:fixed;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 200px 40px rgba(0,0,0,.55),inset 0 90px 120px -60px rgba(0,212,160,.05)}
|
||||
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
|
||||
[data-reveal].vy-in{opacity:1;transform:none}
|
||||
.vy-still *{animation-play-state:paused !important}
|
||||
html{scroll-behavior:smooth}
|
||||
</style>
|
||||
<script src="image-slot.js"></script>
|
||||
<style>image-slot::part(empty){opacity:0}</style>
|
||||
</helmet>
|
||||
<div ref="{{ rootRef }}" class="{{ stillClass }}" style="min-height:100vh;background:radial-gradient(1200px 700px at 78% -8%,rgba(0,212,160,.06),transparent 60%),#06060B;padding:0 0 120px">
|
||||
<div class="vy-vignette" aria-hidden="true"></div>
|
||||
<div class="vy-grain" aria-hidden="true"></div>
|
||||
|
||||
<div style="position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;align-items:center;gap:14px;height:36px;padding:0 40px;background:rgba(6,6,11,.88);backdrop-filter:blur(14px);border-top:1px solid #14141E">
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.26em;color:#00D4A0;font-weight:800;flex:none">THE WIRE</span>
|
||||
<span style="width:1px;height:14px;background:#1E1E2A;flex:none"></span>
|
||||
<span class="mono" data-wire-time style="font-size:10px;color:#707080;letter-spacing:.06em;flex:none">--:--:--</span>
|
||||
<span class="mono" data-wire style="font-size:11px;color:#B8BCC8;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1">Intelligence desk open — 7 books held per prop, CLV tracked from lock.</span>
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.16em;color:#4a4a58;flex:none">LOG ▸</span>
|
||||
</div>
|
||||
|
||||
<div style="max-width:1240px;margin:0 auto;padding:0 40px">
|
||||
|
||||
<div style="padding:52px 0 30px">
|
||||
<div class="mono" style="font-size:11px;letter-spacing:.34em;color:#00D4A0;margin-bottom:16px">VYNDR · ACT 01 · THE PRICE TRIPLET</div>
|
||||
<h1 style="font-size:38px;font-weight:800;letter-spacing:-.02em;line-height:1.05">The honest layer, rendered.<span class="mono" style="color:#00D4A0;animation:vy-cursor 1.1s steps(1) infinite">▌</span></h1>
|
||||
<p style="margin-top:12px;max-width:660px;color:#B8BCC8;font-size:14px;line-height:1.55">The price triplet leads — <span class="mono" style="color:#F0F0F0">book · fair · model</span>, the de-vigged number nobody else shows consumers. Then line shopping, article media, CLV & calibration, and The Report — extensions sharing primitives. The movement strip is defined once here and reused everywhere a line has a past.</p>
|
||||
<div class="mono" style="margin-top:14px;font-size:10px;letter-spacing:.16em;color:#707080">BOOK · FAIR · MODEL · FIVE HONESTY STATES · STAT PROJECTION + PRICE LAYER</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ ACT 01 · THE PRICE TRIPLET (HERO FEATURE) ============ -->
|
||||
<div data-reveal style="margin-top:14px;display:flex;align-items:baseline;gap:18px;border-bottom:1px solid #14141E;padding-bottom:18px">
|
||||
<span class="mono" style="font-size:64px;font-weight:800;line-height:.8;color:#14141E;-webkit-text-stroke:1px #2A2A38">01</span>
|
||||
<div><div class="mono" style="font-size:13px;letter-spacing:.3em;color:#F0F0F0;font-weight:800">THE PRICE TRIPLET <span style="color:#FFB347">· HERO</span></div><div style="font-size:12.5px;color:#707080;margin-top:5px">Book · fair · model, per prop — the price-honesty layer beside the stat projection. Fair is the amber hero, honest on every row: value, edge-but-priced-out, or no edge. Renders on the read card, board and hero; the close lives in the ledger.</div></div>
|
||||
</div>
|
||||
|
||||
<div id="triplet" data-screen-label="Price triplet · anatomy + four honesty states" style="margin-top:44px">
|
||||
|
||||
<!-- anatomy · inherits the parlay TRUE FAIR VALUE language -->
|
||||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;padding:22px 24px">
|
||||
<div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px">
|
||||
<span class="mono" style="font-size:12px;letter-spacing:.28em;color:#F0F0F0;font-weight:700">ANATOMY</span>
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080">EXTENDS THE PARLAY "TRUE FAIR VALUE" — 2-UP GRID → 3-LEG PER-PROP</span>
|
||||
</div>
|
||||
<div style="max-width:560px">
|
||||
<div style="display:flex;align-items:stretch;border:1px solid #1E1E2A;border-radius:12px;overflow:hidden;background:#0E0E14">
|
||||
<div style="flex:1;min-width:0;text-align:center;padding:16px 10px">
|
||||
<div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">BOOK</div>
|
||||
<div class="mono" style="font-size:22px;font-weight:800;color:#F0F0F0;margin-top:8px;letter-spacing:-.01em">+125</div>
|
||||
<div class="mono" style="font-size:7px;letter-spacing:.12em;color:#4a4a58;margin-top:6px">OFFERED</div>
|
||||
</div>
|
||||
<div style="flex:1.16;min-width:0;text-align:center;padding:16px 10px;background:rgba(255,179,71,.055);border-left:1px solid #1E1E2A;border-right:1px solid #1E1E2A">
|
||||
<div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#FFB347">◆ FAIR</div>
|
||||
<div class="mono" style="font-size:31px;font-weight:800;color:#FFB347;margin-top:5px;letter-spacing:-.02em;text-shadow:0 0 22px rgba(255,179,71,.24)">+110</div>
|
||||
<div class="mono" style="font-size:7px;letter-spacing:.12em;color:#8a7a55;margin-top:5px">DE-VIGGED · HERO</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:0;text-align:center;padding:16px 10px">
|
||||
<div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">MODEL</div>
|
||||
<div class="mono" style="font-size:22px;font-weight:800;color:#00D4A0;margin-top:8px;letter-spacing:-.01em">+98</div>
|
||||
<div class="mono" style="font-size:7px;letter-spacing:.12em;color:#4a4a58;margin-top:6px">OUR PRICE</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px;max-width:820px">
|
||||
<div><div class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#F0F0F0;font-weight:700">BOOK</div><div style="font-size:10.5px;color:#707080;line-height:1.55;margin-top:5px">The market's offered line. Honest on every row.</div></div>
|
||||
<div><div class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#FFB347;font-weight:700">FAIR · THE HERO</div><div style="font-size:10.5px;color:#B8BCC8;line-height:1.55;margin-top:5px">The de-vigged fair number. The whole product. Never hidden — not even when the model leg is poisoned.</div></div>
|
||||
<div><div class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#00D4A0;font-weight:700">MODEL</div><div style="font-size:10.5px;color:#707080;line-height:1.55;margin-top:5px">VYNDR's own price. Green only for takeable edge — never a juiced one. Suppressible on quarantined rows.</div></div>
|
||||
</div>
|
||||
<div class="mono" style="font-size:8px;letter-spacing:.12em;color:#4a4a58;margin-top:16px;line-height:1.7">SAME TOKENS AS THE PARLAY · LABEL 7.5PX / .14EM / #707080 · VALUE MONO 800 · FAIR AMBER #FFB347 VS BOOK #F0F0F0 · GREEN #00D4A0 = TAKEABLE EDGE ONLY · BLUE = EDGE PRICED OUT</div>
|
||||
</div>
|
||||
|
||||
<!-- four honesty states · desktop -->
|
||||
<div style="display:flex;align-items:center;gap:12px;margin:30px 0 14px">
|
||||
<span class="mono" style="font-size:12px;letter-spacing:.28em;color:#F0F0F0;font-weight:700">FIVE HONESTY STATES · DESKTOP</span>
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080">THREE VERDICTS — VALUE · EDGE-NOT-TAKEABLE · NO EDGE — PLUS QUARANTINE & REFUSAL</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
|
||||
|
||||
<!-- STATE 1 · POSITIVE VALUE -->
|
||||
<div style="border-radius:14px;background:#0E0E14;border:1px solid #1E1E2A;padding:18px;display:flex;flex-direction:column;gap:13px">
|
||||
<div style="display:flex;align-items:flex-start;justify-content:space-between;gap:10px">
|
||||
<div style="min-width:0"><div style="font-size:13.5px;font-weight:700">Nabers <span style="color:#B8BCC8;font-weight:500">o 1,115.5 Rec Yds</span></div><div class="mono" style="font-size:8px;letter-spacing:.12em;color:#4a4a58;margin-top:3px">NYG · WK 1</div></div>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:5px;background:rgba(0,212,160,.1);border:1px solid rgba(0,212,160,.28);font-size:8px;letter-spacing:.12em;color:#00D4A0;font-weight:700;flex:none">1 · VALUE</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:stretch;border:1px solid #1E1E2A;border-radius:11px;overflow:hidden;background:#0A0A10">
|
||||
<div style="flex:1;min-width:0;text-align:center;padding:14px 8px"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">BOOK</div><div class="mono" style="font-size:20px;font-weight:800;color:#F0F0F0;margin-top:7px">+125</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#4a4a58;margin-top:5px">OFFERED</div></div>
|
||||
<div style="flex:1.16;min-width:0;text-align:center;padding:14px 8px;background:rgba(255,179,71,.055);border-left:1px solid #1E1E2A;border-right:1px solid #1E1E2A"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#FFB347">◆ FAIR</div><div class="mono" style="font-size:29px;font-weight:800;color:#FFB347;margin-top:4px;letter-spacing:-.02em;text-shadow:0 0 20px rgba(255,179,71,.22)">+110</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#8a7a55;margin-top:4px">DE-VIGGED</div></div>
|
||||
<div style="flex:1;min-width:0;text-align:center;padding:14px 8px"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">MODEL</div><div class="mono" style="font-size:20px;font-weight:800;color:#00D4A0;margin-top:7px;text-shadow:0 0 16px rgba(0,212,160,.35)">+98</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#4a4a58;margin-top:5px">OUR PRICE</div></div>
|
||||
</div>
|
||||
<div style="padding:11px 13px;border-radius:10px;background:rgba(0,212,160,.08);border:1px solid rgba(0,212,160,.28)">
|
||||
<div style="display:flex;align-items:center;gap:8px"><span style="width:7px;height:7px;border-radius:50%;background:#00D4A0;flex:none;box-shadow:0 0 8px rgba(0,212,160,.7)"></span><span class="mono" style="font-size:10.5px;font-weight:800;letter-spacing:.05em;color:#00D4A0">VALUE · +2.9% VS FAIR</span></div>
|
||||
<div style="font-size:10.5px;color:#B8BCC8;line-height:1.5;margin-top:6px">Model prices it shorter than the honest number — the book is paying longer than the leg is worth. Real edge.</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px"><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#4a4a58">THE PRICE STORY · READ CARD</span><a href="#clv" class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">CLOSES TRACKED IN YOUR LEDGER ▸</a></div>
|
||||
</div>
|
||||
|
||||
<!-- STATE 2 · EDGE BUT NOT TAKEABLE (priced out) -->
|
||||
<div style="border-radius:14px;background:#0E0E14;border:1px solid #1E1E2A;padding:18px;display:flex;flex-direction:column;gap:13px">
|
||||
<div style="display:flex;align-items:flex-start;justify-content:space-between;gap:10px">
|
||||
<div style="min-width:0"><div style="font-size:13.5px;font-weight:700">Chase <span style="color:#B8BCC8;font-weight:500">o 6.5 Receptions</span></div><div class="mono" style="font-size:8px;letter-spacing:.12em;color:#4a4a58;margin-top:3px">CIN · WK 1</div></div>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:5px;background:rgba(106,147,200,.12);border:1px solid rgba(106,147,200,.34);font-size:8px;letter-spacing:.1em;color:#8fb2de;font-weight:700;flex:none">2 · PRICED OUT</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:stretch;border:1px solid #1E1E2A;border-radius:11px;overflow:hidden;background:#0A0A10">
|
||||
<div style="flex:1;min-width:0;text-align:center;padding:14px 8px"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">BOOK</div><div class="mono" style="font-size:20px;font-weight:800;color:#F0F0F0;margin-top:7px">−210</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#4a4a58;margin-top:5px">JUICED</div></div>
|
||||
<div style="flex:1.16;min-width:0;text-align:center;padding:14px 8px;background:rgba(255,179,71,.055);border-left:1px solid #1E1E2A;border-right:1px solid #1E1E2A"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#FFB347">◆ FAIR</div><div class="mono" style="font-size:29px;font-weight:800;color:#FFB347;margin-top:4px;letter-spacing:-.02em;text-shadow:0 0 20px rgba(255,179,71,.22)">−175</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#8a7a55;margin-top:4px">DE-VIGGED</div></div>
|
||||
<div style="flex:1;min-width:0;text-align:center;padding:14px 8px"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">MODEL</div><div class="mono" style="font-size:20px;font-weight:800;color:#8fb2de;margin-top:7px">−240</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#4a4a58;margin-top:5px">OUR PRICE</div></div>
|
||||
</div>
|
||||
<div style="padding:11px 13px;border-radius:10px;background:rgba(106,147,200,.08);border:1px solid rgba(106,147,200,.3)">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:10px"><div style="display:flex;align-items:center;gap:8px"><span class="mono" style="font-size:12px;color:#8fb2de;flex:none;line-height:1">⊘</span><span class="mono" style="font-size:10.5px;font-weight:800;letter-spacing:.05em;color:#8fb2de">EDGE · NOT TAKEABLE</span></div><span class="mono" style="font-size:9px;letter-spacing:.06em;color:#7a93b0">+11.7% EV AT −210</span></div>
|
||||
<div style="font-size:10.5px;color:#B8BCC8;line-height:1.5;margin-top:6px">The math shows edge — but −210 is too juiced to bet. We won't call a juiced price a value, and we won't pretend the edge wasn't there.</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px"><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#4a4a58">TAKEABLE BAND −160 TO +200</span><a href="#clv" class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">CLOSES TRACKED IN YOUR LEDGER ▸</a></div>
|
||||
</div>
|
||||
|
||||
<!-- STATE 3 · NO / NEGATIVE VALUE -->
|
||||
<div style="border-radius:14px;background:#0E0E14;border:1px solid #1E1E2A;padding:18px;display:flex;flex-direction:column;gap:13px">
|
||||
<div style="display:flex;align-items:flex-start;justify-content:space-between;gap:10px">
|
||||
<div style="min-width:0"><div style="font-size:13.5px;font-weight:700">Achane <span style="color:#B8BCC8;font-weight:500">o 71.5 Rush Yds</span></div><div class="mono" style="font-size:8px;letter-spacing:.12em;color:#4a4a58;margin-top:3px">MIA · WK 1</div></div>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:5px;background:#14141E;border:1px solid #2A2A38;font-size:8px;letter-spacing:.12em;color:#B8BCC8;font-weight:700;flex:none">3 · NO EDGE</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:stretch;border:1px solid #1E1E2A;border-radius:11px;overflow:hidden;background:#0A0A10">
|
||||
<div style="flex:1;min-width:0;text-align:center;padding:14px 8px"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">BOOK</div><div class="mono" style="font-size:20px;font-weight:800;color:#F0F0F0;margin-top:7px">+118</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#4a4a58;margin-top:5px">OFFERED</div></div>
|
||||
<div style="flex:1.16;min-width:0;text-align:center;padding:14px 8px;background:rgba(255,179,71,.055);border-left:1px solid #1E1E2A;border-right:1px solid #1E1E2A"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#FFB347">◆ FAIR</div><div class="mono" style="font-size:29px;font-weight:800;color:#FFB347;margin-top:4px;letter-spacing:-.02em;text-shadow:0 0 20px rgba(255,179,71,.22)">+104</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#8a7a55;margin-top:4px">DE-VIGGED</div></div>
|
||||
<div style="flex:1;min-width:0;text-align:center;padding:14px 8px"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">MODEL</div><div class="mono" style="font-size:20px;font-weight:800;color:#B8BCC8;margin-top:7px">+112</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#4a4a58;margin-top:5px">OUR PRICE</div></div>
|
||||
</div>
|
||||
<div style="padding:11px 13px;border-radius:10px;background:#101018;border:1px solid #1E1E2A">
|
||||
<div style="display:flex;align-items:center;gap:8px"><span style="width:7px;height:7px;border-radius:50%;border:1.5px solid #707080;flex:none"></span><span class="mono" style="font-size:10.5px;font-weight:800;letter-spacing:.05em;color:#B8BCC8">NO EDGE HERE · −1.8% VS FAIR</span></div>
|
||||
<div style="font-size:10.5px;color:#707080;line-height:1.5;margin-top:6px">Model lands short of fair — the honest number is already priced. We're not calling this a play. That "no" is the instrument working.</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px"><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#4a4a58">THE PRICE STORY · READ CARD</span><a href="#clv" class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">CLOSES TRACKED IN YOUR LEDGER ▸</a></div>
|
||||
</div>
|
||||
|
||||
<!-- STATE 4 · MODEL-LEG SUPPRESSED (quarantined) · PRIMARY -->
|
||||
<div style="border-radius:14px;background:#0E0E14;border:1px solid #2A2A38;padding:18px;display:flex;flex-direction:column;gap:13px;box-shadow:inset 3px 0 0 rgba(255,179,71,.4)">
|
||||
<div style="display:flex;align-items:flex-start;justify-content:space-between;gap:10px">
|
||||
<div style="min-width:0"><div style="font-size:13.5px;font-weight:700">Bijan <span style="color:#B8BCC8;font-weight:500">o 84.5 Rush Yds</span></div><div class="mono" style="font-size:8px;letter-spacing:.12em;color:#4a4a58;margin-top:3px">ATL · WK 1</div></div>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:5px;background:rgba(255,179,71,.1);border:1px solid rgba(255,179,71,.3);font-size:8px;letter-spacing:.1em;color:#FFB347;font-weight:700;flex:none">4 · QUARANTINE · 38%</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:stretch;border:1px solid #1E1E2A;border-radius:11px;overflow:hidden;background:#0A0A10">
|
||||
<div style="flex:1;min-width:0;text-align:center;padding:14px 8px"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">BOOK</div><div class="mono" style="font-size:20px;font-weight:800;color:#F0F0F0;margin-top:7px">+130</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#4a4a58;margin-top:5px">OFFERED</div></div>
|
||||
<div style="flex:1.16;min-width:0;text-align:center;padding:14px 8px;background:rgba(255,179,71,.055);border-left:1px solid #1E1E2A;border-right:1px solid #1E1E2A"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#FFB347">◆ FAIR</div><div class="mono" style="font-size:29px;font-weight:800;color:#FFB347;margin-top:4px;letter-spacing:-.02em;text-shadow:0 0 20px rgba(255,179,71,.22)">+116</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#8a7a55;margin-top:4px">DE-VIGGED</div></div>
|
||||
<div style="flex:1;min-width:0;text-align:center;padding:14px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(255,255,255,.014) 5px,rgba(255,255,255,.014) 10px)"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">MODEL</div><div class="mono" style="font-size:19px;font-weight:800;color:#4a4a58;margin-top:8px;letter-spacing:.1em">— · —</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#5a5a68;margin-top:6px">WITHHELD</div></div>
|
||||
</div>
|
||||
<div style="padding:11px 13px;border-radius:10px;background:#101018;border:1px solid #2A2A38">
|
||||
<div style="display:flex;align-items:center;gap:8px"><span style="width:7px;height:7px;border-radius:2px;background:#FFB347;flex:none;opacity:.85"></span><span class="mono" style="font-size:10.5px;font-weight:800;letter-spacing:.05em;color:#B8BCC8">MODEL READ WITHHELD</span></div>
|
||||
<div style="font-size:10.5px;color:#707080;line-height:1.5;margin-top:6px">Graded against an unverified matchup — so we suppressed our price. Book & fair stand; we never hide the honest fair number because a different leg is poisoned.</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px"><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#4a4a58">PRIMARY STATE · 200 / 520 ROWS</span><a href="#clv" class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">CLOSES TRACKED IN YOUR LEDGER ▸</a></div>
|
||||
</div>
|
||||
|
||||
<!-- STATE 5 · REFUSAL / CAN'T-GRADE · spans full width -->
|
||||
<div style="grid-column:1 / -1;border-radius:14px;background:#0E0E14;border:1px solid #1E1E2A;padding:18px;display:flex;flex-direction:column;gap:13px">
|
||||
<div style="display:flex;align-items:flex-start;justify-content:space-between;gap:10px">
|
||||
<div style="min-width:0"><div style="font-size:13.5px;font-weight:700">Egbuka <span style="color:#B8BCC8;font-weight:500">o 44.5 Rec Yds</span></div><div class="mono" style="font-size:8px;letter-spacing:.12em;color:#4a4a58;margin-top:3px">TB · NFL DEBUT · NO PRIORS</div></div>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:5px;background:rgba(255,71,87,.08);border:1px solid rgba(255,71,87,.28);font-size:8px;letter-spacing:.1em;color:#FF6B78;font-weight:700;flex:none">5 · REFUSAL</span>
|
||||
</div>
|
||||
<div style="flex:1;display:flex;align-items:center;justify-content:center;border:1px dashed #2A2A38;border-radius:11px;padding:20px 16px;text-align:center;background:#0A0A10">
|
||||
<div>
|
||||
<div class="mono" style="font-size:9px;letter-spacing:.22em;color:#FF6B78">CAN'T GRADE THIS ONE</div>
|
||||
<div style="font-size:11.5px;color:#B8BCC8;margin-top:9px;line-height:1.55;max-width:340px">No fair price we'd defend yet — the inputs are too thin. When they clear, the triplet returns. We'd rather show nothing than a number we can't stand behind.</div>
|
||||
<div class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#4a4a58;margin-top:11px">NO FABRICATED PRICE · NO EMPTY GAUGE · TRUTH LAW</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px"><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#4a4a58">NOTHING TO TRACK YET</span><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#4a4a58">LEDGER OPENS ON FIRST HONEST LOCK</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- in context · where it renders -->
|
||||
<div style="display:flex;align-items:center;gap:12px;margin:30px 0 14px">
|
||||
<span class="mono" style="font-size:12px;letter-spacing:.28em;color:#F0F0F0;font-weight:700">IN CONTEXT · WHERE IT RENDERS</span>
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080">READ-CARD HERO · BOARD ROW · FREE-TIER GATE</span>
|
||||
</div>
|
||||
|
||||
<!-- A · read-card hero -->
|
||||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;overflow:hidden">
|
||||
<div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:16px 22px 0">
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:5px;background:#14141E;border:1px solid #1E1E2A;font-size:8.5px;letter-spacing:.14em;color:#B8BCC8">READ CARD · HERO</span>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:5px;background:#14141E;border:1px solid #1E1E2A;font-size:8.5px;letter-spacing:.14em;color:#B8BCC8">NFL</span>
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#4a4a58;margin-left:auto">JUL 17, 2026 · THE DESK</span>
|
||||
</div>
|
||||
<div style="padding:14px 22px 20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:24px;align-items:start">
|
||||
<div style="min-width:0">
|
||||
<div style="display:flex;align-items:center;gap:12px">
|
||||
<span class="mono" style="display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:12px;background:rgba(0,212,160,.12);border:1px solid rgba(0,212,160,.32);font-size:22px;font-weight:800;color:#00D4A0;flex:none;text-shadow:0 0 18px rgba(0,212,160,.4)">A+</span>
|
||||
<div style="min-width:0"><div style="font-size:18px;font-weight:800;letter-spacing:-.01em;line-height:1.15">Nabers over 1,115.5 receiving yards</div><div class="mono" style="font-size:8.5px;letter-spacing:.12em;color:#707080;margin-top:4px">NYG · WK 1 · OPENED 1,050.5</div></div>
|
||||
</div>
|
||||
<p style="font-size:12.5px;line-height:1.65;color:#B8BCC8;margin-top:14px;max-width:420px">The market moved 70 on the clearance and stopped — our sim says the discount was worth twice that. Read the projection first (does it clear), then the price (is it fair). Two questions, one card.</p>
|
||||
<div style="display:flex;align-items:center;gap:10px;margin-top:14px"><span class="mono" style="display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 18px;border-radius:11px;background:#00D4A0;color:#06060B;font-weight:800;font-size:10.5px;letter-spacing:.08em">TAKE +125 AT FANDUEL ▸</span><a href="#clv" class="mono" style="font-size:8px;letter-spacing:.12em;color:#707080;line-height:1.5">CLOSES TRACKED<br>IN YOUR LEDGER ▸</a></div>
|
||||
</div>
|
||||
<div style="min-width:0;display:flex;flex-direction:column;gap:12px">
|
||||
<div style="border:1px solid #1E1E2A;border-radius:13px;background:#0E0E14;padding:13px 16px">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px"><span class="mono" style="font-size:8px;letter-spacing:.16em;color:#707080">① PROJECTION · WILL IT CLEAR</span><span class="mono" style="font-size:8px;letter-spacing:.1em;color:#00D4A0;font-weight:700">CLEARS BY 72.5</span></div>
|
||||
<div style="display:flex;align-items:flex-end;gap:16px">
|
||||
<div><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">MODEL PROJ</div><div class="mono" style="font-size:28px;font-weight:800;color:#00D4A0;line-height:1;margin-top:5px;text-shadow:0 0 18px rgba(0,212,160,.28)">1,188</div></div>
|
||||
<div class="mono" style="padding-bottom:5px;color:#4a4a58;font-size:11px">vs</div>
|
||||
<div><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">LINE</div><div class="mono" style="font-size:28px;font-weight:800;color:#F0F0F0;line-height:1;margin-top:5px">1,115.5</div></div>
|
||||
<div style="flex:1;min-width:0;padding-bottom:6px"><div style="position:relative;height:8px;border-radius:4px;background:#14141E;overflow:hidden"><div style="position:absolute;left:0;top:0;bottom:0;width:64%;background:#00D4A0;opacity:.5"></div></div><div class="mono" style="font-size:6.5px;letter-spacing:.1em;color:#4a4a58;margin-top:5px">PROJECTED ABOVE THE LINE</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="mono" style="font-size:8px;letter-spacing:.16em;color:#707080;margin-bottom:9px">② PRICE · IS IT FAIR</div>
|
||||
<div style="display:flex;align-items:stretch;border:1px solid #1E1E2A;border-radius:13px;overflow:hidden;background:#0E0E14">
|
||||
<div style="flex:1;min-width:0;text-align:center;padding:16px 8px"><div class="mono" style="font-size:8px;letter-spacing:.14em;color:#707080">BOOK</div><div class="mono" style="font-size:24px;font-weight:800;color:#F0F0F0;margin-top:8px">+125</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#4a4a58;margin-top:6px">OFFERED</div></div>
|
||||
<div style="flex:1.2;min-width:0;text-align:center;padding:16px 8px;background:rgba(255,179,71,.06);border-left:1px solid #1E1E2A;border-right:1px solid #1E1E2A"><div class="mono" style="font-size:8px;letter-spacing:.14em;color:#FFB347">◆ FAIR</div><div class="mono" style="font-size:36px;font-weight:800;color:#FFB347;margin-top:4px;letter-spacing:-.02em;text-shadow:0 0 24px rgba(255,179,71,.26)">+110</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#8a7a55;margin-top:4px">DE-VIGGED · HERO</div></div>
|
||||
<div style="flex:1;min-width:0;text-align:center;padding:16px 8px"><div class="mono" style="font-size:8px;letter-spacing:.14em;color:#707080">MODEL</div><div class="mono" style="font-size:24px;font-weight:800;color:#00D4A0;margin-top:8px;text-shadow:0 0 18px rgba(0,212,160,.35)">+98</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#4a4a58;margin-top:6px">OUR PRICE</div></div>
|
||||
</div>
|
||||
<div style="margin-top:10px;padding:12px 14px;border-radius:11px;background:rgba(0,212,160,.08);border:1px solid rgba(0,212,160,.28)">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:10px"><div style="display:flex;align-items:center;gap:8px"><span style="width:7px;height:7px;border-radius:50%;background:#00D4A0;flex:none;box-shadow:0 0 8px rgba(0,212,160,.7)"></span><span class="mono" style="font-size:11px;font-weight:800;letter-spacing:.05em;color:#00D4A0">VALUE · +2.9% VS FAIR</span></div><span class="mono" style="font-size:9px;letter-spacing:.06em;color:#8fb8ac">+6.1% EV AT +125</span></div>
|
||||
<div style="font-size:10.5px;color:#B8BCC8;line-height:1.5;margin-top:6px">Model beats the honest number and the price is takeable — the edge is real at what you can actually get.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mono" style="font-size:8px;letter-spacing:.12em;color:#4a4a58;margin-top:8px;line-height:1.7">HIERARCHY · STAT PROJECTION READS FIRST (WILL IT CLEAR) → PRICE TRIPLET QUALIFIES IT (IS IT FAIR). TWO QUESTIONS, TWO STACKED BLOCKS — NEITHER CROWDS THE OTHER. FAIR STAYS THE AMBER HERO OF THE PRICE LAYER.</div>
|
||||
|
||||
<!-- B board row · C free-tier gate -->
|
||||
<div style="display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;margin-top:16px;align-items:start">
|
||||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;overflow:hidden;min-width:0">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:15px 18px 13px"><span class="mono" style="font-size:10.5px;letter-spacing:.24em;color:#F0F0F0;font-weight:700">TONIGHT'S BOARD · NBA</span><span class="mono" style="font-size:8.5px;letter-spacing:.12em;color:#707080">RANKED BY EDGE · FAIR IS THE NUMBER</span></div>
|
||||
<div style="display:flex;align-items:center;gap:12px;padding:11px 18px;border-top:1px solid #101018">
|
||||
<span class="mono" style="display:inline-flex;align-items:center;justify-content:center;width:30px;height:20px;border-radius:5px;background:rgba(0,212,160,.14);border:1px solid rgba(0,212,160,.3);font-size:9px;font-weight:800;color:#00D4A0;flex:none">A+</span>
|
||||
<div style="flex:1;min-width:0"><div style="font-size:12.5px;font-weight:700">Jokić <span style="color:#B8BCC8;font-weight:500">o 27.5 Pts</span></div><div class="mono" style="font-size:8px;letter-spacing:.08em;color:#707080;margin-top:2px">PROJ <span style="color:#00D4A0;font-weight:700">28.9</span> ▸ CLEARS · BOOK +125 · MDL <span style="color:#00D4A0;font-weight:700">+98</span></div></div>
|
||||
<div style="text-align:right;flex:none"><div class="mono" style="font-size:7px;letter-spacing:.14em;color:#FFB347">◆ FAIR</div><div class="mono" style="font-size:16px;font-weight:800;color:#FFB347;line-height:1">+110</div></div>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:5px;background:rgba(0,212,160,.1);border:1px solid rgba(0,212,160,.28);font-size:9px;font-weight:800;color:#00D4A0;flex:none;width:52px;justify-content:center">+2.9%</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:12px;padding:11px 18px;border-top:1px solid #101018;opacity:.9">
|
||||
<span class="mono" style="display:inline-flex;align-items:center;justify-content:center;width:30px;height:20px;border-radius:5px;background:rgba(0,212,160,.1);border:1px solid rgba(0,212,160,.24);font-size:9px;font-weight:800;color:#00D4A0;flex:none">A</span>
|
||||
<div style="flex:1;min-width:0"><div style="font-size:12.5px;font-weight:700">Edwards <span style="color:#B8BCC8;font-weight:500">o 5.5 Ast</span></div><div class="mono" style="font-size:8px;letter-spacing:.08em;color:#707080;margin-top:2px">PROJ <span style="color:#00D4A0;font-weight:700">6.4</span> ▸ CLEARS · BOOK +112 · MDL <span style="color:#00D4A0;font-weight:700">+96</span></div></div>
|
||||
<div style="text-align:right;flex:none"><div class="mono" style="font-size:7px;letter-spacing:.14em;color:#FFB347">◆ FAIR</div><div class="mono" style="font-size:16px;font-weight:800;color:#FFB347;line-height:1">+103</div></div>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:5px;background:rgba(0,212,160,.1);border:1px solid rgba(0,212,160,.28);font-size:9px;font-weight:800;color:#00D4A0;flex:none;width:52px;justify-content:center">+1.6%</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:12px;padding:11px 18px;border-top:1px solid #101018;box-shadow:inset 3px 0 0 rgba(255,179,71,.4)">
|
||||
<span class="mono" style="display:inline-flex;align-items:center;justify-content:center;width:30px;height:20px;border-radius:5px;background:#14141E;border:1px solid #2A2A38;font-size:9px;font-weight:800;color:#B8BCC8;flex:none">B</span>
|
||||
<div style="flex:1;min-width:0"><div style="font-size:12.5px;font-weight:700">Gobert <span style="color:#B8BCC8;font-weight:500">o 11.5 Reb</span></div><div class="mono" style="font-size:8px;letter-spacing:.08em;color:#707080;margin-top:2px">PROJ <span style="color:#B8BCC8;font-weight:700">12.1</span> ▸ CLEARS · BOOK +108 · MDL <span style="color:#FFB347;font-weight:700">withheld</span></div></div>
|
||||
<div style="text-align:right;flex:none"><div class="mono" style="font-size:7px;letter-spacing:.14em;color:#FFB347">◆ FAIR</div><div class="mono" style="font-size:16px;font-weight:800;color:#FFB347;line-height:1">+99</div></div>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:5px;background:#14141E;border:1px solid #2A2A38;font-size:8px;font-weight:700;color:#707080;flex:none;width:52px;justify-content:center">QUAR</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:12px;padding:11px 18px;border-top:1px solid #101018;opacity:.72">
|
||||
<span class="mono" style="display:inline-flex;align-items:center;justify-content:center;width:30px;height:20px;border-radius:5px;background:#14141E;border:1px solid #1E1E2A;font-size:9px;font-weight:800;color:#B8BCC8;flex:none">C</span>
|
||||
<div style="flex:1;min-width:0"><div style="font-size:12.5px;font-weight:700">Murray <span style="color:#B8BCC8;font-weight:500">o 22.5 Pts</span></div><div class="mono" style="font-size:8px;letter-spacing:.08em;color:#707080;margin-top:2px">PROJ <span style="color:#B8BCC8;font-weight:700">22.9</span> ▸ THIN · BOOK +118 · MDL <span style="color:#B8BCC8;font-weight:700">+124</span></div></div>
|
||||
<div style="text-align:right;flex:none"><div class="mono" style="font-size:7px;letter-spacing:.14em;color:#FFB347">◆ FAIR</div><div class="mono" style="font-size:16px;font-weight:800;color:#FFB347;line-height:1">+109</div></div>
|
||||
<span class="mono" style="display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:5px;background:#101018;border:1px solid #1E1E2A;font-size:8px;font-weight:700;color:#707080;flex:none;width:52px;justify-content:center">NO EDGE</span>
|
||||
</div>
|
||||
<div style="padding:10px 18px;border-top:1px solid #101018"><span class="mono" style="font-size:8px;letter-spacing:.12em;color:#4a4a58">PROJECTION LEADS THE ROW (WILL IT CLEAR) · FAIR IS THE PRICE · EDGE CHIP IS THE VERDICT</span></div>
|
||||
</div>
|
||||
|
||||
<!-- C · free-tier gate -->
|
||||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;padding:20px;min-width:0">
|
||||
<div class="mono" style="font-size:9px;letter-spacing:.2em;color:#707080;margin-bottom:14px">FREE-TIER GATE · MODEL LEG LOCKED</div>
|
||||
<div style="border-radius:13px;background:#0E0E14;border:1px solid #1E1E2A;padding:16px">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px"><div style="font-size:12.5px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">Nabers <span style="color:#B8BCC8;font-weight:500">o 1,115.5</span></div><span class="mono" style="font-size:7.5px;letter-spacing:.1em;color:#707080;font-weight:700;flex:none">FREE</span></div>
|
||||
<div style="display:flex;align-items:stretch;border:1px solid #1E1E2A;border-radius:11px;overflow:hidden;background:#0A0A10">
|
||||
<div style="flex:1;text-align:center;padding:13px 6px"><div class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">BOOK</div><div class="mono" style="font-size:19px;font-weight:800;color:#F0F0F0;margin-top:6px">+125</div></div>
|
||||
<div style="flex:1.16;text-align:center;padding:13px 6px;background:rgba(255,179,71,.055);border-left:1px solid #1E1E2A;border-right:1px solid #1E1E2A"><div class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#FFB347">◆ FAIR</div><div class="mono" style="font-size:26px;font-weight:800;color:#FFB347;margin-top:3px;letter-spacing:-.02em;text-shadow:0 0 18px rgba(255,179,71,.22)">+110</div></div>
|
||||
<div style="flex:1;text-align:center;padding:13px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:#0C0C12"><div class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">MODEL</div><svg width="15" height="15" viewBox="0 0 24 24" fill="none" style="margin-top:8px;color:#5a5a68"><rect x="4" y="10" width="16" height="10" rx="2" stroke="currentColor" stroke-width="2"></rect><path d="M8 10V7a4 4 0 0 1 8 0v3" stroke="currentColor" stroke-width="2"></path></svg><div class="mono" style="font-size:11px;font-weight:800;color:#5a5a68;letter-spacing:.14em;margin-top:5px">+ █ █</div></div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-top:11px;padding:10px 12px;border-radius:10px;background:#101018;border:1px solid #1E1E2A"><span style="width:7px;height:7px;border-radius:50%;border:1.5px solid #707080;flex:none"></span><span class="mono" style="font-size:9.5px;font-weight:800;letter-spacing:.04em;color:#B8BCC8;flex:1">MODEL PRICE ON ANALYST</span><span class="mono" style="font-size:8.5px;letter-spacing:.08em;color:#00D4A0;font-weight:700;flex:none">UNLOCK ▸</span></div>
|
||||
</div>
|
||||
<div style="font-size:10.5px;color:#707080;line-height:1.55;margin-top:14px">The honest de-vigged number stays free — that's the hook. Only VYNDR's own price gates. The fair leg is never the paywall.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- mobile 390 + tier -->
|
||||
<div style="display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:16px;margin-top:16px;align-items:start">
|
||||
|
||||
<!-- mobile 390 -->
|
||||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;padding:20px;min-width:0">
|
||||
<div class="mono" style="font-size:9px;letter-spacing:.2em;color:#707080;margin-bottom:14px">MOBILE · 390 · THREE LEGS HOLD, FAIR STAYS HERO</div>
|
||||
<div style="width:340px;max-width:100%;margin:0 auto;display:flex;flex-direction:column;gap:12px">
|
||||
<!-- positive -->
|
||||
<div style="border-radius:13px;background:#0E0E14;border:1px solid #1E1E2A;padding:14px">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px"><div style="font-size:12.5px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">Nabers <span style="color:#B8BCC8;font-weight:500">o 1,115.5 Rec</span></div><span class="mono" style="font-size:7.5px;letter-spacing:.1em;color:#00D4A0;font-weight:700;flex:none">VALUE</span></div>
|
||||
<div style="display:flex;align-items:stretch;border:1px solid #1E1E2A;border-radius:10px;overflow:hidden;background:#0A0A10">
|
||||
<div style="flex:1;text-align:center;padding:11px 4px"><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#707080">BOOK</div><div class="mono" style="font-size:16px;font-weight:800;color:#F0F0F0;margin-top:5px">+125</div></div>
|
||||
<div style="flex:1.14;text-align:center;padding:11px 4px;background:rgba(255,179,71,.055);border-left:1px solid #1E1E2A;border-right:1px solid #1E1E2A"><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#FFB347">◆ FAIR</div><div class="mono" style="font-size:23px;font-weight:800;color:#FFB347;margin-top:3px;letter-spacing:-.02em">+110</div></div>
|
||||
<div style="flex:1;text-align:center;padding:11px 4px"><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#707080">MODEL</div><div class="mono" style="font-size:16px;font-weight:800;color:#00D4A0;margin-top:5px">+98</div></div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:7px;margin-top:10px;padding:8px 10px;border-radius:9px;background:rgba(0,212,160,.08);border:1px solid rgba(0,212,160,.26)"><span style="width:6px;height:6px;border-radius:50%;background:#00D4A0;flex:none"></span><span class="mono" style="font-size:9px;font-weight:800;letter-spacing:.04em;color:#00D4A0">+2.9% VS FAIR</span><span style="font-size:9px;color:#707080;margin-left:auto">real edge</span></div>
|
||||
</div>
|
||||
<!-- quarantine -->
|
||||
<div style="border-radius:13px;background:#0E0E14;border:1px solid #2A2A38;padding:14px;box-shadow:inset 3px 0 0 rgba(255,179,71,.4)">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px"><div style="font-size:12.5px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">Bijan <span style="color:#B8BCC8;font-weight:500">o 84.5 Rush</span></div><span class="mono" style="font-size:7.5px;letter-spacing:.1em;color:#FFB347;font-weight:700;flex:none">QUARANTINE</span></div>
|
||||
<div style="display:flex;align-items:stretch;border:1px solid #1E1E2A;border-radius:10px;overflow:hidden;background:#0A0A10">
|
||||
<div style="flex:1;text-align:center;padding:11px 4px"><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#707080">BOOK</div><div class="mono" style="font-size:16px;font-weight:800;color:#F0F0F0;margin-top:5px">+130</div></div>
|
||||
<div style="flex:1.14;text-align:center;padding:11px 4px;background:rgba(255,179,71,.055);border-left:1px solid #1E1E2A;border-right:1px solid #1E1E2A"><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#FFB347">◆ FAIR</div><div class="mono" style="font-size:23px;font-weight:800;color:#FFB347;margin-top:3px;letter-spacing:-.02em">+116</div></div>
|
||||
<div style="flex:1;text-align:center;padding:11px 4px;background:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(255,255,255,.014) 4px,rgba(255,255,255,.014) 8px)"><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#707080">MODEL</div><div class="mono" style="font-size:15px;font-weight:800;color:#4a4a58;margin-top:6px">—</div></div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:7px;margin-top:10px;padding:8px 10px;border-radius:9px;background:#101018;border:1px solid #2A2A38"><span style="width:6px;height:6px;border-radius:2px;background:#FFB347;opacity:.85;flex:none"></span><span class="mono" style="font-size:9px;font-weight:800;letter-spacing:.04em;color:#B8BCC8">MODEL WITHHELD</span><span style="font-size:9px;color:#707080;margin-left:auto">book & fair stand</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mono" style="font-size:8px;letter-spacing:.1em;color:#4a4a58;margin-top:14px;line-height:1.6;text-align:center">44PX MIN TAP ON THE LEDGER LINK · NO HORIZONTAL SCROLL AT 390 · FAIR NEVER DROPS BELOW BOOK/MODEL IN SIZE</div>
|
||||
</div>
|
||||
|
||||
<!-- tier placement -->
|
||||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;padding:20px 22px;min-width:0">
|
||||
<div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px"><span class="mono" style="font-size:11px;letter-spacing:.24em;color:#F0F0F0;font-weight:700">TIER PLACEMENT</span><span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 7px;border-radius:5px;background:rgba(255,179,71,.1);border:1px solid rgba(255,179,71,.28);font-size:7.5px;letter-spacing:.1em;color:#FFB347;font-weight:700">RECOMMENDED · CONFIRM</span></div>
|
||||
<div style="font-size:11.5px;color:#707080;line-height:1.55;margin-bottom:16px">The de-vigged fair number is the free-tier hook per prior product intent — worth surfacing on Free. Flagged for confirmation before ship.</div>
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<div style="display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border-radius:11px;background:#0E0E14;border:1px solid #1E1E2A">
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#FFB347;font-weight:800;width:62px;flex:none;padding-top:1px">FREE</span>
|
||||
<div style="min-width:0"><div style="font-size:11.5px;color:#F0F0F0;font-weight:600">Book · fair — model leg locked.</div><div style="font-size:10.5px;color:#707080;line-height:1.5;margin-top:3px">The hook: the honest de-vigged number, free. Model shows as a locked teaser that upsells the read.</div></div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border-radius:11px;background:#0E0E14;border:1px solid #1E1E2A">
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#00D4A0;font-weight:800;width:62px;flex:none;padding-top:1px">ANALYST</span>
|
||||
<div style="min-width:0"><div style="font-size:11.5px;color:#F0F0F0;font-weight:600">Full triplet + VALUE marker.</div><div style="font-size:10.5px;color:#707080;line-height:1.5;margin-top:3px">All three legs, the verdict fires both ways — value and no-edge. Quarantine renders as the primary two-leg state.</div></div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border-radius:11px;background:#0E0E14;border:1px solid #1E1E2A">
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#B8BCC8;font-weight:800;width:62px;flex:none;padding-top:1px">DESK</span>
|
||||
<div style="min-width:0"><div style="font-size:11.5px;color:#F0F0F0;font-weight:600">Triplet + ledger cross-ref + calibration.</div><div style="font-size:10.5px;color:#707080;line-height:1.5;margin-top:3px">The price story wired to its resolved close and the confidence-bucket record behind the model leg.</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:16px;padding:13px 18px;border-radius:12px;background:#0E0E14;border:1px solid #1E1E2A;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px">
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#FFB347;font-weight:700">THE TRIPLET NEVER PRINTS A NUMBER IT CAN'T STAND BEHIND</span>
|
||||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080">NO FABRICATED MODEL PRICE · NO HIDDEN "NO EDGE" · FAIR IS HONEST ON EVERY ROW</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"motion":{"editor":"boolean","default":true,"tsType":"boolean","section":"Behavior"},"reactions":{"editor":"boolean","default":true,"tsType":"boolean","section":"Behavior"}}">
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
return {
|
||||
rootRef: (n) => { this.rootNode = n; },
|
||||
stillClass: (this.props.motion ?? true) ? '' : 'vy-still'
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
this._t = [];
|
||||
const tick = () => {
|
||||
const s = new Date().toLocaleTimeString('en-US', { hour12: false });
|
||||
document.querySelectorAll('[data-sync-clock]').forEach(el => el.textContent = s);
|
||||
const wt = document.querySelector('[data-wire-time]');
|
||||
if (wt) wt.textContent = s;
|
||||
};
|
||||
tick();
|
||||
this._t.push(setInterval(tick, 1000));
|
||||
const entries = [
|
||||
'FD holds best number on Nabers o rec yds — 1,115.5 −112.',
|
||||
'Market spread 10.0 across 7 books. Split logged as signal.',
|
||||
'CLV update: beat close on 61% of settled reads (N 305).',
|
||||
'Calibration holds — stated 70% bucket hitting 68.2%.',
|
||||
'The Report Nº 128 out — 12,408 readers.'
|
||||
];
|
||||
let wi = 0;
|
||||
this._t.push(setInterval(() => {
|
||||
const el = document.querySelector('[data-wire]');
|
||||
if (!el) return;
|
||||
wi = (wi + 1) % entries.length;
|
||||
el.textContent = entries[wi];
|
||||
el.style.animation = 'none';
|
||||
void el.offsetWidth;
|
||||
el.style.animation = 'vy-wirein 6s ease both';
|
||||
}, 6000));
|
||||
const nudge = () => {
|
||||
if (!(this.props.reactions ?? true)) return;
|
||||
const cells = [...document.querySelectorAll('[data-react]')];
|
||||
if (!cells.length) return;
|
||||
const el = cells[Math.floor(Math.random() * cells.length)];
|
||||
const f = el.getAttribute('data-fmt') || 'odds';
|
||||
const raw = el.textContent;
|
||||
const pct = raw.includes('%');
|
||||
let v = parseFloat(raw.replace(/[^0-9.\-+]/g, ''));
|
||||
if (isNaN(v)) return;
|
||||
let up;
|
||||
if (f === 'edge') { const d = (Math.random() - .45) * .2; up = d >= 0; v += d; el.textContent = (raw.startsWith('AVG') ? 'AVG CLV ' : '') + (v >= 0 ? '+' : '') + v.toFixed(1) + (pct ? '%' : ''); }
|
||||
else { const d = Math.random() < .5 ? -2 : 2; up = d > 0; v += d; el.textContent = (v > 0 ? '+' : '') + Math.round(v); }
|
||||
el.classList.remove('rx-up', 'rx-down');
|
||||
void el.offsetWidth;
|
||||
el.classList.add(up ? 'rx-up' : 'rx-down');
|
||||
};
|
||||
this._t.push(setTimeout(() => { this._t.push(setInterval(nudge, 6400)); }, 1800));
|
||||
const secs = [...(this.rootNode || document).querySelectorAll('[data-reveal],[data-screen-label]')];
|
||||
secs.forEach(s => { if (!s.hasAttribute('data-reveal')) s.setAttribute('data-reveal', ''); });
|
||||
this._io = new IntersectionObserver(ents => {
|
||||
ents.forEach(e => { if (e.isIntersecting) { e.target.classList.add('vy-in'); this._io.unobserve(e.target); } });
|
||||
}, { rootMargin: '0px 0px -8% 0px' });
|
||||
secs.forEach(s => this._io.observe(s));
|
||||
}
|
||||
componentWillUnmount() {
|
||||
(this._t || []).forEach(t => { clearInterval(t); clearTimeout(t); });
|
||||
if (this._io) this._io.disconnect();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -86,4 +86,8 @@
|
||||
| SWITCHBOARD | `#90A0E8` | `assets/glyphs/switchboard.svg` |
|
||||
| RETURNER | `#6C9CB0` | `assets/glyphs/returner.svg` |
|
||||
|
||||
Marks use `currentColor`. 74 display names + 9 classifier-legacy aliases (never user-facing).
|
||||
Marks use `currentColor`. 74 display names + 9 classifier-legacy aliases (BRUSH, WHIFF, CONNECTOR, DISTRIBUTOR, FASTBREAK, FLEX, HYBRID, SWITCH, SWITCHBOARD) — legacy names are classifier-side only, never displayed; map them to renamed display archetypes (BRUSH→SLASH etc.) or render their own mark where the backend emits the legacy key.
|
||||
|
||||
|
||||
## SESSION 2 NOTE (Jul 17 2026)
|
||||
No new marks. Surfaces 2-5 reuse the 83 existing marks only (hero-scale usage in article media: render the SVG at up to 72px, duotone unchanged). New Session 2 assets are chart/viz templates and book wordmark chips, defined in `Vyndr Intelligence.dc.html` — not glyph assets.
|
||||
|
||||
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M4 20 15 9M15 9h-5M15 9v5"/><path stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M17 16l3 3"/><circle cx="19" cy="6" r="1.8" fill="currentColor"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#FF6B4A"><path fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M4 20 15 9M15 9h-5M15 9v5"></path><path stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M17 16l3 3"></path><circle cx="19" cy="6" r="1.8" fill="currentColor"></circle></svg>
|
||||
|
Before Width: | Height: | Size: 375 B After Width: | Height: | Size: 410 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="currentColor" fill-opacity=".16" d="M12 3 4 20h16z"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round" d="M12 3 4 20h16zM8.5 14h7"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#7C5CFF"><path fill="currentColor" fill-opacity=".16" d="M12 3 4 20h16z"></path><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round" d="M12 3 4 20h16zM8.5 14h7"></path></svg>
|
||||
|
Before Width: | Height: | Size: 279 B After Width: | Height: | Size: 306 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><circle cx="12" cy="5" r="2.2" fill="none" stroke="currentColor" stroke-width="2.1"/><path fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" d="M12 7v12M6 13c0 4 3 6 6 6s6-2 6-6M4 13h4M16 13h4"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#4C86C4"><circle cx="12" cy="5" r="2.2" fill="none" stroke="currentColor" stroke-width="2.1"></circle><path fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" d="M12 7v12M6 13c0 4 3 6 6 6s6-2 6-6M4 13h4M16 13h4"></path></svg>
|
||||
|
Before Width: | Height: | Size: 347 B After Width: | Height: | Size: 376 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round" d="M12 3 4 19h16z"/><path fill="currentColor" fill-opacity=".18" d="m12 9 4 8H8z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#B07CFF"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round" d="M12 3 4 19h16z"></path><path fill="currentColor" fill-opacity=".18" d="m12 9 4 8H8z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 268 B After Width: | Height: | Size: 295 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M3 20C7 8 14 6 20 6"/><path fill="currentColor" d="M20 6l-4 .3 2 3.4z"/><path stroke="currentColor" stroke-width="1.8" stroke-linecap="round" d="M19 4v-2M22 7h-2"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#C98A5A"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M3 20C7 8 14 6 20 6"></path><path fill="currentColor" d="M20 6l-4 .3 2 3.4z"></path><path stroke="currentColor" stroke-width="1.8" stroke-linecap="round" d="M19 4v-2M22 7h-2"></path></svg>
|
||||
|
Before Width: | Height: | Size: 351 B After Width: | Height: | Size: 384 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="currentColor" fill-opacity=".16" d="M6 17c0-6 2-9 6-9s6 3 6 9z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M6 17c0-6 2-9 6-9s6 3 6 9zM4 17h16M12 8V5"/><circle cx="12" cy="20" r="1.6" fill="currentColor"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#B5895A"><path fill="currentColor" fill-opacity=".16" d="M6 17c0-6 2-9 6-9s6 3 6 9z"></path><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M6 17c0-6 2-9 6-9s6 3 6 9zM4 17h16M12 8V5"></path><circle cx="12" cy="20" r="1.6" fill="currentColor"></circle></svg>
|
||||
|
Before Width: | Height: | Size: 360 B After Width: | Height: | Size: 395 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" d="M4 20C10 18 16 12 20 4"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M13 5l7-1-1 7"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#B36CFF"><path fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" d="M4 20C10 18 16 12 20 4"></path><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M13 5l7-1-1 7"></path></svg>
|
||||
|
Before Width: | Height: | Size: 337 B After Width: | Height: | Size: 364 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="currentColor" fill-opacity=".18" d="M13 2 4 14h6l-1 8 9-13h-6z"/><path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" d="M13 2 4 14h6l-1 8 9-13h-6z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#45B7E8"><path fill="currentColor" fill-opacity=".18" d="M13 2 4 14h6l-1 8 9-13h-6z"></path><path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" d="M13 2 4 14h6l-1 8 9-13h-6z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 294 B After Width: | Height: | Size: 321 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="currentColor" fill-opacity=".18" d="M12 3l7 9h-4v8H9v-8H5z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M12 3l7 9h-4v8H9v-8H5z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#FF9F45"><path fill="currentColor" fill-opacity=".18" d="M12 3l7 9h-4v8H9v-8H5z"></path><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M12 3l7 9h-4v8H9v-8H5z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 284 B After Width: | Height: | Size: 311 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M4 18v-8a8 8 0 0 1 16 0v8M4 14h16M9 18v-4M15 18v-4"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#6C9CB0"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M4 18v-8a8 8 0 0 1 16 0v8M4 14h16M9 18v-4M15 18v-4"></path></svg>
|
||||
|
Before Width: | Height: | Size: 240 B After Width: | Height: | Size: 261 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="currentColor" fill-opacity=".16" d="M5 8h14v10H5z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M5 8h14v10H5zM8 8V6M11 8V5M14 8V5M17 8V6"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#C05A5A"><path fill="currentColor" fill-opacity=".16" d="M5 8h14v10H5z"></path><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M5 8h14v10H5zM8 8V6M11 8V5M14 8V5M17 8V6"></path></svg>
|
||||
|
Before Width: | Height: | Size: 293 B After Width: | Height: | Size: 320 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" d="M5 19 15 9"/><path fill="currentColor" fill-opacity=".2" d="M15 9l4-4 1.6 1.6-4 4z"/><path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" d="M15 9l4-4M5 19l-1 1M7 20l-2 1"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#E0B84A"><path fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" d="M5 19 15 9"></path><path fill="currentColor" fill-opacity=".2" d="M15 9l4-4 1.6 1.6-4 4z"></path><path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" d="M15 9l4-4M5 19l-1 1M7 20l-2 1"></path></svg>
|
||||
|
Before Width: | Height: | Size: 389 B After Width: | Height: | Size: 422 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M3 19 19 5M14 5h5v5"/><path stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M4 14l2 2M8 10l2 2"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#FF7A4A"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M3 19 19 5M14 5h5v5"></path><path stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M4 14l2 2M8 10l2 2"></path></svg>
|
||||
|
Before Width: | Height: | Size: 325 B After Width: | Height: | Size: 352 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="currentColor" fill-opacity=".16" d="M4 15l12-6 3 3-9 8-6-1z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M4 15l12-6 3 3-9 8-6-1z"/><circle cx="19" cy="6" r="2.2" fill="currentColor"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#4FB0C6"><path fill="currentColor" fill-opacity=".16" d="M4 15l12-6 3 3-9 8-6-1z"></path><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M4 15l12-6 3 3-9 8-6-1z"></path><circle cx="19" cy="6" r="2.2" fill="currentColor"></circle></svg>
|
||||
|
Before Width: | Height: | Size: 338 B After Width: | Height: | Size: 373 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M3 12h11M10 7l5 5-5 5"/><path fill="currentColor" fill-opacity=".2" d="M16 8h5v8h-5z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M16 8h5v8h-5z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#E88AC0"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M3 12h11M10 7l5 5-5 5"></path><path fill="currentColor" fill-opacity=".2" d="M16 8h5v8h-5z"></path><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M16 8h5v8h-5z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 398 B After Width: | Height: | Size: 431 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M3 16a9 9 0 0 1 18 0"/><circle cx="12" cy="9" r="2.2" fill="currentColor"/><path stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M3 16h3M18 16h3"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#5A9AB0"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M3 16a9 9 0 0 1 18 0"></path><circle cx="12" cy="9" r="2.2" fill="currentColor"></circle><path stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M3 16h3M18 16h3"></path></svg>
|
||||
|
Before Width: | Height: | Size: 351 B After Width: | Height: | Size: 386 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M4 12h9M10 8l4 4-4 4"/><path stroke="currentColor" stroke-width="2.6" stroke-linecap="round" d="M18 5v14"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#7A94A8"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M4 12h9M10 8l4 4-4 4"></path><path stroke="currentColor" stroke-width="2.6" stroke-linecap="round" d="M18 5v14"></path></svg>
|
||||
|
Before Width: | Height: | Size: 318 B After Width: | Height: | Size: 345 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><circle cx="12" cy="16" r="2.6" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M12 14 6 5M12 14l6-9M12 14v-4"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#6C8CFF"><circle cx="12" cy="16" r="2.6" fill="currentColor"></circle><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M12 14 6 5M12 14l6-9M12 14v-4"></path></svg>
|
||||
|
Before Width: | Height: | Size: 272 B After Width: | Height: | Size: 301 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><circle cx="6" cy="7" r="2.4" fill="currentColor"/><circle cx="18" cy="17" r="2.4" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M8 8.5C13 11 11 13 16 15.5"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#9AB0C4"><circle cx="6" cy="7" r="2.4" fill="currentColor"></circle><circle cx="18" cy="17" r="2.4" fill="currentColor"></circle><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M8 8.5C13 11 11 13 16 15.5"></path></svg>
|
||||
|
Before Width: | Height: | Size: 320 B After Width: | Height: | Size: 357 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M4 9h11M11 5l4 4-4 4M20 15H9M13 11l-4 4 4 4"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#6C8CFF"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M4 9h11M11 5l4 4-4 4M20 15H9M13 11l-4 4 4 4"></path></svg>
|
||||
|
Before Width: | Height: | Size: 257 B After Width: | Height: | Size: 278 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><circle cx="12" cy="12" r="2.6" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 9V4M10 6l2-2 2 2M9.5 13.8 5 16.5M7.5 14.2l-2.5 2.3.8 3.2M14.5 13.8 19 16.5M16.5 14.2l2.5 2.3-.8 3.2"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#7AB8D8"><circle cx="12" cy="12" r="2.6" fill="currentColor"></circle><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 9V4M10 6l2-2 2 2M9.5 13.8 5 16.5M7.5 14.2l-2.5 2.3.8 3.2M14.5 13.8 19 16.5M16.5 14.2l2.5 2.3-.8 3.2"></path></svg>
|
||||
|
Before Width: | Height: | Size: 368 B After Width: | Height: | Size: 397 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" d="M5 19 17 7"/><circle cx="19" cy="5" r="2.2" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" d="M4 14a10 10 0 0 0 6 6"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#5A7D9A"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" d="M5 19 17 7"></path><circle cx="19" cy="5" r="2.2" fill="currentColor"></circle><path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" d="M4 14a10 10 0 0 0 6 6"></path></svg>
|
||||
|
Before Width: | Height: | Size: 361 B After Width: | Height: | Size: 396 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="currentColor" fill-opacity=".16" d="M4 9h6v9H4zM14 9h6v9h-6z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M4 9h6v9H4zM14 9h6v9h-6zM4 9c0-2 1.5-3 3-3s3 1 3 3M14 9c0-2 1.5-3 3-3s3 1 3 3"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#C05A5A"><path fill="currentColor" fill-opacity=".16" d="M4 9h6v9H4zM14 9h6v9h-6z"></path><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M4 9h6v9H4zM14 9h6v9h-6zM4 9c0-2 1.5-3 3-3s3 1 3 3M14 9c0-2 1.5-3 3-3s3 1 3 3"></path></svg>
|
||||
|
Before Width: | Height: | Size: 341 B After Width: | Height: | Size: 368 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><circle cx="12" cy="12" r="3.6" fill="none" stroke="currentColor" stroke-width="2.2"/><path stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M12 4v3M12 17v3M4 12h3M17 12h3M6.5 6.5l2 2M15.5 15.5l2 2M17.5 6.5l-2 2M6.5 17.5l2-2"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#E0803D"><circle cx="12" cy="12" r="3.6" fill="none" stroke="currentColor" stroke-width="2.2"></circle><path stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M12 4v3M12 17v3M4 12h3M17 12h3M6.5 6.5l2 2M15.5 15.5l2 2M17.5 6.5l-2 2M6.5 17.5l2-2"></path></svg>
|
||||
|
Before Width: | Height: | Size: 347 B After Width: | Height: | Size: 376 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="currentColor" fill-opacity=".18" d="M10 5l8 7-8 7z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M10 5l8 7-8 7z"/><path stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M5 8h3M4 12h4M5 16h3"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#4AA0E8"><path fill="currentColor" fill-opacity=".18" d="M10 5l8 7-8 7z"></path><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M10 5l8 7-8 7z"></path><path stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M5 8h3M4 12h4M5 16h3"></path></svg>
|
||||
|
Before Width: | Height: | Size: 364 B After Width: | Height: | Size: 397 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="1.9" d="M4 6h16v12H4z"/><path stroke="currentColor" stroke-width="1.3" d="M4 10h16M4 14h16M9 6v12M15 6v12"/><circle cx="17" cy="9" r="2.1" fill="currentColor"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#FF7A5A"><path fill="none" stroke="currentColor" stroke-width="1.9" d="M4 6h16v12H4z"></path><path stroke="currentColor" stroke-width="1.3" d="M4 10h16M4 14h16M9 6v12M15 6v12"></path><circle cx="17" cy="9" r="2.1" fill="currentColor"></circle></svg>
|
||||
|
Before Width: | Height: | Size: 316 B After Width: | Height: | Size: 351 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M8 4C4 8 4 16 8 20M16 4c4 4 4 12 0 16"/><circle cx="12" cy="12" r="2" fill="currentColor"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#A08AC8"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M8 4C4 8 4 16 8 20M16 4c4 4 4 12 0 16"></path><circle cx="12" cy="12" r="2" fill="currentColor"></circle></svg>
|
||||
|
Before Width: | Height: | Size: 278 B After Width: | Height: | Size: 307 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="currentColor" fill-opacity=".16" d="M5 5h3v2h2V5h4v2h2V5h3v6c0 5-4 7-7 8-3-1-7-3-7-8V5Z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M5 5h3v2h2V5h4v2h2V5h3v6c0 5-4 7-7 8-3-1-7-3-7-8V5Z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#4C6FA5"><path fill="currentColor" fill-opacity=".16" d="M5 5h3v2h2V5h4v2h2V5h3v6c0 5-4 7-7 8-3-1-7-3-7-8V5Z"></path><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M5 5h3v2h2V5h4v2h2V5h3v6c0 5-4 7-7 8-3-1-7-3-7-8V5Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 342 B After Width: | Height: | Size: 369 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M4 6l6 6-6 6M11 6l6 6-6 6"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#3FD8E0"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M4 6l6 6-6 6M11 6l6 6-6 6"></path></svg>
|
||||
|
Before Width: | Height: | Size: 239 B After Width: | Height: | Size: 260 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M9 4C6 4 6 12 9 12 6 12 6 20 9 20M15 4c3 0 3 8 0 8 3 0 3 8 0 8"/><circle cx="12" cy="12" r="1.8" fill="currentColor"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#8A94A8"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M9 4C6 4 6 12 9 12 6 12 6 20 9 20M15 4c3 0 3 8 0 8 3 0 3 8 0 8"></path><circle cx="12" cy="12" r="1.8" fill="currentColor"></circle></svg>
|
||||
|
Before Width: | Height: | Size: 305 B After Width: | Height: | Size: 334 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M6 4v9M6 13l-3-3M6 13l3-3M18 20v-9M18 11l-3 3M18 11l3 3"/><path stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M9 12h6"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#7C6CC0"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M6 4v9M6 13l-3-3M6 13l3-3M18 20v-9M18 11l-3 3M18 11l3 3"></path><path stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M9 12h6"></path></svg>
|
||||
|
Before Width: | Height: | Size: 352 B After Width: | Height: | Size: 379 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M4 15c3-4 5-4 8 0s5 4 8 0"/><path stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M4 20h16"/><circle cx="12" cy="9" r="1.8" fill="currentColor"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#5A7D9A"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M4 15c3-4 5-4 8 0s5 4 8 0"></path><path stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M4 20h16"></path><circle cx="12" cy="9" r="1.8" fill="currentColor"></circle></svg>
|
||||
|
Before Width: | Height: | Size: 351 B After Width: | Height: | Size: 386 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="currentColor" fill-opacity=".18" d="M6 4h11v5H6z"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M6 4h11v5H6zM11.5 9v11M8 20h7"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#FF4D6D"><path fill="currentColor" fill-opacity=".18" d="M6 4h11v5H6z"></path><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M6 4h11v5H6zM11.5 9v11M8 20h7"></path></svg>
|
||||
|
Before Width: | Height: | Size: 306 B After Width: | Height: | Size: 333 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" d="M4 20 15 9"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M15 9l4-1-1 4"/><path stroke="currentColor" stroke-width="1.8" stroke-linecap="round" d="M18 14l2 2M20 11l2 1"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#B5895A"><path fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" d="M4 20 15 9"></path><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M15 9l4-1-1 4"></path><path stroke="currentColor" stroke-width="1.8" stroke-linecap="round" d="M18 14l2 2M20 11l2 1"></path></svg>
|
||||
|
Before Width: | Height: | Size: 421 B After Width: | Height: | Size: 454 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><circle cx="12" cy="12" r="2.5" fill="currentColor"/><circle cx="12" cy="4.5" r="1.7" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="5" cy="8.5" r="1.7" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="19" cy="8.5" r="1.7" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="8" cy="19" r="1.7" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="16" cy="19" r="1.7" fill="none" stroke="currentColor" stroke-width="1.8"/><path stroke="currentColor" stroke-width="1.5" d="M12 9.5V6M10 10.5 6.4 9M14 10.5l3.6-1.5M10.6 13.8 9 17.5M13.4 13.8 15 17.5"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#6C9CD8"><circle cx="12" cy="12" r="2.5" fill="currentColor"></circle><circle cx="12" cy="4.5" r="1.7" fill="none" stroke="currentColor" stroke-width="1.8"></circle><circle cx="5" cy="8.5" r="1.7" fill="none" stroke="currentColor" stroke-width="1.8"></circle><circle cx="19" cy="8.5" r="1.7" fill="none" stroke="currentColor" stroke-width="1.8"></circle><circle cx="8" cy="19" r="1.7" fill="none" stroke="currentColor" stroke-width="1.8"></circle><circle cx="16" cy="19" r="1.7" fill="none" stroke="currentColor" stroke-width="1.8"></circle><path stroke="currentColor" stroke-width="1.5" d="M12 9.5V6M10 10.5 6.4 9M14 10.5l3.6-1.5M10.6 13.8 9 17.5M13.4 13.8 15 17.5"></path></svg>
|
||||
|
Before Width: | Height: | Size: 713 B After Width: | Height: | Size: 782 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M5 4c8 0 12 5 12 14M17 18l-4-2M17 18l-1-4"/><circle cx="6" cy="6" r="1.6" fill="currentColor"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#C05A5A"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M5 4c8 0 12 5 12 14M17 18l-4-2M17 18l-1-4"></path><circle cx="6" cy="6" r="1.6" fill="currentColor"></circle></svg>
|
||||
|
Before Width: | Height: | Size: 306 B After Width: | Height: | Size: 335 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><circle cx="10" cy="12" r="6" fill="none" stroke="currentColor" stroke-width="2"/><path fill="currentColor" fill-opacity=".18" d="M15 6l6 12H9z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M15 6l6 12H9z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#C88AB0"><circle cx="10" cy="12" r="6" fill="none" stroke="currentColor" stroke-width="2"></circle><path fill="currentColor" fill-opacity=".18" d="M15 6l6 12H9z"></path><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M15 6l6 12H9z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 348 B After Width: | Height: | Size: 383 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="currentColor" d="M12 2c.6 4.8 2.4 6.6 7.2 7.2C14.4 9.8 12.6 11.6 12 16.4 11.4 11.6 9.6 9.8 4.8 9.2 9.6 8.6 11.4 6.8 12 2Z"/><path fill="currentColor" d="M18 15c.3 2 1 2.7 3 3-2 .3-2.7 1-3 3-.3-2-1-2.7-3-3 2-.3 2.7-1 3-3Z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#FF8A3D"><path fill="currentColor" d="M12 2c.6 4.8 2.4 6.6 7.2 7.2C14.4 9.8 12.6 11.6 12 16.4 11.4 11.6 9.6 9.8 4.8 9.2 9.6 8.6 11.4 6.8 12 2Z"></path><path fill="currentColor" d="M18 15c.3 2 1 2.7 3 3-2 .3-2.7 1-3 3-.3-2-1-2.7-3-3 2-.3 2.7-1 3-3Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 337 B After Width: | Height: | Size: 364 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="currentColor" fill-opacity=".16" d="M4 8h7v2c0 2 2 3 4 3h5v1c0 4-4 6-8 6s-8-3-8-8z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M4 8h7v2c0 2 2 3 4 3h5v1c0 4-4 6-8 6s-8-3-8-8z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M9 5h6v3"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#8A94A8"><path fill="currentColor" fill-opacity=".16" d="M4 8h7v2c0 2 2 3 4 3h5v1c0 4-4 6-8 6s-8-3-8-8z"></path><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M4 8h7v2c0 2 2 3 4 3h5v1c0 4-4 6-8 6s-8-3-8-8z"></path><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M9 5h6v3"></path></svg>
|
||||
|
Before Width: | Height: | Size: 426 B After Width: | Height: | Size: 459 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 3"/><circle cx="12" cy="10" r="2.3" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M8.5 17c1-2.5 6-2.5 7 0"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#4C86C4"><circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 3"></circle><circle cx="12" cy="10" r="2.3" fill="currentColor"></circle><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M8.5 17c1-2.5 6-2.5 7 0"></path></svg>
|
||||
|
Before Width: | Height: | Size: 371 B After Width: | Height: | Size: 408 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M7 20h10M9 20v-7M15 20v-7M7 13h10"/><path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-dasharray="3 3" d="M12 13c0-5-4-6-4-9"/><circle cx="8" cy="4" r="1.8" fill="currentColor"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#C89B5A"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M7 20h10M9 20v-7M15 20v-7M7 13h10"></path><path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-dasharray="3 3" d="M12 13c0-5-4-6-4-9"></path><circle cx="8" cy="4" r="1.8" fill="currentColor"></circle></svg>
|
||||
|
Before Width: | Height: | Size: 427 B After Width: | Height: | Size: 462 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M9 4l7 8-7 8"/><path stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M3 9h4M2 15h5"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#E8C34A"><path fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M9 4l7 8-7 8"></path><path stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M3 9h4M2 15h5"></path></svg>
|
||||
|
Before Width: | Height: | Size: 315 B After Width: | Height: | Size: 342 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.3" d="M9.5 9a4 4 0 1 0 0 6"/><path fill="none" stroke="currentColor" stroke-width="2.3" d="M14.5 9a4 4 0 1 1 0 6"/><path stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M9 12h6"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#7AA6FF"><path fill="none" stroke="currentColor" stroke-width="2.3" d="M9.5 9a4 4 0 1 0 0 6"></path><path fill="none" stroke="currentColor" stroke-width="2.3" d="M14.5 9a4 4 0 1 1 0 6"></path><path stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M9 12h6"></path></svg>
|
||||
|
Before Width: | Height: | Size: 356 B After Width: | Height: | Size: 389 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="currentColor" fill-opacity=".16" d="M5 10h14v10H5z"/><path fill="none" stroke="currentColor" stroke-width="2.1" stroke-linejoin="round" d="M5 10h14v10H5zM8 10V7a4 4 0 0 1 8 0v3"/><circle cx="12" cy="15" r="1.6" fill="currentColor"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#5A6474"><path fill="currentColor" fill-opacity=".16" d="M5 10h14v10H5z"></path><path fill="none" stroke="currentColor" stroke-width="2.1" stroke-linejoin="round" d="M5 10h14v10H5zM8 10V7a4 4 0 0 1 8 0v3"></path><circle cx="12" cy="15" r="1.6" fill="currentColor"></circle></svg>
|
||||
|
Before Width: | Height: | Size: 346 B After Width: | Height: | Size: 381 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M5 19 16 6"/><circle cx="17" cy="5" r="1.9" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" d="M5 9c2-2 5-2 7 0M4 13c2.5-2.5 6-2.5 9 0"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#D9A441"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M5 19 16 6"></path><circle cx="17" cy="5" r="1.9" fill="currentColor"></circle><path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" d="M5 9c2-2 5-2 7 0M4 13c2.5-2.5 6-2.5 9 0"></path></svg>
|
||||
|
Before Width: | Height: | Size: 379 B After Width: | Height: | Size: 414 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M9 5 4 12l5 7M15 5l5 7-5 7"/><path stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-dasharray="2 2.6" d="M12 4v16"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#B0B6C8"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M9 5 4 12l5 7M15 5l5 7-5 7"></path><path stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-dasharray="2 2.6" d="M12 4v16"></path></svg>
|
||||
|
Before Width: | Height: | Size: 349 B After Width: | Height: | Size: 376 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M6 8a7 7 0 0 1 12 2M18 16a7 7 0 0 1-12-2"/><path fill="currentColor" d="M18 5l1.4 4.2-4.2-1zM6 19l-1.4-4.2 4.2 1z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#E0A03D"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M6 8a7 7 0 0 1 12 2M18 16a7 7 0 0 1-12-2"></path><path fill="currentColor" d="M18 5l1.4 4.2-4.2-1zM6 19l-1.4-4.2 4.2 1z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 327 B After Width: | Height: | Size: 354 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" d="M12 4l1.8 2.8L17 6l-.8 3.2L19 11l-2.8 1.8L17 16l-3.2-.8L12 18l-1.8-2.8L7 16l.8-3.2L5 11l2.8-1.8L7 6l3.2.8z"/><circle cx="12" cy="11" r="1.6" fill="currentColor"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#E0803D"><path fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" d="M12 4l1.8 2.8L17 6l-.8 3.2L19 11l-2.8 1.8L17 16l-3.2-.8L12 18l-1.8-2.8L7 16l.8-3.2L5 11l2.8-1.8L7 6l3.2.8z"></path><circle cx="12" cy="11" r="1.6" fill="currentColor"></circle></svg>
|
||||
|
Before Width: | Height: | Size: 373 B After Width: | Height: | Size: 402 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="currentColor" fill-opacity=".16" d="M6 18V11a6 6 0 0 1 12 0v7l-2-2-2 2-2-2-2 2z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M6 18V11a6 6 0 0 1 12 0v7l-2-2-2 2-2-2-2 2z"/><circle cx="10" cy="11" r="1" fill="currentColor"/><circle cx="14" cy="11" r="1" fill="currentColor"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#9B8CFF"><path fill="currentColor" fill-opacity=".16" d="M6 18V11a6 6 0 0 1 12 0v7l-2-2-2 2-2-2-2 2z"></path><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M6 18V11a6 6 0 0 1 12 0v7l-2-2-2 2-2-2-2 2z"></path><circle cx="10" cy="11" r="1" fill="currentColor"></circle><circle cx="14" cy="11" r="1" fill="currentColor"></circle></svg>
|
||||
|
Before Width: | Height: | Size: 428 B After Width: | Height: | Size: 471 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M8 4h8v16H8zM12 8v8M9.5 10.5 12 8l2.5 2.5M9.5 13.5 12 16l2.5-2.5"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#E87B4A"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M8 4h8v16H8zM12 8v8M9.5 10.5 12 8l2.5 2.5M9.5 13.5 12 16l2.5-2.5"></path></svg>
|
||||
|
Before Width: | Height: | Size: 278 B After Width: | Height: | Size: 299 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="currentColor" fill-opacity=".16" d="M6 6h12v12H6z"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round" d="M6 6h12v12H6z"/><path stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M12 2v4M12 18v4"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#5A6474"><path fill="currentColor" fill-opacity=".16" d="M6 6h12v12H6z"></path><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round" d="M6 6h12v12H6z"></path><path stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M12 2v4M12 18v4"></path></svg>
|
||||
|
Before Width: | Height: | Size: 359 B After Width: | Height: | Size: 392 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M3 8h9M3 12h9M3 16h9M9 6l4 6-4 6"/><path stroke="currentColor" stroke-width="2.6" stroke-linecap="round" d="M18 4v16"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#FF6B4A"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M3 8h9M3 12h9M3 16h9M9 6l4 6-4 6"></path><path stroke="currentColor" stroke-width="2.6" stroke-linecap="round" d="M18 4v16"></path></svg>
|
||||
|
Before Width: | Height: | Size: 330 B After Width: | Height: | Size: 357 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="currentColor" fill-opacity=".16" d="M11 4 3 19h8z"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round" d="M11 4 3 19h8z"/><path stroke="currentColor" stroke-width="1.8" stroke-linecap="round" d="M11 9h10M11 12h10M11 15h10"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#B36CFF"><path fill="currentColor" fill-opacity=".16" d="M11 4 3 19h8z"></path><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round" d="M11 4 3 19h8z"></path><path stroke="currentColor" stroke-width="1.8" stroke-linecap="round" d="M11 9h10M11 12h10M11 15h10"></path></svg>
|
||||
|
Before Width: | Height: | Size: 370 B After Width: | Height: | Size: 403 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" d="M7 4v16M7 12l9-8M9 13l7 7"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#FF7A5A"><path fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" d="M7 4v16M7 12l9-8M9 13l7 7"></path></svg>
|
||||
|
Before Width: | Height: | Size: 239 B After Width: | Height: | Size: 260 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M4 17a8 8 0 0 1 16 0"/><path stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M12 17V7"/><path fill="currentColor" d="M12 5l-2.4 4h4.8z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#C77CE0"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M4 17a8 8 0 0 1 16 0"></path><path stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M12 17V7"></path><path fill="currentColor" d="M12 5l-2.4 4h4.8z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 343 B After Width: | Height: | Size: 376 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="currentColor" fill-opacity=".16" d="M12 3 5 6v6c0 5 4 7 7 8 3-1 7-3 7-8V6z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M12 3 5 6v6c0 5 4 7 7 8 3-1 7-3 7-8V6z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 16v-6M9.5 12.5 12 10l2.5 2.5"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#7C6CC0"><path fill="currentColor" fill-opacity=".16" d="M12 3 5 6v6c0 5 4 7 7 8 3-1 7-3 7-8V6z"></path><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M12 3 5 6v6c0 5 4 7 7 8 3-1 7-3 7-8V6z"></path><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 16v-6M9.5 12.5 12 10l2.5 2.5"></path></svg>
|
||||
|
Before Width: | Height: | Size: 458 B After Width: | Height: | Size: 491 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M20 6 8 18M8 18h6M8 18v-6"/><path stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M4 4l3.5 3.5"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#6C9CB0"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M20 6 8 18M8 18h6M8 18v-6"></path><path stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M4 4l3.5 3.5"></path></svg>
|
||||
|
Before Width: | Height: | Size: 327 B After Width: | Height: | Size: 354 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-dasharray="3 3" d="M7 4v16M17 4v16"/><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" d="M12 20v-9"/><path fill="currentColor" d="M12 5l-3 5h6z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#6CB0C0"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-dasharray="3 3" d="M7 4v16M17 4v16"></path><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" d="M12 20v-9"></path><path fill="currentColor" d="M12 5l-3 5h6z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 368 B After Width: | Height: | Size: 401 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="currentColor" fill-opacity=".16" d="M12 3 5 6v5c0 5 3.5 7.5 7 9 3.5-1.5 7-4 7-9V6z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M12 3 5 6v5c0 5 3.5 7.5 7 9 3.5-1.5 7-4 7-9V6z"/><circle cx="12" cy="11" r="2" fill="currentColor"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#4FA0C4"><path fill="currentColor" fill-opacity=".16" d="M12 3 5 6v5c0 5 3.5 7.5 7 9 3.5-1.5 7-4 7-9V6z"></path><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M12 3 5 6v5c0 5 3.5 7.5 7 9 3.5-1.5 7-4 7-9V6z"></path><circle cx="12" cy="11" r="2" fill="currentColor"></circle></svg>
|
||||
|
Before Width: | Height: | Size: 383 B After Width: | Height: | Size: 418 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M4 16c5 2 10-1 12-8"/><path fill="currentColor" d="M16 8l-4 1 1.4 3.6z"/><circle cx="4" cy="16" r="2.2" fill="currentColor"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#6C8CFF"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M4 16c5 2 10-1 12-8"></path><path fill="currentColor" d="M16 8l-4 1 1.4 3.6z"></path><circle cx="4" cy="16" r="2.2" fill="currentColor"></circle></svg>
|
||||
|
Before Width: | Height: | Size: 312 B After Width: | Height: | Size: 347 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="currentColor" fill-opacity=".16" d="M12 3 5 6v5c0 5 3.5 7.5 7 9 3.5-1.5 7-4 7-9V6z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M12 3 5 6v5c0 5 3.5 7.5 7 9 3.5-1.5 7-4 7-9V6z"/><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="m9 11 2 2 4-4"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#5A8CA8"><path fill="currentColor" fill-opacity=".16" d="M12 3 5 6v5c0 5 3.5 7.5 7 9 3.5-1.5 7-4 7-9V6z"></path><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M12 3 5 6v5c0 5 3.5 7.5 7 9 3.5-1.5 7-4 7-9V6z"></path><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="m9 11 2 2 4-4"></path></svg>
|
||||
|
Before Width: | Height: | Size: 443 B After Width: | Height: | Size: 476 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M5 5c6 1 9 5 9 13"/><path fill="currentColor" d="M14 20l-3-4.5 6 .4z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#5A9AB0"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M5 5c6 1 9 5 9 13"></path><path fill="currentColor" d="M14 20l-3-4.5 6 .4z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 258 B After Width: | Height: | Size: 285 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" d="M6 18 18 6M10 19 19 10M5 14 13 6"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#E0C64A"><path fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" d="M6 18 18 6M10 19 19 10M5 14 13 6"></path></svg>
|
||||
|
Before Width: | Height: | Size: 222 B After Width: | Height: | Size: 243 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="currentColor" fill-opacity=".18" d="M12 2l2.4 5.6L20 8l-4 4 1.6 6L12 15l-5.6 3L8 12 4 8l5.6-.4z"/><path fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" d="M12 2l2.4 5.6L20 8l-4 4 1.6 6L12 15l-5.6 3L8 12 4 8l5.6-.4z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#C05A5A"><path fill="currentColor" fill-opacity=".18" d="M12 2l2.4 5.6L20 8l-4 4 1.6 6L12 15l-5.6 3L8 12 4 8l5.6-.4z"></path><path fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" d="M12 2l2.4 5.6L20 8l-4 4 1.6 6L12 15l-5.6 3L8 12 4 8l5.6-.4z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 360 B After Width: | Height: | Size: 387 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><circle cx="12" cy="12" r="7" fill="none" stroke="currentColor" stroke-width="2"/><path stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M12 3v4M12 17v4M3 12h4M17 12h4"/><circle cx="12" cy="12" r="2" fill="currentColor"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#E85D9E"><circle cx="12" cy="12" r="7" fill="none" stroke="currentColor" stroke-width="2"></circle><path stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M12 3v4M12 17v4M3 12h4M17 12h4"></path><circle cx="12" cy="12" r="2" fill="currentColor"></circle></svg>
|
||||
|
Before Width: | Height: | Size: 339 B After Width: | Height: | Size: 376 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><circle cx="10" cy="6" r="2.2" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M10 8v6M10 10l-5 1M10 11l5 3M10 14l-3 6M10 14l4 5"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#E0C64A"><circle cx="10" cy="6" r="2.2" fill="currentColor"></circle><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M10 8v6M10 10l-5 1M10 11l5 3M10 14l-3 6M10 14l4 5"></path></svg>
|
||||
|
Before Width: | Height: | Size: 315 B After Width: | Height: | Size: 344 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><circle cx="12" cy="12" r="3" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M12 3v3M12 18v3M4.5 7.5l2.2 2.2M17.3 14.3l2.2 2.2M4.5 16.5l2.2-2.2M17.3 9.7l2.2-2.2"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#F0A93D"><circle cx="12" cy="12" r="3" fill="currentColor"></circle><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M12 3v3M12 18v3M4.5 7.5l2.2 2.2M17.3 14.3l2.2 2.2M4.5 16.5l2.2-2.2M17.3 9.7l2.2-2.2"></path></svg>
|
||||
|
Before Width: | Height: | Size: 324 B After Width: | Height: | Size: 353 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" d="M3 12h8"/><path fill="currentColor" fill-opacity=".2" d="M12 8h7v8h-7z"/><path fill="none" stroke="currentColor" stroke-width="2.1" stroke-linejoin="round" d="M12 8h7v8h-7z"/><path stroke="currentColor" stroke-width="1.8" stroke-linecap="round" d="M20 6l2-1M20.5 12H22M20 18l2 1"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#FF7A4A"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" d="M3 12h8"></path><path fill="currentColor" fill-opacity=".2" d="M12 8h7v8h-7z"></path><path fill="none" stroke="currentColor" stroke-width="2.1" stroke-linejoin="round" d="M12 8h7v8h-7z"></path><path stroke="currentColor" stroke-width="1.8" stroke-linecap="round" d="M20 6l2-1M20.5 12H22M20 18l2 1"></path></svg>
|
||||
|
Before Width: | Height: | Size: 468 B After Width: | Height: | Size: 507 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M4 18l4-4 3 2 5-6"/><path stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M16 10h4v4"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#FFA24A"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M4 18l4-4 3 2 5-6"></path><path stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M16 10h4v4"></path></svg>
|
||||
|
Before Width: | Height: | Size: 341 B After Width: | Height: | Size: 368 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2" d="M4 5h16v14H4z"/><path stroke="currentColor" stroke-width="1.6" d="M4 12h16M12 5v14"/><circle cx="16.5" cy="8.5" r="2" fill="currentColor"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#7AA6D8"><path fill="none" stroke="currentColor" stroke-width="2" d="M4 5h16v14H4z"></path><path stroke="currentColor" stroke-width="1.6" d="M4 12h16M12 5v14"></path><circle cx="16.5" cy="8.5" r="2" fill="currentColor"></circle></svg>
|
||||
|
Before Width: | Height: | Size: 301 B After Width: | Height: | Size: 336 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M12 4v16M4 12h16M6.5 6.5l11 11M17.5 6.5l-11 11"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#8A94A8"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M12 4v16M4 12h16M6.5 6.5l11 11M17.5 6.5l-11 11"></path></svg>
|
||||
|
Before Width: | Height: | Size: 236 B After Width: | Height: | Size: 257 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M5 8h11M13 4l4 4-4 4M19 16H8M11 12l-4 4 4 4"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#C0B08A"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M5 8h11M13 4l4 4-4 4M19 16H8M11 12l-4 4 4 4"></path></svg>
|
||||
|
Before Width: | Height: | Size: 257 B After Width: | Height: | Size: 278 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><circle cx="6" cy="6" r="1.8" fill="currentColor"/><circle cx="18" cy="6" r="1.8" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="6" cy="18" r="1.8" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="18" cy="18" r="1.8" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M7.5 7.5c4 4 5 4 9 9"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#90A0E8"><circle cx="6" cy="6" r="1.8" fill="currentColor"></circle><circle cx="18" cy="6" r="1.8" fill="none" stroke="currentColor" stroke-width="1.8"></circle><circle cx="6" cy="18" r="1.8" fill="none" stroke="currentColor" stroke-width="1.8"></circle><circle cx="18" cy="18" r="1.8" fill="currentColor"></circle><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M7.5 7.5c4 4 5 4 9 9"></path></svg>
|
||||
|
Before Width: | Height: | Size: 482 B After Width: | Height: | Size: 535 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><circle cx="15" cy="9" r="5" fill="none" stroke="currentColor" stroke-width="2"/><path stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M15 6v6M12 9h6"/><path stroke="currentColor" stroke-width="2.4" stroke-linecap="round" d="M3 20l6.5-6.5"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#7AA6D8"><circle cx="15" cy="9" r="5" fill="none" stroke="currentColor" stroke-width="2"></circle><path stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M15 6v6M12 9h6"></path><path stroke="currentColor" stroke-width="2.4" stroke-linecap="round" d="M3 20l6.5-6.5"></path></svg>
|
||||
|
Before Width: | Height: | Size: 360 B After Width: | Height: | Size: 395 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M18.5 8a7 7 0 1 0 1.2 6"/><path fill="currentColor" d="M20 5l-.3 4.6L16 7.4z"/><path stroke="currentColor" stroke-width="1.6" stroke-linecap="round" d="M9 12.5c1.5-1.5 4.5-1.5 6 0"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#B36CFF"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M18.5 8a7 7 0 1 0 1.2 6"></path><path fill="currentColor" d="M20 5l-.3 4.6L16 7.4z"></path><path stroke="currentColor" stroke-width="1.6" stroke-linecap="round" d="M9 12.5c1.5-1.5 4.5-1.5 6 0"></path></svg>
|
||||
|
Before Width: | Height: | Size: 369 B After Width: | Height: | Size: 402 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="currentColor" fill-opacity=".16" d="M12 2c3.5 4.5 5.5 6 5.5 10a5.5 5.5 0 0 1-11 0C6.5 8 8.5 6.5 12 2Z"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round" d="M12 7c2 2.6 3 3.8 3 6a3 3 0 0 1-6 0c0-2.2 1-3.4 3-6Z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#FF6B4A"><path fill="currentColor" fill-opacity=".16" d="M12 2c3.5 4.5 5.5 6 5.5 10a5.5 5.5 0 0 1-11 0C6.5 8 8.5 6.5 12 2Z"></path><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round" d="M12 7c2 2.6 3 3.8 3 6a3 3 0 0 1-6 0c0-2.2 1-3.4 3-6Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 359 B After Width: | Height: | Size: 386 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><circle cx="12" cy="6" r="2.6" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M12 9v8M8 20l4-3 4 3M8 13h8"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#6C9CB0"><circle cx="12" cy="6" r="2.6" fill="currentColor"></circle><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="M12 9v8M8 20l4-3 4 3M8 13h8"></path></svg>
|
||||
|
Before Width: | Height: | Size: 293 B After Width: | Height: | Size: 322 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M5 20c1-7 6-11 13-13M18 7l-1-4M18 7l4-1"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#C77CE0"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M5 20c1-7 6-11 13-13M18 7l-1-4M18 7l4-1"></path></svg>
|
||||
|
Before Width: | Height: | Size: 253 B After Width: | Height: | Size: 274 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="currentColor" fill-opacity=".16" d="M7 5h10l1 8c0 4-3 6-6 6s-6-2-6-6z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M7 5h10l1 8c0 4-3 6-6 6s-6-2-6-6z"/><path stroke="currentColor" stroke-width="1.7" stroke-linecap="round" d="M9 9h6M9 12h6M11 15h2"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#5A9AB0"><path fill="currentColor" fill-opacity=".16" d="M7 5h10l1 8c0 4-3 6-6 6s-6-2-6-6z"></path><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M7 5h10l1 8c0 4-3 6-6 6s-6-2-6-6z"></path><path stroke="currentColor" stroke-width="1.7" stroke-linecap="round" d="M9 9h6M9 12h6M11 15h2"></path></svg>
|
||||
|
Before Width: | Height: | Size: 403 B After Width: | Height: | Size: 436 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M4 5h16v14H4z"/><path stroke="currentColor" stroke-width="1.8" d="M4 9.7h16M4 14.3h16M11 5v4.7M8 9.7v4.6M15 9.7v4.6M11 14.3V19"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#5A7D9A"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M4 5h16v14H4z"></path><path stroke="currentColor" stroke-width="1.8" d="M4 9.7h16M4 14.3h16M11 5v4.7M8 9.7v4.6M15 9.7v4.6M11 14.3V19"></path></svg>
|
||||
|
Before Width: | Height: | Size: 315 B After Width: | Height: | Size: 342 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="currentColor" fill-opacity=".18" d="M12 4 4 20h8z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M12 4 4 20h16zM12 4v16"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#9AA0C0"><path fill="currentColor" fill-opacity=".18" d="M12 4 4 20h8z"></path><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M12 4 4 20h16zM12 4v16"></path></svg>
|
||||
|
Before Width: | Height: | Size: 275 B After Width: | Height: | Size: 302 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M4 16c5 3 11 3 16-2"/><path fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-dasharray="2.5 3" d="M4 11c5 3 10 3 15-1.5"/><circle cx="18" cy="6" r="2.2" fill="currentColor"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#E86A6A"><path fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" d="M4 16c5 3 11 3 16-2"></path><path fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-dasharray="2.5 3" d="M4 11c5 3 10 3 15-1.5"></path><circle cx="18" cy="6" r="2.2" fill="currentColor"></circle></svg>
|
||||
|
Before Width: | Height: | Size: 395 B After Width: | Height: | Size: 430 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" d="M4 7h16M4 12h16M4 17h16"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" color="#C89B5A"><path fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" d="M4 7h16M4 12h16M4 17h16"></path></svg>
|
||||
|
Before Width: | Height: | Size: 213 B After Width: | Height: | Size: 234 B |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 452 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 251 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 254 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 309 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 605 KiB |
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,350 @@
|
||||
// @ds-adherence-ignore -- omelette starter scaffold (raw elements/hex/px by design)
|
||||
// Copied omelette starter. Re-running copy_starter_component with this kind overwrites this file with the latest version (page content is unaffected).
|
||||
|
||||
/* BEGIN USAGE */
|
||||
// iOS.jsx — Simplified iOS 26 (Liquid Glass) device frame
|
||||
// Based on the iOS 26 UI Kit + Figma status bar spec. No assets, no deps.
|
||||
// Exports (to window): IOSDevice, IOSStatusBar, IOSNavBar, IOSGlassPill, IOSList, IOSListRow, IOSKeyboard
|
||||
//
|
||||
// Usage — wrap your screen content in <IOSDevice> to get the bezel, status bar
|
||||
// and home indicator (props: title, dark, keyboard):
|
||||
//
|
||||
// <IOSDevice title="Settings">
|
||||
// ...your screen content...
|
||||
// </IOSDevice>
|
||||
// <IOSDevice dark title="Search" keyboard>…</IOSDevice>
|
||||
/* END USAGE */
|
||||
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
// Status bar
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
function IOSStatusBar({ dark = false, time = '9:41' }) {
|
||||
const c = dark ? '#fff' : '#000';
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex', gap: 154, alignItems: 'center', justifyContent: 'center',
|
||||
padding: '21px 24px 19px', boxSizing: 'border-box',
|
||||
position: 'relative', zIndex: 20, width: '100%',
|
||||
}}>
|
||||
<div style={{ flex: 1, height: 22, display: 'flex', alignItems: 'center', justifyContent: 'center', paddingTop: 1.5 }}>
|
||||
<span style={{
|
||||
fontFamily: '-apple-system, "SF Pro", system-ui', fontWeight: 590,
|
||||
fontSize: 17, lineHeight: '22px', color: c,
|
||||
}}>{time}</span>
|
||||
</div>
|
||||
<div style={{ flex: 1, height: 22, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7, paddingTop: 1, paddingRight: 1 }}>
|
||||
<svg width="19" height="12" viewBox="0 0 19 12">
|
||||
<rect x="0" y="7.5" width="3.2" height="4.5" rx="0.7" fill={c}/>
|
||||
<rect x="4.8" y="5" width="3.2" height="7" rx="0.7" fill={c}/>
|
||||
<rect x="9.6" y="2.5" width="3.2" height="9.5" rx="0.7" fill={c}/>
|
||||
<rect x="14.4" y="0" width="3.2" height="12" rx="0.7" fill={c}/>
|
||||
</svg>
|
||||
<svg width="17" height="12" viewBox="0 0 17 12">
|
||||
<path d="M8.5 3.2C10.8 3.2 12.9 4.1 14.4 5.6L15.5 4.5C13.7 2.7 11.2 1.5 8.5 1.5C5.8 1.5 3.3 2.7 1.5 4.5L2.6 5.6C4.1 4.1 6.2 3.2 8.5 3.2Z" fill={c}/>
|
||||
<path d="M8.5 6.8C9.9 6.8 11.1 7.3 12 8.2L13.1 7.1C11.8 5.9 10.2 5.1 8.5 5.1C6.8 5.1 5.2 5.9 3.9 7.1L5 8.2C5.9 7.3 7.1 6.8 8.5 6.8Z" fill={c}/>
|
||||
<circle cx="8.5" cy="10.5" r="1.5" fill={c}/>
|
||||
</svg>
|
||||
<svg width="27" height="13" viewBox="0 0 27 13">
|
||||
<rect x="0.5" y="0.5" width="23" height="12" rx="3.5" stroke={c} strokeOpacity="0.35" fill="none"/>
|
||||
<rect x="2" y="2" width="20" height="9" rx="2" fill={c}/>
|
||||
<path d="M25 4.5V8.5C25.8 8.2 26.5 7.2 26.5 6.5C26.5 5.8 25.8 4.8 25 4.5Z" fill={c} fillOpacity="0.4"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
// Liquid glass pill — blur + tint + shine
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
function IOSGlassPill({ children, dark = false, style = {} }) {
|
||||
return (
|
||||
<div style={{
|
||||
height: 44, minWidth: 44, borderRadius: 9999,
|
||||
position: 'relative', overflow: 'hidden',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
boxShadow: dark
|
||||
? '0 2px 6px rgba(0,0,0,0.35), 0 6px 16px rgba(0,0,0,0.2)'
|
||||
: '0 1px 3px rgba(0,0,0,0.07), 0 3px 10px rgba(0,0,0,0.06)',
|
||||
...style,
|
||||
}}>
|
||||
{/* blur + tint */}
|
||||
<div style={{
|
||||
position: 'absolute', inset: 0, borderRadius: 9999,
|
||||
backdropFilter: 'blur(12px) saturate(180%)',
|
||||
WebkitBackdropFilter: 'blur(12px) saturate(180%)',
|
||||
background: dark ? 'rgba(120,120,128,0.28)' : 'rgba(255,255,255,0.5)',
|
||||
}} />
|
||||
{/* shine */}
|
||||
<div style={{
|
||||
position: 'absolute', inset: 0, borderRadius: 9999,
|
||||
boxShadow: dark
|
||||
? 'inset 1.5px 1.5px 1px rgba(255,255,255,0.15), inset -1px -1px 1px rgba(255,255,255,0.08)'
|
||||
: 'inset 1.5px 1.5px 1px rgba(255,255,255,0.7), inset -1px -1px 1px rgba(255,255,255,0.4)',
|
||||
border: dark ? '0.5px solid rgba(255,255,255,0.15)' : '0.5px solid rgba(0,0,0,0.06)',
|
||||
}} />
|
||||
<div style={{ position: 'relative', zIndex: 1, display: 'flex', alignItems: 'center', padding: '0 4px' }}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
// Navigation bar — glass pills + large title
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
function IOSNavBar({ title = 'Title', dark = false, trailingIcon = true }) {
|
||||
const muted = dark ? 'rgba(255,255,255,0.6)' : '#404040';
|
||||
const text = dark ? '#fff' : '#000';
|
||||
const pillIcon = (content) => (
|
||||
<IOSGlassPill dark={dark}>
|
||||
<div style={{ width: 36, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
{content}
|
||||
</div>
|
||||
</IOSGlassPill>
|
||||
);
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex', flexDirection: 'column', gap: 10,
|
||||
paddingTop: 62, paddingBottom: 10, position: 'relative', zIndex: 5,
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||
padding: '0 16px',
|
||||
}}>
|
||||
{/* back chevron */}
|
||||
{pillIcon(
|
||||
<svg width="12" height="20" viewBox="0 0 12 20" fill="none" style={{ marginLeft: -1 }}>
|
||||
<path d="M10 2L2 10l8 8" stroke={muted} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)}
|
||||
{/* trailing ellipsis */}
|
||||
{trailingIcon && pillIcon(
|
||||
<svg width="22" height="6" viewBox="0 0 22 6">
|
||||
<circle cx="3" cy="3" r="2.5" fill={muted}/>
|
||||
<circle cx="11" cy="3" r="2.5" fill={muted}/>
|
||||
<circle cx="19" cy="3" r="2.5" fill={muted}/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
{/* large title */}
|
||||
<div style={{
|
||||
padding: '0 16px',
|
||||
fontFamily: '-apple-system, system-ui',
|
||||
fontSize: 34, fontWeight: 700, lineHeight: '41px',
|
||||
color: text, letterSpacing: 0.4,
|
||||
}}>{title}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
// Grouped list (inset card, r:26) + row (52px)
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
function IOSListRow({ title, detail, icon, chevron = true, isLast = false, dark = false }) {
|
||||
const text = dark ? '#fff' : '#000';
|
||||
const sec = dark ? 'rgba(235,235,245,0.6)' : 'rgba(60,60,67,0.6)';
|
||||
const ter = dark ? 'rgba(235,235,245,0.3)' : 'rgba(60,60,67,0.3)';
|
||||
const sep = dark ? 'rgba(84,84,88,0.65)' : 'rgba(60,60,67,0.12)';
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', minHeight: 52,
|
||||
padding: '0 16px', position: 'relative',
|
||||
fontFamily: '-apple-system, system-ui', fontSize: 17,
|
||||
letterSpacing: -0.43,
|
||||
}}>
|
||||
{icon && (
|
||||
<div style={{
|
||||
width: 30, height: 30, borderRadius: 7, background: icon,
|
||||
marginRight: 12, flexShrink: 0,
|
||||
}} />
|
||||
)}
|
||||
<div style={{ flex: 1, color: text }}>{title}</div>
|
||||
{detail && <span style={{ color: sec, marginRight: 6 }}>{detail}</span>}
|
||||
{chevron && (
|
||||
<svg width="8" height="14" viewBox="0 0 8 14" style={{ flexShrink: 0 }}>
|
||||
<path d="M1 1l6 6-6 6" stroke={ter} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)}
|
||||
{!isLast && (
|
||||
<div style={{
|
||||
position: 'absolute', bottom: 0, right: 0,
|
||||
left: icon ? 58 : 16, height: 0.5, background: sep,
|
||||
}} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function IOSList({ header, children, dark = false }) {
|
||||
const hc = dark ? 'rgba(235,235,245,0.6)' : 'rgba(60,60,67,0.6)';
|
||||
const bg = dark ? '#1C1C1E' : '#fff';
|
||||
return (
|
||||
<div>
|
||||
{header && (
|
||||
<div style={{
|
||||
fontFamily: '-apple-system, system-ui', fontSize: 13,
|
||||
color: hc, textTransform: 'uppercase',
|
||||
padding: '8px 36px 6px', letterSpacing: -0.08,
|
||||
}}>{header}</div>
|
||||
)}
|
||||
<div style={{
|
||||
background: bg, borderRadius: 26,
|
||||
margin: '0 16px', overflow: 'hidden',
|
||||
}}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
// Device frame
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
function IOSDevice({
|
||||
children, width = 402, height = 874, dark = false,
|
||||
title, keyboard = false,
|
||||
}) {
|
||||
return (
|
||||
<div style={{
|
||||
width, height, borderRadius: 48, overflow: 'hidden',
|
||||
position: 'relative', background: dark ? '#000' : '#F2F2F7',
|
||||
boxShadow: '0 40px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.12)',
|
||||
fontFamily: '-apple-system, system-ui, sans-serif',
|
||||
WebkitFontSmoothing: 'antialiased',
|
||||
}}>
|
||||
{/* dynamic island */}
|
||||
<div style={{
|
||||
position: 'absolute', top: 11, left: '50%', transform: 'translateX(-50%)',
|
||||
width: 126, height: 37, borderRadius: 24, background: '#000', zIndex: 50,
|
||||
}} />
|
||||
{/* status bar (absolute) */}
|
||||
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10 }}>
|
||||
<IOSStatusBar dark={dark} />
|
||||
</div>
|
||||
{/* nav + content */}
|
||||
<div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
{title !== undefined && <IOSNavBar title={title} dark={dark} />}
|
||||
<div style={{ flex: 1, overflow: 'auto' }}>{children}</div>
|
||||
{keyboard && <IOSKeyboard dark={dark} />}
|
||||
</div>
|
||||
{/* home indicator — always on top */}
|
||||
<div style={{
|
||||
position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 60,
|
||||
height: 34, display: 'flex', justifyContent: 'center', alignItems: 'flex-end',
|
||||
paddingBottom: 8, pointerEvents: 'none',
|
||||
}}>
|
||||
<div style={{
|
||||
width: 139, height: 5, borderRadius: 100,
|
||||
background: dark ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)',
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
// Keyboard — iOS 26 liquid glass
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
function IOSKeyboard({ dark = false }) {
|
||||
const glyph = dark ? 'rgba(255,255,255,0.7)' : '#595959';
|
||||
const sugg = dark ? 'rgba(255,255,255,0.6)' : '#333';
|
||||
const keyBg = dark ? 'rgba(255,255,255,0.22)' : 'rgba(255,255,255,0.85)';
|
||||
|
||||
// special-key icons
|
||||
const icons = {
|
||||
shift: <svg width="19" height="17" viewBox="0 0 19 17"><path d="M9.5 1L1 9.5h4.5V16h8V9.5H18L9.5 1z" fill={glyph}/></svg>,
|
||||
del: <svg width="23" height="17" viewBox="0 0 23 17"><path d="M7 1h13a2 2 0 012 2v11a2 2 0 01-2 2H7l-6-7.5L7 1z" fill="none" stroke={glyph} strokeWidth="1.6" strokeLinejoin="round"/><path d="M10 5l7 7M17 5l-7 7" stroke={glyph} strokeWidth="1.6" strokeLinecap="round"/></svg>,
|
||||
ret: <svg width="20" height="14" viewBox="0 0 20 14"><path d="M18 1v6H4m0 0l4-4M4 7l4 4" fill="none" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>,
|
||||
};
|
||||
|
||||
const key = (content, { w, flex, ret, fs = 25, k } = {}) => (
|
||||
<div key={k} style={{
|
||||
height: 42, borderRadius: 8.5,
|
||||
flex: flex ? 1 : undefined, width: w, minWidth: 0,
|
||||
background: ret ? '#08f' : keyBg,
|
||||
boxShadow: '0 1px 0 rgba(0,0,0,0.075)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
fontFamily: '-apple-system, "SF Compact", system-ui',
|
||||
fontSize: fs, fontWeight: 458, color: ret ? '#fff' : glyph,
|
||||
}}>{content}</div>
|
||||
);
|
||||
|
||||
const row = (keys, pad = 0) => (
|
||||
<div style={{ display: 'flex', gap: 6.5, justifyContent: 'center', padding: `0 ${pad}px` }}>
|
||||
{keys.map(l => key(l, { flex: true, k: l }))}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
position: 'relative', zIndex: 15, borderRadius: 27, overflow: 'hidden',
|
||||
padding: '11px 0 2px',
|
||||
display: 'flex', flexDirection: 'column', alignItems: 'center',
|
||||
boxShadow: dark
|
||||
? '0 -2px 20px rgba(0,0,0,0.09)'
|
||||
: '0 -1px 6px rgba(0,0,0,0.018), 0 -3px 20px rgba(0,0,0,0.012)',
|
||||
}}>
|
||||
{/* liquid glass bg — same recipe as nav pills */}
|
||||
<div style={{
|
||||
position: 'absolute', inset: 0, borderRadius: 27,
|
||||
backdropFilter: 'blur(12px) saturate(180%)',
|
||||
WebkitBackdropFilter: 'blur(12px) saturate(180%)',
|
||||
background: dark ? 'rgba(120,120,128,0.14)' : 'rgba(255,255,255,0.25)',
|
||||
}} />
|
||||
<div style={{
|
||||
position: 'absolute', inset: 0, borderRadius: 27,
|
||||
boxShadow: dark
|
||||
? 'inset 1.5px 1.5px 1px rgba(255,255,255,0.15)'
|
||||
: 'inset 1.5px 1.5px 1px rgba(255,255,255,0.7), inset -1px -1px 1px rgba(255,255,255,0.4)',
|
||||
border: dark ? '0.5px solid rgba(255,255,255,0.15)' : '0.5px solid rgba(0,0,0,0.06)',
|
||||
pointerEvents: 'none',
|
||||
}} />
|
||||
|
||||
{/* autocorrect bar */}
|
||||
<div style={{
|
||||
display: 'flex', gap: 20, alignItems: 'center',
|
||||
padding: '8px 22px 13px', width: '100%', boxSizing: 'border-box',
|
||||
position: 'relative',
|
||||
}}>
|
||||
{['"The"', 'the', 'to'].map((w, i) => (
|
||||
<React.Fragment key={i}>
|
||||
{i > 0 && <div style={{ width: 1, height: 25, background: '#ccc', opacity: 0.3 }} />}
|
||||
<div style={{
|
||||
flex: 1, textAlign: 'center',
|
||||
fontFamily: '-apple-system, system-ui', fontSize: 17,
|
||||
color: sugg, letterSpacing: -0.43, lineHeight: '22px',
|
||||
}}>{w}</div>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* key layout */}
|
||||
<div style={{
|
||||
display: 'flex', flexDirection: 'column', gap: 13,
|
||||
padding: '0 6.5px', width: '100%', boxSizing: 'border-box',
|
||||
position: 'relative',
|
||||
}}>
|
||||
{row(['q','w','e','r','t','y','u','i','o','p'])}
|
||||
{row(['a','s','d','f','g','h','j','k','l'], 20)}
|
||||
<div style={{ display: 'flex', gap: 14.25, alignItems: 'center' }}>
|
||||
{key(icons.shift, { w: 45, k: 'shift' })}
|
||||
<div style={{ display: 'flex', gap: 6.5, flex: 1 }}>
|
||||
{['z','x','c','v','b','n','m'].map(l => key(l, { flex: true, k: l }))}
|
||||
</div>
|
||||
{key(icons.del, { w: 45, k: 'del' })}
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
|
||||
{key('ABC', { w: 92.25, fs: 18, k: 'abc' })}
|
||||
{key('', { flex: true, k: 'space' })}
|
||||
{key(icons.ret, { w: 92.25, ret: true, k: 'ret' })}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* bottom spacer (emoji+mic area, icons omitted) */}
|
||||
<div style={{ height: 56, width: '100%', position: 'relative' }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Object.assign(window, {
|
||||
IOSDevice, IOSStatusBar, IOSNavBar, IOSGlassPill, IOSList, IOSListRow, IOSKeyboard,
|
||||
});
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user