filoor
f4a18ce8b4
Debug functionaliteit is nu alleen toegankelijk wanneer debug_mode is ingeschakeld. Dit omvat het omleiden van gebruikers naar de hoofdpagina als debug_mode uitgeschakeld is en het tonen van een foutmelding bij een niet-geautoriseerde API-aanroep. Ook is de debug knop in de UI alleen zichtbaar als debug_mode aan staat. Dit verhoogt de veiligheid en beperkt toegang tot debugging opties.
154 lines
5.8 KiB
HTML
154 lines
5.8 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>
|
|
// 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';
|
|
}
|
|
}
|
|
|
|
document.getElementById('themeToggle').addEventListener('click', function() {
|
|
const html = document.documentElement;
|
|
html.className = html.className === 'light' ? '' : 'light';
|
|
localStorage.setItem('theme', html.className);
|
|
updateThemeIcon();
|
|
});
|
|
|
|
// Laad opgeslagen theme
|
|
const savedTheme = localStorage.getItem('theme');
|
|
if (savedTheme) {
|
|
document.documentElement.className = savedTheme;
|
|
}
|
|
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> |