filoor
d378511401
Deze commit verbetert de laadtijden en responsiviteit van de Adhaan-webapp door verschillende optimalisaties. Er is een verbetering in de structuur van HTML en JavaScript. De expliciete onclick-attributen zijn vervangen door event listeners, caching van DOM-elementen is geïntroduceerd, en er zijn debouncing-technieken toegevoegd voor efficiëntere updates van weer- en hadithgegevens. Verder is er sprake van een herschikking van de countdown-timer en andere UI-elementen om logischer te werken, zoals het verbergen van de inhoud om FOUC te voorkomen totdat alles geladen is. Deze wijzigingen samen dragen bij aan een soepeler gebruikerservaring.
347 lines
9.7 KiB
HTML
347 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Adzkaar na het Gebed</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<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">
|
|
<style>
|
|
.adzkaar-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: var(--primary-gradient);
|
|
color: var(--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: var(--text-shadow);
|
|
}
|
|
|
|
.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: var(--white-10);
|
|
border-radius: 15px;
|
|
padding: 2rem;
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid var(--white-20);
|
|
transition: all 0.3s ease;
|
|
max-width: 800px;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.dhikr-item.active {
|
|
display: block;
|
|
background: var(--white-15);
|
|
border: 1px solid var(--white-30);
|
|
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: var(--white);
|
|
}
|
|
|
|
.dhikr-transliteration {
|
|
font-family: 'Lato', sans-serif;
|
|
font-size: 1.3rem;
|
|
font-style: italic;
|
|
margin-bottom: 1rem;
|
|
opacity: 0.8;
|
|
color: var(--text-muted-dark);
|
|
}
|
|
|
|
.dhikr-translation {
|
|
font-family: 'Lato', sans-serif;
|
|
font-size: 1.2rem;
|
|
color: var(--text-muted-dark);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.dhikr-count {
|
|
display: inline-block;
|
|
background: var(--white-20);
|
|
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: var(--black-50);
|
|
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: var(--white-20);
|
|
border: none;
|
|
color: var(--white);
|
|
padding: 0.8rem;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
font-size: 1.5rem;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.close-button:hover {
|
|
background: var(--white-30);
|
|
}
|
|
|
|
.dhikr-navigation {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.nav-btn {
|
|
background: var(--white-20);
|
|
border: none;
|
|
color: var(--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: var(--white-30);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.nav-btn:disabled {
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.dhikr-counter {
|
|
font-size: 1.3rem;
|
|
font-weight: 600;
|
|
background: var(--black-30);
|
|
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">
|
|
<div class="adzkaar-header">
|
|
<h1 class="adzkaar-title">Adzkaar na het Gebed</h1>
|
|
<p class="adzkaar-subtitle">Herinneringen voor na het gebed</p>
|
|
</div>
|
|
|
|
<div class="adzkaar-content">
|
|
<div class="dhikr-navigation">
|
|
<button class="nav-btn" id="prevBtn" disabled>
|
|
<span class="material-icons">arrow_back</span>
|
|
</button>
|
|
<span class="dhikr-counter" id="counter">1/33</span>
|
|
<button class="nav-btn" id="nextBtn">
|
|
<span class="material-icons">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="dhikr-container">
|
|
<div class="dhikr-item active" id="dhikr-1">
|
|
<div class="dhikr-arabic">سُبْحَانَ اللَّهِ</div>
|
|
<div class="dhikr-transliteration">Subhanallah</div>
|
|
<div class="dhikr-translation">Glorie zij Allah</div>
|
|
<div class="dhikr-count">33x</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">Alhamdulillah</div>
|
|
<div class="dhikr-translation">Alle lof 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">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="4">
|
|
<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 class="countdown-timer" id="countdown">00:00</div>
|
|
<button class="close-button" id="closeBtn">
|
|
<span class="material-icons">close</span>
|
|
</button>
|
|
</div>
|
|
|
|
<script>
|
|
// Cache DOM elementen
|
|
const dhikrItems = document.querySelectorAll('.dhikr-item');
|
|
const prevBtn = document.getElementById('prevBtn');
|
|
const nextBtn = document.getElementById('nextBtn');
|
|
const counter = document.getElementById('counter');
|
|
const closeBtn = document.getElementById('closeBtn');
|
|
const countdownEl = document.getElementById('countdown');
|
|
|
|
let currentIndex = 0;
|
|
const totalItems = dhikrItems.length;
|
|
let countdownInterval;
|
|
|
|
// Update counter display
|
|
function updateCounter() {
|
|
counter.textContent = `${currentIndex + 1}/${totalItems}`;
|
|
}
|
|
|
|
// Show dhikr item
|
|
function showDhikr(index) {
|
|
dhikrItems.forEach(item => item.classList.remove('active'));
|
|
dhikrItems[index].classList.add('active');
|
|
currentIndex = index;
|
|
updateCounter();
|
|
updateNavigationButtons();
|
|
}
|
|
|
|
// Update navigation buttons
|
|
function updateNavigationButtons() {
|
|
prevBtn.disabled = currentIndex === 0;
|
|
nextBtn.disabled = currentIndex === totalItems - 1;
|
|
}
|
|
|
|
// Navigation event handlers
|
|
prevBtn.addEventListener('click', () => {
|
|
if (currentIndex > 0) {
|
|
showDhikr(currentIndex - 1);
|
|
}
|
|
});
|
|
|
|
nextBtn.addEventListener('click', () => {
|
|
if (currentIndex < totalItems - 1) {
|
|
showDhikr(currentIndex + 1);
|
|
}
|
|
});
|
|
|
|
// Close button handler
|
|
closeBtn.addEventListener('click', () => {
|
|
window.close();
|
|
});
|
|
|
|
// Countdown timer
|
|
function startCountdown(duration) {
|
|
let timer = duration;
|
|
clearInterval(countdownInterval);
|
|
|
|
countdownInterval = setInterval(() => {
|
|
const minutes = parseInt(timer / 60, 10);
|
|
const seconds = parseInt(timer % 60, 10);
|
|
|
|
countdownEl.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
|
|
|
if (--timer < 0) {
|
|
clearInterval(countdownInterval);
|
|
window.close();
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
// Initialize
|
|
showDhikr(0);
|
|
startCountdown(300); // 5 minuten countdown
|
|
</script>
|
|
</body>
|
|
</html> |