From 8ee1015ac2f8a658361328541161a73e919caa2d Mon Sep 17 00:00:00 2001 From: M_Viper Date: Mon, 14 Oct 2024 19:54:12 +0000 Subject: [PATCH] Dateien nach "public" hochladen --- public/contact.html | 51 +++++++++++ public/help.html | 60 ++++++++++++ public/index.html | 103 +++++++++++++++++++++ public/script.js | 29 ++++++ public/styles.css | 219 ++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 462 insertions(+) create mode 100644 public/contact.html create mode 100644 public/help.html create mode 100644 public/index.html create mode 100644 public/script.js create mode 100644 public/styles.css diff --git a/public/contact.html b/public/contact.html new file mode 100644 index 0000000..111e112 --- /dev/null +++ b/public/contact.html @@ -0,0 +1,51 @@ + + + + + + Kontakt - Telegram Bot + + + +
+

Kontakt

+ +
+ +
+

Kontaktinformationen

+

Wenn du Fragen oder Anregungen hast, kannst du uns hier kontaktieren:

+ +
+ Telegram + Kontaktformular + Gitea +
+
+
+

Wir freuen uns über dein Feedback!

+
+ + + + + + diff --git a/public/help.html b/public/help.html new file mode 100644 index 0000000..3e6b1c4 --- /dev/null +++ b/public/help.html @@ -0,0 +1,60 @@ + + + + + + Hilfe - Telegram Bot Frontend + + + +
+

Hilfe zum Wunsch Telegram Bot

+ +
+ +
+

📋 Hilfemenü

+

Hier ist eine einfache Anleitung, wie du einen Wunsch äußern kannst:

+
+
+ 1️⃣ +

Verwende den Befehl /wunsch, um den Wunschprozess zu starten.

+
+
+ 2️⃣ +

Wähle eine Kategorie aus, die deinem Wunsch entspricht. 🗂️

+
+
+ 3️⃣ +

Du wirst aufgefordert, einen Link zum Cover oder Spotify anzugeben (dies ist optional). 📎

+
+
+ 4️⃣ +

Gib den Titel deines Wunsches ein. ✍️

+
+
+ 5️⃣ +

Dein Wunsch wird an die Gruppe weitergeleitet und du erhältst eine Bestätigung. ✅

+
+
+ Weitere Informationen +
+ + + + + + diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..fd5c065 --- /dev/null +++ b/public/index.html @@ -0,0 +1,103 @@ + + + + + + Telegram Bot Frontend + + + +
+

Willkommen beim Wunsch Telegram Bot!

+ +
+ +
+

Hallo und herzlich willkommen!

+

Wir freuen uns, dass du hier bist! Mit unserem Telegram Bot kannst du dir ganz einfach deine Lieblingsfilme, Serien, PC-Spiele, Anime, Disney-Filme und vieles mehr wünschen.

+
+

Gib deinen Wunsch unten ein, um ihn direkt zu senden:

