Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TaskFlow | Smart 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://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></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; | |
| } | |
| .task-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .category-pill { | |
| transition: all 0.2s ease; | |
| } | |
| .category-pill:hover { | |
| transform: scale(1.05); | |
| } | |
| #taskInput:focus { | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.5s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="check-circle" class="text-indigo-600 w-8 h-8"></i> | |
| <h1 class="text-2xl font-bold text-gray-800">TaskFlow</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i data-feather="bell" class="text-gray-600"></i> | |
| </button> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i data-feather="user" class="text-indigo-600 w-4 h-4"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-8"> | |
| <!-- Sidebar --> | |
| <div class="lg:col-span-1 space-y-6"> | |
| <!-- Collapsible Sidebar Toggle --> | |
| <button id="sidebarToggle" class="lg:hidden w-full mb-4 flex items-center justify-between px-4 py-2 bg-indigo-600 text-white rounded-lg"> | |
| <span>Toggle Sidebar</span> | |
| <i data-feather="chevron-down" class="w-4 h-4"></i> | |
| </button> | |
| <!-- Add Task --> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <h2 class="text-lg font-semibold text-gray-800 mb-4">Add New Task</h2> | |
| <form id="taskForm"> | |
| <div class="mb-4"> | |
| <input type="text" id="taskInput" placeholder="What needs to be done?" | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Category</label> | |
| <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option>Work</option> | |
| <option>Personal</option> | |
| <option>Health</option> | |
| <option>Learning</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Due Date</label> | |
| <input type="date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 mb-2"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Set Reminder</label> | |
| <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option>No reminder</option> | |
| <option>5 minutes before</option> | |
| <option>15 minutes before</option> | |
| <option>30 minutes before</option> | |
| <option>1 hour before</option> | |
| <option>1 day before</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Priority</label> | |
| <div class="flex space-x-2"> | |
| <button type="button" class="px-3 py-1 text-xs rounded-full bg-red-100 text-red-800">High</button> | |
| <button type="button" class="px-3 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Medium</button> | |
| <button type="button" class="px-3 py-1 text-xs rounded-full bg-green-100 text-green-800">Low</button> | |
| </div> | |
| </div> | |
| <button type="submit" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700 transition duration-200"> | |
| Add Task | |
| </button> | |
| </form> | |
| </div> | |
| <!-- Progress - Moved to collapsible section --> | |
| <div id="progressSection" class="bg-white rounded-xl shadow-sm p-6 hidden lg:block"> | |
| <h2 class="text-lg font-semibold text-gray-800 mb-4">Your Progress</h2> | |
| <div class="flex justify-center mb-4"> | |
| <div class="relative w-32 h-32"> | |
| <svg class="w-full h-full" viewBox="0 0 100 100"> | |
| <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" /> | |
| <circle class="progress-ring__circle text-indigo-600" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" stroke-dasharray="251.2" stroke-dashoffset="75.36" /> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <span class="text-2xl font-bold text-gray-800">70%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-600">Completed</span> | |
| <span class="font-medium">14 tasks</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-600">Pending</span> | |
| <span class="font-medium">6 tasks</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-600">Overdue</span> | |
| <span class="font-medium">2 tasks</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Categories - Moved to collapsible section --> | |
| <div id="categoriesSection" class="bg-white rounded-xl shadow-sm p-6 hidden lg:block"> | |
| <h2 class="text-lg font-semibold text-gray-800 mb-4">Categories</h2> | |
| <div class="space-y-2"> | |
| <button class="category-pill w-full flex items-center justify-between px-4 py-2 bg-indigo-50 text-indigo-700 rounded-lg"> | |
| <span>All Tasks</span> | |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-full">20</span> | |
| </button> | |
| <button class="category-pill w-full flex items-center justify-between px-4 py-2 hover:bg-gray-50 rounded-lg"> | |
| <span>Work</span> | |
| <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">8</span> | |
| </button> | |
| <button class="category-pill w-full flex items-center justify-between px-4 py-2 hover:bg-gray-50 rounded-lg"> | |
| <span>Personal</span> | |
| <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">5</span> | |
| </button> | |
| <button class="category-pill w-full flex items-center justify-between px-4 py-2 hover:bg-gray-50 rounded-lg"> | |
| <span>Health</span> | |
| <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">3</span> | |
| </button> | |
| <button class="category-pill w-full flex items-center justify-between px-4 py-2 hover:bg-gray-50 rounded-lg"> | |
| <span>Learning</span> | |
| <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">4</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="lg:col-span-3 space-y-6"> | |
| <!-- View Toggles --> | |
| <div class="bg-white rounded-xl shadow-sm p-4"> | |
| <div class="flex justify-between items-center"> | |
| <h2 class="text-xl font-semibold text-gray-800">Today's Tasks</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-sm rounded-lg bg-indigo-600 text-white">Today</button> | |
| <button class="px-3 py-1 text-sm rounded-lg bg-white border border-gray-300 text-gray-700 hover:bg-gray-50">Week</button> | |
| <button class="px-3 py-1 text-sm rounded-lg bg-white border border-gray-300 text-gray-700 hover:bg-gray-50">Month</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Task List --> | |
| <div class="space-y-4"> | |
| <!-- Task Card --> | |
| <div class="task-card bg-white rounded-xl shadow-sm p-6 transition duration-200 cursor-pointer" data-aos="fade-up"> | |
| <div class="flex items-start justify-between"> | |
| <div class="flex items-start space-x-4"> | |
| <div class="mt-1"> | |
| <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500"> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Complete project proposal</h3> | |
| <p class="text-sm text-gray-500 mt-1">Due today at 3:00 PM</p> | |
| <div class="flex space-x-2 mt-2"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">Work</span> | |
| <span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">High</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 text-gray-400 hover:text-indigo-600"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 text-gray-400 hover:text-red-600"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Task Card --> | |
| <div class="task-card bg-white rounded-xl shadow-sm p-6 transition duration-200 cursor-pointer" data-aos="fade-up"> | |
| <div class="flex items-start justify-between"> | |
| <div class="flex items-start space-x-4"> | |
| <div class="mt-1"> | |
| <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500"> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Gym workout session</h3> | |
| <p class="text-sm text-gray-500 mt-1">Due today at 6:00 PM</p> | |
| <div class="flex space-x-2 mt-2"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Health</span> | |
| <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Medium</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 text-gray-400 hover:text-indigo-600"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 text-gray-400 hover:text-red-600"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Task Card --> | |
| <div class="task-card bg-white rounded-xl shadow-sm p-6 transition duration-200 cursor-pointer" data-aos="fade-up"> | |
| <div class="flex items-start justify-between"> | |
| <div class="flex items-start space-x-4"> | |
| <div class="mt-1"> | |
| <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500" checked> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-500 line-through">Morning meditation</h3> | |
| <p class="text-sm text-gray-400 mt-1">Completed at 8:00 AM</p> | |
| <div class="flex space-x-2 mt-2"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-800">Personal</span> | |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Low</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 text-gray-400 hover:text-indigo-600"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 text-gray-400 hover:text-red-600"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Task Card --> | |
| <div class="task-card bg-white rounded-xl shadow-sm p-6 transition duration-200 cursor-pointer" data-aos="fade-up"> | |
| <div class="flex items-start justify-between"> | |
| <div class="flex items-start space-x-4"> | |
| <div class="mt-1"> | |
| <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500"> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Learn React Hooks</h3> | |
| <p class="text-sm text-gray-500 mt-1">Due tomorrow at 10:00 AM</p> | |
| <div class="flex space-x-2 mt-2"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Learning</span> | |
| <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Medium</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 text-gray-400 hover:text-indigo-600"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 text-gray-400 hover:text-red-600"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Task Card --> | |
| <div class="task-card bg-white rounded-xl shadow-sm p-6 transition duration-200 cursor-pointer" data-aos="fade-up"> | |
| <div class="flex items-start justify-between"> | |
| <div class="flex items-start space-x-4"> | |
| <div class="mt-1"> | |
| <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500"> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Team meeting</h3> | |
| <p class="text-sm text-red-500 mt-1">Overdue (Yesterday)</p> | |
| <div class="flex space-x-2 mt-2"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">Work</span> | |
| <span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">High</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 text-gray-400 hover:text-indigo-600"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 text-gray-400 hover:text-red-600"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-white border-t border-gray-200 py-6"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-sm text-gray-500">© 2023 TaskFlow. All rights reserved.</p> | |
| <div class="flex space-x-6 mt-4 md:mt-0"> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="github" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="twitter" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="instagram" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| AOS.init(); | |
| feather.replace(); | |
| // Progress circle animation | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const circle = document.querySelector('.progress-ring__circle'); | |
| const radius = circle.r.baseVal.value; | |
| const circumference = radius * 2 * Math.PI; | |
| circle.style.strokeDasharray = `${circumference} ${circumference}`; | |
| circle.style.strokeDashoffset = circumference; | |
| const offset = circumference - (70 / 100) * circumference; | |
| circle.style.strokeDashoffset = offset; | |
| }); | |
| // Sidebar toggle functionality | |
| document.getElementById('sidebarToggle').addEventListener('click', function() { | |
| const progressSection = document.getElementById('progressSection'); | |
| const categoriesSection = document.getElementById('categoriesSection'); | |
| const icon = this.querySelector('i'); | |
| if (progressSection.classList.contains('hidden')) { | |
| progressSection.classList.remove('hidden'); | |
| categoriesSection.classList.remove('hidden'); | |
| icon.setAttribute('data-feather', 'chevron-up'); | |
| } else { | |
| progressSection.classList.add('hidden'); | |
| categoriesSection.classList.add('hidden'); | |
| icon.setAttribute('data-feather', 'chevron-down'); | |
| } | |
| feather.replace(); | |
| }); | |
| // Task form submission | |
| document.getElementById('taskForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const taskInput = document.getElementById('taskInput'); | |
| if (taskInput.value.trim() !== '') { | |
| alert('Task added successfully!'); | |
| taskInput.value = ''; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |