Passwort kopieren mit automatischem Löschen
Beim Kopieren laufen die Passwortpunkte als Welle, und ein Ring zählt herunter, bis die Zwischenablage geleert ist.
Einstellungen
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>Arbeits-E-Mail</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="Passwort anzeigen"><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="Passwort kopieren"><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>Wird aus der Zwischenablage gelöscht</span></p><p class="sr" aria-live="polite"></p></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.
Mehr aus Mikrointeraktionen
Alle ansehen: MikrointeraktionenWofür du ihn nutzen kannst
Passwortmanager legen Geheimnisse in die Zwischenablage, und gute leeren sie nach wenigen Sekunden wieder. Dieser Eintrag zeigt genau das: Ein Klick auf Kopieren schickt eine Welle durch die verdeckten Punkte, das Symbol wird zum Haken und ein Ring zählt fünfzehn Sekunden herunter, bevor die Zwischenablage geleert wird. Das Auge dreht jeden Punkt zu seinem Zeichen um.
Die Hauptfarbe gilt für den Kopier-Button und das Kontosymbol, die Zweitfarbe für den Countdown-Ring. Ändere das Passwort im Markup, und das Skript kopiert genau diesen Text. Passt zu Tresor-Apps, Einstellungsseiten und Ansichten mit API-Schlüsseln oder Wiederherstellungscodes.