public/script.js aktualisiert

2025-12-26 17:01:11 +00:00
parent 488bf1a720
commit 6802ce8b9d
1 changed files with 68 additions and 29 deletions
--- a/public/script.js
+++ b/public/script.js
@@ -1,29 +1,68 @@
-document.getElementById('wishForm').addEventListener('submit', async (event) => {
-    event.preventDefault();
-
-    const category = document.getElementById('category').value;
-    const link = document.getElementById('link').value;
-    const title = document.getElementById('title').value;
-
-    const responseMessage = document.getElementById('responseMessage');
-
-    // Senden des Wunsches an den Telegram-Bot (API-Endpunkt anpassen)
-    const response = await fetch('/api/sendWish', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ category, link, title })
-    });
-
-    if (response.ok) {
-        responseMessage.textContent = 'Dein Wunsch wurde gesendet!';
-        responseMessage.style.color = 'green';
-    } else {
-        responseMessage.textContent = 'Ein Fehler ist aufgetreten. Bitte versuche es erneut.';
-        responseMessage.style.color = 'red';
-    }
-
-    // Formular zurücksetzen
-    event.target.reset();
-});
+document.getElementById('wishForm').addEventListener('submit', async (event) => {
+    event.preventDefault();
+
+    const category = document.getElementById('category').value;
+    const link = document.getElementById('link').value;
+    const title = document.getElementById('title').value;
+    const submitBtn = document.getElementById('submitBtn');
+
+    // 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');
+
+    // 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: {
+                'Content-Type': 'application/json'
+            },
+            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';
+});