Selector de modo de conducción
Un cuadro de coche pasa de ECO a SPORT: la aguja sube, el arco se tiñe de rojo y el panel vibra.
Ajustes
Código
<label class="uvq03-drv"><input type="checkbox" role="switch"><span class="cl"><svg viewBox="0 12 100 50" aria-hidden="true"><path class="tk" d="M12 56A38 38 0 0 1 88 56" pathLength="1"/><path class="ar" d="M12 56A38 38 0 0 1 88 56" pathLength="1"/><g class="nd"><path d="M50 56L50 24"/><circle cx="50" cy="56" r="4"/></g></svg><span class="md"><b class="e">ECO</b><b class="s">SPORT</b></span></span>Modo de conducción</label>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 Toggles
Ver todos: TogglesDónde usarlo
Tomado de los cuadros de mando de los coches actuales, este interruptor es un pequeño panel oscuro con un arco de indicador y una aguja. Apagado, está en ECO con un arco verde corto; al activarlo, la aguja sube, el arco crece y se vuelve rojo, SPORT aparece bajo el indicador y el panel tiembla un instante. El indicador es un SVG con pathLength.
El color principal es el modo deportivo y el secundario el modo eco. Cambia el nombre de los dos modos en el HTML, por ejemplo COMFORT y TRACK, y úsalo para modos de rendimiento, planes de energía o funciones de potencia extra.