78%
Studio One
4 h 28 min restantes
HTML + CSSKarten
Karte für Gerätestatus
Ein Akku-Ring mit Online-Punkt, Restlaufzeit und zwei Messwerten, der beim Hovern sanft pulsiert.
Einstellungen
16px
1x
Code
<article class="uv-cdevice"><header><i></i><span>EN LÍNEA</span><button>•••</button></header><div class="ring"><b>78<small>%</small></b><i></i></div><h3>Studio One</h3><p>4 h 28 min restantes</p><footer><span>Temperatur <b>32°</b></span><span>Leistung <b>18 W</b></span></footer></article>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Karten
Wofür du ihn nutzen kannst
Gebaut für Begleit-Apps und Steuerzentralen: der Akku eines E-Bikes, ein Lautsprecher im Smart-Home-Dashboard, eine mobile Powerstation oder ein Paar kabellose Kopfhörer. Der Ring zeigt den Ladestand, darunter stehen die verbleibende Zeit und zwei Messwerte wie Temperatur und Leistung. Eine Gerätestatus-Karte, deren Ring beim Hovern leicht atmet.
Die 78 % sind fest in den Styles hinterlegt. Änderst du die Zahl, pass auch den Ring an, sobald echte Daten kommen. Geht das Gerät offline, wird der grüne Punkt grau; ein pulsierender Ring ohne Verbindung führt in die Irre.