Mi coche · Garaje
Cargando a 7,4 kW
68%
342 km
Carga completa a las 23:53
Cargando a 7,4 kW
68%
342 km
Carga completa a las 23:53
Panel de coche con batería en segmentos LCD y un límite de carga que se arrastra o se ajusta con las flechas.
<article class="uvq07-ev"><header><span class="pl" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 3v4M15 3v4M7 7h10v3a5 5 0 0 1-10 0zM12 15v6"/></svg></span><div><h3>Mi coche · Garaje</h3><p class="cs"><i></i>Cargando a 7,4 kW</p></div></header><div class="rd"><p class="pc"><b>68</b><span>%</span></p><p class="km"><b>342</b> km</p></div><div class="bt" aria-hidden="true"><i class="f" style="--i:0"></i><i class="f" style="--i:1"></i><i class="f" style="--i:2"></i><i class="f" style="--i:3"></i><i class="f" style="--i:4"></i><i class="f" style="--i:5"></i><i class="f" style="--i:6"></i><i class="f" style="--i:7"></i><i class="f" style="--i:8"></i><i class="f" style="--i:9"></i><i class="f" style="--i:10"></i><i class="f" style="--i:11"></i><i class="f" style="--i:12"></i><i class="ch" style="--i:13"></i><i class="ch" style="--i:14"></i><i class="ch" style="--i:15"></i><i class="x" style="--i:16"></i><i class="x" style="--i:17"></i><i class="x" style="--i:18"></i><i class="x" style="--i:19"></i></div><label class="lm"><span>Límite de carga</span><output>80 %</output><input type="range" min="50" max="100" step="5" value="80"></label><p class="ft">Carga completa a las <b>23:53</b></p></article>Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Las apps de coche muestran la carga como una barra de segmentos encendidos, y esta tarjeta sigue ese lenguaje. Veinte celdas de una rejilla CSS se llenan hasta el nivel actual, las que quedan hasta el límite laten en secuencia y un input range nativo mueve la marca y recalcula la hora de fin. Encaja en apps de coches eléctricos, domótica, paneles de energía y demos IoT.
El color principal es el brillo del LCD; el secundario, el panel oscuro. Cambia el nivel actual y la potencia en el script, y la hora y los segmentos se ajustan solos.