chore(formatting): djlint templates
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
e33a64db96
commit
45cef2f4af
14
.djlintrc
Normal file
14
.djlintrc
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"profile": "golang",
|
||||
"indent": 2,
|
||||
"close_void_tags": true,
|
||||
"format_attribute_template_tags": true,
|
||||
"format_js": true,
|
||||
"js": {
|
||||
"indent_size": 2
|
||||
},
|
||||
"format_css": true,
|
||||
"css": {
|
||||
"indent_size": 2
|
||||
}
|
||||
}
|
||||
@ -191,7 +191,7 @@ func (api *API) generateTemplates() *multitemplate.Renderer {
|
||||
}
|
||||
|
||||
// Load Base
|
||||
b, _ := api.Assets.ReadFile("templates/base.html")
|
||||
b, _ := api.Assets.ReadFile("templates/base.tmpl")
|
||||
baseTemplate := template.Must(template.New("base").Funcs(helperFuncs).Parse(string(b)))
|
||||
|
||||
// Load SVGs
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
"./templates/**/*.{html,htm,svg}",
|
||||
"./templates/**/*.{tmpl,html,htm,svg}",
|
||||
"./assets/local/*.{html,htm,svg,js}",
|
||||
"./assets/reader/*.{html,htm,svg,js}",
|
||||
],
|
||||
|
||||
@ -1,306 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=0.90, user-scalable=no, viewport-fit=cover">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
|
||||
<meta name="theme-color" content="#F3F4F6" media="(prefers-color-scheme: light)">
|
||||
<meta name="theme-color" content="#1F2937" media="(prefers-color-scheme: dark)">
|
||||
|
||||
<title>AnthoLume - {{block "title" .}}{{end}}</title>
|
||||
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<link rel="stylesheet" href="/assets/style.css">
|
||||
|
||||
<!-- Service Worker / Offline Cache Flush -->
|
||||
<script src="/assets/lib/idb-keyval.min.js"></script>
|
||||
<script src="/assets/common.js"></script>
|
||||
<script src="/assets/index.js"></script>
|
||||
|
||||
<style>
|
||||
/* ----------------------------- */
|
||||
/* -------- PWA Styling -------- */
|
||||
/* ----------------------------- */
|
||||
html,
|
||||
body {
|
||||
overscroll-behavior-y: none;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
html {
|
||||
height: calc(100% + env(safe-area-inset-bottom));
|
||||
padding: env(safe-area-inset-top) env(safe-area-inset-right)
|
||||
0 env(safe-area-inset-left);
|
||||
}
|
||||
|
||||
main {
|
||||
height: calc(100dvh - 4rem - env(safe-area-inset-top));
|
||||
}
|
||||
|
||||
#container {
|
||||
padding-bottom: calc(5em + env(safe-area-inset-bottom) * 2);
|
||||
}
|
||||
|
||||
/* No Scrollbar - IE, Edge, Firefox */
|
||||
* {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
/* No Scrollbar - WebKit */
|
||||
*::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ------- User Dropdown ------- */
|
||||
/* ----------------------------- */
|
||||
#user-dropdown-button:checked + #user-dropdown {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#user-dropdown {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ----- Mobile Navigation ----- */
|
||||
/* ----------------------------- */
|
||||
#mobile-nav-button span {
|
||||
transform-origin: 5px 0px;
|
||||
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
|
||||
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
|
||||
opacity 0.55s ease;
|
||||
}
|
||||
|
||||
#mobile-nav-button span:first-child {
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
#mobile-nav-button span:nth-last-child(2) {
|
||||
transform-origin: 0% 100%;
|
||||
}
|
||||
|
||||
#mobile-nav-button input:checked ~ span {
|
||||
opacity: 1;
|
||||
transform: rotate(45deg) translate(2px, -2px);
|
||||
}
|
||||
|
||||
#mobile-nav-button input:checked ~ span:nth-last-child(3) {
|
||||
opacity: 0;
|
||||
transform: rotate(0deg) scale(0.2, 0.2);
|
||||
}
|
||||
|
||||
#mobile-nav-button input:checked ~ span:nth-last-child(2) {
|
||||
transform: rotate(-45deg) translate(0, 6px);
|
||||
}
|
||||
|
||||
#mobile-nav-button input:checked ~ div {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
#mobile-nav-button input ~ div {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
#menu {
|
||||
top: 0;
|
||||
padding-top: env(safe-area-inset-top);
|
||||
transform-origin: 0% 0%;
|
||||
transform: translate(-100%, 0);
|
||||
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
|
||||
}
|
||||
|
||||
@media (orientation: landscape) {
|
||||
#menu {
|
||||
transform: translate(calc(-1 * (env(safe-area-inset-left) + 100%)), 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-100 dark:bg-gray-800">
|
||||
<div class="flex items-center justify-between w-full h-16">
|
||||
<div id="mobile-nav-button" class="flex flex-col z-40 relative ml-6">
|
||||
<input type="checkbox" class="absolute lg:hidden z-50 -top-2 w-7 h-7 flex cursor-pointer opacity-0" />
|
||||
<span class="lg:hidden bg-black w-7 h-0.5 z-40 mt-0.5 dark:bg-white"></span>
|
||||
<span class="lg:hidden bg-black w-7 h-0.5 z-40 mt-1 dark:bg-white"></span>
|
||||
<span class="lg:hidden bg-black w-7 h-0.5 z-40 mt-1 dark:bg-white"></span>
|
||||
|
||||
<div id="menu" class="fixed -ml-6 h-full w-56 lg:w-48 bg-white dark:bg-gray-700 shadow-lg">
|
||||
<div class="h-16 flex justify-end lg:justify-around">
|
||||
<p class="text-xl font-bold dark:text-white text-right my-auto pr-8 lg:pr-0">AnthoLume</p>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
class="flex items-center justify-start w-full p-2 pl-6 my-2 transition-colors duration-200 border-l-4 {{if eq .RouteName "home"}}border-purple-500 dark:text-white{{else}}border-transparent text-gray-400 hover:text-gray-800 dark:hover:text-gray-100{{end}}"
|
||||
href="/"
|
||||
>
|
||||
{{ template "svg/home" (dict "Size" 20) }}
|
||||
<span class="mx-4 text-sm font-normal">Home</span>
|
||||
</a>
|
||||
<a
|
||||
class="flex items-center justify-start w-full p-2 pl-6 my-2 transition-colors duration-200 border-l-4 {{if eq .RouteName "documents"}}border-purple-500 dark:text-white{{else}}border-transparent text-gray-400 hover:text-gray-800 dark:hover:text-gray-100{{end}}"
|
||||
href="/documents"
|
||||
>
|
||||
{{ template "svg/documents" (dict "Size" 20) }}
|
||||
<span class="mx-4 text-sm font-normal">Documents</span>
|
||||
</a>
|
||||
<a
|
||||
class="flex items-center justify-start w-full p-2 pl-6 my-2 transition-colors duration-200 border-l-4 {{if eq .RouteName "progress"}}border-purple-500 dark:text-white{{else}}border-transparent text-gray-400 hover:text-gray-800 dark:hover:text-gray-100{{end}}"
|
||||
href="/progress"
|
||||
>
|
||||
{{ template "svg/activity" (dict "Size" 20) }}
|
||||
<span class="mx-4 text-sm font-normal">Progress</span>
|
||||
</a>
|
||||
<a
|
||||
class="flex items-center justify-start w-full p-2 pl-6 my-2 transition-colors duration-200 border-l-4 {{if eq .RouteName "activity"}}border-purple-500 dark:text-white{{else}}border-transparent text-gray-400 hover:text-gray-800 dark:hover:text-gray-100{{end}}"
|
||||
href="/activity"
|
||||
>
|
||||
{{ template "svg/activity" (dict "Size" 20) }}
|
||||
<span class="mx-4 text-sm font-normal">Activity</span>
|
||||
</a>
|
||||
{{ if .Config.SearchEnabled }}
|
||||
<a
|
||||
class="flex items-center justify-start w-full p-2 pl-6 my-2 transition-colors duration-200 border-l-4 {{if eq .RouteName "search"}}border-purple-500 dark:text-white{{else}}border-transparent text-gray-400 hover:text-gray-800 dark:hover:text-gray-100{{end}}"
|
||||
href="/search"
|
||||
>
|
||||
{{ template "svg/search" (dict "Size" 20) }}
|
||||
<span class="mx-4 text-sm font-normal">Search</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Authorization.IsAdmin }}
|
||||
|
||||
<div class="flex flex-col gap-4 p-2 pl-6 my-2 transition-colors duration-200 border-l-4 {{if hasPrefix .RouteName "admin"}}dark:text-white border-purple-500{{else}}border-transparent text-gray-400{{end}}">
|
||||
<a href="/admin" class="flex justify-start w-full {{if not (hasPrefix .RouteName "admin")}}text-gray-400 hover:text-gray-800 dark:hover:text-gray-100{{end}}">
|
||||
{{ template "svg/settings" (dict "Size" 20) }}
|
||||
<span class="mx-4 text-sm font-normal">Admin</span>
|
||||
</a>
|
||||
|
||||
{{ if hasPrefix .RouteName "admin" }}
|
||||
<a href="/admin" style="padding-left: 1.75em;" class="flex justify-start w-full {{if not (eq .RouteName "admin")}}text-gray-400 hover:text-gray-800 dark:hover:text-gray-100{{end}}">
|
||||
<span class="mx-4 text-sm font-normal">General</span>
|
||||
</a>
|
||||
<a href="/admin/users" style="padding-left: 1.75em;" class="flex justify-start w-full {{if not (eq .RouteName "admin-users")}}text-gray-400 hover:text-gray-800 dark:hover:text-gray-100{{end}}">
|
||||
<span class="mx-4 text-sm font-normal">Users</span>
|
||||
</a>
|
||||
<a href="/admin/logs" style="padding-left: 1.75em;" class="flex justify-start w-full {{if not (eq .RouteName "admin-logs")}}text-gray-400 hover:text-gray-800 dark:hover:text-gray-100{{end}}">
|
||||
<span class="mx-4 text-sm font-normal">Logs</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
<a class="flex flex-col gap-2 justify-center items-center p-6 w-full absolute bottom-0 text-black dark:text-white" target="_blank" href="https://gitea.va.reichard.io/evan/AnthoLume">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="text-black dark:text-white"
|
||||
height="20"
|
||||
viewBox="0 0 219 92"
|
||||
fill="currentColor"
|
||||
>
|
||||
<defs>
|
||||
<clipPath id="a"><path d="M159 .79h25V69h-25Zm0 0" /></clipPath>
|
||||
<clipPath id="b"><path d="M183 9h35.371v60H183Zm0 0" /></clipPath>
|
||||
<clipPath id="c"><path d="M0 .79h92V92H0Zm0 0" /></clipPath>
|
||||
</defs>
|
||||
<path
|
||||
style="stroke: none; fill-rule: nonzero; fill-opacity: 1"
|
||||
d="M130.871 31.836c-4.785 0-8.351 2.352-8.351 8.008 0 4.261 2.347 7.222 8.093 7.222 4.871 0 8.18-2.867 8.18-7.398 0-5.133-2.961-7.832-7.922-7.832Zm-9.57 39.95c-1.133 1.39-2.262 2.87-2.262 4.612 0 3.48 4.434 4.524 10.527 4.524 5.051 0 11.926-.352 11.926-5.043 0-2.793-3.308-2.965-7.488-3.227Zm25.761-39.688c1.563 2.004 3.22 4.789 3.22 8.793 0 9.656-7.571 15.316-18.536 15.316-2.789 0-5.312-.348-6.879-.785l-2.87 4.613 8.526.52c15.059.96 23.934 1.398 23.934 12.968 0 10.008-8.789 15.665-23.934 15.665-15.75 0-21.757-4.004-21.757-10.88 0-3.917 1.742-6 4.789-8.878-2.875-1.211-3.828-3.387-3.828-5.739 0-1.914.953-3.656 2.523-5.312 1.566-1.652 3.305-3.305 5.395-5.219-4.262-2.09-7.485-6.617-7.485-13.058 0-10.008 6.613-16.88 19.93-16.88 3.742 0 6.004.344 8.008.872h16.972v7.394l-8.007.61"
|
||||
/>
|
||||
<g clip-path="url(#a)">
|
||||
<path
|
||||
style="stroke: none; fill-rule: nonzero; fill-opacity: 1"
|
||||
d="M170.379 16.281c-4.961 0-7.832-2.87-7.832-7.836 0-4.957 2.871-7.656 7.832-7.656 5.05 0 7.922 2.7 7.922 7.656 0 4.965-2.871 7.836-7.922 7.836Zm-11.227 52.305V61.71l4.438-.606c1.219-.175 1.394-.437 1.394-1.746V33.773c0-.953-.261-1.566-1.132-1.824l-4.7-1.656.957-7.047h18.016V59.36c0 1.399.086 1.57 1.395 1.746l4.437.606v6.875h-24.805"
|
||||
/>
|
||||
</g>
|
||||
<g clip-path="url(#b)">
|
||||
<path
|
||||
style="stroke: none; fill-rule: nonzero; fill-opacity: 1"
|
||||
d="M218.371 65.21c-3.742 1.825-9.223 3.481-14.187 3.481-10.356 0-14.27-4.175-14.27-14.015V31.879c0-.524 0-.871-.7-.871h-6.093v-7.746c7.664-.871 10.707-4.703 11.664-14.188h8.27v12.36c0 .609 0 .87.695.87h12.27v8.704h-12.965v20.797c0 5.136 1.218 7.136 5.918 7.136 2.437 0 4.96-.609 7.047-1.39l2.351 7.66"
|
||||
/>
|
||||
</g>
|
||||
<g clip-path="url(#c)">
|
||||
<path
|
||||
style="stroke: none; fill-rule: nonzero; fill-opacity: 1"
|
||||
d="M89.422 42.371 49.629 2.582a5.868 5.868 0 0 0-8.3 0l-8.263 8.262 10.48 10.484a6.965 6.965 0 0 1 7.173 1.668 6.98 6.98 0 0 1 1.656 7.215l10.102 10.105a6.963 6.963 0 0 1 7.214 1.657 6.976 6.976 0 0 1 0 9.875 6.98 6.98 0 0 1-9.879 0 6.987 6.987 0 0 1-1.519-7.594l-9.422-9.422v24.793a6.979 6.979 0 0 1 1.848 1.32 6.988 6.988 0 0 1 0 9.88c-2.73 2.726-7.153 2.726-9.875 0a6.98 6.98 0 0 1 0-9.88 6.893 6.893 0 0 1 2.285-1.523V34.398a6.893 6.893 0 0 1-2.285-1.523 6.988 6.988 0 0 1-1.508-7.637L29.004 14.902 1.719 42.187a5.868 5.868 0 0 0 0 8.301l39.793 39.793a5.868 5.868 0 0 0 8.3 0l39.61-39.605a5.873 5.873 0 0 0 0-8.305"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="text-xs">{{ .Config.Version }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-xl font-bold dark:text-white px-6 lg:ml-44">{{block "header" .}}{{end}}</h1>
|
||||
<div class="relative flex items-center justify-end w-full p-4 space-x-4">
|
||||
<a href="#" class="relative block text-gray-800 dark:text-gray-200">{{ template "svg/user" (dict "Size" 20) }}</a>
|
||||
<input type="checkbox" id="user-dropdown-button" class="hidden"/>
|
||||
<div
|
||||
id="user-dropdown"
|
||||
class="transition duration-200 z-20 absolute right-4 top-16 pt-4"
|
||||
>
|
||||
<div
|
||||
class="w-40 origin-top-right bg-white rounded-md shadow-lg dark:shadow-gray-800 dark:bg-gray-700 ring-1 ring-black ring-opacity-5"
|
||||
>
|
||||
<div
|
||||
class="py-1"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="options-menu"
|
||||
>
|
||||
<a
|
||||
href="/settings"
|
||||
class="block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600"
|
||||
role="menuitem"
|
||||
>
|
||||
<span class="flex flex-col">
|
||||
<span>Settings</span>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href="/local"
|
||||
class="block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600"
|
||||
role="menuitem"
|
||||
>
|
||||
<span class="flex flex-col">
|
||||
<span>Offline</span>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href="/logout"
|
||||
class="block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600"
|
||||
role="menuitem"
|
||||
>
|
||||
<span class="flex flex-col">
|
||||
<span>Logout</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<label for="user-dropdown-button">
|
||||
<div
|
||||
class="flex items-center gap-2 text-gray-500 dark:text-white text-md py-4 cursor-pointer"
|
||||
>
|
||||
<span>{{ .Authorization.UserName }}</span>
|
||||
<span class="text-gray-800 dark:text-gray-200">{{ template "svg/dropdown" (dict "Size" 20) }}</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="relative overflow-hidden">
|
||||
<div id="container" class="h-[100dvh] px-4 overflow-auto md:px-6 lg:ml-48">
|
||||
{{block "content" .}}{{end}}
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
279
templates/base.tmpl
Normal file
279
templates/base.tmpl
Normal file
@ -0,0 +1,279 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=0.90, user-scalable=no, viewport-fit=cover" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style"
|
||||
content="black-translucent" />
|
||||
<meta name="theme-color"
|
||||
content="#F3F4F6"
|
||||
media="(prefers-color-scheme: light)" />
|
||||
<meta name="theme-color"
|
||||
content="#1F2937"
|
||||
media="(prefers-color-scheme: dark)" />
|
||||
<title>AnthoLume - {{ block "title" . }}{{ end }}</title>
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<link rel="stylesheet" href="/assets/style.css" />
|
||||
<!-- Service Worker / Offline Cache Flush -->
|
||||
<script src="/assets/lib/idb-keyval.min.js"></script>
|
||||
<script src="/assets/common.js"></script>
|
||||
<script src="/assets/index.js"></script>
|
||||
<style>
|
||||
/* ----------------------------- */
|
||||
/* -------- PWA Styling -------- */
|
||||
/* ----------------------------- */
|
||||
html,
|
||||
body {
|
||||
overscroll-behavior-y: none;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
html {
|
||||
height: calc(100% + env(safe-area-inset-bottom));
|
||||
padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
|
||||
}
|
||||
|
||||
main {
|
||||
height: calc(100dvh - 4rem - env(safe-area-inset-top));
|
||||
}
|
||||
|
||||
#container {
|
||||
padding-bottom: calc(5em + env(safe-area-inset-bottom) * 2);
|
||||
}
|
||||
|
||||
/* No Scrollbar - IE, Edge, Firefox */
|
||||
* {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
/* No Scrollbar - WebKit */
|
||||
*::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ------- User Dropdown ------- */
|
||||
/* ----------------------------- */
|
||||
#user-dropdown-button:checked+#user-dropdown {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#user-dropdown {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ----- Mobile Navigation ----- */
|
||||
/* ----------------------------- */
|
||||
#mobile-nav-button span {
|
||||
transform-origin: 5px 0px;
|
||||
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
|
||||
background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
|
||||
opacity 0.55s ease;
|
||||
}
|
||||
|
||||
#mobile-nav-button span:first-child {
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
#mobile-nav-button span:nth-last-child(2) {
|
||||
transform-origin: 0% 100%;
|
||||
}
|
||||
|
||||
#mobile-nav-button input:checked~span {
|
||||
opacity: 1;
|
||||
transform: rotate(45deg) translate(2px, -2px);
|
||||
}
|
||||
|
||||
#mobile-nav-button input:checked~span:nth-last-child(3) {
|
||||
opacity: 0;
|
||||
transform: rotate(0deg) scale(0.2, 0.2);
|
||||
}
|
||||
|
||||
#mobile-nav-button input:checked~span:nth-last-child(2) {
|
||||
transform: rotate(-45deg) translate(0, 6px);
|
||||
}
|
||||
|
||||
#mobile-nav-button input:checked~div {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
#mobile-nav-button input~div {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
#menu {
|
||||
top: 0;
|
||||
padding-top: env(safe-area-inset-top);
|
||||
transform-origin: 0% 0%;
|
||||
transform: translate(-100%, 0);
|
||||
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
|
||||
}
|
||||
|
||||
@media (orientation: landscape) {
|
||||
#menu {
|
||||
transform: translate(calc(-1 * (env(safe-area-inset-left) + 100%)), 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-100 dark:bg-gray-800">
|
||||
<div class="flex items-center justify-between w-full h-16">
|
||||
<div id="mobile-nav-button" class="flex flex-col z-40 relative ml-6">
|
||||
<input type="checkbox"
|
||||
class="absolute lg:hidden z-50 -top-2 w-7 h-7 flex cursor-pointer opacity-0" />
|
||||
<span class="lg:hidden bg-black w-7 h-0.5 z-40 mt-0.5 dark:bg-white"></span>
|
||||
<span class="lg:hidden bg-black w-7 h-0.5 z-40 mt-1 dark:bg-white"></span>
|
||||
<span class="lg:hidden bg-black w-7 h-0.5 z-40 mt-1 dark:bg-white"></span>
|
||||
<div id="menu"
|
||||
class="fixed -ml-6 h-full w-56 lg:w-48 bg-white dark:bg-gray-700 shadow-lg">
|
||||
<div class="h-16 flex justify-end lg:justify-around">
|
||||
<p class="text-xl font-bold dark:text-white text-right my-auto pr-8 lg:pr-0">AnthoLume</p>
|
||||
</div>
|
||||
<div>
|
||||
{{ $default := "flex items-center justify-start w-full p-2 pl-6 my-2 transition-colors duration-200 border-l-4" }}
|
||||
{{ $inactive := "border-transparent text-gray-400 hover:text-gray-800 dark:hover:text-gray-100"}}
|
||||
{{ $active := "border-purple-500 dark:text-white"}}
|
||||
<a class="{{ $default }} {{ if eq .RouteName "home" }}{{ $active }}{{ else if true }}{{ $inactive }}{{ end }}"
|
||||
href="/">
|
||||
{{ template "svg/home" (dict "Size" 20) }}
|
||||
<span class="mx-4 text-sm font-normal">Home</span>
|
||||
</a>
|
||||
<a class="{{ $default }} {{ if eq .RouteName "documents" }}{{ $active }}{{ else if true }}{{ $inactive }}{{ end }}"
|
||||
href="/documents">
|
||||
{{ template "svg/documents" (dict "Size" 20) }}
|
||||
<span class="mx-4 text-sm font-normal">Documents</span>
|
||||
</a>
|
||||
<a class="{{ $default }} {{ if eq .RouteName "progress" }}{{ $active }}{{ else if true }}{{ $inactive }}{{ end }}"
|
||||
href="/progress">
|
||||
{{ template "svg/activity" (dict "Size" 20) }}
|
||||
<span class="mx-4 text-sm font-normal">Progress</span>
|
||||
</a>
|
||||
<a class="{{ $default }} {{ if eq .RouteName "activity" }}{{ $active }}{{ else if true }}{{ $inactive }}{{ end }}"
|
||||
href="/activity">
|
||||
{{ template "svg/activity" (dict "Size" 20) }}
|
||||
<span class="mx-4 text-sm font-normal">Activity</span>
|
||||
</a>
|
||||
{{ if .Config.SearchEnabled }}
|
||||
<a class="{{ $default }} {{ if eq .RouteName "search" }}{{ $active }}{{ else if true }}{{ $inactive }}{{ end }}"
|
||||
href="/search">
|
||||
{{ template "svg/search" (dict "Size" 20) }}
|
||||
<span class="mx-4 text-sm font-normal">Search</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ if .Authorization.IsAdmin }}
|
||||
<div class="flex flex-col gap-4 p-2 pl-6 my-2 transition-colors duration-200 border-l-4 {{ if hasPrefix .RouteName "admin" }}dark:text-white border-purple-500{{ else if true }}border-transparent text-gray-400{{ end }}">
|
||||
<a href="/admin"
|
||||
class="flex justify-start w-full {{ if not (hasPrefix .RouteName "admin") }}text-gray-400 hover:text-gray-800 dark:hover:text-gray-100{{ end }}">
|
||||
{{ template "svg/settings" (dict "Size" 20) }}
|
||||
<span class="mx-4 text-sm font-normal">Admin</span>
|
||||
</a>
|
||||
{{ if hasPrefix .RouteName "admin" }}
|
||||
<a href="/admin"
|
||||
style="padding-left: 1.75em"
|
||||
class="flex justify-start w-full {{ if not (eq .RouteName "admin") }}text-gray-400 hover:text-gray-800 dark:hover:text-gray-100{{ end }}">
|
||||
<span class="mx-4 text-sm font-normal">General</span>
|
||||
</a>
|
||||
<a href="/admin/users"
|
||||
style="padding-left: 1.75em"
|
||||
class="flex justify-start w-full {{ if not (eq .RouteName "admin-users") }}text-gray-400 hover:text-gray-800 dark:hover:text-gray-100{{ end }}">
|
||||
<span class="mx-4 text-sm font-normal">Users</span>
|
||||
</a>
|
||||
<a href="/admin/logs"
|
||||
style="padding-left: 1.75em"
|
||||
class="flex justify-start w-full {{ if not (eq .RouteName "admin-logs") }}text-gray-400 hover:text-gray-800 dark:hover:text-gray-100{{ end }}">
|
||||
<span class="mx-4 text-sm font-normal">Logs</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<a class="flex flex-col gap-2 justify-center items-center p-6 w-full absolute bottom-0 text-black dark:text-white"
|
||||
target="_blank"
|
||||
href="https://gitea.va.reichard.io/evan/AnthoLume">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="text-black dark:text-white"
|
||||
height="20"
|
||||
viewBox="0 0 219 92"
|
||||
fill="currentColor">
|
||||
<defs>
|
||||
<clipPath id="a">
|
||||
<path d="M159 .79h25V69h-25Zm0 0" />
|
||||
</clipPath>
|
||||
<clipPath id="b">
|
||||
<path d="M183 9h35.371v60H183Zm0 0" />
|
||||
</clipPath>
|
||||
<clipPath id="c">
|
||||
<path d="M0 .79h92V92H0Zm0 0" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<path style="stroke: none; fill-rule: nonzero; fill-opacity: 1" d="M130.871 31.836c-4.785 0-8.351 2.352-8.351 8.008 0 4.261 2.347 7.222 8.093 7.222 4.871 0 8.18-2.867 8.18-7.398 0-5.133-2.961-7.832-7.922-7.832Zm-9.57 39.95c-1.133 1.39-2.262 2.87-2.262 4.612 0 3.48 4.434 4.524 10.527 4.524 5.051 0 11.926-.352 11.926-5.043 0-2.793-3.308-2.965-7.488-3.227Zm25.761-39.688c1.563 2.004 3.22 4.789 3.22 8.793 0 9.656-7.571 15.316-18.536 15.316-2.789 0-5.312-.348-6.879-.785l-2.87 4.613 8.526.52c15.059.96 23.934 1.398 23.934 12.968 0 10.008-8.789 15.665-23.934 15.665-15.75 0-21.757-4.004-21.757-10.88 0-3.917 1.742-6 4.789-8.878-2.875-1.211-3.828-3.387-3.828-5.739 0-1.914.953-3.656 2.523-5.312 1.566-1.652 3.305-3.305 5.395-5.219-4.262-2.09-7.485-6.617-7.485-13.058 0-10.008 6.613-16.88 19.93-16.88 3.742 0 6.004.344 8.008.872h16.972v7.394l-8.007.61" />
|
||||
<g clip-path="url(#a)">
|
||||
<path style="stroke: none; fill-rule: nonzero; fill-opacity: 1" d="M170.379 16.281c-4.961 0-7.832-2.87-7.832-7.836 0-4.957 2.871-7.656 7.832-7.656 5.05 0 7.922 2.7 7.922 7.656 0 4.965-2.871 7.836-7.922 7.836Zm-11.227 52.305V61.71l4.438-.606c1.219-.175 1.394-.437 1.394-1.746V33.773c0-.953-.261-1.566-1.132-1.824l-4.7-1.656.957-7.047h18.016V59.36c0 1.399.086 1.57 1.395 1.746l4.437.606v6.875h-24.805" />
|
||||
</g>
|
||||
<g clip-path="url(#b)">
|
||||
<path style="stroke: none; fill-rule: nonzero; fill-opacity: 1" d="M218.371 65.21c-3.742 1.825-9.223 3.481-14.187 3.481-10.356 0-14.27-4.175-14.27-14.015V31.879c0-.524 0-.871-.7-.871h-6.093v-7.746c7.664-.871 10.707-4.703 11.664-14.188h8.27v12.36c0 .609 0 .87.695.87h12.27v8.704h-12.965v20.797c0 5.136 1.218 7.136 5.918 7.136 2.437 0 4.96-.609 7.047-1.39l2.351 7.66" />
|
||||
</g>
|
||||
<g clip-path="url(#c)">
|
||||
<path style="stroke: none; fill-rule: nonzero; fill-opacity: 1" d="M89.422 42.371 49.629 2.582a5.868 5.868 0 0 0-8.3 0l-8.263 8.262 10.48 10.484a6.965 6.965 0 0 1 7.173 1.668 6.98 6.98 0 0 1 1.656 7.215l10.102 10.105a6.963 6.963 0 0 1 7.214 1.657 6.976 6.976 0 0 1 0 9.875 6.98 6.98 0 0 1-9.879 0 6.987 6.987 0 0 1-1.519-7.594l-9.422-9.422v24.793a6.979 6.979 0 0 1 1.848 1.32 6.988 6.988 0 0 1 0 9.88c-2.73 2.726-7.153 2.726-9.875 0a6.98 6.98 0 0 1 0-9.88 6.893 6.893 0 0 1 2.285-1.523V34.398a6.893 6.893 0 0 1-2.285-1.523 6.988 6.988 0 0 1-1.508-7.637L29.004 14.902 1.719 42.187a5.868 5.868 0 0 0 0 8.301l39.793 39.793a5.868 5.868 0 0 0 8.3 0l39.61-39.605a5.873 5.873 0 0 0 0-8.305" />
|
||||
</g>
|
||||
</svg>
|
||||
<span class="text-xs">{{ .Config.Version }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-xl font-bold dark:text-white px-6 lg:ml-44">{{ block "header" . }}{{ end }}</h1>
|
||||
<div class="relative flex items-center justify-end w-full p-4 space-x-4">
|
||||
<a href="#" class="relative block text-gray-800 dark:text-gray-200">{{ template "svg/user" (dict "Size" 20) }}</a>
|
||||
<input type="checkbox" id="user-dropdown-button" class="hidden" />
|
||||
<div id="user-dropdown"
|
||||
class="transition duration-200 z-20 absolute right-4 top-16 pt-4">
|
||||
<div class="w-40 origin-top-right bg-white rounded-md shadow-lg dark:shadow-gray-800 dark:bg-gray-700 ring-1 ring-black ring-opacity-5">
|
||||
<div class="py-1"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="options-menu">
|
||||
<a href="/settings"
|
||||
class="block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600"
|
||||
role="menuitem">
|
||||
<span class="flex flex-col">
|
||||
<span>Settings</span>
|
||||
</span>
|
||||
</a>
|
||||
<a href="/local"
|
||||
class="block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600"
|
||||
role="menuitem">
|
||||
<span class="flex flex-col">
|
||||
<span>Offline</span>
|
||||
</span>
|
||||
</a>
|
||||
<a href="/logout"
|
||||
class="block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600"
|
||||
role="menuitem">
|
||||
<span class="flex flex-col">
|
||||
<span>Logout</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<label for="user-dropdown-button">
|
||||
<div class="flex items-center gap-2 text-gray-500 dark:text-white text-md py-4 cursor-pointer">
|
||||
<span>{{ .Authorization.UserName }}</span>
|
||||
<span class="text-gray-800 dark:text-gray-200">{{ template "svg/dropdown" (dict "Size" 20) }}</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<main class="relative overflow-hidden">
|
||||
<div id="container" class="h-[100dvh] px-4 overflow-auto md:px-6 lg:ml-48">{{ block "content" . }}{{ end }}</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,40 +0,0 @@
|
||||
<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"
|
||||
>
|
||||
<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 }} bg-green-600 {{ end }}"
|
||||
>
|
||||
{{ if and (ne .Progress 100) (not .Error) }}
|
||||
{{ template "svg/loading" (dict "Size" 16) }}
|
||||
{{ end }}
|
||||
|
||||
{{ .Message }}
|
||||
</span>
|
||||
<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">
|
||||
|
||||
{{ if .Error }}
|
||||
<div
|
||||
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 }}
|
||||
<div
|
||||
class="absolute h-full bg-green-600 rounded-full"
|
||||
style="width: {{ .Progress }}%"
|
||||
></div>
|
||||
<p class="absolute w-full h-full font-bold text-center text-xs">
|
||||
{{ .Progress }}%
|
||||
</p>
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
|
||||
<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>
|
||||
22
templates/components/download-progress.tmpl
Normal file
22
templates/components/download-progress.tmpl
Normal file
@ -0,0 +1,22 @@
|
||||
<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">
|
||||
<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) }}
|
||||
{{ template "svg/loading" (dict "Size" 16) }}
|
||||
{{ end }}
|
||||
{{ .Message }}
|
||||
</span>
|
||||
<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">
|
||||
{{ if .Error }}
|
||||
<div 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 }}
|
||||
<div class="absolute h-full bg-green-600 rounded-full"
|
||||
style="width: {{ .Progress }}%"></div>
|
||||
<p class="absolute w-full h-full font-bold text-center text-xs">{{ .Progress }}%</p>
|
||||
{{ end }}
|
||||
</div>
|
||||
<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>
|
||||
@ -1,101 +0,0 @@
|
||||
<div class="w-full">
|
||||
<div
|
||||
class="flex flex-col justify-between h-full w-full px-4 py-6 bg-white shadow-lg dark:bg-gray-700 rounded"
|
||||
>
|
||||
<div>
|
||||
<div class="flex justify-between">
|
||||
<p
|
||||
class="text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500"
|
||||
>
|
||||
{{ .Name }} Leaderboard
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs text-gray-400 items-center">
|
||||
<label
|
||||
for="all-{{ .Name }}"
|
||||
class="cursor-pointer hover:text-black dark:hover:text-white"
|
||||
>all</label
|
||||
>
|
||||
<label
|
||||
for="year-{{ .Name }}"
|
||||
class="cursor-pointer hover:text-black dark:hover:text-white"
|
||||
>year</label
|
||||
>
|
||||
<label
|
||||
for="month-{{ .Name }}"
|
||||
class="cursor-pointer hover:text-black dark:hover:text-white"
|
||||
>month</label
|
||||
>
|
||||
<label
|
||||
for="week-{{ .Name }}"
|
||||
class="cursor-pointer hover:text-black dark:hover:text-white"
|
||||
>week</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
name="options-{{ .Name }}"
|
||||
id="all-{{ .Name }}"
|
||||
class="hidden peer/All"
|
||||
checked
|
||||
/>
|
||||
<input
|
||||
type="radio"
|
||||
name="options-{{ .Name }}"
|
||||
id="year-{{ .Name }}"
|
||||
class="hidden peer/Year"
|
||||
/>
|
||||
<input
|
||||
type="radio"
|
||||
name="options-{{ .Name }}"
|
||||
id="month-{{ .Name }}"
|
||||
class="hidden peer/Month"
|
||||
/>
|
||||
<input
|
||||
type="radio"
|
||||
name="options-{{ .Name }}"
|
||||
id="week-{{ .Name }}"
|
||||
class="hidden peer/Week"
|
||||
/>
|
||||
|
||||
{{ range $key, $data := .Data }}
|
||||
<div class="flex items-end my-6 space-x-2 hidden peer-checked/{{ $key }}:block">
|
||||
|
||||
{{ $length := len $data }}
|
||||
{{ if eq $length 0 }}
|
||||
<p class="text-5xl font-bold text-black dark:text-white">N/A</p>
|
||||
{{ else }}
|
||||
<p class="text-5xl font-bold text-black dark:text-white">
|
||||
{{ (index $data 0).UserID }}
|
||||
</p>
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
<div class="hidden dark:text-white peer-checked/{{ $key }}:block">
|
||||
|
||||
{{ range $index, $item := $data }}
|
||||
{{ if lt $index 3 }}
|
||||
{{ if eq $index 0 }}
|
||||
<div class="flex items-center justify-between pt-2 pb-2 text-sm">
|
||||
{{ else }}
|
||||
<div
|
||||
class="flex items-center justify-between pt-2 pb-2 text-sm border-t border-gray-200"
|
||||
>
|
||||
{{ end }}
|
||||
<div>
|
||||
<p>{{ $item.UserID }}</p>
|
||||
</div>
|
||||
<div class="flex items-end font-bold">
|
||||
{{ $item.Value }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
|
||||
{{ end}}
|
||||
</div>
|
||||
</div>
|
||||
64
templates/components/leaderboard-card.tmpl
Normal file
64
templates/components/leaderboard-card.tmpl
Normal file
@ -0,0 +1,64 @@
|
||||
<div class="w-full">
|
||||
<div class="flex flex-col justify-between h-full w-full px-4 py-6 bg-white shadow-lg dark:bg-gray-700 rounded">
|
||||
<div>
|
||||
<div class="flex justify-between">
|
||||
<p class="text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500">
|
||||
{{ .Name }} Leaderboard
|
||||
</p>
|
||||
<div class="flex gap-2 text-xs text-gray-400 items-center">
|
||||
<label for="all-{{ .Name }}"
|
||||
class="cursor-pointer hover:text-black dark:hover:text-white">all</label>
|
||||
<label for="year-{{ .Name }}"
|
||||
class="cursor-pointer hover:text-black dark:hover:text-white">year</label>
|
||||
<label for="month-{{ .Name }}"
|
||||
class="cursor-pointer hover:text-black dark:hover:text-white">month</label>
|
||||
<label for="week-{{ .Name }}"
|
||||
class="cursor-pointer hover:text-black dark:hover:text-white">week</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="radio"
|
||||
name="options-{{ .Name }}"
|
||||
id="all-{{ .Name }}"
|
||||
class="hidden peer/All"
|
||||
checked />
|
||||
<input type="radio"
|
||||
name="options-{{ .Name }}"
|
||||
id="year-{{ .Name }}"
|
||||
class="hidden peer/Year" />
|
||||
<input type="radio"
|
||||
name="options-{{ .Name }}"
|
||||
id="month-{{ .Name }}"
|
||||
class="hidden peer/Month" />
|
||||
<input type="radio"
|
||||
name="options-{{ .Name }}"
|
||||
id="week-{{ .Name }}"
|
||||
class="hidden peer/Week" />
|
||||
{{ range $key, $data := .Data }}
|
||||
<div class="flex items-end my-6 space-x-2 hidden peer-checked/{{ $key }}:block">
|
||||
{{ $length := len $data }}
|
||||
{{ if eq $length 0 }}
|
||||
<p class="text-5xl font-bold text-black dark:text-white">N/A</p>
|
||||
{{ else }}
|
||||
<p class="text-5xl font-bold text-black dark:text-white">{{ (index $data 0).UserID }}</p>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="hidden dark:text-white peer-checked/{{ $key }}:block">
|
||||
{{ range $index, $item := $data }}
|
||||
{{ if lt $index 3 }}
|
||||
{{ if eq $index 0 }}
|
||||
<div class="flex items-center justify-between pt-2 pb-2 text-sm">
|
||||
{{ else }}
|
||||
<div class="flex items-center justify-between pt-2 pb-2 text-sm border-t border-gray-200">
|
||||
{{ end }}
|
||||
<div>
|
||||
<p>{{ $item.UserID }}</p>
|
||||
</div>
|
||||
<div class="flex items-end font-bold">{{ $item.Value }}</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end}}
|
||||
</div>
|
||||
</div>
|
||||
@ -1,49 +0,0 @@
|
||||
{{template "base" .}} {{define "title"}}Activity{{end}} {{define "header"}}
|
||||
<a href="./activity">Activity</a>
|
||||
{{end}} {{define "content"}}
|
||||
<div class="overflow-x-auto">
|
||||
<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">
|
||||
<thead class="text-gray-800 dark:text-gray-400">
|
||||
<tr>
|
||||
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">
|
||||
Document
|
||||
</th>
|
||||
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">
|
||||
Time
|
||||
</th>
|
||||
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">
|
||||
Duration
|
||||
</th>
|
||||
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">
|
||||
Percent
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-black dark:text-white">
|
||||
{{ if not .Data }}
|
||||
<tr>
|
||||
<td class="text-center p-3" colspan="4">No Results</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
{{range $activity := .Data }}
|
||||
<tr>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<a href="./documents/{{ $activity.DocumentID }}">{{ $activity.Author }} - {{ $activity.Title }}</p></a>
|
||||
</td>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<p>{{ $activity.StartTime }}</p>
|
||||
</td>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<p>{{ $activity.Duration }}</p>
|
||||
</td>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<p>{{ $activity.EndPercentage }}%</p>
|
||||
</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
44
templates/pages/activity.tmpl
Normal file
44
templates/pages/activity.tmpl
Normal file
@ -0,0 +1,44 @@
|
||||
{{ template "base" . }}
|
||||
{{ define "title" }}Activity{{ end }}
|
||||
{{ define "header" }}<a href="./activity">Activity</a>{{ end }}
|
||||
{{ define "content" }}
|
||||
<div class="overflow-x-auto">
|
||||
<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">
|
||||
<thead class="text-gray-800 dark:text-gray-400">
|
||||
<tr>
|
||||
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Document</th>
|
||||
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Time</th>
|
||||
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Duration</th>
|
||||
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Percent</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-black dark:text-white">
|
||||
{{ if not .Data }}
|
||||
<tr>
|
||||
<td class="text-center p-3" colspan="4">No Results</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
{{ range $activity := .Data }}
|
||||
<tr>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<a href="./documents/{{ $activity.DocumentID }}">{{ $activity.Author }} - {{ $activity.Title }}
|
||||
</p>
|
||||
</a>
|
||||
</td>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<p>{{ $activity.StartTime }}</p>
|
||||
</td>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<p>{{ $activity.Duration }}</p>
|
||||
</td>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<p>{{ $activity.EndPercentage }}%</p>
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
@ -1,15 +0,0 @@
|
||||
{{template "base" .}} {{define "title"}}Admin - Logs{{end}} {{define
|
||||
"header"}}
|
||||
<a class="whitespace-pre" href="../admin">Admin - Logs</a>
|
||||
{{end}} {{define "content"}}
|
||||
|
||||
<div
|
||||
class="flex flex-col-reverse text-black dark:text-white"
|
||||
style="font-family: monospace"
|
||||
>
|
||||
{{range $log := .Data }}
|
||||
<span class="whitespace-pre">{{ $log }}</span>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
{{end}}
|
||||
11
templates/pages/admin-logs.tmpl
Normal file
11
templates/pages/admin-logs.tmpl
Normal file
@ -0,0 +1,11 @@
|
||||
{{ template "base" . }}
|
||||
{{ define "title" }}Admin - Logs{{ end }}
|
||||
{{ define "header" }}<a class="whitespace-pre" href="../admin">Admin - Logs</a>{{ end }}
|
||||
{{ define "content" }}
|
||||
<div class="flex flex-col-reverse text-black dark:text-white"
|
||||
style="font-family: monospace">
|
||||
{{ range $log := .Data }}
|
||||
<span class="whitespace-pre">{{ $log }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
@ -1,50 +0,0 @@
|
||||
{{template "base" .}} {{define "title"}}Admin - Users{{end}} {{define "header"}}
|
||||
<a class="whitespace-pre" href="../admin">Admin - Users</a>
|
||||
{{end}} {{define "content"}}
|
||||
<div class="overflow-x-auto">
|
||||
<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">
|
||||
<thead class="text-gray-800 dark:text-gray-400">
|
||||
<tr>
|
||||
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800 w-12">
|
||||
{{ template "svg/add" }}
|
||||
</th>
|
||||
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">
|
||||
User
|
||||
</th>
|
||||
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800 text-center">
|
||||
Permissions
|
||||
</th>
|
||||
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800 w-48">
|
||||
Created
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-black dark:text-white">
|
||||
{{ if not .Data }}
|
||||
<tr>
|
||||
<td class="text-center p-3" colspan="2">No Results</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
{{range $user := .Data }}
|
||||
<tr>
|
||||
<td class="p-3 border-b border-gray-200 text-gray-800 dark:text-gray-400">
|
||||
{{ template "svg/delete" }}
|
||||
</td>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<p>{{ $user.ID }}</p>
|
||||
</td>
|
||||
<td class="p-3 border-b border-gray-200 text-center min-w-40">
|
||||
<span class="px-2 py-1 rounded-md text-white dark:text-black {{if $user.Admin}}bg-gray-800 dark:bg-gray-100{{else}}bg-gray-400 dark:bg-gray-600 cursor-pointer{{end}}">admin</span>
|
||||
<span class="px-2 py-1 rounded-md text-white dark:text-black {{if $user.Admin}}bg-gray-400 dark:bg-gray-600 cursor-pointer{{else}}bg-gray-800 dark:bg-gray-100{{end}}">user</span>
|
||||
</td>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<p>{{ $user.CreatedAt }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
45
templates/pages/admin-users.tmpl
Normal file
45
templates/pages/admin-users.tmpl
Normal file
@ -0,0 +1,45 @@
|
||||
{{ template "base" . }}
|
||||
{{ define "title" }}Admin - Users{{ end }}
|
||||
{{ define "header" }}<a class="whitespace-pre" href="../admin">Admin - Users</a>{{ end }}
|
||||
{{ define "content" }}
|
||||
<div class="overflow-x-auto">
|
||||
<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">
|
||||
<thead class="text-gray-800 dark:text-gray-400">
|
||||
<tr>
|
||||
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800 w-12">
|
||||
{{ template "svg/add" }}
|
||||
</th>
|
||||
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">User</th>
|
||||
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800 text-center">
|
||||
Permissions
|
||||
</th>
|
||||
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800 w-48">Created</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-black dark:text-white">
|
||||
{{ if not .Data }}
|
||||
<tr>
|
||||
<td class="text-center p-3" colspan="2">No Results</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
{{ range $user := .Data }}
|
||||
<tr>
|
||||
<td class="p-3 border-b border-gray-200 text-gray-800 dark:text-gray-400">{{ template "svg/delete" }}</td>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<p>{{ $user.ID }}</p>
|
||||
</td>
|
||||
<td class="p-3 border-b border-gray-200 text-center min-w-40">
|
||||
<span class="px-2 py-1 rounded-md text-white dark:text-black {{ if $user.Admin }}bg-gray-800 dark:bg-gray-100{{ else }}bg-gray-400 dark:bg-gray-600 cursor-pointer{{ end }}">admin</span>
|
||||
<span class="px-2 py-1 rounded-md text-white dark:text-black {{ if $user.Admin }}bg-gray-400 dark:bg-gray-600 cursor-pointer{{ else }}bg-gray-800 dark:bg-gray-100{{ end }}">user</span>
|
||||
</td>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<p>{{ $user.CreatedAt }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
@ -1,190 +0,0 @@
|
||||
{{template "base" .}} {{define "title"}}Admin - General{{end}} {{define
|
||||
"header"}}
|
||||
<a class="whitespace-pre" href="./admin">Admin - General</a>
|
||||
{{end}} {{define "content"}}
|
||||
<div class="w-full flex flex-col md:flex-row gap-4">
|
||||
<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"
|
||||
>
|
||||
{{ template "svg/user" (dict "Size" 60) }}
|
||||
<p class="text-lg">{{ .Authorization.UserName }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
>
|
||||
<p class="text-lg font-semibold mb-2">Import Documents</p>
|
||||
<form class="flex gap-4 flex-col" action="./admin" method="POST">
|
||||
<input type="text" name="action" value="IMPORT" class="hidden" />
|
||||
<div class="flex gap-4">
|
||||
<div class="flex grow 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"
|
||||
>
|
||||
{{ template "svg/import" (dict "Size" 15) }}
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
name="import_directory"
|
||||
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="Directory"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col mr-4">
|
||||
<div class="inline-flex gap-2">
|
||||
<input
|
||||
checked
|
||||
type="radio"
|
||||
id="copy"
|
||||
name="import_type"
|
||||
value="COPY"
|
||||
/>
|
||||
<label for="copy"> Copy</label>
|
||||
</div>
|
||||
<div class="inline-flex gap-2">
|
||||
<input
|
||||
type="radio"
|
||||
id="direct"
|
||||
name="import_type"
|
||||
value="DIRECT"
|
||||
/>
|
||||
<label for="direct"> Direct</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
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>
|
||||
</button>
|
||||
</form>
|
||||
{{ if .PasswordErrorMessage }}
|
||||
<span class="text-red-400 text-xs">{{ .PasswordErrorMessage }}</span>
|
||||
{{ else if .PasswordMessage }}
|
||||
<span class="text-green-400 text-xs">{{ .PasswordMessage }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div class="flex flex-col gap-4">
|
||||
<form class="flex justify-between" action="./admin" method="POST">
|
||||
<input type="text" name="action" value="BACKUP" class="hidden" />
|
||||
<div class="flex gap-8 items-center">
|
||||
<div>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="backup_covers"
|
||||
name="backup_types"
|
||||
value="COVERS"
|
||||
/>
|
||||
<label for="backup_covers"> Covers</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="backup_documents"
|
||||
name="backup_types"
|
||||
value="DOCUMENTS"
|
||||
/>
|
||||
<label for="backup_documents"> Documents</label>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
class="w-40 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">Backup</span>
|
||||
</button>
|
||||
</form>
|
||||
<form
|
||||
method="POST"
|
||||
enctype="multipart/form-data"
|
||||
action="./admin"
|
||||
class="flex justify-between grow"
|
||||
>
|
||||
<input type="text" name="action" value="RESTORE" class="hidden" />
|
||||
<div class="flex items-center w-1/2">
|
||||
<input
|
||||
type="file"
|
||||
accept=".zip"
|
||||
name="restore_file"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
class="w-40 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">Restore</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{{ if .PasswordErrorMessage }}
|
||||
<span class="text-red-400 text-xs">{{ .PasswordErrorMessage }}</span>
|
||||
{{ else if .PasswordMessage }}
|
||||
<span class="text-green-400 text-xs">{{ .PasswordMessage }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<table class="min-w-full bg-white dark:bg-gray-700 text-sm">
|
||||
<tbody class="text-black dark:text-white">
|
||||
<tr>
|
||||
<td class="pl-0">
|
||||
<p>Metadata Matching</p>
|
||||
</td>
|
||||
<td class="py-2 float-right">
|
||||
<form action="./admin" method="POST">
|
||||
<input
|
||||
type="text"
|
||||
name="action"
|
||||
value="METADATA_MATCH"
|
||||
class="hidden"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
class="w-40 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">Run</span>
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<p>Cache Tables</p>
|
||||
</td>
|
||||
<td class="py-2 float-right">
|
||||
<form action="./admin" method="POST">
|
||||
<input
|
||||
type="text"
|
||||
name="action"
|
||||
value="CACHE_TABLES"
|
||||
class="hidden"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
class="w-40 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">Run</span>
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
129
templates/pages/admin.tmpl
Normal file
129
templates/pages/admin.tmpl
Normal file
@ -0,0 +1,129 @@
|
||||
{{ template "base" . }}
|
||||
{{ define "title" }}Admin - General{{ end }}
|
||||
{{ define "header" }}<a class="whitespace-pre" href="./admin">Admin - General</a>{{ end }}
|
||||
{{ define "content" }}
|
||||
<div class="w-full flex flex-col md:flex-row gap-4">
|
||||
<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">
|
||||
{{ template "svg/user" (dict "Size" 60) }}
|
||||
<p class="text-lg">{{ .Authorization.UserName }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<p class="text-lg font-semibold mb-2">Import Documents</p>
|
||||
<form class="flex gap-4 flex-col" action="./admin" method="POST">
|
||||
<input type="text" name="action" value="IMPORT" class="hidden" />
|
||||
<div class="flex gap-4">
|
||||
<div class="flex grow 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">
|
||||
{{ template "svg/import" (dict "Size" 15) }}
|
||||
</span>
|
||||
<input type="text"
|
||||
name="import_directory"
|
||||
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="Directory" />
|
||||
</div>
|
||||
<div class="flex flex-col mr-4">
|
||||
<div class="inline-flex gap-2">
|
||||
<input checked type="radio" id="copy" name="import_type" value="COPY" />
|
||||
<label for="copy">Copy</label>
|
||||
</div>
|
||||
<div class="inline-flex gap-2">
|
||||
<input type="radio" id="direct" name="import_type" value="DIRECT" />
|
||||
<label for="direct">Direct</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button 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>
|
||||
</button>
|
||||
</form>
|
||||
{{ if .PasswordErrorMessage }}
|
||||
<span class="text-red-400 text-xs">{{ .PasswordErrorMessage }}</span>
|
||||
{{ else if .PasswordMessage }}
|
||||
<span class="text-green-400 text-xs">{{ .PasswordMessage }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<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>
|
||||
<div class="flex flex-col gap-4">
|
||||
<form class="flex justify-between" action="./admin" method="POST">
|
||||
<input type="text" name="action" value="BACKUP" class="hidden" />
|
||||
<div class="flex gap-8 items-center">
|
||||
<div>
|
||||
<input type="checkbox" id="backup_covers" name="backup_types" value="COVERS" />
|
||||
<label for="backup_covers">Covers</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="checkbox"
|
||||
id="backup_documents"
|
||||
name="backup_types"
|
||||
value="DOCUMENTS" />
|
||||
<label for="backup_documents">Documents</label>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit"
|
||||
class="w-40 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">Backup</span>
|
||||
</button>
|
||||
</form>
|
||||
<form method="POST"
|
||||
enctype="multipart/form-data"
|
||||
action="./admin"
|
||||
class="flex justify-between grow">
|
||||
<input type="text" name="action" value="RESTORE" class="hidden" />
|
||||
<div class="flex items-center w-1/2">
|
||||
<input type="file" accept=".zip" name="restore_file" class="w-full" />
|
||||
</div>
|
||||
<button type="submit"
|
||||
class="w-40 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">Restore</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{{ if .PasswordErrorMessage }}
|
||||
<span class="text-red-400 text-xs">{{ .PasswordErrorMessage }}</span>
|
||||
{{ else if .PasswordMessage }}
|
||||
<span class="text-green-400 text-xs">{{ .PasswordMessage }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<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>
|
||||
<table class="min-w-full bg-white dark:bg-gray-700 text-sm">
|
||||
<tbody class="text-black dark:text-white">
|
||||
<tr>
|
||||
<td class="pl-0">
|
||||
<p>Metadata Matching</p>
|
||||
</td>
|
||||
<td class="py-2 float-right">
|
||||
<form action="./admin" method="POST">
|
||||
<input type="text" name="action" value="METADATA_MATCH" class="hidden" />
|
||||
<button type="submit"
|
||||
class="w-40 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">Run</span>
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>Cache Tables</p>
|
||||
</td>
|
||||
<td class="py-2 float-right">
|
||||
<form action="./admin" method="POST">
|
||||
<input type="text" name="action" value="CACHE_TABLES" class="hidden" />
|
||||
<button type="submit"
|
||||
class="w-40 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">Run</span>
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
@ -1,382 +0,0 @@
|
||||
{{template "base" . }}
|
||||
|
||||
{{define "title"}}Documents{{end}}
|
||||
|
||||
{{define "header"}}
|
||||
<a href="/documents">Documents</a>
|
||||
{{end}}
|
||||
|
||||
{{define "content"}}
|
||||
<div class="h-full w-full relative">
|
||||
<!-- 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 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">
|
||||
<img class="rounded object-fill w-full" src="/documents/{{.Data.ID}}/cover"></img>
|
||||
</label>
|
||||
|
||||
{{ if .Data.Filepath }}
|
||||
<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 }}
|
||||
|
||||
<div class="flex flex-wrap-reverse justify-between z-20 gap-2 relative">
|
||||
<div class="min-w-[50%] md:mr-2">
|
||||
<div class="flex gap-1 text-sm">
|
||||
<p class="text-gray-500">ISBN-10:</p>
|
||||
<p class="font-medium">
|
||||
{{ or .Data.Isbn10 "N/A" }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-1 text-sm">
|
||||
<p class="text-gray-500">ISBN-13:</p>
|
||||
<p class="font-medium">
|
||||
{{ or .Data.Isbn13 "N/A" }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex grow justify-between my-auto text-gray-500 dark:text-gray-500">
|
||||
<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"
|
||||
action="./{{ .Data.ID }}/edit"
|
||||
class="flex flex-col gap-2 w-72 text-black dark:text-white text-sm"
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
id="cover_file"
|
||||
name="cover_file"
|
||||
>
|
||||
<button
|
||||
class="font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
|
||||
type="submit"
|
||||
>Upload Cover</button>
|
||||
</form>
|
||||
<form
|
||||
method="POST"
|
||||
action="./{{ .Data.ID }}/edit"
|
||||
class="flex flex-col gap-2 w-72 text-black dark:text-white text-sm"
|
||||
>
|
||||
<input type="checkbox" checked id="remove_cover" name="remove_cover" class="hidden" />
|
||||
<button
|
||||
class="font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
|
||||
type="submit"
|
||||
>Remove Cover</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<label for="delete-button" class="cursor-pointer">{{ template "svg/delete" (dict "Size" 28) }}</label>
|
||||
<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"
|
||||
class="text-black dark:text-white text-sm"
|
||||
>
|
||||
<button
|
||||
class="font-medium w-24 px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
|
||||
type="submit"
|
||||
>Delete</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<a href="../activity?document={{ .Data.ID }}">{{ template "svg/activity" (dict "Size" 28) }}</a>
|
||||
<div class="relative">
|
||||
<label for="search-button">{{ template "svg/search" (dict "Size" 28) }}</label>
|
||||
<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"
|
||||
class="flex flex-col gap-2 text-black dark:text-white text-sm"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
name="title"
|
||||
placeholder="Title"
|
||||
value="{{ or .Data.Title nil }}"
|
||||
class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="author"
|
||||
name="author"
|
||||
placeholder="Author"
|
||||
value="{{ or .Data.Author nil }}"
|
||||
class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="isbn"
|
||||
name="isbn"
|
||||
placeholder="ISBN 10 / ISBN 13"
|
||||
value="{{ or .Data.Isbn13 (or .Data.Isbn10 nil) }}"
|
||||
class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"
|
||||
>
|
||||
<button
|
||||
class="font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
|
||||
type="submit"
|
||||
>Identify</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{{ if .Data.Filepath }}
|
||||
<a href="./{{.Data.ID}}/file">{{ template "svg/download" (dict "Size" 28) }}</a>
|
||||
{{ else }}
|
||||
{{ template "svg/download" (dict "Size" 28 "Disabled" true) }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid sm:grid-cols-2 justify-between gap-4 pb-4">
|
||||
<div class="relative">
|
||||
<div class="text-gray-500 inline-flex gap-2 relative">
|
||||
<p>Title</p>
|
||||
<label class="my-auto" for="edit-title-button">{{ template "svg/edit" (dict "Size" 18) }}</label>
|
||||
<input type="checkbox" id="edit-title-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"
|
||||
action="./{{ .Data.ID }}/edit"
|
||||
class="flex flex-col gap-2 text-black dark:text-white text-sm"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
name="title"
|
||||
value="{{ or .Data.Title "N/A" }}"
|
||||
class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"
|
||||
>
|
||||
<button
|
||||
class="font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
|
||||
type="submit"
|
||||
>Save</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-medium text-lg">
|
||||
{{ or .Data.Title "N/A" }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="text-gray-500 inline-flex gap-2 relative">
|
||||
<p>Author</p>
|
||||
<label class="my-auto" for="edit-author-button">{{ template "svg/edit" (dict "Size" 18) }}</label>
|
||||
<input type="checkbox" id="edit-author-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"
|
||||
action="./{{ .Data.ID }}/edit"
|
||||
class="flex flex-col gap-2 text-black dark:text-white text-sm"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="author"
|
||||
name="author"
|
||||
value="{{ or .Data.Author "N/A" }}"
|
||||
class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"
|
||||
>
|
||||
<button
|
||||
class="font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
|
||||
type="submit"
|
||||
>Save</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-medium text-lg">
|
||||
{{ or .Data.Author "N/A" }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="text-gray-500 inline-flex gap-2 relative">
|
||||
<p>Time Read</p>
|
||||
<label class="my-auto" for="progress-info-button">{{ template "svg/info" (dict "Size" 18) }}</label>
|
||||
<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">
|
||||
<p class="text-gray-400 w-32">Seconds / Percent</p>
|
||||
<p class="font-medium dark:text-white">
|
||||
{{ .Data.SecondsPerPercent }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-xs flex">
|
||||
<p class="text-gray-400 w-32">Words / Minute</p>
|
||||
<p class="font-medium dark:text-white">
|
||||
{{ .Data.Wpm }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-xs flex">
|
||||
<p class="text-gray-400 w-32">Est. Time Left</p>
|
||||
<p class="font-medium dark:text-white whitespace-nowrap">
|
||||
{{ niceSeconds .TotalTimeLeftSeconds }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-medium text-lg">
|
||||
{{ niceSeconds .Data.TotalTimeSeconds }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-500">Progress</p>
|
||||
<p class="font-medium text-lg">
|
||||
{{ .Data.Percentage }}%
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="text-gray-500 inline-flex gap-2 relative">
|
||||
<p>Description</p>
|
||||
<label class="my-auto" for="edit-description-button">{{ template "svg/edit" (dict "Size" 18) }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative font-medium text-justify hyphens-auto">
|
||||
<input type="checkbox" id="edit-description-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" src="/documents/{{.Data.ID}}/cover"></img>
|
||||
<form
|
||||
method="POST"
|
||||
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"
|
||||
>
|
||||
<textarea
|
||||
type="text"
|
||||
id="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>
|
||||
<button
|
||||
class="font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
|
||||
type="submit"
|
||||
>Save</button>
|
||||
</form>
|
||||
</div>
|
||||
<p>{{ or .Data.Description "N/A" }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ if .MetadataError }}
|
||||
<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="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">
|
||||
<h3 class="text-lg font-bold leading-6 dark:text-gray-300">No Metadata Results Found</h3>
|
||||
</div>
|
||||
<a href="/documents/{{ .Data.ID }}"
|
||||
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"
|
||||
type="submit"
|
||||
>Back to Document</a>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<!-- Metadata Info -->
|
||||
{{ if .Metadata }}
|
||||
<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="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">
|
||||
<h3 class="text-lg font-bold leading-6 dark:text-gray-300">Metadata Results</h3>
|
||||
</div>
|
||||
<form
|
||||
id="metadata-save"
|
||||
method="POST"
|
||||
action="/documents/{{ .Data.ID }}/edit"
|
||||
class="text-black dark:text-white border-b dark:border-black"
|
||||
>
|
||||
<dl>
|
||||
<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>
|
||||
<dd class="mt-1 text-sm sm:mt-0 sm:col-span-2">
|
||||
<img class="rounded object-fill h-32" src="https://books.google.com/books/content/images/frontcover/{{ .Metadata.ID }}?fife=w480-h690"></img>
|
||||
</dd>
|
||||
</div>
|
||||
<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>
|
||||
<dd class="mt-1 text-sm sm:mt-0 sm:col-span-2">
|
||||
{{ or .Metadata.Title "N/A" }}
|
||||
</dd>
|
||||
</div>
|
||||
<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>
|
||||
<dd class="mt-1 text-sm sm:mt-0 sm:col-span-2">
|
||||
{{ or .Metadata.Author "N/A" }}
|
||||
</dd>
|
||||
</div>
|
||||
<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>
|
||||
<dd class="mt-1 text-sm sm:mt-0 sm:col-span-2">
|
||||
{{ or .Metadata.ISBN10 "N/A" }}
|
||||
</dd>
|
||||
</div>
|
||||
<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>
|
||||
<dd class="mt-1 text-sm sm:mt-0 sm:col-span-2">
|
||||
{{ or .Metadata.ISBN13 "N/A" }}
|
||||
</dd>
|
||||
</div>
|
||||
<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>
|
||||
<dd class="max-h-[10em] overflow-scroll mt-1 sm:mt-0 sm:col-span-2">
|
||||
{{ or .Metadata.Description "N/A" }}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<div class="hidden">
|
||||
<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" name="description" value="{{ .Metadata.Description }}">
|
||||
<input type="text" id="isbn_10" name="isbn_10" value="{{ .Metadata.ISBN10 }}">
|
||||
<input type="text" id="isbn_13" name="isbn_13" value="{{ .Metadata.ISBN13 }}">
|
||||
<input type="text" id="cover_gbid" name="cover_gbid" value="{{ .Metadata.ID }}">
|
||||
</div>
|
||||
</form>
|
||||
<div class="flex justify-end gap-4 m-4">
|
||||
<a href="/documents/{{ .Data.ID }}"
|
||||
class="w-24 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"
|
||||
type="submit"
|
||||
>Cancel</a>
|
||||
<button
|
||||
form="metadata-save"
|
||||
class="w-24 font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
|
||||
type="submit"
|
||||
>Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.css-button:checked + div {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.css-button + div {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
{{end}}
|
||||
299
templates/pages/document.tmpl
Normal file
299
templates/pages/document.tmpl
Normal file
@ -0,0 +1,299 @@
|
||||
{{ template "base" . }}
|
||||
{{ define "title" }}Documents{{ end }}
|
||||
{{ define "header" }}<a href="/documents">Documents</a>{{ end }}
|
||||
{{ define "content" }}
|
||||
<div class="h-full w-full relative">
|
||||
<!-- 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 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">
|
||||
<img class="rounded object-fill w-full"
|
||||
src="/documents/{{.Data.ID}}/cover" />
|
||||
</label>
|
||||
{{ if .Data.Filepath }}
|
||||
<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 }}
|
||||
<div class="flex flex-wrap-reverse justify-between z-20 gap-2 relative">
|
||||
<div class="min-w-[50%] md:mr-2">
|
||||
<div class="flex gap-1 text-sm">
|
||||
<p class="text-gray-500">ISBN-10:</p>
|
||||
<p class="font-medium">{{ or .Data.Isbn10 "N/A" }}</p>
|
||||
</div>
|
||||
<div class="flex gap-1 text-sm">
|
||||
<p class="text-gray-500">ISBN-13:</p>
|
||||
<p class="font-medium">{{ or .Data.Isbn13 "N/A" }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex grow justify-between my-auto text-gray-500 dark:text-gray-500">
|
||||
<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"
|
||||
action="./{{ .Data.ID }}/edit"
|
||||
class="flex flex-col gap-2 w-72 text-black dark:text-white text-sm">
|
||||
<input type="file" id="cover_file" name="cover_file">
|
||||
<button class="font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
|
||||
type="submit">Upload Cover</button>
|
||||
</form>
|
||||
<form method="POST"
|
||||
action="./{{ .Data.ID }}/edit"
|
||||
class="flex flex-col gap-2 w-72 text-black dark:text-white text-sm">
|
||||
<input type="checkbox"
|
||||
checked
|
||||
id="remove_cover"
|
||||
name="remove_cover"
|
||||
class="hidden" />
|
||||
<button class="font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
|
||||
type="submit">Remove Cover</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<label for="delete-button" class="cursor-pointer">{{ template "svg/delete" (dict "Size" 28) }}</label>
|
||||
<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"
|
||||
class="text-black dark:text-white text-sm">
|
||||
<button class="font-medium w-24 px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
|
||||
type="submit">Delete</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<a href="../activity?document={{ .Data.ID }}">{{ template "svg/activity" (dict "Size" 28) }}</a>
|
||||
<div class="relative">
|
||||
<label for="search-button">{{ template "svg/search" (dict "Size" 28) }}</label>
|
||||
<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"
|
||||
class="flex flex-col gap-2 text-black dark:text-white text-sm">
|
||||
<input type="text"
|
||||
id="title"
|
||||
name="title"
|
||||
placeholder="Title"
|
||||
value="{{ or .Data.Title nil }}"
|
||||
class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white">
|
||||
<input type="text"
|
||||
id="author"
|
||||
name="author"
|
||||
placeholder="Author"
|
||||
value="{{ or .Data.Author nil }}"
|
||||
class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white">
|
||||
<input type="text"
|
||||
id="isbn"
|
||||
name="isbn"
|
||||
placeholder="ISBN 10 / ISBN 13"
|
||||
value="{{ or .Data.Isbn13 (or .Data.Isbn10 nil) }}"
|
||||
class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white">
|
||||
<button class="font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
|
||||
type="submit">Identify</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{{ if .Data.Filepath }}
|
||||
<a href="./{{.Data.ID}}/file">{{ template "svg/download" (dict "Size" 28) }}</a>
|
||||
{{ else }}
|
||||
{{ template "svg/download" (dict "Size" 28 "Disabled" true) }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid sm:grid-cols-2 justify-between gap-4 pb-4">
|
||||
<div class="relative">
|
||||
<div class="text-gray-500 inline-flex gap-2 relative">
|
||||
<p>Title</p>
|
||||
<label class="my-auto" for="edit-title-button">{{ template "svg/edit" (dict "Size" 18) }}</label>
|
||||
<input type="checkbox" id="edit-title-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"
|
||||
action="./{{ .Data.ID }}/edit"
|
||||
class="flex flex-col gap-2 text-black dark:text-white text-sm">
|
||||
<input type="text" id="title" name="title" value="{{ or .Data.Title "N/A" }}" class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white">
|
||||
<button class="font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
|
||||
type="submit">Save</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-medium text-lg">{{ or .Data.Title "N/A" }}</p>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="text-gray-500 inline-flex gap-2 relative">
|
||||
<p>Author</p>
|
||||
<label class="my-auto" for="edit-author-button">{{ template "svg/edit" (dict "Size" 18) }}</label>
|
||||
<input type="checkbox" id="edit-author-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"
|
||||
action="./{{ .Data.ID }}/edit"
|
||||
class="flex flex-col gap-2 text-black dark:text-white text-sm">
|
||||
<input type="text" id="author" name="author" value="{{ or .Data.Author "N/A" }}" class="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white">
|
||||
<button class="font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
|
||||
type="submit">Save</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-medium text-lg">{{ or .Data.Author "N/A" }}</p>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="text-gray-500 inline-flex gap-2 relative">
|
||||
<p>Time Read</p>
|
||||
<label class="my-auto" for="progress-info-button">{{ template "svg/info" (dict "Size" 18) }}</label>
|
||||
<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">
|
||||
<p class="text-gray-400 w-32">Seconds / Percent</p>
|
||||
<p class="font-medium dark:text-white">{{ .Data.SecondsPerPercent }}</p>
|
||||
</div>
|
||||
<div class="text-xs flex">
|
||||
<p class="text-gray-400 w-32">Words / Minute</p>
|
||||
<p class="font-medium dark:text-white">{{ .Data.Wpm }}</p>
|
||||
</div>
|
||||
<div class="text-xs flex">
|
||||
<p class="text-gray-400 w-32">Est. Time Left</p>
|
||||
<p class="font-medium dark:text-white whitespace-nowrap">{{ niceSeconds .TotalTimeLeftSeconds }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-medium text-lg">{{ niceSeconds .Data.TotalTimeSeconds }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-500">Progress</p>
|
||||
<p class="font-medium text-lg">{{ .Data.Percentage }}%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="text-gray-500 inline-flex gap-2 relative">
|
||||
<p>Description</p>
|
||||
<label class="my-auto" for="edit-description-button">{{ template "svg/edit" (dict "Size" 18) }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative font-medium text-justify hyphens-auto">
|
||||
<input type="checkbox"
|
||||
id="edit-description-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"
|
||||
src="/documents/{{.Data.ID}}/cover" />
|
||||
<form method="POST"
|
||||
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">
|
||||
<textarea type="text"
|
||||
id="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>
|
||||
<button class="font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
|
||||
type="submit">Save</button>
|
||||
</form>
|
||||
</div>
|
||||
<p>{{ or .Data.Description "N/A" }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ if .MetadataError }}
|
||||
<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="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">
|
||||
<h3 class="text-lg font-bold leading-6 dark:text-gray-300">No Metadata Results Found</h3>
|
||||
</div>
|
||||
<a href="/documents/{{ .Data.ID }}"
|
||||
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"
|
||||
type="submit">Back to Document</a>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
<!-- Metadata Info -->
|
||||
{{ if .Metadata }}
|
||||
<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="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">
|
||||
<h3 class="text-lg font-bold leading-6 dark:text-gray-300">Metadata Results</h3>
|
||||
</div>
|
||||
<form id="metadata-save"
|
||||
method="POST"
|
||||
action="/documents/{{ .Data.ID }}/edit"
|
||||
class="text-black dark:text-white border-b dark:border-black">
|
||||
<dl>
|
||||
<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>
|
||||
<dd class="mt-1 text-sm sm:mt-0 sm:col-span-2">
|
||||
<img class="rounded object-fill h-32"
|
||||
src="https://books.google.com/books/content/images/frontcover/{{ .Metadata.ID }}?fife=w480-h690" />
|
||||
</dd>
|
||||
</div>
|
||||
<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>
|
||||
<dd class="mt-1 text-sm sm:mt-0 sm:col-span-2">
|
||||
{{ or .Metadata.Title "N/A" }}
|
||||
</dd>
|
||||
</div>
|
||||
<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>
|
||||
<dd class="mt-1 text-sm sm:mt-0 sm:col-span-2">
|
||||
{{ or .Metadata.Author "N/A" }}
|
||||
</dd>
|
||||
</div>
|
||||
<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>
|
||||
<dd class="mt-1 text-sm sm:mt-0 sm:col-span-2">
|
||||
{{ or .Metadata.ISBN10 "N/A" }}
|
||||
</dd>
|
||||
</div>
|
||||
<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>
|
||||
<dd class="mt-1 text-sm sm:mt-0 sm:col-span-2">
|
||||
{{ or .Metadata.ISBN13 "N/A" }}
|
||||
</dd>
|
||||
</div>
|
||||
<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>
|
||||
<dd class="max-h-[10em] overflow-scroll mt-1 sm:mt-0 sm:col-span-2">
|
||||
{{ or .Metadata.Description "N/A" }}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<div class="hidden">
|
||||
<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"
|
||||
name="description"
|
||||
value="{{ .Metadata.Description }}">
|
||||
<input type="text"
|
||||
id="isbn_10"
|
||||
name="isbn_10"
|
||||
value="{{ .Metadata.ISBN10 }}">
|
||||
<input type="text"
|
||||
id="isbn_13"
|
||||
name="isbn_13"
|
||||
value="{{ .Metadata.ISBN13 }}">
|
||||
<input type="text"
|
||||
id="cover_gbid"
|
||||
name="cover_gbid"
|
||||
value="{{ .Metadata.ID }}">
|
||||
</div>
|
||||
</form>
|
||||
<div class="flex justify-end gap-4 m-4">
|
||||
<a href="/documents/{{ .Data.ID }}"
|
||||
class="w-24 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"
|
||||
type="submit">Cancel</a>
|
||||
<button form="metadata-save"
|
||||
class="w-24 font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
|
||||
type="submit">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<style>
|
||||
.css-button:checked+div {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.css-button+div {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
{{ end }}
|
||||
@ -1,141 +0,0 @@
|
||||
{{template "base" .}}
|
||||
|
||||
{{define "title"}}Documents{{end}}
|
||||
|
||||
{{define "header"}}
|
||||
<a href="./documents">Documents</a>
|
||||
{{end}}
|
||||
|
||||
{{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"
|
||||
>
|
||||
<form class="flex gap-4 flex-col lg:flex-row" action="./documents" method="GET">
|
||||
<div class="flex flex-col w-full grow">
|
||||
<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"
|
||||
>
|
||||
{{ template "svg/search2" (dict "Size" 15) }}
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
id="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"
|
||||
placeholder="Search Author / Title"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
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">Search</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{{range $doc := .Data }}
|
||||
<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="min-w-fit my-auto h-48 relative">
|
||||
<a href="./documents/{{$doc.ID}}">
|
||||
<img class="rounded object-cover h-full" src="./documents/{{$doc.ID}}/cover"></img>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex flex-col justify-around dark:text-white w-full text-sm">
|
||||
<div class="inline-flex shrink-0 items-center">
|
||||
<div>
|
||||
<p class="text-gray-400">Title</p>
|
||||
<p class="font-medium">
|
||||
{{ or $doc.Title "Unknown" }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-flex shrink-0 items-center">
|
||||
<div>
|
||||
<p class="text-gray-400">Author</p>
|
||||
<p class="font-medium">
|
||||
{{ or $doc.Author "Unknown" }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-flex shrink-0 items-center">
|
||||
<div>
|
||||
<p class="text-gray-400">Progress</p>
|
||||
<p class="font-medium">
|
||||
{{ $doc.Percentage }}%
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-flex shrink-0 items-center">
|
||||
<div>
|
||||
<p class="text-gray-400">Time Read</p>
|
||||
<p class="font-medium">
|
||||
{{ niceSeconds $doc.TotalTimeSeconds }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute flex flex-col gap-2 right-4 bottom-4 text-gray-500 dark:text-gray-400">
|
||||
<a href="./activity?document={{ $doc.ID }}">{{ template "svg/activity" }}</a>
|
||||
|
||||
{{ if $doc.Filepath }}
|
||||
<a href="./documents/{{$doc.ID}}/file">{{ template "svg/download" }}</a>
|
||||
{{ else }}
|
||||
{{ template "svg/download" (dict "Disabled" true) }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<div class="w-full flex gap-4 justify-center mt-4 text-black dark:text-white">
|
||||
{{ if .PreviousPage }}
|
||||
<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 }}
|
||||
|
||||
{{ if .NextPage }}
|
||||
<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 }}
|
||||
</div>
|
||||
|
||||
<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"/>
|
||||
<div class="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" action="./documents" 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" type="submit">Upload File</button>
|
||||
</form>
|
||||
<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">Cancel Upload</div>
|
||||
</label>
|
||||
</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"
|
||||
for="upload-file-button"
|
||||
>
|
||||
{{ template "svg/upload" (dict "Size" 34) }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.css-button:checked + div {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.css-button + div {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.css-button:checked + div + label {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
{{end}}
|
||||
120
templates/pages/documents.tmpl
Normal file
120
templates/pages/documents.tmpl
Normal file
@ -0,0 +1,120 @@
|
||||
{{ template "base" . }}
|
||||
{{ define "title" }}Documents{{ end }}
|
||||
{{ define "header" }}<a href="./documents">Documents</a>{{ end }}
|
||||
{{ 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">
|
||||
<form class="flex gap-4 flex-col lg:flex-row"
|
||||
action="./documents"
|
||||
method="GET">
|
||||
<div class="flex flex-col w-full grow">
|
||||
<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">
|
||||
{{ template "svg/search2" (dict "Size" 15) }}
|
||||
</span>
|
||||
<input type="text"
|
||||
id="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"
|
||||
placeholder="Search Author / Title" />
|
||||
</div>
|
||||
</div>
|
||||
<button 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">Search</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{{ range $doc := .Data }}
|
||||
<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="min-w-fit my-auto h-48 relative">
|
||||
<a href="./documents/{{$doc.ID}}">
|
||||
<img class="rounded object-cover h-full"
|
||||
src="./documents/{{$doc.ID}}/cover" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex flex-col justify-around dark:text-white w-full text-sm">
|
||||
<div class="inline-flex shrink-0 items-center">
|
||||
<div>
|
||||
<p class="text-gray-400">Title</p>
|
||||
<p class="font-medium">{{ or $doc.Title "Unknown" }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-flex shrink-0 items-center">
|
||||
<div>
|
||||
<p class="text-gray-400">Author</p>
|
||||
<p class="font-medium">{{ or $doc.Author "Unknown" }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-flex shrink-0 items-center">
|
||||
<div>
|
||||
<p class="text-gray-400">Progress</p>
|
||||
<p class="font-medium">{{ $doc.Percentage }}%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-flex shrink-0 items-center">
|
||||
<div>
|
||||
<p class="text-gray-400">Time Read</p>
|
||||
<p class="font-medium">{{ niceSeconds $doc.TotalTimeSeconds }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute flex flex-col gap-2 right-4 bottom-4 text-gray-500 dark:text-gray-400">
|
||||
<a href="./activity?document={{ $doc.ID }}">{{ template "svg/activity" }}</a>
|
||||
{{ if $doc.Filepath }}
|
||||
<a href="./documents/{{$doc.ID}}/file">{{ template "svg/download" }}</a>
|
||||
{{ else }}
|
||||
{{ template "svg/download" (dict "Disabled" true) }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="w-full flex gap-4 justify-center mt-4 text-black dark:text-white">
|
||||
{{ if .PreviousPage }}
|
||||
<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 }}
|
||||
{{ if .NextPage }}
|
||||
<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 }}
|
||||
</div>
|
||||
<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" />
|
||||
<div class="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"
|
||||
action="./documents"
|
||||
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"
|
||||
type="submit">Upload File</button>
|
||||
</form>
|
||||
<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">
|
||||
Cancel Upload
|
||||
</div>
|
||||
</label>
|
||||
</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"
|
||||
for="upload-file-button">{{ template "svg/upload" (dict "Size" 34) }}</label>
|
||||
</div>
|
||||
<style>
|
||||
.css-button:checked+div {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.css-button+div {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.css-button:checked+div+label {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
{{ end }}
|
||||
@ -1,56 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=0.90, user-scalable=no, viewport-fit=cover"
|
||||
/>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta
|
||||
name="apple-mobile-web-app-status-bar-style"
|
||||
content="black-translucent"
|
||||
/>
|
||||
<meta
|
||||
name="theme-color"
|
||||
content="#F3F4F6"
|
||||
media="(prefers-color-scheme: light)"
|
||||
/>
|
||||
<meta
|
||||
name="theme-color"
|
||||
content="#1F2937"
|
||||
media="(prefers-color-scheme: dark)"
|
||||
/>
|
||||
|
||||
<title>AnthoLume - Error</title>
|
||||
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<link rel="stylesheet" href="/assets/style.css" />
|
||||
</head>
|
||||
<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="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>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
31
templates/pages/error.tmpl
Normal file
31
templates/pages/error.tmpl
Normal file
@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=0.90, user-scalable=no, viewport-fit=cover" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style"
|
||||
content="black-translucent" />
|
||||
<meta name="theme-color"
|
||||
content="#F3F4F6"
|
||||
media="(prefers-color-scheme: light)" />
|
||||
<meta name="theme-color"
|
||||
content="#1F2937"
|
||||
media="(prefers-color-scheme: dark)" />
|
||||
<title>AnthoLume - Error</title>
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<link rel="stylesheet" href="/assets/style.css" />
|
||||
</head>
|
||||
<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="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>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,243 +0,0 @@
|
||||
{{template "base" .}}
|
||||
{{define "title"}}Home{{end}}
|
||||
{{define "header"}}<a href="./">Home</a>{{end}}
|
||||
|
||||
{{define "content"}}
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="w-full">
|
||||
<div
|
||||
class="relative w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded"
|
||||
>
|
||||
<p
|
||||
class="absolute top-3 text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500"
|
||||
>
|
||||
Daily Read Totals
|
||||
</p>
|
||||
|
||||
{{ $data := (getSVGGraphData .Data.GraphData 800 70 )}}
|
||||
<svg
|
||||
viewBox="26 0 755 {{ $data.Height }}"
|
||||
preserveAspectRatio="none"
|
||||
width="100%"
|
||||
height="4em"
|
||||
>
|
||||
<!-- Bezier Line Graph -->
|
||||
<path
|
||||
fill="#316BBE"
|
||||
fill-opacity="0.5"
|
||||
stroke="none"
|
||||
d="{{ $data.BezierPath }} {{ $data.BezierFill }}"
|
||||
/>
|
||||
|
||||
<path fill="none" stroke="#316BBE" d="{{ $data.BezierPath }}" />
|
||||
|
||||
{{ range $index, $item := $data.LinePoints }}
|
||||
<line
|
||||
class="hover-trigger"
|
||||
stroke="black"
|
||||
stroke-opacity="0.0"
|
||||
stroke-width="{{ $data.Offset }}"
|
||||
x1="{{ $item.X }}"
|
||||
x2="{{ $item.X }}"
|
||||
y1="0"
|
||||
y2="{{ $data.Height }}"
|
||||
></line>
|
||||
<g class="hover-item">
|
||||
<line
|
||||
class="text-black dark:text-white"
|
||||
stroke-opacity="0.2"
|
||||
x1="{{ $item.X }}"
|
||||
x2="{{ $item.X }}"
|
||||
y1="30"
|
||||
y2="{{ $data.Height }}"
|
||||
></line>
|
||||
<text
|
||||
class="text-black dark:text-white"
|
||||
alignment-baseline="middle"
|
||||
transform="translate({{ $item.X }}, 5) translate(-30, 8)"
|
||||
font-size="10"
|
||||
>
|
||||
{{ (index $.Data.GraphData $index).Date }}
|
||||
</text>
|
||||
<text
|
||||
class="text-black dark:text-white"
|
||||
alignment-baseline="middle"
|
||||
transform="translate({{ $item.X }}, 25) translate(-30, -2)"
|
||||
font-size="10"
|
||||
>
|
||||
{{ (index $.Data.GraphData $index).MinutesRead }} minutes
|
||||
</text>
|
||||
</g>
|
||||
{{ end }}
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
/* Interactive Hover */
|
||||
.hover-item {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
.hover-trigger:hover + .hover-item,
|
||||
.hover-item:hover {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* SVG Component Styling */
|
||||
svg text.text-black {
|
||||
fill: black;
|
||||
}
|
||||
svg line.text-black {
|
||||
stroke: black;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
svg text.dark\:text-white {
|
||||
fill: white;
|
||||
}
|
||||
svg line.dark\:text-white {
|
||||
stroke: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 md:grid-cols-4">
|
||||
<a href="./documents" class="w-full">
|
||||
<div
|
||||
class="flex gap-4 w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col justify-around dark:text-white w-full text-sm"
|
||||
>
|
||||
<p class="text-2xl font-bold text-black dark:text-white">
|
||||
{{ .Data.DatabaseInfo.DocumentsSize }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-400">Documents</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="./activity" class="w-full">
|
||||
<div
|
||||
class="flex gap-4 w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col justify-around dark:text-white w-full text-sm"
|
||||
>
|
||||
<p class="text-2xl font-bold text-black dark:text-white">
|
||||
{{ .Data.DatabaseInfo.ActivitySize }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-400">Activity Records</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="./progress" class="w-full">
|
||||
<div
|
||||
class="flex gap-4 w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col justify-around dark:text-white w-full text-sm"
|
||||
>
|
||||
<p class="text-2xl font-bold text-black dark:text-white">
|
||||
{{ .Data.DatabaseInfo.ProgressSize }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-400">Progress Records</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="w-full">
|
||||
<div
|
||||
class="flex gap-4 w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col justify-around dark:text-white w-full text-sm"
|
||||
>
|
||||
<p class="text-2xl font-bold text-black dark:text-white">
|
||||
{{ .Data.DatabaseInfo.DevicesSize }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-400">Devices</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
{{ range $item := .Data.Streaks }}
|
||||
<div class="w-full">
|
||||
<div
|
||||
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 $item.Window "WEEK" }}
|
||||
Weekly Read Streak
|
||||
{{ else }}
|
||||
Daily Read Streak
|
||||
{{ end }}
|
||||
</p>
|
||||
<div class="flex items-end my-6 space-x-2">
|
||||
<p class="text-5xl font-bold text-black dark:text-white">
|
||||
{{ $item.CurrentStreak }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="dark:text-white">
|
||||
<div
|
||||
class="flex items-center justify-between pb-2 mb-2 text-sm border-b border-gray-200"
|
||||
>
|
||||
<div>
|
||||
<p>
|
||||
{{ if eq $item.Window "WEEK" }} Current Weekly Streak {{ else }}
|
||||
Current Daily Streak {{ end }}
|
||||
</p>
|
||||
<div class="flex items-end text-sm text-gray-400">
|
||||
{{ $item.CurrentStreakStartDate }} ➞ {{ $item.CurrentStreakEndDate }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-end font-bold">{{ $item.CurrentStreak }}</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pb-2 mb-2 text-sm">
|
||||
<div>
|
||||
<p>
|
||||
{{ if eq $item.Window "WEEK" }}
|
||||
Best Weekly Streak
|
||||
{{ else }}
|
||||
Best Daily Streak
|
||||
{{ end }}
|
||||
</p>
|
||||
<div class="flex items-end text-sm text-gray-400">
|
||||
{{ $item.MaxStreakStartDate }} ➞ {{ $item.MaxStreakEndDate }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-end font-bold">{{ $item.MaxStreak }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{{ template "component/leaderboard-card" (
|
||||
dict
|
||||
"Name" "WPM"
|
||||
"Data" .Data.UserStatistics.WPM
|
||||
)
|
||||
}}
|
||||
|
||||
{{ template "component/leaderboard-card" (
|
||||
dict
|
||||
"Name" "Duration"
|
||||
"Data" .Data.UserStatistics.Duration
|
||||
)
|
||||
}}
|
||||
|
||||
{{ template "component/leaderboard-card" (
|
||||
dict
|
||||
"Name" "Words"
|
||||
"Data" .Data.UserStatistics.Words
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
160
templates/pages/home.tmpl
Normal file
160
templates/pages/home.tmpl
Normal file
@ -0,0 +1,160 @@
|
||||
{{ template "base" . }}
|
||||
{{ define "title" }}Home{{ end }}
|
||||
{{ define "header" }}<a href="./">Home</a>{{ end }}
|
||||
{{ define "content" }}
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="w-full">
|
||||
<div class="relative w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded">
|
||||
<p class="absolute top-3 text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500">
|
||||
Daily Read Totals
|
||||
</p>
|
||||
{{ $data := (getSVGGraphData .Data.GraphData 800 70 )}}
|
||||
<svg viewBox="26 0 755 {{ $data.Height }}"
|
||||
preserveAspectRatio="none"
|
||||
width="100%"
|
||||
height="4em">
|
||||
<!-- Bezier Line Graph -->
|
||||
<path fill="#316BBE" fill-opacity="0.5" stroke="none" d="{{ $data.BezierPath }} {{ $data.BezierFill }}" />
|
||||
<path fill="none" stroke="#316BBE" d="{{ $data.BezierPath }}" />
|
||||
{{ range $index, $item := $data.LinePoints }}
|
||||
<line class="hover-trigger" stroke="black" stroke-opacity="0.0" stroke-width="{{ $data.Offset }}" x1="{{ $item.X }}" x2="{{ $item.X }}" y1="0" y2="{{ $data.Height }}"></line>
|
||||
<g class="hover-item">
|
||||
<line class="text-black dark:text-white" stroke-opacity="0.2" x1="{{ $item.X }}" x2="{{ $item.X }}" y1="30" y2="{{ $data.Height }}"></line>
|
||||
<text class="text-black dark:text-white" alignment-baseline="middle" transform="translate({{ $item.X }}, 5) translate(-30, 8)" font-size="10">
|
||||
{{ (index $.Data.GraphData $index).Date }}
|
||||
</text>
|
||||
<text class="text-black dark:text-white" alignment-baseline="middle" transform="translate({{ $item.X }}, 25) translate(-30, -2)" font-size="10">
|
||||
{{ (index $.Data.GraphData $index).MinutesRead }} minutes
|
||||
</text>
|
||||
</g>
|
||||
{{ end }}
|
||||
</svg>
|
||||
<style>
|
||||
/* Interactive Hover */
|
||||
.hover-item {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hover-trigger:hover+.hover-item,
|
||||
.hover-item:hover {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* SVG Component Styling */
|
||||
svg text.text-black {
|
||||
fill: black;
|
||||
}
|
||||
|
||||
svg line.text-black {
|
||||
stroke: black;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
svg text.dark\:text-white {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
svg line.dark\:text-white {
|
||||
stroke: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4 md:grid-cols-4">
|
||||
<a href="./documents" class="w-full">
|
||||
<div class="flex gap-4 w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded">
|
||||
<div class="flex flex-col justify-around dark:text-white w-full text-sm">
|
||||
<p class="text-2xl font-bold text-black dark:text-white">{{ .Data.DatabaseInfo.DocumentsSize }}</p>
|
||||
<p class="text-sm text-gray-400">Documents</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="./activity" class="w-full">
|
||||
<div class="flex gap-4 w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded">
|
||||
<div class="flex flex-col justify-around dark:text-white w-full text-sm">
|
||||
<p class="text-2xl font-bold text-black dark:text-white">{{ .Data.DatabaseInfo.ActivitySize }}</p>
|
||||
<p class="text-sm text-gray-400">Activity Records</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="./progress" class="w-full">
|
||||
<div class="flex gap-4 w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded">
|
||||
<div class="flex flex-col justify-around dark:text-white w-full text-sm">
|
||||
<p class="text-2xl font-bold text-black dark:text-white">{{ .Data.DatabaseInfo.ProgressSize }}</p>
|
||||
<p class="text-sm text-gray-400">Progress Records</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="w-full">
|
||||
<div class="flex gap-4 w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded">
|
||||
<div class="flex flex-col justify-around dark:text-white w-full text-sm">
|
||||
<p class="text-2xl font-bold text-black dark:text-white">{{ .Data.DatabaseInfo.DevicesSize }}</p>
|
||||
<p class="text-sm text-gray-400">Devices</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
{{ range $item := .Data.Streaks }}
|
||||
<div class="w-full">
|
||||
<div 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 $item.Window "WEEK" }}
|
||||
Weekly Read Streak
|
||||
{{ else }}
|
||||
Daily Read Streak
|
||||
{{ end }}
|
||||
</p>
|
||||
<div class="flex items-end my-6 space-x-2">
|
||||
<p class="text-5xl font-bold text-black dark:text-white">{{ $item.CurrentStreak }}</p>
|
||||
</div>
|
||||
<div class="dark:text-white">
|
||||
<div class="flex items-center justify-between pb-2 mb-2 text-sm border-b border-gray-200">
|
||||
<div>
|
||||
<p>
|
||||
{{ if eq $item.Window "WEEK" }} Current Weekly Streak {{ else }}
|
||||
Current Daily Streak {{ end }}
|
||||
</p>
|
||||
<div class="flex items-end text-sm text-gray-400">
|
||||
{{ $item.CurrentStreakStartDate }} ➞ {{ $item.CurrentStreakEndDate }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-end font-bold">{{ $item.CurrentStreak }}</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pb-2 mb-2 text-sm">
|
||||
<div>
|
||||
<p>
|
||||
{{ if eq $item.Window "WEEK" }}
|
||||
Best Weekly Streak
|
||||
{{ else }}
|
||||
Best Daily Streak
|
||||
{{ end }}
|
||||
</p>
|
||||
<div class="flex items-end text-sm text-gray-400">{{ $item.MaxStreakStartDate }} ➞ {{ $item.MaxStreakEndDate }}</div>
|
||||
</div>
|
||||
<div class="flex items-end font-bold">{{ $item.MaxStreak }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{{ template "component/leaderboard-card" (dict
|
||||
"Name" "WPM"
|
||||
"Data" .Data.UserStatistics.WPM
|
||||
)}}
|
||||
{{ template "component/leaderboard-card" (dict
|
||||
"Name" "Duration"
|
||||
"Data" .Data.UserStatistics.Duration
|
||||
)}}
|
||||
{{ template "component/leaderboard-card" (dict
|
||||
"Name" "Words"
|
||||
"Data" .Data.UserStatistics.Words
|
||||
)}}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
@ -1,211 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=0.90, user-scalable=no, viewport-fit=cover"
|
||||
/>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta
|
||||
name="apple-mobile-web-app-status-bar-style"
|
||||
content="black-translucent"
|
||||
/>
|
||||
<meta
|
||||
name="theme-color"
|
||||
content="#F3F4F6"
|
||||
media="(prefers-color-scheme: light)"
|
||||
/>
|
||||
<meta
|
||||
name="theme-color"
|
||||
content="#1F2937"
|
||||
media="(prefers-color-scheme: dark)"
|
||||
/>
|
||||
|
||||
<title>AnthoLume - {{if .Register}}Register{{else}}Login{{end}}</title>
|
||||
|
||||
<link rel="manifest" href="./manifest.json" />
|
||||
<link rel="stylesheet" href="./assets/style.css" />
|
||||
|
||||
<!-- Service Worker / Offline Cache Flush -->
|
||||
<script src="/assets/lib/idb-keyval.min.js"></script>
|
||||
<script src="/assets/common.js"></script>
|
||||
<script src="/assets/index.js"></script>
|
||||
|
||||
<style>
|
||||
/* ----------------------------- */
|
||||
/* -------- PWA Styling -------- */
|
||||
/* ----------------------------- */
|
||||
html,
|
||||
body {
|
||||
overscroll-behavior-y: none;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
html {
|
||||
height: calc(100% + env(safe-area-inset-bottom));
|
||||
padding: env(safe-area-inset-top) env(safe-area-inset-right) 0
|
||||
env(safe-area-inset-left);
|
||||
}
|
||||
|
||||
/* No Scrollbar - IE, Edge, Firefox */
|
||||
* {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
/* No Scrollbar - WebKit */
|
||||
*::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-100 dark:bg-gray-800 dark:text-white">
|
||||
<div class="flex flex-wrap w-full">
|
||||
<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"
|
||||
>
|
||||
<p class="text-3xl text-center">Welcome.</p>
|
||||
<form
|
||||
class="flex flex-col pt-3 md:pt-8"
|
||||
{{if
|
||||
.Register}}action="./register"
|
||||
{{else}}action="./login"
|
||||
{{end}}
|
||||
method="POST"
|
||||
>
|
||||
<div class="flex flex-col pt-4">
|
||||
<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"
|
||||
>
|
||||
{{ template "svg/user" (dict "Size" 15) }}
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
id="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"
|
||||
placeholder="Username"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col pt-4 mb-12">
|
||||
<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"
|
||||
>
|
||||
{{ template "svg/password" (dict "Size" 15) }}
|
||||
</span>
|
||||
<input
|
||||
type="password"
|
||||
id="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"
|
||||
placeholder="Password"
|
||||
/>
|
||||
<span class="absolute -bottom-5 text-red-400 text-xs"
|
||||
>{{ .Error }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
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}}
|
||||
<span class="w-full"> Register </span>
|
||||
{{else}}
|
||||
<span class="w-full"> Submit </span>
|
||||
{{end}}
|
||||
</button>
|
||||
</form>
|
||||
<div class="pt-12 pb-12 text-center">
|
||||
{{ if .Config.RegistrationEnabled }} {{ if .Register }}
|
||||
<p>
|
||||
Trying to login?
|
||||
<a href="./login" class="font-semibold underline">
|
||||
Login here.
|
||||
</a>
|
||||
</p>
|
||||
{{else}}
|
||||
<p>
|
||||
Don't have an account?
|
||||
<a href="./register" class="font-semibold underline">
|
||||
Register here.
|
||||
</a>
|
||||
</p>
|
||||
{{end}} {{ end }}
|
||||
<p class="mt-4">
|
||||
<a href="./local" class="font-semibold underline">
|
||||
Offline / Local Mode
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="hidden image-fader w-1/2 shadow-2xl h-screen relative md:block"
|
||||
>
|
||||
<img
|
||||
class="w-full h-screen object-cover ease-in-out top-0 left-0"
|
||||
src="/assets/images/book1.jpg"
|
||||
/>
|
||||
<img
|
||||
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>
|
||||
<style>
|
||||
.image-fader img {
|
||||
position: absolute;
|
||||
animation-name: imagefade;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 60s;
|
||||
}
|
||||
|
||||
@keyframes imagefade {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
17% {
|
||||
opacity: 1;
|
||||
}
|
||||
25% {
|
||||
opacity: 0;
|
||||
}
|
||||
92% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.image-fader img:nth-of-type(1) {
|
||||
animation-delay: 45s;
|
||||
}
|
||||
.image-fader img:nth-of-type(2) {
|
||||
animation-delay: 30s;
|
||||
}
|
||||
.image-fader img:nth-of-type(3) {
|
||||
animation-delay: 15s;
|
||||
}
|
||||
.image-fader img:nth-of-type(4) {
|
||||
animation-delay: 0;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<!-- https://stackoverflow.com/questions/60748752/change-an-image-after-some-time -->
|
||||
173
templates/pages/login.tmpl
Normal file
173
templates/pages/login.tmpl
Normal file
@ -0,0 +1,173 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=0.90, user-scalable=no, viewport-fit=cover" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style"
|
||||
content="black-translucent" />
|
||||
<meta name="theme-color"
|
||||
content="#F3F4F6"
|
||||
media="(prefers-color-scheme: light)" />
|
||||
<meta name="theme-color"
|
||||
content="#1F2937"
|
||||
media="(prefers-color-scheme: dark)" />
|
||||
<title>AnthoLume - {{ if .Register }}Register{{ else }}Login{{ end }}</title>
|
||||
<link rel="manifest" href="./manifest.json" />
|
||||
<link rel="stylesheet" href="./assets/style.css" />
|
||||
<!-- Service Worker / Offline Cache Flush -->
|
||||
<script src="/assets/lib/idb-keyval.min.js"></script>
|
||||
<script src="/assets/common.js"></script>
|
||||
<script src="/assets/index.js"></script>
|
||||
<style>
|
||||
/* ----------------------------- */
|
||||
/* -------- PWA Styling -------- */
|
||||
/* ----------------------------- */
|
||||
html,
|
||||
body {
|
||||
overscroll-behavior-y: none;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
html {
|
||||
height: calc(100% + env(safe-area-inset-bottom));
|
||||
padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
|
||||
}
|
||||
|
||||
/* No Scrollbar - IE, Edge, Firefox */
|
||||
* {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
/* No Scrollbar - WebKit */
|
||||
*::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-100 dark:bg-gray-800 dark:text-white">
|
||||
<div class="flex flex-wrap w-full">
|
||||
<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">
|
||||
<p class="text-3xl text-center">Welcome.</p>
|
||||
<form
|
||||
class="flex flex-col pt-3 md:pt-8"
|
||||
{{if
|
||||
.Register}}action="./register"
|
||||
{{ else }}action="./login"
|
||||
{{ end }}
|
||||
method="POST"
|
||||
>
|
||||
<div class="flex flex-col pt-4">
|
||||
<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">
|
||||
{{ template "svg/user" (dict "Size" 15) }}
|
||||
</span>
|
||||
<input type="text"
|
||||
id="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"
|
||||
placeholder="Username" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col pt-4 mb-12">
|
||||
<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">
|
||||
{{ template "svg/password" (dict "Size" 15) }}
|
||||
</span>
|
||||
<input type="password"
|
||||
id="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"
|
||||
placeholder="Password" />
|
||||
<span class="absolute -bottom-5 text-red-400 text-xs">{{ .Error }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button 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 }}
|
||||
<span class="w-full">Register</span>
|
||||
{{ else }}
|
||||
<span class="w-full">Submit</span>
|
||||
{{ end }}
|
||||
</button>
|
||||
</form>
|
||||
<div class="pt-12 pb-12 text-center">
|
||||
{{ if .Config.RegistrationEnabled }} {{ if .Register }}
|
||||
<p>
|
||||
Trying to login?
|
||||
<a href="./login" class="font-semibold underline">Login here.</a>
|
||||
</p>
|
||||
{{ else }}
|
||||
<p>
|
||||
Don't have an account?
|
||||
<a href="./register" class="font-semibold underline">Register here.</a>
|
||||
</p>
|
||||
{{ end }} {{ end }}
|
||||
<p class="mt-4">
|
||||
<a href="./local" class="font-semibold underline">Offline / Local Mode</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden image-fader w-1/2 shadow-2xl h-screen relative md:block">
|
||||
<img class="w-full h-screen object-cover ease-in-out top-0 left-0"
|
||||
src="/assets/images/book1.jpg" />
|
||||
<img 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>
|
||||
<style>
|
||||
.image-fader img {
|
||||
position: absolute;
|
||||
animation-name: imagefade;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 60s;
|
||||
}
|
||||
|
||||
@keyframes imagefade {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
17% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
25% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
92% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.image-fader img:nth-of-type(1) {
|
||||
animation-delay: 45s;
|
||||
}
|
||||
|
||||
.image-fader img:nth-of-type(2) {
|
||||
animation-delay: 30s;
|
||||
}
|
||||
|
||||
.image-fader img:nth-of-type(3) {
|
||||
animation-delay: 15s;
|
||||
}
|
||||
|
||||
.image-fader img:nth-of-type(4) {
|
||||
animation-delay: 0;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,49 +0,0 @@
|
||||
{{template "base" .}} {{define "title"}}Progress{{end}} {{define "header"}}
|
||||
<a href="./progress">Progress</a>
|
||||
{{end}} {{define "content"}}
|
||||
<div class="overflow-x-auto">
|
||||
<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">
|
||||
<thead class="text-gray-800 dark:text-gray-400">
|
||||
<tr>
|
||||
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">
|
||||
Document
|
||||
</th>
|
||||
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">
|
||||
Device
|
||||
</th>
|
||||
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">
|
||||
Percent
|
||||
</th>
|
||||
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">
|
||||
Time
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-black dark:text-white">
|
||||
{{ if not .Data }}
|
||||
<tr>
|
||||
<td class="text-center p-3" colspan="4">No Results</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
{{range $progress := .Data }}
|
||||
<tr>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<a href="./documents/{{ $progress.DocumentID }}">{{ $progress.Author }} - {{ $progress.Title }}</p></a>
|
||||
</td>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<p>{{ $progress.DeviceName }}</p>
|
||||
</td>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<p>{{ $progress.Percentage }}%</p>
|
||||
</td>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<p>{{ $progress.CreatedAt }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
44
templates/pages/progress.tmpl
Normal file
44
templates/pages/progress.tmpl
Normal file
@ -0,0 +1,44 @@
|
||||
{{ template "base" . }}
|
||||
{{ define "title" }}Progress{{ end }}
|
||||
{{ define "header" }}<a href="./progress">Progress</a>{{ end }}
|
||||
{{ define "content" }}
|
||||
<div class="overflow-x-auto">
|
||||
<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">
|
||||
<thead class="text-gray-800 dark:text-gray-400">
|
||||
<tr>
|
||||
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Document</th>
|
||||
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Device</th>
|
||||
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Percent</th>
|
||||
<th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-black dark:text-white">
|
||||
{{ if not .Data }}
|
||||
<tr>
|
||||
<td class="text-center p-3" colspan="4">No Results</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
{{ range $progress := .Data }}
|
||||
<tr>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<a href="./documents/{{ $progress.DocumentID }}">{{ $progress.Author }} - {{ $progress.Title }}
|
||||
</p>
|
||||
</a>
|
||||
</td>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<p>{{ $progress.DeviceName }}</p>
|
||||
</td>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<p>{{ $progress.Percentage }}%</p>
|
||||
</td>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<p>{{ $progress.CreatedAt }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
@ -1,155 +0,0 @@
|
||||
{{template "base" .}} {{define "title"}}Search{{end}} {{define "header"}}
|
||||
<a href="./search">Search</a>
|
||||
{{end}} {{define "content"}}
|
||||
<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-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">
|
||||
<div class="flex flex-col w-full grow">
|
||||
<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"
|
||||
>
|
||||
{{ template "svg/search2" (dict "Size" 15) }}
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
id="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"
|
||||
placeholder="Query"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<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"
|
||||
>
|
||||
{{ template "svg/documents" (dict "Size" 15) }}
|
||||
</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"
|
||||
id="source"
|
||||
name="source"
|
||||
>
|
||||
<option value="Annas Archive">Annas Archive</option>
|
||||
<option value="LibGen Fiction">LibGen Fiction</option>
|
||||
<option value="LibGen Non-fiction">LibGen Non-fiction</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button
|
||||
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">Search</span>
|
||||
</button>
|
||||
</form>
|
||||
{{ if .SearchErrorMessage }}
|
||||
<span class="text-red-400 text-xs">{{ .SearchErrorMessage }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<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"
|
||||
>
|
||||
<thead class="text-gray-800 dark:text-gray-400">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="w-12 p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
|
||||
></th>
|
||||
<th
|
||||
scope="col"
|
||||
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
|
||||
>
|
||||
Document
|
||||
</th>
|
||||
<th
|
||||
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
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-black dark:text-white">
|
||||
{{ if not .Data }}
|
||||
<tr>
|
||||
<td class="text-center p-3" colspan="6">No Results</td>
|
||||
</tr>
|
||||
{{ end }} {{range $item := .Data }}
|
||||
<tr>
|
||||
<td
|
||||
class="p-3 border-b border-gray-200 text-gray-500 dark:text-gray-500"
|
||||
>
|
||||
<form action="./search" method="POST">
|
||||
<input
|
||||
class="hidden"
|
||||
type="text"
|
||||
id="source"
|
||||
name="source"
|
||||
value="{{ $.Source }}"
|
||||
/>
|
||||
<input
|
||||
class="hidden"
|
||||
type="text"
|
||||
id="title"
|
||||
name="title"
|
||||
value="{{ $item.Title }}"
|
||||
/>
|
||||
<input
|
||||
class="hidden"
|
||||
type="text"
|
||||
id="author"
|
||||
name="author"
|
||||
value="{{ $item.Author }}"
|
||||
/>
|
||||
<button name="id" value="{{ $item.ID }}">
|
||||
{{ template "svg/download" }}
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
{{ $item.Author }} - {{ $item.Title }}
|
||||
</td>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<p>{{ or $item.Series "N/A" }}</p>
|
||||
</td>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<p>{{ or $item.FileType "N/A" }}</p>
|
||||
</td>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<p>{{ or $item.FileSize "N/A" }}</p>
|
||||
</td>
|
||||
<td class="hidden md:table-cell p-3 border-b border-gray-200">
|
||||
<p>{{ or $item.UploadDate "N/A" }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
109
templates/pages/search.tmpl
Normal file
109
templates/pages/search.tmpl
Normal file
@ -0,0 +1,109 @@
|
||||
{{ template "base" . }}
|
||||
{{ define "title" }}Search{{ end }}
|
||||
{{ define "header" }}<a href="./search">Search</a>{{ end }}
|
||||
{{ define "content" }}
|
||||
<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-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">
|
||||
<div class="flex flex-col w-full grow">
|
||||
<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">
|
||||
{{ template "svg/search2" (dict "Size" 15) }}
|
||||
</span>
|
||||
<input type="text"
|
||||
id="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"
|
||||
placeholder="Query" />
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
{{ template "svg/documents" (dict "Size" 15) }}
|
||||
</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"
|
||||
id="source"
|
||||
name="source">
|
||||
<option value="Annas Archive">Annas Archive</option>
|
||||
<option value="LibGen Fiction">LibGen Fiction</option>
|
||||
<option value="LibGen Non-fiction">LibGen Non-fiction</option>
|
||||
</select>
|
||||
</div>
|
||||
<button 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">Search</span>
|
||||
</button>
|
||||
</form>
|
||||
{{ if .SearchErrorMessage }}
|
||||
<span class="text-red-400 text-xs">{{ .SearchErrorMessage }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<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">
|
||||
<thead class="text-gray-800 dark:text-gray-400">
|
||||
<tr>
|
||||
<th scope="col"
|
||||
class="w-12 p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"></th>
|
||||
<th scope="col"
|
||||
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Document</th>
|
||||
<th 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
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-black dark:text-white">
|
||||
{{ if not .Data }}
|
||||
<tr>
|
||||
<td class="text-center p-3" colspan="6">No Results</td>
|
||||
</tr>
|
||||
{{ end }} {{ range $item := .Data }}
|
||||
<tr>
|
||||
<td class="p-3 border-b border-gray-200 text-gray-500 dark:text-gray-500">
|
||||
<form action="./search" method="POST">
|
||||
<input class="hidden"
|
||||
type="text"
|
||||
id="source"
|
||||
name="source"
|
||||
value="{{ $.Source }}" />
|
||||
<input class="hidden"
|
||||
type="text"
|
||||
id="title"
|
||||
name="title"
|
||||
value="{{ $item.Title }}" />
|
||||
<input class="hidden"
|
||||
type="text"
|
||||
id="author"
|
||||
name="author"
|
||||
value="{{ $item.Author }}" />
|
||||
<button name="id" value="{{ $item.ID }}">{{ template "svg/download" }}</button>
|
||||
</form>
|
||||
</td>
|
||||
<td class="p-3 border-b border-gray-200">{{ $item.Author }} - {{ $item.Title }}</td>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<p>{{ or $item.Series "N/A" }}</p>
|
||||
</td>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<p>{{ or $item.FileType "N/A" }}</p>
|
||||
</td>
|
||||
<td class="p-3 border-b border-gray-200">
|
||||
<p>{{ or $item.FileSize "N/A" }}</p>
|
||||
</td>
|
||||
<td class="hidden md:table-cell p-3 border-b border-gray-200">
|
||||
<p>{{ or $item.UploadDate "N/A" }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
@ -1,165 +0,0 @@
|
||||
{{template "base" .}} {{define "title"}}Settings{{end}} {{define "header"}}
|
||||
<a href="./settings">Settings</a>
|
||||
{{end}} {{define "content"}}
|
||||
<div class="w-full flex flex-col md:flex-row gap-4">
|
||||
<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"
|
||||
>
|
||||
{{ template "svg/user" (dict "Size" 60) }}
|
||||
<p class="text-lg">{{ .Authorization.UserName }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
>
|
||||
<p class="text-lg font-semibold mb-2">Change Password</p>
|
||||
<form
|
||||
class="flex gap-4 flex-col lg:flex-row"
|
||||
action="./settings"
|
||||
method="POST"
|
||||
>
|
||||
<div class="flex flex-col grow">
|
||||
<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"
|
||||
>
|
||||
{{ template "svg/password" (dict "Size" 15) }}
|
||||
</span>
|
||||
<input
|
||||
type="password"
|
||||
id="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"
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col grow">
|
||||
<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"
|
||||
>
|
||||
{{ template "svg/password" (dict "Size" 15) }}
|
||||
</span>
|
||||
<input
|
||||
type="password"
|
||||
id="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"
|
||||
placeholder="New Password"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
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">Submit</span>
|
||||
</button>
|
||||
</form>
|
||||
{{ if .PasswordErrorMessage }}
|
||||
<span class="text-red-400 text-xs">{{ .PasswordErrorMessage }}</span>
|
||||
{{ else if .PasswordMessage }}
|
||||
<span class="text-green-400 text-xs">{{ .PasswordMessage }}</span>
|
||||
{{ end }}
|
||||
</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"
|
||||
>
|
||||
<p class="text-lg font-semibold mb-2">Change Time Offset</p>
|
||||
<form
|
||||
class="flex gap-4 flex-col lg:flex-row"
|
||||
action="./settings"
|
||||
method="POST"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
{{ template "svg/clock" (dict "Size" 15) }}
|
||||
</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"
|
||||
id="time_offset"
|
||||
name="time_offset"
|
||||
>
|
||||
{{ range $item := getUTCOffsets }}
|
||||
<option
|
||||
{{ if (eq $item.Value $.Data.TimeOffset) }}selected{{ end }}
|
||||
value="{{ $item.Value }}"
|
||||
>
|
||||
{{ $item.Name }}
|
||||
</option>
|
||||
{{ end }}
|
||||
</select>
|
||||
</div>
|
||||
<button
|
||||
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">Submit</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{{ if .TimeOffsetErrorMessage }}
|
||||
<span class="text-red-400 text-xs">{{ .TimeOffsetErrorMessage }}</span>
|
||||
{{ else if .TimeOffsetMessage }}
|
||||
<span class="text-green-400 text-xs">{{ .TimeOffsetMessage }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<table class="min-w-full bg-white dark:bg-gray-700 text-sm">
|
||||
<thead class="text-gray-800 dark:text-gray-400">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="p-3 pl-0 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
|
||||
>
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
|
||||
>
|
||||
Last Sync
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
|
||||
>
|
||||
Created
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-black dark:text-white">
|
||||
{{ if not .Data.Devices }}
|
||||
<tr>
|
||||
<td class="text-center p-3" colspan="3">No Results</td>
|
||||
</tr>
|
||||
{{ end }} {{ range $device := .Data.Devices }}
|
||||
<tr>
|
||||
<td class="p-3 pl-0">
|
||||
<p>{{ $device.DeviceName }}</p>
|
||||
</td>
|
||||
<td class="p-3">
|
||||
<p>{{ $device.LastSynced }}</p>
|
||||
</td>
|
||||
<td class="p-3">
|
||||
<p>{{ $device.CreatedAt }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
124
templates/pages/settings.tmpl
Normal file
124
templates/pages/settings.tmpl
Normal file
@ -0,0 +1,124 @@
|
||||
{{ template "base" . }}
|
||||
{{ define "title" }}Settings{{ end }}
|
||||
{{ define "header" }}<a href="./settings">Settings</a>{{ end }}
|
||||
{{ define "content" }}
|
||||
<div class="w-full flex flex-col md:flex-row gap-4">
|
||||
<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">
|
||||
{{ template "svg/user" (dict "Size" 60) }}
|
||||
<p class="text-lg">{{ .Authorization.UserName }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<p class="text-lg font-semibold mb-2">Change Password</p>
|
||||
<form class="flex gap-4 flex-col lg:flex-row"
|
||||
action="./settings"
|
||||
method="POST">
|
||||
<div class="flex flex-col grow">
|
||||
<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">
|
||||
{{ template "svg/password" (dict "Size" 15) }}
|
||||
</span>
|
||||
<input type="password"
|
||||
id="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"
|
||||
placeholder="Password" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col grow">
|
||||
<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">
|
||||
{{ template "svg/password" (dict "Size" 15) }}
|
||||
</span>
|
||||
<input type="password"
|
||||
id="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"
|
||||
placeholder="New Password" />
|
||||
</div>
|
||||
</div>
|
||||
<button 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">Submit</span>
|
||||
</button>
|
||||
</form>
|
||||
{{ if .PasswordErrorMessage }}
|
||||
<span class="text-red-400 text-xs">{{ .PasswordErrorMessage }}</span>
|
||||
{{ else if .PasswordMessage }}
|
||||
<span class="text-green-400 text-xs">{{ .PasswordMessage }}</span>
|
||||
{{ end }}
|
||||
</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">
|
||||
<p class="text-lg font-semibold mb-2">Change Time Offset</p>
|
||||
<form class="flex gap-4 flex-col lg:flex-row"
|
||||
action="./settings"
|
||||
method="POST">
|
||||
<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">
|
||||
{{ template "svg/clock" (dict "Size" 15) }}
|
||||
</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"
|
||||
id="time_offset"
|
||||
name="time_offset">
|
||||
{{ range $item := getUTCOffsets }}
|
||||
<option {{ if (eq $item.Value $.Data.TimeOffset) }}selected{{ end }} value="{{ $item.Value }}">
|
||||
{{ $item.Name }}
|
||||
</option>
|
||||
{{ end }}
|
||||
</select>
|
||||
</div>
|
||||
<button 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">Submit</span>
|
||||
</button>
|
||||
</form>
|
||||
{{ if .TimeOffsetErrorMessage }}
|
||||
<span class="text-red-400 text-xs">{{ .TimeOffsetErrorMessage }}</span>
|
||||
{{ else if .TimeOffsetMessage }}
|
||||
<span class="text-green-400 text-xs">{{ .TimeOffsetMessage }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<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>
|
||||
<table class="min-w-full bg-white dark:bg-gray-700 text-sm">
|
||||
<thead class="text-gray-800 dark:text-gray-400">
|
||||
<tr>
|
||||
<th scope="col"
|
||||
class="p-3 pl-0 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">
|
||||
Name
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">
|
||||
Last Sync
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Created</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-black dark:text-white">
|
||||
{{ if not .Data.Devices }}
|
||||
<tr>
|
||||
<td class="text-center p-3" colspan="3">No Results</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
{{ range $device := .Data.Devices }}
|
||||
<tr>
|
||||
<td class="p-3 pl-0">
|
||||
<p>{{ $device.DeviceName }}</p>
|
||||
</td>
|
||||
<td class="p-3">
|
||||
<p>{{ $device.LastSynced }}</p>
|
||||
</td>
|
||||
<td class="p-3">
|
||||
<p>{{ $device.CreatedAt }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
Loading…
Reference in New Issue
Block a user