feat(templates): add error page and toast components

Add standalone error page template for graceful error display when the
main app fails. Includes inline CSS since error pages must work when
CSS fails to load. Add error toast component for displaying errors.
This commit is contained in:
john-okeefe committed 2026-02-20 13:25:35 -05:00
1 parent 572f71218b
commit 79fcfa38f0
4 files changed
+234

No files matched your search

+92
View File
@@ -0,0 +1,92 @@
package templates
templ ErrorPage(message string, errorType string) {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Error - Bookhoard</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: #eee;
}
.error-container {
text-align: center;
padding: 2rem;
max-width: 500px;
}
.error-icon {
font-size: 4rem;
margin-bottom: 1rem;
}
.error-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
color: #fff;
}
.error-message {
font-size: 1rem;
color: #ccc;
margin-bottom: 2rem;
line-height: 1.6;
}
.error-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.btn {
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
text-decoration: none;
font-weight: 500;
transition: all 0.2s;
border: none;
cursor: pointer;
font-size: 0.95rem;
}
.btn-primary {
background: #7aa2f7;
color: #1a1b26;
}
.btn-primary:hover {
background: #89b4fa;
}
.btn-secondary {
background: transparent;
color: #7aa2f7;
border: 1px solid #7aa2f7;
}
.btn-secondary:hover {
background: rgba(122, 162, 247, 0.1);
}
</style>
</head>
<body>
<div class="error-container">
<div class="error-icon">⚠️</div>
<h1 class="error-title">Something went wrong</h1>
<p class="error-message">{message}</p>
<div class="error-actions">
<a href="/dashboard" class="btn btn-primary">Try Again</a>
<a href="/" class="btn btn-secondary">Go Home</a>
</div>
</div>
<div style="display:none;" id="error-debug-info">Error type: { errorType }</div>
</body>
</html>
}