---
title: GUI explorer
tags:
	- ui
---
{% set pageId = page.fileSlug %}
{% set bodyClass = "body_frame" %}

{% extends "hippie/_app.njk" %}
{% import "hippie/macros/_io.njk" as io %}

{% block title %}{{ title }}
{% endblock %}

{% block links %}
	{{ super() }}
	<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
{% endblock %}

{% block head %}
	{{ super() }}
{% endblock %}

{% block body %}
	{{ io.frameHeader('title-bar') }}
	<main class="io">
		<aside class="io">
			<nav>
				<div>location-pane</div>
				<ul class="vertical">
					<li>
						<a class="a_button" href="">
							<span>Start/Home</span>
							<i class="bi bi-pin-fill"></i>
						</a>
					</li>
					<li>
						<a class="a_button" href="">
							<span>System</span>
							<i class="bi bi-pin-fill"></i>
						</a>
					</li>
				</ul>
			</nav>
			<hr>
			<nav>
				<ul class="vertical">
					<li>
						<a class="a_button" href="">
							<span>💽 disc link</span>
						</a>
					</li>
					<li>
						<a class="a_button" href="">
							<span>📁 folder link</span>
						</a>
					</li>
					<li>
						<a class="a_button" href="">
							<span>🔗 location link</span>
						</a>
					</li>
				</ul>
			</nav>
		</aside>
		<section>
			<header class="io">
				<nav>
					<button title="back">
						<i class="bi bi-caret-left"></i>
					</button>
					<button title="up">
						<i class="bi bi-caret-up"></i>
					</button>
					<button title="forward">
						<i class="bi bi-caret-right"></i>
					</button>
					<button title="reload">
						<i class="bi bi-arrow-clockwise"></i>
					</button>
					<input placeholder="//" type="text">
				</nav>
				<nav>
					<span>location-bar</span>
					<hr class="vertical">
					<button title="search">
						<i class="bi bi-search"></i>
					</button>
					<input placeholder="*" type="text">
				</nav>
			</header>
			<header class="io">
				<nav>
					<button title="add">
						<i class="bi bi-plus-circle"></i>
					</button>
					<div class="spacer a"></div>
					<button title="cut">
						<i class="bi bi-scissors"></i>
					</button>
					<button title="copy">
						<i class="bi bi-copy"></i>
					</button>
					<button title="paste">
						<i class="bi bi-clipboard-check-fill"></i>
					</button>
					<div class="spacer b"></div>
					<button title="delete">
						<i class="bi bi-trash"></i>
					</button>
				</nav>
				<hr class="vertical">
				<nav>
					<ul>
						<li>
							<button title="collapse">
								<i class="bi bi-arrows-collapse"></i>
							</button>
						</li>
						<li>
							<button title="expand">
								<i class="bi bi-arrows-expand-vertical"></i>
							</button>
						</li>
					</ul>
					<span>options-bar</span>
				</nav>
				<nav></nav>
			</header>
			<div id="content">
				<table>
					<thead>
						<tr>
							<th>name</th>
							<th>date</th>
							<th>type</th>
							<th>size</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>folder</td>
							<td>YYYY-MM-DD</td>
							<td>folder</td>
							<td>4KB</td>
						</tr>
						<tr>
							<td>file</td>
							<td>YYYY-MM-DD</td>
							<td>folder</td>
							<td>1B</td>
						</tr>
					</tbody>
				</table>
			</div>
			<footer class="io">
				<nav>
					<span>## items</span>
					<span># selected (size)</span>
					<span># type(s)</span>
					<span># shared</span>
				</nav>
				<nav>
					<span>status-bar</span>
				</nav>
			</footer>
		</section>
	</main>
	<footer class="io">
		<nav>
			<button>mode</button>
			<span>mode-bar</span>
		</nav>
		<nav>
			<div class="spacer a"></div>
			<button>action</button>
		</nav>
	</footer>
{% endblock %}

{% block script %}
	{{ super() }}
{% endblock %}