Volle Mindflux-App ins Deploy-Repo übernehmen

Ersetzt das Hello-World-Gerüst durch die vollständige Anwendung
(com.example.mindflux: 64 Klassen, Thymeleaf-Templates, Static-Assets,
Flyway V1–V6). Deploy-Infrastruktur (.gitea, Dockerfile) bleibt erhalten.

- pom: volle Abhängigkeiten (Security, Thymeleaf, JPA, Flyway), Spring Boot 3.4.4 / Java 17
- docker-compose: SPRING_DATASOURCE_* unverändert; App lauscht auf 8080
  (nginx -> mindflux:8080); Uploads-Volume; Admin-Passwörter via Gitea-Secrets
- Workflow: Deploy-Step injiziert MINDFLUX_ADMIN*_PASSWORD aus Secrets
- .dockerignore ergänzt; Hello-World (com.mindflux) und Test-Datei 'main' entfernt

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/main/resources/templates/progress.html

@@ -0,0 +1,154 @@
+<!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>Fortschritt – Mindflux</title>
+    <link rel="stylesheet" href="/css/theme.css">
+    <script src="/js/theme.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        .mf-progress-summary { display:flex; flex-wrap:wrap; align-items:center; gap:2rem; }
+        .mf-circular { position:relative; width:180px; height:180px; flex:0 0 auto; }
+        .mf-circular canvas { width:180px !important; height:180px !important; }
+        .mf-percentage { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--heading); font-size:1.6rem; font-weight:800; text-shadow:0 0 14px var(--glow-s); }
+        .mf-progress-info { flex:1; min-width:220px; }
+        .mf-progress-info p { color:var(--text); margin:.35rem 0; font-size:.92rem; }
+        .mf-progress-info strong { color:var(--heading); }
+        .mf-game-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }
+        .mf-game-card { background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:1rem; }
+        .mf-game-card h3 { color:var(--heading); font-size:1.05rem; margin-bottom:.5rem; }
+        .mf-game-card p { color:var(--muted); font-size:.84rem; margin:.25rem 0; }
+        .mf-game-card p span { color:var(--text); }
+        .mf-section-title { color:var(--accent); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.9rem; }
+        .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 href="/profile" class="mf-back">⟵ Zurück zum Profil</a>
+    </div>
+    <span class="mf-eyebrow">Dein Fortschritt</span>
+    <h1 style="color:var(--heading); font-size:2.1rem; font-weight:800; margin:.3rem 0 .25rem;">Dein Fortschritt</h1>
+    <p style="color:var(--muted); margin-bottom:1.4rem;">Bleib am Ball – jeder Schritt zählt!</p>
+
+    <!-- Gesamtfortschritt -->
+    <section class="mf-panel accent" style="margin-bottom:1.2rem;">
+        <div class="mf-progress-summary">
+            <div class="mf-circular">
+                <canvas id="progressCircle"></canvas>
+                <p class="mf-percentage" th:text="${xpPercentage + '%'}">78%</p>
+            </div>
+            <div class="mf-progress-info">
+                <p><strong>Korrekte Antworten:</strong> <span th:text="${correctAnswers}">432</span></p>
+                <p><strong>Level:</strong> <span th:text="${userLevel}">5</span></p>
+                <div class="mf-bar" style="margin:.6rem 0 .4rem;"><i th:style="'width:' + ${xpPercentage} + '%'"></i></div>
+                <p><span th:text="${currentXp}">2400</span> / <span th:text="${xpForNextLevel}">3000</span> XP</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- Lernzeit pro Woche -->
+    <section class="mf-panel" style="margin-bottom:1.2rem;">
+        <h2 class="mf-section-title">Lernzeit – Diese Woche</h2>
+        <canvas id="learnTimeChart" width="600" height="180"></canvas>
+    </section>
+
+    <!-- Fortschritt pro Spiel -->
+    <section class="mf-panel" th:if="${gameProgress != null}" style="margin-bottom:1.2rem;">
+        <h2 class="mf-section-title">Spiel-Fortschritte</h2>
+        <div class="mf-game-grid">
+            <div class="mf-game-card" th:each="game : ${gameProgress}">
+                <h3 th:text="${game.name}">Hangman</h3>
+                <p>Fortschritt: <span th:text="${game.progressPercent}">65</span>%</p>
+                <div class="mf-bar" style="margin:.4rem 0;"><i th:style="'width:' + ${game.progressPercent} + '%'"></i></div>
+                <p>Beste Punktzahl: <span th:text="${game.highscore}">1200</span></p>
+                <p>Gespielt: <span th:text="${game.plays}">15</span>×</p>
+                <p>Letzter Zugriff: <span th:text="${game.lastPlayed}">14.04.2025</span></p>
+            </div>
+        </div>
+    </section>
+
+</div>
+
+<!-- Diagramme -->
+<script th:inline="none">
+    // Theme-Tokens auslesen, damit die Charts in Dark (Grün) & Light (Magenta) passen
+    const css = getComputedStyle(document.documentElement);
+    const accent = css.getPropertyValue('--accent').trim() || '#2bd96a';
+    const track  = css.getPropertyValue('--surface-2').trim() || '#2c2c2c';
+    const tick   = css.getPropertyValue('--text').trim() || '#f1f1f1';
+    const grid   = css.getPropertyValue('--border').trim() || '#333';
+
+    // Kreisdiagramm
+    const ctx = document.getElementById('progressCircle').getContext('2d');
+    new Chart(ctx, {
+        type: 'doughnut',
+        data: {
+            datasets: [{
+                data: [78, 22], // Achtung: Dummywerte, kannst du später dynamisch machen
+                backgroundColor: [accent, track],
+                borderWidth: 0
+            }]
+        },
+        options: {
+            cutout: '75%',
+            plugins: {
+                legend: { display: false }
+            }
+        }
+    });
+
+    // Lernzeit-Balkendiagramm
+    const learnCtx = document.getElementById('learnTimeChart').getContext('2d');
+    new Chart(learnCtx, {
+        type: 'bar',
+        data: {
+            labels: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'],
+            datasets: [{
+                label: 'Lernzeit (Minuten)',
+                data: [30, 45, 20, 60, 50, 0, 10], // Beispielwerte
+                backgroundColor: accent,
+                borderRadius: 6
+            }]
+        },
+        options: {
+            plugins: {
+                legend: {
+                    labels: { color: tick }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: { color: tick },
+                    grid: { color: grid }
+                },
+                y: {
+                    beginAtZero: true,
+                    ticks: { color: tick },
+                    grid: { color: grid }
+                }
+            }
+        }
+    });
+</script>
+
+<!-- Footer -->
+<footer class="mf-footer">
+  <a href="#">Support</a>
+  <a href="#">Feedback</a>
+  <a href="#">Nutzungsbedingungen</a>
+  <a href="#">Richtlinien</a>
+  <a href="#">Datenschutz</a>
+  <a href="#">Impressum</a>
+</footer>
+
+</body>
+</html>