Add a scannable RSVP QR code, print version included

public/assets/rsvp-qr.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 37 37" shape-rendering="crispEdges"><path fill="#ffffff" d="M0 0h37v37H0z"/><path stroke="#06060b" d="M2 2.5h7m2 0h4m3 0h1m1 0h2m1 0h1m1 0h1m2 0h7M2 3.5h1m5 0h1m2 0h4m2 0h2m1 0h1m1 0h2m2 0h1m1 0h1m5 0h1M2 4.5h1m1 0h3m1 0h1m1 0h1m1 0h1m3 0h1m4 0h1m1 0h2m3 0h1m1 0h3m1 0h1M2 5.5h1m1 0h3m1 0h1m1 0h1m1 0h3m2 0h1m2 0h2m1 0h1m2 0h1m1 0h1m1 0h3m1 0h1M2 6.5h1m1 0h3m1 0h1m1 0h1m2 0h7m2 0h3m3 0h1m1 0h3m1 0h1M2 7.5h1m5 0h1m1 0h3m6 0h1m1 0h1m1 0h4m1 0h1m5 0h1M2 8.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M10 9.5h3m5 0h1m1 0h6M2 10.5h1m1 0h5m3 0h2m1 0h1m3 0h1m1 0h1m2 0h3m1 0h5M2 11.5h2m2 0h2m1 0h1m1 0h1m1 0h3m2 0h5m1 0h2m2 0h2m1 0h4M2 12.5h4m1 0h3m1 0h1m1 0h1m1 0h5m2 0h1m1 0h1m1 0h1m3 0h1m1 0h2M3 13.5h1m1 0h2m2 0h1m5 0h1m1 0h4m4 0h1m1 0h2m1 0h3M2 14.5h3m1 0h5m5 0h3m3 0h6m1 0h3m1 0h1M2 15.5h1m2 0h1m1 0h1m3 0h3m1 0h1m1 0h1m1 0h2m2 0h1m2 0h4m1 0h4M2 16.5h4m2 0h2m1 0h2m1 0h1m2 0h3m2 0h1m3 0h3m1 0h4M2 17.5h5m8 0h3m5 0h1m2 0h3m1 0h3M4 18.5h6m6 0h4m4 0h1m1 0h2m1 0h2m3 0h1M2 19.5h4m1 0h1m2 0h1m3 0h1m1 0h1m1 0h1m1 0h6m2 0h2m1 0h4M3 20.5h1m1 0h2m1 0h1m1 0h1m1 0h1m3 0h3m1 0h1m1 0h2m5 0h2m1 0h2M2 21.5h1m1 0h2m7 0h1m1 0h1m2 0h1m3 0h3m3 0h7M3 22.5h1m1 0h2m1 0h3m4 0h1m4 0h1m2 0h1m3 0h1m1 0h3M2 23.5h1m4 0h1m1 0h1m2 0h4m1 0h3m2 0h4m1 0h3m1 0h2m1 0h1M2 24.5h1m1 0h2m2 0h3m1 0h1m1 0h3m2 0h1m1 0h1m4 0h2m2 0h1m1 0h2M2 25.5h1m1 0h1m1 0h2m1 0h1m1 0h2m3 0h1m1 0h1m1 0h6m2 0h1m1 0h5M2 26.5h1m1 0h5m1 0h2m1 0h3m3 0h1m1 0h1m2 0h1m1 0h5m3 0h1M10 27.5h2m1 0h1m2 0h1m1 0h5m2 0h2m3 0h1m1 0h3M2 28.5h7m2 0h1m4 0h2m1 0h1m4 0h3m1 0h1m1 0h1m1 0h2M2 29.5h1m5 0h1m1 0h1m3 0h1m2 0h5m3 0h2m3 0h3m1 0h1M2 30.5h1m1 0h3m1 0h1m1 0h1m3 0h5m3 0h3m1 0h6m1 0h2M2 31.5h1m1 0h3m1 0h1m1 0h4m1 0h1m1 0h1m2 0h1m2 0h1m1 0h1m1 0h1m2 0h1m3 0h1M2 32.5h1m1 0h3m1 0h1m1 0h1m2 0h2m1 0h3m3 0h1m2 0h1m2 0h2m1 0h2M2 33.5h1m5 0h1m5 0h2m1 0h1m5 0h1m1 0h1m4 0h3M2 34.5h7m1 0h1m2 0h1m2 0h4m2 0h1m1 0h6m3 0h1"/></svg>

public/css/style.css

@@ -361,6 +361,20 @@ form { margin-top: 2rem; }
 .form-status { margin-top: 0.9rem; font-size: 0.88rem; color: #fca5a5; min-height: 1.2em; }
 .fine { margin-top: 0.9rem; font-size: 0.78rem; color: var(--fine); text-align: center; }
 
+.qr {
+  display: flex; align-items: center; gap: 1.4rem;
+  margin-top: 2.2rem; padding-top: 1.8rem;
+  border-top: 1px solid var(--hairline);
+}
+.qr-card {
+  flex: none; width: 108px; height: 108px; padding: 8px;
+  background: #fff; border-radius: var(--r-control); display: block;
+}
+.qr-card img { width: 100%; height: 100%; }
+.qr-title { font-family: "Space Grotesk", sans-serif; font-weight: 600; color: var(--text); margin-bottom: 0.3rem; }
+.qr-copy p { font-size: 0.88rem; color: var(--muted); }
+.qr-copy a { color: var(--accent2); text-decoration: none; border-bottom: 1px solid var(--border-hover); }
+
 .rsvp-done h3 { font-size: 1.4rem; font-weight: 700; }
 .rsvp-done p { margin: 0.8rem 0 1.2rem; color: var(--muted); }
 
@@ -421,6 +435,7 @@ form { margin-top: 2rem; }
   .pitch { padding: 5rem var(--gut); }
   .expect { padding: 5rem var(--gut); }
   .rsvp-panel { padding: 1.9rem 1.4rem; }
+  .qr { flex-direction: column; align-items: flex-start; gap: 1rem; }
   .foot { flex-direction: column; align-items: flex-start; }
 }
 

site.config.js

@@ -61,6 +61,7 @@ module.exports = {
       "https://nyc3.digitaloceanspaces.com/corben-sites/images/c23ea202-5442-41b4-9a1b-1586e81c50eb/eb54a5f7-a30e-4a7a-b3cb-0beb5eff43ff/napkin.jpg",
     venue:
       "https://nyc3.digitaloceanspaces.com/corben-sites/images/c23ea202-5442-41b4-9a1b-1586e81c50eb/458dab49-e942-4016-a744-127da6f9a754/silverq-venue.jpg",
+    qr: "/images/rsvp-qr.png",
     venueLogo:
       "https://nyc3.digitaloceanspaces.com/corben-sites/images/c23ea202-5442-41b4-9a1b-1586e81c50eb/5adbc5b1-ed83-48ae-b067-8ca01d0fde44/silverq-logo.png",
   },

views/index.ejs

@@ -272,6 +272,19 @@
         <p class="fine">One email a week at most. Unsubscribe any time.</p>
       </form>
 
+      <!-- Deliberately dark-on-white: inverted QR codes are a coin flip on older
+           scanners, and this is going on flyers. -->
+      <div class="qr">
+        <a class="qr-card" href="#rsvp" aria-hidden="true" tabindex="-1">
+          <img src="<%= site.images.qr %>" width="1024" height="1024" loading="lazy"
+               alt="QR code linking to the RSVP form on this page.">
+        </a>
+        <div class="qr-copy">
+          <p class="qr-title">Point a phone at this.</p>
+          <p>It opens this page straight at the RSVP. Screenshot it for a story, or <a href="/assets/rsvp-qr.svg" download>grab the print version</a> for flyers.</p>
+        </div>
+      </div>
+
       <div class="rsvp-done" id="rsvp-done" hidden>
         <h3>You are on the list.</h3>
         <p>Check your inbox for a confirmation. See you <%= isTonight ? "tonight" : nextLong %> at <%= V.name %>, <%= V.street %>, <%= site.startTime %>. Bring your ideas and a valid ID.</p>