Sitzplan im Flugzeug
Ein Kabinenabschnitt mit Mittelgang: Du wählst einen freien Platz, und die Bordkarte zeigt Nummer und Art des Sitzes.
Einstellungen
Code
<fieldset class="uvq04-seat"><legend>Wähle deinen Sitz</legend><div class="bp"><span>Sitz</span><b>13C</b><em>Gang</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>Frei<i class="x"></i>Belegt<i class="me"></i>Dein Sitz</p></fieldset>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 Radiobuttons
Alle ansehen: RadiobuttonsWofür du ihn nutzen kannst
Diese Radiogruppe zeigt vier Reihen einer Schmalrumpfkabine mit abgerundeter Nase, Mittelgang mit Reihennummern und Sitzbuchstaben darüber. Freie Plätze sind getönt, belegte durchgestrichen und deaktiviert, der gewählte hebt sich in voller Farbe ab. Ein kurzes Skript aktualisiert die Bordkarte mit Sitznummer und ob es Fenster, Mitte oder Gang ist.
Die Hauptfarbe ist die Airline-Farbe für freie und gewählte Sitze. Belegte Plätze sind deaktivierte Inputs, weitere Reihen entstehen durch Wiederholen des Musters, und die Legende unten erklärt, welche Plätze noch buchbar sind.