HTML + CSSFiltros

Mapa de calor por días

Una rejilla de actividad de doce semanas donde marcas qué días cuentan y sus filas se encienden en ola.

Ajustes

Color principal#0f766e

Color secundario#a3e635

Tamaño16px

Velocidad1x

Texto

Código

index.html

<fieldset class="uvq05-hm"><legend>Días con actividad</legend><div class="gd"><label><input type="checkbox" checked><span class="d">Lunes</span><span class="cs" aria-hidden="true"><i class="l0" style="--n:0"></i><i class="l3" style="--n:1"></i><i class="l0" style="--n:2"></i><i class="l1" style="--n:3"></i><i class="l3" style="--n:4"></i><i class="l2" style="--n:5"></i><i class="l3" style="--n:6"></i><i class="l2" style="--n:7"></i><i class="l1" style="--n:8"></i><i class="l2" style="--n:9"></i><i class="l0" style="--n:10"></i><i class="l2" style="--n:11"></i></span></label><label><input type="checkbox" checked><span class="d">Martes</span><span class="cs" aria-hidden="true"><i class="l2" style="--n:0"></i><i class="l0" style="--n:1"></i><i class="l1" style="--n:2"></i><i class="l0" style="--n:3"></i><i class="l0" style="--n:4"></i><i class="l2" style="--n:5"></i><i class="l0" style="--n:6"></i><i class="l2" style="--n:7"></i><i class="l1" style="--n:8"></i><i class="l2" style="--n:9"></i><i class="l1" style="--n:10"></i><i class="l1" style="--n:11"></i></span></label><label><input type="checkbox" checked><span class="d">Miércoles</span><span class="cs" aria-hidden="true"><i class="l1" style="--n:0"></i><i class="l0" style="--n:1"></i><i class="l1" style="--n:2"></i><i class="l0" style="--n:3"></i><i class="l0" style="--n:4"></i><i class="l1" style="--n:5"></i><i class="l0" style="--n:6"></i><i class="l0" style="--n:7"></i><i class="l3" style="--n:8"></i><i class="l1" style="--n:9"></i><i class="l3" style="--n:10"></i><i class="l3" style="--n:11"></i></span></label><label><input type="checkbox" checked><span class="d">Jueves</span><span class="cs" aria-hidden="true"><i class="l0" style="--n:0"></i><i class="l1" style="--n:1"></i><i class="l2" style="--n:2"></i><i class="l3" style="--n:3"></i><i class="l3" style="--n:4"></i><i class="l2" style="--n:5"></i><i class="l2" style="--n:6"></i><i class="l3" style="--n:7"></i><i class="l2" style="--n:8"></i><i class="l1" style="--n:9"></i><i class="l2" style="--n:10"></i><i class="l1" style="--n:11"></i></span></label><label><input type="checkbox" checked><span class="d">Viernes</span><span class="cs" aria-hidden="true"><i class="l2" style="--n:0"></i><i class="l3" style="--n:1"></i><i class="l3" style="--n:2"></i><i class="l4" style="--n:3"></i><i class="l4" style="--n:4"></i><i class="l3" style="--n:5"></i><i class="l3" style="--n:6"></i><i class="l3" style="--n:7"></i><i class="l1" style="--n:8"></i><i class="l4" style="--n:9"></i><i class="l2" style="--n:10"></i><i class="l1" style="--n:11"></i></span></label><label><input type="checkbox"><span class="d">Sábado</span><span class="cs" aria-hidden="true"><i class="l3" style="--n:0"></i><i class="l2" style="--n:1"></i><i class="l1" style="--n:2"></i><i class="l1" style="--n:3"></i><i class="l4" style="--n:4"></i><i class="l3" style="--n:5"></i><i class="l3" style="--n:6"></i><i class="l3" style="--n:7"></i><i class="l2" style="--n:8"></i><i class="l4" style="--n:9"></i><i class="l3" style="--n:10"></i><i class="l1" style="--n:11"></i></span></label><label><input type="checkbox"><span class="d">Domingo</span><span class="cs" aria-hidden="true"><i class="l1" style="--n:0"></i><i class="l2" style="--n:1"></i><i class="l2" style="--n:2"></i><i class="l4" style="--n:3"></i><i class="l2" style="--n:4"></i><i class="l2" style="--n:5"></i><i class="l1" style="--n:6"></i><i class="l2" style="--n:7"></i><i class="l4" style="--n:8"></i><i class="l4" style="--n:9"></i><i class="l4" style="--n:10"></i><i class="l1" style="--n:11"></i></span></label></div><div class="ft"><button type="button" data-p="0">Laborables</button><button type="button" data-p="1">Fin de semana</button><p class="ct"><span class="n"></span> <span>de 7 días</span></p></div></fieldset>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Filtros

Ver todos: Filtros

Chips de filtro

FiltrosReact + Motion

Control segmentado

FiltrosReact + Motion

Desplegable multiselección

FiltrosReact + Motion

Chips con píldora deslizante

FiltrosHTML + CSS

Chips rellenos desde el centro

FiltrosHTML + CSS

Chips con borde degradado

FiltrosHTML + CSS

Chips con check

FiltrosHTML + CSS

Chips con X para quitar

FiltrosHTML + CSS

Dónde usarlo

Los paneles de analítica, gimnasios y herramientas de reservas a menudo filtran por día de la semana, y ver los datos mientras eliges ayuda. Cada fila es una etiqueta con casilla y doce celdas cuyo tono depende de la actividad, y al activar un día su fila se colorea con una ola escalonada. Dos atajos marcan laborables o fin de semana.

El primer color cubre los niveles bajos y medios y el segundo marca las celdas con más actividad, así que una pareja de turquesa y lima se lee bien. Carga recuentos reales en las clases de nivel y deja el contador junto a los atajos.