Manual_Vantive/contenido/02.html

<style>
  .fake {
    background-image: url(img/bg00.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
  }

  .grid-cards {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto;
    justify-content: center;
    align-items: center;
  }

  .img-center {
    grid-column: span 2;
  }

  .btn-tema-go {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    border-radius: 35px;
    transition: transform 0.3s ease;
  }

  .btn-tema-go.hover:hover {
    transform: scale(1.05) !important;
  }

  .w-text p {
    padding: 0.6rem 1.2rem;
    background: rgba(242, 232, 222, 0.76);
    background: linear-gradient(to right, rgba(242, 232, 222, 0.76) 0%, #ffffff 100%);
    width: 94%;
  }

  .w-text.large-text p {
    font-size: 1.4rem;
    padding: 0.6rem 1.4rem;
  }
</style>
<div class="page-sco py-2 py-md-0 h-100">
  <div class="container h-100">
    <div class="row justify-content-center align-items-center h-100">
      <div class="col-11">
        <div class="row justify-content-center align-items-center">
          <div class="col-12 text-center animate__animated animate__bounceInDown">
            <div class="position-relative d-inline-block">
              <h2 class="text-primary mb-1 fw-bold">Contenidos</h2>
              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
            </div>
          </div>
          <div class="col-12">
            <div class="grid-cards gap-2">
              <div class="card-span position-relative text-center">
                <div class="position-relative btn-tema-go d-inline-block" data-pagina="2">
                  <img src="img/card.png" class="img-fluid" />
                  <div
                    class="position-absolute w-100 h-100 w-text top-0 start-0 d-flex justify-content-center align-items-center"
                  >
                    <p class="mb-0 text-primary fw-bold">Vivir con enfermedad renal</p>
                  </div>
                </div>
              </div>
              <div class="card-span position-relative text-center">
                <div class="position-relative btn-tema-go d-inline-block" data-pagina="4">
                  <img src="img/card.png" class="img-fluid" />
                  <div
                    class="position-absolute w-100 h-100 w-text top-0 start-0 d-flex justify-content-center align-items-center"
                  >
                    <p class="mb-0 text-primary fw-bold">
                      Inicio en la terapia de diálisis peritoneal
                    </p>
                  </div>
                </div>
              </div>
              <div class="card-span position-relative text-center">
                <div class="position-relative btn-tema-go d-inline-block" data-pagina="7">
                  <img src="img/card.png" class="img-fluid" />
                  <div
                    class="position-absolute w-100 h-100 w-text top-0 start-0 d-flex justify-content-center align-items-center"
                  >
                    <p class="mb-0 text-primary fw-bold">Acceso peritoneal y sus cuidados</p>
                  </div>
                </div>
              </div>
              <div class="card-span position-relative text-center">
                <div class="position-relative btn-tema-go d-inline-block" data-pagina="9">
                  <img src="img/card.png" class="img-fluid" />
                  <div
                    class="position-absolute w-100 h-100 w-text top-0 start-0 d-flex justify-content-center align-items-center"
                  >
                    <p class="mb-0 text-primary fw-bold">Terapia segura en casa</p>
                  </div>
                </div>
              </div>
              <div class="card-span position-relative text-center">
                <div class="position-relative btn-tema-go d-inline-block" data-pagina="15">
                  <img src="img/card.png" class="img-fluid" />
                  <div
                    class="position-absolute w-100 h-100 w-text top-0 start-0 d-flex justify-content-center align-items-center"
                  >
                    <p class="mb-0 text-primary fw-bold">Autocuidado</p>
                  </div>
                </div>
              </div>
              <div class="card-span position-relative text-center">
                <div class="position-relative btn-tema-go d-inline-block" data-pagina="18">
                  <img src="img/card.png" class="img-fluid" />
                  <div
                    class="position-absolute w-100 h-100 w-text top-0 start-0 d-flex justify-content-center align-items-center"
                  >
                    <p class="mb-0 text-primary fw-bold">
                      Manejo de medicamentos y terapia dialítica
                    </p>
                  </div>
                </div>
              </div>
              <div class="card-span position-relative text-center">
                <div class="position-relative btn-tema-go d-inline-block" data-pagina="20">
                  <img src="img/card.png" class="img-fluid" />
                  <div
                    class="position-absolute w-100 h-100 w-text top-0 start-0 d-flex justify-content-center align-items-center"
                  >
                    <p class="mb-0 text-primary fw-bold">Entrega domiciliaria</p>
                  </div>
                </div>
              </div>
              <div class="card-span position-relative text-center">
                <div class="position-relative btn-tema-go d-inline-block" data-pagina="22">
                  <img src="img/card.png" class="img-fluid" />
                  <div
                    class="position-absolute w-100 h-100 w-text top-0 start-0 d-flex justify-content-center align-items-center"
                  >
                    <p class="mb-0 text-primary fw-bold">Actuación ante incidencias</p>
                  </div>
                </div>
              </div>
              <div class="card-span position-relative text-center img-center">
                <div class="position-relative d-inline-block" style="width: 70%">
                  <img src="img/02.0.png" class="img-fluid" />
                </div>
              </div>
              <div class="card-span position-relative text-center">
                <div class="position-relative btn-tema-go d-inline-block" data-pagina="24">
                  <img src="img/card.png" class="img-fluid" />
                  <div
                    class="position-absolute w-100 h-100 w-text top-0 start-0 d-flex justify-content-center align-items-center"
                  >
                    <p class="mb-0 text-primary fw-bold">Procedimientos</p>
                  </div>
                </div>
              </div>
              <div class="card-span position-relative text-center">
                <div class="position-relative btn-tema-go d-inline-block" data-pagina="28">
                  <img src="img/card.png" class="img-fluid" />
                  <div
                    class="position-absolute w-100 h-100 w-text top-0 start-0 d-flex justify-content-center align-items-center"
                  >
                    <p class="mb-0 text-primary fw-bold">Alarmas</p>
                  </div>
                </div>
              </div>
              <!-- <div class="card-span position-relative text-center">
                <div class="position-relative btn-tema-go d-inline-block" data-pagina="29">
                  <img src="img/card.png" />
                  <div
                    class="position-absolute w-100 h-100 w-text top-0 start-0 d-flex justify-content-center align-items-center"
                  >
                    <p class="mb-0 text-primary fw-bold">Despedida</p>
                  </div>
                </div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {
    "use strict";
    $(".wrap-course-content").addClass("fake");
    $(".navbar-brand").hide();

    // Ajustar tamaño de texto según ancho de ventana
    function adjustTextSize() {
      if (window.innerWidth >= 1500) {
        $(".w-text").addClass("large-text");
      } else {
        $(".w-text").removeClass("large-text");
      }
    }
    adjustTextSize();
    $(window).on("resize", adjustTextSize);

    // Verificar si algún slide con contenido/02.html ya fue visitado
    var contentArray = CourseNav.getCourseContentArray();
    var alreadyVisited = contentArray.some(function (slide) {
      return slide.content === "contenido/02.html" && slide.visited;
    });

    if (!alreadyVisited) {
      gsap.fromTo(
        ".btn-tema-go",
        {
          opacity: 0,
          y: 90,
        },
        {
          opacity: 1,
          y: 0,
          duration: 1,
          stagger: 0.2,
          ease: "power3.out",
          onComplete: function () {
            $(".btn-tema-go")
              .addClass("animate__animated animate__pulse")
              .one("animationend", function () {
                $(this).removeClass("animate__animated animate__pulse").addClass("hover");
              });
            CourseNav.setSlideVisited();
          },
        }
      );
    } else {
      $(".btn-tema-go").addClass("hover");
      CourseNav.setSlideVisited();
    }

    $(".btn-tema-go").on("click", function () {
      CourseNav.soundClick();
      var pagina = $(this).data("pagina");
      CourseNav.gotoSlide(pagina);
    });
  });
</script>