<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, nofollow">
<title>{{ title|default("Error") }} — sfpermits.ai</title>
<style>
:root {
--bg: #0f1117;
--surface: #1a1d27;
--border: #333749;
--text: #e4e6eb;
--text-muted: #8b8fa3;
--accent: #4f8ff7;
--error: #f87171;
--warning: #fbbf24;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--bg); color: var(--text); line-height: 1.6;
display: flex; align-items: center; justify-content: center;
min-height: 100vh; padding: 24px;
}
.card {
background: var(--surface); border: 1px solid var(--border);
border-radius: 12px; padding: 40px 48px; max-width: 480px; width: 100%;
text-align: center;
}
.icon { font-size: 2.5rem; margin-bottom: 16px; }
h1 { font-size: 1.4rem; margin-bottom: 8px; }
.subtitle { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 24px; }
.detail {
background: rgba(79,143,247,0.06); border: 1px solid rgba(79,143,247,0.15);
border-radius: 8px; padding: 12px 16px; font-size: 0.85rem;
color: var(--text-muted); margin-bottom: 24px; text-align: left;
}
.btn {
display: inline-block; padding: 10px 22px; border-radius: 8px;
text-decoration: none; font-size: 0.9rem; font-weight: 500;
background: var(--accent); color: #fff; border: none; cursor: pointer;
transition: opacity 0.15s;
}
.btn:hover { opacity: 0.85; }
.btn-ghost {
background: transparent; border: 1px solid var(--border);
color: var(--text-muted); margin-left: 10px;
}
.status-code {
font-size: 0.7rem; color: var(--text-muted); margin-top: 20px;
}
</style>
<link rel="stylesheet" href="{{ url_for('static', filename='mobile.css') }}">
</head>
<body>
<div class="card">
{% if error_type == "rate_limit" %}
<div class="icon">⏱</div>
<h1>Rate limit reached</h1>
<p class="subtitle">You've sent too many requests. Please wait a moment and try again.</p>
{% if detail %}
<div class="detail">{{ detail }}</div>
{% endif %}
<a href="javascript:history.back()" class="btn">Go back</a>
<a href="/" class="btn btn-ghost">Home</a>
<div class="status-code">HTTP 429</div>
{% elif error_type == "kill_switch" %}
<div class="icon">⚠</div>
<h1>AI features temporarily unavailable</h1>
<p class="subtitle">
Our AI assistant is temporarily paused for cost protection.
Basic permit lookups and search still work.
</p>
<a href="/" class="btn">Return to search</a>
<div class="status-code">HTTP 503</div>
{% elif error_type == "403" %}
<div class="icon">🔒</div>
<h1>Access denied</h1>
<p class="subtitle">You don't have permission to view this page.</p>
<a href="/" class="btn">Go home</a>
<a href="/auth/login" class="btn btn-ghost">Sign in</a>
<div class="status-code">HTTP 403</div>
{% elif error_type == "404" %}
<div class="icon">🔍</div>
<h1>Page not found</h1>
<p class="subtitle">The page you're looking for doesn't exist or has moved.</p>
<a href="/" class="btn">Go home</a>
<div class="status-code">HTTP 404</div>
{% else %}
<div class="icon">⚡</div>
<h1>{{ title|default("Something went wrong") }}</h1>
<p class="subtitle">{{ subtitle|default("An unexpected error occurred. Please try again.") }}</p>
{% if detail %}
<div class="detail">{{ detail }}</div>
{% endif %}
<a href="javascript:history.back()" class="btn">Go back</a>
<a href="/" class="btn btn-ghost">Home</a>
{% if status_code %}
<div class="status-code">HTTP {{ status_code }}</div>
{% endif %}
{% endif %}
</div>
</body>
</html>
