hora internacional 1.0.1

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Aplicación Horaria</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      background-color: #f4f4f4;
      padding: 50px;
    }
    h1 {
      color: #0066cc;
      font-size: 3em;
      text-align: center;
      margin-bottom: 40px;
    }
    .card {
      margin-bottom: 20px;
    }
    .card-title {
      font-weight: bold;
    }
    .card-text {
      font-size: 1.5em;
    }
  </style>
</head>
<body>
  <h1>Aplicación Horaria</h1>
  <div class="container">
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
      <div class="col">
        <div class="card text-center">
          <div class="card-body">
            <h5 class="card-title">Hora UTC</h5>
            <p class="card-text" id="utc"></p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card text-center">
          <div class="card-body">
            <h5 class="card-title">Ciudad de México</h5>
            <p class="card-text" id="mexico"></p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card text-center">
          <div class="card-body">
            <h5 class="card-title">São Paulo</h5>
            <p class="card-text" id="saopaulo"></p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card text-center">
          <div class="card-body">
            <h5 class="card-title">Buenos Aires</h5>
            <p class="card-text" id="buenosaires"></p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card text-center">
          <div class="card-body">
            <h5 class="card-title">El Cairo</h5>
            <p class="card-text" id="cairo"></p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card text-center">
          <div class="card-body">
            <h5 class="card-title">Pekín (China)</h5>
            <p class="card-text" id="china"></p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card text-center">
          <div class="card-body">
            <h5 class="card-title">Moscú</h5>
            <p class="card-text" id="moscu"></p>
          </div>
        </div>
      </div>
    </div>
  </div>

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

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

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

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

      const cairo = new Date(ahora.toLocaleString("en-US", {timeZone: "Africa/Cairo"}));
      document.getElementById('cairo').innerText = cairo.toLocaleTimeString();

      const china = new Date(ahora.toLocaleString("en-US", {timeZone: "Asia/Shanghai"}));
      document.getElementById('china').innerText = china.toLocaleTimeString();

      const moscu = new Date(ahora.toLocaleString("en-US", {timeZone: "Europe/Moscow"}));
      document.getElementById('moscu').innerText = moscu.toLocaleTimeString();
    }

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