FluxTimer und Fundament für neue Spiele umsetzen

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>