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
Eine Fahrzeugkarte mit segmentiertem LCD-Akku und einem Ladelimit, das du ziehst oder mit den Pfeiltasten einstellst.
<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>Mein Auto · Garage</h3><p class="cs"><i></i>Lädt mit 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>Ladelimit</span><output>80 %</output><input type="range" min="50" max="100" step="5" value="80"></label><p class="ft">Voll geladen um <b>23:53</b></p></article>Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Auto-Apps zeigen das Laden als Balken aus leuchtenden Segmenten, und diese Karte übernimmt diese Sprache. Zwanzig Zellen eines CSS-Grids füllen sich bis zum aktuellen Stand, die Felder bis zum Limit pulsieren nacheinander, und ein natives Range-Input verschiebt die Marke und berechnet die Fertigzeit neu. Passt zu E-Auto-Apps, Smart-Home-Panels, Energie-Dashboards und IoT-Demos.
Die Hauptfarbe ist das LCD-Leuchten, die zweite das dunkle Panel. Den aktuellen Ladestand und die Ladeleistung änderst du im Skript, Uhrzeit und Segmente passen sich dann von selbst an.