Sin conexión

HTML + CSSMikrointeraktionen

Neu verbinden durch Einstecken des Kabels

Der Stecker hängt lose; beim erneuten Versuch oder Ziehen federt er in die Steckdose, ein Funke springt und die Lampe leuchtet.

Einstellungen

16px
1x

Code

<div class="uvq15-plg"><svg class="sc" viewBox="0 0 260 110" aria-hidden="true"><path class="cb" d="M-10 86 C24 108 42 55 64 55"/><g class="pg" transform="translate(70 0)"><rect class="pr" x="30" y="44" width="14" height="5" rx="1.5"/><rect class="pr" x="30" y="61" width="14" height="5" rx="1.5"/><rect class="gr" x="-8" y="47" width="12" height="16" rx="3"/><rect class="bd" x="0" y="38" width="34" height="34" rx="8"/><rect class="hl" x="5" y="42" width="5" height="26" rx="2.5"/></g><rect class="pl" x="206" y="18" width="46" height="74" rx="9"/><rect class="ho" x="214" y="44" width="7" height="5" rx="1.5"/><rect class="ho" x="214" y="61" width="7" height="5" rx="1.5"/><circle class="led" cx="238" cy="30" r="3.2"/><g class="spk"><line x1="201.1" y1="51.0" x2="192.4" y2="46.0"/><line x1="208.0" y1="47.0" x2="208.0" y2="37.0"/><line x1="214.9" y1="51.0" x2="223.6" y2="46.0"/><line x1="214.9" y1="59.0" x2="223.6" y2="64.0"/><line x1="208.0" y1="63.0" x2="208.0" y2="73.0"/><line x1="201.1" y1="59.0" x2="192.4" y2="64.0"/></g></svg><div class="ft"><p class="st" aria-live="polite"><i></i><b>Keine Verbindung</b></p><button type="button" class="bt">Erneut versuchen</button></div></div>

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.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Mikrointeraktionen

Alle ansehen: Mikrointeraktionen

Wofür du ihn nutzen kannst

Offline-Zustände zeigen meist ein graues Symbol und einen Link zum erneuten Versuch. Dieser gibt dem Moment eine greifbare Form: Ein Stecker baumelt am Kabel neben einer Wandsteckdose, und ein Klick auf Erneut versuchen oder Ziehen schiebt ihn federnd hinein, mit kleinem Funken und grüner Kontrolllampe. Die Kabelkurve wird bei jeder Bewegung neu berechnet.

Die Hauptfarbe zeigt den verbundenen Zustand, die Zweitfarbe den Funken. Ersetze die simulierte Verbindung durch deinen echten Reconnect-Aufruf und bewege den Stecker erst, wenn er gelingt. Trennen zieht ihn wieder heraus, so lässt sich die Demo leicht wiederholen.