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
Alle ansehen: KartenWofü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.