update

OgestanPlus/contenido/03.html

@@ -23,6 +23,40 @@
     display: none;
   }
 
+  .custom-switch {
+    width: 6em;
+    height: 3em;
+    background: #dd3352;
+    background: linear-gradient(to left, #dd3352 33%, #ff8c29 100%);
+    border-radius: 1.5em;
+    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
+    position: relative;
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+
+  .custom-switch::before {
+    content: '';
+    position: absolute;
+    width: 2.4em;
+    height: 2.4em;
+    background: #fff;
+    border-radius: 50%;
+    top: 0.3em;
+    left: 0.3em;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+  }
+
+  .custom-switch.active {
+    background: #3ac0d5;
+    background: linear-gradient(to right, #3ac0d5 20%, #c1c902 100%);
+  }
+
+  .custom-switch.active::before {
+    transform: translateX(3em);
+  }
+
   @media(min-width: 768px) {
     .back0 {
       background-position: 28% 100%;
@@ -58,14 +92,62 @@
       </div>
     </div>
   </div>
-  <div class="sec_i1 py-2 py-md-4" style="display: none;">
+  <div class="w-100 py-2 py-md-4 text-center sec_i1" style="display: none;">
-    <div class="container">
+    <div class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite" data-sec="sec1" data-audio="audiom06">
-      <div class="row justify-content-center">
+      <img src="img/nSec.png" class="img-fluid">
-        <div class="col-12">
+    </div>
-          <div class="row justify-content-center">
+  </div>
-            <div class="col-12 text-center">
+</div>
-              <div class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite" data-sec="sec1">
+<div id="sec1" class='page-sco py-2 py-md-4 back1' style="display: none;">
-                <img src="img/nSec.png" class="img-fluid">
+  <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="zoom-in">
+            <div class="custom-switch mx-auto animate__animated animate__pulse animate__infinite" id="customSwitch"></div>
+          </div>
+          <div class="col-12" data-sal="zoom-in">
+            <div id="carouselTxt" class="carousel slide">
+              <div class="carousel-inner">
+                <div class="carousel-item active animate__animated animate__flipInX">
+                  <div class="row justify-content-center align-items-center">
+                    <div class="col-12 col-md-7 col-xl-6">
+                      <div class="d-flex flex-column justify-content-center">
+                        <h2 class="text-secondary fw-bold">Presentación Comercial</h2>
+                        <p class="animate__animated animate__lightSpeedInLeft">OGestan<sup>®</sup> Plus se presenta en una <strong>caja con 30
+                            cápsulas de 950 mg</strong>. Cada cápsula aporta
+                          nutrientes esenciales, especialmente Omega 3, vitaminas y minerales.</p>
+                      </div>
+                    </div>
+                    <div class="col-8 col-md-4 text-center">
+                      <img src="img/03.0.png" class="img-fluid">
+                    </div>
+                  </div>
+                </div>
+                <div class="carousel-item animate__animated animate__flipInX">
+                  <div class="row justify-content-center align-items-center">
+                    <div class="col-12 col-md-7 col-lg-6 col-xl-5">
+                      <div class="d-flex flex-column justify-content-center">
+                        <h2 class="text-secondary fw-bold">¿Cómo se usa?</h2>
+                        <p class="animate__animated animate__lightSpeedInLeft animate__delay-1s"><strong
+                            class="text-primary">Indicación:</strong></p>
+                        <p class="animate__animated animate__lightSpeedInLeft animate__delay-2s">Suplemento para embarazo y lactancia.</p>
+                        <p class="animate__animated animate__bounceInLeft animate__delay-7s"><strong class="text-primary">Modo de
+                            empleo:</strong></p>
+                        <ul class="bul0 mb-0">
+                          <li class="animate__animated animate__fadeInUp animate__delay-8s">Dosis: <strong>1 cápsula al día</strong> con algún
+                            alimento.</li>
+                          <li class="animate__animated animate__fadeInUp animate__delay-13s">Edad: <strong>A partir de 18
+                              años</strong><strong>.</strong></li>
+                          <li class="animate__animated animate__fadeInUp animate__delay-17s">No exceder la dosis recomendada.</li>
+                        </ul>
+                      </div>
+                    </div>
+                    <div class="col-8 col-md-4 text-center">
+                      <img src="img/03.1.png" class="img-fluid">
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -74,20 +156,21 @@
     </div>
   </div>
 </div>
-<div id="sec1" class='page-sco py-2 py-md-4 back1'>
-  <div class="container">
-    <div class="row justify-content-center align-items-center">
-      <div class="col-12">
-        <div class="row justify-content-center"></div>
-      </div>
-    </div>
-  </div>
-</div>
 <script>
   $(function () {
     "use strict";
     $('body').addClass('fake');
     const audiom05 = CourseNav.createSound('audio/audiom05.mp3');
+    const audiom06 = CourseNav.createSound('audio/audiom06.mp3');
+
+    const paths = [
+      "audio/audiom06.mp3",
+      "audio/audiom07.mp3"
+    ];
+    let audios = [];
+    paths.forEach(function (element) {
+      audios.push(CourseNav.createSound(element));
+    });
 
     CourseNav.audioController.stopAllSoundsAndPlay(audiom05);
 
@@ -101,9 +184,41 @@
     });
 
     $('.btn-next-section').click(function(){
-      CourseNav.soundClick();
       $(this).removeClass('animate__animated animate__pulse animate__infinite');
       gotoSection($(this).data('sec'));
+      $(this).parent().hide();
+
+      const audioName = $(this).data('audio');
+      if (audioName) {
+        setTimeout(() => {
+          CourseNav.audioController.stopAllSoundsAndPlay(eval(audioName));
+        }, 500);
+      } else {
+        CourseNav.soundClick();
+      }
+    });
+
+    // Manejar click del switch personalizado
+    $('#customSwitch').click(function () {
+      CourseNav.soundClick();
+      $(this).toggleClass('active');
+
+      $(this).removeClass('animate__animated animate__pulse animate__infinite');
+
+      // Cambiar contenido y reproducir audio según el estado del switch
+      if ($(this).hasClass('active')) {
+        // Mostrar segundo item del carousel
+        $('.carousel-item').removeClass('active');
+        $('.carousel-item').eq(1).addClass('active');
+        CourseNav.audioController.stopAllSoundsAndPlay(audios[1]); // audiom07.mp3
+      } else {
+        // Mostrar primer item del carousel
+        $('.carousel-item').removeClass('active');
+        $('.carousel-item').eq(0).addClass('active');
+        CourseNav.audioController.stopAllSoundsAndPlay(audios[0]); // audiom06.mp3
+      }
+
+      CourseNav.setSlideVisited();
     });
 
   });

OgestanPlus/contenido/04.html

@@ -0,0 +1,122 @@
+<style>
+  .back0 {
+    background-image: url(img/bg05.jpg);
+    background-size: cover;
+    background-position: 12% 100%;
+    background-repeat: no-repeat;
+  }
+
+  .btn-pop {
+    cursor: pointer;
+  }
+
+  .card-tl {
+    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
+    border-radius: 30px;
+  }
+
+  .anim0 {
+    display: none;
+  }
+</style>
+<div 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 anim0'>
+        <div class='row justify-content-center'>
+          <div class="col-12 text-center mb-3" data-sal="flip-down">
+            <h2 class="text-orange-2 fw-bold">Beneficios del Omega 3</h2>
+            <p class="mb-0">Durante la maternidad, el <strong>Omega 3</strong> es un gran aliado.</p>
+          </div>
+          <div class="col-12">
+            <div class="row justify-content-center">
+              <div class="col-6 col-md-4 text-center" data-sal="zoom-in" data-sal-delay="300">
+                <div class="btn-pop disabled position-relative d-inline-block mb-2 animate__animated animate__pulse animate__infinite" data-popid="#pop0">
+                  <img src="img/04.0.png" class="img-fluid mb-2">
+                </div>
+                <div class="card card-tl d-inline-block mx-auto bg-var-3 border-0 px-3 py-1 fw-medium text-blue-2 fs-4">Fertilidad</div>
+              </div>
+              <div class="col-6 col-md-4 text-center" data-sal="zoom-in" data-sal-delay="500">
+                <div class="btn-pop disabled position-relative d-inline-block mb-2 animate__animated animate__pulse animate__infinite" data-popid="#pop0">
+                  <img src="img/04.1.png" class="img-fluid mb-2">
+                </div>
+                <div class="card card-tl d-inline-block mx-auto bg-var-3 border-0 px-3 py-1 fw-medium text-blue-2 fs-4">Gestación</div>
+              </div>
+              <div class="col-6 col-md-4 text-center" data-sal="zoom-in" data-sal-delay="700">
+                <div class="btn-pop disabled position-relative d-inline-block mb-2 animate__animated animate__pulse animate__infinite" data-popid="#pop0">
+                  <img src="img/04.2.png" class="img-fluid mb-2">
+                </div>
+                <div class="card card-tl d-inline-block mx-auto bg-var-3 border-0 px-3 py-1 fw-medium text-blue-2 fs-4">Lactancia</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="d-none">
+  <div id="pop0">
+    <div class="container-fluid">
+      <div class="row justify-content-center align-items-center row-custom-pop">
+        <div class="col-12">
+          <div class="row justify-content-center">
+            <div class="col-12">
+              <p>La Legislación aplicable a RCO es amplia y diversa. No obstante, RCO enfatiza el <strong
+                  class="text-secondary">cumplimiento estricto </strong>de aquella normativa que, por su naturaleza,
+                impacto o
+                frecuencia de aplicación, resulta especialmente relevante para nuestras operaciones y compromisos
+                éticos.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  $(function () {
+    "use strict";
+    $('body').addClass('fake');
+
+    const audiom08 = CourseNav.createSound('audio/audiom08.mp3');
+
+    CourseNav.audioController.stopAllSoundsAndPlay(audiom08);
+
+    audiom08.on('play',function(){
+      $('.anim0').show();
+    });
+
+    audiom08.on('end',function(){
+      $('.btn-pop').removeClass('disabled');
+    });
+
+    $('.btn-pop').click(function (e) {
+      e.preventDefault();
+      const html = $($(this).data('popid')).html();
+      Swal.fire({
+        html: html,
+        target: "body",
+        customClass: {
+          popup: 'pop-type0 bg-transparent p-0',
+          htmlContainer: 'html-pop-style p-3',
+          confirmButton: 'btn btn-begin text-white fw-bold animate__animated animate__pulse animate__infinite py-1 px-4'
+        },
+        confirmButtonText: "Cerrar",
+        showConfirmButton: true,
+        allowOutsideClick: false,
+        allowEscapeKey: false,
+        focusConfirm: false,
+        backdrop: "rgba(14, 28, 98, .8)",
+        width: "70em",
+        heightAuto: false,
+        didOpen: () => {
+          document.body.style.paddingRight = '';
+        },
+        didClose: () => {
+          document.body.style.paddingRight = '';
+        },
+      });
+    });
+  });
+</script>

OgestanPlus/css/style.scss

@@ -635,3 +635,12 @@ ul.bul0 {
 .btn-next-section {
   cursor: pointer;
 }
+
+.html-pop-style {
+  border: 6px solid transparent;
+  border-radius: 20px;
+  background: url(../img/fondo-pop.jpg) padding-box, linear-gradient(to right, #00928e 32%, #c1c902 96%) border-box !important;
+  background-size: cover !important;
+  background-position: center !important;
+  background-repeat: no-repeat !important;
+}

OgestanPlus/css/stylee.css

@@ -747,4 +747,13 @@ ul.bul0 {
 
 .btn-next-section {
   cursor: pointer;
+}
+
+.html-pop-style {
+  border: 6px solid transparent;
+  border-radius: 20px;
+  background: url(../img/fondo-pop.jpg) padding-box, linear-gradient(to right, #00928e 32%, #c1c902 96%) border-box !important;
+  background-size: cover !important;
+  background-position: center !important;
+  background-repeat: no-repeat !important;
 }

OgestanPlus/js/config.js

@@ -173,11 +173,11 @@ document.addEventListener('DOMContentLoaded', () => {
       sal({
         once: false,
         threshold: 0.3,
-        duration: 10000,
+        duration: 600,
-        easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+        easing: 'ease-out',
-        distance: '100px',
+        distance: '50px',
-        opacity: 0.2,
+        opacity: 0,
-        scale: 0.85,
+        scale: 0.95,
       });
     }, 200);
   }
@@ -211,11 +211,11 @@ document.addEventListener('DOMContentLoaded', () => {
           sal({
             once: false,
             threshold: 0.3,
-            duration: 10000,
+            duration: 600,
-            easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+            easing: 'ease-out',
-            distance: '100px',
+            distance: '50px',
-            opacity: 0.2,
+            opacity: 0,
-            scale: 0.85,
+            scale: 0.95,
           });
         }, 200);
       }