54 lines
3.1 KiB
HTML
54 lines
3.1 KiB
HTML
{{- template "document.html" . }}
|
|
|
|
{{- define "document-title" }}Login{{ end }}
|
|
|
|
{{- define "document-head-before" }}
|
|
<link rel="preload" href='{{ .App.StaticAssetPath "js/templating.js" }}' as="script"/>
|
|
<link rel="prefetch" href='{{ .App.StaticAssetPath "js/page.js" }}'/>
|
|
{{- end }}
|
|
|
|
{{- define "document-head-after" }}
|
|
<link rel="stylesheet" href='{{ .App.StaticAssetPath "css/login.css" }}'>
|
|
<script type="module" src='{{ .App.StaticAssetPath "js/login.js" }}'></script>
|
|
{{- end }}
|
|
|
|
{{- define "document-body" }}
|
|
<div class="flex flex-column body-content">
|
|
<div class="flex grow items-center justify-center" style="padding-bottom: 5rem">
|
|
<h1 class="visually-hidden">Login</h1>
|
|
<main id="login-container" class="grow login-bounds" style="display: none;">
|
|
<div class="animate-entrance">
|
|
<label class="form-label widget-header" for="username">Username</label>
|
|
<div class="form-input widget-content-frame padding-inline-widget flex gap-10 items-center">
|
|
<svg class="form-input-icon" fill="var(--color-text-subdue)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" aria-hidden="true">
|
|
<path d="M10 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM3.465 14.493a1.23 1.23 0 0 0 .41 1.412A9.957 9.957 0 0 0 10 18c2.31 0 4.438-.784 6.131-2.1.43-.333.604-.903.408-1.41a7.002 7.002 0 0 0-13.074.003Z" />
|
|
</svg>
|
|
<input type="text" id="username" class="input" placeholder="Enter your username" autocomplete="off">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="animate-entrance">
|
|
<label class="form-label widget-header margin-top-20" for="password">Password</label>
|
|
<div class="form-input widget-content-frame padding-inline-widget flex gap-10 items-center">
|
|
<svg class="form-input-icon" fill="var(--color-text-subdue)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" aria-hidden="true">
|
|
<path fill-rule="evenodd" d="M8 7a5 5 0 1 1 3.61 4.804l-1.903 1.903A1 1 0 0 1 9 14H8v1a1 1 0 0 1-1 1H6v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-2a1 1 0 0 1 .293-.707L8.196 8.39A5.002 5.002 0 0 1 8 7Zm5-3a.75.75 0 0 0 0 1.5A1.5 1.5 0 0 1 14.5 7 .75.75 0 0 0 16 7a3 3 0 0 0-3-3Z" clip-rule="evenodd" />
|
|
</svg>
|
|
<input type="password" id="password" class="input" placeholder="********" autocomplete="off">
|
|
<button class="toggle-password-visibility" id="toggle-password-visibility" tabindex="-1"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="login-error-message" id="error-message"></div>
|
|
|
|
<button class="login-button animate-entrance" id="login-button">
|
|
<div>LOGIN</div>
|
|
<svg stroke="currentColor" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
|
|
</svg>
|
|
</button>
|
|
</main>
|
|
</div>
|
|
{{ template "footer.html" . }}
|
|
</div>
|
|
{{- end }}
|