script.js

        document.addEventListener('DOMContentLoaded', function() {
            // Display current date
            const currentDateElement = document.getElementById('currentDate');
            const now = new Date();
            currentDateElement.textContent = now.toLocaleDateString('en-US', { 
                weekday: 'long', 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric' 
            });

            // Initialize routines and categories from localStorage
            let routines = JSON.parse(localStorage.getItem('routines')) || [];
            let categories = JSON.parse(localStorage.getItem('categories')) || [
                { name: 'Work', color: '#4a6fa5', class: 'work' },
                { name: 'Exercise', color: '#28a745', class: 'exercise' },
                { name: 'Personal', color: '#6f42c1', class: 'personal' },
                { name: 'Study', color: '#17a2b8', class: 'study' },
                { name: 'Meal', color: '#fd7e14', class: 'meal' }
            ];

            // Voice settings
            let voices = [];
            let voiceSettings = JSON.parse(localStorage.getItem('voiceSettings')) || {
                voice: '',
                rate: 1,
                pitch: 1
            };

            // DOM elements
            const routineForm = document.getElementById('routineForm');
            const routineCategorySelect = document.getElementById('routineCategory');
            const categoriesContainer = document.getElementById('categoriesContainer');
            const timelineContainer = document.getElementById('timelineContainer');
            const addCategoryBtn = document.getElementById('addCategoryBtn');
            const newCategoryName = document.getElementById('newCategoryName');
            const newCategoryColor = document.getElementById('newCategoryColor');
            const notification = document.getElementById('notification');
            const voiceSelect = document.getElementById('voiceSelect');
            const voiceRate = document.getElementById('voiceRate');
            const voicePitch = document.getElementById('voicePitch');
            const rateValue = document.getElementById('rateValue');
            const pitchValue = document.getElementById('pitchValue');
            const testVoiceBtn = document.getElementById('testVoiceBtn');

            // Initialize the app
            initCategories();
            renderRoutines();
            setupReminders();
            initVoiceSettings();
            loadVoices();

            // Load available voices
            function loadVoices() {
                // Chrome loads voices asynchronously
                speechSynthesis.onvoiceschanged = function() {
                    voices = speechSynthesis.getVoices();
                    populateVoiceList();
                };
                
                // Load voices immediately if already available
                voices = speechSynthesis.getVoices();
                if (voices.length > 0) {
                    populateVoiceList();
                }
            }

            // Populate voice selection dropdown
            function populateVoiceList() {
                voiceSelect.innerHTML = '<option value="">Default System Voice</option>';
                
                voices.forEach(voice => {
                    const option = document.createElement('option');
                    option.value = voice.name;
                    option.textContent = `${voice.name} (${voice.lang})`;
                    if (voice.name === voiceSettings.voice) {
                        option.selected = true;
                    }
                    voiceSelect.appendChild(option);
                });
            }

            // Initialize voice settings UI
            function initVoiceSettings() {
                voiceRate.value = voiceSettings.rate;
                voicePitch.value = voiceSettings.pitch;
                rateValue.textContent = voiceSettings.rate;
                pitchValue.textContent = voiceSettings.pitch;
                
                // Event listeners for voice settings
                voiceSelect.addEventListener('change', function() {
                    voiceSettings.voice = this.value;
                    saveVoiceSettings();
                });
                
                voiceRate.addEventListener('input', function() {
                    voiceSettings.rate = parseFloat(this.value);
                    rateValue.textContent = this.value;
                    saveVoiceSettings();
                });
                
                voicePitch.addEventListener('input', function() {
                    voiceSettings.pitch = parseFloat(this.value);
                    pitchValue.textContent = this.value;
                    saveVoiceSettings();
                });
                
                testVoiceBtn.addEventListener('click', function() {
                    speak("This is a test of the voice reminder system.");
                });
            }

            // Save voice settings to localStorage
            function saveVoiceSettings() {
                localStorage.setItem('voiceSettings', JSON.stringify(voiceSettings));
            }

            // Speak text using the selected voice
            function speak(text) {
                if ('speechSynthesis' in window) {
                    const utterance = new SpeechSynthesisUtterance(text);
                    
                    // Apply voice settings
                    if (voiceSettings.voice) {
                        const selectedVoice = voices.find(voice => voice.name === voiceSettings.voice);
                        if (selectedVoice) {
                            utterance.voice = selectedVoice;
                        }
                    }
                    
                    utterance.rate = voiceSettings.rate;
                    utterance.pitch = voiceSettings.pitch;
                    
                    speechSynthesis.speak(utterance);
                } else {
                    showNotification('Text-to-speech not supported in this browser', 'error');
                }
            }

            // Form submission for new routine
            routineForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const title = document.getElementById('routineTitle').value;
                const time = document.getElementById('routineTime').value;
                const category = document.getElementById('routineCategory').value;
                const description = document.getElementById('routineDescription').value;
                const reminder = parseInt(document.getElementById('routineReminder').value) || 0;
                
                // Create new routine object
                const newRoutine = {
                    id: Date.now(),
                    title,
                    time,
                    category,
                    description,
                    reminder,
                    completed: false
                };
                
                // Add to routines array
                routines.push(newRoutine);
                
                // Save to localStorage
                localStorage.setItem('routines', JSON.stringify(routines));
                
                // Render the updated timeline
                renderRoutines();
                
                // Setup reminders for the new routine
                setupReminder(newRoutine);
                
                // Reset form
                routineForm.reset();
                
                // Show notification
                showNotification('Routine added successfully!');
            });

            // Add new category
            addCategoryBtn.addEventListener('click', function() {
                const name = newCategoryName.value.trim();
                const color = newCategoryColor.value;
                
                if (!name) {
                    showNotification('Please enter a category name', 'error');
                    return;
                }
                
                // Check if category already exists
                if (categories.some(cat => cat.name.toLowerCase() === name.toLowerCase())) {
                    showNotification('Category already exists', 'error');
                    return;
                }
                
                // Create a CSS class name
                const className = name.toLowerCase().replace(/\s+/g, '-');
                
                // Add new category
                const newCategory = {
                    name,
                    color,
                    class: className
                };
                
                categories.push(newCategory);
                localStorage.setItem('categories', JSON.stringify(categories));
                
                // Update UI
                initCategories();
                newCategoryName.value = '';
                
                showNotification('Category added successfully!');
            });

            // Initialize category select and display
            function initCategories() {
                // Clear existing options
                routineCategorySelect.innerHTML = '<option value="">Select a category</option>';
                
                // Add categories to select
                categories.forEach(category => {
                    const option = document.createElement('option');
                    option.value = category.name;
                    option.textContent = category.name;
                    routineCategorySelect.appendChild(option);
                });
                
                // Render category tags
                categoriesContainer.innerHTML = '';
                categories.forEach(category => {
                    const tag = document.createElement('span');
                    tag.className = 'category-tag';
                    tag.innerHTML = `
                        <span class="color-indicator" style="background-color: ${category.color}"></span>
                        ${category.name}
                        <span class="delete-category" data-name="${category.name}">&times;</span>
                    `;
                    categoriesContainer.appendChild(tag);
                });
                
                // Add event listeners to delete buttons
                document.querySelectorAll('.delete-category').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const categoryName = this.getAttribute('data-name');
                        
                        // Check if any routines use this category
                        const routinesUsingCategory = routines.filter(r => r.category === categoryName);
                        if (routinesUsingCategory.length > 0) {
                            showNotification(`Cannot delete category. ${routinesUsingCategory.length} routine(s) use it.`, 'error');
                            return;
                        }
                        
                        // Remove category
                        categories = categories.filter(cat => cat.name !== categoryName);
                        localStorage.setItem('categories', JSON.stringify(categories));
                        
                        // Update UI
                        initCategories();
                        showNotification('Category deleted successfully!');
                    });
                });
            }

            // Render all routines in the timeline
            function renderRoutines() {
                if (routines.length === 0) {
                    timelineContainer.innerHTML = `
                        <div class="empty-state">
                            <p>No routines added yet. Start by adding your first routine!</p>
                        </div>
                    `;
                    return;
                }
                
                // Sort routines by time
                routines.sort((a, b) => {
                    const timeA = a.time.split(':').map(Number);
                    const timeB = b.time.split(':').map(Number);
                    
                    if (timeA[0] !== timeB[0]) return timeA[0] - timeB[0];
                    return timeA[1] - timeB[1];
                });
                
                // Clear timeline
                timelineContainer.innerHTML = '<div class="timeline"></div>';
                const timelineElement = timelineContainer.querySelector('.timeline');
                
                // Add each routine to the timeline
                routines.forEach(routine => {
                    const category = categories.find(cat => cat.name === routine.category) || { 
                        class: 'work', 
                        color: '#4a6fa5' 
                    };
                    
                    const routineElement = document.createElement('div');
                    routineElement.className = 'timeline-item';
                    routineElement.dataset.id = routine.id;
                    routineElement.innerHTML = `
                        <div class="timeline-title">${routine.title}</div>
                        <div class="timeline-time">${formatTime(routine.time)}</div>
                        <div class="timeline-category ${category.class}">${routine.category}</div>
                        ${routine.description ? `<div class="timeline-description">${routine.description}</div>` : ''}
                        ${routine.reminder > 0 ? `<div class="timeline-reminder"><span>⏰</span> Reminder ${routine.reminder} minutes before</div>` : ''}
                        <div class="timeline-actions">
                            <button class="complete-btn ${routine.completed ? 'btn-success' : ''}">
                                ${routine.completed ? 'Completed' : 'Mark Complete'}
                            </button>
                            <button class="btn-danger delete-btn">Delete</button>
                        </div>
                    `;
                    
                    timelineElement.appendChild(routineElement);
                    
                    // Add event listeners to buttons
                    routineElement.querySelector('.complete-btn').addEventListener('click', function() {
                        toggleCompleteRoutine(routine.id);
                    });
                    
                    routineElement.querySelector('.delete-btn').addEventListener('click', function() {
                        deleteRoutine(routine.id);
                    });
                });
            }

            // Toggle routine completion status
            function toggleCompleteRoutine(id) {
                routines = routines.map(routine => {
                    if (routine.id === id) {
                        return { ...routine, completed: !routine.completed };
                    }
                    return routine;
                });
                
                localStorage.setItem('routines', JSON.stringify(routines));
                renderRoutines();
                
                const routine = routines.find(r => r.id === id);
                showNotification(routine.completed ? 'Routine marked as completed!' : 'Routine marked as incomplete');
            }

            // Delete a routine
            function deleteRoutine(id) {
                if (confirm('Are you sure you want to delete this routine?')) {
                    routines = routines.filter(routine => routine.id !== id);
                    localStorage.setItem('routines', JSON.stringify(routines));
                    renderRoutines();
                    showNotification('Routine deleted successfully!');
                }
            }

            // Setup reminders for all routines
            function setupReminders() {
                routines.forEach(routine => {
                    setupReminder(routine);
                });
            }

            // Setup reminder for a single routine
            function setupReminder(routine) {
                if (routine.reminder <= 0) return;
                
                // Clear any existing reminder for this routine
                clearReminder(routine.id);
                
                // Calculate reminder time
                const [hours, minutes] = routine.time.split(':').map(Number);
                const routineTime = new Date();
                routineTime.setHours(hours, minutes, 0, 0);
                
                const reminderTime = new Date(routineTime.getTime() - routine.reminder * 60000);
                
                // If reminder time is in the past, skip
                if (reminderTime < new Date()) return;
                
                // Set timeout for reminder
                const timeUntilReminder = reminderTime - new Date();
                const timeoutId = setTimeout(() => {
                    showNotification(`Reminder: "${routine.title}" at ${formatTime(routine.time)}`, 'reminder');
                    speak(`Reminder: ${routine.title} is scheduled for ${formatTime(routine.time)}`);
                }, timeUntilReminder);
                
                // Store timeout ID for cleanup
                routine.reminderTimeoutId = timeoutId;
            }

            // Clear a specific reminder
            function clearReminder(routineId) {
                const routine = routines.find(r => r.id === routineId);
                if (routine && routine.reminderTimeoutId) {
                    clearTimeout(routine.reminderTimeoutId);
                }
            }

            // Show notification
            function showNotification(message, type = 'success') {
                notification.textContent = message;
                notification.className = 'notification';
                
                // Set color based on type
                if (type === 'error') {
                    notification.style.backgroundColor = 'var(--danger-color)';
                } else if (type === 'reminder') {
                    notification.style.backgroundColor = 'var(--accent-color)';
                } else {
                    notification.style.backgroundColor = 'var(--success-color)';
                }
                
                // Show notification
                setTimeout(() => {
                    notification.classList.add('show');
                }, 10);
                
                // Hide after 3 seconds
                setTimeout(() => {
                    notification.classList.remove('show');
                }, 3000);
            }

            // Format time for display (e.g., "13:30" -> "1:30 PM")
            function formatTime(timeString) {
                const [hours, minutes] = timeString.split(':').map(Number);
                const period = hours >= 12 ? 'PM' : 'AM';
                const displayHours = hours % 12 || 12;
                return `${displayHours}:${minutes.toString().padStart(2, '0')} ${period}`;
            }
        });