mirror of
https://github.com/markbeep/AudioBookRequest.git
synced 2026-01-19 12:29:46 -06:00
188 lines
5.6 KiB
HTML
188 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="garden">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
{% block head %}
|
|
<title>AudioBookRequest</title>
|
|
<meta
|
|
name="description"
|
|
content="AudioBookRequest - Your platform for managing audiobook requests."
|
|
/>
|
|
<meta
|
|
name="keywords"
|
|
content="audiobooks, requests, wishlist, search, settings"
|
|
/>
|
|
{% endblock head %}
|
|
<link
|
|
rel="stylesheet"
|
|
href="{{ base_url }}/static/globals.css?v={{ version }}"
|
|
/>
|
|
<script src="{{ base_url }}/static/htmx.js?v={{ version }}"></script>
|
|
<script
|
|
defer
|
|
src="{{ base_url }}/static/htmx-preload.js?v={{ version }}"
|
|
></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="{{ base_url }}/static/apple-touch-icon.png?v={{ version }}"
|
|
/>
|
|
<link
|
|
rel="icon"
|
|
sizes="any"
|
|
type="image/svg+xml"
|
|
href="{{ base_url }}/static/favicon.svg?v={{ version }}"
|
|
/>
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
sizes="32x32"
|
|
href="{{ base_url }}/static/favicon-32x32.png?v={{ version }}"
|
|
/>
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
sizes="16x16"
|
|
href="{{ base_url }}/static/favicon-16x16.png?v={{ version }}"
|
|
/>
|
|
<link
|
|
rel="manifest"
|
|
href="{{ base_url }}/static/site.webmanifest?v={{ version }}"
|
|
/>
|
|
{% 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 toast_block %}
|
|
<script>
|
|
// execute the script once here (to have it run on all pages), and once when the button loads below in the navbar
|
|
setTheme();
|
|
</script>
|
|
{% if not hide_navbar %}
|
|
<header class="shadow-lg">
|
|
<nav class="navbar">
|
|
<div class="flex-1">
|
|
<a
|
|
preload
|
|
href="{{ base_url }}/"
|
|
class="btn btn-ghost text-lg hidden sm:inline-flex"
|
|
>AudioBookRequest</a
|
|
>
|
|
<a
|
|
preload
|
|
href="{{ base_url }}/"
|
|
class="btn btn-ghost text-lg sm:hidden"
|
|
>ABR</a
|
|
>
|
|
<a
|
|
preload
|
|
href="{{ base_url }}/search"
|
|
class="btn btn-ghost btn-square"
|
|
title="Search"
|
|
>{% include "icons/search.html" %}</a
|
|
>
|
|
<a
|
|
preload
|
|
href="{{ base_url }}/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() %}
|
|
<button
|
|
hx-post="{{ base_url }}/auth/logout"
|
|
class="button btn-ghost btn-square"
|
|
title="Logout"
|
|
>
|
|
{% include "icons/door-exit.html" %}
|
|
</button>
|
|
{% endif %}
|
|
<a
|
|
preload
|
|
href="{{ base_url }}/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 %}
|
|
</body>
|
|
</html>
|