Merge pull request 'Replace Nunjucks with Liquid' (#2) from development into main

Reviewed-on: #2

.eleventy.js

@@ -31,8 +31,7 @@ export default async function (eleventyConfig) {
 		return (data) => `${data.page.filePathStem}.${data.page.outputFileExtension}`;
 	});
 
-	// TODO: Demo entfernen
+	const demoPath = await hasFiles('source/screens') ? '/demo/' : '/';
-	const permalinkPath = await hasFiles('source/view') ? '/demo/' : '/';
 
 	eleventyConfig.addGlobalData('hippie', {
 		brand: 'hippie',
@@ -45,7 +44,7 @@ export default async function (eleventyConfig) {
 			mail: 'name@domain.tld',
 			domain: 'https://domain.tld'
 		},
-		permalink: permalinkPath,
+		demoPath: demoPath,
 		debugMode: true,
 		legacyMode: false
 	});
@@ -130,13 +129,14 @@ export default async function (eleventyConfig) {
 	eleventyConfig.addPassthroughCopy({'node_modules/hippie-script/index.js': 'vendor/hippie-script.js'});
 
 	eleventyConfig.addWatchTarget('./source/style/');
-}
 
-// noinspection JSUnusedGlobalSymbols
+	return {
-export const config = {
 		dir: {
-		input: 'source/view',
+			input: 'source/screens',
-		output: 'build'
+			output: 'build',
+			includes: '../templates',
+			data: '../data'
 		},
 		templateFormats: ['html', 'liquid', 'md', 'njk']
 	};
+}

.gitmodules

@@ -2,6 +2,3 @@
 	path = source/style/hippie-style
 	url = https://quelltext.interaktionsweise.de/interaktionsweise/hippie-style.git
 	branch = development
-[submodule "source/view/_includes/hippie-view"]
-	path = source/view/_includes/hippie-view
-	url = https://quelltext.interaktionsweise.de/interaktionsweise/hippie-view.git

.jshintrc

@@ -14,20 +14,20 @@
 	"unused": false,
 	"browser": true,
 	"globals": {
-		"DateDisplay": true,
 		"HIPPIE": false,
-		"HippieTaskBar": true,
+		"hippie": true,
-		"TimeDisplay": true,
+		"viewHover": true,
 		"basicEase": true,
-		"centerElementUnderCursor": false,
-		"checkButtonAndTarget": false,
 		"debugOn": true,
+		"TimeDisplay": true,
+		"DateDisplay": true,
+		"checkButtonAndTarget": false,
 		"getClosestEdgeToElement": false,
 		"getClosestEdgeToMouse": false,
-		"hippie": true,
+		"centerElementUnderCursor": false,
+		"setAttributesAccordingToPosition": false,
 		"randomIntFrom": false,
-		"readJsonFile": false,
 		"replaceLineBreaks": false,
-		"viewHover": true
+		"HippieTaskBar": true
 	}
 }

CHANGELOG.md

@@ -1,5 +1,5 @@
 | Commit | Version | Description |
-|:-----------------------------------------|:-------:|:------------------------------------------------|
+| :--- | :----: | :--- |
 | 6095870ce33fd3775718a1de3d33f604fd0630ab | 0.4.2 | Javascript again |
 | 50a1a6d9257b272e076c2e3b5bac39c7d17b2793 | 0.5.0 | Changes to content |
 | e2bbe9273a292a3806de1599f752258a2721d067 | 0.5.1 | |

README.md

@@ -7,7 +7,7 @@ Hippie interweaves preeminent personal interface elements
 This is a [Node.js](https://nodejs.org/) based generator for static HTML documents.  
 It uses the [Eleventy](https://www.11ty.dev/) project to fiddle everything together.
 
-Styling is powered by the CSS extension language [Sass](https://sass-lang.com/). The HTML pages are written with
+Styling is powered by the CSS extension language [SASS](https://sass-lang.com/). The HTML pages are written with
 templating engines or directly as HTML files. Mainly [Liquid](https://liquidjs.com/) is used,
 but [Markdown](https://daringfireball.net/projects/markdown/) and [Nunjucks](https://mozilla.github.io/nunjucks/) are
 also options.

TODO.md

@@ -1,5 +1,6 @@
 # General
 
+- Remove gulp and legacy files
 - Better README with more info for the content section
   - Explain eleventy usage
 - Complete CHANGELOG
@@ -7,10 +8,6 @@
 - Add dynamic content to robots.txt during build process
 - Add dynamic content to sitemap.xml
 
-# 11ty
-
-- Look into teh difference of layouts and templates
-
 # CSS
 
 - Check style for every basic element
@@ -23,9 +20,6 @@
   - 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
 

package-lock.json

@@ -9,12 +9,12 @@
 			"version": "0.13.1",
 			"license": "MIT",
 			"dependencies": {
-				"@11ty/eleventy": "^3.1.5",
+				"@11ty/eleventy": "^3.1.2",
 				"@11ty/eleventy-plugin-webc": "^0.11.2",
 				"bootstrap-icons": "^1.13.1",
 				"hippie-script": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git",
-				"jquery": "^4.0.0",
+				"jquery": "^3.7.1",
-				"sass": "^1.99.0"
+				"sass": "^1.93.0"
 			},
 			"devDependencies": {
 				"normalize.css": "^8.0.1"
@@ -42,44 +42,44 @@
 			}
 		},
 		"node_modules/@11ty/eleventy": {
-			"version": "3.1.5",
+			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-3.1.5.tgz",
+			"resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-3.1.2.tgz",
-			"integrity": "sha512-hZ0g6MwZyRxCqXsPm82gIM304LraKbUz3ZmezOSjsqxttZG6cHTib3Qq8QkESJoKwnr+yX1eyfOkPC5/mEgZnQ==",
+			"integrity": "sha512-IcsDlbXnBf8cHzbM1YBv3JcTyLB35EK88QexmVyFdVJVgUU6bh9g687rpxryJirHzo06PuwnYaEEdVZQfIgRGg==",
 			"license": "MIT",
 			"dependencies": {
-				"@11ty/dependency-tree": "^4.0.2",
+				"@11ty/dependency-tree": "^4.0.0",
-				"@11ty/dependency-tree-esm": "^2.0.4",
+				"@11ty/dependency-tree-esm": "^2.0.0",
 				"@11ty/eleventy-dev-server": "^2.0.8",
-				"@11ty/eleventy-plugin-bundle": "^3.0.7",
+				"@11ty/eleventy-plugin-bundle": "^3.0.6",
 				"@11ty/eleventy-utils": "^2.0.7",
 				"@11ty/lodash-custom": "^4.17.21",
-				"@11ty/posthtml-urls": "^1.0.2",
+				"@11ty/posthtml-urls": "^1.0.1",
-				"@11ty/recursive-copy": "^4.0.4",
+				"@11ty/recursive-copy": "^4.0.2",
 				"@sindresorhus/slugify": "^2.2.1",
 				"bcp-47-normalize": "^2.3.0",
 				"chokidar": "^3.6.0",
-				"debug": "^4.4.3",
+				"debug": "^4.4.1",
 				"dependency-graph": "^1.0.0",
 				"entities": "^6.0.1",
 				"filesize": "^10.1.6",
 				"gray-matter": "^4.0.3",
 				"iso-639-1": "^3.1.5",
-				"js-yaml": "^4.1.1",
+				"js-yaml": "^4.1.0",
 				"kleur": "^4.1.5",
-				"liquidjs": "^10.25.0",
+				"liquidjs": "^10.21.1",
-				"luxon": "^3.7.2",
+				"luxon": "^3.6.1",
-				"markdown-it": "^14.1.1",
+				"markdown-it": "^14.1.0",
 				"minimist": "^1.2.8",
-				"moo": "0.5.2",
+				"moo": "^0.5.2",
 				"node-retrieve-globals": "^6.0.1",
 				"nunjucks": "^3.2.4",
-				"picomatch": "^4.0.3",
+				"picomatch": "^4.0.2",
 				"please-upgrade-node": "^3.2.0",
-				"posthtml": "^0.16.7",
+				"posthtml": "^0.16.6",
 				"posthtml-match-helper": "^2.0.3",
-				"semver": "^7.7.4",
+				"semver": "^7.7.2",
-				"slugify": "^1.6.8",
+				"slugify": "^1.6.6",
-				"tinyglobby": "^0.2.15"
+				"tinyglobby": "^0.2.14"
 			},
 			"bin": {
 				"eleventy": "cmd.cjs"
@@ -256,14 +256,14 @@
 			}
 		},
 		"node_modules/@11ty/recursive-copy": {
-			"version": "4.0.4",
+			"version": "4.0.3",
-			"resolved": "https://registry.npmjs.org/@11ty/recursive-copy/-/recursive-copy-4.0.4.tgz",
+			"resolved": "https://registry.npmjs.org/@11ty/recursive-copy/-/recursive-copy-4.0.3.tgz",
-			"integrity": "sha512-oI7m8pa7/IAU/3lqRU9vjBbs20iKFo7x+1K9kT3aVira6scc1X9MjBdgLCHzLJeJ7iB6wydioA+kr9/qPnvmlQ==",
+			"integrity": "sha512-SX48BTLEGX8T/OsKWORsHAAeiDsbFl79Oa/0Wg/mv/d27b7trCVZs7fMHvpSgDvZz/fZqx5rDk8+nx5oyT7xBw==",
 			"license": "ISC",
 			"dependencies": {
 				"errno": "^1.0.0",
 				"junk": "^3.1.0",
-				"minimatch": "^3.1.5",
+				"maximatch": "^0.1.0",
 				"slash": "^3.0.0"
 			},
 			"engines": {
@@ -752,6 +752,45 @@
 				"sprintf-js": "~1.0.2"
 			}
 		},
+		"node_modules/array-differ": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
+			"integrity": "sha512-LeZY+DZDRnvP7eMuQ6LHfCzUGxAAIViUBliK24P3hWXL6y4SortgR6Nim6xrkfSLlmH0+k+9NYNwVC2s53ZrYQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/array-union": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+			"integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+			"license": "MIT",
+			"dependencies": {
+				"array-uniq": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/array-uniq": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+			"integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/arrify": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+			"integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/asap": {
 			"version": "2.0.6",
 			"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
@@ -830,9 +869,9 @@
 			"license": "MIT"
 		},
 		"node_modules/brace-expansion": {
-			"version": "1.1.14",
+			"version": "1.1.12",
-			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-			"integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==",
+			"integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
 			"license": "MIT",
 			"dependencies": {
 				"balanced-match": "^1.0.0",
@@ -1294,9 +1333,9 @@
 			}
 		},
 		"node_modules/immutable": {
-			"version": "5.1.5",
+			"version": "5.1.4",
-			"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.5.tgz",
+			"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz",
-			"integrity": "sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==",
+			"integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==",
 			"license": "MIT"
 		},
 		"node_modules/inherits": {
@@ -1401,9 +1440,9 @@
 			}
 		},
 		"node_modules/jquery": {
-			"version": "4.0.0",
+			"version": "3.7.1",
-			"resolved": "https://registry.npmjs.org/jquery/-/jquery-4.0.0.tgz",
+			"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
-			"integrity": "sha512-TXCHVR3Lb6TZdtw1l3RTLf8RBWVGexdxL6AC8/e0xZKEpBflBsjh9/8LXw+dkNFuOyW9B7iB3O1sP7hS0Kiacg==",
+			"integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
 			"license": "MIT"
 		},
 		"node_modules/js-yaml": {
@@ -1454,9 +1493,9 @@
 			}
 		},
 		"node_modules/liquidjs": {
-			"version": "10.25.5",
+			"version": "10.24.0",
-			"resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.25.5.tgz",
+			"resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.24.0.tgz",
-			"integrity": "sha512-GKiKeZjJDdVoQAu+S9rzkYsYnYhcep5W3WwZXgb5f+yq484P/k9JqamBbGYu+LBEixcUAXZr2jogdAIjB3ki1w==",
+			"integrity": "sha512-TAUNAdgwaAXjjcUFuYVJm9kOVH7zc0mTKxsG9t9Lu4qdWjB2BEblyVIYpjWcmJLMGgiYqnGNJjpNMHx0gp/46A==",
 			"license": "MIT",
 			"dependencies": {
 				"commander": "^10.0.0"
@@ -1523,6 +1562,21 @@
 				"url": "https://github.com/fb55/entities?sponsor=1"
 			}
 		},
+		"node_modules/maximatch": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz",
+			"integrity": "sha512-9ORVtDUFk4u/NFfo0vG/ND/z7UQCVZBL539YW0+U1I7H1BkZwizcPx5foFv7LCPcBnm2U6RjFnQOsIvN4/Vm2A==",
+			"license": "MIT",
+			"dependencies": {
+				"array-differ": "^1.0.0",
+				"array-union": "^1.0.1",
+				"arrify": "^1.0.0",
+				"minimatch": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/mdn-data": {
 			"version": "2.0.30",
 			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
@@ -1796,10 +1850,10 @@
 			}
 		},
 		"node_modules/posthtml": {
-			"version": "0.16.7",
+			"version": "0.16.6",
-			"resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.7.tgz",
+			"resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.6.tgz",
-			"integrity": "sha512-7Hc+IvlQ7hlaIfQFZnxlRl0jnpWq2qwibORBhQYIb0QbNtuicc5ZxvKkVT71HJ4Py1wSZ/3VR1r8LfkCtoCzhw==",
+			"integrity": "sha512-JcEmHlyLK/o0uGAlj65vgg+7LIms0xKXe60lcDOTU7oVX/3LuEuLwrQpW3VJ7de5TaFKiW4kWkaIpJL42FEgxQ==",
-			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"posthtml-parser": "^0.11.0",
 				"posthtml-render": "^3.0.0"
@@ -1931,13 +1985,13 @@
 			}
 		},
 		"node_modules/sass": {
-			"version": "1.99.0",
+			"version": "1.93.2",
-			"resolved": "https://registry.npmjs.org/sass/-/sass-1.99.0.tgz",
+			"resolved": "https://registry.npmjs.org/sass/-/sass-1.93.2.tgz",
-			"integrity": "sha512-kgW13M54DUB7IsIRM5LvJkNlpH+WhMpooUcaWGFARkF1Tc82v9mIWkCbCYf+MBvpIUBSeSOTilpZjEPr2VYE6Q==",
+			"integrity": "sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==",
 			"license": "MIT",
 			"dependencies": {
 				"chokidar": "^4.0.0",
-				"immutable": "^5.1.5",
+				"immutable": "^5.0.2",
 				"source-map-js": ">=0.6.2 <2.0.0"
 			},
 			"bin": {
@@ -2050,10 +2104,9 @@
 			}
 		},
 		"node_modules/slugify": {
-			"version": "1.6.9",
+			"version": "1.6.6",
-			"resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.9.tgz",
+			"resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.6.tgz",
-			"integrity": "sha512-vZ7rfeehZui7wQs438JXBckYLkIIdfHOXsaVEUMyS5fHo1483l1bMdo0EDSWYclY0yZKFOipDy4KHuKs6ssvdg==",
+			"integrity": "sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==",
-			"license": "MIT",
 			"engines": {
 				"node": ">=8.0.0"
 			}
@@ -2138,6 +2191,7 @@
 			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
 			"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
 			"license": "MIT",
+			"peer": true,
 			"engines": {
 				"node": ">=12"
 			},

package.json

@@ -37,11 +37,11 @@
 		"normalize.css": "^8.0.1"
 	},
 	"dependencies": {
-		"@11ty/eleventy": "^3.1.5",
+		"@11ty/eleventy": "^3.1.2",
 		"@11ty/eleventy-plugin-webc": "^0.11.2",
 		"bootstrap-icons": "^1.13.1",
 		"hippie-script": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git",
-		"jquery": "^4.0.0",
+		"jquery": "^3.7.1",
-		"sass": "^1.99.0"
+		"sass": "^1.93.0"
 	}
 }

