martbost
1dbee99c49
Marty asked why they start muted. Browsers only permit autoplay when a video
is muted, so "expand and play" necessarily meant "expand and play silently" —
and for these that is the wrong trade, because the narration IS the training.
A member's first visit was showing them a silent walkthrough.
So the panel now opens paused with the play button showing. Pressing it is a
user gesture, which means it plays with sound, every time. preload stays
'none' until the panel opens, then goes to 'metadata' so an open panel shows
a real first frame instead of a black rectangle.
Each bar now also carries its runtime ("· 71 sec"), so nobody has to guess
whether they are committing to one minute or ten.
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-secs="· 58 sec" 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>
|