feat(adzkaar): voeg fullscreen Adzkaar-functionaliteit toe

Deze commit implementeert een nieuw Adzkaar-scherm dat automatisch verschijnt na de gebedstijden. Belangrijke wijzigingen omvatten:

- Toevoeging van instellingen voor het inschakelen en aanpassen van de duur van het Adzkaar-scherm in `settings.json` en de bijbehorende HTML.
- Implementatie van nieuwe routes `/adzkaar` en `/api/trigger-adzkaar` om respectievelijk het scherm weer te geven en te debuggen.
- Update van de countdown-logica om het Adzkaar-scherm drie seconden na het adhan af te spelen.
- Nieuwe frontend-elementen voor een interactieve, kaart-voor-kaart weergave van de Adzkaar met ondersteuning voor navigatie en toetsenbordbediening.
- Aanpassing van bestaande templates om integratie van de nieuwe functionaliteiten te faciliteren.

Deze toevoegingen verbeteren de gebruikerservaring door meer spirituele betrokkenheid mogelijk te maken na de gebedstijden.

adhan-webapp/app.py

@@ -307,6 +307,10 @@ def instellingen():
         settings['maghrib_offset'] = int(request.form.get('maghrib_offset', 0))
         settings['isha_offset'] = int(request.form.get('isha_offset', 0))
 
+        # Adzkaar instellingen
+        settings['adzkaar_enabled'] = 'adzkaar_enabled' in request.form
+        settings['adzkaar_duration'] = int(request.form.get('adzkaar_duration', 5))
+            
         settings['zones'] = request.form.getlist('zones')
         settings['audio_clip'] = request.form['audio_clip']
 
@@ -594,5 +598,40 @@ def quran():
                            gebedstijden=gebedstijden,
                            settings=settings)
 
+@app.route('/adzkaar')
+def adzkaar():
+    """Adzkaar pagina na gebed"""
+    settings = load_settings()
+    duration_minutes = settings.get('adzkaar_duration', 5)  # Default 5 minuten
+    
+    return render_template('adzkaar.html', 
+                           duration_minutes=duration_minutes,
+                           settings=settings)
+
+@app.route('/api/trigger-adzkaar', methods=['POST'])
+def trigger_adzkaar():
+    """API endpoint om Adzkaar scherm te triggeren (voor debug)"""
+    try:
+        settings = load_settings()
+        
+        # Check of Adzkaar is ingeschakeld
+        if not settings.get('adzkaar_enabled', True):
+            return jsonify({
+                'success': False,
+                'error': 'Adzkaar is uitgeschakeld in instellingen'
+            })
+        
+        duration = settings.get('adzkaar_duration', 5)
+        
+        return jsonify({
+            'success': True,
+            'message': f'Adzkaar scherm wordt getoond voor {duration} minuten',
+            'duration': duration,
+            'url': '/adzkaar'
+        })
+        
+    except Exception as e:
+        return jsonify({'success': False, 'error': str(e)}), 500
+
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=80)

adhan-webapp/done

@@ -10,3 +10,5 @@ Mon May 26 18:17:57 CEST 2025: Tijdzone probleem opgelost - Container gebruikt n
 2025-05-28 03:34:23 - Countdown logica gerepareerd: na laatste gebed van de dag toont nu correct 'Fajr (morgen)' met juiste countdown tot volgende dag
 2025-05-28 03:36:17 - Settings pagina layout verbeterd: volledige breedte gebruikt, drie-kolommen layout voor gebedstijd aanpassingen
 2025-05-28 03:37:57 - Light theme kleuren gerepareerd: teksten nu zichtbaar in light mode, accent kleuren aangepast voor betere contrast
+2025-05-28 03:49:24 - Adzkaar fullscreen functionaliteit geïmplementeerd: nieuwe /adzkaar route, instellingen, debug knoppen, automatische trigger na gebedstijden, Nederlandse/Arabische dhikr content
+2025-05-28 03:55:38 - Adzkaar scherm verbeterd naar kaart-voor-kaart weergave met navigatie knoppen en toetsenbord besturing

