new sub page paradigm
This commit is contained in:
samantha42
@@ -0,0 +1,97 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Samantha Vero Friis</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap"
|
||||
rel="stylesheet" />
|
||||
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
|
||||
<link rel="stylesheet" href="/static/output.css"/>
|
||||
<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" />
|
||||
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body class="theme-root day " id="themeRoot">
|
||||
<div class="login-wrap">
|
||||
<div class="login-card">
|
||||
<div class="card-header">
|
||||
<a style="text-decoration: underline; font-size: 13px; color: #85B7EB; cursor: pointer; font-family: 'DM Mono', monospace;" onclick="closelogin()">← back</a>
|
||||
<p class="brand" style="margin-top: 12px;">samantha<span>42</span>.xyz</p>
|
||||
<p class="brand-sub">Secure Portal</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div id="login-error"></div>
|
||||
|
||||
<form
|
||||
hx-post="/login"
|
||||
hx-target="#login-error"
|
||||
hx-swap="innerHTML"
|
||||
hx-indicator="#login-spinner"
|
||||
hx-on::after-request="if(event.detail.successful && event.detail.xhr.status===200 && !event.detail.xhr.getResponseHeader('HX-Redirect')) {}"
|
||||
>
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.login-wrap { z-index: 10; min-width: 50%; min-height: 520px; display: flex; align-items: center; justify-content: center; padding: 2rem 0; }
|
||||
.login-card { background: white; border: 0.5px solid var(--color-border-tertiary); 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(--color-text-secondary); 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(--color-border-tertiary); background: var(--color-background-secondary); color: var(--color-text-primary); 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); }
|
||||
.htmx-indicator { opacity: 0; transition: opacity 0.2s; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--color-text-secondary); text-align: center; margin-top: 8px; }
|
||||
.htmx-request .htmx-indicator { opacity: 1; }
|
||||
.htmx-request .submit-btn { background: #0C447C; cursor: not-allowed; pointer-events: none; }
|
||||
.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; }
|
||||
</style>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user