some simple UI to make it work

This commit is contained in:
Priec
2026-05-17 17:46:04 +02:00
parent 0a36e8839c
commit 1d51a23bfb
10 changed files with 333 additions and 148 deletions

View File

@@ -35,6 +35,9 @@
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<style>
.btn { --animation-btn: 0; --btn-focus-scale: 1; }
@media (min-width: 768px) {
.nav-menu { flex-direction: row; }
}
#nav-backdrop { display: none; }
@media (max-width: 767px) {
#nav-backdrop {
@@ -59,19 +62,21 @@
<header class="navbar bg-base-100 shadow-sm">
<nav class="mx-auto flex w-full max-w-6xl items-center justify-between gap-2 px-4">
<a href="/" class="min-w-0 truncate text-lg font-bold">Universal Web</a>
<div class="hidden items-center gap-1 md:flex">
<a href="/" class="btn btn-ghost btn-sm">Home</a>
<a href="/about" class="btn btn-ghost btn-sm">About</a>
<a href="/blog" class="btn btn-ghost btn-sm">Blog</a>
<ul class="nav-menu menu menu-sm hidden items-center gap-1 md:flex">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
{% if logged_in_admin %}
<a href="/admin/dashboard" class="btn btn-ghost btn-sm">Dashboard</a>
<form method="post" action="/admin/logout">
<button type="submit" class="btn btn-ghost btn-sm">Logout</button>
</form>
<li><a href="/admin/dashboard">Dashboard</a></li>
<li>
<form method="post" action="/admin/logout">
<button type="submit" class="w-full">Logout</button>
</form>
</li>
{% else %}
<a href="/admin/login" class="btn btn-ghost btn-sm">Admin</a>
<li><a href="/admin/login">Admin</a></li>
{% endif %}
</div>
</ul>
<div class="flex items-center gap-1">
<div class="dropdown dropdown-end md:hidden">
<div tabindex="0" role="button" class="btn btn-ghost btn-sm btn-circle" aria-label="Menu">
@@ -80,20 +85,22 @@
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</div>
<div tabindex="0"
class="dropdown-content z-50 mt-3 flex w-52 flex-col gap-1 rounded-box border border-base-300 bg-base-100 p-2 shadow-lg">
<a href="/" class="btn btn-ghost btn-sm justify-start">Home</a>
<a href="/about" class="btn btn-ghost btn-sm justify-start">About</a>
<a href="/blog" class="btn btn-ghost btn-sm justify-start">Blog</a>
<ul tabindex="0"
class="menu dropdown-content z-50 mt-3 w-52 rounded-box border border-base-300 bg-base-100 p-2 shadow-lg">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
{% if logged_in_admin %}
<a href="/admin/dashboard" class="btn btn-ghost btn-sm justify-start">Dashboard</a>
<form method="post" action="/admin/logout">
<button type="submit" class="btn btn-ghost btn-sm w-full justify-start">Logout</button>
</form>
<li><a href="/admin/dashboard">Dashboard</a></li>
<li>
<form method="post" action="/admin/logout">
<button type="submit" class="w-full">Logout</button>
</form>
</li>
{% else %}
<a href="/admin/login" class="btn btn-ghost btn-sm justify-start">Admin</a>
<li><a href="/admin/login">Admin</a></li>
{% endif %}
</div>
</ul>
</div>
<div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn btn-ghost btn-sm btn-circle" aria-label="Settings" title="Settings">