Podcast Episode Outline Generator

Your Podcast Outline

Your outline will appear here.

Go to the "Episode Details" tab to enter your information and generate the outline.

Enter Episode Details

Fill in the details below. The more information you provide, the better your outline will be.

Outline Configuration

Customize the segments that appear in your generated outline. Changes are saved automatically.

${escapeHTML(data.cta)}

` : '

[No call to action listed]

'; break; case 'outro & music fade': html += `

Thank the guests and listeners. Tease the next episode.

`; break; default: html += `

...

`; // Placeholder for other segments } html += `
`; }); peogDashboardContent.innerHTML = html; peogPdfDownloadBtn.style.display = 'block'; } /** * Renders the editable list in the Config Tab */ function renderPeogConfigList() { peogConfigList.innerHTML = peogOutlineTemplate.map((segment, index) => `
`).join(''); } /** * Handles PDF download functionality (Spec C) */ async function downloadPeogPdf() { if (typeof jspdf === 'undefined' || typeof html2canvas === 'undefined') { alert('PDF libraries are still loading. Please try again in a moment.'); return; } const { jsPDF } = jspdf; const contentToPrint = peogContainer.querySelector('#peog-dashboard-content'); peogContainer.classList.add('peog-pdf-view'); try { const canvas = await html2canvas(contentToPrint, { scale: 2, useCORS: true, logging: false }); const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF('p', 'mm', 'a4'); const pdfWidth = pdf.internal.pageSize.getWidth(); const margin = 15; const contentWidth = pdfWidth - (margin * 2); const contentHeight = (canvas.height * contentWidth) / canvas.width; pdf.setFont("helvetica", "bold"); pdf.setFontSize(18); pdf.setTextColor(getComputedStyle(document.documentElement).getPropertyValue('--peog-primary-color').trim()); pdf.text("Podcast Episode Outline", margin, margin + 5); pdf.addImage(imgData, 'PNG', margin, margin + 15, contentWidth, contentHeight); pdf.save(`${peogInputs.episodeTitle.value || 'podcast'}_outline.pdf`); } catch (error) { console.error("PEOG PDF Error:", error); alert("An error occurred while generating the PDF."); } finally { peogContainer.classList.remove('peog-pdf-view'); } } // --- 4. UTILITY FUNCTIONS --- function escapeHTML(str) { if (typeof str !== 'string') return ''; return str.replace(/[&<>"']/g, m => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[m])); } // --- 5. EVENT BINDING (Spec IV.C) --- // Tab buttons peogTabButtons.forEach((button, index) => { button.addEventListener('click', () => showPeogTab(index)); }); // Navigation buttons peogNavNext.addEventListener('click', () => showPeogTab(currentPeogTab + 1)); peogNavPrev.addEventListener('click', () => showPeogTab(currentPeogTab - 1)); // Generate Outline button (Spec B.4.o) peogGenerateBtn.addEventListener('click', () => { renderPeogOutline(); showPeogTab(0); // Switch to outline tab }); // PDF Download button peogPdfDownloadBtn.addEventListener('click', downloadPeogPdf); // Config Tab event delegation peogConfigList.addEventListener('click', (e) => { if (e.target.classList.contains('peog-delete-segment')) { const index = parseInt(e.target.dataset.index, 10); peogOutlineTemplate.splice(index, 1); renderPeogConfigList(); } }); peogConfigList.addEventListener('input', (e) => { if (e.target.classList.contains('peog-config-item-input')) { const index = parseInt(e.target.dataset.index, 10); peogOutlineTemplate[index] = e.target.value; } }); peogConfigAddBtn.addEventListener('click', () => { const newSegment = peogConfigNewSegment.value.trim(); if (newSegment) { peogOutlineTemplate.push(newSegment); peogConfigNewSegment.value = ''; renderPeogConfigList(); } }); // --- 6. INITIALIZATION --- renderPeogConfigList(); showPeogTab(0); });
Scroll to Top