martbost
1896b707f8
Twelve narrated walkthroughs, one per Suite tool, in Marty's cloned voice. No screen recording involved: Playwright drives and records the real UI, ElevenLabs narrates, ffmpeg muxes. Pipeline lives outside this repo at ../video-pipeline. Placement (Marty's call): TOP of each tool page but COLLAPSED — a one-line "Watch the walkthrough" bar that auto-opens on a member's first visit to that specific tool and stays shut after. A video in a separate library never gets watched; an embedded player pushes the tool below the fold on mobile for every returning member. First-visit autoplay is muted, so it is never a surprise noise, and every localStorage access is guarded because it throws outright in private windows. Served from the data volume via /tv/<slug>.mp4, NOT from public/. That directory is already 199MB and another 33MB of MP4 would ride along on every deploy forever; this way a video can also be re-cut and dropped in without a rebuild. The route implements HTTP range requests — without them the scrub bar renders but cannot seek, which looks broken in a way people rarely report. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
52 lines
4.6 KiB
HTML
52 lines
4.6 KiB
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="noindex"><meta name="description" content="Network Intelligence — what is actually working across every ad the whole team runs."><title>Network Intelligence | The Circle Suite</title><link rel="icon" type="image/png" href="/favicon.png"><link rel="stylesheet" href="/styles.css">
|
|
<style>
|
|
.iw{max-width:940px;margin:0 auto;padding:24px 20px 70px}
|
|
.iw h1{font-size:clamp(26px,4.5vw,36px);margin:6px 0 8px}
|
|
.iw .lede{color:var(--muted);line-height:1.6;margin-bottom:18px}
|
|
#iGate{display:none;border:2px solid var(--gold);border-radius:12px;padding:16px 20px;margin-bottom:18px;line-height:1.6}
|
|
.i-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
|
|
.i-tile{border:2px solid var(--line);border-radius:14px;padding:14px 16px}
|
|
.i-tile .big{font-size:26px;font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1}
|
|
.i-tile.cool .big{color:var(--teal)}
|
|
.i-tile .lab{font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-top:5px;line-height:1.35}
|
|
#iReadout{border:2px solid var(--teal);border-radius:14px;padding:16px 19px;margin-bottom:18px;line-height:1.75}
|
|
#iReadout div{margin-bottom:7px}
|
|
#iReadout div:last-child{margin-bottom:0}
|
|
.i-sec{background:var(--card,#0d2236);border:1px solid var(--line,#24425d);border-radius:14px;padding:16px 18px;margin-bottom:14px}
|
|
.i-sec h2{font-size:17px;margin:0 0 3px}
|
|
.i-sec .why{color:var(--muted);font-size:12.5px;line-height:1.55;margin-bottom:10px}
|
|
.i-tbl{width:100%;border-collapse:collapse;font-size:14px}
|
|
.i-tbl th{text-align:left;padding:7px 9px;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--line)}
|
|
.i-tbl td{padding:8px 9px;border-bottom:1px solid var(--line);color:var(--muted);font-variant-numeric:tabular-nums}
|
|
.i-tbl tr:first-child td{color:var(--text)}
|
|
.i-tbl tr:first-child td b{color:var(--gold)}
|
|
.i-bar{height:6px;border-radius:3px;background:var(--gold);min-width:2px}
|
|
.i-thin{color:var(--muted);font-size:12px;margin-top:9px;font-style:italic}
|
|
.spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.25);border-top-color:var(--gold);border-radius:50%;animation:sp .8s linear infinite;vertical-align:-2px;margin-right:7px}
|
|
@keyframes sp{to{transform:rotate(360deg)}}
|
|
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
|
|
.i-note{margin-top:22px;font-size:12.5px;color:var(--muted);line-height:1.6;border-top:1px solid var(--line);padding-top:12px}
|
|
</style></head>
|
|
<body>
|
|
<header class="wrap nav"><a class="brand" href="/suite"><img class="brand-mark" src="/logo.jpg" alt="The RM Circle" width="42" height="42"><span><span id="brandName">RM Circle</span><small>Network Intelligence</small></span></a><div class="nav-actions"><a class="btn btn-secondary hide-mobile" href="/suite">← The Suite</a><a class="btn btn-primary" href="/my">My Dashboard</a></div></header>
|
|
<main class="iw">
|
|
<div class="eyebrow" style="color:var(--gold)">CIRCLE SUITE · CORONA (LEVEL 8)</div>
|
|
<h1>Network <span class="gold">Intelligence.</span></h1>
|
|
<p class="lede">Every member running ads is answering the same question: which words make a stranger click. On their own, none of them has enough traffic to know. Pooled across the whole team, it becomes an answer — and one nobody outside this team can buy.</p>
|
|
|
|
<div id="iGate"></div>
|
|
<div id="iLoading" style="color:var(--muted)"><span class="spin"></span>Reading the network…</div>
|
|
|
|
<div id="iBody" style="display:none">
|
|
<div class="i-tiles" id="iTiles"></div>
|
|
<div id="iReadout"></div>
|
|
<div id="iSections"></div>
|
|
</div>
|
|
|
|
<p class="i-note"><strong style="color:var(--text)">Nothing here identifies anybody.</strong> No positions, no names, no per-person numbers — this is a picture of what works, not a leaderboard of who is working. Groupings with too little traffic behind them are held back and counted rather than shown, because a click rate built on a few hundred impressions is noise dressed up as insight. <br><br>Independent team resource · No income is guaranteed · Cryptocurrency involves risk.</p>
|
|
</main>
|
|
<script src="/suite-intel.js"></script>
|
|
<script src="/tool-video.js" data-video="/tv/suite-network-intel.mp4" data-title="Watch the Network Intelligence walkthrough" data-key="intel" defer></script>
|
|
<script src="/chat.js" defer></script>
|
|
<script src="/translate.js" defer></script><script src="/tg-app.js" defer></script><script src="/nav-dash.js" defer></script></body></html>
|