113 lines
4.0 KiB
Handlebars
113 lines
4.0 KiB
Handlebars
<body>
|
|
<div class="container">
|
|
<div class="card">
|
|
<label><b>Farbgebung</b></label>
|
|
<select id="themeSwitch" style="width: 100%;">
|
|
<option value="dark">Dunkel</option>
|
|
<option value="light">Hell</option>
|
|
<option value="modern">Modern</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<label><b>Schrift</b></label>
|
|
<select id="fontSelector" style="width: 100%;">
|
|
<optgroup label="Sans-Serif (Windows Standard)">
|
|
<option value="Arial">Arial</option>
|
|
<option value="Calibri">Calibri</option>
|
|
<option value="Candara">Candara</option>
|
|
<option value="Segoe UI">Segoe UI</option>
|
|
<option value="Tahoma">Tahoma</option>
|
|
<option value="Trebuchet MS">Trebuchet MS</option>
|
|
<option value="Verdana">Verdana</option>
|
|
</optgroup>
|
|
|
|
<optgroup label="Serif (Windows Standard)">
|
|
<option value="Cambria">Cambria</option>
|
|
<option value="Constantia">Constantia</option>
|
|
<option value="Georgia">Georgia</option>
|
|
<option value="Times New Roman">Times New Roman</option>
|
|
<option value="Palatino Linotype">Palatino Linotype</option>
|
|
</optgroup>
|
|
|
|
<optgroup label="Monospace / Fixed-Width">
|
|
<option value="Consolas">Consolas</option>
|
|
<option value="Courier New">Courier New</option>
|
|
<option value="Lucida Console">Lucida Console</option>
|
|
</optgroup>
|
|
|
|
<optgroup label="Fun / Decorative (Windows enthält einige)">
|
|
<option value="Comic Sans MS">Comic Sans MS</option>
|
|
<option value="Impact">Impact</option>
|
|
<option value="Segoe Script">Segoe Script</option>
|
|
<option value="Segoe Print">Segoe Print</option>
|
|
</optgroup>
|
|
|
|
</select>
|
|
<div style="display:flex;flex-direction:row;align-items:center;">
|
|
<input type="range" id="sizeSlider" min="10" max="32" value="18" style="width:100%;">
|
|
<span id="sizeValue">18px</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" style="display:flex;flex:1;flex-direction:column;">
|
|
<label><b>Vollbildmodus</b></label>
|
|
<button class="bluebutton" id="fullscreenBtn">Einschalten</button>
|
|
<label>
|
|
Der Vollbildmodus hat den Vorteil, dass der komplette Bildschirm mit dieser Webseite ausgefüllt wird.<br><i style="color:var(--theme-accent-default-backcolor)">Sehr nützlich für mehr als einen Bildschirm</i>
|
|
</label>
|
|
</div>
|
|
</body>
|
|
|
|
<script>
|
|
const themeSwitch = document.getElementById("themeSwitch");
|
|
const selector = document.getElementById("fontSelector");
|
|
const slider = document.getElementById("sizeSlider");
|
|
const label = document.getElementById("sizeValue");
|
|
const fullScreenBtn = document.getElementById("fullscreenBtn");
|
|
|
|
fullScreenBtn.addEventListener("click", goFullscreen);
|
|
function goFullscreen() {
|
|
if (document.fullscreenElement) {
|
|
document.exitFullscreen();
|
|
} else {
|
|
document.documentElement.requestFullscreen();
|
|
}
|
|
fullScreenBtn.textContent = !document.fullscreenElement ? "Ausschalten" : "Einschalten";
|
|
}
|
|
|
|
if(savedTheme) { themeSwitch.value = savedTheme; }
|
|
if(savedFontFamily) { selector.value = savedFontFamily; }
|
|
if(savedFontSize) { slider.value = savedFontSize; label.textContent = savedFontSize + 'px'; }
|
|
|
|
|
|
themeSwitch.addEventListener('change', (evt) => {
|
|
const theme = evt.target.value;
|
|
switchTheme(theme);
|
|
})
|
|
|
|
|
|
function applySettings() {
|
|
switchTheme(themeSwitch.value);
|
|
setFontFamily(selector.value);
|
|
setFontSize(slider.value)
|
|
}
|
|
applySettings();
|
|
|
|
selector.addEventListener("change", () => {
|
|
setFontFamily(selector.value);
|
|
});
|
|
|
|
|
|
slider.addEventListener("input", () => {
|
|
setFontSize(parseInt(slider.value))
|
|
label.textContent = slider.value + 'px';
|
|
});
|
|
|
|
|
|
|
|
// jede option bekommt ihre eigene Schrift
|
|
[...selector.options].forEach(option => {
|
|
option.style.fontFamily = option.value;
|
|
});
|
|
</script> |