Spaces:
Running
Running
Act as a senior full stack engineer. Build a complete Task Manager web application using HTML, CSS, JavaScript (with Node.js/Express for backend). The app should allow users to:
08c7cc6 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TaskFlow | Modern Task Manager</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .task-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .status-badge { | |
| font-size: 0.75rem; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 9999px; | |
| } | |
| .status-todo { | |
| background-color: #e2e8f0; | |
| color: #4a5568; | |
| } | |
| .status-inprogress { | |
| background-color: #bee3f8; | |
| color: #2b6cb0; | |
| } | |
| .status-completed { | |
| background-color: #c6f6d5; | |
| color: #2f855a; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="check-circle" class="text-indigo-600"></i> | |
| <span class="ml-2 text-xl font-bold text-gray-900">TaskFlow</span> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <div class="ml-3 relative"> | |
| <div> | |
| <button id="user-menu" class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/42" alt="User profile"> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <!-- Sidebar --> | |
| <div class="w-full md:w-64 flex-shrink-0"> | |
| <div class="bg-white rounded-lg shadow-sm p-4"> | |
| <div class="flex items-center mb-6"> | |
| <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/42" alt="User profile"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">John Doe</p> | |
| <p class="text-sm text-gray-500">john@example.com</p> | |
| </div> | |
| </div> | |
| <nav class="space-y-1"> | |
| <a href="#" class="bg-indigo-50 text-indigo-700 group flex items-center px-3 py-2 text-sm font-medium rounded-md"> | |
| <i data-feather="home" class="text-indigo-500 mr-3 flex-shrink-0"></i> | |
| Dashboard | |
| </a> | |
| <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-3 py-2 text-sm font-medium rounded-md"> | |
| <i data-feather="inbox" class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0"></i> | |
| My Tasks | |
| </a> | |
| <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-3 py-2 text-sm font-medium rounded-md"> | |
| <i data-feather="send" class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0"></i> | |
| Assigned Tasks | |
| </a> | |
| <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-3 py-2 text-sm font-medium rounded-md"> | |
| <i data-feather="users" class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0"></i> | |
| Team | |
| </a> | |
| <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-3 py-2 text-sm font-medium rounded-md"> | |
| <i data-feather="settings" class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0"></i> | |
| Settings | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="flex-1"> | |
| <!-- Header --> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-900">Dashboard</h1> | |
| <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm 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 data-feather="plus" class="mr-2"></i> | |
| New Task | |
| </button> | |
| </div> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8"> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-indigo-50 text-indigo-600"> | |
| <i data-feather="inbox"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-500">Total Tasks</p> | |
| <p class="text-2xl font-semibold text-gray-900">24</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-50 text-blue-600"> | |
| <i data-feather="clock"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-500">In Progress</p> | |
| <p class="text-2xl font-semibold text-gray-900">8</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-50 text-green-600"> | |
| <i data-feather="check-circle"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-500">Completed</p> | |
| <p class="text-2xl font-semibold text-gray-900">12</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Tasks --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-medium text-gray-900">Recent Tasks</h2> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <!-- Task Item --> | |
| <div class="p-6 hover:bg-gray-50 transition-colors duration-150"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-0.5"> | |
| <input type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <p class="text-sm font-medium text-gray-900">Update project documentation</p> | |
| <span class="status-badge status-inprogress">In Progress</span> | |
| </div> | |
| <p class="mt-1 text-sm text-gray-500">Due tomorrow • Assigned to Sarah Johnson</p> | |
| <div class="mt-2 flex items-center text-sm text-gray-500"> | |
| <i data-feather="calendar" class="mr-1.5 h-4 w-4"></i> | |
| <span>Created on May 15, 2023</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Task Item --> | |
| <div class="p-6 hover:bg-gray-50 transition-colors duration-150"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-0.5"> | |
| <input type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <p class="text-sm font-medium text-gray-900">Review pull request #42</p> | |
| <span class="status-badge status-completed">Completed</span> | |
| </div> | |
| <p class="mt-1 text-sm text-gray-500">Due yesterday • Assigned to you</p> | |
| <div class="mt-2 flex items-center text-sm text-gray-500"> | |
| <i data-feather="calendar" class="mr-1.5 h-4 w-4"></i> | |
| <span>Created on May 10, 2023</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Task Item --> | |
| <div class="p-6 hover:bg-gray-50 transition-colors duration-150"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-0.5"> | |
| <input type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <p class="text-sm font-medium text-gray-900">Prepare client presentation</p> | |
| <span class="status-badge status-todo">To Do</span> | |
| </div> | |
| <p class="mt-1 text-sm text-gray-500">Due in 3 days • Assigned to Michael Chen</p> | |
| <div class="mt-2 flex items-center text-sm text-gray-500"> | |
| <i data-feather="calendar" class="mr-1.5 h-4 w-4"></i> | |
| <span>Created on May 18, 2023</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Task Modal (hidden by default) --> | |
| <div id="task-modal" class="fixed z-10 inset-0 overflow-y-auto hidden"> | |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6"> | |
| <div> | |
| <div class="mt-3 text-center sm:mt-0 sm:text-left"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title"> | |
| Create New Task | |
| </h3> | |
| <div class="mt-4"> | |
| <form> | |
| <div class="mb-4"> | |
| <label for="task-title" class="block text-sm font-medium text-gray-700">Task Title</label> | |
| <input type="text" id="task-title" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="task-description" class="block text-sm font-medium text-gray-700">Description</label> | |
| <textarea id="task-description" rows="3" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"></textarea> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="task-assignee" class="block text-sm font-medium text-gray-700">Assignee</label> | |
| <select id="task-assignee" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"> | |
| <option>Select team member</option> | |
| <option>Sarah Johnson</option> | |
| <option>Michael Chen</option> | |
| <option>Alex Rodriguez</option> | |
| </select> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label for="task-due-date" class="block text-sm font-medium text-gray-700">Due Date</label> | |
| <input type="date" id="task-due-date" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| <div> | |
| <label for="task-status" class="block text-sm font-medium text-gray-700">Status</label> | |
| <select id="task-status" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"> | |
| <option>To Do</option> | |
| <option>In Progress</option> | |
| <option>Completed</option> | |
| </select> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse"> | |
| <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Create Task | |
| </button> | |
| <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm"> | |
| Cancel | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| AOS.init(); | |
| feather.replace(); | |
| // Modal toggle functionality | |
| document.querySelectorAll('[data-modal-toggle]').forEach(button => { | |
| button.addEventListener('click', () => { | |
| document.getElementById('task-modal').classList.toggle('hidden'); | |
| }); | |
| }); | |
| // Close modal when clicking outside | |
| document.getElementById('task-modal').addEventListener('click', function(e) { | |
| if (e.target === this) { | |
| this.classList.add('hidden'); | |
| } | |
| }); | |
| // Sample task data | |
| const tasks = [ | |
| { | |
| id: 1, | |
| title: "Update project documentation", | |
| description: "Ensure all API endpoints are documented", | |
| status: "inprogress", | |
| assignee: "Sarah Johnson", | |
| dueDate: "2023-05-16", | |
| createdAt: "2023-05-15" | |
| }, | |
| { | |
| id: 2, | |
| title: "Review pull request #42", | |
| description: "Check the new authentication flow", | |
| status: "completed", | |
| assignee: "You", | |
| dueDate: "2023-05-14", | |
| createdAt: "2023-05-10" | |
| }, | |
| { | |
| id: 3, | |
| title: "Prepare client presentation", | |
| description: "Create slides for quarterly review", | |
| status: "todo", | |
| assignee: "Michael Chen", | |
| dueDate: "2023-05-21", | |
| createdAt: "2023-05-18" | |
| } | |
| ]; | |
| // You would typically fetch tasks from an API in a real app | |
| // fetch('/api/tasks').then(response => response.json()).then(data => renderTasks(data)); | |
| </script> | |
| </body> | |
| </html> | |