mejorando apis para utilizar fechas
This commit is contained in:
Tatiana Villa Ema
parent
3f3e098177
commit
20da533902
|
|
@ -35,6 +35,18 @@ header h1 {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
#city-select {
|
||||
margin-top: 12px;
|
||||
padding: 8px 16px;
|
||||
background: rgba(20, 20, 20, 0.8);
|
||||
color: var(--color-primario);
|
||||
border: 1px solid var(--color-borde);
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -1,66 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Estadísticas | El Tiempo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="css/estilos.css">
|
||||
</head>
|
||||
|
||||
<body class="app-tiempo">
|
||||
|
||||
<header>
|
||||
<h1>Estadísticas del Tiempo</h1>
|
||||
<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 © <span id="year"></span> Tatiana Villa</p>
|
||||
</footer>
|
||||
|
||||
<script src="js/estadisticas.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -2,126 +2,64 @@
|
|||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Estadísticas | El Tiempo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>El Tiempo</title>
|
||||
<link rel="icon" href="img/eltiempo-logo.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="css/estilos.css">
|
||||
</head>
|
||||
|
||||
<body class="app-tiempo">
|
||||
|
||||
<header>
|
||||
<h1>El Tiempo</h1>
|
||||
<h2 id="location">Obteniendo ubicación...</h2>
|
||||
<h3 id="fecha-actual">Fecha</h3>
|
||||
<h3 id="santo-del-dia">Santo del dia</h3>
|
||||
<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">
|
||||
|
||||
|
||||
<article class="tarjeta" id="sun-card">
|
||||
<h2 id="sun-title">Amanecer y Anochecer</h2>
|
||||
<p>Amanecer: <strong id="sunrise">--:--</strong></p>
|
||||
<p>Anochecer: <strong id="sunset">--:--</strong></p>
|
||||
<p>Duración del día: <strong id="day-length">--:--</strong></p>
|
||||
<p id="countdown">Tiempo hasta anochecer: --:--:--</p>
|
||||
<p id="sun-icon">☀️</p>
|
||||
<hr>
|
||||
<!-- Ú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>
|
||||
|
||||
<!--
|
||||
<article class="tarjeta" id="moon-card">
|
||||
<h2>Calendario lunar vs tiempo</h2>
|
||||
<p>Fase lunar actual: <strong id="moon-phase">Calculando...</strong></p>
|
||||
<p id="moon-icon">🌑</p>
|
||||
|
||||
<h3>Calendario lunar del mes</h3>
|
||||
|
||||
<div id="moon-weekdays">
|
||||
<span>L</span>
|
||||
<span>M</span>
|
||||
<span>X</span>
|
||||
<span>J</span>
|
||||
<span>V</span>
|
||||
<span>S</span>
|
||||
<span>D</span>
|
||||
</div>
|
||||
|
||||
<div id="moon-mini-calendar"></div>
|
||||
|
||||
</article>
|
||||
-->
|
||||
|
||||
|
||||
<article class="tarjeta" id="weather-card">
|
||||
<h2>Tiempo Actual 🌤️</h2>
|
||||
|
||||
<p class="temp-linea">
|
||||
<svg
|
||||
class="termometro calor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 64 64"
|
||||
width="24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M32 2
|
||||
a10 10 0 0 0-10 10v26.2
|
||||
a16 16 0 1 0 20 0V12
|
||||
a10 10 0 0 0-10-10z
|
||||
m0 4
|
||||
a6 6 0 0 1 6 6v28.1
|
||||
l.9.6
|
||||
a12 12 0 1 1-13.8 0l.9-.6V12
|
||||
a6 6 0 0 1 6-6z"/>
|
||||
<rect x="30" y="18" width="4" height="18" rx="2"/>
|
||||
<circle cx="32" cy="46" r="6"/>
|
||||
</svg>
|
||||
|
||||
<strong id="temperature">--°C</strong>
|
||||
</p>
|
||||
|
||||
<p>Condición: <strong id="condition">--</strong></p>
|
||||
<p>Humedad: <strong id="humidity">--%</strong></p>
|
||||
<p>Viento: <strong id="wind">-- km/h</strong></p>
|
||||
<a class="btn" href="estadisticas.html">Ver estadísticas</a>
|
||||
<!-- 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>
|
||||
|
||||
<!--
|
||||
<article class="tarjeta" id="bullet-summary">
|
||||
|
||||
<h2>Bullet Journal</h2>
|
||||
|
||||
<div class="bj-resumen">
|
||||
|
||||
<div class="bj-item">
|
||||
<span>ROSARIO</span>
|
||||
<strong id="bj-rosario">0</strong>
|
||||
<!-- TENDENCIA HISTÓRICA -->
|
||||
<article class="tarjeta">
|
||||
<h2>Tendencia histórica del mes actual</h2>
|
||||
<div id="trend-container">
|
||||
<p>Cargando tendencia…</p>
|
||||
</div>
|
||||
|
||||
<div class="bj-item">
|
||||
<span>CAMINAR</span>
|
||||
<strong id="bj-caminar">0</strong>
|
||||
</div>
|
||||
|
||||
<div class="bj-item">
|
||||
<span>VITAMINAS</span>
|
||||
<strong id="bj-vitaminas">0</strong>
|
||||
</div>
|
||||
|
||||
<div class="bj-item">
|
||||
<span>AGUA</span>
|
||||
<strong id="bj-agua">0</strong>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<a class="btn" href="bullet-journal.html">Abrir Bullet Journal</a>
|
||||
|
||||
</article>
|
||||
-->
|
||||
|
||||
</main>
|
||||
|
||||
|
|
@ -129,7 +67,6 @@
|
|||
<p>El Tiempo © <span id="year"></span> Tatiana Villa</p>
|
||||
</footer>
|
||||
|
||||
<script src="js/codigo.js"></script>
|
||||
|
||||
<script src="js/estadisticas.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,135 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>El Tiempo</title>
|
||||
<link rel="icon" href="img/eltiempo-logo.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="css/estilos.css">
|
||||
</head>
|
||||
|
||||
<body class="app-tiempo">
|
||||
|
||||
<header>
|
||||
<h1>El Tiempo</h1>
|
||||
<h2 id="location">Obteniendo ubicación...</h2>
|
||||
<h3 id="fecha-actual">Fecha</h3>
|
||||
<h3 id="santo-del-dia">Santo del dia</h3>
|
||||
</header>
|
||||
|
||||
<main class="container">
|
||||
|
||||
|
||||
<article class="tarjeta" id="sun-card">
|
||||
<h2 id="sun-title">Amanecer y Anochecer</h2>
|
||||
<p>Amanecer: <strong id="sunrise">--:--</strong></p>
|
||||
<p>Anochecer: <strong id="sunset">--:--</strong></p>
|
||||
<p>Duración del día: <strong id="day-length">--:--</strong></p>
|
||||
<p id="countdown">Tiempo hasta anochecer: --:--:--</p>
|
||||
<p id="sun-icon">☀️</p>
|
||||
<hr>
|
||||
<p>Fase lunar actual: <strong id="moon-phase">Calculando...</strong></p>
|
||||
<p id="moon-icon">🌑</p>
|
||||
</article>
|
||||
|
||||
<!--
|
||||
<article class="tarjeta" id="moon-card">
|
||||
<h2>Calendario lunar vs tiempo</h2>
|
||||
<p>Fase lunar actual: <strong id="moon-phase">Calculando...</strong></p>
|
||||
<p id="moon-icon">🌑</p>
|
||||
|
||||
<h3>Calendario lunar del mes</h3>
|
||||
|
||||
<div id="moon-weekdays">
|
||||
<span>L</span>
|
||||
<span>M</span>
|
||||
<span>X</span>
|
||||
<span>J</span>
|
||||
<span>V</span>
|
||||
<span>S</span>
|
||||
<span>D</span>
|
||||
</div>
|
||||
|
||||
<div id="moon-mini-calendar"></div>
|
||||
|
||||
</article>
|
||||
-->
|
||||
|
||||
|
||||
<article class="tarjeta" id="weather-card">
|
||||
<h2>Tiempo Actual 🌤️</h2>
|
||||
|
||||
<p class="temp-linea">
|
||||
<svg
|
||||
class="termometro calor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 64 64"
|
||||
width="24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M32 2
|
||||
a10 10 0 0 0-10 10v26.2
|
||||
a16 16 0 1 0 20 0V12
|
||||
a10 10 0 0 0-10-10z
|
||||
m0 4
|
||||
a6 6 0 0 1 6 6v28.1
|
||||
l.9.6
|
||||
a12 12 0 1 1-13.8 0l.9-.6V12
|
||||
a6 6 0 0 1 6-6z"/>
|
||||
<rect x="30" y="18" width="4" height="18" rx="2"/>
|
||||
<circle cx="32" cy="46" r="6"/>
|
||||
</svg>
|
||||
|
||||
<strong id="temperature">--°C</strong>
|
||||
</p>
|
||||
|
||||
<p>Condición: <strong id="condition">--</strong></p>
|
||||
<p>Humedad: <strong id="humidity">--%</strong></p>
|
||||
<p>Viento: <strong id="wind">-- km/h</strong></p>
|
||||
<a class="btn" href="estadisticas.html">Ver estadísticas</a>
|
||||
</article>
|
||||
|
||||
<!--
|
||||
<article class="tarjeta" id="bullet-summary">
|
||||
|
||||
<h2>Bullet Journal</h2>
|
||||
|
||||
<div class="bj-resumen">
|
||||
|
||||
<div class="bj-item">
|
||||
<span>ROSARIO</span>
|
||||
<strong id="bj-rosario">0</strong>
|
||||
</div>
|
||||
|
||||
<div class="bj-item">
|
||||
<span>CAMINAR</span>
|
||||
<strong id="bj-caminar">0</strong>
|
||||
</div>
|
||||
|
||||
<div class="bj-item">
|
||||
<span>VITAMINAS</span>
|
||||
<strong id="bj-vitaminas">0</strong>
|
||||
</div>
|
||||
|
||||
<div class="bj-item">
|
||||
<span>AGUA</span>
|
||||
<strong id="bj-agua">0</strong>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<a class="btn" href="bullet-journal.html">Abrir Bullet Journal</a>
|
||||
|
||||
</article>
|
||||
-->
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>El Tiempo © <span id="year"></span> Tatiana Villa</p>
|
||||
</footer>
|
||||
|
||||
<script src="js/codigo.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -70,7 +70,7 @@ function renderLastData(data) {
|
|||
$("last-sunrise").textContent = last.amanecer;
|
||||
$("last-sunset").textContent = last.anochecer;
|
||||
|
||||
$("stats-location").textContent = `${ciudadActual} - Estadísticas`;
|
||||
$("stats-location").textContent = `Estadisticas de ${ciudadActual}`;
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
|
|
|||
Loading…
Reference in New Issue