mindflux/src/main/resources/templates/settings.html

<!DOCTYPE html>
<html lang="de" data-theme="dark" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mindflux – Einstellungen</title>
  <link rel="stylesheet" href="/css/theme.css">
  <script src="/js/theme.js"></script>
  <style>
    .mf-section-title { color:var(--accent); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.9rem; }
    .mf-check { display:flex; align-items:center; gap:.55rem; color:var(--text); font-size:.92rem; margin:.5rem 0; cursor:pointer; }
    .mf-check input { width:18px; height:18px; accent-color:var(--accent); }
    .mf-hint { color:var(--muted); font-size:.78rem; display:block; margin-top:.5rem; }
    .mf-footer { text-align:center; color:var(--muted); font-size:.82rem; padding:1.6rem 1rem; }
    .mf-footer a { color:var(--muted); text-decoration:none; margin:0 .15rem; }
    .mf-footer a:hover { color:var(--accent); }
  </style>
</head>
<body>

<div class="mf-theme-float"><button class="mf-theme"></button></div>

<div class="mf-container">

  <div class="mf-page-head">
    <a th:href="@{/dashboard}" class="mf-back">⟵ Zurück zum Dashboard</a>
  </div>
  <span class="mf-eyebrow">Einstellungen</span>
  <h1 style="color:var(--heading); font-size:1.9rem; font-weight:800; margin:.3rem 0 .25rem;">⚙️ Einstellungen</h1>
  <p style="color:var(--muted); margin-bottom:1.4rem;">Passe Mindflux nach deinen Wünschen an</p>

  <nav th:replace="~{fragments/layout :: profileTabs('einstellungen')}"></nav>

  <!-- Flash-Meldungen (z. B. nach Passwortänderung) -->
  <div th:if="${message}" class="mf-panel accent mf-success" style="margin-bottom:1.2rem;">
    <p th:text="${message}" style="color:var(--accent); margin:0;"></p>
  </div>
  <div th:if="${error}" class="mf-panel mf-error" style="margin-bottom:1.2rem;">
    <p th:text="${error}" style="color:var(--danger); margin:0;"></p>
  </div>

  <!-- Theme-Einstellung (an theme.js gekoppelt, wird in localStorage gespeichert) -->
  <section class="mf-panel" style="margin-bottom:1.2rem;">
    <h2 class="mf-section-title">Theme wechseln</h2>
    <div class="mf-field">
      <label class="mf-label" for="theme-select">Modus auswählen:</label>
      <select class="mf-select" id="theme-select">
        <option value="dark">Standard (Dark)</option>
        <option value="light">Hell (Light)</option>
      </select>
    </div>
    <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>
    <div class="mf-field">
      <input class="mf-input" type="password" name="oldPassword" placeholder="Aktuelles Passwort" required>
    </div>
    <div class="mf-field">
      <input class="mf-input" type="password" name="newPassword" placeholder="Neues Passwort" required>
    </div>
    <button type="submit" class="mf-btn">Passwort ändern</button>
  </form>

  <!-- Profil löschen -->
  <form th:action="@{/profile/delete}" method="post" onsubmit="return confirm('Profil wirklich löschen?');">
    <button type="submit" class="mf-btn danger">Profil löschen</button>
  </form>

</div>

<script>
  // Theme-Select mit dem zentralen Umschalter (theme.js) koppeln.
  window.addEventListener('DOMContentLoaded', function () {
    var select = document.getElementById('theme-select');
    if (!select || !window.MindfluxTheme) return;
    select.value = window.MindfluxTheme.current() === 'light' ? 'light' : 'dark';
    select.addEventListener('change', function () {
      window.MindfluxTheme.set(select.value);
    });
  });
</script>

<footer class="mf-footer">
  <a href="#">Support</a>
  <a href="#">Feedback</a>
  <a href="/nutzungsbedingungen">Nutzungsbedingungen</a>
  <a href="/richtlinien">Richtlinien</a>
  <a href="/datenschutz">Datenschutz</a>
  <a href="/impressum">Impressum</a>
</footer>

</body>
</html>