89 lines
3.8 KiB
HTML
89 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="{{ lang }}" data-theme="light">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<script>
|
|
// Resolve and apply the saved theme before first paint to avoid a flash.
|
|
function applyTheme(t) {
|
|
var dark = t === 'dark'
|
|
|| (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
|
document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
|
|
}
|
|
function highlightTheme(t) {
|
|
document.querySelectorAll('#theme-switch [data-theme-opt]').forEach(function (b) {
|
|
b.classList.toggle('btn-neutral', b.getAttribute('data-theme-opt') === t);
|
|
});
|
|
}
|
|
function setTheme(t) {
|
|
localStorage.setItem('theme', t);
|
|
applyTheme(t);
|
|
highlightTheme(t);
|
|
}
|
|
applyTheme(localStorage.getItem('theme') || 'system');
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
|
|
if ((localStorage.getItem('theme') || 'system') === 'system') applyTheme('system');
|
|
});
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
highlightTheme(localStorage.getItem('theme') || 'system');
|
|
});
|
|
</script>
|
|
<title>{% block title %}{{ t(key="brand", lang=lang) }}{% endblock title %}</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/daisyui@4/dist/full.min.css" rel="stylesheet" type="text/css" />
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
/* Keep buttons static — disable daisyUI's press-shrink animation. */
|
|
.btn { --animation-btn: 0; --btn-focus-scale: 1; }
|
|
</style>
|
|
{% block head %}{% endblock head %}
|
|
</head>
|
|
|
|
<body class="min-h-screen bg-base-200 font-sans text-base-content antialiased">
|
|
<div class="navbar bg-base-100 shadow-sm">
|
|
<div class="mx-auto flex w-full max-w-6xl flex-wrap items-center justify-between gap-2 px-4">
|
|
<a href="/" class="text-lg font-bold">{{ t(key="brand", lang=lang) }}</a>
|
|
<nav class="flex flex-wrap items-center gap-1">
|
|
<a href="/" class="btn btn-ghost btn-sm">{{ t(key="nav-calendar", lang=lang) }}</a>
|
|
{% if logged_in | default(value=false) %}
|
|
<a href="/admin" class="btn btn-ghost btn-sm">{{ t(key="admin-title", lang=lang) }}</a>
|
|
<a href="/admin/courts" class="btn btn-ghost btn-sm">{{ t(key="manage-courts", lang=lang) }}</a>
|
|
<form method="post" action="/admin/logout">
|
|
<button class="btn btn-ghost btn-sm">{{ t(key="logout", lang=lang) }}</button>
|
|
</form>
|
|
{% else %}
|
|
<a href="/admin/login" class="btn btn-ghost btn-sm">{{ t(key="nav-admin", lang=lang) }}</a>
|
|
{% endif %}
|
|
<div class="join ml-1">
|
|
<button onclick="setLang('en')"
|
|
class="btn btn-xs join-item {% if lang == 'en' %}btn-neutral{% endif %}">EN</button>
|
|
<button onclick="setLang('sk')"
|
|
class="btn btn-xs join-item {% if lang == 'sk' %}btn-neutral{% endif %}">SK</button>
|
|
</div>
|
|
<div class="join" id="theme-switch">
|
|
<button type="button" data-theme-opt="system" onclick="setTheme('system')"
|
|
class="btn btn-xs join-item">{{ t(key="theme-system", lang=lang) }}</button>
|
|
<button type="button" data-theme-opt="light" onclick="setTheme('light')"
|
|
class="btn btn-xs join-item">{{ t(key="theme-light", lang=lang) }}</button>
|
|
<button type="button" data-theme-opt="dark" onclick="setTheme('dark')"
|
|
class="btn btn-xs join-item">{{ t(key="theme-dark", lang=lang) }}</button>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<main class="mx-auto max-w-6xl px-4 py-6">
|
|
{% block content %}{% endblock content %}
|
|
</main>
|
|
|
|
<script>
|
|
function setLang(l) {
|
|
document.cookie = 'lang=' + l + ';path=/;max-age=31536000';
|
|
location.reload();
|
|
}
|
|
</script>
|
|
{% block js %}{% endblock js %}
|
|
</body>
|
|
|
|
</html>
|