feat: New style for HippieCrosshair

- Change structure for options
- Add mergeOptions method to combine defaults with options
- Rename stuff

TODO.md

@@ -20,6 +20,9 @@
   - Keep placeholder and demo stuff
   - Move other things
   - Prevent styles to be global
+- Adapt bootstrap utility API
+  - https://github.com/twbs/bootstrap/blob/main/scss/utilities/_api.scss
+  - https://github.com/twbs/bootstrap/blob/main/scss/_utilities.scss
 
 # JS
 

source/code/game.js

@@ -0,0 +1,313 @@
+class HippieCrosshair {
+	constructor(canvas, options = {}) {
+		this.canvas = canvas;
+		this.ctx = canvas.getContext('2d');
+
+		this.debug = options.debug || false;
+
+		const defaults = {
+			crosshair: {
+				size: 16,
+				thickness: 2,
+				color: '#000',
+				gapSize: 8,
+				style: 'cross'
+			},
+			connector: {
+				distance: 128, // Distance to draw next symbol
+				spacing: 64, // Space between symbols
+				size: 8,
+				color: '#000',
+				style: 'arrow',
+				visibility: true
+			},
+			line: {
+				color: 'rgba(0, 0, 0, 0.1)',
+				width: 1
+			}
+		};
+		const merged = this.mergeOptions(defaults, options);
+		const { crosshair, connector, line } = merged;
+
+		// Crosshair options
+		this.size = crosshair.size;
+		this.thickness = crosshair.thickness;
+		this.color = crosshair.color;
+		this.gapSize = crosshair.gapSize;
+		this.style = crosshair.style;
+
+		// Connector options
+		this.distance = connector.distance;
+		this.spacing = connector.spacing;
+		this.connectorSize = connector.size;
+		this.connectorColor = connector.color;
+		this.connectorStyle = connector.style;
+		this.connectorShow = connector.visibility;
+
+		// Line options
+		this.lineColor = line.color || '#fff';
+		this.lineWidth = line.width || 1;
+
+		this.mouseX = canvas.width / 2;
+		this.mouseY = canvas.height / 2;
+
+		// Animation control
+		this.isAnimating = true;
+		this.animationFrameId = null;
+
+		this.setupEventListeners();
+		this.animate();
+	}
+
+	mergeOptions(defaults, options) {
+		const merged = JSON.parse(JSON.stringify(defaults));
+
+		if (options.crosshair) {
+			Object.assign(merged.crosshair, options.crosshair);
+		}
+		if (options.connector) {
+			Object.assign(merged.connector, options.connector);
+		}
+		if (options.line) {
+			Object.assign(merged.line, options.line);
+		}
+
+		return merged;
+	}
+
+	setupEventListeners() {
+		document.addEventListener('mousemove', (event) => {
+			this.mouseX = event.clientX;
+			this.mouseY = event.clientY;
+		});
+	}
+
+	animate() {
+		if (!this.isAnimating) {
+			this.animationFrameId = requestAnimationFrame(() => this.animate());
+			return;
+		}
+
+		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+		if (this.connectorShow) {
+			if (this.debug) this.drawLine();
+			this.drawConnector();
+		}
+
+		// TODO: Autom. Zug zum Zentrum hin ermöglichen
+		this.drawCrosshair();
+
+		this.animationFrameId = requestAnimationFrame(() => this.animate());
+	}
+
+	drawLine() {
+		const centerX = this.canvas.width / 2;
+		const centerY = this.canvas.height / 2;
+
+		this.ctx.strokeStyle = this.lineColor;
+		this.ctx.lineWidth = this.lineWidth;
+		this.ctx.beginPath();
+		this.ctx.moveTo(centerX, centerY);
+		this.ctx.lineTo(this.mouseX, this.mouseY);
+		this.ctx.stroke();
+	}
+
+	// TODO: Ausblenden nach Distanz
+	drawConnector() {
+		const centerX = this.canvas.width / 2;
+		const centerY = this.canvas.height / 2;
+
+		const dx = this.mouseX - centerX;
+		const dy = this.mouseY - centerY;
+		const delta = Math.sqrt(dx * dx + dy * dy);
+
+		// Only draw connectors if cursor is far enough from center
+		if (delta < this.distance) {
+			return;
+		}
+
+		const angle = Math.atan2(dy, dx);
+		const count = Math.floor((delta - this.distance) / this.spacing);
+
+		for (let i = 0; i < count; i++) {
+			const distance = this.distance + (i * this.spacing);
+			const x = centerX + Math.cos(angle) * distance;
+			const y = centerY + Math.sin(angle) * distance;
+
+			this.drawSymbol(x, y, angle);
+		}
+	}
+
+	drawSymbol(x, y, angle = 0) {
+		this.ctx.fillStyle = this.connectorColor;
+		this.ctx.strokeStyle = this.connectorColor;
+		this.ctx.lineWidth = 1;
+
+		switch (this.connectorStyle) {
+			case 'circle':
+				this.ctx.beginPath();
+				this.ctx.arc(x, y, this.connectorSize / 2, 0, Math.PI * 2);
+				this.ctx.fill();
+				break;
+			case 'diamond':
+				const size = this.connectorSize - (this.connectorSize / 4);
+				this.ctx.beginPath();
+				this.ctx.moveTo(x, y - size);
+				this.ctx.lineTo(x + size, y);
+				this.ctx.lineTo(x, y + size);
+				this.ctx.lineTo(x - size, y);
+				this.ctx.closePath();
+				this.ctx.fill();
+				break;
+			case 'square':
+				this.ctx.fillRect(
+					x - this.connectorSize / 2,
+					y - this.connectorSize / 2,
+					this.connectorSize,
+					this.connectorSize
+				);
+				break;
+			case 'arrow':
+				this.arrow(x, y, angle);
+				break;
+		}
+	}
+
+	arrow(x, y, angle) {
+		const size = this.connectorSize - (this.connectorSize / 4);
+
+		this.ctx.save();
+		this.ctx.translate(x, y);
+		this.ctx.rotate(angle);
+
+		// Arrow pointing right
+		this.ctx.beginPath();
+		this.ctx.moveTo(size, 0); // Tip
+		this.ctx.lineTo(-size, -size); // Back left
+		// this.ctx.lineTo(-size * 0.4, 0); // Middle
+		this.ctx.lineTo(-size, size); // Back right
+		this.ctx.closePath();
+		this.ctx.fill();
+
+		this.ctx.restore();
+	}
+
+	drawCrosshair() {
+		this.ctx.strokeStyle = this.color;
+		this.ctx.lineWidth = this.thickness;
+		this.ctx.lineCap = 'round';
+
+		switch (this.style) {
+			case 'cross':
+				this.cross();
+				break;
+			case 'circle':
+				this.circle();
+				break;
+			case 'dot':
+				this.dot();
+				break;
+			case 'level':
+				this.level();
+				break;
+		}
+	}
+
+	cross() {
+		// Horizontal line
+		this.ctx.beginPath();
+		this.ctx.moveTo(this.mouseX - this.size, this.mouseY);
+		this.ctx.lineTo(this.mouseX - this.gapSize, this.mouseY);
+		this.ctx.stroke();
+
+		this.ctx.beginPath();
+		this.ctx.moveTo(this.mouseX + this.gapSize, this.mouseY);
+		this.ctx.lineTo(this.mouseX + this.size, this.mouseY);
+		this.ctx.stroke();
+
+		// Vertical line
+		this.ctx.beginPath();
+		this.ctx.moveTo(this.mouseX, this.mouseY - this.size);
+		this.ctx.lineTo(this.mouseX, this.mouseY - this.gapSize);
+		this.ctx.stroke();
+
+		this.ctx.beginPath();
+		this.ctx.moveTo(this.mouseX, this.mouseY + this.gapSize);
+		this.ctx.lineTo(this.mouseX, this.mouseY + this.size);
+		this.ctx.stroke();
+	}
+
+	circle() {
+		// Outer circle
+		this.ctx.beginPath();
+		this.ctx.arc(this.mouseX, this.mouseY, this.size, 0, Math.PI * 2);
+		this.ctx.stroke();
+
+		// Inner dot
+		this.ctx.fillStyle = this.color;
+		this.ctx.beginPath();
+		this.ctx.arc(this.mouseX, this.mouseY, this.thickness, 0, Math.PI * 2);
+		this.ctx.fill();
+	}
+
+	dot() {
+		this.ctx.fillStyle = this.color;
+		this.ctx.beginPath();
+		this.ctx.arc(this.mouseX, this.mouseY, this.size / 4, 0, Math.PI * 2);
+		this.ctx.fill();
+	}
+
+	level() {
+		this.ctx.beginPath();
+		this.ctx.moveTo(this.mouseX - this.size * 2, this.mouseY);
+		this.ctx.lineTo(this.mouseX - this.gapSize * 2, this.mouseY);
+		this.ctx.stroke();
+
+		this.ctx.beginPath();
+		this.ctx.arc(this.mouseX, this.mouseY, this.size, 0, Math.PI);
+		this.ctx.stroke();
+
+		this.ctx.beginPath();
+		this.ctx.moveTo(this.mouseX + this.gapSize * 2, this.mouseY);
+		this.ctx.lineTo(this.mouseX + this.size * 2, this.mouseY);
+		this.ctx.stroke();
+
+		this.ctx.fillStyle = this.color;
+		this.ctx.beginPath();
+		this.ctx.arc(this.mouseX, this.mouseY, this.thickness, 0, Math.PI * 2);
+		this.ctx.fill();
+	}
+
+	setCrosshairStyle(style) {
+		this.style = style;
+	}
+
+	setCrosshairColor(color) {
+		this.color = color;
+	}
+
+	setConnectorStyle(style) {
+		this.connectorStyle = style;
+	}
+
+	setConnectorColor(color) {
+		this.connectorColor = color;
+	}
+
+	setConnectorVisibility(visible) {
+		this.connectorShow = visible;
+	}
+
+	startAnimation() {
+		this.isAnimating = true;
+	}
+
+	stopAnimation() {
+		this.isAnimating = false;
+	}
+
+	toggleAnimation() {
+		this.isAnimating = !this.isAnimating;
+	}
+}

