mindflux/src/main/resources/templates/progress.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>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">Nutzungsbedingungen</a>
  <a href="/richtlinien">Richtlinien</a>
  <a href="/datenschutz">Datenschutz</a>
  <a href="/impressum">Impressum</a>
</footer>

</body>
</html>