308 lines
11 KiB
HTML
308 lines
11 KiB
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);
|
|
}
|
|
|
|
.grid-custom {
|
|
position: relative;
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto 1fr;
|
|
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" style="background-color: rgba(201, 124, 187, .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="part1 w-100 d-flex flex-column justify-content-center align-items-center h-100">
|
|
<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" 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.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);
|
|
$('.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>
|