Agua de hoy
/8
vasos
Verre d’eau avec paille
Un compteur d’eau : le niveau monte à chaque toucher, et la paille comme les rayures semblent brisées dans l’eau.
Réglages
Code
<div class="uvq11-wg" style="--lv:.375"><div class="gs"><i class="s1" aria-hidden="true"></i><button type="button" class="tb" aria-label="Ajouter un verre"><span class="bk"></span><span class="wt"><span class="s2"></span><span class="wr"></span><span class="bb"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i></span></span><span class="po"></span><span class="gw"></span></button></div><div class="cn"><p class="lb">Eau du jour</p><p class="ct"><output class="n">3</output><span>/8</span></p><p class="un">verres</p><div class="bt"><button type="button" class="ch mn" aria-label="Retirer un verre"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/></svg></button><button type="button" class="ch pl" aria-label="Ajouter un verre"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></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 Liquid Glass
Voir tout : Liquid GlassOù l’utiliser
Un suivi d’hydratation construit autour d’un verre en CSS. Derrière se trouve un mur rayé et, dans l’eau, les rayures paraissent plus larges et décalées tandis que la paille semble se casser à la surface, la réfraction qu’on voit sur n’importe quelle table. Chaque verre ajouté arrive avec un filet d’eau, un ménisque qui ondule et des bulles.
Changez la couleur de l’eau et de la paille, renommez l’étiquette et utilisez les boutons plus et moins ou touchez le verre lui-même. Huit verres le remplissent jusqu’en haut, pratique pour les applis de santé et le suivi d’habitudes.