Spaces:

TKS165
/

task-manager

Running

App Files Files Community

TKS165 commited on Jun 2, 2025

Commit

055c69d

verified ·

1 Parent(s): 55947a1

Add 2 files

Browse files

Files changed (2) hide show

index.html +156 -97
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -5,6 +5,22 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Advanced Task Manager</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>
         .task-item:hover .task-actions {
@@ -33,9 +49,15 @@
         .calendar-day.has-tasks {
             background-color: #e0e7ff;
         }
         .calendar-day.has-tasks:hover {
             background-color: #c7d2fe;
         }
         .calendar-day.today {
             border: 2px solid #6366f1;
         }
@@ -55,37 +77,46 @@
         .dot-low {
             background-color: #10b981;
         }
     </style>
 </head>
-<body class="bg-gray-100 min-h-screen">
     <div class="container mx-auto px-4 py-8">
-        <header class="mb-8">
-            <h1 class="text-3xl font-bold text-indigo-800">TaskMaster Pro</h1>
-            <p class="text-gray-600">Your ultimate productivity companion</p>
         </header>
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
             <!-- Task Input Section -->
             <div class="lg:col-span-2">
-                <div class="bg-white rounded-lg shadow-md p-6 mb-6">
-                    <h2 class="text-xl font-semibold mb-4 text-indigo-700">Add New Task</h2>
                     <form id="taskForm" class="space-y-4">
                         <div>
-                            <label for="taskTitle" class="block text-sm font-medium text-gray-700">Task Title</label>
-                            <input type="text" id="taskTitle" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2 border" required>
                         </div>
                         <div>
-                            <label for="taskDescription" class="block text-sm font-medium text-gray-700">Description</label>
-                            <textarea id="taskDescription" rows="2" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2 border"></textarea>
                         </div>
                         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                             <div>
-                                <label for="taskDueDate" class="block text-sm font-medium text-gray-700">Due Date</label>
-                                <input type="date" id="taskDueDate" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2 border">
                             </div>
                             <div>
-                                <label for="taskPriority" class="block text-sm font-medium text-gray-700">Priority</label>
-                                <select id="taskPriority" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2 border">
                                     <option value="low">Low</option>
                                     <option value="medium">Medium</option>
                                     <option value="high">High</option>
@@ -93,8 +124,8 @@
                             </div>
                         </div>
                         <div class="flex items-center">
-                            <input id="pinTask" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
-                            <label for="pinTask" class="ml-2 block text-sm text-gray-700">Pin this task</label>
                         </div>
                         <button type="submit" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 transition duration-200 flex items-center justify-center">
                             <i class="fas fa-plus-circle mr-2"></i> Add Task
@@ -103,31 +134,31 @@
                 </div>
                 <!-- Pinned Tasks Section -->
-                <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                     <div class="flex justify-between items-center mb-4">
-                        <h2 class="text-xl font-semibold text-indigo-700">
                             <i class="fas fa-thumbtack mr-2 text-red-500"></i> Pinned Tasks
                         </h2>
-                        <span id="pinnedCount" class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded-full">0</span>
                     </div>
                     <div id="pinnedTasks" class="space-y-3">
                         <!-- Pinned tasks will appear here -->
-                        <div class="text-center text-gray-500 py-4">
                             No pinned tasks yet. Pin important tasks to see them here.
                         </div>
                     </div>
                 </div>
                 <!-- All Tasks Section -->
-                <div class="bg-white rounded-lg shadow-md p-6">
                     <div class="flex justify-between items-center mb-4">
-                        <h2 class="text-xl font-semibold text-indigo-700">
                             <i class="fas fa-tasks mr-2"></i> All Tasks
                         </h2>
                         <div class="flex space-x-2">
                             <button id="filterAll" class="text-xs bg-indigo-600 text-white px-3 py-1 rounded-full">All</button>
-                            <button id="filterPending" class="text-xs bg-gray-200 text-gray-700 px-3 py-1 rounded-full">Pending</button>
-                            <button id="filterCompleted" class="text-xs bg-gray-200 text-gray-700 px-3 py-1 rounded-full">Completed</button>
                         </div>
                     </div>
                     <div id="allTasks" class="space-y-3">
@@ -138,29 +169,29 @@
             <!-- Calendar and Stats Section -->
             <div class="lg:col-span-1">
-                <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                     <div class="flex justify-between items-center mb-4">
-                        <h2 class="text-xl font-semibold text-indigo-700">
                             <i class="fas fa-calendar-alt mr-2"></i> Schedule
                         </h2>
                         <div class="flex space-x-2">
-                            <button id="prevMonth" class="text-gray-600 hover:text-indigo-700">
                                 <i class="fas fa-chevron-left"></i>
                             </button>
-                            <span id="currentMonth" class="font-medium">June 2023</span>
-                            <button id="nextMonth" class="text-gray-600 hover:text-indigo-700">
                                 <i class="fas fa-chevron-right"></i>
                             </button>
                         </div>
                     </div>
                     <div class="grid grid-cols-7 gap-1 mb-2">
-                        <div class="text-center text-xs font-medium text-gray-500">Sun</div>
-                        <div class="text-center text-xs font-medium text-gray-500">Mon</div>
-                        <div class="text-center text-xs font-medium text-gray-500">Tue</div>
-                        <div class="text-center text-xs font-medium text-gray-500">Wed</div>
-                        <div class="text-center text-xs font-medium text-gray-500">Thu</div>
-                        <div class="text-center text-xs font-medium text-gray-500">Fri</div>
-                        <div class="text-center text-xs font-medium text-gray-500">Sat</div>
                     </div>
                     <div id="calendarDays" class="grid grid-cols-7 gap-1">
                         <!-- Calendar days will be generated here -->
@@ -168,8 +199,8 @@
                 </div>
                 <!-- Upcoming Tasks Preview -->
-                <div class="bg-white rounded-lg shadow-md p-6 mb-6">
-                    <h2 class="text-xl font-semibold mb-4 text-indigo-700">
                         <i class="fas fa-calendar-day mr-2"></i> Upcoming Tasks
                     </h2>
                     <div id="upcomingTasks" class="space-y-3">
@@ -178,36 +209,36 @@
                 </div>
                 <!-- Stats Section -->
-                <div class="bg-white rounded-lg shadow-md p-6">
-                    <h2 class="text-xl font-semibold mb-4 text-indigo-700">
                         <i class="fas fa-chart-pie mr-2"></i> Productivity Stats
                     </h2>
                     <div class="space-y-4">
                         <div>
                             <div class="flex justify-between mb-1">
-                                <span class="text-sm font-medium text-gray-700">Tasks Completed</span>
-                                <span id="completedPercentage" class="text-sm font-medium text-indigo-700">0%</span>
                             </div>
-                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                 <div id="completedProgress" class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
                             </div>
                         </div>
                         <div>
                             <div class="flex justify-between mb-1">
-                                <span class="text-sm font-medium text-gray-700">High Priority Tasks</span>
-                                <span id="highPriorityCount" class="text-sm font-medium text-red-600">0</span>
                             </div>
                         </div>
                         <div>
                             <div class="flex justify-between mb-1">
-                                <span class="text-sm font-medium text-gray-700">Pending Tasks</span>
-                                <span id="pendingTasksCount" class="text-sm font-medium text-yellow-600">0</span>
                             </div>
                         </div>
                         <div>
                             <div class="flex justify-between mb-1">
-                                <span class="text-sm font-medium text-gray-700">Total Tasks</span>
-                                <span id="totalTasksCount" class="text-sm font-medium text-indigo-700">0</span>
                             </div>
                         </div>
                     </div>
@@ -218,14 +249,14 @@
     <!-- Task Details Modal -->
     <div id="taskModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
-        <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md">
             <div class="flex justify-between items-center mb-4">
-                <h3 id="modalTaskTitle" class="text-xl font-semibold text-indigo-700"></h3>
-                <button id="closeModal" class="text-gray-500 hover:text-gray-700">
                     <i class="fas fa-times"></i>
                 </button>
             </div>
-            <div id="modalTaskDetails" class="space-y-3">
                 <!-- Task details will appear here -->
             </div>
             <div class="mt-4 flex justify-end space-x-3">
@@ -365,6 +396,7 @@
             const modalTaskDetails = document.getElementById('modalTaskDetails');
             const completeTaskBtn = document.getElementById('completeTaskBtn');
             const deleteTaskBtn = document.getElementById('deleteTaskBtn');
             // Stats elements
             const completedPercentage = document.getElementById('completedPercentage');
@@ -386,6 +418,13 @@
             renderCalendar();
             renderUpcomingTasks();
             // Event listeners
             taskForm.addEventListener('submit', addTask);
             prevMonthBtn.addEventListener('click', () => {
@@ -405,30 +444,30 @@
                 renderCalendar();
             });
             filterAll.addEventListener('click', () => {
-                filterAll.classList.remove('bg-gray-200', 'text-gray-700');
                 filterAll.classList.add('bg-indigo-600', 'text-white');
                 filterPending.classList.remove('bg-indigo-600', 'text-white');
-                filterPending.classList.add('bg-gray-200', 'text-gray-700');
                 filterCompleted.classList.remove('bg-indigo-600', 'text-white');
-                filterCompleted.classList.add('bg-gray-200', 'text-gray-700');
                 renderAllTasks();
             });
             filterPending.addEventListener('click', () => {
-                filterPending.classList.remove('bg-gray-200', 'text-gray-700');
                 filterPending.classList.add('bg-indigo-600', 'text-white');
                 filterAll.classList.remove('bg-indigo-600', 'text-white');
-                filterAll.classList.add('bg-gray-200', 'text-gray-700');
                 filterCompleted.classList.remove('bg-indigo-600', 'text-white');
-                filterCompleted.classList.add('bg-gray-200', 'text-gray-700');
                 renderAllTasks('pending');
             });
             filterCompleted.addEventListener('click', () => {
-                filterCompleted.classList.remove('bg-gray-200', 'text-gray-700');
                 filterCompleted.classList.add('bg-indigo-600', 'text-white');
                 filterAll.classList.remove('bg-indigo-600', 'text-white');
-                filterAll.classList.add('bg-gray-200', 'text-gray-700');
                 filterPending.classList.remove('bg-indigo-600', 'text-white');
-                filterPending.classList.add('bg-gray-200', 'text-gray-700');
                 renderAllTasks('completed');
             });
             closeModal.addEventListener('click', () => {
@@ -446,8 +485,28 @@
                     taskModal.classList.add('hidden');
                 }
             });
             // Functions
             function addTask(e) {
                 e.preventDefault();
@@ -493,7 +552,7 @@
                 if (filteredTasks.length === 0) {
                     allTasksContainer.innerHTML = `
-                        <div class="text-center text-gray-500 py-4">
                             No tasks found. Add a new task to get started!
                         </div>
                     `;
@@ -529,7 +588,7 @@
                 if (pinnedTasks.length === 0) {
                     pinnedTasksContainer.innerHTML = `
-                        <div class="text-center text-gray-500 py-4">
                             No pinned tasks yet. Pin important tasks to see them here.
                         </div>
                     `;
@@ -566,7 +625,7 @@
                 if (upcomingTasks.length === 0) {
                     upcomingTasksContainer.innerHTML = `
-                        <div class="text-center text-gray-500 py-4">
                             No upcoming tasks in the next 7 days.
                         </div>
                     `;
@@ -582,17 +641,17 @@
                     const dueDateStr = dueDate.toLocaleDateString('en-US', options);
                     const taskElement = document.createElement('div');
-                    taskElement.className = `bg-white rounded-md shadow-sm p-3 border-l-4 priority-${task.priority} cursor-pointer hover:bg-gray-50`;
                     taskElement.dataset.id = task.id;
                     taskElement.addEventListener('click', () => showTaskDetails(task.id));
                     taskElement.innerHTML = `
                         <div class="flex justify-between items-start">
                             <div>
-                                <h3 class="text-sm font-medium">${task.title}</h3>
-                                <p class="text-xs text-gray-500 mt-1">${dueDateStr}</p>
                             </div>
-                            <span class="text-xs font-medium ${task.priority === 'high' ? 'text-red-500' : task.priority === 'medium' ? 'text-yellow-500' : 'text-green-500'}">
                                 ${task.priority.charAt(0).toUpperCase() + task.priority.slice(1)}
                             </span>
                         </div>
@@ -612,7 +671,7 @@
                 const isDueToday = dueDate && dueDate.getTime() === today.getTime() && !task.completed;
                 const taskElement = document.createElement('div');
-                taskElement.className = `task-item bg-white rounded-md shadow-sm p-4 border-l-4 priority-${task.priority} ${isOverdue ? 'pending-task' : ''} ${task.completed ? 'opacity-70' : ''} cursor-pointer`;
                 taskElement.dataset.id = task.id;
                 taskElement.addEventListener('click', () => showTaskDetails(task.id));
@@ -625,17 +684,17 @@
                         dueDateText = `<span class="text-red-500 font-medium">${daysOverdue} day${daysOverdue !== 1 ? 's' : ''} overdue</span>`;
                     } else {
                         const options = { month: 'short', day: 'numeric' };
-                        dueDateText = `<span class="text-gray-600">Due: ${new Date(task.dueDate).toLocaleDateString('en-US', options)}</span>`;
                     }
                 }
                 taskElement.innerHTML = `
                     <div class="flex justify-between items-start">
                         <div class="flex items-start">
-                            <input type="checkbox" ${task.completed ? 'checked' : ''} class="mt-1 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 task-completed">
                             <div class="ml-3">
-                                <h3 class="text-sm font-medium ${task.completed ? 'line-through text-gray-500' : 'text-gray-900'}">${task.title}</h3>
-                                ${task.description ? `<p class="text-xs text-gray-500 mt-1">${task.description}</p>` : ''}
                                 ${dueDateText ? `<p class="text-xs mt-1">${dueDateText}</p>` : ''}
                             </div>
                         </div>
@@ -708,28 +767,28 @@
                 modalTaskDetails.innerHTML = `
                     <div class="flex justify-between">
                         <div>
-                            <span class="text-sm font-medium text-gray-500">Status</span>
-                            <p class="mt-1">${task.completed ? 'Completed' : 'Pending'}</p>
                         </div>
                         <div>
-                            <span class="text-sm font-medium text-gray-500">Priority</span>
-                            <p class="mt-1 ${task.priority === 'high' ? 'text-red-500' : task.priority === 'medium' ? 'text-yellow-500' : 'text-green-500'}">
                                 ${task.priority.charAt(0).toUpperCase() + task.priority.slice(1)}
                             </p>
                         </div>
                     </div>
                     <div>
-                        <span class="text-sm font-medium text-gray-500">Due Date</span>
-                        <p class="mt-1">${dueDateText}</p>
                     </div>
                     <div>
-                        <span class="text-sm font-medium text-gray-500">Created</span>
-                        <p class="mt-1">${new Date(task.createdAt).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' })}</p>
                     </div>
                     ${task.description ? `
                     <div>
-                        <span class="text-sm font-medium text-gray-500">Description</span>
-                        <p class="mt-1">${task.description}</p>
                     </div>
                     ` : ''}
                 `;
@@ -831,7 +890,7 @@
                 // Create day elements for previous month
                 for (let i = 0; i < firstDay; i++) {
                     const dayElement = document.createElement('div');
-                    dayElement.className = 'text-center text-gray-400 text-sm py-1';
                     dayElement.textContent = prevMonthDays - firstDay + i + 1;
                     calendarDays.appendChild(dayElement);
                 }
@@ -857,7 +916,7 @@
                     const isToday = dayDate.getTime() === today.getTime();
                     const dayElement = document.createElement('div');
-                    dayElement.className = `calendar-day text-center text-sm py-1 rounded-md cursor-pointer ${isToday ? 'today font-bold' : ''} ${dayTasks.length > 0 ? 'has-tasks' : ''}`;
                     dayElement.textContent = i;
                     dayElement.dataset.date = dayDate.toISOString().split('T')[0];
@@ -878,7 +937,7 @@
                         // If more than 3 tasks, show a + indicator
                         if (dayTasks.length > 3) {
                             const more = document.createElement('span');
-                            more.className = 'text-xs text-gray-500';
                             more.textContent = `+${dayTasks.length - 3}`;
                             indicators.appendChild(more);
                         }
@@ -901,7 +960,7 @@
                 // Add days from next month if needed
                 for (let i = 1; i <= remainingDays; i++) {
                     const dayElement = document.createElement('div');
-                    dayElement.className = 'text-center text-gray-400 text-sm py-1';
                     dayElement.textContent = i;
                     calendarDays.appendChild(dayElement);
                 }
@@ -929,21 +988,21 @@
                 let tasksHTML = `
                     <div class="mb-4">
-                        <h3 class="text-lg font-semibold text-indigo-700">Tasks for ${dateStr}</h3>
-                        <p class="text-sm text-gray-500">${tasksForDate.length} task${tasksForDate.length !== 1 ? 's' : ''}</p>
                     </div>
                     <div class="space-y-3 max-h-96 overflow-y-auto">
                 `;
                 tasksForDate.forEach(task => {
                     tasksHTML += `
-                        <div class="task-item bg-white rounded-md shadow-sm p-3 border-l-4 priority-${task.priority} ${task.completed ? 'opacity-70' : ''}">
                             <div class="flex justify-between items-start">
                                 <div class="flex items-start">
-                                    <input type="checkbox" ${task.completed ? 'checked' : ''} class="mt-1 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 task-completed">
                                     <div class="ml-3">
-                                        <h3 class="text-sm font-medium ${task.completed ? 'line-through text-gray-500' : 'text-gray-900'}">${task.title}</h3>
-                                        ${task.description ? `<p class="text-xs text-gray-500 mt-1">${task.description}</p>` : ''}
                                     </div>
                                 </div>
                                 <div class="flex space-x-2">
@@ -965,10 +1024,10 @@
                 const modal = document.createElement('div');
                 modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
                 modal.innerHTML = `
-                    <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md">
                         <div class="flex justify-between items-center mb-4">
-                            <h3 class="text-xl font-semibold text-indigo-700">Tasks for ${dateStr}</h3>
-                            <button class="close-modal text-gray-500 hover:text-gray-700">
                                 <i class="fas fa-times"></i>
                             </button>
                         </div>

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Advanced Task Manager</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        dark: {
+                            100: '#1E293B',
+                            200: '#0F172A',
+                            300: '#0B1120',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .task-item:hover .task-actions {
         .calendar-day.has-tasks {
             background-color: #e0e7ff;
         }
+        .dark .calendar-day.has-tasks {
+            background-color: #1e40af;
+        }
         .calendar-day.has-tasks:hover {
             background-color: #c7d2fe;
         }
+        .dark .calendar-day.has-tasks:hover {
+            background-color: #1e3a8a;
+        }
         .calendar-day.today {
             border: 2px solid #6366f1;
         }
         .dot-low {
             background-color: #10b981;
         }
+        .dark-mode-toggle {
+            transition: all 0.3s ease;
+        }
     </style>
 </head>
+<body class="bg-gray-100 dark:bg-dark-200 min-h-screen">
     <div class="container mx-auto px-4 py-8">
+        <header class="mb-8 flex justify-between items-center">
+            <div>
+                <h1 class="text-3xl font-bold text-indigo-800 dark:text-indigo-400">TaskMaster Pro</h1>
+                <p class="text-gray-600 dark:text-gray-400">Your ultimate productivity companion</p>
+            </div>
+            <button id="darkModeToggle" class="dark-mode-toggle bg-gray-200 dark:bg-dark-100 text-gray-700 dark:text-gray-200 p-2 rounded-full hover:bg-gray-300 dark:hover:bg-dark-300">
+                <i class="fas fa-moon dark:hidden"></i>
+                <i class="fas fa-sun hidden dark:block"></i>
+            </button>
         </header>
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
             <!-- Task Input Section -->
             <div class="lg:col-span-2">
+                <div class="bg-white dark:bg-dark-100 rounded-lg shadow-md p-6 mb-6">
+                    <h2 class="text-xl font-semibold mb-4 text-indigo-700 dark:text-indigo-400">Add New Task</h2>
                     <form id="taskForm" class="space-y-4">
                         <div>
+                            <label for="taskTitle" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Task Title</label>
+                            <input type="text" id="taskTitle" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2 border dark:bg-dark-200 dark:border-gray-600 dark:text-white" required>
                         </div>
                         <div>
+                            <label for="taskDescription" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
+                            <textarea id="taskDescription" rows="2" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2 border dark:bg-dark-200 dark:border-gray-600 dark:text-white"></textarea>
                         </div>
                         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                             <div>
+                                <label for="taskDueDate" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Due Date</label>
+                                <input type="date" id="taskDueDate" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2 border dark:bg-dark-200 dark:border-gray-600 dark:text-white">
                             </div>
                             <div>
+                                <label for="taskPriority" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Priority</label>
+                                <select id="taskPriority" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2 border dark:bg-dark-200 dark:border-gray-600 dark:text-white">
                                     <option value="low">Low</option>
                                     <option value="medium">Medium</option>
                                     <option value="high">High</option>
                             </div>
                         </div>
                         <div class="flex items-center">
+                            <input id="pinTask" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600">
+                            <label for="pinTask" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Pin this task</label>
                         </div>
                         <button type="submit" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 transition duration-200 flex items-center justify-center">
                             <i class="fas fa-plus-circle mr-2"></i> Add Task
                 </div>
                 <!-- Pinned Tasks Section -->
+                <div class="bg-white dark:bg-dark-100 rounded-lg shadow-md p-6 mb-6">
                     <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-xl font-semibold text-indigo-700 dark:text-indigo-400">
                             <i class="fas fa-thumbtack mr-2 text-red-500"></i> Pinned Tasks
                         </h2>
+                        <span id="pinnedCount" class="bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 text-xs font-medium px-2.5 py-0.5 rounded-full">0</span>
                     </div>
                     <div id="pinnedTasks" class="space-y-3">
                         <!-- Pinned tasks will appear here -->
+                        <div class="text-center text-gray-500 dark:text-gray-400 py-4">
                             No pinned tasks yet. Pin important tasks to see them here.
                         </div>
                     </div>
                 </div>
                 <!-- All Tasks Section -->
+                <div class="bg-white dark:bg-dark-100 rounded-lg shadow-md p-6">
                     <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-xl font-semibold text-indigo-700 dark:text-indigo-400">
                             <i class="fas fa-tasks mr-2"></i> All Tasks
                         </h2>
                         <div class="flex space-x-2">
                             <button id="filterAll" class="text-xs bg-indigo-600 text-white px-3 py-1 rounded-full">All</button>
+                            <button id="filterPending" class="text-xs bg-gray-200 dark:bg-dark-200 text-gray-700 dark:text-gray-300 px-3 py-1 rounded-full">Pending</button>
+                            <button id="filterCompleted" class="text-xs bg-gray-200 dark:bg-dark-200 text-gray-700 dark:text-gray-300 px-3 py-1 rounded-full">Completed</button>
                         </div>
                     </div>
                     <div id="allTasks" class="space-y-3">
             <!-- Calendar and Stats Section -->
             <div class="lg:col-span-1">
+                <div class="bg-white dark:bg-dark-100 rounded-lg shadow-md p-6 mb-6">
                     <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-xl font-semibold text-indigo-700 dark:text-indigo-400">
                             <i class="fas fa-calendar-alt mr-2"></i> Schedule
                         </h2>
                         <div class="flex space-x-2">
+                            <button id="prevMonth" class="text-gray-600 dark:text-gray-300 hover:text-indigo-700 dark:hover:text-indigo-400">
                                 <i class="fas fa-chevron-left"></i>
                             </button>
+                            <span id="currentMonth" class="font-medium dark:text-gray-300">June 2023</span>
+                            <button id="nextMonth" class="text-gray-600 dark:text-gray-300 hover:text-indigo-700 dark:hover:text-indigo-400">
                                 <i class="fas fa-chevron-right"></i>
                             </button>
                         </div>
                     </div>
                     <div class="grid grid-cols-7 gap-1 mb-2">
+                        <div class="text-center text-xs font-medium text-gray-500 dark:text-gray-400">Sun</div>
+                        <div class="text-center text-xs font-medium text-gray-500 dark:text-gray-400">Mon</div>
+                        <div class="text-center text-xs font-medium text-gray-500 dark:text-gray-400">Tue</div>
+                        <div class="text-center text-xs font-medium text-gray-500 dark:text-gray-400">Wed</div>
+                        <div class="text-center text-xs font-medium text-gray-500 dark:text-gray-400">Thu</div>
+                        <div class="text-center text-xs font-medium text-gray-500 dark:text-gray-400">Fri</div>
+                        <div class="text-center text-xs font-medium text-gray-500 dark:text-gray-400">Sat</div>
                     </div>
                     <div id="calendarDays" class="grid grid-cols-7 gap-1">
                         <!-- Calendar days will be generated here -->
                 </div>
                 <!-- Upcoming Tasks Preview -->
+                <div class="bg-white dark:bg-dark-100 rounded-lg shadow-md p-6 mb-6">
+                    <h2 class="text-xl font-semibold mb-4 text-indigo-700 dark:text-indigo-400">
                         <i class="fas fa-calendar-day mr-2"></i> Upcoming Tasks
                     </h2>
                     <div id="upcomingTasks" class="space-y-3">
                 </div>
                 <!-- Stats Section -->
+                <div class="bg-white dark:bg-dark-100 rounded-lg shadow-md p-6">
+                    <h2 class="text-xl font-semibold mb-4 text-indigo-700 dark:text-indigo-400">
                         <i class="fas fa-chart-pie mr-2"></i> Productivity Stats
                     </h2>
                     <div class="space-y-4">
                         <div>
                             <div class="flex justify-between mb-1">
+                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Tasks Completed</span>
+                                <span id="completedPercentage" class="text-sm font-medium text-indigo-700 dark:text-indigo-400">0%</span>
                             </div>
+                            <div class="w-full bg-gray-200 dark:bg-dark-200 rounded-full h-2.5">
                                 <div id="completedProgress" class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
                             </div>
                         </div>
                         <div>
                             <div class="flex justify-between mb-1">
+                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">High Priority Tasks</span>
+                                <span id="highPriorityCount" class="text-sm font-medium text-red-600 dark:text-red-400">0</span>
                             </div>
                         </div>
                         <div>
                             <div class="flex justify-between mb-1">
+                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Pending Tasks</span>
+                                <span id="pendingTasksCount" class="text-sm font-medium text-yellow-600 dark:text-yellow-400">0</span>
                             </div>
                         </div>
                         <div>
                             <div class="flex justify-between mb-1">
+                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Total Tasks</span>
+                                <span id="totalTasksCount" class="text-sm font-medium text-indigo-700 dark:text-indigo-400">0</span>
                             </div>
                         </div>
                     </div>
     <!-- Task Details Modal -->
     <div id="taskModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white dark:bg-dark-100 rounded-lg shadow-xl p-6 w-full max-w-md">
             <div class="flex justify-between items-center mb-4">
+                <h3 id="modalTaskTitle" class="text-xl font-semibold text-indigo-700 dark:text-indigo-400"></h3>
+                <button id="closeModal" class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-100">
                     <i class="fas fa-times"></i>
                 </button>
             </div>
+            <div id="modalTaskDetails" class="space-y-3 dark:text-gray-300">
                 <!-- Task details will appear here -->
             </div>
             <div class="mt-4 flex justify-end space-x-3">
             const modalTaskDetails = document.getElementById('modalTaskDetails');
             const completeTaskBtn = document.getElementById('completeTaskBtn');
             const deleteTaskBtn = document.getElementById('deleteTaskBtn');
+            const darkModeToggle = document.getElementById('darkModeToggle');
             // Stats elements
             const completedPercentage = document.getElementById('completedPercentage');
             renderCalendar();
             renderUpcomingTasks();
+            // Check for saved dark mode preference
+            if (localStorage.getItem('darkMode') === 'enabled') {
+                document.documentElement.classList.add('dark');
+                darkModeToggle.querySelector('.fa-moon').classList.add('hidden');
+                darkModeToggle.querySelector('.fa-sun').classList.remove('hidden');
+            }
             // Event listeners
             taskForm.addEventListener('submit', addTask);
             prevMonthBtn.addEventListener('click', () => {
                 renderCalendar();
             });
             filterAll.addEventListener('click', () => {
+                filterAll.classList.remove('bg-gray-200', 'text-gray-700', 'dark:bg-dark-200', 'dark:text-gray-300');
                 filterAll.classList.add('bg-indigo-600', 'text-white');
                 filterPending.classList.remove('bg-indigo-600', 'text-white');
+                filterPending.classList.add('bg-gray-200', 'text-gray-700', 'dark:bg-dark-200', 'dark:text-gray-300');
                 filterCompleted.classList.remove('bg-indigo-600', 'text-white');
+                filterCompleted.classList.add('bg-gray-200', 'text-gray-700', 'dark:bg-dark-200', 'dark:text-gray-300');
                 renderAllTasks();
             });
             filterPending.addEventListener('click', () => {
+                filterPending.classList.remove('bg-gray-200', 'text-gray-700', 'dark:bg-dark-200', 'dark:text-gray-300');
                 filterPending.classList.add('bg-indigo-600', 'text-white');
                 filterAll.classList.remove('bg-indigo-600', 'text-white');
+                filterAll.classList.add('bg-gray-200', 'text-gray-700', 'dark:bg-dark-200', 'dark:text-gray-300');
                 filterCompleted.classList.remove('bg-indigo-600', 'text-white');
+                filterCompleted.classList.add('bg-gray-200', 'text-gray-700', 'dark:bg-dark-200', 'dark:text-gray-300');
                 renderAllTasks('pending');
             });
             filterCompleted.addEventListener('click', () => {
+                filterCompleted.classList.remove('bg-gray-200', 'text-gray-700', 'dark:bg-dark-200', 'dark:text-gray-300');
                 filterCompleted.classList.add('bg-indigo-600', 'text-white');
                 filterAll.classList.remove('bg-indigo-600', 'text-white');
+                filterAll.classList.add('bg-gray-200', 'text-gray-700', 'dark:bg-dark-200', 'dark:text-gray-300');
                 filterPending.classList.remove('bg-indigo-600', 'text-white');
+                filterPending.classList.add('bg-gray-200', 'text-gray-700', 'dark:bg-dark-200', 'dark:text-gray-300');
                 renderAllTasks('completed');
             });
             closeModal.addEventListener('click', () => {
                     taskModal.classList.add('hidden');
                 }
             });
+            darkModeToggle.addEventListener('click', toggleDarkMode);
             // Functions
+            function toggleDarkMode() {
+                const html = document.documentElement;
+                html.classList.toggle('dark');
+                const isDark = html.classList.contains('dark');
+                localStorage.setItem('darkMode', isDark ? 'enabled' : 'disabled');
+                const moonIcon = darkModeToggle.querySelector('.fa-moon');
+                const sunIcon = darkModeToggle.querySelector('.fa-sun');
+                if (isDark) {
+                    moonIcon.classList.add('hidden');
+                    sunIcon.classList.remove('hidden');
+                } else {
+                    moonIcon.classList.remove('hidden');
+                    sunIcon.classList.add('hidden');
+                }
+            }
             function addTask(e) {
                 e.preventDefault();
                 if (filteredTasks.length === 0) {
                     allTasksContainer.innerHTML = `
+                        <div class="text-center text-gray-500 dark:text-gray-400 py-4">
                             No tasks found. Add a new task to get started!
                         </div>
                     `;
                 if (pinnedTasks.length === 0) {
                     pinnedTasksContainer.innerHTML = `
+                        <div class="text-center text-gray-500 dark:text-gray-400 py-4">
                             No pinned tasks yet. Pin important tasks to see them here.
                         </div>
                     `;
                 if (upcomingTasks.length === 0) {
                     upcomingTasksContainer.innerHTML = `
+                        <div class="text-center text-gray-500 dark:text-gray-400 py-4">
                             No upcoming tasks in the next 7 days.
                         </div>
                     `;
                     const dueDateStr = dueDate.toLocaleDateString('en-US', options);
                     const taskElement = document.createElement('div');
+                    taskElement.className = `bg-white dark:bg-dark-200 rounded-md shadow-sm p-3 border-l-4 priority-${task.priority} cursor-pointer hover:bg-gray-50 dark:hover:bg-dark-300`;
                     taskElement.dataset.id = task.id;
                     taskElement.addEventListener('click', () => showTaskDetails(task.id));
                     taskElement.innerHTML = `
                         <div class="flex justify-between items-start">
                             <div>
+                                <h3 class="text-sm font-medium dark:text-gray-300">${task.title}</h3>
+                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">${dueDateStr}</p>
                             </div>
+                            <span class="text-xs font-medium ${task.priority === 'high' ? 'text-red-500 dark:text-red-400' : task.priority === 'medium' ? 'text-yellow-500 dark:text-yellow-400' : 'text-green-500 dark:text-green-400'}">
                                 ${task.priority.charAt(0).toUpperCase() + task.priority.slice(1)}
                             </span>
                         </div>
                 const isDueToday = dueDate && dueDate.getTime() === today.getTime() && !task.completed;
                 const taskElement = document.createElement('div');
+                taskElement.className = `task-item bg-white dark:bg-dark-200 rounded-md shadow-sm p-4 border-l-4 priority-${task.priority} ${isOverdue ? 'pending-task' : ''} ${task.completed ? 'opacity-70' : ''} cursor-pointer`;
                 taskElement.dataset.id = task.id;
                 taskElement.addEventListener('click', () => showTaskDetails(task.id));
                         dueDateText = `<span class="text-red-500 font-medium">${daysOverdue} day${daysOverdue !== 1 ? 's' : ''} overdue</span>`;
                     } else {
                         const options = { month: 'short', day: 'numeric' };
+                        dueDateText = `<span class="text-gray-600 dark:text-gray-400">Due: ${new Date(task.dueDate).toLocaleDateString('en-US', options)}</span>`;
                     }
                 }
                 taskElement.innerHTML = `
                     <div class="flex justify-between items-start">
                         <div class="flex items-start">
+                            <input type="checkbox" ${task.completed ? 'checked' : ''} class="mt-1 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600 task-completed">
                             <div class="ml-3">
+                                <h3 class="text-sm font-medium ${task.completed ? 'line-through text-gray-500 dark:text-gray-400' : 'text-gray-900 dark:text-gray-300'}">${task.title}</h3>
+                                ${task.description ? `<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">${task.description}</p>` : ''}
                                 ${dueDateText ? `<p class="text-xs mt-1">${dueDateText}</p>` : ''}
                             </div>
                         </div>
                 modalTaskDetails.innerHTML = `
                     <div class="flex justify-between">
                         <div>
+                            <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Status</span>
+                            <p class="mt-1 dark:text-gray-300">${task.completed ? 'Completed' : 'Pending'}</p>
                         </div>
                         <div>
+                            <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Priority</span>
+                            <p class="mt-1 ${task.priority === 'high' ? 'text-red-500 dark:text-red-400' : task.priority === 'medium' ? 'text-yellow-500 dark:text-yellow-400' : 'text-green-500 dark:text-green-400'}">
                                 ${task.priority.charAt(0).toUpperCase() + task.priority.slice(1)}
                             </p>
                         </div>
                     </div>
                     <div>
+                        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Due Date</span>
+                        <p class="mt-1 dark:text-gray-300">${dueDateText}</p>
                     </div>
                     <div>
+                        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Created</span>
+                        <p class="mt-1 dark:text-gray-300">${new Date(task.createdAt).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' })}</p>
                     </div>
                     ${task.description ? `
                     <div>
+                        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Description</span>
+                        <p class="mt-1 dark:text-gray-300">${task.description}</p>
                     </div>
                     ` : ''}
                 `;
                 // Create day elements for previous month
                 for (let i = 0; i < firstDay; i++) {
                     const dayElement = document.createElement('div');
+                    dayElement.className = 'text-center text-gray-400 dark:text-gray-500 text-sm py-1';
                     dayElement.textContent = prevMonthDays - firstDay + i + 1;
                     calendarDays.appendChild(dayElement);
                 }
                     const isToday = dayDate.getTime() === today.getTime();
                     const dayElement = document.createElement('div');
+                    dayElement.className = `calendar-day text-center text-sm py-1 rounded-md cursor-pointer ${isToday ? 'today font-bold' : ''} ${dayTasks.length > 0 ? 'has-tasks' : ''} dark:text-gray-300`;
                     dayElement.textContent = i;
                     dayElement.dataset.date = dayDate.toISOString().split('T')[0];
                         // If more than 3 tasks, show a + indicator
                         if (dayTasks.length > 3) {
                             const more = document.createElement('span');
+                            more.className = 'text-xs text-gray-500 dark:text-gray-400';
                             more.textContent = `+${dayTasks.length - 3}`;
                             indicators.appendChild(more);
                         }
                 // Add days from next month if needed
                 for (let i = 1; i <= remainingDays; i++) {
                     const dayElement = document.createElement('div');
+                    dayElement.className = 'text-center text-gray-400 dark:text-gray-500 text-sm py-1';
                     dayElement.textContent = i;
                     calendarDays.appendChild(dayElement);
                 }
                 let tasksHTML = `
                     <div class="mb-4">
+                        <h3 class="text-lg font-semibold text-indigo-700 dark:text-indigo-400">Tasks for ${dateStr}</h3>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">${tasksForDate.length} task${tasksForDate.length !== 1 ? 's' : ''}</p>
                     </div>
                     <div class="space-y-3 max-h-96 overflow-y-auto">
                 `;
                 tasksForDate.forEach(task => {
                     tasksHTML += `
+                        <div class="task-item bg-white dark:bg-dark-200 rounded-md shadow-sm p-3 border-l-4 priority-${task.priority} ${task.completed ? 'opacity-70' : ''}">
                             <div class="flex justify-between items-start">
                                 <div class="flex items-start">
+                                    <input type="checkbox" ${task.completed ? 'checked' : ''} class="mt-1 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600 task-completed">
                                     <div class="ml-3">
+                                        <h3 class="text-sm font-medium ${task.completed ? 'line-through text-gray-500 dark:text-gray-400' : 'text-gray-900 dark:text-gray-300'}">${task.title}</h3>
+                                        ${task.description ? `<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">${task.description}</p>` : ''}
                                     </div>
                                 </div>
                                 <div class="flex space-x-2">
                 const modal = document.createElement('div');
                 modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
                 modal.innerHTML = `
+                    <div class="bg-white dark:bg-dark-100 rounded-lg shadow-xl p-6 w-full max-w-md">
                         <div class="flex justify-between items-center mb-4">
+                            <h3 class="text-xl font-semibold text-indigo-700 dark:text-indigo-400">Tasks for ${dateStr}</h3>
+                            <button class="close-modal text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-100">
                                 <i class="fas fa-times"></i>
                             </button>
                         </div>

prompts.txt CHANGED Viewed

@@ -1,2 +1,3 @@
 Make an advanced task manager and schedule planner. Make sure to add a section where important tasks can be pinned. There should be another section where pending tasks should be highlighted. Populate the calendar with a few random tasks in the beginning.
-Now enter a few tasks randomly. Add a calendar to show the preview of those added tasks.

 Make an advanced task manager and schedule planner. Make sure to add a section where important tasks can be pinned. There should be another section where pending tasks should be highlighted. Populate the calendar with a few random tasks in the beginning.
+Now enter a few tasks randomly. Add a calendar to show the preview of those added tasks.
+Add a dark mode button