Digital Detox Planner Digital Detox Planner 1. Setup 2. Activities 3. Your Plan Define Your Detox Start by setting the basic parameters for your digital detox. Your Name (for PDF) Detox Duration 1 Day (Quick Reset) 3 Days (Weekend Challenge) 7 Days (Full Week) 14 Days (Two Weeks) Primary Goal Choose Your Replacement Activities Select activities you'll do instead of using your devices. Aim for a healthy mix! Your personalized plan will be displayed here once generated. Download Your Plan as PDF Previous Next Generate Plan Duration: ${duration} Your Offline Activities Toolkit ${activitiesHtmlForPdf} Plan generated on ${generationDate}. You've got this! `; pdfContainer.innerHTML = pdfContent; document.body.appendChild(pdfContainer); window.html2canvas(pdfContainer, { scale: 2 }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const { jsPDF } = window.jspdf; const pdf = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const imgWidth = pdfWidth; const imgHeight = canvas.height * imgWidth / canvas.width; pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight); pdf.save(`Digital-Detox-Plan-${name.replace(/\s/g, '_')}.pdf`); document.body.removeChild(pdfContainer); }).catch(err => { console.error("PDF generation error:", err); if (document.body.contains(pdfContainer)) { document.body.removeChild(pdfContainer); } }); }; initialize(); }); // --- Global Tab Switching Logic --- function switchTab(tabId) { const tabs = ['setup', 'activities', 'plan']; const buttons = { next: document.getElementById('next-btn'), prev: document.getElementById('prev-btn'), generate: document.getElementById('generate-plan-btn') }; tabs.forEach(id => { const tabContent = document.getElementById(`${id}-tab`); const tabButton = document.getElementById(`tab-${id}-btn`); if (id === tabId) { tabContent.style.display = 'block'; tabButton.classList.add('active'); } else { tabContent.style.display = 'none'; tabButton.classList.remove('active'); } }); // Handle button visibility and state buttons.prev.disabled = (tabId === 'setup'); buttons.next.style.display = (tabId === 'activities' || tabId === 'plan') ? 'none' : 'inline-block'; buttons.generate.style.display = (tabId === 'activities') ? 'inline-block' : 'none'; if (tabId === 'plan') { document.getElementById('tab-plan-btn').disabled = false; } } function navigateTabs(direction) { const currentActive = document.querySelector('.tab-btn.active'); const tabs = ['setup', 'activities', 'plan']; let currentIndex = tabs.findIndex(t => `tab-${t}-btn` === currentActive.id); if (direction === 'next' && currentIndex < tabs.length - 1) { switchTab(tabs[currentIndex + 1]); } else if (direction === 'prev' && currentIndex > 0) { switchTab(tabs[currentIndex - 1]); } }