Ogestan_Drossagyn_Papilocare/Drossagyn/contenido/04.html

<style>
  .back0 {
    background-image: url(img/bg05.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  #svg-container {
    width: 100%;
    height: auto;
  }

  #svg-container svg {
    width: 100%;
    height: 100%;
  }

  .btn_svg {
    cursor: pointer;
    transform-box: content-box;
    /* transform-origin: center !important; */
  }

  .anim0 {
    display: none;
  }

  .xactive {
    display: none;
  }

  @media (min-width: 768px) {
    .texts {
      display: none;
    }
  }
</style>
<div class='page-sco py-2 py-md-4 back0'>
  <div class='container'>
    <div class='row justify-content-center align-items-center'>
      <div class='col-12 anim0'>
        <div class='row justify-content-center align-items-center'>
          <div class="col-12 mb-3 text-center animate__animated animate__zoomIn">
            <h2 class="fw-bold text-secondary mb-0">Dosis y vía de administración</h2>
          </div>
          <div class="col-12 col-md-4 col-lg-5 animate__animated animate__zoomIn">
            <div class="row justify-content-center align-items-center">
              <div class="col-3 col-md-5 text-center">
                <img src="img/04.0.png" class="img-fluid">
              </div>
              <div class="col-5 col-md-7 col-lg-6 col-xl-5 text-center">
                <div id="svg-container"></div>
              </div>
            </div>
          </div>
          <div id="col-hide" class="col-12 col-md-8 col-lg-7 d-none d-md-block animate__animated animate__zoomIn">
            <div id="txt1" class="texts position-relative w-100">
              <div class="row justify-content-center">
                <div class="col-7 col-md-9 text-center mb-3">
                  <img src="img/04.1.png" class="img-fluid">
                </div>
                <div class="col-12 text-center">
                  <p class="mb-0">Vía de administración: <strong>Vaginal</strong></p>
                </div>
              </div>
            </div>
            <div id="txt2" class="texts position-relative w-100">
              <div class="row justify-content-center">
                <div class="col-12 text-center text-md-start mb-3">
                  <p class="fw-bold">Dosificación</p>
                  <p class="mb-0">1 dosis = 1 gr de crema = 0.5 mg de Estriol</p>
                </div>
                <div class="col-12 mb-3">
                  <div class="row justify-content-center">
                    <div class="col-6 text-center">
                      <img src="img/04.2.png" class="img-fluid mb-2"><br>
                      <p class="mb-0">1gr de crema x las noches.</p>
                    </div>
                    <div class="col-6 text-center">
                      <img src="img/04.3.png" class="img-fluid mb-2"><br>
                      <p class="mb-0">1gr de crema 2 a 3 veces x semana, hasta que los síntomas desaparezcan.</p>
                    </div>
                  </div>
                </div>
                <div class="col-12 text-center text-md-start">
                  <p class="mb-0">Esta dosificación puede mantenerse <strong>hasta un máximo de </strong><strong>3 meses.</strong></p>
                </div>
              </div>
            </div>
            <div id="txt3" class="texts position-relative w-100">
              <div class="row justify-content-center">
                <div class="col-12 text-center text-md-start mb-3">
                  <p class="fw-bold">Tratamiento a largo plazo</p>
                  <ul class="mb-0 text-start">
                    <li>Tras 2 a 3 meses de uso continuo, realizar un <strong>descanso de 4 semanas</strong>.</li>
                    <li>Después de la pausa, evaluar si es necesario reiniciar el tratamiento.</li>
                  </ul>
                </div>
                <div class="col-7 col-md-12 text-center text-md-end">
                  <img src="img/04.4.png" class="img-fluid">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {
    "use strict";
    $('body').addClass('fake');

    const audioh06 = CourseNav.createSound('audio/audioh06.mp3');

    CourseNav.audioController.stopAllSoundsAndPlay(audioh06);

    audioh06.on('play', function () {
      loadSVG();
      $('.anim0').show();
      $('#text1').show();
    });

    const paths = [
      "audio/audioh06.mp3",
      "audio/audioh07.mp3",
      "audio/audioh08.mp3"
    ];
    let audios = [];
    paths.forEach(function (element) {
      audios.push(CourseNav.createSound(element));
    });

    // Function to load the SVG file and insert it into the container
    function loadSVG() {
      $.get('img/04.5.svg', function (data) {
        var svg = $(data).find('svg');
        $('#svg-container').html(svg);
        // Remove width and height attributes to make SVG responsive
        svg.removeAttr('width').removeAttr('height');
        attachClickHandlers(); // Attach click handlers after SVG is loaded
        animateButtons();
        // Enable first button after SVG is loaded
        setTimeout(() => {
          $('#xbtn0').addClass('completed').removeClass('disabled animate__animated animate__pulse animate__infinite');
          $('#xbtn0').find('.xnormal').hide();
          $('#xbtn0').find('.xactive').show();
          $('#txt1').show();
          $("#xbtn1").removeClass('disabled');
          // Abrir el primer popup automáticamente en móviles
          if ($("#col-hide").css('display') == 'none') {
            mobilePop('#txt1');
          }
        }, 100);
      }, 'xml');
    }

    // Function to handle click events
    function handleButtonClick(buttonId, textId, audioIndex, nextButtonId) {
      $(buttonId).addClass("animate__animated animate__pulse animate__infinite btn_svg disabled");
      $(buttonId).click(function () {
        CourseNav.soundClick();
        // Detener todas las animaciones activas
        gsap.globalTimeline.clear();
        // Hide all text sections
        $('.texts').hide();
        // Show the selected text section
        gsap.fromTo(textId, { opacity: 0, y: 20 }, { opacity: 1, y: 0, duration: 0.5, display: 'block' });
        $(buttonId).removeClass('animate__animated animate__pulse animate__infinite').addClass('completed');
        $('.xactive').hide();
        $('.xnormal').show();
        $(buttonId).find('.xnormal').hide();
        $(buttonId).find('.xactive').show();
        // Play the corresponding audio
        CourseNav.audioController.stopAllSoundsAndPlay(audios[audioIndex]);

        if ($("#col-hide").css('display') == 'none') {
          mobilePop(textId);
        }

        // Habilitar el siguiente botón después de hacer clic
        if (nextButtonId) {
          $(nextButtonId).removeClass('disabled');
        }

        objectIsCompleted();
      });
    }

    function objectIsCompleted() {
      if ($(".btn_svg").length === $(".btn_svg.completed").length) {
        CourseNav.setSlideVisited();
      }
    }

    // Attach click handlers to SVG buttons
    function attachClickHandlers() {
      handleButtonClick('#xbtn0', '#txt1', 0, '#xbtn1');
      handleButtonClick('#xbtn1', '#txt2', 1, '#xbtn2');
      handleButtonClick('#xbtn2', '#txt3', 2);
      // Add more buttons as needed
    }

    function mobilePop(textId) {
      Swal.fire({
        html: $(textId).html(),
        target: 'body',
        customClass: {
          popup: 'pop-type0 bg-transparent p-0',
          htmlContainer: 'html-pop-style p-3',
          confirmButton: 'btn btn-begin pop-button-confirm text-white fw-bold animate__animated animate__pulse animate__infinite p-2'
        },
        confirmButtonText: '<div class="inside-card px-4 py-2">Cerrar</div>',
        allowOutsideClick: false,
        allowEscapeKey: false,
        focusConfirm: false,
        backdrop: "rgba(14, 28, 98, .8)",
        heightAuto: false,
        willClose: () => { CourseNav.audioController.stopAudio(); }
      });
    }

    // Function to animate buttons with GSAP
    function animateButtons() {
      const buttons = ['#xbtn0', '#xbtn1', '#xbtn2'];
      buttons.forEach((button, index) => {
        gsap.from(button, {
          opacity: 0,
          y: -20,
          duration: 0.5,
          delay: index * 0.2
        });
      });
    }
  });
</script>