From c0d4598191351f3ed1355343b5f4bad695100821 Mon Sep 17 00:00:00 2001
From: jamulix <fritzchem@linix.de>
Date: Sat, 25 Oct 2025 04:48:56 +0200
Subject: [PATCH] Breitere Darstellung auf Desktop / Statistik Theme angepasst

---
 templates/index.html      |  4 +--
 templates/statistics.html | 60 ++++++++++++++++++++++++++++++++++++---
 2 files changed, 58 insertions(+), 6 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index e24d914..e0f4b8a 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -11,7 +11,7 @@
 <body class="bg-light" data-bs-theme="light">
     <div class="container py-4">
         <div class="row justify-content-center">
-            <div class="col-md-8">
+            <div class="col-12">
                 <div class="card shadow">
                     <div class="card-header bg-primary text-white">
                         <div class="d-flex justify-content-between align-items-center">
@@ -160,7 +160,7 @@
 
     <!-- Hilfe Modal -->
     <div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="helpModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-lg">
+        <div class="modal-dialog modal-dialog-centered" style="max-width: 900px;">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title" id="helpModalLabel">Typewriter Trainer - Hilfe</h5>
diff --git a/templates/statistics.html b/templates/statistics.html
index 5b97bda..2fa5d99 100644
--- a/templates/statistics.html
+++ b/templates/statistics.html
@@ -7,18 +7,25 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
 </head>
 <body class="bg-light" data-bs-theme="light">
     <div class="container py-4">
         <div class="row justify-content-center">
-            <div class="col-md-10">
+            <div class="col-12">
                 <div class="card shadow">
                     <div class="card-header bg-primary text-white">
                         <div class="d-flex justify-content-between align-items-center">
                             <h2 class="mb-0">Lektionsstatistik</h2>
-                            <button onclick="window.location.href='/'" class="btn btn-outline-light">
-                                Zurück zum Training
-                            </button>
+                            <div class="d-flex align-items-center gap-2">
+                                <div id="theme-toggle" style="width: 24px; height: 24px; cursor: pointer; position: relative;">
+                                    <i data-lucide="sun" id="theme-toggle-sun" style="width: 24px; height: 24px; position: absolute; top: 0; left: 0;"></i>
+                                    <i data-lucide="moon" id="theme-toggle-moon" style="width: 24px; height: 24px; position: absolute; top: 0; left: 0; display: none;"></i>
+                                </div>
+                                <button onclick="window.location.href='/'" class="btn btn-outline-light">
+                                    Zurück zum Training
+                                </button>
+                            </div>
                         </div>
                     </div>
                     <div class="card-body">
@@ -60,6 +67,51 @@
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     
+    <script>
+        // Theme Management
+        function initializeTheme() {
+            // Beim ersten Start Light-Modus, sonst gespeicherten Modus verwenden
+            const savedTheme = localStorage.getItem('theme') || 'light';
+            document.body.setAttribute('data-bs-theme', savedTheme);
+            updateThemeButton(savedTheme);
+        }
+
+        function toggleTheme() {
+            const currentTheme = document.body.getAttribute('data-bs-theme');
+            const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+            document.body.setAttribute('data-bs-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            updateThemeButton(newTheme);
+            
+            // Aktualisiere die Diagrammfarben für das neue Theme
+            if (currentChart) {
+                const lessonIndex = document.querySelector('.lesson-link.fw-bold.text-danger')?.getAttribute('data-lesson-index');
+                if (lessonIndex !== undefined) {
+                    loadLessonStatistics(parseInt(lessonIndex));
+                }
+            }
+        }
+
+        function updateThemeButton(theme) {
+            const sunIcon = document.getElementById('theme-toggle-sun');
+            const moonIcon = document.getElementById('theme-toggle-moon');
+            if (theme === 'dark') {
+                sunIcon.style.display = 'none';
+                moonIcon.style.display = 'block';
+            } else {
+                sunIcon.style.display = 'block';
+                moonIcon.style.display = 'none';
+            }
+        }
+
+        // Theme initialisieren
+        document.addEventListener('DOMContentLoaded', function() {
+            lucide.createIcons();
+            initializeTheme();
+            document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
+        });
+    </script>
+    
     <script>
         let currentChart = null;
 
