evan/AnthoLume
evan/AnthoLume
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore(prettier): format templates
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Evan Reichard 2024-06-16 17:11:03 -04:00
parent f37bff365f
commit 9809a09d2e
22 changed files with 1749 additions and 1120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/style.css
View File

File diff suppressed because one or more lines are too long

268
templates/base.tmpl
View File

@ -1,18 +1,26 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" <meta
content="width=device-width, initial-scale=0.90, user-scalable=no, viewport-fit=cover" /> 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-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" <meta
content="black-translucent" /> name="apple-mobile-web-app-status-bar-style"
<meta name="theme-color" content="black-translucent"
/>
<meta
name="theme-color"
content="#F3F4F6" content="#F3F4F6"
media="(prefers-color-scheme: light)" /> media="(prefers-color-scheme: light)"
<meta name="theme-color" />
<meta
name="theme-color"
content="#1F2937" content="#1F2937"
media="(prefers-color-scheme: dark)" /> media="(prefers-color-scheme: dark)"
/>
<title>AnthoLume - {{ block "title" . }}{{ end }}</title> <title>AnthoLume - {{ block "title" . }}{{ end }}</title>
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<link rel="stylesheet" href="/assets/style.css" /> <link rel="stylesheet" href="/assets/style.css" />
@ -32,7 +40,8 @@
html { html {
height: calc(100% + env(safe-area-inset-bottom)); 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); padding: env(safe-area-inset-top) env(safe-area-inset-right) 0
env(safe-area-inset-left);
} }
main { main {
@ -57,12 +66,12 @@
/* ----------------------------- */ /* ----------------------------- */
/* -------- CSS Button -------- */ /* -------- CSS Button -------- */
/* ----------------------------- */ /* ----------------------------- */
.css-button:checked+div { .css-button:checked + div {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
.css-button+div { .css-button + div {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
} }
@ -70,7 +79,7 @@
/* ----------------------------- */ /* ----------------------------- */
/* ------- User Dropdown ------- */ /* ------- User Dropdown ------- */
/* ----------------------------- */ /* ----------------------------- */
#user-dropdown-button:checked+#user-dropdown { #user-dropdown-button:checked + #user-dropdown {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
@ -99,26 +108,26 @@
transform-origin: 0% 100%; transform-origin: 0% 100%;
} }
#mobile-nav-button input:checked~span { #mobile-nav-button input:checked ~ span {
opacity: 1; opacity: 1;
transform: rotate(45deg) translate(2px, -2px); transform: rotate(45deg) translate(2px, -2px);
} }
#mobile-nav-button input:checked~span:nth-last-child(3) { #mobile-nav-button input:checked ~ span:nth-last-child(3) {
opacity: 0; opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2); transform: rotate(0deg) scale(0.2, 0.2);
} }
#mobile-nav-button input:checked~span:nth-last-child(2) { #mobile-nav-button input:checked ~ span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, 6px); transform: rotate(-45deg) translate(0, 6px);
} }
#mobile-nav-button input:checked~div { #mobile-nav-button input:checked ~ div {
transform: none; transform: none;
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
#mobile-nav-button input~div { #mobile-nav-button input ~ div {
transform: none; transform: none;
} }
} }
@ -133,8 +142,10 @@
@media (orientation: landscape) { @media (orientation: landscape) {
#menu { #menu {
transform: translate(calc(-1 * (env(safe-area-inset-left) + 100%)), transform: translate(
0); calc(-1 * (env(safe-area-inset-left) + 100%)),
0
);
} }
} }
</style> </style>
@ -142,87 +153,161 @@
<body class="bg-gray-100 dark:bg-gray-800"> <body class="bg-gray-100 dark:bg-gray-800">
<div class="flex items-center justify-between w-full h-16"> <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"> <div id="mobile-nav-button" class="flex flex-col z-40 relative ml-6">
<input type="checkbox" <input
class="absolute lg:hidden z-50 -top-2 w-7 h-7 flex cursor-pointer opacity-0" /> type="checkbox"
<span class="lg:hidden bg-black w-7 h-0.5 z-40 mt-0.5 dark:bg-white"></span> 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-1 dark:bg-white"></span> />
<span class="lg:hidden bg-black w-7 h-0.5 z-40 mt-1 dark:bg-white"></span> <span
<div id="menu" class="lg:hidden bg-black w-7 h-0.5 z-40 mt-0.5 dark:bg-white"
class="fixed -ml-6 h-full w-56 lg:w-48 bg-white dark:bg-gray-700 shadow-lg"> ></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"> <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> <p
class="text-xl font-bold dark:text-white text-right my-auto pr-8 lg:pr-0"
>
AnthoLume
</p>
</div> </div>
<div> <div>
{{ $default := "flex items-center justify-start w-full p-2 pl-6 my-2 transition-colors duration-200 border-l-4" }} {{ $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" }} {{ $inactive := "border-transparent text-gray-400 hover:text-gray-800 dark:hover:text-gray-100" }}
{{ $active := "border-purple-500 dark:text-white" }} {{ $active := "border-purple-500 dark:text-white" }}
<a class="{{ $default }} {{ if eq .RouteName "home" }} {{ $active }} {{ else if true }} {{ $inactive }} {{ end }}" <a
href="/"> class="{{ $default }} {{ if eq .RouteName "home" }}
{{ $active }}
{{ else if true }}
{{ $inactive }}
{{ end }}"
href="/"
>
{{ template "svg/home" (dict "Size" 20) }} {{ template "svg/home" (dict "Size" 20) }}
<span class="mx-4 text-sm font-normal">Home</span> <span class="mx-4 text-sm font-normal">Home</span>
</a> </a>
<a class="{{ $default }} {{ if eq .RouteName "documents" }} {{ $active }} {{ else if true }} {{ $inactive }} {{ end }}" <a
href="/documents"> class="{{ $default }} {{ if eq .RouteName "documents" }}
{{ $active }}
{{ else if true }}
{{ $inactive }}
{{ end }}"
href="/documents"
>
{{ template "svg/documents" (dict "Size" 20) }} {{ template "svg/documents" (dict "Size" 20) }}
<span class="mx-4 text-sm font-normal">Documents</span> <span class="mx-4 text-sm font-normal">Documents</span>
</a> </a>
<a class="{{ $default }} {{ if eq .RouteName "progress" }} {{ $active }} {{ else if true }} {{ $inactive }} {{ end }}" <a
href="/progress"> class="{{ $default }} {{ if eq .RouteName "progress" }}
{{ $active }}
{{ else if true }}
{{ $inactive }}
{{ end }}"
href="/progress"
>
{{ template "svg/activity" (dict "Size" 20) }} {{ template "svg/activity" (dict "Size" 20) }}
<span class="mx-4 text-sm font-normal">Progress</span> <span class="mx-4 text-sm font-normal">Progress</span>
</a> </a>
<a class="{{ $default }} {{ if eq .RouteName "activity" }} {{ $active }} {{ else if true }} {{ $inactive }} {{ end }}" <a
href="/activity"> class="{{ $default }} {{ if eq .RouteName "activity" }}
{{ $active }}
{{ else if true }}
{{ $inactive }}
{{ end }}"
href="/activity"
>
{{ template "svg/activity" (dict "Size" 20) }} {{ template "svg/activity" (dict "Size" 20) }}
<span class="mx-4 text-sm font-normal">Activity</span> <span class="mx-4 text-sm font-normal">Activity</span>
</a> </a>
{{ if .Config.SearchEnabled }} {{ if .Config.SearchEnabled }}
<a class="{{ $default }} {{ if eq .RouteName "search" }} {{ $active }} {{ else if true }} {{ $inactive }} {{ end }}" <a
href="/search"> class="{{ $default }} {{ if eq .RouteName "search" }}
{{ $active }}
{{ else if true }}
{{ $inactive }}
{{ end }}"
href="/search"
>
{{ template "svg/search" (dict "Size" 20) }} {{ template "svg/search" (dict "Size" 20) }}
<span class="mx-4 text-sm font-normal">Search</span> <span class="mx-4 text-sm font-normal">Search</span>
</a> </a>
{{ end }} {{ end }}
{{ if .Authorization.IsAdmin }} {{ 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 }}"> <div
<a href="/admin" class="flex flex-col gap-4 p-2 pl-6 my-2 transition-colors duration-200 border-l-4 {{ if hasPrefix .RouteName "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 }}"> 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) }} {{ template "svg/settings" (dict "Size" 20) }}
<span class="mx-4 text-sm font-normal">Admin</span> <span class="mx-4 text-sm font-normal">Admin</span>
</a> </a>
{{ if hasPrefix .RouteName "admin" }} {{ if hasPrefix .RouteName "admin" }}
<a href="/admin" <a
href="/admin"
style="padding-left: 1.75em" 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 }}"> 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> <span class="mx-4 text-sm font-normal">General</span>
</a> </a>
<a href="/admin/import" <a
href="/admin/import"
style="padding-left: 1.75em" 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 }}"> 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> <span class="mx-4 text-sm font-normal">Import</span>
</a> </a>
<a href="/admin/users" <a
href="/admin/users"
style="padding-left: 1.75em" 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 }}"> 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> <span class="mx-4 text-sm font-normal">Users</span>
</a> </a>
<a href="/admin/logs" <a
href="/admin/logs"
style="padding-left: 1.75em" 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 }}"> 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> <span class="mx-4 text-sm font-normal">Logs</span>
</a> </a>
{{ end }} {{ end }}
</div> </div>
{{ end }} {{ end }}
</div> </div>
<a class="flex flex-col gap-2 justify-center items-center p-6 w-full absolute bottom-0 text-black dark:text-white" <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" target="_blank"
href="https://gitea.va.reichard.io/evan/AnthoLume"> href="https://gitea.va.reichard.io/evan/AnthoLume"
<svg xmlns="http://www.w3.org/2000/svg" >
<svg
xmlns="http://www.w3.org/2000/svg"
class="text-black dark:text-white" class="text-black dark:text-white"
height="20" height="20"
viewBox="0 0 219 92" viewBox="0 0 219 92"
fill="currentColor"> fill="currentColor"
>
<defs> <defs>
<clipPath id="a"> <clipPath id="a">
<path d="M159 .79h25V69h-25Zm0 0" /> <path d="M159 .79h25V69h-25Zm0 0" />
@ -234,49 +319,77 @@
<path d="M0 .79h92V92H0Zm0 0" /> <path d="M0 .79h92V92H0Zm0 0" />
</clipPath> </clipPath>
</defs> </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" /> <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)"> <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" /> <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>
<g clip-path="url(#b)"> <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" /> <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>
<g clip-path="url(#c)"> <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" /> <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> </g>
</svg> </svg>
<span class="text-xs">{{ .Config.Version }}</span> <span class="text-xs">{{ .Config.Version }}</span>
</a> </a>
</div> </div>
</div> </div>
<h1 class="text-xl font-bold dark:text-white px-6 lg:ml-44">{{ block "header" . }}{{ end }}</h1> <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"> <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> <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" /> <input type="checkbox" id="user-dropdown-button" class="hidden" />
<div id="user-dropdown" <div
class="transition duration-200 z-20 absolute right-4 top-16 pt-4"> id="user-dropdown"
<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"> class="transition duration-200 z-20 absolute right-4 top-16 pt-4"
<div class="py-1" >
<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" role="menu"
aria-orientation="vertical" aria-orientation="vertical"
aria-labelledby="options-menu"> aria-labelledby="options-menu"
<a href="/settings" >
<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" 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"> role="menuitem"
>
<span class="flex flex-col"> <span class="flex flex-col">
<span>Settings</span> <span>Settings</span>
</span> </span>
</a> </a>
<a href="/local" <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" 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"> role="menuitem"
>
<span class="flex flex-col"> <span class="flex flex-col">
<span>Offline</span> <span>Offline</span>
</span> </span>
</a> </a>
<a href="/logout" <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" 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"> role="menuitem"
>
<span class="flex flex-col"> <span class="flex flex-col">
<span>Logout</span> <span>Logout</span>
</span> </span>
@ -285,15 +398,24 @@
</div> </div>
</div> </div>
<label for="user-dropdown-button"> <label for="user-dropdown-button">
<div class="flex items-center gap-2 text-gray-500 dark:text-white text-md py-4 cursor-pointer"> <div
class="flex items-center gap-2 text-gray-500 dark:text-white text-md py-4 cursor-pointer"
>
<span>{{ .Authorization.UserName }}</span> <span>{{ .Authorization.UserName }}</span>
<span class="text-gray-800 dark:text-gray-200">{{ template "svg/dropdown" (dict "Size" 20) }}</span> <span class="text-gray-800 dark:text-gray-200"
>{{ template "svg/dropdown" (dict "Size" 20) }}</span
>
</div> </div>
</label> </label>
</div> </div>
</div> </div>
<main class="relative overflow-hidden"> <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> <div
id="container"
class="h-[100dvh] px-4 overflow-auto md:px-6 lg:ml-48"
>
{{ block "content" . }}{{ end }}
</div>
</main> </main>
<div class="absolute right-4 bottom-4"> <div class="absolute right-4 bottom-4">
{{ block "notifications" . }}{{ end }} {{ block "notifications" . }}{{ end }}

