feat: New idle step
- Add idle step after agreement - New content for agreement - Move brand information to macro - New step class for common style
This commit is contained in:
parent
fa5e74a100
commit
b0bb338bee
4 changed files with 77 additions and 39 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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 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>
|
||||
<div id="intro" class="step op_hide">
|
||||
{{ ph.brand('brand') }}
|
||||
<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 class="hello">Hello World!</div>
|
||||
<p class="hello">Only left mouse click or any key</p>
|
||||
<div id="agreement" class="step op_hide">
|
||||
<h1>Agreement</h1>
|
||||
<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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,9 +34,11 @@ $z-indexes: (
|
|||
}
|
||||
}
|
||||
|
||||
#loader {
|
||||
.step {
|
||||
@extend %full_parent;
|
||||
}
|
||||
|
||||
#loader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue