From fd980b58872df0a14388a550febb254db167d900 Mon Sep 17 00:00:00 2001
From: jamulix <fritzchem@linix.de>
Date: Fri, 24 Oct 2025 12:14:15 +0200
Subject: [PATCH] -m "Toggle bei Fortschritt implementiert"

---
 data/lessons.json    |  2 +-
 static/css/style.css |  8 +++++++-
 static/js/script.js  | 49 +++++++++++++++++++++++++++++++++++++++++---
 templates/index.html | 18 +++++++++++-----
 4 files changed, 67 insertions(+), 10 deletions(-)

diff --git a/data/lessons.json b/data/lessons.json
index 4820af9..4dc7473 100644
--- a/data/lessons.json
+++ b/data/lessons.json
@@ -102,7 +102,7 @@
   {
     "lesson": 21,
     "title": "Kurze Test Lektion",
-    "text": "Dies ist nur ein kurzer Text."
+    "text": "Dies ist nur ein kurzer Text zum Testen."
   }
 ]
 
diff --git a/static/css/style.css b/static/css/style.css
index a8bbc68..d41562f 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -101,19 +101,25 @@ body {
     color: #fff;
 }
 
-/* Statistik Link Styling */
+/* Fortschritt und Statistik Link Styling */
+.progress-toggle,
 .statistics-link {
     cursor: pointer;
     transition: all 0.3s ease;
     color: inherit;
 }
 
+.progress-toggle:hover,
 .statistics-link:hover {
     color: #ffc107 !important;
     text-shadow: 0 0 10px #ffc107, 0 0 20px #ffc107;
     transform: scale(1.05);
 }
 
+.progress-stats-container {
+    transition: all 0.3s ease;
+}
+
 .card {
     border: none;
     border-radius: 10px;
diff --git a/static/js/script.js b/static/js/script.js
index 7885604..dcf1abc 100644
--- a/static/js/script.js
+++ b/static/js/script.js
@@ -443,12 +443,55 @@ document.addEventListener('DOMContentLoaded', function() {
         updateTextHighlighting('', lines[currentLineIndex]);
     }
 
-    // Event-Listener für Statistik-Link
-    document.querySelector('.statistics-link').addEventListener('click', function() {
-        window.location.href = '/statistics';
+    // Event-Listener für Statistik-Link (navigiert zur Statistik-Seite)
+    document.querySelectorAll('.statistics-link').forEach(link => {
+        link.addEventListener('click', function() {
+            window.location.href = '/statistics';
+        });
     });
 
+    // Toggle-Funktionalität für Fortschritt und Statistik (beide gleichzeitig)
+    function initializeProgressStatsToggle() {
+        const progressToggle = document.querySelector('.progress-toggle');
+        
+        // Lade gespeicherten Zustand aus localStorage
+        const progressStatsVisible = localStorage.getItem('progressStatsVisible') !== 'false';
+        
+        // Setze initialen Zustand
+        setProgressStatsVisibility(progressStatsVisible);
+        
+        // Event-Listener für Fortschritt-Toggle
+        progressToggle.addEventListener('click', function() {
+            const isVisible = this.querySelector('i').classList.contains('fa-chevron-down');
+            setProgressStatsVisibility(!isVisible);
+            localStorage.setItem('progressStatsVisible', !isVisible);
+        });
+    }
+    
+    function setProgressStatsVisibility(visible) {
+        const progressToggle = document.querySelector('.progress-toggle');
+        const progressContainers = document.querySelectorAll('.progress-stats-container');
+        const icon = progressToggle.querySelector('i');
+        
+        if (visible) {
+            progressContainers.forEach(container => {
+                container.style.display = 'block';
+            });
+            icon.classList.remove('fa-chevron-right');
+            icon.classList.add('fa-chevron-down');
+        } else {
+            progressContainers.forEach(container => {
+                container.style.display = 'none';
+            });
+            icon.classList.remove('fa-chevron-down');
+            icon.classList.add('fa-chevron-right');
+        }
+    }
+
     // Initialisiere Statistik und Textfarben
     updateLineDisplay();
     updateStatistics('', lines[currentLineIndex]);
+    
+    // Initialisiere Toggle-Funktionalität
+    initializeProgressStatsToggle();
 });
diff --git a/templates/index.html b/templates/index.html
index e1208a6..32daedd 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -63,12 +63,16 @@
                             ></textarea>
                         </div>
                         
-                        <!-- Fortschritt -->
+                        <!-- Fortschritt und Statistik mit Toggle-Funktion -->
                         <div class="row mb-4">
                             <div class="col-md-6">
                                 <div class="card bg-light">
-                                    <div class="card-body">
-                                        <h6 class="card-title">Fortschritt</h6>
+                                    <div class="card-header d-flex justify-content-between align-items-center">
+                                        <h6 class="card-title mb-0 progress-toggle" style="cursor: pointer; user-select: none;">
+                                            <i class="fas fa-chevron-down"></i> Fortschritt
+                                        </h6>
+                                    </div>
+                                    <div class="card-body progress-stats-container">
                                         <ul class="list-group list-group-flush">
                                             <li class="list-group-item d-flex justify-content-between align-items-center">
                                                 Korrekte Zeichen
@@ -89,8 +93,12 @@
                             
                             <div class="col-md-6">
                                 <div class="card bg-light">
-                                    <div class="card-body">
-                                        <h6 class="card-title statistics-link">Statistik</h6>
+                                    <div class="card-header">
+                                        <h6 class="card-title mb-0 statistics-link" style="cursor: pointer;">
+                                            Statistik
+                                        </h6>
+                                    </div>
+                                    <div class="card-body progress-stats-container">
                                         <ul class="list-group list-group-flush">
                                             <li class="list-group-item d-flex justify-content-between align-items-center">
                                                 Zeichen pro Minute (ZPM)