Puerta principal
Cerrada
Mantén pulsado para abrirSe cerrará sola en unos segundos
86 %
HTML + CSSCartes
Serrure connectée à maintenir
Une carte de serrure connectée : maintiens le bouton, l'anneau se remplit, l'anse saute puis se referme seule après quelques secondes.
Réglages
16px
1x
Code
<article class="uvq07-lck"><header><div><h3>Porte d’entrée</h3><p class="st"><i></i><span aria-live="polite" data-a="Verrouillée" data-b="Déverrouillée">Verrouillée</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="Maintiens pour ouvrir"><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">Maintiens pour ouvrir</span><span class="h2">Se reverrouille seule dans quelques secondes</span></p><footer>Dernière ouverture : Marta, 18:04</footer></article>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Cartes
Voir tout : CartesOù l’utiliser
Ouvrir une porte doit demander un geste volontaire, et l'appui long est la réponse classique. Un anneau autour du cadenas se remplit tant que tu maintiens avec le pointeur, Espace ou Entrée ; relâcher trop tôt le fait revenir, et une fois plein l'anse saute avec un ressort avant que l'anneau ne se vide comme minuterie de verrouillage. Pour domotique, contrôle d'accès et confirmations.
La couleur principale est l'anneau de progression et l'état ouvert, la seconde la carte graphite. Modifie la durée d'appui dans la transition CSS et le délai de verrouillage dans le script.