| <!DOCTYPE html> |
| <html lang="en" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Your VAI Dashboard</title> |
| <link rel="icon" type="image/x-icon" href="https://static.photos/technology/200x200/42"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| |
| .glass-panel { |
| backdrop-filter: blur(16px); |
| background: rgba(16, 21, 27, 0.7); |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| } |
| |
| .agent-card { |
| transition: all 0.3s ease; |
| } |
| |
| .agent-card:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 25px -5px rgba(63, 242, 140, 0.1); |
| } |
| |
| .pulse-active { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { box-shadow: 0 0 0 0 rgba(63, 242, 140, 0.4); } |
| 70% { box-shadow: 0 0 0 10px rgba(63, 242, 140, 0); } |
| 100% { box-shadow: 0 0 0 0 rgba(63, 242, 140, 0); } |
| } |
| |
| .progress-bar { |
| background: #0ea5e9; |
| } |
| |
| .timeline-item:not(:last-child)::after { |
| content: ''; |
| position: absolute; |
| left: 8px; |
| top: 24px; |
| height: calc(100% - 24px); |
| width: 2px; |
| background: rgba(255, 255, 255, 0.1); |
| } |
| </style> |
| </head> |
| <body class="bg-dark-900 text-gray-200 font-sans min-h-screen overflow-x-hidden" id="vanta-bg"> |
| |
| <script> |
| VANTA.GLOBE({ |
| el: "#vanta-bg", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| color: "#3FF28C", |
| backgroundColor: "#10151B", |
| size: 0.8 |
| }) |
| </script> |
|
|
| |
| <div class="container mx-auto px-4 py-8 max-w-7xl"> |
| |
| <header class="flex justify-between items-center mb-12"> |
| <div class="flex items-center space-x-2"> |
| <img src="https://static.photos/technology/200x200/42" alt="VAI Logo" class="w-10 h-10 rounded-lg"> |
| <h1 class="text-2xl font-bold text-primary-500">VAI</h1> |
| </div> |
| <nav class="hidden md:flex space-x-6"> |
| <a href="dashboard.html" class="hover:text-primary-500 transition">Dashboard</a> |
| <a href="agents.html" class="hover:text-primary-500 transition">Agents</a> |
| <a href="integrations.html" class="hover:text-primary-500 transition">Integrations</a> |
| <a href="#" class="hover:text-primary-500 transition">Community</a> |
| </nav> |
| <div class="flex items-center space-x-4"> |
| <button class="p-2 rounded-full bg-dark-800 hover:bg-dark-700 transition"> |
| <i data-feather="settings"></i> |
| </button> |
| <button class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg font-medium transition flex items-center space-x-2"> |
| <i data-feather="plus"></i> |
| <span>New Agent</span> |
| </button> |
| </div> |
| </header> |
|
|
| |
| <section class="glass-panel rounded-2xl p-6 mb-8 flex items-center justify-between"> |
| <div> |
| <h2 class="text-xl font-bold mb-1">Welcome to your VAI Dashboard</h2> |
| <p class="text-gray-400">Your virtual team is ready to work. Here's what we've automated for you so far.</p> |
| </div> |
| <button class="px-4 py-2 bg-dark-800 hover:bg-dark-700 rounded-lg transition flex items-center"> |
| <i data-feather="help-circle" class="mr-2"></i> |
| <span>Quick Tour</span> |
| </button> |
| </section> |
|
|
| |
| <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8"> |
| <div class="glass-panel rounded-xl p-4"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-sm text-gray-400 mb-1">Time Saved</p> |
| <h3 class="text-2xl font-bold">5.2 hours</h3> |
| </div> |
| <div class="bg-primary-500/20 p-2 rounded-lg"> |
| <i data-feather="clock" class="text-primary-500"></i> |
| </div> |
| </div> |
| <div class="h-1 bg-gray-800 rounded-full mt-2 overflow-hidden"> |
| <div class="bg-primary-500 h-full rounded-full w-3/4"></div> |
| </div> |
| </div> |
| |
| <div class="glass-panel rounded-xl p-4"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-sm text-gray-400 mb-1">Tasks Completed</p> |
| <h3 class="text-2xl font-bold">14/18</h3> |
| </div> |
| <div class="bg-green-400/20 p-2 rounded-lg"> |
| <i data-feather="check-circle" class="text-green-400"></i> |
| </div> |
| </div> |
| <div class="h-1 bg-gray-800 rounded-full mt-2 overflow-hidden"> |
| <div class="bg-green-400 h-full rounded-full w-3/4"></div> |
| </div> |
| </div> |
| |
| <div class="glass-panel rounded-xl p-4"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-sm text-gray-400 mb-1">Active Agents</p> |
| <h3 class="text-2xl font-bold">5</h3> |
| </div> |
| <div class="bg-blue-400/20 p-2 rounded-lg"> |
| <i data-feather="cpu" class="text-blue-400"></i> |
| </div> |
| </div> |
| <div class="h-1 bg-gray-800 rounded-full mt-2 overflow-hidden"> |
| <div class="bg-blue-400 h-full rounded-full w-full"></div> |
| </div> |
| </div> |
| |
| <div class="glass-panel rounded-xl p-4"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-sm text-gray-400 mb-1">Weekly Efficiency</p> |
| <h3 class="text-2xl font-bold">84%</h3> |
| </div> |
| <div class="bg-purple-500/20 p-2 rounded-lg"> |
| <i data-feather="activity" class="text-purple-500"></i> |
| </div> |
| </div> |
| <div class="h-1 bg-gray-800 rounded-full mt-2 overflow-hidden"> |
| <div class="bg-purple-500 h-full rounded-full w-4/5"></div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-8"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-xl font-bold">Your Executive Team</h3> |
| <button class="px-4 py-2 bg-dark-800 hover:bg-dark-700 rounded-lg transition flex items-center"> |
| <i data-feather="plus" class="mr-2"></i> |
| <span>Hire Director</span> |
| </button> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> |
| |
| <div class="agent-card glass-panel rounded-xl p-4 border border-gray-800 hover:border-primary-500/50 transition"> |
| <div class="flex justify-between items-start mb-3"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center"> |
| <i data-feather="cpu" class="text-dark-900"></i> |
| </div> |
| <div> |
| <h4 class="font-medium">VAI Orchestrator</h4> |
| <span class="text-xs text-primary-500 flex items-center"> |
| <span class="w-2 h-2 rounded-full bg-primary-500 mr-1"></span> |
| Operational |
| </span> |
| </div> |
| </div> |
| <button class="text-gray-400 hover:text-primary-500 transition"> |
| <i data-feather="more-vertical"></i> |
| </button> |
| </div> |
| <p class="text-sm text-gray-300 mb-3">Coordinating 5 agents for your workflow</p> |
| <div class="h-1.5 bg-gray-800 rounded-full mb-3 overflow-hidden"> |
| <div class="progress-bar h-full rounded-full w-3/4"></div> |
| </div> |
| <div class="flex justify-between text-xs text-gray-400"> |
| <span>ETA: 2m</span> |
| <span>75% complete</span> |
| </div> |
| </div> |
| |
| |
| <div class="agent-card glass-panel rounded-xl p-4 border border-gray-800 hover:border-secondary-500/50 transition pulse-active"> |
| <div class="flex justify-between items-start mb-3"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-secondary-500 to-yellow-500 flex items-center justify-center"> |
| <i data-feather="alert-circle" class="text-dark-900"></i> |
| </div> |
| <div> |
| <h4 class="font-medium">Investor Bot</h4> |
| <span class="text-xs text-secondary-500 flex items-center"> |
| <span class="w-2 h-2 rounded-full bg-secondary-500 mr-1"></span> |
| Priority |
| </span> |
| </div> |
| </div> |
| <button class="text-gray-400 hover:text-secondary-500 transition"> |
| <i data-feather="more-vertical"></i> |
| </button> |
| </div> |
| <p class="text-sm text-gray-300 mb-3">New investment opportunity requires your attention</p> |
| <div class="h-1.5 bg-gray-800 rounded-full mb-3 overflow-hidden"> |
| <div class="bg-secondary-500 h-full rounded-full w-1/2"></div> |
| </div> |
| <div class="flex justify-between text-xs text-gray-400"> |
| <span>Waiting for input</span> |
| <span>50% complete</span> |
| </div> |
| </div> |
| |
| |
| <div class="agent-card glass-panel rounded-xl p-4 border border-gray-800 hover:border-green-400/50 transition"> |
| <div class="flex justify-between items-start mb-3"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-green-400 to-teal-400 flex items-center justify-center"> |
| <i data-feather="mail" class="text-dark-900"></i> |
| </div> |
| <div> |
| <h4 class="font-medium">Email Assistant</h4> |
| <span class="text-xs text-success-500 flex items-center"> |
| <span class="w-2 h-2 rounded-full bg-success-500 mr-1"></span> |
| Completed |
| </span> |
| </div> |
| </div> |
| <button class="text-gray-400 hover:text-green-400 transition"> |
| <i data-feather="more-vertical"></i> |
| </button> |
| </div> |
| <p class="text-sm text-gray-300 mb-3">Processed 12 important emails this morning</p> |
| <div class="h-1.5 bg-gray-800 rounded-full mb-3 overflow-hidden"> |
| <div class="bg-green-400 h-full rounded-full w-full"></div> |
| </div> |
| <div class="flex justify-between text-xs text-gray-400"> |
| <span>Task complete</span> |
| <span>100% complete</span> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-8 glass-panel rounded-2xl p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-xl font-bold">Recent Activity</h3> |
| <button class="px-4 py-2 bg-dark-800 hover:bg-dark-700 rounded-lg transition"> |
| <i data-feather="filter" class="mr-2"></i> |
| <span>Filter</span> |
| </button> |
| </div> |
| |
| <div class="space-y-4"> |
| |
| <div class="timeline-item relative pl-6"> |
| <div class="absolute left-0 top-1 w-4 h-4 rounded-full bg-primary-500 border-2 border-dark-900"></div> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h4 class="font-medium">Email Assistant completed task</h4> |
| <p class="text-sm text-gray-300">Processed and categorized 12 new emails</p> |
| <div class="flex text-xs mt-1 space-x-4"> |
| <span class="text-primary-500">⏱️ 1.5h saved</span> |
| <span>🔄 5min interaction</span> |
| </div> |
| </div> |
| <span class="text-xs text-gray-500">15 min ago</span> |
| </div> |
| </div> |
| |
| |
| <div class="timeline-item relative pl-6"> |
| <div class="absolute left-0 top-1 w-4 h-4 rounded-full bg-blue-400 border-2 border-dark-900"></div> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h4 class="font-medium">Calendar Sync added event</h4> |
| <p class="text-sm text-gray-300">Scheduled "Quarterly Review" for Friday 2pm</p> |
| <div class="flex text-xs mt-1 space-x-4"> |
| <span class="text-blue-400">⏱️ 30min saved</span> |
| <span>🔄 2min interaction</span> |
| </div> |
| </div> |
| <span class="text-xs text-gray-500">1 hour ago</span> |
| </div> |
| </div> |
| |
| |
| <div class="timeline-item relative pl-6"> |
| <div class="absolute left-0 top-1 w-4 h-4 rounded-full bg-secondary-500 border-2 border-dark-900"></div> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h4 class="font-medium">Investor Bot found opportunity</h4> |
| <p class="text-sm text-gray-300">Potential investment in AI healthcare startup</p> |
| <div class="flex text-xs mt-1 space-x-4"> |
| <span class="text-secondary-500">⏱️ 3h saved</span> |
| <span>🔄 15min interaction</span> |
| </div> |
| </div> |
| <span class="text-xs text-gray-500">3 hours ago</span> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="glass-panel rounded-2xl p-6"> |
| <h3 class="text-xl font-bold mb-6">Quick Actions</h3> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
| <button class="p-4 border border-gray-700 hover:border-primary-500 rounded-lg transition text-left"> |
| <div class="flex items-center mb-2"> |
| <div class="w-8 h-8 rounded-full bg-primary-500/10 flex items-center justify-center mr-3"> |
| <i data-feather="zap" class="text-primary-500"></i> |
| </div> |
| <h4 class="font-medium">Create New Agent</h4> |
| </div> |
| <p class="text-sm text-gray-400">Add a specialized AI to your team</p> |
| </button> |
| |
| <button class="p-4 border border-gray-700 hover:border-blue-400 rounded-lg transition text-left"> |
| <div class="flex items-center mb-2"> |
| <div class="w-8 h-8 rounded-full bg-blue-400/10 flex items-center justify-center mr-3"> |
| <i data-feather="link" class="text-blue-400"></i> |
| </div> |
| <h4 class="font-medium">Connect Tool</h4> |
| </div> |
| <p class="text-sm text-gray-400">Add a new integration to your workflow</p> |
| </button> |
| |
| <button class="p-4 border border-gray-700 hover:border-purple-500 rounded-lg transition text-left"> |
| <div class="flex items-center mb-2"> |
| <div class="w-8 h-8 rounded-full bg-purple-500/10 flex items-center justify-center mr-3"> |
| <i data-feather="bar-chart-2" class="text-purple-500"></i> |
| </div> |
| <h4 class="font-medium">View Analytics</h4> |
| </div> |
| <p class="text-sm text-gray-400">See detailed performance metrics</p> |
| </button> |
| </div> |
| </section> |
| </div> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| function simulateAgentActivity() { |
| const agents = document.querySelectorAll('.agent-card'); |
| agents.forEach(agent => { |
| const progressBar = agent.querySelector('.h-1.5 > div'); |
| const progressText = agent.querySelector('.text-xs:last-child span:last-child'); |
| const status = agent.querySelector('.text-xs:first-child span:first-child'); |
| |
| if (!progressBar || !progressText || !status) return; |
| |
| const currentWidth = parseInt(progressBar.style.width || '0'); |
| const newWidth = Math.min(100, currentWidth + Math.floor(Math.random() * 15) + 5); |
| |
| progressBar.style.width = `${newWidth}%`; |
| progressText.textContent = `${newWidth}% complete`; |
| |
| if (newWidth >= 100) { |
| status.className = 'w-2 h-2 rounded-full bg-green-400 mr-1'; |
| status.parentElement.className = 'text-xs text-green-400 flex items-center'; |
| status.parentElement.querySelector('span:last-child').textContent = 'Complete'; |
| } else if (newWidth >= 75) { |
| status.className = 'w-2 h-2 rounded-full bg-primary-500 mr-1'; |
| status.parentElement.className = 'text-xs text-primary-500 flex items-center'; |
| status.parentElement.querySelector('span:last-child').textContent = 'Active'; |
| } |
| }); |
| |
| setTimeout(simulateAgentActivity, 3000); |
| } |
| |
| |
| window.addEventListener('load', () => { |
| setTimeout(simulateAgentActivity, 1000); |
| }); |
| </script> |
| </body> |
| </html> |
