From f3cbd6e910cd3e826fa73954488c0ea18e799f87 Mon Sep 17 00:00:00 2001
From: filoor <filoor1@gmail.com>
Date: Wed, 28 May 2025 08:39:50 +0200
Subject: [PATCH] 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                  |   3 +
 adhan-webapp/settings.json           |   1 +
 adhan-webapp/static/hadiths.json     | 392 ++++++++++++++++++++++
 adhan-webapp/static/style.css        | 114 ++++++-
 adhan-webapp/templates/index.html    |  10 +-
 adhan-webapp/templates/settings.html | 471 +++++++++++++++++----------
 done                                 |   3 +
 7 files changed, 808 insertions(+), 186 deletions(-)

diff --git a/adhan-webapp/app.py b/adhan-webapp/app.py
index de28955..65c8886 100644
--- a/adhan-webapp/app.py
+++ b/adhan-webapp/app.py
@@ -310,6 +310,9 @@ def instellingen():
         # Adzkaar 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']
diff --git a/adhan-webapp/settings.json b/adhan-webapp/settings.json
index 2b6f0c1..00a7602 100644
--- a/adhan-webapp/settings.json
+++ b/adhan-webapp/settings.json
@@ -17,5 +17,6 @@
   "volume": 10,
   "adzkaar_enabled": true,
   "adzkaar_duration": 5,
+  "hadith_interval_seconds": 30,
   "debug_mode": true
 }
\ No newline at end of file
diff --git a/adhan-webapp/static/hadiths.json b/adhan-webapp/static/hadiths.json
index de52884..b69661d 100644
--- a/adhan-webapp/static/hadiths.json
+++ b/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"
     }
   ]
 } 
\ No newline at end of file
diff --git a/adhan-webapp/static/style.css b/adhan-webapp/static/style.css
index a2c125f..fa3ce61 100644
--- a/adhan-webapp/static/style.css
+++ b/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;
+  }
+}
diff --git a/adhan-webapp/templates/index.html b/adhan-webapp/templates/index.html
index 66fb56d..2b502f5 100644
--- a/adhan-webapp/templates/index.html
+++ b/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 hadithFooterElement = document.querySelector('.hadith-section blockquote footer');
+          const hadithTextElement = document.querySelector('.hadith-center blockquote');
           
