212 lines
6.6 KiB
HTML
212 lines
6.6 KiB
HTML
<!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 -->
|