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>
58 lines
4.8 KiB
HTML
58 lines
4.8 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="Leader Ops — see which positions in your organisation need help this week, and what to say to them."><title>Leader Ops | The Circle Suite</title><link rel="icon" type="image/png" href="/favicon.png"><link rel="stylesheet" href="/styles.css">
|
|
<style>
|
|
.lw{max-width:900px;margin:0 auto;padding:24px 20px 70px}
|
|
.lw h1{font-size:clamp(26px,4.5vw,36px);margin:6px 0 8px}
|
|
.lw .lede{color:var(--muted);line-height:1.6;margin-bottom:18px}
|
|
#lGate{display:none;border:2px solid var(--gold);border-radius:12px;padding:16px 20px;margin-bottom:18px;line-height:1.6}
|
|
.l-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;margin-bottom:18px}
|
|
.l-tile{border:2px solid var(--line);border-radius:14px;padding:14px 16px}
|
|
.l-tile.hot{border-color:var(--gold)}
|
|
.l-tile .big{font-size:28px;font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1}
|
|
.l-tile.cool .big{color:var(--teal)}
|
|
.l-tile .lab{font-size:11.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-top:5px;line-height:1.35}
|
|
.l-sec{background:var(--card,#0d2236);border:1px solid var(--line,#24425d);border-radius:14px;padding:16px 18px;margin-bottom:14px}
|
|
.l-sec h2{font-size:17px;margin:0 0 4px}
|
|
.l-sec .why{color:var(--muted);font-size:13px;line-height:1.55;margin-bottom:10px}
|
|
.l-tbl{width:100%;border-collapse:collapse;font-size:14px}
|
|
.l-tbl th{text-align:left;padding:7px 9px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--line)}
|
|
.l-tbl td{padding:8px 9px;border-bottom:1px solid var(--line);color:var(--muted);font-variant-numeric:tabular-nums}
|
|
.l-tbl td b{color:var(--text)}
|
|
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.4px}
|
|
.pill.q{background:rgba(240,160,90,.16);color:#f0a05a}
|
|
.pill.u{background:rgba(78,214,203,.14);color:var(--teal)}
|
|
.l-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:16px 0 0}
|
|
#lErr{display:none;color:#f0a05a;margin-top:12px;font-size:14px;line-height:1.55}
|
|
#lDigest{display:none;border:2px solid var(--teal);border-radius:14px;padding:18px 20px;margin-top:16px;line-height:1.75;white-space:pre-wrap}
|
|
.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}}
|
|
.l-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>Leader Ops</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="lw">
|
|
<div class="eyebrow" style="color:var(--gold)">CIRCLE SUITE · VERTEX (LEVEL 7)</div>
|
|
<h1>Leader <span class="gold">Ops.</span></h1>
|
|
<p class="lede">Everyone below you, read live from the contract and sorted by who needs you most. Not a report — a list of conversations to have this week, and the words to have them with.</p>
|
|
|
|
<div id="lGate"></div>
|
|
<div id="lBody" style="display:none">
|
|
<div class="l-tiles" id="lTiles"></div>
|
|
<div id="lSections"></div>
|
|
|
|
<div class="l-row">
|
|
<button id="lWrite" class="btn btn-primary">🧭 Write this week's coaching plan</button>
|
|
<span class="tf-hint" style="color:var(--muted);font-size:12.5px">Uses one Copy Engine generation.</span>
|
|
</div>
|
|
<div id="lErr"></div>
|
|
<div id="lDigest"></div>
|
|
</div>
|
|
|
|
<p class="l-note"><strong style="color:var(--text)">Every number here comes off the contract</strong>, not an estimate — positions, levels, and the POL forming below each person. Nothing on this page is a projection or a promise of what anyone will earn. <br><br>Coach people, don't chase them. Independent team resource · No income is guaranteed · Cryptocurrency involves risk.</p>
|
|
</main>
|
|
<script src="/suite-leader.js"></script>
|
|
<script src="/tool-video.js" data-video="/tv/suite-leader-ops.mp4" data-title="Watch the Leader Ops walkthrough" data-key="leader" 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>
|