Ogestan_Drossagyn_Papilocare/OgestanPlus/contenido/01.html

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

  .back1 {
    background-image: url(img/bg01.jpg);
    background-size: cover;
    background-position: 100% 100%;
    background-repeat: no-repeat;
  }

  @media(min-width: 991px) {
    .back0 {
      background-image: url(img/bg00.jpg);
      background-position: center center;
    }
  }
</style>
<div class="page-sco back0 py-2 py-md-4">
  <div class="container">
    <div class="row justify-content-center align-items-center">
      <div class="col-12">
        <div class="row">
          <div class="col-12 col-lg-7">
            <div class="row justify-content-center">
              <div class="col-12 mb-3 text-center" data-sal="zoom-in">
                <div class="d-inline-block position-relative">
                  <hr class="m-0 mb-2 opacity-100 border-top-2 text-white">
                  <h1 class="text-white fw-bolder">¡Bienvenido a <br> OGestan<sup>®</sup> Plus!</h1>
                  <hr class="m-0 mt-2 opacity-100 border-top-2 text-white">
                </div>
              </div>
              <div class="col-12 text-center" data-sal="flip-up">
                <div class="w-100 position-relative">
                  <div id="wrap-comenzar"
                    data-sec="sec1"
                    class="btn btn-begin text-white fw-bold animate__animated animate__pulse animate__infinite py-1">
                    Comenzar
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="sec1" class="page-sco back1 py-3 py-md-4" 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 col-md-10 col-lg-9 mb-3" data-sal="slide-right">
            <div class="card bg-var-2 border-0 rounded-3 shadow-none px-3 py-2 text-blue-1">
              <p>Gracias por iniciar este módulo. Aquí conocerás los puntos clave de <strong>OGestan<sup>®</sup> Plus</strong>, el
                suplemento más completo para apoyar la etapa de <strong>fertilidad, embarazo y lactancia</strong>.</p>
            </div>
          </div>
          <div class="col-12 apa0" style="display: none;">
            <div class="row justify-content-center align-items-center">
              <div class="col-7 col-md-5 col-xl-4 text-center order-2 order-md-1" data-sal="zoom-in">
                <img src="img/01.0.png" class="img-fluid">
              </div>
              <div class="col-12 col-md-7 col-xl-5 order-1 order-md-2 mb-3 mb-md-0" data-sal="flip-left">
                <h2 class="text-secondary fw-medium">¿Qué aprenderás hoy?</h2>
                <p class="animate__animated animate__zoomIn animate__delay-2s">Al terminar este módulo podrás:</p>
                <ul class="mb-0 bul0">
                  <li class="animate__animated animate__fadeInUp animate__delay-4s">Comunicar qué es OGestan<sup>®</sup> Plus.</li>
                  <li class="animate__animated animate__fadeInUp animate__delay-7s">Describir sus beneficios más importantes.</li>
                  <li class="animate__animated animate__fadeInUp animate__delay-10s">Identificar lo que lo hace único en el mercado.</li>
                  <li class="animate__animated animate__fadeInUp animate__delay-13s">Responder objeciones comunes de médicos.</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {
    "use strict";

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

    audiom00.on('end',function(){
      CourseNav.audioController.stopAllSoundsAndPlay(audiom01);
      $('.apa0').show();
    });

    audiom01.on('end',function(){
      CourseNav.setSlideVisited();
    });

    if (!CourseNav.isVisited() || CourseNav.isDebug()) {
      tour();
    } else {
      showIntro();
    }

    function showIntro() {
      $("#wrap-comenzar").removeClass("disabled");
    }

    $("#wrap-comenzar").click(function (e) {
      e.preventDefault();
      CourseNav.soundClick();
      gotoSection($(this).data('sec'));
      CourseNav.audioController.stopAllSoundsAndPlay(audiom00);
      $(this).removeClass('animate__animated animate__pulse animate__infinite');
    });


    /**
     * Inicia un tour interactivo que guía al usuario a través de las funcionalidades del curso.
     * Utiliza la biblioteca driver.js para crear el tour y define acciones específicas para
     * varios pasos, como abrir o cerrar el menú lateral, controlar el audio, y más.
     */
    function tour() {
      // Crear una instancia del tour utilizando driver.js
      const driver = window.driver.js.driver;
      const showButtons = ["next", "previous", "close"];
      // Definir los pasos del tour
      const driverObj = driver({
        showProgress: false, // No mostrar el progreso del tour
        allowClose: true, // Permitir cerrar el tour
        disableActiveInteraction: true, // Deshabilitar la interacción activa durante el tour
        showButtons: showButtons, // Mostrar botones de navegación
        onNextClick: () => {
          CourseNav.soundClick(); // Reproducir sonido al hacer clic en "Siguiente"
          driverObj.moveNext();
        },
        onPrevClick: () => {
          CourseNav.soundClick(); // Reproducir sonido al hacer clic en "Anterior"
          driverObj.movePrevious();
        },

        steps: [
          {
            popover: {
              title: "Bienvenido",
              description: "Este tour te mostrará las funcionalidades de nuestro curso.",
            },
          },
          {
            element: "#coursenav-audio-control",
            popover: {
              title: "Control de Audio",
              description: "Con este botón puedes silenciar el audio.",
            },
          },
          {
            element: "#menu-toggle",
            popover: {
              title: "Menú de Navegación",
              description: "Usa este botón para abrir y cerrar el menú de navegación lateral.",
            },
            onHighlightStarted: () => {
              CourseNav.closeSidebar();
            },
          },
          {
            element: ".offcanvas-body",
            popover: {
              title: "Contenido",
              description: "Aquí encontrarás el contenido del curso.",
              side: "top",
              align: "start",
            },
            onHighlightStarted: () => {
              if (!$('.toggle-icon').first().find('i').hasClass('fa-square-chevron-down')) {
                $('.toggle-icon').first().click();
              }
              CourseNav.openSidebar();
            },
          },
          {
            element: "#wrap-progress-course",
            popover: {
              title: "Barra de Progreso",
              description: "Esta barra muestra tu progreso en el curso.",
            },
            onHighlightStarted: () => {
              if (!$('.toggle-icon').first().find('i').hasClass('fa-square-chevron-down')) {
                $('.toggle-icon').first().click();
              }
              CourseNav.openSidebar();
            },
          },
          {
            element: "#coursenav-prev-btn",
            popover: {
              title: "Botón Anterior",
              description: "Usa este botón para regresar al tema anterior.",
            },
            onHighlightStarted: () => {
              // Acción específica cuando se resalta este paso
              CourseNav.closeSidebar();
            },
          },
          {
            element: "#coursenav-next-btn",
            popover: {
              title: "Botón Siguiente",
              description: "Usa este botón para avanzar al tema siguiente.",
            },
            /* onDeselected: () => {
              document.getElementById("btn-glossary").style.display = "block";
            }, */
          },
          /*  {
             element: "#btn-glossary",
             popover: {
               title: "Botón Detalle de contenido",
               description: "Cuando veas este icono, da clic para profundizar en el detalle del contenido de esta capacitación.",
             },
             onDeselected: () => {
               $("#btn-glossary").hide();
             },
           }, */
          {
            element: "#wrap-comenzar",
            popover: {
              title: "Acciones",
              description: "Realiza diferentes acciones dando clic en los botones con animación de pulso.",
            },
          },
          {
            popover: {
              title: "¡Buena suerte!",
              description: "Esperamos que tengas la mejor experiencia en este curso.",
            },
          },
        ],
        onDestroyStarted: () => {
          // Manejar la destrucción del tour
          if (driverObj.hasNextStep()) {
            // Verificar si hay más pasos en el tour
            if (confirm("¿Salir de tutorial?")) {
              driverObj.destroy();
              showIntro();
            }
          } else {
            // No hay más pasos, destruir el tour sin preguntar
            driverObj.destroy();
            showIntro();
          }
          // Seleccionar todos los elementos con las clases swal2-shown y swal2-height-auto
          var elements = document.querySelectorAll(".swal2-shown, .swal2-height-auto");
          // Recorrer todos los elementos seleccionados y quitar las clases
          elements.forEach(function (element) {
            element.classList.remove("swal2-shown", "swal2-height-auto");
          });
          // Seleccionar todos los elementos con el atributo aria-hidden="true"
          var elements = document.querySelectorAll('[aria-hidden="true"]');
          // Recorrer todos los elementos seleccionados y quitar el atributo
          elements.forEach(function (element) {
            element.removeAttribute("aria-hidden");
          });
        },
        doneBtnText: "Finalizar", // Texto del botón para finalizar el tour
        closeBtnText: "Cerrar", // Texto del botón para cerrar el tour
        nextBtnText: "Siguiente", // Texto del botón para ir al siguiente paso
        prevBtnText: "Anterior", // Texto del botón para ir al paso anterior
        progressText: "{{current}} de {{total}}", // Texto para mostrar el progreso del tour
      });

      // Iniciar el tour
      driverObj.drive();
    }

  });
</script>