Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Creative Task Master</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> | |
| :root { | |
| --primary: #6366f1; | |
| --primary-dark: #4f46e5; | |
| --secondary: #f59e0b; | |
| --dark: #1e293b; | |
| --light: #f8fafc; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f1f5f9; | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .task-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .file-dropzone { | |
| border: 2px dashed #cbd5e1; | |
| transition: all 0.2s ease; | |
| } | |
| .file-dropzone.active { | |
| border-color: var(--primary); | |
| background-color: #eef2ff; | |
| } | |
| .priority-high { | |
| background-color: #fee2e2; | |
| border-left: 4px solid #ef4444; | |
| } | |
| .priority-medium { | |
| background-color: #fef3c7; | |
| border-left: 4px solid #f59e0b; | |
| } | |
| .priority-low { | |
| background-color: #ecfdf5; | |
| border-left: 4px solid #10b981; | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| /* Rich text editor styles */ | |
| .rich-text-editor { | |
| min-height: 150px; | |
| border: 1px solid #e2e8f0; | |
| border-radius: 0.375rem; | |
| padding: 0.5rem; | |
| } | |
| .rich-text-editor:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| } | |
| .editor-toolbar { | |
| border: 1px solid #e2e8f0; | |
| border-bottom: none; | |
| border-radius: 0.375rem 0.375rem 0 0; | |
| } | |
| /* Custom checkbox */ | |
| .custom-checkbox input:checked ~ .checkmark { | |
| background-color: var(--primary); | |
| border-color: var(--primary); | |
| } | |
| .custom-checkbox .checkmark:after { | |
| left: 7px; | |
| top: 3px; | |
| width: 5px; | |
| height: 10px; | |
| border: solid white; | |
| border-width: 0 2px 2px 0; | |
| transform: rotate(45deg); | |
| } | |
| /* Animation for notifications */ | |
| @keyframes slideIn { | |
| from { transform: translateX(100%); opacity: 0; } | |
| to { transform: translateX(0); opacity: 1; } | |
| } | |
| @keyframes slideOut { | |
| from { transform: translateX(0); opacity: 1; } | |
| to { transform: translateX(100%); opacity: 0; } | |
| } | |
| .notification { | |
| animation: slideIn 0.3s forwards; | |
| } | |
| .notification.hide { | |
| animation: slideOut 0.3s forwards; | |
| } | |
| </style> | |
| </head> | |
| <body class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-white w-64 md:w-72 flex-shrink-0 border-r border-gray-200 flex flex-col h-full"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-palette text-2xl text-indigo-500"></i> | |
| <h1 class="text-xl font-bold text-gray-800">Creative Task Master</h1> | |
| </div> | |
| </div> | |
| <div class="flex-1 overflow-y-auto py-4"> | |
| <div class="px-4 mb-6"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search tasks..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="mb-6 px-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider">Teams</h2> | |
| <button id="add-team-btn" class="text-gray-400 hover:text-indigo-500"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| <ul class="space-y-1" id="team-list"> | |
| <!-- Team items will be added here by JavaScript --> | |
| </ul> | |
| </div> | |
| <div class="mb-6 px-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider">Projects</h2> | |
| <button id="add-project-btn" class="text-gray-400 hover:text-indigo-500"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| <ul class="space-y-1" id="project-list"> | |
| <!-- Project items will be added here by JavaScript --> | |
| </ul> | |
| </div> | |
| <div class="mb-6 px-4"> | |
| <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">Quick Filters</h2> | |
| <ul class="space-y-1"> | |
| <li> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-inbox mr-3 text-indigo-500"></i> | |
| <span>My Tasks</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-calendar-day mr-3 text-red-500"></i> | |
| <span>Today</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-calendar-week mr-3 text-yellow-500"></i> | |
| <span>This Week</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-exclamation-circle mr-3 text-purple-500"></i> | |
| <span>High Priority</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="w-8 h-8 rounded-full"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">John Creative</p> | |
| <p class="text-xs text-gray-500">Admin</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <button class="text-gray-400 hover:text-gray-500"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top navigation --> | |
| <div class="bg-white border-b border-gray-200 py-4 px-6 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <button id="sidebar-toggle" class="md:hidden text-gray-500 mr-4"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <h2 class="text-xl font-semibold text-gray-800" id="main-title">Dashboard</h2> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button id="notifications-btn" class="text-gray-400 hover:text-indigo-500 relative"> | |
| <i class="fas fa-bell"></i> | |
| <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span> | |
| </button> | |
| <div id="notifications-dropdown" class="hidden absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg z-10"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h3 class="text-sm font-medium text-gray-900">Notifications</h3> | |
| </div> | |
| <div class="max-h-60 overflow-y-auto"> | |
| <a href="#" class="block px-4 py-3 border-b border-gray-100 hover:bg-gray-50"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-indigo-100 rounded-full p-2"> | |
| <i class="fas fa-tasks text-indigo-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">New task assigned</p> | |
| <p class="text-xs text-gray-500">Brand Identity for Client X</p> | |
| <p class="text-xs text-gray-400 mt-1">2 hours ago</p> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="block px-4 py-3 border-b border-gray-100 hover:bg-gray-50"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-green-100 rounded-full p-2"> | |
| <i class="fas fa-comment-alt text-green-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">New comment</p> | |
| <p class="text-xs text-gray-500">On "Website Redesign"</p> | |
| <p class="text-xs text-gray-400 mt-1">5 hours ago</p> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="block px-4 py-3 hover:bg-gray-50"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-yellow-100 rounded-full p-2"> | |
| <i class="fas fa-exclamation-triangle text-yellow-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Deadline approaching</p> | |
| <p class="text-xs text-gray-500">3D Animation for Client Y</p> | |
| <p class="text-xs text-gray-400 mt-1">1 day ago</p> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="p-2 border-t border-gray-200"> | |
| <a href="#" class="block text-center text-sm font-medium text-indigo-600 hover:text-indigo-500">View all</a> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="calendar-view-btn" class="text-gray-400 hover:text-indigo-500"> | |
| <i class="fas fa-calendar-alt"></i> | |
| </button> | |
| <button id="export-btn" class="text-gray-400 hover:text-indigo-500"> | |
| <i class="fas fa-file-export"></i> | |
| </button> | |
| <button id="import-btn" class="text-gray-400 hover:text-indigo-500"> | |
| <i class="fas fa-file-import"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main content area --> | |
| <div class="flex-1 overflow-y-auto p-6 bg-gray-50"> | |
| <!-- Dashboard view --> | |
| <div id="dashboard-view"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Active Projects</p> | |
| <p class="text-2xl font-semibold text-gray-800">12</p> | |
| </div> | |
| <div class="bg-indigo-100 rounded-full p-3"> | |
| <i class="fas fa-folder-open text-indigo-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="h-2 bg-gray-200 rounded-full"> | |
| <div class="h-2 bg-indigo-500 rounded-full" style="width: 70%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2">70% on track</p> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Pending Tasks</p> | |
| <p class="text-2xl font-semibold text-gray-800">24</p> | |
| </div> | |
| <div class="bg-yellow-100 rounded-full p-3"> | |
| <i class="fas fa-tasks text-yellow-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="h-2 bg-gray-200 rounded-full"> | |
| <div class="h-2 bg-yellow-500 rounded-full" style="width: 45%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2">45% at risk</p> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Overdue Tasks</p> | |
| <p class="text-2xl font-semibold text-gray-800">5</p> | |
| </div> | |
| <div class="bg-red-100 rounded-full p-3"> | |
| <i class="fas fa-exclamation-triangle text-red-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="h-2 bg-gray-200 rounded-full"> | |
| <div class="h-2 bg-red-500 rounded-full" style="width: 90%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2">90% critical</p> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Completed</p> | |
| <p class="text-2xl font-semibold text-gray-800">48</p> | |
| </div> | |
| <div class="bg-green-100 rounded-full p-3"> | |
| <i class="fas fa-check-circle text-green-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="h-2 bg-gray-200 rounded-full"> | |
| <div class="h-2 bg-green-500 rounded-full" style="width: 65%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2">65% increase</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h3 class="text-lg font-medium text-gray-900">Recent Tasks</h3> | |
| <button class="text-indigo-600 hover:text-indigo-500 text-sm font-medium">View All</button> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <div class="p-4 hover:bg-gray-50 transition-colors duration-150 task-card priority-high"> | |
| <div class="flex items-start"> | |
| <div class="custom-checkbox mr-3 mt-1"> | |
| <input type="checkbox" id="task-1" class="opacity-0 absolute"> | |
| <label for="task-1" class="flex items-center cursor-pointer"> | |
| <span class="checkmark border border-gray-300 rounded w-5 h-5 flex flex-shrink-0 justify-center items-center mr-2"></span> | |
| </label> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <div class="flex justify-between items-start"> | |
| <p class="text-sm font-medium text-gray-900 truncate">Brand Identity for Client X</p> | |
| <div class="flex items-center space-x-1"> | |
| <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">Design</span> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Design new logo and brand guidelines</p> | |
| <div class="mt-2 flex items-center text-xs text-gray-500"> | |
| <i class="far fa-clock mr-1"></i> | |
| <span>Due: May 15</span> | |
| <span class="mx-2">•</span> | |
| <i class="fas fa-user mr-1"></i> | |
| <span>Assigned to: Sarah M.</span> | |
| </div> | |
| <div class="mt-2 flex items-center"> | |
| <div class="flex -space-x-2"> | |
| <img class="w-6 h-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Sarah M."> | |
| <img class="w-6 h-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/43.jpg" alt="Michael B."> | |
| </div> | |
| <div class="ml-2 flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-comment mr-1"></i> | |
| <span>3 comments</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 hover:bg-gray-50 transition-colors duration-150 task-card priority-medium"> | |
| <div class="flex items-start"> | |
| <div class="custom-checkbox mr-3 mt-1"> | |
| <input type="checkbox" id="task-2" class="opacity-0 absolute"> | |
| <label for="task-2" class="flex items-center cursor-pointer"> | |
| <span class="checkmark border border-gray-300 rounded w-5 h-5 flex flex-shrink-0 justify-center items-center mr-2"></span> | |
| </label> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <div class="flex justify-between items-start"> | |
| <p class="text-sm font-medium text-gray-900 truncate">Website Redesign</p> | |
| <div class="flex items-center space-x-1"> | |
| <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">Development</span> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Implement new design for homepage</p> | |
| <div class="mt-2 flex items-center text-xs text-gray-500"> | |
| <i class="far fa-clock mr-1"></i> | |
| <span>Due: May 20</span> | |
| <span class="mx-2">•</span> | |
| <i class="fas fa-user mr-1"></i> | |
| <span>Assigned to: Alex T.</span> | |
| </div> | |
| <div class="mt-2 flex items-center"> | |
| <div class="flex -space-x-2"> | |
| <img class="w-6 h-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Alex T."> | |
| <img class="w-6 h-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Lisa K."> | |
| </div> | |
| <div class="ml-2 flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-comment mr-1"></i> | |
| <span>5 comments</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 hover:bg-gray-50 transition-colors duration-150 task-card priority-low"> | |
| <div class="flex items-start"> | |
| <div class="custom-checkbox mr-3 mt-1"> | |
| <input type="checkbox" id="task-3" class="opacity-0 absolute"> | |
| <label for="task-3" class="flex items-center cursor-pointer"> | |
| <span class="checkmark border border-gray-300 rounded w-5 h-5 flex flex-shrink-0 justify-center items-center mr-2"></span> | |
| </label> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <div class="flex justify-between items-start"> | |
| <p class="text-sm font-medium text-gray-900 truncate">Product Packaging</p> | |
| <div class="flex items-center space-x-1"> | |
| <span class="bg-pink-100 text-pink-800 text-xs font-medium px-2.5 py-0.5 rounded">Print</span> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Create packaging design for new product line</p> | |
| <div class="mt-2 flex items-center text-xs text-gray-500"> | |
| <i class="far fa-clock mr-1"></i> | |
| <span>Due: May 25</span> | |
| <span class="mx-2">•</span> | |
| <i class="fas fa-user mr-1"></i> | |
| <span>Assigned to: Jamie R.</span> | |
| </div> | |
| <div class="mt-2 flex items-center"> | |
| <div class="flex -space-x-2"> | |
| <img class="w-6 h-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/65.jpg" alt="Jamie R."> | |
| </div> | |
| <div class="ml-2 flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-comment mr-1"></i> | |
| <span>1 comment</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 hover:bg-gray-50 transition-colors duration-150 task-card"> | |
| <div class="flex items-start"> | |
| <div class="custom-checkbox mr-3 mt-1"> | |
| <input type="checkbox" id="task-4" class="opacity-0 absolute"> | |
| <label for="task-4" class="flex items-center cursor-pointer"> | |
| <span class="checkmark border border-gray-300 rounded w-5 h-5 flex flex-shrink-0 justify-center items-center mr-2"></span> | |
| </label> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <div class="flex justify-between items-start"> | |
| <p class="text-sm font-medium text-gray-900 truncate">3D Animation</p> | |
| <div class="flex items-center space-x-1"> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Motion</span> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Create 30-second product animation</p> | |
| <div class="mt-2 flex items-center text-xs text-gray-500"> | |
| <i class="far fa-clock mr-1"></i> | |
| <span>Due: May 30</span> | |
| <span class="mx-2">•</span> | |
| <i class="fas fa-user mr-1"></i> | |
| <span>Assigned to: David L.</span> | |
| </div> | |
| <div class="mt-2 flex items-center"> | |
| <div class="flex -space-x-2"> | |
| <img class="w-6 h-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/67.jpg" alt="David L."> | |
| <img class="w-6 h-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/33.jpg" alt="Maria G."> | |
| </div> | |
| <div class="ml-2 flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-comment mr-1"></i> | |
| <span>2 comments</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h3 class="text-lg font-medium text-gray-900">Upcoming Deadlines</h3> | |
| </div> | |
| <div class="p-4"> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-800">Today - May 10</p> | |
| <div class="mt-2 pl-4 border-l-2 border-indigo-200"> | |
| <div class="py-2"> | |
| <p class="text-sm font-medium">Client Presentation</p> | |
| <p class="text-xs text-gray-500 mt-1">10:00 AM - 11:00 AM</p> | |
| </div> | |
| <div class="py-2"> | |
| <p class="text-sm font-medium">Review Packaging Design</p> | |
| <p class="text-xs text-gray-500 mt-1">2:00 PM - 3:00 PM</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-800">Tomorrow - May 11</p> | |
| <div class="mt-2 pl-4 border-l-2 border-indigo-200"> | |
| <div class="py-2"> | |
| <p class="text-sm font-medium">Team Standup</p> | |
| <p class="text-xs text-gray-500 mt-1">9:30 AM - 10:00 AM</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-800">May 15</p> | |
| <div class="mt-2 pl-4 border-l-2 border-indigo-200"> | |
| <div class="py-2"> | |
| <p class="text-sm font-medium">Brand Identity Deadline</p> | |
| <p class="text-sm text-gray-500 mt-1">All day</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tasks view (hidden by default) --> | |
| <div id="tasks-view" class="hidden"> | |
| <!-- Tasks view content --> | |
| </div> | |
| <!-- Team view (hidden by default) --> | |
| <div id="team-view" class="hidden"> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h3 class="text-lg font-medium text-gray-900">Team Management</h3> | |
| <div> | |
| <button id="add-member-btn" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <i class="fas fa-user-plus mr-2"></i> Add Member | |
| </button> | |
| </div> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="w-10 h-10 rounded-full"> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-900">John Creative</p> | |
| <p class="text-sm text-gray-500">[email protected]</p> | |
| </div> | |
| </div> | |
| <div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Admin</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-indigo-600 hover:text-indigo-900"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-gray-500"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User avatar" class="w-10 h-10 rounded-full"> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-900">Sarah M.</p> | |
| <p class="text-sm text-gray-500">[email protected]</p> | |
| </div> | |
| </div> | |
| <div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Designer</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-indigo-600 hover:text-indigo-900"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-gray-500"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/43.jpg" alt="User avatar" class="w-10 h-10 rounded-full"> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-900">Michael B.</p> | |
| <p class="text-sm text-gray-500">[email protected]</p> | |
| </div> | |
| </div> | |
| <div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">Developer</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-indigo-600 hover:text-indigo-900"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-gray-500"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="User avatar" class="w-10 h-10 rounded-full"> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-900">David L.</p> | |
| <p class="text-sm text-gray-500">[email protected]</p> | |
| </div> | |
| </div> | |
| <div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">3D Artist</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-indigo-600 hover:text-indigo-900"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-gray-500"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Calendar view (hidden by default) --> | |
| <div id="calendar-view" class="hidden"> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <button class="text-gray-500 hover:text-indigo-600"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <h3 class="text-lg font-medium text-gray-900">May 2023</h3> | |
| <button class="text-gray-500 hover:text-indigo-600"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| Add Event | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <div class="grid grid-cols-7 gap-px bg-gray-200"> | |
| <!-- Calendar header --> | |
| <div class="bg-gray-100 py-2 text-center text-xs font-semibold text-gray-500">Sun</div> | |
| <div class="bg-gray-100 py-2 text-center text-xs font-semibold text-gray-500">Mon</div> | |
| <div class="bg-gray-100 py-2 text-center text-xs font-semibold text-gray-500">Tue</div> | |
| <div class="bg-gray-100 py-2 text-center text-xs font-semibold text-gray-500">Wed</div> | |
| <div class="bg-gray-100 py-2 text-center text-xs font-semibold text-gray-500">Thu</div> | |
| <div class="bg-gray-100 py-2 text-center text-xs font-semibold text-gray-500">Fri</div> | |
| <div class="bg-gray-100 py-2 text-center text-xs font-semibold text-gray-500">Sat</div> | |
| <!-- Calendar days --> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">30</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">1</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">2</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">3</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">4</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">5</div> | |
| <div class="text-xs truncate mt-1 bg-indigo-100 text-indigo-800 rounded px-1">Brand Review</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">6</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">7</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">8</div> | |
| <div class="text-xs truncate mt-1 bg-yellow-100 text-yellow-800 rounded px-1">Client Meeting</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">9</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">10</div> | |
| <div class="text-xs truncate mt-1 bg-indigo-100 text-indigo-800 rounded px-1">Presentation</div> | |
| <div class="text-xs truncate mt-1 bg-pink-100 text-pink-800 rounded px-1">Design Review</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">11</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">12</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">13</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">14</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">15</div> | |
| <div class="text-xs truncate mt-1 bg-red-100 text-red-800 rounded px-1">Brand Identity Due</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">16</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">17</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">18</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">19</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">20</div> | |
| <div class="text-xs truncate mt-1 bg-purple-100 text-purple-800 rounded px-1">Website Deadline</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">21</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">22</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">23</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">24</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">25</div> | |
| <div class="text-xs truncate mt-1 bg-pink-100 text-pink-800 rounded px-1">Packaging Due</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">26</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">27</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">28</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">29</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">30</div> | |
| <div class="text-xs truncate mt-1 bg-blue-100 text-blue-800 rounded px-1">Animation Due</div> | |
| </div> | |
| <div class="bg-white p-1 h-24"> | |
| <div class="text-right">31</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Task detail view (hidden by default) --> | |
| <div id="task-detail-view" class="hidden"> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900">Task Details</h3> | |
| <div class="flex items-center mt-1"> | |
| <span class="text-sm text-gray-500">Task ID: #CTM-1024</span> | |
| <span class="mx-2 text-gray-400">•</span> | |
| <span class="text-sm text-gray-500">Created: May 5, 2023</span> | |
| <span class="mx-2 text-gray-400">•</span> | |
| <span class="text-sm text-gray-500">Last updated: 2 hours ago</span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <i class="fas fa-pencil-alt mr-2"></i> Edit | |
| </button> | |
| <button class="inline-flex items-center px-3 py-1.5 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <i class="fas fa-check mr-2"></i> Mark Complete | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6"> | |
| <div class="lg:col-span-2"> | |
| <div class="mb-6"> | |
| <h4 class="text-lg font-medium text-gray-900 mb-2">Brand Identity for Client X</h4> | |
| <div class="flex flex-wrap items-center gap-2 mb-4"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">Design</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-500 text-white">High Priority</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">In Progress</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">Due May 15</span> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-500 mb-4"> | |
| <i class="fas fa-user mr-1"></i> | |
| <span>Assigned to: Sarah M.</span> | |
| <span class="mx-2">•</span> | |
| <i class="fas fa-users mr-1"></i> | |
| <span>Team: Design Team</span> | |
| <span class="mx-2">•</span> | |
| <i class="fas fa-project-diagram mr-1"></i> | |
| <span>Project: Client X Rebrand</span> | |
| </html> |