-m "Toggle bei Fortschritt implementiert"

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."
   }
 ]
 

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;

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();
 });

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)