diff --git a/index.html b/index.html index 19d0006..f276680 100644 --- a/index.html +++ b/index.html @@ -183,6 +183,14 @@ + + diff --git a/src/main.ts b/src/main.ts index cba4f8f..97fe777 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,4 +1,16 @@ import "./styles/main.css"; import { initApp } from "./app"; +window.addEventListener("error", (event) => { + console.error("Global error:", event.error); + const overlay = document.getElementById("error-overlay"); + if (overlay) overlay.style.display = "flex"; +}); + +window.addEventListener("unhandledrejection", (event) => { + console.error("Unhandled rejection:", event.reason); + const overlay = document.getElementById("error-overlay"); + if (overlay) overlay.style.display = "flex"; +}); + document.addEventListener("DOMContentLoaded", initApp); diff --git a/src/styles/main.css b/src/styles/main.css index bd7967b..ac564d0 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -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,