feat: New ui index

Init example starts like an application with fullscreen steps leading to an idle or menu state.
Each step has specific events to trigger the next step.

- Add index screen to ui
- Add own script
- Update ui style

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

@@ -0,0 +1,73 @@
+---
+title: Init
+tags: 
+  - demoExample
+  - index
+  - ui
+---
+{% set pageId = "init" %}
+{% set pageClass = "html_ui" %}
+
+{% extends "demo/_app.njk" %}
+
+{% block title %}{{ title }}
+{% endblock %}
+
+{% block links %}
+		<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+{% endblock %}
+
+{% block head %}
+		{{ super() }}
+{% endblock %}
+
+{% block body %}
+		<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
+			<p>Hold <kbd>space</kbd> to skip.</p>
+		</div>
+		<div id="intro" class="op_hide">
+			<div class="brand">
+				{# <img src="" alt="Brand logo"> #}
+				<svg
+					width="128"
+					height="128"
+					viewBox="0 0 128 128"
+					version="1.1"
+					xmlns="http://www.w3.org/2000/svg"
+					xmlns:svg="http://www.w3.org/2000/svg">
+					<g>
+						<rect
+							style="display:inline;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-dasharray:none"
+							width="126"
+							height="126"
+							x="1"
+							y="1" />
+						<circle
+							style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
+							cx="64"
+							cy="64"
+							r="63" />
+						<path
+							style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
+							d="m 9.3926879,32.472455 109.2146221,-2e-6 -54.607309,94.582637 z" />
+					</g>
+				</svg>
+				<h1>Brand name</h1>
+			</div>
+			<p>Powered by</p>
+			<ul class="tech-stack">
+				<li>Vendor</li>
+				<li>IDE</li>
+				<li>Engine</li>
+			</ul>
+		</div>
+		<div id="agreement" class="op_hide">
+				<div class="hello">Hello World!</div>
+				<p class="hello">Only left mouse click or any key</p>
+		</div>
+{% endblock %}
+
+{%- block script %}
+		{{ super() }}
+		<script src="{{ pageBase }}js/ui.js"></script>
+{% endblock %}