M_Viper/telegram-film-wunsch-bot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

public/index.html aktualisiert

Browse Source
This commit is contained in:
M_Viper
2025-12-26 17:00:51 +00:00
parent 009c4a5fe3
commit 488bf1a720
1 changed files with 62 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
public/index.html
View File

@@ -3,101 +3,86 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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"> <link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body>
<header> <header>
<h1>Willkommen beim Raymand - Wunsch Telegram Bot!</h1> <div class="header-content">
<nav> <div class="logo">🤖 Raymand</div>
<ul> <nav>
<li><a href="index.html">Home</a></li> <ul>
<li><a href="help.html">Hilfe</a></li> <li><a href="index.html" class="active">Home</a></li>
<li><a href="contact.html">Kontakt</a></li> <li><a href="help.html">Hilfe</a></li>
</ul> <li><a href="contact.html">Kontakt</a></li>
</nav> </ul>
</nav>
</div>
</header> </header>
<div class="container"> <main class="container">
<h2 class="welcome-title">Hallo und herzlich willkommen!</h2> <div class="card">
<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> <h2 class="welcome-title">Wunsch absenden</h2>
</br> <p class="subtitle">Sag uns, was du sehen möchtest! Wähle eine Kategorie und gib den Titel ein.</p>
<p>Gib deinen Wunsch unten ein, um ihn direkt zu senden:</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"> <div class="form-group">
<label for="category">Kategorie:</label> <label for="title">Titel</label>
<select id="category" required> <input type="text" id="title" required placeholder="z.B. Inception">
<option value="Film">Film</option> </div>
<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> <button type="submit" id="submitBtn" class="btn-primary">Wunsch senden ✨</button>
<input type="url" id="link" placeholder="https://example.com"> </form>
</div>
<label for="title">Titel:</label> </main>
<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> <footer>
<div class="footer-content"> <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"> <div class="footer-center">
<p>&copy; 2024 M_Viper. Alle Rechte vorbehalten.</p> <p>&copy; 2024 M_Viper. Alle Rechte vorbehalten.</p>
</div> </div>
<div class="footer-right">
<a href="https://git.viper.ipv64.net" target="_blank" aria-label="Gitea">💻</a>
</div>
</div> </div>
</footer> </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 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> </body>
</html> </html>