Puerta principal
Cerrada
Mantén pulsado para abrirSe cerrará sola en unos segundos
86 %
HTML + CSSKarten
Smart Lock zum Gedrückthalten
Eine Smart-Lock-Karte: Button halten, der Ring füllt sich, der Bügel springt auf und schließt nach ein paar Sekunden wieder.
Einstellungen
16px
1x
Code
<article class="uvq07-lck"><header><div><h3>Haustür</h3><p class="st"><i></i><span aria-live="polite" data-a="Verriegelt" data-b="Entriegelt">Verriegelt</span></p></div><span class="bt"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="7" width="16" height="10" rx="2"/><path d="M21 10.5v3"/><rect x="5" y="9" width="10" height="6" rx="1" fill="currentColor" stroke="none"/></svg>86 %</span></header><button type="button" class="hb" aria-label="Zum Öffnen gedrückt halten"><svg class="rg" viewBox="0 0 100 100" aria-hidden="true"><circle class="tr" cx="50" cy="50" r="46"/><circle class="pr" cx="50" cy="50" r="46" pathLength="1"/></svg><svg class="lk" viewBox="0 0 24 24" aria-hidden="true"><path class="sh" d="M8 11V7.5a4 4 0 0 1 8 0V11"/><rect x="5" y="11" width="14" height="10" rx="2.5"/><circle cx="12" cy="16" r="1.3"/></svg></button><p class="hn"><span class="h1">Zum Öffnen gedrückt halten</span><span class="h2">Verriegelt sich in wenigen Sekunden selbst</span></p><footer>Zuletzt geöffnet: Marta, 18:04</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
Eine Tür zu öffnen sollte eine bewusste Geste sein, und Gedrückthalten ist die klassische Antwort. Ein Ring um das Schloss füllt sich, solange du mit Zeiger, Leertaste oder Enter hältst, früheres Loslassen spult ihn zurück, und am Ende springt der Bügel federnd auf, bevor der Ring als Timer bis zum Verriegeln abläuft. Gut für Smart-Home-Apps, Zutrittskontrolle und Bestätigungen.
Die Hauptfarbe ist der Fortschrittsring und der offene Zustand, die zweite die Graphitkarte. Die Haltezeit änderst du in der CSS-Transition, die Wartezeit bis zum Schließen im Skript.