adhan-webapp/settings.json

@@ -14,5 +14,7 @@
   ],
   "audio_clip": "adhan1.mp3",
   "mute": false,
-  "volume": 10
+  "volume": 10,
+  "adzkaar_enabled": true,
+  "adzkaar_duration": 5
 }

adhan-webapp/static/countdown.js

@@ -82,6 +82,11 @@ function startCountdown(targetTimeStr, prayerName, isNextDay = false) {
       const audio = document.getElementById('adhanAudio');
       if (audio) audio.play();
       
+      // Trigger Adzkaar scherm na 3 seconden (geef adhaan tijd om te starten)
+      setTimeout(() => {
+        triggerAdzkaarScreen(displayName);
+      }, 3000);
+      
       // Ga naar volgende gebed
       if (isNextDayPrayer) {
         // We waren aan het wachten op het eerste gebed van de nieuwe dag
@@ -142,3 +147,36 @@ function setupThemeToggle() {
     applyTheme(current);
   });
 }
+
+function triggerAdzkaarScreen(prayerName) {
+  // Check eerst of Adzkaar is ingeschakeld via API
+  fetch('/api/trigger-adzkaar', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' }
+  })
+  .then(response => response.json())
+  .then(data => {
+    if (data.success) {
+      console.log(`📿 Adzkaar scherm wordt getoond na ${prayerName}`);
+      
+      // Open Adzkaar scherm in fullscreen
+      // In kiosk mode proberen we een nieuw venster te openen
+      const adzkaarWindow = window.open(
+        data.url, 
+        'adzkaar', 
+        'fullscreen=yes,scrollbars=no,resizable=no,toolbar=no,menubar=no,status=no'
+      );
+      
+      // Als window.open niet werkt (bijv. popup blocker), navigeer naar de pagina
+      if (!adzkaarWindow) {
+        console.log('📿 Popup geblokkeerd, navigeren naar Adzkaar pagina...');
+        window.location.href = data.url;
+      }
+    } else {
+      console.log(`📿 Adzkaar niet getoond: ${data.error}`);
+    }
+  })
+  .catch(error => {
+    console.log(`❌ Fout bij Adzkaar trigger: ${error.message}`);
+  });
+}

adhan-webapp/templates/adzkaar.html

