Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LeadMind AI Dashboard</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 0%, #a777e3 100%); | |
| } | |
| .conversation-item:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .api-status-pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| .response-animation { | |
| animation: typing 1.5s steps(40, end); | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <i class="fas fa-robot text-3xl"></i> | |
| <h1 class="text-2xl font-bold">LeadMind AI</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <i class="fas fa-bell text-xl cursor-pointer"></i> | |
| <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-8 h-8 rounded-full"> | |
| <span class="font-medium">Admin</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="flex flex-1"> | |
| <!-- Sidebar --> | |
| <aside class="w-64 bg-white shadow-md hidden md:block"> | |
| <nav class="p-4"> | |
| <div class="mb-8"> | |
| <h2 class="text-gray-500 uppercase text-xs font-semibold tracking-wider mb-4">Navigation</h2> | |
| <ul class="space-y-2"> | |
| <li> | |
| <a href="#" class="flex items-center space-x-2 text-purple-600 bg-purple-50 rounded-lg px-3 py-2"> | |
| <i class="fas fa-home"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-2 text-gray-600 hover:text-purple-600 hover:bg-purple-50 rounded-lg px-3 py-2"> | |
| <i class="fas fa-comments"></i> | |
| <span>Conversations</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-2 text-gray-600 hover:text-purple-600 hover:bg-purple-50 rounded-lg px-3 py-2"> | |
| <i class="fas fa-users"></i> | |
| <span>Leads</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-2 text-gray-600 hover:text-purple-600 hover:bg-purple-50 rounded-lg px-3 py-2"> | |
| <i class="fas fa-plug"></i> | |
| <span>API Integration</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-2 text-gray-600 hover:text-purple-600 hover:bg-purple-50 rounded-lg px-3 py-2"> | |
| <i class="fas fa-chart-line"></i> | |
| <span>Analytics</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-2 text-gray-600 hover:text-purple-600 hover:bg-purple-50 rounded-lg px-3 py-2"> | |
| <i class="fas fa-cog"></i> | |
| <span>Settings</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="backend.html" class="flex items-center space-x-2 text-gray-600 hover:text-purple-600 hover:bg-purple-50 rounded-lg px-3 py-2"> | |
| <i class="fas fa-server"></i> | |
| <span>Backend</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h2 class="text-gray-500 uppercase text-xs font-semibold tracking-wider mb-4">Quick Actions</h2> | |
| <button class="w-full bg-purple-600 hover:bg-purple-700 text-white rounded-lg px-3 py-2 mb-2 flex items-center justify-center space-x-2"> | |
| <i class="fas fa-plus"></i> | |
| <span>New Campaign</span> | |
| </button> | |
| <button class="w-full border border-purple-600 text-purple-600 hover:bg-purple-50 rounded-lg px-3 py-2 flex items-center justify-center space-x-2"> | |
| <i class="fas fa-bolt"></i> | |
| <span>Quick Reply</span> | |
| </button> | |
| </div> | |
| </nav> | |
| </aside> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 p-6 overflow-auto"> | |
| <div class="container mx-auto"> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Total Conversations</p> | |
| <h3 class="text-2xl font-bold">1,248</h3> | |
| <p class="text-green-500 text-sm mt-1"><i class="fas fa-arrow-up"></i> 12% from last week</p> | |
| </div> | |
| <div class="bg-purple-100 p-3 rounded-full"> | |
| <i class="fas fa-comment-dots text-purple-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">New Leads</p> | |
| <h3 class="text-2xl font-bold">87</h3> | |
| <p class="text-green-500 text-sm mt-1"><i class="fas fa-arrow-up"></i> 5% from last week</p> | |
| </div> | |
| <div class="bg-blue-100 p-3 rounded-full"> | |
| <i class="fas fa-users text-blue-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Resolved Issues</p> | |
| <h3 class="text-2xl font-bold">92%</h3> | |
| <p class="text-red-500 text-sm mt-1"><i class="fas fa-arrow-down"></i> 2% from last week</p> | |
| </div> | |
| <div class="bg-green-100 p-3 rounded-full"> | |
| <i class="fas fa-check-circle text-green-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">API Response Time</p> | |
| <h3 class="text-2xl font-bold">0.42s</h3> | |
| <p class="text-green-500 text-sm mt-1"><i class="fas fa-bolt"></i> 98% uptime</p> | |
| </div> | |
| <div class="bg-yellow-100 p-3 rounded-full"> | |
| <i class="fas fa-plug text-yellow-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Conversations --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Recent Conversations</h2> | |
| <button class="text-purple-600 hover:text-purple-800 flex items-center"> | |
| <span>View All</span> | |
| <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="conversation-item transition-all duration-200 bg-gray-50 hover:bg-purple-50 rounded-lg p-4 cursor-pointer border border-gray-100"> | |
| <div class="flex items-start space-x-3"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full"> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-start"> | |
| <h4 class="font-medium">Robert Johnson</h4> | |
| <span class="text-xs text-gray-500">12 min ago</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mt-1">Hi, I'm having trouble with my account login. Can you help?</p> | |
| <div class="mt-2 flex items-center text-xs"> | |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full">New</span> | |
| <span class="ml-2 text-gray-500"><i class="fas fa-circle text-green-500 text-xs"></i> AI Responded</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="conversation-item transition-all duration-200 bg-gray-50 hover:bg-purple-50 rounded-lg p-4 cursor-pointer border border-gray-100"> | |
| <div class="flex items-start space-x-3"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="User" class="w-10 h-10 rounded-full"> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-start"> | |
| <h4 class="font-medium">Sarah Williams</h4> | |
| <span class="text-xs text-gray-500">42 min ago</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mt-1">I'm interested in your enterprise plan. Can you send me more details?</p> | |
| <div class="mt-2 flex items-center text-xs"> | |
| <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Lead</span> | |
| <span class="ml-2 text-gray-500"><i class="fas fa-circle text-yellow-500 text-xs"></i> Needs Follow-up</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="conversation-item transition-all duration-200 bg-gray-50 hover:bg-purple-50 rounded-lg p-4 cursor-pointer border border-gray-100"> | |
| <div class="flex items-start space-x-3"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User" class="w-10 h-10 rounded-full"> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-start"> | |
| <h4 class="font-medium">Michael Brown</h4> | |
| <span class="text-xs text-gray-500">2 hours ago</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mt-1">The API documentation seems outdated. Where can I find the latest version?</p> | |
| <div class="mt-2 flex items-center text-xs"> | |
| <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full">Technical</span> | |
| <span class="ml-2 text-gray-500"><i class="fas fa-circle text-green-500 text-xs"></i> Resolved</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- API Integration & Live Chat --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> | |
| <!-- API Integration Status --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">API Integration</h2> | |
| <span class="flex items-center text-green-500"> | |
| <span class="api-status-pulse h-2 w-2 rounded-full bg-green-500 mr-2"></span> | |
| Active | |
| </span> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="bg-purple-100 p-2 rounded-lg"> | |
| <i class="fas fa-exchange-alt text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Requests Today</h4> | |
| <p class="text-gray-500 text-sm">1,042 calls</p> | |
| </div> | |
| </div> | |
| <span class="text-green-500 text-sm">+12%</span> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="bg-blue-100 p-2 rounded-lg"> | |
| <i class="fas fa-clock text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Avg. Response Time</h4> | |
| <p class="text-gray-500 text-sm">0.42 seconds</p> | |
| </div> | |
| </div> | |
| <span class="text-green-500 text-sm">-5%</span> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="bg-green-100 p-2 rounded-lg"> | |
| <i class="fas fa-check-circle text-green-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Success Rate</h4> | |
| <p class="text-gray-500 text-sm">98.7%</p> | |
| </div> | |
| </div> | |
| <span class="text-green-500 text-sm">+0.3%</span> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h4 class="font-medium mb-2">API Endpoint</h4> | |
| <div class="flex"> | |
| <input type="text" value="https://api.yourservice.com/v1/gpt4-agent" class="flex-1 bg-gray-100 border border-gray-300 rounded-l-lg px-4 py-2 text-sm font-mono truncate" readonly> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-r-lg"> | |
| <i class="fas fa-copy"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Live Chat Demo --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Live Chat Demo</h2> | |
| <div class="flex items-center"> | |
| <span class="h-2 w-2 rounded-full bg-green-500 mr-2"></span> | |
| <span class="text-sm">LeadMind AI Online</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-4 h-64 overflow-y-auto mb-4"> | |
| <div class="chat-message mb-4"> | |
| <div class="flex items-start"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-8 h-8 rounded-full mr-3"> | |
| <div class="bg-white p-3 rounded-lg shadow-sm max-w-xs"> | |
| <p class="text-sm">Hi there! I'm interested in learning more about your pricing plans.</p> | |
| <p class="text-xs text-gray-500 mt-1">10:42 AM</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chat-message mb-4"> | |
| <div class="flex justify-end"> | |
| <div class="bg-purple-100 p-3 rounded-lg shadow-sm max-w-xs"> | |
| <p class="text-sm response-animation">Hello! I'd be happy to help with that. We offer three pricing tiers: Basic ($29/mo), Pro ($79/mo), and Enterprise (custom pricing). Which one are you interested in?</p> | |
| <p class="text-xs text-gray-500 mt-1 text-right">10:42 AM <i class="fas fa-robot ml-1"></i></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chat-message mb-4"> | |
| <div class="flex items-start"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-8 h-8 rounded-full mr-3"> | |
| <div class="bg-white p-3 rounded-lg shadow-sm max-w-xs"> | |
| <p class="text-sm">I think the Pro plan might work for us. What features are included?</p> | |
| <p class="text-xs text-gray-500 mt-1">10:43 AM</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chat-message"> | |
| <div class="flex justify-end"> | |
| <div class="bg-purple-100 p-3 rounded-lg shadow-sm max-w-xs"> | |
| <p class="text-sm response-animation">The Pro plan includes all Basic features plus: priority support, API access, advanced analytics, and up to 5 team members. Would you like me to send a detailed feature comparison?</p> | |
| <p class="text-xs text-gray-500 mt-1 text-right">10:43 AM <i class="fas fa-robot ml-1"></i></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <input type="text" id="chatInput" placeholder="Type your message..." class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <button onclick="sendMessage()" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-r-lg"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Lead Conversion Chart --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Lead Conversion Funnel</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-sm bg-purple-600 text-white rounded-lg">Weekly</button> | |
| <button class="px-3 py-1 text-sm bg-white border border-gray-300 rounded-lg">Monthly</button> | |
| <button class="px-3 py-1 text-sm bg-white border border-gray-300 rounded-lg">Quarterly</button> | |
| </div> | |
| </div> | |
| <div class="h-64 flex items-end space-x-4"> | |
| <div class="flex-1 flex flex-col items-center"> | |
| <div class="w-full bg-purple-100 rounded-t-lg" style="height: 80%;"></div> | |
| <p class="mt-2 text-sm font-medium">Initial Contact</p> | |
| <p class="text-xs text-gray-500">1,248</p> | |
| </div> | |
| <div class="flex-1 flex flex-col items-center"> | |
| <div class="w-full bg-purple-200 rounded-t-lg" style="height: 60%;"></div> | |
| <p class="mt-2 text-sm font-medium">Engaged</p> | |
| <p class="text-xs text-gray-500">842</p> | |
| </div> | |
| <div class="flex-1 flex flex-col items-center"> | |
| <div class="w-full bg-purple-300 rounded-t-lg" style="height: 40%;"></div> | |
| <p class="mt-2 text-sm font-medium">Qualified</p> | |
| <p class="text-xs text-gray-500">387</p> | |
| </div> | |
| <div class="flex-1 flex flex-col items-center"> | |
| <div class="w-full bg-purple-400 rounded-t-lg" style="height: 20%;"></div> | |
| <p class="mt-2 text-sm font-medium">Converted</p> | |
| <p class="text-xs text-gray-500">156</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Chat functionality | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Load conversations from API | |
| fetchConversations(); | |
| // Simulate typing animation | |
| const typingElements = document.querySelectorAll('.response-animation'); | |
| typingElements.forEach(el => { | |
| el.style.width = '0'; | |
| setTimeout(() => { | |
| el.style.width = '100%'; | |
| }, 100); | |
| }); | |
| // Mobile menu toggle would go here | |
| // API status indicator animation | |
| const apiStatus = document.querySelector('.api-status-pulse'); | |
| setInterval(() => { | |
| apiStatus.classList.toggle('opacity-50'); | |
| }, 2000); | |
| // API status indicator animation | |
| const apiStatus = document.querySelector('.api-status-pulse'); | |
| setInterval(() => { | |
| apiStatus.classList.toggle('opacity-50'); | |
| }, 2000); | |
| }); | |
| async function fetchConversations() { | |
| try { | |
| const response = await fetch('http://localhost:5000/api/conversations', { | |
| headers: { | |
| 'Authorization': `Bearer ${localStorage.getItem('token')}` | |
| } | |
| }); | |
| const conversations = await response.json(); | |
| // Render conversations in UI | |
| } catch (err) { | |
| console.error('Error fetching conversations:', err); | |
| } | |
| } | |
| async function sendMessage() { | |
| const input = document.getElementById('chatInput'); | |
| const message = input.value.trim(); | |
| if (!message) return; | |
| try { | |
| const response = await fetch('http://localhost:5000/api/ai/process', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| 'X-API-Key': localStorage.getItem('apiKey') | |
| }, | |
| body: JSON.stringify({ content: message }) | |
| }); | |
| const aiResponse = await response.json(); | |
| // Update UI with message and response | |
| const chatContainer = document.querySelector('.bg-gray-50.rounded-lg'); | |
| // Add user message | |
| // Add AI response | |
| input.value = ''; | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } catch (err) { | |
| console.error('Error sending message:', err); | |
| } | |
| } | |
| }); | |
| </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=stakmodsco/leadmind-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |