Digital Detox Planner

Digital Detox Planner

Define Your Detox

Start by setting the basic parameters for your digital detox.

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]); } }
Scroll to Top