Mareas en Cudillero

Hoy · coeficiente 92

14:202,7 mSubiendo

0006121824
HTML + CSSCards

Mareas del puerto con muelle

Curva de mareas del día: arrastra la hora y el agua sube o baja por la escala del muelle con el barco flotando encima.

Ajustes

16px
1x

Código

<article class="uvq07-tde" style="--lv:67.6%"><header><div><h3>Mareas en Cudillero</h3><p>Hoy · coeficiente 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="Subiendo" data-b="Bajando">Subiendo</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="Hora del día" 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>Pleamar</span><b>04:18</b><em>3,8 m</em></button></li><li><button type="button" data-t="10.510"><span>Bajamar</span><b>10:31</b><em>0,4 m</em></button></li><li><button type="button" data-t="16.720"><span>Pleamar</span><b>16:43</b><em>3,8 m</em></button></li><li><button type="button" data-t="22.930"><span>Bajamar</span><b>22:56</b><em>0,4 m</em></button></li></ul></article>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Cards

Ver todos: Cards

Dónde usarlo

Las mareas deciden cuándo puede salir un barco, y una curva sola cuesta de imaginar. Esta tarjeta une la línea de marea semidiurna con una pequeña escena de puerto: al mover la hora, el agua sube por las marcas de profundidad del muelle de piedra y el barco amarrado sube con ella. Encaja en puertos deportivos, apps de surf y pesca, turismo de costa y webs del tiempo.

El color principal es el mar y la curva; el secundario, el casco y el marcador de la hora. Cambia la hora de la pleamar y la amplitud en la fórmula, o toca las cuatro mareas para saltar a cada una.