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>
70 lines
5.8 KiB
HTML
70 lines
5.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="Team Grants — hand Suite capacity down into your own organisation."><title>Team Grants | The Circle Suite</title><link rel="icon" type="image/png" href="/favicon.png"><link rel="stylesheet" href="/styles.css">
|
|
<style>
|
|
.gw{max-width:860px;margin:0 auto;padding:24px 20px 70px}
|
|
.gw h1{font-size:clamp(26px,4.5vw,36px);margin:6px 0 8px}
|
|
.gw .lede{color:var(--muted);line-height:1.6;margin-bottom:18px}
|
|
#gGate{display:none;border:2px solid var(--gold);border-radius:12px;padding:16px 20px;margin-bottom:18px;line-height:1.6}
|
|
.g-card{background:var(--card,#0d2236);border:1px solid var(--line,#24425d);border-radius:14px;padding:18px 20px;margin-bottom:16px}
|
|
.g-pools{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:6px}
|
|
.g-pool{border:2px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;transition:border-color .12s}
|
|
.g-pool.on{border-color:var(--gold);background:rgba(212,175,55,.07)}
|
|
.g-pool .big{font-size:24px;font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1}
|
|
.g-pool .lab{font-size:11.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);margin-top:5px;line-height:1.35}
|
|
.g-pool .of{font-size:12px;color:var(--muted);margin-top:5px}
|
|
label.g-lab{display:block;font-weight:700;font-size:14px;margin:16px 0 5px}
|
|
.g-hint{color:var(--muted);font-size:12.5px;line-height:1.5;margin-bottom:7px}
|
|
.g-card input[type=number]{width:150px;background:var(--bg,#0b1d2e);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:10px 12px;font-size:15px}
|
|
.g-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}
|
|
#gErr{display:none;color:#f0a05a;margin-top:12px;font-size:14px;line-height:1.55}
|
|
#gOk{display:none;border:2px solid var(--teal);border-radius:12px;padding:14px 18px;margin-top:14px;line-height:1.6}
|
|
.g-tbl{width:100%;border-collapse:collapse;font-size:14px}
|
|
.g-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)}
|
|
.g-tbl td{padding:8px 9px;border-bottom:1px solid var(--line);color:var(--muted);font-variant-numeric:tabular-nums}
|
|
.g-tbl td b{color:var(--text)}
|
|
.g-got{border:2px solid var(--teal);border-radius:14px;padding:14px 18px;margin-bottom:18px;line-height:1.65}
|
|
.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}}
|
|
.g-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>Team Grants</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="gw">
|
|
<div class="eyebrow" style="color:var(--gold)">CIRCLE SUITE · VERTEX (LEVEL 7)</div>
|
|
<h1>Team <span class="gold">Grants.</span></h1>
|
|
<p class="lede">Every other tool in the Suite helps you. This one helps the people under you. Hand your own capacity — ad impressions, copy generations, page builds — to anyone in your organisation who is stuck without it.</p>
|
|
|
|
<div id="gGate"></div>
|
|
<div id="gGot"></div>
|
|
|
|
<div id="gBody" style="display:none">
|
|
<div class="g-card">
|
|
<label class="g-lab" style="margin-top:0">What do you want to give?</label>
|
|
<div class="g-pools" id="gPools"></div>
|
|
|
|
<label class="g-lab" for="gTo">Who needs it?</label>
|
|
<div class="g-hint">Their position number. It has to be someone in your own organisation — check <a href="/suite/leader" style="color:var(--gold);font-weight:700">Leader Ops</a> if you are not sure who is stuck.</div>
|
|
<input type="number" id="gTo" min="1" step="1" placeholder="46">
|
|
|
|
<label class="g-lab" for="gN">How much?</label>
|
|
<input type="number" id="gN" min="1" step="1">
|
|
<div class="g-hint" id="gNHint"></div>
|
|
|
|
<div class="g-row"><button id="gGo" class="btn btn-primary">🎁 Give it to them</button></div>
|
|
<div id="gErr"></div>
|
|
<div id="gOk"></div>
|
|
</div>
|
|
|
|
<div id="gHistWrap" style="display:none">
|
|
<h2 style="font-size:19px;margin:22px 0 10px">What you've given this month</h2>
|
|
<div class="table-wrap"><table class="g-tbl"><thead><tr><th>To</th><th>What</th><th>How much</th><th>When</th></tr></thead><tbody id="gHist"></tbody></table></div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="g-note"><strong style="color:var(--text)">Grants come out of a separate monthly pool that your level gives you</strong> — giving to your team never eats into your own allowances, because nobody should have to choose between equipping their people and using their own tools. Pools reset on the 1st along with everything else, so a grant is for unblocking somebody now rather than building a balance. <br><br>Independent team resource · No income is guaranteed · Cryptocurrency involves risk.</p>
|
|
</main>
|
|
<script src="/suite-grants.js"></script>
|
|
<script src="/tool-video.js" data-video="/tv/suite-team-grants.mp4" data-title="Watch the Team Grants walkthrough" data-key="grants" 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>
|