Dashboard-Topbar und FluxTimer-Icon verfeinern

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

src/main/resources/static/css/fluxtimer.css

@@ -1,7 +1,10 @@
 /* FluxTimer – Zeitschaltkreis-Optik, rein clientseitig. */
-.ft-bell { position:relative; }
+.ft-trigger { position:relative; color:var(--fluxtimer-secondary); }
-.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-trigger-icon { width:22px!important; height:22px!important; fill:none; stroke:currentColor; stroke-width:1.35; }
-.ft-bell.ft-active .ft-bell-dot { background:var(--fluxtimer-primary); box-shadow:0 0 8px var(--fluxtimer-primary); }
+.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; }

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; }
 

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);
   }

src/main/resources/templates/dashboard.html

@@ -41,14 +41,19 @@
   <!-- ===== Topbar ===== -->
   <header class="mf-topbar">
     <div class="mf-hello">
-      <h1>Willkommen zurück, <span class="nm" sec:authentication="name">Alice</span>! 👋</h1>
+      <h1>Willkommen zurück, <span class="nm" sec:authentication="name">Alice</span>!</h1>
       <p>Wähle ein Spielmodus, um dein Wissen auf die Probe zu stellen.</p>
     </div>
-    <div class="mf-pulse">
-      <svg viewBox="0 0 200 50" fill="none" stroke="var(--accent)" stroke-width="2"><path d="M2 26h40l8-18 10 34 9-26 7 14h26l6-12 9 22 7-24h59"/></svg>
-    </div>
     <div class="mf-tools">
-      <button class="mf-iconbtn ft-bell" type="button" data-fluxtimer-toggle aria-label="FluxTimer öffnen" aria-expanded="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg><span class="ft-bell-dot" aria-hidden="true"></span></button>
+      <button class="mf-iconbtn ft-trigger" type="button" data-fluxtimer-toggle aria-label="FluxTimer öffnen" aria-expanded="false">
+        <svg class="ft-trigger-icon" viewBox="0 0 24 24" aria-hidden="true">
+          <rect x="2.5" y="5" width="19" height="14" rx="3"/>
+          <text x="12" y="15.1" text-anchor="middle">88</text>
+          <path d="M6 2.5v2M18 2.5v2M6 19.5v2M18 19.5v2"/>
+        </svg>
+        <span class="ft-trigger-dot" aria-hidden="true"></span>
+      </button>
+      <button class="mf-iconbtn" type="button" aria-label="Benachrichtigungen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg></button>
       <div class="mf-search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></svg><input placeholder="Suche..."></div>
       <button class="mf-theme"></button>
       <form th:action="@{/logout}" method="post" style="display:inline">