Connexion en verre
Une carte de connexion en verre avec des champs translucides, un bouton d'entrée et une option clé d'accès.
Réglages
Code
<div class="uv-glg"><form class="cd"><p class="ti">Bon retour</p><label><span>Mail</span><input type="email" autocomplete="email" placeholder="vous@email.fr"></label><label><span>Mot de passe</span><input type="password" autocomplete="current-password" placeholder="••••••••"></label><button type="submit" class="go">Se connecter</button><button type="button" class="pk"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="8" cy="9" r="3.5"/><path d="M3 20c0-3 2.2-5.5 5-5.5s5 2.5 5 5.5M15 10.5a2.5 2.5 0 1 1 3.5 2.3V18l-1 1-1-1 .6-1-.6-1 .6-1-.6-.8v-1.4A2.5 2.5 0 0 1 15 10.5z"/></svg>Utiliser une clé d’accès</button></form></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
L'écran de connexion est souvent la première impression d'une appli, et une carte en verre sur une aurore vive donne un ton haut de gamme sans images lourdes. La carte contient un message d'accueil, des champs e-mail et mot de passe translucides qui s'éclairent au focus, un bouton blanc plein pour se connecter et un bouton secondaire pour utiliser une clé d'accès.
Les champs ont les bons attributs autocomplete pour que navigateurs et gestionnaires de mots de passe les remplissent, et la démo n'envoie pas le formulaire pour que tu branches ta logique. Change l'accueil avec le champ de texte.