29
templates/components/activity.tmpl
View File

@ -2,24 +2,27 @@
{{ define "title" }}Activity{{ end }} {{ define "title" }}Activity{{ end }}
{{ define "header" }}<a href="./activity">Activity</a>{{ end }} {{ define "header" }}<a href="./activity">Activity</a>{{ end }}
{{ define "content" }} {{ define "content" }}
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<div class="inline-block min-w-full overflow-hidden rounded shadow"> <div class="inline-block min-w-full overflow-hidden rounded shadow">
<!-- Table Component - Utilizes Template "table-cell" --> <!-- Table Component - Utilizes Template "table-cell" -->
{{ template "component/table" (dict {{ template "component/table" (dict
"Columns" (slice "Document" "Time" "Duration" "Percent") "Columns" (slice "Document" "Time" "Duration" "Percent")
"Keys" (slice "Document" "StartTime" "Duration" "EndPercentage") "Keys" (slice "Document" "StartTime" "Duration" "EndPercentage")
"Rows" .Data "Rows" .Data
)}} )
}}
</div>
</div> </div>
</div>
{{ end }} {{ end }}
<!-- Table Cell Definition --> <!-- Table Cell Definition -->
{{ define "table-cell" }} {{ define "table-cell" }}
{{ if eq .Name "Document" }} {{ if eq .Name "Document" }}
<a href="./documents/{{ .Data.DocumentID }}">{{ .Data.Author }} - {{ .Data.Title }}</a> <a href="./documents/{{ .Data.DocumentID }}"
{{ else if eq .Name "EndPercentage" }} >{{ .Data.Author }} - {{ .Data.Title }}</a
{{ index (fields .Data) .Name }}% >
{{ else }} {{ else if eq .Name "EndPercentage" }}
{{ index (fields .Data) .Name }} {{ index (fields .Data) .Name }}%
{{ end }} {{ else }}
{{ index (fields .Data) .Name }}
{{ end }}
{{ end }} {{ end }}

17
templates/components/document-card.tmpl
View File

@ -1,8 +1,13 @@
<div class="w-full relative"> <div class="w-full relative">
<div class="flex gap-4 w-full h-full p-4 shadow-lg bg-white dark:bg-gray-700 rounded"> <div
class="flex gap-4 w-full h-full p-4 shadow-lg bg-white dark:bg-gray-700 rounded"
>
<div class="min-w-fit my-auto h-48 relative"> <div class="min-w-fit my-auto h-48 relative">
<a href="./documents/{{.ID}}"> <a href="./documents/{{ .ID }}">
<img class="rounded object-cover h-full" src="./documents/{{.ID}}/cover" /> <img
class="rounded object-cover h-full"
src="./documents/{{ .ID }}/cover"
/>
</a> </a>
</div> </div>
<div class="flex flex-col justify-around dark:text-white w-full text-sm"> <div class="flex flex-col justify-around dark:text-white w-full text-sm">
@ -31,10 +36,12 @@
</div> </div>
</div> </div>
</div> </div>
<div class="absolute flex flex-col gap-2 right-4 bottom-4 text-gray-500 dark:text-gray-400"> <div
class="absolute flex flex-col gap-2 right-4 bottom-4 text-gray-500 dark:text-gray-400"
>
<a href="./activity?document={{ .ID }}">{{ template "svg/activity" }}</a> <a href="./activity?document={{ .ID }}">{{ template "svg/activity" }}</a>
{{ if .Filepath }} {{ if .Filepath }}
<a href="./documents/{{.ID}}/file">{{ template "svg/download" }}</a> <a href="./documents/{{ .ID }}/file">{{ template "svg/download" }}</a>
{{ else }} {{ else }}
{{ template "svg/download" (dict "Disabled" true) }} {{ template "svg/download" (dict "Disabled" true) }}
{{ end }} {{ end }}

38
templates/components/download-progress.tmpl
View File

@ -1,5 +1,13 @@
<div class="absolute -translate-y-1/2 p-4 m-auto bg-gray-700 dark:bg-gray-300 rounded-lg shadow w-full text-black dark:text-white"> <div
<span class="inline-flex gap-2 items-center font-medium text-xs inline-block py-1 px-2 uppercase rounded-full {{ if .Error }} bg-red-500 {{ else if true }} bg-green-600 {{ end }}"> class="absolute -translate-y-1/2 p-4 m-auto bg-gray-700 dark:bg-gray-300 rounded-lg shadow w-full text-black dark:text-white"
>
<span
class="inline-flex gap-2 items-center font-medium text-xs inline-block py-1 px-2 uppercase rounded-full {{ if .Error }}
bg-red-500
{{ else if true }}
bg-green-600
{{ end }}"
>
{{ if and (ne .Progress 100) (not .Error) }} {{ if and (ne .Progress 100) (not .Error) }}
{{ template "svg/loading" (dict "Size" 16) }} {{ template "svg/loading" (dict "Size" 16) }}
{{ end }} {{ end }}
@ -8,15 +16,27 @@
<div class="flex flex-col gap-2 mt-2"> <div class="flex flex-col gap-2 mt-2">
<div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full"> <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
{{ if .Error }} {{ if .Error }}
<div class="absolute h-full bg-red-500 rounded-full" style="width: 100%"></div> <div
<p class="absolute w-full h-full font-bold text-center text-xs">ERROR</p> class="absolute h-full bg-red-500 rounded-full"
style="width: 100%"
></div>
<p class="absolute w-full h-full font-bold text-center text-xs">
ERROR
</p>
{{ else }} {{ else }}
<div class="absolute h-full bg-green-600 rounded-full" <div
style="width: {{ .Progress }}%"></div> class="absolute h-full bg-green-600 rounded-full"
<p class="absolute w-full h-full font-bold text-center text-xs">{{ .Progress }}%</p> style="width: {{ .Progress }}%"
></div>
<p class="absolute w-full h-full font-bold text-center text-xs">
{{ .Progress }}%
</p>
{{ end }} {{ end }}
</div> </div>
<a href="{{ .ButtonHref }}" <a
class="w-full text-center font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100">{{ .ButtonText }}</a> href="{{ .ButtonHref }}"
class="w-full text-center font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
>{{ .ButtonText }}</a
>
</div> </div>
</div> </div>

24
templates/components/key-val-edit.tmpl
View File

@ -4,14 +4,26 @@
<label class="my-auto cursor-pointer" for="edit-{{ .FormValue }}-button"> <label class="my-auto cursor-pointer" for="edit-{{ .FormValue }}-button">
{{ template "svg/edit" (dict "Size" 18) }} {{ template "svg/edit" (dict "Size" 18) }}
</label> </label>
<input type="checkbox" <input
type="checkbox"
id="edit-{{ .FormValue }}-button" id="edit-{{ .FormValue }}-button"
class="hidden css-button" /> class="hidden css-button"
<div class="absolute z-30 top-7 right-0 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600"> />
<form method="POST" <div
class="absolute z-30 top-7 right-0 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600"
>
<form
method="POST"
action="{{ .URL }}" action="{{ .URL }}"
class="flex flex-col gap-2 text-black dark:text-white text-sm"> class="flex flex-col gap-2 text-black dark:text-white text-sm"
<input type="text" id="{{ .FormValue }}" name="{{ .FormValue }}" value="{{ or .Value "N/A" }}" class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white" /> >
<input
type="text"
id="{{ .FormValue }}"
name="{{ .FormValue }}"
value="{{ or .Value "N/A" }}"
class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"
/>
{{ template "component/button" (dict "Title" "Save") }} {{ template "component/button" (dict "Title" "Save") }}
</form> </form>
</div> </div>

107
templates/components/metadata.tmpl
View File

