Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Telegram Bot Wizardry</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <style> | |
| .undefined-theme { | |
| --primary: #6b46c1; | |
| --secondary: #f6ad55; | |
| } | |
| .dark .undefined-theme { | |
| --primary: #9f7aea; | |
| --secondary: #f6ad55; | |
| } | |
| .bg-undefined-500 { | |
| background-color: var(--primary); | |
| } | |
| .text-undefined-500 { | |
| color: var(--primary); | |
| } | |
| .border-undefined-500 { | |
| border-color: var(--primary); | |
| } | |
| .bg-undefined-secondary { | |
| background-color: var(--secondary); | |
| } | |
| .text-undefined-secondary { | |
| color: var(--secondary); | |
| } | |
| </style> | |
| </head> | |
| <body class="undefined-theme min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-300"> | |
| <div id="vanta-bg" class="fixed inset-0 -z-10 opacity-20"></div> | |
| <header class="bg-white dark:bg-gray-800 shadow-sm"> | |
| <div class="container mx-auto px-4 py-6 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="zap" class="text-undefined-500 w-8 h-8"></i> | |
| <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Telegram Bot Wizardry</h1> | |
| </div> | |
| <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200"> | |
| <i data-feather="moon" class="hidden dark:block w-5 h-5"></i> | |
| <i data-feather="sun" class="dark:hidden w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-12"> | |
| <section class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden"> | |
| <div class="p-8"> | |
| <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Create Your Magical Telegram Bot</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="space-y-6"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-undefined-500 mb-3">1. Bot Configuration</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-1">Bot Name</label> | |
| <input type="text" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-undefined-500 focus:border-undefined-500 bg-white dark:bg-gray-700"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-1">Bot Token</label> | |
| <input type="password" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-undefined-500 focus:border-undefined-500 bg-white dark:bg-gray-700"> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="webhook" class="rounded text-undefined-500 focus:ring-undefined-500"> | |
| <label for="webhook" class="ml-2 text-gray-700 dark:text-gray-300">Enable Webhooks</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-undefined-500 mb-3">2. Color Scheme</h3> | |
| <div class="grid grid-cols-5 gap-3"> | |
| <div class="h-10 rounded-lg bg-undefined-500 cursor-pointer border-2 border-transparent hover:border-undefined-secondary"></div> | |
| <div class="h-10 rounded-lg bg-undefined-secondary cursor-pointer"></div> | |
| <div class="h-10 rounded-lg bg-gray-500 cursor-pointer"></div> | |
| <div class="h-10 rounded-lg bg-red-500 cursor-pointer"></div> | |
| <div class="h-10 rounded-lg bg-blue-500 cursor-pointer"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-undefined-500 mb-3">3. Features</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="commands" type="checkbox" class="rounded text-undefined-500 focus:ring-undefined-500"> | |
| </div> | |
| <label for="commands" class="ml-3 text-gray-700 dark:text-gray-300"> | |
| <span class="font-medium">Custom Commands</span> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Create /commands for your bot</p> | |
| </label> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="ai" type="checkbox" class="rounded text-undefined-500 focus:ring-undefined-500" checked> | |
| </div> | |
| <label for="ai" class="ml-3 text-gray-700 dark:text-gray-300"> | |
| <span class="font-medium">AI Integration</span> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Add smart responses with GPT</p> | |
| </label> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="payments" type="checkbox" class="rounded text-undefined-500 focus:ring-undefined-500"> | |
| </div> | |
| <label for="payments" class="ml-3 text-gray-700 dark:text-gray-300"> | |
| <span class="font-medium">Payment System</span> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Accept crypto/fiat payments</p> | |
| </label> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="analytics" type="checkbox" class="rounded text-undefined-500 focus:ring-undefined-500" checked> | |
| </div> | |
| <label for="analytics" class="ml-3 text-gray-700 dark:text-gray-300"> | |
| <span class="font-medium">Analytics Dashboard</span> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Track user interactions</p> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="text-xl font-semibold text-undefined-500 mb-3">4. Preview</h3> | |
| <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg"> | |
| <div class="bg-white dark:bg-gray-600 rounded-lg shadow-inner p-3 max-w-xs mx-auto"> | |
| <div class="flex items-center space-x-2 mb-3"> | |
| <div class="w-8 h-8 rounded-full bg-undefined-500 flex items-center justify-center"> | |
| <i data-feather="zap" class="w-4 h-4 text-white"></i> | |
| </div> | |
| <span class="font-medium">YourBot</span> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="bg-gray-200 dark:bg-gray-500 rounded-lg p-2 text-sm">Hello! I'm your new magical bot ✨</div> | |
| <div class="bg-undefined-500 text-white rounded-lg p-2 text-sm ml-auto max-w-[80%]">How can I help you today?</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10 flex justify-end"> | |
| <button class="px-6 py-3 bg-undefined-500 hover:bg-undefined-600 text-white font-medium rounded-lg shadow-md transition-colors flex items-center space-x-2"> | |
| <i data-feather="wand" class="w-5 h-5"></i> | |
| <span>Conjure My Bot</span> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="mt-16 max-w-4xl mx-auto"> | |
| <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Bot Creation Process</h2> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden"> | |
| <div class="p-6 space-y-6"> | |
| <div class="flex items-start space-x-4"> | |
| <div class="flex-shrink-0 w-10 h-10 rounded-full bg-undefined-500 text-white flex items-center justify-center"> | |
| <span>1</span> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Register with BotFather</h3> | |
| <p class="text-gray-600 dark:text-gray-300 mt-1">Start by creating a new bot with Telegram's BotFather to get your API token.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4"> | |
| <div class="flex-shrink-0 w-10 h-10 rounded-full bg-undefined-500 text-white flex items-center justify-center"> | |
| <span>2</span> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Configure Your Bot</h3> | |
| <p class="text-gray-600 dark:text-gray-300 mt-1">Set up commands, description, and profile picture for your bot.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4"> | |
| <div class="flex-shrink-0 w-10 h-10 rounded-full bg-undefined-500 text-white flex items-center justify-center"> | |
| <span>3</span> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Choose Hosting</h3> | |
| <p class="text-gray-600 dark:text-gray-300 mt-1">Decide between webhooks or long polling for your bot's communication method.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4"> | |
| <div class="flex-shrink-0 w-10 h-10 rounded-full bg-undefined-500 text-white flex items-center justify-center"> | |
| <span>4</span> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Implement Features</h3> | |
| <p class="text-gray-600 dark:text-gray-300 mt-1">Add your desired functionality like commands, AI responses, or payment systems.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4"> | |
| <div class="flex-shrink-0 w-10 h-10 rounded-full bg-undefined-500 text-white flex items-center justify-center"> | |
| <span>5</span> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Deploy & Monitor</h3> | |
| <p class="text-gray-600 dark:text-gray-300 mt-1">Launch your bot and monitor its performance with our analytics dashboard.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="bg-gray-100 dark:bg-gray-800 mt-16"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-2 mb-4 md:mb-0"> | |
| <i data-feather="zap" class="text-undefined-500 w-6 h-6"></i> | |
| <span class="text-lg font-medium text-gray-700 dark:text-gray-300">Telegram Bot Wizardry</span> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-undefined-500 transition-colors"> | |
| <i data-feather="github" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-undefined-500 transition-colors"> | |
| <i data-feather="twitter" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-undefined-500 transition-colors"> | |
| <i data-feather="mail" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700 text-center text-gray-500 dark:text-gray-400 text-sm"> | |
| <p>© 2023 Telegram Bot Wizardry. All spells reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Theme toggle | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| const html = document.documentElement; | |
| if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| html.classList.add('dark'); | |
| } else { | |
| html.classList.remove('dark'); | |
| } | |
| themeToggle.addEventListener('click', () => { | |
| html.classList.toggle('dark'); | |
| localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light'); | |
| }); | |
| // Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: getComputedStyle(document.documentElement).getPropertyValue('--primary').trim(), | |
| backgroundColor: "transparent", | |
| size: 0.8 | |
| }); | |
| // Feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |