From b1c7f4100e8ef5d76786113a82526c72d4c6d0ad Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 14 Feb 2026 12:18:07 +0100
Subject: [PATCH] feat: Unify format for IDs

---
 source/screens/demo/examples/clock.liquid      | 6 +++---
 source/screens/demo/examples/start.liquid      | 4 ++--
 source/screens/demo/examples/ui/gallery.liquid | 8 ++++----
 source/screens/demo/examples/ui/windows.liquid | 8 ++++----
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index da8f5a4..34fb1d5 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -11,7 +11,7 @@ tags:
 <main>
 	<canvas id="clock" width="512" height="512"></canvas>
 	<p>
-		<button id="toggleFormat">12-Stunden-Format</button>
+		<button id="tglFormat">12-Stunden-Format</button>
 	</p>
 </main>
 {% endblock %}
@@ -27,9 +27,9 @@ tags:
 	const colorDayOfMonth = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-orange').trim();
 	const colorMonth = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-pink').trim();
 
-	document.getElementById('toggleFormat').addEventListener('click', () => {
+	document.getElementById('tglFormat').addEventListener('click', () => {
 		is24HourFormat = !is24HourFormat;
-		document.getElementById('toggleFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
+		document.getElementById('tglFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
 	});
 
 	function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) {
diff --git a/source/screens/demo/examples/start.liquid b/source/screens/demo/examples/start.liquid
index b4b1d98..3155921 100644
--- a/source/screens/demo/examples/start.liquid
+++ b/source/screens/demo/examples/start.liquid
@@ -11,7 +11,7 @@ tags:
 {% block body %}
 <main>
 	<form id="www-search" class="flex inline" action="https://duckduckgo.com/">
-		<input id="query" class="input_io" name="q" placeholder="Suchbegriff" type="text" required/>
+		<input id="qrySearch" class="input_io" name="q" placeholder="Suchbegriff" type="text" required/>
 		<input class="button_io" value="Suchen" type="submit"/>
 	</form>
 	<div class="blocks">
@@ -69,7 +69,7 @@ tags:
 
 	document.getElementById('www-search').addEventListener('submit', function (e) {
 		e.preventDefault();
-		const query = document.getElementById('query').value.trim();
+		const query = document.getElementById('qrySearch').value.trim();
 
 		if (!query) return;
 
diff --git a/source/screens/demo/examples/ui/gallery.liquid b/source/screens/demo/examples/ui/gallery.liquid
index c548374..8128023 100755
--- a/source/screens/demo/examples/ui/gallery.liquid
+++ b/source/screens/demo/examples/ui/gallery.liquid
@@ -12,9 +12,9 @@ tags:
 	<section>
 		<header class="io">
 			<nav>
-				<div class="group">
-					<input id="slider-size" value="5" min="1" max="10" step="1" type="range"/>
-					<label class="right" for="slider-size">Größe</label>
+				<div class="group-input">
+					<input id="setSize" value="5" min="1" max="10" step="1" type="range"/>
+					<label class="right" for="setSize">Größe</label>
 				</div>
 				<button title="details">
 					<i class="bi bi-layout-sidebar-reverse"></i>&nbsp;Details
@@ -36,7 +36,7 @@ tags:
 {%- block script %}
 {{ block.super -}}
 <script>
-	const sizeSlider = document.getElementById('slider-size');
+	const sizeSlider = document.getElementById('setSize');
 	const galleryItems = document.querySelectorAll('.gallery > div');
 
 	// Set the default size
diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid
index 74584ab..02606e6 100644
--- a/source/screens/demo/examples/ui/windows.liquid
+++ b/source/screens/demo/examples/ui/windows.liquid
@@ -18,8 +18,8 @@ tags:
 	<nav class="big">
 		<button><i class="bi bi-folder"></i></button>
 		<button><i class="bi bi-terminal"></i></button>
-		<button id="pauseButton"><i class="bi bi-pause"></i></button>
-		<button id="resumeButton"><i class="bi bi-play"></i></button>
+		<button id="setPause"><i class="bi bi-pause"></i></button>
+		<button id="setPlay"><i class="bi bi-play"></i></button>
 	</nav>
 	<div>
 		<nav class="small">
@@ -67,11 +67,11 @@ tags:
 	const timeFormat = {hour: '2-digit', minute: '2-digit'};
 	const timeDisplay = new TimeDisplay(timeElement, timeFormat);
 
-	document.getElementById('pauseButton').addEventListener('click', () => {
+	document.getElementById('setPause').addEventListener('click', () => {
 		timeDisplay.pause();
 		console.info('Pause time');
 	});
-	document.getElementById('resumeButton').addEventListener('click', () => {
+	document.getElementById('setPlay').addEventListener('click', () => {
 		timeDisplay.resume();
 		console.info('Resume time');
 	});