bjoern/Hellas-Wawi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: replace alert() with modern toast notifications

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Bjoern Welker
2026-02-06 08:20:07 +01:00
parent 450a4b062f
commit a40b028a0e
1 changed files with 79 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
index.html Normal file → Executable file
View File

@@ -313,6 +313,62 @@
.order-btn { width: 100%; justify-content: center; } .order-btn { width: 100%; justify-content: center; }
} }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } } @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%;
}
}
</style> </style>
</head> </head>
<body> <body>
@@ -403,7 +459,28 @@
</div> </div>
</div> </div>
<div id="toastContainer" class="toast-container"></div>
<script> <script>
// Toast Notification System
function showToast(message, type = 'info') {
const container = document.getElementById('toastContainer');
const toast = document.createElement('div');
toast.className = `toast ${type}`;
toast.textContent = message;
container.appendChild(toast);
// Trigger animation
setTimeout(() => toast.classList.add('show'), 10);
// Auto-remove after 4 seconds
setTimeout(() => {
toast.classList.remove('show');
setTimeout(() => container.removeChild(toast), 300);
}, 4000);
}
// Proxy der WaWi‑App (kein API‑Key im Browser nötig). // Proxy der WaWi‑App (kein API‑Key im Browser nötig).
const API_URL = "/wawi/proxy/bestand"; const API_URL = "/wawi/proxy/bestand";
let DATA = []; let DATA = [];
@@ -563,13 +640,13 @@ form.addEventListener("submit", async (e) => {
body: JSON.stringify(payload) body: JSON.stringify(payload)
}); });
if (res.ok) { if (res.ok) {
alert("Bestellung gesendet."); showToast("Bestellung erfolgreich gesendet! Wir melden uns bei dir.", "success");
modal.classList.remove("open"); modal.classList.remove("open");
document.getElementById("detailModal").classList.remove("open"); document.getElementById("detailModal").classList.remove("open");
form.reset(); form.reset();
setField("fMenge", 1); setField("fMenge", 1);
} else { } else {
alert("Fehler beim Senden der Bestellung."); showToast("Fehler beim Senden der Bestellung. Bitte versuche es erneut.", "error");
} }
}); });