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/style/ui.scss

@@ -1,6 +1,113 @@
+@use "sass:map";
+
 @import "demo_config";
 @import "hippie-style/hippie";
 
+$z-indexes: (
+	"default": 0,
+	"content-bottom": 1,
+	"content-low": 2,
+	"content-med": 3,
+	"content-high": 4,
+	"content-top": 10,
+	"modal-low": 11,
+	"modal-med": 12,
+	"modal-high": 13,
+	"toast": 100
+);
+
+.op_show {
+	transition: $transition_show;
+}
+
+.op_hide {
+	transition: $transition_hide;
+}
+
+.html_ui {
+	height: 100%;
+
+	body {
+		position: relative;
+		min-height: 100%;
+		background-color: black;
+	}
+}
+
+#intro {
+	@extend %full_parent;
+
+	z-index: map.get($z-indexes, "content-top");
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	background-color: black;
+
+	h1,
+	p,
+	li {
+		color: white;
+	}
+}
+
+.brand {
+	text-align: center;
+
+	img {
+		display: inline-block;
+		width: 128px;
+		height: 128px;
+		background-color: white;
+	}
+
+	*+h1 {
+		margin-top: $space_small;
+		margin-bottom: $space_large;
+	}
+}
+
+.tech-stack {
+	display: flex;
+	padding-left: 0;
+
+	li {
+		list-style: none;
+		padding-inline: $space_double;
+	}
+}
+
+#agreement {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100vh;
+	background-color: $color_back_basic;
+}
+
+.toast {
+	z-index: map.get($z-indexes, "toast");
+	position: fixed;
+  right: $space_half;
+  bottom: $space_double;
+
+	p {
+		color: white;
+	}
+
+	kbd {
+		border-color: $color_brighter;
+		color: $color_back_io;
+	}
+}
+
+.hello {
+	flex: 0 1 auto;
+	padding: 1em 2em;
+	background-color: rgba(black, .25);
+}
+
 @import "modules/ui/new_module";
 @import "modules/ui/settings_module";
-@import "modules/ui/drag_module";
+@import "modules/ui/drag_module";