source/code/game.js

@@ -1,313 +0,0 @@
-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

@@ -1,5 +1,3 @@
-/* jshint strict: false */
-
 // TODO: Inhalte angleichen nach Zusammenfassung von app.js und function.js.
 // Benennung und Beschreibungen verbessern.
 
@@ -71,7 +69,7 @@ function HippieFade(toggleElement, initState) {
 	const fragment = document.createDocumentFragment();
 	const overlay = document.createElement('div');
 
-	overlay.id = 'mouse_overlay';
+	overlay.id = 'mouse-overlay';
 
 	if (initState) {
 		overlay.classList.add('active');
@@ -192,13 +190,13 @@ function composeMail(tag, name, prov, suffix, text, topic) {
 		el.innerHTML = elContent + text;
 		el.setAttribute('href', 'mailto:' + mailString + topic);
 	} else {
-		const elements = document.getElementsByClassName(tag.slice(1));
+		const els = document.getElementsByClassName(tag.slice(1));
 
-		for (const element of elements) {
+		for (let el of els) {
-			const content = element.innerHTML;
+			const elContent = el.innerHTML;
 
-			element.innerHTML = content + text;
+			el.innerHTML = elContent + text;
-			element.setAttribute('href', 'mailto:' + mailString + topic);
+			el.setAttribute('href', 'mailto:' + mailString + topic);
 		}
 	}
 }
@@ -394,6 +392,20 @@ function centerElementUnderCursor(event, element) {
 	element.style.top = `${y}px`;
 }
 
+function setAttributesAccordingToPosition(element, position, attributes) {
+	'use strict';
+
+	element.classList.remove(...Object.values(attributes).map(pos => pos.className));
+	Object.keys(attributes[position].styles).forEach(key => {
+		element.style[key] = '';
+	});
+
+	element.classList.add(attributes[position].className);
+	Object.entries(attributes[position].styles).forEach(([key, value]) => {
+		element.style[key] = value;
+	});
+}
+
 /**
  * Gibt eine Zahl zwischen <min> und <max> aus.
  * Die Werte <min> und <max> sind dabei mit eingeschlossen.
@@ -412,10 +424,10 @@ function randomIntFrom(min, max, pos = 0) {
 	return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos;
 }
 
-function randomFloatFrom(min, max, dec = 1) {
+function randomFloatFrom(min, max, dec = 0) {
 	dec = Math.pow(10, dec);
 
-	return Math.round((Math.random() * (max - min) + min) * dec) / dec;
+	return Math.round((Math.random() * (max - min + 1) + min) * dec) / dec;
 }
 
 /**
@@ -528,139 +540,11 @@ 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
 const delay = ms => new Promise(res => setTimeout(res, ms));
 
-async function readJsonFile(file) {
-	return new Promise((resolve, reject) => {
-		const reader = new FileReader();
-
-		reader.readAsText(file);
-		reader.onload = function () {
-			try {
-				resolve(JSON.parse(reader.result));
-			} catch (error) {
-				reject(error);
-			}
-		};
-		reader.onerror = function () {
-			reject(reader.error);
-		};
-	});
-}
-
-async function loadJson(filePath) {
-	try {
-		const response = await fetch(filePath);
-
-		if (!response.ok) throw new Error(`Failed to load file: ${response.status}`);
-
-		return await response.json();
-	} catch (error) {
-		console.error('Error loading file:', error);
-		throw error;
-	}
-}
-
-class RandomPixelPlaceholder {
-	constructor(parent, options = {}) {
-		this.container = parent;
-		this.width = options.width || 400;
-		this.height = options.height || 300;
-		this.colors = options.colors || ['#000000', '#ffffff'];
-		this.filter = options.filter || '';
-		this.type = options.type || 'canvas'; // 'canvas' or 'img'
-		this.element = this.createElement();
-
-		this.addContextToElement();
-	}
-
-	createElement() {
-		if (this.type === 'img') {
-			const img = document.createElement('img');
-			img.style.filter = this.filter;
-
-			this.container.appendChild(img);
-
-			return img;
-		} else {
-			const canvas = document.createElement('canvas');
-			canvas.width = this.width;
-			canvas.height = this.height;
-			canvas.style.filter = this.filter;
-
-			this.container.appendChild(canvas);
-
-			return canvas;
-		}
-	}
-
-	addContextToElement() {
-		if (this.type === 'img') {
-			// Create intermediate canvas
-			const canvas = document.createElement('canvas');
-			canvas.width = this.width;
-			canvas.height = this.height;
-
-			this.fillWithRandomPixels(canvas);
-
-			// Convert canvas to image data URL and set as img src
-			this.element.src = canvas.toDataURL();
-			this.element.width = this.width;
-			this.element.height = this.height;
-		} else {
-			this.fillWithRandomPixels(this.element);
-		}
-	}
-
-	fillWithRandomPixels(canvas) {
-		const ctx = canvas.getContext('2d');
-		const imageData = ctx.createImageData(this.width, this.height);
-		const data = imageData.data;
-
-		for (let i = 0; i < data.length; i += 4) {
-			const color = this.getRandomColor();
-			const rgb = this.hexToRgb(color);
-
-			data[i] = rgb.r;     // Red
-			data[i + 1] = rgb.g; // Green
-			data[i + 2] = rgb.b; // Blue
-			data[i + 3] = 255;   // Alpha
-		}
-
-		ctx.putImageData(imageData, 0, 0);
-	}
-
-	getRandomColor() {
-		return this.colors[Math.floor(Math.random() * this.colors.length)];
-	}
-
-	hexToRgb(hex) {
-		const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-
-		return result ? {
-			r: parseInt(result[1], 16),
-			g: parseInt(result[2], 16),
-			b: parseInt(result[3], 16)
-		} : {r: 0, g: 0, b: 0};
-	}
-}
-
-function sample(array) {
-	return array[Math.floor(Math.random() * array.length)];
-}
-
 // CONCEPTS
 
 // NOTE: Benutzt private Zuweisungen
@@ -719,6 +603,91 @@ 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&auml;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/code/windows.js

@@ -3,10 +3,9 @@ class HippieTaskBar {
 		this.element = element;
 		this.placeholder = placeholder;
 		this.date = null;
-		this.time = null;
 		this.isDragging = false;
 		this.barSize = '';
-		// TODO: Ergänzen und nicht ersetzen
+		// TODO: Erweitern auf allgemeine Möglichkeiten und dann aus JSON-Datei laden
 		this.options = options || {
 			direction: 0,
 			position: 'bottom',
@@ -14,8 +13,7 @@ class HippieTaskBar {
 				year: 'numeric',
 				month: '2-digit',
 				day: '2-digit'
-			},
+			}
-			time: {hour: '2-digit', minute: '2-digit'}
 		};
 
 		this.init();
@@ -27,20 +25,11 @@ class HippieTaskBar {
 		document.addEventListener('pointermove', this.onMove.bind(this));
 		document.addEventListener('pointerup', this.onUp.bind(this));
 
-		const clock = this.element.querySelector('.clock');
 		const dateElement = document.createElement('span');
-		const timeElement = document.createElement('span');
-		const br = document.createElement('br');
 
 		dateElement.id = 'date';
-		timeElement.id = 'time';
+		this.element.querySelector('.clock').appendChild(dateElement);
 		this.date = new DateDisplay(dateElement, this.options.date);
-		this.time = new TimeDisplay(timeElement, this.options.time);
-
-		// TODO: Reihenfolge anpassbar machen
-		clock.appendChild(timeElement);
-		clock.appendChild(br);
-		clock.appendChild(dateElement);
 
 		this.setOptions(this.options.position);
 	}
@@ -122,7 +111,7 @@ class HippieTaskBar {
 				}
 			};
 
-			this.setAttributesAccordingToPosition(this.placeholder, this.options.position, attributes);
+			setAttributesAccordingToPosition(this.placeholder, this.options.position, attributes);
 			centerElementUnderCursor(event, this.placeholder);
 		}
 	}
@@ -153,18 +142,6 @@ class HippieTaskBar {
 		this.date.changeFormat(this.options.date, this.options.direction);
 	}
 
-	setAttributesAccordingToPosition(element, position, attributes) {
-		element.classList.remove(...Object.values(attributes).map(pos => pos.className));
-		Object.keys(attributes[position].styles).forEach(key => {
-			element.style[key] = '';
-		});
-
-		element.classList.add(attributes[position].className);
-		Object.entries(attributes[position].styles).forEach(([key, value]) => {
-			element.style[key] = value;
-		});
-	}
-
 	setOptions(position) {
 		const attributes = {
 			top: {
@@ -205,7 +182,7 @@ class HippieTaskBar {
 			}
 		};
 
-		this.setAttributesAccordingToPosition(this.element, position, attributes);
+		setAttributesAccordingToPosition(this.element, position, attributes);
 
 		switch (position) {
 			case 'right':

source/data/start.json

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

source/data/windows.json

@@ -1,13 +0,0 @@
-{
-	"taskbar": {
-		"position": "top",
-		"color": "white",
-		"hover": {
-			"active": true,
-			"color": "#52bed1"
-		}
-	},
-	"window": {
-		"name": "Custom"
-	}
-}

source/screens/demo/basics.liquid

@@ -4,7 +4,7 @@ tags:
 - demoIndex
 order: 2
 ---
-{% layout 'hippie-view/page.liquid' %}
+{% layout 'hippie/page.liquid' %}
 
 {% block title %}Grundlagen{% endblock %}
 
@@ -208,7 +208,7 @@ order: 2
 		<figure class="js_pop">
 			<figcaption>Fahne</figcaption>
 			{% comment %}// TODO: Durch Platzhalter ersetzten und Prozentangaben ermöglichen{% endcomment %}
-			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
 				 y="0px" width="10%" height="10%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
 				<desc>Flag</desc>
 				<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
@@ -243,7 +243,7 @@ order: 2
 	<article>
 		<h1 id="textlevel">Textebene</h1>
 		<h2>Verweise</h2>
-		<p id="links">Ein wesentlicher Bestandteil von Hypertext sind <a href="">Verweise</a>
+		<p>Ein wesentlicher Bestandteil von Hypertext sind <a href="">Verweise</a>
 			<code>&lt;a&gt;</code>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen
 			und externen Verweisen unterschieden werden.
 			<a class="a_internal js_pop" href="#links">Interne Verweise</a>
@@ -561,7 +561,7 @@ order: 2
 		<h2>Änderungen</h2>
 		<p>Werden Texte geändert, können solche Änderungen sichtbar gemacht werden. Somit können sie besser
 			nachvollzogen werden.<br>Zum Beispiel eine Ergänzung von Inhalt.</p>
-		<aside class="left">
+		<aside>
 			<ins>Dies ist auch wichtig.</ins>
 		</aside>
 		<p>Der Inhalt wird dann mit
@@ -580,7 +580,7 @@ order: 2
 	</article>
 	<article>
 		<h1 id="embedded">Eingebundene Inhalte</h1>
-		{% render 'hippie-view/partials/placeholder-flag.liquid', type: 'img', width: '128', desc: 'Fahne von Interaktionsweise' %}
+		{% render 'hippie/partials/placeholder-flag.liquid', type: 'img', width: '128', desc: 'Fahne von Interaktionsweise' %}
 		<p>Dies ist ein Bild. Es wird mit dem Element
 			<code>&lt;img&gt;</code>
 			eingebunden. Solch ein Bild hat üblicherweise die Attribute
@@ -599,7 +599,7 @@ order: 2
 			und
 			<code>&lt;picture&gt;</code>
 			in Kombination verwendet werden.</p>
-		{% render 'hippie-view/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '128', desc: 'Fahne von Interaktionsweise' %}
+		{% render 'hippie/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '128', desc: 'Fahne von Interaktionsweise' %}
 	</article>
 	<article>
 		<h1>Tabellen</h1>
@@ -801,7 +801,7 @@ order: 2
 			<code>&lt;fieldset&gt;</code>
 			realisiert.</p>
 		<fieldset>
-			<div class="dis_grid grid_column_2">
+			<div class="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="dis_grid grid_column_2">
+			<div class="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="dis_grid grid_column_2">
+			<div class="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="dis_grid grid_column_2">
+				<div class="grid grid_column_2">
 					<label class="">Farbauswahl<br>
 						<code>&lt;input[type="color"]&gt;</code>
 					</label>
@@ -948,7 +948,7 @@ order: 2
 		<div class="box_placeholder"></div>
 		<hr class="hidden"/>
 		<div class="box_placeholder">
-			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
 				 y="0px" width="100%" height="100%">
 				<line x1='0' y1='0' x2='100%' y2='100%' stroke='#000' stroke-width='.5'/>
 				<line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/>

source/screens/demo/components.liquid

@@ -4,7 +4,7 @@ tags:
 - demoIndex
 order: 3
 ---
-{% layout 'hippie-view/page.liquid' %}
+{% layout 'hippie/page.liquid' %}
 
 {% block title %}Komponenten{% endblock %}
 
@@ -65,7 +65,7 @@ order: 3
 		<p>Fließt um andere Inhalte. Klassen zur Positionierung und Kombination mit <code>.bside</code>.</p>
 		<pre class="pre_code"><code>aside.right+div.bside</code></pre>
 		<section>
-			<aside class="right">Seitenbereich, rechts ausgerichtet.</aside>
+			<aside class="right">Seitenbereich, recht ausgerichtet.</aside>
 			<div class="bside">Hauptbereich</div>
 		</section>
 		<h2>&lt;h*&gt;</h2>
@@ -94,7 +94,7 @@ order: 3
 		<p>Bekommt üblicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.</p>
 		<footer>Fußbereich</footer>
 		<div style="position:relative;height:256px;background-color:#b7e0f0;">
-			{% render 'hippie-view/partials/footer-pinned.liquid' %}
+			{% render 'hippie/partials/footer-pinned.liquid' %}
 		</div>
 	</article>
 	<article>
@@ -190,11 +190,11 @@ order: 3
 		<pre>// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th</pre>
 		<h2>&lt;table&gt;</h2>
 		<h4>Varianten</h4>
-		<pre class="pre_code"><code>table.width_full.fix>(thead>tr>th.pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.pre+td*3</code></pre>
+		<pre class="pre_code"><code>table.width_full.fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre>
 		<table class="width_full fix">
 			<thead>
 			<tr>
-				<th class="pre" scope="col"></th>
+				<th class="cell_pre" scope="col"></th>
 				<th scope="col">Kopfzeile</th>
 				<th scope="col">A</th>
 				<th scope="col">B</th>
@@ -202,27 +202,27 @@ order: 3
 			</thead>
 			<tbody>
 			<tr>
-				<td class="pre">Vorspalte</td>
+				<td class="cell_pre">Vorspalte</td>
 				<td>Eine</td>
 				<td></td>
 				<td></td>
 			</tr>
 			<tr>
-				<td class="pre">1</td>
+				<td class="cell_pre">1</td>
 				<td></td>
 				<td>erweiterte</td>
 				<td></td>
 			</tr>
 			<tr>
-				<td class="pre">2</td>
+				<td class="cell_pre">2</td>
 				<td></td>
 				<td></td>
 				<td>Tabelle</td>
 			</tr>
 			</tbody>
 		</table>
-		<pre class="pre_code"><code>table.width_full.striped.fix.free>tr>td*3</code></pre>
+		<pre class="pre_code"><code>table.width_full.stripe.fix.free>tr>td*3</code></pre>
-		<table class="width_full striped fix free">
+		<table class="width_full stripe fix free">
 			<tr>
 				<td>Tabelle</td>
 				<td></td>
@@ -244,7 +244,7 @@ order: 3
 				<td>Streifen</td>
 			</tr>
 		</table>
-		<pre class="pre_code"><code>table>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
+		<pre class="pre_code"><code>table.width_full.fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
 		<table>
 			<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
 			<thead>
@@ -278,27 +278,6 @@ order: 3
 			</tr>
 			</tfoot>
 		</table>
-		<pre class="pre_code"><code>table.width_full.fix>tr>td+td.ellipsis+td[style="width: 50%"]</code></pre>
-		<table class="width_full fix">
-			<tr>
-				<td>Index</td>
-				<td class="ellipsis">Zelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.</td>
-				<td style="width: 50%">Zelle mit Angabe der Breite.</td>
-			</tr>
-		</table>
-		<pre class="pre_code"><code>table.grid>(tr>td+td.ellipsis+td)*2</code></pre>
-		<table class="grid">
-			<tr>
-				<td>Index</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>
 	<article>
 		<h1 id="forms">Formulare</h1>

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

@@ -1,11 +1,12 @@
 ---
 title: 10print
 tags:
-- demoArt
+- demoExample
 ---
-{% layout 'hippie-view/simple.liquid' %}
+{% layout 'hippie/simple.liquid' %}
 
-{% block style %}
+{% block head %}
+{{ block.super -}}
 <style>
 	canvas {
 		display: block;
@@ -19,6 +20,7 @@ tags:
 
 {% block script %}
 <script>
+	// Page script
 	const canvas = document.getElementById('pattern');
 	const ctx = canvas.getContext('2d');
 

source/screens/demo/examples/blog.liquid

@@ -3,7 +3,7 @@ title: Blog
 tags:
 - demoExample
 ---
-{% layout 'hippie-view/simple.liquid' %}
+{% layout 'hippie/simple.liquid' %}
 
 {% block body %}
 <div class="sec_main_center">

source/screens/demo/examples/card.liquid

@@ -4,12 +4,12 @@ tags:
 - demoExample
 ---
 {% assign pageClass = "html_card" %}
-{% layout 'hippie-view/simple.liquid' %}
+{% layout 'hippie/simple.liquid' %}
 
 {% block body %}
 <div class="card_bkg">
 	<div id="dither"></div>
-	{% render 'hippie-view/partials/placeholder-flag.liquid', type: '', id: 'flag' %}
+	{% render 'hippie/partials/placeholder-flag.liquid', type: '', id: 'flag' %}
 	{% comment %}<img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/>{% endcomment %}
 </div>
 <div class="card_box">

source/screens/demo/examples/clock.liquid

@@ -4,7 +4,7 @@ tags:
 - demoExample
 ---
 {% assign bodyClass = 'body_clock' -%}
-{% layout 'hippie-view/simple.liquid' %}
+{% layout 'hippie/simple.liquid' %}
 
 {% block body %}
 <header class="io pos_fix pin_top pin_right pin_left">
@@ -27,8 +27,6 @@ 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),
@@ -37,6 +35,8 @@ tags:
 				overlay: false
 			};
 			this.options = {...this.defaults, ...options};
+			this.element = element;
+			this.date = date;
 			this.values = this.getTime();
 			this.parts = [];
 			this.shapes = [];
@@ -61,7 +61,6 @@ tags:
 			this.#resize();
 			window.addEventListener('resize', () => this.#resize());
 
-			// console.debug(this);
 			if (this.options.debug) {
 				console.group('Clock');
 				console.info('\nOptions:', this.options, '\n\n');
@@ -78,16 +77,13 @@ tags:
 					part.element.style.width = this.options.size + 'px';
 				}
 
-				// part.element.width = part.element.offsetWidth;
+				part.element.width = part.element.offsetWidth;
-				// part.element.height = part.element.offsetHeight;
+				part.element.height = part.element.offsetHeight;
-				part.element.width = this.options.size;
-				part.element.height = this.options.size;
 
 				this.draw();
 			});
 		}
 
-		// TODO: Zuweisung von shapes zu parts anpassen
 		draw() {
 			// TODO: Nur geänderte Teile löschen
 			this.parts.forEach(part => {
@@ -307,6 +303,7 @@ tags:
 		}
 
 		#createContext(names) {
+			let parts = [];
 			const wrap = document.createElement('div');
 
 			wrap.style.position = 'relative';
@@ -447,7 +444,6 @@ tags:
 	clock.draw();
 
 	// TODO: Alternative mit requestAnimationFrame()
-	// TODO: Möglichkeit für Start/Stop wie bei TimeDisplay
 	setInterval(() => {
 		clock.update();
 	}, 1000);

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

@@ -4,7 +4,9 @@ tags:
 - demoExample
 - index
 ---
-{% layout 'hippie-view/simple.liquid' %}
+{% layout 'hippie/simple.liquid' %}
+
+{% block title %}{{ title }}{% endblock %}
 
 {% block body %}
 <div class="sec_main_center">

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

@@ -4,7 +4,7 @@ tags:
 - game
 ---
 {% assign bodyClass = 'body_intro' -%}
-{% layout 'hippie-view/app.liquid' %}
+{% layout 'hippie/app.liquid' %}
 
 {% block body %}
 <div id="loader" class="step op_show">
@@ -39,7 +39,7 @@ tags:
 	<p>This needs to be seen and acknowledged.<br>So an interaction must be made to continue.</p>
 </div>
 <div id="idle" class="step op_hide">
-	<div class="mouse_overlay"></div>
+	<div class="mouse-overlay"></div>
 	<div class="hello">Hello World!</div>
 	<p class="hello">Only left mouse click or any key</p>
 </div>

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

@@ -0,0 +1,29 @@
+---
+title: Menu
+tags:
+- game
+---
+{% assign bodyClass = 'body_game' -%}
+{% layout 'hippie/simple.liquid' %}
+
+{% block body %}
+<div class="sec_main_center">
+	<nav role="doc-toc">
+		<hgroup>
+			<h1>Game - TFW</h1>
+			<p>Additional name</p>
+		</hgroup>
+		<ul class="link">
+			<li><a href="#new">Neues Spiel</a></li>
+			<li><a href="#continue">Spiel fortsetzen</a></li>
+			<li><a href="#options">Einstellungen</a></li>
+			<li><a href="#quit">Spiel beenden</a></li>
+		</ul>
+	</nav>
+</div>
+<footer>
+	{% brand 'brand', 'last' %}
+	<p>Marke</p>
+	{% endbrand %}
+</footer>
+{% endblock %}

source/screens/demo/examples/hello.md

@@ -1,6 +1,6 @@
 ---
 title: "Hello World"
-layout: hippie-view/world.liquid
+layout: hippie/world.liquid
 tags:
 - demoExample
 ---

source/screens/demo/examples/portal.liquid

@@ -14,16 +14,16 @@ links:
   img: '/art/bullet.gif'
 ---
 {% assign bodyClass = "body_portal" %}
-{% layout 'hippie-view/simple.liquid' %}
+{% layout 'hippie/simple.liquid' %}
 
 {% block body %}
 <div class="portal">
-	{% render 'hippie-view/partials/gate-list',
+	{% render 'hippie/partials/gate-list',
 		name: 'Tor mit Symbol und Liste',
 		url: '../demo',
 		image: image,
 		links: links
 	%}
-	{% render 'hippie-view/partials/gate-simple', name: 'Tor', url: '../demo' %}
+	{% render 'hippie/partials/gate-simple', name: 'Tor', url: '../demo' %}
 </div>
 {% endblock %}

source/screens/demo/examples/songbook.liquid

@@ -3,7 +3,7 @@ title: Songbook
 tags:
 - demoExample
 ---
-{% layout 'hippie-view/simple.liquid' %}
+{% layout 'hippie/simple.liquid' %}
 
 {% block body %}
 <div class="sec_main_center">
@@ -31,7 +31,7 @@ tags:
 		richten.</p>
 	<hr class="double dotted">
 	{%- for piece in collections.song -%}
-		{% render 'hippie-view/partials/song.liquid', index: forloop.index0, data: piece.data, content: piece.content %}
+		{% render 'hippie/partials/song.liquid', index: forloop.index0, data: piece.data, content: piece.content %}
 	{%- endfor -%}
 	<hr/>
 	<address>{% text hippie.placeholders.name %}</address>

source/screens/demo/examples/start.liquid

@@ -0,0 +1,82 @@
+---
+title: Start
+tags:
+- demoExample
+---
+{% assign pageId = page.fileSlug -%}
+{% assign bodyClass = 'body_start' -%}
+{% layout 'hippie/simple.liquid' %}
+
+{% block body %}
+<main>
+	<form id="www-search" class="flex inline" 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>
+				<ul>
+					<li>
+						<a href=""><img src="/art/bullet.gif" width="16" height="16"/>Link</a>
+					</li>
+				</ul>
+			</section>
+		</article>
+		<article>
+			<section>
+				<h2><a href="">Name</a></h2>
+			</section>
+		</article>
+	</div>
+</main>
+{% endblock %}
+
+{% block script %}
+<script>
+	// Page script
+	// NOTE: https://duckduckgo.com/duckduckgo-help-pages/settings/params
+	const defaultOptions = {
+		kl: 'de-de',
+		kp: '-2',
+		kz: '-1',
+		// kae: 't',
+		k1: '-1'
+	};
+	let options = Object.assign({}, defaultOptions);
+
+	function setOptions(jsonOptions) {
+		if (!jsonOptions || typeof jsonOptions !== 'object') return;
+
+		options = Object.assign({}, options, jsonOptions);
+	}
+
+	function buildSearchUrl(query) {
+		const base = 'https://duckduckgo.com/';
+		const params = new URLSearchParams({q: query});
+
+		for (const [k, v] of Object.entries(options)) {
+			if (v === undefined || v === null || v === '') continue;
+
+			params.set(k, String(v));
+		}
+
+		return base + '?' + params.toString();
+	}
+
+	document.getElementById('www-search').addEventListener('submit', function (e) {
+		e.preventDefault();
+		const query = document.getElementById('qrySearch').value.trim();
+
+		if (!query) return;
+
+		const url = buildSearchUrl(query);
+
+		window.open(url, '_blank', 'noopener');
+	});
+
+	// Example of setting options programmatically:
+	// setOptions({ kl: 'de-de', kp: '2', iar: 'images' });
+</script>
+{% endblock %}

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

@@ -4,7 +4,7 @@ tags:
 - ui
 ---
 {% assign bodyClass = 'body_cli' -%}
-{% layout 'hippie-view/app.liquid' %}
+{% layout 'hippie/app.liquid' %}
 
 {% block body %}
 <div id="cli">

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

@@ -3,7 +3,7 @@ title: Drag
 tags:
 - ui
 ---
-{% layout 'hippie-view/app.liquid' %}
+{% layout 'hippie/app.liquid' %}
 
 {% block body %}
 <header class="io pos_fix pin_top pin_right pin_left">
@@ -13,9 +13,9 @@ tags:
 <div>
 	<div id="test">
 		<div class="body_frame">
-			{% render 'hippie-view/partials/frame-header.liquid' %}
+			{% render 'hippie/partials/frame-header.liquid' %}
 			<main></main>
-			{% render 'hippie-view/partials/frame-mode.liquid' %}
+			{% render 'hippie/partials/frame-mode.liquid' %}
 		</div>
 	</div>
 </div>

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

@@ -4,10 +4,10 @@ tags:
 - ui
 ---
 {% assign bodyClass = 'body_frame' -%}
-{% layout 'hippie-view/app.liquid' %}
+{% layout 'hippie/app.liquid' %}
 
 {% block body %}
-{% render 'hippie-view/partials/frame-header.liquid' %}
+{% render 'hippie/partials/frame-header.liquid' %}
 <main class="io">
 	<aside class="io">
 		<nav>
@@ -138,8 +138,8 @@ tags:
 				</tbody>
 			</table>
 		</div>
-		{% render 'hippie-view/partials/frame-status.liquid' %}
+		{% render 'hippie/partials/frame-status.liquid' %}
 	</section>
 </main>
-{% render 'hippie-view/partials/frame-mode.liquid' %}
+{% render 'hippie/partials/frame-mode.liquid' %}
 {% endblock %}

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

@@ -4,10 +4,10 @@ tags:
 - ui
 ---
 {% assign bodyClass = 'body_frame' -%}
-{% layout 'hippie-view/app.liquid' %}
+{% layout 'hippie/app.liquid' %}
 
 {% block body %}
-{% render 'hippie-view/partials/frame-header.liquid' %}
+{% render 'hippie/partials/frame-header.liquid' %}
 <header class="io">
 	<h1>Formulare</h1>
 	<button data-action="add">Hinzufügen</button>

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

@@ -4,15 +4,15 @@ tags:
 - ui
 ---
 {% assign bodyClass = 'body_frame' -%}
-{% layout 'hippie-view/app.liquid' %}
+{% layout 'hippie/app.liquid' %}
 
 {% block body %}
-{% render 'hippie-view/partials/frame-header.liquid' %}
+{% render 'hippie/partials/frame-header.liquid' %}
 <main class="io">
 	<section>
 		<header class="io">
 			<nav>
-				<div class="group_nav">
+				<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>
@@ -27,10 +27,10 @@ tags:
 			<div>B</div>
 			<div>C</div>
 		</div>
-		{% render 'hippie-view/partials/frame-status.liquid' %}
+		{% render 'hippie/partials/frame-status.liquid' %}
 	</section>
 </main>
-{% render 'hippie-view/partials/frame-mode.liquid' %}
+{% render 'hippie/partials/frame-mode.liquid' %}
 {% endblock %}
 
 {%- block script %}

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

@@ -4,7 +4,7 @@ tags:
 - demoExample
 - index
 ---
-{% layout 'hippie-view/simple.liquid' %}
+{% layout 'hippie/simple.liquid' %}
 
 {% block title %}{{ title }}{% endblock %}
 

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

@@ -4,19 +4,19 @@ tags:
 - ui
 ---
 {% assign bodyClass = 'body_frame' -%}
-{% layout 'hippie-view/app.liquid' %}
+{% layout 'hippie/app.liquid' %}
 
 {% block body %}
-{% render 'hippie-view/partials/frame-header.liquid' %}
+{% render 'hippie/partials/frame-header.liquid' %}
 <main class="io">
 	<section>
 		<header class="io">
 			<nav>
-				<div class="group_nav">
+				<div class="group-input">
 					<button id="addEntry" title="Add entry">
 						<i class="bi bi-plus-circle"></i>
 					</button>
-					<div class="wrap_input"><input id="setScroll" type="checkbox"></div>
+					<div class="group-input-wrap"><input id="setScroll" type="checkbox"></div>
 					<label for="setScroll">Scroll to new entry</label>
 				</div>
 			</nav>
@@ -24,8 +24,8 @@ tags:
 				<button id="tglIndex" title="Toggle index column">
 					<i class="bi bi-hash"></i>
 				</button>
-				<div class="group_nav">
+				<div class="group-input">
-					<select id="sltNum" name="position-number" aria-label="numbering">
+					<select id="sltNum" name="position-number">
 						<option value="" selected>None</option>
 						<option value="numeric">123</option>
 						<option value="latin">ABC</option>
@@ -36,25 +36,25 @@ tags:
 				{% comment %}TODO: Auswahl für ziehbares Element hinzufügen{% endcomment %}
 			</nav>
 		</header>
-		<table id="content" class="draggable content horizontal">
+		<table id="content" class="draggable">
 			<thead>
 			<tr>
-				<th scope="col" title="Index">#</th>
+				<th class="min" scope="col" title="Index">#</th>
-				<th scope="col"></th>
+				<th class="min" scope="col"></th>
 				<th scope="col" title="Position">#</th>
 				<th scope="col">Number</th>
 				<th scope="col">Name</th>
-				<th class="max" scope="col">Description</th>
+				<th scope="col">Description</th>
 				<th scope="col">Amount</th>
 				<th scope="col">Unit</th>
 				<th scope="col">Price</th>
 				<th scope="col">Sum</th>
-				<th scope="col"></th>
+				<th class="min" scope="col"></th>
 			</tr>
 			</thead>
 			<tbody id="positions"></tbody>
 		</table>
-		{% render 'hippie-view/partials/frame-status.liquid' %}
+		{% render 'hippie/partials/frame-status.liquid' %}
 	</section>
 </main>
 <template id="rowDefault">
@@ -62,26 +62,25 @@ tags:
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
-				<input class="input_io" name="active" aria-label="active" type="checkbox">
 				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
 			</nav>
 		</td>
 		<td class="pos-num"></td>
-		<td><input class="input_io" name="number" aria-label="number" type="text"></td>
+		<td class="rigid"></td>
-		<td><input class="input_io" name="name" aria-label="name" type="text"></td>
+		<td></td>
 		{% comment %}<td class="ellipsis"></td>{% endcomment %}
 		<td>
-			<textarea class="fit" name="description" cols="64" rows="2" aria-label="description"></textarea>
+			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
 		</td>
-		<td><input class="input_io" name="amount" aria-label="amount" type="number"></td>
+		<td><input class="input_io" name="amount" type="number"></td>
 		<td>
-			<select class="io_select" name="unit" aria-label="unit">
+			<select class="io_select" name="units">
 				<option value="">None</option>
 				<option value="piece">Piece(s)</option>
 				<option value="hour">Hour(s)</option>
 			</select>
 		</td>
-		<td><input class="input_io" name="price" aria-label="price" type="text"></td>
+		<td class="unit"></td>
 		<td class="unit"></td>
 		<td class="io">
 			<nav>
@@ -97,19 +96,19 @@ tags:
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
-				<input class="input_io" name="active" aria-label="active" type="checkbox">
 				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
 			</nav>
 		</td>
 		<td class="pos-num"></td>
 		<td class="rigid"></td>
 		<td></td>
+		{% comment %}<td class="ellipsis"></td>{% endcomment %}
 		<td>
-			<textarea class="fit" name="description" cols="64" rows="2" aria-label="description"></textarea>
+			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
 		</td>
-		<td><input name="amount" aria-label="number" type="number"></td>
+		<td><input name="amount" type="number"></td>
 		<td>
-			<select name="unit" aria-label="unit">
+			<select name="units">
 				<option value="">None</option>
 				<option value="piece">Piece(s)</option>
 				<option value="hour">Hour(s)</option>
@@ -131,44 +130,14 @@ tags:
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
-				<input class="input_io" name="active" aria-label="active" type="checkbox">
 				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
 			</nav>
 		</td>
 		<td class="pos-num"></td>
-		<td colspan="7">
+		<td class="rigid"></td>
-			<textarea class="fit" name="description" cols="64" rows="2" aria-label="description"></textarea>
+		<td colspan="6">
+			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
 		</td>
-		<td class="io">
-			<nav>
-				<button title="Delete"><i class="bi bi-trash"></i></button>
-			</nav>
-		</td>
-	</tr>
-</template>
-<template id="rowGroup">
-	<tr draggable="true" class="header">
-		<th scope="row"></th>
-		<td class="io">
-			<nav>
-				<input class="input_io" name="active" aria-label="active" type="checkbox">
-				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
-				<button name="group" title="Expand"><i class="bi bi-arrows-expand"></i></button>
-			</nav>
-		</td>
-		<td class="pos-num"></td>
-		<td colspan="7">Group</td>
-		<td class="io">
-			<nav>
-				<button title="Delete"><i class="bi bi-trash"></i></button>
-			</nav>
-		</td>
-	</tr>
-	<tr>
-		<th scope="row"></th>
-		<td></td>
-		<td class="pos-num"></td>
-		<td colspan="7">Content</td>
 		<td class="io">
 			<nav>
 				<button title="Event"><i class="bi bi-calendar-event"></i></button>
@@ -177,15 +146,44 @@ tags:
 			</nav>
 		</td>
 	</tr>
-	<tr class="footer">
+</template>
+<template id="rowGroup">
+	<tr draggable="true">
 		<th scope="row"></th>
-		<td></td>
+		<td class="io">
+			<nav>
+				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
+				<button title="Expand"><i class="bi bi-arrows-expand"></i></button>
+			</nav>
+		</td>
 		<td class="pos-num"></td>
-		<td colspan="8">End</td>
+		<td class="rigid"></td>
+		<td></td>
+		{% comment %}<td class="ellipsis"></td>{% endcomment %}
+		<td>
+			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
+		</td>
+		<td><input name="amount" type="number"></td>
+		<td>
+			<select name="units">
+				<option value="">None</option>
+				<option value="piece">Piece(s)</option>
+				<option value="hour">Hour(s)</option>
+			</select>
+		</td>
+		<td class="unit"></td>
+		<td class="unit"></td>
+		<td class="io">
+			<nav>
+				<button title="Event"><i class="bi bi-calendar-event"></i></button>
+				<button title="Note"><i class="bi bi-journal"></i></button>
+				<button title="Delete"><i class="bi bi-trash"></i></button>
+			</nav>
+		</td>
 	</tr>
 </template>
 
-{% render 'hippie-view/partials/frame-mode.liquid' %}
+{% render 'hippie/partials/frame-mode.liquid' %}
 {% endblock %}
 
 {%- block script %}
@@ -228,44 +226,40 @@ tags:
 	tbodyPosition.addEventListener('click', (event) => {
 		const rows = tbodyPosition.querySelectorAll('tr');
 		const rowTarget = event.target.closest('tr');
-		const groupTarget = event.target.closest('[name="group"]');
 
-		if (event.button !== 0) return;
+		if (rowTarget && event.button === 0) {
-
+			for (row of rows) {
-		if (rowTarget) {
-			for (const row of rows) {
 				row.classList.remove('active');
 			}
 
 			rowTarget.classList.add('active');
 		}
-
-		if (groupTarget) {
-			console.log('group');
-			let currentRow = groupTarget.closest('tr').nextElementSibling;
-
-			while (currentRow && !currentRow.classList.contains('footer')) {
-				currentRow.classList.toggle('di_none');
-				currentRow = currentRow.nextElementSibling;
-			}
-		}
 	});
 
 	for (let i = 0; i < 256; i++) {
-		const t = Math.random();
+		const clone = cloneRow();
-		let type = undefined;
+		const tr = clone.querySelector('tr');
+		const th = clone.querySelector('th');
+		const td = clone.querySelectorAll('td');
 
-		if (t < .2) {
+		const j = i % placeholderNames.length;
-			type = 'default';
+		const k = randomIntFrom(0, placeholderContents.length - 1);
-		} else if (t >= .2 && t < .4) {
+		const amount = randomIntFrom(1, 100);
-			type = 'text';
+		const price = randomFloatFrom(1, 10000, 2);
-		} else if (t >= .4 && t < .5) {
+		const sum = amount * price;
-			type = 'group';
-		} else {
-			type = 'article';
-		}
 
-		tbodyPosition.appendChild(cloneRow(i, type));
+		tr.setAttribute('data-id', i);
+		th.textContent = i + 1;
+		td[2].textContent = getRandomFormattedString();
+		td[3].textContent = placeholderNames[j];
+		// td[2].innerHTML = replaceLineBreaks(placeholderContents[k]);
+		td[4].firstElementChild.textContent = placeholderContents[k];
+		td[5].firstElementChild.value = amount;
+		td[5].firstElementChild.style.width = '4em';
+		td[7].textContent = currencyEuro.format(price);
+		td[8].textContent = currencyEuro.format(sum);
+
+		tbodyPosition.appendChild(clone);
 	}
 
 	const selectNum = document.getElementById('sltNum');
@@ -298,7 +292,7 @@ tags:
 		const cells = content.querySelectorAll('th:first-child');
 		const isHidden = cells[0].classList.contains('di_none');
 
-		for (const cell of cells) {
+		for (cell of cells) {
 			if (isHidden) {
 				cell.classList.remove('di_none');
 			} else {
@@ -314,7 +308,7 @@ tags:
 		const clone = cloneRow();
 		const viewportHeight = window.innerHeight;
 		const elementActive = tbodyPosition.querySelector('tr.active');
-		let elementNew;
+		let elementNew = undefined;
 		let elementBound = undefined;
 
 		if (elementActive) {
@@ -383,51 +377,11 @@ tags:
 		console.debug('Drop');
 	});
 
-	function cloneRow(index, type = 'article') {
+	function cloneRow(type = 'default') {
-		const id = 'row' + capitalizeFirstLetter(type);
+		type = 'row' + capitalizeFirstLetter(type);
 
-		const rowFragment = document.getElementById(id).content;
+		const rowFragment = document.getElementById(type).content;
-		const tr = rowFragment.querySelector('tr');
+		// TODO: Datenübergabe ergänzen und direkt hier in die Node aufnehmen
-		const th = rowFragment.querySelector('th');
-		const td = rowFragment.querySelectorAll('td');
-
-		const j = index % placeholderNames.length;
-		const k = randomIntFrom(0, placeholderContents.length - 1);
-		const l = Math.random() > .2;
-		const amount = randomIntFrom(1, 100);
-		const price = randomFloatFrom(1, 10000, 2);
-		const sum = amount * price;
-
-		tr.setAttribute('data-id', index);
-		th.textContent = index + 1;
-		td[0].querySelector('[name="active"]').checked = l;
-		// td[2].innerHTML = replaceLineBreaks(placeholderContents[k]);
-
-		switch (type) {
-			case 'default':
-				td[2].firstElementChild.style.width = '9ch';
-				td[3].firstElementChild.style.width = '6ch';
-				td[4].firstElementChild.textContent = placeholderContents[k];
-				td[5].firstElementChild.value = amount;
-				td[5].firstElementChild.style.width = '4em';
-				td[7].firstElementChild.style.width = '8ch';
-				td[8].textContent = currencyEuro.format(sum);
-				break;
-			case 'article':
-				td[2].textContent = getRandomFormattedString();
-				td[3].textContent = placeholderNames[j];
-				td[4].firstElementChild.textContent = placeholderContents[k];
-				td[5].firstElementChild.value = amount;
-				td[5].firstElementChild.style.width = '4em';
-				td[7].textContent = currencyEuro.format(price);
-				td[8].textContent = currencyEuro.format(sum);
-				break;
-			case 'text':
-				td[2].firstElementChild.textContent = placeholderContents[k];
-				break;
-			default:
-				console.debug('No matching type found.');
-		}
 
 		return document.importNode(rowFragment, true);
 	}
@@ -441,22 +395,5 @@ tags:
 			th.textContent = i + 1;
 		}
 	}
-
-	function toggleGroup(headerRow) {
-		// Get the toggle icon
-		const icon = headerRow.querySelector('.toggle-icon');
-
-		// Get all rows after this header
-		let currentRow = headerRow.nextElementSibling;
-
-		// Toggle visibility of group rows until next header
-		while (currentRow && !currentRow.classList.contains('group-header')) {
-			currentRow.classList.toggle('hidden');
-			currentRow = currentRow.nextElementSibling;
-		}
-
-		// Toggle the icon rotation
-		icon.classList.toggle('collapsed');
-	}
 </script>
 {% endblock %}

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

@@ -0,0 +1,45 @@
+---
+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/screens/demo/examples/ui/tui.liquid

@@ -0,0 +1,13 @@
+---
+title: TUI
+tags:
+- ui
+---
+{% assign bodyClass = 'body_frame' -%}
+{% layout 'hippie/app.liquid' %}
+
+{% block body %}
+{% render 'hippie/partials/frame-header.liquid' %}
+<main class="io"></main>
+{% render 'hippie/partials/frame-mode.liquid' %}
+{% endblock %}

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

@@ -4,7 +4,7 @@ tags:
 - ui
 ---
 {% assign bodyClass = 'body_frame' -%}
-{% layout 'hippie-view/app.liquid' %}
+{% layout 'hippie/app.liquid' %}
 
 {% block body %}
 <div id="task-bar">
@@ -29,7 +29,10 @@ tags:
 			<button><i class="bi bi-mic"></i></button>
 			<button><i class="bi bi-volume-down"></i></button>
 		</nav>
-		<div class="clock"></div>
+		<div class="clock">
+			<span id="time">##:##</span>
+			<br>
+		</div>
 		<nav>
 			<button data-action="notification"><i class="bi bi-bell-fill"></i></button>
 		</nav>
@@ -60,27 +63,20 @@ 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');
 
-	initializeApp();
+	const taskBar = new HippieTaskBar(draggableElement, placeholderElement);
+	const timeFormat = {hour: '2-digit', minute: '2-digit'};
+	const timeDisplay = new TimeDisplay(timeElement, timeFormat);
 
-	async function initializeApp() {
-		try {
-			const config = await loadJson('/json/windows.json');
-			// TODO: Elemente in der Klasse selbst erzeugen
-			const taskBar = new HippieTaskBar(draggableElement, placeholderElement, config.taskbar);
-
-			// TODO: In HippieTaskbar aufnehmen
 	document.getElementById('setPause').addEventListener('click', () => {
-				taskBar.time.pause();
+		timeDisplay.pause();
 		console.info('Pause time');
 	});
 	document.getElementById('setPlay').addEventListener('click', () => {
-				taskBar.time.resume();
+		timeDisplay.resume();
 		console.info('Resume time');
 	});
-		} catch (error) {
-			console.error('Failed to initialize app:', error);
-		}
-	}
 </script>
 {% endblock %}

source/screens/demo/index.liquid

@@ -1,10 +1,10 @@
 ---
-permalink: "{{ hippie.permalink }}"
+permalink: "{{ hippie.demoPath }}"
 title: Index
 ---
 {% assign pageId = page.fileSlug -%}
 {% assign pageClass = 'h_full_view' -%}
-{% layout 'hippie-view/full.liquid' %}
+{% layout 'hippie/full.liquid' %}
 
 {% block body %}
 <div class="wrap">
@@ -12,17 +12,17 @@ title: Index
 		<h2>This is {{ hippie.brand | upcase }}</h2>
 		<p>You can start using it by replacing this file with your own index page.</p>
 		<p>To do this you need to create a file
-			<code>index.liquid|njk</code>
+			<code>/index.njk</code>
 			inside the
-			<i>source/view</i>
+			<i>source/screens</i>
 			folder. You can also create a
 			<code>data.json</code>
 			file inside the
-			<i>source/view</i>
+			<i>source/templates</i>
-			folder as a global data source for your template files.</p>
+			folder as a data source for your nunjucks files.</p>
 		<p>For a very basic start you can make a copy of the demo page
-			<code>blank.liquid|njk</code>. You can find it at
+			<code>blank.njk</code>. You can find it at
-			<i>/source/view/demo/pages</i>.</p>
+			<i>/source/screens/demo</i>.</p>
 		<p>The
 			<i>source/demo</i>
 			folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole
@@ -64,17 +64,6 @@ title: Index
 					{% endfor %}
 				</ul>
 			</section>
-			<section>
-				<h3>Art</h3>
-				<ul class="block link">
-					{% assign artByTitle = collections.demoArt | sort: 'data.title' %}
-					{% for link in artByTitle %}
-						<li>
-							<a href="{{ link.page.url }}">{{ link.data.title }}</a>
-						</li>
-					{% endfor %}
-				</ul>
-			</section>
 		</div>
 	</div>
 </div>

source/screens/demo/introduction.liquid

@@ -4,7 +4,7 @@ tags:
 - demoIndex
 order: 1
 ---
-{% layout 'hippie-view/page.liquid' %}
+{% layout 'hippie/page.liquid' %}
 
 {% block title %}Einführung{% endblock %}
 

source/screens/demo/layouts.liquid

@@ -4,7 +4,7 @@ tags:
 - demoIndex
 order: 4
 ---
-{% layout 'hippie-view/page.liquid' %}
+{% layout 'hippie/page.liquid' %}
 
 {% block title %}Gestaltungen{% endblock %}
 
@@ -20,7 +20,7 @@ order: 4
 		<pre class="pre_code"><code>section.overflow>div.float_space_left>img^p+p>br+a.lineLink</code></pre>
 		<section class="overflow">
 			<div class="float_space_left demo__avatar">
-				{% render 'hippie-view/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '256', desc: 'Avatar' %}
+				{% render 'hippie/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '256', desc: 'Avatar' %}
 			</div>
 			<p>{% text hippie.placeholders.name %}<br>{% text hippie.placeholders.address %}</p>
 			<p>{% text hippie.placeholders.phone %}<br>{% link hippie.placeholders.mail, '', '', 'a_line' %}</p>
@@ -215,7 +215,7 @@ order: 4
 	<article>
 		<h2>Eingebettet</h2>
 		<div class="demo__flag">
-			{% render 'hippie-view/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %}
+			{% render 'hippie/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %}
 		</div>
 	</article>
 	<article>

source/screens/demo/pages/blank.liquid

@@ -2,4 +2,4 @@
 title: Blank
 ---
 {% assign pageId = page.fileSlug -%}
-{% layout 'hippie-view/simple.liquid' %}
+{% layout 'hippie/simple.liquid' %}

source/screens/demo/pages/default.liquid

@@ -4,7 +4,7 @@ title: Default
 {% assign pageId = page.fileSlug -%}
 {% assign pageClass = 'default' -%}
 {% assign bodyClass = 'default' -%}
-{% layout 'hippie-view/default.liquid' %}
+{% layout 'hippie/default.liquid' %}
 
 {% block title %}{{ title }}{% endblock %}
 

source/screens/demo/pages/error/304.liquid

@@ -2,7 +2,7 @@
 title: 304
 ---
 {% assign bodyClass = 'body_status' %}
-{% layout 'hippie-view/status.liquid' %}
+{% layout 'hippie/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}

source/screens/demo/pages/error/400.liquid

@@ -2,7 +2,7 @@
 title: 400
 ---
 {% assign bodyClass = 'body_status' %}
-{% layout 'hippie-view/status.liquid' %}
+{% layout 'hippie/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}

source/screens/demo/pages/error/401.liquid

@@ -2,7 +2,7 @@
 title: 401
 ---
 {% assign bodyClass = 'body_status' %}
-{% layout 'hippie-view/status.liquid' %}
+{% layout 'hippie/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}

source/screens/demo/pages/error/403.liquid

@@ -2,7 +2,7 @@
 title: 403
 ---
 {% assign bodyClass = 'body_status' %}
-{% layout 'hippie-view/status.liquid' %}
+{% layout 'hippie/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}

source/screens/demo/pages/error/404.liquid

@@ -2,7 +2,7 @@
 title: 404
 ---
 {% assign bodyClass = 'body_status' %}
-{% layout 'hippie-view/status.liquid' %}
+{% layout 'hippie/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}

source/screens/demo/pages/error/408.liquid

@@ -2,7 +2,7 @@
 title: 408
 ---
 {% assign bodyClass = 'body_status' %}
-{% layout 'hippie-view/status.liquid' %}
+{% layout 'hippie/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}

source/screens/demo/pages/error/500.liquid

@@ -2,7 +2,7 @@
 title: 500
 ---
 {% assign bodyClass = 'body_status' %}
-{% layout 'hippie-view/status.liquid' %}
+{% layout 'hippie/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}

source/screens/demo/pages/error/503.liquid

@@ -2,7 +2,7 @@
 title: 503
 ---
 {% assign bodyClass = 'body_status' %}
-{% layout 'hippie-view/status.liquid' %}
+{% layout 'hippie/status.liquid' %}
 
 {% block main %}
 {{ block.super -}}

source/screens/demo/pages/maintenance.liquid

@@ -2,7 +2,7 @@
 title: Maintenance
 ---
 {% assign pageClass = 'h_full_view' -%}
-{% layout 'hippie-view/status.liquid' %}
+{% layout 'hippie/status.liquid' %}
 
 {% block body %}
 <hgroup id="root" class="txt_center">

source/style/hippie-style

@@ -1 +1 @@
-Subproject commit 08b2054d437e3ff45ed790f3da0742f8fa8fa30f
+Subproject commit b4c56320060548dacde62639876c6aee72b297ea

source/style/modules/_clock.scss

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

source/style/modules/_game.scss

@@ -1,11 +1,8 @@
-@use 'sass:list';
-@use "sass:map";
-
 @use "../hippie-style/hippie";
 
-.body_menu {
+.body_game {
 	@extend .h_full_view;
-	background-color: hippie.basic_color(delta);
+	background-color: hotpink;
 
 	footer {
 		@extend .pos_abs;

source/style/modules/_login.scss

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

source/style/modules/_start.scss

@@ -1,111 +1,15 @@
-@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%;
 	}
 
-	form {
+	#www-search {
-		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/game/_mwo.scss

@@ -1,48 +0,0 @@
-@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_mwo {
-	@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/game/_tfw.scss

@@ -1,206 +0,0 @@
-@use 'sass:list';
-@use "sass:map";
-
-@use "../../hippie-style/hippie";
-
-.body_tfw {
-	@extend .h_full_view;
-
-	display: flex;
-	flex-flow: column nowrap;
-
-	th,
-	.important,
-	.subtle,
-	button,
-	input[type="text"],
-	select {
-		text-transform: uppercase;
-	}
-
-	th,
-	.important {
-		color: white;
-		background-color: hippie.basic_color(echo);
-	}
-
-	.important {
-		padding: hippie.$space_half;
-		border-block: hippie.$width_border_basic solid hippie.$color_back_basic;
-		font-weight: bold;
-	}
-
-	.subtle,
-	hgroup p {
-		@extend .txt_smaller;
-
-		color: hippie.$color_darkest;
-	}
-
-	.complete .subtle,
-	button[data-action="claim"] {
-		color: hippie.basic_color(alpha);
-	}
-
-	.background {
-		position: relative;
-		overflow: hidden;
-
-		h2, span {
-			color: white;
-		}
-
-		*:not(canvas, img) {
-			z-index: map.get(hippie.$z-indexes, "content-bottom");
-			position: relative;
-		}
-
-		canvas, img {
-			z-index: map.get(hippie.$z-indexes, "default");
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-		}
-	}
-
-	& > header {
-		& > button.active {
-			border-color: hippie.$color_highlight_basic;
-			color: hippie.$color_highlight_basic;
-			background-color: hippie.$color_action_basic;
-		}
-
-		& > button:not(:first-child, :last-child, :nth-child(2)) {
-			flex: 1;
-		}
-	}
-
-	.view {
-		flex: auto;
-		display: flex;
-		flex-flow: column nowrap;
-		min-height: 0;
-
-		& > main {
-			flex: auto;
-			display: flex;
-			flex-flow: row nowrap;
-			gap: hippie.$space_double;
-			min-height: 0;
-
-			nav {
-				flex: 1;
-				display: flex;
-				flex-flow: column nowrap;
-				gap: hippie.$space_basic;
-				min-height: 0;
-
-				input:not([type="checkbox"], [type="range"]) {
-					@extend .input_io;
-				}
-
-				select {
-					@extend .io_select;
-				}
-			}
-
-			& > div {
-				flex: 4;
-				display: flex;
-				flex-flow: column nowrap;
-				gap: hippie.$space_basic;
-				min-height: 0;
-
-				div:first-child {
-					flex: auto;
-					overflow: auto;
-					min-height: 0;
-				}
-
-				div:last-child {
-					flex: 0 0 auto;
-				}
-			}
-
-			aside {
-				flex: 2;
-
-				.background {
-					border-bottom: 1px solid hippie.basic_color(echo);
-				}
-
-				& > div {
-					display: none;
-				}
-			}
-
-			table {
-				table-layout: fixed;
-				width: 100%;
-				margin: 0;
-
-				th {
-					text-align: center;
-				}
-
-				td {
-					vertical-align: top;
-
-					span {
-						z-index: map.get(hippie.$z-indexes, "content-bottom");
-						position: relative;
-						color: white;
-					}
-
-					&.subtle {
-						text-align: center;
-						vertical-align: middle;
-					}
-				}
-
-				&#questSelection {
-					display: none;
-				}
-
-				&[data-type="faction"] td {
-					height: 6em;
-				}
-
-				&[data-type="quest"] td {
-					height: 4em;
-				}
-
-				.l {
-					width: 30%;
-				}
-
-				.q {
-					width: 50%;
-				}
-
-				.g {
-					width: 40%;
-				}
-
-				.t, .s, .c, .f {
-					width: 20%;
-				}
-			}
-		}
-
-		& > footer {
-			justify-content: space-between;
-			padding: hippie.$space_basic;
-
-			& > button:not(:first-child) {
-				padding-inline: 2em;
-			}
-		}
-	}
-
-	footer *:not(button[data-action="back"]) {
-		display: none;
-	}
-}

source/style/modules/ui/_frame_module.scss

@@ -9,7 +9,7 @@
 }
 
 .body_frame {
-	@extend %flex_column;
+	@extend %flex-column;
 
 	background-color: hippie.$color_back_basic;
 
@@ -27,7 +27,7 @@
 	}
 
 	main {
-		@extend %flex_row;
+		@extend %flex-row;
 
 		flex: 1;
 
@@ -53,7 +53,7 @@
 		}
 
 		section {
-			@extend %flex_column;
+			@extend %flex-column;
 			gap: 0;
 		}
 	}
@@ -66,12 +66,12 @@
 }
 
 #cli {
-	@extend %flex_column;
+	@extend %flex-column;
 
 	background-color: black;
 
 	#line {
-		@extend %flex_row;
+		@extend %flex-row;
 	}
 
 	#prompt {

source/style/modules/ui/_new_module.scss

@@ -0,0 +1,99 @@
+@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,13 +4,12 @@
 @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";
 @use "modules/ui/windows_module";
 @use "modules/ui/table_module";
-@use "modules/game/mwo";
-@use "modules/game/tfw";
 
 $color_gui_back: hippie.$color_dark;
 $space_gui_half: hippie.$space_half;
@@ -179,7 +178,7 @@ $space_gui_half: hippie.$space_half;
 		background-color: hippie.$color_back_basic;
 		transition: background-color 4s;
 
-		&:hover > .mouse_overlay {
+		&:hover > .mouse-overlay {
 			background-color: transparent !important;
 			transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important;
 		}

source/templates/hippie/app.liquid

@@ -0,0 +1,41 @@
+{% assign pageId = page.fileSlug -%}
+{% assign pageClass = 'html_ui' -%}
+{% layout 'hippie/default.liquid' %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block links %}
+{{ block.super -}}
+<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
+<link href="/css/ui.css" media="all" rel="stylesheet"/>
+{% endblock %}
+
+{% block assets %}
+<script src="/vendor/jquery.min.js"></script>
+<script src="/vendor/hippie-script.js"></script>
+<script src="/js/globals.js"></script>
+<script src="/js/app.js"></script>
+{% endblock %}
+
+{% block script %}
+<script>
+	const frameHeader = document.querySelector('body > header.io');
+	const closeActionElements = document.querySelectorAll('[data-action=close]');
+
+	if (frameHeader) {
+		console.log('frame header found', frameHeader);
+
+		frameHeader.addEventListener('click', (e) => {
+			if (e.target.dataset.action === 'close') {
+				console.debug('close', e.target);
+
+				history.back();
+
+				if (closeActionElements.length > 1) {
+					console.debug('other frames present', closeActionElements.length);
+				}
+			}
+		});
+	}
+</script>
+{% endblock %}

source/templates/hippie/default.liquid

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+{% if pageId %}
+{%- capture idAttr %} id="{{ pageId }}"{% endcapture -%}
+{% endif -%}
+{% if pageClass %}
+	{%- capture classAttr %} class="{{ pageClass }}"{% endcapture -%}
+{% endif -%}
+{% if bodyClass %}
+	{%- capture bodyClassAttr %} class="{{ bodyClass }}"{% endcapture -%}
+{% endif -%}
+<html{{ idAttr }}{{ classAttr }} lang="de">
+<head>
+	<meta charset="utf-8">
+	{% block head %}
+	<title>
+		{{- hippie.titlePrefix -}}
+		{% block title %}{% endblock -%}
+		{{ hippie.titlePostfix -}}
+	</title>
+	{% block meta -%}
+	{% render 'hippie/partials/meta.liquid' %}
+	{% endblock -%}
+	{% block links -%}
+	{% render 'hippie/partials/links.liquid' %}
+	{% endblock -%}
+	{% endblock -%}
+</head>
+
+<body{{ bodyClassAttr }}>
+{%- block body %}{% endblock -%}
+{%- block assets %}{% endblock -%}
+<script>
+	// {{ title }} script using default template
+</script>
+{%- block script %}{% endblock -%}
+</body>
+</html>

source/templates/hippie/full.liquid

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+{% if pageId %}
+{%- capture idAttr %} id="{{ pageId }}"{% endcapture -%}
+{% endif -%}
+{% if pageClass %}
+	{%- capture classAttr %} class="{{ pageClass }}"{% endcapture -%}
+{% endif -%}
+{% if bodyClass %}
+	{%- capture bodyClassAttr %} class="{{ bodyClass }}"{% endcapture -%}
+{% endif -%}
+<html{{ idAttr }}{{ classAttr }} lang="de">
+<head>
+	<meta charset="utf-8">
+	{% block head %}
+	<title>
+		{{- hippie.titlePrefix -}}
+		{% block title %}{{ title }}{% endblock -%}
+		{{ hippie.titlePostfix -}}
+	</title>
+	{% block meta -%}
+	{% render 'hippie/partials/meta.liquid', author: 'Interaktionsweise', desc: 'Hippie interweaves preeminent personal interface elements' %}
+	{% comment %}<base href="/">{% endcomment %}
+	{% endblock -%}
+	{% render 'hippie/partials/script-log.liquid' %}
+	{% render 'hippie/partials/log-setup', hippie: hippie, state: true -%}
+	{% render 'hippie/partials/log-start' -%}
+	{% block links -%}
+	{% render 'hippie/partials/links.liquid' %}
+	<link rel="stylesheet" media="all" href="/css/demo.css" type="text/css"/>
+	{% endblock -%}
+	{% render 'hippie/partials/log-log' with 'HEAD end    :: Links parsed, starting to load.' as msg -%}
+	{% endblock -%}
+</head>
+
+<body{{ bodyClassAttr }}>
+{% render 'hippie/partials/log-log' with 'BODY start' as msg -%}
+{%- block body %}{% endblock -%}
+{% render 'hippie/partials/log-log' with 'BODY        :: Loading script assets...' as msg -%}
+{%- block assets %}{% endblock -%}
+{% render 'hippie/partials/log-assets', state: true -%}
+{% render 'hippie/partials/log-log', msg: 'BODY        :: Assets loaded, running page specific script...', arg: true -%}
+<script>
+	// {{ title }} script using full template
+</script>
+{%- block script %}{% endblock -%}
+{% 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>

source/templates/hippie/page.liquid

@@ -0,0 +1,64 @@
+{% assign pageId = page.fileSlug -%}
+{% layout 'hippie/full.liquid' %}
+
+{% block meta %}
+{{ block.super -}}
+{% comment %}<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">{% endcomment %}
+{% comment %}<meta http-equiv="X-UA-Compatible" content="IE=edge" />{% endcomment %}
+{% endblock %}
+
+{% block links %}
+{{ block.super -}}
+{% if hippie.legacyMode %}
+	<!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
+	<!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script> <![endif]-->
+	{% comment %}<script src="./code/html5shiv.min.js"></script>{% endcomment %}
+	{% comment %}<!--Only use one of the above!-->{% endcomment %}
+{% endif %}
+
+{% comment %}<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'>{% endcomment %}
+{% comment %}<link rel="stylesheet" type="text/css" media="print" href="/css/print.css"/>{% endcomment %}
+{% endblock %}
+
+{% block body %}
+{{ block.super -}}
+{% render 'hippie/partials/nav-page.liquid' %}
+<div id="root">
+	{% render 'hippie/partials/header-page.liquid' %}
+
+	<main class="main_site">
+		{% block main %}{% endblock %}
+	</main>
+
+	{% render 'hippie/partials/footer-page.liquid' %}
+</div>
+{% endblock %}
+
+{% block assets %}
+<script src="/vendor/jquery.min.js"></script>
+<script src="/vendor/hippie-script.js"></script>
+<script src="/js/globals.js"></script>
+<script src="/js/app.js"></script>
+{% endblock %}
+{% block script %}
+<script>
+	// Setup global things for all screens
+	setup();
+
+	// Create instances of objects made by constructor functions
+	let scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
+	let helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
+
+	if (viewHover) {
+		let fadeUi = new HippieFade(document.getElementById('js-toggle-fade'), true);
+	}
+
+	document.addEventListener('scroll', () => {
+		scrollUi.check();
+	});
+
+	$(document).ready(function () {
+		logPerf('EVENT       :: jQuery \'ready\' event fired.');
+	});
+</script>
+{% endblock %}

source/templates/hippie/partials/footer-page.liquid

@@ -0,0 +1,3 @@
+<footer class="footer_site">
+	<div id="end"></div>
+</footer>

source/templates/hippie/partials/footer-pinned.liquid

@@ -0,0 +1,3 @@
+<footer class="pos_abs pin_{{ pos | default: 'bottom' }} pin_right pin_left">
+	<p class="txt_center">Unten fixiert</p>
+</footer>

source/templates/hippie/partials/footer-status.liquid

@@ -0,0 +1,9 @@
+<footer class="pos_abs pin_bottom width_full">
+	<address class="txt_center">Kontakt:
+		<a class="lineLink" href="mailto:{{ email | default: 'admin@domain.tld' }}">{{ email | default: 'admin@domain.tld' }}</a>
+		· Server:
+		{{ app | default: 'Application' }}/{{ version | default: 'ver.s.ion' }}
+		({{ system | default: 'System name' }}) · Domain:
+		{{ domain | default: 'domain.tld:port' }}
+	</address>
+</footer>

source/templates/hippie/partials/frame-header.liquid

@@ -0,0 +1,20 @@
+<header class="io">
+	<nav>
+		<button title="menu">
+			<i class="bi bi-three-dots"></i>
+		</button>
+		<span>{{ title | default: 'title-bar' }}</span>
+	</nav>
+	<nav>
+		<div class="spacer a"></div>
+		<button title="minimize">
+			<i class="bi bi-dash"></i>
+		</button>
+		<button title="maximize">
+			<i class="bi bi-fullscreen"></i>
+		</button>
+		<button title="close" data-action="close">
+			<i class="bi bi-x-square"></i>
+		</button>
+	</nav>
+</header>

source/templates/hippie/partials/frame-mode.liquid

@@ -0,0 +1,10 @@
+<footer class="io">
+	<nav>
+		<button>mode</button>
+		<span>{{ title | default: 'mode-bar' }}</span>
+	</nav>
+	<nav>
+		<div class="spacer a"></div>
+		<button>action</button>
+	</nav>
+</footer>

source/templates/hippie/partials/frame-status.liquid

@@ -0,0 +1,11 @@
+<footer class="io">
+	<nav>
+		<span>## items</span>
+		<span># selected (size)</span>
+		<span># type(s)</span>
+		<span># shared</span>
+	</nav>
+	<nav>
+		<span>{{ title | default: 'status-bar' }}</span>
+	</nav>
+</footer>

source/templates/hippie/partials/gate-list.liquid

@@ -0,0 +1,19 @@
+<article class="portal__entry">
+	<section>
+		<h2>
+			<a class="a_discreet" href="{{ url }}">{{ name }}</a>
+		</h2>
+		<a class="portal__link portal__link--{{ name | slug }}" href="{{ url }}">
+			<img src="{{ image.src }}" alt="{{ image.alt }}"/>
+		</a>
+		{% if links %}
+			<ul class="portal__list">
+				{% for link in links %}
+					<li>
+						<a href="{{ link.href }}"><img src="{{ link.img }}" width="16" height="16"/>{{ link.name }}</a>
+					</li>
+				{% endfor %}
+			</ul>
+		{% endif %}
+	</section>
+</article>

source/templates/hippie/partials/gate-simple.liquid

@@ -0,0 +1,7 @@
+<article class="portal__entry">
+	<section>
+		<h2>
+			<a class="a_discreet" href="{{ url }}">{{ name }}</a>
+		</h2>
+	</section>
+</article>

source/templates/hippie/partials/header-page.liquid

@@ -0,0 +1,3 @@
+<header class="header_site">
+	<div id="begin"></div>
+</header>

source/templates/hippie/partials/header-status.liquid

@@ -0,0 +1,21 @@
+<div id="top">
+	<h1 class="brand">
+		<a href="#">{{ hippie.brand | upcase }}</a>
+	</h1>
+	<nav>
+		<ul>
+			{% for link in links %}
+				<li>
+					<a href="{{ link.href }}">{{ link.text }}</a>
+				</li>
+			{% endfor %}
+		</ul>
+	</nav>
+	<div class="state">
+		<p>{% render 'hippie/partials/status-coord', id: "log" %}
+			/
+			{% render 'hippie/partials/status-date', id: "date" %}
+			/
+			{% render 'hippie/partials/status-time', id: "time" %}</p>
+	</div>
+</div>

source/templates/hippie/partials/links.liquid

@@ -0,0 +1,3 @@
+{% comment %}<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">{% endcomment %}
+	<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
+	<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEACABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQEAAAIBAQCbjUIABQQCAGdfKgDcxYUAiXpGABkWCgDXxnEApmxRAMGZawAIBwMArZ5PAKFydQBmIZIAoGJFAIx+QwBSSyIA1biBADlx0gBNn+0AgztQAMimcQAMCwQADAsFANS/dAB7P3EAeuH7ANb4/gBQPLwAp2pNAI6CQwCilEwAr3hdADyH5ADw/f8A////AHTU+AB6M2YA0LN4ABMRBwA/OhsAyKR2AGYvjQCf7PwA7fz/AENy2gCrclkAk4ZDAAYFAgDNtXEAjkhHAEul7QD8//8AlOn8AGk1hwDWvXsAGBYJAJaHSgCnbE4AVy6rAML0/gD7/v8AQ6vuAKx1YwCZjEQALCgTALyOZwB+NVoAZ8D0AL30/QBLULMA2sV+AB4bCwDFpm0Ak087AFArvgBv4PoAjOf7AIzm+wCN4/sAjuH7AI7h+gCP3fkAOI/sAKVvcwCfkUQAfnM6ANO2hAC3iGkAk150AI9OcACKRmkAhj9kAH84YQB9NWEAfTRgAH0zYAB6MWYAei9lAItFUADdy3wAKCQPAFtTJQB2bDIAhXk5AJKGPwCbjkQAq5xOALepWwDEtGcAzLlwAMyzcgDKrXIAx6NwALyNZgDWu4IApJZHAAcGAwANDAUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB3eGhpamtsbW5vcHFycwt0dXZYWVpbXF1eX2BhYmNkZWZnAktMTU5PUFFRUlNUVVZXAABDREVGJSUlJSUlR0hJSgAAADs8PT4lJSUlP0BBQgAAAAAyMzQ1NiUlJTc4OToAAAAAACorLC0lJS4vMDEAAAAAAAAAISIjJCUmJygpAAAAAAAAABkaGxwdHh8gAAAAAAAAAAAAEhMUFRYXGAAAAAAAAAAAAAANDg8QEQAAAAAAAAAAAAAACAkKCwwAAAAAAAAAAAAAAAAFBgcAAAAAAAAAAAAAAAAAAgMEAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=">

source/templates/hippie/partials/log-assets.liquid

@@ -0,0 +1,3 @@
+<script>
+	assetsLoaded = {{ state | default: false, allow_false: true }};
+</script>

source/templates/hippie/partials/log-log.liquid

@@ -0,0 +1,3 @@
+<script>
+	logPerf('{{ msg }}', {{ arg | default: '' }});
+</script>

source/templates/hippie/partials/log-setup.liquid

@@ -0,0 +1,6 @@
+{% comment %}{% assign hippie.debugMode = state %}{% endcomment %}
+<script>
+	debugOn = {{ state }};
+	debugOnScreen = {{ display | default: false }};
+	assetsLoaded = {{ assets | default: false }};
+</script>

source/templates/hippie/partials/log-start.liquid

@@ -0,0 +1,4 @@
+<script>
+	logAdd('EVENT       :: Document \'%s\' event fired.', 'DOMContentLoaded');
+	logPerf('HEAD start  :: Debugging performance...', debugOn);
+</script>

source/templates/hippie/partials/meta.liquid

@@ -0,0 +1,7 @@
+<meta name="robots" content="noindex">
+	<meta name="generator" content="{{ eleventy.generator }}">
+	<meta name="author" content="{{ author | default: '' }}">
+	<meta name="description" content="{{ desc | default: '' }}">
+	<meta name="keywords" content="{{ keys | default: '' }}">
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">

source/templates/hippie/partials/nav-page.liquid

@@ -0,0 +1,33 @@
+<div class="pos_rel">
+	<nav class="nav_page_meta">
+		<ul>
+			<li class="js_scrolltop di_none">
+				<a href="#begin" class="a_button_meta">
+					<div class="sprite_img demo__sprite_up"></div>
+					{% comment %}<img src="/art/up.png" alt="" width="32" height="64">{% endcomment %}
+				</a>
+			</li>
+			<li>
+				{% comment %}<button class="">Show Meta Information</button>{% endcomment %}
+				{% comment %}<a href="#meta" class="js_showmeta a_button_meta">
+					<div class="sprite_img demo__sprite_meta"></div>
+				</a>{% endcomment %}
+				<button class="js_showmeta button_clear" type="button">
+					<div class="sprite_img demo__sprite_meta"></div>
+				</button>
+			</li>
+			<li>
+				<button id="js-toggle-fade">F</button>
+			</li>
+			<li class="js_scrolldown">
+				<a href="#end" class="a_button_meta">
+					<div class="sprite_img demo__sprite_down"></div>
+					{% comment %}<img src="/art/down.png" alt="" width="32" height="32">{% endcomment %}
+				</a>
+			</li>
+		</ul>
+	</nav>
+</div>
+{% comment %}<div class="exp_overlay_btn exp_help_btn">
+	<span class="span_solo">?</span>
+</div>{% endcomment %}

source/templates/hippie/partials/placeholder-flag.liquid

@@ -0,0 +1,43 @@
+{% assign height = width | divided_by: 1.6 %}
+
+{% if type == 'svg' or type == '' %}
+	<svg version="1.1" id="{{ id }}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
+		{% comment %}<defs>
+			<filter id="turb3">
+				<feColorMatrix type="saturate" values="1" />
+				<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
+			</filter>
+			<symbol id="triangle-5">
+				<rect y="0" fill="#273F8B" width="1920" height="1200"/>
+			</symbol>
+		</defs>
+		<g>
+			<use xlink:href="#triangle-5" style="filter: url(#turb3);" />
+		</g>{% endcomment %}
+		{% if desc %}
+			<desc>{{ desc }}</desc>
+		{% endif %}
+		<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
+		<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/>
+		<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "/>
+		<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "/>
+		<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "/>
+		<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "/>
+		<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "/>
+		<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/>
+		<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
+	</svg>
+{% elsif type == 'img' %}
+	{% if src == 'file' %}
+		<picture>
+			<source srcset="/art/flag_websafe_128x80.webp" type="image/webp"/>
+			<img src="/art/flag_websafe_128x80.gif" width="{{ width }}" height="{{ height }}" alt="{{ desc }}"/>
+		</picture>
+	{% else %}
+		<img
+			width="{{ width }}"
+			height="{{ height }}"
+			alt="{{ desc }}"
+			src="data:image/gif;base64,R0lGODlhgABQAIQAMf/MAP+ZM/+ZAP9mM8zM/8xmM8wzM8wAZpnM/5nMzJmZzJkzZpkAZmbMzGaZzGZmmWYzZjNmmTMzmQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAgABQAAQF/mDjiORolug5NiKSEG8Mz68SSbek73zv/8CgcEhkGY/IpBLRcBEQM+hL+nRIHrscLsvVab/drTcMHpvF6DIuxVaxj7I4DZZAE+/4vB6o7PubRgSCUIOCT4YRDxE3jFuNj46RkJOSlZSXlo5tm24nTXKgBA5ae6Wmpz5/qklOU1GvCYqNZ2q1ZLe0uGm6X5y+K0dzoQlWpKjHyHery0wIhIeFgwiLmZjW1djX2pa/viwjw3PUyeTlQct/TCyHru0ENru58vH0tvP29VndnazhMVjGzAkkh06VM2gICdkAmK3htocOI0bYtymQv2kBB2o8VrBPM3dUoDxQdI+XyZIo/vOlnMivJQk4wubA20iTYMcj6l5ESzgKok+JQH8+osivQcw4DezUXFrqJquQsAhQw0f1pMqrVe8RRcHCn6iMTMMqc8qCSUJDUmQFXSuUrcOtwBwk8FdMrF09ZHOy2+vsitWsWP8KXgk3WLhxdxMXIdtk5zMFattKdjt5UuGuR2GAVcyZR16jIGHYmBV45eDSqGttNdJKGAKlnWPvuNnsme2vlHNX1q3JZdHMM2UL9+yUb5S6ppOnPg1YtW+ureMogD08Nm1XOxPx3s3dLQQICyh+iz5jVHXZEBgsYJC+4EfjsZjLV97c6vf1C8CrF99gmJXziuGn3oDr3YQWWhht/qdgd5Sklx9++hlwgAHikfcCYgDSlJ6D7A14AAMHhHiAe1C9YF599M233BgO6vegehPGKCGFz1kkzGYZosKhgAKK6KOIzDRx2ztTLWjkT/e56KKMTM44IUWgvIZjjnlwuCOIP2bpY0HGkZTilytedZ96SzppZpMydvOJTFNSGcSVPGopZ5bMOFYXg0diM+aLC6B55p9NerOOdG7useGA6c2p6JwGgbZXkWCiGOYNLcYJ6KV+pukSZjJ4WSgQcMK46KiMqqITO3imWkmS+C2A6auZ/umNMFh8ysOh63FI6q6LGhSSlCpKWhUEEvAJXqzIwvqnAQNU1J84baJHoIe8/lab5QAFBCAAAAL4YdYzJ+Y52Z7HKptsstluGwAA667LyVw0RJuYldRaa20B6WrLrb7bAvBHO/9NGuwO5K5n7sFMYhtAu+w2vC4AEEdcEQ2vAXilvbsawGwB3Ha8rboRhyyxR4WQpCpElZ6LsJMKM8ywyDCLvIkM5sWGK5YYz6kxtvt+vHDMQMvcRxQMRSoYqwysnOzGDjcd9NMyu7EmMYrdnLOcBqTrsdNQdz0yEgcJUuTJkbyo9KXMgvyy12zD/MYMtYal69U+YiuAzx+3rXfMSqA68Dxjnt1kAQOovffhT0MXQ8AaEdtjzllrnTfilAOdxBTAplqmyoP//HDlyKAnrsIMG81t7cb8hq461GCbSJqwEjjIOcvZrr367UGjEIO8Q+zI6855f4778JYHI0pu983OtO3EN2+5CS7UgUqHGRtwt+fOZ886a1JJit/ShTes/fhev/ROKbIrmrUAzJPvfvGfMHTNd69a3+/7+LNNAtV31PsjvvrKnwD1tw5elKtzwhugArvWgrj9YD0+2hnHFkhBvXWlQUmLEc8qyMG9scCBscMS8DpIQg9Oh1JJS1sJV3i4pKQnaz9joQz15gDxzfCGegsBADs=">
+	{% endif %}
+{% endif %}

source/templates/hippie/partials/script-log.liquid

@@ -0,0 +1,113 @@
+<script>
+  // Entry script at page init
+  let debugOn = {{ hippie.debugMode | default: false, allow_false: true }};
+  let debugOnScreen = false;
+  let assetsLoaded = false;
+
+  // Get the current time difference between page
+  // load and when this func was invoked
+  function getTimeDiff() {
+    return new Date().getTime() - performance.timing.navigationStart;
+  }
+
+  function pad(n, width, z) {
+    z = z || '0';
+    n = n + '';
+
+    return n.length >= width
+      ? n
+      : new Array(width - n.length + 1).join(z) + n;
+  }
+
+  // Log message to console and add
+  // performance measuring information
+  function logPerf(msg, arg) {
+    if (debugOn) {
+      if (debugOnScreen && assetsLoaded) {
+        if (!document.getElementById('jsLogPerf')) {
+          let wrap = document.createElement('div');
+          let box = document.createElement('div');
+
+          wrap.style.position = 'relative';
+          box.style.cssText = `position: fixed;
+            bottom: 16px;
+            right: 40px;
+            zIndex: 1000;
+            padding: 0 8px;
+            background: rgba(255,255,255,.6);
+            color: rgb(128);
+            fontSize: 1rem;`;
+          box.id = 'jsLogPerf';
+
+          wrap.prepend(box);
+          document
+            .body
+            .prepend(wrap);
+
+          /*
+          $('<div><div></div></div>')
+            .css('position', 'relative')
+            .find('div')
+            .attr('id', 'jsLogPerf')
+            .css({
+              position: 'fixed',
+              bottom: '16px',
+              right: '40px',
+              zIndex: '1000',
+              padding: '0 8px',
+              background: 'rgba(255,255,255,.6)',
+              color: 'rgb(128)',
+              fontSize: '1rem'
+            })
+            .end()
+            .prependTo('body');
+          */
+          // $('body').prepend('<div style="position:relative;"></div>');
+          // $('div').first().prepend('<div id="jslogPerf" style="position:fixed;bottom:8px;right:16px;z-index:1000;padding:8px;background:rgb(0,255,255,.5)"></div>');
+        }
+
+        let code = document.createElement('code');
+
+        code.style.cssText = `display: block;
+          margin: 8px 0;
+          padding: 1px 4px;
+          background-color: transparent;
+          color: black;
+          font-size: 12px;
+          line-height: 1.1;`;
+        code.innerHTML = '<b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '';
+
+        document
+          .getElementById('jsLogPerf')
+          .append(code);
+        // document.getElementById('jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
+        // $('#jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
+
+        // NOTE: Alternative short-circuit evaluation
+        // needs element in document but prevents error if not
+        // $log = $log || $('#jslogPerf');
+        // $log.append('<p style="margin-bottom:4px;font-size:.75em;"><b>' + getTimeDiff() + '</b>ms :: ' + msg);
+      }
+
+      if (window.console) {
+        const time = pad(getTimeDiff(), 5) + 'ms :: ';
+
+        console.debug(time + msg, (
+          arg
+          ? arg
+          : ''));
+
+        // NOTE: Non standard feature. Not available on IE
+        if (console.timeStamp) {
+          console.timeStamp(msg);
+        }
+      }
+    }
+  }
+
+  function logAdd(msg, listener) {
+    document.addEventListener(listener, function () {
+      logPerf(msg, listener);
+    });
+  }
+</script>

