john-okeefe
79fcfa38f0
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.
93 lines
2.1 KiB
Templ
93 lines
2.1 KiB
Templ
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>
|
|
}
|