QR Code Handoff Patterns

QR Preview

A static QR-like handoff preview shows Wi-Fi login purpose, Lobby access label, WIFI-DEMO-2026 encoded value, and Display only status.

Program

QR handoff previews should show what the code is for before anyone tries to scan it.

qr_code_preview.html
Visuals: captured from real browser rendering
<section class="qr-preview" aria-labelledby="qr-preview-title"><h2 id="qr-preview-title">QR code preview</h2><div class="qr-card" aria-label="Static QR-like preview"><span></span><span></span><span></span><span></span><span></span><span></span></div><dl>
  <div><dt>Purpose</dt><dd>Wi-Fi login</dd></div>
  <div><dt>QR label</dt><dd>Lobby access</dd></div><div><dt>Encoded value</dt><dd>WIFI-DEMO-2026</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Display only</span></dd></div></dl>
  <p class="check">Learner check: the QR handoff is visible before any scan starts.</p>
  <p class="note">Static QR preview only; no camera, scanner, scan event, QR generation library, QR decoder, device API, Wi-Fi connection, storage, cookie, route, API, network, script, event listener, form submit, input, textarea, contenteditable, analytics, timer, object URL, download, service worker, account/session behavior, or live submission runs.</p></section>
<style>
  .qr-preview { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #0f766e; padding: 12px; background: #f0fdfa; }
  .qr-card { width: 96px; height: 96px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; background: #ffffff; border: 1px solid #0f766e; }
  .qr-card span:nth-child(odd) { background: #0f172a; }
  .qr-card span:nth-child(even) { background: #cbd5e1; }
  .qr-preview dl { display: grid; gap: 8px; margin: 0; }
  .qr-preview dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .qr-preview dt { color: #475569; }
  .qr-preview dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #ccfbf1; padding: 2px 8px; }
  .note { color: #475569; }
</style>

  1. Label the QR preview.

    The section is labelled by its visible heading.
    The section is labelled by its visible heading.

  2. Show purpose row.

    The purpose is exact pinned data.
    The purpose is exact pinned data.

  3. Show QR label and encoded value rows.

    The label and encoded value are exact pinned data.
    The label and encoded value are exact pinned data.

  4. Render display-only status.

    The status badge says this is display only.
    The status badge says this is display only.

  5. Check QR readback.

    The check says the QR handoff is visible before any scan starts.
    The check says the QR handoff is visible before any scan starts.

  6. Check QR honesty.

    Purpose, label, value, status, and no live submission.
    Purpose, label, value, status, and no live submission.
step flow step(1) labels the source, step(2) shows the purpose, step(3) shows QR label and encoded value rows, step(4) shows display-only status, step(5) checks the QR handoff readback, and step(6) checks the honesty note.
QR handoff readback The section heading names the QR code preview surface.
QR rows Purpose, QR label, Encoded value, and Status values are exact pinned data.
no live scan The lesson should not imply cameras, scanners, scan events, QR generation libraries, QR decoders, device APIs, Wi-Fi connections, storage, cookies, routes, APIs, networks, scripts, event listeners, form submits, inputs, textareas, contenteditable surfaces, analytics, timers, object URLs, downloads, service workers, account/session behavior, or live submissions.