API tools faq
paste
sergio_educacionit

hora y temperatura

sergio_educacionit
Apr 15th, 2026 (edited)
80
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.83 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.  
  7.     <title>Hora y Temperatura en Seis Países</title>
  8.  
  9.     <style>
  10.         * {
  11.             box-sizing: border-box;
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  15.  
  16.         body {
  17.             min-height: 100vh;
  18.             font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  19.             color: #ffffff;
  20.             background:
  21.                 radial-gradient(circle at top left, #2563eb 0%, transparent 35%),
  22.                 radial-gradient(circle at bottom right, #7c3aed 0%, transparent 35%),
  23.                 linear-gradient(135deg, #0f172a, #111827);
  24.             padding: 60px 20px;
  25.         }
  26.  
  27.         .pagina {
  28.             width: 100%;
  29.             max-width: 1200px;
  30.             margin: 0 auto;
  31.         }
  32.  
  33.         .encabezado {
  34.             text-align: center;
  35.             margin-bottom: 50px;
  36.         }
  37.  
  38.         .encabezado span {
  39.             display: inline-block;
  40.             margin-bottom: 14px;
  41.             padding: 7px 16px;
  42.             border: 1px solid rgba(255, 255, 255, 0.2);
  43.             border-radius: 999px;
  44.             color: #bfdbfe;
  45.             background: rgba(255, 255, 255, 0.08);
  46.             font-size: 0.9rem;
  47.             letter-spacing: 0.08em;
  48.             text-transform: uppercase;
  49.             backdrop-filter: blur(10px);
  50.         }
  51.  
  52.         h1 {
  53.             margin-bottom: 14px;
  54.             font-size: clamp(2rem, 5vw, 3.8rem);
  55.             font-weight: 800;
  56.             line-height: 1.1;
  57.             letter-spacing: -0.04em;
  58.         }
  59.  
  60.         .subtitulo {
  61.             max-width: 650px;
  62.             margin: 0 auto;
  63.             color: #cbd5e1;
  64.             font-size: 1.05rem;
  65.             line-height: 1.6;
  66.         }
  67.  
  68.         .contenedor {
  69.             display: grid;
  70.             grid-template-columns: repeat(3, minmax(0, 1fr));
  71.             gap: 24px;
  72.         }
  73.  
  74.         .reloj {
  75.             position: relative;
  76.             overflow: hidden;
  77.             min-height: 230px;
  78.             padding: 28px;
  79.             border: 1px solid rgba(255, 255, 255, 0.14);
  80.             border-radius: 24px;
  81.             background: rgba(255, 255, 255, 0.08);
  82.             box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
  83.             backdrop-filter: blur(18px);
  84.             transition:
  85.                 transform 0.3s ease,
  86.                 border-color 0.3s ease,
  87.                 box-shadow 0.3s ease;
  88.         }
  89.  
  90.         .reloj::before {
  91.             content: "";
  92.             position: absolute;
  93.             top: -60px;
  94.             right: -60px;
  95.             width: 150px;
  96.             height: 150px;
  97.             border-radius: 50%;
  98.             background: linear-gradient(
  99.                 135deg,
  100.                 rgba(96, 165, 250, 0.45),
  101.                 rgba(168, 85, 247, 0.15)
  102.             );
  103.             filter: blur(8px);
  104.         }
  105.  
  106.         .reloj:hover {
  107.             transform: translateY(-8px);
  108.             border-color: rgba(147, 197, 253, 0.55);
  109.             box-shadow: 0 28px 60px rgba(0, 0, 0, 0.35);
  110.         }
  111.  
  112.         .pais {
  113.             position: relative;
  114.             z-index: 1;
  115.             margin-bottom: 28px;
  116.             color: #e2e8f0;
  117.             font-size: 1.15rem;
  118.             font-weight: 700;
  119.         }
  120.  
  121.         .hora {
  122.             position: relative;
  123.             z-index: 1;
  124.             margin-bottom: 20px;
  125.             color: #ffffff;
  126.             font-size: clamp(2rem, 4vw, 2.8rem);
  127.             font-weight: 800;
  128.             letter-spacing: -0.04em;
  129.         }
  130.  
  131.         .temp {
  132.             position: relative;
  133.             z-index: 1;
  134.             display: inline-flex;
  135.             align-items: center;
  136.             gap: 8px;
  137.             padding: 10px 14px;
  138.             border: 1px solid rgba(125, 211, 252, 0.25);
  139.             border-radius: 12px;
  140.             color: #bae6fd;
  141.             background: rgba(14, 165, 233, 0.12);
  142.             font-size: 0.98rem;
  143.             font-weight: 600;
  144.         }
  145.  
  146.         .temp::before {
  147.             content: "●";
  148.             color: #38bdf8;
  149.             font-size: 0.75rem;
  150.         }
  151.  
  152.         .pie {
  153.             margin-top: 45px;
  154.             color: #94a3b8;
  155.             text-align: center;
  156.             font-size: 0.9rem;
  157.         }
  158.  
  159.         @media (max-width: 950px) {
  160.             .contenedor {
  161.                 grid-template-columns: repeat(2, minmax(0, 1fr));
  162.             }
  163.         }
  164.  
  165.         @media (max-width: 650px) {
  166.             body {
  167.                 padding: 40px 16px;
  168.             }
  169.  
  170.             .encabezado {
  171.                 margin-bottom: 35px;
  172.             }
  173.  
  174.             .contenedor {
  175.                 grid-template-columns: 1fr;
  176.             }
  177.  
  178.             .reloj {
  179.                 min-height: 210px;
  180.             }
  181.         }
  182.     </style>
  183. </head>
  184.  
  185. <body>
  186.     <main class="pagina">
  187.         <header class="encabezado">
  188.             <span>Información en tiempo real</span>
  189.  
  190.             <h1>Hora y Temperatura Actual en Seis Países</h1>
  191.  
  192.             <p class="subtitulo">
  193.                 Consulta la hora local y la temperatura actual de distintas
  194.                 ciudades del mundo desde una sola pantalla.
  195.             </p>
  196.         </header>
  197.  
  198.         <section class="contenedor">
  199.             <article class="reloj">
  200.                 <div class="pais">Argentina · Buenos Aires</div>
  201.                 <div class="hora" id="arg"></div>
  202.                 <div class="temp" id="temp-arg">
  203.                     Cargando temperatura...
  204.                 </div>
  205.             </article>
  206.  
  207.             <article class="reloj">
  208.                 <div class="pais">España · Madrid</div>
  209.                 <div class="hora" id="esp"></div>
  210.                 <div class="temp" id="temp-esp">
  211.                     Cargando temperatura...
  212.                 </div>
  213.             </article>
  214.  
  215.             <article class="reloj">
  216.                 <div class="pais">México · Ciudad de México</div>
  217.                 <div class="hora" id="mex"></div>
  218.                 <div class="temp" id="temp-mex">
  219.                     Cargando temperatura...
  220.                 </div>
  221.             </article>
  222.  
  223.             <article class="reloj">
  224.                 <div class="pais">Estados Unidos · Nueva York</div>
  225.                 <div class="hora" id="usa"></div>
  226.                 <div class="temp" id="temp-usa">
  227.                     Cargando temperatura...
  228.                 </div>
  229.             </article>
  230.  
  231.             <article class="reloj">
  232.                 <div class="pais">Japón · Tokio</div>
  233.                 <div class="hora" id="jpn"></div>
  234.                 <div class="temp" id="temp-jpn">
  235.                     Cargando temperatura...
  236.                 </div>
  237.             </article>
  238.  
  239.             <article class="reloj">
  240.                 <div class="pais">Reino Unido · Londres</div>
  241.                 <div class="hora" id="uk"></div>
  242.                 <div class="temp" id="temp-uk">
  243.                     Cargando temperatura...
  244.                 </div>
  245.             </article>
  246.         </section>
  247.  
  248.         <footer class="pie">
  249.             Los horarios se actualizan cada segundo y las temperaturas cada
  250.             diez minutos.
  251.         </footer>
  252.     </main>
  253.  
  254.     <script>
  255.         const ciudades = [
  256.             {
  257.                 horaId: "arg",
  258.                 tempId: "temp-arg",
  259.                 locale: "es-AR",
  260.                 timeZone: "America/Argentina/Buenos_Aires",
  261.                 lat: -34.61,
  262.                 lon: -58.38
  263.             },
  264.             {
  265.                 horaId: "esp",
  266.                 tempId: "temp-esp",
  267.                 locale: "es-ES",
  268.                 timeZone: "Europe/Madrid",
  269.                 lat: 40.41,
  270.                 lon: -3.70
  271.             },
  272.             {
  273.                 horaId: "mex",
  274.                 tempId: "temp-mex",
  275.                 locale: "es-MX",
  276.                 timeZone: "America/Mexico_City",
  277.                 lat: 19.43,
  278.                 lon: -99.13
  279.             },
  280.             {
  281.                 horaId: "usa",
  282.                 tempId: "temp-usa",
  283.                 locale: "en-US",
  284.                 timeZone: "America/New_York",
  285.                 lat: 40.71,
  286.                 lon: -74.00
  287.             },
  288.             {
  289.                 horaId: "jpn",
  290.                 tempId: "temp-jpn",
  291.                 locale: "ja-JP",
  292.                 timeZone: "Asia/Tokyo",
  293.                 lat: 35.68,
  294.                 lon: 139.69
  295.             },
  296.             {
  297.                 horaId: "uk",
  298.                 tempId: "temp-uk",
  299.                 locale: "en-GB",
  300.                 timeZone: "Europe/London",
  301.                 lat: 51.50,
  302.                 lon: -0.12
  303.             }
  304.         ];
  305.  
  306.         function actualizarHoras() {
  307.             const opciones = {
  308.                 hour: "2-digit",
  309.                 minute: "2-digit",
  310.                 second: "2-digit"
  311.             };
  312.  
  313.             ciudades.forEach(ciudad => {
  314.                 const horaActual = new Date().toLocaleTimeString(
  315.                     ciudad.locale,
  316.                     {
  317.                         ...opciones,
  318.                         timeZone: ciudad.timeZone
  319.                     }
  320.                 );
  321.  
  322.                 document.getElementById(ciudad.horaId).textContent =
  323.                     horaActual;
  324.             });
  325.         }
  326.  
  327.         async function obtenerTemperatura(ciudad) {
  328.             const elementoTemperatura =
  329.                 document.getElementById(ciudad.tempId);
  330.  
  331.             try {
  332.                 const url =
  333.                     `https://api.open-meteo.com/v1/forecast` +
  334.                     `?latitude=${ciudad.lat}` +
  335.                     `&longitude=${ciudad.lon}` +
  336.                    `&current_weather=true`;
  337.  
  338.                 const respuesta = await fetch(url);
  339.  
  340.                 if (!respuesta.ok) {
  341.                     throw new Error("No se pudo consultar la temperatura");
  342.                 }
  343.  
  344.                 const data = await respuesta.json();
  345.  
  346.                 if (
  347.                     data.current_weather &&
  348.                    data.current_weather.temperature !== undefined
  349.                ) {
  350.                    elementoTemperatura.textContent =
  351.                        `Temperatura: ${data.current_weather.temperature} °C`;
  352.                 } else {
  353.                     elementoTemperatura.textContent =
  354.                         "Temperatura no disponible";
  355.                 }
  356.             } catch (error) {
  357.                 elementoTemperatura.textContent =
  358.                     "Error al consultar la temperatura";
  359.             }
  360.         }
  361.  
  362.         function actualizarTemperaturas() {
  363.             ciudades.forEach(ciudad => obtenerTemperatura(ciudad));
  364.         }
  365.  
  366.         actualizarHoras();
  367.         actualizarTemperaturas();
  368.  
  369.         setInterval(actualizarHoras, 1000);
  370.         setInterval(actualizarTemperaturas, 600000);
  371.     </script>
  372. </body>
  373. </html>
  374.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!