{% include 'header.html' %}



<div class="card text-center">
  <div class="card-header">
    Boda de Fer y Rafa
  </div>
  <div class="card-body">
      {% for familia in nombre_familia %}
    <h5 class="card-title">Gracias por confirmar {{familia[1]}}, para nosotros es un gusto contar con tu presencia en nuestra boda.</h5>
    <p class="card-text">Para volver a la invitacion por favor da clic en el siguiente enlace:</p>
    <a href="/feryrafa/{{familia[0]}}" class="btn btn-primary">Volver</a>
    {% endfor %}
  </div>
  <div class="card-footer text-muted">
    <h5 class="card-title text-center">Nos vemos en</h5>
    <div id="cuentaRegresiva" class="display-4 text-center" style="font-size: x-large;"></div>
  </div>
</div>


<!-- Código JavaScript para la cuenta regresiva -->
  <script>
    // Fecha y hora objetivo para la cuenta regresiva (puedes ajustarla según tus necesidades)
    var fechaObjetivo = new Date("Feb 24, 2024 17:00:00").getTime();

    // Actualiza la cuenta regresiva cada segundo
    var cuentaRegresiva = setInterval(function() {
      var ahora = new Date().getTime();
      var diferencia = fechaObjetivo - ahora;

      // Calcula los días, horas, minutos y segundos restantes
      var dias = Math.floor(diferencia / (1000 * 60 * 60 * 24));
      var horas = Math.floor((diferencia % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutos = Math.floor((diferencia % (1000 * 60 * 60)) / (1000 * 60));
      var segundos = Math.floor((diferencia % (1000 * 60)) / 1000);

      // Actualiza el contenido de la cuenta regresiva
      document.getElementById("cuentaRegresiva").innerHTML = dias + "d " + horas + "h " + minutos + "m " + segundos + "s ";

      // Si la cuenta regresiva llega a cero, muestra un mensaje
      if (diferencia < 0) {
        clearInterval(cuentaRegresiva);
        document.getElementById("cuentaRegresiva").innerHTML = "¡Tiempo cumplido!";
      }
    }, 1000);  // Actualiza cada segundo
  </script>

{% include 'footer.html' %}