public/script.js aktualisiert

public/script.js

@@ -4,10 +4,22 @@ document.getElementById('wishForm').addEventListener('submit', async (event) =>
     const category = document.getElementById('category').value;
     const link = document.getElementById('link').value;
     const title = document.getElementById('title').value;
+    const submitBtn = document.getElementById('submitBtn');
 
-    const responseMessage = document.getElementById('responseMessage');
+    // Modal-Elemente
+    const popup = document.getElementById('popup');
+    const popupMessage = document.getElementById('popupMessage');
+    const popupOverlay = document.getElementById('popupOverlay');
+    const modalIcon = document.getElementById('modalIcon');
+    const modalTitle = document.getElementById('modalTitle');
 
-    // Senden des Wunsches an den Telegram-Bot (API-Endpunkt anpassen)
+    // Button State ändern (Lade-Animation)
+    const originalBtnText = submitBtn.textContent;
+    submitBtn.textContent = 'Sende... ⏳';
+    submitBtn.disabled = true;
+    submitBtn.style.opacity = '0.7';
+
+    try {
         const response = await fetch('/api/sendWish', {
             method: 'POST',
             headers: {
@@ -17,13 +29,40 @@ document.getElementById('wishForm').addEventListener('submit', async (event) =>
         });
 
         if (response.ok) {
-        responseMessage.textContent = 'Dein Wunsch wurde gesendet!';
+            modalIcon.textContent = '✅';
-        responseMessage.style.color = 'green';
+            modalTitle.textContent = 'Erfolgreich!';
+            popupMessage.textContent = 'Dein Wunsch wurde an den Bot weitergeleitet.';
         } else {
-        responseMessage.textContent = 'Ein Fehler ist aufgetreten. Bitte versuche es erneut.';
+            throw new Error('Server-Fehler');
-        responseMessage.style.color = 'red';
         }
+    } catch (error) {
+        modalIcon.textContent = '⚠️';
+        modalTitle.textContent = 'Fehler';
+        popupMessage.textContent = 'Es ist ein Fehler aufgetreten. Bitte versuche es später erneut.';
+        console.error(error);
+    } finally {
+        // Button Reset
+        submitBtn.textContent = originalBtnText;
+        submitBtn.disabled = false;
+        submitBtn.style.opacity = '1';
+
+        // Popup anzeigen
+        popup.style.display = 'block';
+        popupOverlay.style.display = 'block';
         
         // Formular zurücksetzen
         event.target.reset();
+    }
+});
+
+// Popup schließen
+document.getElementById('closePopup').addEventListener('click', () => {
+    document.getElementById('popup').style.display = 'none';
+    document.getElementById('popupOverlay').style.display = 'none';
+});
+
+// Schließen beim Klick auf Overlay
+document.getElementById('popupOverlay').addEventListener('click', () => {
+    document.getElementById('popup').style.display = 'none';
+    document.getElementById('popupOverlay').style.display = 'none';
 });