source/templates/hippie/partials/song.liquid

@@ -0,0 +1,10 @@
+<article class="songbook_song">
+	<header>
+		<h2>{{ data.title }}</h2>
+		<h6>{{ data.releaseDate }}</h6>
+		<p>{{ data.description }}</p>
+	</header>
+	{% comment %}<pre class="pre_code"><code>{{ content }}</code></pre>{% endcomment %}
+	{{ content }}
+	<footer>{{ index }}</footer>
+</article>

source/templates/hippie/partials/status-coord.liquid

@@ -0,0 +1 @@
+<span id="{{ id }}">{{ text | default: 'X: #, Y: ##' }}</span>

source/templates/hippie/partials/status-date.liquid

@@ -0,0 +1,6 @@
+<span id="{{ id }}">
+	<span id="day">Wochentag</span>,
+	<span id="dayNumb">##</span>.
+	<span id="month">Monat</span>
+	<span id="year">####</span>
+</span>

source/templates/hippie/partials/status-time.liquid

@@ -0,0 +1 @@
+<span id="{{ id }}">{{ text | default: '00:00:00' }}</span><span>{{ postfix | default: ' Uhr' }}</span>

source/templates/hippie/simple.liquid

@@ -0,0 +1,9 @@
+{% assign pageId = page.fileSlug -%}
+{% layout 'hippie/default.liquid' %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block links %}
+{{ block.super -}}
+<link href="/css/demo.css" media="all" rel="stylesheet"/>
+{% endblock %}

