369 lines
16 KiB
HTML
369 lines
16 KiB
HTML
<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);
|
|
}
|
|
|
|
.bg-purple-3 {
|
|
background: rgb(185, 115, 200, 0.30);
|
|
}
|
|
|
|
.rounded-15 {
|
|
border-radius: 15px !important;
|
|
}
|
|
|
|
@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-center align-items-center">
|
|
<div
|
|
class="col-12 col-md-1 col-xl-1 order-3 order-md-1 h-100 d-flex justify-content-center align-items-center align-items-md-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 order-1 order-md-2">
|
|
<img src="img/03.2.png" class="img-fluid">
|
|
</div>
|
|
<div class="col-12 col-md-7 col-xl-7 order-2 order-md-3">
|
|
<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 mb-md-4 mb-2">
|
|
<h3 class="fw-semibold text-pink-1 text-center">¿Para quién?</h3>
|
|
<div class="card border-0 rounded-15 bg-purple-3">
|
|
<div class="card-body py-3 px-3">
|
|
<p class="my-0"><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>
|
|
</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) {
|
|
$('.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> |