${myth.synopsis}

Key Figures

The Protagonist

${myth.hero}

The Antagonist

${myth.antagonist}

Central Elements

Sacred Artifact: ${myth.object}

Key Location: ${myth.location}

Moral of the Story

${myth.moral}

`; const contentDiv = document.getElementById('generated-myth-content'); if (contentDiv) { contentDiv.innerHTML = mythHTML; lucide.createIcons(); } } tabs.forEach((tab, index) => tab.addEventListener('click', () => updateTabUI(index))); nextBtn.addEventListener('click', () => { if (currentTab < totalTabs - 1) { if (currentTab === totalTabs - 2) generateMyth(); updateTabUI(currentTab + 1); } }); prevBtn.addEventListener('click', () => { if (currentTab > 0) updateTabUI(currentTab - 1); }); downloadPdfBtn.addEventListener('click', () => { const { jsPDF } = window.jspdf; const doc = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' }); const getValue = id => document.getElementById(id)?.value.trim() || 'Not Provided'; const myth = { name: getValue('myth-name'), culture: getValue('myth-culture'), type: getValue('myth-type'), hero: getValue('figure-hero'), antagonist: getValue('figure-antagonist'), object: getValue('element-object'), location: getValue('element-location'), moral: getValue('narrative-moral'), synopsis: getValue('narrative-synopsis'), }; const pageW = doc.internal.pageSize.getWidth(); const pageH = doc.internal.pageSize.getHeight(); const margin = 18; const usableWidth = pageW - margin * 2; let y = 0; const indigoColor = '#4338CA'; const darkGrayColor = '#374151'; const lightGrayColor = '#6B7280'; const addFooter = () => { const pageCount = doc.internal.getNumberOfPages(); for (let i = 1; i <= pageCount; i++) { doc.setPage(i); doc.setFontSize(9); doc.setTextColor(lightGrayColor); doc.text(`The Legend of ${myth.name} | Page ${i}`, pageW / 2, pageH - 10, { align: 'center' }); } }; const checkPageBreak = (height) => { if (y + height >= pageH - margin) { doc.addPage(); y = margin; // Add decorative header to new page doc.setDrawColor(indigoColor); doc.setLineWidth(0.2); doc.line(margin, margin - 5, pageW - margin, margin - 5); } }; const addSectionHeader = (text) => { checkPageBreak(18); y += 10; doc.setFontSize(15); doc.setFont(undefined, 'bold'); doc.setTextColor(indigoColor); doc.text(text.toUpperCase(), pageW / 2, y, { align: 'center' }); y += 4; doc.setDrawColor(lightGrayColor); doc.setLineWidth(0.1); doc.line(margin + 30, y, pageW - margin - 30, y); y += 8; }; const addContent = (label, value) => { doc.setFontSize(11); doc.setFont(undefined, 'bold'); doc.setTextColor(darkGrayColor); const labelLines = doc.splitTextToSize(label, usableWidth); doc.setFont(undefined, 'normal'); doc.setTextColor(lightGrayColor); const valueLines = doc.splitTextToSize(value, usableWidth); const heightNeeded = (labelLines.length * 5) + (valueLines.length * 5) + 4; checkPageBreak(heightNeeded); doc.setFont(undefined, 'bold'); doc.setTextColor(darkGrayColor); doc.text(labelLines, margin, y); y += (labelLines.length * 5); doc.setFont(undefined, 'normal'); doc.setTextColor(lightGrayColor); doc.text(valueLines, margin + 2, y); y += (valueLines.length * 5) + 6; }; // --- Build PDF --- // Page Header doc.setDrawColor(indigoColor); doc.setLineWidth(0.2); doc.line(margin, margin - 5, pageW - margin, margin - 5); y = margin + 5; // Title doc.setFontSize(24); doc.setFont(undefined, 'bold'); doc.setTextColor(darkGrayColor); doc.text(myth.name, pageW / 2, y, { align: 'center' }); y += 8; doc.setFontSize(12); doc.setFont(undefined, 'italic'); doc.setTextColor(lightGrayColor); doc.text(`A ${myth.type} from the ${myth.culture}`, pageW / 2, y, { align: 'center' }); y += 5; // Content addSectionHeader("The Narrative"); addContent('', myth.synopsis); addSectionHeader("Key Figures"); addContent('The Protagonist:', myth.hero); addContent('The Antagonist:', myth.antagonist); addSectionHeader("Sacred Lore"); addContent('Significant Artifact:', myth.object); addContent('Pivotal Location:', myth.location); addSectionHeader("The Moral"); addContent('', `"${myth.moral}"`); addFooter(); doc.save('Myth-and-Folklore.pdf'); }); updateTabUI(0); lucide.createIcons(); });