source/templates/hippie/status.liquid

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+{% if pageClass %}
+{%- capture classAttr %} class="{{ pageClass }}"{% endcapture -%}
+{% endif -%}
+{% if bodyClass %}
+	{%- capture bodyClassAttr %} class="{{ bodyClass }}"{% endcapture -%}
+{% endif -%}
+<html id="{{ page.fileSlug }}"{{ classAttr }} lang="de">
+<head>
+	<meta charset="utf-8">
+	{% block head %}
+	<title>
+		{{- hippie.titlePrefix -}}
+		{% block title %}{{ title }}{% endblock -%}
+		{{ hippie.titlePostfix -}}
+	</title>
+	{% block meta -%}
+	{% render 'hippie/partials/meta.liquid' %}
+	{% endblock -%}
+	{% block links -%}
+	<link rel="shortcut icon" type="image/x-icon"
+		  href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAH7SURBVDiNldM/aJNBGMfx71viH7TqIoLiIOoiSJRu0qE4uIiDm5OI4ODk4uYioqBuUkR0kKJNFC1mqUltlbZSqE3RYt+2SUyTppCmeU2bkiZ907z3vnfnUEU0NrXPeMd97p6H+xlaa02D0oDRYL+p4WEN9yZm8dT6dzQEQtkCuiIJxHKbBxZrLiNWmc8vRxn7lMGRanPAw0QW49Uwp8ODJEZmCCSt/wcGrCWavte44LRz7FyYnd+yxMZz2J7cGKh6kvczRUp3X9BnmFyLzHNVRpkeShNM1b+iDngUn2Oue4qLLV3cf+YST2tiLf3sj04wmypSEt76wFixwoJpcbKnh/ZMmuXK2vqdYJXLxyPMDiTpTOX/DbhK88bMMh4Y5sSZt3R2/+53aRkCzgT+oX4Kls2i49YDT+M5JkMmV+aj3BrII/+a15MuSevZEPl3UzxP5/8EMiurfO1L0hyNU27tZehL/c/zJNzsLXB+uoNySZBfFQD4tIbHHxJMfoxxu2pi7rK5fsm3FgL5MwXKQAPaMzh8JMbg61E6mn3c8B/CF5yx2L1tC/5TR4nsAS/RhlNzcR0P6TggFVoDGrYqyYMkLOybZ4fQZFZqGOHsgi4KF1tIakrhKIXj/WrBQAuJV3EQtsBbEQjbQVQEB/0HUHu3Y2wU5/XKVRqhFD8AgpYX2M9TNGcAAAAASUVORK5CYII=">
+	<link rel="stylesheet" type="text/css" media="all" href="/css/demo_basic.css"/>
+	{% endblock -%}
+	{% endblock -%}
+</head>
+
+<body{{ bodyClassAttr }}>
+{%- block body %}
+<main class="main_site">
+	<h1>{{ title }}</h1>
+	{% block main %}{% endblock -%}
+</main>
+{% render 'hippie/partials/footer-status' %}
+{% endblock -%}
+</body>
+</html>

