public/script.js aktualisiert

public/script.js

@@ -1,29 +1,68 @@
-document.getElementById('wishForm').addEventListener('submit', async (event) => {
+document.getElementById('wishForm').addEventListener('submit', async (event) => {
-    event.preventDefault();
+    event.preventDefault();
-
+
-    const category = document.getElementById('category').value;
+    const category = document.getElementById('category').value;
-    const link = document.getElementById('link').value;
+    const link = document.getElementById('link').value;
-    const title = document.getElementById('title').value;
+    const title = document.getElementById('title').value;
-
+    const submitBtn = document.getElementById('submitBtn');
-    const responseMessage = document.getElementById('responseMessage');
+
-
+    // Modal-Elemente
-    // Senden des Wunsches an den Telegram-Bot (API-Endpunkt anpassen)
+    const popup = document.getElementById('popup');
-    const response = await fetch('/api/sendWish', {
+    const popupMessage = document.getElementById('popupMessage');
-        method: 'POST',
+    const popupOverlay = document.getElementById('popupOverlay');
-        headers: {
+    const modalIcon = document.getElementById('modalIcon');
-            'Content-Type': 'application/json'
+    const modalTitle = document.getElementById('modalTitle');
-        },
+
-        body: JSON.stringify({ category, link, title })
+    // Button State ändern (Lade-Animation)
-    });
+    const originalBtnText = submitBtn.textContent;
-
+    submitBtn.textContent = 'Sende... ⏳';
-    if (response.ok) {
+    submitBtn.disabled = true;
-        responseMessage.textContent = 'Dein Wunsch wurde gesendet!';
+    submitBtn.style.opacity = '0.7';
-        responseMessage.style.color = 'green';
+
-    } else {
+    try {
-        responseMessage.textContent = 'Ein Fehler ist aufgetreten. Bitte versuche es erneut.';
+        const response = await fetch('/api/sendWish', {
-        responseMessage.style.color = 'red';
+            method: 'POST',
-    }
+            headers: {
-
+                'Content-Type': 'application/json'
-    // Formular zurücksetzen
+            },
-    event.target.reset();
+            body: JSON.stringify({ category, link, title })
-});
+        });
+
+        if (response.ok) {
+            modalIcon.textContent = '✅';
+            modalTitle.textContent = 'Erfolgreich!';
+            popupMessage.textContent = 'Dein Wunsch wurde an den Bot weitergeleitet.';
+        } else {
+            throw new Error('Server-Fehler');
+        }
+    } 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';
+});