feat(fusion_clock): premium glass NFC kiosk + scope CSS to kiosk page

Visual rewrite of the NFC kiosk page:
- Animated mesh gradient background (drifts on a 28s loop)
- Glass-panel state cards with backdrop-filter blur
- Animated SVG NFC icon (concentric waves emanate from a chip)
- Company logo pulled from res.company.logo, displayed in header
- Dominant-hue extraction from logo sets --nfc-h CSS var; entire
  palette interpolates from that one HSL hue
- Success burst (green glow + scale), error shake, smooth state fades
- Reduced-motion fallback respects prefers-reduced-motion
- Glass numpad + employee picker in Enroll Mode

CRITICAL FIX: scoped all kiosk styles under :has(#nfc_kiosk_root) so
they no longer leak into other frontend pages. Previous version applied
html/body overflow:hidden + display:none on header/footer globally,
breaking website scrolling and chrome on every frontend page.
This commit is contained in:
gsinghpal
2026-05-14 08:22:47 -04:00
parent 2abd859a29
commit 94249ba67d
4 changed files with 520 additions and 102 deletions

View File

@@ -74,9 +74,13 @@ class FusionClockNfcKiosk(http.Controller):
company = request.env.company
location = company.x_fclk_nfc_kiosk_location_id
company_logo_url = (
'/web/image/res.company/%s/logo' % company.id if company.logo else ''
)
values = {
'page_name': 'nfc_kiosk',
'company_name': company.name,
'company_logo_url': company_logo_url,
'location_name': location.name if location else 'No location configured',
'location_configured': bool(location),
'photo_required': ICP.get_param('fusion_clock.nfc_photo_required', 'True') == 'True',