source/code/hippie/app.js

@@ -540,6 +540,15 @@ function mapRange(value, inMin, inMax, outMin, outMax, reverse = false, clamp =
 	return mapped;
 }
 
+function zeroFill(number, width) {
+	width -= number.toString().length;
+
+	if (width > 0) {
+		return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number;
+	}
+	return number + ''; // always return a string
+}
+
 // Source - https://stackoverflow.com/a/47480429
 // Posted by Etienne Martin, modified by community. See post 'Timeline' for change history
 // Retrieved 2026-03-08, License - CC BY-SA 4.0
@@ -603,91 +612,6 @@ Clock.prototype.formatDigits = function (val) {
 	return val;
 };
 
-function ongoing() {
-
-	var now = new Date();
-
-	var w = Math.floor(now.getDay());
-	var D = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
-	var DNumb = Math.floor(now.getDate());
-	var MNumb = Math.floor(now.getMonth());
-	var M = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'MaiOktober', 'November', 'Dezember'];
-	var y = Math.floor(now.getYear());
-	if (y < 999) y += 1900;
-
-	var ms = Math.floor(now.getMilliseconds());
-	var s = Math.floor(now.getSeconds());
-	var m = Math.floor(now.getMinutes() + s / 60);
-	var h = Math.floor(now.getHours() + m / 60);
-
-	var j2000 = new Date(); // Bezugspunkt ist der 1.1.2000 0:00 UT (entspricht JD 2451544,5)
-	j2000.setUTCFullYear(2000, 0, 1);
-	j2000.setUTCHours(0, 0, 0, 0);
-
-	var utc = new Date();
-	utc.setUTCFullYear(y, MNumb, DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden
-	utc.setUTCHours(h, m, s, ms);
-
-	var utc0 = new Date();
-	utc0.setUTCFullYear(y, MNumb, DNumb);
-	utc0.setUTCHours(0, 0, 0, 0);
-
-	var jd = 2451544.5 + (utc - j2000) / 86400000; // Zählung erfolgt in Millisekunden, 1 Tag = 86.400.000 ms
-	var jdUTC0 = 2451544.5 + (utc0 - j2000) / 86400000;
-
-	var N = jd - 2451545.0;
-	var L = 280.460 + 0.9856474 * N; // mittlere ekliptikale Länge der Sonne
-	var g = 357.528 + 0.9856003 * N; // mittlere Anomalie
-	var el = L + 1.915 * Math.sin(g) + 0.020 * Math.sin(2 * g);
-	var e = 23.439 - 0.0000004 * N;
-	var rektaszension = Math.atan((Math.cos(e) * Math.sin(el)) / Math.cos(el));
-
-	var T = (jdUTC0 - 2451545.0) / 36525;
-	var stGMT = (((6 * 3600) + (41 * 60) + 50.54841) + (8640184.812866 * T) + (0.093104 * Math.pow(T, 2)) - (0.0000062 * Math.pow(T, 3))) / 3600;
-
-	var stGMT2 = 6.697376 + 2400.05134 * T + 1.002738 * T;
-	var hWGMT = stGMT2 * 15;
-	var hW = hWGMT + 11.9566185772;
-
-	var st = (stGMT + (now.getUTCHours() * 1.00273790935)) + (11.9566185772 / 15); // Sommerzeit muss noch berücksichtigt werden
-	var st24 = Math.abs(st - (Math.round(st / 24) * 24));
-	var stH = Math.floor(st24);
-	var stM = Math.floor((st24 % 1) * 60);
-	var stS = zeroFill(Math.floor((((st24 % 1) * 60) % 1) * 60), 2);
-
-	var travelWidth = document.body.clientWidth;
-	var travelHeight = document.body.clientHeight;
-	var sunPosX = 0;
-	var sunPosY = 0;
-	var moonPosX = 0;
-	var moonPosY = 0;
-
-	var sun = $('#sun').css({
-		'left': (s / 60) * travelWidth,
-		'top': (m / 60) * travelHeight
-	});
-
-	$('#day').text(D[w]);
-	$('#dayNumb').text(DNumb);
-	$('#month').text(M[MNumb]);
-	$('#year').text(y);
-	$('#time').text('' + zeroFill(h, 2) + ':' + zeroFill(m, 2) + ':' + zeroFill(s, 2));
-
-	$('#julian').text(jd.toFixed(6));
-	//$('#star').text(stH + ':' + stM + ':' + stS);
-	$('#star').text(stH + ':' + stM);
-	$('#star1').text(stGMT);
-	$('#star2').text(stGMT2);
-}
-
-function zeroFill(number, width) {
-	width -= number.toString().length;
-	if (width > 0) {
-		return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number;
-	}
-	return number + ''; // always return a string
-}
-
 //Länge der Balken im Diagram berechnen
 function barwidth(size, G, W) {
 	var s = size;

source/data/start.json

@@ -8,7 +8,7 @@
 		"href": "/demo/basics.html"
 	},
 	{
-		"text": "Drag",
-		"href": "/demo/examples/ui/drag.html"
+		"text": "Portal",
+		"href": "/demo/examples/portal.html"
 	}
 ]

