From a40b028a0e4d816e2b7735815be1a6a156b29247 Mon Sep 17 00:00:00 2001 From: Bjoern Welker Date: Fri, 6 Feb 2026 08:20:07 +0100 Subject: [PATCH] feat: replace alert() with modern toast notifications UI Improvements: - Add animated toast notification system - Replace browser alert() with styled toast messages - Support success, error, and info types - Auto-dismiss after 4 seconds - Smooth slide-in animation - Mobile-responsive positioning (bottom on mobile) User Experience: - Success: "Bestellung erfolgreich gesendet! Wir melden uns bei dir." - Error: "Fehler beim Senden der Bestellung. Bitte versuche es erneut." - Non-blocking notifications (no modal interruption) - Modern, polished look matching site design Co-Authored-By: Claude Sonnet 4.5 --- index.html | 81 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 79 insertions(+), 2 deletions(-) mode change 100644 => 100755 index.html diff --git a/index.html b/index.html old mode 100644 new mode 100755 index 25b051a..40dd72d --- a/index.html +++ b/index.html @@ -313,6 +313,62 @@ .order-btn { width: 100%; justify-content: center; } } @media (max-width: 640px) { .grid { grid-template-columns: 1fr; } } + + /* Toast Notifications */ + .toast-container { + position: fixed; + top: 20px; + right: 20px; + z-index: 9999; + display: flex; + flex-direction: column; + gap: 12px; + pointer-events: none; + } + .toast { + min-width: 300px; + max-width: 400px; + padding: 16px 20px; + border-radius: 12px; + background: rgba(12, 31, 51, 0.98); + border: 1px solid rgba(255, 255, 255, 0.15); + box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 1px rgba(255, 255, 255, 0.3); + color: var(--text); + font-size: 14px; + line-height: 1.5; + pointer-events: all; + transform: translateX(400px); + opacity: 0; + transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); + } + .toast.show { + transform: translateX(0); + opacity: 1; + } + .toast.success { + border-left: 4px solid var(--ok); + background: linear-gradient(90deg, rgba(123, 213, 141, 0.15), rgba(12, 31, 51, 0.98)); + } + .toast.error { + border-left: 4px solid var(--bad); + background: linear-gradient(90deg, rgba(255, 107, 125, 0.15), rgba(12, 31, 51, 0.98)); + } + .toast.info { + border-left: 4px solid var(--accent); + background: linear-gradient(90deg, rgba(243, 213, 42, 0.15), rgba(12, 31, 51, 0.98)); + } + @media (max-width: 640px) { + .toast-container { + top: auto; + bottom: 20px; + right: 16px; + left: 16px; + } + .toast { + min-width: 100%; + max-width: 100%; + } + } @@ -403,7 +459,28 @@ +
+