|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>One-Person Company AI Manager</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> |
|
|
.department-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.gauge { |
|
|
height: 8px; |
|
|
border-radius: 4px; |
|
|
background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #10b981 100%); |
|
|
} |
|
|
.gauge-fill { |
|
|
height: 100%; |
|
|
border-radius: 4px; |
|
|
background-color: #3b82f6; |
|
|
} |
|
|
.animate-pulse { |
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-800"> |
|
|
<div class="min-h-screen flex flex-col"> |
|
|
|
|
|
<header class="bg-white shadow-sm"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-robot text-3xl text-indigo-600"></i> |
|
|
<h1 class="ml-3 text-2xl font-bold text-gray-900">One-Person Company AI Manager</h1> |
|
|
</div> |
|
|
<span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium">Local Mode</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition flex items-center"> |
|
|
<i class="fas fa-cog mr-2"></i> Settings |
|
|
</button> |
|
|
<div class="relative"> |
|
|
<div class="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center cursor-pointer"> |
|
|
<i class="fas fa-user text-indigo-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6 mb-8"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold text-gray-900 flex items-center"> |
|
|
<i class="fas fa-user-tie text-indigo-600 mr-3"></i> CEO Dashboard |
|
|
</h2> |
|
|
<div class="flex space-x-3"> |
|
|
<button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition flex items-center"> |
|
|
<i class="fas fa-sync-alt mr-2"></i> Refresh |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition flex items-center"> |
|
|
<i class="fas fa-file-export mr-2"></i> Export |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"> |
|
|
<div class="bg-indigo-50 rounded-lg p-4"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-indigo-600">Active Projects</p> |
|
|
<p class="text-2xl font-bold mt-1">12</p> |
|
|
</div> |
|
|
<i class="fas fa-project-diagram text-indigo-300 text-2xl"></i> |
|
|
</div> |
|
|
<div class="mt-3"> |
|
|
<div class="flex justify-between text-xs text-indigo-500 mb-1"> |
|
|
<span>On Track</span> |
|
|
<span>8/12</span> |
|
|
</div> |
|
|
<div class="gauge"> |
|
|
<div class="gauge-fill" style="width: 66%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-green-50 rounded-lg p-4"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-green-600">Tasks Completed</p> |
|
|
<p class="text-2xl font-bold mt-1">87</p> |
|
|
</div> |
|
|
<i class="fas fa-check-circle text-green-300 text-2xl"></i> |
|
|
</div> |
|
|
<div class="mt-3"> |
|
|
<div class="flex justify-between text-xs text-green-500 mb-1"> |
|
|
<span>Today</span> |
|
|
<span>14/20</span> |
|
|
</div> |
|
|
<div class="gauge"> |
|
|
<div class="gauge-fill" style="width: 70%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-yellow-50 rounded-lg p-4"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-yellow-600">Pending Decisions</p> |
|
|
<p class="text-2xl font-bold mt-1">5</p> |
|
|
</div> |
|
|
<i class="fas fa-exclamation-circle text-yellow-300 text-2xl"></i> |
|
|
</div> |
|
|
<div class="mt-3"> |
|
|
<div class="flex justify-between text-xs text-yellow-500 mb-1"> |
|
|
<span>Urgent</span> |
|
|
<span>2</span> |
|
|
</div> |
|
|
<div class="gauge"> |
|
|
<div class="gauge-fill" style="width: 40%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-red-50 rounded-lg p-4"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-red-600">Risks Identified</p> |
|
|
<p class="text-2xl font-bold mt-1">3</p> |
|
|
</div> |
|
|
<i class="fas fa-shield-alt text-red-300 text-2xl"></i> |
|
|
</div> |
|
|
<div class="mt-3"> |
|
|
<div class="flex justify-between text-xs text-red-500 mb-1"> |
|
|
<span>Critical</span> |
|
|
<span>1</span> |
|
|
</div> |
|
|
<div class="gauge"> |
|
|
<div class="gauge-fill" style="width: 33%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900 flex items-center"> |
|
|
<i class="fas fa-clipboard-list text-indigo-600 mr-2"></i> Daily Executive Summary |
|
|
</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition flex items-center text-sm"> |
|
|
<i class="fas fa-headphones mr-1"></i> Audio |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition flex items-center text-sm"> |
|
|
<i class="fas fa-sliders-h mr-1"></i> Customize |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-robot text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<h4 class="font-medium text-gray-900">AI Executive Assistant</h4> |
|
|
<span class="text-xs text-gray-500">Today, 9:15 AM</span> |
|
|
</div> |
|
|
<div class="mt-2 text-sm text-gray-700"> |
|
|
<p class="mb-2">Good morning! Here's your daily summary:</p> |
|
|
<ul class="list-disc pl-5 space-y-1"> |
|
|
<li>Product team has completed 80% of the Q2 roadmap</li> |
|
|
<li>Design submitted 3 new mockups for client review</li> |
|
|
<li>Development is 2 days behind schedule on Project Orion</li> |
|
|
<li>Marketing campaign launch delayed by infrastructure issues</li> |
|
|
<li>3 high-priority tasks require your approval</li> |
|
|
</ul> |
|
|
<p class="mt-2 font-medium">Recommendation: Prioritize infrastructure review with DevOps and approve the pending tasks.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-end space-x-2"> |
|
|
<button class="px-3 py-1 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition text-sm"> |
|
|
Request Detailed Report |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition text-sm"> |
|
|
Schedule Follow-up |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4 flex items-center"> |
|
|
<i class="fas fa-users-cog text-indigo-600 mr-2"></i> Department Virtual Managers |
|
|
</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="department-card bg-white border border-gray-200 rounded-lg p-5 transition duration-300 hover:shadow-lg"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="flex-shrink-0 h-12 w-12 rounded-full bg-purple-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-boxes text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-900">Product Manager</h4> |
|
|
<p class="text-sm text-gray-500">Sarah AI</p> |
|
|
</div> |
|
|
<div class="ml-auto"> |
|
|
<span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">Active</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<p class="text-sm text-gray-700 mb-2">Current Focus: Q2 Feature Roadmap</p> |
|
|
<div class="flex justify-between text-xs text-gray-500 mb-1"> |
|
|
<span>Progress</span> |
|
|
<span>65%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-purple-600 h-2 rounded-full" style="width: 65%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<button class="text-purple-600 hover:text-purple-800 flex items-center"> |
|
|
<i class="fas fa-comment-alt mr-1"></i> Chat |
|
|
</button> |
|
|
<button class="text-gray-600 hover:text-gray-800 flex items-center"> |
|
|
<i class="fas fa-tasks mr-1"></i> Tasks |
|
|
</button> |
|
|
<button class="text-gray-600 hover:text-gray-800 flex items-center"> |
|
|
<i class="fas fa-cog mr-1"></i> Configure |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="department-card bg-white border border-gray-200 rounded-lg p-5 transition duration-300 hover:shadow-lg"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="flex-shrink-0 h-12 w-12 rounded-full bg-pink-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-palette text-pink-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-900">Design Manager</h4> |
|
|
<p class="text-sm text-gray-500">Alex AI</p> |
|
|
</div> |
|
|
<div class="ml-auto"> |
|
|
<span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">Active</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<p class="text-sm text-gray-700 mb-2">Current Focus: Mobile App Redesign</p> |
|
|
<div class="flex justify-between text-xs text-gray-500 mb-1"> |
|
|
<span>Progress</span> |
|
|
<span>78%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-pink-600 h-2 rounded-full" style="width: 78%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<button class="text-pink-600 hover:text-pink-800 flex items-center"> |
|
|
<i class="fas fa-comment-alt mr-1"></i> Chat |
|
|
</button> |
|
|
<button class="text-gray-600 hover:text-gray-800 flex items-center"> |
|
|
<i class="fas fa-tasks mr-1"></i> Tasks |
|
|
</button> |
|
|
<button class="text-gray-600 hover:text-gray-800 flex items-center"> |
|
|
<i class="fas fa-cog mr-1"></i> Configure |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="department-card bg-white border border-gray-200 rounded-lg p-5 transition duration-300 hover:shadow-lg"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="flex-shrink-0 h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-code text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-900">Dev Manager</h4> |
|
|
<p class="text-sm text-gray-500">Dev AI</p> |
|
|
</div> |
|
|
<div class="ml-auto"> |
|
|
<span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs font-medium">Delayed</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<p class="text-sm text-gray-700 mb-2">Current Focus: Project Orion</p> |
|
|
<div class="flex justify-between text-xs text-gray-500 mb-1"> |
|
|
<span>Progress</span> |
|
|
<span>42%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-blue-600 h-2 rounded-full" style="width: 42%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<button class="text-blue-600 hover:text-blue-800 flex items-center"> |
|
|
<i class="fas fa-comment-alt mr-1"></i> Chat |
|
|
</button> |
|
|
<button class="text-gray-600 hover:text-gray-800 flex items-center"> |
|
|
<i class="fas fa-tasks mr-1"></i> Tasks |
|
|
</button> |
|
|
<button class="text-gray-600 hover:text-gray-800 flex items-center"> |
|
|
<i class="fas fa-cog mr-1"></i> Configure |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="department-card bg-white border border-gray-200 rounded-lg p-5 transition duration-300 hover:shadow-lg"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="flex-shrink-0 h-12 w-12 rounded-full bg-green-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-bullhorn text-green-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-900">Marketing Manager</h4> |
|
|
<p class="text-sm text-gray-500">Mark AI</p> |
|
|
</div> |
|
|
<div class="ml-auto"> |
|
|
<span class="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs font-medium">Blocked</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<p class="text-sm text-gray-700 mb-2">Current Focus: Summer Campaign</p> |
|
|
<div class="flex justify-between text-xs text-gray-500 mb-1"> |
|
|
<span>Progress</span> |
|
|
<span>35%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-green-600 h-2 rounded-full" style="width: 35%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<button class="text-green-600 hover:text-green-800 flex items-center"> |
|
|
<i class="fas fa-comment-alt mr-1"></i> Chat |
|
|
</button> |
|
|
<button class="text-gray-600 hover:text-gray-800 flex items-center"> |
|
|
<i class="fas fa-tasks mr-1"></i> Tasks |
|
|
</button> |
|
|
<button class="text-gray-600 hover:text-gray-800 flex items-center"> |
|
|
<i class="fas fa-cog mr-1"></i> Configure |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="department-card bg-white border border-gray-200 rounded-lg p-5 transition duration-300 hover:shadow-lg"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="flex-shrink-0 h-12 w-12 rounded-full bg-yellow-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-server text-yellow-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-900">Ops Manager</h4> |
|
|
<p class="text-sm text-gray-500">Ops AI</p> |
|
|
</div> |
|
|
<div class="ml-auto"> |
|
|
<span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">Active</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<p class="text-sm text-gray-700 mb-2">Current Focus: Infrastructure Upgrade</p> |
|
|
<div class="flex justify-between text-xs text-gray-500 mb-1"> |
|
|
<span>Progress</span> |
|
|
<span>90%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-yellow-600 h-2 rounded-full" style="width: 90%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<button class="text-yellow-600 hover:text-yellow-800 flex items-center"> |
|
|
<i class="fas fa-comment-alt mr-1"></i> Chat |
|
|
</button> |
|
|
<button class="text-gray-600 hover:text-gray-800 flex items-center"> |
|
|
<i class="fas fa-tasks mr-1"></i> Tasks |
|
|
</button> |
|
|
<button class="text-gray-600 hover:text-gray-800 flex items-center"> |
|
|
<i class="fas fa-cog mr-1"></i> Configure |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="department-card bg-white border border-gray-200 rounded-lg p-5 transition duration-300 hover:shadow-lg"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="flex-shrink-0 h-12 w-12 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-user-tie text-indigo-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-900">Admin Manager</h4> |
|
|
<p class="text-sm text-gray-500">HR AI</p> |
|
|
</div> |
|
|
<div class="ml-auto"> |
|
|
<span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">Active</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<p class="text-sm text-gray-700 mb-2">Current Focus: Quarterly Reviews</p> |
|
|
<div class="flex justify-between text-xs text-gray-500 mb-1"> |
|
|
<span>Progress</span> |
|
|
<span>55%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-indigo-600 h-2 rounded-full" style="width: 55%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<button class="text-indigo-600 hover:text-indigo-800 flex items-center"> |
|
|
<i class="fas fa-comment-alt mr-1"></i> Chat |
|
|
</button> |
|
|
<button class="text-gray-600 hover:text-gray-800 flex items-center"> |
|
|
<i class="fas fa-tasks mr-1"></i> Tasks |
|
|
</button> |
|
|
<button class="text-gray-600 hover:text-gray-800 flex items-center"> |
|
|
<i class="fas fa-cog mr-1"></i> Configure |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6 mb-8"> |
|
|
<h2 class="text-xl font-bold text-gray-900 mb-6 flex items-center"> |
|
|
<i class="fas fa-chart-pie text-indigo-600 mr-3"></i> Resource Allocation |
|
|
</h2> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
<div class="lg:col-span-2"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="font-medium text-gray-900">Current Distribution</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition text-sm"> |
|
|
Auto-Optimize |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition text-sm"> |
|
|
Presets |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-64 bg-gray-50 rounded-lg border border-gray-200 p-4"> |
|
|
|
|
|
<div class="flex items-center justify-center h-full text-gray-400"> |
|
|
<i class="fas fa-chart-bar text-4xl mr-3"></i> |
|
|
<span>Resource Allocation Chart</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium text-gray-900 mb-4">Adjust Resources</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span class="font-medium text-purple-600">Product</span> |
|
|
<span>25%</span> |
|
|
</div> |
|
|
<input type="range" min="0" max="100" value="25" class="w-full h-2 bg-purple-100 rounded-lg appearance-none cursor-pointer"> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span class="font-medium text-pink-600">Design</span> |
|
|
<span>15%</span> |
|
|
</div> |
|
|
<input type="range" min="0" max="100" value="15" class="w-full h-2 bg-pink-100 rounded-lg appearance-none cursor-pointer"> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span class="font-medium text-blue-600">Development</span> |
|
|
<span>30%</span> |
|
|
</div> |
|
|
<input type="range" min="0" max="100" value="30" class="w-full h-2 bg-blue-100 rounded-lg appearance-none cursor-pointer"> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span class="font-medium text-green-600">Marketing</span> |
|
|
<span>10%</span> |
|
|
</div> |
|
|
<input type="range" min="0" max="100" value="10" class="w-full h-2 bg-green-100 rounded-lg appearance-none cursor-pointer"> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span class="font-medium text-yellow-600">Operations</span> |
|
|
<span>15%</span> |
|
|
</div> |
|
|
<input type="range" min="0" max="100" value="15" class="w-full h-2 bg-yellow-100 rounded-lg appearance-none cursor-pointer"> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span class="font-medium text-indigo-600">Admin</span> |
|
|
<span>5%</span> |
|
|
</div> |
|
|
<input type="range" min="0" max="100" value="5" class="w-full h-2 bg-indigo-100 rounded-lg appearance-none cursor-pointer"> |
|
|
</div> |
|
|
</div> |
|
|
<button class="mt-6 w-full py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition"> |
|
|
Apply Changes |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<h2 class="text-xl font-bold text-gray-900 mb-6 flex items-center"> |
|
|
<i class="fas fa-plug text-indigo-600 mr-3"></i> System Integrations |
|
|
</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> |
|
|
<div class="border border-gray-200 rounded-lg p-4 flex items-center"> |
|
|
<div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center mr-3"> |
|
|
<i class="fab fa-github text-blue-600"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h4 class="font-medium">GitHub</h4> |
|
|
<p class="text-sm text-gray-500">Code repository</p> |
|
|
</div> |
|
|
<span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">Connected</span> |
|
|
</div> |
|
|
<div class="border border-gray-200 rounded-lg p-4 flex items-center"> |
|
|
<div class="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-notebook text-purple-600"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h4 class="font-medium">Notion</h4> |
|
|
<p class="text-sm text-gray-500">Documentation</p> |
|
|
</div> |
|
|
<span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">Connected</span> |
|
|
</div> |
|
|
<div class="border border-gray-200 rounded-lg p-4 flex items-center"> |
|
|
<div class="h-10 w-10 rounded-full bg-red-100 flex items-center justify-center mr-3"> |
|
|
<i class="fab fa-slack text-red-600"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h4 class="font-medium">Slack</h4> |
|
|
<p class="text-sm text-gray-500">Communication</p> |
|
|
</div> |
|
|
<span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">Pending</span> |
|
|
</div> |
|
|
<div class="border border-gray-200 rounded-lg p-4 flex items-center"> |
|
|
<div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center mr-3"> |
|
|
<i class="fab fa-figma text-green-600"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h4 class="font-medium">Figma</h4> |
|
|
<p class="text-sm text-gray-500">Design</p> |
|
|
</div> |
|
|
<span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">Connected</span> |
|
|
</div> |
|
|
<div class="border border-gray-200 rounded-lg p-4 flex items-center"> |
|
|
<div class="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-tasks text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h4 class="font-medium">Jira</h4> |
|
|
<p class="text-sm text-gray-500">Task management</p> |
|
|
</div> |
|
|
<span class="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs">Disconnected</span> |
|
|
</div> |
|
|
<div class="border border-gray-200 rounded-lg p-4 flex items-center"> |
|
|
<div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-bolt text-blue-600"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h4 class="font-medium">n8n</h4> |
|
|
<p class="text-sm text-gray-500">Automation</p> |
|
|
</div> |
|
|
<span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">Connected</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 flex justify-end"> |
|
|
<button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Add Integration |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-white border-t border-gray-200"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex items-center space-x-4 mb-4 md:mb-0"> |
|
|
<i class="fas fa-robot text-indigo-600"></i> |
|
|
<p class="text-sm text-gray-500">One-Person Company AI Manager v1.0</p> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-sm text-gray-500 hover:text-gray-700">Documentation</a> |
|
|
<a href="#" class="text-sm text-gray-500 hover:text-gray-700">API</a> |
|
|
<a href="#" class="text-sm text-gray-500 hover:text-gray-700">Support</a> |
|
|
<a href="#" class="text-sm text-gray-500 hover:text-gray-700">Privacy</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const departmentCards = document.querySelectorAll('.department-card'); |
|
|
departmentCards.forEach(card => { |
|
|
card.addEventListener('click', function(e) { |
|
|
if (!e.target.closest('button')) { |
|
|
|
|
|
console.log('Opening department:', this.querySelector('h4').textContent); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const sliders = document.querySelectorAll('input[type="range"]'); |
|
|
sliders.forEach(slider => { |
|
|
const valueDisplay = slider.previousElementSibling.querySelector('span:last-child'); |
|
|
slider.addEventListener('input', function() { |
|
|
valueDisplay.textContent = this.value + '%'; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const loadingElements = document.querySelectorAll('.animate-pulse'); |
|
|
loadingElements.forEach(el => { |
|
|
el.classList.remove('animate-pulse'); |
|
|
}); |
|
|
}, 1500); |
|
|
}); |
|
|
</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=chen829/sybai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
