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>
78 lines
5.8 KiB
HTML
78 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="Funnel Factory — build a separate landing page for each audience you talk to, and point different ads at each one."><title>Funnel Factory | The Circle Suite</title><link rel="icon" type="image/png" href="/favicon.png"><link rel="stylesheet" href="/styles.css">
|
|
<style>
|
|
.fw{max-width:880px;margin:0 auto;padding:24px 20px 70px}
|
|
.fw h1{font-size:clamp(26px,4.5vw,36px);margin:6px 0 8px}
|
|
.fw .lede{color:var(--muted);line-height:1.6;margin-bottom:18px}
|
|
#fGate{display:none;border:2px solid var(--gold);border-radius:12px;padding:16px 20px;margin-bottom:18px;line-height:1.6}
|
|
.f-card{background:var(--card,#0d2236);border:1px solid var(--line,#24425d);border-radius:14px;padding:18px 20px;margin-bottom:16px}
|
|
label.f-lab{display:block;font-weight:700;font-size:14px;margin:14px 0 5px}
|
|
label.f-lab:first-of-type{margin-top:0}
|
|
.f-hint{color:var(--muted);font-size:12.5px;line-height:1.5;margin-bottom:7px}
|
|
.f-card input[type=text],.f-card 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}
|
|
.f-chips{display:flex;flex-wrap:wrap;gap:8px}
|
|
.f-chip{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}
|
|
.f-chip.on{border-color:var(--teal);background:rgba(78,214,203,.12);color:var(--teal)}
|
|
.f-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}
|
|
#fErr{display:none;color:#f0a05a;margin-top:12px;font-size:14px;line-height:1.55}
|
|
#fOk{display:none;border:2px solid var(--teal);border-radius:12px;padding:14px 18px;margin-top:14px;line-height:1.6}
|
|
.f-page{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;
|
|
border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-bottom:10px}
|
|
.f-page .nm{font-weight:800;font-size:15px}
|
|
.f-page .u{font-size:12.5px;color:var(--muted);word-break:break-all}
|
|
.f-page .meta{font-size:12px;color:var(--muted);margin-top:3px}
|
|
.f-page.main{border-color:var(--gold)}
|
|
.f-acts{display:flex;gap:8px;flex-wrap:wrap}
|
|
.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}}
|
|
.f-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>Funnel Factory</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="fw">
|
|
<div class="eyebrow" style="color:var(--gold)">CIRCLE SUITE · FASTIGIUM (LEVEL 6)</div>
|
|
<h1>Funnel <span class="gold">Factory.</span></h1>
|
|
<p class="lede">The Page Builder gives you one page. This gives you as many as you need — a different page for each audience you talk to, each on its own address, each one something you can point a separate ad or a separate conversation at.</p>
|
|
|
|
<div id="fGate"></div>
|
|
|
|
<div id="fBody" style="display:none">
|
|
<h2 style="font-size:19px;margin:0 0 10px">Your pages</h2>
|
|
<div id="fPages"></div>
|
|
|
|
<div class="f-card" style="margin-top:18px">
|
|
<h2 style="font-size:18px;margin:0 0 12px">Build another one</h2>
|
|
|
|
<label class="f-lab" for="fName">Name it</label>
|
|
<div class="f-hint">Just for you — it also becomes the web address. "Gym friends" gives you /p/<span id="fIdA">…</span>/gym-friends.</div>
|
|
<input type="text" id="fName" maxlength="80" placeholder="Gym friends">
|
|
|
|
<label class="f-lab">Angle</label>
|
|
<div class="f-hint">Sets the video and the pitch this page leads with.</div>
|
|
<div class="f-chips" id="fAngles"></div>
|
|
|
|
<label class="f-lab" for="fAud">Who is this page for?</label>
|
|
<div class="f-hint">The more specific, the better it writes. "Guys from my old job who complain about overtime" beats "everyone".</div>
|
|
<textarea id="fAud" rows="2" maxlength="400"></textarea>
|
|
|
|
<label class="f-lab" for="fStory">Anything of your own to include?</label>
|
|
<div class="f-hint">Why you started, what you were sceptical about — optional, but it makes the page sound like a person.</div>
|
|
<textarea id="fStory" rows="3" maxlength="900"></textarea>
|
|
|
|
<div class="f-row">
|
|
<button id="fGo" class="btn btn-primary">🏗️ Build this page</button>
|
|
<span class="f-hint" id="fMeter" style="margin:0"></span>
|
|
</div>
|
|
<div id="fErr"></div>
|
|
<div id="fOk"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="f-note"><strong style="color:var(--text)">Every page here is public and framable</strong>, so you can drop one into an ad, a QR code, or someone's inbox and it will just work. They all carry the same honest disclaimers as the rest of the site. <br><br>Independent team resource · No income is guaranteed · Cryptocurrency involves risk.</p>
|
|
</main>
|
|
<script src="/suite-funnel.js"></script>
|
|
<script src="/tool-video.js" data-video="/tv/suite-funnel-factory.mp4" data-secs="· 34 sec" data-title="Watch the Funnel Factory walkthrough" data-key="funnel" 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>
|