Diseña un archivo HTML único, autosuficiente, premium y visualmente impactante para un sistema de sorteo ceremonial llamado “Sorteo de Triunfo”.

 Diseña un archivo HTML único, autosuficiente, premium y visualmente impactante para un sistema de sorteo ceremonial llamado “Sorteo de Triunfo”.

https://mario55666.github.io/Sorteo_2026/

OBJETIVO GENERAL

Crear una experiencia inmersiva, elegante y cinematográfica para sortear el orden de presentación de participantes o grupos. El sistema debe funcionar completamente en frontend, sin backend, en un solo archivo HTML con CSS y JavaScript embebidos. Debe sentirse como una ceremonia de premiación o gala solemne, con estética dorada, fondo oscuro, efectos de brillo, animaciones suaves y una revelación visual memorable.

ESTILO VISUAL

- Inspiración: gala, premiación, ceremonia de honor, lujo sobrio, misticismo elegante.

- Fondo oscuro con degradados cálidos y resplandores dorados.

- Tipografía principal serif elegante estilo ceremonial para títulos; tipografía limpia para texto general.

- Uso de glassmorphism sutil en paneles.

- Colores principales: dorado, negro profundo, ámbar tenue.

- Diferenciar visualmente las fechas:

  - Fecha 1 con acentos azules.

  - Fecha 2 con acentos morados.

- Los nombres de participantes deben mostrarse en distintos colores, con una paleta armónica y elegante.

- Botones con acabado premium, relieve o efecto 3D sutil.

- Animaciones fluidas, nunca agresivas.

ARQUITECTURA

- Todo en un solo archivo HTML.

- Incluir CSS embebido y JavaScript embebido.

- Debe ser responsive para escritorio y móvil.

- Usar localStorage para guardar el estado automáticamente.

- No depender de backend.

- Puede usar librerías CDN ligeras solo si son realmente necesarias para íconos o efectos visuales.

FLUJO GENERAL

El sistema debe tener estas etapas:

1. Configuración del sorteo.

2. Registro de participantes.

3. Inicio del sorteo con animación de transición.

4. Pantalla de revelación individual por ganador.

5. Avance secuencial entre ganadores.

6. Resultados finales.

PANTALLA DE CONFIGURACIÓN

- Mostrar la sección de juego en la parte superior.

- Mover “Cómo funciona” a la parte inferior de la pantalla de configuración.

- Permitir activar o desactivar “Fecha de Presentación 2”.

- Si Fecha 2 está desactivada:

  - no pedir fecha 2,

  - no pedir premiados de fecha 2,

  - no incluir segunda fecha en validaciones ni resultados intermedios.

- Campos principales:

  - Fecha de Presentación 1.

  - Cantidad de premiados para Fecha 1.

  - Fecha de Presentación 2 (opcional, con toggle activar/desactivar).

  - Cantidad de premiados para Fecha 2.

  - Tiempo estimado por participante.

- Mostrar claramente el total de premiados requeridos.

- Mostrar cuántos participantes faltan si aún no hay suficientes.

SECCIÓN “CÓMO FUNCIONA”

- Debe ir debajo de la configuración principal.

- Debe ser colapsable.

- Explicar de forma breve:

  - configuración de fechas,

  - carga de participantes,

  - inicio del sorteo,

  - revelación uno por uno,

  - resultados finales.

- Mantener estética coherente con el resto de la interfaz.

REGISTRO DE PARTICIPANTES

- Permitir agregar:

  - participantes individuales,

  - grupos.

- Permitir también pegar listas masivas separadas por comas o saltos de línea.

- Mostrar lista de participantes agregados.

- Cada participante debe tener:

  - número de orden visual,

  - nombre,

  - etiqueta de tipo (Grupo o Individual),

  - color de nombre diferenciado.

- Incluir botón para eliminar cada participante.

- Incluir botón para limpiar todo el sorteo con confirmación.

MODO DE SORTEO

- Al pulsar “INICIAR SORTEO”, ejecutar mezcla aleatoria real del arreglo.

- Si hay dos fechas activas:

  - asignar primero los premiados de Fecha 1,

  - luego los de Fecha 2.

- Mostrar una pantalla intermedia de suspense con mensajes animados mientras ocurre el sorteo.

- Luego pasar automáticamente a la pantalla de revelación.

PANTALLA DE REVELACIÓN

- Debe ser la parte más espectacular del sistema.

- Mostrar una tarjeta de revelación cinematográfica con:

  - luces,

  - oscuridad inicial,

  - halo dorado,

  - partículas,

  - flash,

  - brillo,

  - transición de aparición.

- Mostrar:

  - lugar ganado,

  - nombre del participante o grupo,

  - frase ceremonial,

  - fecha correspondiente,

  - tiempo estimado,

  - cantidad total en competencia.

- Los tres primeros lugares deben tener tratamiento especial:

  - iconografía especial,

  - mayor brillo,

  - mensaje ceremonial distinto,

  - énfasis visual superior.

- El nombre grande del ganador debe usar un color distintivo elegante.

BOTONES DE FLUJO

Debe existir una lógica muy clara y robusta:

- Antes de revelar:

  - botón “REVELAR PREMIADO”.

- Después de revelar:

  - botón “SIGUIENTE GANADOR” si aún quedan más en la misma fecha,

  - botón “SIGUIENTE FECHA” si terminó la primera fecha y hay segunda fecha,

  - botón “VER RESULTADOS FINALES” al terminar todo.

- También incluir botón “Saltar” para ir directamente a resultados.

- Los botones deben funcionar incluso si un efecto visual falla.

- Incluir controles flotantes de respaldo para asegurar que el usuario siempre pueda continuar.

ROBUSTEZ FUNCIONAL

- Proteger efectos visuales como confetti o canvas con try/catch.

- Si una animación falla, el flujo del sorteo no debe romperse.

- No depender exclusivamente de onclick inline.

- Añadir mecanismos de respaldo para asegurar interacción continua.

- Evitar que desaparezcan los botones clave del flujo entre un ganador y el siguiente.

RESULTADOS FINALES

- Mostrar una pantalla elegante de resultados finales.

- Separar claramente resultados por Fecha 1 y Fecha 2 si ambas están activas.

- Si solo está activa Fecha 1, mostrar solo esa sección.

- Incluir estadísticas resumidas:

  - total de ganadores,

  - número de grupos,

  - número de individuales,

  - tiempo total estimado.

- Mantener diseño ceremonial y ordenado.

LÓGICA DE ESTADO

Mantener un objeto de estado con:

- pantalla actual,

- participantes,

- configuración,

- ganadores de fecha 1,

- ganadores de fecha 2,

- índice actual,

- fecha actual,

- estado de revelación,

- modo de entrada,

- errores,

- visibilidad de ayuda,

- activación de fecha 2.

USABILIDAD

- Debe ser muy claro para docentes, presentadores o animadores de evento.

- Interfaz intuitiva.

- Textos en español.

- Sin recargar la página.

- Feedback inmediato ante errores de validación.

- Compatible con móvil.

TONO DEL CONTENIDO

- Lenguaje ceremonial, motivador y elegante.

- Frases como:

  - “El esfuerzo constante forja la gloria eterna”

  - “La perseverancia es el camino hacia la excelencia”

  - “Cada paso adelante es una victoria sobre uno mismo”

- Debe sentirse como una presentación solemne, no como una app técnica.

ENTREGA ESPERADA

Genera el HTML final completo, funcional, bien estructurado, comentado de forma mínima, optimizado y listo para abrir directamente en el navegador.