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.
149 lines
5.7 KiB
HTML
149 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Quran Speler - Gebedstijden Display</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<link rel="stylesheet" href="/static/quran.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;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>
|
|
|
|
<!-- Main Quran Content (twee kolommen) -->
|
|
<div class="quran-full-content">
|
|
<!-- Linker kolom - Player -->
|
|
<div class="quran-left-column">
|
|
<!-- Header -->
|
|
<div class="quran-header">
|
|
<h1>القرآن الكريم - Quran Speler</h1>
|
|
</div>
|
|
|
|
<!-- Reciter Selection -->
|
|
<div class="reciter-selection">
|
|
<label for="reciterSelect">Reciteur / القارئ:</label>
|
|
<select id="reciterSelect" class="custom-select">
|
|
<option value="">Selecteer een reciteur...</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Player Section -->
|
|
<div class="player-section">
|
|
<div class="current-playing">
|
|
<div class="sura-info">
|
|
<h2 id="currentSuraName">Selecteer een sura om af te spelen</h2>
|
|
<p id="currentReciter">Geen reciteur geselecteerd</p>
|
|
</div>
|
|
<div class="player-controls">
|
|
<button id="prevBtn" class="control-btn" title="Vorige">
|
|
<span class="material-icons">skip_previous</span>
|
|
</button>
|
|
<button id="playBtn" class="control-btn play-btn" title="Afspelen/Pauzeren">
|
|
<span class="material-icons">play_arrow</span>
|
|
</button>
|
|
<button id="nextBtn" class="control-btn" title="Volgende">
|
|
<span class="material-icons">skip_next</span>
|
|
</button>
|
|
<button id="directPlayBtn" class="control-btn" title="Direct afspelen in nieuw tabblad" style="display: none;">
|
|
<span class="material-icons">open_in_new</span>
|
|
</button>
|
|
</div>
|
|
<div class="progress-section">
|
|
<span id="currentTime">0:00</span>
|
|
<input type="range" id="progressBar" min="0" max="100" value="0" class="progress-bar">
|
|
<span id="totalTime">0:00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rechter kolom - Zoeken en Sura lijst -->
|
|
<div class="quran-right-column">
|
|
<!-- Search Section -->
|
|
<div class="search-section">
|
|
<label for="suraSearch">Zoek Sura / البحث عن السورة:</label>
|
|
<input type="text" id="suraSearch" placeholder="Zoek naar sura naam..." class="search-input">
|
|
</div>
|
|
|
|
<!-- Sura List -->
|
|
<div class="sura-list-section">
|
|
<h3>Sura's / السور</h3>
|
|
<div class="sura-grid" id="suraGrid">
|
|
<!-- Sura's worden hier dynamisch geladen -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Zijmenu (exact hetzelfde als hoofdpagina) -->
|
|
<div class="right new-layout">
|
|
<div class="hadith-tijden-row">
|
|
<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="/" title="Terug naar hoofdpagina" class="icoon-link"><span class="material-icons">home</span></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Audio Element -->
|
|
<audio id="quranAudio" preload="none"></audio>
|
|
</div>
|
|
|
|
<script src="/static/quran.js"></script>
|
|
<script src="/static/countdown.js"></script>
|
|
<script>
|
|
// Theme toggle setup (gebruik de standaard functie)
|
|
setupThemeToggle();
|
|
|
|
// 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';
|
|
}
|
|
}
|
|
|
|
// Update icon bij theme wijziging
|
|
const observer = new MutationObserver(updateThemeIcon);
|
|
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
|
|
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> |