source/screens/demo/basics.liquid

@@ -801,7 +801,7 @@ order: 2
 			<code>&lt;fieldset&gt;</code>
 			realisiert.</p>
 		<fieldset>
-			<div class="grid grid_column_2">
+			<div class="dis_grid grid_column_2">
 				<label for="demo__input">Input:</label><input class="input_io" type="text" value="love"
 															  readonly="readonly" id="demo__input">
 				<label for="demo__output">Output:</label><input class="input_io" type="text" value="happiness"
@@ -813,7 +813,7 @@ order: 2
 			auch eine eigene Beschriftung erhalten.</p>
 		<fieldset>
 			<legend>Einfache Eingabeelemente</legend>
-			<div class="grid grid_column_2">
+			<div class="dis_grid grid_column_2">
 				<label>Schaltflächen:</label>
 				<div>
 					<button>Senden</button>
@@ -846,7 +846,7 @@ order: 2
 		</fieldset>
 		<fieldset>
 			<legend>Einfache Eingabeelemente mit Stil</legend>
-			<div class="grid grid_column_2">
+			<div class="dis_grid grid_column_2">
 				<label>Schaltflächen:</label>
 				<div class="flex inline">
 					<button class="button_io">Senden</button>
@@ -883,7 +883,7 @@ order: 2
 				Information oder lockern das Erscheinungsbild auf.</p>
 			<p>Hier nun eine Liste weiterer Arten von Eingabefeldern:</p>
 			<form action="">
