feat(webapp): implementeer centraal kleurenschema en automatische dhikr wissel

Een nieuw centraal kleurensysteem is geïntroduceerd via colors.css, waardoor het eenvoudiger wordt om het kleurenschema van de Adhan-app te beheren en aan te passen. Dit verbetert de consistentie en onderhoudbaarheid van de stijlen in verschillende componenten van de app.

Daarnaast is een functie toegevoegd voor automatische dhikr-wisseling in adzkaar.html, die elke 30 seconden naar de volgende dhikr schakelt. Hierdoor verbetert de gebruikerservaring door een soepele en intuïtieve navigatie tussen de dhikr-items mogelijk te maken.

adhan-webapp/static/README-KLEUREN.md

@@ -0,0 +1,119 @@
+# Kleurenschema Adhan App
+
+## Overzicht
+Alle kleuren in de Adhan app worden nu centraal beheerd via het bestand `colors.css`. Dit maakt het gemakkelijk om het hele kleurenschema van de app aan te passen door slechts één bestand te wijzigen.
+
+## Hoofdkleuren
+De app gebruikt vier hoofdkleuren die je kunt aanpassen:
+
+### 1. Blauw (Primair)
+- `--primary-blue: #1e3c72` - Donkerblauw voor achtergronden
+- `--secondary-blue: #2a5298` - Lichterblauw voor gradiënten
+- `--accent-blue: #2563eb` - Helderblauw voor accenten
+
+### 2. Goud
+- `--gold: #d4af37` - Goudkleur voor speciale accenten
+
+### 3. Basis kleuren
+- `--white: #ffffff` - Wit
+- `--black: #000000` - Zwart
+- `--dark-gray: #111111` - Donkergrijs
+- `--light-gray: #f7fafc` - Lichtgrijs
+
+## Hoe kleuren aanpassen?
+
+### Stap 1: Open colors.css
+Bewerk het bestand: `adhan-webapp/static/colors.css`
+
+### Stap 2: Wijzig de hoofdkleuren
+Verander de waarden in de `:root` sectie:
+
+```css
+:root {
+  /* Hoofdkleuren - PAS DEZE AAN */
+  --primary-blue: #1e3c72;      /* Verander naar jouw donkere kleur */
+  --secondary-blue: #2a5298;    /* Verander naar jouw lichte kleur */
+  --accent-blue: #2563eb;       /* Verander naar jouw accent kleur */
+  --gold: #d4af37;              /* Verander naar jouw goud/accent kleur */
+  
+  /* Basis kleuren - meestal niet nodig om aan te passen */
+  --white: #ffffff;
+  --black: #000000;
+  --dark-gray: #111111;
+  --light-gray: #f7fafc;
+}
+```
+
+### Stap 3: Sla op en herlaad
+Na het opslaan van `colors.css` worden alle kleuren automatisch bijgewerkt in:
+- Hoofdpagina (`index.html`)
+- Adzkaar pagina (`adzkaar.html`)
+- Quran speler (`quran.html`)
+- Instellingen (`settings.html`)
+- Debug pagina (`debug.html`)
+
+## Voorbeelden van kleurenschema's
+
+### Groen thema
+```css
+--primary-blue: #1e4d3c;
+--secondary-blue: #2a8052;
+--accent-blue: #25eb63;
+--gold: #d4af37;
+```
+
+### Paars thema
+```css
+--primary-blue: #4c1e72;
+--secondary-blue: #6a2a98;
+--accent-blue: #8b25eb;
+--gold: #d4af37;
+```
+
+### Rood thema
+```css
+--primary-blue: #721e1e;
+--secondary-blue: #982a2a;
+--accent-blue: #eb2525;
+--gold: #d4af37;
+```
+
+## Geavanceerde aanpassingen
+
+### Transparante varianten
+De app gebruikt automatisch transparante versies van de kleuren. Deze worden automatisch gegenereerd, maar je kunt ze ook handmatig aanpassen:
+
+```css
+--white-10: rgba(255, 255, 255, 0.1);   /* 10% transparant wit */
+--white-20: rgba(255, 255, 255, 0.2);   /* 20% transparant wit */
+--black-30: rgba(0, 0, 0, 0.3);         /* 30% transparant zwart */
+```
+
+### Gradiënten
+De hoofdgradiënt wordt automatisch gegenereerd uit de primaire kleuren:
+
+```css
+--primary-gradient: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
+```
+
+## Bestanden die het kleurenschema gebruiken
+
+1. **colors.css** - Centraal kleurenbestand (HOOFDBESTAND OM AAN TE PASSEN)
+2. **style.css** - Importeert colors.css en gebruikt de variabelen
+3. **quran.css** - Importeert colors.css voor Quran specifieke styling
+4. **adzkaar.html** - Gebruikt de kleurvariabelen in inline CSS
+
+## Tips
+
+1. **Test altijd beide thema's**: Controleer zowel de lichte als donkere modus na wijzigingen
+2. **Gebruik kleurcontrast tools**: Zorg ervoor dat tekst goed leesbaar blijft
+3. **Maak een backup**: Kopieer `colors.css` voordat je grote wijzigingen maakt
+4. **Consistentie**: Gebruik dezelfde kleurfamilie voor een professionele uitstraling
+
+## Problemen oplossen
+
+Als kleuren niet worden bijgewerkt:
+1. Controleer of `colors.css` correct wordt geïmporteerd
+2. Ververs de browser cache (Ctrl+F5 of Cmd+Shift+R)
+3. Controleer de browser console voor CSS fouten
+4. Zorg ervoor dat CSS variabelen correct zijn geschreven (met `--` prefix) 

