From 4169556d7c4cd8da2c3f62cbb6b7e9973f2880ce Mon Sep 17 00:00:00 2001 From: Samuel Zielke Date: Tue, 10 Sep 2024 01:47:16 +0200 Subject: [PATCH] Anpassen des Timers-Pausen-Funktion && Create SettingsView with Animation --- app/static/app/css/custom.css | 66 ++++++++++++++++++++++++++++++-- app/static/app/images/close.png | Bin 0 -> 6343 bytes app/static/app/js/timer.js | 44 +++++++++++++++------ app/templates/app/base.html | 7 ++-- app/templates/app/home.html | 23 +++++++++++ 5 files changed, 122 insertions(+), 18 deletions(-) create mode 100644 app/static/app/images/close.png diff --git a/app/static/app/css/custom.css b/app/static/app/css/custom.css index 6e0d3e7..4110ee4 100644 --- a/app/static/app/css/custom.css +++ b/app/static/app/css/custom.css @@ -19,6 +19,50 @@ } } +@keyframes openSettingsbg { + 0% { + height: 7vh; + } + 100% { + height: 100vh; + } +} + +@keyframes openSettingscolor { + 0% { + height: 6vh; + } + 100% { + height: 95vh; + } +} + +@keyframes closeSettingscolor { + 0% { + height: 95vh; + } + 100% { + height: 6vh; + } +} + +@keyframes closeSettingsbg { + 0% { + height: 100vh; + } + 100% { + height: 7vh; + } +} + +.HeaderDefaultHeightbg { + height: 7vh; +} + +.HeaderDefaultHeightcolor { + height: 6vh; +} + .slide-out { animation: slide-out 1s forwards; } @@ -27,15 +71,29 @@ animation: fade-in 1s forwards; } -#header-bg-block { - height: 8vh; +.openSettingsbg { + animation: openSettingsbg 1s forwards; +} +.closeSettingsbg { + animation: closeSettingsbg 1s forwards; +} + +.openSettingscolor { + animation: openSettingscolor 1s forwards; +} +.closeSettingscolor { + animation: closeSettingscolor 1s forwards; +} + +.header-bg-block { padding: 0; + overflow: hidden; } -#header-color-block { +.header-color-block { border-bottom-left-radius: 3rem; border-bottom-right-radius: 3rem; - height: 7vh; + overflow: hidden; } .maincontainer { diff --git a/app/static/app/images/close.png b/app/static/app/images/close.png new file mode 100644 index 0000000000000000000000000000000000000000..c897f7c3fe8d669c0d887251b29176aa9bba4465 GIT binary patch literal 6343 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 mpKo{-4a)}{rcCR2zok3+B8kasQ&?lPvExz literal 0 HcmV?d00001 diff --git a/app/static/app/js/timer.js b/app/static/app/js/timer.js index 593d6a8..f4a7963 100644 --- a/app/static/app/js/timer.js +++ b/app/static/app/js/timer.js @@ -1,4 +1,6 @@ let timerInterval; +let elapsedTime = 0; // Zeit, die bereits vergangen ist, bevor der Timer pausiert wurde +let isRunning = false; // Zustand des Timers (läuft oder pausiert) const timerDisplay = document.getElementById('timerDisplay'); const secondsDisplay = document.getElementById('secondsDisplay'); const startButton = document.getElementById('startTimer'); @@ -16,7 +18,7 @@ function displayTime(seconds) { secondsDisplay.textContent = ":" + String(secs).padStart(2, '0'); -} +}; function timerIsRunning() { document.getElementById('startTimer').classList.add('d-none') @@ -38,26 +40,44 @@ function timerIsPause() { document.getElementById('timerDisplay').style.color = 'rdb(43,100,110)' } + // Timer starten und Startzeit im localStorage speichern startButton.addEventListener('click', () => { - const startTime = Date.now(); - localStorage.setItem('startTime', startTime); - timerIsRunning(); - startTimer(startTime); + if (!isRunning) { + const startTime = Date.now() - elapsedTime * 1000; // Berücksichtige die bereits vergangene Zeit + localStorage.setItem('startTime', startTime); + localStorage.setItem('elapsedTime', elapsedTime); // Speichere auch die vergangene Zeit + startTimer(startTime); + timerIsRunning(); + isRunning = true; + } +}); + +// Timer pausieren +pauseButton.addEventListener('click', () => { + if (isRunning) { + clearInterval(timerInterval); + timerIsPause(); + isRunning = false; + const savedStartTime = localStorage.getItem('startTime'); + if (savedStartTime) { + elapsedTime = Math.floor((Date.now() - savedStartTime) / 1000); // Berechne die vergangene Zeit + } + localStorage.setItem('elapsedTime', elapsedTime); // Speichere die vergangene Zeit + } }); // Timer zurücksetzen und Speicher leeren resetButton.addEventListener('click', () => { clearInterval(timerInterval); - localStorage.removeItem('startTime'); + elapsedTime = 0; timerIsReset(); + isRunning = false; + localStorage.removeItem('startTime'); + localStorage.removeItem('elapsedTime'); displayTime(0); }); -pauseButton.addEventListener('click', () => { - -}) - // Timer-Funktion, die die vergangene Zeit seit dem Start berechnet function startTimer(startTime) { clearInterval(timerInterval); // Vorherigen Timer stoppen, falls vorhanden @@ -70,8 +90,10 @@ function startTimer(startTime) { // Überprüfen, ob ein Timer beim Laden der Seite bereits läuft window.addEventListener('load', () => { const savedStartTime = localStorage.getItem('startTime'); - if (savedStartTime) { + elapsedTime = parseInt(localStorage.getItem('elapsedTime')) || 0; + if (savedStartTime && !isRunning) { startTimer(parseInt(savedStartTime)); timerIsRunning(); + isRunning = true; } }); \ No newline at end of file diff --git a/app/templates/app/base.html b/app/templates/app/base.html index 5bc1d07..87aa0ea 100644 --- a/app/templates/app/base.html +++ b/app/templates/app/base.html @@ -15,14 +15,15 @@ -
-
+
+
Settings - + Settings + SettingsClose
diff --git a/app/templates/app/home.html b/app/templates/app/home.html index d22d228..e839a93 100644 --- a/app/templates/app/home.html +++ b/app/templates/app/home.html @@ -88,6 +88,9 @@
{% endblock %}