<!doctype html>
<html lang="en">
{% let base = crate::base::BaseStore::new() %}
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
http-equiv="content-security-policy"
content="default-src 'self' blob:; img-src * data:; media-src *; font-src *; style-src 'unsafe-inline' 'self' blob: *; script-src 'self' 'unsafe-inline' blob: *; object-src 'self' blob: *; upgrade-insecure-requests; connect-src *; frame-src 'self' blob: data: *"
/>
<title>{% block title %}{{ title }}{% endblock %}</title>
<meta name="theme-color" content="#6ee7b7" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="{{ base.site_name }}" />
<link rel="icon" href="/static/favicon.svg" />
{% block head %}{% endblock %}
<link rel="stylesheet" href="{{ base.static_dir }}/style.css" />
<script>
if (
window.matchMedia("(prefers-color-scheme: dark)").matches &&
!window.localStorage.getItem("theme")
) {
document.documentElement.classList.add("dark");
window.localStorage.setItem("theme", "dark");
} else if (
window.matchMedia("(prefers-color-scheme: light)").matches &&
!window.localStorage.getItem("theme")
) {
document.documentElement.classList.remove("dark");
window.localStorage.setItem("theme", "light");
} else if (window.localStorage.getItem("theme")) {
const current = window.localStorage.getItem("theme");
document.documentElement.className = current;
}
</script>
<script>
globalThis.ns_config = { root: "{{ base.static_dir }}/js/" };
globalThis._app_base = {
ns_store: {}, starstraw: "{{ base.starstraw }}",
nested: "{{ base.nested }}",
};
</script>
</head>
<body>
<script src="https://unpkg.com/regns@1.0.0/index.js"></script>
<div class="link-list" style="display: none" id="upper:globalmenu">
<div class="option w-full flex items-center gap-2 !justify-between">
<a href="/{{ base.nested }}" style="color: inherit">
<b>{{ base.site_name }}</b>
</a>
<a
id="theme_button"
href="javascript:trigger('app:toggle_theme')"
title="Toggle Theme"
style="color: var(--text-color-faded)"
>
<div id="theme_icon_sun" class="align-center">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-sun"
>
<circle cx="12" cy="12" r="4" />
<path d="M12 2v2" />
<path d="M12 20v2" />
<path d="m4.93 4.93 1.41 1.41" />
<path d="m17.66 17.66 1.41 1.41" />
<path d="M2 12h2" />
<path d="M20 12h2" />
<path d="m6.34 17.66-1.41 1.41" />
<path d="m19.07 4.93-1.41 1.41" />
</svg>
</div>
<div id="theme_icon_moon" class="align-center">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-moon"
>
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
</svg>
</div>
</a>
</div>
<div class="option w-full flex flex-col gap-2">
<h6 class="no-margin">LINKS</h6>
{% if auth_state == false %}
<a
href="{{ base.starstraw }}/spirit/register"
class="button green"
data-wants-redirect="true"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-at-sign"
>
<circle cx="12" cy="12" r="4" />
<path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8" />
</svg>
register
</a>
<a
href="{{ base.starstraw }}/spirit/login"
class="button green"
data-wants-redirect="true"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-log-in"
>
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
<polyline points="10 17 15 12 10 7" />
<line x1="15" x2="3" y1="12" y2="12" />
</svg>
login
</a>
{% else %}
<a href="/{{ base.nested }}/api/auth/logout" class="button red">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-log-out"
>
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
<polyline points="16 17 21 12 16 7" />
<line x1="21" x2="9" y1="12" y2="12" />
</svg>
logout
</a>
{% endif %}
</div>
</div>
<nav {% block toolbar_attrs %}{% endblock %}>
<div class="flex items-center gap-2">
<button
title="Menu"
class="round"
onclick="trigger('app:toggle_child_menu', [event.target, '#upper\\:globalmenu'])"
style="border-left: 0"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-menu"
>
<line x1="4" x2="20" y1="12" y2="12" />
<line x1="4" x2="20" y1="6" y2="6" />
<line x1="4" x2="20" y1="18" y2="18" />
</svg>
</button>
{% block toolbar %}{% endblock %}
</div>
<div class="flex gap-2">
{% block toolbar_right %}{% endblock %}
</div>
<style>
.toolbar {
border: 0 !important;
}
.toolbar button,
.toolbar .button {
border: 0 !important;
}
</style>
</nav>
<div class="toolbar-layout-wrapper" id="_page">
{% block content %}{% endblock %}
</div>
<script src="{{ base.static_dir }}/js/footer.js"></script>
{{ base.body_embed|safe }}
</body>
</html>