| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Master AI Agent - Telegram Marketing Manager</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #6e8efb, #a777e3); |
| } |
| .agent-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .sidebar { |
| transition: all 0.3s ease; |
| } |
| .collapsed { |
| width: 64px; |
| overflow: hidden; |
| } |
| .chart-container { |
| height: 300px; |
| } |
| #agentCanvas { |
| width: 100%; |
| height: 100%; |
| } |
| .telegram-bg { |
| background-color: #0088cc; |
| } |
| .telegram-text { |
| color: #0088cc; |
| } |
| .telegram-border { |
| border-color: #0088cc; |
| } |
| .telegram-hover:hover { |
| background-color: #0077b3; |
| } |
| .telegram-light { |
| background-color: #e6f4fa; |
| } |
| .telegram-icon { |
| color: #0088cc; |
| } |
| .telegram-dark { |
| background-color: #006699; |
| } |
| .telegram-dark-hover:hover { |
| background-color: #005580; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 font-sans"> |
| <div class="flex h-screen overflow-hidden"> |
| |
| <div id="sidebar" class="sidebar bg-white w-64 border-r border-gray-200 flex flex-col"> |
| <div class="p-4 border-b border-gray-200 flex items-center justify-between"> |
| <div class="flex items-center"> |
| <i class="fas fa-robot text-2xl text-purple-600 mr-2"></i> |
| <h1 class="text-xl font-bold text-gray-800">Master AI</h1> |
| </div> |
| <button id="toggleSidebar" class="p-1 rounded-md hover:bg-gray-100"> |
| <i class="fas fa-chevron-left text-gray-500"></i> |
| </button> |
| </div> |
| <nav class="flex-1 overflow-y-auto p-4"> |
| <div class="mb-6"> |
| <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Dashboard</h3> |
| <ul class="mt-2 space-y-1"> |
| <li> |
| <a href="#" class="flex items-center px-2 py-2 text-sm font-medium rounded-md bg-purple-50 text-purple-700"> |
| <i class="fas fa-chart-line mr-3 text-purple-600"></i> |
| <span class="sidebar-text">Overview</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900"> |
| <i class="fas fa-robot mr-3 text-gray-500"></i> |
| <span class="sidebar-text">My Agents</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900"> |
| <i class="fas fa-chart-pie mr-3 text-gray-500"></i> |
| <span class="sidebar-text">Analytics</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900"> |
| <i class="fas fa-paper-plane mr-3 text-gray-500"></i> |
| <span class="sidebar-text">Telegram</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900"> |
| <i class="fas fa-cog mr-3 text-gray-500"></i> |
| <span class="sidebar-text">Settings</span> |
| </a> |
| </li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider sidebar-text">Quick Actions</h3> |
| <ul class="mt-2 space-y-1"> |
| <li> |
| <button id="createAgentBtn" class="w-full flex items-center px-2 py-2 text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700"> |
| <i class="fas fa-plus mr-3"></i> |
| <span class="sidebar-text">Create New Agent</span> |
| </button> |
| </li> |
| <li> |
| <a href="#" class="flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900"> |
| <i class="fas fa-sync-alt mr-3 text-gray-500"></i> |
| <span class="sidebar-text">Update All Agents</span> |
| </a> |
| </li> |
| </ul> |
| </div> |
| </nav> |
| <div class="p-4 border-t border-gray-200"> |
| <div class="flex items-center"> |
| <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=AI+Master&background=7c3aed&color=fff" alt=""> |
| <div class="ml-3 sidebar-text"> |
| <p class="text-sm font-medium text-gray-700">AI Master</p> |
| <p class="text-xs font-medium text-gray-500">Administrator</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="flex-1 overflow-auto"> |
| |
| <header class="bg-white shadow-sm"> |
| <div class="px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <button id="mobileToggleSidebar" class="mr-4 p-1 rounded-md hover:bg-gray-100 md:hidden"> |
| <i class="fas fa-bars text-gray-500"></i> |
| </button> |
| <h1 class="text-xl font-semibold text-gray-900">Telegram Marketing Dashboard</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="relative"> |
| <input type="text" placeholder="Search agents..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"> |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
| </div> |
| <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200"> |
| <i class="fas fa-bell"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="p-6"> |
| |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Total Agents</p> |
| <p class="mt-1 text-3xl font-semibold text-gray-900">18</p> |
| </div> |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600"> |
| <i class="fas fa-robot text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <span class="text-green-600 text-sm font-medium">+3.2%</span> |
| <span class="text-gray-500 text-sm ml-2">vs last month</span> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Active Channels</p> |
| <p class="mt-1 text-3xl font-semibold text-gray-900">24</p> |
| </div> |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
| <i class="fab fa-telegram text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <span class="text-green-600 text-sm font-medium">+5.5%</span> |
| <span class="text-gray-500 text-sm ml-2">vs last month</span> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Engagement Rate</p> |
| <p class="mt-1 text-3xl font-semibold text-gray-900">72%</p> |
| </div> |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> |
| <i class="fas fa-chart-line text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <span class="text-green-600 text-sm font-medium">+2.1%</span> |
| <span class="text-gray-500 text-sm ml-2">vs last month</span> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">New Subscribers</p> |
| <p class="mt-1 text-3xl font-semibold text-gray-900">1,248</p> |
| </div> |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> |
| <i class="fas fa-user-plus text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <span class="text-green-600 text-sm font-medium">+8.7%</span> |
| <span class="text-gray-500 text-sm ml-2">vs last month</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-lg shadow mb-8 p-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-lg font-semibold text-gray-900">Telegram Connection</h2> |
| <div class="flex items-center space-x-2"> |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> |
| <i class="fas fa-circle text-green-500 mr-1" style="font-size: 8px;"></i> |
| Connected |
| </span> |
| <button class="px-3 py-1 text-sm bg-gray-100 rounded-md hover:bg-gray-200"> |
| <i class="fas fa-sync-alt mr-1"></i> Refresh |
| </button> |
| </div> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
| <div class="bg-telegram-light rounded-lg p-4 flex items-center"> |
| <div class="p-3 rounded-full bg-white text-telegram-icon mr-4"> |
| <i class="fab fa-telegram text-2xl"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-500">API Status</p> |
| <p class="text-lg font-semibold text-gray-900">Active</p> |
| </div> |
| </div> |
| <div class="bg-telegram-light rounded-lg p-4 flex items-center"> |
| <div class="p-3 rounded-full bg-white text-telegram-icon mr-4"> |
| <i class="fas fa-plug text-2xl"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Last Sync</p> |
| <p class="text-lg font-semibold text-gray-900">2 min ago</p> |
| </div> |
| </div> |
| <div class="bg-telegram-light rounded-lg p-4 flex items-center"> |
| <div class="p-3 rounded-full bg-white text-telegram-icon mr-4"> |
| <i class="fas fa-shield-alt text-2xl"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Security</p> |
| <p class="text-lg font-semibold text-gray-900">Verified</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-lg shadow mb-8"> |
| <div class="px-6 py-4 border-b border-gray-200"> |
| <div class="flex justify-between items-center"> |
| <h2 class="text-lg font-semibold text-gray-900">Recent Telegram Agents</h2> |
| <a href="#" class="text-sm font-medium text-purple-600 hover:text-purple-500">View all</a> |
| </div> |
| </div> |
| <div class="divide-y divide-gray-200"> |
| |
| <div class="p-6 hover:bg-gray-50 transition duration-150 ease-in-out"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <div class="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600"> |
| <i class="fab fa-telegram"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <div class="flex items-center"> |
| <h3 class="text-sm font-medium text-gray-900">Newsletter Bot</h3> |
| <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> |
| Active |
| </span> |
| </div> |
| <div class="mt-1 flex items-center text-sm text-gray-500"> |
| <span>@newsletter_bot</span> |
| <span class="mx-1">•</span> |
| <span>5,248 subscribers</span> |
| </div> |
| </div> |
| <div class="ml-auto flex space-x-3"> |
| <button class="inline-flex items-center px-3 py-1 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> |
| <i class="fas fa-pause mr-1 text-gray-500"></i> Pause |
| </button> |
| <button class="inline-flex items-center px-3 py-1 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> |
| <i class="fas fa-cog mr-1"></i> Configure |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="p-6 hover:bg-gray-50 transition duration-150 ease-in-out"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600"> |
| <i class="fab fa-telegram"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <div class="flex items-center"> |
| <h3 class="text-sm font-medium text-gray-900">Customer Support</h3> |
| <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"> |
| Learning |
| </span> |
| </div> |
| <div class="mt-1 flex items-center text-sm text-gray-500"> |
| <span>@support_bot</span> |
| <span class="mx-1">•</span> |
| <span>1,200 active chats</span> |
| </div> |
| </div> |
| <div class="ml-auto flex space-x-3"> |
| <button class="inline-flex items-center px-3 py-1 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> |
| <i class="fas fa-pause mr-1 text-gray-500"></i> Pause |
| </button> |
| <button class="inline-flex items-center px-3 py-1 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> |
| <i class="fas fa-cog mr-1"></i> Configure |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="p-6 hover:bg-gray-50 transition duration-150 ease-in-out"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600"> |
| <i class="fab fa-telegram"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <div class="flex items-center"> |
| <h3 class="text-sm font-medium text-gray-900">Promo Campaigner</h3> |
| <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> |
| Active |
| </span> |
| </div> |
| <div class="mt-1 flex items-center text-sm text-gray-500"> |
| <span>@promo_bot</span> |
| <span class="mx-1">•</span> |
| <span>3 campaigns running</span> |
| </div> |
| </div> |
| <div class="ml-auto flex space-x-3"> |
| <button class="inline-flex items-center px-3 py-1 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> |
| <i class="fas fa-pause mr-1 text-gray-500"></i> Pause |
| </button> |
| <button class="inline-flex items-center px-3 py-1 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> |
| <i class="fas fa-cog mr-1"></i> Configure |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-lg font-semibold text-gray-900">Agent Performance</h2> |
| <select class="mt-1 block pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm rounded-md"> |
| <option>Last 7 days</option> |
| <option>Last 30 days</option> |
| <option selected>Last 90 days</option> |
| </select> |
| </div> |
| <div class="chart-container"> |
| <canvas id="performanceChart"></canvas> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-lg font-semibold text-gray-900">Message Types</h2> |
| <select class="mt-1 block pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm rounded-md"> |
| <option>By Count</option> |
| <option selected>By Engagement</option> |
| </select> |
| </div> |
| <div class="chart-container"> |
| <canvas id="messageTypesChart"></canvas> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
| </div> |
|
|
| |
| <div id="createAgentModal" class="fixed inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true"> |
| <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
| <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div> |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
| <div class="sm:flex sm:items-start"> |
| <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-purple-100 sm:mx-0 sm:h-10 sm:w-10"> |
| <i class="fab fa-telegram text-purple-600"></i> |
| </div> |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Create New Telegram Agent</h3> |
| <div class="mt-2"> |
| <p class="text-sm text-gray-500">Configure your new Telegram marketing agent below.</p> |
| </div> |
| </div> |
| </div> |
| <div class="mt-5"> |
| <div class="space-y-4"> |
| <div> |
| <label for="agent-name" class="block text-sm font-medium text-gray-700">Agent Name</label> |
| <input type="text" name="agent-name" id="agent-name" class="mt-1 focus:ring-purple-500 focus:border-purple-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder="e.g. Newsletter Bot"> |
| </div> |
| <div> |
| <label for="bot-username" class="block text-sm font-medium text-gray-700">Bot Username</label> |
| <div class="mt-1 flex rounded-md shadow-sm"> |
| <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm"> |
| @ |
| </span> |
| <input type="text" name="bot-username" id="bot-username" class="focus:ring-purple-500 focus:border-purple-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300" placeholder="username"> |
| </div> |
| </div> |
| <div> |
| <label for="bot-token" class="block text-sm font-medium text-gray-700">Bot Token</label> |
| <input type="password" name="bot-token" id="bot-token" class="mt-1 focus:ring-purple-500 focus:border-purple-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder="123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11"> |
| </div> |
| <div> |
| <label for="agent-type" class="block text-sm font-medium text-gray-700">Agent Type</label> |
| <select id="agent-type" name="agent-type" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm rounded-md"> |
| <option>Newsletter</option> |
| <option>Customer Support</option> |
| <option>Promo Campaign</option> |
| <option>Content Delivery</option> |
| <option>Survey Collector</option> |
| <option>Lead Generator</option> |
| </select> |
| </div> |
| <div> |
| <label for="agent-skills" class="block text-sm font-medium text-gray-700">Special Skills</label> |
| <select id="agent-skills" name="agent-skills" multiple class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm rounded-md"> |
| <option>Auto-responder</option> |
| <option>Multilingual</option> |
| <option>Media Posts</option> |
| <option>User Segmentation</option> |
| <option>A/B Testing</option> |
| <option>Analytics</option> |
| </select> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
| <button type="button" id="createAgentSubmit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm"> |
| Create Agent |
| </button> |
| <button type="button" id="cancelCreateAgent" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> |
| Cancel |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="telegramConnectionModal" class="fixed inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true"> |
| <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
| <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div> |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
| <div class="sm:flex sm:items-start"> |
| <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-telegram-light sm:mx-0 sm:h-10 sm:w-10"> |
| <i class="fab fa-telegram text-telegram-icon text-xl"></i> |
| </div> |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Connect Telegram Account</h3> |
| <div class="mt-2"> |
| <p class="text-sm text-gray-500">Enter your Telegram bot token to connect it to Master AI.</p> |
| </div> |
| </div> |
| </div> |
| <div class="mt-5"> |
| <div class="space-y-4"> |
| <div> |
| <label for="connection-bot-username" class="block text-sm font-medium text-gray-700">Bot Username</label> |
| <div class="mt-1 flex rounded-md shadow-sm"> |
| <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm"> |
| @ |
| </span> |
| <input type="text" name="connection-bot-username" id="connection-bot-username" class="focus:ring-purple-500 focus:border-purple-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300" placeholder="username"> |
| </div> |
| </div> |
| <div> |
| <label for="connection-bot-token" class="block text-sm font-medium text-gray-700">Bot Token</label> |
| <input type="password" name="connection-bot-token" id="connection-bot-token" class="mt-1 focus:ring-purple-500 focus:border-purple-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder="123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11"> |
| <p class="mt-2 text-sm text-gray-500">Get your token from @BotFather in Telegram</p> |
| </div> |
| <div class="flex items-center"> |
| <input id="webhook-checkbox" name="webhook-checkbox" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"> |
| <label for="webhook-checkbox" class="ml-2 block text-sm text-gray-700"> |
| Set up webhook automatically |
| </label> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
| <button type="button" id="connectTelegramSubmit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-telegram-dark text-base font-medium text-white hover:bg-telegram-dark-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm"> |
| <i class="fab fa-telegram mr-2"></i> Connect |
| </button> |
| <button type="button" id="cancelTelegramConnection" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> |
| Cancel |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <script> |
| |
| const sidebar = document.getElementById('sidebar'); |
| const toggleSidebar = document.getElementById('toggleSidebar'); |
| const mobileToggleSidebar = document.getElementById('mobileToggleSidebar'); |
| const sidebarTexts = document.querySelectorAll('.sidebar-text'); |
| |
| toggleSidebar.addEventListener('click', function() { |
| sidebar.classList.toggle('collapsed'); |
| sidebarTexts.forEach(text => text.classList.toggle('hidden')); |
| const icon = this.querySelector('i'); |
| if (sidebar.classList.contains('collapsed')) { |
| icon.classList.remove('fa-chevron-left'); |
| icon.classList.add('fa-chevron-right'); |
| } else { |
| icon.classList.remove('fa-chevron-right'); |
| icon.classList.add('fa-chevron-left'); |
| } |
| }); |
| |
| mobileToggleSidebar.addEventListener('click', function() { |
| sidebar.classList.toggle('hidden'); |
| }); |
| |
| |
| document.getElementById('createAgentBtn').addEventListener('click', function() { |
| document.getElementById('createAgentModal').classList.remove('hidden'); |
| }); |
| |
| document.getElementById('cancelCreateAgent').addEventListener('click', function() { |
| document.getElementById('createAgentModal').classList.add('hidden'); |
| }); |
| |
| |
| document.getElementById('createAgentSubmit').addEventListener('click', function() { |
| const agentName = document.getElementById('agent-name').value; |
| const botUsername = document.getElementById('bot-username').value; |
| const botToken = document.getElementById('bot-token').value; |
| const agentType = document.getElementById('agent-type').value; |
| |
| if (!agentName || !botUsername || !botToken) { |
| alert('Please fill in all required fields'); |
| return; |
| } |
| |
| |
| console.log('Creating new Telegram agent:', { |
| name: agentName, |
| username: botUsername, |
| token: botToken, |
| type: agentType, |
| skills: Array.from(document.getElementById('agent-skills').selectedOptions).map(o => o.value) |
| }); |
| |
| |
| alert(`Successfully created new Telegram agent: ${agentName} (@${botUsername})`); |
| |
| |
| document.getElementById('createAgentModal').classList.add('hidden'); |
| |
| |
| document.getElementById('agent-name').value = ''; |
| document.getElementById('bot-username').value = ''; |
| document.getElementById('bot-token').value = ''; |
| }); |
| |
| |
| document.getElementById('cancelTelegramConnection').addEventListener('click', function() { |
| document.getElementById('telegramConnectionModal').classList.add('hidden'); |
| }); |
| |
| document.getElementById('connectTelegramSubmit').addEventListener('click', function() { |
| const botUsername = document.getElementById('connection-bot-username').value; |
| const botToken = document.getElementById('connection-bot-token').value; |
| |
| if (!botUsername || !botToken) { |
| alert('Please enter both bot username and token'); |
| return; |
| } |
| |
| |
| console.log('Connecting Telegram bot:', { |
| username: botUsername, |
| token: botToken, |
| setupWebhook: document.getElementById('webhook-checkbox').checked |
| }); |
| |
| |
| alert(`Successfully connected Telegram bot @${botUsername}`); |
| |
| |
| document.getElementById('telegramConnectionModal').classList.add('hidden'); |
| |
| |
| document.getElementById('connection-bot-username').value = ''; |
| document.getElementById('connection-bot-token').value = ''; |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const perfCanvas = document.getElementById('performanceChart').getContext('2d'); |
| const perfChart = new Chart(perfCanvas, { |
| type: 'line', |
| data: { |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], |
| datasets: [ |
| { |
| label: 'Messages Sent', |
| data: [1250, 1900, 1700, 2100, 2500, 2800, 3200], |
| borderColor: '#8b5cf6', |
| backgroundColor: 'rgba(139, 92, 246, 0.1)', |
| tension: 0.3, |
| fill: true |
| }, |
| { |
| label: 'User Interactions', |
| data: [850, 1200, 1100, 1500, 1800, 2100, 2400], |
| borderColor: '#10b981', |
| backgroundColor: 'rgba(16, 185, 129, 0.1)', |
| tension: 0.3, |
| fill: true |
| } |
| ] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| position: 'top', |
| }, |
| tooltip: { |
| mode: 'index', |
| intersect: false, |
| } |
| }, |
| scales: { |
| y: { |
| beginAtZero: true |
| } |
| } |
| } |
| }); |
| |
| |
| const typesCanvas = document.getElementById('messageTypesChart').getContext('2d'); |
| const typesChart = new Chart(typesCanvas, { |
| type: 'doughnut', |
| data: { |
| labels: ['Text', 'Image', 'Video', 'Poll', 'Document', 'Other'], |
| datasets: [{ |
| data: [45, 20, 15, 10, 5, 5], |
| backgroundColor: [ |
| '#3b82f6', |
| '#10b981', |
| '#f59e0b', |
| '#ef4444', |
| '#8b5cf6', |
| '#64748b' |
| ], |
| borderWidth: 0 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| position: 'right', |
| }, |
| tooltip: { |
| callbacks: { |
| label: function(context) { |
| const label = context.label || ''; |
| const value = context.raw || 0; |
| return `${label}: ${value}%`; |
| } |
| } |
| } |
| }, |
| cutout: '70%' |
| } |
| }); |
| }); |
| |
| |
| function connectTelegram() { |
| document.getElementById('telegramConnectionModal').classList.remove('hidden'); |
| } |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=privateuserh/mstagent-vbeta1-04" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
