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>
64 lines
5.2 KiB
HTML
64 lines
5.2 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="Email Engine — write follow-up sequences, welcome series and broadcasts in the team voice, with your invite link."><title>Email Engine | The Circle Suite</title><link rel="icon" type="image/png" href="/favicon.png"><link rel="stylesheet" href="/styles.css">
|
|
<style>
|
|
.ew{max-width:880px;margin:0 auto;padding:24px 20px 70px}
|
|
.ew h1{font-size:clamp(26px,4.5vw,36px);margin:6px 0 8px}
|
|
.ew .lede{color:var(--muted);line-height:1.6;margin-bottom:18px}
|
|
#emGate{display:none;border:2px solid var(--gold);border-radius:12px;padding:16px 20px;margin-bottom:18px;line-height:1.6}
|
|
#emGate b{color:var(--gold)}
|
|
.em-card{background:var(--card,#0d2236);border:1px solid var(--line,#24425d);border-radius:14px;padding:18px 20px}
|
|
.em-kinds{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
|
|
.em-kind{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;
|
|
padding:7px 14px;font-size:13.5px;font-weight:700;cursor:pointer}
|
|
.em-kind.on{border-color:var(--teal);background:rgba(78,214,203,.12);color:var(--teal)}
|
|
label.em-lab{display:block;font-weight:700;font-size:14px;margin:0 0 6px}
|
|
#emBrief{width:100%;min-height:88px;resize:vertical;background:var(--bg,#0b1d2e);border:1px solid var(--line);
|
|
border-radius:10px;color:var(--text);padding:11px 13px;font-size:15px;font-family:inherit;line-height:1.5}
|
|
.em-hint{color:var(--muted);font-size:12.5px;margin-top:6px}
|
|
.em-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px}
|
|
#emMeter{font-size:12.5px;color:var(--muted);margin-left:auto}
|
|
#emMeter b{color:var(--text)}
|
|
#emErr{display:none;color:#f0a05a;margin-top:12px;font-size:14px;line-height:1.55}
|
|
#emOut{display:none;margin-top:18px}
|
|
.em-mail{background:var(--bg,#0b1d2e);border:1px solid var(--line);border-left:3px solid var(--gold);
|
|
border-radius:10px;padding:14px 16px;margin-bottom:12px}
|
|
.em-mail .n{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
|
|
.em-mail .s{font-weight:800;font-size:16px;margin:4px 0 8px;color:var(--text)}
|
|
.em-mail .b{white-space:pre-wrap;font-size:15px;line-height:1.6;color:var(--muted)}
|
|
.em-mail .act{margin-top:10px}
|
|
.em-note{margin-top:20px;font-size:12.5px;color:var(--muted);line-height:1.6;border-top:1px solid var(--line);padding-top:12px}
|
|
.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}}
|
|
</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>Email Engine</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="/suite/copy">Copy Engine</a></div></header>
|
|
<main class="ew">
|
|
<div class="eyebrow" style="color:var(--gold)">CIRCLE SUITE · LEVEL 3 · FABRICA</div>
|
|
<h1>Email <span class="gold">Engine.</span></h1>
|
|
<p class="lede">Whole sequences, not one-offs. Pick the job, say who the list is, and it writes the series in the team's voice with <strong style="color:var(--text)">your</strong> link — ready to paste into any autoresponder.</p>
|
|
|
|
<div id="emGate"></div>
|
|
|
|
<div class="em-card" id="emCard">
|
|
<label class="em-lab">What do you need?</label>
|
|
<div class="em-kinds" id="emKinds"></div>
|
|
<label class="em-lab" for="emBrief">Who's the list, and what should it emphasise?</label>
|
|
<textarea id="emBrief" placeholder="e.g. People from my marketing list who know me but have never touched crypto — lead with how simple it is and be upfront about risk"></textarea>
|
|
<div class="em-hint">Mention anything you want included: your story, their situation, objections you keep hearing.</div>
|
|
<div class="em-row">
|
|
<button id="emGo" class="btn btn-primary">✉️ Write the sequence</button>
|
|
<span id="emMeter"></span>
|
|
</div>
|
|
<div id="emErr"></div>
|
|
</div>
|
|
|
|
<div id="emOut"></div>
|
|
|
|
<p class="em-note"><strong style="color:var(--text)">Teach it forward:</strong> a member with a follow-up sequence running never loses a warm prospect to silence — show your two how to set theirs up. <br>Read every email before you send it; your name is on it. Generated copy follows the team's rules — no income promises, no invented numbers, honest about risk. Independent team resource · No income is guaranteed · Cryptocurrency involves risk.</p>
|
|
</main>
|
|
<script src="/suite-email.js"></script>
|
|
<script src="/tool-video.js" data-video="/tv/suite-email-engine.mp4" data-title="Watch the Email Engine walkthrough" data-key="email" 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>
|