-				<div class="grid grid_column_2">
+				<div class="dis_grid grid_column_2">
 					<label class="">Farbauswahl<br>
 						<code>&lt;input[type="color"]&gt;</code>
 					</label>

source/screens/demo/components.liquid

@@ -286,12 +286,17 @@ order: 3
 				<td style="width: 50%">Zelle mit Angabe der Breite.</td>
 			</tr>
 		</table>
-		<pre class="pre_code"><code>table.flexible>tr>td+td.truncate.ellipsis+td</code></pre>
-		<table class="flexible">
+		<pre class="pre_code"><code>table.grid>(tr>td+td.ellipsis+td)*2</code></pre>
+		<table class="grid">
 			<tr>
 				<td>Index</td>
-				<td class="truncate ellipsis">Zelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.</td>
-				<td>Zelle mit Angabe der Breite.</td>
+				<td class="ellipsis">Zelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.</td>
+				<td>Inhalt bestimmt die Breite</td>
+			</tr>
+			<tr>
+				<td>101</td>
+				<td class="ellipsis">Zelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.</td>
+				<td>Zelle</td>
 			</tr>
 		</table>
 	</article>

source/screens/demo/examples/10print.liquid

@@ -5,8 +5,7 @@ tags:
 ---
 {% layout 'hippie/simple.liquid' %}
 
