From 48b6e1d0eddf313f49917e7e0272ac97bd88f03c Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 16:31:10 +0100
Subject: [PATCH] feat: Changes to template inheritance

Changes to what goes where.
---
 source/screens/demo/basics.liquid             | 114 +++++++++---------
 source/screens/demo/examples/clock.liquid     |   8 +-
 .../screens/demo/examples/ui/windows.liquid   |   6 +-
 source/screens/demo/index.liquid              |  10 --
 source/templates/hippie/default.liquid        |   2 +-
 source/templates/hippie/full.liquid           |   5 +-
 source/templates/hippie/page.liquid           |   2 +-
 source/templates/hippie/simple.liquid         |   6 -
 8 files changed, 73 insertions(+), 80 deletions(-)

diff --git a/source/screens/demo/basics.liquid b/source/screens/demo/basics.liquid
index 6d190ec..a300a21 100644
--- a/source/screens/demo/basics.liquid
+++ b/source/screens/demo/basics.liquid
@@ -495,7 +495,7 @@ tags:
 			oder das Element H<sub>2</sub>O</p>
 		<p>Die Zeichen in Absätzen bis hin zu ganzen Texten können, mit einem geeigneten Eingabegerät, markiert werden.
 			Dies stellt sich wie folgt dar:</p>
-		<p class="txt_center">Bei <mark class="mark_cursor">spiel zum mark</mark>ieren 😉.</p>
+		<p class="txt_center">Bei<mark class="mark_cursor">spiel zum mark</mark>ieren 😉.</p>
 		<p>Eine Markierung kann, mittels
 			<code>&lt;mark&gt;</code>, auch durch den Autor geschehen. Diese stellt sich ein wenig anders dar:
 			<mark>Diese Worte sind markiert.</mark>
@@ -881,61 +881,63 @@ tags:
 			<p>Innerhalb einer Gruppe können nicht nur Ein- und Ausgabefelder platziert werden. Andere Elemente ergänzen
 				Information oder lockern das Erscheinungsbild auf.</p>
 			<p>Hier nun eine Liste weiterer Arten von Eingabefeldern:</p>
