mirror of
https://github.com/markbeep/AudioBookRequest.git
synced 2026-01-05 21:20:15 -06:00
148 lines
4.6 KiB
HTML
148 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="garden">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
{% block head %}
|
|
<title>AudioBookRequest</title>
|
|
{% endblock %}
|
|
<link rel="stylesheet" href="/globals.css" />
|
|
<script src="/htmx.js"></script>
|
|
<script defer src="/htmx-preload.js"></script>
|
|
<script>
|
|
const setTheme = theme => {
|
|
if (!theme) {
|
|
theme = localStorage.getItem("theme") || "nord";
|
|
}
|
|
document.documentElement.setAttribute("data-theme", theme);
|
|
localStorage.setItem("theme", theme);
|
|
if (theme === "night") {
|
|
for (const elem of document.getElementsByClassName(
|
|
"light-dark-toggle",
|
|
)) {
|
|
elem.classList.add("DARKCLASS");
|
|
document.documentElement.classList.add("dark");
|
|
}
|
|
} else {
|
|
for (const elem of document.getElementsByClassName(
|
|
"light-dark-toggle",
|
|
)) {
|
|
elem.classList.remove("DARKCLASS");
|
|
document.documentElement.classList.remove("dark");
|
|
}
|
|
}
|
|
};
|
|
const toggleTheme = () => {
|
|
const theme = document.documentElement.getAttribute("data-theme");
|
|
const newTheme = theme === "nord" ? "night" : "nord";
|
|
setTheme(newTheme);
|
|
};
|
|
</script>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
|
<link rel="icon" sizes="any" type="image/svg+xml" href="/favicon.svg" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
|
<link rel="manifest" href="/site.webmanifest" />
|
|
|
|
{% include 'scripts/toast.html' %}
|
|
</head>
|
|
<body class="w-screen min-h-screen overflow-x-hidden" hx-ext="preload">
|
|
{% block toast_block %}
|
|
<div class="hidden" id="toast-block">
|
|
{% if toast_error %}
|
|
<script>
|
|
toast("{{toast_error|safe}}", "error");
|
|
</script>
|
|
{% endif %} {% if toast_success %}
|
|
<script>
|
|
toast("{{toast_success|safe}}", "success");
|
|
</script>
|
|
{% endif %} {% if toast_info %}
|
|
<script>
|
|
toast("{{toast_info|safe}}", "info");
|
|
</script>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %} {% if not hide_navbar %}
|
|
<header class="shadow-lg">
|
|
<nav class="navbar">
|
|
<div class="flex-1">
|
|
<a
|
|
preload
|
|
href="/"
|
|
class="btn btn-ghost text-lg hidden sm:inline-flex"
|
|
>AudioBookRequest</a
|
|
>
|
|
<a preload href="/" class="btn btn-ghost text-lg sm:hidden">ABR</a>
|
|
|
|
<a
|
|
preload
|
|
href="/search"
|
|
class="btn btn-ghost btn-square"
|
|
title="Search"
|
|
>
|
|
{% include 'icons/search.html' %}
|
|
</a>
|
|
|
|
<a
|
|
preload
|
|
href="/wishlist"
|
|
class="btn btn-ghost btn-square group relative"
|
|
title="Wishlist"
|
|
>
|
|
<span
|
|
class="opacity-0 group-hover:opacity-100 absolute left-2 top-2 transition-opacity duration-500"
|
|
>
|
|
{% include 'icons/gift-solid.html' %}
|
|
</span>
|
|
<span
|
|
class="opacity-100 group-hover:opacity-0 absolute left-2 top-2 transition-opacity duration-500"
|
|
>{% include 'icons/gift.html' %}</span
|
|
>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="flex-none flex pr-4">
|
|
<button
|
|
class="btn btn-ghost btn-square light-dark-toggle"
|
|
onclick="toggleTheme()"
|
|
>
|
|
<script>
|
|
setTheme();
|
|
</script>
|
|
<span class="theme-dark svg-dark"
|
|
>{% include 'icons/moon.html' %}</span
|
|
>
|
|
<span class="theme-light svg-light"
|
|
>{% include 'icons/sun.html' %}</span
|
|
>
|
|
</button>
|
|
{% if user.can_logout() %}
|
|
<btn
|
|
hx-post="/auth/logout"
|
|
class="btn btn-ghost btn-square"
|
|
title="Logout"
|
|
>
|
|
{% include 'icons/door-exit.html' %}
|
|
</btn>
|
|
{% endif %}
|
|
<a
|
|
preload
|
|
href="/settings/account"
|
|
class="btn btn-ghost btn-square group"
|
|
title="Settings"
|
|
>
|
|
<span
|
|
class="group-hover:rotate-90 transition-all duration-500 ease-in-out"
|
|
>
|
|
{% include 'icons/settings.html' %}
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
{% endif %} {% block body %} {% endblock %}
|
|
</body>
|
|
</html>
|