-{% block head %}
-{{ block.super -}}
+{% block style %}
 <style>
 	canvas {
 		display: block;
@@ -20,7 +19,6 @@ tags:
 
 {% block script %}
 <script>
-	// Page script
 	const canvas = document.getElementById('pattern');
 	const ctx = canvas.getContext('2d');
 

source/screens/demo/examples/clock.liquid

@@ -27,6 +27,8 @@ tags:
 <script>
 	class HippieClock {
 		constructor(element, date = new Date(), options = {}) {
+			this.element = element;
+			this.date = date;
 			this.defaults = {
 				debug: true,
 				size: Math.floor(this.getSize().value * 0.9),
@@ -35,8 +37,6 @@ tags:
 				overlay: false
 			};
 			this.options = {...this.defaults, ...options};
-			this.element = element;
-			this.date = date;
 			this.values = this.getTime();
 			this.parts = [];
 			this.shapes = [];

source/screens/demo/examples/game/fpv.liquid

@@ -0,0 +1,87 @@
+---
+title: FPV
+tags:
+- game
+---
+{% assign bodyClass = 'body_fpv' -%}
+{% layout 'hippie/simple.liquid' %}
+
+{% block links %}
+{{ block.super -}}
+<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
+{% endblock %}
+
+{% block body %}
+<canvas id="view"></canvas>
+
+<header class="io controls">
+	<nav>
+		<button onclick="toggleAnimation()">Toggle</button>
+	</nav>
+	<nav>
+		<span>Color</span>
+		<button onclick="changeColor('black')">Black</button>
+		<button onclick="changeColor('white')">White</button>
+		<button onclick="changeColor('crimson')">Red</button>
+		<button onclick="changeColor('#00ffff')">Cyan</button>
+	</nav>
+	<nav>
+		<span>Crosshair</span>
+		<button onclick="changeCrosshairStyle('cross')"><i class="bi bi-plus-lg"></i></button>
+		<button onclick="changeCrosshairStyle('circle')"><i class="bi bi-circle"></i></button>
+		<button onclick="changeCrosshairStyle('dot')"><i class="bi bi-dot"></i></button>
+		<button onclick="changeCrosshairStyle('level')"><i class="bi bi-dash-circle"></i></button>
+	</nav>
+	<nav>
+		<span>Connector</span>
+		<button onclick="toggleConnector()">Toggle</button>
+		<hr class="vertical">
+		<button onclick="changeConnectorStyle('arrow')"><i class="bi bi-caret-up-fill"></i></button>
+		<button onclick="changeConnectorStyle('square')"><i class="bi bi-square-fill"></i></button>
+		<button onclick="changeConnectorStyle('circle')"><i class="bi bi-circle-fill"></i></button>
+		<button onclick="changeConnectorStyle('diamond')"><i class="bi bi-diamond-fill"></i></button>
+	</nav>
+</header>
+{% endblock %}
+
+{% block assets %}
+<script src="/js/game.js"></script>
+{% endblock %}
+
+{% block script %}
+<script>
+	const canvas = document.getElementById('view');
+	canvas.width = window.innerWidth;
+	canvas.height = window.innerHeight;
+
+	const crosshair = new HippieCrosshair(canvas);
+
+	function changeCrosshairStyle(style) {
+		crosshair.setCrosshairStyle(style);
+	}
+
+	function changeConnectorStyle(style) {
+		crosshair.setConnectorStyle(style);
+	}
+
+	function changeColor(color) {
+		crosshair.setCrosshairColor(color);
+		crosshair.setConnectorColor(color);
+		crosshair.lineColor = `rgba(${parseInt(color.slice(1, 3), 16)}, ${parseInt(color.slice(3, 5), 16)}, ${parseInt(color.slice(5, 7), 16)}, 0.3)`;
+	}
+
+	function toggleConnector() {
+		crosshair.setConnectorVisibility(!crosshair.connectorShow);
+	}
+
+	function toggleAnimation() {
+		crosshair.toggleAnimation();
+	}
+
+	window.addEventListener('resize', () => {
+		canvas.width = window.innerWidth;
+		canvas.height = window.innerHeight;
+	});
+</script>
+
+{% endblock %}

source/screens/demo/examples/game/index.liquid

@@ -6,8 +6,6 @@ tags:
 ---
 {% layout 'hippie/simple.liquid' %}
 
-{% block title %}{{ title }}{% endblock %}
-
 {% block body %}
 <div class="sec_main_center">
 	<nav role="doc-toc">

source/screens/demo/examples/start.liquid

@@ -8,34 +8,44 @@ tags:
 {% layout 'hippie/simple.liquid' %}
 
 {% block body %}
+{% render 'hippie/partials/header-status', hippie: hippie, links: start %}
 <main>
-	<form id="www_search" class="flex inline" action="https://duckduckgo.com/">
+	<header class="io">
+		<form id="wwwForm" class="group_nav" action="https://duckduckgo.com/">
 			<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">
-		<article>
-			<section>
-				<h2><a href="">Name</a></h2>
+		<nav>
+			<hr class="vertical">
 			<ul>
 				<li>
-						<a href=""><img src="/art/bullet.gif" width="16" height="16"/>Link</a>
+					<a href="" class="a_button">A</a>
+				</li>
+				<li>
+					<a href="" class="a_button">B</a>
 				</li>
 			</ul>
-			</section>
-		</article>
-		<article>
-			<section>
-				<h2><a href="">Name</a></h2>
-			</section>
-		</article>
+		</nav>
+	</header>
+	<div class="area">
+		<div>1</div>
+		<div>2</div>
+		<div>3</div>
+		<div>4</div>
 	</div>
 </main>
 {% endblock %}
 
+{% block assets %}
+<script src="/vendor/hippie-script.js"></script>
+<script src="/js/globals.js"></script>
+<script src="/js/app.js"></script>
+{% endblock %}
+
 {% block script %}
 <script>
-	// Page script
+	const timeElement = document.getElementById('time');
+	const dateElement = document.getElementById('date');
 	// NOTE: https://duckduckgo.com/duckduckgo-help-pages/settings/params
 	const defaultOptions = {
 		kl: 'de-de',
@@ -65,8 +75,26 @@ tags:
 		return base + '?' + params.toString();
 	}
 
-	document.getElementById('www_search').addEventListener('submit', function (e) {
-		e.preventDefault();
+	// Example of setting options programmatically:
+	// setOptions({ kl: 'de-de', kp: '2', iar: 'images' });
+
+	new TimeDisplay(timeElement, {hour: '2-digit', minute: '2-digit'});
+	new DateDisplay(dateElement, {
+		weekday: "long",
+		year: "numeric",
+		month: "long",
+		day: "numeric",
+	});
+	// ongoing();
+
+	document.addEventListener('mousemove', (event) => {
+		document
+			.getElementById('log')
+			.textContent = "X: " + event.pageX + ", Y: " + event.pageY;
+	});
+
+	document.getElementById('wwwForm').addEventListener('submit', function (event) {
+		event.preventDefault();
 		const query = document.getElementById('qrySearch').value.trim();
 
 		if (!query) return;
@@ -76,7 +104,81 @@ tags:
 		window.open(url, '_blank', 'noopener');
 	});
 
-	// Example of setting options programmatically:
-	// setOptions({ kl: 'de-de', kp: '2', iar: 'images' });
+	function ongoing() {
+		var now = new Date();
+		var w = Math.floor(now.getDay());
+		var D = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
+		var DNumb = Math.floor(now.getDate());
+		var MNumb = Math.floor(now.getMonth());
+		var M = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
+		var y = Math.floor(now.getYear());
+		if (y < 999) y += 1900;
+
+		var ms = Math.floor(now.getMilliseconds());
+		var s = Math.floor(now.getSeconds());
+		var m = Math.floor(now.getMinutes() + s / 60);
+		var h = Math.floor(now.getHours() + m / 60);
+
+		var j2000 = new Date(); // Bezugspunkt ist der 1.1.2000 0:00 UT (entspricht JD 2451544,5)
+		j2000.setUTCFullYear(2000, 0, 1);
+		j2000.setUTCHours(0, 0, 0, 0);
+
+		var utc = new Date();
+		utc.setUTCFullYear(y, MNumb, DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden
+		utc.setUTCHours(h, m, s, ms);
+
+		var utc0 = new Date();
+		utc0.setUTCFullYear(y, MNumb, DNumb);
+		utc0.setUTCHours(0, 0, 0, 0);
+
+		var jd = 2451544.5 + (utc - j2000) / 86400000; // Zählung erfolgt in Millisekunden, 1 Tag = 86.400.000 ms
+		var jdUTC0 = 2451544.5 + (utc0 - j2000) / 86400000;
+
+		var N = jd - 2451545.0;
+		var L = 280.460 + 0.9856474 * N; // mittlere ekliptikale Länge der Sonne
+		var g = 357.528 + 0.9856003 * N; // mittlere Anomalie
+		var el = L + 1.915 * Math.sin(g) + 0.020 * Math.sin(2 * g);
+		var e = 23.439 - 0.0000004 * N;
+		var rektaszension = Math.atan((Math.cos(e) * Math.sin(el)) / Math.cos(el));
+
+		var T = (jdUTC0 - 2451545.0) / 36525;
+		var stGMT = (((6 * 3600) + (41 * 60) + 50.54841) + (8640184.812866 * T) + (0.093104 * Math.pow(T, 2)) - (0.0000062 * Math.pow(T, 3))) / 3600;
+
+		var stGMT2 = 6.697376 + 2400.05134 * T + 1.002738 * T;
+		var hWGMT = stGMT2 * 15;
+		var hW = hWGMT + 11.9566185772;
+
+		var st = (stGMT + (now.getUTCHours() * 1.00273790935)) + (11.9566185772 / 15); // Sommerzeit muss noch berücksichtigt werden
+		var st24 = Math.abs(st - (Math.round(st / 24) * 24));
+		var stH = Math.floor(st24);
+		var stM = Math.floor((st24 % 1) * 60);
+		var stS = zeroFill(Math.floor((((st24 % 1) * 60) % 1) * 60), 2);
+
+		const travelWidth = document.body.clientWidth;
+		const travelHeight = document.body.clientHeight;
+		var sunPosX = 0;
+		var sunPosY = 0;
+		var moonPosX = 0;
+		var moonPosY = 0;
+
+		const sun = document.getElementById('sun');
+
+		if (sun) {
+			sun.style.left = (s / 60) * travelWidth;
+			sun.style.top = (m / 60) * travelHeight;
+		}
+
+		/*document.getElementById('time').textContent = '' + zeroFill(h, 2) + ':' + zeroFill(m, 2) + ':' + zeroFill(s, 2);
+		document.getElementById('day').textContent = D[w];
+		document.getElementById('dayNumb').textContent = DNumb;
+		document.getElementById('month').textContent = M[MNumb];
+		document.getElementById('year').textContent = y;
+
+		document.getElementById('julian').textContent = jd.toFixed(6);
+		document.getElementById('star').textContent = stH + ':' + stM + ':' + stS;
+		document.getElementById('star').textContent = stH + ':' + stM;
+		document.getElementById('star1').textContent = stGMT;
+		document.getElementById('star2').textContent = stGMT2;*/
+	}
 </script>
 {% endblock %}

source/screens/demo/examples/ui/gallery.liquid

@@ -12,7 +12,7 @@ tags:
 	<section>
 		<header class="io">
 			<nav>
-				<div class="group-input">
+				<div class="group_nav">
 					<input id="setSize" value="5" min="1" max="10" step="1" type="range"/>
 					<label class="right" for="setSize">Größe</label>
 				</div>

source/screens/demo/examples/ui/table.liquid

@@ -12,11 +12,11 @@ tags:
 	<section>
 		<header class="io">
 			<nav>
-				<div class="group-input">
+				<div class="group_nav">
 					<button id="addEntry" title="Add entry">
 						<i class="bi bi-plus-circle"></i>
 					</button>
-					<div class="group-input-wrap"><input id="setScroll" type="checkbox"></div>
+					<div class="wrap_input"><input id="setScroll" type="checkbox"></div>
 					<label for="setScroll">Scroll to new entry</label>
 				</div>
 			</nav>
@@ -24,7 +24,7 @@ tags:
 				<button id="tglIndex" title="Toggle index column">
 					<i class="bi bi-hash"></i>
 				</button>
-				<div class="group-input">
+				<div class="group_nav">
 					<select id="sltNum" name="position-number">
 						<option value="" selected>None</option>
 						<option value="numeric">123</option>

source/screens/demo/examples/ui/tile.liquid

@@ -1,45 +0,0 @@
----
-title: Tile
-tags:
-- ui
----
-{% assign bodyClass = 'body_new' -%}
-{% layout 'hippie/app.liquid' %}
-
-{% block body %}
-{% render 'hippie/partials/header-status', hippie: hippie, links: start %}
-<header class="area menu io">
-	<nav>
-		<ul>
-			<li>
-				<a href="" class="a_button">Func 1</a>
-			</li>
-			<li>
-				<a href="" class="a_button">Func 2</a>
-			</li>
-		</ul>
-	</nav>
-</header>
-<div class="area grid">
-	<div class="item">1</div>
-	<div class="item">2</div>
-	<div class="item">3</div>
-	<div class="item">4</div>
-</div>
-{% endblock %}
-
-{%- block script %}
-{{ block.super -}}
-<script>
-	const timeElement = document.getElementById('time');
-	const timeDisplay = new TimeDisplay(timeElement);
-
-	ongoing();
-
-	document.addEventListener('mousemove', (event) => {
-		document
-			.getElementById('log')
-			.textContent = "X: " + event.pageX + ", Y: " + event.pageY;
-	});
-</script>
-{% endblock %}

source/style/hippie-style

@@ -1 +1 @@
-Subproject commit 43f66d8178c7225931d6358d1f37797461a0a94d
+Subproject commit 848754c6150df95207dffa36f388c696330cf56b

source/style/modules/_clock.scss

@@ -1,7 +1,7 @@
-@use "../hippie-style/hippie";
-
 @use "sass:map";
 
+@use "../hippie-style/hippie";
+
 .body_clock {
 	header {
 		z-index: map.get(hippie.$z-indexes, "content-top");

source/style/modules/_game.scss

@@ -1,5 +1,34 @@
+@use 'sass:list';
+@use "sass:map";
+
 @use "../hippie-style/hippie";
 
+$colors: hippie.$color_palette;
+$steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100);
+
+@function getColor($index, $colors) {
+	$color_keys: map.keys($colors);
+	$key_count: list.length($color_keys);
+	$cycled_index: ($index % $key_count) + 1;
+	$key: list.nth($color_keys, $cycled_index);
+	@return map.get($colors, $key);
+}
+
+@mixin fadeColors($steps, $colors) {
+	@keyframes fadeColor {
+		@for $i from 1 through list.length($steps) {
+			$percent: list.nth($steps, $i);
+			$color: getColor($i - 1, $colors);
+
+			#{$percent}% {
+				background-color: $color;
+			}
+		}
+	}
+
+	animation: fadeColor 16s infinite linear;
+}
+
 .body_game {
 	@extend .h_full_view;
 	background-color: hotpink;
@@ -25,3 +54,21 @@
 		}
 	}
 }
+
+.body_fpv {
+	@extend .h_full_view;
+
+	canvas {
+		@include fadeColors($steps, $colors);
+
+		display: block;
+		cursor: none;
+	}
+
+	.controls {
+		position: fixed;
+		top: 0;
+		left: 0;
+		border-radius: hippie.$radius_basic;
+	}
+}

source/style/modules/_login.scss

@@ -1,4 +1,5 @@
 @use "sass:color";
+
 @use "../hippie-style/hippie";
 
 form[name="login"] {

source/style/modules/_start.scss

@@ -1,15 +1,111 @@
+@use "sass:color";
+
 @use "../hippie-style/hippie";
 
+$module_top_height: 32px;
+$body_top_space: $module_top_height + hippie.$space_basic;
+
 .body_start {
+	@extend .h_full_view;
+
+	padding: $body_top_space hippie.$space_basic hippie.$space_basic;
+
 	main {
 		@extend .sec_main_center;
+		@extend %flex_column;
+
+		height: 100%;
 	}
 
-	#www_search {
+	form {
+		flex: 1;
+
 		input[type="text"] {
 			flex: 1;
 			padding: hippie.$padding_basic;
 			line-height: hippie.$line_text_basic;
 		}
 	}
+
+	.area {
+		display: grid;
+		grid-gap: hippie.$space_basic;
+		flex: 1;
+		// grid-template-rows: repeat(2, 1fr);
+		// grid-template-columns: repeat(2, 1fr);
+		grid-template-areas: "a a";
+		grid-auto-rows: 1fr;
+		grid-auto-columns: 1fr;
+		transition: hippie.$transition_best;
+
+		&:hover {
+			background-color: #999;
+		}
+
+		& > div {
+			// height: unset;
+			border-color: color.scale(hippie.$color_back_basic, $lightness: -4%);
+			border-style: dotted;
+			border-width: hippie.$width_border_8;
+			border-radius: hippie.$width_border_8;
+			padding: hippie.$space_basic;
+			background-color: rgb(hippie.$color_back_basic, .5);
+			// background-color: lighten(hippie.$color_back_basic, hippie.$color_diff_tiny);
+			// background-color: gold;
+		}
+	}
+}
+
+#top {
+	position: fixed;
+	top: 0;
+	left: 0;
+	display: flex;
+	width: 100%;
+	height: $module_top_height;
+	background-color: rgb(0, 0, 0, .8);
+	z-index: hippie.$z_top;
+
+	div:last-child {
+		flex: 1;
+	}
+
+	p,
+	li {
+		color: #fff;
+	}
+
+	h1 a {
+		color: #000;
+	}
+
+	p,
+	li {
+		margin-top: 8px;
+		margin-bottom: 7px;
+		padding: 0 4px;
+		font-size: 12px;
+		line-height: 17px;
+	}
+
+	nav ul {
+		display: flex;
+		margin: 0 0 0 16px;
+	}
+
+	.brand {
+		height: 36px;
+		background-color: #fff;
+		margin: 0 0 0 128px;
+		padding: 7px 24px;
+		font-size: 16px;
+		line-height: 22px;
+		font-weight: bold;
+		text-align: center;
+	}
+
+	.state {
+		margin-right: 16px;
+		text-align: right;
+	}
 }

source/style/modules/ui/_new_module.scss

@@ -1,99 +0,0 @@
-@use "sass:color";
-
-@use "../../hippie-style/hippie";
-
-$module_top_height: 32px;
-$body_top_space: $module_top_height + hippie.$space_basic;
-
-.body_new {
-	@extend %flex_column;
-	padding: $body_top_space hippie.$space_basic hippie.$space_basic;
-}
-
-.area {
-	transition: hippie.$transition_best;
-
-	&:hover {
-		background-color: #999;
-	}
-}
-
-.grid {
-	display: grid;
-	flex: 1;
-	// grid-template-rows: repeat(2, 1fr);
-	// grid-template-columns: repeat(2, 1fr);
-	grid-template-areas: "a a";
-	grid-auto-rows: 1fr;
-	grid-auto-columns: 1fr;
-}
-
-.item {
-	// height: unset;
-	border-color: color.scale(hippie.$color_back_basic, $lightness: -4%);
-	border-style: dotted;
-	border-width: hippie.$width_border_8;
-	border-radius: hippie.$width_border_8;
-	padding: hippie.$space_basic;
-	background-color: rgb(hippie.$color_back_basic, .5);
-	// background-color: lighten(hippie.$color_back_basic, hippie.$color_diff_tiny);
-	// background-color: gold;
-}
-
-.float {
-	min-height: 50%;
-}
-
-#top {
-	position: fixed;
-	top: 0;
-	left: 0;
-	display: flex;
-	width: 100%;
-	height: $module_top_height;
-	background-color: rgb(0, 0, 0, .8);
-	z-index: hippie.$z_top;
-
-	div:last-child {
-		flex: 1;
-	}
-
-	p,
-	li {
-		color: #fff;
-	}
-
-	h1 a {
-		color: #000;
-	}
-
-	p,
-	li {
-		margin-top: 8px;
-		margin-bottom: 7px;
-		padding: 0 4px;
-		font-size: 12px;
-		line-height: 17px;
-	}
-
-	nav ul {
-		display: flex;
-		margin: 0 0 0 16px;
-	}
-
-	.brand {
-		height: 36px;
-		background-color: #fff;
-		margin: 0 0 0 128px;
-		padding: 7px 24px;
-		font-size: 16px;
-		line-height: 22px;
-		font-weight: bold;
-		text-align: center;
-	}
-
-	.state {
-		margin-right: 16px;
-		text-align: right;
-	}
-}

source/style/ui.scss

@@ -4,7 +4,6 @@
 @use "hippie-style/hippie";
 
 @use "modules/ui/frame_module";
-@use "modules/ui/new_module";
 @use "modules/ui/drag_module";
 @use "modules/ui/form_module";
 @use "modules/ui/gallery_module";

source/templates/hippie/default.liquid

@@ -17,12 +17,14 @@
 		{% block title %}{% endblock -%}
 		{{ hippie.titlePostfix -}}
 	</title>
+
 	{% block meta -%}
 	{% render 'hippie/partials/meta.liquid' %}
 	{% endblock -%}
 	{% block links -%}
 	{% render 'hippie/partials/links.liquid' %}
 	{% endblock -%}
+	{% block style -%}{% endblock -%}
 	{% endblock -%}
 </head>