349 lines
12 KiB
HTML
349 lines
12 KiB
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 mb-3"
|
|
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 class="col-9 col-md-7 text-center d-block d-lg-none">
|
|
<img
|
|
src="img/01.1.png"
|
|
class="img-fluid floating"
|
|
/>
|
|
</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"
|
|
id="desapa0"
|
|
>
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col-12 col-md-6 text-center">
|
|
<img
|
|
src="img/03.0.png"
|
|
class="img-fluid"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<div class="card bg-var-2 border-0 rounded-3 shadow-none px-3 py-2 py-md-5 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> -->
|
|
<p class="mb-0">El suplemento más completo para apoyar la etapa de
|
|
<strong>fertilidad, embarazo y lactancia</strong>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</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);
|
|
$("#desapa0").addClass('d-none');
|
|
$(".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>
|