Half-sheet handouts on /flyers: 5 vibrant angle designs (pocket, two, phone, graveyard, stop-waiting), 2 per letter page with cut line, personalized QR + angle-matched links; chatbot + AI prompt + tools card synced

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-08-27 07:31:40 -05:00
parent 3a877add05
commit 3761fab3c6
5 changed files with 110 additions and 5 deletions
@@ -52,7 +52,7 @@
    {k:['fast start','checklist','printable','print','48 hour','48-hour','getting started sheet'],
     a:()=>`Grab the <a href="/fast-start">48-Hour Fast Start sheet</a> — a printable one-page checklist for your first two days. Open it from YOUR dashboard and it comes pre-filled with your invite link and a scannable QR code, then hit the print button (it prints clean black-on-white, in whatever language you've picked with the 🌐 button).`},
    {k:['flyer','flyers','poster','posters','bulletin board','coffee shop','put up','print flyer','offline','belly to belly','belly-to-belly','tear off','tear-off','qr code flyer','gym','laundromat'],
-     a:()=>`Yes — there's a <a href="/flyers">Printable Flyers</a> maker (also linked on your dashboard and the <a href="/tools">Promo Tools</a> page under "🪧 Printable flyers"). Enter your ID once and you get four colorful full-page flyer designs, each with YOUR personal QR code, your invite link, and tear-off tabs people can grab and take with them. Print in color for impact or black-and-white to save ink — the QR scans either way. Great for coffee shops, gyms, community and church bulletin boards, laundromats — old-school belly-to-belly still works.`},
+     a:()=>`Yes — there's a <a href="/flyers">Printable Flyers</a> maker (also linked on your dashboard and the <a href="/tools">Promo Tools</a> page under "🪧 Printable flyers"). Enter your ID once and everything personalizes with YOUR QR code and invite link. You get two formats: four colorful full-page flyers with tear-off tabs people can grab and take with them, plus five bold half-sheet handouts (one per angle — pocket change, two people, phone, side-hustle graveyard, stop waiting) that print TWO copies per page with a cut line — print, cut, and you've got a stack to hand out or leave anywhere. Print in color for impact or black-and-white to save ink — the QR scans either way. Great for coffee shops, gyms, community and church bulletin boards, laundromats — old-school belly-to-belly still works.`},
    {k:['translate','translation','language','español','espanol','spanish','french','portuguese','not in english','other language'],
     a:()=>`Tap the 🌐 Translate button in the bottom-left corner of any page — pick your language once and every page stays translated while you browse. Your phone's browser also usually offers its own "Translate page" option. And you can type to me here in ANY language — I'll answer in yours.`},
    {k:['how many people','team size','organization size','org size','how big is my team','total team','people in my team','members below'],
@@ -37,13 +37,57 @@
  .t-blue h2 .k{color:#2947c9}
  .t-navy .fl-hd{background:linear-gradient(135deg,#0b1d2e,#071421)}
  .t-navy h2 .k{color:#c98a12}
+  /* ---- half-sheet handouts (2 per letter page, cut in half) ---- */
+  .hs-page{margin:0 auto 26px;max-width:680px}
+  .hs{position:relative;aspect-ratio:8.5/5.5;border-radius:14px;overflow:hidden;color:#fff;display:flex;flex-direction:column;
+    box-shadow:0 10px 30px rgba(0,0,0,.35);font-family:Inter,system-ui,sans-serif;
+    -webkit-print-color-adjust:exact;print-color-adjust:exact}
+  .hs-top{display:flex;align-items:center;gap:10px;padding:14px 22px 0}
+  .hs-ring{width:34px;height:34px;border:3px solid #f3be43;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
+  .hs-ring span{font-family:Georgia,serif;font-weight:700;font-size:13px;color:#f3be43}
+  .hs-brand{font-weight:900;font-size:13px;letter-spacing:1.5px}
+  .hs-eye{margin-left:auto;font-weight:800;font-size:9.5px;letter-spacing:2px;opacity:.85;text-align:right}
+  .hs-main{flex:1;display:flex;gap:16px;padding:8px 22px 10px;align-items:center}
+  .hs-left{flex:1;min-width:0}
+  .hs-left h2{font-size:29px;line-height:1.04;font-weight:900;margin:0 0 8px;letter-spacing:-.5px;text-transform:uppercase}
+  .hs-left h2 .k{-webkit-text-fill-color:currentColor}
+  .hs-left .pitch{font-size:12px;line-height:1.45;margin:0 0 10px;opacity:.92}
+  .hs-chips{display:flex;flex-wrap:wrap;gap:6px}
+  .hs-chip{font-size:9.5px;font-weight:800;letter-spacing:.6px;padding:4px 9px;border-radius:999px;border:1.5px solid rgba(255,255,255,.55);background:rgba(0,0,0,.25)}
+  .hs-chip.gold{border-color:#f3be43;color:#ffd977}
+  .hs-qrbox{flex:0 0 auto;background:#fff;border-radius:12px;padding:10px 12px 8px;text-align:center;color:#10151b;box-shadow:0 4px 14px rgba(0,0,0,.35)}
+  .hs-qrbox .q{width:118px;height:118px;line-height:0;margin:0 auto}
+  .hs-qrbox .q svg{width:100%;height:100%}
+  .hs-qrbox .scan{font-size:9.5px;font-weight:800;letter-spacing:1.5px;margin-top:4px}
+  .hs-link{font-size:11px;font-weight:800;word-break:break-all;margin-top:2px}
+  .hs-foot{display:flex;align-items:center;gap:10px;padding:0 22px 10px}
+  .hs-disc{font-size:8.5px;line-height:1.35;opacity:.75}
+  .hs-print{position:absolute;top:10px;right:10px;z-index:5}
+  .hs-copy{display:none}
+  .hs-cut{display:none}
+  /* vibrant themes (match the banner kit looks) */
+  .h-volt{background:linear-gradient(120deg,#1b0733 0%,#3d0d7a 45%,#6a14b8 100%)}
+  .h-volt h2 .k{color:#ffcf3f}
+  .h-ember{background:linear-gradient(120deg,#160406 0%,#4a0a12 55%,#8a1020 100%)}
+  .h-ember h2 .k{color:#ff9d2e}
+  .h-aqua{background:linear-gradient(120deg,#02201f 0%,#04544d 55%,#0a8f7d 100%)}
+  .h-aqua h2 .k{color:#ffd977}
+  .h-royal{background:linear-gradient(120deg,#060d2b 0%,#12246e 55%,#2140c0 100%)}
+  .h-royal h2 .k{color:#68d6ff}
+  .h-noir{background:linear-gradient(120deg,#05090f 0%,#0b1d2e 60%,#14314d 100%)}
+  .h-noir h2 .k{color:#f3be43}
+  @media (max-width:560px){.hs{aspect-ratio:auto}.hs-main{flex-direction:column;align-items:stretch}.hs-qrbox{align-self:center}}
  @media print{
    @page{size:letter;margin:0}
    body{background:#fff!important}
-    header,footer,nav,.chat-fab,.chat-panel,#rmcTrBtn,#rmcTrPanel,.flw>.section-head,.fl-id,.fl-intro,.fl-print{display:none!important}
+    header,footer,nav,.chat-fab,.chat-panel,#rmcTrBtn,#rmcTrPanel,.flw>.section-head,.fl-id,.fl-intro,.fl-print,.hs-print,.hs-intro{display:none!important}
    .flw{max-width:none;padding:0;margin:0}
    .fl{box-shadow:none;border-radius:0;margin:0;max-width:none;width:100%;height:100vh;aspect-ratio:auto;page-break-after:always}
-    body.print-one .fl:not(.printing){display:none!important}
+    .hs-page{max-width:none;margin:0;height:100vh;page-break-after:always;display:flex;flex-direction:column}
+    .hs-page .hs{border-radius:0;box-shadow:none;flex:1;aspect-ratio:auto;display:flex}
+    .hs-copy{display:flex}
+    .hs-cut{display:flex;justify-content:center;align-items:center;gap:8px;border-top:2.5px dashed #98a2ad;font-size:10px;color:#667;padding:2px 0;background:#fff}
+    body.print-one .fl:not(.printing),body.print-one .hs-page:not(.printing){display:none!important}
  }
 </style></head>
 <body>
@@ -52,6 +96,8 @@
  <div class="section-head" style="max-width:760px"><div class="eyebrow">For the team · belly-to-belly</div><h1 style="font-size:clamp(28px,5vw,42px);margin:8px 0 8px">Printable <span class="gold">Flyers.</span></h1><p class="fl-intro">Old-school still works. Print these, put them up — coffee shops, gyms, community boards, laundromats — and let the QR do the talking. Each flyer carries <strong style="color:var(--text)">your</strong> invite link and QR, plus tear-off tabs people can take with them. Enter your ID and every flyer personalizes to you.</p></div>
  <div class="fl-id"><label style="font-weight:700">Your member ID:</label><input id="flIdInput" inputmode="numeric" placeholder="e.g. 21"><span class="micro" style="color:var(--muted)">Tip: print in color for impact, or black-and-white to save ink — the QR scans either way.</span></div>
  <div id="flyers"></div>
+  <div class="section-head hs-intro" style="max-width:760px;margin-top:34px"><div class="eyebrow" style="color:var(--gold)">NEW · Half-sheet handouts</div><h2 style="font-size:clamp(24px,4vw,34px);margin:8px 0 8px">Bold <span class="gold">Handouts.</span> Two per page.</h2><p class="fl-intro">Full-color designs with the same energy as the team banners — one for every angle. Each prints <strong style="color:var(--text)">two copies on a single letter page</strong> with a cut line down the middle: print, cut, and you've got a stack of handouts to leave anywhere. Your QR and link are on every one.</p></div>
+  <div id="halfsheets"></div>
 </main>
 <script src="/qrlib.js"></script>
 <script src="/flyers.js"></script>
@@ -18,6 +18,31 @@
  ];
  var TABS = 8;

+  // Half-sheet handouts: 2 copies per letter page with a cut line. Vibrant
+  // themes echo the banner kit. Copy mirrors the approved full-page flyers.
+  var HALF = [
+    { angle: 'pocket', theme: 'h-volt', eye: 'TEAM BUILD · ON POLYGON',
+      h: 'You Already <span class="k">Found the Money.</span>',
+      pitch: 'The pocket change that slips through your fingers every week could be starting something instead. Scan for the 90-second look.',
+      chips: ['ONLY 2 TO QUALIFY', 'SPILLOVER HELPS YOU', 'PAID IN SECONDS'] },
+    { angle: 'two', theme: 'h-aqua', eye: 'A CRYPTO TEAM BUILD',
+      h: 'You Know <span class="k">Two People.</span> That’s All This Takes.',
+      pitch: 'No big network. Nothing to sell. Get two, help them get theirs, and payments roll up to you on-chain as your team grows.',
+      chips: ['GET YOUR 2', 'HELP THEM GET THEIRS', 'ON-CHAIN · VERIFIABLE'] },
+    { angle: 'phone', theme: 'h-royal', eye: 'ON-CHAIN · NO MIDDLEMAN',
+      h: 'Your Phone Could <span class="k">Start Paying You.</span>',
+      pitch: 'The device in your hand is the only tool this needs. A public smart contract on Polygon pays people directly — no company holding the money.',
+      chips: ['NO LAPTOP NEEDED', 'PUBLIC SMART CONTRACT', 'PAID IN SECONDS'] },
+    { angle: 'graveyard', theme: 'h-noir', eye: 'AUTONOMOUS · IMMUTABLE',
+      h: 'Tired of Side Hustles <span class="k">That Die?</span>',
+      pitch: 'This one can’t be shut off. It runs on a public, immutable smart contract — no owner who can pull the plug and take your momentum with them.',
+      chips: ['NO PLUG TO PULL', 'IMMUTABLE CONTRACT', 'RUNS ON POLYGON'] },
+    { angle: '', theme: 'h-ember', eye: 'VERIFY IT YOURSELF · POLYGON',
+      h: 'Stop <span class="k">Waiting.</span> Start <span class="k">Receiving.</span>',
+      pitch: 'Still researching? The whole system is public code you can check before you ever put in a cent. Due diligence takes an evening, not a year.',
+      chips: ['ONLY 2 TO QUALIFY', 'VERIFY BEFORE YOU JOIN', 'PAID IN SECONDS'] }
+  ];
+
  function getId() {
    var q = new URLSearchParams(location.search).get('id');
    if (q && /^\d{1,15}$/.test(q)) return q;
@@ -64,6 +89,40 @@
      note.style.cssText = 'color:var(--gold);text-align:center;margin:-14px 0 20px';
      host.insertBefore(note, host.firstChild);
    }
+    buildHalf(id);
+  }
+
+  function halfSheetHtml(f, url, shortUrl, haveId) {
+    return '<div class="hs-top"><div class="hs-ring"><span>RM</span></div><div class="hs-brand">THE RM CIRCLE</div><div class="hs-eye">' + f.eye + '</div></div>' +
+      '<div class="hs-main"><div class="hs-left"><h2>' + f.h + '</h2><p class="pitch">' + f.pitch + '</p>' +
+      '<div class="hs-chips">' + f.chips.map(function (c, i) { return '<span class="hs-chip' + (i === 0 ? ' gold' : '') + '">' + c + '</span>'; }).join('') + '</div></div>' +
+      '<div class="hs-qrbox"><div class="q">' + (haveId ? qrSvg(url) : '') + '</div><div class="scan">SCAN ME 📷</div><div class="hs-link">' + shortUrl + '</div></div></div>' +
+      '<div class="hs-foot"><p class="hs-disc">Independent team resource. Participation takes real effort and involves cryptocurrency risk. No income is guaranteed. Learn more at rmcircle.team.</p></div>';
+  }
+
+  function buildHalf(id) {
+    var host = document.getElementById('halfsheets');
+    if (!host) return;
+    host.innerHTML = '';
+    var haveId = /^\d{1,15}$/.test(id);
+    var idLabel = haveId ? id : '____';
+    HALF.forEach(function (f) {
+      var url = 'https://rmcircle.team/join/' + (haveId ? id : '') + (f.angle ? '?v=' + f.angle : '');
+      var shortUrl = 'rmcircle.team/join/' + idLabel;
+      var page = el('div', 'hs-page');
+      var card = el('div', 'hs ' + f.theme, halfSheetHtml(f, url, shortUrl, haveId));
+      var pr = el('button', 'hs-print btn btn-teal btn-sm', '🖨 Print (2 per page)');
+      card.appendChild(pr);
+      page.appendChild(card);
+      page.appendChild(el('div', 'hs-cut', '✂ &nbsp;cut here&nbsp; ✂'));
+      page.appendChild(el('div', 'hs hs-copy ' + f.theme, halfSheetHtml(f, url, shortUrl, haveId)));
+      pr.addEventListener('click', function () {
+        document.body.classList.add('print-one'); page.classList.add('printing');
+        window.print();
+        setTimeout(function () { document.body.classList.remove('print-one'); page.classList.remove('printing'); }, 400);
+      });
+      host.appendChild(page);
+    });
  }

  var input = document.getElementById('flIdInput');
@@ -383,7 +383,7 @@ Watch the short training, look at the live payment feed, then ask me anything.

 <h2 id="flyers" style="font-size:30px;margin:38px 0 6px;scroll-margin-top:16px">🪧 Printable flyers</h2>
 <p style="color:var(--muted);margin:0 0 14px">Old-school still works. Print these, put them up — coffee shops, gyms, community boards, church bulletin boards, laundromats — and let the QR do the talking. Four colorful designs, each with tear-off tabs and <strong style="color:var(--text)">your</strong> personal QR + invite link baked in.</p>
-<div class="tool-card"><div class="tool-head"><div><div class="eyebrow" style="color:var(--gold)">Belly-to-belly · NEW</div><h3>Personalized flyers you can print &amp; post</h3><p>Enter your ID once and every flyer fills in with your QR code and link. Print in color for impact or black-and-white to save ink — the QR scans either way. Each page has tear-off tabs so people can grab your link and take it with them.</p></div><a class="btn btn-teal btn-sm" href="/flyers">Open flyer maker →</a></div></div>
+<div class="tool-card"><div class="tool-head"><div><div class="eyebrow" style="color:var(--gold)">Belly-to-belly · NEW</div><h3>Personalized flyers &amp; handouts you can print</h3><p>Enter your ID once and everything fills in with your QR code and link. Full-page flyers with tear-off tabs for bulletin boards, plus bold half-sheet handouts — one per angle — that print two per page with a cut line: print, cut, and hand out a stack. Color for impact or black-and-white to save ink — the QR scans either way.</p></div><a class="btn btn-teal btn-sm" href="/flyers">Open flyer maker →</a></div></div>

 <h2 id="official-media" style="font-size:30px;margin:38px 0 6px;scroll-margin-top:16px">🏢 Official RM Circle media</h2>
 <p style="color:var(--muted);margin:0 0 14px">Provided by the RM Circle creators — ready-made social videos and graphics. Copy a link (or right-click to save), post it, and put <strong style="color:var(--text)">your invite link</strong> in the caption or description so clicks land in your team.</p>