Ogestan_Drossagyn_Papilocare/Drossagyn/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, .3);
  }

  @media(min-width: 768px) {
    .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-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 <br> Drossagyn<sup>®</sup>!</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 p-2">
                    <div class="inside-card px-3 py-2">Comenzar</div>
                  </div>
                </div>
              </div>
              <div class="col-7 text-center d-block d-md-none">
                <img src="img/01.1.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="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 card-back0 border-0 rounded-3 shadow-none px-3 py-2 text-green-1">
              <p><strong>Bienvenido al curso de Drossagyn<sup>®</sup></strong>, donde conocerás de manera sencilla y práctica todo lo
                necesario para dominar este producto y usar esa información en tus conversaciones diarias con profesionales de la
                salud.</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="mb-0 animate__animated animate__zoomIn animate__delay-2s">Al terminar este recorrido, <strong>tú podrás reconocer, explicar y usar con seguridad</strong> la información clave
                  sobre Drossagyn<sup>®</sup>:<br />cómo está formulado, cómo actúa, cómo se usa, qué precauciones requiere y cómo se
                  compara con otras alternativas del mercado.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {
    "use strict";

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

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

    audioh01.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(audioh00);
      $(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>