Si tu perfil es privado, solo tus seguidores verán lo que publicas.
- Rrober_88
- Nnube.gris
Gestapelte Sheets mit Tiefe
Sheets, die sich übereinander öffnen: Das hintere schrumpft und dunkelt ab, Escape schließt nur das oberste.
Einstellungen
Code
<div class="uvq13-stk"><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div><button type="button" class="fire" aria-haspopup="dialog">Kontoeinstellungen</button><div class="scr"></div><section class="sh" data-i="0" role="dialog" aria-modal="true" aria-labelledby="uvq13-stk-0"><i class="gr" aria-hidden="true"></i><header><span></span><b id="uvq13-stk-0">Kontoeinstellungen</b><button type="button" class="x" aria-label="Schließen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></header><button type="button" class="row" data-to="1"><i class="ic" style="--c:#0ea5e9"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z"/></svg></i><span>Datenschutz</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button><button type="button" class="row"><i class="ic" style="--c:#f43f5e"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9.5a6 6 0 0 1 12 0c0 4.5 2 6 2 6H4s2-1.5 2-6M10 19a2 2 0 0 0 4 0"/></svg></i><span>Mitteilungen</span><em>Aktiviert</em></button><button type="button" class="row"><i class="ic" style="--c:#8b5cf6"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17M12 3.5c2.5 2.6 3.5 5.4 3.5 8.5s-1 5.9-3.5 8.5c-2.5-2.6-3.5-5.4-3.5-8.5s1-5.9 3.5-8.5"/></svg></i><span>Sprache</span><em>Spanisch</em></button></section><section class="sh" data-i="1" role="dialog" aria-modal="true" aria-labelledby="uvq13-stk-1"><i class="gr" aria-hidden="true"></i><header><button type="button" class="bk" aria-label="Zurück"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button><b id="uvq13-stk-1">Datenschutz</b><span></span></header><label class="row"><span>Privates Profil</span><input type="checkbox" role="switch" class="sw"></label><button type="button" class="row" data-to="2"><span>Blockierte Konten</span><em>2</em><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button><p class="nt">Ist dein Profil privat, sehen nur deine Follower, was du postest.</p></section><section class="sh" data-i="2" role="dialog" aria-modal="true" aria-labelledby="uvq13-stk-2"><i class="gr" aria-hidden="true"></i><header><button type="button" class="bk" aria-label="Zurück"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button><b id="uvq13-stk-2">Blockierte Konten</b><span></span></header><ul><li><span class="av" style="--c:#f97316">R</span><span class="nm">rober_88</span><button type="button" class="ub"><span class="a">Entsperren</span><span class="b">Blockieren</span></button></li><li><span class="av" style="--c:#6366f1">N</span><span class="nm">nube.gris</span><button type="button" class="ub"><span class="a">Entsperren</span><span class="b">Blockieren</span></button></li></ul></section></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 Overlays
Alle ansehen: OverlaysWofür du ihn nutzen kannst
Einstellungen gehen oft zwei oder drei Ebenen tief, und gestapelte Sheets halten diesen Weg sichtbar. Jedes neue Sheet fährt hoch, während das vorherige kleiner wird, etwas nach oben rückt und dunkler wird, sodass die Tiefe erkennbar bleibt. Zurück-Buttons und Escape nehmen jeweils eine Ebene ab, der Fokus kehrt zur auslösenden Zeile zurück. Passt zu Einstellungen, Bestellschritten und Filtern.
Die Hauptfarbe füllt den Schalter und die Entsperren-Buttons, das Textfeld benennt das erste Sheet. Neue Zeilen bekommen ein data-to mit dem nächsten Sheet, die Tiefenregeln skalieren jede Ebene automatisch.