- Preparado
- En reparto
- Entregado
Toast de commande en livraison
Une camionnette avance sur l'itinéraire entre préparée, en livraison et livrée pendant que les minutes d'arrivée diminuent.
Réglages
Code
<div class="uvq09-dlv"><button type="button" class="fire">Afficher à nouveau</button><div class="tt" role="status"><div class="hd"><span class="tx"><b>Ta commande est en route</b><small>Arrivée vers 14:35</small></span><span class="eta" aria-hidden="true"><b>12</b><small>min</small></span></div><div class="rt" aria-hidden="true"><i class="tr"><i class="fi"></i></i><i class="dt d1"></i><i class="dt d2"></i><i class="dt d3"></i><span class="vn"><svg viewBox="0 0 32 20"><path class="bd" d="M2 3.5h16.5v11.5H2zM18.5 7.5h6l4.5 4.5v3H18.5z"/><path class="wn" d="M20.5 9h3.4l2.6 2.6h-6z"/><circle class="wh" cx="8" cy="15.5" r="2.6"/><circle class="wh" cx="24" cy="15.5" r="2.6"/></svg></span></div><ol class="lb"><li class="on">Prête</li><li class="on">En livraison</li><li>Livrée</li></ol></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 avis de livraison marchent mieux quand on voit la progression d'un coup d'œil. Ici une petite camionnette roule sur une route en pointillés, le trajet se remplit derrière elle, l'arrêt du milieu s'allume et les minutes avant l'arrivée défilent dans un badge. Tout repose sur des transitions CSS et un compteur minuscule, pour la livraison de repas, le suivi de colis et les coursiers.
La couleur principale peint la camionnette et le trajet parcouru ; la secondaire teinte la vitre. Déplace la camionnette vers un autre arrêt en changeant la valeur left et renomme les trois étapes selon les statuts de ta commande.