Carte marine avec bouées
Une carte marine avec sondes et bouées qui clignotent à leur vrai rythme ; chacune explique son feu et de quel côté passer.
Réglages
Code
<div class="uvq08-sea" role="group" aria-label="Ria de Lúa"><div class="cht"><svg viewBox="0 0 100 70" aria-hidden="true"><path class="c10" d="M50 0C46 14 56 26 54 36S50 50 62 58S68 66 70 70"/><path class="c5" d="M62 0C58 12 66 22 66 30S60 44 72 50S78 62 80 70"/><path class="ld" d="M72 0H100V70H86C82 60 88 52 80 46S70 36 74 28S68 12 72 0Z"/><path class="tk" d="M8 68L38 59L54 46L66 38"/><text x="12" y="12">24</text><text x="30" y="48">18</text><text x="46" y="30">12</text><text x="60" y="62">7</text><text x="14" y="58">21</text><text x="40" y="8">15</text><text x="60" y="16">6</text><text x="7" y="40">27</text><text x="28" y="22">19</text><text x="48" y="70">9</text></svg><span class="ca" aria-hidden="true"><b>Ria de Lúa</b><span>Sondes en mètres</span></span><button type="button" class="by red up hc" style="left:38%;top:64%;--t:6s" aria-label="Bouée bâbord" aria-describedby="uvq08-sea-0"><i class="sh" aria-hidden="true"></i><i class="lt f2" aria-hidden="true"></i><span class="tt" role="tooltip" id="uvq08-sea-0"><b>Bouée bâbord</b><span>Laisse-la à gauche en entrant</span><code>Fl(2) R 6s</code></span></button><button type="button" class="by grn up hc" style="left:54%;top:50%;--t:4s" aria-label="Bouée tribord" aria-describedby="uvq08-sea-1"><i class="sh" aria-hidden="true"></i><i class="lt f1" aria-hidden="true"></i><span class="tt" role="tooltip" id="uvq08-sea-1"><b>Bouée tribord</b><span>Laisse-la à droite en entrant</span><code>Fl G 4s</code></span></button><button type="button" class="by car dn hc" style="left:22%;top:34%;--t:1s" aria-label="Cardinale nord" aria-describedby="uvq08-sea-2"><i class="sh" aria-hidden="true"></i><i class="lt q" aria-hidden="true"></i><span class="tt" role="tooltip" id="uvq08-sea-2"><b>Cardinale nord</b><span>Passe par son côté nord</span><code>Q</code></span></button><button type="button" class="by lh dn hr pk" style="left:84%;top:24%;--t:10s" aria-label="Phare de Punta Lúa" aria-describedby="uvq08-sea-3"><i class="sh" aria-hidden="true"></i><i class="lt f3" aria-hidden="true"></i><span class="tt" role="tooltip" id="uvq08-sea-3"><b>Phare de Punta Lúa</b><span>Visible à 18 milles</span><code>Fl(3) W 10s</code></span></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 Info-bulles
Voir tout : Info-bullesOù l’utiliser
Une carte marine dessinée en SVG avec des sondes, des isobathes en pointillés, une route conseillée et une côte sableuse avec son phare. Les bouées bâbord et tribord, la cardinale nord et le phare clignotent chacun à leur rythme grâce à des keyframes CSS. Au survol ou au focus, une étiquette dans le style de la carte la nomme, explique comment la passer et affiche le code de son feu.
La couleur principale règle l’anneau de focus, la secondaire l’eau. Change les codes de feu et leur cadence pour un vrai port, ou réutilise l’étiquette pour des sites de plongée, des mouillages ou des services de plage sur une carte côtière.