`; } // Update UI outputCard.innerHTML = outputHtml; pdfOutputContent.innerHTML = pdfHtml; // Move to output tab (Spec II.B.4.o) showCharTab("char-tab-output"); }; /** * Downloads the output as a PDF * (Spec II.C) */ function downloadCharPDF() { if ( typeof jspdf === "undefined" || typeof html2canvas === "undefined" ) { console.error("PDF libraries not loaded."); return; } if (!pdfOutputContent || !pdfOutputContent.innerHTML.includes("h3")) { console.error("No backstory to download."); return; } const { jsPDF } = jspdf; const pdfOutputElement = document.getElementById( "char-pdf-output-content" ); pdfOutputElement.style.display = "block"; pdfOutputElement.style.position = "absolute"; pdfOutputElement.style.left = "-9999px"; html2canvas(pdfOutputElement, { scale: 2, backgroundColor: "#ffffff", }).then((canvas) => { pdfOutputElement.style.display = "none"; pdfOutputElement.style.position = "static"; const imgData = canvas.toDataURL("image/png"); const pdf = new jsPDF({ orientation: "p", unit: "px", format: "a4", }); const pdfWidth = pdf.internal.pageSize.getWidth(); const canvasWidth = canvas.width; const canvasHeight = canvas.height; const ratio = canvasWidth / canvasHeight; const imgWidth = pdfWidth - 40; // 20px margin const imgHeight = imgWidth / ratio; pdf.addImage(imgData, "PNG", 20, 20, imgWidth, imgHeight); pdf.save("character-backstory.pdf"); }); } if (pdfDownloadBtn) { pdfDownloadBtn.addEventListener("click", downloadCharPDF); } // --- 6. Initialization --- buildDashboard(); buildConfig(); showCharTab("char-tab-dashboard"); // Start on the dashboard tab });