feat: New idle step

- Add idle step after agreement
- New content for agreement
- Move brand information to macro
- New step class for common style

source/code/ui.js

@@ -111,6 +111,21 @@ function showAgreement() {
 	})
 }
 
+function showIdle() {
+	const el = document.getElementById('idle');
+
+	return new Promise((resolve, reject) => {
+		if (el) {
+			console.info('Idle.');
+
+			el.classList.replace('op_hide', 'op_show');
+			resolve('Idle.');
+		} else {
+			reject();
+		}
+	})
+}
+
 function loadCore() {
 	const el = loader;
 	const bar = loader.querySelector('#progress');
@@ -163,6 +178,7 @@ init()
 	.then(showIntro)
 	.catch(er => console.error(er))
 	.then(showAgreement)
+	.then(showIdle)
 	.catch(er => console.error(er))
 	.finally(() => {
 		console.debug('Init end.', isAgree);

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

@@ -9,6 +9,7 @@ tags:
 {% set pageClass = "html_ui" %}
 
 {% extends "demo/_app.njk" %}
+{% import "hippie/macros/_placeholder.njk" as ph %}
 
 {% block title %}{{ title }}
 {% endblock %}
@@ -22,7 +23,7 @@ tags:
 {% endblock %}
 
 {% block body %}
-		<div id="loader" class="op_show">
+		<div id="loader" class="step op_show">
 			<div id="bar">
 				<div id="spinner"><span>I</span></div>
 				<div id="wrap">
@@ -34,35 +35,8 @@ tags:
 		<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 id="intro" class="step op_hide">
-			<div class="brand">
+			{{ ph.brand('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>
@@ -70,9 +44,13 @@ tags:
 				<li>Engine</li>
 			</ul>
 		</div>
-		<div id="agreement" class="op_hide">
+		<div id="agreement" class="step op_hide">
-				<div class="hello">Hello World!</div>
+			<h1>Agreement</h1>
-				<p class="hello">Only left mouse click or any key</p>
+			<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="hello">Hello World!</div>
+			<p class="hello">Only left mouse click or any key</p>
 		</div>
 {% endblock %}
 

source/style/ui.scss

@@ -34,9 +34,11 @@ $z-indexes: (
 	}
 }
 
-#loader {
+.step {
 	@extend %full_parent;
+}
 
+#loader {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -65,7 +67,7 @@ $z-indexes: (
 #status,
 #spinner {
 	@extend %basic;
-	
+
 	display: flex;
 	flex-grow: 0;
 	flex-shrink: 0;
@@ -104,8 +106,6 @@ $z-indexes: (
 }
 
 #intro {
-	@extend %full_parent;
-
 	z-index: map.get($z-indexes, "content-top");
 	overflow: hidden;
 	display: flex;
@@ -148,7 +148,8 @@ $z-indexes: (
 	}
 }
 
-#agreement {
+#agreement,
+#idle {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -156,6 +157,18 @@ $z-indexes: (
 	background-color: $color_back_basic;
 }
 
+#agreement {
+	flex-direction: column;
+
+	h1 {
+		margin-top: 0;
+	}
+}
+
+#idle {
+	pointer-events: none;
+}
+
 .toast {
 	z-index: map.get($z-indexes, "toast");
 	position: fixed;
@@ -175,7 +188,8 @@ $z-indexes: (
 .hello {
 	flex: 0 1 auto;
 	padding: 1em 2em;
-	background-color: rgba(black, .25);
+	// background-color: rgba(black, .25);
+	background-color: $color_darker;
 }
 
 @import "modules/ui/new_module";

source/templates/hippie/macros/_placeholder.njk

@@ -11,3 +11,33 @@
 {% macro address(class='', text='Straße Nr., PLZ Ort') %}
 <span class="{{ class }}">{{ text }}</span>
 {% endmacro %}
+{% macro brand(class='', name='Marke') %}
+<div class="{{ class }}">
+	{# <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>{{ name }}</h1>
+</div>
+{% endmacro %}