Besins/Ogestan_Drossagyn_Papilocare
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update: CC interno

Browse Source
This commit is contained in:
andres.sanjuan 2025-12-16 12:30:57 -06:00
parent 5af5aaf113
commit 836690bea1
23 changed files with 95 additions and 615 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Papilocare/audio/audiom00.mp3
View File

Binary file not shown.

BIN
Papilocare/audio/audiom02.mp3
View File

Binary file not shown.

BIN
Papilocare/audio/audiom04.mp3
View File

Binary file not shown.

BIN
Papilocare/audio/audiom06.mp3
View File

Binary file not shown.

19
Papilocare/contenido/01.html
View File

@ -17,11 +17,19 @@
background: rgb(185, 115, 200, 0.30) !important;
}
.bg-custom {
background: rgb(255, 255, 255, 0.8);
}
@media(min-width: 991px) {
.back0 {
background-image: url(img/bg00.jpg);
background-position: center center;
}
/* .bg-custom {
background: transparent;
} */
}
</style>
<div class="page-sco back0 py-2 py-md-4">
@ -32,10 +40,10 @@
<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 class="d-inline-block position-relative bg-custom px-5 py-3 rounded">
<hr class="m-0 mb-2 opacity-100 border-top-2 text-white d-none">
<h1 class="text-purple-2 fw-bolder">¡Bienvenido a <br> Papilocare<sup class="fw-bold">®</sup>!</h1>
<hr class="m-0 mt-2 opacity-100 border-top-2 text-white d-none">
</div>
</div>
<div class="col-12 text-center mb-3" data-sal="flip-up">
@ -63,7 +71,8 @@
<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
<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>

260
Papilocare/contenido/02.bak.html
View File

@ -1,260 +0,0 @@
<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>

10
Papilocare/contenido/02.html
View File

