feat(webapp): voeg instelbaar hadith-interval en tabbladen toe

Hadith-interval kan nu via instellingen worden aangepast met de toevoeging van 'hadith_interval_seconds' aan settings.json, settings.html en app.py. De update interval voor hadiths in JavaScript gebruikt deze variabele. Daarnaast is de instellingenpagina herzien en georganiseerd in vier tabbladen: Audio & Volume, Gebedstijden, Functies, Systeem. Nieuwe CSS-styling en JavaScript-functionaliteit zijn toegevoegd om het schakelgedrag van tabbladen te beheren, waarbij de laatst actieve tab in localStorage wordt opgeslagen.

adhan-webapp/app.py

@@ -311,6 +311,9 @@ def instellingen():
         settings['adzkaar_enabled'] = 'adzkaar_enabled' in request.form
         settings['adzkaar_duration'] = int(request.form.get('adzkaar_duration', 5))
         
+        # Hadith instellingen
+        settings['hadith_interval_seconds'] = int(request.form.get('hadith_interval_seconds', 30))
+            
         settings['zones'] = request.form.getlist('zones')
         settings['audio_clip'] = request.form['audio_clip']
 

adhan-webapp/settings.json

@@ -17,5 +17,6 @@
   "volume": 10,
   "adzkaar_enabled": true,
   "adzkaar_duration": 5,
+  "hadith_interval_seconds": 30,
   "debug_mode": true
 }

adhan-webapp/static/hadiths.json