+ + + +
+ + + + + + + + + + +
+
+
+ + + + + + + diff --git a/public/script.js b/public/script.js new file mode 100644 index 0000000..c286676 --- /dev/null +++ b/public/script.js @@ -0,0 +1,29 @@ +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(); +}); diff --git a/public/styles.css b/public/styles.css new file mode 100644 index 0000000..cdf5be6 --- /dev/null +++ b/public/styles.css @@ -0,0 +1,219 @@ +/* styles.css */ + +/* Allgemeine Styles */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: 'Arial', sans-serif; +} + +html, body { + height: 100%; /* Damit das Body-Element die volle Höhe einnimmt */ +} + +body { + background-color: #f4f4f4; + color: #333; + line-height: 1.6; + display: flex; /* Flexbox aktivieren */ + flex-direction: column; /* Vertikale Anordnung */ +} + +/* Header Styles */ +header { + background: #0078ff; + color: white; + padding: 20px 0; + text-align: center; +} + +header h1 { + margin-bottom: 10px; +} + +nav ul { + list-style: none; +} + +nav ul li { + display: inline; + margin: 0 15px; +} + +nav a { + color: white; + text-decoration: none; + font-weight: bold; +} + +nav a:hover { + text-decoration: underline; +} + +/* Container Styles */ +.container { + flex: 1; /* Ermöglicht, dass der Container den verbleibenden Platz einnimmt */ + max-height: 510px; /* Maximale Höhe gesetzt */ + max-width: 800px; + margin: 100px auto 20px; /* Erhöhe den oberen Abstand auf 40px */ + padding: 20px; + background: white; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +.container-2 { + flex: 1; /* Ermöglicht, dass der Container den verbleibenden Platz einnimmt */ + max-height: 300px; /* Maximale Höhe gesetzt */ + max-width: 800px; + margin: 100px auto 20px; /* Erhöhe den oberen Abstand auf 40px */ + padding: 20px; + background: white; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + + +h2 { + margin-bottom: 15px; + color: #0078ff; +} + +/* Form Styles */ +form { + display: flex; + flex-direction: column; +} + +label { + margin: 10px 0 5px; +} + +select, input[type="url"], input[type="text"] { + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + margin-bottom: 15px; +} + +button { + padding: 10px; + background-color: #0078ff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background 0.3s; +} + +button:hover { + background-color: #005bb5; +} + +/* Message Styles */ +#message { + margin-top: 15px; + font-weight: bold; +} + +/* Footer Styles */ +footer { + display: flex; /* Flexbox für die Anordnung der Inhalte */ + justify-content: center; /* Zentriert den Inhalt horizontal */ + align-items: center; /* Vertikale Zentrierung */ + padding: 15px; /* Innenabstand */ + background: #0078ff; /* Hintergrundfarbe */ + color: white; /* Schriftfarbe */ + width: 100%; + margin-top: auto; /* Fügt oben einen automatischen Margin hinzu, um den Footer nach unten zu drücken */ +} + +.footer-content { + display: flex; /* Flexbox für die inneren Inhalte */ + justify-content: space-between; /* Abstand zwischen Bot-Version und mittigem Inhalt */ + width: 100%; /* Macht den Container 100% breit */ +} + +.footer-center { + text-align: center; /* Zentriert den Text in diesem Container */ + flex-grow: 1; /* Ermöglicht, dass dieser Container den verfügbaren Platz einnimmt */ +} + +.bot-version { + margin-right: auto; /* Schiebt die Bot-Version nach links */ + font-style: italic; /* Kursive Schrift für einen gravierten Effekt */ + color: rgba(255, 255, 255, 0.8); /* Leicht durchscheinend für einen Gravureffekt */ + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Schatten für den Gravureffekt */ +} + +.welcome-title { + text-align: center; /* Textzentrierung */ + margin-bottom: 15px; /* Abstand nach unten */ +} + +/* Step Styles */ +.steps { + margin-top: 20px; + padding: 10px; + border: 1px solid #0078ff; + border-radius: 8px; + background: #f9f9f9; /* Hellgraue Hintergrundfarbe */ +} + +.step { + display: flex; + align-items: center; + margin-bottom: 15px; +} + +.step-number { + font-size: 24px; + margin-right: 10px; + color: #0078ff; /* Farbakzent für die Schrittzahl */ +} + +.step p { + margin: 0; + color: #555; /* Dunkelgraue Schriftfarbe für bessere Lesbarkeit */ +} + +/* Button Styles */ +.button { + display: inline-block; + padding: 10px 20px; + margin-top: 20px; + background-color: #0078ff; /* Blau als Hintergrundfarbe */ + color: white; + text-decoration: none; + border-radius: 5px; + text-align: center; + transition: background 0.3s; +} + +.button:hover { + background-color: #005bb5; /* Dunkleres Blau bei Hover */ +} + +/* Button Styles */ +.button-container { + margin-top: 20px; /* Abstand nach oben für die Button-Gruppe */ + display: flex; /* Flexbox aktivieren für eine horizontale Anordnung */ + justify-content: center; /* Buttons zentrieren */ + gap: 10px; /* Abstand zwischen den Buttons */ +} + +.button { + display: inline-block; + padding: 10px 20px; + background-color: #0078ff; /* Blau als Hintergrundfarbe */ + color: white; + text-decoration: none; + border-radius: 5px; + text-align: center; + transition: background 0.3s; +} + +.button:hover { + background-color: #005bb5; /* Dunkleres Blau bei Hover */ +}