174 lines
6.4 KiB
HTML
174 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Gebedstijden Display</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<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">
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<!-- Dark/Light toggle -->
|
|
<button id="themeToggle" title="Schakel modus"><span id="themeIcon" class="material-icons">brightness_6</span></button>
|
|
|
|
<div class="left">
|
|
<div class="overlay">
|
|
<div class="tijdstip">
|
|
<div id="current-time">--:--</div>
|
|
<div class="datum-sectie">
|
|
<div class="gregorian-datum">{{ date_info.gregorian_full }}</div>
|
|
<div class="hijri-datum-arabic">{{ date_info.hijri_arabic }}</div>
|
|
<div class="hijri-datum-dutch">{{ date_info.hijri_dutch }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="huidig-gebed">
|
|
<div class="naam">{{ next_name }}</div>
|
|
<div id="countdown">--:--:--</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="right new-layout">
|
|
<div class="hadith-tijden-row">
|
|
<div class="hadith-center">
|
|
<blockquote>
|
|
"{{ hadith.text }}"
|
|
<footer>— {{ hadith.bron }}</footer>
|
|
</blockquote>
|
|
</div>
|
|
<div class="vertical-tijden">
|
|
<ul class="tijden-en-icoontjes">
|
|
{% for naam, tijd in gebedstijden.items() %}
|
|
<li class="tijden-rij">
|
|
<span class="naam">{{ naam }}</span>
|
|
<span class="tijd">{{ tijd[:5] }}</span>
|
|
</li>
|
|
{% endfor %}
|
|
<li><a href="/instellingen" title="Instellingen" class="icoon-link"><span class="material-icons">settings</span></a></li>
|
|
<li><a href="#" id="muteBtn" title="Mute" class="icoon-link"><span id="muteIcon" class="material-icons">volume_off</span></a></li>
|
|
<li><a href="/debug" title="Debug Mode" class="icoon-link"><span class="material-icons">bug_report</span></a></li>
|
|
<li><a href="/quran" title="Quran Speler" class="icoon-link"><span class="material-icons">menu_book</span></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Weer sectie -->
|
|
<div class="weather-section">
|
|
<div class="weather-info">
|
|
<div class="weather-main">
|
|
<span class="weather-temp">{{ weather.temperature }}°C</span>
|
|
<span class="weather-desc">{{ weather.description }}</span>
|
|
</div>
|
|
<div class="weather-details">
|
|
<span class="weather-detail">Voelt als {{ weather.feels_like }}°C</span>
|
|
<span class="weather-detail">Vochtigheid {{ weather.humidity }}%</span>
|
|
<span class="weather-detail">Wind {{ weather.wind_speed }} km/h</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<audio id="adhanAudio" src="/static/clips/{{ settings['audio_clip'] }}" preload="auto"></audio>
|
|
|
|
<script>
|
|
// Prayer times data from server
|
|
window.prayerTimes = [
|
|
{% for naam, tijd in gebedstijden.items() %}
|
|
"{{ tijd[:5] }}"{% if not loop.last %},{% endif %}
|
|
{% endfor %}
|
|
];
|
|
window.prayerNames = [
|
|
{% for naam, tijd in gebedstijden.items() %}
|
|
"{{ naam }}"{% if not loop.last %},{% endif %}
|
|
{% endfor %}
|
|
];
|
|
const nextPrayerTime = "{{ next_time }}";
|
|
</script>
|
|
<script src="/static/countdown.js"></script>
|
|
<script>
|
|
window.onload = function () {
|
|
updateCurrentTime();
|
|
setInterval(updateCurrentTime, 60000);
|
|
setupThemeToggle();
|
|
startCountdowns(window.prayerTimes, window.prayerNames);
|
|
|
|
// Update weerdata elke 10 minuten
|
|
updateWeather();
|
|
setInterval(updateWeather, 600000); // 10 minuten
|
|
|
|
// Update hadith elke 30 seconden
|
|
updateHadith();
|
|
setInterval(updateHadith, 30000); // 30 seconden
|
|
};
|
|
|
|
// Functie om weerdata bij te werken
|
|
function updateWeather() {
|
|
fetch('/api/weather')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
document.querySelector('.weather-temp').textContent = data.temperature + '°C';
|
|
document.querySelector('.weather-desc').textContent = data.description;
|
|
document.querySelector('.weather-detail:nth-child(1)').textContent = `Voelt als ${data.feels_like}°C`;
|
|
document.querySelector('.weather-detail:nth-child(2)').textContent = `Vochtigheid ${data.humidity}%`;
|
|
document.querySelector('.weather-detail:nth-child(3)').textContent = `Wind ${data.wind_speed} km/h`;
|
|
})
|
|
.catch(error => {
|
|
console.log('Fout bij bijwerken weerdata:', error);
|
|
});
|
|
}
|
|
|
|
// Functie om hadith bij te werken
|
|
function updateHadith() {
|
|
fetch('/api/hadith')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const hadithTextElement = document.querySelector('.hadith-center blockquote');
|
|
const hadithFooterElement = document.querySelector('.hadith-center blockquote footer');
|
|
|
|
if (hadithTextElement && hadithFooterElement) {
|
|
// Update de tekst en bron
|
|
hadithTextElement.innerHTML = `"${data.text}"<footer>— ${data.bron}</footer>`;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.log('Fout bij bijwerken hadith:', error);
|
|
});
|
|
}
|
|
|
|
// Theme toggle icon dynamisch aanpassen
|
|
function updateThemeIcon() {
|
|
const html = document.documentElement;
|
|
const icon = document.getElementById('themeIcon');
|
|
if (html.className === 'light') {
|
|
icon.textContent = 'dark_mode';
|
|
} else {
|
|
icon.textContent = 'light_mode';
|
|
}
|
|
}
|
|
updateThemeIcon();
|
|
document.getElementById('themeToggle').addEventListener('click', updateThemeIcon);
|
|
|
|
// Mute functionaliteit
|
|
let muteStatus = false;
|
|
function setMuteIcon() {
|
|
const icon = document.getElementById('muteIcon');
|
|
icon.textContent = muteStatus ? 'volume_off' : 'volume_up';
|
|
}
|
|
function toggleMute(e) {
|
|
e.preventDefault();
|
|
muteStatus = !muteStatus;
|
|
setMuteIcon();
|
|
fetch('/api/mute', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ mute: muteStatus })
|
|
});
|
|
}
|
|
document.getElementById('muteBtn').addEventListener('click', toggleMute);
|
|
setMuteIcon();
|
|
</script>
|
|
</body>
|
|
</html>
|