Menu de difficulté rétro
L'écran d'une console 8 bits avec lignes de balayage : un curseur en pixels clignote à côté de la difficulté choisie.
Réglages
Code
<fieldset class="uvq04-px"><legend>Difficulté</legend><label><input type="radio" name="uvq04-px"><i class="cu" aria-hidden="true"></i><span class="tx">Facile</span><span class="pw" aria-hidden="true"><i class="on"></i><i></i><i></i><i></i></span></label><label><input type="radio" name="uvq04-px" checked><i class="cu" aria-hidden="true"></i><span class="tx">Normal</span><span class="pw" aria-hidden="true"><i class="on"></i><i class="on"></i><i></i><i></i></span></label><label><input type="radio" name="uvq04-px"><i class="cu" aria-hidden="true"></i><span class="tx">Difficile</span><span class="pw" aria-hidden="true"><i class="on"></i><i class="on"></i><i class="on"></i><i></i></span></label><label><input type="radio" name="uvq04-px"><i class="cu" aria-hidden="true"></i><span class="tx">Cauchemar</span><span class="pw" aria-hidden="true"><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i></span></label><p class="pr" aria-hidden="true">Appuie sur espace</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 reproduit l'écran de difficulté d'une vieille console de salon, sur un tube cathodique bombé avec lignes de balayage, léger scintillement et vignettage sombre. Une flèche en pixels clignote à côté du niveau choisi, son nom brille en jaune et une rangée de blocs roses montre sa difficulté. Parfait pour les jeux, les cours à défis et les pages nostalgiques.
La couleur principale colore le curseur et le texte choisi, la secondaire le titre et les blocs. Garde les libellés en capitales et sous dix lettres pour tenir sur une ligne, et adapte l'invite clignotante du bas à tes commandes.