martbost
be7cb93bc5
Self-contained /announce.js injects a branded, dismissible event overlay (the flyer + all four time zones + Join Google Meet button). Included on the main funnel and member pages. Auto-expires after the huddle and shows once per browser until dismissed; edit the EV block to reuse for future events. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
53 lines
5.0 KiB
HTML
53 lines
5.0 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 handouts with your personal QR code — bold full-color designs, two per page, for coffee shops, bulletin boards, and belly-to-belly sharing."><title>Printable Handouts | 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 18px}
|
|
.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}
|
|
/* ---- 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;box-shadow:0 10px 30px rgba(0,0,0,.35);
|
|
background-size:cover;background-position:center;font-family:Inter,system-ui,sans-serif;
|
|
-webkit-print-color-adjust:exact;print-color-adjust:exact}
|
|
/* QR overlay panel — % sized so it scales on screen, mobile, and print */
|
|
.hs-qrov{position:absolute;right:3%;bottom:5.5%;width:22%;background:#fff;border-radius:8%/12%;
|
|
padding:2% 1.6% 1.4%;text-align:center;color:#10151b;box-shadow:0 5px 18px rgba(0,0,0,.55)}
|
|
.hs-qrov .q{width:100%;line-height:0}
|
|
.hs-qrov .q svg{width:100%;height:auto;display:block}
|
|
.hs-qrov .q .qph{width:100%;aspect-ratio:1;border:2px dashed #99a;border-radius:6px;box-sizing:border-box}
|
|
.hs-qrov .scan{font-weight:800;letter-spacing:.12em;font-size:clamp(6px,1.4vw,11px);margin-top:5%}
|
|
.hs-qrov .lnk{font-weight:800;font-size:clamp(6px,1.35vw,10.5px);word-break:break-all;line-height:1.2}
|
|
.hs-discov{position:absolute;left:2.6%;bottom:2.4%;width:60%;font-size:clamp(5px,1vw,8.5px);line-height:1.35;
|
|
color:#fff;opacity:.92;text-align:left;text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.6)}
|
|
.hs-print{position:absolute;top:10px;right:10px;z-index:10;cursor:pointer}
|
|
.hs-copy{display:none}
|
|
.hs-cut{display:none}
|
|
@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,.hs-print{display:none!important}
|
|
.flw{max-width:none;padding:0;margin:0}
|
|
/* size pages in physical units — 100vh is the PHONE SCREEN height when
|
|
printing from mobile, which overflowed each design onto two pages */
|
|
.hs-page{max-width:none;margin:0;height:11in;page-break-after:always;page-break-inside:avoid;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 .hs-page:not(.printing){display:none!important}
|
|
/* no break after whatever prints last — a trailing always-break emits a blank page */
|
|
#halfsheets .hs-page:last-child{page-break-after:auto}
|
|
body.print-one .hs-page.printing{page-break-after:auto!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 Handouts</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">Handouts.</span></h1><p class="fl-intro">Old-school still works. Bold full-color designs — one for every angle — that stop people walking by and let the QR do the talking. 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 to leave anywhere — coffee shops, gyms, community boards, laundromats. Enter your ID and every handout carries <strong style="color:var(--text)">your</strong> QR code and invite link.</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 — these designs are made for it. The QR scans in black-and-white too.</span></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><script src="/nav-dash.js" defer></script> <script src="/announce.js"></script>
|
|
</body></html>
|