interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: New idle step

Browse source 
- 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:
sthag 2025-05-04 22:25:03 +02:00
parent fa5e74a100
commit b0bb338bee
4 changed files with 77 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

44
source/screens/demo/examples/ui/index.njk
View file

@ -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 %}