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>
79 lines
6.0 KiB
HTML
79 lines
6.0 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="Founder Desk — a whole week of promotion built in one pass, plus API access to the Suite."><title>Founder Desk | The Circle Suite</title><link rel="icon" type="image/png" href="/favicon.png"><link rel="stylesheet" href="/styles.css">
|
|
<style>
|
|
.dw{max-width:900px;margin:0 auto;padding:24px 20px 70px}
|
|
.dw h1{font-size:clamp(26px,4.5vw,36px);margin:6px 0 8px}
|
|
.dw .lede{color:var(--muted);line-height:1.6;margin-bottom:18px}
|
|
#dGate{display:none;border:2px solid var(--gold);border-radius:12px;padding:16px 20px;margin-bottom:18px;line-height:1.6}
|
|
.d-card{background:var(--card,#0d2236);border:1px solid var(--line,#24425d);border-radius:14px;padding:18px 20px;margin-bottom:16px}
|
|
.d-card h2{font-size:19px;margin:0 0 4px}
|
|
.d-card .sub{color:var(--muted);font-size:13.5px;line-height:1.55;margin-bottom:12px}
|
|
.d-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px}
|
|
#dErr{display:none;color:#f0a05a;margin-top:12px;font-size:14px;line-height:1.55}
|
|
.d-sec{margin-top:24px}
|
|
.d-sec > h3{font-size:16px;margin:0 0 4px;color:var(--gold);letter-spacing:.3px}
|
|
.d-sec > .why{color:var(--muted);font-size:12.5px;margin-bottom:10px;line-height:1.5}
|
|
.d-item{border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-bottom:10px;position:relative}
|
|
.d-item .tag{font-size:10.5px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:var(--teal);margin-bottom:6px}
|
|
.d-item .body{white-space:pre-wrap;line-height:1.65;font-size:14.5px}
|
|
.d-item .subj{font-weight:800;margin-bottom:5px}
|
|
.d-copy{position:absolute;top:11px;right:11px}
|
|
.d-ads{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
|
|
.d-ad{border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:var(--bg,#0b1d2e)}
|
|
.d-ad .s{font-weight:800;font-size:15px;color:var(--gold);margin-bottom:4px;word-break:break-word}
|
|
.d-ad .l{font-size:13px;line-height:1.5;word-break:break-word}
|
|
.k-key{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:var(--bg,#0b1d2e);
|
|
border:1px solid var(--gold);border-radius:8px;padding:10px 12px;word-break:break-all;margin-top:10px}
|
|
.k-meta{color:var(--muted);font-size:12.5px;margin-top:8px;line-height:1.55}
|
|
pre.k-doc{background:var(--bg,#0b1d2e);border:1px solid var(--line);border-radius:10px;padding:12px 14px;
|
|
overflow-x:auto;font-size:12.5px;line-height:1.6;margin-top:10px}
|
|
.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}}
|
|
.d-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>Founder Desk</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="dw">
|
|
<div class="eyebrow" style="color:var(--gold)">CIRCLE SUITE · CORONA (LEVEL 8)</div>
|
|
<h1>Founder <span class="gold">Desk.</span></h1>
|
|
<p class="lede">Every tool below this builds one thing at a time, which is right when you are still finding your words. At this level the problem is different: you are running an organisation and you do not have an afternoon to spend clicking. So this builds the whole week at once.</p>
|
|
|
|
<div id="dGate"></div>
|
|
|
|
<div id="dBody" style="display:none">
|
|
<div class="d-card">
|
|
<h2>This week's campaign pack</h2>
|
|
<div class="sub">Five social posts across five different angles, three outreach messages, an email for your list, and three text ads ready for the Traffic Desk — all carrying your link, all in one pass.</div>
|
|
<div class="d-row">
|
|
<button id="dGo" class="btn btn-primary">👑 Build my week</button>
|
|
<span class="k-meta" id="dMeter" style="margin:0"></span>
|
|
</div>
|
|
<div id="dErr"></div>
|
|
</div>
|
|
|
|
<div id="dPack"></div>
|
|
|
|
<div class="d-card" style="margin-top:24px">
|
|
<h2>API access</h2>
|
|
<div class="sub">A personal key for pulling your position, your organisation triage, and the writer into whatever you already run.</div>
|
|
<div id="dKeyState"></div>
|
|
<div class="d-row">
|
|
<button id="dIssue" class="btn btn-secondary">Create a key</button>
|
|
<button id="dRevoke" class="btn btn-secondary" style="display:none">Revoke it</button>
|
|
</div>
|
|
<pre class="k-doc">GET /api/suite/v1/me your position, level and link
|
|
GET /api/suite/v1/team your organisation, triaged
|
|
POST /api/suite/v1/generate {"kind":"post","brief":"..."}
|
|
|
|
curl -H "Authorization: Bearer YOUR_KEY" \
|
|
https://rmcircle.team/api/suite/v1/me</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="d-note"><strong style="color:var(--text)">Everything here obeys the same rules as the rest of the Suite</strong> — no income claims, no invented figures, POL quantities only, Premium only. Generating a week does not post anything anywhere; it hands you the words and you decide what goes out. <br><br>Independent team resource · No income is guaranteed · Cryptocurrency involves risk.</p>
|
|
</main>
|
|
<script src="/suite-founder.js"></script>
|
|
<script src="/tool-video.js" data-video="/tv/suite-founder-desk.mp4" data-secs="· 55 sec" data-title="Watch the Founder Desk walkthrough" data-key="founder" 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>
|