hippie/source/screens/demo/examples/ui/index.njk
sthag b0bb338bee feat: New idle step
- Add idle step after agreement
- New content for agreement
- Move brand information to macro
- New step class for common style
2025-05-04 22:25:03 +02:00

60 lines
No EOL
1.4 KiB
Text

---
title: Init
tags:
- demoExample
- index
- ui
---
{% set pageId = "init" %}
{% set pageClass = "html_ui" %}
{% extends "demo/_app.njk" %}
{% import "hippie/macros/_placeholder.njk" as ph %}
{% block title %}{{ title }}
{% endblock %}
{% block links %}
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
<div id="loader" class="step op_show">
<div id="bar">
<div id="spinner"><span>I</span></div>
<div id="wrap">
<div id="progress"></div>
</div>
<div id="status">0%</div>
</div>
</div>
<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="step op_hide">
{{ ph.brand('brand') }}
<p>Powered by</p>
<ul class="tech-stack">
<li>Vendor</li>
<li>IDE</li>
<li>Engine</li>
</ul>
</div>
<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 %}
{%- block script %}
{{ super() }}
<script src="{{ pageBase }}js/ui.js"></script>
{% endblock %}