Expired QR Notice - Everyday Interface Patterns

A static expired QR notice shows Wi-Fi login purpose, 2 minutes expiry, Expired preview state, and Do not scan status.

Program

Expired QR states should tell learners not to scan without running a timer or scanning service.

expired_qr_notice.html

Visuals: captured from real browser rendering

<section class="expired-qr" aria-labelledby="expired-qr-title"><h2 id="expired-qr-title">Expired QR notice</h2><div class="qr-card expired" aria-label="Static expired 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>Expires</dt><dd>2 minutes</dd></div><div><dt>State</dt><dd>Expired preview</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Do not scan</span></dd></div></dl>
  <p class="check">Learner check: the expired state is visible without running a timer.</p>
  <p class="note">Static expired QR notice 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>
  .expired-qr { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #b45309; padding: 12px; background: #fffbeb; }
  .qr-card { width: 96px; height: 96px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; background: #ffffff; border: 1px solid #b45309; }
  .qr-card span:nth-child(odd) { background: #78350f; }
  .qr-card span:nth-child(even) { background: #fde68a; }
  .expired { opacity: 0.65; }
  .expired-qr dl { display: grid; gap: 8px; margin: 0; }
  .expired-qr dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .expired-qr dt { color: #475569; }
  .expired-qr dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #fde68a; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the expired QR notice.
The section is labelled by its visible heading.
Show purpose row.
The purpose is exact pinned data.
Show expires and state rows.
The expiry and state are exact pinned data.
Render do-not-scan status.
The status badge says not to scan.
Check expired readback.
The check says the expired state is visible without running a timer.
Check expired QR honesty.
Purpose, expiry, state, status, and no live submission.

step flow step(1) labels the source, step(2) shows the purpose, step(3) shows expiry and state rows, step(4) shows do-not-scan status, step(5) checks the expired-state readback, and step(6) checks the honesty note.

expired QR readback The section heading names the expired QR notice surface.

expiry rows Purpose, Expires, State, and Status values are exact pinned data.

no timer or 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.