Ogestan_Drossagyn_Papilocare/OgestanPre/contenido/01.html

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

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

  .card-back0 {
    background-color: rgba(189, 204, 212, 0.3);
  }

  .grid-custom {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  @media (min-width: 768px) {
    .back0 {
      background-image: url(img/bg00.jpg);
      background-position: 33% 88%;
    }
  }
</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 justify-content-center justify-content-md-end">
          <div class="col-12 col-md-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-primary fw-bolder">
                    ¡Bienvenido a OGestan
                    <sup>®</sup>
                    Pré!
                  </h1>
                  <hr class="m-0 mt-2 opacity-100 border-top-2 text-white" />
                </div>
              </div>
              <div class="col-12 text-center mb-3 mb-md-0" 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 px-3 py-1">Comenzar</div>
                </div>
              </div>
              <div class="col-7 text-center d-block d-md-none">
                <img src="img/01.0.png" class="img-fluid" />
              </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="grid-custom flex-fill">
    <div class="part0 w-100 d-flex flex-column justify-content-center h-100 align-items-center py-3 py-md-4 img-sop" style="background-color: rgba(201, 124, 187, 0.5)">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-12">
            <div class="row justify-content-center">
              <div class="col-12 col-md-10 col-lg-9" data-sal="slide-right">
                <div class="card bg-transparent border-0 rounded-0 shadow-none py-2 px-0 text-secondary">
                  <p class="mb-0">
                    Gracias por formar parte de esta sesión dedicada a
                    <strong>
                      OGestan
                      <sup>®</sup>
                      Pré
                    </strong>
                    , una herramienta esencial para acompañar a las mujeres en el momento más importante de su vida reproductiva.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="w-100 position-relative mt-3 animate__animated animate__zoomIn img-sop">
      <div class="row justify-content-center">
        <div class="col-12 text-center">
          <img src="img/03.8.png" class="img-fluid" />
        </div>
      </div>
    </div>
    <div class="part1 w-100 flex-column justify-content-center align-items-center h-100" style="flex: 1; 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 apa0">
                <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.1.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-purple-1 fw-medium">¿Qué aprenderás hoy?</h2>
                    <p class="mb-0">
                      Al finalizar este módulo,
                      <strong class="text-blue-1">podrás identificar y explicar</strong>
                      los elementos fundamentales de OGestan
                      <sup>®</sup>
                      Pré, incluyendo qué es, a quién está dirigido, cuáles son sus beneficios y cómo se diferencia de la competencia, para comunicar su valor clínico y comercial
                      de manera más efectiva.
                    </p>
                  </div>
                </div>
              </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);
      $(".img-sop").hide().addClass('d-none');
      $(".part1").css("display", "flex");
    });

    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>