@ -13,11 +13,11 @@
background-repeat: no-repeat;
}
.text-card {
/* .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;
@ -45,7 +45,7 @@
<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">
<div class="col-8 col-md-5 col-lg-6 mb-4 mb-md-0 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">
@ -79,7 +79,7 @@
<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">
<div class="col-12 col-md-7 col-xl-4 mb-4 mb-md-0" 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">
@ -87,7 +87,7 @@
</div>
</div>
</div>
<div class="col-7 col-md-5 col-xl-6 px-md-4 text-center" data-sal="zoom-in">
<div class="col-9 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>

32
Papilocare/contenido/03.html
View File

@ -51,6 +51,14 @@
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;
@ -91,6 +99,7 @@
.swiper-nav-buttons {
pointer-events: none !important;
}
.swiper-nav-buttons .btn-prev,
.swiper-nav-buttons .btn-next {
pointer-events: auto !important;
@ -127,18 +136,18 @@
</div>
<div class="swiper-slide">
<div class="card">
<div class="card-body row justify-content- align-items-center">
<div class="card-body row justify-content-center align-items-center">
<div
class="col-2 col-md-1 col-xl-1 h-100 d-flex justify-content-center align-items-end">
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">
<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">
<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
@ -180,11 +189,18 @@
<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">
<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>
<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 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">

2
Papilocare/contenido/04.html
View File

@ -184,7 +184,7 @@
</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 class="col-10 col-md-5 col-xl-4 mb-md-3 mb-xl-0 mb-0 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">

49
Papilocare/contenido/05.html
View File

@ -10,7 +10,7 @@
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-image: linear-gradient(#f5f0f5, #f5f0f5), 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);
@ -28,6 +28,11 @@
width: 100%;
}
.custom-card {
background: rgb(255, 255, 255, 0.6);
border-radius: 15px;
padding: 15px;
}
@media(min-width: 768px) {
.pop-type0 {
@ -78,25 +83,33 @@
<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="col-12 col-md-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 class="col-12 col-md-8 col-xl-8 my-2 my-md-0">
<div class="card border-0 custom-card">
<p class="text-center text-pink-1 fw-bold">Niosomas</p>
<div class="row justify-content-center align-items-start">
<div class="col-12 col-md-4 col-xl-5 text-center">
<img src="img/05.2.png" class="img-fluid">
<p class="text-center fw-semibold">Ácido hialurónico</p>
</div>
<div class="col-12 col-md-4 col-xl-5 text-center">
<img src="img/05.3.png" class="img-fluid">
<p class="text-center fw-semibold">β-glucano</p>
</div>
</div>
</div>
</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 class="col-12 col-md-4 col-xl-4 my-2 my-md-0">
<div class="card border-0 custom-card">
<p class="text-center text-pink-1 fw-bold">Fitosomas</p>
<div class="row justify-content-center align-items-start">
<div class="col-12 col-md-8 text-center">
<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>

307
Papilocare/contenido/06.otro.html
View File

@ -1,307 +0,0 @@
<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>

17
Papilocare/contenido/07.html
View File

@ -88,21 +88,23 @@
<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='row justify-content-center align-items-start 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 animate__animated animate__flipInX animate__delay-2s" data-sal="slide-down">
<h3 class="text-pink-1 fw-bold text-center">Primer mes</h3>
<div class="col-12 col-md-6 col-lg-5 me-xl-4 mb-4 animate__animated animate__flipInX animate__delay-2s"
data-sal="slide-down">
<h3 class="text-pink-1 fw-bold text-center mb-md-0">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">
<img src="img/07.1.png" class="img-fluid mx-auto mt-md-3">
</div>
<div class="col-12 col-md-6 col-lg-5 ms-xl-4 mb-3 mb-md-0 animate__animated animate__flipInX animate__delay-15s" data-sal="slide-down">
<div class="col-12 col-md-6 col-lg-5 ms-xl-4 mb-4 mb-md-0 animate__animated animate__flipInX animate__delay-15s"
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">
<img src="img/07.2.png" class="img-fluid mx-auto mt-md-2">
</div>
</div>
</div>
@ -153,7 +155,8 @@
<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
<p>El principal competidor de <b>Papilocare<sup>®</sup></b> es DeflaGyn<sup>®</sup>, un gel
vaginal
comercializado por
Corne.</p>
<p>Está indicado para promover la remisión de lesiones cervicales no concluyentes, como

8
Papilocare/contenido/08.html
View File

@ -132,6 +132,12 @@
margin-left: -20px;
}
.bg-responsive {
background: #e3e6e7;
padding: 15px;
border-radius: 10px;
}
/* En pantallas md (>=768px) mostrar el triángulo apuntando hacia la izquierda */
@media (min-width: 768px) {
.bubble:after {
@ -570,7 +576,7 @@
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>
<p class="text-secondary bg-responsive">${feedback}</p>
</div>`;
if (isCorrect) {

2
Papilocare/css/style.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
Papilocare/css/style.scss
View File

@ -383,7 +383,7 @@ h4,
.btn-begin {
background: #cf4b97;
background: radial-gradient(#cf4b97 60%, #ffd0ee 90%);
background: radial-gradient(#cf4b97 50%, #ffd0ee 90%);
border-radius: 20px;
}

2
Papilocare/css/stylee.css
View File

@ -357,7 +357,7 @@ h4,
}
.btn-begin {
background: #cf4b97;
background: radial-gradient(#cf4b97 60%, #ffd0ee 90%);
background: radial-gradient(#cf4b97 50%, #ffd0ee 90%);
border-radius: 20px;
}

BIN
Papilocare/img/05.2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 291 KiB

After

Width:  |  Height:  |  Size: 32 KiB

BIN
Papilocare/img/05.3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 296 KiB

After

Width:  |  Height:  |  Size: 32 KiB

BIN
Papilocare/img/05.4.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 298 KiB

After

Width:  |  Height:  |  Size: 32 KiB

BIN
Papilocare/img/05.5.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 333 KiB

BIN
Papilocare/img/07.1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 117 KiB

After

Width:  |  Height:  |  Size: 115 KiB

BIN
Papilocare/img/07.2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 121 KiB

After

Width:  |  Height:  |  Size: 114 KiB

BIN
Papilocare/img/question.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.8 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB