80 lines
3.9 KiB
HTML
80 lines
3.9 KiB
HTML
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@300;400;500&display=swap" rel="stylesheet" />
|
|
|
|
<style>
|
|
.login-wrap { min-height: 520px; display: flex; align-items: center; justify-content: center; padding: 2rem 0; }
|
|
.login-card { background: var(--bg); border: 0.5px solid var(--border); border-radius: 8px; width: 100%; max-width: 400px; overflow: hidden; }
|
|
.card-header { background: #0C447C; padding: 2rem 2rem 1.5rem; }
|
|
.brand { font-family: 'DM Serif Display', serif; font-size: 22px; color: #E6F1FB; letter-spacing: -0.5px; margin: 0 0 4px; }
|
|
.brand span { font-style: italic; color: #85B7EB; }
|
|
.brand-sub { font-family: 'DM Mono', monospace; font-size: 11px; color: #378ADD; letter-spacing: 2px; text-transform: uppercase; margin: 0; }
|
|
.card-body { padding: 1.75rem 2rem; }
|
|
.field-group { margin-bottom: 1rem; }
|
|
.field-label { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; display: block; margin-bottom: 6px; }
|
|
.field-input { width: 100%; box-sizing: border-box; font-family: 'DM Mono', monospace; font-size: 14px; padding: 10px 12px; border-radius: 6px; border: 0.5px solid var(--border); background: var(--bg-2); color: var(--text); transition: border-color 0.2s, box-shadow 0.2s; }
|
|
.field-input:focus { outline: none; border-color: #378ADD; box-shadow: 0 0 0 3px rgba(55,138,221,0.15); }
|
|
.submit-btn { width: 100%; padding: 11px; background: #185FA5; color: #E6F1FB; border: none; border-radius: 6px; font-family: 'DM Mono', monospace; font-size: 13px; letter-spacing: 1px; cursor: pointer; transition: background 0.2s, transform 0.1s; margin-top: 0.5rem; }
|
|
.submit-btn:hover { background: #0C447C; }
|
|
.submit-btn:active { transform: scale(0.98); }
|
|
.field-input.htmx-error { border-color: #E24B4A; box-shadow: 0 0 0 3px rgba(226,75,74,0.1); }
|
|
.error-banner { font-family: 'DM Mono', monospace; font-size: 11px; color: #A32D2D; background: #FCEBEB; border: 0.5px solid #F09595; border-radius: 6px; padding: 8px 12px; margin-bottom: 1rem; display: none; }
|
|
.htmx-indicator { opacity: 0; transition: opacity 0.2s; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted); text-align: center; margin-top: 8px; }
|
|
.htmx-request .htmx-indicator { opacity: 1; }
|
|
.htmx-request .submit-btn { background: #0C447C; cursor: not-allowed; }
|
|
</style>
|
|
|
|
<div class="login-wrap">
|
|
<div class="login-card">
|
|
<div class="card-header">
|
|
<p class="brand">samantha<span>42</span>.xyz</p>
|
|
<p class="brand-sub">Secure Portal</p>
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
<!-- error slot — your server renders this partial on failure -->
|
|
<div id="login-error"></div>
|
|
|
|
<form
|
|
hx-post="/login"
|
|
hx-target="#login-result"
|
|
hx-swap="outerHTML"
|
|
hx-indicator="#login-spinner"
|
|
>
|
|
<div class="field-group">
|
|
<label class="field-label" for="password">Password</label>
|
|
<input
|
|
class="field-input"
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
placeholder="••••••••"
|
|
autocomplete="current-password"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="field-group">
|
|
<label class="field-label" for="totp">2FA Code</label>
|
|
<input
|
|
class="field-input"
|
|
type="text"
|
|
id="totp"
|
|
name="totp"
|
|
placeholder="123456"
|
|
inputmode="numeric"
|
|
maxlength="6"
|
|
autocomplete="one-time-code"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<button class="submit-btn" type="submit">Continue →</button>
|
|
<p class="htmx-indicator" id="login-spinner">verifying...</p>
|
|
</form>
|
|
|
|
<!-- server swaps this element on response -->
|
|
<div id="login-result"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div> |