martbost
c8ae4d55b0
The quota and the capability used to contradict each other. An Ascensus member was allowed 3 page builds a month, but every build overwrote the same file — so they could build three times and never have more than one page. The slug plumbing to do better already existed and was only exposed at level 6, which made the Funnel Factory's differentiator a COUNT rather than a KIND, the same flaw the upper tiers had. Now: hold caps by level (2 at Ascensus rising to 50 at Corona), separate from the monthly build quota. Rebuilding spends a build but needs no hold room; adding a new page needs both. The Page Builder is a list of your pages with view / copy link / rebuild / delete, plus a form that ADDS one instead of silently replacing what you had. Two things kept deliberately fixed. The first page a member builds stays at /p/<id> forever and cannot be deleted — that address ends up on banners, printed flyers and in people's DMs, so it must never move. Extra pages take a slug from the headline the writer produced, de-duplicated, so the address describes the page without anyone having to invent one. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
91 lines
6.8 KiB
HTML
91 lines
6.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="Page Builder — your own personal invitation page, written for you and hosted on the team site."><title>Page Builder | The Circle Suite</title><link rel="icon" type="image/png" href="/favicon.png"><link rel="stylesheet" href="/styles.css">
|
|
<style>
|
|
.pw{max-width:880px;margin:0 auto;padding:24px 20px 70px}
|
|
.pw h1{font-size:clamp(26px,4.5vw,36px);margin:6px 0 8px}
|
|
.pw .lede{color:var(--muted);line-height:1.6;margin-bottom:18px}
|
|
#pgGate{display:none;border:2px solid var(--gold);border-radius:12px;padding:16px 20px;margin-bottom:18px;line-height:1.6}
|
|
#pgGate b{color:var(--gold)}
|
|
.pg-card{background:var(--card,#0d2236);border:1px solid var(--line,#24425d);border-radius:14px;padding:18px 20px;margin-bottom:16px}
|
|
label.pg-lab{display:block;font-weight:700;font-size:14px;margin:14px 0 6px}
|
|
label.pg-lab:first-of-type{margin-top:0}
|
|
.pg-card input[type=text],.pg-card textarea{width:100%;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}
|
|
.pg-card textarea{min-height:88px;resize:vertical}
|
|
.pg-hint{color:var(--muted);font-size:12.5px;margin-top:6px}
|
|
.pg-angles{display:flex;flex-wrap:wrap;gap:8px}
|
|
.pg-angle{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}
|
|
.pg-angle.on{border-color:var(--teal);background:rgba(78,214,203,.12);color:var(--teal)}
|
|
.pg-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}
|
|
#pgMeter{font-size:12.5px;color:var(--muted);margin-left:auto}
|
|
#pgMeter b{color:var(--text)}
|
|
#pgErr{display:none;color:#f0a05a;margin-top:12px;font-size:14px;line-height:1.55}
|
|
#pgLive{display:none;border:2px solid var(--teal);border-radius:14px;padding:16px 20px;margin-bottom:16px}
|
|
#pgLive .u{font-family:ui-monospace,monospace;font-size:15px;color:var(--gold);font-weight:700;word-break:break-all}
|
|
#pgPrev{display:none;margin-top:16px}
|
|
#pgFrame{width:100%;height:560px;border:1px solid var(--line);border-radius:12px;background:#0b1d2e}
|
|
.pg-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}}
|
|
.pg-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:12px 14px;margin-bottom:9px}
|
|
.pg-page.main{border-color:var(--gold)}
|
|
.pg-page .nm{font-weight:800;font-size:15px}
|
|
.pg-page .u{font-size:12.5px;color:var(--muted);word-break:break-all;margin-top:2px}
|
|
.pg-page .meta{font-size:12px;color:var(--muted);margin-top:3px}
|
|
.pg-acts{display:flex;gap:7px;flex-wrap:wrap}
|
|
</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>Page Builder</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="pw">
|
|
<div class="eyebrow" style="color:var(--gold)">CIRCLE SUITE · LEVEL 2 · ASCENSUS</div>
|
|
<h1>Page <span class="gold">Builder.</span></h1>
|
|
<p class="lede">Answer four questions and you get your own invitation page — your name, your story, your angle video, your QR code — hosted on the team site at a link you can send anywhere.</p>
|
|
|
|
<div id="pgGate"></div>
|
|
|
|
<div id="pgLive">
|
|
<div style="font-weight:700;margin-bottom:6px">✅ Your page is live</div>
|
|
<div class="u" id="pgUrl"></div>
|
|
<div class="pg-row"><a class="btn btn-teal btn-sm" id="pgOpen" target="_blank" rel="noopener">Open it →</a><button class="btn btn-secondary btn-sm" id="pgCopyUrl">📋 Copy link</button><span class="pg-hint" id="pgCopied" style="display:none;color:var(--teal)">Copied.</span></div>
|
|
</div>
|
|
|
|
<div id="pgPagesWrap" style="display:none">
|
|
<h2 style="font-size:19px;margin:0 0 4px">Your pages</h2>
|
|
<div class="pg-hint" id="pgCapNote" style="margin-bottom:10px"></div>
|
|
<div id="pgPages"></div>
|
|
</div>
|
|
|
|
<div class="pg-card" id="pgCard">
|
|
<label class="pg-lab" for="pgName">What should people call you?</label>
|
|
<input type="text" id="pgName" maxlength="60" placeholder="e.g. Marty B.">
|
|
<label class="pg-lab">Which angle fits you best?</label>
|
|
<div class="pg-angles" id="pgAngles"></div>
|
|
<div class="pg-hint">This picks the short video that plays on your page.</div>
|
|
<label class="pg-lab" for="pgAudience">Who are you talking to?</label>
|
|
<input type="text" id="pgAudience" maxlength="300" placeholder="e.g. friends who work too many hours and are curious but skeptical about crypto">
|
|
<label class="pg-lab" for="pgStory">In your own words — why are you doing this, and what do you want them to know?</label>
|
|
<textarea id="pgStory" maxlength="1200" placeholder="Doesn't have to be polished. A few honest sentences is plenty — the writer turns it into the page."></textarea>
|
|
<div class="pg-hint">Write it messy. Real beats perfect, and it gets rewritten in your voice either way.</div>
|
|
<div class="pg-row">
|
|
<button id="pgGo" class="btn btn-primary">🧱 Build my page</button>
|
|
<span id="pgMeter"></span>
|
|
</div>
|
|
<div id="pgProg" style="display:none;margin-top:10px;font-size:13.5px;color:var(--teal);font-weight:600"></div>
|
|
<div id="pgErr"></div>
|
|
</div>
|
|
|
|
<div id="pgPrev">
|
|
<div style="font-weight:700;margin-bottom:8px">Preview</div>
|
|
<iframe id="pgFrame" title="Your page preview"></iframe>
|
|
</div>
|
|
|
|
<p class="pg-note"><strong style="color:var(--text)">Teach it forward:</strong> when your two join, walk them through building theirs — a personal page beats a bare link every time. <br>Rebuilding replaces your page at the same link, so anything you've already shared keeps working. Independent team resource · No income is guaranteed · Cryptocurrency involves risk.</p>
|
|
</main>
|
|
<script src="/suite-page.js"></script>
|
|
<script src="/tool-video.js" data-video="/tv/suite-page-builder.mp4" data-secs="· 42 sec" data-title="Watch the Page Builder walkthrough" data-key="page" 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>
|