Initial Commit
This commit is contained in:
171
templates/login.html
Normal file
171
templates/login.html
Normal file
@@ -0,0 +1,171 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</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"
|
||||
>
|
||||
<svg
|
||||
width="15"
|
||||
height="15"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 1792 1792"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M1523 1339q-22-155-87.5-257.5t-184.5-118.5q-67 74-159.5 115.5t-195.5 41.5-195.5-41.5-159.5-115.5q-119 16-184.5 118.5t-87.5 257.5q106 150 271 237.5t356 87.5 356-87.5 271-237.5zm-243-699q0-159-112.5-271.5t-271.5-112.5-271.5 112.5-112.5 271.5 112.5 271.5 271.5 112.5 271.5-112.5 112.5-271.5zm512 256q0 182-71 347.5t-190.5 286-285.5 191.5-349 71q-182 0-348-71t-286-191-191-286-71-348 71-348 191-286 286-191 348-71 348 71 286 191 191 286 71 348z"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
class="flex-1 appearance-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"
|
||||
>
|
||||
<svg
|
||||
width="15"
|
||||
height="15"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 1792 1792"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M1376 768q40 0 68 28t28 68v576q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-576q0-40 28-68t68-28h32v-320q0-185 131.5-316.5t316.5-131.5 316.5 131.5 131.5 316.5q0 26-19 45t-45 19h-64q-26 0-45-19t-19-45q0-106-75-181t-181-75-181 75-75 181v320h736z"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
class="flex-1 appearance-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 .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}}
|
||||
</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/book1.jpg"
|
||||
/>
|
||||
<img
|
||||
class="w-full h-screen object-cover ease-in-out top-0 left-0"
|
||||
src="/assets/book2.jpg"
|
||||
/>
|
||||
<img
|
||||
class="w-full h-screen object-cover ease-in-out top-0 left-0"
|
||||
src="/assets/book3.jpg"
|
||||
/>
|
||||
<img
|
||||
class="w-full h-screen object-cover ease-in-out top-0 left-0"
|
||||
src="/assets/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 -->
|
||||
Reference in New Issue
Block a user