| <!DOCTYPE html> |
| <html lang="en" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Manage Your Agents | VAI</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(-5px); |
| box-shadow: 0 10px 25px -5px rgba(63, 242, 140, 0.2); |
| } |
| |
| .status-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); } |
| } |
| </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">Agent Headquarters</h1> |
| </div> |
| <nav class="hidden md:flex space-x-6"> |
| <a href="index.html" class="hover:text-primary-500 transition">Home</a> |
| <a href="dashboard.html" class="hover:text-primary-500 transition">Dashboard</a> |
| <a href="agents.html" class="text-primary-500 hover:text-primary-400 transition">Agents</a> |
| <a href="integrations.html" class="hover:text-primary-500 transition">Integrations</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 onclick="window.location.href='onboarding.html'" class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg font-medium transition"> |
| <i data-feather="plus" class="mr-2"></i> New Agent |
| </button> |
| </div> |
| </header> |
|
|
| |
| <section class="mb-8"> |
| <div class="flex justify-between items-center mb-6"> |
| <div> |
| <h2 class="text-2xl font-bold">Your AI Agents</h2> |
| <p class="text-gray-400">Manage your team of specialized AI assistants</p> |
| </div> |
| <div class="flex space-x-2"> |
| <div class="relative"> |
| <input type="text" placeholder="Search agents..." class="bg-dark-800 border border-gray-700 rounded-lg px-4 py-2 pl-10 focus:outline-none focus:ring-1 focus:ring-primary-500"> |
| <i data-feather="search" class="absolute left-3 top-2.5 text-gray-500"></i> |
| </div> |
| <button class="p-2 rounded-lg bg-dark-800 hover:bg-dark-700 transition"> |
| <i data-feather="filter"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div class="agent-card glass-panel rounded-xl p-6 border border-primary-500/20 hover:border-primary-500/40 transition"> |
| <div class="flex justify-between items-start mb-4"> |
| <div class="flex items-center space-x-3"> |
| <div class="relative"> |
| <div class="w-12 h-12 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center status-active"> |
| <i data-feather="cpu" class="text-dark-900"></i> |
| </div> |
| <span class="absolute -bottom-1 -right-1 w-5 h-5 bg-green-400 border-2 border-dark-900 rounded-full flex items-center justify-center"> |
| <i data-feather="check" class="text-dark-900 w-3 h-3"></i> |
| </span> |
| </div> |
| <div> |
| <h3 class="font-bold">Chief of Staff <span class="text-xs bg-primary-500/10 text-primary-500 px-2 py-0.5 rounded">Orchestrator</span></h3> |
| <span class="text-xs text-green-400">Active</span> |
| </div> |
| </div> |
| <div class="dropdown relative"> |
| <button class="text-gray-400 hover:text-primary-500"> |
| <i data-feather="more-vertical"></i> |
| </button> |
| </div> |
| </div> |
| <p class="text-sm text-gray-300 mb-4">Coordinates all your agents and manages priorities</p> |
| <div class="flex justify-between text-xs text-gray-400 mb-2"> |
| <span>Last active: 2 min ago</span> |
| <span>Tasks: 5/7 completed</span> |
| </div> |
| <div class="h-1.5 bg-gray-800 rounded-full overflow-hidden"> |
| <div class="bg-primary-500 h-full rounded-full" style="width: 75%"></div> |
| </div> |
| </div> |
|
|
| |
| <div class="agent-card glass-panel rounded-xl p-6 border border-blue-400/20 hover:border-blue-400/40 transition"> |
| <div class="flex justify-between items-start mb-4"> |
| <div class="flex items-center space-x-3"> |
| <div class="relative"> |
| <div class="w-12 h-12 rounded-full bg-gradient-to-br from-blue-400 to-cyan-400 flex items-center justify-center"> |
| <i data-feather="mail" class="text-dark-900"></i> |
| </div> |
| <span class="absolute -bottom-1 -right-1 w-5 h-5 bg-green-400 border-2 border-dark-900 rounded-full flex items-center justify-center"> |
| <i data-feather="check" class="text-dark-900 w-3 h-3"></i> |
| </span> |
| </div> |
| <div> |
| <h3 class="font-bold">Comms Director <span class="text-xs bg-blue-400/10 text-blue-400 px-2 py-0.5 rounded">Communications</span></h3> |
| <span class="text-xs text-green-400">Active</span> |
| </div> |
| </div> |
| <div class="dropdown relative"> |
| <button class="text-gray-400 hover:text-blue-400"> |
| <i data-feather="more-vertical"></i> |
| </button> |
| </div> |
| </div> |
| <p class="text-sm text-gray-300 mb-4">Manages your inbox with AI-powered prioritization</p> |
| <div class="flex justify-between text-xs text-gray-400 mb-2"> |
| <span>Last active: 5 min ago</span> |
| <span>Emails: 24 processed</span> |
| </div> |
| <div class="h-1.5 bg-gray-800 rounded-full overflow-hidden"> |
| <div class="bg-blue-400 h-full rounded-full" style="width: 90%"></div> |
| </div> |
| </div> |
|
|
| |
| <div class="agent-card glass-panel rounded-xl p-6 border border-purple-500/20 hover:border-purple-500/40 transition"> |
| <div class="flex justify-between items-start mb-4"> |
| <div class="flex items-center space-x-3"> |
| <div class="relative"> |
| <div class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center"> |
| <i data-feather="calendar" class="text-dark-900"></i> |
| </div> |
| <span class="absolute -bottom-1 -right-1 w-5 h-5 bg-yellow-400 border-2 border-dark-900 rounded-full flex items-center justify-center"> |
| <i data-feather="clock" class="text-dark-900 w-3 h-3"></i> |
| </span> |
| </div> |
| <div> |
| <h3 class="font-bold">Chief of Scheduling <span class="text-xs bg-purple-500/10 text-purple-500 px-2 py-0.5 rounded">Coordination</span></h3> |
| <span class="text-xs text-yellow-400">Syncing</span> |
| </div> |
| </div> |
| <div class="dropdown relative"> |
| <button class="text-gray-400 hover:text-purple-500"> |
| <i data-feather="more-vertical"></i> |
| </button> |
| </div> |
| </div> |
| <p class="text-sm text-gray-300 mb-4">Coordinates your calendar and schedules meetings</p> |
| <div class="flex justify-between text-xs text-gray-400 mb-2"> |
| <span>Last sync: 1 min ago</span> |
| <span>Events: 3 added</span> |
| </div> |
| <div class="h-1.5 bg-gray-800 rounded-full overflow-hidden"> |
| <div class="bg-purple-500 h-full rounded-full" style="width: 60%"></div> |
| </div> |
| </div> |
|
|
| |
| <div class="agent-card glass-panel rounded-xl p-6 border border-secondary-500/20 hover:border-secondary-500/40 transition"> |
| <div class="flex justify-between items-start mb-4"> |
| <div class="flex items-center space-x-3"> |
| <div class="relative"> |
| <div class="w-12 h-12 rounded-full bg-gradient-to-br from-secondary-500 to-yellow-500 flex items-center justify-center"> |
| <i data-feather="dollar-sign" class="text-dark-900"></i> |
| </div> |
| <span class="absolute -bottom-1 -right-1 w-5 h-5 bg-green-400 border-2 border-dark-900 rounded-full flex items-center justify-center"> |
| <i data-feather="check" class="text-dark-900 w-3 h-3"></i> |
| </span> |
| </div> |
| <div> |
| <h3 class="font-bold">Investor Director <span class="text-xs bg-secondary-500/10 text-secondary-500 px-2 py-0.5 rounded">Capital</span></h3> |
| <span class="text-xs text-green-400">Active</span> |
| </div> |
| </div> |
| <div class="dropdown relative"> |
| <button class="text-gray-400 hover:text-secondary-500"> |
| <i data-feather="more-vertical"></i> |
| </button> |
| </div> |
| </div> |
| <p class="text-sm text-gray-300 mb-4">Tracks investment opportunities and manages outreach</p> |
| <div class="flex justify-between text-xs text-gray-400 mb-2"> |
| <span>Last active: 10 min ago</span> |
| <span>Opportunities: 3 new</span> |
| </div> |
| <div class="h-1.5 bg-gray-800 rounded-full overflow-hidden"> |
| <div class="bg-secondary-500 h-full rounded-full" style="width: 45%"></div> |
| </div> |
| </div> |
|
|
| |
| <div class="agent-card glass-panel rounded-xl p-6 border border-red-400/20 hover:border-red-400/40 transition"> |
| <div class="flex justify-between items-start mb-4"> |
| <div class="flex items-center space-x-3"> |
| <div class="relative"> |
| <div class="w-12 h-12 rounded-full bg-gradient-to-br from-red-400 to-pink-500 flex items-center justify-center"> |
| <i data-feather="alert-triangle" class="text-dark-900"></i> |
| </div> |
| <span class="absolute -bottom-1 -right-1 w-5 h-5 bg-red-400 border-2 border-dark-900 rounded-full flex items-center justify-center"> |
| <i data-feather="alert-circle" class="text-dark-900 w-3 h-3"></i> |
| </span> |
| </div> |
| <div> |
| <h3 class="font-bold">Quality Control <span class="text-xs bg-red-400/10 text-red-400 px-2 py-0.5 rounded">Operations</span></h3> |
| <span class="text-xs text-red-400">Needs attention</span> |
| </div> |
| </div> |
| <div class="dropdown relative"> |
| <button class="text-gray-400 hover:text-red-400"> |
| <i data-feather="more-vertical"></i> |
| </button> |
| </div> |
| </div> |
| <p class="text-sm text-gray-300 mb-4">Monitors system for errors and alerts you</p> |
| <div class="flex justify-between text-xs text-gray-400 mb-2"> |
| <span>Last alert: 5 min ago</span> |
| <span>Issues: 2 unresolved</span> |
| </div> |
| <div class="h-1.5 bg-gray-800 rounded-full overflow-hidden"> |
| <div class="bg-red-400 h-full rounded-full" style="width: 20%"></div> |
| </div> |
| </div> |
|
|
| |
| <div class="agent-card glass-panel rounded-xl p-6 border-2 border-dashed border-gray-600 hover:border-primary-500 transition flex flex-col items-center justify-center cursor-pointer" onclick="window.location.href='onboarding.html'"> |
| <div class="w-12 h-12 rounded-full bg-dark-800 flex items-center justify-center mb-3"> |
| <i data-feather="plus" class="text-primary-500"></i> |
| </div> |
| <h3 class="text-lg font-medium mb-1">Add New Agent</h3> |
| <p class="text-sm text-gray-400 text-center">Create a specialized AI assistant for your needs</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="glass-panel rounded-xl p-6 mb-8"> |
| <div class="flex justify-between items-center mb-6"> |
| <div> |
| <h3 class="text-xl font-bold">Agent Details</h3> |
| <p class="text-gray-400">Detailed view and configuration for your selected agent</p> |
| </div> |
| <div class="flex space-x-2"> |
| <button class="px-4 py-2 bg-dark-800 hover:bg-dark-700 rounded-lg transition"> |
| <i data-feather="settings" class="mr-2"></i> Configure |
| </button> |
| <button class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg transition"> |
| <i data-feather="activity" class="mr-2"></i> Activity Log |
| </button> |
| </div> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| |
| <div class="bg-dark-800 rounded-xl p-4"> |
| <h4 class="font-medium mb-3">Agent Information</h4> |
| <div class="space-y-3"> |
| <div> |
| <p class="text-xs text-gray-400">Agent Name</p> |
| <p class="font-medium">Chief of Staff</p> |
| </div> |
| <div> |
| <p class="text-xs text-gray-400">Agent Type</p> |
| <p class="font-medium">Orchestrator</p> |
| </div> |
| <div> |
| <p class="text-xs text-gray-400">Created</p> |
| <p class="font-medium">2 weeks ago</p> |
| </div> |
| <div> |
| <p class="text-xs text-gray-400">Last Updated</p> |
| <p class="font-medium">3 days ago</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-dark-800 rounded-xl p-4"> |
| <h4 class="font-medium mb-3">Performance</h4> |
| <div class="space-y-3"> |
| <div> |
| <p class="text-xs text-gray-400">Time Saved</p> |
| <p class="font-medium">14.5 hours</p> |
| </div> |
| <div> |
| <p class="text-xs text-gray-400">Tasks Completed</p> |
| <p class="font-medium">47 tasks</p> |
| </div> |
| <div> |
| <p class="text-xs text-gray-400">Success Rate</p> |
| <p class="font-medium">92%</p> |
| </div> |
| <div> |
| <p class="text-xs text-gray-400">Efficiency</p> |
| <p class="font-medium">85%</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-dark-800 rounded-xl p-4"> |
| <h4 class="font-medium mb-3">Connected Services</h4> |
| <div class="flex flex-wrap gap-2 mb-3"> |
| <span class="text-xs bg-blue-400/10 text-blue-400 px-2 py-1 rounded">Gmail</span> |
| <span class="text-xs bg-purple-500/10 text-purple-500 px-2 py-1 rounded">Slack</span> |
| <span class="text-xs bg-green-400/10 text-green-400 px-2 py-1 rounded">Notion</span> |
| <span class="text-xs bg-yellow-500/10 text-yellow-500 px-2 py-1 rounded">Google Calendar</span> |
| </div> |
| <button class="text-xs text-primary-500 hover:text-primary-400 flex items-center"> |
| <i data-feather="plus" class="w-3 h-3 mr-1"></i> Add Service |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="border-t border-gray-800 pt-8 pb-12"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 VAI. All rights reserved.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-500 hover:text-primary-500 transition"> |
| <i data-feather="twitter"></i> |
| </a> |
| <a href="#" class="text-gray-500 hover:text-primary-500 transition"> |
| <i data-feather="linkedin"></i> |
| </a> |
| <a href="#" class="text-gray-500 hover:text-primary-500 transition"> |
| <i data-feather="github"></i> |
| </a> |
| </div> |
| </div> |
| </footer> |
| </div> |
| |
| <div id="agentChatModal" class="fixed inset-0 z-50 hidden"> |
| <div class="absolute inset-0 bg-black/50"></div> |
| <div class="absolute bottom-0 right-0 w-full md:w-1/3 h-full md:h-auto md:top-1/2 md:right-4 md:-translate-y-1/2 bg-dark-800 rounded-t-xl md:rounded-xl shadow-xl flex flex-col"> |
| <div class="p-4 border-b border-gray-700 flex justify-between items-center"> |
| <div class="flex items-center space-x-3"> |
| <div id="agentChatAvatar" 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 id="agentChatName" class="font-medium">Agent</h4> |
| <span id="agentChatStatus" class="text-xs text-primary-500">Active</span> |
| </div> |
| </div> |
| <button id="closeChatModal" class="text-gray-400 hover:text-primary-500"> |
| <i data-feather="x"></i> |
| </button> |
| </div> |
| <div id="agentChatMessages" class="flex-1 p-4 overflow-y-auto space-y-3"> |
| |
| </div> |
| <div class="p-3 border-t border-gray-700"> |
| <div class="relative"> |
| <input id="agentChatInput" type="text" placeholder="Type a message..." class="w-full bg-dark-700 border border-gray-600 rounded-full px-4 py-2 pr-10 focus:outline-none focus:ring-1 focus:ring-primary-500"> |
| <button id="sendAgentMessage" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-primary-500"> |
| <i data-feather="send"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="taskManager" class="fixed inset-0 z-40 md:right-0 md:left-auto md:w-96 bg-dark-800 border-l border-gray-700 transform translate-x-full md:translate-x-0 transition-transform duration-300"> |
| <div class="p-4 border-b border-gray-700 flex justify-between items-center"> |
| <h3 class="text-lg font-bold">Task Manager</h3> |
| <button id="closeTaskManager" class="md:hidden text-gray-400 hover:text-primary-500"> |
| <i data-feather="x"></i> |
| </button> |
| </div> |
| <div class="p-4 space-y-4"> |
| <div class="flex justify-between items-center"> |
| <h4 class="font-medium">Projects</h4> |
| <button class="text-xs bg-primary-500/10 text-primary-500 px-2 py-1 rounded hover:bg-primary-500/20"> |
| <i data-feather="plus" class="w-3 h-3 mr-1"></i> New |
| </button> |
| </div> |
| <div class="space-y-3"> |
| |
| <div class="project-folder"> |
| <div class="flex justify-between items-center cursor-pointer"> |
| <div class="flex items-center space-x-2"> |
| <i data-feather="folder" class="text-yellow-500"></i> |
| <span>Investor Relations</span> |
| </div> |
| <i data-feather="chevron-down" class="text-gray-400 transform transition-transform"></i> |
| </div> |
| <div class="project-tasks mt-2 pl-6 space-y-2 hidden"> |
| <div class="task-item bg-dark-700 p-2 rounded border-l-2 border-primary-500"> |
| <div class="flex justify-between items-start"> |
| <div>Review new investment deck</div> |
| <div class="flex space-x-2"> |
| <button class="text-xs text-green-400 hover:text-green-300"> |
| <i data-feather="check" class="w-3 h-3"></i> |
| </button> |
| <button class="text-xs text-gray-400 hover:text-primary-500"> |
| <i data-feather="more-vertical" class="w-3 h-3"></i> |
| </button> |
| </div> |
| </div> |
| <div class="text-xs text-gray-400 mt-1">Added 2 hours ago</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <button id="openTaskManager" class="fixed right-4 bottom-4 z-30 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-full p-3 shadow-lg md:hidden"> |
| <i data-feather="list"></i> |
| </button> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| const agentCards = document.querySelectorAll('.agent-card'); |
| const agentChatModal = document.getElementById('agentChatModal'); |
| const closeChatModal = document.getElementById('closeChatModal'); |
| const agentChatMessages = document.getElementById('agentChatMessages'); |
| const agentChatInput = document.getElementById('agentChatInput'); |
| const sendAgentMessage = document.getElementById('sendAgentMessage'); |
| |
| agentCards.forEach(card => { |
| card.addEventListener('click', (e) => { |
| if (e.target.closest('button')) return; |
| |
| const avatar = card.querySelector('.w-12.h-12'); |
| const name = card.querySelector('h3'); |
| const status = card.querySelector('.text-xs'); |
| |
| document.getElementById('agentChatAvatar').className = avatar.className + ' w-10 h-10'; |
| document.getElementById('agentChatAvatar').innerHTML = avatar.innerHTML; |
| document.getElementById('agentChatName').textContent = name.textContent; |
| document.getElementById('agentChatStatus').textContent = status.textContent; |
| document.getElementById('agentChatStatus').className = status.className + ' text-xs'; |
| |
| |
| agentChatMessages.innerHTML = ''; |
| |
| |
| addAgentMessage(`Hello! I'm your ${name.textContent}. How can I assist you today?`, true); |
| addAgentMessage("I've completed the task you assigned earlier about the investment analysis. Here's my report...", true); |
| |
| |
| agentChatModal.classList.remove('hidden'); |
| }); |
| }); |
| |
| closeChatModal.addEventListener('click', () => { |
| agentChatModal.classList.add('hidden'); |
| }); |
| |
| function addAgentMessage(text, isAgent) { |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = `flex ${isAgent ? 'justify-start' : 'justify-end'}`; |
| |
| const bubbleDiv = document.createElement('div'); |
| bubbleDiv.className = `max-w-xs md:max-w-md rounded-lg px-4 py-2 ${isAgent ? 'bg-dark-700' : 'bg-primary-500 text-dark-900'}`; |
| bubbleDiv.textContent = text; |
| |
| messageDiv.appendChild(bubbleDiv); |
| agentChatMessages.appendChild(messageDiv); |
| agentChatMessages.scrollTop = agentChatMessages.scrollHeight; |
| } |
| |
| sendAgentMessage.addEventListener('click', () => { |
| const message = agentChatInput.value.trim(); |
| if (message) { |
| addAgentMessage(message, false); |
| agentChatInput.value = ''; |
| |
| |
| setTimeout(() => { |
| const responses = [ |
| "I'll work on that right away.", |
| "I need some clarification on this task.", |
| "This requires your approval to proceed.", |
| "I've added this to your task list.", |
| "Would you like me to prioritize this?" |
| ]; |
| addAgentMessage(responses[Math.floor(Math.random() * responses.length)], true); |
| }, 1000); |
| } |
| }); |
| |
| agentChatInput.addEventListener('keypress', (e) => { |
| if (e.key === 'Enter') { |
| sendAgentMessage.click(); |
| } |
| }); |
| |
| |
| const taskManager = document.getElementById('taskManager'); |
| const openTaskManager = document.getElementById('openTaskManager'); |
| const closeTaskManager = document.getElementById('closeTaskManager'); |
| |
| openTaskManager.addEventListener('click', () => { |
| taskManager.classList.remove('translate-x-full'); |
| }); |
| |
| closeTaskManager.addEventListener('click', () => { |
| taskManager.classList.add('translate-x-full'); |
| }); |
| |
| |
| document.querySelectorAll('.project-folder').forEach(folder => { |
| const header = folder.querySelector('.flex.items-center'); |
| const icon = folder.querySelector('i[data-feather="chevron-down"]'); |
| const tasks = folder.querySelector('.project-tasks'); |
| |
| header.addEventListener('click', () => { |
| tasks.classList.toggle('hidden'); |
| icon.classList.toggle('rotate-180'); |
| }); |
| }); |
| |
| |
| function processTask(taskText) { |
| |
| console.log(`AI is processing task: ${taskText}`); |
| |
| |
| setTimeout(() => { |
| const shouldAsk = Math.random() > 0.5; |
| if (shouldAsk) { |
| addAgentMessage(`I need clarification about: "${taskText}". Can you provide more details?`, true); |
| agentChatModal.classList.remove('hidden'); |
| } else { |
| const completedMsg = `I've completed: ${taskText}`; |
| addAgentMessage(completedMsg, true); |
| } |
| }, 2000); |
| } |
| </script> |
|
|
| <style> |
| .project-tasks { |
| transition: all 0.3s ease; |
| } |
| .task-item { |
| transition: all 0.2s ease; |
| } |
| .task-item:hover { |
| transform: translateX(2px); |
| background-color: rgba(16, 185, 129, 0.05); |
| } |
| @media (max-width: 768px) { |
| #agentChatModal > div { |
| width: 100%; |
| height: 80vh; |
| bottom: 0; |
| border-radius: 1rem 1rem 0 0; |
| } |
| #taskManager { |
| width: 100%; |
| } |
| } |
| </style> |
| </body> |
| </html> |