@ -1,62 +1,87 @@
{{ if .Error }} {{ if .Error }}
<div class="absolute top-0 left-0 w-full h-full z-50"> <div class="absolute top-0 left-0 w-full h-full z-50">
<div class="fixed top-0 left-0 bg-black opacity-50 w-screen h-screen"></div> <div class="fixed top-0 left-0 bg-black opacity-50 w-screen h-screen"></div>
<div class="relative flex flex-col gap-4 p-4 max-h-[95%] bg-white dark:bg-gray-800 overflow-scroll -translate-x-2/4 -translate-y-2/4 top-1/2 left-1/2 w-5/6 overflow-hidden shadow rounded"> <div
class="relative flex flex-col gap-4 p-4 max-h-[95%] bg-white dark:bg-gray-800 overflow-scroll -translate-x-2/4 -translate-y-2/4 top-1/2 left-1/2 w-5/6 overflow-hidden shadow rounded"
>
<div class="text-center"> <div class="text-center">
<h3 class="text-lg font-bold leading-6 dark:text-gray-300">No Metadata Results Found</h3> <h3 class="text-lg font-bold leading-6 dark:text-gray-300">
No Metadata Results Found
</h3>
</div> </div>
{{ template "component/button" (dict {{ template "component/button" (dict
"Title" "Back to Document" "Title" "Back to Document"
"Type" "Link" "Type" "Link"
"URL" (printf "/documents/%s" .ID) "URL" (printf "/documents/%s" .ID)
)}} )
}}
</div>
</div> </div>
</div>
{{ end }} {{ end }}
{{ if .Metadata }} {{ if .Metadata }}
<div class="absolute top-0 left-0 w-full h-full z-50"> <div class="absolute top-0 left-0 w-full h-full z-50">
<div class="fixed top-0 left-0 bg-black opacity-50 w-screen h-screen"></div> <div class="fixed top-0 left-0 bg-black opacity-50 w-screen h-screen"></div>
<div class="relative max-h-[95%] bg-white dark:bg-gray-800 overflow-scroll -translate-x-2/4 -translate-y-2/4 top-1/2 left-1/2 w-5/6 overflow-hidden shadow rounded"> <div
class="relative max-h-[95%] bg-white dark:bg-gray-800 overflow-scroll -translate-x-2/4 -translate-y-2/4 top-1/2 left-1/2 w-5/6 overflow-hidden shadow rounded"
>
<div class="py-5 text-center"> <div class="py-5 text-center">
<h3 class="text-lg font-bold leading-6 dark:text-gray-300">Metadata Results</h3> <h3 class="text-lg font-bold leading-6 dark:text-gray-300">
Metadata Results
</h3>
</div> </div>
<form id="metadata-save" <form
id="metadata-save"
method="POST" method="POST"
action="/documents/{{ .ID }}/edit" action="/documents/{{ .ID }}/edit"
class="text-black dark:text-white border-b dark:border-black"> class="text-black dark:text-white border-b dark:border-black"
>
<dl> <dl>
<div class="p-3 bg-gray-100 dark:bg-gray-900 grid grid-cols-3 gap-4 sm:px-6"> <div
class="p-3 bg-gray-100 dark:bg-gray-900 grid grid-cols-3 gap-4 sm:px-6"
>
<dt class="my-auto font-medium text-gray-500">Cover</dt> <dt class="my-auto font-medium text-gray-500">Cover</dt>
<dd class="mt-1 text-sm sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm sm:mt-0 sm:col-span-2">
<img class="rounded object-fill h-32" <img
src="https://books.google.com/books/content/images/frontcover/{{ .Metadata.ID }}?fife=w480-h690" /> class="rounded object-fill h-32"
src="https://books.google.com/books/content/images/frontcover/{{ .Metadata.ID }}?fife=w480-h690"
/>
</dd> </dd>
</div> </div>
<div class="p-3 bg-white dark:bg-gray-800 grid grid-cols-3 gap-4 sm:px-6"> <div
class="p-3 bg-white dark:bg-gray-800 grid grid-cols-3 gap-4 sm:px-6"
>
<dt class="my-auto font-medium text-gray-500">Title</dt> <dt class="my-auto font-medium text-gray-500">Title</dt>
<dd class="mt-1 text-sm sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm sm:mt-0 sm:col-span-2">
{{ or .Metadata.Title "N/A" }} {{ or .Metadata.Title "N/A" }}
</dd> </dd>
</div> </div>
<div class="p-3 bg-gray-100 dark:bg-gray-900 grid grid-cols-3 gap-4 sm:px-6"> <div
class="p-3 bg-gray-100 dark:bg-gray-900 grid grid-cols-3 gap-4 sm:px-6"
>
<dt class="my-auto font-medium text-gray-500">Author</dt> <dt class="my-auto font-medium text-gray-500">Author</dt>
<dd class="mt-1 text-sm sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm sm:mt-0 sm:col-span-2">
{{ or .Metadata.Author "N/A" }} {{ or .Metadata.Author "N/A" }}
</dd> </dd>
</div> </div>
<div class="p-3 bg-white dark:bg-gray-800 grid grid-cols-3 gap-4 sm:px-6"> <div
class="p-3 bg-white dark:bg-gray-800 grid grid-cols-3 gap-4 sm:px-6"
>
<dt class="my-auto font-medium text-gray-500">ISBN 10</dt> <dt class="my-auto font-medium text-gray-500">ISBN 10</dt>
<dd class="mt-1 text-sm sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm sm:mt-0 sm:col-span-2">
{{ or .Metadata.ISBN10 "N/A" }} {{ or .Metadata.ISBN10 "N/A" }}
</dd> </dd>
</div> </div>
<div class="p-3 bg-gray-100 dark:bg-gray-900 grid grid-cols-3 gap-4 sm:px-6"> <div
class="p-3 bg-gray-100 dark:bg-gray-900 grid grid-cols-3 gap-4 sm:px-6"
>
<dt class="my-auto font-medium text-gray-500">ISBN 13</dt> <dt class="my-auto font-medium text-gray-500">ISBN 13</dt>
<dd class="mt-1 text-sm sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm sm:mt-0 sm:col-span-2">
{{ or .Metadata.ISBN13 "N/A" }} {{ or .Metadata.ISBN13 "N/A" }}
</dd> </dd>
</div> </div>
<div class="p-3 bg-white dark:bg-gray-800 sm:grid sm:grid-cols-3 sm:gap-4 px-6"> <div
class="p-3 bg-white dark:bg-gray-800 sm:grid sm:grid-cols-3 sm:gap-4 px-6"
>
<dt class="my-auto font-medium text-gray-500">Description</dt> <dt class="my-auto font-medium text-gray-500">Description</dt>
<dd class="max-h-[10em] overflow-scroll mt-1 sm:mt-0 sm:col-span-2"> <dd class="max-h-[10em] overflow-scroll mt-1 sm:mt-0 sm:col-span-2">
{{ or .Metadata.Description "N/A" }} {{ or .Metadata.Description "N/A" }}
@ -64,24 +89,42 @@
</div> </div>
</dl> </dl>
<div class="hidden"> <div class="hidden">
<input type="text" id="title" name="title" value="{{ .Metadata.Title }}" /> <input
<input type="text" id="author" name="author" value="{{ .Metadata.Author }}" /> type="text"
<input type="text" id="title"
name="title"
value="{{ .Metadata.Title }}"
/>
<input
type="text"
id="author"
name="author"
value="{{ .Metadata.Author }}"
/>
<input
type="text"
id="description" id="description"
name="description" name="description"
value="{{ .Metadata.Description }}" /> value="{{ .Metadata.Description }}"
<input type="text" />
<input
type="text"
id="isbn_10" id="isbn_10"
name="isbn_10" name="isbn_10"
value="{{ .Metadata.ISBN10 }}" /> value="{{ .Metadata.ISBN10 }}"
<input type="text" />
<input
type="text"
id="isbn_13" id="isbn_13"
name="isbn_13" name="isbn_13"
value="{{ .Metadata.ISBN13 }}" /> value="{{ .Metadata.ISBN13 }}"
<input type="text" />
<input
type="text"
id="cover_gbid" id="cover_gbid"
name="cover_gbid" name="cover_gbid"
value="{{ .Metadata.ID }}" /> value="{{ .Metadata.ID }}"
/>
</div> </div>
</form> </form>
<div class="flex justify-end"> <div class="flex justify-end">
@ -90,13 +133,15 @@
"Title" "Cancel" "Title" "Cancel"
"Type" "Link" "Type" "Link"
"URL" (printf "/documents/%s" .ID) "URL" (printf "/documents/%s" .ID)
)}} )
}}
{{ template "component/button" (dict {{ template "component/button" (dict
"Title" "Save" "Title" "Save"
"FormName" "metadata-save" "FormName" "metadata-save"
)}} )
}}
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
{{ end }} {{ end }}

31
templates/components/streak-card.tmpl
View File

@ -1,6 +1,10 @@
<div class="w-full"> <div class="w-full">
<div class="relative w-full px-4 py-6 bg-white shadow-lg dark:bg-gray-700 rounded"> <div
<p class="text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500"> class="relative w-full px-4 py-6 bg-white shadow-lg dark:bg-gray-700 rounded"
>
<p
class="text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500"
>
{{ if eq .Window "WEEK" }} {{ if eq .Window "WEEK" }}
Weekly Read Streak Weekly Read Streak
{{ else }} {{ else }}
@ -8,16 +12,25 @@
{{ end }} {{ end }}
</p> </p>
<div class="flex items-end my-6 space-x-2"> <div class="flex items-end my-6 space-x-2">
<p class="text-5xl font-bold text-black dark:text-white">{{ .CurrentStreak }}</p> <p class="text-5xl font-bold text-black dark:text-white">
{{ .CurrentStreak }}
</p>
</div> </div>
<div class="dark:text-white"> <div class="dark:text-white">
<div class="flex items-center justify-between pb-2 mb-2 text-sm border-b border-gray-200"> <div
class="flex items-center justify-between pb-2 mb-2 text-sm border-b border-gray-200"
>
<div> <div>
<p> <p>
{{ if eq .Window "WEEK" }} Current Weekly Streak {{ else }} {{ if eq .Window "WEEK" }}
Current Daily Streak {{ end }} Current Weekly Streak
{{ else }}
Current Daily Streak
{{ end }}
</p> </p>
<div class="flex items-end text-sm text-gray-400">{{ .CurrentStreakStartDate }} ➞ {{ .CurrentStreakEndDate }}</div> <div class="flex items-end text-sm text-gray-400">
{{ .CurrentStreakStartDate }} ➞ {{ .CurrentStreakEndDate }}
</div>
</div> </div>
<div class="flex items-end font-bold">{{ .CurrentStreak }}</div> <div class="flex items-end font-bold">{{ .CurrentStreak }}</div>
</div> </div>
@ -30,7 +43,9 @@
Best Daily Streak Best Daily Streak
{{ end }} {{ end }}
</p> </p>
<div class="flex items-end text-sm text-gray-400">{{ .MaxStreakStartDate }} ➞ {{ .MaxStreakEndDate }}</div> <div class="flex items-end text-sm text-gray-400">
{{ .MaxStreakStartDate }} ➞ {{ .MaxStreakEndDate }}
</div>
</div> </div>
<div class="flex items-end font-bold">{{ .MaxStreak }}</div> <div class="flex items-end font-bold">{{ .MaxStreak }}</div>
</div> </div>

10
templates/components/table.tmpl
View File

@ -5,7 +5,11 @@
<thead class="text-gray-800 dark:text-gray-400"> <thead class="text-gray-800 dark:text-gray-400">
<tr> <tr>
{{ range $col := $cols }} {{ range $col := $cols }}
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">{{ $col }}</th> <th
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
>
{{ $col }}
</th>
{{ end }} {{ end }}
</tr> </tr>
</thead> </thead>
@ -18,7 +22,9 @@
{{ range $row := $rows }} {{ range $row := $rows }}
<tr> <tr>
{{ range $key := $keys }} {{ range $key := $keys }}
<td class="p-3 border-b border-gray-200">{{ template "table-cell" (dict "Data" $row "Name" $key )}}</td> <td class="p-3 border-b border-gray-200">
{{ template "table-cell" (dict "Data" $row "Name" $key ) }}
</td>
{{ end }} {{ end }}
</tr> </tr>
{{ end }} {{ end }}

23
templates/pages/activity.tmpl
View File

@ -2,24 +2,27 @@
{{ define "title" }}Activity{{ end }} {{ define "title" }}Activity{{ end }}
{{ define "header" }}<a href="./activity">Activity</a>{{ end }} {{ define "header" }}<a href="./activity">Activity</a>{{ end }}
{{ define "content" }} {{ define "content" }}
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<div class="inline-block min-w-full overflow-hidden rounded shadow"> <div class="inline-block min-w-full overflow-hidden rounded shadow">
<!-- Table Component - Utilizes Template "table-cell" --> <!-- Table Component - Utilizes Template "table-cell" -->
{{ template "component/table" (dict {{ template "component/table" (dict
"Columns" (slice "Document" "Time" "Duration" "Percent") "Columns" (slice "Document" "Time" "Duration" "Percent")
"Keys" (slice "Document" "StartTime" "Duration" "EndPercentage") "Keys" (slice "Document" "StartTime" "Duration" "EndPercentage")
"Rows" .Data "Rows" .Data
)}} )
}}
</div>
</div> </div>
</div>
{{ end }} {{ end }}
<!-- Table Cell Definition --> <!-- Table Cell Definition -->
{{ define "table-cell" }} {{ define "table-cell" }}
{{ if eq .Name "Document" }} {{ if eq .Name "Document" }}
<a href="./documents/{{ .Data.DocumentID }}">{{ .Data.Author }} - {{ .Data.Title }}</a> <a href="./documents/{{ .Data.DocumentID }}"
{{ else if eq .Name "EndPercentage" }} >{{ .Data.Author }} - {{ .Data.Title }}</a
{{ index (fields .Data) .Name }}% >
{{ else }} {{ else if eq .Name "EndPercentage" }}
{{ index (fields .Data) .Name }} {{ index (fields .Data) .Name }}%
{{ end }} {{ else }}
{{ index (fields .Data) .Name }}
{{ end }}
{{ end }} {{ end }}

36
templates/pages/admin-import-results.tmpl
View File

@ -1,15 +1,31 @@
{{ template "base" . }} {{ template "base" . }}
{{ define "title" }}Admin - Import Results{{ end }} {{ define "title" }}Admin - Import Results{{ end }}
{{ define "header" }}<a class="whitespace-pre" href="../admin">Admin - Import Results</a>{{ end }} {{ define "header" }}
<a class="whitespace-pre" href="../admin">Admin - Import Results</a>
{{ end }}
{{ define "content" }} {{ define "content" }}
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<div class="inline-block min-w-full overflow-hidden rounded shadow"> <div class="inline-block min-w-full overflow-hidden rounded shadow">
<table class="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm"> <table
class="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm"
>
<thead class="text-gray-800 dark:text-gray-400"> <thead class="text-gray-800 dark:text-gray-400">
<tr> <tr>
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Document</th> <th
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Status</th> class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Error</th> >
Document
</th>
<th
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
>
Status
</th>
<th
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
>
Error
</th>
</tr> </tr>
</thead> </thead>
<tbody class="text-black dark:text-white"> <tbody class="text-black dark:text-white">
@ -20,8 +36,10 @@
{{ end }} {{ end }}
{{ range $result := .Data }} {{ range $result := .Data }}
<tr> <tr>
<td class="p-3 border-b border-gray-200 grid" <td
style="grid-template-columns: 4rem auto"> class="p-3 border-b border-gray-200 grid"
style="grid-template-columns: 4rem auto"
>
<span class="text-gray-800 dark:text-gray-400">Name:</span> <span class="text-gray-800 dark:text-gray-400">Name:</span>
{{ if (eq $result.ID "") }} {{ if (eq $result.ID "") }}
<span>N/A</span> <span>N/A</span>
@ -42,5 +60,5 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
{{ end }} {{ end }}

68
templates/pages/admin-import.tmpl
View File

@ -1,25 +1,41 @@
{{ template "base" . }} {{ template "base" . }}
{{ define "title" }}Admin - Import{{ end }} {{ define "title" }}Admin - Import{{ end }}
{{ define "header" }}<a class="whitespace-pre" href="../admin">Admin - Import</a>{{ end }} {{ define "header" }}
<a class="whitespace-pre" href="../admin">Admin - Import</a>
{{ end }}
{{ define "content" }} {{ define "content" }}
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<div class="inline-block min-w-full overflow-hidden rounded shadow"> <div class="inline-block min-w-full overflow-hidden rounded shadow">
{{ if .SelectedDirectory }} {{ if .SelectedDirectory }}
<div class="flex flex-col grow gap-2 p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"> <div
<p class="text-lg font-semibold text-gray-500">Selected Import Directory</p> class="flex flex-col grow gap-2 p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
>
<p class="text-lg font-semibold text-gray-500">
Selected Import Directory
</p>
<form class="flex gap-4 flex-col" action="./import" method="POST"> <form class="flex gap-4 flex-col" action="./import" method="POST">
<input type="text" <input
type="text"
name="directory" name="directory"
value="{{ .SelectedDirectory }}" value="{{ .SelectedDirectory }}"
class="hidden" /> class="hidden"
/>
<div class="flex justify-between gap-4 w-full"> <div class="flex justify-between gap-4 w-full">
<div class="flex gap-4 items-center"> <div class="flex gap-4 items-center">
<span>{{ template "svg/import" }}</span> <span>{{ template "svg/import" }}</span>
<p class="font-medium text-lg break-all">{{ .SelectedDirectory }}</p> <p class="font-medium text-lg break-all">
{{ .SelectedDirectory }}
</p>
</div> </div>
<div class="flex flex-col justify-around gap-2 mr-4"> <div class="flex flex-col justify-around gap-2 mr-4">
<div class="inline-flex gap-2 items-center"> <div class="inline-flex gap-2 items-center">
<input checked type="radio" id="direct" name="type" value="DIRECT" /> <input
checked
type="radio"
id="direct"
name="type"
value="DIRECT"
/>
<label for="direct">Direct</label> <label for="direct">Direct</label>
</div> </div>
<div class="inline-flex gap-2 items-center"> <div class="inline-flex gap-2 items-center">
@ -28,27 +44,39 @@
</div> </div>
</div> </div>
</div> </div>
<button type="submit" <button
class="px-10 py-2 text-base font-semibold text-center text-white transition duration-200 ease-in bg-black shadow-md hover:text-black hover:bg-white focus:outline-none focus:ring-2"> type="submit"
class="px-10 py-2 text-base font-semibold text-center text-white transition duration-200 ease-in bg-black shadow-md hover:text-black hover:bg-white focus:outline-none focus:ring-2"
>
<span class="w-full">Import Directory</span> <span class="w-full">Import Directory</span>
</button> </button>
</form> </form>
</div> </div>
{{ end }} {{ end }}
{{ if not .SelectedDirectory }} {{ if not .SelectedDirectory }}
<table class="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm"> <table
class="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm"
>
<thead class="text-gray-800 dark:text-gray-400"> <thead class="text-gray-800 dark:text-gray-400">
<tr> <tr>
<th class="p-3 font-normal text-left border-b border-gray-200 dark:border-gray-800 w-12"></th> <th
<th class="p-3 font-normal text-left border-b border-gray-200 dark:border-gray-800 break-all">{{ .CurrentPath }}</th> class="p-3 font-normal text-left border-b border-gray-200 dark:border-gray-800 w-12"
></th>
<th
class="p-3 font-normal text-left border-b border-gray-200 dark:border-gray-800 break-all"
>
{{ .CurrentPath }}
</th>
</tr> </tr>
</thead> </thead>
<tbody class="text-black dark:text-white"> <tbody class="text-black dark:text-white">
{{ if not (eq .CurrentPath "/") }} {{ if not (eq .CurrentPath "/") }}
<tr> <tr>
<td class="p-3 border-b border-gray-200 text-gray-800 dark:text-gray-400"></td> <td
class="p-3 border-b border-gray-200 text-gray-800 dark:text-gray-400"
></td>
<td class="p-3 border-b border-gray-200"> <td class="p-3 border-b border-gray-200">
<a href="./import?directory={{$.CurrentPath}}/../"> <a href="./import?directory={{ $.CurrentPath }}/../">
<p>../</p> <p>../</p>
</a> </a>
</td> </td>
@ -61,8 +89,12 @@
{{ end }} {{ end }}
{{ range $item := .Data }} {{ range $item := .Data }}
<tr> <tr>
<td class="p-3 border-b border-gray-200 text-gray-800 dark:text-gray-400"> <td
<a href="./import?select={{ $.CurrentPath }}/{{ $item }}">{{ template "svg/import" }}</a> class="p-3 border-b border-gray-200 text-gray-800 dark:text-gray-400"
>
<a href="./import?select={{ $.CurrentPath }}/{{ $item }}"
>{{ template "svg/import" }}</a
>
</td> </td>
<td class="p-3 border-b border-gray-200"> <td class="p-3 border-b border-gray-200">
<a href="./import?directory={{ $.CurrentPath }}/{{ $item }}"> <a href="./import?directory={{ $.CurrentPath }}/{{ $item }}">
@ -75,5 +107,5 @@
</table> </table>
{{ end }} {{ end }}
</div> </div>
</div> </div>
{{ end }} {{ end }}

33
templates/pages/admin-logs.tmpl
View File

@ -1,36 +1,47 @@
{{ template "base" . }} {{ template "base" . }}
{{ define "title" }}Admin - Logs{{ end }} {{ define "title" }}Admin - Logs{{ end }}
{{ define "header" }}<a class="whitespace-pre" href="../admin">Admin - Logs</a>{{ end }} {{ define "header" }}
<a class="whitespace-pre" href="../admin">Admin - Logs</a>
{{ end }}
{{ define "content" }} {{ define "content" }}
<div class="flex flex-col gap-2 grow p-4 mb-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"> <div
class="flex flex-col gap-2 grow p-4 mb-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
>
<form class="flex gap-4 flex-col lg:flex-row" action="./logs" method="GET"> <form class="flex gap-4 flex-col lg:flex-row" action="./logs" method="GET">
<div class="flex flex-col w-full grow"> <div class="flex flex-col w-full grow">
<div class="flex relative"> <div class="flex relative">
<span class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"> <span
class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
>
{{ template "svg/search2" (dict "Size" 15) }} {{ template "svg/search2" (dict "Size" 15) }}
</span> </span>
<input type="text" <input
type="text"
id="filter" id="filter"
name="filter" name="filter"
value="{{ .Filter }}" value="{{ .Filter }}"
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-2 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-2 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
placeholder="JQ Filter" /> placeholder="JQ Filter"
/>
</div> </div>
</div> </div>
<div class="lg:w-60"> <div class="lg:w-60">
{{ template "component/button" (dict {{ template "component/button" (dict
"Title" "Filter" "Title" "Filter"
"Variant" "Secondary" "Variant" "Secondary"
) }} )
}}
</div> </div>
</form> </form>
</div> </div>
<!-- Required for iOS "Hover" Events (onclick) --> <!-- Required for iOS "Hover" Events (onclick) -->
<div onclick <div
onclick
class="flex flex-col-reverse text-black dark:text-white w-full overflow-scroll" class="flex flex-col-reverse text-black dark:text-white w-full overflow-scroll"
style="font-family: monospace"> style="font-family: monospace"
>
{{ range $log := .Data }} {{ range $log := .Data }}
<span class="whitespace-nowrap hover:whitespace-pre">{{ $log }}</span> <span class="whitespace-nowrap hover:whitespace-pre">{{ $log }}</span>
{{ end }} {{ end }}
</div> </div>
{{ end }} {{ end }}

68
templates/pages/admin.tmpl
View File

@ -1,23 +1,34 @@
{{ template "base" . }} {{ template "base" . }}
{{ define "title" }}Admin - General{{ end }} {{ define "title" }}Admin - General{{ end }}
{{ define "header" }}<a class="whitespace-pre" href="./admin">Admin - General</a>{{ end }} {{ define "header" }}
<a class="whitespace-pre" href="./admin">Admin - General</a>
{{ end }}
{{ define "content" }} {{ define "content" }}
<div class="w-full flex flex-col gap-4 grow"> <div class="w-full flex flex-col gap-4 grow">
<div class="flex flex-col gap-2 grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"> <div
class="flex flex-col gap-2 grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
>
<p class="text-lg font-semibold mb-2">Backup & Restore</p> <p class="text-lg font-semibold mb-2">Backup & Restore</p>
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<form class="flex justify-between" action="./admin" method="POST"> <form class="flex justify-between" action="./admin" method="POST">
<input type="text" name="action" value="BACKUP" class="hidden" /> <input type="text" name="action" value="BACKUP" class="hidden" />
<div class="flex gap-8 items-center"> <div class="flex gap-8 items-center">
<div> <div>
<input type="checkbox" id="backup_covers" name="backup_types" value="COVERS" /> <input
type="checkbox"
id="backup_covers"
name="backup_types"
value="COVERS"
/>
<label for="backup_covers">Covers</label> <label for="backup_covers">Covers</label>
</div> </div>
<div> <div>
<input type="checkbox" <input
type="checkbox"
id="backup_documents" id="backup_documents"
name="backup_types" name="backup_types"
value="DOCUMENTS" /> value="DOCUMENTS"
/>
<label for="backup_documents">Documents</label> <label for="backup_documents">Documents</label>
</div> </div>
</div> </div>
@ -25,22 +36,31 @@
{{ template "component/button" (dict {{ template "component/button" (dict
"Title" "Backup" "Title" "Backup"
"Variant" "Secondary" "Variant" "Secondary"
) }} )
}}
</div> </div>
</form> </form>
<form method="POST" <form
method="POST"
enctype="multipart/form-data" enctype="multipart/form-data"
action="./admin" action="./admin"
class="flex justify-between grow"> class="flex justify-between grow"
>
<input type="text" name="action" value="RESTORE" class="hidden" /> <input type="text" name="action" value="RESTORE" class="hidden" />
<div class="flex items-center w-1/2"> <div class="flex items-center w-1/2">
<input type="file" accept=".zip" name="restore_file" class="w-full" /> <input
type="file"
accept=".zip"
name="restore_file"
class="w-full"
/>
</div> </div>
<div class="w-40 h-10"> <div class="w-40 h-10">
{{ template "component/button" (dict {{ template "component/button" (dict
"Title" "Restore" "Title" "Restore"
"Variant" "Secondary" "Variant" "Secondary"
) }} )
}}
</div> </div>
</form> </form>
</div> </div>
@ -50,7 +70,9 @@
<span class="text-green-400 text-xs">{{ .PasswordMessage }}</span> <span class="text-green-400 text-xs">{{ .PasswordMessage }}</span>
{{ end }} {{ end }}
</div> </div>
<div class="flex flex-col grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"> <div
class="flex flex-col grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
>
<p class="text-lg font-semibold">Tasks</p> <p class="text-lg font-semibold">Tasks</p>
<table class="min-w-full bg-white dark:bg-gray-700 text-sm"> <table class="min-w-full bg-white dark:bg-gray-700 text-sm">
<tbody class="text-black dark:text-white"> <tbody class="text-black dark:text-white">
@ -60,12 +82,18 @@
</td> </td>
<td class="py-2 float-right"> <td class="py-2 float-right">
<form action="./admin" method="POST"> <form action="./admin" method="POST">
<input type="text" name="action" value="METADATA_MATCH" class="hidden" /> <input
type="text"
name="action"
value="METADATA_MATCH"
class="hidden"
/>
<div class="w-40 h-10 text-base"> <div class="w-40 h-10 text-base">
{{ template "component/button" (dict {{ template "component/button" (dict
"Title" "Run" "Title" "Run"
"Variant" "Secondary" "Variant" "Secondary"
) }} )
}}
</div> </div>
</form> </form>
</td> </td>
@ -76,12 +104,18 @@
</td> </td>
<td class="py-2 float-right"> <td class="py-2 float-right">
<form action="./admin" method="POST"> <form action="./admin" method="POST">
<input type="text" name="action" value="CACHE_TABLES" class="hidden" /> <input
type="text"
name="action"
value="CACHE_TABLES"
class="hidden"
/>
<div class="w-40 h-10 text-base"> <div class="w-40 h-10 text-base">
{{ template "component/button" (dict {{ template "component/button" (dict
"Title" "Run" "Title" "Run"
"Variant" "Secondary" "Variant" "Secondary"
) }} )
}}
</div> </div>
</form> </form>
</td> </td>
@ -89,5 +123,5 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
{{ end }} {{ end }}