@@ -0,0 +1,371 @@
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+  <meta charset="UTF-8">
+  <title>Adzkaar na het Gebed</title>
+  <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">
+  <style>
+    .adzkaar-container {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+      color: white;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      z-index: 9999;
+      padding: 2rem;
+      box-sizing: border-box;
+      overflow-y: auto;
+    }
+
+    .adzkaar-header {
+      text-align: center;
+      margin-bottom: 3rem;
+    }
+
+    .adzkaar-title {
+      font-family: 'Cairo', sans-serif;
+      font-size: 3.5rem;
+      font-weight: 700;
+      margin-bottom: 1rem;
+      text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
+    }
+
+    .adzkaar-subtitle {
+      font-family: 'Lato', sans-serif;
+      font-size: 1.5rem;
+      opacity: 0.9;
+      font-weight: 300;
+    }
+
+    .adzkaar-content {
+      max-width: 900px;
+      width: 100%;
+      text-align: center;
+    }
+
+    .dhikr-container {
+      position: relative;
+      min-height: 400px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .dhikr-item {
+      display: none;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 15px;
+      padding: 2rem;
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      transition: all 0.3s ease;
+      max-width: 800px;
+      width: 100%;
+      text-align: center;
+    }
+
+    .dhikr-item.active {
+      display: block;
+      background: rgba(255, 255, 255, 0.15);
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      transform: scale(1.02);
+    }
+
+    .dhikr-arabic {
+      font-family: 'Cairo', sans-serif;
+      font-size: 2.2rem;
+      font-weight: 600;
+      margin-bottom: 1rem;
+      direction: rtl;
+      line-height: 1.6;
+      color: #fff;
+    }
+
+    .dhikr-transliteration {
+      font-family: 'Lato', sans-serif;
+      font-size: 1.3rem;
+      font-style: italic;
+      margin-bottom: 1rem;
+      opacity: 0.8;
+      color: #e8f4fd;
+    }
+
+    .dhikr-translation {
+      font-family: 'Lato', sans-serif;
+      font-size: 1.2rem;
+      color: #f0f8ff;
+      line-height: 1.5;
+    }
+
+    .dhikr-count {
+      display: inline-block;
+      background: rgba(255, 255, 255, 0.2);
+      padding: 0.5rem 1rem;
+      border-radius: 20px;
+      font-size: 0.9rem;
+      margin-top: 1rem;
+      font-weight: 600;
+    }
+
+    .countdown-timer {
+      position: fixed;
+      top: 2rem;
+      right: 2rem;
+      background: rgba(0, 0, 0, 0.5);
+      padding: 1rem 1.5rem;
+      border-radius: 10px;
+      font-family: 'Cairo', sans-serif;
+      font-size: 1.2rem;
+      font-weight: 600;
+    }
+
+    .close-button {
+      position: fixed;
+      top: 2rem;
+      left: 2rem;
+      background: rgba(255, 255, 255, 0.2);
+      border: none;
+      color: white;
+      padding: 0.8rem;
+      border-radius: 50%;
+      cursor: pointer;
+      font-size: 1.5rem;
+      transition: background 0.3s ease;
+    }
+
+    .close-button:hover {
+      background: rgba(255, 255, 255, 0.3);
+    }
+
+    .dhikr-navigation {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-bottom: 2rem;
+    }
+
+    .nav-btn {
+      background: rgba(255, 255, 255, 0.2);
+      border: none;
+      color: white;
+      font-size: 2rem;
+      cursor: pointer;
+      margin: 0 2rem;
+      padding: 1rem;
+      border-radius: 50%;
+      transition: all 0.3s ease;
+    }
+
+    .nav-btn:hover:not(:disabled) {
+      background: rgba(255, 255, 255, 0.3);
+      transform: scale(1.1);
+    }
+
+    .nav-btn:disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+
+    .dhikr-counter {
+      font-size: 1.3rem;
+      font-weight: 600;
+      background: rgba(0, 0, 0, 0.3);
+      padding: 0.5rem 1rem;
+      border-radius: 20px;
+    }
+
+    @media (max-width: 768px) {
+      .adzkaar-title {
+        font-size: 2.5rem;
+      }
+      
+      .dhikr-arabic {
+        font-size: 1.8rem;
+      }
+      
+      .dhikr-transliteration {
+        font-size: 1.1rem;
+      }
+      
+      .dhikr-translation {
+        font-size: 1rem;
+      }
+      
+      .dhikr-item {
+        padding: 1.5rem;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="adzkaar-container">
+    <button class="close-button" onclick="closeAdzkaar()" title="Sluiten">
+      <span class="material-icons">close</span>
+    </button>
+    
+    <div class="countdown-timer" id="countdownTimer">
+      5:00
+    </div>
+
+    <div class="adzkaar-header">
+      <h1 class="adzkaar-title">أذكار بعد الصلاة</h1>
+      <p class="adzkaar-subtitle">Adzkaar na het Gebed</p>
+    </div>
+
+    <div class="adzkaar-content">
+      <div class="dhikr-navigation">
+        <button class="nav-btn" id="prevBtn" onclick="previousDhikr()" disabled>
+          <span class="material-icons">arrow_back</span>
+        </button>
+        
+        <div class="dhikr-counter">
+          <span id="currentDhikr">1</span> / <span id="totalDhikr">6</span>
+        </div>
+        
+        <button class="nav-btn" id="nextBtn" onclick="nextDhikr()">
+          <span class="material-icons">arrow_forward</span>
+        </button>
+      </div>
+
+      <div class="dhikr-container" id="dhikrContainer">
+        <div class="dhikr-item active" data-index="0">
+          <div class="dhikr-arabic">أَسْتَغْفِرُ اللَّهَ</div>
+          <div class="dhikr-transliteration">Astaghfirullah</div>
+          <div class="dhikr-translation">Ik vraag Allah om vergeving</div>
+          <div class="dhikr-count">3x</div>
+        </div>
+
+        <div class="dhikr-item" data-index="1">
+          <div class="dhikr-arabic">اللَّهُمَّ أَنْتَ السَّلاَمُ وَمِنْكَ السَّلاَمُ تَبَارَكْتَ يَا ذَا الْجَلاَلِ وَالإِكْرَامِ</div>
+          <div class="dhikr-transliteration">Allahumma anta as-salamu wa minka as-salamu, tabarakta ya dhal-jalali wal-ikram</div>
+          <div class="dhikr-translation">O Allah, U bent de Vrede en van U komt de vrede. Gezegend bent U, O Bezitter van Majesteit en Eer</div>
+          <div class="dhikr-count">1x</div>
+        </div>
+
+        <div class="dhikr-item" data-index="2">
+          <div class="dhikr-arabic">سُبْحَانَ اللَّهِ</div>
+          <div class="dhikr-transliteration">Subhan Allah</div>
+          <div class="dhikr-translation">Glorie zij Allah</div>
+          <div class="dhikr-count">33x</div>
+        </div>
+
+        <div class="dhikr-item" data-index="3">
+          <div class="dhikr-arabic">الْحَمْدُ لِلَّهِ</div>
+          <div class="dhikr-transliteration">Alhamdulillah</div>
+          <div class="dhikr-translation">Alle lof zij Allah</div>
+          <div class="dhikr-count">33x</div>
+        </div>
+
+        <div class="dhikr-item" data-index="4">
+          <div class="dhikr-arabic">اللَّهُ أَكْبَرُ</div>
+          <div class="dhikr-transliteration">Allahu Akbar</div>
+          <div class="dhikr-translation">Allah is de Grootste</div>
+          <div class="dhikr-count">34x</div>
+        </div>
+
+        <div class="dhikr-item" data-index="5">
+          <div class="dhikr-arabic">لاَ إِلَهَ إِلاَّ اللَّهُ وَحْدَهُ لاَ شَرِيكَ لَهُ لَهُ الْمُلْكُ وَلَهُ الْحَمْدُ وَهُوَ عَلَى كُلِّ شَيْءٍ قَدِيرٌ</div>
+          <div class="dhikr-transliteration">La ilaha illa Allah wahdahu la sharika lah, lahu al-mulku wa lahu al-hamdu wa huwa 'ala kulli shay'in qadir</div>
+          <div class="dhikr-translation">Er is geen god behalve Allah alleen, Hij heeft geen partner. Aan Hem behoort de heerschappij en aan Hem behoort alle lof, en Hij heeft macht over alle dingen</div>
+          <div class="dhikr-count">1x</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    let countdownSeconds = {{ duration_minutes }} * 60;
+    let countdownInterval;
+    let currentDhikrIndex = 0;
+    const totalDhikrs = 6;
+
+    function updateCountdown() {
+      const minutes = Math.floor(countdownSeconds / 60);
+      const seconds = countdownSeconds % 60;
+      const display = `${minutes}:${seconds.toString().padStart(2, '0')}`;
+      document.getElementById('countdownTimer').textContent = display;
+      
+      if (countdownSeconds <= 0) {
+        closeAdzkaar();
+        return;
+      }
+      
+      countdownSeconds--;
+    }
+
+    function closeAdzkaar() {
+      clearInterval(countdownInterval);
+      window.close();
+      // Als window.close() niet werkt (bijv. in kiosk mode), ga terug naar hoofdpagina
+      setTimeout(() => {
+        window.location.href = '/';
+      }, 100);
+    }
+
+    function showDhikr(index) {
+      // Verberg alle dhikr items
+      document.querySelectorAll('.dhikr-item').forEach(item => {
+        item.classList.remove('active');
+      });
+      
+      // Toon de geselecteerde dhikr
+      const targetDhikr = document.querySelector(`[data-index="${index}"]`);
+      if (targetDhikr) {
+        targetDhikr.classList.add('active');
+      }
+      
+      // Update counter
+      document.getElementById('currentDhikr').textContent = index + 1;
+      
+      // Update navigation buttons
+      document.getElementById('prevBtn').disabled = index === 0;
+      document.getElementById('nextBtn').disabled = index === totalDhikrs - 1;
+    }
+
+    function nextDhikr() {
+      if (currentDhikrIndex < totalDhikrs - 1) {
+        currentDhikrIndex++;
+        showDhikr(currentDhikrIndex);
+      }
+    }
+
+    function previousDhikr() {
+      if (currentDhikrIndex > 0) {
+        currentDhikrIndex--;
+        showDhikr(currentDhikrIndex);
+      }
+    }
+
+    // Keyboard navigation
+    document.addEventListener('keydown', function(event) {
+      if (event.key === 'ArrowRight' || event.key === ' ') {
+        event.preventDefault();
+        nextDhikr();
+      } else if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        previousDhikr();
+      } else if (event.key === 'Escape') {
+        closeAdzkaar();
+      }
+    });
+
+    // Initialize
+    showDhikr(0);
+    
+    // Start countdown
+    countdownInterval = setInterval(updateCountdown, 1000);
+    updateCountdown();
+
+    // Auto-close na ingestelde tijd
+    setTimeout(closeAdzkaar, countdownSeconds * 1000);
+  </script>
+</body>
+</html> 

adhan-webapp/templates/debug.html

@@ -7,6 +7,14 @@
   <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@700&family=Lato:wght@400;700&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <style>
+    body {
+      margin: 0;
+      padding: 0;
+      min-height: 100vh;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+    
     .debug-container {
       max-width: 1200px;
       margin: 2rem auto;
@@ -14,6 +22,8 @@
       background: var(--panel-bg);
       border-radius: 15px;
       border: 1px solid var(--panel-border);
+      color: var(--text-color);
+      min-height: calc(100vh - 4rem);
     }
     
     .debug-header {
@@ -28,24 +38,31 @@
       margin-bottom: 0.5rem;
     }
     
+    .debug-header p {
+      color: var(--text-secondary);
+      font-size: 1.1rem;
+    }
+    
     .debug-grid {
-      display: grid;
+      display: flex;
-      grid-template-columns: 1fr 1fr;
+      flex-direction: column;
       gap: 2rem;
       margin-bottom: 2rem;
     }
     
     .debug-panel {
-      background: rgba(255, 255, 255, 0.05);
+      background: var(--card-bg);
       padding: 1.5rem;
       border-radius: 10px;
-      border: 1px solid rgba(255, 255, 255, 0.1);
+      border: 1px solid var(--border-color);
+      color: var(--text-color);
     }
     
     .debug-panel h3 {
       color: var(--accent);
       margin-bottom: 1rem;
       font-family: 'Cairo', sans-serif;
+      font-size: 1.3rem;
     }
     
     .time-controls {
@@ -60,11 +77,16 @@
       gap: 1rem;
     }
     
+    .time-input label {
+      color: var(--text-color);
+      font-weight: 600;
+    }
+    
     .time-input input {
       padding: 0.5rem;
       border: 1px solid var(--border-color);
       border-radius: 5px;
-      background: var(--card-bg);
+      background: var(--input-bg);
       color: var(--text-color);
       font-size: 1.1rem;
       width: 120px;
@@ -78,16 +100,17 @@
       font-weight: 600;
       transition: all 0.3s ease;
       margin: 0.2rem;
+      font-size: 0.9rem;
     }
     
     .btn-primary {
       background: var(--accent);
-      color: #1a1a2e;
+      color: var(--bg-color);
     }
     
     .btn-secondary {
-      background: rgba(255, 255, 255, 0.2);
+      background: var(--text-secondary);
-      color: var(--text-color);
+      color: var(--bg-color);
     }
     
     .btn-danger {
@@ -98,6 +121,7 @@
     .btn:hover {
       transform: translateY(-2px);
       box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+      opacity: 0.9;
     }
     
     .prayer-times-list {
@@ -112,9 +136,10 @@
       align-items: center;
       padding: 0.7rem;
       margin-bottom: 0.5rem;
-      background: rgba(255, 255, 255, 0.05);
+      background: var(--input-bg);
       border-radius: 5px;
-      border: 1px solid rgba(255, 255, 255, 0.1);
+      border: 1px solid var(--border-color);
+      color: var(--text-color);
     }
     
     .prayer-times-list li.active {
@@ -123,13 +148,14 @@
     }
     
     .status-display {
-      background: rgba(0, 0, 0, 0.3);
+      background: var(--input-bg);
       padding: 1rem;
       border-radius: 8px;
       margin-bottom: 1rem;
       font-family: 'Courier New', monospace;
       font-size: 0.9rem;
-      color: #00ff00;
+      color: var(--text-color);
+      border: 1px solid var(--border-color);
     }
     
     .quick-actions {
@@ -148,18 +174,19 @@
     }
     
     .back-link:hover {
-      color: #b8941f;
+      color: var(--text-color);
     }
     
     @media (max-width: 768px) {
-      .debug-grid {
-        grid-template-columns: 1fr;
-      }
-      
       .debug-container {
         margin: 1rem;
         padding: 1rem;
       }
+      
+      .btn {
+        font-size: 0.8rem;
+        padding: 0.5rem 1rem;
+      }
     }
   </style>
 </head>
@@ -237,6 +264,18 @@
         <button class="btn btn-danger" onclick="stopAllSonos()">⏹️ Stop Alle Audio</button>
       </div>
     </div>
+
+    <div class="debug-panel">
+      <h3>📿 Adzkaar Testing</h3>
+      <div class="status-display" id="adzkaarStatus" style="height: 100px; overflow-y: auto;">
+        Status: {% if settings.adzkaar_enabled %}Ingeschakeld{% else %}Uitgeschakeld{% endif %}<br>
+        Duur: {{ settings.adzkaar_duration or 5 }} minuten<br>
+      </div>
+      <div class="quick-actions">
+        <button class="btn btn-primary" onclick="testAdzkaar()">📿 Test Adzkaar Scherm</button>
+        <button class="btn btn-secondary" onclick="openAdzkaarDirect()">🔗 Open Adzkaar Direct</button>
+      </div>
+    </div>
   </div>
 
   <script>
@@ -458,6 +497,33 @@
       });
     }
     
+    function testAdzkaar() {
+      log('📿 Adzkaar scherm testen...');
+      fetch('/api/trigger-adzkaar', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' }
+      })
+      .then(response => response.json())
+      .then(data => {
+        if (data.success) {
+          log(`✅ ${data.message}`);
+          // Open Adzkaar scherm in nieuw venster/tab
+          window.open(data.url, '_blank', 'fullscreen=yes,scrollbars=no,resizable=no');
+        } else {
+          log(`❌ Adzkaar fout: ${data.error}`);
+          document.getElementById('adzkaarStatus').innerHTML += `❌ Fout: ${data.error}<br>`;
+        }
+      })
+      .catch(error => {
+        log(`❌ Netwerk fout bij Adzkaar test: ${error.message}`);
+      });
+    }
+    
+    function openAdzkaarDirect() {
+      log('🔗 Adzkaar scherm direct openen...');
+      window.open('/adzkaar', '_blank', 'fullscreen=yes,scrollbars=no,resizable=no');
+    }
+    
     // Update elke seconde
     setInterval(updateDebugDisplay, 1000);
     

adhan-webapp/templates/settings.html

@@ -175,6 +175,37 @@
             </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
+                </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="button-group">
             <button type="submit" name="test_clip" class="btn-secondary">
               <span class="material-icons">speaker</span>