hora internaciona

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Imágenes Docker y Hora UTC</title>
  <style>
    body {
      background-color: #222;
      color: #eee;
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 50px;
    }
    h1 {
      color: #00ffff;
      font-size: 3em;
    }
    p, div {
      color: #ffcc00;
      font-size: 1.5em;
      max-width: 600px;
      margin: 20px auto;
    }
    .highlight {
      color: #ff3366;
      font-weight: bold;
    }
    .time {
      margin: 10px 0;
      font-size: 1.2em;
    }
  </style>
</head>
<body>
  <h1>¿Qué es una imagen Docker?</h1>
  <p>
    Una <span class="highlight">imagen Docker</span> es una plantilla que contiene todo lo necesario para ejecutar una aplicación:
    su sistema de archivos, dependencias y configuraciones. Desde esta imagen se crean los contenedores,
    que son instancias ligeras y portables listas para funcionar.
  </p>

  <h1>Hora en distintas zonas</h1>
  <div class="time" id="utc"></div>
  <div class="time" id="mexico"></div>
  <div class="time" id="saopaulo"></div>
  <div class="time" id="buenosaires"></div>

  <script>
    function actualizarHora() {
      const ahora = new Date();
      document.getElementById('utc').innerText = 'Hora UTC: ' + ahora.toUTCString();

      const mexico = new Date(ahora.toLocaleString("en-US", {timeZone: "America/Mexico_City"}));
      document.getElementById('mexico').innerText = 'Ciudad de México: ' + mexico.toLocaleTimeString();

      const saopaulo = new Date(ahora.toLocaleString("en-US", {timeZone: "America/Sao_Paulo"}));
      document.getElementById('saopaulo').innerText = 'São Paulo: ' + saopaulo.toLocaleTimeString();

      const buenosaires = new Date(ahora.toLocaleString("en-US", {timeZone: "America/Argentina/Buenos_Aires"}));
      document.getElementById('buenosaires').innerText = 'Buenos Aires: ' + buenosaires.toLocaleTimeString();
    }

    actualizarHora();
    setInterval(actualizarHora, 1000);
  </script>
</body>
</html>