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.
This commit is contained in:
parent
350e0d817a
commit
f3cbd6e910
@ -311,6 +311,9 @@ def instellingen():
|
|||||||
settings['adzkaar_enabled'] = 'adzkaar_enabled' in request.form
|
settings['adzkaar_enabled'] = 'adzkaar_enabled' in request.form
|
||||||
settings['adzkaar_duration'] = int(request.form.get('adzkaar_duration', 5))
|
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['zones'] = request.form.getlist('zones')
|
||||||
settings['audio_clip'] = request.form['audio_clip']
|
settings['audio_clip'] = request.form['audio_clip']
|
||||||
|
|
||||||
|
|||||||
@ -17,5 +17,6 @@
|
|||||||
"volume": 10,
|
"volume": 10,
|
||||||
"adzkaar_enabled": true,
|
"adzkaar_enabled": true,
|
||||||
"adzkaar_duration": 5,
|
"adzkaar_duration": 5,
|
||||||
|
"hadith_interval_seconds": 30,
|
||||||
"debug_mode": true
|
"debug_mode": true
|
||||||
}
|
}
|
||||||
@ -139,6 +139,398 @@
|
|||||||
{
|
{
|
||||||
"text": "Zeg het goede of zwijg.",
|
"text": "Zeg het goede of zwijg.",
|
||||||
"bron": "Sahih al-Bukhari"
|
"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"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@ -25,7 +25,7 @@ html.light {
|
|||||||
--icoon-kleur: var(--icoon-light);
|
--icoon-kleur: var(--icoon-light);
|
||||||
--card-bg: var(--white);
|
--card-bg: var(--white);
|
||||||
--border-color: var(--border-light);
|
--border-color: var(--border-light);
|
||||||
--primary-color: var(--accent-blue);
|
--primary-color: var(--accent-black);
|
||||||
--text-color: var(--text-primary-light);
|
--text-color: var(--text-primary-light);
|
||||||
--text-secondary: var(--text-secondary-light);
|
--text-secondary: var(--text-secondary-light);
|
||||||
}
|
}
|
||||||
@ -350,7 +350,7 @@ blockquote footer {
|
|||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
}
|
}
|
||||||
.hadith-center blockquote {
|
.hadith-center blockquote {
|
||||||
font-size: 1.8rem;
|
font-size: 4.8rem;
|
||||||
}
|
}
|
||||||
.vertical-tijden {
|
.vertical-tijden {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
@ -582,7 +582,7 @@ blockquote footer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hadith-center blockquote {
|
.hadith-center blockquote {
|
||||||
font-size: 2.2rem;
|
font-size: 4.2rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -1292,3 +1292,111 @@ html.dark .hadith-center {
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
text-shadow: 2px 2px 8px #000;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -98,6 +98,7 @@
|
|||||||
{% endfor %}
|
{% endfor %}
|
||||||
];
|
];
|
||||||
const nextPrayerTime = "{{ next_time }}";
|
const nextPrayerTime = "{{ next_time }}";
|
||||||
|
const hadithInterval = {{ settings.hadith_interval_seconds or 30 }} * 1000; // Convert to milliseconds
|
||||||
</script>
|
</script>
|
||||||
<script src="/static/countdown.js"></script>
|
<script src="/static/countdown.js"></script>
|
||||||
<script>
|
<script>
|
||||||
@ -111,9 +112,9 @@
|
|||||||
updateWeather();
|
updateWeather();
|
||||||
setInterval(updateWeather, 600000); // 10 minuten
|
setInterval(updateWeather, 600000); // 10 minuten
|
||||||
|
|
||||||
// Update hadith elke 30 seconden
|
// Update hadith elke X seconden (instelbaar)
|
||||||
updateHadith();
|
updateHadith();
|
||||||
setInterval(updateHadith, 30000); // 30 seconden
|
setInterval(updateHadith, hadithInterval);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Functie om weerdata bij te werken
|
// Functie om weerdata bij te werken
|
||||||
@ -137,10 +138,9 @@
|
|||||||
fetch('/api/hadith')
|
fetch('/api/hadith')
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
.then(data => {
|
.then(data => {
|
||||||
const hadithTextElement = document.querySelector('.hadith-section blockquote');
|
const hadithTextElement = document.querySelector('.hadith-center blockquote');
|
||||||
const hadithFooterElement = document.querySelector('.hadith-section blockquote footer');
|
|
||||||
|
|
||||||
if (hadithTextElement && hadithFooterElement) {
|
if (hadithTextElement) {
|
||||||
// Update de tekst en bron
|
// Update de tekst en bron
|
||||||
hadithTextElement.innerHTML = `"${data.text}"<footer>— ${data.bron}</footer>`;
|
hadithTextElement.innerHTML = `"${data.text}"<footer>— ${data.bron}</footer>`;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -22,201 +22,273 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form method="POST" class="settings-form">
|
<form method="POST" class="settings-form">
|
||||||
<div class="settings-section">
|
<!-- Tab Navigation -->
|
||||||
<div class="form-group">
|
<div class="tab-navigation">
|
||||||
<label>
|
<button type="button" class="tab-btn active" data-tab="audio">
|
||||||
<span class="material-icons">info</span>
|
<span class="material-icons">volume_up</span>
|
||||||
Volume Instellingen:
|
Audio & Volume
|
||||||
</label>
|
</button>
|
||||||
<p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0.5rem 0;">
|
<button type="button" class="tab-btn" data-tab="prayer">
|
||||||
Stel verschillende volumes in voor overdag en 's avonds. Het systeem wisselt automatisch tussen deze volumes op basis van de ingestelde tijden.
|
<span class="material-icons">schedule</span>
|
||||||
</p>
|
Gebedstijden
|
||||||
</div>
|
</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">
|
<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>
|
<label>
|
||||||
<span class="material-icons">play_circle</span>
|
<span class="material-icons">info</span>
|
||||||
Audio Voorbeeld:
|
Volume Instellingen:
|
||||||
</label>
|
</label>
|
||||||
<div class="audio-preview">
|
<p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0.5rem 0;">
|
||||||
<button type="button" class="preview-btn" onclick="previewAudio()">
|
Stel verschillende volumes in voor overdag en 's avonds. Het systeem wisselt automatisch tussen deze volumes op basis van de ingestelde tijden.
|
||||||
<span class="material-icons">play_arrow</span>
|
</p>
|
||||||
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" />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-row">
|
||||||
<label for="zuhr_offset">
|
<div class="form-group">
|
||||||
<span class="material-icons">wb_sunny</span>
|
<label for="volume_day">
|
||||||
Zuhr Aanpassing (minuten):
|
<span class="material-icons">volume_up</span>
|
||||||
</label>
|
Volume Overdag (0–100):
|
||||||
<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
|
|
||||||
</label>
|
</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>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="adzkaar_duration">
|
<label>
|
||||||
<span class="material-icons">timer</span>
|
<span class="material-icons">speaker_group</span>
|
||||||
Adzkaar duur (minuten):
|
Sonos Zones:
|
||||||
</label>
|
</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>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="button-group">
|
<!-- Prayer Times Tab -->
|
||||||
<button type="submit" name="test_clip" class="btn-secondary">
|
<div class="tab-content" id="prayer-tab">
|
||||||
<span class="material-icons">speaker</span>
|
<div class="settings-section">
|
||||||
Test op Sonos
|
<div class="form-group">
|
||||||
</button>
|
<label>
|
||||||
<button type="submit" class="btn-primary">
|
<span class="material-icons">schedule</span>
|
||||||
<span class="material-icons">save</span>
|
Gebedstijd Aanpassingen:
|
||||||
Instellingen Opslaan
|
</label>
|
||||||
</button>
|
<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>
|
||||||
</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>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -249,6 +321,9 @@
|
|||||||
// Setup theme toggle
|
// Setup theme toggle
|
||||||
setupThemeToggle();
|
setupThemeToggle();
|
||||||
updateThemeIcon();
|
updateThemeIcon();
|
||||||
|
|
||||||
|
// Setup tabs
|
||||||
|
setupTabs();
|
||||||
};
|
};
|
||||||
|
|
||||||
// Theme toggle functionaliteit (gekopieerd van index.html)
|
// 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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
3
done
3
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 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: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: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
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user