136 lines
3.4 KiB
HTML
136 lines
3.4 KiB
HTML
<!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>
|