From 6195a11501c9aa3b2c240df7e641b3a71eee6aa6 Mon Sep 17 00:00:00 2001 From: AliceDarkest Date: Sun, 12 Jul 2026 22:09:18 +0200 Subject: [PATCH] Dashboard-Topbar und FluxTimer-Icon verfeinern --- CHANGELOG.md | 5 ++++- src/main/resources/static/css/fluxtimer.css | 9 ++++++--- src/main/resources/static/css/theme.css | 4 +--- src/main/resources/static/js/theme.js | 2 +- src/main/resources/templates/dashboard.html | 15 ++++++++++----- 5 files changed, 22 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d8c1aa9..e2eeeb3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -92,8 +92,11 @@ Docker/CI-Härtung und erste Tests. - **Spiel-Akzentbasis:** Dark-/Light-Tokens für CodeEscape, BugHunter, ServiceClash und NetWorker. - **FluxTimer-MVP:** lokaler Pausentimer mit 5–240 Minuten Intervall, rotierenden Erinnerungen, eigenem Text, Snooze, Probelauf, optionalem Sound und lokaler Browser-Benachrichtigung. - Countdown und Overlay laufen über Navigationen weiter; die Dashboard-Glocke öffnet den + Countdown und Overlay laufen über Navigationen weiter; ein eigener Topbar-Button öffnet den Schnellzugriff und die Einstellungen enthalten die vollständige Konfiguration. +- **Dashboard-Topbar aufgeräumt:** generische Winkehand und dekorative Pulsline entfernt. + FluxTimer besitzt statt der Glocke jetzt ein eigenes digitales „88"-Zeitschaltkreis-Icon; + die Glocke bleibt frei für spätere echte Benachrichtigungen. - Datenschutzerklärung um lokale Speicherung und Browser-Benachrichtigung ergänzt. ## [Unreleased] – 2026-06-30 · Login, Registrierung & Konten diff --git a/src/main/resources/static/css/fluxtimer.css b/src/main/resources/static/css/fluxtimer.css index 16cda49..3bf015a 100644 --- a/src/main/resources/static/css/fluxtimer.css +++ b/src/main/resources/static/css/fluxtimer.css @@ -1,7 +1,10 @@ /* FluxTimer – Zeitschaltkreis-Optik, rein clientseitig. */ -.ft-bell { position:relative; } -.ft-bell-dot { position:absolute; right:5px; top:5px; width:7px; height:7px; border-radius:50%; background:var(--muted); border:1px solid var(--surface); } -.ft-bell.ft-active .ft-bell-dot { background:var(--fluxtimer-primary); box-shadow:0 0 8px var(--fluxtimer-primary); } +.ft-trigger { position:relative; color:var(--fluxtimer-secondary); } +.ft-trigger-icon { width:22px!important; height:22px!important; fill:none; stroke:currentColor; stroke-width:1.35; } +.ft-trigger-icon text { fill:currentColor; stroke:none; font:800 8.5px/1 "Courier New",monospace; letter-spacing:-.5px; } +.ft-trigger-dot { position:absolute; right:4px; top:4px; width:6px; height:6px; border-radius:50%; background:var(--muted); border:1px solid var(--surface); opacity:.5; } +.ft-trigger.ft-active { color:var(--fluxtimer-primary); border-color:color-mix(in srgb,var(--fluxtimer-primary) 65%,var(--border)); box-shadow:0 0 14px color-mix(in srgb,var(--fluxtimer-primary) 35%,transparent); } +.ft-trigger.ft-active .ft-trigger-dot { background:var(--fluxtimer-primary); box-shadow:0 0 8px var(--fluxtimer-primary); opacity:1; } .ft-popover { position:fixed; z-index:1600; width:min(340px,calc(100vw - 24px)); padding:1rem; border:1px solid color-mix(in srgb,var(--fluxtimer-secondary) 55%,var(--border)); border-radius:16px; background:var(--panel); box-shadow:0 18px 55px rgba(0,0,0,.38),0 0 24px color-mix(in srgb,var(--fluxtimer-secondary) 22%,transparent); display:none; } .ft-popover.open { display:block; animation:ft-in .18s ease-out; } .ft-popover-head,.ft-popover-actions,.ft-settings-head,.ft-settings-actions,.ft-options { display:flex; align-items:center; gap:.7rem; } diff --git a/src/main/resources/static/css/theme.css b/src/main/resources/static/css/theme.css index 074d72f..f39864f 100644 --- a/src/main/resources/static/css/theme.css +++ b/src/main/resources/static/css/theme.css @@ -96,8 +96,6 @@ a { color:var(--secondary); } .mf-hello h1 { color:var(--heading); font-size:1.85rem; font-weight:800; letter-spacing:-.01em; } .mf-hello h1 .nm { color:var(--accent); text-shadow:0 0 16px var(--glow-s); } .mf-hello p { color:var(--muted); margin-top:.35rem; font-size:.95rem; } -.mf-pulse { flex:1; min-width:0; display:flex; justify-content:center; align-items:center; } -.mf-pulse svg { width:200px; max-width:100%; filter:drop-shadow(0 0 7px var(--glow-s)); } .mf-tools { display:flex; align-items:center; gap:.6rem; margin-left:auto; } .mf-iconbtn { width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none; transition:all .18s; } .mf-iconbtn:hover { color:var(--accent); border-color:var(--border-accent); box-shadow:0 0 14px var(--glow-w); } @@ -198,7 +196,7 @@ body.mf-nav-open .mf-nav-backdrop { opacity:1; pointer-events:auto; } .mf-main { padding:1.1rem 1rem 1.4rem; } .mf-rightbar { padding:0 1rem 1.4rem; } .mf-grid { grid-template-columns:repeat(2,1fr); } - .mf-pulse, .mf-search { display:none; } + .mf-search { display:none; } .mf-hello h1 { font-size:1.4rem; } .mf-tools { margin-left:auto; } diff --git a/src/main/resources/static/js/theme.js b/src/main/resources/static/js/theme.js index 455570a..113b297 100644 --- a/src/main/resources/static/js/theme.js +++ b/src/main/resources/static/js/theme.js @@ -13,7 +13,7 @@ if (!document.querySelector('link[data-fluxtimer]')) { var timerCss = document.createElement('link'); timerCss.rel = 'stylesheet'; - timerCss.href = '/css/fluxtimer.css?v=1'; + timerCss.href = '/css/fluxtimer.css?v=2'; timerCss.setAttribute('data-fluxtimer', ''); document.head.appendChild(timerCss); } diff --git a/src/main/resources/templates/dashboard.html b/src/main/resources/templates/dashboard.html index 34274bd..8251263 100644 --- a/src/main/resources/templates/dashboard.html +++ b/src/main/resources/templates/dashboard.html @@ -41,14 +41,19 @@
-

Willkommen zurück, Alice! 👋

+

Willkommen zurück, Alice!

Wähle ein Spielmodus, um dein Wissen auf die Probe zu stellen.

-
- -
- + +