Mercado de San Miguel
14 min32 min11 min 3,2 km
Kartenroute mit Glaspanel
Ein Glaspanel über der Karte mit der Ankunftszeit, die sich je nach Auto, zu Fuß oder Rad ändert.
Einstellungen
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">Markt 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="Verkehrsmittel"><label><input type="radio" name="uv-gmr" checked><span aria-label="Auto"><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="Zu Fuß"><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="Fahrrad"><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">Los</button></div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Liquid Glass
Alle ansehen: Liquid GlassWofür du ihn nutzen kannst
Navigations-Apps legen das Wichtigste in ein Glaspanel, damit die Karte darunter sichtbar bleibt. Hier zeichnet sich die Route über einen stilisierten Stadtplan von deinem Standort zur roten Zielnadel, und das Panel zeigt Ort, Fahrzeit und Strecke, eine Auswahl für Auto, zu Fuß oder Rad sowie einen großen grünen Los-Button.
Beim Wechsel des Verkehrsmittels tauscht die Zeit mit kurzem Gleiten, alles über Radiobuttons und :has ohne JavaScript. Ersetze Karte und Route durch deine eigenen und nutze die Hauptfarbe für Zeit und Button.