Mercado de San Miguel
14 min32 min11 min 3,2 km
Ruta en mapa con panel de cristal
Un panel de cristal sobre el mapa con el tiempo de llegada, que cambia al elegir coche, a pie o bici.
Ajustes
Código
<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">Mercado 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="Medio de transporte"><label><input type="radio" name="uv-gmr" checked><span aria-label="Coche"><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="A pie"><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="Bici"><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">Ir</button></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Liquid Glass
Ver todos: Liquid GlassDónde usarlo
Las apps de navegación ponen lo esencial en una hoja de cristal para que el mapa siga viéndose debajo. Aquí la ruta se dibuja sobre un mapa de ciudad estilizado desde tu posición hasta la chincheta roja del destino, y el panel muestra el lugar, el tiempo y la distancia, un selector de coche, a pie o bici y un gran botón verde de Ir.
Al cambiar el medio de transporte, el tiempo estimado cambia con un pequeño deslizamiento, todo con radios y :has, sin JavaScript. Sustituye el mapa y la ruta por los tuyos y usa el color principal para el tiempo y el botón.