200 lines
7.3 KiB
HTML
200 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="nl">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Instellingen - 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 class="settings-page">
|
||
<div class="app">
|
||
<!-- Dark/Light toggle -->
|
||
<button id="themeToggle" title="Schakel modus"><span id="themeIcon" class="material-icons">brightness_6</span></button>
|
||
|
||
<div class="settings-container">
|
||
<div class="settings-header">
|
||
<a href="/" class="back-link" title="Terug naar hoofdpagina">
|
||
<span class="material-icons">arrow_back</span>
|
||
Terug naar hoofdpagina
|
||
</a>
|
||
<h1>Instellingen</h1>
|
||
</div>
|
||
|
||
<form method="POST" class="settings-form">
|
||
<div class="settings-section">
|
||
<div class="form-group">
|
||
<label>
|
||
<span class="material-icons">info</span>
|
||
Volume Instellingen:
|
||
</label>
|
||
<p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0.5rem 0;">
|
||
Stel verschillende volumes in voor overdag en 's avonds. Het systeem wisselt automatisch tussen deze volumes op basis van de ingestelde tijden.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="volume_day">
|
||
<span class="material-icons">volume_up</span>
|
||
Volume Overdag (0–100):
|
||
</label>
|
||
<input type="number" name="volume_day" value="{{ settings.volume_day or settings.volume }}" min="0" max="100" />
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="volume_night">
|
||
<span class="material-icons">volume_down</span>
|
||
Volume Avond (0–100):
|
||
</label>
|
||
<input type="number" name="volume_night" value="{{ settings.volume_night or (settings.volume // 2) }}" min="0" max="100" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="day_start">
|
||
<span class="material-icons">wb_sunny</span>
|
||
Dag begint om:
|
||
</label>
|
||
<input type="time" name="day_start" value="{{ settings.day_start or '07:00' }}" />
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="night_start">
|
||
<span class="material-icons">nightlight</span>
|
||
Avond begint om:
|
||
</label>
|
||
<input type="time" name="night_start" value="{{ settings.night_start or '20:00' }}" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>
|
||
<span class="material-icons">speaker_group</span>
|
||
Sonos Zones:
|
||
</label>
|
||
<div class="checkboxes">
|
||
{% for zone in alle_zones %}
|
||
<div class="checkbox-item">
|
||
<input type="checkbox" name="zones" value="{{ zone }}" id="zone_{{ loop.index }}"
|
||
{% if zone in settings.zones %}checked{% endif %}>
|
||
<label for="zone_{{ loop.index }}">{{ zone }}</label>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row audio-row">
|
||
<div class="form-group audio-section">
|
||
<label for="audio_clip">
|
||
<span class="material-icons">music_note</span>
|
||
Adhaan Audio Bestand:
|
||
</label>
|
||
<select name="audio_clip" id="audioSelect">
|
||
{% for clip in clips %}
|
||
<option value="{{ clip }}" {% if clip == settings.audio_clip %}selected{% endif %}>
|
||
{% if clip == 'adhan1.mp3' %}Klassieke Adhaan
|
||
{% elif 'mekka' in clip %}Mekka Stijl
|
||
{% elif 'medina' in clip %}Medina Stijl
|
||
{% elif 'kort' in clip %}Korte Versie
|
||
{% elif 'traditioneel' in clip %}Traditioneel
|
||
{% else %}{{ clip }}
|
||
{% endif %}
|
||
</option>
|
||
{% endfor %}
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group audio-preview-section">
|
||
<label>
|
||
<span class="material-icons">play_circle</span>
|
||
Audio Voorbeeld:
|
||
</label>
|
||
<div class="audio-preview">
|
||
<button type="button" class="preview-btn" onclick="previewAudio()">
|
||
<span class="material-icons">play_arrow</span>
|
||
Voorbeeld afspelen
|
||
</button>
|
||
<audio id="previewAudio" preload="none"></audio>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="button-group">
|
||
<button type="submit" name="test_clip" class="btn-secondary">
|
||
<span class="material-icons">speaker</span>
|
||
Test op Sonos
|
||
</button>
|
||
<button type="submit" class="btn-primary">
|
||
<span class="material-icons">save</span>
|
||
Instellingen Opslaan
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function previewAudio() {
|
||
const select = document.getElementById('audioSelect');
|
||
const audio = document.getElementById('previewAudio');
|
||
const selectedClip = select.value;
|
||
|
||
audio.src = `/static/clips/${selectedClip}`;
|
||
audio.play().catch(e => {
|
||
console.log('Audio afspelen mislukt:', e);
|
||
alert('Kon audio niet afspelen. Controleer of het bestand bestaat.');
|
||
});
|
||
}
|
||
|
||
// Auto-update preview audio source when selection changes
|
||
document.getElementById('audioSelect').addEventListener('change', function() {
|
||
const audio = document.getElementById('previewAudio');
|
||
audio.src = `/static/clips/${this.value}`;
|
||
});
|
||
|
||
// Set initial audio source
|
||
window.onload = function() {
|
||
const select = document.getElementById('audioSelect');
|
||
const audio = document.getElementById('previewAudio');
|
||
audio.src = `/static/clips/${select.value}`;
|
||
|
||
// Setup theme toggle
|
||
setupThemeToggle();
|
||
updateThemeIcon();
|
||
};
|
||
|
||
// Theme toggle functionaliteit (gekopieerd van index.html)
|
||
function setupThemeToggle() {
|
||
const toggleBtn = document.getElementById("themeToggle");
|
||
if (!toggleBtn) return;
|
||
|
||
const currentTheme = localStorage.getItem("theme") || "dark";
|
||
document.documentElement.className = currentTheme;
|
||
|
||
toggleBtn.addEventListener("click", function () {
|
||
const html = document.documentElement;
|
||
const newTheme = html.className === "light" ? "dark" : "light";
|
||
html.className = newTheme;
|
||
localStorage.setItem("theme", newTheme);
|
||
updateThemeIcon();
|
||
});
|
||
}
|
||
|
||
function updateThemeIcon() {
|
||
const html = document.documentElement;
|
||
const icon = document.getElementById('themeIcon');
|
||
if (icon) {
|
||
if (html.className === 'light') {
|
||
icon.textContent = 'dark_mode';
|
||
} else {
|
||
icon.textContent = 'light_mode';
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|