Type: ${civilizationType}

`; outputHTML += `

Peak Era/Achievement: ${peakAchievement}

`; outputHTML += `

Reason for Decline: ${reasonForDecline}

`; outputHTML += `

Location of Ruins: ${locationOfRuins}

`; outputHTML += `

Notable Ruin: ${notableRuin}

`; outputHTML += `

Key Artifact: ${keyArtifact}

`; outputHTML += `

Lingering Mystery: ${lingeringMystery}

`; outputContent.innerHTML = outputHTML; } function downloadPdf() { const { jsPDF } = window.jspdf; const doc = new jsPDF({ orientation: 'P', // Portrait unit: 'mm', format: 'a4' }); // Target the output section for PDF const element = document.getElementById('civilizationOutput'); // Apply temporary print styles for PDF generation (cleaner output) const pdfStyles = ` #lostCivilizationGenerator { background-color: #ffffff !important; /* White background for print */ color: #000 !important; /* Black text */ box-shadow: none !important; border: none !important; padding: 10mm !important; /* Use mm for consistency */ margin: 0 !important; font-size: 10pt !important; line-height: 1.5 !important; font-family: sans-serif !important; /* Use standard font */ } #lostCivilizationGenerator h2, #lostCivilizationGenerator h3, #lostCivilizationGenerator #outputContent strong{ color: #000 !important; /* Black headings and labels */ text-shadow: none !important; font-family: sans-serif !important; } #lostCivilizationGenerator h2 { font-size: 14pt !important; } #lostCivilizationGenerator h3 { font-size: 12pt !important; border-bottom-color: #ccc !important; } #lostCivilizationGenerator .controls-section { display: none !important; /* Hide controls */ } #lostCivilizationGenerator .output-section { border: none !important; background-color: #fff !important; padding: 0 !important; min-height: auto !important; } #lostCivilizationGenerator #outputContent { color: #000 !important; min-height: auto !important; white-space: pre-wrap !important; line-height: 1.5 !important; font-size: 10pt !important; } #lostCivilizationGenerator #outputContent strong { display: inline !important; margin-right: 3mm !important; font-size: 10pt !important; } #lostCivilizationGenerator #outputContent p { margin-bottom: 8mm !important; /* Space between paragraphs */ } `; const styleTag = document.createElement('style'); styleTag.setAttribute('id', 'pdfPrintStyles'); styleTag.innerHTML = pdfStyles; document.head.appendChild(styleTag); // Use html2canvas to render the element as an image/canvas html2canvas(element, { scale: 2, // Increase scale for better resolution in PDF logging: false, // Disable html2canvas logging backgroundColor: '#ffffff' // Explicitly set white background }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const pdfWidth = doc.internal.pageSize.getWidth(); const pdfHeight = doc.internal.pageSize.getHeight(); const imgWidth = pdfWidth - 20; // Leave 10mm margin on each side const imgHeight = canvas.height * imgWidth / canvas.width; let heightLeft = imgHeight; let position = 10; // Starting Y position (10mm margin) // Add the image to the PDF const imgX = (pdfWidth - imgWidth) / 2; // Center the image doc.addImage(imgData, 'PNG', imgX, position, imgWidth, imgHeight); heightLeft -= (pdfHeight - position); // Handle multiple pages if content exceeds one page while (heightLeft >= 0) { position = 10; // Reset position for new page doc.addPage(); // Add background to the new page doc.setFillColor(255); // White doc.rect(0, 0, pdfWidth, pdfHeight, 'F'); // Calculate the source y position on the canvas image const srcY = imgHeight - heightLeft; // Add the remaining part of the image doc.addImage(imgData, 'PNG', imgX, position, imgWidth, heightLeft, null, null, 0, srcY); heightLeft -= (pdfHeight - position); } // Add a title specifically for the PDF doc.setFontSize(18); doc.setTextColor(50, 50, 50); // Dark Gray doc.text("Lost Civilization Concept", pdfWidth / 2, 8, { align: 'center' }); // Remove the temporary print styles const addedTag = document.getElementById('pdfPrintStyles'); if (addedTag) { addedTag.remove(); } doc.save('lost_civilization_concept.pdf'); }).catch(error => { console.error("Error generating PDF:", error); alert("Could not generate PDF. Please try again."); // Ensure styles are removed even on error const addedTag = document.getElementById('pdfPrintStyles'); if (addedTag) { addedTag.remove(); } }); } // Event Listeners generateBtn.addEventListener('click', generateCivilization); downloadPdfBtn.addEventListener('click', downloadPdf); // Initial text outputContent.innerHTML = '

Click "Generate Civilization Concept" to uncover a forgotten history...

'; });