Fix join card centering, add video posters, https:// in swipes

- join.html: center the sponsor "invCard" (margin 20px auto) - tools.html: add poster to explainer clip (was black), replace combined's mismatched poster with its own brand frame (rmc-*-poster.jpg from the videos) - tools.html: prefix bare rmcircle.team with https:// in social posts + swipes so links are clickable in email clients that don't auto-linkify Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-08-16 06:29:05 -05:00
parent 21bd77c07c
commit 791ef721ef
4 changed files with 12 additions and 12 deletions
@@ -6,7 +6,7 @@
 <main>

 <section class="hero wrap" style="padding-bottom:12px"><div class="eyebrow">Personal invitation</div><h1>You've been invited by<br><span class="gold">Member <span id="invId">#—</span>.</span></h1><p id="invSub">This page is their real position on the team — every number on it is read live from the blockchain.</p>
-<div id="invCard" class="table-card" style="max-width:680px;margin:20px 0 6px"><div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap"><h2 style="margin:0">Your sponsor's position <span class="live-badge" style="vertical-align:middle;margin-left:6px"><span class="dot"></span> Verified on-chain</span></h2><span id="invQualified"></span></div><div id="invFacts" class="facts" style="grid-template-columns:repeat(3,1fr);margin:14px 0 0"><div class="empty" style="grid-column:1/-1">Reading the blockchain…</div></div><div id="invQualNote"></div></div>
+<div id="invCard" class="table-card" style="max-width:680px;margin:20px auto 6px"><div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap"><h2 style="margin:0">Your sponsor's position <span class="live-badge" style="vertical-align:middle;margin-left:6px"><span class="dot"></span> Verified on-chain</span></h2><span id="invQualified"></span></div><div id="invFacts" class="facts" style="grid-template-columns:repeat(3,1fr);margin:14px 0 0"><div class="empty" style="grid-column:1/-1">Reading the blockchain…</div></div><div id="invQualNote"></div></div>
 <div class="hero-actions" style="margin-top:18px"><a class="btn btn-primary" href="#join">Join Under <span id="invIdBtn">This Member</span> →</a><a class="btn btn-secondary" href="#strategy">See the Strategy First</a></div>
 <div class="micro">Independent team training resource • Participation involves risk • No income is guaranteed</div></section>

@@ -10,15 +10,15 @@
 <h2 style="font-size:30px;margin:26px 0 14px">🎬 Video clips</h2>
 <p style="color:var(--muted);margin:0 0 18px">Send these on WhatsApp, Telegram, text, or social. Tap <strong style="color:var(--text)">Copy link</strong> to share, or right-click the video to save it.</p>

-<div class="tool-card"><div class="tool-head"><div><div class="eyebrow" style="color:var(--gold)">Flagship promo · ~66s</div><h3>The RM Circle — team build overview</h3><p>Scroll of the live site + captions + the 8-level pay ladder. Best all-round invite clip.</p></div><button class="btn btn-teal btn-sm copy-btn" data-copy="https://rmcircle.team/v/rmc-combined-fe1347c964.mp4">Copy link</button></div><video class="video-frame" style="display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:14px;margin-top:12px" controls preload="none" poster="/training/how-payments-work-poster.jpg" src="/v/rmc-combined-fe1347c964.mp4"></video></div>
+<div class="tool-card"><div class="tool-head"><div><div class="eyebrow" style="color:var(--gold)">Flagship promo · ~66s</div><h3>The RM Circle — team build overview</h3><p>Scroll of the live site + captions + the 8-level pay ladder. Best all-round invite clip.</p></div><button class="btn btn-teal btn-sm copy-btn" data-copy="https://rmcircle.team/v/rmc-combined-fe1347c964.mp4">Copy link</button></div><video class="video-frame" style="display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:14px;margin-top:12px" controls preload="none" poster="/v/rmc-combined-poster.jpg" src="/v/rmc-combined-fe1347c964.mp4"></video></div>

