Recibidos
- Carmen GilPresupuesto de la reforma
- Pablo RuizFotos del viaje9:12
- Marta LeónEntradas del concierto8:05
Menu pour reporter un e-mail
L'horloge d'un e-mail ouvre un menu de moments, chacun avec un petit ciel et l'heure réelle dans ta langue ; le choix masque l'e-mail.
Réglages
Code
<div class="uvq13-snz"><p class="hh">Boîte de réception</p><ul class="ib"><li class="r on"><span class="av" style="--c:#f97316" aria-hidden="true">C</span><span class="tx"><b>Carmen Gil</b><span>Devis des travaux</span></span><span class="ha"><button type="button" class="ar" aria-label="Archiver"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7.5h16v-3H4zM5.5 7.5V19h13V7.5M10 11.5h4"/></svg></button><button type="button" class="fire" aria-haspopup="menu" aria-label="Reporter"><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="13" r="7.5"/><path d="M12 9.5V13l2.5 1.5M4.5 4.5l2.5-2M19.5 4.5l-2.5-2"/></svg></button></span></li><li class="r"><span class="av" style="--c:#0ea5e9" aria-hidden="true">P</span><span class="tx"><b>Pablo Ruiz</b><span>Photos du voyage</span></span><small>9:12</small></li><li class="r"><span class="av" style="--c:#e11d48" aria-hidden="true">M</span><span class="tx"><b>Marta León</b><span>Billets du concert</span></span><small>8:05</small></li></ul><div class="po" role="menu" aria-label="Reporter jusqu'à…"><p class="pt" aria-hidden="true">Reporter jusqu'à…</p><button type="button" role="menuitem" class="op" data-k="ev"><i class="sk ev" aria-hidden="true"></i><span>Plus tard aujourd'hui</span><small></small></button><button type="button" role="menuitem" class="op" data-k="tm"><i class="sk tm" aria-hidden="true"></i><span>Demain matin</span><small></small></button><button type="button" role="menuitem" class="op" data-k="we"><i class="sk we" aria-hidden="true"></i><span>Ce week-end</span><small></small></button><button type="button" role="menuitem" class="op" data-k="nw"><i class="sk nw" aria-hidden="true"></i><span>La semaine prochaine</span><small></small></button><button type="button" role="menuitem" class="op" data-k="pk"><i class="sk pk" aria-hidden="true"></i><span>Choisir la date et l'heure</span><small></small></button><div class="cu"><div class="dy"></div><div class="hs"><button type="button" aria-pressed="true">8:00</button><button type="button" aria-pressed="false">13:00</button><button type="button" aria-pressed="false">18:00</button></div><button type="button" class="sv">Reporter</button></div></div><p class="tst" aria-live="polite"><span class="m"></span><button type="button" class="un">Annuler</button></p></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 Overlays
Voir tout : OverlaysOù l’utiliser
Reporter un e-mail est une petite décision qui mérite un menu clair. L'horloge de la ligne survolée ouvre une bulle avec plus tard aujourd'hui, demain, ce week-end et la semaine prochaine, chacun avec un minuscule ciel dont le soleil est à cette heure et l'heure écrite dans la langue de la page grâce à Intl. Le choix masque la ligne et affiche une barre d'annulation.
La couleur principale est l'état actif, la seconde le lien d'annulation. Les libellés sont calculés à partir de la vraie date et restent justes chaque jour, et le menu fonctionne avec les flèches, Entrée et Échap.