admin/Odoo-Modules
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(fusion_clock): NFC kiosk — subtle logo glass, centered clock, AM/PM

Browse Source
This commit is contained in:
gsinghpal
2026-05-14 08:38:25 -04:00
parent bad73fcea8
commit 42e8fe3d21
2 changed files with 40 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
fusion_clock/static/src/js/fusion_clock_nfc_kiosk.js
View File

@@ -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();

43
fusion_clock/static/src/scss/nfc_kiosk.scss
View File

@@ -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 {