Sam Rolfe
3c0030c9a3
- Session login for the single user Sam: server-side session store with an HMAC-signed session cookie, POST /login, POST /logout, and double-submit CSRF on every form post. Unauthenticated requests to / and /partials/* redirect to /login?next=... - Empty dashboard shell in the Family Home Lab design system: left nav (category and folder placeholders), centre list, right detail pane. - Copy tokens.css and the self-hosted Inter fonts from the family-home-lab design system into web/static; vendor htmx 2.0.4. No cross-project imports at runtime. - Dark mode via prefers-color-scheme plus a persisted toggle; phone-first layout with 44px touch targets, hairline borders, 8px grid, pill CTAs. - Config: EMAIL_AGENT_PASSWORD for the login password, falling back to EMAIL_AGENT_SESSION_SECRET so one configured secret is enough. Co-Authored-By: Paperclip <noreply@paperclip.ing>
98 lines
3.4 KiB
HTML
98 lines
3.4 KiB
HTML
<!doctype html>
|
|
<html lang="en" data-theme="light">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Email Agent</title>
|
|
<link rel="stylesheet" href="/static/tokens.css">
|
|
<link rel="stylesheet" href="/static/app.css">
|
|
<script>
|
|
(function () {
|
|
try {
|
|
var t = localStorage.getItem("ea-theme");
|
|
if (!t) t = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
document.documentElement.setAttribute("data-theme", t);
|
|
} catch (e) {}
|
|
})();
|
|
function eaToggleTheme() {
|
|
var el = document.documentElement;
|
|
var next = el.getAttribute("data-theme") === "dark" ? "light" : "dark";
|
|
el.setAttribute("data-theme", next);
|
|
try { localStorage.setItem("ea-theme", next); } catch (e) {}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<header class="nav-bar">
|
|
<span class="wordmark">Email Agent</span>
|
|
<div class="nav-actions">
|
|
<button class="btn btn-utility theme-toggle" type="button" onclick="eaToggleTheme()" aria-label="Toggle dark mode">
|
|
<span class="icon-light" aria-hidden="true">☾</span>
|
|
<span class="icon-dark" aria-hidden="true">☀</span>
|
|
</button>
|
|
<form method="post" action="/logout">
|
|
<input type="hidden" name="csrf" value="{{.CSRFToken}}">
|
|
<button class="btn btn-utility" type="submit">Log out</button>
|
|
</form>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="page">
|
|
<h1 class="greeting">{{.Greeting}}, Sam</h1>
|
|
|
|
<div class="shell">
|
|
<aside class="panel" aria-label="Categories and folders">
|
|
<div class="nav-groups">
|
|
<div class="nav-group">
|
|
<div class="nav-group-title">Categories</div>
|
|
<div class="nav-group-items">
|
|
{{range .Categories}}
|
|
<a class="nav-item" href="#">
|
|
<span class="dot" style="background: {{.Color}}"></span>
|
|
<span>{{.Name}}</span>
|
|
<span class="count">0</span>
|
|
</a>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
<div class="nav-group">
|
|
<div class="nav-group-title">Folders</div>
|
|
<div class="nav-group-items">
|
|
{{range .Folders}}
|
|
<a class="nav-item" href="#">
|
|
<span class="dot" style="background: {{.Color}}"></span>
|
|
<span>{{.Name}}</span>
|
|
<span class="count">0</span>
|
|
</a>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<section class="panel" aria-label="Message list">
|
|
<div class="panel-head">
|
|
<h2>Inbox</h2>
|
|
<button class="btn btn-utility" type="button"
|
|
hx-get="/partials/inbox" hx-target="#inbox-list" hx-swap="innerHTML">
|
|
Refresh
|
|
</button>
|
|
</div>
|
|
<div id="inbox-list" class="msg-list"
|
|
hx-get="/partials/inbox" hx-trigger="load" hx-swap="innerHTML"></div>
|
|
</section>
|
|
|
|
<aside class="panel detail-pane" aria-label="Message detail">
|
|
<div class="panel-head"><h2>Message</h2></div>
|
|
<div class="detail-body">
|
|
<p class="muted">Select a message to read it here.</p>
|
|
<p class="faint" style="margin-top: var(--space-xs);">Recommended action, reply draft, and history will appear in this pane.</p>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="/static/htmx.min.js" defer></script>
|
|
</body>
|
|
</html>
|