Toast de llegada a un lugar
Un mapa en miniatura deja caer el pin con rebote y una onda de radar al detectar que has llegado a tu destino.
Ajustes
Código
<div class="uvq09-geo"><button type="button" class="fire">Mostrar de nuevo</button><div class="tt" role="status"><span class="mp" aria-hidden="true"><i class="pk"></i><i class="rv"></i><i class="rd"></i><i class="rd"></i><i class="pn"><svg viewBox="0 0 24 30"><path class="pb" d="M12 29s-9-9.3-9-16a9 9 0 0 1 18 0c0 6.7-9 16-9 16z"/><circle class="pc" cx="12" cy="13" r="3.6"/></svg></i></span><span class="tx"><b>Has llegado a la oficina</b><small>Calle de Alcalá 120 · 8:57</small><button type="button" class="ci"><span class="a">Registrar entrada</span><span class="b" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Entrada registrada</span></button></span></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 Toasts
Ver todos: ToastsDónde usarlo
Las apps con ubicación suelen confirmar la llegada con una simple línea de texto. Esta dibuja un mapa diminuto con calles, un parque y un río a base de degradados CSS superpuestos, deja caer un pin que se aplasta al aterrizar y lanza anillos de radar. El mapa sigue el tema claro u oscuro. Sirve para control horario, registros de entrada, repartidores y rutinas domóticas.
El color principal es el pin y el radar, y el secundario el parque y el botón confirmado. Cambia la dirección y la hora y conecta Registrar entrada con tu propio fichaje; la etiqueta cambia con un pequeño deslizamiento al completarse.