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>
48 lines
4.1 KiB
HTML
48 lines
4.1 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="Voice Profile — teach the Copy Engine and Email Engine to write the way you actually talk."><title>Voice Profile | The Circle Suite</title><link rel="icon" type="image/png" href="/favicon.png"><link rel="stylesheet" href="/styles.css">
|
|
<style>
|
|
.vw{max-width:780px;margin:0 auto;padding:24px 20px 70px}
|
|
.vw h1{font-size:clamp(26px,4.5vw,36px);margin:6px 0 8px}
|
|
.vw .lede{color:var(--muted);line-height:1.6;margin-bottom:18px}
|
|
#vGate{display:none;border:2px solid var(--gold);border-radius:12px;padding:16px 20px;margin-bottom:18px;line-height:1.6}
|
|
.v-card{background:var(--card,#0d2236);border:1px solid var(--line,#24425d);border-radius:14px;padding:18px 20px;margin-bottom:16px}
|
|
.v-f{margin-bottom:18px}
|
|
.v-f label{display:block;font-weight:700;font-size:15px;margin-bottom:4px}
|
|
.v-f .hint{color:var(--muted);font-size:12.5px;line-height:1.5;margin-bottom:7px}
|
|
.v-f textarea{width:100%;background:var(--bg,#0b1d2e);border:1px solid var(--line);border-radius:10px;
|
|
color:var(--text);padding:10px 12px;font:inherit;font-size:14.5px;line-height:1.55;resize:vertical}
|
|
.v-f textarea:focus{outline:2px solid var(--teal);outline-offset:1px}
|
|
.v-count{font-size:11.5px;color:var(--muted);text-align:right;margin-top:3px;font-variant-numeric:tabular-nums}
|
|
.v-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px}
|
|
#vErr{display:none;color:#f0a05a;margin-top:12px;font-size:14px;line-height:1.55}
|
|
#vOk{display:none;border:2px solid var(--teal);border-radius:12px;padding:14px 18px;margin-top:14px;line-height:1.6}
|
|
.v-state{border:2px solid var(--teal);border-radius:14px;padding:14px 18px;margin-bottom:18px;line-height:1.6}
|
|
.v-state.off{border-color:var(--line);color:var(--muted)}
|
|
.v-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>Voice Profile</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="vw">
|
|
<div class="eyebrow" style="color:var(--gold)">CIRCLE SUITE · CULMEN (LEVEL 4)</div>
|
|
<h1>Your <span class="gold">voice.</span></h1>
|
|
<p class="lede">By default the Copy Engine writes in the team voice. That is the safe starting point — but your people know how you talk, and copy that sounds like a company instead of like you is the first thing they notice. Answer these once and everything the Suite writes for you leans toward your own words.</p>
|
|
|
|
<div id="vGate"></div>
|
|
<div class="v-state off" id="vState">Loading…</div>
|
|
|
|
<div class="v-card" id="vCard">
|
|
<div id="vFields"></div>
|
|
<div class="v-row">
|
|
<button id="vSave" class="btn btn-primary">Save my voice</button>
|
|
<button id="vClear" class="btn btn-secondary">Clear it</button>
|
|
</div>
|
|
<div id="vErr"></div>
|
|
<div id="vOk"></div>
|
|
</div>
|
|
|
|
<p class="v-note"><strong style="color:var(--text)">One thing this will not do:</strong> it will never loosen the compliance rules to sound more like you. If your own writing makes income claims, the engine still will not repeat them — the honesty rules sit above your voice profile on purpose, because they are what keeps every member safe. <br><br>Independent team resource · No income is guaranteed · Cryptocurrency involves risk.</p>
|
|
</main>
|
|
<script src="/suite-voice.js"></script>
|
|
<script src="/tool-video.js" data-video="/tv/suite-voice-profile.mp4" data-title="Watch the Voice Profile walkthrough" data-key="voice" 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>
|