eltiempoweb/frontend/index_mio.html

74 lines
2.3 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Estadísticas | El Tiempo</title>
<link rel="shortcut icon" href="/img/tatianalogo.png" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/estilos_mio.css">
</head>
<body class="app-tiempo">
<header>
<h1>Estadísticas del Tiempo</h1>
<select id="city-select">
<option value="Madrid">Madrid</option>
<option value="l'Alfàs del Pi">l'Alfàs del Pi</option>
<option value="l'Ampolla">l'Ampolla</option>
</select>
<h2 id="stats-location">Cargando datos…</h2>
<div id="mes-navegacion">
<button id="prev-month" class="mes-btn"></button>
<span id="mes-nombre">Enero</span>
<button id="next-month" class="mes-btn"></button>
</div>
</header>
<main class="container">
<!-- ÚLTIMO DATO -->
<article class="tarjeta">
<h2>Hoy</h2>
<p>Fecha: <strong id="last-date">--</strong></p>
<p>Temperatura: <strong id="last-temp">--</strong></p>
<p>Humedad: <strong id="last-humidity">--</strong></p>
<p>Lluvia: <strong id="last-rain">--</strong></p>
<p>Viento: <strong id="last-wind">--</strong></p>
<p>Amanecer: <strong id="last-sunrise">--</strong></p>
<p>Anochecer: <strong id="last-sunset">--</strong></p>
<h2>Luna</h2>
<p>Fase lunar actual: <strong id="moon-phase">Calculando...</strong></p>
<p id="moon-icon">🌑</p>
</article>
<!-- RESUMEN MES ACTUAL -->
<article class="tarjeta">
<h2>Resumen del mes actual</h2>
<p>Días registrados: <strong id="month-days">--</strong></p>
<p>Máxima absoluta: <strong id="month-max">--</strong></p>
<p>Mínima absoluta: <strong id="month-min">--</strong></p>
<p>Lluvia: <strong id="month-rain">--</strong></p>
<p>Humedad: <strong id="month-humidity">--</strong></p>
</article>
<!-- TENDENCIA HISTÓRICA -->
<article class="tarjeta">
<h2>Tendencia histórica del mes actual</h2>
<div id="trend-container">
<p>Cargando tendencia…</p>
</div>
</article>
</main>
<footer>
<p>El Tiempo &copy; <span id="year"></span> Tatiana Villa</p>
</footer>
<script src="js/estadisticas.js?v=2"></script>
</body>
</html>