1{{define "title"}}{{.Title}} - {{.ServiceName}}{{end}}
  2
  3{{define "main"}}
  4<div class="error-page">
  5    <div class="error-content">
  6        <div class="error-code">{{.Content.ErrorCode}}</div>
  7        <h1 class="error-title">{{.Content.ErrorTitle}}</h1>
  8        <p class="error-message">{{.Content.ErrorMessage}}</p>
  9        
 10        <div class="error-actions">
 11            <a href="/" class="cta-button">Go Home</a>
 12            <a href="/submit" class="cta-button secondary">Schedule Reminder</a>
 13        </div>
 14        
 15        <div class="error-help">
 16            <p>If you continue to experience problems, please check:</p>
 17            <ul>
 18                <li>The URL is typed correctly</li>
 19                <li>The page you're looking for still exists</li>
 20                <li>Your internet connection is working</li>
 21            </ul>
 22        </div>
 23    </div>
 24</div>
 25
 26<style>
 27.error-page {
 28    text-align: center;
 29    padding: 4rem 0;
 30    min-height: 60vh;
 31    display: flex;
 32    align-items: center;
 33    justify-content: center;
 34}
 35
 36.error-content {
 37    max-width: 600px;
 38    margin: 0 auto;
 39}
 40
 41.error-code {
 42    font-size: 8rem;
 43    font-weight: bold;
 44    color: #e74c3c;
 45    line-height: 1;
 46    margin-bottom: 1rem;
 47    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
 48}
 49
 50.error-title {
 51    font-size: 2.5rem;
 52    margin-bottom: 1rem;
 53    color: #2c3e50;
 54}
 55
 56.error-message {
 57    font-size: 1.2rem;
 58    margin-bottom: 2rem;
 59    color: #7f8c8d;
 60    line-height: 1.6;
 61}
 62
 63.error-actions {
 64    margin: 2rem 0;
 65    display: flex;
 66    gap: 1rem;
 67    justify-content: center;
 68    flex-wrap: wrap;
 69}
 70
 71.error-actions .cta-button.secondary {
 72    background: transparent;
 73    color: #e74c3c;
 74    border: 2px solid #e74c3c;
 75}
 76
 77.error-actions .cta-button.secondary:hover {
 78    background: #e74c3c;
 79    color: white;
 80}
 81
 82.error-help {
 83    margin-top: 3rem;
 84    padding: 2rem;
 85    background: #f8f9fa;
 86    border-radius: 8px;
 87    text-align: left;
 88}
 89
 90.error-help h3 {
 91    margin-bottom: 1rem;
 92    color: #2c3e50;
 93}
 94
 95.error-help ul {
 96    margin: 1rem 0;
 97    padding-left: 1.5rem;
 98}
 99
100.error-help li {
101    margin-bottom: 0.5rem;
102    color: #7f8c8d;
103}
104
105@media (max-width: 768px) {
106    .error-code {
107        font-size: 6rem;
108    }
109    
110    .error-title {
111        font-size: 2rem;
112    }
113    
114    .error-actions {
115        flex-direction: column;
116        align-items: center;
117    }
118    
119    .error-actions .cta-button {
120        width: 200px;
121    }
122}
123</style>
124{{end}}