<script> // Generar dinámicamente los 100 números con diseño para nombre function generateGrid() const gridContainer = document.getElementById('numbersGrid'); if (!gridContainer) return; gridContainer.innerHTML = ''; // Creamos 100 números del 1 al 100 for (let i = 1; i <= 100; i++) const cell = document.createElement('div'); cell.className = 'ticket-cell'; // Número destacado const numberSpan = document.createElement('div'); numberSpan.className = 'numero'; numberSpan.textContent = i; // Sección para nombre del comprador / vendido a: const nameDiv = document.createElement('div'); nameDiv.className = 'nombre-line'; nameDiv.innerHTML = `<span>✍️ Comprador</span><div class="line-placeholder"></div>`; cell.appendChild(numberSpan); cell.appendChild(nameDiv); gridContainer.appendChild(cell); // Función para imprimir directamente (abre diálogo de impresión nativo -> opción "Guardar como PDF") function printTemplate() window.print(); // Función para generar PDF utilizando la ventana de impresión con estilo optimizado // También permite forzar un mejor escalado. Dado que el navegador permite "guardar como PDF" // simplemente llamamos a imprimir pero añadimos un pequeño mensaje para que el usuario sepa que puede guardarlo. function generatePDF() // Sugerencia al usuario: usamos el mismo método de impresión pero con un pequeño toast visual // Esto asegura que el navegador muestre la vista previa de impresión y desde allí se pueda guardar como PDF. // Como no estamos usando librerías externas, es la forma más robusta y multiplataforma. const originalTitle = document.title; document.title = "Plantilla_Rifa_100_Numeros"; // Pequeño mensaje emergente sutil (opcional) const msgDiv = document.createElement('div'); msgDiv.textContent = "📄 Preparando PDF... En la ventana de impresión, elige 'Guardar como PDF'."; msgDiv.style.position = 'fixed'; msgDiv.style.bottom = '20px'; msgDiv.style.left = '20px'; msgDiv.style.backgroundColor = '#1e293b'; msgDiv.style.color = 'white'; msgDiv.style.padding = '8px 18px'; msgDiv.style.borderRadius = '40px'; msgDiv.style.fontSize = '0.8rem'; msgDiv.style.zIndex = '9999'; msgDiv.style.fontWeight = '500'; msgDiv.style.boxShadow = '0 4px 10px rgba(0,0,0,0.2)'; document.body.appendChild(msgDiv); setTimeout(() => window.print(); setTimeout(() => if (msgDiv && msgDiv.remove) msgDiv.remove(); , 800); , 150); setTimeout(() => document.title = originalTitle; , 500); // Inicializar la cuadrícula generateGrid(); // Botones const printButton = document.getElementById('printBtn'); const pdfButton = document.getElementById('pdfBtn'); if (printButton) printButton.addEventListener('click', printTemplate); if (pdfButton) pdfButton.addEventListener('click', generatePDF); // Opcional: para que al hacer clic en "Generar PDF" se pueda personalizar aún más, // pero el método window.print() es el estándar para obtener PDF fiel a lo visto. // Además, para mejorar la experiencia en móviles y desktop, se incluyen estilos responsivos. // Podemos añadir instrucción en consola amigable console.log('✅ Plantilla para rifa de 100 números lista. Usa los botones para imprimir o generar PDF.'); // Pequeña mejora: Si se detecta que el usuario hace click en el área del número para simular llenado, // pero no es necesario, solo es una plantilla estática editable a mano después de imprimir. // También proporcionamos un campo adicional para rellenar con nombre si se usa digitalmente (opcional) // pero como es plantilla impresa, mantenemos lineas punteadas listas para escribir a mano. </script>
/* Contenedor principal que simulará la hoja PDF */ .ticket-container max-width: 1200px; width: 100%; background: white; box-shadow: 0 20px 35px -12px rgba(0,0,0,0.2); border-radius: 20px; padding: 1.8rem 2rem 2.2rem; margin-bottom: 2rem; transition: all 0.2s; plantilla para rifa 100 numeros pdf
<!-- Estilos adicionales para garantizar lineas claras en todos los navegadores --> <style> /* mejoras específicas para la línea de nombre en cada celda */ .line-placeholder border-bottom: 1px dashed #94a3b8; width: 90%; margin: 6px auto 0 auto; height: 16px; .nombre-line span font-size: 0.6rem; font-weight: 500; display: block; margin-bottom: 3px; color: #6b7280; .ticket-cell transition: all 0.1s ease; background: #ffffff; /* para que en impresión los bordes sean nítidos */ @media print .line-placeholder border-bottom: 1px solid #000; height: 12px; .ticket-cell border: 1px solid #aaa; box-shadow: none; .numero background: #f0f0f0; border: 1px solid #ccc; .info-footer div, .seller-box, .notes-box border: 1px solid #ddd; .header border-bottom: 2px solid #facc15; .btn, .action-buttons display: none; body margin: 0; padding: 0; /* adicional para mejorar la legibilidad en pantalla grande */ @media (min-width: 1024px) .numbers-grid gap: 16px; .ticket-cell padding: 12px 6px; .numero width: 54px; height: 54px; line-height: 54px; font-size: 1.7rem; /* líneas punteadas con mayor claridad */ .seller-box div, .notes-box div margin-bottom: 8px; font-family: monospace; letter-spacing: 0.3px; .sign-line border-bottom: 2px dotted #334155; width: 100%; margin-top: 4px; </style> // Como no estamos usando librerías externas, es