From 42e8fe3d2114e0381334c4f6c22c5280514eac8c Mon Sep 17 00:00:00 2001
From: gsinghpal <gur_preet.singh@outlook.com>
Date: Thu, 14 May 2026 08:38:25 -0400
Subject: [PATCH] =?UTF-8?q?fix(fusion=5Fclock):=20NFC=20kiosk=20=E2=80=94?=
 =?UTF-8?q?=20subtle=20logo=20glass,=20centered=20clock,=20AM/PM?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../static/src/js/fusion_clock_nfc_kiosk.js   | 13 ++++--
 fusion_clock/static/src/scss/nfc_kiosk.scss   | 43 +++++++++++++------
 2 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/fusion_clock/static/src/js/fusion_clock_nfc_kiosk.js b/fusion_clock/static/src/js/fusion_clock_nfc_kiosk.js
index b9e45934..701279b0 100644
--- a/fusion_clock/static/src/js/fusion_clock_nfc_kiosk.js
+++ b/fusion_clock/static/src/js/fusion_clock_nfc_kiosk.js
@@ -365,16 +365,23 @@
     }
 
     // ──────────────────────────────────────────────────────────────
-    // Clock display (top-right time + date)
+    // Clock display (centered top: time with AM/PM + date)
     // ──────────────────────────────────────────────────────────────
     function updateClock() {
         const now = new Date();
-        const hh = String(now.getHours()).padStart(2, "0");
+        let hours = now.getHours();
+        const ampm = hours >= 12 ? "PM" : "AM";
+        hours = hours % 12;
+        if (hours === 0) hours = 12;            // 0 → 12 in 12-hour clock
+        const hh = String(hours).padStart(2, "0");
         const mm = String(now.getMinutes()).padStart(2, "0");
         const dateStr = now.toLocaleDateString([], { weekday: "short", month: "short", day: "numeric" });
         const timeEl = document.getElementById("nfc_clock_time");
         const dateEl = document.getElementById("nfc_clock_date");
-        if (timeEl) timeEl.textContent = `${hh}:${mm}`;
+        if (timeEl) {
+            // Render hh:mm + AM/PM as separate spans so SCSS can style them differently
+            timeEl.innerHTML = `${hh}:${mm}<span class="ampm">${ampm}</span>`;
+        }
         if (dateEl) dateEl.textContent = dateStr;
     }
     updateClock();
diff --git a/fusion_clock/static/src/scss/nfc_kiosk.scss b/fusion_clock/static/src/scss/nfc_kiosk.scss
index 9bd5928e..51ad317d 100644
--- a/fusion_clock/static/src/scss/nfc_kiosk.scss
+++ b/fusion_clock/static/src/scss/nfc_kiosk.scss
@@ -99,21 +99,24 @@ html:has(#nfc_kiosk_root) {
 // ─────────────────────────────────────────────────────────────────────
 // Header chrome — logo, time, date, location, settings
 // ─────────────────────────────────────────────────────────────────────
-// Logo on a near-white glass pill so dark logos read against the dark page.
-// Positioned top-left so it doesn't collide with the time in the top-right.
+// Logo on a subtle frosted-glass pill — just enough lift to keep dark logos
+// readable against the dark gradient, without looking like a glaring sticker.
 .nfc-kiosk__logo {
     position: absolute;
     top: 1.25rem;
     left: 1.5rem;
-    max-height: 56px;
-    max-width: 220px;
+    max-height: 52px;
+    max-width: 200px;
     object-fit: contain;
-    background: rgba(255, 255, 255, 0.94);
+    background: rgba(255, 255, 255, 0.20);
+    backdrop-filter: blur(24px) saturate(180%);
+    -webkit-backdrop-filter: blur(24px) saturate(180%);
     padding: 0.5rem 0.85rem;
     border-radius: 0.85rem;
+    border: 1px solid rgba(255, 255, 255, 0.18);
     box-shadow:
-        0 8px 32px rgba(0, 0, 0, 0.45),
-        inset 0 1px 0 rgba(255, 255, 255, 1);
+        0 6px 24px rgba(0, 0, 0, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.25);
     box-sizing: content-box;
     animation: nfc-logo-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
 }
@@ -139,22 +142,36 @@ html:has(#nfc_kiosk_root) {
 .nfc-kiosk__time {
     position: absolute;
     top: 1.75rem;
-    right: 2rem;
-    font-size: 2.25rem;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 2.5rem;
     font-weight: 300;
     color: var(--nfc-text);
     font-variant-numeric: tabular-nums;
     letter-spacing: -0.02em;
-    text-shadow: 0 2px 12px rgba(0,0,0,0.3);
+    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
+    display: flex;
+    align-items: baseline;
+    gap: 0.45rem;
+    white-space: nowrap;
+
+    .ampm {
+        font-size: 1rem;
+        font-weight: 500;
+        color: var(--nfc-text-muted);
+        letter-spacing: 0.08em;
+    }
 }
 
 .nfc-kiosk__date {
     position: absolute;
-    top: 5rem;
-    right: 2rem;
+    top: 5.25rem;
+    left: 50%;
+    transform: translateX(-50%);
     font-size: 0.9rem;
     color: var(--nfc-text-muted);
-    letter-spacing: 0.02em;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
 }
 
 .nfc-kiosk__location {