Dateien nach "public" hochladen
This commit is contained in:
parent
c96391cee8
commit
8ee1015ac2
|
|
@ -0,0 +1,51 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Kontakt - Telegram Bot</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Kontakt</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>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container-2">
|
||||||
|
<h2>Kontaktinformationen</h2>
|
||||||
|
<p>Wenn du Fragen oder Anregungen hast, kannst du uns hier kontaktieren:</p>
|
||||||
|
|
||||||
|
<div class="button-container">
|
||||||
|
<a href="https://t.me/M_Viper04" class="button">Telegram</a>
|
||||||
|
<a href="https://m-viper.de/kontakt.html" class="button">Kontaktformular</a>
|
||||||
|
<a href="https://git.viper.ipv64.net" class="button">Gitea</a>
|
||||||
|
</div>
|
||||||
|
</br>
|
||||||
|
</br>
|
||||||
|
<p>Wir freuen uns über dein Feedback!</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="footer-content">
|
||||||
|
<p class="bot-version">Bot-Version: 1.4.0</p> <!-- Bot-Version links -->
|
||||||
|
<div class="footer-center">
|
||||||
|
<p>© 2024 M_Viper. Alle Rechte vorbehalten.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Dynamisch den Kontaktlink setzen (falls nötig, kannst du diese Links auch hier ändern)
|
||||||
|
document.getElementById('contact-email').href = 'mailto:admin@m-viper.de';
|
||||||
|
document.getElementById('contact-telegram').href = 'https://t.me/M_Viper04';
|
||||||
|
document.getElementById('contact-telegram').textContent = '@M_Viper04';
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Hilfe - Telegram Bot Frontend</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Hilfe zum 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>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="welcome-title">📋 Hilfemenü</h2>
|
||||||
|
<p>Hier ist eine einfache Anleitung, wie du einen Wunsch äußern kannst:</p>
|
||||||
|
<div class="steps">
|
||||||
|
<div class="step">
|
||||||
|
<span class="step-number">1️⃣</span>
|
||||||
|
<p>Verwende den Befehl <code>/wunsch</code>, um den Wunschprozess zu starten.</p>
|
||||||
|
</div>
|
||||||
|
<div class="step">
|
||||||
|
<span class="step-number">2️⃣</span>
|
||||||
|
<p>Wähle eine Kategorie aus, die deinem Wunsch entspricht. 🗂️</p>
|
||||||
|
</div>
|
||||||
|
<div class="step">
|
||||||
|
<span class="step-number">3️⃣</span>
|
||||||
|
<p>Du wirst aufgefordert, einen Link zum Cover oder Spotify anzugeben (dies ist optional). 📎</p>
|
||||||
|
</div>
|
||||||
|
<div class="step">
|
||||||
|
<span class="step-number">4️⃣</span>
|
||||||
|
<p>Gib den Titel deines Wunsches ein. ✍️</p>
|
||||||
|
</div>
|
||||||
|
<div class="step">
|
||||||
|
<span class="step-number">5️⃣</span>
|
||||||
|
<p>Dein Wunsch wird an die Gruppe weitergeleitet und du erhältst eine Bestätigung. ✅</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="https://git.viper.ipv64.net/M_Viper/telegram-film-wunsch-bot/src/branch/main/README.md" class="button" target="_blank">Weitere Informationen</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="footer-content">
|
||||||
|
<p class="bot-version">Bot-Version: 1.4.0</p> <!-- Bot-Version links -->
|
||||||
|
<div class="footer-center">
|
||||||
|
<p>© 2024 M_Viper. Alle Rechte vorbehalten.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,103 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Telegram Bot Frontend</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Willkommen beim 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>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="welcome-title">Hallo und herzlich willkommen!</h2>
|
||||||
|
<p>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.</p>
|
||||||
|
</br>
|
||||||
|
<p>Gib deinen Wunsch unten ein, um ihn direkt zu senden:</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="footer-content">
|
||||||
|
<p class="bot-version">Bot-Version: 1.4.0</p> <!-- Bot-Version links -->
|
||||||
|
<div class="footer-center">
|
||||||
|
<p>© 2024 M_Viper. Alle Rechte vorbehalten.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
@ -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();
|
||||||
|
});
|
||||||
|
|
@ -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 */
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue