nuria.viajaMerzouga

3.218me gusta

Atardecer en las dunas

HTML + CSSMikrointeraktionen

Doppeltipp aufs Foto zum Liken

Tippe zweimal aufs Foto, und ein großes Herz schlägt genau dort, wo du getippt hast; das kleine Herz füllt sich und zählt eins hoch.

Einstellungen

16px
1x

Code

<div class="uvq15-dbl"><header><span class="av" aria-hidden="true">N</span><div><b>nuria.viaja</b><small>Merzouga</small></div></header><button type="button" class="ph" aria-label="Doppeltippen zum Liken"><svg viewBox="0 0 320 240" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="uvq15-dbl-s" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#fdba74"/><stop offset=".6" stop-color="#fed7aa"/><stop offset="1" stop-color="#fde68a"/></linearGradient></defs><rect width="320" height="240" fill="url(#uvq15-dbl-s)"/><circle cx="214" cy="104" r="34" fill="#fff7ed" opacity=".9"/><path d="M0 150C60 120 120 128 170 146S260 132 320 118V240H0Z" fill="#f59e0b"/><path d="M0 182C70 150 130 160 190 178S280 168 320 160V240H0Z" fill="#d97706"/><path d="M0 214C80 190 150 196 220 212S300 206 320 202V240H0Z" fill="#b45309"/><path d="M96 168l6-14 4 14M88 172h22" stroke="#7c2d12" stroke-width="3" stroke-linecap="round" fill="none"/></svg><span class="bh" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 20.5s-7.5-4.6-9.3-9.2C1.4 8 3.4 4.5 6.9 4.5c2.1 0 3.6 1.2 5.1 3 1.5-1.8 3-3 5.1-3 3.5 0 5.5 3.5 4.2 6.8-1.8 4.6-9.3 9.2-9.3 9.2Z"/></svg></span></button><footer><button type="button" class="lk" aria-pressed="false" aria-label="Gefällt mir"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20.5s-7.5-4.6-9.3-9.2C1.4 8 3.4 4.5 6.9 4.5c2.1 0 3.6 1.2 5.1 3 1.5-1.8 3-3 5.1-3 3.5 0 5.5 3.5 4.2 6.8-1.8 4.6-9.3 9.2-9.3 9.2Z"/></svg></button><p class="ct"><b class="n">3.218</b><span>Gefällt mir</span></p></footer><p class="cap">Sonnenuntergang in den Dünen</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.

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

Mehr aus Mikrointeraktionen

Alle ansehen: Mikrointeraktionen

Wofür du ihn nutzen kannst

Ein Foto per Doppeltipp zu liken kennen die meisten aus sozialen Apps, und diese Karte bildet die Geste ohne Bibliotheken nach. Ein großes weißes Herz erscheint genau an der Stelle des Doppeltipps, schlägt kurz und schwebt davon, während sich das Herz darunter mit einem Federn und einem Ring füllt und die Zahl der Likes um eins steigt.

Die Hauptfarbe ist das gefüllte Herz, die Zweitfarbe der Ring um den Avatar. Das Foto ist ein Inline-SVG und lässt sich durch ein eigenes Bild ersetzen. Per Tastatur liked Enter auf dem Foto von der Mitte aus, der Herz-Button schaltet wie gewohnt um.