Plantilla Para Rifa 100 Numeros Pdf | PC Reliable |

/* Grid de números: 10 columnas x 10 filas = 100 */ .numbers-grid display: grid; grid-template-columns: repeat(10, 1fr); gap: 12px 14px; margin: 2rem 0 1.5rem;

<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> plantilla para rifa 100 numeros pdf

body background: #e2e8f0; font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif; padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center; /* Grid de números: 10 columnas x 10 filas = 100 */