Affichette ne pas déranger

Une affichette suspendue à la poignée d’une porte en bois se retourne et se balance en passant d’Entrez à Ne pas déranger.

Réglages

Couleur principale#d94a4a

Couleur secondaire#3fa66b

Taille16px

Vitesse1x

Texte

Code

index.html

<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>Entrez</span></b><b class="f b"><span>Ne pas déranger</span></b></span></span>Mode concentration</label>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Interrupteurs

Voir tout : Interrupteurs

Toggle iOS élastique

InterrupteursHTML + CSS

Toggle jour et nuit

InterrupteursHTML + CSS

Interrupteur ON / OFF

InterrupteursHTML + CSS

Interrupteur néon

InterrupteursHTML + CSS

Toggle croix et coche

InterrupteursHTML + CSS

Toggle néomorphique

InterrupteursHTML + CSS

Interrupteur mural

InterrupteursHTML + CSS

Toggle liquide

InterrupteursHTML + CSS

Où l’utiliser

Cet interrupteur est une porte en bois à panneau, avec une poignée en laiton et une affichette accrochée, comme celles des chambres d’hôtel. Éteint, la face verte dit Entrez ; activé, l’affichette se retourne en 3D sur la face rouge Ne pas déranger et se balance sur la poignée avant de s’arrêter. Il convient aux modes concentration, salles de réunion et apps d’hôtel.

La couleur principale est la face ne pas déranger, la seconde la face d’accueil. Les textes de l’affichette sont dans le HTML : vous pouvez écrire Occupé et Libre ou En direct et Ouvert, en restant bref.