104 lines
4.0 KiB
HTML
104 lines
4.0 KiB
HTML
|
<!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>
|