Toast de montre connectée
Un cadran rond vibre avec des ondes à son arrivée et montre l'anneau d'activité, qui se ferme quand on touche Terminé.
Réglages
Code
<div class="uvq09-wch"><button type="button" class="fire">Afficher à nouveau</button><div class="tt" role="status"><i class="hp" aria-hidden="true"></i><i class="hp" aria-hidden="true"></i><span class="cr" aria-hidden="true"></span><span class="fc"><svg class="rg" viewBox="0 0 36 36" aria-hidden="true"><circle class="bg" cx="18" cy="18" r="16.5"/><circle class="fg" cx="18" cy="18" r="16.5" pathLength="1"/></svg><span class="ic" aria-hidden="true"><span class="a"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="4.5" r="2"/><path d="M12 8v6M12 14l-3 6.5M12 14l3 6.5M6.5 11l5.5-2.5 5.5 2.5"/></svg></span><span class="b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></span><b>C'est l'heure de bouger</b><small>9 heures sur 12</small><button type="button" class="ok">Terminé</button></span></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 Notifications
Voir tout : NotificationsOù l’utiliser
Les montres connectées nous préviennent d'une petite tape au poignet, et ce toast en fait une notification ronde. Un cadran noir avec lunette métallique et couronne tremble un instant pendant que des ondes s'étendent comme des impulsions haptiques, et un anneau d'activité en SVG se remplit aux trois quarts. Terminé ferme l'anneau et remplace l'icône par une coche. Pour les applis santé, le suivi d'habitudes et les rappels de pause.
La couleur principale sert à l'anneau et au bouton, la secondaire aux ondes haptiques. Règle l'anneau avec stroke-dashoffset pour afficher n'importe quelle progression et garde un titre sur deux lignes courtes pour qu'il tienne dans le cercle.