template casi listo

OgestanPlus/contenido/01.html

@@ -24,7 +24,7 @@
               <h1 class="text-primary amor">y Empatía</h1>
             </div>
             <div class="w-100 position-relative">
-              <div class="btn btn-begin animate__animated animate__pulse animate__infinite py-2" data-sec="1">
+              <div id="wrap-comenzar" class="btn btn-begin animate__animated animate__pulse animate__infinite py-2">
                 Comenzar
               </div>
             </div>
@@ -34,42 +34,179 @@
     </div>
   </div>
 </div>
-<div id="sec1" class="page-sco back1 bg-primary" 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 align-items-center">
-          <div class="col-7 col-md-5 text-center mb-3">
-            <img src="img/01.0.png" class="img-fluid floating" />
-          </div>
-          <div class="col-12 col-md-7 mb-3 text-center">
-            <h3 class="amor text-gris-1 fw-light">Bienvenido al curso:</h3>
-            <div class="position-relative w-100 text-center mb-2">
-              <h1 class="amor fw-bold text-rosa-claro mb-0">Orientación al Cliente</h1>
-              <img src="img/adorno1.png" class="img-fluid">
-            </div>
-            <div class="position-relative w-100 mb-4">
-              <h1 class="text-primary amor">y Empatía</h1>
-            </div>
-            <!-- <div class="w-100 position-relative">
-              <div class="btn btn-begin animate__animated animate__pulse animate__infinite py-2">
-                Comenzar
-              </div>
-            </div> -->
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
 <script>
   $(function () {
     "use strict";
 
-    $(".btn-begin").click(function () {
+    if (!CourseNav.isVisited() || CourseNav.isDebug()) {
-      const secNumber = $(this).data('sec');
+      tour();
-      gotoSection(secNumber);
+    } else {
-    });
+      showIntro();
+    }
+
+    function showIntro() {
+      $("#wrap-comenzar").removeClass("disabled");
+      $('.personaje').addClass('animate__animated animate__pulse');
+    }
+
+
+    /**
+     * 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>