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
Un panneau de voiture avec batterie en segments LCD et une limite de charge à glisser ou à régler avec les flèches.
<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>Ma voiture · Garage</h3><p class="cs"><i></i>Recharge à 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>Limite de charge</span><output>80 %</output><input type="range" min="50" max="100" step="5" value="80"></label><p class="ft">Charge complète à <b>23:53</b></p></article>Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Les applis automobiles affichent la recharge comme une barre de segments lumineux, et cette carte reprend ce langage. Vingt cellules d'une grille CSS se remplissent jusqu'au niveau actuel, celles jusqu'à la limite pulsent à la suite, et un input range natif déplace le repère et recalcule l'heure de fin. Pour applis de véhicules électriques, domotique, tableaux d'énergie et démos IoT.
La couleur principale est la lueur du LCD, la seconde le panneau sombre. Modifie le niveau actuel et la puissance dans le script, l'heure et les segments suivent.