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(4, 1fr);
    grid-template-rows: auto;
    justify-content: center;
    align-items: center;
  }

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

  .btn-tema-go.hover:hover {
    transform: scale(1.05) !important;
  }
</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-8">
            <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" />
                  <div class="position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center p-3">
                    <p class="mb-0 text-white 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" />
                  <div class="position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center p-3">
                    <p class="mb-0 text-white 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" />
                  <div class="position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center p-3">
                    <p class="mb-0 text-white 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" />
                  <div class="position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center p-3">
                    <p class="mb-0 text-white 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" />
                  <div class="position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center p-3">
                    <p class="mb-0 text-white 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" />
                  <div class="position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center p-3">
                    <p class="mb-0 text-white fw-bold">Manejo de medicamentos y terapia dialítica</li></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" />
                  <div class="position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center p-3">
                    <p class="mb-0 text-white 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" />
                  <div class="position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center p-3">
                    <p class="mb-0 text-white fw-bold">Actuación ante incidencias </p>
                  </div>
                </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" />
                  <div class="position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center p-3">
                    <p class="mb-0 text-white 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" />
                  <div class="position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center p-3">
                    <p class="mb-0 text-white 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 top-0 start-0 d-flex justify-content-center align-items-center p-3">
                    <p class="mb-0 text-white fw-bold">Despedida</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-4 text-center">
            <img src="img/02.0.png" class="img-fluid">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {
    "use strict";
    $('.wrap-course-content').addClass('fake');
    
    // 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>