martbost
106 lines
9.1 KiB
HTML
106 lines
9.1 KiB
HTML
<!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}
|
|
/* ---- 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,.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}
|
|
.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>
|
|
<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>
|
|
<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>
|
|
<script src="/chat.js" defer></script>
|
|
<script src="/translate.js" defer></script><script src="/tg-app.js" defer></script></body></html>
|