---
title: Init
tags: 
  - demoExample
  - index
  - ui
---
{% set pageId = "init" %}
{% set pageClass = "html_ui" %}

{% extends "demo/_app.njk" %}

{% 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="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="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>
			<p>Powered by</p>
			<ul class="tech-stack">
				<li>Vendor</li>
				<li>IDE</li>
				<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>
{% endblock %}

{%- block script %}
		{{ super() }}
		<script src="{{ pageBase }}js/ui.js"></script>
{% endblock %}