Congratulations! You have successfully completed the task. Here are some final tips for success or maintenance.

`; guideHTML += `

Troubleshooting

• Common Problem A: [Solution]
• Common Problem B: [Solution]

`; guideContainer.innerHTML = guideHTML; outputTitle.textContent = `Guide for: ${topic}`; downloadPdfBtn.classList.remove('hidden'); }; const downloadPdf = () => { const { jsPDF } = window.jspdf; const doc = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' }); const mainTitle = topicInput.value.trim(); const audience = audienceInput.value.trim(); const generationDate = new Date().toLocaleDateString('en-US'); const guideContent = getEl('generated-guide-container'); const pageWidth = doc.internal.pageSize.getWidth(); const margin = 15; // --- PDF Template: Instruction Manual --- // Header doc.setFont('helvetica', 'bold'); doc.setFontSize(16); doc.setTextColor(255, 255, 255); doc.setFillColor(79, 70, 229); // Indigo-600 doc.rect(margin, 10, pageWidth - (margin * 2), 15, 'F'); doc.text("INSTRUCTION GUIDE", margin + 5, 20); doc.setFontSize(10); doc.setTextColor(100, 116, 139); // Slate-500 doc.text(generationDate, pageWidth - margin - 5, 20, { align: 'right' }); // Main Title doc.setFont('helvetica', 'bold'); doc.setFontSize(14); doc.setTextColor(30, 41, 59); // Slate-800 const splitTitle = doc.splitTextToSize(mainTitle, pageWidth - (margin * 2)); doc.text(splitTitle, margin, 38); let startY = 38 + (splitTitle.length * 7); // Use html2canvas to render the guide content html2canvas(guideContent, { scale: 2, useCORS: true }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const imgProps = doc.getImageProperties(imgData); const pdfWidth = pageWidth - (margin * 2); const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width; doc.addImage(imgData, 'PNG', margin, startY, pdfWidth, pdfHeight); // Footer const pageCount = doc.internal.getNumberOfPages(); for (let i = 1; i <= pageCount; i++) { doc.setPage(i); doc.setFontSize(9); doc.setTextColor(156, 163, 175); doc.text( `Page ${i} of ${pageCount}`, pageWidth / 2, 287, { align: 'center' } ); } doc.save(`How-To-Guide_${mainTitle.replace(/\s/g, '_')}.pdf`); }).catch(err => { console.error("Error generating PDF with html2canvas:", err); alert("Could not generate PDF. See console for details."); }); }; const showTab = (tabNum) => { currentTab = tabNum; tabButtons.forEach(btn => btn.classList.toggle('active', parseInt(btn.dataset.tab) === tabNum)); tabPanes.forEach(pane => pane.classList.toggle('hidden', parseInt(pane.id.split('-')[2]) !== tabNum)); prevBtn.classList.toggle('invisible', currentTab === 1); nextBtn.textContent = currentTab === 1 ? 'Generate Guide' : 'Generate Again'; }; // --- Event Listeners --- tabButtons.forEach(button => button.addEventListener('click', () => { const tabNum = parseInt(button.dataset.tab); if (tabNum === 2 && currentTab === 1) generateGuide(); showTab(tabNum); })); prevBtn.addEventListener('click', () => { if (currentTab > 1) showTab(currentTab - 1) }); nextBtn.addEventListener('click', () => { if (currentTab === 1) { generateGuide(); showTab(2); } else { generateGuide(); } }); downloadPdfBtn.addEventListener('click', downloadPdf); // --- Initial Setup --- showTab(1); });