194
templates/pages/document.tmpl
View File

@ -2,17 +2,26 @@
{{ define "title" }}Documents{{ end }} {{ define "title" }}Documents{{ end }}
{{ define "header" }}<a href="/documents">Documents</a>{{ end }} {{ define "header" }}<a href="/documents">Documents</a>{{ end }}
{{ define "content" }} {{ define "content" }}
<div class="h-full w-full relative"> <div class="h-full w-full relative">
<!-- Document Info --> <!-- Document Info -->
<div class="h-full w-full overflow-scroll bg-white shadow-lg dark:bg-gray-700 rounded dark:text-white p-4"> <div
<div class="flex flex-col gap-2 float-left w-44 md:w-60 lg:w-80 mr-4 mb-2 relative"> class="h-full w-full overflow-scroll bg-white shadow-lg dark:bg-gray-700 rounded dark:text-white p-4"
>
<div
class="flex flex-col gap-2 float-left w-44 md:w-60 lg:w-80 mr-4 mb-2 relative"
>
<label class="z-10 cursor-pointer" for="edit-cover-button"> <label class="z-10 cursor-pointer" for="edit-cover-button">
<img class="rounded object-fill w-full" <img
src="/documents/{{.Data.ID}}/cover" /> class="rounded object-fill w-full"
src="/documents/{{ .Data.ID }}/cover"
/>
</label> </label>
{{ if .Data.Filepath }} {{ if .Data.Filepath }}
<a href="/reader#id={{ .Data.ID }}&type=REMOTE" <a
class="z-10 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded text-sm text-center py-1 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Read</a> href="/reader#id={{ .Data.ID }}&type=REMOTE"
class="z-10 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded text-sm text-center py-1 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
>Read</a
>
{{ end }} {{ end }}
<div class="flex flex-wrap-reverse justify-between z-20 gap-2 relative"> <div class="flex flex-wrap-reverse justify-between z-20 gap-2 relative">
<div class="min-w-[50%] md:mr-2"> <div class="min-w-[50%] md:mr-2">
@ -25,70 +34,114 @@
<p class="font-medium">{{ or .Data.Isbn13 "N/A" }}</p> <p class="font-medium">{{ or .Data.Isbn13 "N/A" }}</p>
</div> </div>
</div> </div>
<div class="flex grow justify-between my-auto text-gray-500 dark:text-gray-500"> <div
<input type="checkbox" id="edit-cover-button" class="hidden css-button" /> class="flex grow justify-between my-auto text-gray-500 dark:text-gray-500"
<div class="absolute z-30 flex flex-col gap-2 top-0 left-0 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600"> >
<form method="POST" <input
type="checkbox"
id="edit-cover-button"
class="hidden css-button"
/>
<div
class="absolute z-30 flex flex-col gap-2 top-0 left-0 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600"
>
<form
method="POST"
enctype="multipart/form-data" enctype="multipart/form-data"
action="./{{ .Data.ID }}/edit" action="./{{ .Data.ID }}/edit"
class="flex flex-col gap-2 w-72 text-black dark:text-white text-sm"> class="flex flex-col gap-2 w-72 text-black dark:text-white text-sm"
<input type="file" id="cover_file" name="cover_file"> >
<input type="file" id="cover_file" name="cover_file" />
{{ template "component/button" (dict "Title" "Upload Cover") }} {{ template "component/button" (dict "Title" "Upload Cover") }}
</form> </form>
<form method="POST" <form
method="POST"
action="./{{ .Data.ID }}/edit" action="./{{ .Data.ID }}/edit"
class="flex flex-col gap-2 w-72 text-black dark:text-white text-sm"> class="flex flex-col gap-2 w-72 text-black dark:text-white text-sm"
<input type="checkbox" >
<input
type="checkbox"
checked checked
id="remove_cover" id="remove_cover"
name="remove_cover" name="remove_cover"
class="hidden" /> class="hidden"
/>
{{ template "component/button" (dict "Title" "Remove Cover") }} {{ template "component/button" (dict "Title" "Remove Cover") }}
</form> </form>
</div> </div>
<div class="relative"> <div class="relative">
<label for="delete-button" class="cursor-pointer">{{ template "svg/delete" (dict "Size" 28) }}</label> <label for="delete-button" class="cursor-pointer"
<input type="checkbox" id="delete-button" class="hidden css-button" /> >{{ template "svg/delete" (dict "Size" 28) }}</label
<div class="absolute z-30 bottom-7 left-5 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600"> >
<form method="POST" <input
type="checkbox"
id="delete-button"
class="hidden css-button"
/>
<div
class="absolute z-30 bottom-7 left-5 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600"
>
<form
method="POST"
action="./{{ .Data.ID }}/delete" action="./{{ .Data.ID }}/delete"
class="text-black dark:text-white text-sm w-24"> class="text-black dark:text-white text-sm w-24"
>
{{ template "component/button" (dict "Title" "Delete") }} {{ template "component/button" (dict "Title" "Delete") }}
</form> </form>
</div> </div>
</div> </div>
<a href="../activity?document={{ .Data.ID }}">{{ template "svg/activity" (dict "Size" 28) }}</a> <a href="../activity?document={{ .Data.ID }}"
>{{ template "svg/activity" (dict "Size" 28) }}</a
>
<div class="relative"> <div class="relative">
<label for="search-button">{{ template "svg/search" (dict "Size" 28) }}</label> <label for="search-button"
<input type="checkbox" id="search-button" class="hidden css-button" /> >{{ template "svg/search" (dict "Size" 28) }}</label
<div class="absolute z-30 bottom-7 left-5 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600"> >
<form method="POST" <input
type="checkbox"
id="search-button"
class="hidden css-button"
/>
<div
class="absolute z-30 bottom-7 left-5 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600"
>
<form
method="POST"
action="./{{ .Data.ID }}/identify" action="./{{ .Data.ID }}/identify"
class="flex flex-col gap-2 text-black dark:text-white text-sm"> class="flex flex-col gap-2 text-black dark:text-white text-sm"
<input type="text" >
<input
type="text"
id="title" id="title"
name="title" name="title"
placeholder="Title" placeholder="Title"
value="{{ or .Data.Title nil }}" value="{{ or .Data.Title nil }}"
class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"> class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"
<input type="text" />
<input
type="text"
id="author" id="author"
name="author" name="author"
placeholder="Author" placeholder="Author"
value="{{ or .Data.Author nil }}" value="{{ or .Data.Author nil }}"
class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"> class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"
<input type="text" />
<input
type="text"
id="isbn" id="isbn"
name="isbn" name="isbn"
placeholder="ISBN 10 / ISBN 13" placeholder="ISBN 10 / ISBN 13"
value="{{ or .Data.Isbn13 (or .Data.Isbn10 nil) }}" value="{{ or .Data.Isbn13 (or .Data.Isbn10 nil) }}"
class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"> class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"
/>
{{ template "component/button" (dict "Title" "Identify") }} {{ template "component/button" (dict "Title" "Identify") }}
</form> </form>
</div> </div>
</div> </div>
{{ if .Data.Filepath }} {{ if .Data.Filepath }}
<a href="./{{.Data.ID}}/file">{{ template "svg/download" (dict "Size" 28) }}</a> <a href="./{{ .Data.ID }}/file"
>{{ template "svg/download" (dict "Size" 28) }}</a
>
{{ else }} {{ else }}
{{ template "svg/download" (dict "Size" 28 "Disabled" true) }} {{ template "svg/download" (dict "Size" 28 "Disabled" true) }}
{{ end }} {{ end }}
@ -101,22 +154,34 @@
"Value" .Data.Title "Value" .Data.Title
"URL" (printf "./%s/edit" .Data.ID) "URL" (printf "./%s/edit" .Data.ID)
"FormValue" "title" "FormValue" "title"
)}} )
}}
{{ template "component/key-val-edit" (dict {{ template "component/key-val-edit" (dict
"Title" "Author" "Title" "Author"
"Value" .Data.Author "Value" .Data.Author
"URL" (printf "./%s/edit" .Data.ID) "URL" (printf "./%s/edit" .Data.ID)
"FormValue" "author" "FormValue" "author"
)}} )
}}
<div class="relative"> <div class="relative">
<div class="text-gray-500 inline-flex gap-2 relative"> <div class="text-gray-500 inline-flex gap-2 relative">
<p>Time Read</p> <p>Time Read</p>
<label class="my-auto" for="progress-info-button">{{ template "svg/info" (dict "Size" 18) }}</label> <label class="my-auto" for="progress-info-button"
<input type="checkbox" id="progress-info-button" class="hidden css-button" /> >{{ template "svg/info" (dict "Size" 18) }}</label
<div class="absolute z-30 top-7 right-0 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600"> >
<input
type="checkbox"
id="progress-info-button"
class="hidden css-button"
/>
<div
class="absolute z-30 top-7 right-0 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600"
>
<div class="text-xs flex"> <div class="text-xs flex">
<p class="text-gray-400 w-32">Seconds / Percent</p> <p class="text-gray-400 w-32">Seconds / Percent</p>
<p class="font-medium dark:text-white">{{ .Data.SecondsPerPercent }}</p> <p class="font-medium dark:text-white">
{{ .Data.SecondsPerPercent }}
</p>
</div> </div>
<div class="text-xs flex"> <div class="text-xs flex">
<p class="text-gray-400 w-32">Words / Minute</p> <p class="text-gray-400 w-32">Words / Minute</p>
@ -124,11 +189,15 @@
</div> </div>
<div class="text-xs flex"> <div class="text-xs flex">
<p class="text-gray-400 w-32">Est. Time Left</p> <p class="text-gray-400 w-32">Est. Time Left</p>
<p class="font-medium dark:text-white whitespace-nowrap">{{ niceSeconds .TotalTimeLeftSeconds }}</p> <p class="font-medium dark:text-white whitespace-nowrap">
{{ niceSeconds .TotalTimeLeftSeconds }}
</p>
</div> </div>
</div> </div>
</div> </div>
<p class="font-medium text-lg">{{ niceSeconds .Data.TotalTimeSeconds }}</p> <p class="font-medium text-lg">
{{ niceSeconds .Data.TotalTimeSeconds }}
</p>
</div> </div>
<div> <div>
<p class="text-gray-500">Progress</p> <p class="text-gray-500">Progress</p>
@ -138,23 +207,37 @@
<div class="relative"> <div class="relative">
<div class="text-gray-500 inline-flex gap-2 relative"> <div class="text-gray-500 inline-flex gap-2 relative">
<p>Description</p> <p>Description</p>
<label class="my-auto" for="edit-description-button">{{ template "svg/edit" (dict "Size" 18) }}</label> <label class="my-auto" for="edit-description-button"
>{{ template "svg/edit" (dict "Size" 18) }}</label
>
</div> </div>
</div> </div>
<div class="relative font-medium text-justify hyphens-auto"> <div class="relative font-medium text-justify hyphens-auto">
<input type="checkbox" <input
type="checkbox"
id="edit-description-button" id="edit-description-button"
class="hidden css-button" /> class="hidden css-button"
<div class="absolute h-full w-full min-h-[10em] z-30 top-1 right-0 gap-4 flex transition-all duration-200"> />
<img class="hidden md:block invisible rounded w-44 md:w-60 lg:w-80 object-fill" <div
src="/documents/{{.Data.ID}}/cover" /> class="absolute h-full w-full min-h-[10em] z-30 top-1 right-0 gap-4 flex transition-all duration-200"
<form method="POST" >
<img
class="hidden md:block invisible rounded w-44 md:w-60 lg:w-80 object-fill"
src="/documents/{{ .Data.ID }}/cover"
/>
<form
method="POST"
action="./{{ .Data.ID }}/edit" action="./{{ .Data.ID }}/edit"
class="flex flex-col gap-2 w-full text-black bg-gray-200 rounded shadow-lg shadow-gray-500 dark:text-white dark:shadow-gray-900 dark:bg-gray-600 text-sm p-3"> class="flex flex-col gap-2 w-full text-black bg-gray-200 rounded shadow-lg shadow-gray-500 dark:text-white dark:shadow-gray-900 dark:bg-gray-600 text-sm p-3"
<textarea type="text" >
<textarea
type="text"
id="description" id="description"
name="description" name="description"
class="h-full w-full p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white">{{ or .Data.Description "N/A" }}</textarea> class="h-full w-full p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"
>
{{ or .Data.Description "N/A" }}</textarea
>
{{ template "component/button" (dict "Title" "Save") }} {{ template "component/button" (dict "Title" "Save") }}
</form> </form>
</div> </div>
@ -165,6 +248,7 @@
"ID" .Data.ID "ID" .Data.ID
"Metadata" .Metadata "Metadata" .Metadata
"Error" .MetadataError "Error" .MetadataError
)}} )
</div> }}
</div>
{{ end }} {{ end }}

