Printable flyers feature: 4 colorful personalized flyer designs with member QR + tear-off tabs for offline promotion; /flyers route, tools + dashboard links, chatbot + AI prompt synced

This commit is contained in:
martbost
2026-08-26 16:55:50 -05:00
parent 4b53dd5326
commit df5f94573e
7 changed files with 148 additions and 3 deletions
+2
View File
@@ -51,6 +51,8 @@
a:()=>`"No money" is usually one of three things — sort it first. (1) Most often it means "this sounds expensive/complicated": entry is ${pol()} POL${usd()||" — a small one-time amount"} — payable with a regular debit card right on the <a href="/join-now">join page</a>. (2) Sometimes it's a priority thing: send the "Pocket Change" video from <a href="/tools">Promo Tools</a> and let it do the talking. (3) If they're genuinely broke: tell them honestly "don't join yet" — never rent money, never money they can't afford to lose. Ask "when's payday?" and follow up then — their invite link doesn't expire and the team keeps building publicly while they wait. One hard rule: never pay someone's entry for them.`},
{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.`},
{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'],
+59
View File
@@ -0,0 +1,59 @@
<!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="Printable RM Circle flyers with your personal QR code and tear-off tabs — for bulletin boards, coffee shops, and belly-to-belly sharing."><title>Printable Flyers | RM Circle Team Build</title><link rel="icon" type="image/png" href="/favicon.png"><link rel="stylesheet" href="/styles.css">
<style>
.flw{max-width:920px;margin:0 auto;padding:20px 16px 70px}
.fl-id{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0 8px}
.fl-id input{background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:9px 12px;font-size:15px;max-width:150px}
/* a flyer = one letter page (8.5x11 -> ratio) */
.fl{position:relative;background:#fff;color:#10151b;border-radius:14px;overflow:hidden;margin:0 auto 30px;
width:100%;max-width:680px;aspect-ratio:8.5/11;box-shadow:0 10px 30px rgba(0,0,0,.35);display:flex;flex-direction:column;font-family:Inter,system-ui,sans-serif}
.fl-hd{padding:22px 30px 16px;color:#fff;position:relative}
.fl-ring{position:absolute;top:20px;right:26px;width:64px;height:64px;border:4px solid #f3be43;border-radius:50%;display:flex;align-items:center;justify-content:center}
.fl-ring span{font-family:Georgia,serif;font-weight:700;font-size:26px;color:#f3be43}
.fl-eye{font-weight:800;letter-spacing:3px;font-size:12px;opacity:.85}
.fl-brand{font-weight:900;font-size:22px;margin-top:2px;letter-spacing:.5px}
.fl-body{flex:1;padding:20px 30px 8px;display:flex;flex-direction:column}
.fl-body h2{font-size:34px;line-height:1.08;font-weight:900;margin:0 0 10px;letter-spacing:-.5px}
.fl-body .pitch{font-size:16px;line-height:1.5;color:#26313d;margin:0 0 auto}
.fl-scan{display:flex;gap:18px;align-items:center;margin:16px 0 8px}
.fl-qr{background:#fff;border:2px solid #10151b;border-radius:10px;padding:7px;width:150px;height:150px;flex:0 0 auto;line-height:0}
.fl-qr svg{width:100%;height:100%}
.fl-scan .si{font-size:15px;line-height:1.4}
.fl-scan .si b{font-size:19px;display:block;word-break:break-all}
.fl-scan .si .sm{color:#556}
.fl-disc{font-size:10.5px;color:#667;line-height:1.4;margin:8px 0 0}
/* tear-off tabs */
.fl-tabs{display:flex;border-top:2px dashed #99a;background:#fff}
.fl-tab{flex:1;border-left:1px dashed #bcc;padding:8px 0 10px;text-align:center;writing-mode:vertical-rl;transform:rotate(180deg);
font-size:10px;font-weight:700;color:#10151b;letter-spacing:.3px;min-height:120px;display:flex;align-items:center;justify-content:center}
.fl-tab:first-child{border-left:0}
.fl-tabs .sc{writing-mode:horizontal-tb;transform:none;font-size:11px}
.fl-print{position:absolute;top:10px;left:10px;z-index:5}
/* color themes */
.t-gold .fl-hd{background:linear-gradient(135deg,#1a1206,#3a2a08);}
.t-gold h2{color:#0a1622}.t-gold h2 .k{color:#c98a12}
.t-teal .fl-hd{background:linear-gradient(135deg,#062a2a,#0b3d3d)}
.t-teal h2 .k{color:#0d857c}
.t-blue .fl-hd{background:linear-gradient(135deg,#0a1633,#152a63)}
.t-blue h2 .k{color:#2947c9}
.t-navy .fl-hd{background:linear-gradient(135deg,#0b1d2e,#071421)}
.t-navy h2 .k{color:#c98a12}
@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}
.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}
}
</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>Printable Flyers</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="flw">
<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>
</main>
<script src="/qrlib.js"></script>
<script src="/flyers.js"></script>
<script src="/chat.js" defer></script>
<script src="/translate.js" defer></script><script src="/tg-app.js" defer></script></body></html>
+78
View File
@@ -0,0 +1,78 @@
// Printable RM Circle flyers, personalized to the member. Each flyer's QR + the
// tear-off tabs carry /join/<id> (angle-matched per flyer). Reuses qrlib.js.
(function () {
'use strict';
var FLYERS = [
{ angle: 'pocket', theme: 't-gold', eye: 'PAYS PERSON-TO-PERSON · 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 — no sign-up, no pressure, just the math.' },
{ angle: 'two', theme: 't-teal', eye: 'A CRYPTO TEAM BUILD · POLYGON',
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. Scan to see exactly how it works.' },
{ angle: 'phone', theme: 't-blue', 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. Scan and see for yourself.' },
{ angle: 'graveyard', theme: 't-navy', eye: 'AUTONOMOUS · IMMUTABLE · POLYGON',
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 company, no owner who can pull the plug and take your momentum with them. Scan to look inside.' }
];
var TABS = 8;
function getId() {
var q = new URLSearchParams(location.search).get('id');
if (q && /^\d{1,15}$/.test(q)) return q;
var inp = document.getElementById('flIdInput');
if (inp && /^\d{1,15}$/.test(inp.value)) return inp.value;
try { var s = localStorage.getItem('ctb.myId') || localStorage.getItem('rmc.toolsId'); if (s && /^\d{1,15}$/.test(s)) return s; } catch (e) {}
return '';
}
function qrSvg(url) {
try { var q = qrcode(0, 'M'); q.addData(url); q.make(); return q.createSvgTag({ cellSize: 4, margin: 2, scalable: true }); } catch (e) { return ''; }
}
function el(tag, cls, html) { var d = document.createElement(tag); if (cls) d.className = cls; if (html != null) d.innerHTML = html; return d; }
function build(id) {
var host = document.getElementById('flyers');
host.innerHTML = '';
var haveId = /^\d{1,15}$/.test(id);
var idLabel = haveId ? id : '____';
FLYERS.forEach(function (f) {
var url = 'https://rmcircle.team/join/' + (haveId ? id : '') + (f.angle ? '?v=' + f.angle : '');
var shortUrl = 'rmcircle.team/join/' + idLabel;
var card = el('div', 'fl ' + f.theme);
var pr = el('button', 'fl-print btn btn-teal btn-sm', '🖨 Print this flyer');
card.appendChild(pr);
card.appendChild(el('div', 'fl-hd', '<div class="fl-ring"><span>RM</span></div><div class="fl-eye">' + f.eye + '</div><div class="fl-brand">THE RM CIRCLE</div>'));
var body = el('div', 'fl-body',
'<h2>' + f.h + '</h2><p class="pitch">' + f.pitch + '</p>' +
'<div class="fl-scan"><div class="fl-qr">' + (haveId ? qrSvg(url) : '') + '</div>' +
'<div class="si"><span class="sm">Scan with your phone camera 📷</span><b>' + shortUrl + '</b><span class="sm">Then take the 2-minute tour.</span></div></div>' +
'<p class="fl-disc">Independent team resource. Participation takes real effort and involves cryptocurrency risk. No income is guaranteed. Learn more at rmcircle.team.</p>');
card.appendChild(body);
var tabs = el('div', 'fl-tabs');
for (var i = 0; i < TABS; i++) tabs.appendChild(el('div', 'fl-tab', '✂ ' + shortUrl));
card.appendChild(tabs);
pr.addEventListener('click', function () {
document.body.classList.add('print-one'); card.classList.add('printing');
window.print();
setTimeout(function () { document.body.classList.remove('print-one'); card.classList.remove('printing'); }, 400);
});
host.appendChild(card);
});
if (!haveId) {
var note = el('p', 'micro', 'Enter your member ID above to fill in your QR codes and links. (Blank flyers still print if you want to write the link by hand.)');
note.style.cssText = 'color:var(--gold);text-align:center;margin:-14px 0 20px';
host.insertBefore(note, host.firstChild);
}
}
var input = document.getElementById('flIdInput');
var initial = getId();
if (input && initial) input.value = initial;
build(initial);
if (input) input.addEventListener('input', function () {
var v = input.value.replace(/\D/g, '').slice(0, 15); input.value = v;
if (/^\d{1,15}$/.test(v)) { try { localStorage.setItem('rmc.toolsId', v); } catch (e) {} }
build(v);
});
})();
+1 -1
View File
@@ -22,7 +22,7 @@
<div id="dCoachCard" class="table-card" style="margin-bottom:18px;display:none;border-color:rgba(240,197,109,.35)"><h2 style="margin:0 0 4px">Coach your team</h2><p style="color:var(--muted);font-size:13px;margin:0 0 12px">The fastest way to grow your own income is helping the people below you take their next step. Here's who in <em>your</em> team could use a nudge today — updated live from the blockchain.</p><div id="dCoach"></div></div>
<div class="table-card" style="margin-bottom:18px;border-color:rgba(120,160,255,.35)"><h2 style="margin:0 0 4px">Messages <span id="msgBell" class="hidden" style="font-size:14px;background:var(--gold);color:#132;border-radius:20px;padding:2px 10px;vertical-align:middle;font-weight:800">🔔 0</span></h2><p style="color:var(--muted);font-size:13px;margin:0 0 12px">Wallet-verified messaging along your matrix lines — your upline and your team can reach you here, and you can reach them. No email needed; your wallet is your identity. <span class="micro">Messages are member-to-member; the team admin can review them for abuse.</span></p><div id="dMsg"><div class="empty">Loading…</div></div></div>
<div class="table-card" style="margin-bottom:18px;border-color:rgba(78,214,203,.35)"><h2 style="margin:0 0 4px">Email me my alerts</h2><p style="color:var(--muted);font-size:13px;margin:0 0 12px">Get an email the moment this position is <strong>paid</strong>, and when it <strong>needs an upgrade</strong> to catch incoming pay — so you never miss one. Opt in with your email; unsubscribe anytime.</p><div id="dAlerts"></div></div>
<div class="table-card" style="margin-bottom:18px;border-color:rgba(240,197,109,.45)"><h2 style="margin:0 0 4px">Share this position</h2><div id="dShare"></div><a class="btn btn-primary" href="/tools" style="display:block;text-align:center;margin-top:14px;padding:14px 18px;font-size:16px;font-weight:800">🎬 Get Your Promo Tools — posts, swipes, videos &amp; banners →</a><a class="btn btn-secondary" href="/fast-start" style="display:block;text-align:center;margin-top:8px">🖨️ Print your 48-Hour Fast Start sheet</a><a class="btn btn-secondary" href="/weekly-rhythm" style="display:block;text-align:center;margin-top:8px">🔁 Print your Weekly Rhythm sheet</a><p class="micro" style="text-align:center;margin:8px 0 0">Ready-made content to share with your invite link — no writing needed.</p></div>
<div class="table-card" style="margin-bottom:18px;border-color:rgba(240,197,109,.45)"><h2 style="margin:0 0 4px">Share this position</h2><div id="dShare"></div><a class="btn btn-primary" href="/tools" style="display:block;text-align:center;margin-top:14px;padding:14px 18px;font-size:16px;font-weight:800">🎬 Get Your Promo Tools — posts, swipes, videos &amp; banners →</a><a class="btn btn-secondary" href="/fast-start" style="display:block;text-align:center;margin-top:8px">🖨️ Print your 48-Hour Fast Start sheet</a><a class="btn btn-secondary" href="/weekly-rhythm" style="display:block;text-align:center;margin-top:8px">🔁 Print your Weekly Rhythm sheet</a><a class="btn btn-secondary" href="/flyers" style="display:block;text-align:center;margin-top:8px">🪧 Print flyers with your QR code</a><p class="micro" style="text-align:center;margin:8px 0 0">Ready-made content to share with your invite link — no writing needed.</p></div>
<div class="table-card" style="margin-bottom:18px;border-color:var(--gold)"><h2 style="margin:0 0 4px">Just joined under this position?</h2><p style="color:var(--muted);font-size:13px;margin:0 0 12px">Welcome to the team! Enter the <strong>new member ID</strong> the RM Circle dApp gave you — we'll verify it on the blockchain and let the team know you're in.</p><form id="dJoinForm" style="display:grid;gap:8px;max-width:480px"><input name="newId" class="input" inputmode="numeric" pattern="[0-9]{1,10}" maxlength="10" placeholder="Your NEW RM Circle ID (numbers only)" required><input name="memberName" class="input" maxlength="60" placeholder="Your name or Telegram @handle" required><button class="btn btn-primary">Submit My ID →</button></form><div id="dJoinMsg" style="margin-top:10px;font-size:14px"></div></div>
<div class="table-card" style="margin-bottom:18px"><h2 style="margin:0 0 4px">Payments received</h2><p style="color:var(--muted);font-size:13px;margin:0 0 10px">Every payment your position has received, straight from the smart contract.</p><div id="dIncome"></div></div>
<div class="table-card"><h2 style="margin:0 0 4px">Your lineage</h2><p id="dLineage" style="color:var(--muted);font-size:14px;line-height:1.8;margin:8px 0 0"></p></div>
+1
View File
@@ -116,6 +116,7 @@
document.querySelectorAll('a[href="/tools"]').forEach(function(a){a.href='/tools?id='+d.id;});
document.querySelectorAll('a[href="/fast-start"]').forEach(function(a){a.href='/fast-start?id='+d.id;});
document.querySelectorAll('a[href="/weekly-rhythm"]').forEach(function(a){a.href='/weekly-rhythm?id='+d.id;});
document.querySelectorAll('a[href="/flyers"]').forEach(function(a){a.href='/flyers?id='+d.id;});
const qb=document.getElementById('dQualified');
if(qb)qb.outerHTML=d.directCount>=2
?'<span id="dQualified" class="q-badge q-yes">★ Qualified</span>'
+5
View File
@@ -15,6 +15,7 @@
<a class="btn btn-secondary btn-sm" href="#social-posts">📣 Social posts</a>
<a class="btn btn-secondary btn-sm" href="#email-swipes">✉️ Email swipes</a>
<a class="btn btn-secondary btn-sm" href="#banners">🖼️ Banners</a>
<a class="btn btn-secondary btn-sm" href="#flyers">🪧 Printable flyers</a>
<a class="btn btn-secondary btn-sm" href="#official-media">🏢 Official media</a>
<a class="btn btn-secondary btn-sm" href="#objections">💬 Objections</a>
</div>
@@ -380,6 +381,10 @@ Watch the short training, look at the live payment feed, then ask me anything.
<div class="tool-card"><div class="tool-head"><div><div class="eyebrow" style="color:var(--gold)">Graphic · NEW</div><h3>The napkin — the whole Method in one image</h3><p>Get your 2, help your 2 get theirs, teach them to do the same — sketched over coffee. Post it with your invite link; it starts more conversations than any banner.</p></div><button class="btn btn-teal btn-sm copy-btn" data-copy="https://rmcircle.team/v/rmc-napkin.jpg">Copy link</button></div><img src="/v/rmc-napkin.jpg" alt="The Circle Method napkin" style="display:block;width:100%;border-radius:14px;margin-top:12px"></div>
<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>
<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>
<style>