Spaces:
Running
Running
| <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"> | |
| <!-- Sidebar --> | |
| <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> | |
| <!-- Main content --> | |
| <div class="flex-1 overflow-auto"> | |
| <!-- Header --> | |
| <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> | |
| <!-- Dashboard content --> | |
| <main class="p-6"> | |
| <!-- Stats --> | |
| <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> | |
| <!-- Telegram Connection Status --> | |
| <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> | |
| <!-- Recent Telegram Agents --> | |
| <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"> | |
| <!-- Agent 1 --> | |
| <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> | |
| <!-- Agent 2 --> | |
| <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> | |
| <!-- Agent 3 --> | |
| <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> | |
| <!-- Performance Metrics --> | |
| <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> | |
| <!-- Create Agent Modal --> | |
| <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> | |
| <!-- Telegram Connection Modal --> | |
| <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> | |
| // Toggle sidebar | |
| 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'); | |
| }); | |
| // Toggle create agent modal | |
| document.getElementById('createAgentBtn').addEventListener('click', function() { | |
| document.getElementById('createAgentModal').classList.remove('hidden'); | |
| }); | |
| document.getElementById('cancelCreateAgent').addEventListener('click', function() { | |
| document.getElementById('createAgentModal').classList.add('hidden'); | |
| }); | |
| // Submit new agent | |
| 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; | |
| } | |
| // In a real app, you would send this data to your backend | |
| 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) | |
| }); | |
| // Show success message | |
| alert(`Successfully created new Telegram agent: ${agentName} (@${botUsername})`); | |
| // Close modal | |
| document.getElementById('createAgentModal').classList.add('hidden'); | |
| // Reset form | |
| document.getElementById('agent-name').value = ''; | |
| document.getElementById('bot-username').value = ''; | |
| document.getElementById('bot-token').value = ''; | |
| }); | |
| // Telegram connection modal | |
| 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; | |
| } | |
| // Simulate connection | |
| console.log('Connecting Telegram bot:', { | |
| username: botUsername, | |
| token: botToken, | |
| setupWebhook: document.getElementById('webhook-checkbox').checked | |
| }); | |
| // Show success message | |
| alert(`Successfully connected Telegram bot @${botUsername}`); | |
| // Close modal | |
| document.getElementById('telegramConnectionModal').classList.add('hidden'); | |
| // Reset form | |
| document.getElementById('connection-bot-username').value = ''; | |
| document.getElementById('connection-bot-token').value = ''; | |
| }); | |
| // Initialize charts | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Performance Chart | |
| 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 | |
| } | |
| } | |
| } | |
| }); | |
| // Message Types Chart | |
| 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%' | |
| } | |
| }); | |
| }); | |
| // Sample function to connect Telegram (would be called from a button) | |
| 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> |