Anpassen des Timers-Pausen-Funktion && Create SettingsView with Animation

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 {
+.openSettingsbg {
-    height: 8vh; 
+    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 {

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();
+    if (!isRunning) {
-    localStorage.setItem('startTime', startTime);
+        const startTime = Date.now() - elapsedTime * 1000;  // Berücksichtige die bereits vergangene Zeit
-    timerIsRunning();
+        localStorage.setItem('startTime', startTime);
-    startTimer(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;
     }
 });

app/templates/app/base.html

@@ -15,14 +15,15 @@
 </head>
 <body id="body" style="overflow: hidden;" class="bg-white-color">
     <!-- HEADER -->
-    <div class="container-fluid header-bg-block bg-white-color" id="header-bg-block">
+    <div class="container-fluid header-bg-block bg-white-color HeaderDefaultHeightbg" id="header-bg-block">
-        <div class="container-fluid row justify-content-around header-color-block text-center bg-white-color" id="header-color-block" style="color: white; width: 108vw;">
+        <div class="container-fluid row justify-content-around header-color-block text-center bg-white-color HeaderDefaultHeightcolor" id="header-color-block" style="color: white; width: 108vw;">
             
             <span class="col-3 d-none" id="refresh_icon"><img onclick="window.location.reload();" src="{% static 'app/images/refresh.png' %}" alt="Settings" class="img-fluid" id="image" style="width: 40%; opacity: 0.75; padding-top: 0.65rem;"></span>
             
-            <h2 id="HeaderText" class="pt-2" style="display: none;"><b>PIO</b><b style="color: rgb(120,170,86);">MINT</b></h2>
+            <h3 id="HeaderText" class="pt-2" style="display: none;"><b>PIO</b><b style="color: rgb(120,170,86);">MINT</b></h3>
             
             <span class="col-3 d-none" id="settings_icon"><img src="{% static 'app/images/settings.png' %}" alt="Settings" class="img-fluid" id="image" style="width: 40%; opacity: 0.75; padding-top: 0.65rem;"></span>
+            <span class="col-3 d-none" id="settings_close_icon"><img src="{% static 'app/images/close.png' %}" alt="SettingsClose" class="img-fluid" id="image" style="width: 40%; opacity: 0.75; padding-top: 0.65rem;"></span>
 
         </div>
     </div>

app/templates/app/home.html

@@ -88,6 +88,9 @@
 </div>
 
 <script>
+
+    /* ALLES RUND UM DIE WILLKOMMENSMELDUNG */
+
     function setAllOk() {
         document.getElementById('welcome_content').style.display = 'none';
         document.getElementById('dashboard').classList.remove('d-none');
@@ -102,6 +105,26 @@
 
     const ReadingState = localStorage.getItem('infoReadAllRead');
     if (ReadingState === "true") {setAllOk();}
+
+    /* Verarbeitung der Einstellungen */
+
+    const settingsIcon = document.getElementById('settings_icon')
+    settingsIcon.addEventListener('click', () => {
+        document.getElementById('header-bg-block').classList.replace('HeaderDefaultHeightbg', 'openSettingsbg')
+        document.getElementById('header-bg-block').classList.replace('closeSettingsbg', 'openSettingsbg')
+        document.getElementById('header-color-block').classList.replace('HeaderDefaultHeightcolor', 'openSettingscolor')
+        document.getElementById('header-color-block').classList.replace('closeSettingscolor', 'openSettingscolor')
+        document.getElementById('refresh_icon').style.opacity = 0;
+        document.getElementById('settings_icon').classList.add('d-none');
+       document.getElementById('settings_close_icon').classList.remove('d-none');
+    })
+    document.getElementById('settings_close_icon').addEventListener('click', () => {
+        document.getElementById('header-bg-block').classList.replace('openSettingsbg', 'closeSettingsbg')
+        document.getElementById('header-color-block').classList.add('openSettingscolor', 'closeSettingscolor')
+        document.getElementById('settings_icon').classList.remove('d-none');
+        document.getElementById('settings_close_icon').classList.add('d-none');
+        document.getElementById('refresh_icon').style.opacity = 1;
+    })
 </script>
 
 {% endblock %}