feat(04-02): global error handler + child-friendly error overlay

- Add error overlay HTML element in index.html before script tag
- Add window error + unhandledrejection listeners in main.ts
- Add error overlay CSS styles (fixed, z-index 9999, tree icon, reload button)
- Error message: "Oh, der Wald braucht kurz eine Pause..."
This commit is contained in:
2026-03-29 18:16:34 +02:00
parent 5396dc0e62
commit f3cb948878
3 changed files with 59 additions and 0 deletions
+39
View File
@@ -964,6 +964,45 @@ h3 {
}
}
/* Error overlay — kindgerechte Fehlermeldung */
.error-overlay {
position: fixed;
inset: 0;
background: rgba(255, 248, 240, 0.95);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.error-overlay__content {
text-align: center;
padding: 2rem;
}
.error-overlay__icon {
font-size: 4rem;
margin-bottom: 1rem;
}
.error-overlay__message {
font-family: "Quicksand", sans-serif;
font-size: 1.25rem;
color: var(--text-dark);
margin-bottom: 1.5rem;
}
.error-overlay__btn {
font-family: "Quicksand", sans-serif;
font-size: 1rem;
padding: 0.75rem 2rem;
background: var(--accent-green);
color: white;
border: none;
border-radius: 12px;
cursor: pointer;
}
/* Accessibility: respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
.falling-letter,