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;
|
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 {
|
nav ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
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">
|
<html lang="es">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
|
<title>Estadísticas | El Tiempo</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<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">
|
<link rel="stylesheet" href="css/estilos.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="app-tiempo">
|
<body class="app-tiempo">
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<h1>El Tiempo</h1>
|
<h1>Estadísticas del Tiempo</h1>
|
||||||
<h2 id="location">Obteniendo ubicación...</h2>
|
<select id="city-select">
|
||||||
<h3 id="fecha-actual">Fecha</h3>
|
<option value="Madrid">Madrid</option>
|
||||||
<h3 id="santo-del-dia">Santo del dia</h3>
|
<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>
|
</header>
|
||||||
|
|
||||||
<main class="container">
|
<main class="container">
|
||||||
|
|
||||||
|
<!-- ÚLTIMO DATO -->
|
||||||
<article class="tarjeta" id="sun-card">
|
<article class="tarjeta">
|
||||||
<h2 id="sun-title">Amanecer y Anochecer</h2>
|
<h2>Hoy</h2>
|
||||||
<p>Amanecer: <strong id="sunrise">--:--</strong></p>
|
<p>Fecha: <strong id="last-date">--</strong></p>
|
||||||
<p>Anochecer: <strong id="sunset">--:--</strong></p>
|
<p>Temperatura: <strong id="last-temp">--</strong></p>
|
||||||
<p>Duración del día: <strong id="day-length">--:--</strong></p>
|
<p>Humedad: <strong id="last-humidity">--</strong></p>
|
||||||
<p id="countdown">Tiempo hasta anochecer: --:--:--</p>
|
<p>Lluvia: <strong id="last-rain">--</strong></p>
|
||||||
<p id="sun-icon">☀️</p>
|
<p>Viento: <strong id="last-wind">--</strong></p>
|
||||||
<hr>
|
<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>Fase lunar actual: <strong id="moon-phase">Calculando...</strong></p>
|
||||||
<p id="moon-icon">🌑</p>
|
<p id="moon-icon">🌑</p>
|
||||||
</article>
|
</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>
|
<!-- RESUMEN MES ACTUAL -->
|
||||||
|
<article class="tarjeta">
|
||||||
<div id="moon-weekdays">
|
<h2>Resumen del mes actual</h2>
|
||||||
<span>L</span>
|
<p>Días registrados: <strong id="month-days">--</strong></p>
|
||||||
<span>M</span>
|
<p>Máxima absoluta: <strong id="month-max">--</strong></p>
|
||||||
<span>X</span>
|
<p>Mínima absoluta: <strong id="month-min">--</strong></p>
|
||||||
<span>J</span>
|
<p>Lluvia: <strong id="month-rain">--</strong></p>
|
||||||
<span>V</span>
|
<p>Humedad: <strong id="month-humidity">--</strong></p>
|
||||||
<span>S</span>
|
</article>
|
||||||
<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>
|
|
||||||
|
|
||||||
|
<!-- TENDENCIA HISTÓRICA -->
|
||||||
|
<article class="tarjeta">
|
||||||
|
<h2>Tendencia histórica del mes actual</h2>
|
||||||
|
<div id="trend-container">
|
||||||
|
<p>Cargando tendencia…</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a class="btn" href="bullet-journal.html">Abrir Bullet Journal</a>
|
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
-->
|
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|
@ -129,7 +67,6 @@
|
||||||
<p>El Tiempo © <span id="year"></span> Tatiana Villa</p>
|
<p>El Tiempo © <span id="year"></span> Tatiana Villa</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<script src="js/codigo.js"></script>
|
<script src="js/estadisticas.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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-sunrise").textContent = last.amanecer;
|
||||||
$("last-sunset").textContent = last.anochecer;
|
$("last-sunset").textContent = last.anochecer;
|
||||||
|
|
||||||
$("stats-location").textContent = `${ciudadActual} - Estadísticas`;
|
$("stats-location").textContent = `Estadisticas de ${ciudadActual}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
// ====================
|
// ====================
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue