diff --git a/public/flyers.html b/public/flyers.html index 1c1d8ab..db628a9 100644 --- a/public/flyers.html +++ b/public/flyers.html @@ -37,45 +37,16 @@ .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) ---- */ + /* ---- half-sheet handouts (2 per letter page, cut in half, image-based) ---- */ .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; + .hs{position:relative;aspect-ratio:8.5/5.5;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35); + display:flex;align-items:flex-end;justify-content:flex-end;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-img-bg{background-size:cover;background-position:center} + .hs-canvas{display:block} + .hs-print{position:absolute;top:10px;right:10px;z-index:10;cursor:pointer} .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} diff --git a/public/flyers.js b/public/flyers.js index 4c2d0ab..e1074ff 100644 --- a/public/flyers.js +++ b/public/flyers.js @@ -92,35 +92,162 @@ buildHalf(id); } - function halfSheetHtml(f, url, shortUrl, haveId) { - return '
RM
THE RM CIRCLE
' + f.eye + '
' + - '

' + f.h + '

' + f.pitch + '

' + - '
' + f.chips.map(function (c, i) { return '' + c + ''; }).join('') + '
' + - '
' + (haveId ? qrSvg(url) : '') + '
SCAN ME 📷
' + shortUrl + '
' + - '

Independent team resource. Participation takes real effort and involves cryptocurrency risk. No income is guaranteed. Learn more at rmcircle.team.

'; - } - 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 imgFile = '/handout-' + (f.angle || 'stop-waiting') + '.png'; + 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)'); + var card = el('div', 'hs hs-img-bg'); + card.style.backgroundImage = 'url(' + imgFile + ')'; + card.style.backgroundSize = 'cover'; + card.style.backgroundPosition = 'center'; + card.style.position = 'relative'; + + var canvas = el('canvas'); + canvas.width = 1700; + canvas.height = 1100; + canvas.className = 'hs-canvas'; + canvas.style.position = 'absolute'; + canvas.style.top = '0'; + canvas.style.left = '0'; + canvas.style.zIndex = '1'; + card.appendChild(canvas); + + var pr = el('button', 'hs-print btn btn-teal btn-sm', 'Print (2 per page)'); + pr.style.position = 'relative'; + pr.style.zIndex = '2'; card.appendChild(pr); + + // Render QR on canvas + (function(canvas, url, shortUrl) { + var renderQr = function() { + var ctx = canvas.getContext('2d'); + if (!ctx) return; + + ctx.fillStyle = 'rgba(30, 30, 40, 0.6)'; + ctx.fillRect(1020, 550, 680, 550); + + var qrSize = 240; + var qrX = 1700 - qrSize - 40; + var qrY = 1100 - qrSize - 100; + + ctx.fillStyle = '#ffffff'; + ctx.fillRect(qrX - 10, qrY - 10, qrSize + 20, qrSize + 20); + ctx.strokeStyle = '#000'; + ctx.lineWidth = 3; + ctx.strokeRect(qrX - 10, qrY - 10, qrSize + 20, qrSize + 20); + + if (url.indexOf('join/') !== -1) { + var qrSvgStr = qrSvg(url); + if (qrSvgStr) { + var tempDiv = document.createElement('div'); + tempDiv.innerHTML = qrSvgStr; + var svg = tempDiv.querySelector('svg'); + if (svg) { + var svgData = new XMLSerializer().serializeToString(svg); + var img = new Image(); + img.onload = function() { + ctx.drawImage(img, qrX, qrY, qrSize, qrSize); + drawLink(); + }; + img.onerror = drawLink; + img.src = 'data:image/svg+xml;base64,' + btoa(svgData); + } else { drawLink(); } + } else { drawLink(); } + } else { drawLink(); } + + function drawLink() { + ctx.font = 'bold 20px Arial'; + ctx.fillStyle = '#ffffff'; + ctx.textAlign = 'center'; + ctx.shadowColor = 'rgba(0,0,0,0.8)'; + ctx.shadowBlur = 4; + ctx.shadowOffsetX = 2; + ctx.shadowOffsetY = 2; + ctx.fillText(shortUrl, 1700 - 120, 1100 - 30); + } + }; + setTimeout(renderQr, 100); + })(canvas, url, shortUrl); + page.appendChild(card); - page.appendChild(el('div', 'hs-cut', '✂  cut here  ✂')); - page.appendChild(el('div', 'hs hs-copy ' + f.theme, halfSheetHtml(f, url, shortUrl, haveId))); + page.appendChild(el('div', 'hs-cut', 'cut here')); + + var card2 = el('div', 'hs hs-img-bg hs-copy'); + card2.style.backgroundImage = 'url(' + imgFile + ')'; + card2.style.backgroundSize = 'cover'; + card2.style.backgroundPosition = 'center'; + card2.style.position = 'relative'; + var canvas2 = el('canvas'); + canvas2.width = 1700; + canvas2.height = 1100; + canvas2.style.position = 'absolute'; + canvas2.style.top = '0'; + canvas2.style.left = '0'; + card2.appendChild(canvas2); + + (function(canvas, url, shortUrl) { + var renderQr = function() { + var ctx = canvas.getContext('2d'); + if (!ctx) return; + ctx.fillStyle = 'rgba(30, 30, 40, 0.6)'; + ctx.fillRect(1020, 550, 680, 550); + var qrSize = 240; + var qrX = 1700 - qrSize - 40; + var qrY = 1100 - qrSize - 100; + ctx.fillStyle = '#ffffff'; + ctx.fillRect(qrX - 10, qrY - 10, qrSize + 20, qrSize + 20); + ctx.strokeStyle = '#000'; + ctx.lineWidth = 3; + ctx.strokeRect(qrX - 10, qrY - 10, qrSize + 20, qrSize + 20); + if (url.indexOf('join/') !== -1) { + var qrSvgStr = qrSvg(url); + if (qrSvgStr) { + var tempDiv = document.createElement('div'); + tempDiv.innerHTML = qrSvgStr; + var svg = tempDiv.querySelector('svg'); + if (svg) { + var svgData = new XMLSerializer().serializeToString(svg); + var img = new Image(); + img.onload = function() { + ctx.drawImage(img, qrX, qrY, qrSize, qrSize); + drawLink(); + }; + img.onerror = drawLink; + img.src = 'data:image/svg+xml;base64,' + btoa(svgData); + } else { drawLink(); } + } else { drawLink(); } + } else { drawLink(); } + function drawLink() { + ctx.font = 'bold 20px Arial'; + ctx.fillStyle = '#ffffff'; + ctx.textAlign = 'center'; + ctx.shadowColor = 'rgba(0,0,0,0.8)'; + ctx.shadowBlur = 4; + ctx.shadowOffsetX = 2; + ctx.shadowOffsetY = 2; + ctx.fillText(shortUrl, 1700 - 120, 1100 - 30); + } + }; + setTimeout(renderQr, 100); + })(canvas2, url, shortUrl); + + page.appendChild(card2); + 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); }); } diff --git a/public/handout-graveyard.png b/public/handout-graveyard.png new file mode 100644 index 0000000..01ebed8 Binary files /dev/null and b/public/handout-graveyard.png differ diff --git a/public/handout-phone.png b/public/handout-phone.png new file mode 100644 index 0000000..70d47e3 Binary files /dev/null and b/public/handout-phone.png differ diff --git a/public/handout-pocket.png b/public/handout-pocket.png new file mode 100644 index 0000000..fa7ba54 Binary files /dev/null and b/public/handout-pocket.png differ diff --git a/public/handout-stop-waiting.png b/public/handout-stop-waiting.png new file mode 100644 index 0000000..543917e Binary files /dev/null and b/public/handout-stop-waiting.png differ diff --git a/public/handout-two.png b/public/handout-two.png new file mode 100644 index 0000000..584c2ed Binary files /dev/null and b/public/handout-two.png differ