78%
Studio One
4 h 28 min restantes
HTML + CSSCards
Card de estado de dispositivo
Un anillo de batería con punto de conexión, tiempo restante y dos lecturas, que respira suave al pasar el ratón.
Ajustes
16px
1x
Código
<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>Temperatura <b>32°</b></span><span>Potencia <b>18 W</b></span></footer></article>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Cards
Dónde usarlo
Pensada para apps que acompañan a un aparato y paneles de control: la batería de una bici eléctrica, un altavoz en un panel de domótica o unos auriculares inalámbricos. El anillo enseña la carga y debajo van el tiempo que queda y dos lecturas, como temperatura y potencia: el estado del dispositivo, de un vistazo.
El 78 % está fijado en los estilos, así que cámbialo a la vez que el número cuando conectes datos reales. Pasa el punto verde a gris si el aparato se desconecta; un anillo que sigue latiendo sin nada conectado confunde.