Materias

Cajones abiertos:

HTML + CSSFiltres

Meuble fichier de bibliothèque

Un meuble fichier en bois où chaque thème est un tiroir à poignée en laiton qui s'ouvre quand on le coche.

Réglages

16px
1x

Code

<fieldset class="uvq05-cc"><legend>Thèmes</legend><div class="cab"><label><input type="checkbox"><span class="dw"><span class="cards" aria-hidden="true"></span><span class="fr"><span class="tag">Art</span><i class="pl" aria-hidden="true"></i></span></span></label><label><input type="checkbox" checked><span class="dw"><span class="cards" aria-hidden="true"></span><span class="fr"><span class="tag">Sciences</span><i class="pl" aria-hidden="true"></i></span></span></label><label><input type="checkbox"><span class="dw"><span class="cards" aria-hidden="true"></span><span class="fr"><span class="tag">Histoire</span><i class="pl" aria-hidden="true"></i></span></span></label><label><input type="checkbox"><span class="dw"><span class="cards" aria-hidden="true"></span><span class="fr"><span class="tag">Poésie</span><i class="pl" aria-hidden="true"></i></span></span></label><label><input type="checkbox" checked><span class="dw"><span class="cards" aria-hidden="true"></span><span class="fr"><span class="tag">Voyages</span><i class="pl" aria-hidden="true"></i></span></span></label><label><input type="checkbox"><span class="dw"><span class="cards" aria-hidden="true"></span><span class="fr"><span class="tag">Cuisine</span><i class="pl" aria-hidden="true"></i></span></span></label></div><p class="ct"><span>Tiroirs ouverts :</span> <span class="n"></span></p></fieldset>

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 Filtres

Voir tout : Filtres

Où l’utiliser

Les fichiers des bibliothèques étaient le premier filtre : un tiroir par thème, rempli de fiches. Ici chaque tiroir est une case à cocher avec son étiquette tapée à la machine dans un cadre en laiton, et le cocher fait glisser le tiroir vers l'avant pour montrer les fiches. Le veinage du bois est fait de dégradés CSS. Pour librairies, archives, catalogues de cours et applis de lecture.

La première couleur règle le laiton, la seconde le bois, du chêne clair au noyer. Garde des étiquettes d'un seul mot et associe le meuble à une liste qui regroupe les résultats par tiroirs ouverts.