89
templates/pages/documents.tmpl
View File

@ -2,63 +2,98 @@
{{ define "title" }}Documents{{ end }} {{ define "title" }}Documents{{ end }}
{{ define "header" }}<a href="./documents">Documents</a>{{ end }} {{ define "header" }}<a href="./documents">Documents</a>{{ end }}
{{ define "content" }} {{ define "content" }}
<div class="flex flex-col gap-2 grow p-4 mb-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"> <div
<form class="flex gap-4 flex-col lg:flex-row" class="flex flex-col gap-2 grow p-4 mb-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
>
<form
class="flex gap-4 flex-col lg:flex-row"
action="./documents" action="./documents"
method="GET"> method="GET"
>
<div class="flex flex-col w-full grow"> <div class="flex flex-col w-full grow">
<div class="flex relative"> <div class="flex relative">
<span class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"> <span
class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
>
{{ template "svg/search2" (dict "Size" 15) }} {{ template "svg/search2" (dict "Size" 15) }}
</span> </span>
<input type="text" <input
type="text"
id="search" id="search"
name="search" name="search"
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-2 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-2 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
placeholder="Search Author / Title" /> placeholder="Search Author / Title"
/>
</div> </div>
</div> </div>
<div class="lg:w-60"> <div class="lg:w-60">
{{ template "component/button" (dict {{ template "component/button" (dict
"Title" "Search" "Title" "Search"
"Variant" "Secondary" "Variant" "Secondary"
) }} )
}}
</div> </div>
</form> </form>
</div> </div>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
{{ range $doc := .Data }} {{ range $doc := .Data }}
{{ template "component/document-card" $doc }} {{ template "component/document-card" $doc }}
{{ end }} {{ end }}
</div> </div>
<div class="w-full flex gap-4 justify-center mt-4 text-black dark:text-white"> <div class="w-full flex gap-4 justify-center mt-4 text-black dark:text-white">
{{ if .PreviousPage }} {{ if .PreviousPage }}
<a href="./documents?page={{ .PreviousPage }}&limit={{ .PageLimit }}" <a
class="bg-white shadow-lg dark:bg-gray-600 hover:bg-gray-400 font-medium rounded text-sm text-center p-2 w-24 dark:hover:bg-gray-700 focus:outline-none">◄</a> href="./documents?page={{ .PreviousPage }}&limit={{ .PageLimit }}"
class="bg-white shadow-lg dark:bg-gray-600 hover:bg-gray-400 font-medium rounded text-sm text-center p-2 w-24 dark:hover:bg-gray-700 focus:outline-none"
>◄</a
>
{{ end }} {{ end }}
{{ if .NextPage }} {{ if .NextPage }}
<a href="./documents?page={{ .NextPage }}&limit={{ .PageLimit }}" <a
class="bg-white shadow-lg dark:bg-gray-600 hover:bg-gray-400 font-medium rounded text-sm text-center p-2 w-24 dark:hover:bg-gray-700 focus:outline-none">►</a> href="./documents?page={{ .NextPage }}&limit={{ .PageLimit }}"
class="bg-white shadow-lg dark:bg-gray-600 hover:bg-gray-400 font-medium rounded text-sm text-center p-2 w-24 dark:hover:bg-gray-700 focus:outline-none"
>►</a
>
{{ end }} {{ end }}
</div> </div>
<div class="fixed bottom-6 right-6 rounded-full flex items-center justify-center"> <div
class="fixed bottom-6 right-6 rounded-full flex items-center justify-center"
>
<input type="checkbox" id="upload-file-button" class="hidden css-button" /> <input type="checkbox" id="upload-file-button" class="hidden css-button" />
<div class="absolute right-0 z-10 bottom-0 rounded p-4 bg-gray-800 dark:bg-gray-200 text-white dark:text-black w-72 text-sm flex flex-col gap-2"> <div
<form method="POST" class="absolute right-0 z-10 bottom-0 rounded p-4 bg-gray-800 dark:bg-gray-200 text-white dark:text-black w-72 text-sm flex flex-col gap-2"
>
<form
method="POST"
enctype="multipart/form-data" enctype="multipart/form-data"
action="./documents" action="./documents"
class="flex flex-col gap-2"> class="flex flex-col gap-2"
<input type="file" accept=".epub" id="document_file" name="document_file" /> >
<button class="font-medium px-2 py-1 text-gray-800 bg-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800" <input
type="submit">Upload File</button> type="file"
accept=".epub"
id="document_file"
name="document_file"
/>
<button
class="font-medium px-2 py-1 text-gray-800 bg-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
type="submit"
>
Upload File
</button>
</form> </form>
<label for="upload-file-button"> <label for="upload-file-button">
<div class="w-full text-center cursor-pointer font-medium mt-2 px-2 py-1 text-gray-800 bg-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"> <div
class="w-full text-center cursor-pointer font-medium mt-2 px-2 py-1 text-gray-800 bg-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
>
Cancel Upload Cancel Upload
</div> </div>
</label> </label>
</div> </div>
<label class="w-16 h-16 bg-gray-800 dark:bg-gray-200 rounded-full flex items-center justify-center opacity-30 hover:opacity-100 transition-all duration-200 cursor-pointer" <label
for="upload-file-button">{{ template "svg/upload" (dict "Size" 34) }}</label> class="w-16 h-16 bg-gray-800 dark:bg-gray-200 rounded-full flex items-center justify-center opacity-30 hover:opacity-100 transition-all duration-200 cursor-pointer"
</div> for="upload-file-button"
>{{ template "svg/upload" (dict "Size" 34) }}</label
>
</div>
{{ end }} {{ end }}

53
templates/pages/error.tmpl
View File

@ -1,30 +1,53 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" <meta
content="width=device-width, initial-scale=0.90, user-scalable=no, viewport-fit=cover" /> 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-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" <meta
content="black-translucent" /> name="apple-mobile-web-app-status-bar-style"
<meta name="theme-color" content="black-translucent"
/>
<meta
name="theme-color"
content="#F3F4F6" content="#F3F4F6"
media="(prefers-color-scheme: light)" /> media="(prefers-color-scheme: light)"
<meta name="theme-color" />
<meta
name="theme-color"
content="#1F2937" content="#1F2937"
media="(prefers-color-scheme: dark)" /> media="(prefers-color-scheme: dark)"
/>
<title>AnthoLume - Error</title> <title>AnthoLume - Error</title>
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<link rel="stylesheet" href="/assets/style.css" /> <link rel="stylesheet" href="/assets/style.css" />
</head> </head>
<body class="bg-gray-100 dark:bg-gray-800 flex flex-col justify-center h-screen"> <body
class="bg-gray-100 dark:bg-gray-800 flex flex-col justify-center h-screen"
>
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6"> <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<div class="mx-auto max-w-screen-sm text-center"> <div class="mx-auto max-w-screen-sm text-center">
<h1 class="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-gray-600 dark:text-gray-500">{{ .Status }}</h1> <h1
<p class="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white">{{ .Error }}</p> class="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-gray-600 dark:text-gray-500"
<p class="mb-8 text-lg font-light text-gray-500 dark:text-gray-400">{{ .Message }}</p> >
<a href="/" {{ .Status }}
class="rounded text-center font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100">Back to Homepage</a> </h1>
<p
class="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white"
>
{{ .Error }}
</p>
<p class="mb-8 text-lg font-light text-gray-500 dark:text-gray-400">
{{ .Message }}
</p>
<a
href="/"
class="rounded text-center font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
>Back to Homepage</a
>
</div> </div>
</div> </div>
</body> </body>

67
templates/pages/home.tmpl
View File

