hippie/source/screens/demo/examples/ui/settings.njk
sthag 6e722cd907 feat: Restructure settings
- New styles
- New content
2025-06-22 15:49:32 +02:00

154 lines
No EOL
3.3 KiB
Text
Executable file

---
title: Settings
tags:
- ui
---
{% set pageId = page.fileSlug %}
{% set pageClass = "h_full_view" %}
{% set bodyClass = "body_setting" %}
{% extends "demo/_app.njk" %}
{% 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 %}
<div id="frame">
<header class="io">
<nav>
<button title="menu">
<i class="bi bi-three-dots"></i>
</button>
<span>title-bar</span>
</nav>
<nav>
<div class="spacer a"></div>
<button title="minimize">
<i class="bi bi-dash"></i>
</button>
<button title="maximize">
<i class="bi bi-fullscreen"></i>
</button>
<button title="close">
<i class="bi bi-x-square"></i>
</button>
</nav>
</header>
<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>
<li>
<label for="">label</label>
<input type="text">
</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 type="text">
</nav>
<nav>
<span>location-bar</span>
<hr class="vertical">
<button title="search">
<i class="bi bi-search"></i>
</button>
<input 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>
section</section>
</main>
<footer class="io">
<span>state</span>
<div class="spacer a"></div>
<button>action</button>
</footer>
</div>
{% endblock %}
{%- block script %}
{{ super() }}
<script src="{{ pageBase }}js/app.js"></script>
<script></script>
{% endblock %}