From bad73fcea8bd09909912ab7c615ec3eef6a63b2c Mon Sep 17 00:00:00 2001 From: gsinghpal Date: Thu, 14 May 2026 08:29:33 -0400 Subject: [PATCH] =?UTF-8?q?fix(fusion=5Fclock):=20NFC=20kiosk=20visual=20p?= =?UTF-8?q?olish=20=E2=80=94=20bigger=20chip,=20uncut=20waves,=20logo=20gl?= =?UTF-8?q?ass=20pill,=20no=20clock=20collision?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../static/src/js/fusion_clock_nfc_kiosk.js | 10 ++-- fusion_clock/static/src/scss/nfc_kiosk.scss | 49 ++++++++++++------- 2 files changed, 35 insertions(+), 24 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 46ce7965..b9e45934 100644 --- a/fusion_clock/static/src/js/fusion_clock_nfc_kiosk.js +++ b/fusion_clock/static/src/js/fusion_clock_nfc_kiosk.js @@ -134,14 +134,14 @@ stateContainer.innerHTML = `
- - - - +
Tap your card to clock in or out
diff --git a/fusion_clock/static/src/scss/nfc_kiosk.scss b/fusion_clock/static/src/scss/nfc_kiosk.scss index 183313b3..9bd5928e 100644 --- a/fusion_clock/static/src/scss/nfc_kiosk.scss +++ b/fusion_clock/static/src/scss/nfc_kiosk.scss @@ -99,35 +99,43 @@ 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. .nfc-kiosk__logo { position: absolute; - top: 1.5rem; - left: 50%; - transform: translateX(-50%); - max-height: 64px; - max-width: 240px; + top: 1.25rem; + left: 1.5rem; + max-height: 56px; + max-width: 220px; object-fit: contain; - filter: drop-shadow(0 4px 20px rgba(0,0,0,0.4)); - opacity: 0.95; + background: rgba(255, 255, 255, 0.94); + padding: 0.5rem 0.85rem; + border-radius: 0.85rem; + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.45), + inset 0 1px 0 rgba(255, 255, 255, 1); + box-sizing: content-box; animation: nfc-logo-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes nfc-logo-in { - from { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.94); } - to { opacity: 0.95; transform: translateX(-50%) translateY(0) scale(1); } + from { opacity: 0; transform: translateY(-12px) scale(0.94); } + to { opacity: 1; transform: translateY(0) scale(1); } } .nfc-kiosk__company { position: absolute; - top: 5.5rem; - left: 50%; - transform: translateX(-50%); - font-size: 0.95rem; + top: 5.75rem; + left: 1.5rem; + font-size: 0.85rem; color: var(--nfc-text-muted); letter-spacing: 0.05em; text-transform: uppercase; } +// When a logo is present, the company-name text is redundant — hide it. +.nfc-kiosk__logo ~ .nfc-kiosk__company { display: none; } + .nfc-kiosk__time { position: absolute; top: 1.75rem; @@ -227,8 +235,9 @@ html:has(#nfc_kiosk_root) { } .nfc-kiosk__icon-svg { - width: 13rem; - height: 13rem; + width: 14rem; + height: 14rem; + overflow: visible; // let waves expand past viewBox without clipping color: hsl(var(--nfc-h), 80%, 65%); filter: drop-shadow(0 0 30px hsla(var(--nfc-h), 80%, 55%, 0.6)); @@ -239,6 +248,7 @@ html:has(#nfc_kiosk_root) { .nfc-wave { transform-origin: center; + transform-box: fill-box; // scale around the wave's own center, not viewBox origin opacity: 0; animation: nfc-wave-emit 2.5s ease-out infinite; } @@ -249,13 +259,14 @@ html:has(#nfc_kiosk_root) { @keyframes nfc-chip-pulse { 0%, 100% { transform: scale(1); } - 50% { transform: scale(1.06); } + 50% { transform: scale(1.05); } } @keyframes nfc-wave-emit { - 0% { transform: scale(0.5); opacity: 0; } - 20% { opacity: 0.8; } - 100% { transform: scale(1.4); opacity: 0; } + 0% { transform: scale(0.6); opacity: 0; } + 25% { opacity: 0.85; } + 80% { opacity: 0.25; } + 100% { transform: scale(1.35); opacity: 0; } } .nfc-kiosk__prompt {