FluxTimer und Fundament für neue Spiele umsetzen

src/main/resources/templates/dashboard.html

@@ -48,7 +48,7 @@
       <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" 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>
+      <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>
       <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">

src/main/resources/templates/legal/datenschutz.html

@@ -34,7 +34,7 @@
   </div>
 
   <h1>Datenschutzerklärung</h1>
-  <p class="stand">Stand: Juni 2026</p>
+  <p class="stand">Stand: Juli 2026</p>
 
   <div class="dev-note">
     Hinweis: Mindflux befindet sich in aktiver Entwicklung und ist derzeit nicht für die öffentliche
@@ -87,6 +87,17 @@
     im Rahmen von Tests zurückgesetzt werden.
   </p>
 
+  <h2>6a. Lokale Einstellungen und FluxTimer</h2>
+  <p>
+    Theme-Auswahl und FluxTimer-Einstellungen werden ausschließlich im lokalen Browserspeicher
+    (<code>localStorage</code>) des verwendeten Geräts abgelegt. Dazu gehören Aktivierungsstatus,
+    Intervall, ausgewählte Erinnerungsarten, optionaler eigener Erinnerungstext sowie der nächste
+    und letzte Auslösezeitpunkt. Diese Angaben werden nicht an den Mindflux-Server übertragen und
+    können durch Löschen der Website-Daten im Browser entfernt werden. Browser-Benachrichtigungen
+    werden nur nach ausdrücklicher Freigabe lokal erzeugt; es gibt keinen Web-Push- oder externen
+    Benachrichtigungsdienst.
+  </p>
+
   <h2>7. Empfänger und Hosting</h2>
   <p>
     Die Daten werden auf einer vom Anbieter betriebenen Server-Infrastruktur verarbeitet und nicht zu

src/main/resources/templates/settings.html

@@ -52,6 +52,50 @@
     <small class="mf-hint">Die Auswahl gilt sofort und wird auf diesem Gerät gespeichert.</small>
   </section>
 
+  <!-- FluxTimer: vollständig lokal im Browser, keine Serverdaten -->
+  <section class="mf-panel ft-settings" style="margin-bottom:1.2rem;" data-fluxtimer-settings>
+    <div class="ft-settings-head">
+      <div>
+        <h2 class="mf-section-title">⏱ FluxTimer</h2>
+        <p>Erinnert dich während des Lernens ans Aufstehen, Trinken oder Durchatmen.</p>
+      </div>
+      <label class="ft-switch">
+        <input id="ft-enabled" type="checkbox" data-ft-field="enabled">
+        <span aria-hidden="true"></span><b>Aktiv</b>
+      </label>
+    </div>
+    <div class="ft-settings-grid">
+      <div class="mf-field">
+        <label class="mf-label" for="ft-interval">Intervall in Minuten</label>
+        <input class="mf-input" id="ft-interval" type="number" min="5" max="240" step="1" value="45" data-ft-field="intervalMinutes">
+        <small class="mf-hint">Zwischen 5 und 240 Minuten.</small>
+      </div>
+      <div class="ft-preview" aria-live="polite">
+        <span>NÄCHSTE PAUSE</span>
+        <strong data-ft-countdown>--:--:--</strong>
+      </div>
+    </div>
+    <fieldset class="ft-reminders">
+      <legend class="mf-label">Erinnerungen rotieren</legend>
+      <label class="mf-check"><input type="checkbox" value="aufstehen" data-ft-reminder> Aufstehen 🧍</label>
+      <label class="mf-check"><input type="checkbox" value="trinken" data-ft-reminder> Trinken 💧</label>
+      <label class="mf-check"><input type="checkbox" value="essen" data-ft-reminder> Essen 🍎</label>
+      <label class="mf-check"><input type="checkbox" value="augenpause" data-ft-reminder> Augenpause 👀</label>
+    </fieldset>
+    <div class="mf-field">
+      <label class="mf-label" for="ft-custom">Eigener Erinnerungstext</label>
+      <input class="mf-input" id="ft-custom" maxlength="120" placeholder="Zum Beispiel: Schultern lockern" data-ft-field="customText">
+    </div>
+    <div class="ft-options">
+      <label class="mf-check"><input type="checkbox" data-ft-field="notify"> Browser-Benachrichtigung</label>
+      <label class="mf-check"><input type="checkbox" data-ft-field="sound"> Dezenter Signalton</label>
+    </div>
+    <div class="ft-settings-actions">
+      <button class="mf-btn outline" type="button" data-ft-test>Probelauf</button>
+      <small class="mf-hint" data-ft-save-status>Wird nur auf diesem Gerät gespeichert.</small>
+    </div>
+  </section>
+
   <!-- Passwort ändern -->
   <form th:action="@{/profile/change-password}" method="post" class="mf-panel" style="margin-bottom:1.2rem;">
     <h2 class="mf-section-title">🔒 Passwort ändern</h2>