From 6802ce8b9d3ac74948143667782d468ad076326a Mon Sep 17 00:00:00 2001 From: M_Viper Date: Fri, 26 Dec 2025 17:01:11 +0000 Subject: [PATCH] public/script.js aktualisiert --- public/script.js | 97 +++++++++++++++++++++++++++++++++--------------- 1 file changed, 68 insertions(+), 29 deletions(-) diff --git a/public/script.js b/public/script.js index c286676..80c9140 100644 --- 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'; +}); \ No newline at end of file