martbost
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?v=20260920" defer></script>
|
|
<script src="/translate.js" defer></script><script src="/tg-app.js" defer></script><script src="/nav-dash.js" defer></script></body></html>
|