diff --git a/static/css/style.css b/static/css/style.css index 637828f..9cdf7a4 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -351,6 +351,32 @@ body { color: #006400 !important; } +/* Custom Farbe für den Beenden-Button */ +#end-btn { + background-color: #dc3545 !important; + border-color: #dc3545 !important; + color: #FFFFFF !important; +} + +[data-bs-theme="dark"] #end-btn { + background-color: #dc3545 !important; + border-color: #dc3545 !important; + color: #FFFFFF !important; +} + +/* Custom hellgraue Buttons für Leistung und Statistik */ +.btn-light-custom { + background-color: #e9ecef !important; + border-color: #ced4da !important; + color: #212529 !important; +} + +[data-bs-theme="dark"] .btn-light-custom { + background-color: #495057 !important; + border-color: #6c757d !important; + color: #f8f9fa !important; +} + .bg-success { background-color: #90EE90 !important; color: #006400 !important; diff --git a/static/js/script.js b/static/js/script.js index fa3cd15..6d8eaff 100644 --- a/static/js/script.js +++ b/static/js/script.js @@ -498,7 +498,7 @@ document.addEventListener('DOMContentLoaded', function() { // Toggle-Funktionalität für Fortschritt und Statistik (beide gleichzeitig) function initializeProgressStatsToggle() { - const progressToggle = document.querySelector('.progress-toggle'); + const performanceBtn = document.getElementById('performance-btn'); // Lade gespeicherten Zustand aus localStorage const progressStatsVisible = localStorage.getItem('progressStatsVisible') !== 'false'; @@ -506,31 +506,26 @@ document.addEventListener('DOMContentLoaded', function() { // 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'); + // Event-Listener für Performance-Button + performanceBtn.addEventListener('click', function() { + const isVisible = document.querySelector('.progress-stats-container').style.display === 'block'; 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'); + const progressContainer = document.querySelector('.progress-stats-container'); + const performanceBtn = document.getElementById('performance-btn'); if (visible) { - progressContainers.forEach(container => { - container.style.display = 'block'; - }); - icon.classList.remove('fa-chevron-right'); - icon.classList.add('fa-chevron-down'); + progressContainer.style.display = 'block'; + performanceBtn.classList.remove('btn-light-custom'); + performanceBtn.classList.add('btn-primary'); } else { - progressContainers.forEach(container => { - container.style.display = 'none'; - }); - icon.classList.remove('fa-chevron-down'); - icon.classList.add('fa-chevron-right'); + progressContainer.style.display = 'none'; + performanceBtn.classList.remove('btn-primary'); + performanceBtn.classList.add('btn-light-custom'); } } diff --git a/templates/index.html b/templates/index.html index 6594ba1..a84b02f 100644 --- a/templates/index.html +++ b/templates/index.html @@ -50,61 +50,6 @@ - -
-
-
-
-
- Fortschritt -
-
-
-
    -
  • - Korrekte Zeichen - 0 -
    • -
  • - Falsche Zeichen - 0 -
    • -
  • - Tastaturanschläge - 0 -
    • -
-
-
-
- -
-
-
-
- Statistik -
-
-
-
    -
  • - Zeichen pro Minute (ZPM) - 0 -
    • -
  • - Fehler in % - 0 -
    • -
  • - Wörter pro Minute (WPM) - 0 -
    • -
-
-
-
-
-
Lektionen
@@ -120,13 +65,66 @@ {% endfor %}
+ + + -
- - + +