Ruta por los Picos de Europarutas.app/picos
HTML + CSSOverlays
Feuille de partage
Une feuille qui monte du bas avec des contacts, des applis et un bouton copier le lien qui confirme.
Réglages
16px
1x
Code
<div class="uv-osh"><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div><button type="button" class="fire">Partager</button><div class="scr"></div><div class="sh" role="dialog" aria-modal="true" aria-label="Partager"><i class="gr" aria-hidden="true"></i><div class="hd"><span class="th" aria-hidden="true"></span><span><b>Randonnée dans les Picos de Europa</b><small>rutas.app/picos</small></span></div><div class="pp"><button type="button"><span class="av" style="--c:#f97316">A</span>Ana</button><button type="button"><span class="av" style="--c:#3b82f6">L</span>Leo</button><button type="button"><span class="av" style="--c:#ec4899">S</span>Sara</button><button type="button"><span class="av" style="--c:#10b981">I</span>Iván</button><button type="button"><span class="av" style="--c:#a855f7">N</span>Noa</button></div><div class="ap"><button type="button"><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 17.5V7a2.5 2.5 0 0 1 2.5-2.5h9A2.5 2.5 0 0 1 19 7v6a2.5 2.5 0 0 1-2.5 2.5H9z"/></svg>Messages</button><button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="3"/><path d="M4 7l8 6 8-6"/></svg>Mail</button><button type="button" class="cp"><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="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></svg><span class="a">Copier le lien</span><span class="b">Copié</span></button><button type="button"><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="5" cy="12" r="1.3" fill="currentColor"/><circle cx="12" cy="12" r="1.3" fill="currentColor"/><circle cx="19" cy="12" r="1.3" fill="currentColor"/></svg>Más</button></div></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 Overlays
Voir tout : OverlaysOù l’utiliser
Le partage fonctionne mieux quand les destinations probables sont à un geste. Cette feuille monte du bas avec une poignée, un aperçu de ce qu'on partage, une rangée de contacts récents avec avatars colorés et une rangée d'actions pour messages, e-mail, copier le lien et plus. Copier le lien le place dans le presse-papiers et passe le bouton au vert.
C'est une boîte de dialogue modale qui place le focus à l'intérieur et se ferme avec Échap ou un appui sur le fond. Les rangées défilent horizontalement sur petit écran.