Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nexus AI Companion</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> | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .typing-indicator { | |
| display: flex; | |
| padding: 8px 12px; | |
| } | |
| .typing-dot { | |
| width: 8px; | |
| height: 8px; | |
| background-color: #4f46e5; | |
| border-radius: 50%; | |
| margin: 0 2px; | |
| animation: pulse 1.5s infinite ease-in-out; | |
| } | |
| .typing-dot:nth-child(1) { animation-delay: 0s; } | |
| .typing-dot:nth-child(2) { animation-delay: 0.3s; } | |
| .typing-dot:nth-child(3) { animation-delay: 0.6s; } | |
| .chat-container { | |
| height: calc(100vh - 160px); | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| position: absolute; | |
| z-index: 50; | |
| transform: translateX(-100%); | |
| } | |
| .sidebar-open { | |
| transform: translateX(0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div id="sidebar" class="sidebar w-64 bg-indigo-900 text-white flex flex-col"> | |
| <!-- Header --> | |
| <div class="p-4 flex items-center justify-between border-b border-indigo-800"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-700 flex items-center justify-center"> | |
| <i class="fas fa-robot text-xl"></i> | |
| </div> | |
| <span class="font-bold">Nexus AI</span> | |
| </div> | |
| <button id="sidebar-toggle" class="md:hidden text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="flex-1 overflow-y-auto p-4 space-y-2"> | |
| <div class="space-y-1"> | |
| <div class="text-xs uppercase text-indigo-400 font-semibold mb-2">Main</div> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg bg-indigo-800"> | |
| <i class="fas fa-comment-dots w-5"></i> | |
| <span>Chat</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-indigo-800"> | |
| <i class="fas fa-tasks w-5"></i> | |
| <span>Tasks</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-indigo-800"> | |
| <i class="fas fa-book w-5"></i> | |
| <span>Journal</span> | |
| </a> | |
| </div> | |
| <div class="space-y-1 mt-6"> | |
| <div class="text-xs uppercase text-indigo-400 font-semibold mb-2">System</div> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-indigo-800"> | |
| <i class="fas fa-desktop w-5"></i> | |
| <span>System Control</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-indigo-800"> | |
| <i class="fas fa-network-wired w-5"></i> | |
| <span>Resources</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-indigo-800"> | |
| <i class="fas fa-shield-alt w-5"></i> | |
| <span>Security</span> | |
| </a> | |
| </div> | |
| <div class="space-y-1 mt-6"> | |
| <div class="text-xs uppercase text-indigo-400 font-semibold mb-2">Social</div> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-indigo-800"> | |
| <i class="fas fa-users w-5"></i> | |
| <span>Groups</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-indigo-800"> | |
| <i class="fas fa-user-friends w-5"></i> | |
| <span>Contacts</span> | |
| </a> | |
| </div> | |
| </nav> | |
| <!-- User Profile --> | |
| <div class="p-4 border-t border-indigo-800"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-700 flex items-center justify-center"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="font-medium">John Doe</div> | |
| <div class="text-xs text-indigo-400">Online</div> | |
| </div> | |
| <a href="#" class="text-indigo-400 hover:text-white"> | |
| <i class="fas fa-cog"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Bar --> | |
| <header class="bg-white shadow-sm p-4 flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <button id="mobile-sidebar-toggle" class="md:hidden text-gray-600"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <h1 class="text-xl font-semibold text-gray-800">AI Companion</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-bell text-gray-600"></i> | |
| <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span> | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-question-circle text-gray-600"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Chat Area --> | |
| <div class="flex-1 overflow-hidden flex flex-col bg-white"> | |
| <!-- Chat Header --> | |
| <div class="border-b p-4 flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i class="fas fa-robot text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Nexus AI</div> | |
| <div class="text-xs text-gray-500">Active now</div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-phone text-gray-600"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-video text-gray-600"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-ellipsis-h text-gray-600"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Messages --> | |
| <div id="chat-messages" class="flex-1 overflow-y-auto p-4 space-y-4 chat-container"> | |
| <!-- Date divider --> | |
| <div class="flex items-center justify-center my-4"> | |
| <div class="text-xs text-gray-500 bg-gray-100 px-3 py-1 rounded-full"> | |
| Today, June 15 | |
| </div> | |
| </div> | |
| <!-- AI Message --> | |
| <div class="flex space-x-3"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i class="fas fa-robot text-indigo-600 text-sm"></i> | |
| </div> | |
| </div> | |
| <div class="max-w-[70%]"> | |
| <div class="bg-indigo-50 rounded-lg p-3"> | |
| <p>Hello! I'm your Nexus AI Companion. I'm here to help you manage tasks, resources, and optimize your digital experience. How can I assist you today?</p> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1">10:24 AM</div> | |
| </div> | |
| </div> | |
| <!-- User Message --> | |
| <div class="flex space-x-3 justify-end"> | |
| <div class="max-w-[70%]"> | |
| <div class="bg-indigo-100 rounded-lg p-3"> | |
| <p>Can you show me my current system resources?</p> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1 text-right">10:25 AM</div> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center"> | |
| <i class="fas fa-user text-white text-sm"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Message with System Info --> | |
| <div class="flex space-x-3"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i class="fas fa-robot text-indigo-600 text-sm"></i> | |
| </div> | |
| </div> | |
| <div class="max-w-[70%]"> | |
| <div class="bg-indigo-50 rounded-lg p-3"> | |
| <p>Here's your current system status:</p> | |
| <div class="mt-2 space-y-2"> | |
| <div class="flex items-center justify-between text-sm"> | |
| <span>CPU Usage</span> | |
| <div class="w-32 bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 45%"></div> | |
| </div> | |
| <span>45%</span> | |
| </div> | |
| <div class="flex items-center justify-between text-sm"> | |
| <span>Memory</span> | |
| <div class="w-32 bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 68%"></div> | |
| </div> | |
| <span>68%</span> | |
| </div> | |
| <div class="flex items-center justify-between text-sm"> | |
| <span>Storage</span> | |
| <div class="w-32 bg-gray-200 rounded-full h-2"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 32%"></div> | |
| </div> | |
| <span>32%</span> | |
| </div> | |
| </div> | |
| <p class="mt-2">Would you like me to optimize anything?</p> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1">10:26 AM</div> | |
| </div> | |
| </div> | |
| <!-- AI Typing Indicator --> | |
| <div class="flex space-x-3 hidden" id="typing-indicator"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i class="fas fa-robot text-indigo-600 text-sm"></i> | |
| </div> | |
| </div> | |
| <div class="max-w-[70%]"> | |
| <div class="bg-indigo-50 rounded-lg p-3"> | |
| <div class="typing-indicator"> | |
| <div class="typing-dot"></div> | |
| <div class="typing-dot"></div> | |
| <div class="typing-dot"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="border-t p-4 bg-white"> | |
| <div class="flex items-center space-x-2"> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-plus text-gray-600"></i> | |
| </button> | |
| <div class="flex-1 relative"> | |
| <input | |
| id="message-input" | |
| type="text" | |
| placeholder="Type a message..." | |
| class="w-full border rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" | |
| > | |
| <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-indigo-600"> | |
| <i class="far fa-smile"></i> | |
| </button> | |
| </div> | |
| <button id="send-button" class="p-2 rounded-full bg-indigo-600 text-white hover:bg-indigo-700"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="mt-2 flex justify-between text-xs text-gray-500"> | |
| <div> | |
| <button class="hover:text-indigo-600 flex items-center"> | |
| <i class="fas fa-magic mr-1"></i> AI Tools | |
| </button> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button class="hover:text-indigo-600"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| <button class="hover:text-indigo-600"> | |
| <i class="fas fa-image"></i> | |
| </button> | |
| <button class="hover:text-indigo-600"> | |
| <i class="fas fa-paperclip"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Panel (Tasks/System) --> | |
| <div class="w-80 border-l bg-white hidden lg:flex flex-col"> | |
| <div class="border-b p-4"> | |
| <div class="flex items-center justify-between"> | |
| <h2 class="font-semibold">System Dashboard</h2> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex-1 overflow-y-auto p-4 space-y-6"> | |
| <!-- Quick Actions --> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-500 mb-2">Quick Actions</h3> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button class="p-3 bg-gray-100 rounded-lg hover:bg-gray-200 flex flex-col items-center"> | |
| <i class="fas fa-magic text-indigo-600 mb-1"></i> | |
| <span class="text-xs">Optimize</span> | |
| </button> | |
| <button class="p-3 bg-gray-100 rounded-lg hover:bg-gray-200 flex flex-col items-center"> | |
| <i class="fas fa-shield-alt text-green-600 mb-1"></i> | |
| <span class="text-xs">Security</span> | |
| </button> | |
| <button class="p-3 bg-gray-100 rounded-lg hover:bg-gray-200 flex flex-col items-center"> | |
| <i class="fas fa-broom text-blue-600 mb-1"></i> | |
| <span class="text-xs">Cleanup</span> | |
| </button> | |
| <button class="p-3 bg-gray-100 rounded-lg hover:bg-gray-200 flex flex-col items-center"> | |
| <i class="fas fa-power-off text-red-600 mb-1"></i> | |
| <span class="text-xs">Shutdown</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- System Stats --> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-500 mb-2">System Health</h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>CPU</span> | |
| <span>45%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Memory</span> | |
| <span>6.8/16GB</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 68%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Storage</span> | |
| <span>256GB/1TB</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 32%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Running Processes --> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-500 mb-2">Top Processes</h3> | |
| <div class="space-y-2"> | |
| <div class="flex items-center justify-between text-sm"> | |
| <span class="truncate">Chrome</span> | |
| <span class="text-gray-500">24%</span> | |
| </div> | |
| <div class="flex items-center justify-between text-sm"> | |
| <span class="truncate">VS Code</span> | |
| <span class="text-gray-500">18%</span> | |
| </div> | |
| <div class="flex items-center justify-between text-sm"> | |
| <span class="truncate">Spotify</span> | |
| <span class="text-gray-500">12%</span> | |
| </div> | |
| <div class="flex items-center justify-between text-sm"> | |
| <span class="truncate">Node.js</span> | |
| <span class="text-gray-500">9%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pending Tasks --> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-500 mb-2">Pending Tasks</h3> | |
| <div class="space-y-2"> | |
| <div class="flex items-start space-x-2"> | |
| <input type="checkbox" class="mt-1"> | |
| <div> | |
| <div class="text-sm">Complete project proposal</div> | |
| <div class="text-xs text-gray-500">Today, 3:00 PM</div> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-2"> | |
| <input type="checkbox" class="mt-1"> | |
| <div> | |
| <div class="text-sm">Backup important files</div> | |
| <div class="text-xs text-gray-500">Tomorrow</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Toggle sidebar on mobile | |
| const sidebar = document.getElementById('sidebar'); | |
| const sidebarToggle = document.getElementById('sidebar-toggle'); | |
| const mobileSidebarToggle = document.getElementById('mobile-sidebar-toggle'); | |
| mobileSidebarToggle.addEventListener('click', () => { | |
| sidebar.classList.toggle('sidebar-open'); | |
| }); | |
| sidebarToggle.addEventListener('click', () => { | |
| sidebar.classList.toggle('sidebar-open'); | |
| }); | |
| // Chat functionality | |
| const messageInput = document.getElementById('message-input'); | |
| const sendButton = document.getElementById('send-button'); | |
| const chatMessages = document.getElementById('chat-messages'); | |
| const typingIndicator = document.getElementById('typing-indicator'); | |
| function sendMessage() { | |
| const message = messageInput.value.trim(); | |
| if (message) { | |
| // Add user message | |
| const userMessage = document.createElement('div'); | |
| userMessage.className = 'flex space-x-3 justify-end'; | |
| userMessage.innerHTML = ` | |
| <div class="max-w-[70%]"> | |
| <div class="bg-indigo-100 rounded-lg p-3"> | |
| <p>${message}</p> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1 text-right">${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</div> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center"> | |
| <i class="fas fa-user text-white text-sm"></i> | |
| </div> | |
| </div> | |
| `; | |
| chatMessages.appendChild(userMessage); | |
| // Clear input | |
| messageInput.value = ''; | |
| // Show typing indicator | |
| typingIndicator.classList.remove('hidden'); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| // Simulate AI response after delay | |
| setTimeout(() => { | |
| typingIndicator.classList.add('hidden'); | |
| // Add AI response | |
| const aiResponses = [ | |
| "I've processed your request. Is there anything else you'd like me to help with?", | |
| "Understood. I can assist with that. Would you like me to take any specific action?", | |
| "I've noted that information. How would you like to proceed?", | |
| "That's an interesting point. Here's what I can suggest based on that...", | |
| "I can help optimize that for you. Would you like me to proceed?" | |
| ]; | |
| const randomResponse = aiResponses[Math.floor(Math.random() * aiResponses.length)]; | |
| const aiMessage = document.createElement('div'); | |
| aiMessage.className = 'flex space-x-3'; | |
| aiMessage.innerHTML = ` | |
| <div class="flex-shrink-0"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i class="fas fa-robot text-indigo-600 text-sm"></i> | |
| </div> | |
| </div> | |
| <div class="max-w-[70%]"> | |
| <div class="bg-indigo-50 rounded-lg p-3"> | |
| <p>${randomResponse}</p> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1">${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</div> | |
| </div> | |
| `; | |
| chatMessages.appendChild(aiMessage); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| }, 1500); | |
| } | |
| } | |
| // Send message on button click | |
| sendButton.addEventListener('click', sendMessage); | |
| // Send message on Enter key | |
| messageInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| }); | |
| </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=edwarddddr/my-ai-companion" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |