FluxTimer-Icon als Uhr mit Blitz gestalten

CHANGELOG.md

@@ -95,7 +95,7 @@ Docker/CI-Härtung und erste Tests.
   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;
+  FluxTimer besitzt statt der Glocke jetzt ein eigenes Uhr-mit-Blitz-Icon im Zeitreise-Look;
   die Glocke bleibt frei für spätere echte Benachrichtigungen.
 - Datenschutzerklärung um lokale Speicherung und Browser-Benachrichtigung ergänzt.
 

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

@@ -1,7 +1,7 @@
 /* FluxTimer – Zeitschaltkreis-Optik, rein clientseitig. */
 .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-bolt { fill:color-mix(in srgb,currentColor 24%,transparent); stroke-width:1.5; stroke-linejoin:round; }
 .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; }

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=2';
+    timerCss.href = '/css/fluxtimer.css?v=3';
     timerCss.setAttribute('data-fluxtimer', '');
     document.head.appendChild(timerCss);
   }

src/main/resources/templates/dashboard.html

@@ -47,9 +47,9 @@
     <div class="mf-tools">
       <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"/>
+          <circle cx="10.5" cy="12" r="7.5"/>
+          <path d="M10.5 7.5V12l3 2M10.5 2v2M3 12H1.5M4.3 5.8 2.8 4.3"/>
+          <path class="ft-trigger-bolt" d="M17 8.5h4l-2.5 4H22l-6.2 8 1.7-5H14z"/>
         </svg>
         <span class="ft-trigger-dot" aria-hidden="true"></span>
       </button>