Add 1 files

index.html

@@ -207,7 +207,7 @@
                             <i class="fas fa-chart-pie text-green-500 mr-2"></i> Life Balance
                         </h3>
                         <div class="flex justify-center">
-                            <div class="relative w-40 h-40">
+                            <div class="relative w-40 height-full">
                                 <div id="balance-chart" class="w-full h-full"></div>
                                 <div class="absolute inset-0 flex items-center justify-center">
                                     <div class="text-center">
@@ -336,7 +336,7 @@
                     </div>
                     <div class="mb-4">
                         <label for="goal-title" class="block text-sm font-medium text-gray-700 mb-1">Goal Title</label>
-                        <input type="text" id="goal-title" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+        '               <input type="text" id="goal-title" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                     </div>
                     <div class="mb-4">
                         <label for="goal-description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
@@ -381,7 +381,7 @@
         <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 animate-fade-in">
             <div class="p-6">
                 <div class="flex items-center mb-6">
-                    <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 text-2xl mr-4">
+                    <div class="w-16 height-full rounded-full bg-blue-100 flex items-center justify-center text-blue-600 text-2xl mr-4">
                         <i class="fas fa-user"></i>
                     </div>
                     <div>
@@ -391,7 +391,7 @@
                 </div>
                 <div class="space-y-4 mb-6">
                     <div>
-                        <h4 class="text-sm font-semibound text-gray-700 mb-1">Categories</h4>
+                        <h4 class="text-sm font-semibold text-gray-700 mb-1">Categories</h4>
                         <p class="text-gray-600" id="categories-count">0</p>
                     </div>
                     <div>
@@ -426,7 +426,7 @@
                         <label class="block text-sm font-medium text-gray-700 mb-1">Your Data</label>
                         <textarea id="export-data" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" rows="5" readonly></textarea>
                     </div>
-                    <button id="download-export" class="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-710 transition">
+                    <button id="download-export" class="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
                         <i class="fas fa-download mr-2"></i> Download Backup
                     </button>
                 </div>
@@ -507,7 +507,7 @@
                 bgLight: 'bg-green-100',
                 text: 'text-green-800',
                 bg: 'bg-green-600',
-                hover: 'hover:bg-green-710',
+                hover: 'hover:bg-green-700',
                 border: 'border-green-500'
             },
             yellow: {
@@ -772,9 +772,9 @@
                         <div class="flex justify-between">
                             <h4 class="font-medium ${goal.completed ? 'text-gray-500 line-through' : 'text-gray-800'}">${goal.title}</h4>
                             <div class="flex items-center space-x-2">
-                                <button class="edit-goal text-gray-400 hover:text-${category.color}-600" data-id="${goal.id}">
+                                ${!goal.completed ? `<button class="edit-goal text-gray-400 hover:text-${category.color}-600" data-id="${goal.id}">
                                     <i class="fas fa-edit"></i>
-                                </button>
+                                </button>` : ''}
                                 <button class="toggle-goal text-${goal.completed ? 'gray-400' : category.color + '-600'}" data-id="${goal.id}">
                                     <i class="fas fa-${goal.completed ? 'undo' : 'check'}"></i>
                                 </button>
@@ -789,6 +789,31 @@
                     
                     goalsListContainer.appendChild(goalCard);
                 });
+
+                // Add event listeners for buttons
+                document.querySelectorAll('.edit-goal').forEach(btn => {
+                    btn.addEventListener('click', (e) => {
+                        e.stopPropagation();
+                        const goalId = btn.getAttribute('data-id');
+                        editGoal(goalId, categoryId);
+                    });
+                });
+                
+                document.querySelectorAll('.toggle-goal').forEach(btn => {
+                    btn.addEventListener('click', (e) => {
+                        e.stopPropagation();
+                        const goalId = btn.getAttribute('data-id');
+                        toggleGoalCompletion(goalId);
+                    });
+                });
+                
+                document.querySelectorAll('.delete-goal').forEach(btn => {
+                    btn.addEventListener('click', (e) => {
+                        e.stopPropagation();
+                        const goalId = btn.getAttribute('data-id');
+                        confirmDeleteGoal(goalId);
+                    });
+                });
             }
             
             // Add "Add Goal" button at the bottom
@@ -802,31 +827,6 @@
             
             goalsListContainer.appendChild(addGoalButton);
             
-            // Set up event listeners for the goal actions
-            document.querySelectorAll('.edit-goal').forEach(btn => {
-                btn.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    const goalId = btn.getAttribute('data-id');
-                    editGoal(goalId, categoryId);
-                });
-            });
-            
-            document.querySelectorAll('.toggle-goal').forEach(btn => {
-                btn.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    const goalId = btn.getAttribute('data-id');
-                    toggleGoalCompletion(goalId);
-                });
-            });
-            
-            document.querySelectorAll('.delete-goal').forEach(btn => {
-                btn.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    const goalId = btn.getAttribute('data-id');
-                    confirmDeleteGoal(goalId);
-                });
-            });
-            
             showModal(viewGoalsModal);
         }
 