adhan-webapp/static/colors.css

@@ -0,0 +1,86 @@
+/* Centraal Kleurenschema voor Adhan App */
+:root {
+  /* Hoofdkleuren */
+  --primary-blue: #1e3c72;
+  --secondary-blue: #2a5298;
+  --accent-blue: #2563eb;
+  --gold: #d4af37;
+  --white: #ffffff;
+  --black: #000000;
+  --dark-gray: #111111;
+  --light-gray: #f7fafc;
+  
+  /* Gradient achtergronden */
+  --primary-gradient: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
+  --gold-gradient: linear-gradient(135deg, var(--gold) 0%, #f4e17a 100%);
+  
+  /* Transparante varianten */
+  --white-10: rgba(255, 255, 255, 0.1);
+  --white-15: rgba(255, 255, 255, 0.15);
+  --white-20: rgba(255, 255, 255, 0.2);
+  --white-30: rgba(255, 255, 255, 0.3);
+  --black-30: rgba(0, 0, 0, 0.3);
+  --black-50: rgba(0, 0, 0, 0.5);
+  
+  /* Tekst kleuren */
+  --text-primary-light: #222222;
+  --text-primary-dark: #ffffff;
+  --text-secondary-light: #666666;
+  --text-secondary-dark: #bbbbbb;
+  --text-muted-light: #c0c6d0;
+  --text-muted-dark: #e0e6ed;
+  
+  /* Achtergrond kleuren */
+  --bg-light: var(--light-gray);
+  --bg-dark: var(--dark-gray);
+  --panel-bg-light: var(--white);
+  --panel-bg-dark: rgba(24, 24, 24, 0.8);
+  
+  /* Border kleuren */
+  --border-light: #e0e6ed;
+  --border-dark: var(--white-20);
+  
+  /* Accent kleuren voor verschillende states */
+  --active-bg-light: #fffbe6;
+  --active-bg-dark: rgba(234, 179, 8, 0.08);
+  --hover-bg-light: rgba(212, 175, 55, 0.1);
+  --hover-bg-dark: var(--white-10);
+  
+  /* Schaduwen */
+  --shadow-light: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
+  --shadow-dark: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
+  --text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
+  --text-shadow-strong: 2px 2px 8px var(--black);
+}
+
+/* Light theme variabelen */
+html.light {
+  --bg: var(--bg-light);
+  --text: var(--text-primary-light);
+  --text-secondary: var(--text-secondary-light);
+  --text-muted: var(--text-muted-light);
+  --panel-bg: var(--panel-bg-light);
+  --panel-text: var(--text-primary-light);
+  --accent: var(--accent-blue);
+  --accent-color: var(--gold);
+  --border-color: var(--border-light);
+  --active-bg: var(--active-bg-light);
+  --hover-bg: var(--hover-bg-light);
+  --shadow: var(--shadow-light);
+}
+
+/* Dark theme variabelen */
+html.dark, body.dark {
+  --bg: var(--bg-dark);
+  --text: var(--text-primary-dark);
+  --text-secondary: var(--text-secondary-dark);
+  --text-muted: var(--text-muted-dark);
+  --panel-bg: var(--panel-bg-dark);
+  --panel-text: var(--text-primary-dark);
+  --accent: var(--white);
+  --accent-color: var(--gold);
+  --border-color: var(--border-dark);
+  --active-bg: var(--active-bg-dark);
+  --hover-bg: var(--hover-bg-dark);
+  --shadow: var(--shadow-dark);
+} 

adhan-webapp/static/quran.css

@@ -1,29 +1,31 @@
+@import url('colors.css');
+
 /* Quran pagina - volledige breedte met smal zijmenu en correcte theme ondersteuning */
 
 /* Default (dark) theme variabelen voor Quran pagina */
-:root {
+:root.quran-dark {
-  --quran-bg: #111;
+  --quran-bg: var(--bg-dark);
-  --quran-text: #fff;
+  --quran-text: var(--text-primary-dark);
-  --quran-panel-bg: rgba(24, 24, 24, 0.95);
+  --quran-panel-bg: var(--panel-bg-dark);
-  --quran-panel-text: #fff;
+  --quran-panel-text: var(--text-primary-dark);
-  --quran-accent: #fff;
+  --quran-accent: var(--white);
-  --quran-border: rgba(255, 255, 255, 0.1);
+  --quran-border: var(--border-dark);
-  --quran-card-bg: rgba(40, 40, 40, 0.95);
+  --quran-card-bg: var(--panel-bg-dark);
-  --quran-text-secondary: #bbb;
+  --quran-text-secondary: var(--text-secondary-dark);
-  --quran-hover-bg: rgba(255, 255, 255, 0.1);
+  --quran-hover-bg: var(--hover-bg-dark);
 }
 
 /* Light theme variabelen voor Quran pagina */
-html.light {
+:root.quran-light {
-  --quran-bg: #f7fafc;
+  --quran-bg: var(--bg-light);
-  --quran-text: #222;
+  --quran-text: var(--text-primary-light);
-  --quran-panel-bg: #fff;
+  --quran-panel-bg: var(--panel-bg-light);
-  --quran-panel-text: #222;
+  --quran-panel-text: var(--text-primary-light);
-  --quran-accent: #d4af37;
+  --quran-accent: var(--gold);
-  --quran-border: #e0e6ed;
+  --quran-border: var(--border-light);
-  --quran-card-bg: #ffffff;
+  --quran-card-bg: var(--white);
-  --quran-text-secondary: #666;
+  --quran-text-secondary: var(--text-secondary-light);
-  --quran-hover-bg: rgba(212, 175, 55, 0.1);
+  --quran-hover-bg: var(--hover-bg-light);
 }
 
 /* Zorg ervoor dat het zijmenu de Quran theme variabelen gebruikt */

adhan-webapp/static/style.css

@@ -1,58 +1,53 @@
+@import url('colors.css');
+
 :root {
-  --bg-light: #f7fafc;
-  --bg-dark: #162447;
-  --text-light: #222;
-  --text-dark: #fff;
-  --accent-light: #2563eb;
-  --accent-dark: #fff;
-  --accent-blue: #222;
   --panel-radius: 0rem;
-  --panel-shadow: 0 8px 32px 0 rgba(0,0,0,0.25);
+  --panel-shadow: var(--shadow);
-  --tijdkleur-light: #222;
+  --tijdkleur-light: var(--text-primary-light);
-  --tijdkleur-dark: #fff;
+  --tijdkleur-dark: var(--text-primary-dark);
-  --icoon-light: #222;
+  --icoon-light: var(--text-primary-light);
-  --icoon-dark: #fff;
+  --icoon-dark: var(--text-primary-dark);
 }
 
 html.light {
-  --bg: #f7fafc;
+  --bg: var(--bg-light);
-  --text: #222;
+  --text: var(--text-primary-light);
-  --weather-temp: #222;
+  --weather-temp: var(--text-primary-light);
-  --panel-bg: #fff;
+  --panel-bg: var(--panel-bg-light);
-  --panel-text: #222;
+  --panel-text: var(--text-primary-light);
-  --accent: #2563eb;
+  --accent: var(--accent-blue);
   --accent-blue: #f0f0f0;
-  --panel-border: #e0e6ed;
+  --panel-border: var(--border-light);
-  --list-bg: #f7fafc;
+  --list-bg: var(--bg-light);
-  --list-border: #e0e6ed;
+  --list-border: var(--border-light);
-  --active-bg: #fffbe6;
+  --active-bg: var(--active-bg-light);
   --tijdkleur: var(--tijdkleur-light);
   --icoon-kleur: var(--icoon-light);
-  --card-bg: #ffffff;
+  --card-bg: var(--white);
-  --border-color: #e0e6ed;
+  --border-color: var(--border-light);
-  --primary-color: #2563eb;
+  --primary-color: var(--accent-blue);
-  --text-color: #222;
+  --text-color: var(--text-primary-light);
-  --text-secondary: #666;
+  --text-secondary: var(--text-secondary-light);
 }
 
 html.dark, body.dark {
-  --bg: #111;
+  --bg: var(--bg-dark);
-  --text: #fff;
+  --text: var(--text-primary-dark);
-  --panel-bg: #181818cc;
+  --panel-bg: var(--panel-bg-dark);
-  --panel-text: #fff;
+  --panel-text: var(--text-primary-dark);
-  --accent: #fff;
+  --accent: var(--white);
-  --accent-blue: #222;
+  --accent-blue: var(--text-primary-light);
-  --panel-border: #222;
+  --panel-border: var(--text-primary-light);
-  --list-bg: rgba(255,255,255,0.04);
+  --list-bg: var(--white-10);
-  --list-border: #222;
+  --list-border: var(--text-primary-light);
-  --active-bg: rgba(234, 179, 8, 0.08);
+  --active-bg: var(--active-bg-dark);
   --tijdkleur: var(--tijdkleur-dark);
   --icoon-kleur: var(--icoon-dark);
-  --card-bg: rgba(255, 255, 255, 0.1);
+  --card-bg: var(--white-10);
-  --border-color: rgba(255, 255, 255, 0.2);
+  --border-color: var(--border-dark);
-  --primary-color: #fff;
+  --primary-color: var(--white);
-  --text-color: #fff;
+  --text-color: var(--text-primary-dark);
-  --text-secondary: #bbb;
+  --text-secondary: var(--text-secondary-dark);
 }
 
 body, html {

adhan-webapp/templates/adzkaar.html

@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Adzkaar na het Gebed</title>
+  <link rel="stylesheet" href="/static/colors.css">
   <link rel="stylesheet" href="/static/style.css">
   <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&family=Lato:wght@300;400;600&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
@@ -13,8 +14,8 @@
       left: 0;
       width: 100vw;
       height: 100vh;
-      background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+      background: var(--primary-gradient);
-      color: white;
+      color: var(--white);
       display: flex;
       flex-direction: column;
       justify-content: center;
@@ -35,7 +36,7 @@
       font-size: 3.5rem;
       font-weight: 700;
       margin-bottom: 1rem;
-      text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
+      text-shadow: var(--text-shadow);
     }
 
     .adzkaar-subtitle {
@@ -61,11 +62,11 @@
 
     .dhikr-item {
       display: none;
-      background: rgba(255, 255, 255, 0.1);
+      background: var(--white-10);
       border-radius: 15px;
       padding: 2rem;
       backdrop-filter: blur(10px);
-      border: 1px solid rgba(255, 255, 255, 0.2);
+      border: 1px solid var(--white-20);
       transition: all 0.3s ease;
       max-width: 800px;
       width: 100%;
@@ -74,8 +75,8 @@
 
     .dhikr-item.active {
       display: block;
-      background: rgba(255, 255, 255, 0.15);
+      background: var(--white-15);
-      border: 1px solid rgba(255, 255, 255, 0.3);
+      border: 1px solid var(--white-30);
       transform: scale(1.02);
     }
 
@@ -86,7 +87,7 @@
       margin-bottom: 1rem;
       direction: rtl;
       line-height: 1.6;
-      color: #fff;
+      color: var(--white);
     }
 
     .dhikr-transliteration {
@@ -95,19 +96,19 @@
       font-style: italic;
       margin-bottom: 1rem;
       opacity: 0.8;
-      color: #e8f4fd;
+      color: var(--text-muted-dark);
     }
 
     .dhikr-translation {
       font-family: 'Lato', sans-serif;
       font-size: 1.2rem;
-      color: #f0f8ff;
+      color: var(--text-muted-dark);
       line-height: 1.5;
     }
 
     .dhikr-count {
       display: inline-block;
-      background: rgba(255, 255, 255, 0.2);
+      background: var(--white-20);
       padding: 0.5rem 1rem;
       border-radius: 20px;
       font-size: 0.9rem;
@@ -119,7 +120,7 @@
       position: fixed;
       top: 2rem;
       right: 2rem;
-      background: rgba(0, 0, 0, 0.5);
+      background: var(--black-50);
       padding: 1rem 1.5rem;
       border-radius: 10px;
       font-family: 'Cairo', sans-serif;
@@ -131,9 +132,9 @@
       position: fixed;
       top: 2rem;
       left: 2rem;
-      background: rgba(255, 255, 255, 0.2);
+      background: var(--white-20);
       border: none;
-      color: white;
+      color: var(--white);
       padding: 0.8rem;
       border-radius: 50%;
       cursor: pointer;
@@ -142,7 +143,7 @@
     }
 
     .close-button:hover {
-      background: rgba(255, 255, 255, 0.3);
+      background: var(--white-30);
     }
 
     .dhikr-navigation {
@@ -153,9 +154,9 @@
     }
 
     .nav-btn {
-      background: rgba(255, 255, 255, 0.2);
+      background: var(--white-20);
       border: none;
-      color: white;
+      color: var(--white);
       font-size: 2rem;
       cursor: pointer;
       margin: 0 2rem;
@@ -165,7 +166,7 @@
     }
 
     .nav-btn:hover:not(:disabled) {
-      background: rgba(255, 255, 255, 0.3);
+      background: var(--white-30);
       transform: scale(1.1);
     }
 
@@ -177,7 +178,7 @@
     .dhikr-counter {
       font-size: 1.3rem;
       font-weight: 600;
-      background: rgba(0, 0, 0, 0.3);
+      background: var(--black-30);
       padding: 0.5rem 1rem;
       border-radius: 20px;
     }
@@ -286,6 +287,7 @@
     let countdownInterval;
     let currentDhikrIndex = 0;
     const totalDhikrs = 6;
+    let autoSwitchInterval;
 
     function updateCountdown() {
       const minutes = Math.floor(countdownSeconds / 60);
@@ -303,6 +305,7 @@
 
     function closeAdzkaar() {
       clearInterval(countdownInterval);
+      clearInterval(autoSwitchInterval);
       window.close();
       // Als window.close() niet werkt (bijv. in kiosk mode), ga terug naar hoofdpagina
       setTimeout(() => {
@@ -344,6 +347,17 @@
       }
     }
 
+    function autoSwitchDhikr() {
+      if (currentDhikrIndex < totalDhikrs - 1) {
+        currentDhikrIndex++;
+        showDhikr(currentDhikrIndex);
+      } else {
+        // Als we bij de laatste dhikr zijn, begin opnieuw
+        currentDhikrIndex = 0;
+        showDhikr(currentDhikrIndex);
+      }
+    }
+
     // Keyboard navigation
     document.addEventListener('keydown', function(event) {
       if (event.key === 'ArrowRight' || event.key === ' ') {
@@ -364,6 +378,9 @@
     countdownInterval = setInterval(updateCountdown, 1000);
     updateCountdown();
 
+    // Start automatische wissel elke 30 seconden
+    autoSwitchInterval = setInterval(autoSwitchDhikr, 30000);
+
     // Auto-close na ingestelde tijd
     setTimeout(closeAdzkaar, countdownSeconds * 1000);
   </script>

done

@@ -46,3 +46,5 @@ Sun May 25 22:34:29 CEST 2025: Sonos herstart probleem opgelost - debounce mecha
 2025-05-26 20:59:32 - Settings layout verder verfijnd: betere spacing, uitlijning en responsive design
 2025-05-26 21:04:05 - Layout compacter gemaakt en scrolling toegevoegd aan settings pagina
 2025-05-26 21:06:51 - Volume error opgelost in backend - oude volume veld vervangen door volume_day/volume_night
+Wed May 28 07:22:58 CEST 2025: Automatische navigatie toegevoegd aan adzkaar.html - switcht elke 30 seconden naar volgende dhikr
+Wed May 28 07:27:01 CEST 2025: Centraal kleurenschema geïmplementeerd - alle kleuren nu aanpasbaar via colors.css