TV Box Installer: Guía Interactiva Inmersiva

🪼 VER GUÍA EN VIVO

🎯 El Reto: Guiar a Cualquiera por un Proceso Técnico

Instalar y configurar aplicaciones en una TV Box Android implica pasos delicados: validar el entorno, instalar ADB, conectar el dispositivo por USB o WiFi, hacer sideloading de APKs y dejar NetGuard (firewall) bien configurado. Un instructivo en texto plano genera dudas, errores y soporte constante.

El objetivo: que cualquier persona del equipo, sin perfil técnico, pueda completar la instalación sola, sin equivocarse y sintiendo que avanza.

💡 La Solución: Una Guía Web Inmersiva de Una Sola Página

Desarrollé una landing-guía autónoma (un único index.html) que transforma el manual en una experiencia interactiva, visual y a prueba de errores.

Estética brasa sobre negro puro con medusas bioluminiscentes de fondo.

✨ Funcionalidades Clave

1. Progreso reactivo: una barra sticky calcula el porcentaje completado según las casillas que el usuario marca, con persistencia entre recargas.
2. Selector inteligente de versión: el usuario elige su modelo de caja y la guía le recomienda automáticamente la versión correcta a instalar.
3. Comandos copiables: cada bloque de terminal se copia al portapapeles con un clic y confirma visualmente la acción.
4. Pasos con estado y celebración final: cada tarjeta cambia a estado completado (verde) y un banner corona el final del flujo.
5. FAQ y recuperación de errores integradas en acordeones para resolver fallos sin salir de la página.

🛠️ Ingeniería del Frontend

• Fondo de video cinematográfico: un video a pantalla completa (object-fit: cover) fijo detrás de todo el contenido.
• Loop perfecto sin cortes: técnica de crossfade con doble capa de video desfasada medio ciclo — cuando una copia llega a su corte, la otra está a la mitad y visible, eliminando el salto del bucle.
• Glassmorphism: tarjetas de vidrio esmerilado (backdrop-filter: blur) que difuminan el fondo donde hay contenido y lo dejan nítido en los márgenes, garantizando legibilidad.
• Degradado de protección: capas de oscurecimiento y glow rojo sobre el video para asegurar contraste del texto en cualquier sección.
• Fallback elegante: si el video no carga, queda un poster fijo de respaldo sin romper la composición.

💻 Stack Tecnológico

• Core: HTML5, CSS3 y JavaScript vanilla (sin frameworks, cero dependencias).
• Tipografías: Space Grotesk, Inter y JetBrains Mono.
• Diseño: Glassmorphism + estética neón/brasa sobre fondo negro puro (#070707), totalmente responsivo (desktop y móvil).
• Estado: persistencia local del progreso y dos variantes de tema (neón y vidrio).

Resultado: un manual técnico convertido en una experiencia premium, autoguiada y memorable, que reduce errores de instalación y la carga de soporte.