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

fix(fusion_clock): NFC kiosk visual polish — bigger chip, uncut waves, logo glass pill, no clock collision

Browse Source
This commit is contained in:
gsinghpal
2026-05-14 08:29:33 -04:00
parent 94249ba67d
commit bad73fcea8
2 changed files with 35 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -134,14 +134,14 @@
stateContainer.innerHTML = ` stateContainer.innerHTML = `
<div class="nfc-kiosk__idle"> <div class="nfc-kiosk__idle">
<svg class="nfc-kiosk__icon-svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <svg class="nfc-kiosk__icon-svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<circle class="nfc-wave nfc-wave-3" cx="100" cy="100" r="92" <circle class="nfc-wave nfc-wave-3" cx="100" cy="100" r="98"
stroke="currentColor" stroke-width="4" fill="none"/> stroke="currentColor" stroke-width="4" fill="none"/>
<circle class="nfc-wave nfc-wave-2" cx="100" cy="100" r="70" <circle class="nfc-wave nfc-wave-2" cx="100" cy="100" r="78"
stroke="currentColor" stroke-width="4" fill="none"/> stroke="currentColor" stroke-width="4" fill="none"/>
<circle class="nfc-wave nfc-wave-1" cx="100" cy="100" r="48" <circle class="nfc-wave nfc-wave-1" cx="100" cy="100" r="58"
stroke="currentColor" stroke-width="4" fill="none"/> stroke="currentColor" stroke-width="4" fill="none"/>
<rect class="nfc-chip" x="80" y="80" width="40" height="40" <rect class="nfc-chip" x="68" y="68" width="64" height="64"
rx="8" fill="currentColor"/> rx="11" fill="currentColor"/>
</svg> </svg>
<div class="nfc-kiosk__prompt">Tap your card to clock in or out</div> <div class="nfc-kiosk__prompt">Tap your card to clock in or out</div>
</div> </div>

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

@@ -99,35 +99,43 @@ html:has(#nfc_kiosk_root) {
// ───────────────────────────────────────────────────────────────────── // ─────────────────────────────────────────────────────────────────────
// Header chrome — logo, time, date, location, settings // 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 { .nfc-kiosk__logo {
position: absolute; position: absolute;
top: 1.5rem; top: 1.25rem;
left: 50%; left: 1.5rem;
transform: translateX(-50%); max-height: 56px;
max-height: 64px; max-width: 220px;
max-width: 240px;
object-fit: contain; object-fit: contain;
filter: drop-shadow(0 4px 20px rgba(0,0,0,0.4)); background: rgba(255, 255, 255, 0.94);
opacity: 0.95; 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; animation: nfc-logo-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
} }
@keyframes nfc-logo-in { @keyframes nfc-logo-in {
from { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.94); } from { opacity: 0; transform: translateY(-12px) scale(0.94); }
to { opacity: 0.95; transform: translateX(-50%) translateY(0) scale(1); } to { opacity: 1; transform: translateY(0) scale(1); }
} }
.nfc-kiosk__company { .nfc-kiosk__company {
position: absolute; position: absolute;
top: 5.5rem; top: 5.75rem;
left: 50%; left: 1.5rem;
transform: translateX(-50%); font-size: 0.85rem;
font-size: 0.95rem;
color: var(--nfc-text-muted); color: var(--nfc-text-muted);
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; 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 { .nfc-kiosk__time {
position: absolute; position: absolute;
top: 1.75rem; top: 1.75rem;
@@ -227,8 +235,9 @@ html:has(#nfc_kiosk_root) {
} }
.nfc-kiosk__icon-svg { .nfc-kiosk__icon-svg {
width: 13rem; width: 14rem;
height: 13rem; height: 14rem;
overflow: visible; // let waves expand past viewBox without clipping
color: hsl(var(--nfc-h), 80%, 65%); color: hsl(var(--nfc-h), 80%, 65%);
filter: drop-shadow(0 0 30px hsla(var(--nfc-h), 80%, 55%, 0.6)); 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 { .nfc-wave {
transform-origin: center; transform-origin: center;
transform-box: fill-box; // scale around the wave's own center, not viewBox origin
opacity: 0; opacity: 0;
animation: nfc-wave-emit 2.5s ease-out infinite; animation: nfc-wave-emit 2.5s ease-out infinite;
} }
@@ -249,13 +259,14 @@ html:has(#nfc_kiosk_root) {
@keyframes nfc-chip-pulse { @keyframes nfc-chip-pulse {
0%, 100% { transform: scale(1); } 0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); } 50% { transform: scale(1.05); }
} }
@keyframes nfc-wave-emit { @keyframes nfc-wave-emit {
0% { transform: scale(0.5); opacity: 0; } 0% { transform: scale(0.6); opacity: 0; }
20% { opacity: 0.8; } 25% { opacity: 0.85; }
100% { transform: scale(1.4); opacity: 0; } 80% { opacity: 0.25; }
100% { transform: scale(1.35); opacity: 0; }
} }
.nfc-kiosk__prompt { .nfc-kiosk__prompt {