refactor(ui): vervang huidig-gebed met huidig-gebed-bottom en verbeter layout

De huidige gebedssectie is verplaatst naar de onderkant van het scherm met absolute positionering. De oude `huidig-gebed` CSS is verwijderd en vervangen door de nieuwe `huidig-gebed-bottom` klasse. Dit zorgt voor een consistentere en responsieve gebruikersinterface. Daarnaast zijn flexbox layouts geïntroduceerd om de tijds- en weersinformatie naast elkaar weer te geven, waardoor de interface op verschillende schermformaten beter functioneert. JavaScript is bijgewerkt om de juiste klasse te selecteren voor de naamweergave in de countdown.

adhan-webapp/static/countdown.js

@@ -71,7 +71,7 @@ function startCountdown(targetTimeStr, prayerName, isNextDay = false) {
 
   // Update de naam met "morgen" indicator als nodig
   const displayName = isNextDay ? `${prayerName} (morgen)` : prayerName;
-  document.querySelector('.huidig-gebed .naam').textContent = displayName;
+  document.querySelector('.huidig-gebed-bottom .naam').textContent = displayName;
 
   function update() {
     const now = new Date();

adhan-webapp/static/style.css

@@ -81,12 +81,14 @@ body.settings-page {
   flex: 1;
   background: url('/static/moskee.png') center/cover no-repeat;
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
 .overlay {
   background: rgba(0, 0, 0, 0.3);
   color: #fff;
-  height: 100%;
+  flex: 1;
   padding: 2rem;
   display: flex;
   flex-direction: column;
@@ -97,6 +99,7 @@ body.settings-page {
 
 .tijdstip {
   margin-bottom: 2rem;
+  flex: 0 0 auto;
 }
 
 .tijdstip #current-time {
@@ -180,34 +183,7 @@ body.settings-page {
   text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
 }
 
-.huidig-gebed {
+/* Oude huidig-gebed CSS verwijderd - nu huidig-gebed-bottom gebruikt */
-  margin-top: auto;
-  width: 100%;
-  max-width: 100%;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  z-index: 2;
-  padding-bottom: 2rem;
-}
-
-.huidig-gebed .naam {
-  font-family: 'Cairo', Arial, sans-serif;
-  font-size: 4rem;
-  font-weight: 700;
-  margin-bottom: 0.5rem;
-  color: #fff;
-  text-shadow: 2px 2px 8px #000;
-}
-
-#countdown {
-  font-size: 6rem;
-  font-weight: bold;
-  margin-top: 0.5rem;
-  color: #fff;
-  text-shadow: 2px 2px 8px #000;
-}
 
 .right {
   flex: 1;
@@ -389,16 +365,93 @@ blockquote footer {
     flex-wrap: wrap;
     justify-content: center;
   }
+  
+  /* Tijd-weer layout voor tablets */
+  .tijd-weer-row {
+    gap: 2rem;
+  }
+  
+  .weather-section-left {
+    max-width: 250px;
+  }
+  
   .left {
     min-height: 40vh;
   }
+  
+  .overlay {
+    min-height: 40vh;
+  }
+  
+  /* Tijd-weer layout responsive */
+  .tijd-weer-row {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: flex-start;
+  }
+  
+  .weer-column {
+    margin-top: 0;
+    width: 100%;
+  }
+  
+  /* Weer sectie links responsive */
+  .weather-section-left {
+    padding: 1rem;
+    max-width: none;
+  }
+  
+  .weather-section-left .weather-temp {
+    font-size: 1.5rem;
+  }
+  
+  .weather-section-left .weather-desc {
+    font-size: 0.9rem;
+  }
+  
+  .weather-section-left .weather-details {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  
+  .weather-section-left .weather-detail {
+    font-size: 0.8rem;
+    text-align: left;
+  }
+  
+  /* Huidig gebed bottom responsive */
+  .huidig-gebed-bottom {
+    padding: 1.5rem;
+  }
+  
+  .huidig-gebed-bottom .naam {
+    font-size: 2rem;
+  }
+  
+  .huidig-gebed-bottom #countdown {
+    font-size: 3rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .tijd-weer-row {
+    gap: 1.5rem;
+  }
+  
+  .weather-section-left {
+    max-width: 220px;
+  }
+  
+  .weather-section-left .weather-temp {
+    font-size: 1.8rem;
+  }
 }
 
 @media (max-width: 600px) {
   .tijdstip #current-time, #countdown {
     font-size: 2.2rem;
   }
-  .huidig-gebed .naam {
+  .huidig-gebed-bottom .naam {
     font-size: 1.2rem;
   }
   .right {
@@ -423,10 +476,22 @@ blockquote footer {
     font-size: 0.9rem;
   }
   
+  /* Tijd-weer layout responsive */
+  .tijd-weer-row {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: flex-start;
+  }
+  
+  .weer-column {
+    margin-top: 0;
+    width: 100%;
+  }
+  
   /* Weer sectie links responsive */
   .weather-section-left {
-    margin-top: 1.5rem;
     padding: 1rem;
+    max-width: none;
   }
   
   .weather-section-left .weather-temp {
@@ -446,6 +511,19 @@ blockquote footer {
     font-size: 0.8rem;
     text-align: left;
   }
+  
+  /* Huidig gebed bottom responsive */
+  .huidig-gebed-bottom {
+    padding: 1.5rem;
+  }
+  
+  .huidig-gebed-bottom .naam {
+    font-size: 2rem;
+  }
+  
+  .huidig-gebed-bottom #countdown {
+    font-size: 3rem;
+  }
 }
 
 .right.new-layout {
@@ -1105,13 +1183,15 @@ html.dark .hadith-center {
 
 /* Weer sectie in linker overlay */
 .weather-section-left {
-  margin-top: 2rem;
+  margin-top: 0;
-  padding: 1.5rem;
+  padding: 1.2rem;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 8px;
   font-family: 'Cairo', Arial, sans-serif;
   backdrop-filter: blur(10px);
+  width: 100%;
+  max-width: 300px;
 }
 
 .weather-section-left .weather-info {
@@ -1162,3 +1242,53 @@ html.dark .hadith-center {
   font-family: 'Lato', sans-serif;
   text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
 }
+
+.tijd-weer-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 3rem;
+  margin-bottom: 1rem;
+}
+
+.tijd-column {
+  flex: 0 0 auto;
+}
+
+.weer-column {
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  margin-top: 1rem;
+}
+
+/* Huidig gebed sectie onderaan het scherm */
+.huidig-gebed-bottom {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 2rem;
+  background: rgba(0, 0, 0, 0.4);
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  z-index: 10;
+}
+
+.huidig-gebed-bottom .naam {
+  font-family: 'Cairo', Arial, sans-serif;
+  font-size: 4rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+  color: #fff;
+  text-shadow: 2px 2px 8px #000;
+}
+
+.huidig-gebed-bottom #countdown {
+  font-size: 6rem;
+  font-weight: bold;
+  margin-top: 0.5rem;
+  color: #fff;
+  text-shadow: 2px 2px 8px #000;
+}

adhan-webapp/templates/index.html

@@ -15,33 +15,39 @@
     <div class="left">
       <div class="overlay">
         <div class="tijdstip">
-          <div id="current-time">--:--</div>
+          <div class="tijd-weer-row">
+            <div class="tijd-column">
+              <div id="current-time">--:--</div>
+            </div>
+            <div class="weer-column">
+              <!-- Weer sectie naast de tijd -->
+              <div class="weather-section-left">
+                <div class="weather-info">
+                  <div class="weather-main">
+                    <span class="weather-temp">{{ weather.temperature }}°C</span>
+                    <span class="weather-desc">{{ weather.description }}</span>
+                  </div>
+                  <div class="weather-details">
+                    <span class="weather-detail">Voelt als {{ weather.feels_like }}°C</span>
+                    <span class="weather-detail">Vochtigheid {{ weather.humidity }}%</span>
+                    <span class="weather-detail">Wind {{ weather.wind_speed }} km/h</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
           <div class="datum-sectie">
             <div class="gregorian-datum">{{ date_info.gregorian_full }}</div>
             <div class="hijri-datum-arabic">{{ date_info.hijri_arabic }}</div>
             <div class="hijri-datum-dutch">{{ date_info.hijri_dutch }}</div>
           </div>
-          
-          <!-- Weer sectie naast de tijd -->
-          <div class="weather-section-left">
-            <div class="weather-info">
-              <div class="weather-main">
-                <span class="weather-temp">{{ weather.temperature }}°C</span>
-                <span class="weather-desc">{{ weather.description }}</span>
-              </div>
-              <div class="weather-details">
-                <span class="weather-detail">Voelt als {{ weather.feels_like }}°C</span>
-                <span class="weather-detail">Vochtigheid {{ weather.humidity }}%</span>
-                <span class="weather-detail">Wind {{ weather.wind_speed }} km/h</span>
-              </div>
-            </div>
-          </div>
         </div>
+      </div>
       
-        <div class="huidig-gebed">
+      <!-- Huidig gebed sectie onderaan -->
-          <div class="naam">{{ next_name }}</div>
+      <div class="huidig-gebed-bottom">
-          <div id="countdown">--:--:--</div>
+        <div class="naam">{{ next_name }}</div>
-        </div>
+        <div id="countdown">--:--:--</div>
       </div>
     </div>
 

done

@@ -55,3 +55,7 @@ Wed May 28 07:49:43 CEST 2025: Zijmenu layout gerepareerd - compact sidebar toeg
 Wed May 28 07:51:11 CEST 2025: Scheiding hersteld - hadith sectie terug naar rechts met witte achtergrond, behoud van scheiding tussen links (tijd/countdown) en rechts (hadith + zijmenu)
 Wed May 28 07:52:07 CEST 2025: Hadith sectie theme-responsive gemaakt - gebruikt nu var(--card-bg) en var(--text-color) voor correcte dark/light mode ondersteuning
 Wed May 28 07:53:43 CEST 2025: Weer sectie verplaatst van rechts naar links naast de tijd - nu in overlay met glasmorphism effect en witte tekst met schaduw
+Wed May 28 07:56:25 CEST 2025: Weer sectie verplaatst naast de tijd op dezelfde hoogte - nieuwe tijd-weer-row layout met flexbox, responsive voor alle schermformaten
+Wed May 28 07:58:00 CEST 2025: Huidig-gebed sectie gefixeerd onderaan scherm - margin-top: auto en flex layout aangepast voor correcte positionering
+Wed May 28 08:02:14 CEST 2025: Huidig-gebed sectie echt onderaan scherm geplaatst - absolute positioning bottom:0, oude CSS verwijderd, nieuwe huidig-gebed-bottom klasse
+Wed May 28 08:02:50 CEST 2025: Countdown gerepareerd - JavaScript aangepast om huidig-gebed-bottom klasse te gebruiken in plaats van huidig-gebed