Mi coche · Garaje

Cargando a 7,4 kW

68%

342 km

Carga completa a las 23:53

HTML + CSSCartes

Recharge de voiture électrique

Un panneau de voiture avec batterie en segments LCD et une limite de charge à glisser ou à régler avec les flèches.

Réglages

16px
1x

Code

<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>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Cartes

Voir tout : Cartes

Où l’utiliser

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.