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> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#1E40AF', | |
| secondary: '#1E3A8A', | |
| accent: '#3B82F6', | |
| dark: '#1F2937', | |
| light: '#F9FAFB', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .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; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div 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" 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="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="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="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="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="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="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="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> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <div class="flex flex-col flex-1 overflow-hidden"> | |
| <!-- Top navigation --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="flex items-center justify-between px-4 py-3"> | |
| <div class="flex items-center"> | |
| <button 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"> | |
| <button class="text-gray-500 focus:outline-none"> | |
| <i class="fas fa-bell text-xl"></i> | |
| </button> | |
| <button class="text-gray-500 focus:outline-none"> | |
| <i class="fas fa-question-circle text-xl"></i> | |
| </button> | |
| <div class="relative"> | |
| <button 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> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main content area --> | |
| <main class="flex-1 overflow-y-auto p-4"> | |
| <!-- Quick stats --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> | |
| <div class="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">+12% from last quarter</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="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">+5 this quarter</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="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">-3 from last quarter</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="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> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 65%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">65% complete</p> | |
| </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"> | |
| <h2 class="text-lg font-semibold text-gray-800">Rockefeller Habits</h2> | |
| <p class="text-sm text-gray-500">Daily/Weekly disciplines</p> | |
| </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 | |
| </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 | |
| </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 | |
| </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 of the organization has a person assigned | |
| </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 | |
| </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"> | |
| 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"> | |
| <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="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">Core Values</h3> | |
| <ul class="space-y-2"> | |
| <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> | |
| <span class="ml-2 text-sm text-gray-700">Customer Obsession</span> | |
| </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> | |
| <span class="ml-2 text-sm text-gray-700">Ownership</span> | |
| </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> | |
| <span class="ml-2 text-sm text-gray-700">Innovate & Simplify</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-md font-medium text-gray-800 mb-3">BHAG (10-25 Year Goal)</h3> | |
| <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> | |
| <h3 class="text-md font-medium text-gray-800 mb-3">3-5 Year Targets</h3> | |
| <ul class="space-y-2"> | |
| <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> | |
| <span class="ml-2 text-sm text-gray-700">$50M annual revenue</span> | |
| </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> | |
| <span class="ml-2 text-sm text-gray-700">Expand to 3 new markets</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-md font-medium text-gray-800 mb-3">1 Year Priorities</h3> | |
| <ul class="space-y-2"> | |
| <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> | |
| <span class="ml-2 text-sm text-gray-700">Launch new product line</span> | |
| </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> | |
| <span class="ml-2 text-sm text-gray-700">Improve customer retention by 15%</span> | |
| </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"> | |
| 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"> | |
| <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="p-6"> | |
| <div class="space-y-4"> | |
| <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"> | |
| <i class="fas fa-1"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-md font-medium text-gray-800">Launch new marketing campaign</h3> | |
| <p class="text-sm text-gray-600 mt-1">Increase brand awareness and lead generation by 30%</p> | |
| <div class="mt-2"> | |
| <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> | |
| <p class="text-xs text-gray-500 mt-1">Due in 2 weeks</p> | |
| </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"> | |
| <i class="fas fa-2"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-md font-medium text-gray-800">Hire 5 new sales reps</h3> | |
| <p class="text-sm text-gray-600 mt-1">Expand sales team to meet growing demand</p> | |
| <div class="mt-2"> | |
| <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> | |
| <p class="text-xs text-gray-500 mt-1">2 hires completed</p> | |
| </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"> | |
| <i class="fas fa-3"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-md font-medium text-gray-800">Implement new CRM system</h3> | |
| <p class="text-sm text-gray-600 mt-1">Improve customer relationship management</p> | |
| <div class="mt-2"> | |
| <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> | |
| <p class="text-xs text-gray-500 mt-1">In discovery phase</p> | |
| </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"> | |
| <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="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">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> | |
| <p class="text-xs text-gray-500 mt-1">$1.2M vs $1.35M target</p> | |
| </div> | |
| <div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="text-sm font-medium text-gray-700">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> | |
| <p class="text-xs text-gray-500 mt-1">245 vs 375 target</p> | |
| </div> | |
| <div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="text-sm font-medium text-gray-700">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> | |
| <p class="text-xs text-gray-500 mt-1">+3% from last quarter</p> | |
| </div> | |
| <div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="text-sm font-medium text-gray-700">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> | |
| <p class="text-xs text-gray-500 mt-1">1.2x vs 2x target</p> | |
| </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"> | |
| <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="p-6"> | |
| <div class="space-y-6"> | |
| <div> | |
| <h3 class="text-md font-medium text-gray-800 mb-3">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> | |
| <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium"> | |
| Join | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-md font-medium text-gray-800 mb-3">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</p> | |
| </div> | |
| <button class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-medium"> | |
| Prepare | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-md font-medium text-gray-800 mb-3">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</p> | |
| </div> | |
| <button class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-medium"> | |
| Review Data | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-md font-medium text-gray-800 mb-3">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</p> | |
| </div> | |
| <button class="px-3 py-1 bg-yellow-100 text-yellow-700 rounded-full text-xs font-medium"> | |
| RSVP | |
| </button> | |
| </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"> | |
| <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="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 | |
| <p class="text-xs text-gray-500 mt-1">Due tomorrow</p> | |
| </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"> | |
| Interview sales candidate | |
| <p class="text-xs text-gray-500 mt-1">Completed today</p> | |
| </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 | |
| <p class="text-xs text-gray-500 mt-1">Due in 3 days</p> | |
| </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 | |
| <p class="text-xs text-gray-500 mt-1">Due Friday</p> | |
| </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"> | |
| Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple interactivity for the dashboard | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Toggle checkboxes | |
| 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'); | |
| } | |
| }); | |
| }); | |
| // Simulate progress updates | |
| setInterval(() => { | |
| const progressBars = document.querySelectorAll('[class*="bg-"]:not(.bg-white):not(.bg-gray-200)'); | |
| progressBars.forEach(bar => { | |
| const currentWidth = parseInt(bar.style.width) || 0; | |
| const newWidth = Math.min(currentWidth + Math.random() * 5, 100); | |
| bar.style.width = `${newWidth}%`; | |
| // Update color based on progress | |
| if (newWidth > 80) { | |
| bar.classList.remove('bg-yellow-500', 'bg-purple-500', 'bg-blue-500'); | |
| bar.classList.add('bg-green-500'); | |
| } else if (newWidth > 50) { | |
| bar.classList.remove('bg-green-500', 'bg-purple-500', 'bg-blue-500'); | |
| bar.classList.add('bg-yellow-500'); | |
| } | |
| }); | |
| }, 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/scale-up-one" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |