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