fix: Spelling in README

Create new repository hippie-view for _includes.

.eleventy.js

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

.gitmodules

@@ -2,3 +2,6 @@
 	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": {
-		"HIPPIE": false,
-		"hippie": true,
-		"viewHover": true,
-		"basicEase": true,
-		"debugOn": true,
-		"TimeDisplay": true,
 		"DateDisplay": true,
+		"HIPPIE": false,
+		"HippieTaskBar": true,
+		"TimeDisplay": true,
+		"basicEase": true,
+		"centerElementUnderCursor": false,
 		"checkButtonAndTarget": false,
+		"debugOn": true,
 		"getClosestEdgeToElement": false,
 		"getClosestEdgeToMouse": false,
-		"centerElementUnderCursor": false,
+		"hippie": true,
-		"setAttributesAccordingToPosition": false,
 		"randomIntFrom": false,
+		"readJsonFile": false,
 		"replaceLineBreaks": false,
-		"HippieTaskBar": true
+		"viewHover": true
 	}
 }

CHANGELOG.md

@@ -1,52 +1,52 @@
-| Commit | Version | Description |
+| Commit                                   | Version | Description                                     |
-| :--- | :----: | :--- |
+|:-----------------------------------------|:-------:|:------------------------------------------------|
-| 6095870ce33fd3775718a1de3d33f604fd0630ab | 0.4.2 | Javascript again |
+| 6095870ce33fd3775718a1de3d33f604fd0630ab |  0.4.2  | Javascript again                                |
-| 50a1a6d9257b272e076c2e3b5bac39c7d17b2793 | 0.5.0 | Changes to content |
+| 50a1a6d9257b272e076c2e3b5bac39c7d17b2793 |  0.5.0  | Changes to content                              |
-| e2bbe9273a292a3806de1599f752258a2721d067 | 0.5.1 | |
+| e2bbe9273a292a3806de1599f752258a2721d067 |  0.5.1  |                                                 |
-| 3d4eef5eb0a1632b43e1e3372e38a70cd4b58914 | 0.5.2 | |
+| 3d4eef5eb0a1632b43e1e3372e38a70cd4b58914 |  0.5.2  |                                                 |
-| 371cb450f81cd0d692c9005952af35ec066e01e1 | 0.6.0 | New es6 coding standard |
+| 371cb450f81cd0d692c9005952af35ec066e01e1 |  0.6.0  | New es6 coding standard                         |
-| 175816c3595d783e7d8b48f5336fbdd54dae145b | 0.6.1 | |
+| 175816c3595d783e7d8b48f5336fbdd54dae145b |  0.6.1  |                                                 |
-| 67e3cc1eca359bc2b927b8e971ccd7ba71f4c5a2 | 0.6.2 | |
+| 67e3cc1eca359bc2b927b8e971ccd7ba71f4c5a2 |  0.6.2  |                                                 |
-| abeb843718988fab978de7c75d6d45806f5d35a7 | 0.6.3 | |
+| abeb843718988fab978de7c75d6d45806f5d35a7 |  0.6.3  |                                                 |
-| 4401761a6bec9db19293353942479aea7bb8ead1 | 0.6.4 | |
+| 4401761a6bec9db19293353942479aea7bb8ead1 |  0.6.4  |                                                 |
-| 83464a1cf4ba3efc6382eafb6f68f106c6650161 | 0.6.5 | |
+| 83464a1cf4ba3efc6382eafb6f68f106c6650161 |  0.6.5  |                                                 |
-| 6f95393409b502fef9ad9677b3c1ed1fe07ecc28 | 0.6.6 | |
+| 6f95393409b502fef9ad9677b3c1ed1fe07ecc28 |  0.6.6  |                                                 |
-| 63b54f2749ed5a4d9a7a53c27540e7d6f8dff63d | 0.6.7 | |
+| 63b54f2749ed5a4d9a7a53c27540e7d6f8dff63d |  0.6.7  |                                                 |
-| 830037f5e5237d33ad66fe89ba45167a62d87829 | 0.6.8 | |
+| 830037f5e5237d33ad66fe89ba45167a62d87829 |  0.6.8  |                                                 |
-| d205031fff29ee4d48251e30b17090143ae5458c | 0.7.0 | switched to style submodule usage |
+| d205031fff29ee4d48251e30b17090143ae5458c |  0.7.0  | switched to style submodule usage               |
-| d18254b61d87eb3d09d17b93783117dad7d13686 | 0.7.1 | |
+| d18254b61d87eb3d09d17b93783117dad7d13686 |  0.7.1  |                                                 |
-| 9b9b0cb1c631273f574d3cd7618bd799f561db6c | 0.7.2 | |
+| 9b9b0cb1c631273f574d3cd7618bd799f561db6c |  0.7.2  |                                                 |
-| 11b30671d4948dfd30b7da14fe7295f386b54257 | 0.7.3 | |
+| 11b30671d4948dfd30b7da14fe7295f386b54257 |  0.7.3  |                                                 |
-| 767b3024fa3bbededab2a8d665b4b35b55854a1c | 0.7.4 | |
+| 767b3024fa3bbededab2a8d665b4b35b55854a1c |  0.7.4  |                                                 |
-| 5c3cda58b147f16e1b9fdf1ed7b5499651df943d | 0.8.0 | changes to license file and submodule update |
+| 5c3cda58b147f16e1b9fdf1ed7b5499651df943d |  0.8.0  | changes to license file and submodule update    |
-| 8567604ea6b129ded8b0e6108362a30d039235a7 | 0.8.1 | |
+| 8567604ea6b129ded8b0e6108362a30d039235a7 |  0.8.1  |                                                 |
-| b2ea5b01aa47783b5f797310e16f1897e1839eb9 | 0.9.0 | Requirements updated and new nunjucks variables |
+| b2ea5b01aa47783b5f797310e16f1897e1839eb9 |  0.9.0  | Requirements updated and new nunjucks variables |
-| df064b8a942f00dd3277a9dde696e91324dfd166 | 0.9.1 | |
+| df064b8a942f00dd3277a9dde696e91324dfd166 |  0.9.1  |                                                 |
-| d812ed62084c90d4fac18b6c56a6dd3bf9bd7cba | 0.9.2 | |
+| d812ed62084c90d4fac18b6c56a6dd3bf9bd7cba |  0.9.2  |                                                 |
-| 84957f75a017d5d06a32874282d9eb9f3d537534 | 0.9.3 | |
+| 84957f75a017d5d06a32874282d9eb9f3d537534 |  0.9.3  |                                                 |
-| 489786aadc30bb589be769fe627389611c4f71f5 | 0.9.4 | |
+| 489786aadc30bb589be769fe627389611c4f71f5 |  0.9.4  |                                                 |
-| 003a1159231241140a262ae67bb1236978b22ec0 | 0.9.5 | |
+| 003a1159231241140a262ae67bb1236978b22ec0 |  0.9.5  |                                                 |
-| 731c19dd61215b8f373af9100ad5c23f19a4c2a3 | 0.9.6 | |
+| 731c19dd61215b8f373af9100ad5c23f19a4c2a3 |  0.9.6  |                                                 |
-| dd5ff43e1695d2de0b5a0a9614c1f31ad7e7b85b | 0.9.7 | |
+| dd5ff43e1695d2de0b5a0a9614c1f31ad7e7b85b |  0.9.7  |                                                 |
-| dde26ec45eeb8d28a986093b8b5b29d8165e5a11 | 0.9.8 | |
+| dde26ec45eeb8d28a986093b8b5b29d8165e5a11 |  0.9.8  |                                                 |
-| 06ba1113929183f51e8501d440c950e4b4d9f0d2 | 0.9.9 | |
+| 06ba1113929183f51e8501d440c950e4b4d9f0d2 |  0.9.9  |                                                 |
-| 827e6c1cde0aa4ca65e6c170174eae91da9aa4c9 | 0.9.10 | |
+| 827e6c1cde0aa4ca65e6c170174eae91da9aa4c9 | 0.9.10  |                                                 |
-| 202729f9ba098b5ff07f6af43acce7a67007cd1b | 0.9.11 | |
+| 202729f9ba098b5ff07f6af43acce7a67007cd1b | 0.9.11  |                                                 |
-| d22828400125f8572cfbe6243e2521ffab519adf | 0.9.12 | |
+| d22828400125f8572cfbe6243e2521ffab519adf | 0.9.12  |                                                 |
-| bf1a6ca7421a0385f664f864a82850f0805522c0 | 0.9.13 | |
+| bf1a6ca7421a0385f664f864a82850f0805522c0 | 0.9.13  |                                                 |
-| 32215de810546f6ebd7f552816fc5bf3281a0a13 | 0.9.14 | |
+| 32215de810546f6ebd7f552816fc5bf3281a0a13 | 0.9.14  |                                                 |
-| f7dd7c93e3a06bc430fcf4e12f4be3d3b1aa29c6 | 0.10.0 | Added card and portal modules |
+| f7dd7c93e3a06bc430fcf4e12f4be3d3b1aa29c6 | 0.10.0  | Added card and portal modules                   |
-| f54dbe92d912b9e7553a3a2263b009ed05017b0b | 0.10.1 | |
+| f54dbe92d912b9e7553a3a2263b009ed05017b0b | 0.10.1  |                                                 |
-| 6b217b6ebbfcfa2f3e14bdf41e21bb36f88050a5 | 0.10.2 | |
+| 6b217b6ebbfcfa2f3e14bdf41e21bb36f88050a5 | 0.10.2  |                                                 |
-| 534115ff282de4648c294ae78fe768d79e23d379 | 0.10.3 | |
+| 534115ff282de4648c294ae78fe768d79e23d379 | 0.10.3  |                                                 |
-| f7a5481fd2e1d1c96f7e9d82eb2c3db9483b5784 | 0.10.4 | |
+| f7a5481fd2e1d1c96f7e9d82eb2c3db9483b5784 | 0.10.4  |                                                 |
-| 31e896462e7693a4a6ba10d52657caf919e7f482 | 0.10.5 | |
+| 31e896462e7693a4a6ba10d52657caf919e7f482 | 0.10.5  |                                                 |
-| 778d7d14d5e8d4dbcce2f9cb996afbc4d7accf27 | 0.11.0 | logPerf without JQuery |
+| 778d7d14d5e8d4dbcce2f9cb996afbc4d7accf27 | 0.11.0  | logPerf without JQuery                          |
-| 1d7f2eb839472524d73f395365ffb43e8fc5d115 | 0.12.0 | Migration to new home |
+| 1d7f2eb839472524d73f395365ffb43e8fc5d115 | 0.12.0  | Migration to new home                           |
-| 69c04c32349d3d11820da933ed2bbd648fabb040 | 0.12.1 | |
+| 69c04c32349d3d11820da933ed2bbd648fabb040 | 0.12.1  |                                                 |
-| 9415d4d9573a4f2a4e1c479c74c59abe3a69cd57 | 0.12.2 | |
+| 9415d4d9573a4f2a4e1c479c74c59abe3a69cd57 | 0.12.2  |                                                 |
-| 6e7615b44d9ef26ade73a00102878804272cf717 | 0.12.3 | |
+| 6e7615b44d9ef26ade73a00102878804272cf717 | 0.12.3  |                                                 |
-| b6ec313f26dde6b379da16edb65de082c6ca9b65 | 0.12.4 | |
+| b6ec313f26dde6b379da16edb65de082c6ca9b65 | 0.12.4  |                                                 |
-| e856e5311439d5a64478f7cda79998476ebdfe33 | 0.12.5 | |
+| e856e5311439d5a64478f7cda79998476ebdfe33 | 0.12.5  |                                                 |
-| ef9d665849f370b2284ae8d985d9625b5083fe37 | 0.13.0 | Introduced 11ty |
+| ef9d665849f370b2284ae8d985d9625b5083fe37 | 0.13.0  | Introduced 11ty                                 |
-| 3358e1858bc764e520dad65cc614c842b4f66245 | 0.13.1 | |
+| 3358e1858bc764e520dad65cc614c842b4f66245 | 0.13.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,6 +1,5 @@
 # General
 
