<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your morning brief — Step 3 of 3</title>
{% include "fragments/head_obsidian.html" %}
<style nonce="{{ csp_nonce }}">
/* ── Onboarding Wizard — Step 3 ────────────────────────────────── */
body { background: var(--obsidian, #0a0a0f); }
.onb-header {
border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.06));
padding: var(--space-4) 0;
}
.onb-header .obs-container {
display: flex;
align-items: center;
justify-content: space-between;
}
.onb-logo {
font-family: var(--mono);
font-size: 1.1rem;
font-weight: 400;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--accent, #5eead4);
text-decoration: none;
}
.onb-step-label {
font-family: var(--mono);
font-size: var(--text-sm);
color: var(--text-tertiary);
letter-spacing: 0.05em;
}
/* ── Progress ─────────────────────────────────────────────────── */
.onb-progress {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
padding: var(--space-8) 0 var(--space-6) 0;
}
.onb-dot {
width: 10px;
height: 10px;
border-radius: var(--radius-full, 9999px);
background: var(--obsidian-light, #1a1a26);
border: 1px solid rgba(255,255,255,0.12);
}
.onb-dot.active {
background: var(--accent, #5eead4);
border-color: var(--accent, #5eead4);
box-shadow: 0 0 8px var(--accent-ring, rgba(94,234,212,0.3));
}
.onb-dot.done {
background: var(--signal-green, #34d399);
border-color: var(--signal-green, #34d399);
}
.onb-connector {
width: 48px;
height: 1px;
background: rgba(255,255,255,0.08);
}
/* ── Hero ─────────────────────────────────────────────────────── */
.onb-hero {
text-align: center;
padding: 0 0 var(--space-8) 0;
}
.onb-hero h1 {
font-family: var(--sans);
font-size: var(--text-2xl);
font-weight: 300;
color: var(--text-primary);
margin: 0 0 var(--space-3) 0;
}
.onb-hero p {
font-family: var(--sans);
color: var(--text-secondary);
font-size: var(--text-base);
max-width: 520px;
margin: 0 auto;
line-height: 1.6;
}
/* ── Sample brief card ────────────────────────────────────────── */
.brief-preview {
max-width: 600px;
margin: 0 auto var(--space-8) auto;
}
.brief-preview .glass-card { padding: var(--space-6); }
.brief-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-5);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.06));
}
.brief-title {
font-family: var(--mono);
font-size: var(--text-sm);
font-weight: 400;
color: var(--text-primary);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.brief-date {
font-family: var(--mono);
font-size: var(--text-xs);
color: var(--text-tertiary);
}
.brief-property {
margin-bottom: var(--space-5);
}
.brief-property-name {
font-family: var(--mono);
font-size: var(--text-base);
color: var(--text-primary);
margin: 0 0 var(--space-2) 0;
}
.brief-change-row {
display: flex;
align-items: flex-start;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.brief-dot {
width: 6px;
height: 6px;
border-radius: var(--radius-full, 9999px);
flex-shrink: 0;
margin-top: 6px;
}
.brief-dot--green { background: var(--dot-green, #22c55e); }
.brief-dot--amber { background: var(--dot-amber, #f59e0b); }
.brief-dot--blue { background: var(--signal-blue, #60a5fa); }
.brief-change-text {
font-family: var(--sans);
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.5;
}
.brief-change-text strong {
color: var(--text-primary);
font-weight: 500;
}
.brief-footer {
padding-top: var(--space-4);
border-top: 1px solid var(--glass-border, rgba(255,255,255,0.06));
text-align: right;
}
.brief-link {
font-family: var(--mono);
font-size: var(--text-sm);
color: var(--accent, #5eead4);
text-decoration: none;
transition: opacity 0.2s;
}
.brief-link:hover { opacity: 0.75; }
/* ── Sample label ─────────────────────────────────────────────── */
.sample-label {
font-family: var(--mono);
font-size: var(--text-xs);
color: var(--text-tertiary);
text-align: center;
margin-top: var(--space-2);
letter-spacing: 0.05em;
}
/* ── Actions ──────────────────────────────────────────────────── */
.onb-actions {
text-align: center;
max-width: 560px;
margin: 0 auto;
padding-bottom: var(--space-12);
}
.onb-continue-btn {
font-family: var(--mono);
font-size: var(--text-base);
font-weight: 400;
color: var(--obsidian, #0a0a0f);
background: var(--accent, #5eead4);
border: none;
border-radius: var(--radius-md, 12px);
padding: 14px 48px;
cursor: pointer;
transition: opacity 0.2s;
letter-spacing: 0.02em;
width: 100%;
}
.onb-continue-btn:hover { opacity: 0.88; }
.onb-ready-note {
font-family: var(--sans);
font-size: var(--text-sm);
color: var(--text-secondary);
margin-top: var(--space-4);
}
.onb-ready-note .accent { color: var(--signal-green, #34d399); font-weight: 500; }
</style>
</head>
<body class="obsidian">
<!-- Header -->
<header class="onb-header">
<div class="obs-container">
<a href="/" class="onb-logo">sfpermits.ai</a>
<span class="onb-step-label">Step 3 of 3</span>
</div>
</header>
<div class="obs-container">
<!-- Progress -->
<div class="onb-progress">
<div class="onb-dot done"></div>
<div class="onb-connector"></div>
<div class="onb-dot done"></div>
<div class="onb-connector"></div>
<div class="onb-dot active"></div>
</div>
<!-- Hero -->
<section class="onb-hero">
<h1>Your morning brief</h1>
<p>This is what your daily digest looks like. You’ll get one email when watched properties have changes — nothing when they don’t.</p>
</section>
<!-- Sample brief card -->
<div class="brief-preview">
<div class="glass-card">
<div class="brief-header">
<span class="brief-title">Morning Brief</span>
<span class="brief-date">Today — 1 property watched</span>
</div>
<div class="brief-property">
<h3 class="brief-property-name">1455 Market St</h3>
<div class="brief-change-row">
<div class="brief-dot brief-dot--green"></div>
<p class="brief-change-text">
<strong>Permit 202401015555</strong> advanced from Routing to Approved — estimated issuance in 3–5 days.
</p>
</div>
<div class="brief-change-row">
<div class="brief-dot brief-dot--amber"></div>
<p class="brief-change-text">
<strong>Permit 202312009812</strong> stalled 14 days at Environmental Planning — no movement since Dec 12.
</p>
</div>
<div class="brief-change-row">
<div class="brief-dot brief-dot--blue"></div>
<p class="brief-change-text">
<strong>New permit filed</strong> for electrical work — 202401021234, Tier 2, no structural impact.
</p>
</div>
</div>
<div class="brief-footer">
<a href="#" class="brief-link">Full property report →</a>
</div>
</div>
<p class="sample-label">Sample — actual brief reflects your watched properties</p>
</div>
<!-- CTA -->
<div class="onb-actions">
<form method="POST" action="{{ url_for('auth.onboarding_complete') }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
<button type="submit" class="onb-continue-btn">Go to Dashboard →</button>
</form>
<p class="onb-ready-note">
<span class="accent">You’re all set.</span> Briefs are off by default — turn them on from your account settings anytime.
</p>
</div>
</div>
</body>
</html>
