<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Generar PDF desde selección</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<style>
body { font-family: Arial, sans-serif; margin: 40px; }
label, select, button { display: block; margin: 10px 0; }
button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
</style>
</head>
<body>
<h1>Elige tus opciones para el PDF</h1>
<label for="tema">Selecciona un tema:</label>
<select id="tema">
<option value="Diario">Diario</option>
<option value="Planning">Planning</option>
<option value="Checklist">Checklist</option>
</select>
<label for="tipo">Selecciona el tipo de diseño:</label>
<select id="tipo">
<option value="Simple">Simple</option>
<option value="Decorativo">Decorativo</option>
<option value="Profesional">Profesional</option>
</select>
<button id="generar">Generar PDF</button>
<script>
document.getElementById("generar").addEventListener("click", () => {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
const tema = document.getElementById("tema").value;
const tipo = document.getElementById("tipo").value;
doc.setFontSize(20);
doc.text("Tu PDF personalizado", 20, 20);
doc.setFontSize(14);
doc.text(`Tema seleccionado: ${tema}`, 20, 40);
doc.text(`Tipo de diseño: ${tipo}`, 20, 50);
// Guardar PDF
doc.save(`PDF_${tema}_${tipo}.pdf`);
});
</script>
</body>
</html>