Liste zum Herunterziehen und Aktualisieren

Zieh die Liste nach unten, der Indikator spannt sich mit der Geste, und beim Loslassen kommen neue Nachrichten.

Einstellungen

Hauptfarbe#6366f1

Zweitfarbe#ffffff

Größe16px

Tempo1x

Text

Code

index.html

<div class="uv-mpr"><div class="ind" aria-hidden="true"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg></div><ul class="ls"><li><span class="av" style="--c:#ec4899">L</span><div><b>Lucía</b><span>Rechnung für Oktober</span></div><time>9:41</time></li><li><span class="av" style="--c:#0ea5e9">M</span><div><b>Marcos</b><span>Reisefotos</span></div><time>9:12</time></li><li><span class="av" style="--c:#f59e0b">E</span><div><b>Designteam</b><span>Review am Montag</span></div><time>Gestern</time></li><li><span class="av" style="--c:#10b981">N</span><div><b>Nora</b><span>Kaffee heute Nachmittag?</span></div><time>Gestern</time></li></ul><button type="button" class="rf"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></svg>Aktualisieren</button><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.