-          if (hadithTextElement && hadithFooterElement) {
+          if (hadithTextElement) {
             // Update de tekst en bron
             hadithTextElement.innerHTML = `"${data.text}"<footer>— ${data.bron}</footer>`;
           }
diff --git a/adhan-webapp/templates/settings.html b/adhan-webapp/templates/settings.html
index 6fafc49..adccb1d 100644
--- a/adhan-webapp/templates/settings.html
+++ b/adhan-webapp/templates/settings.html
@@ -22,201 +22,273 @@
       </div>
 
       <form method="POST" class="settings-form">
-        <div class="settings-section">
-          <div class="form-group">
-            <label>
-              <span class="material-icons">info</span>
-              Volume Instellingen:
-            </label>
-            <p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0.5rem 0;">
-              Stel verschillende volumes in voor overdag en 's avonds. Het systeem wisselt automatisch tussen deze volumes op basis van de ingestelde tijden.
-            </p>
-          </div>
+        <!-- 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>
 
-          <div class="form-row">
+        <!-- Audio & Volume Tab -->
+        <div class="tab-content active" id="audio-tab">
+          <div class="settings-section">
             <div class="form-group">
-              <label for="volume_day">
-                <span class="material-icons">volume_up</span>
-                Volume Overdag (0–100):
-              </label>
-              <input type="number" name="volume_day" value="{{ settings.volume_day or settings.volume }}" min="0" max="100" />
-            </div>
-
-            <div class="form-group">
-              <label for="volume_night">
-                <span class="material-icons">volume_down</span>
-                Volume Avond (0–100):
-              </label>
-              <input type="number" name="volume_night" value="{{ settings.volume_night or (settings.volume // 2) }}" min="0" max="100" />
-            </div>
-          </div>
-
-          <div class="form-row">
-            <div class="form-group">
-              <label for="day_start">
-                <span class="material-icons">wb_sunny</span>
-                Dag begint om:
-              </label>
-              <input type="time" name="day_start" value="{{ settings.day_start or '07:00' }}" />
-            </div>
-
-            <div class="form-group">
-              <label for="night_start">
-                <span class="material-icons">nightlight</span>
-                Avond begint om:
-              </label>
-              <input type="time" name="night_start" value="{{ settings.night_start or '20:00' }}" />
-            </div>
-          </div>
-
-          <div class="form-group">
-            <label>
-              <span class="material-icons">speaker_group</span>
-              Sonos Zones:
-            </label>
-            <div class="checkboxes">
-              {% for zone in alle_zones %}
-                <div class="checkbox-item">
-                  <input type="checkbox" name="zones" value="{{ zone }}" id="zone_{{ loop.index }}"
-                    {% if zone in settings.zones %}checked{% endif %}>
-                  <label for="zone_{{ loop.index }}">{{ zone }}</label>
-                </div>
-              {% endfor %}
-            </div>
-          </div>
-
-          <div class="form-row audio-row">
-            <div class="form-group audio-section">
-              <label for="audio_clip">
-                <span class="material-icons">music_note</span>
-                Adhaan Audio Bestand:
-              </label>
-              <select name="audio_clip" id="audioSelect">
-                {% for clip in clips %}
-                  <option value="{{ clip }}" {% if clip == settings.audio_clip %}selected{% endif %}>
-                    {% if clip == 'adhan1.mp3' %}Klassieke Adhaan
-                    {% elif 'mekka' in clip %}Mekka Stijl
-                    {% elif 'medina' in clip %}Medina Stijl
-                    {% elif 'kort' in clip %}Korte Versie
-                    {% elif 'traditioneel' in clip %}Traditioneel
-                    {% else %}{{ clip }}
-                    {% endif %}
-                  </option>
-                {% endfor %}
-              </select>
-            </div>
-            
-            <div class="form-group audio-preview-section">
               <label>
-                <span class="material-icons">play_circle</span>
-                Audio Voorbeeld:
+                <span class="material-icons">info</span>
+                Volume Instellingen:
               </label>
-              <div class="audio-preview">
-                <button type="button" class="preview-btn" onclick="previewAudio()">
-                  <span class="material-icons">play_arrow</span>
-                  Voorbeeld afspelen
-                </button>
-                <audio id="previewAudio" preload="none"></audio>
-              </div>
-            </div>
-          </div>
-
-          <div class="form-group">
-            <label>
-              <span class="material-icons">schedule</span>
-              Gebedstijd Aanpassingen:
-            </label>
-            <p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0.5rem 0;">
-              Voeg minuten toe (+) of haal af (-) van de VUMG gebedstijden. Bijvoorbeeld: +30 voor 30 minuten later, -15 voor 15 minuten eerder.
-            </p>
-          </div>
-
-          <div class="form-row three-columns">
-            <div class="form-group">
-              <label for="fajr_offset">
-                <span class="material-icons">wb_twilight</span>
-                Fajr Aanpassing (minuten):
-              </label>
-              <input type="number" name="fajr_offset" value="{{ settings.fajr_offset or 0 }}" min="-120" max="120" step="5" />
+              <p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0.5rem 0;">
+                Stel verschillende volumes in voor overdag en 's avonds. Het systeem wisselt automatisch tussen deze volumes op basis van de ingestelde tijden.
+              </p>
             </div>
 
-            <div class="form-group">
-              <label for="zuhr_offset">
-                <span class="material-icons">wb_sunny</span>
-                Zuhr Aanpassing (minuten):
-              </label>
-              <input type="number" name="zuhr_offset" value="{{ settings.zuhr_offset or 0 }}" min="-120" max="120" step="5" />
-            </div>
-
-            <div class="form-group">
-              <label for="asr_offset">
-                <span class="material-icons">brightness_low</span>
-                Asr Aanpassing (minuten):
-              </label>
-              <input type="number" name="asr_offset" value="{{ settings.asr_offset or 0 }}" min="-120" max="120" step="5" />
-            </div>
-          </div>
-
-          <div class="form-row">
-            <div class="form-group">
-              <label for="maghrib_offset">
-                <span class="material-icons">brightness_3</span>
-                Maghrib Aanpassing (minuten):
-              </label>
-              <input type="number" name="maghrib_offset" value="{{ settings.maghrib_offset or 0 }}" min="-120" max="120" step="5" />
-            </div>
-
-            <div class="form-group">
-              <label for="isha_offset">
-                <span class="material-icons">brightness_2</span>
-                Isha Aanpassing (minuten):
-              </label>
-              <input type="number" name="isha_offset" value="{{ settings.isha_offset or 0 }}" min="-120" max="120" step="5" />
-            </div>
-          </div>
-
-          <div class="form-group">
-            <label>
-              <span class="material-icons">auto_stories</span>
-              Adzkaar na Gebed:
-            </label>
-            <p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0.5rem 0;">
-              Toon automatisch een fullscreen Adzkaar scherm na elke gebedstijd voor spirituele versterking en dhikr.
-            </p>
-          </div>
-
-          <div class="form-row">
-            <div class="form-group">
-              <div class="checkbox-item">
-                <input type="checkbox" name="adzkaar_enabled" id="adzkaar_enabled" 
-                  {% if settings.adzkaar_enabled != False %}checked{% endif %}>
-                <label for="adzkaar_enabled">
-                  <span class="material-icons">visibility</span>
-                  Adzkaar scherm inschakelen
+            <div class="form-row">
+              <div class="form-group">
+                <label for="volume_day">
+                  <span class="material-icons">volume_up</span>
+                  Volume Overdag (0–100):
                 </label>
+                <input type="number" name="volume_day" value="{{ settings.volume_day or settings.volume }}" min="0" max="100" />
+              </div>
+
+              <div class="form-group">
+                <label for="volume_night">
+                  <span class="material-icons">volume_down</span>
+                  Volume Avond (0–100):
+                </label>
+                <input type="number" name="volume_night" value="{{ settings.volume_night or (settings.volume // 2) }}" min="0" max="100" />
+              </div>
+            </div>
+
+            <div class="form-row">
+              <div class="form-group">
+                <label for="day_start">
+                  <span class="material-icons">wb_sunny</span>
+                  Dag begint om:
+                </label>
+                <input type="time" name="day_start" value="{{ settings.day_start or '07:00' }}" />
+              </div>
+
+              <div class="form-group">
+                <label for="night_start">
+                  <span class="material-icons">nightlight</span>
+                  Avond begint om:
+                </label>
+                <input type="time" name="night_start" value="{{ settings.night_start or '20:00' }}" />
               </div>
             </div>
 
             <div class="form-group">
-              <label for="adzkaar_duration">
-                <span class="material-icons">timer</span>
-                Adzkaar duur (minuten):
+              <label>
+                <span class="material-icons">speaker_group</span>
+                Sonos Zones:
               </label>
-              <input type="number" name="adzkaar_duration" value="{{ settings.adzkaar_duration or 5 }}" min="1" max="30" step="1" />
+              <div class="checkboxes">
+                {% for zone in alle_zones %}
+                  <div class="checkbox-item">
+                    <input type="checkbox" name="zones" value="{{ zone }}" id="zone_{{ loop.index }}"
+                      {% if zone in settings.zones %}checked{% endif %}>
+                    <label for="zone_{{ loop.index }}">{{ zone }}</label>
+                  </div>
+                {% endfor %}
+              </div>
+            </div>
+
+            <div class="form-row audio-row">
+              <div class="form-group audio-section">
+                <label for="audio_clip">
+                  <span class="material-icons">music_note</span>
+                  Adhaan Audio Bestand:
+                </label>
+                <select name="audio_clip" id="audioSelect">
+                  {% for clip in clips %}
+                    <option value="{{ clip }}" {% if clip == settings.audio_clip %}selected{% endif %}>
+                      {% if clip == 'adhan1.mp3' %}Klassieke Adhaan
+                      {% elif 'mekka' in clip %}Mekka Stijl
+                      {% elif 'medina' in clip %}Medina Stijl
+                      {% elif 'kort' in clip %}Korte Versie
+                      {% elif 'traditioneel' in clip %}Traditioneel
+                      {% else %}{{ clip }}
+                      {% endif %}
+                    </option>
+                  {% endfor %}
+                </select>
+              </div>
+              
+              <div class="form-group audio-preview-section">
+                <label>
+                  <span class="material-icons">play_circle</span>
+                  Audio Voorbeeld:
+                </label>
+                <div class="audio-preview">
+                  <button type="button" class="preview-btn" onclick="previewAudio()">
+                    <span class="material-icons">play_arrow</span>
+                    Voorbeeld afspelen
+                  </button>
+                  <audio id="previewAudio" preload="none"></audio>
+                </div>
+              </div>
             </div>
           </div>
+        </div>
 
-          <div class="button-group">
-            <button type="submit" name="test_clip" class="btn-secondary">
-              <span class="material-icons">speaker</span>
-              Test op Sonos
-            </button>
-            <button type="submit" class="btn-primary">
-              <span class="material-icons">save</span>
-              Instellingen Opslaan
-            </button>
+        <!-- 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>
+                Gebedstijd Aanpassingen:
+              </label>
+              <p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0.5rem 0;">
+                Voeg minuten toe (+) of haal af (-) van de VUMG gebedstijden. Bijvoorbeeld: +30 voor 30 minuten later, -15 voor 15 minuten eerder.
+              </p>
+            </div>
+
+            <div class="form-row three-columns">
+              <div class="form-group">
+                <label for="fajr_offset">
+                  <span class="material-icons">wb_twilight</span>
+                  Fajr Aanpassing (minuten):
+                </label>
+                <input type="number" name="fajr_offset" value="{{ settings.fajr_offset or 0 }}" min="-120" max="120" step="5" />
+              </div>
+
+              <div class="form-group">
+                <label for="zuhr_offset">
+                  <span class="material-icons">wb_sunny</span>
+                  Zuhr Aanpassing (minuten):
+                </label>
+                <input type="number" name="zuhr_offset" value="{{ settings.zuhr_offset or 0 }}" min="-120" max="120" step="5" />
+              </div>
+
+              <div class="form-group">
+                <label for="asr_offset">
+                  <span class="material-icons">brightness_low</span>
+                  Asr Aanpassing (minuten):
+                </label>
+                <input type="number" name="asr_offset" value="{{ settings.asr_offset or 0 }}" min="-120" max="120" step="5" />
+              </div>
+            </div>
+
+            <div class="form-row">
+              <div class="form-group">
+                <label for="maghrib_offset">
+                  <span class="material-icons">brightness_3</span>
+                  Maghrib Aanpassing (minuten):
+                </label>
+                <input type="number" name="maghrib_offset" value="{{ settings.maghrib_offset or 0 }}" min="-120" max="120" step="5" />
+              </div>
+
+              <div class="form-group">
+                <label for="isha_offset">
+                  <span class="material-icons">brightness_2</span>
+                  Isha Aanpassing (minuten):
+                </label>
+                <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>
+                Adzkaar na Gebed:
+              </label>
+              <p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0.5rem 0;">
+                Toon automatisch een fullscreen Adzkaar scherm na elke gebedstijd voor spirituele versterking en dhikr.
+              </p>
+            </div>
+
+            <div class="form-row">
+              <div class="form-group">
+                <div class="checkbox-item">
+                  <input type="checkbox" name="adzkaar_enabled" id="adzkaar_enabled" 
+                    {% if settings.adzkaar_enabled != False %}checked{% endif %}>
+                  <label for="adzkaar_enabled">
+                    <span class="material-icons">visibility</span>
+                    Adzkaar scherm inschakelen
+                  </label>
+                </div>
+              </div>
+
+              <div class="form-group">
+                <label for="adzkaar_duration">
+                  <span class="material-icons">timer</span>
+                  Adzkaar duur (minuten):
+                </label>
+                <input type="number" name="adzkaar_duration" value="{{ settings.adzkaar_duration or 5 }}" min="1" max="30" step="1" />
+              </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 Adhaan op Sonos
+              </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>
diff --git a/done b/done
index 7c1dd36..ec7c1c1 100644
--- a/done
+++ b/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