-m "Layout der Buttons optimiert"
This commit is contained in:
jamulix
jamulix (aider)
parent
6f862b5eea
commit
cb09b42657
3 changed files with 95 additions and 76 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -50,61 +50,6 @@
|
|||
</script>
|
||||
|
||||
|
||||
<!-- Fortschritt und Statistik mit Toggle-Funktion -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-6">
|
||||
<div class="card bg-light">
|
||||
<div class="card-header card-header-custom 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
|
||||
<span id="correct" class="badge bg-success rounded-pill">0</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
Falsche Zeichen
|
||||
<span id="incorrect" class="badge bg-danger rounded-pill">0</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
Tastaturanschläge
|
||||
<span id="total" class="badge bg-secondary rounded-pill">0</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card bg-light">
|
||||
<div class="card-header card-header-custom">
|
||||
<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)
|
||||
<span id="speed" class="badge bg-primary rounded-pill">0</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
Fehler in %
|
||||
<span id="error-rate" class="badge bg-danger rounded-pill">0</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
Wörter pro Minute (WPM)
|
||||
<span id="wpm" class="badge bg-info rounded-pill">0</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lektionen -->
|
||||
<div class="mb-4">
|
||||
<h5 class="card-title">Lektionen</h5>
|
||||
|
|
@ -120,13 +65,66 @@
|
|||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fortschritt und Statistik mit Toggle-Funktion -->
|
||||
<div class="progress-stats-container mb-4" style="display: none;">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card bg-light">
|
||||
<div class="card-body">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
Korrekte Zeichen
|
||||
<span id="correct" class="badge bg-success rounded-pill">0</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
Falsche Zeichen
|
||||
<span id="incorrect" class="badge bg-danger rounded-pill">0</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
Tastaturanschläge
|
||||
<span id="total" class="badge bg-secondary rounded-pill">0</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card bg-light">
|
||||
<div class="card-body">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
Zeichen pro Minute (ZPM)
|
||||
<span id="speed" class="badge bg-primary rounded-pill">0</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
Fehler in %
|
||||
<span id="error-rate" class="badge bg-danger rounded-pill">0</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
Wörter pro Minute (WPM)
|
||||
<span id="wpm" class="badge bg-info rounded-pill">0</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="d-flex justify-content-between">
|
||||
<button id="next-btn" class="btn btn-success">
|
||||
<i class="fas fa-arrow-right"></i> Nächster Text
|
||||
<div class="d-flex justify-content-between flex-wrap gap-2">
|
||||
<button id="next-btn" class="btn btn-success flex-fill">
|
||||
<i class="fas fa-arrow-right"></i> Weiter
|
||||
</button>
|
||||
<button id="end-btn" class="btn btn-danger">
|
||||
<button id="performance-btn" class="btn btn-light-custom flex-fill">
|
||||
<i class="fas fa-chart-line"></i> Leistung
|
||||
</button>
|
||||
<button class="btn btn-light-custom flex-fill statistics-link">
|
||||
<i class="fas fa-chart-bar"></i> Statistik
|
||||
</button>
|
||||
<button id="end-btn" class="btn btn-danger flex-fill">
|
||||
<i class="fas fa-times"></i> Beenden
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue