add screen to view a barcode isolated

static/rewards.js

@@ -0,0 +1,30 @@
+// Keep the screen awake while a rewards barcode is on screen so the cashier
+// can scan it without the display dimming or locking. This mirrors how wallet
+// apps behave when showing a barcode. The Screen Wake Lock API is best-effort:
+// it may be rejected (e.g. low battery) or auto-released when the tab is hidden,
+// so we re-acquire whenever the page becomes visible again.
+(function () {
+  var wakeLock = null;
+
+  function requestWakeLock() {
+    if (!("wakeLock" in navigator)) return;
+    navigator.wakeLock
+      .request("screen")
+      .then(function (sentinel) {
+        wakeLock = sentinel;
+      })
+      .catch(function () {
+        // Best-effort only; ignore failures (unsupported, low battery, etc.).
+      });
+  }
+
+  // Re-acquire if the lock was released (e.g. the tab was hidden) and the user
+  // returns to the page.
+  document.addEventListener("visibilitychange", function () {
+    if (document.visibilityState === "visible" && wakeLock === null) {
+      requestWakeLock();
+    }
+  });
+
+  requestWakeLock();
+})();

static/style.css

@@ -412,10 +412,20 @@ textarea:focus { border-color: var(--deep-sage); box-shadow: 0 0 0 4px rgba(85,
 /* Rewards cards */
 .rewards-grid { display: grid; gap: 16px; }
 .rewards-card {
+  position: relative;
   padding: 18px;
   border: 1px solid var(--line);
   border-radius: 18px;
   background: #fff;
+  transition: border-color .16s ease, transform .16s ease;
+}
+.rewards-card:hover { border-color: var(--sage); transform: translateY(-1px); }
+/* Stretched link: makes the whole card clickable to open the scan view. */
+.rewards-card-link {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  z-index: 1;
 }
 .rewards-card-heading {
   display: flex;
@@ -445,6 +455,44 @@ textarea:focus { border-color: var(--deep-sage); box-shadow: 0 0 0 4px rgba(85,
   color: var(--coral);
   font-weight: 700;
 }
+/* Keep the Remove button above the stretched link so it stays clickable. */
+.rewards-card-heading form { position: relative; z-index: 2; }
+
+/* Single-card scan view */
+.scan-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 22px;
+  padding: 12px 0 40px;
+}
+.scan-back { align-self: flex-start; }
+.scan-card {
+  width: min(100%, 460px);
+  padding: clamp(24px, 6vw, 42px);
+  border: 1px solid var(--line);
+  border-radius: 28px;
+  background: #fff;
+  box-shadow: var(--shadow);
+  text-align: center;
+}
+.scan-store { margin: 4px 0 26px; font-size: clamp(1.3rem, 4vw, 1.7rem); }
+.scan-barcode {
+  display: flex;
+  justify-content: center;
+  padding: 22px;
+  border-radius: 14px;
+  background: #fff;
+}
+.scan-barcode svg {
+  width: 100%;
+  height: auto;
+  max-width: 420px;
+}
+.scan-card .rewards-number {
+  margin-top: 18px;
+  font-size: 1rem;
+}
 select {
   width: 100%;
   min-height: 46px;