telegram-film-wunsch-bot/public/index.html

104 lines
3.9 KiB
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Raymand - Telegram Bot Frontend</title>
<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>
</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>
<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.1</p> <!-- Bot-Version links -->
<div class="footer-center">
<p>&copy; 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>