-			<div class="grid grid_column_2">
-				<label class="">Farbauswahl<br>
-					<code>&lt;input[type="color"]&gt;</code>
-				</label>
-				<div><input class="" type="color"></div>
-				<label class="">Bereichsauswahl<br>
-					<code>&lt;input[type="range"]&gt;</code>
-				</label>
-				<div><input class="" type="range"></div>
-				<label class="">Datum<br>
-					<code>&lt;input[type="date"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="date"></div>
-				<label class="">Uhrzeit<br>
-					<code>&lt;input[type="time"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="time"></div>
-				<label class="">Datum und Zeit<br>
-					<code>&lt;input[type="datetime-local"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="datetime-local"></div>
-				<label class="">Kalendermonat<br>
-					<code>&lt;input[type="month"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="month"></div>
-				<label class="">Kalenderwoche<br>
-					<code>&lt;input[type="week"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="week"></div>
-				<label class="">@dresse<br>
-					<code>&lt;input[type="email"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="email" placeholder="@"></div>
-				<label class="">Passwort<br>
-					<code>&lt;input[type="password"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="password" value="admin"></div>
-				<label class="">Telefonnummer<br>
-					<code>&lt;input[type="tel"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="tel" value="0190123456"></div>
-				<label class="">URL<br>
-					<code>&lt;input[type="url"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="url" placeholder="url://"></div>
-				<label class="">Suche<br>
-					<code>&lt;input[type="search"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="search"></div>
-				<label class="">Datei<br>
-					<code>&lt;input[type="file"]&gt;</code>
-				</label>
-				<div><input class="" type="file"></div>
-				<label class="">Bild</label><input class="" type="image" alt="Alternativer Text"/>
-			</div>
+			<form action="">
+				<div class="grid grid_column_2">
+					<label class="">Farbauswahl<br>
+						<code>&lt;input[type="color"]&gt;</code>
+					</label>
+					<div><input class="" type="color"></div>
+					<label class="">Bereichsauswahl<br>
+						<code>&lt;input[type="range"]&gt;</code>
+					</label>
+					<div><input class="" type="range"></div>
+					<label class="">Datum<br>
+						<code>&lt;input[type="date"]&gt;</code>
+					</label>
+					<div><input class="input_io" type="date"></div>
+					<label class="">Uhrzeit<br>
+						<code>&lt;input[type="time"]&gt;</code>
+					</label>
+					<div><input class="input_io" type="time"></div>
+					<label class="">Datum und Zeit<br>
+						<code>&lt;input[type="datetime-local"]&gt;</code>
+					</label>
+					<div><input class="input_io" type="datetime-local"></div>
+					<label class="">Kalendermonat<br>
+						<code>&lt;input[type="month"]&gt;</code>
+					</label>
+					<div><input class="input_io" type="month"></div>
+					<label class="">Kalenderwoche<br>
+						<code>&lt;input[type="week"]&gt;</code>
+					</label>
+					<div><input class="input_io" type="week"></div>
+					<label class="">@dresse<br>
+						<code>&lt;input[type="email"]&gt;</code>
+					</label>
+					<div><input class="input_io" placeholder="@" type="email"></div>
+					<label class="">Passwort<br>
+						<code>&lt;input[type="password"]&gt;</code>
+					</label>
+					<div><input class="input_io" value="admin" autocomplete="off" type="password"></div>
+					<label class="">Telefonnummer<br>
+						<code>&lt;input[type="tel"]&gt;</code>
+					</label>
+					<div><input class="input_io" value="0190123456" type="tel"></div>
+					<label class="">URL<br>
+						<code>&lt;input[type="url"]&gt;</code>
+					</label>
+					<div><input class="input_io" placeholder="url://" type="url"></div>
+					<label class="">Suche<br>
+						<code>&lt;input[type="search"]&gt;</code>
+					</label>
+					<div><input class="input_io" type="search"></div>
+					<label class="">Datei<br>
+						<code>&lt;input[type="file"]&gt;</code>
+					</label>
+					<div><input class="" type="file"></div>
+					<label class="">Bild</label><input class="" type="image" alt="Alternativer Text"/>
+				</div>
+			</form>
 		</fieldset>
 
 		<h2>Interaktive Elemente</h2>
diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index ca0cc89..4890c40 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -15,10 +15,12 @@ tags:
 {% endblock %}
 
 {% block script %}
-{{ block.super -}}
+<script src="/vendor/hippie-script.js"></script>
+<script src="/js/globals.js"></script>
+<script src="/js/app.js"></script>
 
 <script>
-	// TODO: Mondphase ergänzen
+	// TODO: DateDisplay und TimeDisplay benutzen
 	class HippieClock {
 		constructor(element, date, options) {
 			this.element = element;
@@ -129,6 +131,7 @@ tags:
 				});
 		}
 
+		// TODO: Erfassung für geänderte Formen ergänzen
 		update() {
 			const second = this.getTime().second;
 			const minute = this.getTime().minute;
@@ -336,6 +339,7 @@ tags:
 	clock.addCircle('base', .5, 1);
 	clock.draw();
 
+	// TODO: Alternative mit requestAnimationFrame()
 	setInterval(() => {
 		clock.update();
 	}, 1000);
diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid
index d8700cd..8a9c65a 100644
--- a/source/screens/demo/examples/ui/windows.liquid
+++ b/source/screens/demo/examples/ui/windows.liquid
@@ -50,9 +50,8 @@ tags:
 {% endblock %}
 
 {%- block script %}
-{% comment %}<script src="/js/globals.js"></script>{% endcomment %}
-<script src="/vendor/hippie-script.js"></script>
-<script src="/js/app.js"></script>
+{{ block.super -}}
+
 <script src="/js/windows.js"></script>
 <script>
 	console.log(HIPPIE.brand);
@@ -61,6 +60,7 @@ tags:
 	const start = document.querySelector('[data-action=start]');
 	const draggableElement = document.getElementById('task-bar');
 	const placeholderElement = document.getElementById('placeholder');
+	// TODO: TimeDisplay in HippieTaskbar aufnehmen
 	const timeElement = document.getElementById('time');
 
 	const taskBar = new HippieTaskBar(draggableElement, placeholderElement);
diff --git a/source/screens/demo/index.liquid b/source/screens/demo/index.liquid
index 99ba875..2c1eafc 100644
--- a/source/screens/demo/index.liquid
+++ b/source/screens/demo/index.liquid
@@ -62,14 +62,4 @@ tags:
 		</ul>
 	</div>
 </div>
-{% endblock %}
-
-{% block script %}
-{{ block.super -}}
-{% render 'hippie/partials/log-assets', state: true -%}
-{% render 'hippie/partials/log-log', msg: 'BODY        :: Assets loaded, running page specific script...', arg: true -%}
-<script>
-	// Page script
-</script>
-{% render 'hippie/partials/log-log' with 'Application ready... or is it?' as msg -%}
 {% endblock %}
\ No newline at end of file
diff --git a/source/templates/hippie/default.liquid b/source/templates/hippie/default.liquid
index 4cb653e..b8cdbfd 100644
--- a/source/templates/hippie/default.liquid
+++ b/source/templates/hippie/default.liquid
@@ -29,7 +29,7 @@
 <body{{ bodyClassAttr }}>
 {%- block body %}{% endblock -%}
 <script>
-	// {{ title }} script
+	// {{ title }} script using default template
 </script>
 {%- block script %}{% endblock -%}
 </body>
diff --git a/source/templates/hippie/full.liquid b/source/templates/hippie/full.liquid
index 5b22b17..d445469 100644
--- a/source/templates/hippie/full.liquid
+++ b/source/templates/hippie/full.liquid
@@ -37,9 +37,12 @@
 {%- block body %}{% endblock -%}
 {% render 'hippie/partials/log-log' with 'BODY        :: Loading script assets...' as msg -%}
 <script>
-	// Full script
+	// {{ title }} script using full template
 </script>
 {%- block script %}{% endblock -%}
+{% render 'hippie/partials/log-assets', state: true -%}
+{% render 'hippie/partials/log-log', msg: 'BODY        :: Assets loaded, running page specific script...', arg: true -%}
 {% render 'hippie/partials/log-log' with 'BODY end    :: Page script might still be loading.' as msg -%}
+{% render 'hippie/partials/log-log' with 'Application ready... or is it?' as msg -%}
 </body>
 </html>
\ No newline at end of file
diff --git a/source/templates/hippie/page.liquid b/source/templates/hippie/page.liquid
index b6edd40..dd6e6ed 100644
--- a/source/templates/hippie/page.liquid
+++ b/source/templates/hippie/page.liquid
@@ -59,4 +59,4 @@
 		logPerf('EVENT       :: jQuery \'ready\' event fired.');
 	});
 </script>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/source/templates/hippie/simple.liquid b/source/templates/hippie/simple.liquid
index b711fe6..b888886 100644
--- a/source/templates/hippie/simple.liquid
+++ b/source/templates/hippie/simple.liquid
@@ -7,9 +7,3 @@
 {{ block.super -}}
 <link href="/css/demo.css" media="all" rel="stylesheet"/>
 {% endblock %}
-
-{% block script %}
-<script src="/vendor/hippie-script.js"></script>
-<script src="/js/globals.js"></script>
-<script src="/js/app.js"></script>
-{% endblock %}
\ No newline at end of file