Phase not found.

'; mainTitle.textContent = 'Error'; return; } mainTitle.textContent = `${phaseKey}: ${phaseData.title}`; contentArea.innerHTML = ''; // Clear previous content const intro = document.createElement('p'); intro.className = 'mb-6 text-gray-600 italic'; intro.textContent = `This phase focuses on ${phaseData.title.toLowerCase()}. Review and check off the items below as you complete them.`; contentArea.appendChild(intro); // Progress Bar const progressWrapper = document.createElement('div'); progressWrapper.className = 'mb-6'; progressWrapper.innerHTML = ` `; contentArea.appendChild(progressWrapper); phaseData.items.forEach(categoryItem => { const categoryDiv = document.createElement('div'); categoryDiv.className = 'mb-5'; const h3 = document.createElement('h3'); h3.textContent = categoryItem.category; h3.className = 'font-semibold text-lg text-amber-700 mb-2 border-b border-amber-200 pb-1'; categoryDiv.appendChild(h3); const ul = document.createElement('ul'); ul.className = 'space-y-2 pl-2'; categoryItem.tasks.forEach((task, index) => { const li = document.createElement('li'); const label = document.createElement('label'); const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.className = 'custom-checkbox'; const uniqueId = `${phaseKey}-${categoryItem.category}-${index}`; checkbox.id = uniqueId; checkbox.checked = checklistStates[uniqueId] || false; // Restore state checkbox.addEventListener('change', (e) => handleCheckboxChange(e, phaseKey)); const span = document.createElement('span'); span.textContent = task; span.className = 'text-gray-800 text-sm flex-grow'; label.htmlFor = uniqueId; label.appendChild(checkbox); label.appendChild(span); if (checkbox.checked) { label.classList.add('checked'); } li.appendChild(label); ul.appendChild(li); }); categoryDiv.appendChild(ul); contentArea.appendChild(categoryDiv); }); updateProgress(phaseKey); // Update progress on initial load } function handleCheckboxChange(event, phaseKey) { const checkbox = event.target; const label = checkbox.closest('label'); const uniqueId = checkbox.id; checklistStates[uniqueId] = checkbox.checked; // Save state if (checkbox.checked) { label.classList.add('checked'); } else { label.classList.remove('checked'); } updateProgress(phaseKey); } function updateProgress(phaseKey) { const phaseContent = contentArea; // Check within the current content area const checkboxes = phaseContent.querySelectorAll('input[type="checkbox"]'); const checkedCount = phaseContent.querySelectorAll('input[type="checkbox"]:checked').length; const totalCount = checkboxes.length; const percentage = totalCount > 0 ? Math.round((checkedCount / totalCount) * 100) : 0; const progressBar = document.getElementById(`progress-bar-${phaseKey}`); const progressText = document.getElementById(`progress-text-${phaseKey}`); if (progressBar && progressText) { progressBar.style.width = `${percentage}%`; progressText.textContent = `${percentage}%`; } } // Initialize document.addEventListener('DOMContentLoaded', () => { generateNavigation(); // Display the first phase by default const firstPhaseKey = Object.keys(checklistData)[0]; displayPhaseContent(firstPhaseKey); const firstNavLink = navigationElement.querySelector('a'); if (firstNavLink) { firstNavLink.classList.add('active-nav-link'); } });