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/code/ui.js

@@ -0,0 +1,77 @@
+let introDelay = 6;
+let hintDelay = 1;
+
+const intro = {
+	element: document.getElementById('intro'),
+	delay: introDelay * 1000,
+	show() {
+		if (typeof this.timeoutId === 'number') {
+			this.cancel();
+		}
+
+		console.info("Intro begin.");
+		this.element.classList.replace('op_hide', 'op_show');
+
+		this.timeoutId = setTimeout(
+			() => {
+				this.dismiss();
+			},
+			this.delay
+		)
+	},
+	dismiss() {
+		this.element.classList.replace('op_show', 'op_hide');
+		this.timeoutId = undefined;
+
+		this.element.addEventListener('transitionend', () => {
+			console.info("Intro fin.");
+			agree();
+		});
+	},
+	cancel() {
+		clearTimeout(this.timeoutId);
+	}
+};
+const agreement = document.getElementById('agreement');
+const hint = {
+	element: document.getElementById('hint'),
+	delay: hintDelay * 1000,
+	show() {
+		if (typeof this.timeoutId === 'number') {
+			this.cancel();
+		}
+
+		this.element.classList.remove('di_none');
+
+		this.timeoutId = setTimeout(
+			() => {
+				this.dismiss();
+			},
+			this.delay
+		);
+	},
+	dismiss() {
+		this.element.classList.add('di_none');
+		this.timeoutId = undefined;
+	},
+	cancel() {
+		clearTimeout(this.timeoutId);
+	}
+};
+
+window.addEventListener('click', () => hint.show());
+window.addEventListener('keydown', () => hint.show());
+
+if (intro.element) intro.show();
+
+function agree() {
+	if (agreement) {
+		console.info("Agreement show.");
+		agreement.classList.replace('op_hide', 'op_show');
+
+		setTimeout(() => {
+			agreement.classList.replace('op_show', 'op_hide');
+			console.info("Agreement closed.");
+		}, introDelay * 1000)
+	}
+}