source/templates/hippie/world.liquid

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+	<meta charset="utf-8">
+	<title>{{ title }}</title>
+</head>
+
+<body>
+{{ content }}
+</body>
+</html>

source/view/_data/menu.json

@@ -1,18 +0,0 @@
-[
-	{
-		"text": "New",
-		"href": "#new"
-	},
-	{
-		"text": "Continue",
-		"href": "#continue"
-	},
-	{
-		"text": "Settings",
-		"href": "#options"
-	},
-	{
-		"text": "Leave",
-		"href": "/"
-	}
-]

source/view/_includes/hippie-view

@@ -1 +0,0 @@
-Subproject commit 49fa85800392bc217653e6a90573feda4a1dc0ed

source/view/demo/art/matrix.liquid

@@ -1,167 +0,0 @@
----
-title: Matrix
-tags:
-- demoArt
----
-{% layout 'hippie-view/simple.liquid' %}
-
-{% block style %}
-<style>
-	html, body {
-		height: 100vh;
-		box-sizing: border-box;
-	}
-
-	body {
-		margin: 0;
-		background-color: grey;
-		font-family: 'Courier New', Courier, monospace;
-	}
-
-	#canvas {
-		display: block;
-		width: 100%;
-		height: 100%;
-	}
-</style>
-{% endblock %}
-
-{% block body %}
-<canvas id="canvas"></canvas>
-{% endblock %}
-
-{% block script %}
-<script>
-	const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-	const canvas = document.getElementById("canvas");
-	const ctx = canvas.getContext("2d");
-	// const observer = new ResizeObserver(() => {
-	// 	canvas.width = canvas.clientWidth;
-	// 	canvas.height = canvas.clientHeight;
-	// 	console.log("resize");
-	// });
-
-	canvas.width = canvas.clientWidth;
-	canvas.height = canvas.clientHeight;
-
-	// observer.observe(canvas);
-
-	ctx.font = "24px 'Courier New', Courier, monospace";
-	ctx.textBaseline = "top";
-
-	let char = characters.charAt(Math.floor(Math.random() * characters.length));
-	let charMeasure = ctx.measureText(char);
-	let charW = Math.ceil(Math.max(charMeasure.actualBoundingBoxLeft + charMeasure.actualBoundingBoxRight, charMeasure.width));
-	let charH = charMeasure.fontBoundingBoxDescent + charMeasure.fontBoundingBoxAscent;
-	let glyph = {
-		text: char,
-		x: 0,
-		y: 0,
-		w: charH,
-		h: charH
-	}
-	let lane = [];
-	let max = Math.floor(canvas.clientHeight / glyph.h);
-
-	let newId = undefined;
-	let holdId = undefined;
-	let cleanId = undefined;
-	let newInterval = 300;
-	let holdInterval = 1000;
-	let cleanInterval = 400;
-	let newIndex = 0;
-	let cleanIndex = randomIntFrom(1, max);
-
-	console.log("init", newInterval);
-	console.log(glyph);
-
-	newId = setInterval(newTrail, newInterval);
-
-	function newTrail() {
-		clearInterval(holdId);
-
-		glyph.text = characters.charAt(Math.floor(Math.random() * characters.length));
-		console.log(newIndex, glyph.text);
-
-		lane.push([newIndex, glyph.text, glyph.y]);
-
-		ctx.fillStyle = "white";
-		ctx.fillRect(glyph.x, glyph.y, glyph.w, glyph.h);
-		ctx.fillStyle = "black";
-		ctx.fillText(glyph.text, Math.floor((charH - charW) / 2), glyph.y);
-
-		if (newIndex > 0) {
-			let prevY = glyph.y - glyph.h;
-			let alpha = randomBetween(.2, 1);
-			ctx.clearRect(glyph.x, prevY, glyph.w, glyph.h);
-			ctx.fillStyle = "rgba(0, 0, 0, " + alpha + ")";
-			ctx.fillRect(glyph.x, prevY, glyph.w, glyph.h);
-			ctx.fillStyle = "rgba(255, 255, 255, " + alpha + ")";
-			// TODO: can not use array lane if it is changed by cleanTrail()
-			ctx.fillText(lane[newIndex - 1][1], Math.floor((charH - charW) / 2), prevY);
-		}
-
-		if (newIndex === cleanIndex) {
-			console.log("clean", cleanInterval, cleanIndex);
-
-			cleanId = setInterval(cleanTrail, cleanInterval);
-		}
-
-		newIndex++;
-		glyph.y += glyph.h;
-
-		if (newIndex > max) {
-			// console.log("hold", holdInterval);
-			console.log("end");
-
-			clearInterval(newId);
-
-			newIndex = 0;
-			glyph.y = 0;
-			newInterval = randomIntFrom(100, 1000, 2);
-
-			// holdId = setTimeout(() => {
-			// 	console.log("clean", cleanInterval);
-
-			// 	holdInterval = randomIntFrom(1000, 10000, 3);
-			// 	cleanId = setInterval(cleanTrail, cleanInterval);
-			// }, holdInterval);
-		}
-	}
-
-	function cleanTrail() {
-		let pos = lane.shift();
-		console.log(pos);
-
-		ctx.clearRect(0, pos[2], glyph.w, glyph.h);
-
-		if (!lane.length) {
-			console.log("hold", holdInterval);
-
-			clearInterval(cleanId);
-
-			holdId = setTimeout(() => {
-				console.clear();
-				console.log("new", newInterval);
-
-				cleanIndex = randomIntFrom(1, max);
-				cleanInterval = randomIntFrom(1000, 10000, 3);
-				holdInterval = randomIntFrom(1000, 10000, 3);
-				newId = setInterval(newTrail, newInterval);
-			}, holdInterval);
-		}
-	}
-
-	function randomBetween(min, max) {
-		return (Math.random() * (max - min) + min).toFixed(2);
-	}
-
-	function randomIntFrom(min, max, pos = 0) {
-		pos = Math.pow(10, pos);
-		min = Math.ceil(min);
-		max = Math.floor(max);
-
-		return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos;
-	}
-</script>
-{% endblock %}