@ -2,37 +2,55 @@
{{ define "title" }}Home{{ end }} {{ define "title" }}Home{{ end }}
{{ define "header" }}<a href="./">Home</a>{{ end }} {{ define "header" }}<a href="./">Home</a>{{ end }}
{{ define "content" }} {{ define "content" }}
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div class="w-full"> <div class="w-full">
<div class="relative w-full bg-white shadow-lg dark:bg-gray-700 rounded"> <div class="relative w-full bg-white shadow-lg dark:bg-gray-700 rounded">
<p class="absolute top-3 left-5 text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500"> <p
class="absolute top-3 left-5 text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500"
>
Daily Read Totals Daily Read Totals
</p> </p>
{{ $data := (getSVGGraphData .Data.GraphData 800 70 )}} {{ $data := (getSVGGraphData .Data.GraphData 800 70 ) }}
<div class="relative"> <div class="relative">
<svg viewBox="26 0 755 {{ $data.Height }}" <svg
viewBox="26 0 755 {{ $data.Height }}"
preserveAspectRatio="none" preserveAspectRatio="none"
width="100%" width="100%"
height="6em"> height="6em"
>
<!-- Bezier Line Graph --> <!-- Bezier Line Graph -->
<path fill="#316BBE" fill-opacity="0.5" stroke="none" d="{{ $data.BezierPath }} {{ $data.BezierFill }}" /> <path
fill="#316BBE"
fill-opacity="0.5"
stroke="none"
d="{{ $data.BezierPath }} {{ $data.BezierFill }}"
/>
<path fill="none" stroke="#316BBE" d="{{ $data.BezierPath }}" /> <path fill="none" stroke="#316BBE" d="{{ $data.BezierPath }}" />
</svg> </svg>
<div class="flex absolute w-full h-full top-0" <div
class="flex absolute w-full h-full top-0"
style="width: calc(100%*31/30); style="width: calc(100%*31/30);
transform: translateX(-50%); transform: translateX(-50%);
left: 50%"> left: 50%"
>
{{ range $index, $item := $data.LinePoints }} {{ range $index, $item := $data.LinePoints }}
<!-- Required for iOS "Hover" Events (onclick) --> <!-- Required for iOS "Hover" Events (onclick) -->
<div onclick <div
onclick
class="opacity-0 hover:opacity-100 w-full" class="opacity-0 hover:opacity-100 w-full"
style="background: linear-gradient(rgba(128, 128, 128, 0.5), rgba(128, 128, 128, 0.5)) no-repeat center/2px 100%"> style="background: linear-gradient(rgba(128, 128, 128, 0.5), rgba(128, 128, 128, 0.5)) no-repeat center/2px 100%"
<div class="flex flex-col items-center p-2 rounded absolute top-3 dark:text-white text-xs pointer-events-none" >
<div
class="flex flex-col items-center p-2 rounded absolute top-3 dark:text-white text-xs pointer-events-none"
style="transform: translateX(-50%); style="transform: translateX(-50%);
background-color: rgba(128, 128, 128, 0.2); background-color: rgba(128, 128, 128, 0.2);
left: 50%"> left: 50%"
>
<span>{{ (index $.Data.GraphData $index).Date }}</span> <span>{{ (index $.Data.GraphData $index).Date }}</span>
<span>{{ (index $.Data.GraphData $index).MinutesRead }} minutes</span> <span
>{{ (index $.Data.GraphData $index).MinutesRead }}
minutes</span
>
</div> </div>
</div> </div>
{{ end }} {{ end }}
@ -45,21 +63,25 @@
"Title" "Documents" "Title" "Documents"
"Size" .Data.DatabaseInfo.DocumentsSize "Size" .Data.DatabaseInfo.DocumentsSize
"Link" "./documents" "Link" "./documents"
)}} )
}}
{{ template "component/info-card" (dict {{ template "component/info-card" (dict
"Title" "Activity Records" "Title" "Activity Records"
"Size" .Data.DatabaseInfo.ActivitySize "Size" .Data.DatabaseInfo.ActivitySize
"Link" "./activity" "Link" "./activity"
)}} )
}}
{{ template "component/info-card" (dict {{ template "component/info-card" (dict
"Title" "Progress Records" "Title" "Progress Records"
"Size" .Data.DatabaseInfo.ProgressSize "Size" .Data.DatabaseInfo.ProgressSize
"Link" "./progress" "Link" "./progress"
)}} )
}}
{{ template "component/info-card" (dict {{ template "component/info-card" (dict
"Title" "Devices" "Title" "Devices"
"Size" .Data.DatabaseInfo.DevicesSize "Size" .Data.DatabaseInfo.DevicesSize
)}} )
}}
</div> </div>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2"> <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
{{ range $item := .Data.Streaks }} {{ range $item := .Data.Streaks }}
@ -70,15 +92,18 @@
{{ template "component/leaderboard-card" (dict {{ template "component/leaderboard-card" (dict
"Name" "WPM" "Name" "WPM"
"Data" .Data.UserStatistics.WPM "Data" .Data.UserStatistics.WPM
)}} )
}}
{{ template "component/leaderboard-card" (dict {{ template "component/leaderboard-card" (dict
"Name" "Duration" "Name" "Duration"
"Data" .Data.UserStatistics.Duration "Data" .Data.UserStatistics.Duration
)}} )
}}
{{ template "component/leaderboard-card" (dict {{ template "component/leaderboard-card" (dict
"Name" "Words" "Name" "Words"
"Data" .Data.UserStatistics.Words "Data" .Data.UserStatistics.Words
)}} )
}}
</div>
</div> </div>
</div>
{{ end }} {{ end }}

122
templates/pages/login.tmpl
View File

@ -1,19 +1,29 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" <meta
content="width=device-width, initial-scale=0.90, user-scalable=no, viewport-fit=cover" /> 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-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" <meta
content="black-translucent" /> name="apple-mobile-web-app-status-bar-style"
<meta name="theme-color" content="black-translucent"
/>
<meta
name="theme-color"
content="#F3F4F6" content="#F3F4F6"
media="(prefers-color-scheme: light)" /> media="(prefers-color-scheme: light)"
<meta name="theme-color" />
<meta
name="theme-color"
content="#1F2937" content="#1F2937"
media="(prefers-color-scheme: dark)" /> media="(prefers-color-scheme: dark)"
<title>AnthoLume - {{ if .Register }}Register{{ else }}Login{{ end }}</title> />
<title>
AnthoLume - {{ if .Register }}Register{{ else }}Login{{ end }}
</title>
<link rel="manifest" href="./manifest.json" /> <link rel="manifest" href="./manifest.json" />
<link rel="stylesheet" href="./assets/style.css" /> <link rel="stylesheet" href="./assets/style.css" />
<!-- Service Worker / Offline Cache Flush --> <!-- Service Worker / Offline Cache Flush -->
@ -32,7 +42,8 @@
html { html {
height: calc(100% + env(safe-area-inset-bottom)); 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); padding: env(safe-area-inset-top) env(safe-area-inset-right) 0
env(safe-area-inset-left);
} }
/* No Scrollbar - IE, Edge, Firefox */ /* No Scrollbar - IE, Edge, Firefox */
@ -50,43 +61,60 @@
<body class="bg-gray-100 dark:bg-gray-800 dark:text-white"> <body class="bg-gray-100 dark:bg-gray-800 dark:text-white">
<div class="flex flex-wrap w-full"> <div class="flex flex-wrap w-full">
<div class="flex flex-col w-full md:w-1/2"> <div class="flex flex-col w-full md:w-1/2">
<div class="flex flex-col justify-center px-8 pt-8 my-auto md:justify-start md:pt-0 md:px-24 lg:px-32"> <div
class="flex flex-col justify-center px-8 pt-8 my-auto md:justify-start md:pt-0 md:px-24 lg:px-32"
>
<p class="text-3xl text-center">Welcome.</p> <p class="text-3xl text-center">Welcome.</p>
<form <form
class="flex flex-col pt-3 md:pt-8" class="flex flex-col pt-3 md:pt-8"
{{if {{ if
.Register}}action="./register" .Register
{{ else }}action="./login" }}
action="./register"
{{ else }}
action="./login"
{{ end }} {{ end }}
method="POST" method="POST"
> >
<div class="flex flex-col pt-4"> <div class="flex flex-col pt-4">
<div class="flex relative"> <div class="flex relative">
<span class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"> <span
class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
>
{{ template "svg/user" (dict "Size" 15) }} {{ template "svg/user" (dict "Size" 15) }}
</span> </span>
<input type="text" <input
type="text"
id="username" id="username"
name="username" name="username"
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
placeholder="Username" /> placeholder="Username"
/>
</div> </div>
</div> </div>
<div class="flex flex-col pt-4 mb-12"> <div class="flex flex-col pt-4 mb-12">
<div class="flex relative"> <div class="flex relative">
<span class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"> <span
class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
>
{{ template "svg/password" (dict "Size" 15) }} {{ template "svg/password" (dict "Size" 15) }}
</span> </span>
<input type="password" <input
type="password"
id="password" id="password"
name="password" name="password"
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
placeholder="Password" /> placeholder="Password"
<span class="absolute -bottom-5 text-red-400 text-xs">{{ .Error }}</span> />
<span class="absolute -bottom-5 text-red-400 text-xs"
>{{ .Error }}</span
>
</div> </div>
</div> </div>
<button type="submit" <button
class="w-full px-4 py-2 text-base font-semibold text-center text-white transition duration-200 ease-in bg-black shadow-md hover:text-black hover:bg-white focus:outline-none focus:ring-2"> type="submit"
class="w-full px-4 py-2 text-base font-semibold text-center text-white transition duration-200 ease-in bg-black shadow-md hover:text-black hover:bg-white focus:outline-none focus:ring-2"
>
{{ if .Register }} {{ if .Register }}
<span class="w-full">Register</span> <span class="w-full">Register</span>
{{ else }} {{ else }}
@ -95,32 +123,50 @@
</button> </button>
</form> </form>
<div class="pt-12 pb-12 text-center"> <div class="pt-12 pb-12 text-center">
{{ if .Config.RegistrationEnabled }} {{ if .Register }} {{ if .Config.RegistrationEnabled }}
{{ if .Register }}
<p> <p>
Trying to login? Trying to login?
<a href="./login" class="font-semibold underline">Login here.</a> <a href="./login" class="font-semibold underline"
>Login here.</a
>
</p> </p>
{{ else }} {{ else }}
<p> <p>
Don&#x27;t have an account? Don&#x27;t have an account?
<a href="./register" class="font-semibold underline">Register here.</a> <a href="./register" class="font-semibold underline"
>Register here.</a
>
</p> </p>
{{ end }} {{ end }} {{ end }}
{{ end }}
<p class="mt-4"> <p class="mt-4">
<a href="./local" class="font-semibold underline">Offline / Local Mode</a> <a href="./local" class="font-semibold underline"
>Offline / Local Mode</a
>
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div class="hidden image-fader w-1/2 shadow-2xl h-screen relative md:block"> <div
<img class="w-full h-screen object-cover ease-in-out top-0 left-0" class="hidden image-fader w-1/2 shadow-2xl h-screen relative md:block"
src="/assets/images/book1.jpg" /> >
<img class="w-full h-screen object-cover ease-in-out top-0 left-0" <img
src="/assets/images/book2.jpg" /> class="w-full h-screen object-cover ease-in-out top-0 left-0"
<img class="w-full h-screen object-cover ease-in-out top-0 left-0" src="/assets/images/book1.jpg"
src="/assets/images/book3.jpg" /> />
<img class="w-full h-screen object-cover ease-in-out top-0 left-0" <img
src="/assets/images/book4.jpg" /> class="w-full h-screen object-cover ease-in-out top-0 left-0"
src="/assets/images/book2.jpg"
/>
<img
class="w-full h-screen object-cover ease-in-out top-0 left-0"
src="/assets/images/book3.jpg"
/>
<img
class="w-full h-screen object-cover ease-in-out top-0 left-0"
src="/assets/images/book4.jpg"
/>
</div> </div>
</div> </div>
<style> <style>

23
templates/pages/progress.tmpl
View File

@ -2,24 +2,27 @@
{{ define "title" }}Progress{{ end }} {{ define "title" }}Progress{{ end }}
{{ define "header" }}<a href="./progress">Progress</a>{{ end }} {{ define "header" }}<a href="./progress">Progress</a>{{ end }}
{{ define "content" }} {{ define "content" }}
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<div class="inline-block min-w-full overflow-hidden rounded shadow"> <div class="inline-block min-w-full overflow-hidden rounded shadow">
<!-- Table Component - Utilizes Template "table-cell" --> <!-- Table Component - Utilizes Template "table-cell" -->
{{ template "component/table" (dict {{ template "component/table" (dict
"Columns" (slice "Document" "Device Name" "Percentage" "Created At") "Columns" (slice "Document" "Device Name" "Percentage" "Created At")
"Keys" (slice "Document" "DeviceName" "Percentage" "CreatedAt") "Keys" (slice "Document" "DeviceName" "Percentage" "CreatedAt")
"Rows" .Data "Rows" .Data
)}} )
}}
</div>
</div> </div>
</div>
{{ end }} {{ end }}
<!-- Table Cell Definition --> <!-- Table Cell Definition -->
{{ define "table-cell" }} {{ define "table-cell" }}
{{ if eq .Name "Document" }} {{ if eq .Name "Document" }}
<a href="./documents/{{ .Data.DocumentID }}">{{ .Data.Author }} - {{ .Data.Title }}</a> <a href="./documents/{{ .Data.DocumentID }}"
{{ else if eq .Name "Percentage" }} >{{ .Data.Author }} - {{ .Data.Title }}</a
{{ index (fields .Data) .Name }}% >
{{ else }} {{ else if eq .Name "Percentage" }}
{{ index (fields .Data) .Name }} {{ index (fields .Data) .Name }}%
{{ end }} {{ else }}
{{ index (fields .Data) .Name }}
{{ end }}
{{ end }} {{ end }}

