اصنع لي بوت تليكرام صانع بوتات بلغة بايثون ، المتطلبات :اريد واجهة آدمن بسيطة ومفهومة يكون فيها اذعار دخول الأشخاص +حظر شخص معين +اذاعة للجميع +اريد واجهة مستخدم مفهومة وسهلة جدا . وأريد ان يكون فيه البوت اكثر من 50 قالب بوتات ، حين الضغط على قالب بوت معين يطلب التوكن حين اعطسة التوكن يعمل البوت
fe0a7c5 verified | <html lang="en" class="undefined"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Telegram Bot Maker</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| undefined: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| } | |
| .bot-card { | |
| transition: all 0.2s ease; | |
| } | |
| .bot-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .admin-panel { | |
| border-left: 3px solid rgba(14, 165, 233, 1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-undefined-50 min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-white bg-opacity-80 backdrop-blur-md shadow-sm sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="box" class="text-undefined-600 h-8 w-8"></i> | |
| <span class="ml-2 text-xl font-bold text-undefined-700">PythonSandbox Pyramids</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="/" class="text-gray-500 hover:text-undefined-700 px-3 py-2 rounded-md text-sm font-medium">Home</a> | |
| <a href="editor.html" class="text-gray-500 hover:text-undefined-700 px-3 py-2 rounded-md text-sm font-medium">Editor</a> | |
| <a href="telegram-bot-maker.html" class="bg-undefined-100 text-undefined-700 px-3 py-2 rounded-md text-sm font-medium">Bot Maker</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Admin Panel --> | |
| <div class="lg:w-1/4 bg-white rounded-xl shadow-md p-6 admin-panel"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Admin Panel</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-700 mb-2">Bot Status</h3> | |
| <div class="bg-undefined-50 p-3 rounded-md"> | |
| <div class="flex items-center gap-2"> | |
| <div class="h-2 w-2 rounded-full bg-green-500"></div> | |
| <span class="text-sm">Running</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-700 mb-2">Recent Activity</h3> | |
| <div class="bg-gray-50 p-3 rounded-md max-h-48 overflow-y-auto"> | |
| <div class="space-y-2"> | |
| <div class="text-sm"> | |
| <span class="font-medium">@user1</span> started bot | |
| </div> | |
| <div class="text-sm"> | |
| <span class="font-medium">@user2</span> was banned | |
| </div> | |
| <div class="text-sm"> | |
| Broadcast sent to 150 users | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-700 mb-2">Quick Actions</h3> | |
| <div class="space-y-2"> | |
| <button class="w-full bg-undefined-100 hover:bg-undefined-200 text-undefined-700 px-3 py-2 rounded text-sm font-medium flex items-center gap-2"> | |
| <i data-feather="users"></i> Manage Users | |
| </button> | |
| <button class="w-full bg-undefined-100 hover:bg-undefined-200 text-undefined-700 px-3 py-2 rounded text-sm font-medium flex items-center gap-2"> | |
| <i data-feather="send"></i> Send Broadcast | |
| </button> | |
| <button class="w-full bg-undefined-100 hover:bg-undefined-200 text-undefined-700 px-3 py-2 rounded text-sm font-medium flex items-center gap-2"> | |
| <i data-feather="settings"></i> Bot Settings | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bot Templates --> | |
| <div class="lg:w-3/4"> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800 mb-2">Telegram Bot Maker</h1> | |
| <p class="text-gray-600">Create your own Telegram bot with our 50+ templates. Just select a template, provide your bot token, and deploy!</p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <!-- Bot Template Cards --> | |
| <div class="bot-card bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-4"> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <div class="bg-undefined-100 p-2 rounded-full"> | |
| <i data-feather="shopping-cart" class="text-undefined-600 h-5 w-5"></i> | |
| </div> | |
| <h3 class="font-medium">E-Commerce Bot</h3> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-4">Complete store management with product catalog and payments</p> | |
| <button class="w-full bg-undefined-500 hover:bg-undefined-600 text-white px-3 py-2 rounded text-sm font-medium"> | |
| Use Template | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bot-card bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-4"> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <div class="bg-undefined-100 p-2 rounded-full"> | |
| <i data-feather="message-square" class="text-undefined-600 h-5 w-5"></i> | |
| </div> | |
| <h3 class="font-medium">Chat Bot</h3> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-4">AI-powered conversational bot with natural language processing</p> | |
| <button class="w-full bg-undefined-500 hover:bg-undefined-600 text-white px-3 py-2 rounded text-sm font-medium"> | |
| Use Template | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bot-card bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-4"> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <div class="bg-undefined-100 p-2 rounded-full"> | |
| <i data-feather="calendar" class="text-undefined-600 h-5 w-5"></i> | |
| </div> | |
| <h3 class="font-medium">Reminder Bot</h3> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-4">Schedule reminders and notifications for users</p> | |
| <button class="w-full bg-undefined-500 hover:bg-undefined-600 text-white px-3 py-2 rounded text-sm font-medium"> | |
| Use Template | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bot-card bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-4"> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <div class="bg-undefined-100 p-2 rounded-full"> | |
| <i data-feather="file-text" class="text-undefined-600 h-5 w-5"></i> | |
| </div> | |
| <h3 class="font-medium">Content Bot</h3> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-4">Automated content delivery system</p> | |
| <button class="w-full bg-undefined-500 hover:bg-undefined-600 text-white px-3 py-2 rounded text-sm font-medium"> | |
| Use Template | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bot-card bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-4"> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <div class="bg-undefined-100 p-2 rounded-full"> | |
| <i data-feather="award" class="text-undefined-600 h-5 w-5"></i> | |
| </div> | |
| <h3 class="font-medium">Quiz Bot</h3> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-4">Interactive quizzes and polls</p> | |
| <button class="w-full bg-undefined-500 hover:bg-undefined-600 text-white px-3 py-2 rounded text-sm font-medium"> | |
| Use Template | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bot-card bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-4"> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <div class="bg-undefined-100 p-2 rounded-full"> | |
| <i data-feather="more-horizontal" class="text-undefined-600 h-5 w-5"></i> | |
| </div> | |
| <h3 class="font-medium">View All 50+ Templates</h3> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-4">Explore our complete collection of bot templates</p> | |
| <button class="w-full bg-undefined-500 hover:bg-undefined-600 text-white px-3 py-2 rounded text-sm font-medium"> | |
| Browse Templates | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Token Modal (hidden by default) --> | |
| <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="token-modal"> | |
| <div class="bg-white rounded-xl shadow-xl p-6 w-full max-w-md"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Enter Bot Token</h3> | |
| <button onclick="document.getElementById('token-modal').classList.add('hidden')"> | |
| <i data-feather="x" class="text-gray-500"></i> | |
| </button> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="bot-token" class="block text-sm font-medium text-gray-700 mb-1">Bot Token</label> | |
| <input type="text" id="bot-token" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-undefined-500 focus:border-undefined-500" placeholder="123456789:ABC-DEF1234ghIkl-zyx57W2v1u123ew11"> | |
| </div> | |
| <div class="flex justify-end gap-2"> | |
| <button onclick="document.getElementById('token-modal').classList.add('hidden')" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"> | |
| Cancel | |
| </button> | |
| <button onclick="deployBot()" class="px-4 py-2 bg-undefined-500 hover:bg-undefined-600 rounded-md text-sm font-medium text-white"> | |
| Deploy Bot | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Feather icons | |
| feather.replace(); | |
| // Show token modal when template button is clicked | |
| document.querySelectorAll('.bot-card button').forEach(button => { | |
| button.addEventListener('click', () => { | |
| document.getElementById('token-modal').classList.remove('hidden'); | |
| }); | |
| }); | |
| // Simulate bot deployment | |
| function deployBot() { | |
| const token = document.getElementById('bot-token').value; | |
| if (!token) { | |
| alert('Please enter a valid bot token'); | |
| return; | |
| } | |
| document.getElementById('token-modal').classList.add('hidden'); | |
| alert('Bot deployment started! You will receive a notification when your bot is ready.'); | |
| } | |
| </script> | |
| </body> | |
| </html> |