@@ -139,6 +139,398 @@
     {
       "text": "Zeg het goede of zwijg.",
       "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Wie de weg van geduld bewandelt, Allah zal hem steunen.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Degene die anderen vergeeft, Allah zal hem verhogen in eer.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "Allah houdt van degenen die berouw tonen.",
+      "bron": "Koran 2:222"
+    },
+    {
+      "text": "De beste mensen zijn degenen die het meest van nut zijn voor anderen.",
+      "bron": "Al-Mu’jam al-Awsat"
+    },
+    {
+      "text": "Wees zachtmoedig, want Allah houdt van zachtheid in alle zaken.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Wie een tekortkoming van zijn broeder bedekt, Allah zal zijn tekortkomingen bedekken op de Dag des Oordeels.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "Allah is met de geduldigen.",
+      "bron": "Koran 2:153"
+    },
+    {
+      "text": "De sterkste band van geloof is liefde omwille van Allah en haat omwille van Allah.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Dien je ouders goed, zodat je kinderen jou goed behandelen.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Spreek vriendelijk tot mensen.",
+      "bron": "Koran 2:83"
+    },
+    {
+      "text": "Allah geeft wijsheid aan wie Hij wil.",
+      "bron": "Koran 2:269"
+    },
+    {
+      "text": "Geef aalmoezen, want aalmoezen wissen zonden uit zoals water vuur dooft.",
+      "bron": "Tirmidhi"
+    },
+    {
+      "text": "Degene die een wees onderhoudt, zal samen met mij in het Paradijs zijn.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Iemand die kennis zoekt, Allah vergemakkelijkt voor hem een weg naar het Paradijs.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "Wie oprecht berouw toont, zijn zonden worden omgezet in goede daden.",
+      "bron": "Koran 25:70"
+    },
+    {
+      "text": "Allah is met degenen die Hem vrezen en goeddoeners zijn.",
+      "bron": "Koran 16:128"
+    },
+    {
+      "text": "Wees niet jaloers op elkaar.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "De wereld is een gevangenis voor de gelovige en een paradijs voor de ongelovige.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "Het beste wat een mens kan eten is wat hij met eigen handen verdient.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Vraag Allah om vergeving en gezondheid, want na zekerheid is niets beter dan gezondheid.",
+      "bron": "Sunan Ibn Majah"
+    },
+    {
+      "text": "Het Paradijs ligt aan de voeten van de moeder.",
+      "bron": "Nasa'i"
+    },
+    {
+      "text": "Allah vergeeft wie berouw toont.",
+      "bron": "Koran 39:53"
+    },
+    {
+      "text": "Bid zoals jullie mij hebben zien bidden.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Wees barmhartig voor wie op aarde is, zodat Hij die in de hemel is barmhartig voor jou is.",
+      "bron": "Tirmidhi"
+    },
+    {
+      "text": "De beste rijkdom is tevredenheid.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Iemand die Allah en de Laatste Dag gelooft, laat hem goed zijn voor zijn gast.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Degene die zwijgt, wordt gered.",
+      "bron": "Tirmidhi"
+    },
+    {
+      "text": "Degene die naar de moskee gaat voor het ochtendgebed en avondgebed, Allah zal voor hem het Paradijs bereiden.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Wie rechtvaardig is, zal op lichtende preekstoelen zitten aan de rechterzijde van Allah.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "De beste mensen zijn degenen die het beste zijn voor hun vrouwen.",
+      "bron": "Tirmidhi"
+    },
+    {
+      "text": "De beste onder jullie zijn degenen die de Koran leren en onderwijzen.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Geef elk rechtvaardig persoon zijn recht.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Maak het gemakkelijk en maak het niet moeilijk. Breng goed nieuws en jaag niet weg.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Help elkaar in goedheid en godsvrucht.",
+      "bron": "Koran 5:2"
+    },
+    {
+      "text": "Elke daad van vriendelijkheid is liefdadigheid.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Degene die onderdrukt is en geduldig blijft, Allah zal hem steunen.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Een goede daad wist een slechte uit.",
+      "bron": "Koran 11:114"
+    },
+    {
+      "text": "Allah kijkt niet naar jullie lichamen of uiterlijk, maar naar jullie harten.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "Vraag Allah om leiding en standvastigheid.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "De daden zijn slechts naar intentie.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "De beste mensen zijn degenen die zich het meest bewust zijn van Allah.",
+      "bron": "Koran 49:13"
+    },
+    {
+      "text": "Wees niet arrogant, want Allah houdt niet van arrogantie.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "Als iemand iets van het wereldse oprecht opgeeft omwille van Allah, zal Allah hem iets beters geven.",
+      "bron": "Musnad Ahmad"
+    },
+    {
+      "text": "Bid om leiding bij twijfel.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Wie op Allah vertrouwt, Hij is voldoende voor hem.",
+      "bron": "Koran 65:3"
+    },
+    {
+      "text": "Wie oprecht Allah om vergeving vraagt, Allah zal hem een uitweg bieden uit iedere moeilijkheid.",
+      "bron": "Abu Dawud"
+    },
+    {
+      "text": "Iedereen van mijn gemeenschap zal het Paradijs binnengaan behalve degene die weigert.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Voorwaar, Allah houdt van degene die, wanneer hij een taak uitvoert, deze met perfectie uitvoert.",
+      "bron": "Al-Bayhaqi"
+    },
+    {
+      "text": "Toon dankbaarheid aan Allah, dan zal Hij je meer geven.",
+      "bron": "Koran 14:7"
+    },
+    {
+      "text": "Het beste onder jullie is degene die het beste is voor zijn familie.",
+      "bron": "Tirmidhi"
+    },
+    {
+      "text": "De glimlach van een broeder is een liefdadigheid.",
+      "bron": "Tirmidhi"
+    },
+    {
+      "text": "Wie op de Boodschapper gehoorzaamt, gehoorzaamt Allah.",
+      "bron": "Koran 4:80"
+    },
+    {
+      "text": "Zeg altijd de waarheid, zelfs als het tegen je is.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "Het Paradijs is omringd door zaken die men niet graag doet.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "Zoek kennis van de wieg tot het graf.",
+      "bron": "Al-Bayhaqi"
+    },
+    {
+      "text": "Vergeet niet te bidden voor anderen, het beschermt je eigen hart.",
+      "bron": "Abu Dawud"
+    },
+    {
+      "text": "Wie een zuster helpt, Allah zal hem helpen.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "Wees nederig, dan zal Allah je verhogen.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "Verbreek geen familiebanden.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Wie het makkelijk maakt voor iemand in nood, Allah zal het hem makkelijk maken in het Hiernamaals.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "Wees vriendelijk voor dieren.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Het beste bezit is een dankbaar hart.",
+      "bron": "Tirmidhi"
+    },
+    {
+      "text": "De beste onder jullie is degene die de Koran leest en eraan vasthoudt.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Degene die zijn tong bewaakt, bewaart zijn hart.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Allah houdt van degenen die eerlijk zijn in handel.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Wie zijn broeder helpt, Allah helpt hem.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "Allah verlost de gelovigen uit hun zorgen.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "Streef naar rechtvaardigheid, want Allah houdt van rechtvaardigheid.",
+      "bron": "Koran 5:8"
+    },
+    {
+      "text": "Wie berouw toont, zijn zonden worden uitgewist.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "Wees niet gierig, want Allah houdt niet van gierigheid.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "Degene die vergeving schenkt, Allah zal hem vergeven.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "Toon dankbaarheid tegenover mensen, dan zal Allah je meer geven.",
+      "bron": "Tirmidhi"
+    },
+    {
+      "text": "Wie zich wendt tot Allah, Allah zal zich tot hem wenden.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Zoek kennis, want kennis is een licht.",
+      "bron": "Tirmidhi"
+    },
+    {
+      "text": "Bid in gemeenschap, want het is beter dan alleen bidden.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "Degene die arm is en geduldig blijft, zal beloond worden.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "Geef om de wezen, Allah zal om jou geven.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Wie een fout toegeeft, Allah zal hem verhogen.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "De beste onder jullie zijn degenen die zich onthouden van kwaadspreken.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Geef elkaar de vredesgroet.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "Wie van Allah houdt, Allah zal van hem houden.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Vergeet niet dankbaar te zijn voor het kleine.",
+      "bron": "Tirmidhi"
+    },
+    {
+      "text": "Degene die Allah gedenkt in goede en slechte tijden, zal bij Allah zijn.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "Allah is nabij en verhoort de smeekbeden.",
+      "bron": "Koran 2:186"
+    },
+    {
+      "text": "Laat geen trots toe in je hart, zelfs niet ter grootte van een mosterdzaadje.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "Wie zijn belofte nakomt, wordt geliefd bij Allah.",
+      "bron": "Koran 23:8"
+    },
+    {
+      "text": "Allah houdt van zuiverheid en netheid.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "Wees dankbaar voor gezondheid en tijd, want ze zijn kostbaar.",
+      "bron": "Sahih al-Bukhari"
+    },
+    {
+      "text": "Wees trouw in je woorden en daden.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "Degene die lacht omwille van Allah, Allah zal hem gelukkig maken.",
+      "bron": "Tirmidhi"
+    },
+    {
+      "text": "Geef nooit de hoop op in Allah's genade.",
+      "bron": "Koran 39:53"
+    },
+    {
+      "text": "Allah geeft leiding aan wie oprecht zoekt.",
+      "bron": "Koran 29:69"
+    },
+    {
+      "text": "Bid altijd om standvastigheid in het geloof.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "Vergeet de behoeftigen niet, zelfs niet als je weinig hebt.",
+      "bron": "Tirmidhi"
+    },
+    {
+      "text": "Wie zich reinigt, Allah zal hem zuiveren.",
+      "bron": "Koran 87:14"
+    },
+    {
+      "text": "Het Paradijs wacht op de zachtmoedigen.",
+      "bron": "Sahih Muslim"
+    },
+    {
+      "text": "Degene die Allah vreest, Allah zal zijn zaken vergemakkelijken.",
+      "bron": "Koran 65:4"
+    },
+    {
+      "text": "Zorg voor je naasten, want dat is geliefd bij Allah.",
+      "bron": "Sahih Muslim"
     }
   ]
 } 

