martbost
78 lines
5.7 KiB
HTML
78 lines
5.7 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="Co-Branded Pages — put your own name, monogram and colour on every page you build."><title>Co-Branded Pages | The Circle Suite</title><link rel="icon" type="image/png" href="/favicon.png"><link rel="stylesheet" href="/styles.css">
|
|
<style>
|
|
.bw{max-width:800px;margin:0 auto;padding:24px 20px 70px}
|
|
.bw h1{font-size:clamp(26px,4.5vw,36px);margin:6px 0 8px}
|
|
.bw .lede{color:var(--muted);line-height:1.6;margin-bottom:18px}
|
|
#bGate{display:none;border:2px solid var(--gold);border-radius:12px;padding:16px 20px;margin-bottom:18px;line-height:1.6}
|
|
.b-card{background:var(--card,#0d2236);border:1px solid var(--line,#24425d);border-radius:14px;padding:18px 20px;margin-bottom:16px}
|
|
label.b-lab{display:block;font-weight:700;font-size:14px;margin:16px 0 5px}
|
|
label.b-lab:first-of-type{margin-top:0}
|
|
.b-hint{color:var(--muted);font-size:12.5px;line-height:1.5;margin-bottom:7px}
|
|
.b-card input[type=text]{width:100%;background:var(--bg,#0b1d2e);border:1px solid var(--line);border-radius:10px;
|
|
color:var(--text);padding:11px 13px;font:inherit;font-size:15px}
|
|
.b-swatches{display:flex;flex-wrap:wrap;gap:9px}
|
|
.b-sw{width:44px;height:44px;border-radius:50%;border:3px solid transparent;cursor:pointer;padding:0;
|
|
box-shadow:0 0 0 1px var(--line) inset}
|
|
.b-sw.on{border-color:var(--text)}
|
|
.b-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:18px}
|
|
#bErr{display:none;color:#f0a05a;margin-top:12px;font-size:14px;line-height:1.55}
|
|
#bOk{display:none;border:2px solid var(--teal);border-radius:12px;padding:14px 18px;margin-top:14px;line-height:1.6}
|
|
.b-prev{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:6px}
|
|
.b-prevbar{display:flex;align-items:center;gap:11px;padding:14px 18px;background:#071421}
|
|
.b-mono{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
|
|
font-weight:900;font-size:16px;letter-spacing:.5px}
|
|
.b-prevbar .nm{font-weight:800;font-size:16px;line-height:1.2}
|
|
.b-prevbar .tg{font-size:12px;color:var(--muted)}
|
|
.b-prevbody{padding:16px 18px;background:#071421;border-top:1px solid var(--line)}
|
|
.b-prevbody h3{font-size:20px;margin:0 0 6px}
|
|
.b-prevbody .btn{pointer-events:none;margin-top:10px}
|
|
.b-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>Co-Branded Pages</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/page">My pages</a></div></header>
|
|
<main class="bw">
|
|
<div class="eyebrow" style="color:var(--gold)">CIRCLE SUITE · FASTIGIUM (LEVEL 6)</div>
|
|
<h1>Co-Branded <span class="gold">Pages.</span></h1>
|
|
<p class="lede">Every page you build carries the team's identity by default. From Fastigium it carries yours instead — your name, your monogram, your colour — so what you send people stops looking like a page on someone else's site.</p>
|
|
|
|
<div id="bGate"></div>
|
|
|
|
<div id="bBody" style="display:none">
|
|
<div class="b-card">
|
|
<label class="b-lab" for="bName">Your brand name</label>
|
|
<div class="b-hint">What people should see at the top of your pages. Your own name works perfectly — "Marty Bostick" is a brand.</div>
|
|
<input type="text" id="bName" maxlength="32" placeholder="Bostick Builds">
|
|
|
|
<label class="b-lab" for="bTag">One line under it</label>
|
|
<div class="b-hint">Optional. A short line about what you do, not a slogan.</div>
|
|
<input type="text" id="bTag" maxlength="60" placeholder="Real crypto, real people">
|
|
|
|
<label class="b-lab">Your colour</label>
|
|
<div class="b-hint">Replaces the gold on your pages. Every option here is checked to stay readable on the dark background.</div>
|
|
<div class="b-swatches" id="bSwatches"></div>
|
|
|
|
<label class="b-lab">How it will look</label>
|
|
<div class="b-prev" id="bPrev">
|
|
<div class="b-prevbar"><span class="b-mono" id="bMono">—</span>
|
|
<span><div class="nm" id="bPrevName">Your brand</div><div class="tg" id="bPrevTag">A personal invitation</div></span></div>
|
|
<div class="b-prevbody">
|
|
<h3 id="bPrevHead">You already know two people. <span id="bPrevGold">That's the whole job.</span></h3>
|
|
<span class="btn btn-primary" id="bPrevBtn">Join you →</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="b-row">
|
|
<button id="bSave" class="btn btn-primary">Save my branding</button>
|
|
<button id="bClear" class="btn btn-secondary">Use team branding</button>
|
|
</div>
|
|
<div id="bErr"></div>
|
|
<div id="bOk"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="b-note"><strong style="color:var(--text)">What branding does not change:</strong> the disclaimers at the foot of every page — independent team resource, no income guaranteed, cryptocurrency involves risk — are ours and stay exactly as they are. This is co-branding, not white-labelling; anyone reading your page can still see what they're looking at. <br><br>There's no logo upload on purpose: your monogram is generated from your brand name, so there's no image to moderate and nothing of yours hosted on our domain.</p>
|
|
</main>
|
|
<script src="/suite-brand.js"></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>
|