feat: Add start screen

- Rename existing ui start screen to tile
- Add start screen
- Search input for DuckDuckGo
- Unfinished portal content

source/screens/demo/examples/start.liquid

@@ -0,0 +1,84 @@
+---
+title: Start
+tags:
+- demoExample
+---
+{% assign pageBase = "../../" -%}
+{% assign pageId = page.fileSlug -%}
+{% assign bodyClass = "body_start" -%}
+{% layout "hippie/full.liquid" %}
+
+{% block body %}
+<main>
+	<form id="www-search" class="flex inline" action="https://duckduckgo.com/">
+		<input id="query" class="input_io" name="q" placeholder="Suchbegriff" type="text" required/>
+		<input 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 %}
+{{ block.super -}}
+<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('query').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,5 +1,5 @@
 ---
-title: Start
+title: Tile
 tags:
 - ui
 ---

source/style/demo.scss

@@ -13,4 +13,5 @@
 @use "modules/portal/portal_module";
 @use "modules/songbook/songbook_module";
 @use "modules/demo/demo_module";
+@use "modules/start";
 // @use "modules/YOUR-MODULE/YOUR-FILES";

source/style/modules/_start.scss

@@ -0,0 +1,15 @@
+@use "../../hippie-style/hippie";
+
+.body_start {
+	main {
+		@extend .sec_main_center;
+	}
+
+	#www-search {
+		input[type="text"] {
+			flex: 1;
+			padding: hippie.$padding_basic;
+			line-height: hippie.$line_text_basic;
+		}
+	}
+}