filoor
649cebf6ba
De CSS-stijlen zijn bijgewerkt om een nieuwe compacte zijbalk en een verbeterde weersectie te ondersteunen, met speciale aandacht voor responsiviteit en gebruikerservaring. De hadith-sectie is visueel gescheiden van andere inhoudselementen met aangepaste themakleuren voor betere leesbaarheid in zowel licht als donker modus. Er is ook een glasmorphisme-effect aan de weersectie toegevoegd voor een moderne uitstraling. Deze veranderingen verbeteren de gebruiksvriendelijkheid van de webapp door belangrijke informatie op een georganiseerde en duidelijke manier weer te geven.
181 lines
6.8 KiB
HTML
181 lines
6.8 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>
|
|
|
|
<!-- Weer sectie naast de tijd -->
|
|
<div class="weather-section-left">
|
|
<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 class="huidig-gebed">
|
|
<div class="naam">{{ next_name }}</div>
|
|
<div id="countdown">--:--:--</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Zijmenu met hadith sectie -->
|
|
<div class="right new-layout">
|
|
<div class="hadith-tijden-row">
|
|
<!-- Hadith sectie met witte achtergrond -->
|
|
<div class="hadith-center">
|
|
<blockquote>
|
|
"{{ hadith.text }}"
|
|
<footer>— {{ hadith.bron }}</footer>
|
|
</blockquote>
|
|
</div>
|
|
|
|
<!-- Compact zijmenu -->
|
|
<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>
|
|
{% if settings.debug_mode %}
|
|
<li><a href="/debug" title="Debug Mode" class="icoon-link"><span class="material-icons">bug_report</span></a></li>
|
|
{% endif %}
|
|
<li><a href="/quran" title="Quran Speler" class="icoon-link"><span class="material-icons">menu_book</span></a></li>
|
|
</ul>
|
|
</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-section-left .weather-temp').textContent = data.temperature + '°C';
|
|
document.querySelector('.weather-section-left .weather-desc').textContent = data.description;
|
|
document.querySelector('.weather-section-left .weather-detail:nth-child(1)').textContent = `Voelt als ${data.feels_like}°C`;
|
|
document.querySelector('.weather-section-left .weather-detail:nth-child(2)').textContent = `Vochtigheid ${data.humidity}%`;
|
|
document.querySelector('.weather-section-left .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-section blockquote');
|
|
const hadithFooterElement = document.querySelector('.hadith-section 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>
|