From 488bf1a720506781c7bb1b539e8eb285b4b2d934 Mon Sep 17 00:00:00 2001
From: M_Viper <admin@m-viper.de>
Date: Fri, 26 Dec 2025 17:00:51 +0000
Subject: [PATCH] public/index.html aktualisiert

---
 public/index.html | 139 +++++++++++++++++++++-------------------------
 1 file changed, 62 insertions(+), 77 deletions(-)
diff --git a/public/index.html b/public/index.html
index bfb44e1..bd56db9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,101 +3,86 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Raymand - Telegram Bot Frontend</title>
+    <title>Raymand - Telegram Bot</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
     <header>
-        <h1>Willkommen beim Raymand - Wunsch Telegram Bot!</h1>
-        <nav>
-            <ul>
-                <li><a href="index.html">Home</a></li>
-                <li><a href="help.html">Hilfe</a></li>
-                <li><a href="contact.html">Kontakt</a></li>
-            </ul>
-        </nav>
+        <div class="header-content">
+            <div class="logo">🤖 Raymand</div>
+            <nav>
+                <ul>
+                    <li><a href="index.html" class="active">Home</a></li>
+                    <li><a href="help.html">Hilfe</a></li>
+                    <li><a href="contact.html">Kontakt</a></li>
+                </ul>
+            </nav>
+        </div>
     </header>
 
-    <div class="container">
-        <h2 class="welcome-title">Hallo und herzlich willkommen!</h2>
-        <p>Wir freuen uns, dass du hier bist! Mit unserem Raymand - Telegram Bot kannst du dir ganz einfach deine Lieblingsfilme, Serien, PC-Spiele, Anime, Disney-Filme und vieles mehr wünschen.</p>
-    </br>
-        <p>Gib deinen Wunsch unten ein, um ihn direkt zu senden:</p>
+    <main class="container">
+        <div class="card">
+            <h2 class="welcome-title">Wunsch absenden</h2>
+            <p class="subtitle">Sag uns, was du sehen möchtest! Wähle eine Kategorie und gib den Titel ein.</p>
 
+            <form id="wishForm">
+                <div class="form-group">
+                    <label for="category">Kategorie</label>
+                    <select id="category" required>
+                        <option value="" disabled selected>Wähle eine Kategorie...</option>
+                        <option value="Film">🎬 Film</option>
+                        <option value="4K Filme">📀 4K Filme</option>
+                        <option value="Serie">📺 Serie</option>
+                        <option value="Anime">📖 Anime</option>
+                        <option value="Disney">✨ Disney</option>
+                        <option value="Medizin">⚕️ Medizin</option>
+                        <option value="Survival">🏕️ Survival</option>
+                        <option value="WWE">🏆 WWE</option>
+                        <option value="Musik">🎵 Musik</option>
+                        <option value="Bollywood">🎬 Bollywood</option>
+                        <option value="Hörspiele & Comics">🎧 Hörspiele & Comics</option>
+                        <option value="PC Games">💻 PC Games</option>
+                    </select>
+                </div>
 
+                <div class="form-group">
+                    <label for="link">Link (Optional)</label>
+                    <input type="url" id="link" placeholder="https://cover.spotify.com/...">
+                </div>
 
-        <form id="wishForm">
-            <label for="category">Kategorie:</label>
-            <select id="category" required>
-                <option value="Film">Film</option>
-                <option value="Serie">Serie</option>
-                <option value="Anime">Anime</option>
-                <option value="Disney">Disney</option>
-                <option value="Medizin">Medizin</option>
-                <option value="Survival">Survival</option>
-                <option value="WWE">WWE</option>
-                <option value="Musik">Musik</option>
-                <option value="Bollywood">Bollywood</option>
-                <option value="Hörspiele & Comics">Hörspiele & Comics</option>
-                <option value="PC Games">PC Games</option>
-            </select>
+                <div class="form-group">
+                    <label for="title">Titel</label>
+                    <input type="text" id="title" required placeholder="z.B. Inception">
+                </div>
 
-            <label for="link">Link (optional):</label>
-            <input type="url" id="link" placeholder="https://example.com">
-
-            <label for="title">Titel:</label>
-            <input type="text" id="title" required placeholder="Gib den Titel deines Wunsches ein">
-
-            <button type="submit">Wunsch senden</button>
-        </form>
-        <div id="message"></div>
-    </div>
+                <button type="submit" id="submitBtn" class="btn-primary">Wunsch senden ✨</button>
+            </form>
+        </div>
+    </main>
 
     <footer>
         <div class="footer-content">
-            <p class="bot-version">Bot-Version: 1.4.1</p> <!-- Bot-Version links -->
+            <div class="footer-left">
+                <p class="bot-version">v2.10</p>
+            </div>
             <div class="footer-center">
                 <p>&copy; 2024 M_Viper. Alle Rechte vorbehalten.</p>
             </div>
+            <div class="footer-right">
+                <a href="https://git.viper.ipv64.net" target="_blank" aria-label="Gitea">💻</a>
+            </div>
         </div>
     </footer>
 
+    <div class="modal-overlay" id="popupOverlay"></div>
+    <div class="modal" id="popup">
+        <div class="modal-icon" id="modalIcon">✅</div>
+        <h3 id="modalTitle">Status</h3>
+        <p id="popupMessage"></p>
+        <button class="btn-secondary" id="closePopup">Schließen</button>
+    </div>
+
     <script src="script.js"></script>
-    <script>
-        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;
-
-            // Nachricht formatieren
-            const message = `🎬 *Ein neuer Wunsch ist eingegangen!*\n\n🔹 Kategorie: ${category}\n\n🔸 Titel: ${title}\n\n🔗 Link: ${link || 'Kein Link'}`;
-
-            // Telegram Bot API-URL
-            const telegramBotUrl = `https://api.telegram.org/bot${YOUR_TELEGRAM_TOKEN}/sendMessage`;
-
-            const response = await fetch(telegramBotUrl, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({
-                    chat_id: YOUR_ALLOWED_CHAT_ID,
-                    text: message,
-                    parse_mode: 'Markdown' // Für Markdown-Formatierung
-                })
-            });
-
-            const messageDiv = document.getElementById('message');
-            if (response.ok) {
-                messageDiv.textContent = 'Wunsch erfolgreich gesendet!';
-                messageDiv.style.color = 'green';
-            } else {
-                messageDiv.textContent = 'Fehler beim Senden des Wunsches. Bitte versuche es erneut.';
-                messageDiv.style.color = 'red';
-            }
-        });
-    </script>
 </body>
-</html>
+</html>
\ No newline at end of file
