filipriec/universal_web_loco_rewrite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design is now terminal alike

Browse Source
This commit is contained in:
Priec
2026-05-19 14:48:47 +02:00
parent 67b7c8e5ae
commit cbd642c62c
13 changed files with 801 additions and 755 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
assets/views/base.html
View File

@@ -1,5 +1,5 @@
<!doctype html>
<html lang="en" data-theme="light">
<html lang="en" data-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -23,19 +23,23 @@
applyTheme(t);
highlightTheme(t);
}
applyTheme(localStorage.getItem('theme') || 'system');
applyTheme(localStorage.getItem('theme') || 'dark');
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
if ((localStorage.getItem('theme') || 'system') === 'system') applyTheme('system');
if ((localStorage.getItem('theme') || 'dark') === 'system') applyTheme('system');
});
document.addEventListener('DOMContentLoaded', function () {
highlightTheme(localStorage.getItem('theme') || 'system');
highlightTheme(localStorage.getItem('theme') || 'dark');
var path = location.pathname;
document.querySelectorAll('.term-navlinks a[data-nav]').forEach(function (a) {
var h = a.getAttribute('data-nav');
if (h === path || (h !== '/' && path.indexOf(h) === 0)) a.classList.add('is-active');
});
});
</script>
<link href="/static/css/app.css" rel="stylesheet" type="text/css">
<link href="/static/css/theme.css" rel="stylesheet" type="text/css">
<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; }
}
@@ -46,12 +50,12 @@
position: fixed;
inset: 0;
z-index: 40;
background-color: rgba(0, 0, 0, 0.25);
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease, visibility 0s linear 0.2s;
}
.navbar:has(.dropdown:focus-within) ~ #nav-backdrop {
.term-titlebar:has(.dropdown:focus-within) ~ #nav-backdrop {
opacity: 1;
visibility: visible;
transition: opacity 0.15s ease, visibility 0s;
@@ -59,28 +63,33 @@
}
</style>
</head>
<body class="min-h-screen bg-base-200 font-sans text-base-content antialiased">
<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>
<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>
<li><a href="/audio/albums">Audio</a></li>
<li><a href="/audio/tracks">Songs</a></li>
<body class="flex min-h-screen flex-col bg-base-100 text-base-content antialiased">
<header class="term-titlebar">
<nav class="term-nav">
<span class="term-dots" aria-hidden="true">
<span class="term-dot r"></span><span class="term-dot y"></span><span class="term-dot g"></span>
</span>
<a href="/" class="term-brand">
<span class="t-green">{% if logged_in_admin %}root{% else %}visitor{% endif %}</span><span class="t-dim">@universal-web</span><span class="t-dim">:~$</span>
</a>
<ul class="nav-menu term-navlinks menu menu-sm hidden items-center md:flex">
<li><a href="/" data-nav="/">home</a></li>
<li><a href="/about" data-nav="/about">about</a></li>
<li><a href="/blog" data-nav="/blog">blog</a></li>
<li><a href="/audio/albums" data-nav="/audio/albums">audio</a></li>
<li><a href="/audio/tracks" data-nav="/audio/tracks">songs</a></li>
{% if logged_in_admin %}
<li><a href="/admin/dashboard">Dashboard</a></li>
<li><a href="/admin/dashboard" class="t-yellow" data-nav="/admin">admin</a></li>
<li>
<form method="post" action="/admin/logout">
<button type="submit" class="w-full">Logout</button>
<button type="submit" class="t-red w-full">logout</button>
</form>
</li>
{% else %}
<li><a href="/admin/login">Admin</a></li>
<li><a href="/admin/login" data-nav="/admin/login">login</a></li>
{% endif %}
</ul>
<div class="flex items-center gap-1">
<div class="term-nav-right">
<div class="dropdown dropdown-end md:hidden">
<div tabindex="0" role="button" class="btn btn-ghost btn-sm btn-circle" aria-label="Menu">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
@@ -89,21 +98,21 @@
</svg>
</div>
<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>
<li><a href="/audio/albums">Audio</a></li>
<li><a href="/audio/tracks">Songs</a></li>
class="menu dropdown-content z-50 mt-3 w-52 border border-base-300 bg-base-200 p-2 shadow-lg">
<li><a href="/">home</a></li>
<li><a href="/about">about</a></li>
<li><a href="/blog">blog</a></li>
<li><a href="/audio/albums">audio</a></li>
<li><a href="/audio/tracks">songs</a></li>
{% if logged_in_admin %}
<li><a href="/admin/dashboard">Dashboard</a></li>
<li><a href="/admin/dashboard" class="t-yellow">admin</a></li>
<li>
<form method="post" action="/admin/logout">
<button type="submit" class="w-full">Logout</button>
<button type="submit" class="t-red w-full">logout</button>
</form>
</li>
{% else %}
<li><a href="/admin/login">Admin</a></li>
<li><a href="/admin/login">login</a></li>
{% endif %}
</ul>
</div>
@@ -116,19 +125,28 @@
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
</svg>
</div>
<ul tabindex="0" class="menu dropdown-content z-50 mt-3 w-56 rounded-box border border-base-300 bg-base-100 p-2 shadow-lg">
<li class="menu-title">Theme</li>
<li><button type="button" data-theme-opt="system" onclick="setTheme('system')">System <span class="opt-check ml-auto hidden">✓</span></button></li>
<li><button type="button" data-theme-opt="light" onclick="setTheme('light')">Light <span class="opt-check ml-auto hidden">✓</span></button></li>
<li><button type="button" data-theme-opt="dark" onclick="setTheme('dark')">Dark <span class="opt-check ml-auto hidden">✓</span></button></li>
<ul tabindex="0" class="menu dropdown-content z-50 mt-3 w-56 border border-base-300 bg-base-200 p-2 shadow-lg">
<li class="menu-title">:set theme</li>
<li><button type="button" data-theme-opt="system" onclick="setTheme('system')">system <span class="opt-check ml-auto hidden">✓</span></button></li>
<li><button type="button" data-theme-opt="light" onclick="setTheme('light')">light <span class="opt-check ml-auto hidden">✓</span></button></li>
<li><button type="button" data-theme-opt="dark" onclick="setTheme('dark')">dark <span class="opt-check ml-auto hidden">✓</span></button></li>
</ul>
</div>
</div>
</nav>
</header>
<div id="nav-backdrop" aria-hidden="true"></div>
<main class="mx-auto max-w-6xl px-4 py-6">
<main class="term-main">
{% block content %}{% endblock content %}
</main>
<footer class="term-statusline">
<span class="term-seg is-mode">{% if logged_in_admin %} ADMIN {% else %} NORMAL {% endif %}</span>
<span class="term-seg">universal-web</span>
<span class="term-seg is-fill">~/{% block crumb %}{% endblock crumb %}</span>
<span class="term-seg">utf-8</span>
<span class="term-seg">EADGBE</span>
<span class="term-seg is-alt">gruvbox-dark</span>
<span class="term-seg is-mode">100%</span>
</footer>
</body>
</html>