Circle Suite P0: /suite tool wall — wallet sign-in (existing challenge/verify flow), live level entitlements via /api/public/suite-me (org-gated to teamRootId), all tiles always visible (yours / unlocks-at / in-development), L1 = today's real tools; homepage CTA + chatbot + AI prompt synced
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
martbost
@@ -0,0 +1,54 @@
|
||||
<!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="The Circle Suite — the marketing toolkit licensed to every paid position on our team. Connect your wallet and your level lights up your tools."><title>The Circle Suite | RM Circle Team Build</title><link rel="icon" type="image/png" href="/favicon.png"><link rel="stylesheet" href="/styles.css">
|
||||
<style>
|
||||
.su-wrap{max-width:1020px;margin:0 auto;padding:24px 20px 70px}
|
||||
.su-hero{text-align:center;max-width:780px;margin:0 auto 10px}
|
||||
.su-hero h1{font-size:clamp(30px,5vw,44px);margin:8px 0 10px}
|
||||
.su-hero p{color:var(--muted);line-height:1.65}
|
||||
#suPips{display:flex;gap:9px;justify-content:center;align-items:center;margin:18px 0 6px}
|
||||
#suPips .lab{color:var(--muted);font-weight:800;font-size:12px;letter-spacing:2px;margin-right:4px}
|
||||
.su-pip{width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,.06);border:2px solid var(--line);opacity:.6}
|
||||
.su-pip.on{background:var(--teal);border-color:var(--teal);opacity:1}
|
||||
.su-pip.gold{background:var(--gold);border-color:var(--gold);opacity:1}
|
||||
#suConnect{margin:16px auto 6px;display:block}
|
||||
#suMe{display:none;border:2px solid var(--teal);border-radius:12px;padding:12px 18px;margin:14px auto 6px;max-width:640px;font-size:15px;line-height:1.6;text-align:center}
|
||||
#suMe b{color:var(--gold)}
|
||||
#suErr{display:none;color:#f0a05a;text-align:center;margin:10px auto;max-width:640px;font-size:14px}
|
||||
.su-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:14px;margin-top:26px}
|
||||
.su-tile{background:var(--card,#0d2236);border:1px solid var(--line,#24425d);border-radius:14px;padding:16px 18px;position:relative;
|
||||
display:flex;flex-direction:column;gap:6px;min-height:150px;transition:border-color .2s}
|
||||
.su-tile .ico{font-size:26px;line-height:1}
|
||||
.su-tile h3{font-size:16.5px;margin:2px 0 0}
|
||||
.su-tile p{font-size:13px;color:var(--muted);line-height:1.5;margin:0;flex:1}
|
||||
.su-tile .badge{position:absolute;top:12px;right:12px;font-size:10px;font-weight:800;letter-spacing:.08em;
|
||||
border-radius:999px;padding:2px 9px;border:1px solid var(--line);color:var(--muted)}
|
||||
.su-tile.open{border-color:rgba(78,214,203,.55)}
|
||||
.su-tile.open .badge{border-color:var(--teal);color:var(--teal)}
|
||||
.su-tile.locked{opacity:.62}
|
||||
.su-tile.locked .badge{border-color:var(--gold);color:var(--gold)}
|
||||
.su-tile a.go{color:var(--teal);font-weight:700;font-size:13.5px;text-decoration:none;margin-top:4px}
|
||||
.su-tile .dev{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--muted);border:1px dashed var(--line);border-radius:999px;padding:2px 9px;align-self:flex-start}
|
||||
.su-lvhead{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin-top:10px}
|
||||
.su-lvhead .n{font-family:Georgia,serif;font-weight:700;color:var(--gold);font-size:20px}
|
||||
.su-lvhead .nm{font-weight:800;letter-spacing:.12em;font-size:12.5px;color:var(--muted);text-transform:uppercase}
|
||||
.su-lvhead .rule{flex:1;height:1px;background:var(--line)}
|
||||
.su-foot{margin-top:34px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);line-height:1.6;text-align:center}
|
||||
</style></head>
|
||||
<body>
|
||||
<header class="wrap nav"><a class="brand" href="/"><img class="brand-mark" src="/logo.jpg" alt="The RM Circle" width="42" height="42"><span><span id="brandName">RM Circle</span><small>The Circle Suite</small></span></a><div class="nav-actions"><a class="btn btn-secondary hide-mobile" href="/tools">Promo Tools</a><a class="btn btn-primary" href="/my">My Dashboard</a></div></header>
|
||||
<main class="su-wrap">
|
||||
<div class="su-hero">
|
||||
<div class="eyebrow" style="color:var(--gold)">THE PRODUCT · YOUR POSITION IS YOUR LICENSE</div>
|
||||
<h1>The Circle <span class="gold">Suite.</span></h1>
|
||||
<p>Every paid position on our team is a license to this toolkit. Connect the wallet that holds your position — one free signature, it can't move funds — and your level lights up your tools. Each upgrade extends your license, automatically, straight from the contract.</p>
|
||||
<div id="suPips"><span class="lab">YOUR LEVEL</span></div>
|
||||
<button id="suConnect" class="btn btn-primary">🔑 Connect wallet — light up my tools</button>
|
||||
<div id="suMe"></div>
|
||||
<div id="suErr"></div>
|
||||
</div>
|
||||
<div id="suGrid" class="su-grid"></div>
|
||||
<div class="su-foot">The Suite is included with team membership — never sold separately, never an extra cost. Tools marked "in development" ship in the order the team builds them; only what you can click today is promised today. Independent team resource · No income is guaranteed · Cryptocurrency involves risk. <a href="/how-pay-works#exact-costs" style="color:var(--teal)">Level costs, straight from the contract →</a></div>
|
||||
</main>
|
||||
<script src="/rmc-wallet.js"></script>
|
||||
<script src="/suite.js"></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>
|
||||
Reference in New Issue
Block a user