filoor
fb8a35490a
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.
371 lines
10 KiB
HTML
371 lines
10 KiB
HTML
<!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> |