adhan-webapp/static/style.css

@@ -25,7 +25,7 @@ html.light {
   --icoon-kleur: var(--icoon-light);
   --card-bg: var(--white);
   --border-color: var(--border-light);
-  --primary-color: var(--accent-blue);
+  --primary-color: var(--accent-black);
   --text-color: var(--text-primary-light);
   --text-secondary: var(--text-secondary-light);
 }
@@ -350,7 +350,7 @@ blockquote footer {
     padding: 1.5rem;
   }
   .hadith-center blockquote {
-    font-size: 1.8rem;
+    font-size: 4.8rem;
   }
   .vertical-tijden {
     flex-direction: row;
@@ -582,7 +582,7 @@ blockquote footer {
 }
 
 .hadith-center blockquote {
-  font-size: 2.2rem;
+  font-size: 4.2rem;
   text-align: left;
   color: var(--text-color);
   margin: 0;
@@ -1292,3 +1292,111 @@ html.dark .hadith-center {
   color: #fff;
   text-shadow: 2px 2px 8px #000;
 }
+
+/* Tab Navigation Styling */
+.tab-navigation {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 2rem;
+  border-bottom: 2px solid var(--border-color);
+  overflow-x: auto;
+  padding-bottom: 0;
+}
+
+.tab-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem 1.5rem;
+  background: transparent;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border-bottom: 3px solid transparent;
+  white-space: nowrap;
+  min-width: fit-content;
+}
+
+.tab-btn:hover {
+  color: var(--primary-color);
+  background: var(--active-bg);
+}
+
+.tab-btn.active {
+  color: var(--primary-color);
+  border-bottom-color: var(--primary-color);
+  background: var(--active-bg);
+}
+
+.tab-btn .material-icons {
+  font-size: 1.2rem;
+}
+
+/* Tab Content Styling */
+.tab-content {
+  display: none;
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+.tab-content.active {
+  display: block;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Save Section Styling */
+.save-section {
+  margin-top: 2rem;
+  padding-top: 2rem;
+  border-top: 2px solid var(--border-color);
+  display: flex;
+  justify-content: center;
+}
+
+.btn-save {
+  min-width: 200px;
+  font-size: 1.1rem;
+  padding: 1rem 2rem;
+}
+
+/* Responsive Tab Navigation */
+@media (max-width: 768px) {
+  .tab-navigation {
+    gap: 0.2rem;
+    margin-bottom: 1.5rem;
+  }
+  
+  .tab-btn {
+    padding: 0.8rem 1rem;
+    font-size: 0.9rem;
+    flex-direction: column;
+    gap: 0.3rem;
+    text-align: center;
+  }
+  
+  .tab-btn .material-icons {
+    font-size: 1.1rem;
+  }
+  
+  .save-section {
+    margin-top: 1.5rem;
+    padding-top: 1.5rem;
+  }
+  
+  .btn-save {
+    width: 100%;
+    max-width: 300px;
+  }
+}

adhan-webapp/templates/index.html

@@ -98,6 +98,7 @@
       {% endfor %}
     ];
     const nextPrayerTime = "{{ next_time }}";
+    const hadithInterval = {{ settings.hadith_interval_seconds or 30 }} * 1000; // Convert to milliseconds
   </script>
   <script src="/static/countdown.js"></script>
   <script>
@@ -111,9 +112,9 @@
       updateWeather();
       setInterval(updateWeather, 600000); // 10 minuten
       
-      // Update hadith elke 30 seconden
+      // Update hadith elke X seconden (instelbaar)
       updateHadith();
-      setInterval(updateHadith, 30000); // 30 seconden
+      setInterval(updateHadith, hadithInterval);
     };
 
     // Functie om weerdata bij te werken
@@ -137,10 +138,9 @@
       fetch('/api/hadith')
         .then(response => response.json())
         .then(data => {
-          const hadithTextElement = document.querySelector('.hadith-section blockquote');
+          const hadithTextElement = document.querySelector('.hadith-center blockquote');
-          const hadithFooterElement = document.querySelector('.hadith-section blockquote footer');
           
-          if (hadithTextElement && hadithFooterElement) {
+          if (hadithTextElement) {
             // Update de tekst en bron
             hadithTextElement.innerHTML = `"${data.text}"<footer>— ${data.bron}</footer>`;
           }

adhan-webapp/templates/settings.html

@@ -22,6 +22,28 @@
       </div>
 
       <form method="POST" class="settings-form">
+        <!-- Tab Navigation -->
+        <div class="tab-navigation">
+          <button type="button" class="tab-btn active" data-tab="audio">
+            <span class="material-icons">volume_up</span>
+            Audio & Volume
+          </button>
+          <button type="button" class="tab-btn" data-tab="prayer">
+            <span class="material-icons">schedule</span>
+            Gebedstijden
+          </button>
+          <button type="button" class="tab-btn" data-tab="features">
+            <span class="material-icons">auto_stories</span>
+            Functies
+          </button>
+          <button type="button" class="tab-btn" data-tab="system">
+            <span class="material-icons">settings</span>
+            Systeem
+          </button>
+        </div>
+
+        <!-- Audio & Volume Tab -->
+        <div class="tab-content active" id="audio-tab">
           <div class="settings-section">
             <div class="form-group">
               <label>
@@ -120,7 +142,12 @@
                 </div>
               </div>
             </div>
+          </div>
+        </div>
 
+        <!-- Prayer Times Tab -->
+        <div class="tab-content" id="prayer-tab">
+          <div class="settings-section">
             <div class="form-group">
               <label>
                 <span class="material-icons">schedule</span>
@@ -174,7 +201,12 @@
                 <input type="number" name="isha_offset" value="{{ settings.isha_offset or 0 }}" min="-120" max="120" step="5" />
               </div>
             </div>
+          </div>
+        </div>
 
+        <!-- Features Tab -->
+        <div class="tab-content" id="features-tab">
+          <div class="settings-section">
             <div class="form-group">
               <label>
                 <span class="material-icons">auto_stories</span>
@@ -206,17 +238,57 @@
               </div>
             </div>
 
+            <div class="form-group">
+              <label>
+                <span class="material-icons">format_quote</span>
+                Hadith Instellingen:
+              </label>
+              <p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0.5rem 0;">
+                Stel in hoe vaak de hadith tekst op het hoofdscherm wordt bijgewerkt met een nieuwe hadith.
+              </p>
+            </div>
+
+            <div class="form-row">
+              <div class="form-group">
+                <label for="hadith_interval_seconds">
+                  <span class="material-icons">refresh</span>
+                  Hadith update interval (seconden):
+                </label>
+                <input type="number" name="hadith_interval_seconds" value="{{ settings.hadith_interval_seconds or 30 }}" min="5" max="300" step="5" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- System Tab -->
+        <div class="tab-content" id="system-tab">
+          <div class="settings-section">
+            <div class="form-group">
+              <label>
+                <span class="material-icons">info</span>
+                Systeem Informatie:
+              </label>
+              <p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0.5rem 0;">
+                Algemene systeem instellingen en test functies.
+              </p>
+            </div>
+
             <div class="button-group">
               <button type="submit" name="test_clip" class="btn-secondary">
                 <span class="material-icons">speaker</span>
-              Test op Sonos
+                Test Adhaan op Sonos
-            </button>
-            <button type="submit" class="btn-primary">
-              <span class="material-icons">save</span>
-              Instellingen Opslaan
               </button>
             </div>
           </div>
+        </div>
+
+        <!-- Save Button (always visible) -->
+        <div class="save-section">
+          <button type="submit" class="btn-primary btn-save">
+            <span class="material-icons">save</span>
+            Alle Instellingen Opslaan
+          </button>
+        </div>
       </form>
     </div>
   </div>
@@ -249,6 +321,9 @@
       // Setup theme toggle
       setupThemeToggle();
       updateThemeIcon();
+      
+      // Setup tabs
+      setupTabs();
     };
 
     // Theme toggle functionaliteit (gekopieerd van index.html)
@@ -279,6 +354,46 @@
         }
       }
     }