source/view/demo/art/squares2.liquid

@@ -1,178 +0,0 @@
----
-title: Squares²
-tags:
-- demoArt
----
-{% layout 'hippie-view/simple.liquid' %}
-
-{% block style %}
-<style>
-	canvas {
-		display: block;
-	}
-</style>
-{% endblock %}
-
-{% block body %}{% endblock %}
-
-{% block script %}
-<script>
-	function fillCanvasWithSquares(maxSquareSize = 128, steps = 3, percentages = [40, 30, 20]) {
-		const canvas = document.createElement('canvas');
-		canvas.width = window.innerWidth;
-		canvas.height = window.innerHeight;
-		document.body.appendChild(canvas);
-
-		const ctx = canvas.getContext('2d');
-		const colors = [
-			'#e1d170',
-			'#cfb16a',
-			'#8b3050',
-			'#683657',
-			'#354063',
-			'#4b5776',
-			'#c8dbe2',
-			'#90bac2',
-			'#7daeb7'
-		];
-		/*const colors = [
-			'#fad803',
-			'#f2af13',
-			'#d30a51',
-			'#8e1f68',
-			'#273f8b',
-			'#3c579a',
-			'#b7e0f0',
-			'#6bc7d9',
-			'#52bed1'
-		];*/
-
-		function isPowerOfTwo(n) {
-			return n > 0 && (n & (n - 1)) === 0;
-		}
-
-		if (!isPowerOfTwo(maxSquareSize)) {
-			console.error('maxSquareSize must be a power of 2');
-			return;
-		}
-
-		if (steps < 1) {
-			console.error('steps must be at least 1');
-			return;
-		}
-
-		// Generate sizes by halving for each step
-		const sizes = [];
-		for (let i = 0; i < steps; i++) {
-			sizes.push(maxSquareSize / Math.pow(2, i));
-		}
-
-		// Validate percentages array
-		if (!Array.isArray(percentages)) {
-			console.error('percentages must be an array');
-			return;
-		}
-
-		if (percentages.length !== sizes.length - 1) {
-			console.warn(`percentages array should have ${sizes.length - 1} elements. Adjusting...`);
-			percentages = percentages.slice(0, sizes.length - 1);
-			while (percentages.length < sizes.length - 1) {
-				percentages.push(50);
-			}
-		}
-
-		const minSize = sizes[sizes.length - 1];
-
-		let grid = Array(Math.ceil(canvas.height / minSize))
-			.fill(null)
-			.map(() => Array(Math.ceil(canvas.width / minSize)).fill(false));
-
-		function canPlace(gridX, gridY, sizeInCells) {
-			if (gridY + sizeInCells > grid.length || gridX + sizeInCells > grid[0].length) return false;
-			for (let y = gridY; y < gridY + sizeInCells; y++) {
-				for (let x = gridX; x < gridX + sizeInCells; x++) {
-					if (grid[y][x]) return false;
-				}
-			}
-			return true;
-		}
-
-		function markOccupied(gridX, gridY, sizeInCells) {
-			for (let y = gridY; y < gridY + sizeInCells; y++) {
-				for (let x = gridX; x < gridX + sizeInCells; x++) {
-					grid[y][x] = true;
-				}
-			}
-		}
-
-		function draw(gridX, gridY, sizeInPixels) {
-			const x = gridX * minSize;
-			const y = gridY * minSize;
-			const type = Math.random() < 0.5;
-
-			ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
-			ctx.fillRect(x, y, sizeInPixels, sizeInPixels);
-			// TODO: Linie anpassen und wiederholen
-			ctx.strokeStyle = '#404040';
-			// ctx.strokeStyle = type ? '#fff' : '#000';
-			ctx.lineWidth = 1;
-			ctx.strokeRect(x, y, sizeInPixels, sizeInPixels);
-		}
-
-		function fill() {
-			// Process each size with its corresponding percentage
-			for (let sizeIndex = 0; sizeIndex < sizes.length; sizeIndex++) {
-				const size = sizes[sizeIndex];
-				const sizeInCells = size / minSize;
-				const percentage = sizeIndex < percentages.length ? percentages[sizeIndex] : 0;
-
-				if (sizeIndex < sizes.length - 1) {
-					// For all sizes except the last, apply percentage
-					const positions = [];
-					for (let gridY = 0; gridY < grid.length; gridY++) {
-						for (let gridX = 0; gridX < grid[0].length; gridX++) {
-							if (canPlace(gridX, gridY, sizeInCells)) {
-								positions.push({ gridX, gridY });
-							}
-						}
-					}
-					positions.sort(() => Math.random() - 0.5);
-
-					const target = Math.floor(positions.length * percentage / 100);
-					for (let i = 0; i < target; i++) {
-						const { gridX, gridY } = positions[i];
-						if (canPlace(gridX, gridY, sizeInCells)) {
-							markOccupied(gridX, gridY, sizeInCells);
-							draw(gridX, gridY, size);
-						}
-					}
-				} else {
-					// Fill remaining space with the smallest size
-					for (let gridY = 0; gridY < grid.length; gridY++) {
-						for (let gridX = 0; gridX < grid[0].length; gridX++) {
-							if (canPlace(gridX, gridY, sizeInCells)) {
-								markOccupied(gridX, gridY, sizeInCells);
-								draw(gridX, gridY, size);
-							}
-						}
-					}
-				}
-			}
-		}
-
-		fill();
-
-		window.addEventListener('resize', () => {
-			canvas.width = window.innerWidth;
-			canvas.height = window.innerHeight;
-			grid = Array(Math.ceil(canvas.height / minSize))
-				.fill(null)
-				.map(() => Array(Math.ceil(canvas.width / minSize)).fill(false));
-			ctx.clearRect(0, 0, canvas.width, canvas.height);
-			fill();
-		});
-	}
-
-	fillCanvasWithSquares(128, 4, [2, 24, 64]);
-</script>
-{% endblock %}

