Plan des sièges d'avion
Une section de cabine avec allée centrale : choisis un siège libre et la carte d'embarquement affiche son numéro et son type.
Réglages
Code
<fieldset class="uvq04-seat"><legend>Choisis ton siège</legend><div class="bp"><span>Siège</span><b>13C</b><em>Couloir</em></div><div class="cb"><div class="gr"><i aria-hidden="true">A</i><i aria-hidden="true">B</i><i aria-hidden="true">C</i><i aria-hidden="true"></i><i aria-hidden="true">D</i><i aria-hidden="true">E</i><i aria-hidden="true">F</i><label><input type="radio" name="uvq04-seat" value="12A" aria-label="12A" disabled><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="12B" aria-label="12B" disabled><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="12C" aria-label="12C"><span class="st"></span></label><i class="rn" aria-hidden="true">12</i><label><input type="radio" name="uvq04-seat" value="12D" aria-label="12D"><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="12E" aria-label="12E"><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="12F" aria-label="12F"><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="13A" aria-label="13A"><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="13B" aria-label="13B"><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="13C" aria-label="13C" checked><span class="st"></span></label><i class="rn" aria-hidden="true">13</i><label><input type="radio" name="uvq04-seat" value="13D" aria-label="13D"><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="13E" aria-label="13E" disabled><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="13F" aria-label="13F" disabled><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="14A" aria-label="14A" disabled><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="14B" aria-label="14B"><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="14C" aria-label="14C"><span class="st"></span></label><i class="rn" aria-hidden="true">14</i><label><input type="radio" name="uvq04-seat" value="14D" aria-label="14D"><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="14E" aria-label="14E"><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="14F" aria-label="14F"><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="15A" aria-label="15A"><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="15B" aria-label="15B"><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="15C" aria-label="15C" disabled><span class="st"></span></label><i class="rn" aria-hidden="true">15</i><label><input type="radio" name="uvq04-seat" value="15D" aria-label="15D" disabled><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="15E" aria-label="15E"><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="15F" aria-label="15F"><span class="st"></span></label></div></div><p class="lg" aria-hidden="true"><i></i>Libre<i class="x"></i>Occupé<i class="me"></i>Ton siège</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.
Plus dans Boutons radio
Voir tout : Boutons radioOù l’utiliser
Ce groupe de boutons radio dessine quatre rangées d'une cabine monocouloir, avec le nez arrondi, l'allée portant les numéros de rang et les lettres des sièges en haut. Les sièges libres sont teintés, les occupés barrés et désactivés, et celui qui est choisi se soulève en couleur pleine. Un court script met à jour la carte d'embarquement avec le numéro et le type : hublot, milieu ou couloir.
La couleur principale est celle de la compagnie pour les sièges libres et choisis. Indique les sièges occupés avec des inputs désactivés, ajoute des rangées en répétant le motif et garde la légende du bas pour savoir ce qui reste réservable.