HTML + CSSSchalter

Bitte-nicht-stören-Schild

Ein Schild an der Klinke einer Holztür dreht sich um und pendelt, wenn es von Herein auf Bitte nicht stören wechselt.

Einstellungen

16px
1x

Code

<label class="uvq03-dhg"><input type="checkbox" role="switch"><span class="dr"><i class="pn"></i><i class="kb"></i><span class="cd" aria-hidden="true"><b class="f a"><span>Herein</span></b><b class="f b"><span>Nicht stören</span></b></span></span>Fokusmodus</label>

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 Schalter

Alle ansehen: Schalter

Wofür du ihn nutzen kannst

Dieser Schalter ist eine Holztür mit Füllung, Messingknauf und einem daran hängenden Schild, wie man es aus Hotelzimmern kennt. Aus zeigt die grüne Seite Herein; eingeschaltet dreht sich das Schild in 3D auf die rote Seite Nicht stören und pendelt am Knauf aus. Ein kurzes Skript wiederholt das Pendeln bei jedem Wechsel. Passt zu Fokusmodi, Statusanzeigen, Besprechungsräumen sowie Hotel- und Buchungs-Apps.

Die Hauptfarbe ist die Nicht-stören-Seite, die zweite die Willkommensseite. Die Texte auf dem Schild stehen im HTML, du kannst also auch Besetzt und Frei oder Aufnahme und Offen schreiben, kurz gehalten.