rm-circle-team-router/public/flyers.js

// Printable RM Circle handouts, personalized to the member. Detailed AI
// artwork backgrounds (headline baked into the art) + a live DOM overlay
// carrying the member's QR and angle-matched /join/<id> link (via qrlib.js).
// Each design prints 2 copies per letter page with a cut line.
(function () {
  'use strict';
  var HALF = [
    { angle: 'pocket', img: '/handout-pocket.jpg' },
    { angle: 'two', img: '/handout-two.jpg' },
    { angle: 'phone', img: '/handout-phone.jpg' },
    { angle: 'graveyard', img: '/handout-graveyard.jpg' },
    { angle: 'stopwaiting', img: '/handout-stop-waiting.jpg' }
  ];

  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('halfsheets');
    if (!host) return;
    host.innerHTML = '';
    var haveId = /^\d{1,15}$/.test(id);
    var idLabel = haveId ? id : '____';

    function overlayHtml(url, shortUrl) {
      var qr = haveId ? qrSvg(url) : '<div class="qph"></div>';
      return '<div class="hs-qrov"><div class="q">' + qr + '</div>' +
        '<div class="scan">SCAN ME</div><div class="lnk">' + shortUrl + '</div></div>' +
        '<div class="hs-discov">Independent team resource. Participation takes real effort and involves cryptocurrency risk. No income is guaranteed. Learn more at rmcircle.team.</div>';
    }
    function makeCard(f, url, shortUrl, extraCls) {
      var card = el('div', 'hs' + (extraCls ? ' ' + extraCls : ''), overlayHtml(url, shortUrl));
      card.style.backgroundImage = 'url(' + f.img + ')';
      return card;
    }

    if (!haveId) {
      var note = el('p', 'micro', 'Enter your member ID above to fill in your QR codes and links. (Blank handouts still print if you want to write the link by hand.)');
      note.style.cssText = 'color:var(--gold);text-align:center;margin:0 0 20px';
      host.appendChild(note);
    }

    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 = makeCard(f, url, shortUrl, '');
      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(makeCard(f, url, shortUrl, 'hs-copy'));
      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');
  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);
  });
})();