--- import Layout from "../layouts/Layout.astro"; import "../styles/global.css"; // 1 LOGIC: Obtención de datos reales para Getxo const res = await fetch("https://api.open-meteo.com/v1/forecast?latitude=43.34&longitude=-3.01&hourly=wind_speed_10m,wave_height&current=wind_speed_10m,wave_height&timezone=Europe%2FBerlin&forecast_days=1"); const data = await res.json(); // Preparar datos para la gráfica (próximas 12 horas) const labels = data.hourly.time.slice(0,12).map(t => new Date(t).getHours() + ":00"); const windData = data.hourly.wind_speed_10m.slice(0,12); const waveData = data.hourly.wave_height.slice(0,12); // Lógica del Oso const currentWave = data.current.wave_height; const currentWind = data.current.wind_speed_10m; const trend = waveData[4] - waveData[0]; let osoMsg = ""; if (currentWave > 1.5) osoMsg = "¡Mar brava! El oso sugiere quedarse en puerto."; else if (trend > .3) osoMsg = "El oso nota que el mar va a más. Precaución."; else osoMsg = "Condiciones óptimas. El oso da luz verde a la navegación."; --- <Layout title="Pronóstico del Oso - Getxo"> <main class="container-scientific"> <section class="aviso-oso" style="border-style: solid; background: #fff;"> <div style="display: flex; align-items: center; gap: 20px;"> <span style="font-size: 3.5rem;">🐻</span> <div> <h2 class="mono" style="margin: 0; color: var(--accent-blue);">Oráculo de Getxo</h2> <p style="margin: 5px 0 0 0;">"{osoMsg}"</p> </div> </div> </section> <div class="card-base" style="margin-bottom: 2rem;"> <h3 class="mono">Tendencia Próximas 12h (Viento y Ola)</h3> <div style="height: 300px; position: relative;"> <canvas id="osoChart"></canvas> </div> </div> <div class="tech-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;"> <div class="card-base"> <span class="mono">Viento Actual</span> <div style="font-size: 2rem; font-weight: bold;">{currentWind}<small style="font-size: 0.8rem;">km/h</small></div> </div> <div class="card-base"> <span class="mono">Altura de Ola</span> <div style="font-size: 2rem; font-weight: bold;">{currentWave}<small style="font-size: 0.8rem;">m</small></div> </div> </div> </main> <script is:inline src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script is:inline define:vars={{labels,windData,waveData}}> const ctx = document.getElementById("osoChart").getContext("2d"); new Chart(ctx,{type: "line",data: {labels: labels,datasets: [{label: "Viento (km/h)",data: windData,borderColor: "#0055ff",// Tu azul de global.css borderWidth: 2,pointRadius: 0,tension: .3,fill: false},{label: "Ola (m)",data: waveData,borderColor: "#000",borderWidth: 2,borderDash: [5,5],pointRadius: 0,yAxisID: "yWave",tension: .3,fill: false}]},options: {responsive: true,maintainAspectRatio: false,scales: {y: {beginAtZero: true,title: {display: true,text: "km/h",font: {family: "Courier New"}}},yWave: {position: "right",beginAtZero: true,title: {display: true,text: "Metros",font: {family: "Courier New"}}},x: {ticks: {font: {family: "Courier New"}}}},plugins: {legend: {labels: {font: {family: "Courier New"}}}}}}); </script> </Layout> a[data-astro-cid-eimmu3lg]{display:inline-block;text-decoration:none;color:inherit}a[data-astro-cid-eimmu3lg].active{text-decoration:underline;font-weight:700}.nav-scientific[data-astro-cid-3ef6ksr2]{padding:1rem;border-bottom:1px solid #111;background:#fff}.top-bar[data-astro-cid-3ef6ksr2]{display:flex;justify-content:space-between;align-items:center;max-width:1400px;margin:0 auto}.site-logo[data-astro-cid-3ef6ksr2]{height:50px;width:auto}.system-status[data-astro-cid-3ef6ksr2]{font-size:.6rem;color:#888;border:1px solid #eee;padding:4px 8px;border-radius:4px}.main-menu[data-astro-cid-3ef6ksr2]{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;margin-top:1.5rem;font-size:.7rem;font-family:monospace}.exp-tag{color:var(--accent-blue)!important;border:1px solid #e0eaff;padding:2px 6px;border-radius:3px;background:#f0f4ff}footer[data-astro-cid-sz7xmlte]{padding:4rem 1.5rem;text-align:center;color:var(--text-main);font-family:var(--font-serif)}.meteo-dinamica[data-astro-cid-sz7xmlte]{max-width:60ch;margin:0 auto 2rem;font-family:var(--font-mono);font-size:.85rem}.meteo-grid[data-astro-cid-sz7xmlte]{display:flex;justify-content:space-around;margin-top:.5rem;font-weight:700}.oso-warning[data-astro-cid-sz7xmlte]{max-width:60ch;margin:0 auto 2.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem}.bear-avatar[data-astro-cid-sz7xmlte] a[data-astro-cid-sz7xmlte]{font-size:2rem;text-decoration:none;color:#000;transition:transform .2s ease}.bocadillo-footer[data-astro-cid-sz7xmlte]{border:var(--border-main);padding:1rem 1.5rem;font-style:italic;font-size:.9rem;background:var(--bg-paper);text-align:left}.social-links[data-astro-cid-sz7xmlte]{font-family:var(--font-mono);font-size:.8rem;text-transform:uppercase}.prose[data-astro-cid-bvzihdzo]{width:100%;max-width:75ch;margin:auto;color:#1a1a1a}.title[data-astro-cid-bvzihdzo]{margin-bottom:3rem;padding:1rem 0;text-align:center}.title[data-astro-cid-bvzihdzo] h1[data-astro-cid-bvzihdzo]{margin:0 0 .5rem;border:none;font-size:2.5rem;color:#000}.date[data-astro-cid-bvzihdzo]{margin-bottom:1.5rem;color:#666;font-family:monospace;font-size:.9rem}.last-updated-on[data-astro-cid-bvzihdzo]{font-style:italic;font-size:.8rem}hr[data-astro-cid-bvzihdzo]{border:0;border-top:1px solid #000;margin:2rem 0 3rem}