Copie de mot de passe avec effacement
À la copie, les points du mot de passe font une vague et un anneau décompte jusqu'à vider le presse-papiers.
Réglages
Code
<div class="uvq15-pwd"><header><span class="ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span><div><b>Mail pro</b><small>lucia@estudio.es</small></div></header><div class="fd"><span class="pw" aria-hidden="true" translate="no"><span class="ch" style="--i:0"><i>•</i><b>L</b></span><span class="ch" style="--i:1"><i>•</i><b>i</b></span><span class="ch" style="--i:2"><i>•</i><b>n</b></span><span class="ch" style="--i:3"><i>•</i><b>c</b></span><span class="ch" style="--i:4"><i>•</i><b>e</b></span><span class="ch" style="--i:5"><i>•</i><b>.</b></span><span class="ch" style="--i:6"><i>•</i><b>A</b></span><span class="ch" style="--i:7"><i>•</i><b>z</b></span><span class="ch" style="--i:8"><i>•</i><b>u</b></span><span class="ch" style="--i:9"><i>•</i><b>l</b></span><span class="ch" style="--i:10"><i>•</i><b>.</b></span><span class="ch" style="--i:11"><i>•</i><b>2</b></span><span class="ch" style="--i:12"><i>•</i><b>0</b></span><span class="ch" style="--i:13"><i>•</i><b>2</b></span><span class="ch" style="--i:14"><i>•</i><b>7</b></span></span><button type="button" class="ey" aria-pressed="false" aria-label="Afficher le mot de passe"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/><path class="sl" d="M4 4l16 16"/></svg></button><button type="button" class="cp" aria-label="Copier le mot de passe"><span class="a"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/></svg></span><span class="b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></button></div><p class="cd" aria-hidden="true"><span class="rg"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" pathLength="100"/><circle class="t" cx="12" cy="12" r="10" pathLength="100"/></svg><b class="n">15</b></span><span>Sera effacé du presse-papiers</span></p><p class="sr" aria-live="polite"></p></div>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 Micro-interactions
Voir tout : Micro-interactionsOù l’utiliser
Les gestionnaires de mots de passe copient des secrets dans le presse-papiers, et les bons le vident après quelques secondes. Cette fiche montre ce comportement : un clic sur copier fait passer une vague sur les points masqués, l'icône devient une coche et un anneau décompte quinze secondes avant de vider le presse-papiers. L'œil retourne chaque point pour révéler son caractère.
La couleur principale sert au bouton de copie et à l'icône du compte, la secondaire à l'anneau du décompte. Change le mot de passe dans le balisage et le script copiera exactement ce texte. Il convient aux coffres-forts, aux réglages et aux écrans de clés d'API ou de codes de secours.