dschlueter/typewriter_tutor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Breitere Darstellung auf Desktop / Statistik Theme angepasst

Browse source
This commit is contained in:
jamulix 2025-10-25 04:48:56 +02:00 • committed by jamulix (aider)
commit c0d4598191
2 changed files with 58 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

4
templates/index.html
View file

@ -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>

60
templates/statistics.html
View file

@ -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;