Update: Creacion de Papilocare
This commit is contained in:
@@ -0,0 +1,287 @@
|
||||
<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;
|
||||
}
|
||||
|
||||
@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> Papilocare®!</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">
|
||||
<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>
|
||||
@@ -0,0 +1,260 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url(img/bg02.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.shadow-externo {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.gradient-card {
|
||||
background: #C1C902;
|
||||
background: linear-gradient(to right, #C1C902 0%, #006EAB 100%);
|
||||
}
|
||||
|
||||
.cid0 .swiper-wrapper {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.btn-circ {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100%;
|
||||
background: #F2F2F2;
|
||||
background: linear-gradient(to bottom, #F2F2F2 11%, #BDCCD4 100%);
|
||||
outline: 8px solid rgba(14, 28, 98, .3);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.circ_interno {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 100%;
|
||||
background: #dcdcdc;
|
||||
}
|
||||
|
||||
.btn-circ:hover .circ_interno {
|
||||
background: #DD3352;
|
||||
background: linear-gradient(to top, #DD3352 11%, #FEA968 100%);
|
||||
}
|
||||
|
||||
.btn-circ.selected .circ_interno {
|
||||
background: #DD3352;
|
||||
background: linear-gradient(to top, #DD3352 11%, #FEA968 100%);
|
||||
}
|
||||
|
||||
.custom-grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.anim0 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.text-t {
|
||||
max-width: 25%;
|
||||
margin-right: 3%;
|
||||
}
|
||||
|
||||
.text-t1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.custom-flx {
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.text-2 {
|
||||
flex: 1;
|
||||
max-width: 70%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class='page-sco back0 py-3 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'>
|
||||
<div class="col-12 mb-3 text-center anim0 animate__animated animate__lightSpeedInLeft">
|
||||
<h2 class="text-primary fw-bold">La familia OGestan<sup>®</sup>: lo esencial para el proceso de fertilidad, embarazo y lactancia</h2>
|
||||
</div>
|
||||
<div class="col-12 col-lg-10 apa0 animate__animated animate__zoomIn" style="display: none;">
|
||||
<div class="shadow-externo rounded-3">
|
||||
<div class="swiper cid0">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="card gradient-card border-0 rounded-3 shadow-none p-2">
|
||||
<div class="card-body bg-white border-0 rounded-3 shadow-none px-3 pt-3 pb-0">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-6 col-md-4 text-center order-2 order-md-1">
|
||||
<img src="img/02.0.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 col-md-8 order-1 order-md-2 mb-3 mb-md-0">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 mb-3">
|
||||
<p class="mb-0">OGestan<sup>®</sup> acompaña a la mujer —y también al hombre— durante todo el proceso reproductivo:</p>
|
||||
</div>
|
||||
<div class="col-8 col-md-7 col-lg-12 text-center mb-3">
|
||||
<img src="img/02.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<p class="mb-0">Preconcepción y 1er trimestre de embarazo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card gradient-card border-0 rounded-3 shadow-none p-2">
|
||||
<div class="card-body bg-white border-0 rounded-3 shadow-none px-3 pt-3 pb-0">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-6 col-md-4 text-center order-2 order-md-1">
|
||||
<img src="img/02.2.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 col-md-8 order-1 order-md-2 mb-3 mb-md-0">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-8 col-md-7 col-lg-12 text-center mb-3">
|
||||
<img src="img/02.3.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<p class="mb-0">2do trimestre, 3er trimestre y lactancia (hasta los 6 meses de lactancia).</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card gradient-card border-0 rounded-3 shadow-none p-2">
|
||||
<div class="card-body bg-white border-0 rounded-3 shadow-none px-3 py-3">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12">
|
||||
<div class="custom-grid">
|
||||
<div class="d-flex flex-wrap justify-content-center align-items-center gap-2">
|
||||
<div class="text-t">
|
||||
<p class="mb-0 fw-bold text-pink">Fertilidad Femenina</p>
|
||||
</div>
|
||||
<div class="d-flex custom-flx flex-fill gap-2 justify-content-center text-center">
|
||||
<div class="text-t1">
|
||||
<p>1er trimestre de <br> embarazo</p>
|
||||
<img src="img/02.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="text-t1">
|
||||
<p>2do trimestre de <br> embarazo hasta lactancia</p>
|
||||
<img src="img/02.3.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-relative w-100">
|
||||
<img src="img/02.4.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="d-flex flex-wrap justify-content-center align-items-center gap-2">
|
||||
<div class="text-t">
|
||||
<p class="mb-0 fw-bold text-pink">Fertilidad masculina</p>
|
||||
</div>
|
||||
<div class="text-2 d-flex justify-content-center">
|
||||
<div class="col-7 col-md-6 col-lg-8 text-center">
|
||||
<img src="img/02.5.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-relative w-100 mt-3">
|
||||
<div class="d-flex justify-content-center align-items-center gap-4">
|
||||
<div class="btn-circ animate__animated animate__pulse animate__infinite" data-slide="0">
|
||||
<div class="circ_interno"></div>
|
||||
</div>
|
||||
<div class="btn-circ animate__animated animate__pulse animate__infinite" data-slide="1">
|
||||
<div class="circ_interno"></div>
|
||||
</div>
|
||||
<div class="btn-circ animate__animated animate__pulse animate__infinite" data-slide="2">
|
||||
<div class="circ_interno"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('body').addClass('fake');
|
||||
|
||||
const audiom02a = CourseNav.createSound('audio/audiom02a.mp3');
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom02a);
|
||||
|
||||
audiom02a.on('play', function () {
|
||||
$('.anim0').show();
|
||||
});
|
||||
|
||||
audiom02a.on('end',function(){
|
||||
$('.apa0').show();
|
||||
$('.btn-circ').first().click();
|
||||
});
|
||||
|
||||
const paths = [
|
||||
"audio/audiom02b.mp3",
|
||||
"audio/audiom03.mp3",
|
||||
"audio/audiom04.mp3"
|
||||
];
|
||||
let audios = [];
|
||||
paths.forEach(function (element) {
|
||||
audios.push(CourseNav.createSound(element));
|
||||
});
|
||||
|
||||
const mySwiper = new Swiper(".cid0", {
|
||||
effect: "slide",
|
||||
autoHeight: true,
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 10
|
||||
});
|
||||
|
||||
$('.btn-circ').click(function(){
|
||||
CourseNav.soundClick();
|
||||
const slideIndex = $(this).data('slide');
|
||||
mySwiper.slideTo(slideIndex);
|
||||
$(this).removeClass('animate__animated animate__pulse animate__infinite');
|
||||
$('.btn-circ').removeClass('selected');
|
||||
$(this).addClass('selected completed');
|
||||
|
||||
if($('.btn-circ.completed').length === $('.btn-circ').length){
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
|
||||
if(audios[slideIndex]){
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios[slideIndex]);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,139 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url(img/bg02.jpg);
|
||||
background-size: cover;
|
||||
background-position: 12% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.back1 {
|
||||
background-image: url(img/bg02a.jpg);
|
||||
background-size: cover;
|
||||
background-position: 12% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.text-card {
|
||||
background-color: rgba(255, 255, 255, .7);
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.anim0 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bg-purple-3 {
|
||||
background: rgb(185, 115, 200, 0.30) !important;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.back0 {
|
||||
background-position: 28% 100%;
|
||||
}
|
||||
|
||||
.text-card {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class='page-sco'>
|
||||
<div class="sec_i0 back0 py-2 py-md-4 flex-fill d-flex flex-column justify-content-center align-items-center">
|
||||
<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 mb-3'>
|
||||
<div class="col-7 col-md-5 col-lg-6 text-center anim0" data-sal="slide-down">
|
||||
<img src="img/02.0.png" class="img-fluid floating">
|
||||
</div>
|
||||
<div class="col-12 col-md-7 col-lg-6 text-center anim0" data-sal="slide-down">
|
||||
<div class="d-inline-block position-relative">
|
||||
<hr class="m-0 mb-2 opacity-100 border-top-2 text-gray-2">
|
||||
<div class="text-card p-2 p-md-0">
|
||||
<h2 class="text-secondary fw-bold">¿Qué es Papilocare®?</h2>
|
||||
<p class="mb-0"><b>Papilocare<sup>®</sup></b> es una <b>solución diseñada para apoyar la reparación de
|
||||
la zona
|
||||
cervicovaginal</b> en mujeres con diagnóstico de VPH. Más adelante conocerás qué lo hace diferente
|
||||
y
|
||||
cómo actúa.</p>
|
||||
</div>
|
||||
<hr class="m-0 mt-2 opacity-100 border-top-2 text-gray-2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-100 py-2 py-md-4 text-center sec_i1" style="display: none;">
|
||||
<div class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite" data-sec="sec1"
|
||||
data-audio="audiom03">
|
||||
<img src="img/nSec.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sec1" class='page-sco py-2 py-md-4 back1' 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-12 col-md-7 col-xl-4" data-sal="zoom-in">
|
||||
<h2 class="text-pink-1 text-center fw-bold">Presentación Comercial</h2>
|
||||
<div class="card border-0 bg-purple-3">
|
||||
<div class="card-body">
|
||||
<p class="my-0">Caja con <b>7</b> tubos monodosis de 5 ml cada uno, con aplicador.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7 col-md-5 col-xl-6 px-md-4 text-center" data-sal="zoom-in">
|
||||
<img src="img/02.1.png" class="img-fluid floating">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('body').addClass('fake');
|
||||
const audiom02 = CourseNav.createSound('audio/audiom02.mp3');
|
||||
const audiom03 = CourseNav.createSound('audio/audiom03.mp3');
|
||||
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom02);
|
||||
|
||||
audiom02.on('play', function () {
|
||||
$('.anim0').show();
|
||||
});
|
||||
|
||||
audiom02.on('end', function () {
|
||||
$('.sec_i1').show();
|
||||
//CourseNav.setSlideVisited();
|
||||
});
|
||||
|
||||
audiom03.on('end', function () {
|
||||
CourseNav.setSlideVisited(true);
|
||||
});
|
||||
|
||||
$('.btn-next-section').click(function () {
|
||||
$(this).removeClass('animate__animated animate__pulse animate__infinite');
|
||||
gotoSection($(this).data('sec'));
|
||||
$(this).parent().hide();
|
||||
|
||||
const audioName = $(this).data('audio');
|
||||
if (audioName) {
|
||||
setTimeout(() => {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(eval(audioName));
|
||||
}, 500);
|
||||
} else {
|
||||
CourseNav.soundClick();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,356 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url(img/bg03.jpg);
|
||||
background-size: cover;
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Borde degradado radial para las tarjetas dentro del swiperCarrousell */
|
||||
.swiperCarrousell .card {
|
||||
border: 4px solid transparent;
|
||||
border-radius: 14px;
|
||||
/* Capa 1: fondo blanco del contenido, Capa 2: borde radial degradado */
|
||||
background-image: linear-gradient(white, white), radial-gradient(circle at center, #f5f0f5 0%, #7b3686 30%, #efba92 80%, #7b3686 100%);
|
||||
background-origin: border-box;
|
||||
background-clip: padding-box, border-box;
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/* Estilos visuales para botones de navegación deshabilitados */
|
||||
.swiperCarrousell .btn-prev.disabled,
|
||||
.swiperCarrousell .btn-next.disabled {
|
||||
opacity: 0.45;
|
||||
pointer-events: none;
|
||||
filter: grayscale(0.2);
|
||||
}
|
||||
|
||||
.bg-purple-3 {
|
||||
background: rgb(185, 115, 200, 0.30) !important;
|
||||
}
|
||||
|
||||
|
||||
.btn-pop {
|
||||
cursor: pointer;
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
/* asegurar posicionamiento para z-index */
|
||||
z-index: 99999 !important;
|
||||
}
|
||||
|
||||
/* Asegurar que el contenedor permita posicionar elementos encima */
|
||||
.swiperCarrousell {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pop_lateral {
|
||||
background: linear-gradient(180deg, #f5f0f5, #f5f0f5);
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.content-pop-lateral {
|
||||
grid-template-rows: 1fr !important;
|
||||
}
|
||||
|
||||
.pop_lateral {
|
||||
grid-template-columns: 1fr !important;
|
||||
grid-template-rows: 85% auto !important;
|
||||
grid-row: 1 / 1 !important;
|
||||
place-self: end !important;
|
||||
width: 75% !important;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.whois {
|
||||
position: absolute;
|
||||
bottom: 0rem;
|
||||
left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media(min-width: 991px) {
|
||||
.back0 {
|
||||
background-image: url(img/bg03.jpg);
|
||||
background-position: 68% 100%;
|
||||
}
|
||||
|
||||
.swiper-nav-buttons {
|
||||
margin-top: -4em !important;
|
||||
z-index: 10 !important;
|
||||
/* mantener debajo de btn-pop */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Permitir que btn-pop reciba clics aunque quede visualmente debajo del contenedor de navegación
|
||||
Hacemos que el contenedor no capture eventos, pero mantenemos los botones de navegación clickables */
|
||||
.swiper-nav-buttons {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
.swiper-nav-buttons .btn-prev,
|
||||
.swiper-nav-buttons .btn-next {
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class='page-sco py-3 py-md-4 back0'>
|
||||
<div class='container'>
|
||||
<div class='row justify-content-center align-items-center'>
|
||||
<div class='col-12'>
|
||||
<div class='row justify-content-center justify-content-center'>
|
||||
<div class="col-12 col-md-12 text-center animate__animated animate__bounceInDown">
|
||||
<h2 class="text-secondary fw-bold">Indicaciones</h2>
|
||||
</div>
|
||||
<div class="col-12 col-md-12 col-lg-10 animate__animated animate__bounceInDown text-center">
|
||||
<div class="swiperCarrousell">
|
||||
<!-- Swiper container -->
|
||||
<div class="swiper mySwiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="card">
|
||||
<div class="card-body row justify-content-center align-items-center">
|
||||
<div class="col-7 col-md-4">
|
||||
<img src="img/03.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 col-md-8">
|
||||
<p><b>Papilocare<sup>®</sup></b> está indicado como auxiliar en la
|
||||
reparación y reepitelización de la zona de transformación
|
||||
cervical, y como coadyuvante en lesiones intraepiteliales
|
||||
escamosas de bajo grado (LIEBG) asociadas a VPH.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card">
|
||||
<div class="card-body row justify-content- align-items-center">
|
||||
<div
|
||||
class="col-2 col-md-1 col-xl-1 h-100 d-flex justify-content-center align-items-end">
|
||||
<button
|
||||
class="btn btn-transparent border-0 my-0 mx-0 py-0 px-0 text-white animate__animated animate__pulse animate__infinite disable btn-pop whois"
|
||||
style="display: non;" data-popid="#pop0" data-audio="0"><img
|
||||
src="img/question.png" class="img-fluid"></button>
|
||||
</div>
|
||||
<div class="col-7 col-md-4 col-xl-4">
|
||||
<img src="img/03.2.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 col-md-7 col-xl-7">
|
||||
<p>Papilocare<sup>®</sup> actúa formando una <b>película
|
||||
protectora</b> sobre la
|
||||
mucosa vaginal, que actúa como barrera defensiva, por lo que es
|
||||
útil para:</p>
|
||||
<ul class="text-start">
|
||||
<li>Reducir las molestias y favorecer el proceso natural de
|
||||
<b>cicatrización de la zona cervicovaginal</b>.
|
||||
</li>
|
||||
<li><b>Tratar</b> la sequedad de la mucosa cervicovaginal.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-nav-buttons me-md-3 mt-2 mt-md-2 text-end">
|
||||
<button class="btn-prev btn btn-transparent border-0 mx-2 px-0 py-0"
|
||||
style="display: none;">
|
||||
<!-- <i class="fa fa-chevron-left"></i> -->
|
||||
<img src="img/prev.png" alt="Previous" class="img-fluid">
|
||||
</button>
|
||||
<button
|
||||
class="btn-next btn btn-transparent border-0 mx-2 px-0 py-0 animate__animated animate__pulse animate__infinite">
|
||||
<!-- <i class="fa fa-chevron-right"></i> -->
|
||||
<img src="img/next.png" alt="Next" class="img-fluid">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-none">
|
||||
<div id="pop0">
|
||||
<div class="container-fluid">
|
||||
<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-12 col-md-12 col-xl-8 text-start">
|
||||
<h3 class="fw-semibold text-pink-1 text-center">¿Para quién?</h3>
|
||||
<p><b>Papilocare<sup>®</sup></b> está diseñado para acompañar a mujeres con diagnóstico de
|
||||
<b>VPH+</b>, brindando
|
||||
apoyo en la recuperación de la zona cervicovaginal.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-10 col-xl-7 mt-4 my-md-0">
|
||||
<img src="img/03.3.png" class="img-fluid floating" alt="Nombre comercial">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('body').addClass('fake');
|
||||
|
||||
|
||||
const audios = [
|
||||
CourseNav.createSound('audio/audiom04.mp3'),
|
||||
CourseNav.createSound('audio/audiom05.mp3'),
|
||||
]
|
||||
|
||||
// Inicializar el Swiper
|
||||
const swiper = new Swiper('.mySwiper', {
|
||||
spaceBetween: 30,
|
||||
centeredSlides: true,
|
||||
autoHeight: true,
|
||||
allowTouchMove: true,
|
||||
navigation: {
|
||||
nextEl: '.btn-next',
|
||||
prevEl: '.btn-prev',
|
||||
},
|
||||
on: {
|
||||
init: function () {
|
||||
// Al inicializar, reproducir el primer audio
|
||||
if (audios.length > 0) {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios[0]);
|
||||
}
|
||||
// Agregar clase completed al primer slide
|
||||
this.slides[this.activeIndex].classList.add('completed');
|
||||
updateNavigationButtons(this);
|
||||
},
|
||||
slideChange: function () {
|
||||
// Reproducir audio correspondiente al slide actual
|
||||
const currentIndex = this.activeIndex;
|
||||
if (audios[currentIndex]) {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios[currentIndex]);
|
||||
}
|
||||
// Agregar clase completed al slide actual
|
||||
this.slides[currentIndex].classList.add('completed');
|
||||
updateNavigationButtons(this);
|
||||
|
||||
// Verificar si todos los slides tienen la clase completed
|
||||
checkAllSlidesCompleted(this);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Función para actualizar el estado (habilitado/disabled) de los botones de navegación
|
||||
function updateNavigationButtons(swiperInstance) {
|
||||
const btnPrev = document.querySelector('.btn-prev');
|
||||
const btnNext = document.querySelector('.btn-next');
|
||||
const currentIndex = swiperInstance.activeIndex;
|
||||
const totalSlides = swiperInstance.slides.length;
|
||||
|
||||
// Asegurar que los botones estén visibles (no ocultarlos)
|
||||
if (btnPrev) btnPrev.style.display = 'inline-block';
|
||||
if (btnNext) btnNext.style.display = 'inline-block';
|
||||
|
||||
// Deshabilitar btn-prev en el primer slide
|
||||
if (btnPrev) {
|
||||
if (currentIndex === 0) {
|
||||
btnPrev.classList.add('disabled');
|
||||
btnPrev.setAttribute('disabled', 'disabled');
|
||||
} else {
|
||||
btnPrev.classList.remove('disabled');
|
||||
btnPrev.removeAttribute('disabled');
|
||||
}
|
||||
}
|
||||
|
||||
// Deshabilitar btn-next en el último slide
|
||||
if (btnNext) {
|
||||
if (currentIndex === totalSlides - 1) {
|
||||
btnNext.classList.add('disabled');
|
||||
btnNext.setAttribute('disabled', 'disabled');
|
||||
// quitar animación cuando llegue al final
|
||||
$(btnNext).removeClass('animate__animated animate__pulse animate__infinite');
|
||||
} else {
|
||||
btnNext.classList.remove('disabled');
|
||||
btnNext.removeAttribute('disabled');
|
||||
// asegurar animación si corresponde
|
||||
if (!$(btnNext).hasClass('animate__animated')) {
|
||||
// $(btnNext).addClass('animate__animated animate__pulse animate__infinite');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Función para verificar si todos los slides están completados
|
||||
function checkAllSlidesCompleted(swiperInstance) {
|
||||
const totalSlides = swiperInstance.slides.length;
|
||||
const completedSlides = swiperInstance.slides.filter(slide => slide.classList.contains('completed'));
|
||||
|
||||
if (completedSlides.length === totalSlides) {
|
||||
// Todos los slides están completados
|
||||
// console.log('Todos los slides han sido completados');
|
||||
// CourseNav.setSlideVisited();
|
||||
$('.whois').show().removeClass('disabled');
|
||||
}
|
||||
}
|
||||
|
||||
const audios_pop = [
|
||||
CourseNav.createSound('audio/audiom06.mp3')
|
||||
];
|
||||
|
||||
$('.btn-pop').click(function (e) {
|
||||
e.preventDefault();
|
||||
const html = $($(this).data('popid')).html();
|
||||
const audio = $(this).data('audio');
|
||||
$(this).addClass('completed').removeClass('animate__animated animate__pulse animate__infinite');
|
||||
Swal.fire({
|
||||
html: html,
|
||||
target: "body",
|
||||
customClass: {
|
||||
container: 'p-0 content-pop-lateral',
|
||||
popup: 'pop_lateral',
|
||||
htmlContainer: 'd-flex justify-content-center align-items-center',
|
||||
actions: 'my-0',
|
||||
confirmButton: 'btn btn-begin border-3 border-blue-6 text-white fw-bold animate__animated animate__pulse animate__infinite py-1 px-4'
|
||||
},
|
||||
confirmButtonText: "Cerrar",
|
||||
showConfirmButton: true,
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
focusConfirm: false,
|
||||
backdrop: "rgba(171, 180, 183, .80)",
|
||||
grow: 'fullscreen',
|
||||
showClass: {
|
||||
popup: 'animate__animated animate__fadeInRight animate__faster' // Animación dinámica (derecha/izquierda)
|
||||
},
|
||||
hideClass: {
|
||||
popup: 'animate__animated animate__fadeOutRight animate__faster' // Animación de salida coherente
|
||||
},
|
||||
didOpen: () => {
|
||||
$('.swal2-confirm').show();
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios_pop[audio]);
|
||||
if (CourseNav.isVisited()) {
|
||||
$('.swal2-confirm').show();
|
||||
} else {
|
||||
audios_pop[audio].on('end', function () {
|
||||
$('.swal2-confirm').show();
|
||||
});
|
||||
}
|
||||
},
|
||||
didClose: () => {
|
||||
CourseNav.audioController.stopAudio();
|
||||
isCompleted();
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
function isCompleted() {
|
||||
if ($('.btn-pop').length == $('.btn-pop.completed').length) {
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,405 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url(img/bg04.jpg);
|
||||
background-size: cover;
|
||||
background-position: 12% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.btn-pop {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#svg-container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#svg-container svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.btn-pop {
|
||||
cursor: pointer;
|
||||
transform-box: content-box;
|
||||
transform-origin: center !important;
|
||||
filter: opacity(0.7);
|
||||
}
|
||||
|
||||
.btn-pop.selected {
|
||||
filter: opacity(1);
|
||||
-webkit-transition: all 0.5s ease;
|
||||
-moz-transition: all 0.5s ease;
|
||||
-o-transition: all 0.5s ease;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.btn-pop.visited {
|
||||
filter: opacity(1);
|
||||
}
|
||||
|
||||
.pop-type0 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.imgs0:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0rem;
|
||||
bottom: 0rem;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url(img/04.1.png);
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.imgs1:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0rem;
|
||||
bottom: 0rem;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url(img/04.2.png);
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.imgs2:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0rem;
|
||||
bottom: 0rem;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url(img/04.3.png);
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.imgs3:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0rem;
|
||||
bottom: 0rem;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url(img/04.4.png);
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.imgs4:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0rem;
|
||||
bottom: 0rem;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url(img/04.5.png);
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.imgs5:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0rem;
|
||||
bottom: 0rem;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url(img/04.6.png);
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.imgs6:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0rem;
|
||||
bottom: 0rem;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url(img/04.7.png);
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
/* Asegurar que el contenedor permita posicionamiento absoluto del pseudo-elemento */
|
||||
.imgs0,
|
||||
.imgs1,
|
||||
.imgs2,
|
||||
.imgs3,
|
||||
.imgs4,
|
||||
.imgs5,
|
||||
.imgs6 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.pop-type0 {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 1200px) {
|
||||
.pop-type0 {
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class='page-sco'>
|
||||
<div
|
||||
class="position-relative w-100 back0 flex-fill py-2 py-md-4 d-flex flex-column justify-content-center align-items-center">
|
||||
<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-12 text-center mb-3 animate__animated animate__bounceInDown">
|
||||
<h2 class="text-secondary fw-bold">Una fórmula única con <span class="text-pink-1">7</span> componentes
|
||||
clave</h2>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-10 col-md-5 col-xl-4 text-center order-2 order-md-1 animate__animated animate__zoomIn">
|
||||
<div id="svg-container" class=""></div>
|
||||
</div>
|
||||
<div class="col-12 col-md-10 col-xl-7 order-1 order-md-2 animate__animated animate__fadeInRight">
|
||||
<p><b>Papilocare<sup>®</sup></b> cuenta con una <b>fórmula única patentada</b> que combina
|
||||
<b>biotecnología
|
||||
avanzada
|
||||
e ingredientes
|
||||
naturales</b>. Sus componentes se organizan en dos sistemas especializados: <b>Niosomas y
|
||||
Fitosomas</b>, que
|
||||
permiten una liberación más efectiva y una mejor penetración de los ingredientes en la mucosa.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-none">
|
||||
<div id="pop6">
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center align-items-center mb-5 mb-md-0 py-md-5 px-4">
|
||||
<div class="col-12 col-md-12 col-xl-12 text-start">
|
||||
<h2 class="fw-medium text-pink-1 text-center">Coriolus versicolor</h2>
|
||||
<p>Hongo que contiene PSK y PSP, conocidos por sus propiedades <b>inmunoestimulantes</b>, con actividad
|
||||
<b>antimicrobiana y antitumoral</b>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop5">
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center align-items-center mb-5 mb-md-0 py-md-5 px-4">
|
||||
<div class="col-12 col-md-12 col-xl-12 text-start">
|
||||
<h2 class="fw-medium text-pink-1 text-center">Neem</h2>
|
||||
<p>Planta medicinal con propiedades <b>antivirales, antisépticas, antipiréticas, antimicrobianas y
|
||||
antiinflamatorias</b>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop4">
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center align-items-center mb-5 mb-md-0 py-md-5 px-4">
|
||||
<div class="col-12 col-md-12 col-xl-12 text-start">
|
||||
<h2 class="fw-medium text-pink-1 text-center">Aloe vera</h2>
|
||||
<p>Ingrediente con acción <b>hidratante, cicatrizante y antiinflamatoria</b>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop3">
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center align-items-center mb-5 mb-md-0 py-md-5 px-4">
|
||||
<div class="col-12 col-md-12 col-xl-12 text-start">
|
||||
<h2 class="fw-medium text-pink-1 text-center">BioEcolia<sup>®</sup></h2>
|
||||
<p>Prebiótico que <b>reequilibra la microbiota vaginal</b>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop2">
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center align-items-center mb-5 mb-md-0 py-md-5 px-4">
|
||||
<div class="col-12 col-md-12 col-xl-12 text-start">
|
||||
<h2 class="fw-medium text-pink-1 text-center">Centella asiática</h2>
|
||||
<p>Participa en la <b>regeneración y cicatrización</b> de las mucosas, actuando sobre fibroblastos y
|
||||
matriz
|
||||
extracelular, favoreciendo la <b>reparación de erosiones mucosas.</b></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop1">
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center align-items-center mb-5 mb-md-0 py-md-5 px-4">
|
||||
<div class="col-12 col-md-12 col-xl-12 text-start">
|
||||
<h2 class="fw-medium text-pink-1 text-center">β-glucano</h2>
|
||||
<p>Polisacárido que promueve la <b>respuesta inmunitaria cutánea</b>, con efecto <b>antioxidante y
|
||||
antiinflamatorio</b>. Además, <b>acelera el proceso de cicatrización</b>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop0">
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center align-items-center mb-5 mb-md-0 py-md-5 px-4">
|
||||
<div class="col-12 col-md-12 col-xl-12 text-start">
|
||||
<h2 class="fw-medium text-pink-1 text-center">Ácido hialurónico</h2>
|
||||
<p>Esencial para mantener la <b>hidratación intra- y pericelular</b> y conservar la <b>arquitectura del
|
||||
tejido
|
||||
conjuntivo</b>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('body').addClass('fake');
|
||||
|
||||
|
||||
|
||||
const audiom07 = CourseNav.createSound('audio/audiom07.mp3');
|
||||
|
||||
const audios = [
|
||||
CourseNav.createSound('audio/audiom08.mp3'),
|
||||
CourseNav.createSound('audio/audiom09.mp3'),
|
||||
CourseNav.createSound('audio/audiom10.mp3'),
|
||||
CourseNav.createSound('audio/audiom11.mp3'),
|
||||
CourseNav.createSound('audio/audiom12.mp3'),
|
||||
CourseNav.createSound('audio/audiom13.mp3'),
|
||||
CourseNav.createSound('audio/audiom14.mp3'),
|
||||
];
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom07);
|
||||
|
||||
audiom07.on('play', function () {
|
||||
|
||||
});
|
||||
|
||||
audiom07.on('end', function () {
|
||||
$('.btn-pop').removeClass('disabled');
|
||||
});
|
||||
|
||||
function loadSVG() {
|
||||
let figure;
|
||||
figure = 'img/04.0.svg'
|
||||
$.get(figure, function (data) {
|
||||
var svg = $(data).find('svg');
|
||||
$('#svg-container').html(svg);
|
||||
// attachClickHandlers(); // Attach click handlers after SVG is loaded
|
||||
// Remove width and height attributes to make SVG responsive
|
||||
svg.removeAttr('width').removeAttr('height');
|
||||
let index = 0;
|
||||
$('[id*="xbtn"]').each(function () {
|
||||
$(this).addClass('btn-pop animate__animated animate__pulse animate__infinite disable');
|
||||
$(this).attr('data-popid', '#pop' + index);
|
||||
index++;
|
||||
});
|
||||
pops();
|
||||
}, 'xml');
|
||||
}
|
||||
|
||||
loadSVG();
|
||||
|
||||
function pops() {
|
||||
$('.btn-pop').click(function (e) {
|
||||
e.preventDefault();
|
||||
$(this).removeClass('animate__animated animate__pulse animate__infinite').addClass('completed visited');
|
||||
const index = $('.btn-pop').index(this);
|
||||
console.log(index);
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios[index]);
|
||||
const html = $($(this).data('popid')).html();
|
||||
Swal.fire({
|
||||
html: html,
|
||||
target: "body",
|
||||
customClass: {
|
||||
popup: 'pop-type0 bg-transparent p-0',
|
||||
htmlContainer: 'html-pop-style p-3 imgs imgs' + index,
|
||||
confirmButton: 'btn btn-begin text-white fw-bold animate__animated animate__pulse animate__infinite py-1 px-4'
|
||||
},
|
||||
confirmButtonText: "Cerrar",
|
||||
showConfirmButton: true,
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
focusConfirm: false,
|
||||
backdrop: "rgba(171, 180, 183, .8)",
|
||||
// width: "45%",
|
||||
heightAuto: false,
|
||||
didOpen: () => {
|
||||
document.body.style.paddingRight = '';
|
||||
},
|
||||
didClose: () => {
|
||||
document.body.style.paddingRight = '';
|
||||
CourseNav.audioController.stopAudio();
|
||||
if ($('.btn-pop').length == $('.btn-pop.completed').length) {
|
||||
CourseNav.setSlideVisited(true);
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,194 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url(img/bg05.jpg);
|
||||
background-size: cover;
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 4px solid transparent;
|
||||
border-radius: 14px;
|
||||
/* Capa 1: fondo blanco del contenido, Capa 2: borde radial degradado */
|
||||
background-image: linear-gradient(white, white), radial-gradient(circle at center, #f5f0f5 0%, #7b3686 30%, #efba92 80%, #7b3686 100%);
|
||||
background-origin: border-box;
|
||||
background-clip: padding-box, border-box;
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.btn-pop {
|
||||
cursor: pointer;
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
/* asegurar posicionamiento para z-index */
|
||||
z-index: 99999 !important;
|
||||
}
|
||||
|
||||
.pop-type0 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.pop-type0 {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 1200px) {
|
||||
.pop-type0 {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.imgs:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -3rem;
|
||||
bottom: 74px;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url(img/05.6.png);
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.btn-responsive {
|
||||
position: absolute;
|
||||
right: 0%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class='page-sco py-3 py-md-4 back0'>
|
||||
<div class='container'>
|
||||
<div class='row justify-content-center align-items-center'>
|
||||
<div class='col-12'>
|
||||
<div class='row justify-content-center align-items-end'>
|
||||
<div class="col-12">
|
||||
<h2 class="text-center fw-semibold text-secondary">Niosomas y Fitosomas</h2>
|
||||
<p class="text-center">Son <b>sistemas nanotecnológicos de liberación prolongada</b> de gran
|
||||
efectividad.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-12 col-xl-10">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-7 col-md-4 col-xl-3">
|
||||
<img src="img/05.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-6 col-md-2">
|
||||
<img src="img/05.2.png" class="img-fluid">
|
||||
<p class="text-center fw-semibold">Ácido hialurónico</p>
|
||||
</div>
|
||||
<div class="col-6 col-md-2">
|
||||
<p class="text-center text-pink-1 fw-bold">Niosomas</p>
|
||||
</div>
|
||||
<div class="col-6 col-md-2">
|
||||
<img src="img/05.3.png" class="img-fluid">
|
||||
<p class="text-center fw-semibold">β-glucano</p>
|
||||
</div>
|
||||
<div class="col-6 col-md-2">
|
||||
<p class="text-center text-pink-1 fw-bold">Fitosomas</p>
|
||||
</div>
|
||||
<div class="col-6 col-md-2">
|
||||
<img src="img/05.4.png" class="img-fluid">
|
||||
<p class="text-center fw-semibold">Centella asiática</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-2 col-xl-2 text-center btn-responsive">
|
||||
<button
|
||||
class="btn btn-transparent border-0 my-0 mx-0 py-0 px-0 text-white animate__animated animate__pulse animate__infinite disable btn-pop"
|
||||
style="display: non;" data-popid="#pop0" data-audio="0"><img src="img/question.png"
|
||||
class="img-fluid"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-none">
|
||||
<div id="pop0">
|
||||
<div class="container-fluid">
|
||||
<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-12 col-md-12 col-xl-12 text-start">
|
||||
<!-- <h3 class="fw-semibold text-pink-1 text-center">¿Para quién?</h3> -->
|
||||
<p>Mejoran la biodisponibilidad, permitiendo una <b>penetración más profunda</b> a nivel
|
||||
basal y una <b>liberación prolongada</b> para un efecto duradero de
|
||||
<b>Papilocare<sup>®</sup></b> en la mucosa cervical.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-10 col-xl-10 mt-4 my-md-0">
|
||||
<img src="img/05.5.png" class="img-fluid floating" alt="Nombre comercial">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('body').addClass('fake');
|
||||
const audiom15 = CourseNav.createSound('audio/audiom15.mp3');
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom15);
|
||||
audiom15.on('play', function () {
|
||||
|
||||
});
|
||||
audiom15.on("end", function () {
|
||||
|
||||
});
|
||||
|
||||
const audios = [
|
||||
CourseNav.createSound('audio/audiom16.mp3'),
|
||||
];
|
||||
|
||||
$('.btn-pop').click(function (e) {
|
||||
e.preventDefault();
|
||||
$(this).removeClass('animate__animated animate__pulse animate__infinite').addClass('completed visited');
|
||||
const index = $('.btn-pop').index(this);
|
||||
console.log(index);
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios[index]);
|
||||
const html = $($(this).data('popid')).html();
|
||||
Swal.fire({
|
||||
html: html,
|
||||
target: "body",
|
||||
customClass: {
|
||||
popup: 'pop-type0 imgs bg-transparent p-0',
|
||||
htmlContainer: 'html-pop-style p-3',
|
||||
confirmButton: 'btn btn-begin text-white fw-bold animate__animated animate__pulse animate__infinite py-1 px-4'
|
||||
},
|
||||
confirmButtonText: "Cerrar",
|
||||
showConfirmButton: true,
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
focusConfirm: false,
|
||||
backdrop: "rgba(171, 180, 183, .8)",
|
||||
// width: "45%",
|
||||
heightAuto: false,
|
||||
didOpen: () => {
|
||||
document.body.style.paddingRight = '';
|
||||
},
|
||||
didClose: () => {
|
||||
document.body.style.paddingRight = '';
|
||||
CourseNav.audioController.stopAudio();
|
||||
if ($('.btn-pop').length == $('.btn-pop.completed').length) {
|
||||
CourseNav.setSlideVisited(true);
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,157 @@
|
||||
<style>
|
||||
.fake {
|
||||
background-image: url(img/bg06.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.play-button-container {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 10002;
|
||||
background: linear-gradient(180deg, #634577, #813e70);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 10px 0px #d0f0ff;
|
||||
}
|
||||
|
||||
#video {
|
||||
z-index: 99;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
|
||||
.play-button-container button {
|
||||
pointer-events: all;
|
||||
border: none;
|
||||
background: none;
|
||||
border: solid 3px #fff;
|
||||
padding: 10px 18px !important;
|
||||
border-radius: 90px;
|
||||
}
|
||||
|
||||
h1 .fa-regular {
|
||||
background: linear-gradient(45deg, #ffffff, #ffffff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-weight: 500;
|
||||
left: 0px;
|
||||
position: relative;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.content-gls {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.play-button-container button {
|
||||
pointer-events: all;
|
||||
border: none;
|
||||
background: none;
|
||||
border: solid 8px #fff;
|
||||
padding: 15px 30px !important;
|
||||
border-radius: 90px;
|
||||
}
|
||||
|
||||
h1 .fa-regular {
|
||||
background: linear-gradient(45deg, #ffffff, #ffffff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-weight: 500;
|
||||
left: 10px;
|
||||
position: relative;
|
||||
font-size: 111px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class='page-sco'>
|
||||
<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 text-center animate__animated animate__rotateInDownRight">
|
||||
<h2 class="my-0 text-purple-2 fw-bold">Mecanismo de acción</h2>
|
||||
</div>
|
||||
<div class="col-12 col-md-10 col-lg-6 animate__animated animate__zoomIn my-3">
|
||||
<div class="w-100">
|
||||
<div class="ratio ratio-16x9">
|
||||
<video id="video" class="embed-responsive-item" controls autoplay poster="video/poster.jpg">
|
||||
<source src="video/dummy.mp4" type="video/mp4" />
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
<div class="play-button-container">
|
||||
<button class="p-0 animate__animated animate__heartBeat animate__infinite waves-effect disabled"
|
||||
id="btn_video">
|
||||
<h1 class="my-0"><i class="fa-regular fa-play fa-3x text-primary"></i></h1>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.page-sco').addClass('fake');
|
||||
$('#scroll-indicator').css('display', 'none');
|
||||
|
||||
|
||||
setTimeout(function () {
|
||||
$("#btn_video").removeClass("disabled");
|
||||
$(".i0").show();
|
||||
}, 200);
|
||||
|
||||
var video = document.getElementById("video");
|
||||
var btnVideo = document.getElementById("btn_video");
|
||||
|
||||
video.play();
|
||||
video.addEventListener("play", function () {
|
||||
$(".play-button-container").hide(); // Ocultar el contenedor de botón de reproducción
|
||||
});
|
||||
// Evitar la reproducción del video al hacer clic end el botón de reproducción
|
||||
btnVideo.addEventListener("click", function (event) {
|
||||
if (!btnVideo.classList.contains("disabled")) {
|
||||
//CourseNav.soundClick();
|
||||
document.getElementById("video").play();
|
||||
$(".play-button-container").hide(); // Ocultar el contenedor de botón de reproducción
|
||||
} else {
|
||||
event.stopPropagation(); // Evita que el evento de clic llegue al video
|
||||
}
|
||||
});
|
||||
|
||||
// Evitar que el video se reproduzca al hacer clic en el área de la capa
|
||||
video.addEventListener("click", function (event) {
|
||||
if (!btnVideo.classList.contains("disabled")) {
|
||||
event.preventDefault(); // Evita la acción predeterminada de reproducción del video
|
||||
}
|
||||
});
|
||||
|
||||
// Evitar la reproducción del video al hacer doble clic en cualquier parte del video
|
||||
video.addEventListener("dblclick", function (event) {
|
||||
if (!btnVideo.classList.contains("disabled")) {
|
||||
event.preventDefault(); // Evita la acción predeterminada de reproducción del video
|
||||
}
|
||||
});
|
||||
|
||||
video.addEventListener("ended", function () {
|
||||
$('.i0').hide();
|
||||
CourseNav.setSlideVisited();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,307 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url(img/bg06.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.back1 {
|
||||
background-image: url(img/bg06.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100% 0;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.anim0, .anim1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.shadow-vx {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.cid1 .swiper-wrapper {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.btn-arrow {
|
||||
max-width: 85px;
|
||||
}
|
||||
|
||||
@media(min-width: 991px) {
|
||||
.img-mx-w img {
|
||||
max-width: 71%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.shadow-vx {
|
||||
max-width: 76%;
|
||||
}
|
||||
|
||||
.btn-arrow {
|
||||
max-width: 75px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="sec0" class='page-sco py-2 pt-md-3 back0'>
|
||||
<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 mb-3" data-sal="slide-right">
|
||||
<h2 class="text-secondary fw-bold">Competidores</h2>
|
||||
<p class="mb-0 animate__animated animate__lightSpeedInLeft animate__delay-1s">En el mercado de suplementos para maternidad existen varias marcas con características y formulaciones distintas.
|
||||
Aunque cada una ofrece beneficios, <strong>ninguna presenta la combinación completa de nutrientes que ofrece
|
||||
OGestan<sup>®</sup> Plus.</strong></p>
|
||||
</div>
|
||||
<div class="col-12 mb-3">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-5 col-md-4 img-mx-w text-center mb-3" data-sal="zoom-in" data-sal-delay="100">
|
||||
<img src="img/06.0.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-5 col-md-4 img-mx-w text-center mb-3" data-sal="zoom-in" data-sal-delay="300">
|
||||
<img src="img/06.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-5 col-md-4 img-mx-w text-center mb-3" data-sal="zoom-in" data-sal-delay="500">
|
||||
<img src="img/06.2.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-5 col-md-4 img-mx-w text-center mb-3 mb-md-0" data-sal="zoom-in" data-sal-delay="600">
|
||||
<img src="img/06.3.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-5 col-md-4 img-mx-w text-center" data-sal="zoom-in" data-sal-delay="800">
|
||||
<img src="img/06.4.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-5 col-md-4 img-mx-w text-center" data-sal="zoom-in" data-sal-delay="1000">
|
||||
<img src="img/06.5.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center ins0" style="display: none;">
|
||||
<div class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite" data-sec="sec1" data-audio="audiom14">
|
||||
<img src="img/nSec.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sec1" class="page-sco back1" 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 text-center mb-3" data-sal="slide-left">
|
||||
<h2 class="text-orange-2 fw-bold">No olvidemos…</h2>
|
||||
</div>
|
||||
<div class="col-12 col-lg-9" data-sal="flip-down">
|
||||
<div class="d-flex flex-wrap flex-md-row justify-content-center align-items-center gap-2">
|
||||
<div class="btn-prev btn-arrow d-inline-block order-2 order-md-1">
|
||||
<img src="img/06.6.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="position-relative shadow-vx flex-fill order-1 order-md-2 rounded-3">
|
||||
<div class="swiper cid1">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide visited completed">
|
||||
<div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
|
||||
<ol class="mb-0">
|
||||
<li><strong>Número</strong> de componentes.</li>
|
||||
<li>Cantidad de <strong>Omega 3.</strong></li>
|
||||
<li>Contenido de <strong>Vitamina D.</strong></li>
|
||||
<li>Diferenciación del hierro (hierro <strong>bisglicinato</strong>).</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="col-7 col-md-4 text-center">
|
||||
<img src="img/06.8.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
|
||||
<p class="mb-0">Destacar que <strong>Regenesis</strong><strong> Max (RM) no contiene hierro </strong><strong>bisglicinato</strong>
|
||||
(solo sulfato ferroso), y un <strong>mínimo de Vitamina D.</strong></p>
|
||||
</div>
|
||||
<div class="col-7 col-md-4 text-center">
|
||||
<img src="img/06.9.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
|
||||
<p class="mb-0">Destacar la <strong>menor cantidad de Omega 3 en </strong><strong>Previta</strong> <strong>Mom</strong><strong>.</strong></p>
|
||||
</div>
|
||||
<div class="col-7 col-md-4 text-center">
|
||||
<img src="img/06.10.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
|
||||
<p class="mb-0">Elevit 2 Omegas <strong>no cumple con las cantidades requeridas de ácido fólico</strong>.</p>
|
||||
</div>
|
||||
<div class="col-7 col-md-4 text-center">
|
||||
<img src="img/06.11.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
|
||||
<p class="mb-0">Materplus tiene <strong>una fórmula muy limitada en elementos.</strong></p>
|
||||
</div>
|
||||
<div class="col-7 col-md-4 text-center">
|
||||
<img src="img/06.12.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-next btn-arrow rounded-circle d-inline-block order-2 order-md-3 animate__animated animate__pulse animate__infinite">
|
||||
<img src="img/06.7.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
|
||||
const audiom13 = CourseNav.createSound('audio/audiom13.mp3');
|
||||
const audiom14 = CourseNav.createSound('audio/audiom14.mp3');
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom13);
|
||||
|
||||
audiom13.on('play', function () {
|
||||
$('.anim0').show();
|
||||
});
|
||||
|
||||
audiom13.on('end', function () {
|
||||
$('.ins0').show();
|
||||
});
|
||||
|
||||
const paths = [
|
||||
"audio/audiom14.mp3",
|
||||
"audio/audiom15.mp3",
|
||||
"audio/audiom16.mp3",
|
||||
"audio/audiom17.mp3",
|
||||
"audio/audiom18.mp3"
|
||||
];
|
||||
let audios = [];
|
||||
paths.forEach(function (element) {
|
||||
audios.push(CourseNav.createSound(element));
|
||||
});
|
||||
|
||||
let sec1Shown = false;
|
||||
|
||||
// Asegurar que sec0 esté visible al inicio
|
||||
$('#sec0').show();
|
||||
$('#sec1').hide();
|
||||
|
||||
let isScrolling = false;
|
||||
|
||||
$('.btn-next-section').click(function () {
|
||||
if (isScrolling) return;
|
||||
|
||||
$(this).removeClass('animate__animated animate__pulse animate__infinite');
|
||||
sec1Shown = true;
|
||||
$('.ins0').hide();
|
||||
|
||||
const currentScroll = $(window).scrollTop();
|
||||
const windowHeight = $(window).height();
|
||||
const documentHeight = $(document).height();
|
||||
const scrollNeeded = documentHeight - windowHeight;
|
||||
|
||||
if (currentScroll < scrollNeeded && scrollNeeded > 0) {
|
||||
isScrolling = true;
|
||||
$('html, body').animate({
|
||||
scrollTop: scrollNeeded
|
||||
}, 600, () => {
|
||||
isScrolling = false;
|
||||
setTimeout(() => {
|
||||
gotoSection($(this).data('sec'));
|
||||
}, 200);
|
||||
});
|
||||
} else {
|
||||
gotoSection($(this).data('sec'));
|
||||
}
|
||||
|
||||
const audioName = $(this).data('audio');
|
||||
if (audioName) {
|
||||
setTimeout(() => {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(eval(audioName));
|
||||
}, isScrolling ? 800 : 500);
|
||||
} else {
|
||||
CourseNav.soundClick();
|
||||
}
|
||||
});
|
||||
|
||||
const mySwiper = new Swiper(".cid1", {
|
||||
effect: "slide",
|
||||
autoHeight: true,
|
||||
slidesPerView: 1, // Mobile: 1 slide a la vez
|
||||
spaceBetween: 20,
|
||||
navigation: {
|
||||
nextEl: '.btn-next',
|
||||
prevEl: '.btn-prev',
|
||||
},
|
||||
on: {
|
||||
init: function () {
|
||||
// Ocultar prev en el primer slide
|
||||
$('.btn-prev').css('opacity', '.5').addClass('disabled');
|
||||
},
|
||||
slideChange: function () {
|
||||
const activeIndex = this.activeIndex;
|
||||
const slides = this.slides;
|
||||
const totalSlides = this.slides.length;
|
||||
|
||||
// Controlar opacidad y clase disabled de botones
|
||||
if (activeIndex === 0) {
|
||||
$('.btn-prev').css('opacity', '.5').addClass('disabled');
|
||||
} else {
|
||||
$('.btn-prev').css('opacity', '1').removeClass('disabled');
|
||||
}
|
||||
|
||||
if (activeIndex === totalSlides - 1) {
|
||||
$('.btn-next').css('opacity', '.5').addClass('disabled');
|
||||
} else {
|
||||
$('.btn-next').css('opacity', '1').removeClass('disabled');
|
||||
}
|
||||
|
||||
slides[activeIndex].classList.add("visited", "completed");
|
||||
|
||||
const completedSlides = $(".cid1 .swiper-slide.completed").length;
|
||||
|
||||
if (completedSlides == totalSlides) {
|
||||
$('.btn-next').removeClass('animate__animated animate__pulse animate__infinite');
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios[activeIndex]);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,253 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url(img/bg02.jpg);
|
||||
background-size: cover;
|
||||
background-position: 12% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.back1 {
|
||||
background-image: url(img/bg02a.jpg);
|
||||
background-size: cover;
|
||||
background-position: 12% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.text-card {
|
||||
background-color: rgba(255, 255, 255, .7);
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
|
||||
.btn-pop {
|
||||
cursor: pointer;
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
/* asegurar posicionamiento para z-index */
|
||||
z-index: 99999 !important;
|
||||
}
|
||||
|
||||
.pop-type0 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.bg-purple-3 {
|
||||
background: rgb(185, 115, 200, 0.30) !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.back0 {
|
||||
background-position: 28% 100%;
|
||||
}
|
||||
|
||||
.text-card {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.pop-type0 {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.imgs:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -3rem;
|
||||
bottom: 74px;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url(img/05.6.png);
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 1200px) {
|
||||
.pop-type0 {
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
|
||||
.btn-responsive {
|
||||
position: absolute;
|
||||
right: 2em;
|
||||
bottom: 6em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class='page-sco'>
|
||||
<div class="sec_i0 back0 py-2 py-md-4 flex-fill d-flex flex-column justify-content-center align-items-center">
|
||||
<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 mb-3'>
|
||||
<div class="col-12 animate__animated animate__fadeInDown">
|
||||
<h2 class="text-secondary fw-bold text-center">Recomendaciones de uso</h2>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-5 me-xl-4" data-sal="slide-down">
|
||||
<h3 class="text-pink-1 fw-bold text-center">Primer mes</h3>
|
||||
<p>Aplicar <b>una vez al día</b>, preferentemente por la noche, durante <b>21 días
|
||||
consecutivos</b>, descansando durante el ciclo menstrual.</p>
|
||||
<img src="img/07.1.png" class="img-fluid mx-auto mt-3">
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-5 ms-xl-4 mb-3 mb-md-0" data-sal="slide-down">
|
||||
<h3 class="text-pink-1 fw-bold text-center">Meses siguientes</h3>
|
||||
<p>Aplicar en <b>días alternos</b> (un día sí y un día no), descansando durante el ciclo
|
||||
menstrual.</p>
|
||||
<img src="img/07.2.png" class="img-fluid mx-auto mt-md-3 mb-3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-100 py-2 py-md-4 text-center sec_i1" style="display: none;">
|
||||
<div class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite" data-sec="sec1"
|
||||
data-audio="audiom18">
|
||||
<img src="img/nSec.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sec1" class='page-sco py-2 py-md-4 back1' 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-12 col-md-7 col-xl-6 px-1 px-md-5" data-sal="zoom-in">
|
||||
<h2 class="text-pink-1 text-center fw-bold">Instrucciones de uso</h2>
|
||||
<div class="card border-0 bg-purple-3">
|
||||
<div class="card-body">
|
||||
<p class="my-0"><b>Insertar el aplicador</b> del tubo monodosis dentro de la vagina,
|
||||
preferiblemente antes de acostarse. Comenzar el tratamiento después del período </p>
|
||||
menstrual.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7 col-md-5 col-xl-4 px-md-4 mt-5 mt-md-2 text-center" data-sal="zoom-in">
|
||||
<img src="img/07.3.png" class="img-fluid floating">
|
||||
</div>
|
||||
<div class="col-12 col-md-2 col-xl-2 mt-md-3 mt-1 mt-xl-0 text-center btn-responsive">
|
||||
<button
|
||||
class="btn btn-transparent border-0 my-0 mx-0 py-0 px-0 text-white animate__animated animate__pulse animate__infinite disable btn-pop"
|
||||
style="display: non;" data-popid="#pop0" data-audio="0"><img src="img/question.png"
|
||||
class="img-fluid"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-none">
|
||||
<div id="pop0">
|
||||
<div class="container-fluid">
|
||||
<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-12 col-md-8 col-xl-8 text-start">
|
||||
<h3 class="fw-semibold text-pink-1 text-center">Competencia</h3>
|
||||
<p>El principal competidor de <b>Papilocare<sup>®</sup></b> es DeflaGyn®, un gel vaginal
|
||||
comercializado por
|
||||
Corne.</p>
|
||||
<p>Está indicado para promover la remisión de lesiones cervicales no concluyentes, como
|
||||
erosiones cervicales o alteraciones citológicas leves.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 col-xl-4 mt-4 my-md-0">
|
||||
<img src="img/07.4.png" class="img-fluid floating" alt="Nombre comercial">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('body').addClass('fake');
|
||||
const audiom17 = CourseNav.createSound('audio/audiom17.mp3');
|
||||
const audiom18 = CourseNav.createSound('audio/audiom18.mp3');
|
||||
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom17);
|
||||
|
||||
audiom17.on('play', function () {
|
||||
$('.anim0').show();
|
||||
});
|
||||
|
||||
audiom17.on('end', function () {
|
||||
$('.sec_i1').show();
|
||||
//CourseNav.setSlideVisited();
|
||||
});
|
||||
|
||||
audiom18.on('end', function () {
|
||||
CourseNav.setSlideVisited(true);
|
||||
});
|
||||
|
||||
$('.btn-next-section').click(function () {
|
||||
$(this).removeClass('animate__animated animate__pulse animate__infinite');
|
||||
gotoSection($(this).data('sec'));
|
||||
$(this).parent().hide();
|
||||
|
||||
const audioName = $(this).data('audio');
|
||||
if (audioName) {
|
||||
setTimeout(() => {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(eval(audioName));
|
||||
}, 500);
|
||||
} else {
|
||||
CourseNav.soundClick();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const audios = [
|
||||
CourseNav.createSound('audio/audiom16.mp3'),
|
||||
];
|
||||
|
||||
$('.btn-pop').click(function (e) {
|
||||
e.preventDefault();
|
||||
$(this).removeClass('animate__animated animate__pulse animate__infinite').addClass('completed visited');
|
||||
const index = $('.btn-pop').index(this);
|
||||
console.log(index);
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios[index]);
|
||||
const html = $($(this).data('popid')).html();
|
||||
Swal.fire({
|
||||
html: html,
|
||||
target: "body",
|
||||
customClass: {
|
||||
popup: 'pop-type0 imgs bg-transparent p-0',
|
||||
htmlContainer: 'html-pop-style p-3',
|
||||
confirmButton: 'btn btn-begin text-white fw-bold animate__animated animate__pulse animate__infinite py-1 px-4'
|
||||
},
|
||||
confirmButtonText: "Cerrar",
|
||||
showConfirmButton: true,
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
focusConfirm: false,
|
||||
backdrop: "rgba(171, 180, 183, .8)",
|
||||
// width: "45%",
|
||||
heightAuto: false,
|
||||
didOpen: () => {
|
||||
document.body.style.paddingRight = '';
|
||||
},
|
||||
didClose: () => {
|
||||
document.body.style.paddingRight = '';
|
||||
CourseNav.audioController.stopAudio();
|
||||
if ($('.btn-pop').length == $('.btn-pop.completed').length) {
|
||||
CourseNav.setSlideVisited(true);
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,637 @@
|
||||
<script src="js/QuizManager.min.js"></script>
|
||||
|
||||
<style>
|
||||
.fake {
|
||||
background-image: url("img/actividad/fondo-inicio.jpg");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.fakedesarrollo {
|
||||
background-image: url("img/actividad/fondo-desarrollo.jpg");
|
||||
}
|
||||
|
||||
.fakecierre {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.page-activity {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#inicio {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#quiz-container {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
.results {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.results h2 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
.swal2-popup.swal2-show.pop-retro {
|
||||
background-color: transparent !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.custom-card {
|
||||
background: transparent;
|
||||
border-top: solid 3px #ffff;
|
||||
border-radius: 0px;
|
||||
border-bottom: solid 3px #ffff;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
}
|
||||
|
||||
#desarrollo {
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.trophy img {
|
||||
|
||||
max-width: 85%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.asesor {
|
||||
margin-top: 0;
|
||||
max-width: 70px;
|
||||
}
|
||||
|
||||
.pregunta {
|
||||
color: var(--bs-primary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ============================================================================================================================
|
||||
== PINCHED SPEECH BUBBLE (more CSS3)
|
||||
** ============================================================================================================================ */
|
||||
|
||||
.pinched {
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
margin: 50px 0 3em;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #333;
|
||||
/* css3 */
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* creates a rectangle of the colour wanted for the pointy bit */
|
||||
.pinched:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 50%;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
margin: 0 0 0 -50px;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
position: relative;
|
||||
background: var(--bs-coral);
|
||||
color: #FFFFFF;
|
||||
box-shadow: 5px 7px 7px -1px rgb(239 186 146 / 44%);
|
||||
text-align: center;
|
||||
border-radius: 15px;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.bubble:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
z-index: 1;
|
||||
border-style: solid;
|
||||
border-color: var(--bs-coral) transparent;
|
||||
border-width: 0 20px 20px;
|
||||
top: -20px;
|
||||
left: 50%;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
/* En pantallas md (>=768px) mostrar el triángulo apuntando hacia la izquierda */
|
||||
@media (min-width: 768px) {
|
||||
.bubble:after {
|
||||
/* Hacer el triángulo hacia la izquierda: color en el borde derecho */
|
||||
border-color: transparent var(--bs-coral) transparent transparent;
|
||||
/* top right bottom left */
|
||||
border-width: 20px 20px 20px 0;
|
||||
/* Colocar el triángulo centrado verticalmente y fuera a la izquierda */
|
||||
top: 50%;
|
||||
left: -18px;
|
||||
margin-left: 0;
|
||||
margin-top: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.glass {
|
||||
/* From https://css.glass */
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(5px);
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
border: 1px solid rgba(24, 53, 104, 0.3);
|
||||
}
|
||||
|
||||
.option-btn {
|
||||
transition: all .3s ease-in-out;
|
||||
color: var(--blue-2);
|
||||
}
|
||||
|
||||
.option-btn:hover {
|
||||
transform: scale(.9);
|
||||
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset !important;
|
||||
border: 5px solid #945b9d !important;
|
||||
}
|
||||
|
||||
.bannerend {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
aspect-ratio: 16/5;
|
||||
max-height: 45dvh;
|
||||
|
||||
}
|
||||
|
||||
.grid-cierre {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 60% auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bg-pass {
|
||||
background-image: url(img/actividad/bannerbien.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 100%;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.bg-fail {
|
||||
background-image: url(img/actividad/bannermal.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 100%;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.trophy {
|
||||
max-width: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 991px) {
|
||||
.bg-pass {
|
||||
background-position: 100% 100%;
|
||||
}
|
||||
|
||||
.bg-fail {
|
||||
background-position: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.asesor {
|
||||
margin-top: -90px;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.bannerend {
|
||||
object-position: bottom center;
|
||||
max-height: 65dvh;
|
||||
}
|
||||
|
||||
.img-w-perso {
|
||||
max-width: 65%;
|
||||
}
|
||||
|
||||
.grid-cierre {
|
||||
grid-template-rows: 458px auto;
|
||||
}
|
||||
|
||||
.bg-pass {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.bg-fail {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media(min-width: 1400px) {
|
||||
.m-h {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="page-sco full-height page-activity" id="inicio">
|
||||
<div class="container-xxl">
|
||||
<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-6 col-sm-6 col-md-6 col-xl-4 text-center mt-md-0 mt-4">
|
||||
<img src="img/actividad/avatar-inicio.png" class="img-fluid floating">
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-6 col-xl-6">
|
||||
<div class="card custom-card animate__animated animate__fadeInRightBig p-md-4 p-2">
|
||||
<div class="card-body text-center text-white">
|
||||
<h1 class="text-coral fw-bold">
|
||||
¿Quién está diciendo la verdad?
|
||||
</h1>
|
||||
En esta actividad podrás practicar cómo responder <span class="fw-bold text-gray-1">objeciones</span> y
|
||||
elegir quién da la respuesta correcta.<br><br>Prepárate para afinar tu criterio y tomar la mejor
|
||||
decisión.
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-100 text-center animate__animated animate__slideInDown mt-3">
|
||||
<div
|
||||
class="btn btn-begin text-white fw-bold py-1 animate__animated animate__pulse animate__infinite disabled"
|
||||
id="btn-comenzar">
|
||||
Comenzar
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-sco page-activity full-height py-2 pt-md-3" id="desarrollo" style="display: none;">
|
||||
|
||||
<div class="container-xl">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-12">
|
||||
|
||||
<div class="row align-items-center justify-content-center">
|
||||
<div class="col-12 text-center">
|
||||
<h2 class="fw-medium text-secondary">¿Quién está diciendo la verdad?</h2>
|
||||
</div>
|
||||
<div class="col-12 col-md-8 ins_act">
|
||||
<div class="text-center w-100 d-inline-block p-md-3 p-1 bg-coral rounded-3 shadow" style="color: #0e1c62;">
|
||||
<strong style="color: #0e1c62;">Instrucciones: </strong>Lee la respuesta de los dos representantes sobre
|
||||
una objeción. Analiza
|
||||
cuidadosamente sus argumentos y elige quién tiene la razón.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-8 col-lg-6">
|
||||
<div class="d-flex gap-3 justify-content-center mt-3">
|
||||
<div class="trophy text-center"> <img src="img/actividad/tocheck.png" alt=""> </div>
|
||||
<div class="trophy text-center"> <img src="img/actividad/tocheck.png" alt=""> </div>
|
||||
<div class="trophy text-center"> <img src="img/actividad/tocheck.png" alt=""> </div>
|
||||
<div class="trophy text-center"> <img src="img/actividad/tocheck.png" alt=""> </div>
|
||||
<div class="trophy text-center"> <img src="img/actividad/tocheck.png" alt=""> </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-9 col-lg-8 col-xl-10 actividad_show" style="display: none;">
|
||||
<div id="quiz-container" class="mt-3 w-100">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="page-sco page-activity full-height" id="cierre" style="display: none;">
|
||||
<div class="grid-cierre">
|
||||
<div class="part1-cierre h-100 d-flex flex-column justify-content-center">
|
||||
<div class="flex-fill w-100 h-100 bg-pass passed" style="display: none;">
|
||||
<img src="img/actividad/bannerbien.jpg" class="img-fluid w-100 d-none d-xl-block m-h">
|
||||
</div>
|
||||
<div class="flex-fill w-100 h-100 bg-fail failed" style="display: none;">
|
||||
<img src="img/actividad/bannermal.jpg" class="img-fluid w-100 d-none d-xl-block m-h">
|
||||
</div>
|
||||
</div>
|
||||
<div class="part2-cierre h-100 d-flex flex-column justify-content-center align-items-center py-2">
|
||||
<div class="container">
|
||||
<div class="row align-items-center justify-content-center pt-2">
|
||||
<div class="col-12 col-md-8">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center animate__animated animate__fadeInLeft passed" style="display: none;">
|
||||
<h1 class="fw-bold text-secondary">¡Excelente trabajo!</h1>
|
||||
<p>Dominas las principales objeciones y sabes cómo responderlas con claridad y seguridad.</p>
|
||||
</div>
|
||||
<div class="col-12 text-center animate__animated animate__fadeInLeft failed" style="display: none;">
|
||||
<h1 class="fw-bold text-secondary">¡Tú puedes lograrlo!</h1>
|
||||
<p>Repasa el curso para dominar las objeciones más frecuentes y vuelve a intentarlo.</p>
|
||||
<div class="w-100 text-center">
|
||||
<div class="btn btn-begin text-white fw-bold py-1 animate__animated animate__pulse animate__infinite"
|
||||
onclick="CourseNav.reload()">
|
||||
Volver a intentar
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(async function () {
|
||||
// Configuración inicial
|
||||
$(".page-sco").addClass("fake");
|
||||
$("#loader-course360").show();
|
||||
// Configuración de las páginas
|
||||
const pageActivity = ".page-activity";
|
||||
const pageStart = "#inicio";
|
||||
const pageDevelopment = "#desarrollo";
|
||||
const pageSummary = "#cierre";
|
||||
const audios = {
|
||||
"inicio": CourseNav.createSound('audio/audiom20.mp3'),
|
||||
"instrucciones": CourseNav.createSound('audio/audiom21.mp3'),
|
||||
"correcto": CourseNav.createSound('audio/audiom22.mp3'),
|
||||
"incorrecto": CourseNav.createSound('audio/audiom23.mp3'),
|
||||
"fc": CourseNav.createSound('audio/feedback-correct.mp3'),
|
||||
"fi": CourseNav.createSound('audio/feedback-incorrect.mp3')
|
||||
}
|
||||
audios.inicio.on("end", function () {
|
||||
$("#btn-comenzar").removeClass("disabled");
|
||||
});
|
||||
audios.instrucciones.on("end", function () {
|
||||
$(".btn-open-question").removeClass("disabled grayscale");
|
||||
$('.ins_act').hide();
|
||||
$('.actividad_show').show();
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// Crear instancia de QuizManager
|
||||
const quizManager = new QuizManager({
|
||||
excelFileUrl: "manejoDeObjeciones.xlsx",
|
||||
mandatoryFields: {
|
||||
question: "pregunta",
|
||||
correctOption: "opcion_c",
|
||||
correctFeedback: "retroalimentacion_correcta",
|
||||
incorrectFeedback: "retroalimentacion_incorrecta",
|
||||
},
|
||||
optionPrefix: "opcion", // Prefijo para las opciones
|
||||
randomizeQuestions: true, // Habilitar preguntas aleatorias
|
||||
randomizeOptions: true, // Habilitar opciones aleatorias
|
||||
passingScore: 80, // Puntaje mínimo aprobatorio
|
||||
defaultWeight: 1, // Ponderación por defecto
|
||||
maxAttempts: Infinity, // Intentos máximos por defecto
|
||||
maxQuestions: 5, // Obtener solo 5 preguntas
|
||||
specialOptions: ["Ninguna de las anteriores", "Todas las anteriores"], // Textos especiales
|
||||
});
|
||||
// Configurar intentos iniciales con validación desde el LMS
|
||||
const attempt = !isNaN(CourseNav.getLessonLocation()) ? Number(CourseNav.getLessonLocation()) : 0;
|
||||
console.log("Intento actual obtenido del LMS:", attempt);
|
||||
quizManager.setAttempts(attempt);
|
||||
if (attempt < 1) {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios.inicio);
|
||||
} else {
|
||||
$("#btn-comenzar").removeClass("disabled");
|
||||
}
|
||||
|
||||
// Cargar las preguntas al inicio
|
||||
await loadAndStartQuiz();
|
||||
// Manejar clic en el botón "Comenzar"
|
||||
$("#btn-comenzar").click(function () {
|
||||
const maxAttempts = quizManager.config.maxAttempts || Infinity; // Obtener intentos máximos
|
||||
const attemptsMade = quizManager.getAttempts(); // Intentos realizados
|
||||
if (!quizManager.hasReachedMaxAttempts()) {
|
||||
$(pageActivity).hide();
|
||||
$(pageDevelopment).addClass('d-flex');
|
||||
// Incrementar los intentos y guardar en el LMS
|
||||
quizManager.incrementAttempts();
|
||||
CourseNav.setLessonLocation(quizManager.getAttempts());
|
||||
$(".page-sco").addClass('fakedesarrollo');
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios.instrucciones);
|
||||
// Renderizar la primera pregunta
|
||||
renderQuestion("#quiz-container", false);
|
||||
} else {
|
||||
// Mostrar mensaje si se alcanzó el límite de intentos
|
||||
const maxAttemptsTxt = maxAttempts === Infinity ? "∞" : maxAttempts;
|
||||
Swal.fire({
|
||||
icon: "error",
|
||||
title: "¡Límite de intentos alcanzado!",
|
||||
html: `
|
||||
<p>Has alcanzado el límite de intentos.</p>
|
||||
<p><strong>Intentos realizados:</strong> ${attemptsMade}</p>
|
||||
<p><strong>Intentos permitidos:</strong> ${maxAttemptsTxt}</p>
|
||||
`,
|
||||
confirmButtonText: "Aceptar",
|
||||
}).then(() => {
|
||||
CourseNav.resetCourse();
|
||||
});
|
||||
}
|
||||
});
|
||||
/**
|
||||
* Carga las preguntas desde el archivo Excel y muestra el inicio.
|
||||
*/
|
||||
async function loadAndStartQuiz() {
|
||||
try {
|
||||
await quizManager.loadQuestionsFromExcel();
|
||||
console.log("Preguntas cargadas exitosamente.");
|
||||
console.table(quizManager.getAllRenderData());
|
||||
$("#loader-course360").hide();
|
||||
} catch (error) {
|
||||
console.error("Error al cargar las preguntas:", error);
|
||||
$("#loader-course360").hide(); // Asegurarse de ocultar el loader en caso de error
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Renderiza la pregunta actual en un contenedor específico o en un Swal.
|
||||
* @param {string} containerSelector - Selector del contenedor donde se renderizará la pregunta.
|
||||
* @param {boolean} [useSwal=false] - Si es `true`, muestra la pregunta en un Swal en lugar del contenedor.
|
||||
*/
|
||||
function renderQuestion(containerSelector, useSwal = false) {
|
||||
const questionData = quizManager.getRenderData();
|
||||
if (questionData) {
|
||||
|
||||
const questionHtml = `<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 text-center mb-3">
|
||||
<div class="row align-items-center justify-content-center">
|
||||
<div class="col-4 col-md-3 text-center mb-3 mb-md-0"><img src="img/actividad/medico.png" class="img-fluid animate__animated animate__flipInY" alt=""></div>
|
||||
<div class="col-12 col-md-9 text-center"><div class="w-100 pregunta bubble">${questionData.text}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-xl-5 animate__animated animate__fadeInLeft">
|
||||
<div class="card glass border-0 rounded-15 shadow option-btn cursor p-1 p-md-3" data-correct="${questionData.options[0].isCorrect}">
|
||||
<div class="card-body text-center d-inline-flex flex-xl-column flex-row justify-content-center align-items-center p-1 p-md-3">
|
||||
<img src="img/actividad/atenciona.png" class="img-fluid asesor" alt="">
|
||||
<div class="w-100 opcion text-md-center text-start">${questionData.options[0].text}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-xl-2 my-md-3 my-xl-0 text-center animate__animated animate__bounceIn animate__delay-1s my-2 my-md-0">
|
||||
<img src="img/actividad/vs.png" class="img-fluid d-xl-inline-block d-none img-w-perso" alt="">
|
||||
<img src="img/actividad/vsmd.png" class="img-fluid d-xl-none d-inline-block" alt="">
|
||||
</div>
|
||||
<div class="col-12 col-xl-5 animate__animated animate__fadeInRight">
|
||||
<div class="card glass border-0 rounded-15 shadow option-btn cursor p-1 p-md-3" data-correct="${questionData.options[1].isCorrect}">
|
||||
<div class="card-body text-center d-inline-flex flex-xl-column flex-row justify-content-center align-items-center p-1 p-md-3">
|
||||
<img src="img/actividad/atencionb.png" class="img-fluid asesor" alt="">
|
||||
<div class="w-100 opcion text-md-center text-start">${questionData.options[1].text}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
|
||||
if (useSwal) {
|
||||
// Mostrar la pregunta en un Swal
|
||||
Swal.fire({
|
||||
html: questionHtml,
|
||||
showConfirmButton: false,
|
||||
customClass: { popup: "swal-question-popup" },
|
||||
backdrop: "rgba(171, 180, 183, .8)",
|
||||
showDenyButton: false,
|
||||
showCancelButton: false,
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
focusConfirm: false,
|
||||
target: "body",
|
||||
didOpen: () => {
|
||||
//document.body.style.paddingRight = '';
|
||||
//document.body.classList.remove('swal2-height-auto');
|
||||
const swalContent = Swal.getHtmlContainer(); // Obtiene el contenedor HTML actual de Swal
|
||||
// Eliminar cualquier controlador anterior para evitar duplicados
|
||||
$(swalContent)
|
||||
.find(".option-btn")
|
||||
.off("click")
|
||||
.on("click", function () {
|
||||
const isCorrect = $(this).data("correct") === "true";
|
||||
const feedback = isCorrect
|
||||
? questionData.correctFeedback || "¡Correcto!"
|
||||
: questionData.incorrectFeedback || "Incorrecto";
|
||||
handleFeedback(isCorrect, feedback, containerSelector, true); // Usar función para manejar retroalimentación
|
||||
});
|
||||
},
|
||||
});
|
||||
} else {
|
||||
// Renderizar pregunta en el contenedor HTML
|
||||
$(containerSelector).html(questionHtml);
|
||||
// Eliminar cualquier controlador anterior en el contenedor antes de agregar nuevos
|
||||
$(containerSelector).off("click", ".option-btn");
|
||||
// Manejar clic en las opciones
|
||||
$(containerSelector).on("click", ".option-btn", function () {
|
||||
const isCorrect = $(this).data("correct") === true;
|
||||
const feedback = isCorrect
|
||||
? questionData.correctFeedback || "¡Correcto!"
|
||||
: questionData.incorrectFeedback || "Incorrecto";
|
||||
handleFeedback(isCorrect, feedback, containerSelector, false); // Usar función para manejar retroalimentación
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Maneja la retroalimentación de la respuesta del usuario y realiza acciones posteriores.
|
||||
* @param {boolean} isCorrect - Indica si la respuesta del usuario es correcta.
|
||||
* @param {string} feedback - El texto de retroalimentación que se mostrará.
|
||||
* @param {string} containerSelector - Selector del contenedor o Swal para renderizar la siguiente pregunta.
|
||||
* @param {boolean} useSwal - Si es `true`, las preguntas se muestran en un Swal.
|
||||
*/
|
||||
function handleFeedback(isCorrect, feedback, containerSelector, useSwal) {
|
||||
const imageName = isCorrect ? 'retrobien.png' : 'retromal.png';
|
||||
|
||||
const html = `<div class="text-center w-100 overflow-hidden">
|
||||
<img src="img/actividad/${imageName}" class="img-fluid animate__animated animate__flipInY">
|
||||
<p class="text-secondary">${feedback}</p>
|
||||
</div>`;
|
||||
|
||||
if (isCorrect) {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios.fc);
|
||||
} else {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios.fi);
|
||||
}
|
||||
|
||||
Swal.fire({
|
||||
html: html,
|
||||
showConfirmButton: true,
|
||||
confirmButtonText: "Cerrar",
|
||||
backdrop: "rgba(171, 180, 183, .8)",
|
||||
showCloseButton: false,
|
||||
target: "body",
|
||||
customClass: {
|
||||
popup: 'w-32em pop-retro',
|
||||
confirmButton: 'btn btn-begin text-white fw-bold py-1 animate__animated animate__pulse animate__infinite'
|
||||
},
|
||||
/* didOpen: () => {
|
||||
document.body.style.paddingRight = '';
|
||||
document.body.classList.remove('swal2-height-auto');
|
||||
}, */
|
||||
}).then(() => {
|
||||
updateVisualFeedback(isCorrect); // Actualiza visualización
|
||||
quizManager.answerCurrentQuestion(isCorrect); // Registra respuesta
|
||||
// Mostrar siguiente pregunta o resultados finales
|
||||
if (quizManager.hasMoreQuestions()) {
|
||||
quizManager.getNextQuestion();
|
||||
renderQuestion(containerSelector, false); // Renderizar la siguiente pregunta
|
||||
} else {
|
||||
renderResults("#resume-container"); // Mostrar resultados finales
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Renderiza los resultados finales en un contenedor específico.
|
||||
* @param {string} containerSelector - Selector del contenedor donde se renderizarán los resultados.
|
||||
*/
|
||||
function renderResults(containerSelector) {
|
||||
|
||||
$(pageActivity).hide().removeClass("d-flex");
|
||||
$(pageSummary).show().addClass("d-flex");
|
||||
$(".page-sco").addClass("fakecierre");
|
||||
const summary = quizManager.getSummary();
|
||||
const maxAttempts = quizManager.config.maxAttempts || Infinity; // Intentos máximos desde la configuración
|
||||
const maxAttemptsTxt = maxAttempts === Infinity ? "∞" : maxAttempts;
|
||||
if (summary.passed) {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios.correcto);
|
||||
$(".passed").show();
|
||||
CourseNav.setSlideVisited();
|
||||
} else {
|
||||
$(".failed").show();
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios.incorrecto);
|
||||
}
|
||||
}
|
||||
function updateVisualFeedback(isCorrect) {
|
||||
if (isCorrect) {
|
||||
$(".trophy").eq(quizManager.currentQuestionIndex).addClass("win");
|
||||
$(".trophy").eq(quizManager.currentQuestionIndex).find("img").attr('src', 'img/actividad/check.png').addClass("win");
|
||||
} else {
|
||||
$(".trophy").eq(quizManager.currentQuestionIndex).find("img").attr('src', 'img/actividad/uncheck.png');
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,77 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url(img/bg09s.jpg);
|
||||
background-size: cover;
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.border-top-perso {
|
||||
border-top: 3px solid;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.anim0 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rounded-15 {
|
||||
border-radius: 15px !important;
|
||||
}
|
||||
|
||||
@media(min-width: 991px) {
|
||||
.back0 {
|
||||
background-image: url(img/bg09.jpg);
|
||||
background-position: 68% 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class='page-sco py-3 py-md-4 back0'>
|
||||
<div class='container'>
|
||||
<div class='row justify-content-center align-items-center'>
|
||||
<div class='col-12 anim0'>
|
||||
<div class='row justify-content-center align-items-center'>
|
||||
<div class="col-9 col-md-6 col-xl-5 text-center">
|
||||
<img src="img/09.0.png" class="img-fluid floating">
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-7 animate__animated animate__bounceInDown text-center">
|
||||
<div class="position-relative d-inline-block mb-3">
|
||||
<h1 class="text-pink-1 text-center fw-bold">¡Bien hecho!</h1>
|
||||
<!-- <hr class="m-0 text-secondary border-top-perso"> -->
|
||||
</div>
|
||||
<div class="card border-0 rounded-15 bg-verde-1">
|
||||
<div class="card-body text-white">
|
||||
<p class="my-0 animate__animated animate__fadeInUp animate__delay-2s">Has concluido el módulo de
|
||||
<strong>Papilocare<sup>®</sup></strong>.
|
||||
</p>
|
||||
<p class="animate__animated animate__fadeInUp animate__delay-5s">Ahora cuentas con argumentos claros
|
||||
para
|
||||
explicar su fórmula, su mecanismo de acción y sus beneficios frente a las principales objeciones.</p>
|
||||
<p class="my-0 animate__animated animate__fadeInUp animate__delay-11s">Lleva este conocimiento a tus visitas
|
||||
médicas y continúa fortaleciendo tu comunicación profesional.</p>
|
||||
<!-- <p class="mb-0 text-primary animate__animated animate__fadeInUp animate__delay-17s">¡<strong>Vamos por
|
||||
más</strong>!</p> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('body').addClass('fake');
|
||||
const audiom24 = CourseNav.createSound('audio/audiom24.mp3');
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom24);
|
||||
audiom24.on('play', function () {
|
||||
$('.anim0').show();
|
||||
});
|
||||
audiom24.on("end", function () {
|
||||
CourseNav.completeLesson();
|
||||
});
|
||||
CourseNav.setSlideVisited();
|
||||
CourseNav.completeLesson();
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user