@@ -878,9 +878,9 @@
                             <div class="flex justify-between">
                                 <h4 class="font-medium text-sm ${goal.completed ? 'text-gray-500 line-through' : 'text-gray-800'}">${goal.title}</h4>
                                 <div class="flex items-center space-x-2">
-                                    <button class="edit-goal text-gray-400 hover:text-${category.color}-600" data-id="${goal.id}">
+                                    ${!goal.completed ? `<button class="edit-goal text-gray-400 hover:text-${category.color}-600" data-id="${goal.id}">
                                         <i class="fas fa-edit text-sm"></i>
-                                    </button>
+                                    </button>` : ''}
                                     <button class="toggle-goal text-${goal.completed ? 'gray-400' : category.color + '-600'}" data-id="${goal.id}">
                                         <i class="fas fa-${goal.completed ? 'undo' : 'check'} text-sm"></i>
                                     </button>
@@ -892,15 +892,21 @@
                             ${goal.dueDate ? `<p class="text-xs mt-1 text-gray-500"><i class="fas fa-calendar-alt mr-1"></i> Due: ${formatDate(goal.dueDate)}</p>` : ''}
                         `;
                         
-                        goalCard.addEventListener('click', () => {
-                            // For small cards, just toggle completion on click
-                            toggleGoalCompletion(goal.id);
+                        goalCard.addEventListener('click', (e) => {
+                            // If clicking directly on the card and not on a button, toggle completion
+                            if (!e.target.closest('button')) {
+                                toggleGoalCompletion(goal.id);
+                            }
                         });
 
-                        goalCard.querySelector('.edit-goal').addEventListener('click', (e) => {
-                            e.stopPropagation();
-                            editGoal(goal.id, categoryId);
-                        });
+                        // Add event listeners for buttons
+                        const editBtn = goalCard.querySelector('.edit-goal');
+                        if (editBtn) {
+                            editBtn.addEventListener('click', (e) => {
+                                e.stopPropagation();
+                                editGoal(goal.id, categoryId);
+                            });
+                        }
 
                         goalCard.querySelector('.toggle-goal').addEventListener('click', (e) => {
                             e.stopPropagation();
@@ -962,12 +968,10 @@
             document.getElementById('goal-description').value = '';
             document.getElementById('goal-due-date').value = '';
             
-            // Reset the form event listener to add goal
-            const form = document.getElementById('add-goal-form');
-            form.removeEventListener('submit', handleUpdateGoalSubmit);
-            form.addEventListener('submit', handleAddGoalSubmit);
+            // Reset the form to add goal mode
+            addGoalForm.onsubmit = handleAddGoalSubmit;
             
-            const submitBtn = form.querySelector('button[type="submit"]');
+            const submitBtn = addGoalForm.querySelector('button[type="submit"]');
             submitBtn.textContent = 'Add Goal';
             
             showModal(addGoalModal);
@@ -1034,14 +1038,12 @@
             document.getElementById('goal-due-date').value = goal.dueDate || '';
             
             // Change the form to edit mode
-            const form = document.getElementById('add-goal-form');
-            form.removeEventListener('submit', handleAddGoalSubmit);
-            form.addEventListener('submit', (e) => {
+            addGoalForm.onsubmit = function(e) {
                 e.preventDefault();
                 updateGoal(goalId);
-            });
+            };
             
-            const submitBtn = form.querySelector('button[type="submit"]');
+            const submitBtn = addGoalForm.querySelector('button[type="submit"]');
             submitBtn.textContent = 'Update Goal';
             
             showModal(addGoalModal);
@@ -1070,8 +1072,15 @@
             closeModal(addGoalModal);
             
             // Refresh the goals view if it's open
-            if (viewGoalsModal.classList.contains('hidden')) return;
-            showAllGoals();
+            if (!viewGoalsModal.classList.contains('hidden')) {
+                const goalsListContainer = document.getElementById('goals-list-container');
+                const header = goalsListContainer.querySelector('h3');
+                if (header && header.textContent.includes('All Goals')) {
+                    showAllGoals();
+                } else {
+                    viewGoalsForCategory(goal.categoryId);
+                }
+            }
         }
 
         // Toggle goal completion status
@@ -1101,8 +1110,15 @@
             updateProfileStats();
             
             // Refresh the goals view if it's open
-            if (viewGoalsModal.classList.contains('hidden')) return;
-            viewGoalsForCategory(goal.categoryId);
+            if (!viewGoalsModal.classList.contains('hidden')) {
+                const goalsListContainer = document.getElementById('goals-list-container');
+                const header = goalsListContainer.querySelector('h3');
+                if (header && header.textContent.includes('All Goals')) {
+                    showAllGoals();
+                } else {
+                    viewGoalsForCategory(goal.categoryId);
+                }
+            }
         }
 
         // Confirm deletion of a goal
@@ -1117,7 +1133,7 @@
             confirmActionBtn.className = 'px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition';
             confirmActionBtn.textContent = 'Delete';
             
-            confirmActionBtn.onclick = () => {
+            confirmActionBtn.onclick = function() {
                 deleteGoal(goalId);
                 closeModal(confirmModal);
             };
@@ -1143,8 +1159,15 @@
             updateProfileStats();
             
             // Refresh the goals view if it's open
-            if (viewGoalsModal.classList.contains('hidden')) return;
-            viewGoalsForCategory(deletedGoal.categoryId);
+            if (!viewGoalsModal.classList.contains('hidden')) {
+                const goalsListContainer = document.getElementById('goals-list-container');
+                const header = goalsListContainer.querySelector('h3');
+                if (header && header.textContent.includes('All Goals')) {
+                    showAllGoals();
+                } else {
+                    viewGoalsForCategory(deletedGoal.categoryId);
+                }
+            }
         }
 
         // Confirm reset all data
@@ -1156,7 +1179,7 @@
             confirmActionBtn.className = 'px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition';
             confirmActionBtn.textContent = 'Reset Data';
             
-            confirmActionBtn.onclick = () => {
+            confirmActionBtn.onclick = function() {
                 resetAllData();
                 closeModal(confirmModal);
             };
@@ -1288,16 +1311,18 @@
             
             let cumulativePercent = 0;
             categoryProgress.forEach((cat, index) => {
-                const percent = (cat.progress / totalProgress) * 100;
+                const percent = (cat.progress / 100) * 360; // Convert to degrees
                 if (percent <= 0) return;
                 
-                const startAngle = cumulativePercent * 3.6;
+                const startAngle = cumulativePercent;
                 cumulativePercent += percent;
-                const endAngle = cumulativePercent * 3.6;
+                const endAngle = cumulativePercent;
                 
+                // Create path for each segment
                 const start = polarToCartesian(50, 50, 45, startAngle);
                 const end = polarToCartesian(50, 50, 45, endAngle);
-                const largeArcFlag = endAngle - startAngle <= 180 ? 0 : 1;
+                
+                const largeArcFlag = percent > 180 ? 1 : 0;
                 
                 const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
                 path.setAttribute("d", `M 50 50 L ${start.x} ${start.y} A 45 45 0 ${largeArcFlag} 1 ${end.x} ${end.y} Z`);
@@ -1308,6 +1333,14 @@
                 svg.appendChild(path);
             });
             
+            // Add white circle in the center
+            const centerCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+            centerCircle.setAttribute("cx", "50");
+            centerCircle.setAttribute("cy", "50");
+            centerCircle.setAttribute("r", "20");
+            centerCircle.setAttribute("fill", "#fff");
+            svg.appendChild(centerCircle);
+            
             balanceChart.appendChild(svg);
             
             // Update the legend
@@ -1317,7 +1350,7 @@
                 legendItem.className = 'flex items-center text-xs';
                 
                 const colorSwatch = document.createElement('div');
-                colorSwatch.className = `w-3 h-3 rounded-full mr-2 bg-${cat.color}-500`;
+                colorSwatch.className = `w-3 h-3 rounded-full mr-2 bg-${cat.color}-600`;
                 
                 const progressText = document.createElement('span');
                 progressText.className = 'font-medium';
@@ -1372,11 +1405,31 @@
             exportDataTextarea.value = dataStr;
             
             // Show export tab by default
-            exportTab.click();
+            showExportTab();
             
             showModal(dataModal);
         }
 
+        // Show export tab
+        function showExportTab() {
+            exportContent.classList.remove('hidden');
+            importContent.classList.add('hidden');
+            exportTab.classList.add('border-b-2', 'border-blue-600', 'text-blue-600');
+            exportTab.classList.remove('text-gray-500');
+            importTab.classList.remove('border-b-2', 'border-blue-600', 'text-blue-600');
+            importTab.classList.add('text-gray-500');
+        }
+
+        // Show import tab
+        function showImportTab() {
+            importContent.classList.remove('hidden');
+            exportContent.classList.add('hidden');
+            importTab.classList.add('border-b-2', 'border-blue-600', 'text-blue-600');
+            importTab.classList.remove('text-gray-500');
+            exportTab.classList.remove('border-b-2', 'border-blue-600', 'text-blue-600');
+            exportTab.classList.add('text-gray-500');
+        }
+
         // Download exported data
         function downloadExport() {
             const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(appData, null, 2));
@@ -1411,7 +1464,7 @@
                     confirmActionBtn.className = 'px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition';
                     confirmActionBtn.textContent = 'Import';
                     
-                    confirmActionBtn.onclick = () => {
+                    confirmActionBtn.onclick = function() {
                         appData = importedData;
                         saveData();
                         
@@ -1444,5 +1497,122 @@
             
             if (diffInSeconds < 60) return 'Just now';
             if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)} minutes ago`;
