samantha/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

basic panel with env based password

Browse Source
This commit is contained in:
samantha42
2026-05-31 22:40:46 +02:00
parent 2c1997ed6e
commit 6df2b96dd9
7 changed files with 621 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/login.html
+15 -17
View File
@@ -1,44 +1,45 @@
<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>
<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; }
.login-wrap { 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(--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-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); }
.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-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; }
.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>
<div class="login-wrap">
<div class="login-card">
<div class="card-header">
<p class="brand">samantha<span>42</span>.xyz</p>
<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">
<!-- 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-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>
@@ -69,12 +70,9 @@
</div>
<button class="submit-btn" type="submit">Continue →</button>
<p class="htmx-indicator" id="login-spinner">verifying...</p>
<p class="htmx-indicator" id="login-spinner">// verifying...</p>
</form>
<!-- server swaps this element on response -->
<div id="login-result"></div>
</div>
</div>
</div>
</div>