Montant sur écran LCD
Un montant qui se saisit comme sur une calculatrice solaire : chiffres à sept segments, centimes d'abord et touches en caoutchouc.
Réglages
Code
<div class="uvq06-lcd"><label for="uvq06-lcd-in" class="lb">Montant</label><div class="cs"><div class="sol" aria-hidden="true"><i></i><i></i><i></i><i></i></div><div class="sc"><input id="uvq06-lcd-in" inputmode="numeric" autocomplete="off" spellcheck="false"><div class="dp" aria-hidden="true"><span class="dg"><i class="a"></i><i class="b"></i><i class="c"></i><i class="d"></i><i class="e"></i><i class="f"></i><i class="g"></i></span><span class="dg"><i class="a"></i><i class="b"></i><i class="c"></i><i class="d"></i><i class="e"></i><i class="f"></i><i class="g"></i></span><span class="dg"><i class="a"></i><i class="b"></i><i class="c"></i><i class="d"></i><i class="e"></i><i class="f"></i><i class="g"></i></span><span class="dg"><i class="a"></i><i class="b"></i><i class="c"></i><i class="d"></i><i class="e"></i><i class="f"></i><i class="g"></i></span><span class="dg"><i class="a"></i><i class="b"></i><i class="c"></i><i class="d"></i><i class="e"></i><i class="f"></i><i class="g"></i></span><span class="dg"><i class="a"></i><i class="b"></i><i class="c"></i><i class="d"></i><i class="e"></i><i class="f"></i><i class="g"></i><i class="p"></i></span><span class="dg"><i class="a"></i><i class="b"></i><i class="c"></i><i class="d"></i><i class="e"></i><i class="f"></i><i class="g"></i></span><span class="dg"><i class="a"></i><i class="b"></i><i class="c"></i><i class="d"></i><i class="e"></i><i class="f"></i><i class="g"></i></span><span class="eu">€</span></div></div><div class="ks"><button type="button" data-k="c">C</button><button type="button" data-k="00">00</button><button type="button" data-k="del" aria-label="Effacer">⌫</button></div></div></div>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 Champs
Voir tout : ChampsOù l’utiliser
Ce champ de montant emprunte l'écran d'une calculatrice de poche. Chaque chiffre est dessiné avec sept segments en CSS, ceux qui sont éteints restent à peine visibles comme sur un vrai cristal liquide, et le rétroéclairage s'allume au focus. Les chiffres entrent par la droite, centimes d'abord, comme sur un terminal de paiement, sans virgule à taper.
Teinte le cristal et les segments avec les deux couleurs pour obtenir un écran vert, gris ou ambré. Il fonctionne bien pour un écran de pourboire, une app de dépenses ou une démo de caisse, à côté d'un seul grand bouton de validation.