-- Remove gulp and legacy files
 - Better README with more info for the content section
   - Explain eleventy usage
 - Complete CHANGELOG
@@ -8,6 +7,10 @@
 - 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
@@ -20,6 +23,9 @@
   - Keep placeholder and demo stuff
   - Move other things
   - Prevent styles to be global
+- Adapt bootstrap utility API
+  - https://github.com/twbs/bootstrap/blob/main/scss/utilities/_api.scss
+  - https://github.com/twbs/bootstrap/blob/main/scss/_utilities.scss
 
 # JS
 

package-lock.json

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

source/code/game.js

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

source/code/hippie/app.js

@@ -1,3 +1,5 @@
+/* jshint strict: false */
+
 // TODO: Inhalte angleichen nach Zusammenfassung von app.js und function.js.
 // Benennung und Beschreibungen verbessern.
 
@@ -69,7 +71,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');
@@ -190,13 +192,13 @@ function composeMail(tag, name, prov, suffix, text, topic) {
 		el.innerHTML = elContent + text;
 		el.setAttribute('href', 'mailto:' + mailString + topic);
 	} else {
-		const els = document.getElementsByClassName(tag.slice(1));
+		const elements = document.getElementsByClassName(tag.slice(1));
 
-		for (let el of els) {
+		for (const element of elements) {
-			const elContent = el.innerHTML;
+			const content = element.innerHTML;
 
-			el.innerHTML = elContent + text;
+			element.innerHTML = content + text;
-			el.setAttribute('href', 'mailto:' + mailString + topic);
+			element.setAttribute('href', 'mailto:' + mailString + topic);
 		}
 	}
 }
