Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Scaling Up Dashboard</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"> | |
| <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#1E40AF', | |
| secondary: '#1E3A8A', | |
| accent: '#3B82F6', | |
| dark: '#1F2937', | |
| light: '#F9FAFB', | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.35s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| .grid-stack-item { | |
| position: absolute; | |
| } | |
| .grid-stack-item-content { | |
| background: white; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); | |
| height: 100%; | |
| padding: 1rem; | |
| } | |
| .sidebar-item { | |
| transition: all 0.2s ease; | |
| } | |
| .sidebar-item:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .sidebar-item.active { | |
| background-color: rgba(255, 255, 255, 0.2); | |
| } | |
| .dashboard-card { | |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| .dashboard-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .priority-badge { | |
| font-size: 0.65rem; | |
| padding: 0.15rem 0.4rem; | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .scrollbar-hide { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Mobile sidebar overlay --> | |
| <div id="mobileSidebarOverlay" class="fixed inset-0 z-40 bg-black bg-opacity-50 hidden"></div> | |
| <!-- Sidebar --> | |
| <div id="sidebar" class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 bg-primary text-white"> | |
| <div class="flex items-center justify-center h-16 px-4 bg-secondary"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-chart-line text-2xl mr-2 text-accent"></i> | |
| <span class="text-xl font-semibold">ScaleUp</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow pt-5 overflow-y-auto"> | |
| <div class="px-4 mb-10"> | |
| <div class="flex items-center justify-center"> | |
| <img class="h-16 w-16 rounded-full object-cover border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">John Doe</p> | |
| <p class="text-xs text-gray-300">CEO</p> | |
| </div> | |
| </div> | |
| </div> | |
| <nav class="flex-1 px-2 space-y-1"> | |
| <a href="#" class="sidebar-item active flex items-center px-4 py-3 text-sm font-medium rounded-md bg-secondary text-white"> | |
| <i class="fas fa-home mr-3"></i> | |
| Dashboard | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-secondary hover:text-white"> | |
| <i class="fas fa-bullseye mr-3"></i> | |
| Priorities | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-secondary hover:text-white"> | |
| <i class="fas fa-chart-pie mr-3"></i> | |
| Metrics | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-secondary hover:text-white"> | |
| <i class="fas fa-users mr-3"></i> | |
| People | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-secondary hover:text-white"> | |
| <i class="fas fa-file-alt mr-3"></i> | |
| OPSP | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-secondary hover:text-white"> | |
| <i class="fas fa-calendar-alt mr-3"></i> | |
| Meeting Pulse | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-secondary hover:text-white"> | |
| <i class="fas fa-cog mr-3"></i> | |
| Settings | |
| </a> | |
| </nav> | |
| <div class="px-4 py-4 border-t border-gray-700"> | |
| <div class="flex items-center"> | |
| <div class="p-2 rounded-full bg-blue-100 text-blue-600"> | |
| <i class="fas fa-question-circle"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-xs font-medium">Need help?</p> | |
| <a href="#" class="text-xs text-blue-300 hover:underline">Contact support</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <div class="flex flex-col flex-1 overflow-hidden"> | |
| <!-- Top navigation --> | |
| <header class="bg-white shadow-sm z-10"> | |
| <div class="flex items-center justify-between px-4 py-3"> | |
| <div class="flex items-center"> | |
| <button id="mobileSidebarButton" class="md:hidden text-gray-500 focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <h1 class="ml-2 text-xl font-semibold text-gray-800">Scaling Up Dashboard</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button id="notificationsButton" class="text-gray-500 hover:text-gray-700 focus:outline-none relative"> | |
| <i class="fas fa-bell text-xl"></i> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| </button> | |
| <div id="notificationsDropdown" class="hidden absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg py-1 z-50"> | |
| <div class="px-4 py-2 border-b border-gray-200"> | |
| <p class="text-sm font-medium text-gray-800">Notifications</p> | |
| </div> | |
| <div class="max-h-60 overflow-y-auto"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600"> | |
| <i class="fas fa-calendar-check"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Quarterly review meeting in 2 days</p> | |
| <p class="text-xs text-gray-500">10 minutes ago</p> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <div class="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center text-green-600"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">New hire completed onboarding</p> | |
| <p class="text-xs text-gray-500">1 hour ago</p> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <div class="h-8 w-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Customer NPS dropped by 5 points</p> | |
| <p class="text-xs text-gray-500">3 hours ago</p> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="px-4 py-2 border-t border-gray-200"> | |
| <a href="#" class="text-xs font-medium text-blue-600 hover:text-blue-800">View all notifications</a> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="text-gray-500 hover:text-gray-700 focus:outline-none"> | |
| <i class="fas fa-question-circle text-xl"></i> | |
| </button> | |
| <div class="relative"> | |
| <button id="userMenuButton" class="flex items-center focus:outline-none"> | |
| <span class="hidden md:inline-block ml-2 text-sm font-medium text-gray-700">John Doe</span> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar"> | |
| </button> | |
| <div id="userMenuDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50"> | |
| <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> | |
| </header> | |
| <!-- Main content area --> | |
| <main class="flex-1 overflow-y-auto p-4 bg-gray-50"> | |
| <!-- Quick stats and company health --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> | |
| <div class="dashboard-card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> | |
| <i class="fas fa-rocket text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-500">Revenue</p> | |
| <p class="text-2xl font-semibold text-gray-800">$1.2M</p> | |
| <p class="text-xs text-green-500 flex items-center"> | |
| <i class="fas fa-arrow-up mr-1"></i> +12% from last quarter | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div id="revenueChart" style="height: 60px;"></div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> | |
| <i class="fas fa-users text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-500">Employees</p> | |
| <p class="text-2xl font-semibold text-gray-800">84</p> | |
| <p class="text-xs text-green-500 flex items-center"> | |
| <i class="fas fa-arrow-up mr-1"></i> +5 this quarter | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div id="employeesChart" style="height: 60px;"></div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600"> | |
| <i class="fas fa-heart text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-500">Customer NPS</p> | |
| <p class="text-2xl font-semibold text-gray-800">72</p> | |
| <p class="text-xs text-red-500 flex items-center"> | |
| <i class="fas fa-arrow-down mr-1"></i> -3 from last quarter | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div id="npsChart" style="height: 60px;"></div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> | |
| <i class="fas fa-bullseye text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-500">Quarterly Goals</p> | |
| <p class="text-2xl font-semibold text-gray-800">65%</p> | |
| <p class="text-xs text-blue-500">On track</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 65%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">35 days remaining</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Company health scorecard --> | |
| <div class="mb-6"> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-semibold text-gray-800">Company Health Scorecard</h2> | |
| <p class="text-sm text-gray-500">Key indicators across all business functions</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6"> | |
| <div class="text-center"> | |
| <div class="relative inline-block mb-3"> | |
| <svg class="w-16 h-16" viewBox="0 0 36 36"> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#E5E7EB" | |
| stroke-width="3" | |
| stroke-dasharray="100, 100" | |
| /> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#10B981" | |
| stroke-width="3" | |
| stroke-dasharray="85, 100" | |
| /> | |
| <text x="18" y="20.5" text-anchor="middle" font-size="10" fill="#111827" font-weight="bold">85%</text> | |
| </svg> | |
| </div> | |
| <h3 class="text-sm font-medium text-gray-700">People</h3> | |
| <p class="text-xs text-gray-500">Employee engagement</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="relative inline-block mb-3"> | |
| <svg class="w-16 h-16" viewBox="0 0 36 36"> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#E5E7EB" | |
| stroke-width="3" | |
| stroke-dasharray="100, 100" | |
| /> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#3B82F6" | |
| stroke-width="3" | |
| stroke-dasharray="78, 100" | |
| /> | |
| <text x="18" y="20.5" text-anchor="middle" font-size="10" fill="#111827" font-weight="bold">78%</text> | |
| </svg> | |
| </div> | |
| <h3 class="text-sm font-medium text-gray-700">Strategy</h3> | |
| <p class="text-xs text-gray-500">Execution clarity</p | |
| </div> | |
| <div class="text-center"> | |
| <div class="relative inline-block mb-3"> | |
| <svg class="w-16 h-16" viewBox="0 0 36 36"> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#E5E7EB" | |
| stroke-width="3" | |
| stroke-dasharray="100, 100" | |
| /> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#8B5CF6" | |
| stroke-width="3" | |
| stroke-dasharray="92, 100" | |
| /> | |
| <text x="18" y="20.5" text-anchor="middle" font-size="10" fill="#111827" font-weight="bold">92%</text> | |
| </svg> | |
| </div> | |
| <h3 class="text-sm font-medium text-gray-700">Execution</h3> | |
| <p class="text-xs text-gray-500">Meeting rhythm</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="relative inline-block mb-3"> | |
| <svg class="w-16 h-16" viewBox="0 0 36 36"> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#E5E7EB" | |
| stroke-width="3" | |
| stroke-dasharray="100, 100" | |
| /> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none | |
| stroke="#EC4899" | |
| stroke-width="3" | |
| stroke-dasharray="65, 100" | |
| /> | |
| <text x="18" y="20.5" text-anchor="middle" font-size="10" fill="#111827" font-weight="bold">65%</text> | |
| </svg> | |
| </div> | |
| <h3 class="text-sm font-medium text-gray-700">Cash</h3> | |
| <p class="text-xs text-gray-500">Financial health</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="relative inline-block mb-3"> | |
| <svg class="w-16 h-16" viewBox="0 0 36 36"> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#E5E7EB" | |
| stroke-width="3" | |
| stroke-dasharray="100, 100" | |
| /> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#F59E0B" | |
| stroke-width="3" | |
| stroke-dasharray="88, 100" | |
| /> | |
| <text x="18" y="20.5" text-anchor="middle" font-size="10" fill="#111827" font-weight="bold">88%</text> | |
| </svg> | |
| </div> | |
| <h3 class="text-sm font-medium text-gray-700">Overall</h3> | |
| <p class="text-xs text-gray-500">Company health</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main dashboard sections --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Rockefeller Habits Checklist --> | |
| <div class="lg:col-span-1 bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h2 class="text-lg font-semibold text-gray-800">Rockefeller Habits</h2> | |
| <p class="text-sm text-gray-500">Daily/Weekly disciplines</p> | |
| </div> | |
| <span class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full">5/10</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <input type="checkbox" id="habit1" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500" checked> | |
| <label for="habit1" class="ml-3 block text-sm font-medium text-gray-700"> | |
| Executive team is healthy and aligned | |
| <p class="text-xs text-gray-500 mt-1">Last checked: Today</p> | |
| </label> | |
| </div> | |
| <div class="flex items-start"> | |
| <input type="checkbox" id="habit2" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500" checked> | |
| <label for="habit2" class="ml-3 block text-sm font-medium text-gray-700"> | |
| Everyone is aligned with #1 priority | |
| <p class="text-xs text-gray-500 mt-1">Last checked: Today</p> | |
| </label> | |
| </div> | |
| <div class="flex items-start"> | |
| <input type="checkbox" id="habit3" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500"> | |
| <label for="habit3" class="ml-3 block text-sm font-medium text-gray-700"> | |
| Communication rhythm is established | |
| <p class="text-xs text-gray-500 mt-1">Last checked: 2 days ago</p> | |
| </label> | |
| </div> | |
| <div class="flex items-start"> | |
| <input type="checkbox" id="habit4" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500"> | |
| <label for="habit4" class="ml-3 block text-sm font-medium text-gray-700"> | |
| Every facet has a person assigned | |
| <p class="text-xs text-gray-500 mt-1">Last checked: 1 week ago</p> | |
| </label> | |
| </div> | |
| <div class="flex items-start"> | |
| <input type="checkbox" id="habit5" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500" checked> | |
| <label for="habit5" class="ml-3 block text-sm font-medium text-gray-700"> | |
| Ongoing employee feedback | |
| <p class="text-xs text-gray-500 mt-1">Last checked: Yesterday</p> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <i class="fas fa-sync-alt mr-2"></i> Update Habits | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- One Page Strategic Plan --> | |
| <div class="lg:col-span-2 bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h2 class="text-lg font-semibold text-gray-800">One Page Strategic Plan</h2> | |
| <p class="text-sm text-gray-500">Company vision and priorities</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-xs font-medium text-gray-700 hover:bg-gray-50"> | |
| <i class="fas fa-history mr-1"></i> Version History | |
| </button> | |
| <button class="px-3 py-1 border border-transparent rounded-md text-xs font-medium text-white bg-blue-600 hover:bg-blue-700"> | |
| <i class="fas fa-print mr-1"></i> Print | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="text-md font-medium text-gray-800 mb-3 flex items-center"> | |
| <span class="bg-blue-100 text-blue-800 p-1 rounded mr-2"> | |
| <i class="fas fa-medal text-xs"></i> | |
| </span> | |
| Core Values | |
| </h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <span class="flex-shrink-0 h-6 w-6 text-green-500 flex items-center justify-center"> | |
| <i class="fas fa-check"></i> | |
| </span> | |
| <div class="ml-2"> | |
| <span class="text-sm font-medium text-gray-700">Customer Obsession</span> | |
| <p class="text-xs text-gray-500">Start with the customer and work backwards</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="flex-shrink-0 h-6 w-6 text-green-500 flex items-center justify-center"> | |
| <i class="fas fa-check"></i> | |
| </span> | |
| <div class="ml-2"> | |
| <span class="text-sm font-medium text-gray-700">Ownership</span> | |
| <p class="text-xs text-gray-500">Think long term and don't sacrifice for short-term results</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="flex-shrink-0 h-6 w-6 text-green-500 flex items-center justify-center"> | |
| <i class="fas fa-check"></i> | |
| </span> | |
| <div class="ml-2"> | |
| <span class="text-sm font-medium text-gray-700">Innovate & Simplify</span> | |
| <p class="text-xs text-gray-500">Expect and require innovation and invention</p | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-md font-medium text-gray-800 mb-3 flex items-center"> | |
| <span class="bg-purple-100 text-purple-800 p-1 rounded mr-2"> | |
| <i class="fas fa-bullseye text-xs"></i> | |
| </span> | |
| BHAG (10-25 Year Goal) | |
| </h3> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="text-sm text-gray-700">To become the most customer-centric company in our industry, serving 1 million customers globally by 2040.</p> | |
| </div> | |
| <div class="mt-4"> | |
| <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">Progress</h4> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-purple-600 h-2 rounded-full" style="width: 15%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">15% towards goal</p> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-md font-medium text-gray-800 mb-3 flex items-center"> | |
| <span class="bg-green-100 text-green-800 p-1 rounded mr-2"> | |
| <i class="fas fa-chart-line text-xs"></i> | |
| </span> | |
| 3-5 Year Targets | |
| </h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <span class="flex-shrink-0 h-6 w-6 text-blue-500 flex items-center justify-center"> | |
| <i class="fas fa-bullseye"></i> | |
| </span> | |
| <div class="ml-2"> | |
| <span class="text-sm font-medium text-gray-700">$50M annual revenue</span> | |
| <p class="text-xs text-gray-500">Current: $12M</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="flex-shrink-0 h-6 w-6 text-blue-500 flex items-center justify-center"> | |
| <i class="fas fa-bullseye"></i> | |
| </span> | |
| <div class="ml-2"> | |
| <span class="text-sm font-medium text-gray-700">Expand to 3 new markets</span> | |
| <p class="text-xs text-gray-500">Current: 1 new market entered</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="flex-shrink-0 h-6 w-6 text-blue-500 flex items-center justify-center"> | |
| <i class="fas fa-bullseye"></i> | |
| </span> | |
| <div class="ml-2"> | |
| <span class="text-sm font-medium text-gray-700">300 employees</span> | |
| <p class="text-xs text-gray-500">Current: 84 employees</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-md font-medium text-gray-800 mb-3 flex items-center"> | |
| <span class="bg-yellow-100 text-yellow-800 p-1 rounded mr-2"> | |
| <i class="fas fa-flag text-xs"></i> | |
| </span> | |
| 1 Year Priorities | |
| </h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <span class="flex-shrink-0 h-6 w-6 text-purple-500 flex items-center justify-center"> | |
| <i class="fas fa-flag"></i> | |
| </span> | |
| <div class="ml-2"> | |
| <span class="text-sm font-medium text-gray-700">Launch new product line</span> | |
| <div class="mt-1"> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="bg-purple-600 h-1.5 rounded-full" style="width: 45%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">On track for Q4 launch</p> | |
| </div> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="flex-shrink-0 h-6 w-6 text-purple-500 flex items-center justify-center"> | |
| <i class="fas fa-flag"></i> | |
| </span> | |
| <div class="ml-2"> | |
| <span class="text-sm font-medium text-gray-700">Improve customer retention by 15%</span> | |
| <div class="mt-1"> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="bg-purple-600 h-1.5 rounded-full" style="width: 30%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Currently at +5%</p> | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <i class="fas fa-edit mr-2"></i> Edit Strategic Plan | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quarterly Priorities and Metrics --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Quarterly Priorities --> | |
| <div class="lg:col-span-2 bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h2 class="text-lg font-semibold text-gray-800">Quarterly Priorities</h2> | |
| <p class="text-sm text-gray-500">Q3 2023 - Critical Few</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-xs font-medium text-gray-700 hover:bg-gray-50"> | |
| <i class="fas fa-plus mr-1"></i> Add Priority | |
| </button> | |
| <button class="px-3 py-1 border border-transparent rounded-md text-xs font-medium text-white bg-blue-600 hover:bg-blue-700"> | |
| <i class="fas fa-sliders-h mr-1"></i> Adjust | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 font-bold"> | |
| 1 | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-md font-medium text-gray-800">Launch new marketing campaign</h3> | |
| <span class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full priority-badge">On Track</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">Increase brand awareness and lead generation by 30%</p> | |
| <div class="mt-3"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-xs font-medium text-gray-500">Progress</span> | |
| <span class="text-xs font-semibold text-green-600">75%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 75%"></div> | |
| </div> | |
| <div class="flex items-center justify-between mt-1"> | |
| <p class="text-xs text-gray-500">Due in 2 weeks</p> | |
| <p class="text-xs text-gray-500">Sarah Johnson (Owner)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold"> | |
| 2 | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-md font-medium text-gray-800">Hire 5 new sales reps</h3> | |
| <span class="px-2 py-1 text-xs font-semibold text-blue-800 bg-blue-100 rounded-full priority-badge">In Progress</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">Expand sales team to meet growing demand</p> | |
| <div class="mt-3"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-xs font-medium text-gray-500">Progress</span> | |
| <span class="text-xs font-semibold text-blue-600">40%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 40%"></div> | |
| </div> | |
| <div class="flex items-center justify-between mt-1"> | |
| <p class="text-xs text-gray-500">2 hires completed</p> | |
| <p class="text-xs text-gray-500">Michael Chen (Owner)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold"> | |
| 3 | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-md font-medium text-gray-800">Implement new CRM system</h3> | |
| <span class="px-2 py-1 text-xs font-semibold text-purple-800 bg-purple-100 rounded-full priority-badge">Needs Attention</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">Improve customer relationship management and sales tracking</p> | |
| <div class="mt-3"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-xs font-medium text-gray-500">Progress</span> | |
| <span class="text-xs font-semibold text-purple-600">20%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 20%"></div> | |
| </div> | |
| <div class="flex items-center justify-between mt-1"> | |
| <p class="text-xs text-gray-500">In discovery phase</p> | |
| <p class="text-xs text-gray-500">Alex Rodriguez (Owner)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Key Metrics --> | |
| <div class="lg:col-span-1 bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h2 class="text-lg font-semibold text-gray-800">Key Metrics</h2> | |
| <p class="text-sm text-gray-500">Quarterly performance</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-xs font-medium text-gray-700 hover:bg-gray-50"> | |
| <i class="fas fa-cog mr-1"></i> Configure | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="space-y-6"> | |
| <div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="text-sm font-medium text-gray-700 flex items-center"> | |
| <i class="fas fa-dollar-sign text-gray-400 mr-1 text-xs"></i> Revenue Growth | |
| </span> | |
| <span class="text-sm font-semibold text-green-600">+12%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 80%"></div> | |
| </div> | |
| <div class="flex justify-between items-center mt-1"> | |
| <p class="text-xs text-gray-500">$1.2M actual</p> | |
| <p class="text-xs text-gray-500">$1.35M target</p> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="text-sm font-medium text-gray-700 flex items-center"> | |
| <i class="fas fa-user-plus text-gray-400 mr-1 text-xs"></i> Customer Acquisition | |
| </span> | |
| <span class="text-sm font-semibold text-blue-600">245</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| <div class="flex justify-between items-center mt-1"> | |
| <p class="text-xs text-gray-500">245 actual</p> | |
| <p class="text-xs text-gray-500">375 target</p> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="text-sm font-medium text-gray-700 flex items-center"> | |
| <i class="fas fa-heart text-gray-400 mr-1 text-xs"></i> Employee Engagement | |
| </span> | |
| <span class="text-sm font-semibold text-yellow-600">78%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 78%"></div> | |
| </div> | |
| <div class="flex justify-between items-center mt-1"> | |
| <p class="text-xs text-gray-500">+3% from last quarter</p> | |
| <p class="text-xs text-gray-500">80% target</p> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="text-sm font-medium text-gray-700 flex items-center"> | |
| <i class="fas fa-bolt text-gray-400 mr-1 text-xs"></i> Productivity | |
| </span> | |
| <span class="text-sm font-semibold text-purple-600">1.2x</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 class="flex justify-between items-center mt-1"> | |
| <p class="text-xs text-gray-500">1.2x actual</p> | |
| <p class="text-xs text-gray-500">2x target</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="text-sm font-medium text-gray-800 mb-2">Trend Analysis</h3> | |
| <div id="metricsTrendChart" style="height: 150px;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Meeting Pulse and To-Dos --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Meeting Pulse --> | |
| <div class="lg:col-span-2 bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px极客时间 6 py-4 border-b border-gray-200"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h2 class="text-lg font-semibold text-gray-800">Meeting Pulse</h2> | |
| <p class="text-sm text-gray-500">Daily, weekly, monthly rhythm</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-xs font-medium text-gray-700 hover:bg-gray-50"> | |
| <i class="fas fa-calendar-plus mr-1"></i> Add Meeting | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="space-y-6"> | |
| <div> | |
| <h3 class="text-md font-medium text-gray-800 mb-3 flex items-center"> | |
| <span class="bg-blue-100 text-blue-800 p-1 rounded mr-2"> | |
| <i class="fas fa-calendar-day text-xs"></i> | |
| </span> | |
| Daily Huddle (15 min) | |
| </h3> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <极客时间 div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-700">Today's Priorities</p> | |
| <p class="text-xs text-gray-500">8:15 AM, Conference Room</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium"> | |
| <i class="fas fa-video mr-1"></i> Join | |
| </button> | |
| <button class="px-3 py-1 bg-white text-blue-700 rounded-full text-xs font-medium border border-blue-200"> | |
| <i class="fas fa-clipboard-list mr极客时间 -1"></i> Agenda | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-info-circle mr-1"></i> | |
| <span>Next meeting: Tomorrow at 8:15 AM</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-md font-medium text-gray-800 mb-3 flex items-center"> | |
| <span class="bg-green-100 text-green-800 p-1 rounded mr-2"> | |
| <i class="fas fa-calendar-week text-xs"></i> | |
| </span> | |
| Weekly Meeting (90 min) | |
| </h3> | |
| <div class="bg-green-50 p-4 rounded-lg"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-700">Quarterly Priority Review</p> | |
| <p class="text-xs text-gray-500">Monday, 10:00 AM, Board Room</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-medium"> | |
| <i class="fas fa-clipboard-check mr-1"></i> Prepare | |
| </button> | |
| <button class="px-3 py-1 bg-white text-green-700 rounded-full text-xs font-medium border border-green-200"> | |
| <i class="fas fa-file-alt mr-1"></i> Notes | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-info-circle mr-1"></i> | |
| <span>Next meeting: Monday, July 10 at 10:00 AM</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-md font-medium text-gray-800 mb-3 flex items-center"> | |
| <span class="bg-purple-100 text-purple-800 p-1 rounded mr-2"> | |
| <i class="fas fa-calendar-alt text-xs"></i> | |
| </span> | |
| Monthly Learning (2 hours) | |
| </h3> | |
| <div class="bg-purple-50 p-4 rounded-lg"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-700">Customer Feedback Analysis</p> | |
| <p class="text-xs text-gray-500">First Friday, 1:00 PM, Training Room</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-medium"> | |
| <i class="fas fa-chart-bar mr-1"></i> Review Data | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-info-circle mr-1"></i> | |
| <span>Next meeting: Friday, July 7 at 1:00 PM</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-md font-medium text-gray-800 mb-3 flex items-center"> | |
| <span class="bg-yellow-100 text-yellow-800 p-1 rounded mr-2"> | |
| <i class="fas fa-calendar-check text-xs"></i> | |
| </span> | |
| Quarterly Offsite (2 days) | |
| </h3> | |
| <div class="bg-yellow-极客时间 50 p-4 rounded-lg"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-700">Strategic Planning</p> | |
| <p class="text-xs text-gray-500">Oct 15-16, Mountain View Resort</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-yellow-100 text-yellow-700 rounded-full text-xs font-medium"> | |
| <i class="fas fa-reply mr-1"></i> RSVP | |
| </button> | |
| <button class="px-3 py-1 bg-white text-yellow-700 rounded-full text-xs font-medium border border-yellow-200"> | |
| <i class="fas fa-map-marked-alt mr-1"></i> Location | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-info-circle mr-1"></i> | |
| <span>90 days until offsite</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- To-Dos and Action Items --> | |
| <div class="lg:col-span-1 bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h2 class="text-lg font-semibold text-gray-800">My Action Items</h2> | |
| <p class="text-sm text-gray-500">Priority tasks</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-xs font-medium text-gray-700 hover:极客时间 bg-gray-50"> | |
| <i class="fas fa-filter mr-1"></i> Filter | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <input type="checkbox" id="task1" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500"> | |
| <label for="task1" class="ml-3 block text-sm font-medium text-gray-700"> | |
| Review marketing campaign results | |
| <div class="flex items-center mt-1"> | |
| <span class="text-xs text-gray-500">Due tomorrow</span> | |
| <span class="ml-2 px-1 py-0.5 text-xs font-medium bg-blue-100 text-blue-800 rounded">High</span> | |
| </div> | |
| </label> | |
| </div> | |
| <div class="flex items-start"> | |
| <input type="checkbox" id="task2" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500" checked> | |
| <label for="task2" class="ml-3 block text-sm font-medium text-gray-700 line-through text-gray-400"> | |
| Interview sales candidate | |
| <div class="flex items-center mt-1"> | |
| <span class="text-xs text-gray-400">Completed today</span> | |
| </div> | |
| </label> | |
| </div> | |
| <div class="flex items-start"> | |
| <input type="checkbox" id="task3" class="mt-1 h-4 w-极客时间 4 text-blue-600 rounded focus:ring-blue-500"> | |
| <label for="task3" class="ml-3 block text-sm font-medium text-gray-700"> | |
| Prepare quarterly board report | |
| <div class="flex items-center mt-1"> | |
| <span class="text-xs text-gray极客时间 -500">Due in 3 days</span> | |
| <span class="ml-2 px-1 py-0.5 text-xs font-medium bg-yellow-100 text-yellow-800 rounded">Medium</span> | |
| </div> | |
| </label> | |
| </div> | |
| <div class="flex items-start"> | |
| <input type="checkbox" id="task4" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500"> | |
| <label for="task4" class="ml-3 block text-sm font-medium text-gray-700"> | |
| Follow up with key client | |
| <div class="flex items-center mt-1"> | |
| <span class="text-xs text-gray-500">Due Friday</span> | |
| </div> | |
| </label> | |
| </div> | |
| <div class="flex items-start"> | |
| <input type="checkbox" id="task5" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500"> | |
| <label for="task5" class="ml-3 block text-sm font-medium text-gray-700"> | |
| Approve budget for Q4 initiatives | |
| <div class="flex items-center mt-1"> | |
| <span class="text-xs text-gray-500">Due next week</span> | |
| </div> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="flex"> | |
| <input type="text" class="flex-1 min-w-0 block w-full px-3 py-2 rounded-md border border-gray-300 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Add new action item"> | |
| <button class="ml-3 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <i class="fas fa-plus mr-1"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize all interactive elements | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Mobile sidebar toggle | |
| const mobileSidebarButton = document.getElementById('mobileSidebarButton'); | |
| const mobileSidebarOverlay = document.getElementById('mobileSidebarOverlay'); | |
| const sidebar = document.getElementById('sidebar'); | |
| if (mobileSidebarButton && mobileSidebarOverlay && sidebar) { | |
| mobileSidebarButton.addEventListener('click', function() { | |
| sidebar.classList.toggle('hidden'); | |
| mobileSidebarOverlay.classList.toggle('hidden'); | |
| document.body.classList.toggle('overflow-hidden'); | |
| }); | |
| mobileSidebarOverlay.addEventListener('click', function() { | |
| sidebar.classList.add('hidden'); | |
| mobileSidebarOverlay.classList.add('hidden'); | |
| document.body.classList.remove('overflow-hidden'); | |
| }); | |
| } | |
| // Notifications dropdown | |
| const notificationsButton = document.getElementById('notificationsButton'); | |
| const notificationsDropdown = document.getElementById('notificationsDropdown'); | |
| if (notificationsButton && notificationsDropdown) { | |
| notificationsButton.addEventListener('click', function() { | |
| notificationsDropdown.classList.toggle('hidden'); | |
| if (userMenuDropdown) userMenuDropdown.classList.add('hidden'); | |
| }); | |
| } | |
| // User menu dropdown | |
| const userMenuButton = document.getElementById('userMenuButton'); | |
| const userMenuDropdown = document.getElementById('userMenuDropdown'); | |
| if (userMenuButton && userMenuDropdown) { | |
| userMenuButton.addEventListener('click', function() { | |
| userMenuDropdown.classList.toggle('hidden'); | |
| if (notificationsDropdown) notificationsDropdown.classList.add('hidden'); | |
| }); | |
| } | |
| // Close dropdowns when clicking outside | |
| document.addEventListener('click', function(event) { | |
| if (notificationsButton && notificationsDropdown && | |
| !notificationsButton.contains(event.target) && | |
| !notificationsDropdown.contains(event.target)) { | |
| notificationsDropdown.classList.add('hidden'); | |
| } | |
| if (userMenuButton && userMenuDropdown && | |
| !userMenuButton.contains(event.target) && | |
| !userMenuDropdown.contains(event.target)) { | |
| userMenuDropdown.classList.add('hidden'); | |
| } | |
| }); | |
| // Toggle checkboxes and strike through text | |
| const checkboxes = document.querySelectorAll('input[type="checkbox"]'); | |
| checkboxes.forEach(checkbox => { | |
| checkbox.addEventListener('change', function() { | |
| const label = this.nextElementSibling; | |
| if (this.checked) { | |
| label.classList.add('line-through', 'text-gray-400'); | |
| } else { | |
| label.classList.remove('line-through', 'text-gray-400'); | |
| } | |
| }); | |
| }); | |
| // Initialize mini charts only if elements exist | |
| if (document.querySelector("#revenueChart")) { | |
| const revenueChartOptions = { | |
| series: [{ | |
| name: 'Revenue', | |
| data: [30, 40, 45, 50, 49, 60, 70, 80, 90, 100, 110, 120] | |
| }], | |
| chart: { | |
| type: 'area', | |
| height: 60, | |
| sparkline: { | |
| enabled: true | |
| }, | |
| }, | |
| stroke: { | |
| curve: 'smooth', | |
| width: 2 | |
| }, | |
| fill: { | |
| type: 'gradient', | |
| gradient: { | |
| shadeIntensity: 1, | |
| opacityFrom: 0.7, | |
| opacityTo: 0.2, | |
| stops: [0, 100] | |
| } | |
| }, | |
| colors: ['#3B82F6'], | |
| tooltip: { | |
| fixed: { | |
| enabled: false | |
| }, | |
| x: { | |
| show: false | |
| }, | |
| marker: { | |
| show: false | |
| } | |
| } | |
| }; | |
| const revenueChart = new ApexCharts(document.querySelector("#revenueChart"), revenueChartOptions); | |
| revenueChart.render(); | |
| } | |
| if (document.querySelector("#employeesChart")) { | |
| const employeesChartOptions = { | |
| series: [{ | |
| name: 'Employees', | |
| data: [60, 65, 68, 70, 72, 75, 78, 80, 82, 84] | |
| }], | |
| chart: { | |
| type: 'area', | |
| height: 60, | |
| sparkline: { | |
| enabled: true | |
| }, | |
| }, | |
| stroke: { | |
| curve: 'smooth', | |
| width: 2 | |
| }, | |
| fill: { | |
| type: 'gradient', | |
| gradient: { | |
| shadeIntensity极客时间 : 1, | |
| opacityFrom: 0.7, | |
| opacityTo: 0.2, | |
| stops: [0, 100] | |
| } | |
| }, | |
| colors: ['#10B981'], | |
| tooltip: { | |
| fixed: { | |
| enabled: false | |
| }, | |
| x: { | |
| show: false | |
| }, | |
| marker: { | |
| show: false | |
| } | |
| } | |
| }; | |
| const employeesChart = new ApexCharts(document.querySelector("#employeesChart"), employeesChartOptions); | |
| employeesChart.render(); | |
| } | |
| if (document.querySelector("#npsChart")) { | |
| const npsChartOptions = { | |
| series: [{ | |
| name: 'NPS', | |
| data: [70, 72, 71, 73, 75, 74, 72, 70, 71, 72, 70, 72] | |
| }], | |
| chart: { | |
| type: 'area', | |
| height: 60, | |
| sparkline: { | |
| enabled: true | |
| }, | |
| }, | |
| stroke: { | |
| curve: 'smooth', | |
| width: 2 | |
| }, | |
| fill: { | |
| type: 'gradient', | |
| gradient: { | |
| shadeIntensity: 1, | |
| opacityFrom: 0.7, | |
| opacityTo: 0.2, | |
| stops: [0, 100] | |
| } | |
| }, | |
| colors: ['#8B5CF6'], | |
| tooltip: { | |
| fixed: { | |
| enabled: false | |
| }, | |
| x: { | |
| show: false | |
| }, | |
| marker: { | |
| show: false | |
| } | |
| } | |
| }; | |
| const npsChart = new ApexCharts(document.querySelector("#npsChart"), npsChartOptions); | |
| npsChart.render(); | |
| } | |
| // Metrics trend chart | |
| if (document.querySelector("#metricsTrendChart")) { | |
| const metricsTrendChartOptions = { | |
| series: [{ | |
| name: 'Revenue', | |
| data: [30, 40, 45, 50, 49, 60, 70, 80, 90, 100, 110, 120] | |
| }, { | |
| name: 'Customers', | |
| data: [100, 120, 140, 160, 180, 185, 190, 210, 230, 245, 260, 280] | |
| }, { | |
| name: 'NPS', | |
| data: [70, 72, 71, 73, 75, 74, 72, 70, 71, 72, 70, 72] | |
| }], | |
| chart: { | |
| type: 'line', | |
| height: 150, | |
| toolbar: { | |
| show: false | |
| }, | |
| }, | |
| colors: ['#3B82F6', '#10B981', '#8B5CF6'], | |
| stroke: { | |
| curve: 'smooth', | |
| width: 2 | |
| }, | |
| markers: { | |
| size: 0 | |
| }, | |
| xaxis: { | |
| categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], | |
| labels: { | |
| style: { | |
| fontSize: '10px' | |
| } | |
| } | |
| }, | |
| yaxis: { | |
| show: false | |
| }, | |
| tooltip: { | |
| enabled: false | |
| }, | |
| legend: { | |
| show: false | |
| }, | |
| grid: { | |
| show: false | |
| } | |
| }; | |
| const metricsTrendChart = new ApexCharts(document.querySelector("#metricsTrendChart"), metricsTrendChartOptions); | |
| metricsTrendChart.render(); | |
| } | |
| // Sidebar navigation active state | |
| const sidebarItems = document.querySelectorAll('.sidebar-item'); | |
| sidebarItems.forEach(item => { | |
| item.addEventListener('click', function() { | |
| sidebarItems.forEach(i => i.classList.remove('active', 'bg-secondary', 'text-white')); | |
| this.classList.add('active', 'bg-secondary', 'text-white'); | |
| }); | |
| }); | |
| }); | |
| </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/scale-space-v3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |