296 lines
11 KiB
HTML
296 lines
11 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;
|
|
}
|
|
|
|
.bg-purple-3 {
|
|
background: rgb(185, 115, 200, 0.30) !important;
|
|
}
|
|
|
|
.bg-custom {
|
|
background: rgb(255, 255, 255, 0.8);
|
|
}
|
|
|
|
@media(min-width: 991px) {
|
|
.back0 {
|
|
background-image: url(img/bg00.jpg);
|
|
background-position: center center;
|
|
}
|
|
|
|
/* .bg-custom {
|
|
background: transparent;
|
|
} */
|
|
}
|
|
</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 bg-custom px-5 py-3 rounded">
|
|
<hr class="m-0 mb-2 opacity-100 border-top-2 text-white d-none">
|
|
<h1 class="text-purple-2 fw-bolder">¡Bienvenido a <br> Papilocare<sup class="fw-bold">®</sup>!</h1>
|
|
<hr class="m-0 mt-2 opacity-100 border-top-2 text-white d-none">
|
|
</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">
|
|
<div class="card bg-purple-3 border-0 rounded-3 shadow-none px-3 py-2 py-md-3 text-center text-secondary">
|
|
<p class="my-0">Hoy conocerás de forma clara y práctica por qué <b class="">Papilocare<sup>®</sup></b> es
|
|
una opción
|
|
clave para <b>apoyar la
|
|
reparación de la zona cervicovaginal en pacientes con VPH</b>, y cómo esta información fortalecerá tu
|
|
comunicación con los 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-verde-1 fw-medium">¿Qué aprenderás hoy?</h2>
|
|
<p>Descubrirás <b>qué hace único a Papilocare®, cómo funciona</b>, cuál es su tecnología y cuál es su
|
|
modo de
|
|
aplicación.</p>
|
|
<p>Además, revisarás sus <b>ventajas frente a la competencia</b> y practicarás <b>cómo responder a las
|
|
principales
|
|
objeciones</b> durante tus visitas médicas.</p>
|
|
</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> |