Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EOS AI Business Suite</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --primary: #4F46E5; | |
| --secondary: #10B981; | |
| --accent: #F59E0B; | |
| --dark: #1F2937; | |
| --light: #F9FAFB; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #F3F4F6; | |
| color: var(--dark); | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, var(--primary) 0%, #7C3AED 100%); | |
| } | |
| .sidebar-item:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .sidebar-item.active { | |
| background-color: rgba(255, 255, 255, 0.2); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); } | |
| 70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); } | |
| } | |
| .task-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.35s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .ai-response { | |
| border-left: 4px solid var(--primary); | |
| } | |
| .tooltip { | |
| position: relative; | |
| } | |
| .tooltip:hover .tooltip-text { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .tooltip-text { | |
| visibility: hidden; | |
| width: 120px; | |
| background-color: var(--dark); | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 5px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| margin-left: -60px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 gradient-bg text-white"> | |
| <div class="flex items-center justify-center h-16 px-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-brain text-2xl mr-2"></i> | |
| <span class="text-xl font-bold">EOS AI Suite</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto"> | |
| <!-- API Configuration --> | |
| <div class="mb-6 p-3 bg-white bg-opacity-10 rounded-lg"> | |
| <h3 class="text-sm font-semibold mb-2 flex items-center"> | |
| <i class="fas fa-key mr-2"></i> API Configuration | |
| </h3> | |
| <div class="mt-2"> | |
| <label class="block text-xs text-white text-opacity-80 mb-1">DeepSeek API Key</label> | |
| <div class="flex"> | |
| <input type="password" id="apiKey" placeholder="Enter your API key" | |
| class="w-full px-3 py-2 text-xs bg-white bg-opacity-20 rounded-l focus:outline-none focus:ring-1 focus:ring-white"> | |
| <button onclick="saveApiKey()" class="px-3 py-2 bg-white bg-opacity-30 text-xs rounded-r hover:bg-opacity-40"> | |
| <i class="fas fa-save"></i> | |
| </button> | |
| </div> | |
| <div class="mt-2 flex items-center text-xs"> | |
| <i class="fas fa-circle text-green-400 mr-1 text-xs"></i> | |
| <span id="apiStatus">Not connected</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="flex-1 space-y-1"> | |
| <a href="#" class="sidebar-item active flex items-center px-3 py-2 rounded-md text-sm font-medium"> | |
| <i class="fas fa-home mr-3"></i> Dashboard | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-md text-sm font-medium"> | |
| <i class="fas fa-rocket mr-3"></i> Vision | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-md text-sm font-medium"> | |
| <i class="fas fa-users mr-3"></i> People | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-md text-sm font-medium"> | |
| <i class="fas fa-chart-line mr-3"></i> Data | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-md text-sm font-medium"> | |
| <i class="fas fa-tasks mr-3"></i> Issues | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-md text-sm font-medium"> | |
| <i class="fas fa-lightbulb mr-3"></i> Process | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-md text-sm font-medium"> | |
| <i class="fas fa-comments mr-3"></i> AI Assistant | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-md text-sm font-medium"> | |
| <i class="fas fa-cog mr-3"></i> Settings | |
| </a> | |
| </nav> | |
| <!-- Quick Actions --> | |
| <div class="mt-auto mb-4"> | |
| <button class="w-full flex items-center justify-center px-4 py-2 bg-white text-indigo-600 rounded-md text-sm font-medium hover:bg-opacity-90"> | |
| <i class="fas fa-plus mr-2"></i> New Meeting | |
| </button> | |
| <button onclick="showAiPrompt()" class="mt-2 w-full flex items-center justify-center px-4 py-2 bg-yellow-500 text-white rounded-md text-sm font-medium hover:bg-yellow-600"> | |
| <i class="fas fa-magic mr-2"></i> AI Quick Action | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex flex-col flex-1 overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <div class="flex items-center justify-between h-16 px-4 bg-white border-b"> | |
| <div class="flex items-center"> | |
| <button class="md:hidden mr-2 text-gray-500"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <h1 class="text-lg font-semibold">EOS Dashboard</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button class="p-1 rounded-full text-gray-500 hover:text-gray-700 focus:outline-none"> | |
| <i class="fas fa-bell"></i> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <button onclick="toggleUserDropdown()" class="flex items-center focus:outline-none"> | |
| <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <span class="ml-2 text-sm font-medium hidden md:inline">John Doe</span> | |
| <i class="fas fa-chevron-down ml-1 text-xs hidden md:inline"></i> | |
| </button> | |
| <div id="userDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="flex-1 overflow-auto p-4 bg-gray-50"> | |
| <!-- Welcome Banner --> | |
| <div class="gradient-bg text-white rounded-xl p-6 mb-6 relative overflow-hidden"> | |
| <div class="relative z-10"> | |
| <h2 class="text-2xl font-bold mb-2">Welcome back, John!</h2> | |
| <p class="mb-4 opacity-90">Your company is operating at <span class="font-bold">78%</span> of its potential according to EOS standards.</p> | |
| <button class="px-4 py-2 bg-white text-indigo-600 rounded-md text-sm font-medium hover:bg-opacity-90"> | |
| Get AI Recommendations | |
| </button> | |
| </div> | |
| <div class="absolute -right-10 -bottom-10 opacity-20"> | |
| <i class="fas fa-brain text-9xl"></i> | |
| </div> | |
| </div> | |
| <!-- EOS Components Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Vision --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-lg flex items-center"> | |
| <i class="fas fa-rocket mr-2 text-indigo-500"></i> Vision | |
| </h3> | |
| <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">85% Complete</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Clarify your company's vision and ensure everyone is aligned.</p> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center mr-2"> | |
| <i class="fas fa-check text-indigo-500 text-xs"></i> | |
| </div> | |
| <span class="text-sm">Core Values Defined</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center mr-2"> | |
| <i class="fas fa-check text-indigo-500 text-xs"></i> | |
| </div> | |
| <span class="text-sm">10-Year Target Set</span> | |
| </div> | |
| <div class="flex items-center opacity-50"> | |
| <div class="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center mr-2"> | |
| <i class="fas fa-ellipsis-h text-gray-400 text-xs"></i> | |
| </div> | |
| <span class="text-sm">Marketing Strategy</span> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full py-2 bg-indigo-50 text-indigo-600 rounded-md text-sm font-medium hover:bg-indigo-100"> | |
| Refine Vision | |
| </button> | |
| </div> | |
| <!-- People --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-lg flex items-center"> | |
| <i class="fas fa-users mr-2 text-blue-500"></i> People | |
| </h3> | |
| <span class="text-xs px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full">Needs Attention</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Get the right people in the right seats.</p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-xs text-gray-500 mb-1"> | |
| <span>Seats Filled</span> | |
| <span>5/7</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 71%"></div> | |
| </div> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center mr-2"> | |
| <i class="fas fa-user text-blue-500 text-xs"></i> | |
| </div> | |
| <span class="text-sm">Marketing Lead</span> | |
| </div> | |
| <span class="text-xs text-red-500">Vacant</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center mr-2"> | |
| <i class="fas fa-user text-blue-500 text-xs"></i> | |
| </div> | |
| <span class="text-sm">Operations</span> | |
| </div> | |
| <span class="text-xs text-green-500">Strong Fit</span> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full py-2 bg-blue-50 text-blue-600 rounded-md text-sm font-medium hover:bg-blue-100"> | |
| Manage Team | |
| </button> | |
| </div> | |
| <!-- Data --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-lg flex items-center"> | |
| <i class="fas fa-chart-line mr-2 text-green-500"></i> Data | |
| </h3> | |
| <span class="text-xs px-2 py-1 bg-blue-100 text-blue-800 rounded-full">3 New Reports</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Measure your pulse with the right metrics.</p> | |
| <div class="grid grid-cols-3 gap-2 mb-4"> | |
| <div class="bg-gray-50 p-2 rounded text-center"> | |
| <div class="text-lg font-bold text-green-600">$124K</div> | |
| <div class="text-xs text-gray-500">Revenue</div> | |
| </div> | |
| <div class="bg-gray-50 p-2 rounded text-center"> | |
| <div class="text-lg font-bold text-blue-600">87%</div> | |
| <div class="text-xs text-gray-500">Profit Margin</div> | |
| </div> | |
| <div class="bg-gray-50 p-2 rounded text-center"> | |
| <div class="text-lg font-bold text-purple-600">42</div> | |
| <div class="text-xs text-gray-500">New Clients</div> | |
| </div> | |
| </div> | |
| <div class="h-24 bg-gray-100 rounded flex items-center justify-center mb-2"> | |
| <span class="text-gray-400 text-sm">Revenue Chart</span> | |
| </div> | |
| <button class="mt-2 w-full py-2 bg-green-50 text-green-600 rounded-md text-sm font-medium hover:bg-green-100"> | |
| View All Metrics | |
| </button> | |
| </div> | |
| <!-- Issues --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-lg flex items-center"> | |
| <i class="fas fa-exclamation-triangle mr-2 text-red-500"></i> Issues | |
| </h3> | |
| <span class="text-xs px-2 py-1 bg-red-100 text-red-800 rounded-full">5 Active</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Identify, discuss and solve your issues.</p> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <div class="w-6 h-6 rounded-full bg-red-100 flex items-center justify-center mr-2 mt-1"> | |
| <i class="fas fa-exclamation text-red-500 text-xs"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium">Client onboarding delays</div> | |
| <div class="text-xs text-gray-500">Open for 12 days</div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-6 h-6 rounded-full bg-red-100 flex items-center justify-center mr-2 mt-1"> | |
| <i class="fas fa-exclamation text-red-500 text-xs"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium">Inventory shortages</div> | |
| <div class="text-xs text-gray-500">Open for 5 days</div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-6 h-6 rounded-full bg-yellow-100 flex items-center justify-center mr-2 mt-1"> | |
| <i class="fas fa-exclamation text-yellow-500 text-xs"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium">Team communication</div> | |
| <div class="text-xs text-gray-500">Open for 3 days</div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full py-2 bg-red-50 text-red-600 rounded-md text-sm font-medium hover:bg-red-100"> | |
| Solve Issues | |
| </button> | |
| </div> | |
| <!-- Process --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-lg flex items-center"> | |
| <i class="fas fa-lightbulb mr-2 text-purple-500"></i> Process | |
| </h3> | |
| <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded-full">2 Incomplete</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Document your core processes.</p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-xs text-gray-500 mb-1"> | |
| <span>Process Documentation</span> | |
| <span>60%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 60%"></div> | |
| </div> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center mr-2"> | |
| <i class="fas fa-check text-purple-500 text-xs"></i> | |
| </div> | |
| <span class="text-sm">Sales Process</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center mr-2"> | |
| <i class="fas fa-check text-purple-500 text-xs"></i> | |
| </div> | |
| <span class="text-sm">Onboarding</span> | |
| </div> | |
| <div class="flex items-center opacity-50"> | |
| <div class="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center mr-2"> | |
| <i class="fas fa-ellipsis-h text-gray-400 text-xs"></i> | |
| </div> | |
| <span class="text-sm">Customer Support</span> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full py-2 bg-purple-50 text-purple-600 rounded-md text-sm font-medium hover:bg-purple-100"> | |
| Document Processes | |
| </button> | |
| </div> | |
| <!-- Traction --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-lg flex items-center"> | |
| <i class="fas fa-bullseye mr-2 text-orange-500"></i> Traction | |
| </h3> | |
| <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">On Track</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Execute your vision with discipline.</p> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="text-sm">Quarterly Rocks</div> | |
| <div class="text-xs px-2 py-1 bg-orange-100 text-orange-800 rounded-full">3/4 Complete</div> | |
| </div> | |
| <div class="space-y-2 mb-4"> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 rounded-full bg-green-100 border-2 border-green-500 flex items-center justify-center mr-2"> | |
| <i class="fas fa-check text-green-500 text-xs"></i> | |
| </div> | |
| <span class="text-sm">Launch new product</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 rounded-full bg-green-100 border-2 border-green-500 flex items-center justify-center mr-2"> | |
| <i class="fas fa-check text-green-500 text-xs"></i> | |
| </div> | |
| <span class="text-sm">Hire 2 team members</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 rounded-full bg-green-100 border-2 border-green-500 flex items-center justify-center mr-2"> | |
| <i class="fas fa-check text-green-500 text-xs"></i> | |
| </div> | |
| <span class="text-sm">Redesign website</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 rounded-full bg-orange-100 border-2 border-orange-500 flex items-center justify-center mr-2"> | |
| <i class="fas fa-spinner text-orange-500 text-xs"></i> | |
| </div> | |
| <span class="text-sm">Secure $200K funding</span> | |
| </div> | |
| </div> | |
| <button class="mt-2 w-full py-2 bg-orange-50 text-orange-600 rounded-md text-sm font-medium hover:bg-orange-100"> | |
| View Traction Tools | |
| </button> | |
| </div> | |
| </div> | |
| <!-- AI Assistant Section --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 mb-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-lg flex items-center"> | |
| <i class="fas fa-robot mr-2 text-indigo-500"></i> AI Business Assistant | |
| </h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-indigo-50 text-indigo-600 rounded-md text-xs font-medium hover:bg-indigo-100"> | |
| <i class="fas fa-bolt mr-1"></i> Quick Actions | |
| </button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-md text-xs font-medium hover:bg-gray-200"> | |
| <i class="fas fa-history mr-1"></i> History | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-4 mb-4"> | |
| <div class="flex mb-3"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-indigo-500"></i> | |
| </div> | |
| <div class="ai-response bg-white p-3 rounded-lg flex-1"> | |
| <p class="text-sm">Hi John! I'm your AI business assistant. I can help you analyze your EOS implementation, suggest improvements, generate reports, and more. What would you like to work on today?</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mb-3"> | |
| <div class="ai-response bg-indigo-50 p-3 rounded-lg max-w-xs"> | |
| <p class="text-sm">Can you analyze our People component and suggest improvements?</p> | |
| </div> | |
| <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center ml-3"> | |
| <i class="fas fa-user text-white text-sm"></i> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-indigo-500"></i> | |
| </div> | |
| <div class="ai-response bg-white p-3 rounded-lg flex-1"> | |
| <p class="text-sm font-medium mb-1">Based on your People component data:</p> | |
| <ul class="text-sm list-disc pl-5 space-y-1"> | |
| <li>Your Marketing Lead position has been vacant for 47 days - I recommend prioritizing this hire</li> | |
| <li>Your Operations team member is a strong fit - consider recognizing their contributions</li> | |
| <li>Team communication was flagged as an issue - I can help draft a communication protocol</li> | |
| </ul> | |
| <div class="mt-2 flex space-x-2"> | |
| <button class="px-3 py-1 bg-indigo-500 text-white rounded-md text-xs font-medium hover:bg-indigo-600"> | |
| Draft Communication Protocol | |
| </button> | |
| <button class="px-3 py-1 bg-white border border-gray-300 rounded-md text-xs font-medium hover:bg-gray-50"> | |
| See More Suggestions | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <input type="text" placeholder="Ask your AI assistant anything..." | |
| class="flex-1 px-4 py-3 rounded-l-lg border border-gray-300 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <button class="px-4 py-3 bg-indigo-500 text-white rounded-r-lg hover:bg-indigo-600"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-lg">Recent Activity</h3> | |
| <button class="text-sm text-indigo-600 hover:text-indigo-800">View All</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-check text-green-500"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium">Quarterly Rock Completed</span> | |
| <span class="text-xs text-gray-500">2 hours ago</span> | |
| </div> | |
| <p class="text-sm text-gray-600">"Redesign website" was marked as complete by Sarah from Marketing</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-users text-blue-500"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium">Team Meeting</span> | |
| <span class="text-xs text-gray-500">Yesterday</span> | |
| </div> | |
| <p class="text-sm text-gray-600">Weekly Level 10 Meeting completed with 3 issues solved</p> | |
| <div class="mt-1 flex space-x-2"> | |
| <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded-full text-xs">Notes</span> | |
| <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded-full text-xs">Action Items</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-chart-line text-purple-500"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium">New Metric Added</span> | |
| <span class="text-xs text-gray-500">2 days ago</span> | |
| </div> | |
| <p class="text-sm text-gray-600">"Customer Satisfaction Score" was added to your Scorecard by Michael</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Prompt Modal --> | |
| <div id="aiPromptModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"> | |
| <div class="bg-white rounded-xl w-full max-w-md animate-fade-in"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold">AI Quick Action</h3> | |
| <button onclick="hideAiPrompt()" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">What would you like to accomplish?</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500"> | |
| <option>Select an action...</option> | |
| <option>Generate a meeting agenda</option> | |
| <option>Analyze a business component</option> | |
| <option>Create a process document</option> | |
| <option>Draft a communication</option> | |
| <option>Solve a specific issue</option> | |
| <option>Generate a report</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Provide details (optional)</label> | |
| <textarea class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500" rows="3" placeholder="E.g. 'Create an agenda for our quarterly planning meeting with the leadership team...'"></textarea> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button onclick="hideAiPrompt()" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"> | |
| Cancel | |
| </button> | |
| <button class="px-4 py-2 bg-indigo-600 text-white rounded-md text-sm font-medium hover:bg-indigo-700"> | |
| Generate | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Save API Key | |
| function saveApiKey() { | |
| const apiKey = document.getElementById('apiKey').value; | |
| if (apiKey) { | |
| // In a real app, you would securely store this and verify it | |
| document.getElementById('apiStatus').textContent = 'Connected'; | |
| document.getElementById('apiStatus').previousElementSibling.className = 'fas fa-circle text-green-400 mr-1 text-xs'; | |
| // Show success message | |
| alert('API key saved successfully! DeepSeek AI integration is now active.'); | |
| } else { | |
| alert('Please enter your DeepSeek API key'); | |
| } | |
| } | |
| // Toggle user dropdown | |
| function toggleUserDropdown() { | |
| document.getElementById('userDropdown').classList.toggle('hidden'); | |
| } | |
| // Show AI prompt modal | |
| function showAiPrompt() { | |
| document.getElementById('aiPromptModal').classList.remove('hidden'); | |
| } | |
| // Hide AI prompt modal | |
| function hideAiPrompt() { | |
| document.getElementById('aiPromptModal').classList.add('hidden'); | |
| } | |
| // Close dropdowns when clicking outside | |
| document.addEventListener('click', function(event) { | |
| if (!event.target.closest('.relative')) { | |
| document.getElementById('userDropdown').classList.add('hidden'); | |
| } | |
| }); | |
| // Make sidebar items interactive | |
| document.querySelectorAll('.sidebar-item').forEach(item => { | |
| item.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| document.querySelectorAll('.sidebar-item').forEach(i => i.classList.remove('active')); | |
| this.classList.add('active'); | |
| // In a real app, you would load the appropriate content here | |
| console.log('Navigating to:', this.textContent.trim()); | |
| }); | |
| }); | |
| // Simulate loading | |
| setTimeout(() => { | |
| document.querySelector('.pulse-animation').classList.remove('pulse-animation'); | |
| }, 3000); | |
| </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=JayStormX8/eos-dashboard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |