Mercado de San Miguel
14 min32 min11 min 3,2 km
Itinéraire sur carte avec panneau en verre
Un panneau en verre sur la carte avec l'heure d'arrivée, qui change selon voiture, marche ou vélo.
Réglages
Code
<div class="uv-gmr"><svg class="mp" viewBox="0 0 320 224" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><rect width="320" height="224" fill="#e8ecef"/><path d="M0 60h320M0 150h320M70 0v224M180 0v224M260 0v224" stroke="#fff" stroke-width="14"/><path d="M0 105h320M120 0v224" stroke="#fff" stroke-width="6"/><rect x="190" y="70" width="60" height="70" rx="10" fill="#cfe8c9"/><path d="M20 224c40-60 90-40 120-90s60-40 110-110" fill="none" stroke="#bfe0f5" stroke-width="16" opacity=".8"/><path class="rt" d="M70 190V150H180V60H262" fill="none" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/><circle cx="70" cy="190" r="7" fill="#fff" stroke="var(--c2)" stroke-width="4"/><circle cx="262" cy="60" r="8" fill="#ff3b30" stroke="#fff" stroke-width="3"/></svg><div class="pn"><p class="ds">Marché de San Miguel</p><p class="et"><b class="t1">14 min</b><b class="t2">32 min</b><b class="t3">11 min</b> <span>3,2 km</span></p><div class="md" role="radiogroup" aria-label="Mode de transport"><label><input type="radio" name="uv-gmr" checked><span aria-label="Voiture"><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="M5 16V11.5L7 6.5h10l2 5V16M5 16h14M5 16v2M19 16v2"/><circle cx="8" cy="13.5" r=".8" fill="currentColor"/><circle cx="16" cy="13.5" r=".8" fill="currentColor"/></svg></span></label><label><input type="radio" name="uv-gmr"><span aria-label="À pied"><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="13" cy="4.5" r="1.8"/><path d="M10 21l2-6-3-3 1.5-4.5L14 9l2.5 3M12 15l3 6"/></svg></span></label><label><input type="radio" name="uv-gmr"><span aria-label="Vélo"><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="6" cy="16" r="3.5"/><circle cx="18" cy="16" r="3.5"/><path d="M6 16l4-7h5l3 7M10 9l2 7h-6M14 6h2"/></svg></span></label></div><button type="button" class="go">Y aller</button></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 Liquid Glass
Voir tout : Liquid GlassOù l’utiliser
Les applis de navigation placent l'essentiel dans une feuille de verre pour que la carte reste visible dessous. Ici, l'itinéraire se dessine sur un plan de ville stylisé depuis ta position jusqu'à l'épingle rouge de destination, et le panneau affiche le lieu, la durée et la distance, un sélecteur voiture, marche ou vélo et un grand bouton vert Y aller.
Changer de mode de transport remplace la durée estimée avec un léger glissement, uniquement avec des boutons radio et :has. Remplace la carte et l'itinéraire par les tiens et utilise la couleur principale pour la durée et le bouton.