-            if
+            if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)} hours ago`;
+            if (diffInSeconds < 604800) return `${Math.floor(diffInSeconds / 86400)} days ago`;
+            if (diffInSeconds < 2592000) return `${Math.floor(diffInSeconds / 604800)} weeks ago`;
+            if (diffInSeconds < 31536000) return `${Math.floor(diffInSeconds / 2592000)} months ago`;
+            return `${Math.floor(diffInSeconds / 31536000)} years ago`;
+        }
+
+        // Show modal
+        function showModal(modal) {
+            modal.classList.remove('hidden');
+            modal.classList.add('flex');
+        }
+
+        // Close modal
+        function closeModal(modal) {
+            modal.classList.add('hidden');
+            modal.classList.remove('flex');
+        }
+
+        // Add category form handler
+        function handleAddCategorySubmit(e) {
+            e.preventDefault();
+            const name = document.getElementById('category-name').value.trim();
+            const icon = document.getElementById('category-icon').value;
+            const color = document.getElementById('category-color').value;
+            
+            if (!name) {
+                alert('Please enter a category name');
+                return;
+            }
+            
+            addCategory(name, icon, color);
+        }
+
+        // Add goal form handler
+        function handleAddGoalSubmit(e) {
+            e.preventDefault();
+            const categoryId = document.getElementById('goal-category').value;
+            const title = document.getElementById('goal-title').value.trim();
+            const description = document.getElementById('goal-description').value.trim();
+            const dueDate = document.getElementById('goal-due-date').value || null;
+            
+            if (!title) {
+                alert('Please enter a goal title');
+                return;
+            }
+            
+            addGoal(categoryId, title, description, dueDate);
+        }
+
+        // Event listeners
+        document.addEventListener('DOMContentLoaded', function() {
+            // Initialize the app
+            initApp();
+            
+            // Add form submit handlers
+            addCategoryForm.addEventListener('submit', handleAddCategorySubmit);
+            addGoalForm.addEventListener('submit', handleAddGoalSubmit);
+            
+            // Button click handlers
+            addCategoryBtn.addEventListener('click', showAddCategoryModal);
+            viewAllBtn.addEventListener('click', showAllGoals);
+            quickAddGoal.addEventListener('click', showAddGoalModal);
+            quickViewTasks.addEventListener('click', showAllGoals);
+            quickViewProgress.addEventListener('click', showAllGoals);
+            quickViewCalendar.addEventListener('click', showAllGoals);
+            profileBtn.addEventListener('click', function() {
+                updateProfileStats();
+                showModal(profileModal);
+            });
+            exportBtn.addEventListener('click', exportData);
+            importBtn.addEventListener('click', function() {
+                showModal(dataModal);
+                showImportTab();
+            });
+            fab.addEventListener('click', function() {
+                showAddGoalModal();
+            });
+            resetDataBtn.addEventListener('click', confirmResetData);
+            backupDataBtn.addEventListener('click', exportData);
+            
+            // Modal close buttons
+            document.getElementById('cancel-add-category').addEventListener('click', function() {
+                closeModal(addCategoryModal);
+            });
+            document.getElementById('cancel-add-goal').addEventListener('click', function() {
+                closeModal(addGoalModal);
+            });
+            document.getElementById('close-view-goals').addEventListener('click', function() {
+                closeModal(viewGoalsModal);
+            });
+            document.getElementById('close-profile').addEventListener('click', function() {
+                closeModal(profileModal);
+            });
+            document.getElementById('confirm-cancel').addEventListener('click', function() {
+                closeModal(confirmModal);
+            });
+            document.getElementById('cancel-import').addEventListener('click', function() {
+                closeModal(dataModal);
+            });
+            
+            // Data modal tabs
+            exportTab.addEventListener('click', showExportTab);
+            importTab.addEventListener('click', showImportTab);
+            
+            // Data modal buttons
+            document.getElementById('download-export').addEventListener('click', downloadExport);
+            document.getElementById('confirm-import').addEventListener('click', function() {
+                const file = importFileInput.files[0];
+                if (!file) {
+                    alert('Please select a file to import');
+                    return;
+                }
+                importData(file);
+            });
+        });
+    </script>
+</body>
 </html>