-<div class="tool-card"><div class="tool-head"><div><div class="eyebrow" style="color:var(--gold)">Clean promo · ~66s</div><h3>The RM Circle — designed explainer</h3><p>Minimal, premium motion graphics version. Great where a calmer, "fintech" feel fits better.</p></div><button class="btn btn-teal btn-sm copy-btn" data-copy="https://rmcircle.team/v/rmc-explainer-8eff460110.mp4">Copy link</button></div><video class="video-frame" style="display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:14px;margin-top:12px" controls preload="none" src="/v/rmc-explainer-8eff460110.mp4"></video></div>
+<div class="tool-card"><div class="tool-head"><div><div class="eyebrow" style="color:var(--gold)">Clean promo · ~66s</div><h3>The RM Circle — designed explainer</h3><p>Minimal, premium motion graphics version. Great where a calmer, "fintech" feel fits better.</p></div><button class="btn btn-teal btn-sm copy-btn" data-copy="https://rmcircle.team/v/rmc-explainer-8eff460110.mp4">Copy link</button></div><video class="video-frame" style="display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:14px;margin-top:12px" controls preload="none" poster="/v/rmc-explainer-poster.jpg" src="/v/rmc-explainer-8eff460110.mp4"></video></div>

 <div class="tool-card"><div class="tool-head"><div><div class="eyebrow" style="color:var(--teal)">Teaching · ~3 min</div><h3>How payments work — direct vs pass-ups</h3><p>Send this to team members confused about payouts. Walks a real on-chain example, generation by generation.</p></div><button class="btn btn-teal btn-sm copy-btn" data-copy="https://rmcircle.team/v/rmc-how-payments-work-47533beedc.mp4">Copy link</button></div><video class="video-frame" style="display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:14px;margin-top:12px" controls preload="none" poster="/training/how-payments-work-poster.jpg" src="/v/rmc-how-payments-work-47533beedc.mp4"></video></div>

 <h2 style="font-size:30px;margin:36px 0 14px">🔗 Your invite link</h2>
 <p style="color:var(--muted);margin:0 0 14px">Enter your RM Circle ID to build your personal invite page link — it shows a live preview when shared and points people to the current join steps.</p>
-<div class="tool-card"><div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center"><input id="toolId" class="input" style="max-width:220px" placeholder="Your ID (e.g. 21)" inputmode="numeric"><span style="color:var(--muted);font-size:15px">→</span><code id="shareLink" class="share-link">https://rmcircle.team/join/…</code><button class="btn btn-teal btn-sm" id="copyShare">Copy link</button></div><p class="micro" style="margin:10px 0 0">Tip: always confirm the current sponsor on the <a href="/start" style="color:var(--teal)">Getting Started page</a> before someone buys — placements rotate. Swap <strong style="color:var(--text)">rmcircle.team</strong> for your personal link in any post below.</p></div>
+<div class="tool-card"><div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center"><input id="toolId" class="input" style="max-width:220px" placeholder="Your ID (e.g. 21)" inputmode="numeric"><span style="color:var(--muted);font-size:15px">→</span><code id="shareLink" class="share-link">https://rmcircle.team/join/…</code><button class="btn btn-teal btn-sm" id="copyShare">Copy link</button></div><p class="micro" style="margin:10px 0 0">Tip: always confirm the current sponsor on the <a href="/start" style="color:var(--teal)">Getting Started page</a> before someone buys — placements rotate. Swap <strong style="color:var(--text)">https://rmcircle.team</strong> for your personal link in any post below.</p></div>

 <h2 style="font-size:30px;margin:36px 0 14px">📣 Social posts</h2>
 <p style="color:var(--muted);margin:0 0 18px">Copy-paste ready for X/Twitter, Facebook, or anywhere. Tap <strong style="color:var(--text)">Copy</strong>, tweak a word or two so it sounds like you, and post. Swap in your personal invite link where it fits.</p>
@@ -29,36 +29,36 @@
 2) Your team upgrades below you → payments roll up to your wallet

 All of it public and verifiable on-chain. 90-second breakdown 👇
-rmcircle.team">Copy</button></div><pre class="swipe">Two ways you get paid in our crypto team build:
+https://rmcircle.team">Copy</button></div><pre class="swipe">Two ways you get paid in our crypto team build:

 1) Someone joins on your link → you keep the reward
 2) Your team upgrades below you → payments roll up to your wallet

 All of it public and verifiable on-chain. 90-second breakdown 👇
-rmcircle.team</pre></div>
+https://rmcircle.team</pre></div>

 <div class="tool-card"><div class="tool-head"><div><div class="eyebrow">Post 2 · X / Twitter · the proof angle</div><h3 style="font-size:20px">"Where's the money held? Nowhere."</h3></div><button class="btn btn-teal btn-sm copy-btn" data-copy="&quot;Where's the money held?&quot; Nowhere.

 On our team build the smart contract pays it out in the same transaction — nothing sits in a company account. Don't trust me, verify it yourself on Polygonscan. 🔗

-See how it works: rmcircle.team
+See how it works: https://rmcircle.team
 #CryptoTeamBuild #Polygon #Web3">Copy</button></div><pre class="swipe">"Where's the money held?" Nowhere.

 On our team build the smart contract pays it out in the same transaction — nothing sits in a company account. Don't trust me, verify it yourself on Polygonscan. 🔗

-See how it works: rmcircle.team
+See how it works: https://rmcircle.team
 #CryptoTeamBuild #Polygon #Web3</pre></div>

 <div class="tool-card"><div class="tool-head"><div><div class="eyebrow">Post 3 · X / Twitter · the model in one line</div><h3 style="font-size:20px">"Get your 2"</h3></div><button class="btn btn-teal btn-sm copy-btn" data-copy="Get your 2. Help your 2 get theirs. 🤝

 That's the whole model — and every payout is provable on the blockchain. No company holding the money, no changing the rules.

-rmcircle.team
+https://rmcircle.team
 #CryptoTeamBuild #TheRMCircle #Polygon">Copy</button></div><pre class="swipe">Get your 2. Help your 2 get theirs. 🤝

 That's the whole model — and every payout is provable on the blockchain. No company holding the money, no changing the rules.

-rmcircle.team
+https://rmcircle.team
 #CryptoTeamBuild #TheRMCircle #Polygon</pre></div>

 <div class="tool-card"><div class="tool-head"><div><div class="eyebrow">Post 4 · Facebook · the honest intro</div><h3 style="font-size:20px">"People keep asking me about this"</h3></div><button class="btn btn-teal btn-sm copy-btn" data-copy="People keep asking about the crypto team build I'm part of, so here's the honest version 👇
@@ -69,7 +69,7 @@ rmcircle.team

 I'm not promising anyone riches — crypto carries real risk and you should only use what you can afford to lose. But if you've wanted to build a small team with rules you can actually verify, watch the short overview and decide for yourself:

-rmcircle.team">Copy</button></div><pre class="swipe">People keep asking about the crypto team build I'm part of, so here's the honest version 👇
+https://rmcircle.team">Copy</button></div><pre class="swipe">People keep asking about the crypto team build I'm part of, so here's the honest version 👇

 • It runs on a smart contract you can read yourself — the rules can't be changed.
 • No company holds your money. Payouts happen on-chain, in seconds.
@@ -77,7 +77,7 @@ rmcircle.team">Copy</button></div><pre class="swipe">People keep asking about th

 I'm not promising anyone riches — crypto carries real risk and you should only use what you can afford to lose. But if you've wanted to build a small team with rules you can actually verify, watch the short overview and decide for yourself:

-rmcircle.team</pre></div>
+https://rmcircle.team</pre></div>

 <div class="tool-card"><div class="tool-head"><div><div class="eyebrow">Post 5 · Facebook · the direct invite</div><h3 style="font-size:20px">"If you've been curious"</h3></div><button class="btn btn-teal btn-sm copy-btn" data-copy="I'm building a team on The RM Circle — a co-op that runs entirely on-chain.