@@ -392,20 +394,6 @@ 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.
@@ -424,10 +412,10 @@ function randomIntFrom(min, max, pos = 0) {
 	return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos;
 }
 
-function randomFloatFrom(min, max, dec = 0) {
+function randomFloatFrom(min, max, dec = 1) {
 	dec = Math.pow(10, dec);
 
-	return Math.round((Math.random() * (max - min + 1) + min) * dec) / dec;
+	return Math.round((Math.random() * (max - min) + min) * dec) / dec;
 }
 
 /**
@@ -540,11 +528,139 @@ 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
@@ -603,91 +719,6 @@ Clock.prototype.formatDigits = function (val) {
 	return val;
 };
 
-function ongoing() {
-
-	var now = new Date();
-
-	var w = Math.floor(now.getDay());
-	var D = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
-	var DNumb = Math.floor(now.getDate());
-	var MNumb = Math.floor(now.getMonth());
-	var M = ['Januar', 'Februar', 'M&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,9 +3,10 @@ class HippieTaskBar {
 		this.element = element;
 		this.placeholder = placeholder;
 		this.date = null;
+		this.time = null;
 		this.isDragging = false;
 		this.barSize = '';
-		// TODO: Erweitern auf allgemeine Möglichkeiten und dann aus JSON-Datei laden
+		// TODO: Ergänzen und nicht ersetzen
 		this.options = options || {
 			direction: 0,
 			position: 'bottom',
@@ -13,7 +14,8 @@ class HippieTaskBar {
 				year: 'numeric',
 				month: '2-digit',
 				day: '2-digit'
-			}
+			},
+			time: {hour: '2-digit', minute: '2-digit'}
 		};
 
 		this.init();
@@ -25,11 +27,20 @@ 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';
-		this.element.querySelector('.clock').appendChild(dateElement);
+		timeElement.id = 'time';
 		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);
 	}
@@ -111,7 +122,7 @@ class HippieTaskBar {
 				}
 			};
 
-			setAttributesAccordingToPosition(this.placeholder, this.options.position, attributes);
+			this.setAttributesAccordingToPosition(this.placeholder, this.options.position, attributes);
 			centerElementUnderCursor(event, this.placeholder);
 		}
 	}
@@ -142,6 +153,18 @@ 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: {
@@ -182,7 +205,7 @@ class HippieTaskBar {
 			}
 		};
 
-		setAttributesAccordingToPosition(this.element, position, attributes);
+		this.setAttributesAccordingToPosition(this.element, position, attributes);
 
 		switch (position) {
 			case 'right':

source/data/windows.json

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

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

@@ -1,29 +0,0 @@
----
-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/start.liquid

@@ -1,82 +0,0 @@
----
-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/tile.liquid

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

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

@@ -1,13 +0,0 @@
----
-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/style/hippie-style

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

source/style/modules/_clock.scss

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

source/style/modules/_game.scss

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

source/style/modules/_login.scss

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

source/style/modules/_start.scss

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

source/style/modules/game/_mwo.scss

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

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

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

source/style/ui.scss

@@ -4,12 +4,13 @@
 @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;
@@ -178,7 +179,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

@@ -1,41 +0,0 @@
-{% 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

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

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

@@ -1,64 +0,0 @@
-{% 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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,3 +0,0 @@
-{% 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

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

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

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

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

@@ -1,6 +0,0 @@
-{% 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

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

source/templates/hippie/partials/meta.liquid

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

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

@@ -1,43 +0,0 @@
-{% 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

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

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

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

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

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

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

source/templates/hippie/simple.liquid

@@ -1,9 +0,0 @@
-{% 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

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

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

source/view/_data/menu.json

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

source/view/_data/start.json

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

source/view/_includes/hippie-view

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

source/view/demo/art/10print.liquid

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

source/view/demo/art/matrix.liquid

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

@@ -0,0 +1,178 @@
+---
+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/basics.liquid

@@ -4,7 +4,7 @@ tags:
 - demoIndex
 order: 2
 ---
-{% layout 'hippie/page.liquid' %}
+{% layout 'hippie-view/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 version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+			<svg 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>Ein wesentlicher Bestandteil von Hypertext sind <a href="">Verweise</a>
+		<p id="links">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>
+		<aside class="left">
 			<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/partials/placeholder-flag.liquid', type: 'img', width: '128', desc: 'Fahne von Interaktionsweise' %}
+		{% render 'hippie-view/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/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '128', desc: 'Fahne von Interaktionsweise' %}
+		{% render 'hippie-view/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="grid grid_column_2">
+			<div class="dis_grid grid_column_2">
 				<label for="demo__input">Input:</label><input class="input_io" type="text" value="love"
 															  readonly="readonly" id="demo__input">
 				<label for="demo__output">Output:</label><input class="input_io" type="text" value="happiness"
@@ -813,7 +813,7 @@ order: 2
 			auch eine eigene Beschriftung erhalten.</p>
 		<fieldset>
 			<legend>Einfache Eingabeelemente</legend>
-			<div class="grid grid_column_2">
+			<div class="dis_grid grid_column_2">
 				<label>Schaltflächen:</label>
 				<div>
 					<button>Senden</button>
@@ -846,7 +846,7 @@ order: 2
 		</fieldset>
 		<fieldset>
 			<legend>Einfache Eingabeelemente mit Stil</legend>
-			<div class="grid grid_column_2">
+			<div class="dis_grid grid_column_2">
 				<label>Schaltflächen:</label>
 				<div class="flex inline">
 					<button class="button_io">Senden</button>
@@ -883,7 +883,7 @@ order: 2
 				Information oder lockern das Erscheinungsbild auf.</p>
 			<p>Hier nun eine Liste weiterer Arten von Eingabefeldern:</p>
 			<form action="">
-				<div class="grid grid_column_2">
+				<div class="dis_grid grid_column_2">
 					<label class="">Farbauswahl<br>
 						<code>&lt;input[type="color"]&gt;</code>
 					</label>
@@ -948,7 +948,7 @@ order: 2
 		<div class="box_placeholder"></div>
 		<hr class="hidden"/>
 		<div class="box_placeholder">
-			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+			<svg 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/view/demo/components.liquid

@@ -4,7 +4,7 @@ tags:
 - demoIndex
 order: 3
 ---
-{% layout 'hippie/page.liquid' %}
+{% layout 'hippie-view/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, recht ausgerichtet.</aside>
+			<aside class="right">Seitenbereich, rechts 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/partials/footer-pinned.liquid' %}
+			{% render 'hippie-view/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.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre>
+		<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>
 		<table class="width_full fix">
 			<thead>
 			<tr>
-				<th class="cell_pre" scope="col"></th>
+				<th class="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="cell_pre">Vorspalte</td>
+				<td class="pre">Vorspalte</td>
 				<td>Eine</td>
 				<td></td>
 				<td></td>
 			</tr>
 			<tr>
-				<td class="cell_pre">1</td>
+				<td class="pre">1</td>
 				<td></td>
 				<td>erweiterte</td>
 				<td></td>
 			</tr>
 			<tr>
-				<td class="cell_pre">2</td>
+				<td class="pre">2</td>
 				<td></td>
 				<td></td>
 				<td>Tabelle</td>
 			</tr>
 			</tbody>
 		</table>
-		<pre class="pre_code"><code>table.width_full.stripe.fix.free>tr>td*3</code></pre>
+		<pre class="pre_code"><code>table.width_full.striped.fix.free>tr>td*3</code></pre>
-		<table class="width_full stripe fix free">
+		<table class="width_full striped 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.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>
+		<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>
 		<table>
 			<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
 			<thead>
@@ -278,6 +278,27 @@ 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/view/demo/examples/blog.liquid

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

source/view/demo/examples/card.liquid

@@ -4,12 +4,12 @@ tags:
 - demoExample
 ---
 {% assign pageClass = "html_card" %}
-{% layout 'hippie/simple.liquid' %}
+{% layout 'hippie-view/simple.liquid' %}
 
 {% block body %}
 <div class="card_bkg">
 	<div id="dither"></div>
-	{% render 'hippie/partials/placeholder-flag.liquid', type: '', id: 'flag' %}
+	{% render 'hippie-view/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/view/demo/examples/clock.liquid

@@ -4,7 +4,7 @@ tags:
 - demoExample
 ---
 {% assign bodyClass = 'body_clock' -%}
-{% layout 'hippie/simple.liquid' %}
+{% layout 'hippie-view/simple.liquid' %}
 
 {% block body %}
 <header class="io pos_fix pin_top pin_right pin_left">
@@ -27,6 +27,8 @@ tags:
 <script>
 	class HippieClock {
 		constructor(element, date = new Date(), options = {}) {
+			this.element = element;
+			this.date = date;
 			this.defaults = {
 				debug: true,
 				size: Math.floor(this.getSize().value * 0.9),
@@ -35,8 +37,6 @@ tags:
 				overlay: false
 			};
 			this.options = {...this.defaults, ...options};
-			this.element = element;
-			this.date = date;
 			this.values = this.getTime();
 			this.parts = [];
 			this.shapes = [];
@@ -61,6 +61,7 @@ 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');
@@ -77,13 +78,16 @@ 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 => {
@@ -303,7 +307,6 @@ tags:
 		}
 
 		#createContext(names) {
-			let parts = [];
 			const wrap = document.createElement('div');
 
 			wrap.style.position = 'relative';
@@ -444,6 +447,7 @@ tags:
 	clock.draw();
 
 	// TODO: Alternative mit requestAnimationFrame()
+	// TODO: Möglichkeit für Start/Stop wie bei TimeDisplay
 	setInterval(() => {
 		clock.update();
 	}, 1000);

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

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

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

@@ -4,7 +4,7 @@ tags:
 - game
 ---
 {% assign bodyClass = 'body_intro' -%}
-{% layout 'hippie/app.liquid' %}
+{% layout 'hippie-view/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/view/demo/examples/game/menu.liquid

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

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

@@ -0,0 +1,351 @@
+---
+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 %}

source/view/demo/examples/hello.md

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

source/view/demo/examples/portal.liquid

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

source/view/demo/examples/songbook.liquid

@@ -3,7 +3,7 @@ title: Songbook
 tags:
 - demoExample
 ---
-{% layout 'hippie/simple.liquid' %}
+{% layout 'hippie-view/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/partials/song.liquid', index: forloop.index0, data: piece.data, content: piece.content %}
+		{% render 'hippie-view/partials/song.liquid', index: forloop.index0, data: piece.data, content: piece.content %}
 	{%- endfor -%}
 	<hr/>
 	<address>{% text hippie.placeholders.name %}</address>

source/view/demo/examples/start.liquid

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

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

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

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

@@ -3,7 +3,7 @@ title: Drag
 tags:
 - ui
 ---
-{% layout 'hippie/app.liquid' %}
+{% layout 'hippie-view/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/partials/frame-header.liquid' %}
+			{% render 'hippie-view/partials/frame-header.liquid' %}
 			<main></main>
-			{% render 'hippie/partials/frame-mode.liquid' %}
+			{% render 'hippie-view/partials/frame-mode.liquid' %}
 		</div>
 	</div>
 </div>

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

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

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

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

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

@@ -4,15 +4,15 @@ tags:
 - ui
 ---
 {% assign bodyClass = 'body_frame' -%}
-{% layout 'hippie/app.liquid' %}
+{% layout 'hippie-view/app.liquid' %}
 
 {% block body %}
-{% render 'hippie/partials/frame-header.liquid' %}
+{% render 'hippie-view/partials/frame-header.liquid' %}
 <main class="io">
 	<section>
 		<header class="io">
 			<nav>
-				<div class="group-input">
+				<div class="group_nav">
 					<input id="setSize" value="5" min="1" max="10" step="1" type="range"/>
 					<label class="right" for="setSize">Größe</label>
 				</div>
@@ -27,10 +27,10 @@ tags:
 			<div>B</div>
 			<div>C</div>
 		</div>
-		{% render 'hippie/partials/frame-status.liquid' %}
+		{% render 'hippie-view/partials/frame-status.liquid' %}
 	</section>
 </main>
-{% render 'hippie/partials/frame-mode.liquid' %}
+{% render 'hippie-view/partials/frame-mode.liquid' %}
 {% endblock %}
 
 {%- block script %}

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

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

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

@@ -4,19 +4,19 @@ tags:
 - ui
 ---
 {% assign bodyClass = 'body_frame' -%}
-{% layout 'hippie/app.liquid' %}
+{% layout 'hippie-view/app.liquid' %}
 
 {% block body %}
-{% render 'hippie/partials/frame-header.liquid' %}
+{% render 'hippie-view/partials/frame-header.liquid' %}
 <main class="io">
 	<section>
 		<header class="io">
 			<nav>
-				<div class="group-input">
+				<div class="group_nav">
 					<button id="addEntry" title="Add entry">
 						<i class="bi bi-plus-circle"></i>
 					</button>
-					<div class="group-input-wrap"><input id="setScroll" type="checkbox"></div>
+					<div class="wrap_input"><input id="setScroll" type="checkbox"></div>
 					<label for="setScroll">Scroll to new entry</label>
 				</div>
 			</nav>
@@ -24,8 +24,8 @@ tags:
 				<button id="tglIndex" title="Toggle index column">
 					<i class="bi bi-hash"></i>
 				</button>
-				<div class="group-input">
+				<div class="group_nav">
-					<select id="sltNum" name="position-number">
+					<select id="sltNum" name="position-number" aria-label="numbering">
 						<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">
+		<table id="content" class="draggable content horizontal">
 			<thead>
 			<tr>
-				<th class="min" scope="col" title="Index">#</th>
+				<th scope="col" title="Index">#</th>
-				<th class="min" scope="col"></th>
+				<th scope="col"></th>
 				<th scope="col" title="Position">#</th>
 				<th scope="col">Number</th>
 				<th scope="col">Name</th>
-				<th scope="col">Description</th>
+				<th class="max" 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 class="min" scope="col"></th>
+				<th scope="col"></th>
 			</tr>
 			</thead>
 			<tbody id="positions"></tbody>
 		</table>
-		{% render 'hippie/partials/frame-status.liquid' %}
+		{% render 'hippie-view/partials/frame-status.liquid' %}
 	</section>
 </main>
 <template id="rowDefault">
@@ -62,25 +62,26 @@ 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><input class="input_io" name="number" aria-label="number" type="text"></td>
-		<td></td>
+		<td><input class="input_io" name="name" aria-label="name" type="text"></td>
 		{% comment %}<td class="ellipsis"></td>{% endcomment %}
 		<td>
-			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
+			<textarea class="fit" name="description" cols="64" rows="2" aria-label="description"></textarea>
 		</td>
-		<td><input class="input_io" name="amount" type="number"></td>
+		<td><input class="input_io" name="amount" aria-label="amount" type="number"></td>
 		<td>
-			<select class="io_select" name="units">
+			<select class="io_select" name="unit" aria-label="unit">
 				<option value="">None</option>
 				<option value="piece">Piece(s)</option>
 				<option value="hour">Hour(s)</option>
 			</select>
 		</td>
-		<td class="unit"></td>
+		<td><input class="input_io" name="price" aria-label="price" type="text"></td>
 		<td class="unit"></td>
 		<td class="io">
 			<nav>
@@ -96,19 +97,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"></textarea>
+			<textarea class="fit" name="description" cols="64" rows="2" aria-label="description"></textarea>
 		</td>
-		<td><input name="amount" type="number"></td>
+		<td><input name="amount" aria-label="number" type="number"></td>
 		<td>
-			<select name="units">
+			<select name="unit" aria-label="unit">
 				<option value="">None</option>
 				<option value="piece">Piece(s)</option>
 				<option value="hour">Hour(s)</option>
@@ -130,49 +131,44 @@ 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 colspan="7">
-		<td colspan="6">
+			<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 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>
 <template id="rowGroup">
-	<tr draggable="true">
+	<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 title="Expand"><i class="bi bi-arrows-expand"></i></button>
+				<button name="group" title="Expand"><i class="bi bi-arrows-expand"></i></button>
 			</nav>
 		</td>
 		<td class="pos-num"></td>
-		<td class="rigid"></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>
-		{% comment %}<td class="ellipsis"></td>{% endcomment %}
+		<td class="pos-num"></td>
-		<td>
+		<td colspan="7">Content</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>
@@ -181,9 +177,15 @@ tags:
 			</nav>
 		</td>
 	</tr>
+	<tr class="footer">
+		<th scope="row"></th>
+		<td></td>
+		<td class="pos-num"></td>
+		<td colspan="8">End</td>
+	</tr>
 </template>
 
-{% render 'hippie/partials/frame-mode.liquid' %}
+{% render 'hippie-view/partials/frame-mode.liquid' %}
 {% endblock %}
 
 {%- block script %}
@@ -226,40 +228,44 @@ tags:
 	tbodyPosition.addEventListener('click', (event) => {
 		const rows = tbodyPosition.querySelectorAll('tr');
 		const rowTarget = event.target.closest('tr');
+		const groupTarget = event.target.closest('[name="group"]');
 
-		if (rowTarget && event.button === 0) {
+		if (event.button !== 0) return;
-			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 clone = cloneRow();
+		const t = Math.random();
-		const tr = clone.querySelector('tr');
+		let type = undefined;
-		const th = clone.querySelector('th');
-		const td = clone.querySelectorAll('td');
 
-		const j = i % placeholderNames.length;
+		if (t < .2) {
-		const k = randomIntFrom(0, placeholderContents.length - 1);
+			type = 'default';
-		const amount = randomIntFrom(1, 100);
+		} else if (t >= .2 && t < .4) {
-		const price = randomFloatFrom(1, 10000, 2);
+			type = 'text';
-		const sum = amount * price;
+		} else if (t >= .4 && t < .5) {
+			type = 'group';
+		} else {
+			type = 'article';
+		}
 
-		tr.setAttribute('data-id', i);
+		tbodyPosition.appendChild(cloneRow(i, type));
-		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');
@@ -292,7 +298,7 @@ tags:
 		const cells = content.querySelectorAll('th:first-child');
 		const isHidden = cells[0].classList.contains('di_none');
 
-		for (cell of cells) {
+		for (const cell of cells) {
 			if (isHidden) {
 				cell.classList.remove('di_none');
 			} else {
@@ -308,7 +314,7 @@ tags:
 		const clone = cloneRow();
 		const viewportHeight = window.innerHeight;
 		const elementActive = tbodyPosition.querySelector('tr.active');
-		let elementNew = undefined;
+		let elementNew;
 		let elementBound = undefined;
 
 		if (elementActive) {
@@ -377,11 +383,51 @@ tags:
 		console.debug('Drop');
 	});
 
-	function cloneRow(type = 'default') {
+	function cloneRow(index, type = 'article') {
-		type = 'row' + capitalizeFirstLetter(type);
+		const id = 'row' + capitalizeFirstLetter(type);
 
-		const rowFragment = document.getElementById(type).content;
+		const rowFragment = document.getElementById(id).content;
-		// TODO: Datenübergabe ergänzen und direkt hier in die Node aufnehmen
+		const tr = rowFragment.querySelector('tr');
+		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);
 	}
@@ -395,5 +441,22 @@ 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/view/demo/examples/ui/tui.liquid

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

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

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

source/view/demo/index.liquid

@@ -1,10 +1,10 @@
 ---
-permalink: "{{ hippie.demoPath }}"
+permalink: "{{ hippie.permalink }}"
 title: Index
 ---
 {% assign pageId = page.fileSlug -%}
 {% assign pageClass = 'h_full_view' -%}
-{% layout 'hippie/full.liquid' %}
+{% layout 'hippie-view/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.njk</code>
+			<code>index.liquid|njk</code>
 			inside the
-			<i>source/screens</i>
+			<i>source/view</i>
 			folder. You can also create a
 			<code>data.json</code>
 			file inside the
-			<i>source/templates</i>
+			<i>source/view</i>
-			folder as a data source for your nunjucks files.</p>
+			folder as a global data source for your template files.</p>
 		<p>For a very basic start you can make a copy of the demo page
-			<code>blank.njk</code>. You can find it at
+			<code>blank.liquid|njk</code>. You can find it at
-			<i>/source/screens/demo</i>.</p>
+			<i>/source/view/demo/pages</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,6 +64,17 @@ 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/view/demo/introduction.liquid

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

source/view/demo/layouts.liquid

@@ -4,7 +4,7 @@ tags:
 - demoIndex
 order: 4
 ---
-{% layout 'hippie/page.liquid' %}
+{% layout 'hippie-view/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/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '256', desc: 'Avatar' %}
+				{% render 'hippie-view/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/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %}
+			{% render 'hippie-view/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %}
 		</div>
 	</article>
 	<article>

source/view/demo/pages/blank.liquid

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

source/view/demo/pages/default.liquid

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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