Mareas en Cudillero

Hoy · coeficiente 92

14:202,7 mSubiendo

0006121824
HTML + CSSCartes

Marées du port avec quai

La courbe des marées du jour : fais glisser l'heure et l'eau monte ou descend le long du quai, avec le bateau dessus.

Réglages

16px
1x

Code

<article class="uvq07-tde" style="--lv:67.6%"><header><div><h3>Marées à Cudillero</h3><p>Aujourd’hui · coefficient 92</p></div><p class="rd"><b class="tm">14:20</b><span><b class="hm">2,7 m</b><span class="tr" data-a="Montante" data-b="Descendante">Montante</span></span></p></header><div class="sn" aria-hidden="true"><i class="sky"></i><span class="qy"><i style="--m:0"><b>0</b></i><i style="--m:1"><b>1</b></i><i style="--m:2"><b>2</b></i><i style="--m:3"><b>3</b></i><i style="--m:4"><b>4</b></i><i class="bl"></i></span><span class="wt"><i class="wv"></i></span><span class="bt"><svg viewBox="0 0 40 30"><path class="ms" d="M17 3v19"/><path class="sl" d="M18 4l11 15H18z"/><path class="hl" d="M3 21h34l-5 7H8z"/><path class="wl" d="M5 24h30"/></svg></span></div><div class="cv" role="slider" tabindex="0" aria-label="Heure de la journée" aria-valuemin="0" aria-valuemax="1439" aria-valuenow="860" aria-valuetext="14:20 · 2,7 m"><svg viewBox="0 0 240 60" preserveAspectRatio="none"><path class="ar" d="M0,60 L0.0,40.40 2.5,38.19 5.0,35.83 7.5,33.35 10.0,30.81 12.5,28.23 15.0,25.66 17.5,23.15 20.0,20.72 22.5,18.42 25.0,16.29 27.5,14.36 30.0,12.65 32.5,11.21 35.0,10.05 37.5,9.18 40.0,8.63 42.5,8.41 45.0,8.50 47.5,8.93 50.0,9.67 52.5,10.71 55.0,12.05 57.5,13.65 60.0,15.49 62.5,17.55 65.0,19.78 67.5,22.16 70.0,24.65 72.5,27.20 75.0,29.78 77.5,32.34 80.0,34.85 82.5,37.26 85.0,39.53 87.5,41.63 90.0,43.53 92.5,45.19 95.0,46.59 97.5,47.71 100.0,48.52 102.5,49.02 105.0,49.20 107.5,49.05 110.0,48.58 112.5,47.79 115.0,46.69 117.5,45.32 120.0,43.67 122.5,41.79 125.0,39.71 127.5,37.44 130.0,35.05 132.5,32.55 135.0,29.99 137.5,27.41 140.0,24.85 142.5,22.36 145.0,19.97 147.5,17.72 150.0,15.65 152.5,13.79 155.0,12.16 157.5,10.81 160.0,9.74 162.5,8.97 165.0,8.53 167.5,8.40 170.0,8.60 172.5,9.13 175.0,9.97 177.5,11.11 180.0,12.53 182.5,14.21 185.0,16.13 187.5,18.24 190.0,20.53 192.5,22.95 195.0,25.46 197.5,28.03 200.0,30.60 202.5,33.15 205.0,35.63 207.5,38.00 210.0,40.22 212.5,42.27 215.0,44.09 217.5,45.67 220.0,46.98 222.5,48.00 225.0,48.72 227.5,49.12 230.0,49.19 232.5,48.93 235.0,48.36 237.5,47.47 240.0,46.28 L240,60Z"/><polyline class="ln" points="0.0,40.40 2.5,38.19 5.0,35.83 7.5,33.35 10.0,30.81 12.5,28.23 15.0,25.66 17.5,23.15 20.0,20.72 22.5,18.42 25.0,16.29 27.5,14.36 30.0,12.65 32.5,11.21 35.0,10.05 37.5,9.18 40.0,8.63 42.5,8.41 45.0,8.50 47.5,8.93 50.0,9.67 52.5,10.71 55.0,12.05 57.5,13.65 60.0,15.49 62.5,17.55 65.0,19.78 67.5,22.16 70.0,24.65 72.5,27.20 75.0,29.78 77.5,32.34 80.0,34.85 82.5,37.26 85.0,39.53 87.5,41.63 90.0,43.53 92.5,45.19 95.0,46.59 97.5,47.71 100.0,48.52 102.5,49.02 105.0,49.20 107.5,49.05 110.0,48.58 112.5,47.79 115.0,46.69 117.5,45.32 120.0,43.67 122.5,41.79 125.0,39.71 127.5,37.44 130.0,35.05 132.5,32.55 135.0,29.99 137.5,27.41 140.0,24.85 142.5,22.36 145.0,19.97 147.5,17.72 150.0,15.65 152.5,13.79 155.0,12.16 157.5,10.81 160.0,9.74 162.5,8.97 165.0,8.53 167.5,8.40 170.0,8.60 172.5,9.13 175.0,9.97 177.5,11.11 180.0,12.53 182.5,14.21 185.0,16.13 187.5,18.24 190.0,20.53 192.5,22.95 195.0,25.46 197.5,28.03 200.0,30.60 202.5,33.15 205.0,35.63 207.5,38.00 210.0,40.22 212.5,42.27 215.0,44.09 217.5,45.67 220.0,46.98 222.5,48.00 225.0,48.72 227.5,49.12 230.0,49.19 232.5,48.93 235.0,48.36 237.5,47.47 240.0,46.28"/><line class="nw" x1="143.3" x2="143.3" y1="0" y2="60"/></svg><i class="dt" style="left:59.72%;top:35.91%"></i><span class="ax"><span>00</span><span>06</span><span>12</span><span>18</span><span>24</span></span></div><ul class="nx"><li><button type="button" data-t="4.300"><span>Pleine mer</span><b>04:18</b><em>3,8 m</em></button></li><li><button type="button" data-t="10.510"><span>Basse mer</span><b>10:31</b><em>0,4 m</em></button></li><li><button type="button" data-t="16.720"><span>Pleine mer</span><b>16:43</b><em>3,8 m</em></button></li><li><button type="button" data-t="22.930"><span>Basse mer</span><b>22:56</b><em>0,4 m</em></button></li></ul></article>

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.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Cartes

Voir tout : Cartes

Où l’utiliser

Les marées décident quand un bateau peut sortir, et une courbe seule se ressent mal. Cette carte relie la courbe de marée semi-diurne à une petite scène de port : en déplaçant l'heure, l'eau monte le long des repères du quai en pierre et le bateau amarré s'élève avec elle. Pour ports de plaisance, applis de surf et de pêche, tourisme côtier et sites météo.

La couleur principale est la mer et la courbe, la seconde la coque et le repère horaire. Modifie l'heure de pleine mer et le marnage dans la formule, ou touche les quatre marées pour y sauter directement.