Toast de pluie minute par minute
Prévient qu'il va pleuvoir avec un graphique en barres minute par minute qui pousse à l'apparition et une alerte à activer.
Réglages
Code
<div class="uvq09-rdr"><button type="button" class="fire">Afficher à nouveau</button><div class="tt" role="status"><div class="hd"><span class="ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 15.5a4.5 4.5 0 0 1-.4-9A6 6 0 0 1 18 8a3.8 3.8 0 0 1-.5 7.5z"/></svg><i></i><i></i><i></i></span><span class="tx"><b>Pluie dans 15 minutes</b><small>Modérée de 18 h 15 à 18 h 40</small></span><button type="button" class="bl" aria-pressed="false" aria-label="Me prévenir quand ça commence"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 2h-15z"/><path d="M10 20.5a2 2 0 0 0 4 0"/></svg></button></div><div class="ch" aria-hidden="true"><i class="z" style="--h:4%;--i:0"></i><i class="z" style="--h:4%;--i:1"></i><i class="z" style="--h:4%;--i:2"></i><i class="z" style="--h:4%;--i:3"></i><i class="z" style="--h:4%;--i:4"></i><i class="z" style="--h:4%;--i:5"></i><i style="--h:12%;--i:6"></i><i style="--h:24%;--i:7"></i><i style="--h:40%;--i:8"></i><i style="--h:58%;--i:9"></i><i style="--h:74%;--i:10"></i><i style="--h:88%;--i:11"></i><i style="--h:95%;--i:12"></i><i style="--h:84%;--i:13"></i><i style="--h:66%;--i:14"></i><i style="--h:52%;--i:15"></i><i style="--h:44%;--i:16"></i><i style="--h:36%;--i:17"></i><i style="--h:26%;--i:18"></i><i style="--h:18%;--i:19"></i><i style="--h:11%;--i:20"></i><i style="--h:6%;--i:21"></i><i class="z" style="--h:4%;--i:22"></i><i class="z" style="--h:4%;--i:23"></i></div><div class="ax" aria-hidden="true"><span>Maintenant</span><span>30 min</span><span>60 min</span></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 Notifications
Voir tout : NotificationsOù l’utiliser
Les applis météo ont rendu familier le graphique de pluie de l'heure à venir, qui explique une prévision plus vite que des mots. Ce toast associe un nuage aux gouttes qui tombent, un court résumé et 24 barres qui montent l'une après l'autre grâce à des transitions CSS décalées. Une cloche avec aria-pressed permet de demander un rappel. Utile pour la météo et les événements en plein air.
La couleur principale remplit les barres et l'icône ; la secondaire marque les minutes sans pluie. Remplace le tableau de données par des valeurs réelles de ton API et change les libellés de l'axe si tu affiches une autre fenêtre de temps.