hippie/source/screens/demo/examples/ui/tile.liquid

---
title: Tile
tags:
- ui
---
{% assign bodyClass = "body_new" -%}
{% layout "hippie/app.liquid" %}

{% block body %}
{% render 'hippie/partials/header-status', hippie: hippie, links: start %}
<header class="area menu io">
	<nav>
		<ul>
			<li>
				<a href="" class="a_button">Func 1</a>
			</li>
			<li>
				<a href="" class="a_button">Func 2</a>
			</li>
		</ul>
	</nav>
</header>
<div class="area grid">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
</div>
{% endblock %}

{%- block script %}
{{ block.super -}}
<script>
	const timeElement = document.getElementById('time');
	const timeDisplay = new TimeDisplay(timeElement);

	ongoing();

	document.addEventListener('mousemove', (event) => {
		document
			.getElementById('log')
			.textContent = "X: " + event.pageX + ", Y: " + event.pageY;
	});
</script>
{% endblock %}