112
templates/pages/search.tmpl
View File

@ -2,29 +2,39 @@
{{ define "title" }}Search{{ end }} {{ define "title" }}Search{{ end }}
{{ define "header" }}<a href="./search">Search</a>{{ end }} {{ define "header" }}<a href="./search">Search</a>{{ end }}
{{ define "content" }} {{ define "content" }}
<div class="w-full flex flex-col md:flex-row gap-4"> <div class="w-full flex flex-col md:flex-row gap-4">
<div class="flex flex-col gap-4 grow"> <div class="flex flex-col gap-4 grow">
<div class="flex flex-col gap-2 grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"> <div
class="flex flex-col gap-2 grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
>
<form class="flex gap-4 flex-col lg:flex-row" action="./search"> <form class="flex gap-4 flex-col lg:flex-row" action="./search">
<div class="flex flex-col w-full grow"> <div class="flex flex-col w-full grow">
<div class="flex relative"> <div class="flex relative">
<span class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"> <span
class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
>
{{ template "svg/search2" (dict "Size" 15) }} {{ template "svg/search2" (dict "Size" 15) }}
</span> </span>
<input type="text" <input
type="text"
id="query" id="query"
name="query" name="query"
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
placeholder="Query" /> placeholder="Query"
/>
</div> </div>
</div> </div>
<div class="flex relative min-w-[12em]"> <div class="flex relative min-w-[12em]">
<span class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"> <span
class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
>
{{ template "svg/documents" (dict "Size" 15) }} {{ template "svg/documents" (dict "Size" 15) }}
</span> </span>
<select class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" <select
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
id="source" id="source"
name="source"> name="source"
>
<option value="Annas Archive">Annas Archive</option> <option value="Annas Archive">Annas Archive</option>
<option value="LibGen Fiction">LibGen Fiction</option> <option value="LibGen Fiction">LibGen Fiction</option>
<option value="LibGen Non-fiction">LibGen Non-fiction</option> <option value="LibGen Non-fiction">LibGen Non-fiction</option>
@ -34,7 +44,8 @@
{{ template "component/button" (dict {{ template "component/button" (dict
"Title" "Search" "Title" "Search"
"Variant" "Secondary" "Variant" "Secondary"
) }} )
}}
</div> </div>
</form> </form>
{{ if .SearchErrorMessage }} {{ if .SearchErrorMessage }}
@ -42,21 +53,43 @@
{{ end }} {{ end }}
</div> </div>
<div class="inline-block min-w-full overflow-hidden rounded shadow"> <div class="inline-block min-w-full overflow-hidden rounded shadow">
<table class="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm md:text-sm"> <table
class="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm md:text-sm"
>
<thead class="text-gray-800 dark:text-gray-400"> <thead class="text-gray-800 dark:text-gray-400">
<tr> <tr>
<th scope="col" <th
class="w-12 p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"></th> scope="col"
<th scope="col" class="w-12 p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Document</th> ></th>
<th scope="col" <th
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Series</th> scope="col"
<th scope="col" class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Type</th> >
<th scope="col" Document
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Size</th> </th>
<th scope="col" <th
class="p-3 hidden md:block font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"> scope="col"
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
>
Series
</th>
<th
scope="col"
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
>
Type
</th>
<th
scope="col"
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
>
Size
</th>
<th
scope="col"
class="p-3 hidden md:block font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
>
Date Date
</th> </th>
</tr> </tr>
@ -66,29 +99,42 @@
<tr> <tr>
<td class="text-center p-3" colspan="6">No Results</td> <td class="text-center p-3" colspan="6">No Results</td>
</tr> </tr>
{{ end }} {{ range $item := .Data }} {{ end }}
{{ range $item := .Data }}
<tr> <tr>
<td class="p-3 border-b border-gray-200 text-gray-500 dark:text-gray-500"> <td
class="p-3 border-b border-gray-200 text-gray-500 dark:text-gray-500"
>
<form action="./search" method="POST"> <form action="./search" method="POST">
<input class="hidden" <input
class="hidden"
type="text" type="text"
id="source" id="source"
name="source" name="source"
value="{{ $.Source }}" /> value="{{ $.Source }}"
<input class="hidden" />
<input
class="hidden"
type="text" type="text"
id="title" id="title"
name="title" name="title"
value="{{ $item.Title }}" /> value="{{ $item.Title }}"
<input class="hidden" />
<input
class="hidden"
type="text" type="text"
id="author" id="author"
name="author" name="author"
value="{{ $item.Author }}" /> value="{{ $item.Author }}"
<button name="id" value="{{ $item.ID }}">{{ template "svg/download" }}</button> />
<button name="id" value="{{ $item.ID }}">
{{ template "svg/download" }}
</button>
</form> </form>
</td> </td>
<td class="p-3 border-b border-gray-200">{{ $item.Author }} - {{ $item.Title }}</td> <td class="p-3 border-b border-gray-200">
{{ $item.Author }} - {{ $item.Title }}
</td>
<td class="p-3 border-b border-gray-200"> <td class="p-3 border-b border-gray-200">
<p>{{ or $item.Series "N/A" }}</p> <p>{{ or $item.Series "N/A" }}</p>
</td> </td>
@ -107,5 +153,5 @@
</table> </table>
</div> </div>
</div> </div>
</div> </div>
{{ end }} {{ end }}

97
templates/pages/settings.tmpl
View File

@ -2,48 +2,63 @@
{{ define "title" }}Settings{{ end }} {{ define "title" }}Settings{{ end }}
{{ define "header" }}<a href="./settings">Settings</a>{{ end }} {{ define "header" }}<a href="./settings">Settings</a>{{ end }}
{{ define "content" }} {{ define "content" }}
<div class="w-full flex flex-col md:flex-row gap-4"> <div class="w-full flex flex-col md:flex-row gap-4">
<div> <div>
<div class="flex flex-col p-4 items-center rounded shadow-lg md:w-60 lg:w-80 bg-white dark:bg-gray-700 text-gray-500 dark:text-white"> <div
class="flex flex-col p-4 items-center rounded shadow-lg md:w-60 lg:w-80 bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
>
{{ template "svg/user" (dict "Size" 60) }} {{ template "svg/user" (dict "Size" 60) }}
<p class="text-lg">{{ .Authorization.UserName }}</p> <p class="text-lg">{{ .Authorization.UserName }}</p>
</div> </div>
</div> </div>
<div class="flex flex-col gap-4 grow"> <div class="flex flex-col gap-4 grow">
<div class="flex flex-col gap-2 grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"> <div
class="flex flex-col gap-2 grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
>
<p class="text-lg font-semibold mb-2">Change Password</p> <p class="text-lg font-semibold mb-2">Change Password</p>
<form class="flex gap-4 flex-col lg:flex-row" <form
class="flex gap-4 flex-col lg:flex-row"
action="./settings" action="./settings"
method="POST"> method="POST"
>
<div class="flex flex-col grow"> <div class="flex flex-col grow">
<div class="flex relative"> <div class="flex relative">
<span class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"> <span
class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
>
{{ template "svg/password" (dict "Size" 15) }} {{ template "svg/password" (dict "Size" 15) }}
</span> </span>
<input type="password" <input
type="password"
id="password" id="password"
name="password" name="password"
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
placeholder="Password" /> placeholder="Password"
/>
</div> </div>
</div> </div>
<div class="flex flex-col grow"> <div class="flex flex-col grow">
<div class="flex relative"> <div class="flex relative">
<span class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"> <span
class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
>
{{ template "svg/password" (dict "Size" 15) }} {{ template "svg/password" (dict "Size" 15) }}
</span> </span>
<input type="password" <input
type="password"
id="new_password" id="new_password"
name="new_password" name="new_password"
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
placeholder="New Password" /> placeholder="New Password"
/>
</div> </div>
</div> </div>
<div class="lg:w-60"> <div class="lg:w-60">
{{ template "component/button" (dict {{ template "component/button" (dict
"Title" "Submit" "Title" "Submit"
"Variant" "Secondary" "Variant" "Secondary"
) }} )
}}
</div> </div>
</form> </form>
{{ if .PasswordErrorMessage }} {{ if .PasswordErrorMessage }}
@ -52,20 +67,31 @@
<span class="text-green-400 text-xs">{{ .PasswordMessage }}</span> <span class="text-green-400 text-xs">{{ .PasswordMessage }}</span>
{{ end }} {{ end }}
</div> </div>
<div class="flex flex-col grow gap-2 p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"> <div
class="flex flex-col grow gap-2 p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
>
<p class="text-lg font-semibold mb-2">Change Timezone</p> <p class="text-lg font-semibold mb-2">Change Timezone</p>
<form class="flex gap-4 flex-col lg:flex-row" <form
class="flex gap-4 flex-col lg:flex-row"
action="./settings" action="./settings"
method="POST"> method="POST"
>
<div class="flex relative grow"> <div class="flex relative grow">
<span class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"> <span
class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
>
{{ template "svg/clock" (dict "Size" 15) }} {{ template "svg/clock" (dict "Size" 15) }}
</span> </span>
<select class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" <select
class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
id="timezone" id="timezone"
name="timezone"> name="timezone"
>
{{ range $item := getTimeZones }} {{ range $item := getTimeZones }}
<option {{ if (eq $item $.Data.Timezone) }}selected{{ end }} value="{{ $item }}"> <option
{{ if (eq $item $.Data.Timezone) }}selected{{ end }}
value="{{ $item }}"
>
{{ $item }} {{ $item }}
</option> </option>
{{ end }} {{ end }}
@ -75,30 +101,43 @@
{{ template "component/button" (dict {{ template "component/button" (dict
"Title" "Submit" "Title" "Submit"
"Variant" "Secondary" "Variant" "Secondary"
) }} )
}}
</div> </div>
</form> </form>
{{ if .TimeOffsetErrorMessage }} {{ if .TimeOffsetErrorMessage }}
<span class="text-red-400 text-xs">{{ .TimeOffsetErrorMessage }}</span> <span class="text-red-400 text-xs"
>{{ .TimeOffsetErrorMessage }}</span
>
{{ else if .TimeOffsetMessage }} {{ else if .TimeOffsetMessage }}
<span class="text-green-400 text-xs">{{ .TimeOffsetMessage }}</span> <span class="text-green-400 text-xs">{{ .TimeOffsetMessage }}</span>
{{ end }} {{ end }}
</div> </div>
<div class="flex flex-col grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"> <div
class="flex flex-col grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
>
<p class="text-lg font-semibold">Devices</p> <p class="text-lg font-semibold">Devices</p>
<table class="min-w-full bg-white dark:bg-gray-700 text-sm"> <table class="min-w-full bg-white dark:bg-gray-700 text-sm">
<thead class="text-gray-800 dark:text-gray-400"> <thead class="text-gray-800 dark:text-gray-400">
<tr> <tr>
<th scope="col" <th
class="p-3 pl-0 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"> scope="col"
class="p-3 pl-0 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
>
Name Name
</th> </th>
<th scope="col" <th
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"> scope="col"
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
>
Last Sync Last Sync
</th> </th>
<th scope="col" <th
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Created</th> scope="col"
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
>
Created
</th>
</tr> </tr>
</thead> </thead>
<tbody class="text-black dark:text-white"> <tbody class="text-black dark:text-white">
@ -124,5 +163,5 @@
</table> </table>
</div> </div>
</div> </div>
</div> </div>
{{ end }} {{ end }}