Core Idea: ${data.coreIdea}

The Opening

Hook

${data.hook.replace(/\n/g, '
')}

Introduction

${data.introduceIdea.replace(/\n/g, '
')}

The Body

${mainPointsHTML}

The Closing

Recap

${data.recap.replace(/\n/g, '
')}

Call to Action

${data.callToAction.replace(/\n/g, '
')}

Closing Statement

${data.closingStatement}

`; previewContainer.innerHTML = outlineHTML; } function showMessage() { messageBox.classList.remove('opacity-0', 'translate-y-10'); messageBox.classList.add('opacity-100', 'translate-y-0'); setTimeout(() => { messageBox.classList.remove('opacity-100', 'translate-y-0'); messageBox.classList.add('opacity-0', 'translate-y-10'); }, 2000); } // --- PDF Generation --- function generateOutlinePdf() { const { jsPDF } = window.jspdf; const pdf = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' }); const data = getFormData(); const pageW = pdf.internal.pageSize.getWidth(); const margin = 15; const contentWidth = pageW - (margin * 2); let y = margin; const lineH = 6; const checkPageBreak = (neededHeight = 20) => { if (y + neededHeight > pdf.internal.pageSize.getHeight() - margin) { pdf.addPage(); y = margin; } }; const addText = (text, options = {}) => { const { size = 10, style = 'normal', color = '#374151', indent = 0, spacing = 1 } = options; checkPageBreak(); pdf.setFontSize(size); pdf.setFont(undefined, style); pdf.setTextColor(color); const splitText = pdf.splitTextToSize(text, contentWidth - indent); pdf.text(splitText, margin + indent, y); y += (splitText.length * lineH * 0.8) + (lineH * spacing); }; const addSectionHeader = (text) => { y += lineH * 1.5; checkPageBreak(25); addText(text, { size: 14, style: 'bold', color: '#b91c1c', spacing: 1.5 }); pdf.setDrawColor('#fecaca'); // red-200 pdf.setLineWidth(0.2); pdf.line(margin, y - (lineH * 1.2), pageW - margin, y - (lineH * 1.2)); }; // --- Build PDF Document --- // Header pdf.setFillColor('#111827'); // gray-900 pdf.rect(0, 0, pageW, 30, 'F'); addText(data.title, { size: 18, color: '#FFFFFF', style: 'bold', indent: (pageW / 2) - margin, spacing: 0.5 }); pdf.text('TED Talk Outline', pageW / 2, 22, { align: 'center'}); y = 38; // Core Idea addText('Core Idea:', { size: 11, style: 'bold', color: '#1f2937' }); addText(data.coreIdea, { size: 11 }); // Sections addSectionHeader('The Opening'); addText('Hook:', { style: 'bold' }); addText(data.hook); addText('Introduction:', { style: 'bold', spacing: 0.5 }); addText(data.introduceIdea); addSectionHeader('The Body'); data.mainPoints.forEach((point, index) => { if (point.statement) { y += lineH; addText(`Main Point ${index + 1}: ${point.statement}`, { style: 'bold' }); if (point.evidence) { addText(point.evidence, { indent: 5 }); } } }); addSectionHeader('The Closing'); addText('Recap:', { style: 'bold' }); addText(data.recap); addText('Call to Action:', { style: 'bold' }); addText(data.callToAction); addText('Closing Statement:', { style: 'bold' }); addText(data.closingStatement, { style: 'bold' }); const fileName = `${data.title.replace(/\s+/g, '_').toLowerCase()}_outline.pdf`; pdf.save(fileName); } // --- Event Listeners --- tabs.forEach(tab => tab.addEventListener('click', () => goToTab(parseInt(tab.dataset.tab)))); prevButton.addEventListener('click', () => goToTab(currentTab - 1)); nextButton.addEventListener('click', () => goToTab(currentTab + 1)); copyButton.addEventListener('click', () => { const previewContainer = document.getElementById('outline-preview-container'); if (previewContainer) { const textToCopy = previewContainer.innerText; const textArea = document.createElement("textarea"); textArea.value = textToCopy; textArea.style.position = "fixed"; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { document.execCommand('copy'); showMessage(); } catch (err) { console.error('Copy failed:', err); } document.body.removeChild(textArea); } }); pdfDownloadButton.addEventListener('click', generateOutlinePdf); // Initialize the UI updateTabUI(); });