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.
This commit is contained in:
parent
10b325b25d
commit
6940103255
119
adhan-webapp/static/README-KLEUREN.md
Normal file
119
adhan-webapp/static/README-KLEUREN.md
Normal file
@ -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)
|
||||
86
adhan-webapp/static/colors.css
Normal file
86
adhan-webapp/static/colors.css
Normal file
@ -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);
|
||||
}
|
||||
@ -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 {
|
||||
--quran-bg: #111;
|
||||
--quran-text: #fff;
|
||||
--quran-panel-bg: rgba(24, 24, 24, 0.95);
|
||||
--quran-panel-text: #fff;
|
||||
--quran-accent: #fff;
|
||||
--quran-border: rgba(255, 255, 255, 0.1);
|
||||
--quran-card-bg: rgba(40, 40, 40, 0.95);
|
||||
--quran-text-secondary: #bbb;
|
||||
--quran-hover-bg: rgba(255, 255, 255, 0.1);
|
||||
:root.quran-dark {
|
||||
--quran-bg: var(--bg-dark);
|
||||
--quran-text: var(--text-primary-dark);
|
||||
--quran-panel-bg: var(--panel-bg-dark);
|
||||
--quran-panel-text: var(--text-primary-dark);
|
||||
--quran-accent: var(--white);
|
||||
--quran-border: var(--border-dark);
|
||||
--quran-card-bg: var(--panel-bg-dark);
|
||||
--quran-text-secondary: var(--text-secondary-dark);
|
||||
--quran-hover-bg: var(--hover-bg-dark);
|
||||
}
|
||||
|
||||
/* Light theme variabelen voor Quran pagina */
|
||||
html.light {
|
||||
--quran-bg: #f7fafc;
|
||||
--quran-text: #222;
|
||||
--quran-panel-bg: #fff;
|
||||
--quran-panel-text: #222;
|
||||
--quran-accent: #d4af37;
|
||||
--quran-border: #e0e6ed;
|
||||
--quran-card-bg: #ffffff;
|
||||
--quran-text-secondary: #666;
|
||||
--quran-hover-bg: rgba(212, 175, 55, 0.1);
|
||||
:root.quran-light {
|
||||
--quran-bg: var(--bg-light);
|
||||
--quran-text: var(--text-primary-light);
|
||||
--quran-panel-bg: var(--panel-bg-light);
|
||||
--quran-panel-text: var(--text-primary-light);
|
||||
--quran-accent: var(--gold);
|
||||
--quran-border: var(--border-light);
|
||||
--quran-card-bg: var(--white);
|
||||
--quran-text-secondary: var(--text-secondary-light);
|
||||
--quran-hover-bg: var(--hover-bg-light);
|
||||
}
|
||||
|
||||
/* Zorg ervoor dat het zijmenu de Quran theme variabelen gebruikt */
|
||||
|
||||
@ -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);
|
||||
--tijdkleur-light: #222;
|
||||
--tijdkleur-dark: #fff;
|
||||
--icoon-light: #222;
|
||||
--icoon-dark: #fff;
|
||||
--panel-shadow: var(--shadow);
|
||||
--tijdkleur-light: var(--text-primary-light);
|
||||
--tijdkleur-dark: var(--text-primary-dark);
|
||||
--icoon-light: var(--text-primary-light);
|
||||
--icoon-dark: var(--text-primary-dark);
|
||||
}
|
||||
|
||||
html.light {
|
||||
--bg: #f7fafc;
|
||||
--text: #222;
|
||||
--weather-temp: #222;
|
||||
--panel-bg: #fff;
|
||||
--panel-text: #222;
|
||||
--accent: #2563eb;
|
||||
--bg: var(--bg-light);
|
||||
--text: var(--text-primary-light);
|
||||
--weather-temp: var(--text-primary-light);
|
||||
--panel-bg: var(--panel-bg-light);
|
||||
--panel-text: var(--text-primary-light);
|
||||
--accent: var(--accent-blue);
|
||||
--accent-blue: #f0f0f0;
|
||||
--panel-border: #e0e6ed;
|
||||
--list-bg: #f7fafc;
|
||||
--list-border: #e0e6ed;
|
||||
--active-bg: #fffbe6;
|
||||
--panel-border: var(--border-light);
|
||||
--list-bg: var(--bg-light);
|
||||
--list-border: var(--border-light);
|
||||
--active-bg: var(--active-bg-light);
|
||||
--tijdkleur: var(--tijdkleur-light);
|
||||
--icoon-kleur: var(--icoon-light);
|
||||
--card-bg: #ffffff;
|
||||
--border-color: #e0e6ed;
|
||||
--primary-color: #2563eb;
|
||||
--text-color: #222;
|
||||
--text-secondary: #666;
|
||||
--card-bg: var(--white);
|
||||
--border-color: var(--border-light);
|
||||
--primary-color: var(--accent-blue);
|
||||
--text-color: var(--text-primary-light);
|
||||
--text-secondary: var(--text-secondary-light);
|
||||
}
|
||||
|
||||
html.dark, body.dark {
|
||||
--bg: #111;
|
||||
--text: #fff;
|
||||
--panel-bg: #181818cc;
|
||||
--panel-text: #fff;
|
||||
--accent: #fff;
|
||||
--accent-blue: #222;
|
||||
--panel-border: #222;
|
||||
--list-bg: rgba(255,255,255,0.04);
|
||||
--list-border: #222;
|
||||
--active-bg: rgba(234, 179, 8, 0.08);
|
||||
--bg: var(--bg-dark);
|
||||
--text: var(--text-primary-dark);
|
||||
--panel-bg: var(--panel-bg-dark);
|
||||
--panel-text: var(--text-primary-dark);
|
||||
--accent: var(--white);
|
||||
--accent-blue: var(--text-primary-light);
|
||||
--panel-border: var(--text-primary-light);
|
||||
--list-bg: var(--white-10);
|
||||
--list-border: var(--text-primary-light);
|
||||
--active-bg: var(--active-bg-dark);
|
||||
--tijdkleur: var(--tijdkleur-dark);
|
||||
--icoon-kleur: var(--icoon-dark);
|
||||
--card-bg: rgba(255, 255, 255, 0.1);
|
||||
--border-color: rgba(255, 255, 255, 0.2);
|
||||
--primary-color: #fff;
|
||||
--text-color: #fff;
|
||||
--text-secondary: #bbb;
|
||||
--card-bg: var(--white-10);
|
||||
--border-color: var(--border-dark);
|
||||
--primary-color: var(--white);
|
||||
--text-color: var(--text-primary-dark);
|
||||
--text-secondary: var(--text-secondary-dark);
|
||||
}
|
||||
|
||||
body, 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%);
|
||||
color: white;
|
||||
background: var(--primary-gradient);
|
||||
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);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
background: var(--white-15);
|
||||
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>
|
||||
|
||||
2
done
2
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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user