source/view/demo/examples/game/menu.liquid

@@ -1,16 +0,0 @@
----
-title: Menu
-tags:
-- game
----
-{% assign bodyClass = 'body_menu' -%}
-{% layout 'hippie-view/simple.liquid' %}
-
-{% block body %}
-{% render 'hippie-view/partials/game-menu.liquid', links: menu %}
-<footer>
-	{% brand 'brand', 'last' %}
-	<p>Marke</p>
-	{% endbrand %}
-</footer>
-{% endblock %}

source/view/demo/examples/game/mwo.liquid

@@ -1,101 +0,0 @@
----
-title: MWO
-tags:
-- game
----
-{% assign bodyClass = 'body_mwo' -%}
-{% layout 'hippie-view/game.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>
-	<nav>
-		<span>Drag/Attraction</span>
-		<button>Toggle</button>
-		<hr class="vertical">
-		<div class="group_nav">
-			<label>Strength</label>
-			<input min="0" max="100" value="16" type="range">
-			<span>0.15</span>
-		</div>
-		<div class="group_nav">
-			<label>Distance</label>
-			<input min="48" max="512" value="256" type="range">
-			<span>256</span>
-		</div>
-	</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/view/demo/examples/game/tfw.liquid

@@ -1,351 +0,0 @@
----
-title: TFW
-tags:
-- game
----
-{% assign bodyClass = 'body_tfw' -%}
-{% layout 'hippie-view/game.liquid' %}
-
-{% block body %}
-<header class="io">
-	<button data-action="escape">☰</button>
-	<button data-direction="previous">&lt;</button>
-	<button data-view="quest">Quests</button>
-	<button data-view="region">Regions</button>
-	<button data-view="vendor">Vendors</button>
-	<button data-view="manufacture">Manufacture</button>
-	<button data-view="character">Characters</button>
-	<button data-view="stash">Stash</button>
-	<button data-view="secret">Secret Storage</button>
-	<button data-view="squad">Squads</button>
-	<button data-view="ready">Ready Room</button>
-	<button data-direction="next">&gt;</button>
-</header>
-<div id="viewQuest" class="view">
-	<main>
-		<nav>
-			<div class="important">Filter</div>
-			<input placeholder="Search" aria-label="search" type="text">
-			<select name="type" aria-label="type">
-				<option value="" selected>Type</option>
-				<option value="all">All</option>
-				<option value="assasin">Assasination</option>
-				<option value="loot">Looting</option>
-				<option value="extract">Extract</option>
-				<option value="fetch">Fetch</option>
-				<option value="kill">Kill</option>
-			</select>
-		</nav>
-		<div>
-			<div>
-				<table id="factionSelection" data-type="faction">
-					<colgroup>
-						<col class="g">
-						<col class="c">
-						<col class="f">
-						<col class="s">
-					</colgroup>
-					<tr>
-						<th>Giver</th>
-						<th>Category</th>
-						<th>Faction</th>
-						<th>Status</th>
-					</tr>
-					<tr>
-						<td class="background">
-							<span>Scavengers</span>
-						</td>
-						<td class="subtle">All</td>
-						<td class="subtle">Scav</td>
-						<td class="subtle">Open</td>
-					</tr>
-					<tr>
-						<td class="background">
-							<span>Eastern Consulate</span>
-						</td>
-						<td class="subtle">All</td>
-						<td class="subtle">Eurasia</td>
-						<td class="subtle">Closed</td>
-					</tr>
-					<tr>
-						<td class="background">
-							<span>СПЕЦНАЗ Commission</span>
-						</td>
-						<td class="subtle">All</td>
-						<td class="subtle">Euruska</td>
-						<td class="subtle">Open</td>
-					</tr>
-				</table>
-				<table id="questSelection" data-type="quest">
-					<colgroup>
-						<col class="l">
-						<col class="q">
-						<col class="t">
-					</colgroup>
-					<tr>
-						<th>Location</th>
-						<th>Quest</th>
-						<th>Type</th>
-					</tr>
-					<tr>
-						<td class="background">
-							<span>Scorched Earth</span>
-						</td>
-						<td>...</td>
-						<td class="subtle">Available</td>
-					</tr>
-					<tr>
-						<td class="background">
-							<span>Location name</span>
-						</td>
-						<td>...</td>
-						<td class="subtle">Available</td>
-					</tr>
-				</table>
-			</div>
-			<div>
-				<table id="questActive" data-type="quest">
-					<colgroup>
-						<col class="l">
-						<col class="q">
-						<col class="s">
-					</colgroup>
-					<thead>
-					<tr>
-						<th colspan="3">Active quests (Max.: 4)</th>
-					</tr>
-					</thead>
-					<tbody>
-					<tr>
-						<td class="background"></td>
-						<td>King Of Kings</td>
-						<td class="subtle">Active</td>
-					</tr>
-					<tr class="complete">
-						<td class="background"></td>
-						<td>Garage Days Pt. 1</td>
-						<td class="subtle">Complete</td>
-					</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-		<aside>
-			<div class="faction">
-				<div class="background">
-					<hgroup>
-						<h2>Western Embassy</h2>
-						<p>Europa</p>
-					</hgroup>
-				</div>
-				<p>A hijacked medium mech dubbed the "Rat King" ...</p>
-				<hr class="dotted">
-				<p>Collect Rat King residue.</p>
-				<hr>
-				<p>Multiple rig container upgrades, 5000&nbsp;CR, 5000&nbsp;XP, 2 days of water, +&nbsp;Scav faction
-					rating</p>
-			</div>
-			<div class="quest">
-				<div class="background">
-					<h2>King Of Kings</h2>
-				</div>
-				<p>A hijacked medium mech dubbed the "Rat King" ...</p>
-				<hr class="dotted">
-				<p>Collect Rat King residue.</p>
-				<hr>
-				<p>Multiple rig container upgrades, 5000&nbsp;CR, 5000&nbsp;XP, 2 days of water, +&nbsp;Scav faction
-					rating</p>
-			</div>
-		</aside>
-	</main>
-	<footer class="io">
-		<button data-action="back">Back</button>
-		<button data-action="accept">Accept quest</button>
-		<button data-action="abandon">Abandon quest</button>
-		<button data-action="claim">Claim reward</button>
-	</footer>
-</div>
-<div id="viewRegion" class="view"></div>
-<div id="viewVendor" class="view"></div>
-{% endblock %}
-
-{%- block script %}
-{{ block.super -}}
-<script>
-	const menu = document.querySelector('body > header');
-	const placeholder = document.querySelectorAll('.background');
-	const viewQuest = document.getElementById('viewQuest');
-
-	class Menu {
-		constructor(element, options = {}) {
-			this._element = element;
-			this._siblings = element.querySelectorAll('button[data-view]');
-			this.default = options.default || 'quest';
-
-			element.addEventListener('click', this.onClick.bind(this)); // Bind to get the clicked element and not the DOM element of the class
-
-			this.#init();
-		}
-
-		escape() {
-			console.log('escape');
-		}
-
-		#init() {
-			const currentBtn = Array.from(this._siblings).find(
-				el => el.dataset.view === this.default
-			);
-
-			currentBtn.classList.add('active');
-			this.changeView(this.default);
-		}
-
-		// TODO: Sollte auch die Menüauswahl anpassen
-		changeView(type) {
-			console.debug(type);
-			const id = 'view' + capitalizeFirstLetter(type);
-			const views = document.querySelectorAll('.view');
-
-			for (const view of views) {
-				view.style.display = 'none';
-			}
-
-			document.getElementById(id).style.display = 'flex';
-		}
-
-		onClick(event) {
-			const siblings = this._siblings;
-			const action = event.target.dataset.action;
-			const view = event.target.dataset.view;
-			const direction = event.target.dataset.direction;
-
-			if (event.button !== 0) return;
-
-			if (direction) {
-				const currentBtn = this._element.querySelector('.active');
-				let newButton, newView = undefined;
-
-				if (currentBtn === null) return;
-
-				if (direction === 'next') {
-					newButton = currentBtn.nextElementSibling;
-					newView = currentBtn.nextElementSibling.dataset.view;
-				} else {
-					newButton = currentBtn.previousElementSibling;
-					newView = currentBtn.previousElementSibling.dataset.view;
-				}
-
-				if (!newButton.dataset.view) {
-					newButton = direction === 'next' ? siblings[0] : siblings[siblings.length - 1];
-				}
-
-				currentBtn.classList.remove('active');
-				newButton.classList.add('active');
-				this.changeView(newView);
-			}
-
-			if (view) {
-				for (const sibling of siblings) {
-					sibling.classList.remove('active');
-				}
-
-				this.changeView(view);
-				event.target.classList.add('active');
-			}
-
-			if (action) this[action]();
-		};
-	}
-
-	// TODO: Allgemeinere Umsetzung anstreben
-	viewQuest.addEventListener('click', (event) => {
-		const tableTarget = event.target.closest('table');
-		const rows = viewQuest.querySelectorAll('tr');
-		const rowTarget = event.target.closest('tr');
-		const rowFaction = event.target.closest('#factionSelection tr');
-		const rowSelection = event.target.closest('#questSelection tr');
-		const rowActive = event.target.closest('#questActive tr:not(.complete)');
-		const rowComplete = event.target.closest('#questActive tr.complete');
-		const buttonAccept = viewQuest.querySelector('footer button[data-action=accept]');
-		const buttonAbandon = viewQuest.querySelector('footer button[data-action=abandon]');
-		const buttonClaim = viewQuest.querySelector('footer button[data-action=claim]');
-
-		if (event.button !== 0) return;
-
-		if (rowTarget) {
-			const rowsRemain = Array.from(rows).filter(
-				element => element !== rowTarget
-			);
-			const type = tableTarget.dataset.type;
-			const tableSibling = tableTarget.nextElementSibling;
-
-			rowsRemain.forEach((element) => {
-				element.classList.remove('active');
-			});
-
-			rowTarget.classList.add('active');
-
-			viewQuest.querySelector('aside > :not(.' + type + ')').style.display = 'none';
-			viewQuest.querySelector('aside > .' + type).style.display = 'block';
-
-			if (rowFaction) {
-				tableTarget.style.display = 'none';
-				tableSibling.style.display = 'table';
-			}
-
-			if (rowSelection) {
-				buttonClaim.style.display = 'none';
-				buttonAbandon.style.display = 'none';
-				buttonAccept.style.display = 'inline-block';
-			}
-
-			if (rowActive) {
-				buttonAccept.style.display = 'none';
-				buttonClaim.style.display = 'none';
-				buttonAbandon.style.display = 'inline-block';
-			}
-
-			if (rowComplete) {
-				buttonAccept.style.display = 'none';
-				buttonAbandon.style.display = 'none';
-				buttonClaim.style.display = 'inline-block';
-			}
-		} else {
-			deselector('quest');
-		}
-	});
-
-	placeholder.forEach(element => {
-		const hue = randomIntFrom(0, 360);
-		const grayscale = randomFloatFrom(0, 1);
-
-		new RandomPixelPlaceholder(element, {
-			width: Math.floor(element.clientWidth),
-			height: Math.floor(element.clientHeight),
-			colors: ['#fad803', '#d30a51', '#273f8b', '#b7e0f0', '#52bed1', '#0c85ff'],
-			filter: 'grayscale(' + grayscale + ') hue-rotate(' + hue + 'deg)',
-			type: 'img'
-		});
-	});
-
-	new Menu(menu);
-
-	function deselector(type) {
-		const id = 'view' + capitalizeFirstLetter(type);
-		const view = document.getElementById(id);
-		const rows = view.querySelectorAll('tr');
-		const buttonAccept = view.querySelector('footer button[data-action=accept]');
-		const buttonAbandon = view.querySelector('footer button[data-action=abandon]');
-		const buttonClaim = view.querySelector('footer button[data-action=claim]');
-
-		for (const row of rows) {
-			row.classList.remove('active');
-		}
-
-		view.querySelector('.' + type).style.opacity = 0;
-		buttonAbandon.style.display = 'none';
-		buttonAccept.style.display = 'none';
-		buttonClaim.style.display = 'none';
-	}
-</script>
-{% endblock %}