Cuadrante Lab · Paneles de control
Cómo se construyó Cuadrante
Demo de panel de recursos humanos con estética glass cálida: navbar de secciones con estado activo, saludo según la hora del día y una barra de segmentos (entrevistas, contratados, ciclo, bajas). La retícula reúne una tarjeta de perfil con retrato procedural, la actividad semanal en un gráfico de barras SVG con tooltip, un temporizador de enfoque que cuenta de verdad sobre un anillo de 60 marcas que se van apagando, la columna de incorporación con lista de tareas que puedes marcar (el contador x/8 se actualiza), un acordeón desplegable y una agenda con eventos y avatares. Sin backend ni dependencias: todo el gráfico, el anillo, los iconos y los avatares están dibujados a mano en SVG, y no se carga ninguna foto ni librería de terceros.
Es una demo técnica, no una plantilla vendible tal cual: un adelanto de lo que podemos construir a medida cuando un proyecto necesita algo más que una web de catálogo. Si te interesa algo parecido para tu producto, hablamos.
Qué demuestra
- Temporizador de enfoque que cuenta de verdad (play/pausa/reinicio) sobre un anillo SVG con 60 marcas que se apagan a medida que avanza
- Gráfico de actividad semanal dibujado a mano en SVG, con tooltip por barra y el viernes destacado en amarillo por defecto
- Lista de tareas de incorporación marcable: al completar o reabrir una acción, el contador x/8 se recalcula al instante
- Navbar de secciones con estado activo y menú hamburguesa en móvil; saludo que cambia según la hora del día
- Retratos y avatares procedurales generados con un RNG seedeado (mulberry32): nada de fotos de stock ni CDN externo que filtre al visitante
- Acordeón desplegable, barra de segmentos proporcional y agenda con eventos posicionados y grupos de avatares solapados
- Fondo con blob amarillo difuso (Gaussian blur en SVG) y tarjetas glass con backdrop-blur, radios de 24px y sombras suaves
- Totalmente responsive: retícula de 4×2 en escritorio, 2 columnas en tablet y pila vertical en móvil, sin duplicar el DOM
- Cero dependencias: HTML + CSS + SVG a mano, sin React, Tailwind, Recharts ni Lucide (el spec original los pedía; aquí se reconstruye sin ellos)