update

OgestanPlus/contenido/04.html

@@ -193,6 +193,10 @@
     "use strict";
     $('body').addClass('fake');
 
+    let sec1Shown = false;
+
+
+
     const audiom08 = CourseNav.createSound('audio/audiom08.mp3');
     const audiom12 = CourseNav.createSound('audio/audiom12.mp3');
 
@@ -227,7 +231,8 @@
     $('.btn-next-section').click(function () {
       $(this).removeClass('animate__animated animate__pulse animate__infinite');
       gotoSection($(this).data('sec'));
-      $(this).parent().hide();
+      sec1Shown = true;
+      $('.ins0').hide();
 
       const audioName = $(this).data('audio');
       if (audioName) {
@@ -267,7 +272,7 @@
         didClose: () => {
           document.body.style.paddingRight = '';
           CourseNav.audioController.stopAudio();
-          if($('.btn-pop').length == $('.btn-pop.completed').length) {
+          if($('.btn-pop').length == $('.btn-pop.completed').length && !sec1Shown) {
             $('.ins0').show();
           }
         },

OgestanPlus/contenido/05.html

@@ -0,0 +1,157 @@
+<style>
+  .fake {
+    background-image: url(img/bg02.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+
+  .play-button-container {
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    z-index: 10002;
+    background: linear-gradient(180deg, #634577, #813e70);
+    border-radius: 10px;
+    box-shadow: 0px 0px 10px 0px #d0f0ff;
+  }
+
+  #video {
+    z-index: 99;
+    border-radius: 15px;
+  }
+
+
+  .play-button-container button {
+    pointer-events: all;
+    border: none;
+    background: none;
+    border: solid 3px #fff;
+    padding: 10px 18px !important;
+    border-radius: 90px;
+  }
+
+  h1 .fa-regular {
+    background: linear-gradient(45deg, #ffffff, #ffffff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-weight: 500;
+    left: 0px;
+    position: relative;
+    font-size: 25px;
+  }
+
+
+  @media(min-width: 768px) {
+    .content-gls {
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    .play-button-container button {
+      pointer-events: all;
+      border: none;
+      background: none;
+      border: solid 8px #fff;
+      padding: 15px 30px !important;
+      border-radius: 90px;
+    }
+
+    h1 .fa-regular {
+      background: linear-gradient(45deg, #ffffff, #ffffff);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      font-weight: 500;
+      left: 10px;
+      position: relative;
+      font-size: 111px;
+    }
+  }
+</style>
+<div class='page-sco'>
+  <div class='container'>
+    <div class='row justify-content-center align-items-center'>
+      <div class='col-12'>
+        <div class='row justify-content-center'>
+          <div class="col-12 text-center animate__animated animate__rotateInDownRight">
+            <h2 class="my-0 text-purple-2 fw-bold">Información Nutricional</h2>
+          </div>
+          <div class="col-12 col-md-10 col-lg-6 animate__animated animate__zoomIn my-3">
+            <div class="w-100">
+              <div class="ratio ratio-16x9">
+                <video id="video" class="embed-responsive-item" controls autoplay poster="video/poster.jpg">
+                  <source src="video/dummy.mp4" type="video/mp4" />
+                  Your browser does not support the video tag.
+                </video>
+                <div class="play-button-container">
+                  <button class="p-0 animate__animated animate__heartBeat animate__infinite waves-effect disabled"
+                    id="btn_video">
+                    <h1 class="my-0"><i class="fa-regular fa-play fa-3x text-primary"></i></h1>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  $(function () {
+    "use strict";
+    $('.page-sco').addClass('fake');
+    $('#scroll-indicator').css('display', 'none');
+
+
+    setTimeout(function () {
+      $("#btn_video").removeClass("disabled");
+      $(".i0").show();
+    }, 200);
+
+    var video = document.getElementById("video");
+    var btnVideo = document.getElementById("btn_video");
+
+    video.play();
+    video.addEventListener("play", function () {
+      $(".play-button-container").hide(); // Ocultar el contenedor de botón de reproducción
+    });
+    // Evitar la reproducción del video al hacer clic end el botón de reproducción
+    btnVideo.addEventListener("click", function (event) {
+      if (!btnVideo.classList.contains("disabled")) {
+        //CourseNav.soundClick();
+        document.getElementById("video").play();
+        $(".play-button-container").hide(); // Ocultar el contenedor de botón de reproducción
+      } else {
+        event.stopPropagation(); // Evita que el evento de clic llegue al video
+      }
+    });
+
+    // Evitar que el video se reproduzca al hacer clic en el área de la capa
+    video.addEventListener("click", function (event) {
+      if (!btnVideo.classList.contains("disabled")) {
+        event.preventDefault(); // Evita la acción predeterminada de reproducción del video
+      }
+    });
+
+    // Evitar la reproducción del video al hacer doble clic en cualquier parte del video
+    video.addEventListener("dblclick", function (event) {
+      if (!btnVideo.classList.contains("disabled")) {
+        event.preventDefault(); // Evita la acción predeterminada de reproducción del video
+      }
+    });
+
+    video.addEventListener("ended", function () {
+      $('.i0').hide();
+      CourseNav.setSlideVisited();
+    });
+  });
+</script>

OgestanPlus/contenido/06.html

@@ -0,0 +1,307 @@
+<style>
+  .back0 {
+    background-image: url(img/bg06.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    height: 100%;
+  }
+
+  .back1 {
+    background-image: url(img/bg06.jpg);
+    background-repeat: no-repeat;
+    background-position: bottom center;
+    background-size: cover;
+  }
+
+  .anim0, .anim1 {
+    display: none;
+  }
+
+  .shadow-vx {
+    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
+    max-width: 100%;
+  }
+
+  .cid1 .swiper-wrapper {
+    box-sizing: border-box;
+  }
+
+  .btn-arrow {
+    max-width: 85px;
+  }
+
+  @media(min-width: 991px) {
+    .img-mx-w img {
+      max-width: 71%;
+    }
+  }
+
+  @media(min-width: 768px) {
+    .shadow-vx {
+      max-width: 76%;
+    }
+
+    .btn-arrow {
+      max-width: 75px;
+    }
+  }
+</style>
+<div id="sec0" class='page-sco py-2 py-md-0 back0'>
+  <div class='container'>
+    <div class='row justify-content-center align-items-center'>
+      <div class='col-12'>
+        <div class='row justify-content-center'>
+          <div class="col-12 mb-3" data-sal="slide-right">
+            <h2 class="text-secondary fw-bold">Competidores</h2>
+            <p class="mb-0 animate__animated animate__lightSpeedInLeft animate__delay-1s">En el mercado de suplementos para maternidad existen varias marcas con características y formulaciones distintas.
+              Aunque cada una ofrece beneficios, <strong>ninguna presenta la combinación completa de nutrientes que ofrece
+                OGestan<sup>®</sup> Plus.</strong></p>
+          </div>
+          <div class="col-12 mb-3">
+            <div class="row justify-content-center">
+              <div class="col-5 col-md-4 img-mx-w text-center mb-3" data-sal="zoom-in" data-sal-delay="100">
+                <img src="img/06.0.png" class="img-fluid">
+              </div>
+              <div class="col-5 col-md-4 img-mx-w text-center mb-3" data-sal="zoom-in" data-sal-delay="300">
+                <img src="img/06.1.png" class="img-fluid">
+              </div>
+              <div class="col-5 col-md-4 img-mx-w text-center mb-3" data-sal="zoom-in" data-sal-delay="500">
+                <img src="img/06.2.png" class="img-fluid">
+              </div>
+              <div class="col-5 col-md-4 img-mx-w text-center mb-3 mb-md-0" data-sal="zoom-in" data-sal-delay="600">
+                <img src="img/06.3.png" class="img-fluid">
+              </div>
+              <div class="col-5 col-md-4 img-mx-w text-center" data-sal="zoom-in" data-sal-delay="800">
+                <img src="img/06.4.png" class="img-fluid">
+              </div>
+              <div class="col-5 col-md-4 img-mx-w text-center" data-sal="zoom-in" data-sal-delay="1000">
+                <img src="img/06.5.png" class="img-fluid">
+              </div>
+            </div>
+          </div>
+          <div class="col-12 text-center ins0" style="display: none;">
+            <div class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite" data-sec="sec1" data-audio="audiom14">
+              <img src="img/nSec.png" class="img-fluid">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div id="sec1" class="page-sco back1" style="display: none;">
+  <div class='container'>
+    <div class='row justify-content-center align-items-center'>
+      <div class='col-12'>
+        <div class="row justify-content-center">
+          <div class="col-12 text-center mb-3" data-sal="slide-left">
+            <h2 class="text-orange-2 fw-bold">No olvidemos…</h2>
+          </div>
+          <div class="col-12 col-lg-9" data-sal="flip-down">
+            <div class="d-flex flex-wrap flex-md-row justify-content-center align-items-center gap-2">
+              <div class="btn-prev btn-arrow d-inline-block order-2 order-md-1">
+                <img src="img/06.6.png" class="img-fluid">
+              </div>
+              <div class="position-relative shadow-vx flex-fill order-1 order-md-2 rounded-3">
+                <div class="swiper cid1">
+                  <div class="swiper-wrapper">
+                    <div class="swiper-slide visited completed">
+                      <div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
+                        <div class="row justify-content-center align-items-center">
+                          <div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
+                            <ol class="mb-0">
+                              <li><strong>Número</strong> de componentes.</li>
+                              <li>Cantidad de <strong>Omega 3.</strong></li>
+                              <li>Contenido de <strong>Vitamina D.</strong></li>
+                              <li>Diferenciación del hierro (hierro <strong>bisglicinato</strong>).</li>
+                            </ol>
+                          </div>
+                          <div class="col-7 col-md-4 text-center">
+                            <img src="img/06.8.png" class="img-fluid">
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="swiper-slide">
+                      <div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
+                        <div class="row justify-content-center align-items-center">
+                          <div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
+                            <p class="mb-0">Destacar que <strong>Regenesis</strong><strong> Max (RM) no contiene hierro </strong><strong>bisglicinato</strong>
+                              (solo sulfato ferroso), y un <strong>mínimo de Vitamina D.</strong></p>
+                          </div>
+                          <div class="col-7 col-md-4 text-center">
+                            <img src="img/06.9.png" class="img-fluid">
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="swiper-slide">
+                      <div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
+                        <div class="row justify-content-center align-items-center">
+                          <div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
+                            <p class="mb-0">Destacar la <strong>menor cantidad de Omega 3 en </strong><strong>Previta</strong> <strong>Mom</strong><strong>.</strong></p>
+                          </div>
+                          <div class="col-7 col-md-4 text-center">
+                            <img src="img/06.10.png" class="img-fluid">
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="swiper-slide">
+                      <div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
+                        <div class="row justify-content-center align-items-center">
+                          <div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
+                            <p class="mb-0">Elevit 2 Omegas <strong>no cumple con las cantidades requeridas de ácido fólico</strong>.</p>
+                          </div>
+                          <div class="col-7 col-md-4 text-center">
+                            <img src="img/06.11.png" class="img-fluid">
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="swiper-slide">
+                      <div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
+                        <div class="row justify-content-center align-items-center">
+                          <div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
+                            <p class="mb-0">Materplus tiene <strong>una fórmula muy limitada en elementos.</strong></p>
+                          </div>
+                          <div class="col-7 col-md-4 text-center">
+                            <img src="img/06.12.png" class="img-fluid">
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="btn-next btn-arrow rounded-circle d-inline-block order-2 order-md-3 animate__animated animate__pulse animate__infinite">
+                <img src="img/06.7.png" class="img-fluid">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  $(function () {
+    "use strict";
+
+    const audiom13 = CourseNav.createSound('audio/audiom13.mp3');
+    const audiom14 = CourseNav.createSound('audio/audiom14.mp3');
+
+    CourseNav.audioController.stopAllSoundsAndPlay(audiom13);
+
+    audiom13.on('play', function () {
+      $('.anim0').show();
+    });
+
+    audiom13.on('end', function () {
+      $('.ins0').show();
+    });
+
+    const paths = [
+      "audio/audiom14.mp3",
+      "audio/audiom15.mp3",
+      "audio/audiom16.mp3",
+      "audio/audiom17.mp3",
+      "audio/audiom18.mp3"
+    ];
+    let audios = [];
+    paths.forEach(function (element) {
+      audios.push(CourseNav.createSound(element));
+    });
+
+    let sec1Shown = false;
+
+    // Asegurar que sec0 esté visible al inicio
+    $('#sec0').show();
+    $('#sec1').hide();
+
+    let isScrolling = false;
+
+    $('.btn-next-section').click(function () {
+      if (isScrolling) return;
+
+      $(this).removeClass('animate__animated animate__pulse animate__infinite');
+      sec1Shown = true;
+      $('.ins0').hide();
+
+      const currentScroll = $(window).scrollTop();
+      const windowHeight = $(window).height();
+      const documentHeight = $(document).height();
+      const scrollNeeded = documentHeight - windowHeight;
+
+      if (currentScroll < scrollNeeded && scrollNeeded > 0) {
+        isScrolling = true;
+        $('html, body').animate({
+          scrollTop: scrollNeeded
+        }, 600, () => {
+          isScrolling = false;
+          setTimeout(() => {
+            gotoSection($(this).data('sec'));
+          }, 200);
+        });
+      } else {
+        gotoSection($(this).data('sec'));
+      }
+
+      const audioName = $(this).data('audio');
+      if (audioName) {
+        setTimeout(() => {
+          CourseNav.audioController.stopAllSoundsAndPlay(eval(audioName));
+        }, isScrolling ? 800 : 500);
+      } else {
+        CourseNav.soundClick();
+      }
+    });
+
+    const mySwiper = new Swiper(".cid1", {
+      effect: "slide",
+      autoHeight: true,
+      slidesPerView: 1, // Mobile: 1 slide a la vez
+      spaceBetween: 20,
+      navigation: {
+        nextEl: '.btn-next',
+        prevEl: '.btn-prev',
+      },
+      on: {
+        init: function () {
+          // Ocultar prev en el primer slide
+          $('.btn-prev').css('opacity', '.5').addClass('disabled');
+        },
+        slideChange: function () {
+          const activeIndex = this.activeIndex;
+          const slides = this.slides;
+          const totalSlides = this.slides.length;
+
+          // Controlar opacidad y clase disabled de botones
+          if (activeIndex === 0) {
+            $('.btn-prev').css('opacity', '.5').addClass('disabled');
+          } else {
+            $('.btn-prev').css('opacity', '1').removeClass('disabled');
+          }
+
+          if (activeIndex === totalSlides - 1) {
+            $('.btn-next').css('opacity', '.5').addClass('disabled');
+          } else {
+            $('.btn-next').css('opacity', '1').removeClass('disabled');
+          }
+
+          slides[activeIndex].classList.add("visited", "completed");
+
+          const completedSlides = $(".cid1 .swiper-slide.completed").length;
+
+          if (completedSlides == totalSlides) {
+            $('.btn-next').removeClass('animate__animated animate__pulse animate__infinite');
+            CourseNav.setSlideVisited();
+          }
+
+          CourseNav.audioController.stopAllSoundsAndPlay(audios[activeIndex]);
+        }
+      }
+    });
+  });
+</script>

OgestanPlus/contenido/07.html

@@ -404,7 +404,7 @@
                   <div class="row align-items-center justify-content-center">
                     <div class="col-12 col-md-3 text-center mb-3 mb-md-0"><img src="img/actividad/medico.png" class="img-fluid animate__animated animate__flipInY" alt=""></div>
                     <div class="col-12 col-md-9 text-center"><div class="w-100 pregunta bubble">${questionData.text}</div></div>
-                  </div>       
+                  </div>
                 </div>
                 <div class="col-12 col-xl-5  animate__animated animate__fadeInLeft">
                   <div class="card glass border-0 rounded-15 shadow  option-btn cursor h-100 p-1 p-md-3" data-correct="${questionData.options[0].isCorrect}">
@@ -441,8 +441,10 @@
             allowOutsideClick: false,
             allowEscapeKey: false,
             focusConfirm: false,
-            target: document.getElementById('coursenav-main-content'),
+            target: "body",
             didOpen: () => {
+              document.body.style.paddingRight = '';
+              document.body.classList.remove('swal2-height-auto');
               const swalContent = Swal.getHtmlContainer(); // Obtiene el contenedor HTML actual de Swal
               // Eliminar cualquier controlador anterior para evitar duplicados
               $(swalContent)
@@ -500,11 +502,15 @@
         confirmButtonText: "Cerrar",
         backdrop: "rgba(14, 28, 98, .9)",
         showCloseButton: false,
-        target: document.getElementById('coursenav-main-content'),
+        target: "body",
         customClass: {
           popup: 'w-32em pop-retro',
           confirmButton: 'btn btn-begin text-white fw-bold py-1 animate__animated animate__pulse animate__infinite'
         },
+        didOpen: () => {
+          document.body.style.paddingRight = '';
+          document.body.classList.remove('swal2-height-auto');
+        },
       }).then(() => {
         updateVisualFeedback(isCorrect); // Actualiza visualización
         quizManager.answerCurrentQuestion(isCorrect); // Registra respuesta
@@ -548,4 +554,4 @@
     }
 
   });
-</script>
+</script>

OgestanPlus/contenido/08.html

@@ -0,0 +1,60 @@
+<style>
+  .back0 {
+    background-image: url(img/bg07.jpg);
+    background-size: cover;
+    background-position: 68% 100%;
+    background-repeat: no-repeat;
+  }
+
+  .border-top-perso {
+    border-top: 3px solid;
+    opacity: 1;
+  }
+
+  .anim0 {
+    display: none;
+  }
+
+  @media(min-width: 768px) {
+    .back0 {
+      background-position: 68% 100%;
+    }
+  }
+</style>
+<div class='page-sco py-3 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 justify-content-md-start'>
+          <div class="col-12 col-md-7 animate__animated animate__bounceInDown">
+            <div class="position-relative d-inline-block mb-3">
+              <h1 class="text-secondary fw-bold">¡Excelente trabajo!</h1>
+              <hr class="m-0 text-secondary border-top-perso">
+            </div>
+            <p class="animate__animated animate__fadeInUp animate__delay-2s">Has concluido el módulo de <strong>OGestan</strong><strong><sup>®</sup> Plus</strong>.</p>
+            <p class="animate__animated animate__fadeInUp animate__delay-5s">Ahora cuentas con <strong>argumentos más sólidos y claros</strong> para destacar sus beneficios frente a cualquier
+              objeción.</p>
+            <p class="animate__animated animate__fadeInUp animate__delay-11s">Confía en tu conocimiento, <strong>sigue practicando</strong> y continúa dando lo mejor en cada visita.</p>
+            <p class="mb-0 text-primary animate__animated animate__fadeInUp animate__delay-17s">¡<strong>Vamos por más</strong>!</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  $(function () {
+    "use strict";
+    $('body').addClass('fake');
+    const audiom23 = CourseNav.createSound('audio/audiom23.mp3');
+    CourseNav.audioController.stopAllSoundsAndPlay(audiom23);
+    audiom23.on('play',function(){
+      $('.anim0').show();
+    });
+    audiom23.on("end", function () {
+      CourseNav.completeLesson();
+    });
+    CourseNav.setSlideVisited();
+    CourseNav.completeLesson();
+  });
+</script>