57 lines
2.3 KiB
HTML
57 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{% block title %}{{ settings.APP_NAME }}{% endblock %}</title>
|
|
<link rel="preconnect" href="/static/fonts">
|
|
<link rel="stylesheet" href="/static/tokens.css">
|
|
<link rel="stylesheet" href="/static/app.css">
|
|
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
|
|
</head>
|
|
<body>
|
|
{% if user %}
|
|
<nav class="nav-bar">
|
|
<a class="nav-wordmark" href="/">Home Lab</a>
|
|
<div class="nav-right">
|
|
<a href="/transcriber" class="button-utility">Transcriber</a>
|
|
<a href="/files" class="button-utility">Files</a>
|
|
<a href="/voice" class="button-utility">Voice</a>
|
|
{% if user.is_admin %}
|
|
<a href="/admin" class="button-utility">Admin</a>
|
|
{% endif %}
|
|
<div class="nav-user">
|
|
<span class="nav-avatar">{{ user.username[:1]|upper }}</span>
|
|
<span>{{ user.full_name }}</span>
|
|
</div>
|
|
<a href="/account/password" class="button-utility" title="Change password">Password</a>
|
|
<button type="button" id="themeToggle" class="button-utility" title="Toggle dark mode" aria-label="Toggle dark mode">🌙</button>
|
|
<a href="/logout" class="button-utility">Sign out</a>
|
|
</div>
|
|
</nav>
|
|
{% endif %}
|
|
<main>
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
<script>
|
|
(function () {
|
|
var root = document.documentElement;
|
|
var saved = null;
|
|
try { saved = localStorage.getItem('fhlTheme'); } catch (_) {}
|
|
var dark = saved === 'dark' || (!saved && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
|
if (dark) root.setAttribute('data-theme', 'dark');
|
|
function sync() {
|
|
var b = document.getElementById('themeToggle');
|
|
if (b) b.textContent = root.getAttribute('data-theme') === 'dark' ? '☀️' : '🌙';
|
|
}
|
|
var t = document.getElementById('themeToggle');
|
|
if (t) t.addEventListener('click', function () {
|
|
if (root.getAttribute('data-theme') === 'dark') { root.removeAttribute('data-theme'); try { localStorage.setItem('fhlTheme','light'); } catch(_){} }
|
|
else { root.setAttribute('data-theme','dark'); try { localStorage.setItem('fhlTheme','dark'); } catch(_){} }
|
|
sync();
|
|
});
|
|
sync();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html> |