308 lines
15 KiB
Cheetah
308 lines
15 KiB
Cheetah
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=0.90, user-scalable=no, viewport-fit=cover" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style"
|
|
content="black-translucent" />
|
|
<meta name="theme-color"
|
|
content="#F3F4F6"
|
|
media="(prefers-color-scheme: light)" />
|
|
<meta name="theme-color"
|
|
content="#1F2937"
|
|
media="(prefers-color-scheme: dark)" />
|
|
<title>AnthoLume - {{ block "title" . }}{{ end }}</title>
|
|
<link rel="manifest" href="/manifest.json" />
|
|
<link rel="stylesheet" href="/assets/style.css" />
|
|
<!-- Service Worker / Offline Cache Flush -->
|
|
<script src="/assets/lib/idb-keyval.min.js"></script>
|
|
<script src="/assets/common.js"></script>
|
|
<script src="/assets/index.js"></script>
|
|
<style>
|
|
/* ----------------------------- */
|
|
/* -------- PWA Styling -------- */
|
|
/* ----------------------------- */
|
|
html,
|
|
body {
|
|
overscroll-behavior-y: none;
|
|
margin: 0px;
|
|
}
|
|
|
|
html {
|
|
height: calc(100% + env(safe-area-inset-bottom));
|
|
padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
|
|
}
|
|
|
|
main {
|
|
height: calc(100dvh - 4rem - env(safe-area-inset-top));
|
|
}
|
|
|
|
#container {
|
|
padding-bottom: calc(5em + env(safe-area-inset-bottom) * 2);
|
|
}
|
|
|
|
/* No Scrollbar - IE, Edge, Firefox */
|
|
* {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* No Scrollbar - WebKit */
|
|
*::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* ----------------------------- */
|
|
/* -------- CSS Button -------- */
|
|
/* ----------------------------- */
|
|
.css-button:checked+div {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
.css-button+div {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* ----------------------------- */
|
|
/* ------- User Dropdown ------- */
|
|
/* ----------------------------- */
|
|
#user-dropdown-button:checked+#user-dropdown {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
#user-dropdown {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* ----------------------------- */
|
|
/* ----- Mobile Navigation ----- */
|
|
/* ----------------------------- */
|
|
#mobile-nav-button span {
|
|
transform-origin: 5px 0px;
|
|
transition:
|
|
transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
|
|
background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
|
|
opacity 0.55s ease;
|
|
}
|
|
|
|
#mobile-nav-button span:first-child {
|
|
transform-origin: 0% 0%;
|
|
}
|
|
|
|
#mobile-nav-button span:nth-last-child(2) {
|
|
transform-origin: 0% 100%;
|
|
}
|
|
|
|
#mobile-nav-button input:checked~span {
|
|
opacity: 1;
|
|
transform: rotate(45deg) translate(2px, -2px);
|
|
}
|
|
|
|
#mobile-nav-button input:checked~span:nth-last-child(3) {
|
|
opacity: 0;
|
|
transform: rotate(0deg) scale(0.2, 0.2);
|
|
}
|
|
|
|
#mobile-nav-button input:checked~span:nth-last-child(2) {
|
|
transform: rotate(-45deg) translate(0, 6px);
|
|
}
|
|
|
|
#mobile-nav-button input:checked~div {
|
|
transform: none;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
#mobile-nav-button input~div {
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
#menu {
|
|
top: 0;
|
|
padding-top: env(safe-area-inset-top);
|
|
transform-origin: 0% 0%;
|
|
transform: translate(-100%, 0);
|
|
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
|
|
}
|
|
|
|
@media (orientation: landscape) {
|
|
#menu {
|
|
transform: translate(calc(-1 * (env(safe-area-inset-left) + 100%)),
|
|
0);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-100 dark:bg-gray-800">
|
|
<div class="flex items-center justify-between w-full h-16">
|
|
<div id="mobile-nav-button" class="flex flex-col z-40 relative ml-6">
|
|
<input type="checkbox"
|
|
class="absolute lg:hidden z-50 -top-2 w-7 h-7 flex cursor-pointer opacity-0" />
|
|
<span class="lg:hidden bg-black w-7 h-0.5 z-40 mt-0.5 dark:bg-white"></span>
|
|
<span class="lg:hidden bg-black w-7 h-0.5 z-40 mt-1 dark:bg-white"></span>
|
|
<span class="lg:hidden bg-black w-7 h-0.5 z-40 mt-1 dark:bg-white"></span>
|
|
<div id="menu"
|
|
class="fixed -ml-6 h-full w-56 lg:w-48 bg-white dark:bg-gray-700 shadow-lg">
|
|
<div class="h-16 flex justify-end lg:justify-around">
|
|
<p class="text-xl font-bold dark:text-white text-right my-auto pr-8 lg:pr-0">AnthoLume</p>
|
|
</div>
|
|
<div>
|
|
{{ $default := "flex items-center justify-start w-full p-2 pl-6 my-2 transition-colors duration-200 border-l-4" }}
|
|
{{ $inactive := "border-transparent text-gray-400 hover:text-gray-800 dark:hover:text-gray-100" }}
|
|
{{ $active := "border-purple-500 dark:text-white" }}
|
|
<a class="{{ $default }} {{ if eq .RouteName "home" }} {{ $active }} {{ else if true }} {{ $inactive }} {{ end }}"
|
|
href="/">
|
|
{{ template "svg/home" (dict "Size" 20) }}
|
|
<span class="mx-4 text-sm font-normal">Home</span>
|
|
</a>
|
|
<a class="{{ $default }} {{ if eq .RouteName "documents" }} {{ $active }} {{ else if true }} {{ $inactive }} {{ end }}"
|
|
href="/documents">
|
|
{{ template "svg/documents" (dict "Size" 20) }}
|
|
<span class="mx-4 text-sm font-normal">Documents</span>
|
|
</a>
|
|
<a class="{{ $default }} {{ if eq .RouteName "progress" }} {{ $active }} {{ else if true }} {{ $inactive }} {{ end }}"
|
|
href="/progress">
|
|
{{ template "svg/activity" (dict "Size" 20) }}
|
|
<span class="mx-4 text-sm font-normal">Progress</span>
|
|
</a>
|
|
<a class="{{ $default }} {{ if eq .RouteName "activity" }} {{ $active }} {{ else if true }} {{ $inactive }} {{ end }}"
|
|
href="/activity">
|
|
{{ template "svg/activity" (dict "Size" 20) }}
|
|
<span class="mx-4 text-sm font-normal">Activity</span>
|
|
</a>
|
|
{{ if .Config.SearchEnabled }}
|
|
<a class="{{ $default }} {{ if eq .RouteName "search" }} {{ $active }} {{ else if true }} {{ $inactive }} {{ end }}"
|
|
href="/search">
|
|
{{ template "svg/search" (dict "Size" 20) }}
|
|
<span class="mx-4 text-sm font-normal">Search</span>
|
|
</a>
|
|
{{ end }}
|
|
{{ if .Authorization.IsAdmin }}
|
|
<div class="flex flex-col gap-4 p-2 pl-6 my-2 transition-colors duration-200 border-l-4 {{ if hasPrefix .RouteName "admin" }} dark:text-white border-purple-500 {{ else if true }} border-transparent text-gray-400 {{ end }}">
|
|
<a href="/admin"
|
|
class="flex justify-start w-full {{ if not (hasPrefix .RouteName "admin") }} text-gray-400 hover:text-gray-800 dark:hover:text-gray-100 {{ end }}">
|
|
{{ template "svg/settings" (dict "Size" 20) }}
|
|
<span class="mx-4 text-sm font-normal">Admin</span>
|
|
</a>
|
|
{{ if hasPrefix .RouteName "admin" }}
|
|
<a href="/admin"
|
|
style="padding-left: 1.75em"
|
|
class="flex justify-start w-full {{ if not (eq .RouteName "admin") }} text-gray-400 hover:text-gray-800 dark:hover:text-gray-100 {{ end }}">
|
|
<span class="mx-4 text-sm font-normal">General</span>
|
|
</a>
|
|
<a href="/admin/import"
|
|
style="padding-left: 1.75em"
|
|
class="flex justify-start w-full {{ if not (eq .RouteName "admin-import") }} text-gray-400 hover:text-gray-800 dark:hover:text-gray-100 {{ end }}">
|
|
<span class="mx-4 text-sm font-normal">Import</span>
|
|
</a>
|
|
<a href="/admin/users"
|
|
style="padding-left: 1.75em"
|
|
class="flex justify-start w-full {{ if not (eq .RouteName "admin-users") }} text-gray-400 hover:text-gray-800 dark:hover:text-gray-100 {{ end }}">
|
|
<span class="mx-4 text-sm font-normal">Users</span>
|
|
</a>
|
|
<a href="/admin/logs"
|
|
style="padding-left: 1.75em"
|
|
class="flex justify-start w-full {{ if not (eq .RouteName "admin-logs") }} text-gray-400 hover:text-gray-800 dark:hover:text-gray-100 {{ end }}">
|
|
<span class="mx-4 text-sm font-normal">Logs</span>
|
|
</a>
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
<a class="flex flex-col gap-2 justify-center items-center p-6 w-full absolute bottom-0 text-black dark:text-white"
|
|
target="_blank"
|
|
href="https://gitea.va.reichard.io/evan/AnthoLume">
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
class="text-black dark:text-white"
|
|
height="20"
|
|
viewBox="0 0 219 92"
|
|
fill="currentColor">
|
|
<defs>
|
|
<clipPath id="a">
|
|
<path d="M159 .79h25V69h-25Zm0 0" />
|
|
</clipPath>
|
|
<clipPath id="b">
|
|
<path d="M183 9h35.371v60H183Zm0 0" />
|
|
</clipPath>
|
|
<clipPath id="c">
|
|
<path d="M0 .79h92V92H0Zm0 0" />
|
|
</clipPath>
|
|
</defs>
|
|
<path style="stroke: none; fill-rule: nonzero; fill-opacity: 1" d="M130.871 31.836c-4.785 0-8.351 2.352-8.351 8.008 0 4.261 2.347 7.222 8.093 7.222 4.871 0 8.18-2.867 8.18-7.398 0-5.133-2.961-7.832-7.922-7.832Zm-9.57 39.95c-1.133 1.39-2.262 2.87-2.262 4.612 0 3.48 4.434 4.524 10.527 4.524 5.051 0 11.926-.352 11.926-5.043 0-2.793-3.308-2.965-7.488-3.227Zm25.761-39.688c1.563 2.004 3.22 4.789 3.22 8.793 0 9.656-7.571 15.316-18.536 15.316-2.789 0-5.312-.348-6.879-.785l-2.87 4.613 8.526.52c15.059.96 23.934 1.398 23.934 12.968 0 10.008-8.789 15.665-23.934 15.665-15.75 0-21.757-4.004-21.757-10.88 0-3.917 1.742-6 4.789-8.878-2.875-1.211-3.828-3.387-3.828-5.739 0-1.914.953-3.656 2.523-5.312 1.566-1.652 3.305-3.305 5.395-5.219-4.262-2.09-7.485-6.617-7.485-13.058 0-10.008 6.613-16.88 19.93-16.88 3.742 0 6.004.344 8.008.872h16.972v7.394l-8.007.61" />
|
|
<g clip-path="url(#a)">
|
|
<path style="stroke: none; fill-rule: nonzero; fill-opacity: 1" d="M170.379 16.281c-4.961 0-7.832-2.87-7.832-7.836 0-4.957 2.871-7.656 7.832-7.656 5.05 0 7.922 2.7 7.922 7.656 0 4.965-2.871 7.836-7.922 7.836Zm-11.227 52.305V61.71l4.438-.606c1.219-.175 1.394-.437 1.394-1.746V33.773c0-.953-.261-1.566-1.132-1.824l-4.7-1.656.957-7.047h18.016V59.36c0 1.399.086 1.57 1.395 1.746l4.437.606v6.875h-24.805" />
|
|
</g>
|
|
<g clip-path="url(#b)">
|
|
<path style="stroke: none; fill-rule: nonzero; fill-opacity: 1" d="M218.371 65.21c-3.742 1.825-9.223 3.481-14.187 3.481-10.356 0-14.27-4.175-14.27-14.015V31.879c0-.524 0-.871-.7-.871h-6.093v-7.746c7.664-.871 10.707-4.703 11.664-14.188h8.27v12.36c0 .609 0 .87.695.87h12.27v8.704h-12.965v20.797c0 5.136 1.218 7.136 5.918 7.136 2.437 0 4.96-.609 7.047-1.39l2.351 7.66" />
|
|
</g>
|
|
<g clip-path="url(#c)">
|
|
<path style="stroke: none; fill-rule: nonzero; fill-opacity: 1" d="M89.422 42.371 49.629 2.582a5.868 5.868 0 0 0-8.3 0l-8.263 8.262 10.48 10.484a6.965 6.965 0 0 1 7.173 1.668 6.98 6.98 0 0 1 1.656 7.215l10.102 10.105a6.963 6.963 0 0 1 7.214 1.657 6.976 6.976 0 0 1 0 9.875 6.98 6.98 0 0 1-9.879 0 6.987 6.987 0 0 1-1.519-7.594l-9.422-9.422v24.793a6.979 6.979 0 0 1 1.848 1.32 6.988 6.988 0 0 1 0 9.88c-2.73 2.726-7.153 2.726-9.875 0a6.98 6.98 0 0 1 0-9.88 6.893 6.893 0 0 1 2.285-1.523V34.398a6.893 6.893 0 0 1-2.285-1.523 6.988 6.988 0 0 1-1.508-7.637L29.004 14.902 1.719 42.187a5.868 5.868 0 0 0 0 8.301l39.793 39.793a5.868 5.868 0 0 0 8.3 0l39.61-39.605a5.873 5.873 0 0 0 0-8.305" />
|
|
</g>
|
|
</svg>
|
|
<span class="text-xs">{{ .Config.Version }}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<h1 class="text-xl font-bold dark:text-white px-6 lg:ml-44">{{ block "header" . }}{{ end }}</h1>
|
|
<div class="relative flex items-center justify-end w-full p-4 space-x-4">
|
|
<a href="#" class="relative block text-gray-800 dark:text-gray-200">{{ template "svg/user" (dict "Size" 20) }}</a>
|
|
<input type="checkbox" id="user-dropdown-button" class="hidden" />
|
|
<div id="user-dropdown"
|
|
class="transition duration-200 z-20 absolute right-4 top-16 pt-4">
|
|
<div class="w-40 origin-top-right bg-white rounded-md shadow-lg dark:shadow-gray-800 dark:bg-gray-700 ring-1 ring-black ring-opacity-5">
|
|
<div class="py-1"
|
|
role="menu"
|
|
aria-orientation="vertical"
|
|
aria-labelledby="options-menu">
|
|
<a href="/settings"
|
|
class="block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600"
|
|
role="menuitem">
|
|
<span class="flex flex-col">
|
|
<span>Settings</span>
|
|
</span>
|
|
</a>
|
|
<a href="/local"
|
|
class="block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600"
|
|
role="menuitem">
|
|
<span class="flex flex-col">
|
|
<span>Offline</span>
|
|
</span>
|
|
</a>
|
|
<a href="/logout"
|
|
class="block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600"
|
|
role="menuitem">
|
|
<span class="flex flex-col">
|
|
<span>Logout</span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<label for="user-dropdown-button">
|
|
<div class="flex items-center gap-2 text-gray-500 dark:text-white text-md py-4 cursor-pointer">
|
|
<span>{{ .Authorization.UserName }}</span>
|
|
<span class="text-gray-800 dark:text-gray-200">{{ template "svg/dropdown" (dict "Size" 20) }}</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<main class="relative overflow-hidden">
|
|
<div id="container" class="h-[100dvh] px-4 overflow-auto md:px-6 lg:ml-48">{{ block "content" . }}{{ end }}</div>
|
|
</main>
|
|
<div class="absolute right-4 bottom-4">
|
|
{{ block "notifications" . }}{{ end }}
|
|
<!--
|
|
<div class="w-72 p-4 bg-red-500 rounded-xl">
|
|
<span>User Deleted</span>
|
|
</div>
|
|
-->
|
|
</div>
|
|
</body>
|
|
</html>
|