+
+    // Tab functionality
+    function setupTabs() {
+      const tabBtns = document.querySelectorAll('.tab-btn');
+      const tabContents = document.querySelectorAll('.tab-content');
+      
+      tabBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+          const targetTab = btn.getAttribute('data-tab');
+          
+          // Remove active class from all buttons and contents
+          tabBtns.forEach(b => b.classList.remove('active'));
+          tabContents.forEach(c => c.classList.remove('active'));
+          
+          // Add active class to clicked button and corresponding content
+          btn.classList.add('active');
+          document.getElementById(targetTab + '-tab').classList.add('active');
+          
+          // Save active tab to localStorage
+          localStorage.setItem('activeSettingsTab', targetTab);
+        });
+      });
+      
+      // Restore last active tab
+      const savedTab = localStorage.getItem('activeSettingsTab');
+      if (savedTab) {
+        const savedBtn = document.querySelector(`[data-tab="${savedTab}"]`);
+        const savedContent = document.getElementById(savedTab + '-tab');
+        
+        if (savedBtn && savedContent) {
+          // Remove active from all
+          tabBtns.forEach(b => b.classList.remove('active'));
+          tabContents.forEach(c => c.classList.remove('active'));
+          
+          // Activate saved tab
+          savedBtn.classList.add('active');
+          savedContent.classList.add('active');
+        }
+      }
+    }
   </script>
 </body>
 </html>

done

@@ -59,3 +59,6 @@ Wed May 28 07:56:25 CEST 2025: Weer sectie verplaatst naast de tijd op dezelfde
 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
+Wed May 28 08:35:42 CEST 2025: Hadith auto-update gerepareerd - JavaScript selector aangepast van .hadith-section naar .hadith-center voor nieuwe layout
+Wed May 28 08:37:45 CEST 2025: Hadith interval instelbaar gemaakt - nieuwe setting hadith_interval_seconds toegevoegd aan settings.json, settings.html en app.py, JavaScript gebruikt nu variabele interval
+Wed May 28 08:39:34 CEST 2025: Settings pagina georganiseerd in tabbladen - 4 tabs: Audio & Volume, Gebedstijden, Functies, Systeem. Inclusief CSS styling en JavaScript functionaliteit met localStorage voor actieve tab