<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>
body background: #e2e8f0; font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif; padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center;
<!-- Cuadrícula 10x10 = números del 1 al 100 --> <div class="numbers-grid" id="numbersGrid"></div> plantilla para rifa 100 numeros pdf
/* Botones para imprimir / generar PDF */ .action-buttons display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; .btn border: none; background: #1e293b; color: white; font-weight: 600; padding: 12px 32px; border-radius: 60px; font-size: 1rem; cursor: pointer; transition: 0.2s; font-family: inherit; box-shadow: 0 2px 5px rgba(0,0,0,0.1); .btn-pdf background: #b91c1c; .btn-pdf:hover background: #991b1b; transform: scale(0.97); .btn-print background: #2c3e66; .btn-print:hover background: #1e2b48; .btn:hover opacity: 0.9; transform: translateY(-2px);
<div class="ticket-container" id="raffleTemplate"> <!-- Encabezado atractivo --> <div class="header"> <h1>🎟️ RIFA <span>100 NÚMEROS</span> 🎟️</h1> <p>Plantilla oficial para sorteo | Lista de participantes</p> <div class="sub">✔️ Marque con nombre o iniciales cada número vendido | Corte aquí sus boletos virtuales</div> </div> // Como no estamos usando librerías externas, es
<!-- Pie con datos de la organización / vendedor --> <div class="info-footer"> <div class="seller-box"> <strong>📌 VENDEDOR / ORGANIZADOR</strong> <div style="margin-top: 8px;">Nombre: _________________________</div> <div style="margin-top: 6px;">Teléfono / Contacto: _______________</div> <div style="margin-top: 12px;"><strong>Fecha del sorteo:</strong> ____/____/______</div> </div> <div class="notes-box"> <strong>📝 NOTAS / PREMIO</strong> <div>Premio: __________________________________</div> <div>Valor del número: $ ___________</div> <div>Total recaudado: ___________</div> <div class="sign-line"></div> <div style="margin-top: 6px;">Firma responsable: _________________</div> </div> </div> <div class="footer-note"> * Cada número tiene espacio para escribir el nombre del comprador. Imprima esta plantilla y utilícela para controlar su rifa de 100 números. </div> </div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>Plantilla para Rifa | 100 Números | Lista imprimible para PDF</title> <style> * margin: 0; padding: 0; box-sizing: border-box; // Además, para mejorar la experiencia en móviles
/* 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;