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

Update: version 1

Browse Source
This commit is contained in:
andres.sanjuan 2025-12-11 17:00:53 -06:00
parent 594539b531
commit b42d53e844
109 changed files with 2242 additions and 1365 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Ogestan_andractiv/Quiz.xlsx
View File

Binary file not shown.

BIN
Ogestan_andractiv/audio/audioh00.mp3
View File

Binary file not shown.

BIN
Ogestan_andractiv/audio/audioh01.mp3
View File

Binary file not shown.

BIN
Ogestan_andractiv/audio/audioh03.mp3
View File

Binary file not shown.

BIN
Ogestan_andractiv/audio/audioh05.mp3
View File

Binary file not shown.

BIN
Ogestan_andractiv/audio/audioh06.mp3
View File

Binary file not shown.

BIN
Ogestan_andractiv/audio/audioh17.mp3
View File

Binary file not shown.

BIN
Ogestan_andractiv/audio/audioh20.mp3
View File

Binary file not shown.

BIN
Ogestan_andractiv/audio/audioh25.mp3
View File

Binary file not shown.

BIN
Ogestan_andractiv/audio/audioh26.mp3
View File

Binary file not shown.

BIN
Ogestan_andractiv/audio/audioh27.mp3
View File

Binary file not shown.

12
Ogestan_andractiv/config.json
View File

@ -9,27 +9,27 @@
"content": "contenido/01.html" "content": "contenido/01.html"
}, },
{ {
"title": "La familia OGestan", "title": "Introducción a OGestan ® Andractiv",
"content": "contenido/02.html" "content": "contenido/02.html"
}, },
{ {
"title": "¿Qué es OGestan<sup>®</sup> Plus?", "title": "Componentes y beneficios",
"content": "contenido/03.html" "content": "contenido/03.html"
}, },
{ {
"title": "Beneficios", "title": "Información nutricional",
"content": "contenido/04.html" "content": "contenido/04.html"
}, },
{ {
"title": "Información Nutricional", "title": "Competidores y diferenciadores",
"content": "contenido/05.html" "content": "contenido/05.html"
}, },
{ {
"title": "Competencia", "title": "Competidores y diferenciadores",
"content": "contenido/06.html" "content": "contenido/06.html"
}, },
{ {
"title": "Manejo de Objeciones", "title": "Manejo de Objeciones (Actividad de aprendizaje)",
"content": "contenido/07.html" "content": "contenido/07.html"
}, },
{ {

18
Ogestan_andractiv/contenido/01.html
View File

@ -24,20 +24,20 @@
<div class="container"> <div class="container">
<div class="row justify-content-center align-items-center"> <div class="row justify-content-center align-items-center">
<div class="col-12"> <div class="col-12">
<div class="row"> <div class="row justify-content-center">
<div class="col-12 col-lg-7"> <div class="col-12 col-lg-7">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 mb-3 text-center" data-sal="zoom-in"> <div class="col-12 mb-3 text-center" data-sal="zoom-in">
<div class="d-inline-block position-relative"> <div class="d-inline-block position-relative card rounded-3 border-2 border-white bg-transparent px-3 py-3">
<hr class="m-0 mb-2 opacity-100 border-top-2 text-white"> <!-- <hr class="m-0 mb-2 opacity-100 border-top-2 text-white"> -->
<h1 class="text-white fw-bolder">¡Bienvenido a <br> OGestan<sup>®</sup> Andractiv!</h1> <h1 class="text-white fw-bolder">¡Bienvenido a <br> OGestan<sup>®</sup> Andractiv!</h1>
<hr class="m-0 mt-2 opacity-100 border-top-2 text-white"> <!-- <hr class="m-0 mt-2 opacity-100 border-top-2 text-white"> -->
</div> </div>
</div> </div>
<div class="col-12 text-center" data-sal="flip-up"> <div class="col-12 text-center" data-sal="flip-up">
<div class="w-100 position-relative"> <div class="w-100 position-relative">
<div id="wrap-comenzar" data-sec="sec1" <div id="wrap-comenzar" data-sec="sec1"
class="btn btn-begin text-white fw-bold animate__animated animate__pulse animate__infinite py-1"> class="btn btn-begin text-white fw-bold border border-3 border-blue-6 animate__animated animate__pulse animate__infinite py-1">
Comenzar Comenzar
</div> </div>
</div> </div>
@ -66,16 +66,16 @@
<img src="img/01.0.png" class="img-fluid"> <img src="img/01.0.png" class="img-fluid">
</div> </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"> <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-secondary fw-medium">¿Qué aprenderás hoy?</h2> <h2 class="text-blue-3 fw-medium">¿Qué aprenderás hoy?</h2>
<p class="pa animate__delay-2s">En este módulo conocerás qué es <b>OGestan<sup>®</sup> Andractiv</b>, <p class="pa animate__delay-2s">En este módulo conocerás qué es <b class="text-gray-2">OGestan<sup>®</sup> Andractiv</b>,
para quién está diseñado y cuál es su papel para quién está diseñado y cuál es su papel
dentro dentro
de la fertilidad masculina. </p> de la <b class="text-gray-2">fertilidad masculina.</b> </p>
<p class="pa animate__delay-9s">Comprenderás su propósito como suplemento y por qué su formulación <p class="pa animate__delay-9s">Comprenderás su propósito como suplemento y por qué su formulación
resulta tan importante para apoyar resulta tan importante para apoyar
la la
<b>calidad y funcionamiento del esperma</b>. <b class="text-gray-2">calidad y funcionamiento del esperma</b>.
</p> </p>
</div> </div>
</div> </div>

133
Ogestan_andractiv/contenido/02.html
View File

@ -11,9 +11,46 @@
} }
.pop_lateral { .pop_lateral {
background: linear-gradient(180deg, #003d53, #005a6f); background: linear-gradient(180deg, #0064cf, #0064cf);
} }
.card {
background: linear-gradient(#0064cf, #00285b);
color: white;
}
.card.completed {
background: linear-gradient(#8c8f91, #4d5d73);
color: white;
border: solid 3px #86d3ff !important;
}
/* Marcadores personalizados para listas */
ul.custom-li {
list-style: none;
padding-left: 0;
}
ul.custom-li li {
position: relative;
padding-left: 2em;
margin-bottom: 0.5em;
}
ul.custom-li li::before {
content: "";
position: absolute;
left: 0;
top: 0.4em;
/* Ajusta este valor para alinear verticalmente */
width: 1.2em;
height: 1.2em;
background-image: url('img/li1.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: inline-block;
}
@media(min-width: 768px) { @media(min-width: 768px) {
.content-pop-lateral { .content-pop-lateral {
@ -22,7 +59,7 @@
.pop_lateral { .pop_lateral {
grid-template-columns: 1fr !important; grid-template-columns: 1fr !important;
grid-template-rows: 75% 25% !important; grid-template-rows: 85% auto !important;
grid-row: 1 / 1 !important; grid-row: 1 / 1 !important;
place-self: start !important; place-self: start !important;
width: 75% !important; width: 75% !important;
@ -36,46 +73,65 @@
<div class="row justify-content-center align-items-center"> <div class="row justify-content-center align-items-center">
<div class="col-12 col-md-12"> <div class="col-12 col-md-12">
<div class="row justify-content-center align-items-center"> <div class="row justify-content-center align-items-center">
<div class="col-12 col-md-12 mb-md-4 mb-2"> <div class="col-12 col-md-12 mb-md-4 mb-2 animate__animated animate__fadeInDown">
<h2 class="text-secondary fw-medium">Introducción a OGestan<sup>®</sup> Andractiv</h2> <h2 class="text-blue-3 text-center fw-medium">Introducción a OGestan<sup>®</sup> Andractiv</h2>
<p>Para comenzar, exploraremos la información esencial de <b>OGestan<sup>®</sup> Andractiv</b>. <p>Para comenzar, exploraremos la información esencial de <b
class="text-gray-2">OGestan<sup>®</sup> Andractiv</b>.
Aquí Aquí
podrás revisar su <b>nombre comercial</b>, su <b>presentación</b>, su <b>indicación</b> y su podrás revisar su <b class="text-gray-2">nombre comercial</b>, su <b
<b>modo class="text-gray-2">presentación</b>, su <b class="text-gray-2">indicación</b> y su
<b class="text-gray-2">modo
de empleo</b>. Estos elementos forman la base del producto y te permitirán comprender de empleo</b>. Estos elementos forman la base del producto y te permitirán comprender
con con
claridad qué es, cómo se utiliza y a quién está dirigido. claridad qué es, cómo se utiliza y a quién está dirigido.
</p> </p>
</div> </div>
<div class="col-12 col-md-6 col-xl-5 px-md-5 my-md-3 my-2"> <div
<div class="card btn-pop animate__animated animate__pulse animate__infinite disabled" class="col-12 col-md-6 col-xl-5 px-md-3 px-xl-5 my-md-3 my-2 animate__animated animate__fadeInDown">
<div class="card border-3 border-orange-1 rounded-4 btn-pop animate__animated animate__pulse animate__infinite disabled"
data-popid="#pop0" data-audio="0"> data-popid="#pop0" data-audio="0">
<div class="card-body"> <div class="card-body">
<h3>Nombre comercial</h3> <div class="d-flex flex-row justify-content-center align-items-center gap-2">
<img src="img/02.1.png" class="img-fluid">
<h2>Nombre comercial</h2>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 col-md-6 col-xl-5 px-md-5 my-md-3 my-2"> <div
<div class="card btn-pop animate__animated animate__pulse animate__infinite disabled" class="col-12 col-md-6 col-xl-5 px-md-3 px-xl-5 my-md-3 my-2 animate__animated animate__fadeInDown">
<div class="card border-3 border-orange-1 rounded-4 btn-pop animate__animated animate__pulse animate__infinite disabled"
data-popid="#pop1" data-audio="1"> data-popid="#pop1" data-audio="1">
<div class="card-body"> <div class="card-body">
<h3>Presentación</h3> <div class="d-flex flex-row justify-content-center align-items-center gap-2">
<img src="img/02.2.png" class="img-fluid">
<h2>Presentación</h2>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 col-md-6 col-xl-5 px-md-5 my-md-3 my-2"> <div
<div class="card btn-pop animate__animated animate__pulse animate__infinite disabled" class="col-12 col-md-6 col-xl-5 px-md-3 px-xl-5 my-md-3 my-2 animate__animated animate__fadeInUp">
<div class="card border-3 border-orange-1 rounded-4 btn-pop animate__animated animate__pulse animate__infinite disabled"
data-popid="#pop2" data-audio="2"> data-popid="#pop2" data-audio="2">
<div class="card-body"> <div class="card-body">
<h3>Indicación</h3> <div class="d-flex flex-row justify-content-center align-items-center gap-2">
<img src="img/02.3.png" class="img-fluid">
<h2>Indicación</h2>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 col-md-6 col-xl-5 px-md-5 my-md-3 my-2"> <div
<div class="card btn-pop animate__animated animate__pulse animate__infinite disabled" class="col-12 col-md-6 col-xl-5 px-md-3 px-xl-5 my-md-3 my-2 animate__animated animate__fadeInUp">
<div class="card border-3 border-orange-1 rounded-4 btn-pop animate__animated animate__pulse animate__infinite disabled"
data-popid="#pop3" data-audio="3"> data-popid="#pop3" data-audio="3">
<div class="card-body"> <div class="card-body">
<h3>Modo de empleo</h3> <div class="d-flex flex-row justify-content-center align-items-center gap-2">
<img src="img/02.4.png" class="img-fluid">
<h2>Modo de empleo</h2>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -93,15 +149,16 @@
<div class="row justify-content-center align-items-center"> <div class="row justify-content-center align-items-center">
<div class="col-12 col-md-12 col-xl-8 text-start text-white"> <div class="col-12 col-md-12 col-xl-8 text-start text-white">
<h3 class="fw-semibold">Nombre comercial</h3> <h3 class="fw-semibold">Nombre comercial</h3>
<ul> <ul class="custom-li">
<li>OGestan® Andractiv</li> <li>OGestan® Andractiv</li>
<li>Suplemento alimenticio en cápsulas.</li> <li>Suplemento alimenticio en cápsulas.</li>
<li>Combinación de Antioxidantes, Vitaminas, Minerales y Omega-3 desarrollada para el <li><b class="text-yellow">Combinación de Antioxidantes, Vitaminas, Minerales y
Omega-3</b> desarrollada para el
hombre.</li> hombre.</li>
</ul> </ul>
</div> </div>
<div class="col-12 col-md-5 col-xl-4 mt-md-4"> <div class="col-12 col-md-7 col-xl-5 mt-md-4">
<img src="img/02.1.png" class="img-fluid" alt="Nombre comercial"> <img src="img/02.5.png" class="img-fluid floating" alt="Nombre comercial">
</div> </div>
</div> </div>
</div> </div>
@ -115,10 +172,10 @@
<div class="row justify-content-center align-items-center"> <div class="row justify-content-center align-items-center">
<div class="col-12 col-md-12 col-xl-8 text-start text-white"> <div class="col-12 col-md-12 col-xl-8 text-start text-white">
<h3 class="fw-semibold">Presentación</h3> <h3 class="fw-semibold">Presentación</h3>
<p>Caja de cartón con <b class="text-yellow h3">30 cápsulas</b> de 1.617gr.</p> <p>Caja de cartón con <b class="text-yellow">30 cápsulas</b> de 1.617gr.</p>
</div> </div>
<div class="col-12 col-md-5 col-xl-4 mt-md-4"> <div class="col-12 col-md-7 col-xl-5 mt-md-4">
<img src="img/02.1.png" class="img-fluid" alt="Nombre comercial"> <img src="img/02.6.png" class="img-fluid floating" alt="Nombre comercial">
</div> </div>
</div> </div>
</div> </div>
@ -130,13 +187,13 @@
<div class="row justify-content-center align-items-center"> <div class="row justify-content-center align-items-center">
<div class="col-12"> <div class="col-12">
<div class="row justify-content-center align-items-center"> <div class="row justify-content-center align-items-center">
<div class="col-12 col-md-12 col-xl-8 text-start text-white"> <div class="col-12 col-md-12 col-xl-10 text-start text-white">
<h3 class="fw-semibold">Indicación</h3> <h3 class="fw-semibold">Indicación</h3>
<p>Suplemento alimenticio, para <b class="text-yellow">complementar</b> la alimentación en <p>Suplemento alimenticio, para <b class="text-yellow">complementar</b> la alimentación en
los hombres.</p> los hombres.</p>
</div> </div>
<div class="col-12 col-md-5 col-xl-4 mt-md-4"> <div class="col-12 col-md-7 col-xl-5 mt-md-2">
<img src="img/02.1.png" class="img-fluid" alt="Nombre comercial"> <img src="img/02.7.png" class="img-fluid floating" alt="Nombre comercial">
</div> </div>
</div> </div>
</div> </div>
@ -148,14 +205,16 @@
<div class="row justify-content-center align-items-center"> <div class="row justify-content-center align-items-center">
<div class="col-12"> <div class="col-12">
<div class="row justify-content-center align-items-center"> <div class="row justify-content-center align-items-center">
<div class="col-12 col-md-12 col-xl-8 text-start text-white"> <div class="col-12 col-md-12 col-xl-10 text-start text-white">
<h3 class="fw-semibold">Modo de empleo</h3> <h3 class="fw-semibold">Modo de empleo</h3>
<p>Dosis: <b class="text-yellow">1 cápsula al día</b> con algún alimento.</p> <ul class="custom-li">
<p>Edad: <b>A partir de 18 años</b>.</p> <li>Dosis: <b class="text-yellow">1 cápsula al día</b> con algún alimento.</li>
<p><b>No exceder</b> la dosis recomendada.</p> <li>Edad: <b>A partir de 18 años</b>.</li>
<li><b>No exceder</b> la dosis recomendada.</li>
</ul>
</div> </div>
<div class="col-12 col-md-5 col-xl-4 mt-md-4"> <div class="col-12 col-md-7 col-xl-5">
<img src="img/02.1.png" class="img-fluid" alt="Nombre comercial"> <img src="img/02.8.png" class="img-fluid floating" alt="Nombre comercial">
</div> </div>
</div> </div>
</div> </div>
@ -200,14 +259,14 @@
popup: 'pop_lateral', popup: 'pop_lateral',
htmlContainer: 'd-flex justify-content-center align-items-center', htmlContainer: 'd-flex justify-content-center align-items-center',
actions: 'my-0', actions: 'my-0',
confirmButton: 'btn bg-primary text-white fw-semibold animate__animated animate__pulse animate__infinite' 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", confirmButtonText: "Cerrar",
showConfirmButton: true, showConfirmButton: true,
allowOutsideClick: false, allowOutsideClick: false,
allowEscapeKey: false, allowEscapeKey: false,
focusConfirm: false, focusConfirm: false,
backdrop: "rgba(65, 60, 60, .95)", backdrop: "rgba(0, 40, 91, .80)",
grow: 'fullscreen', grow: 'fullscreen',
showClass: { showClass: {
popup: 'animate__animated animate__fadeInLeft animate__faster' // Animación dinámica (derecha/izquierda) popup: 'animate__animated animate__fadeInLeft animate__faster' // Animación dinámica (derecha/izquierda)

406
Ogestan_andractiv/contenido/03.html
View File

@ -7,8 +7,8 @@
} }
.wrap-sw { .wrap-sw {
background: rgba(0, 211, 95, 10); background: rgba(0, 0, 0, 0);
background: linear-gradient(270deg, rgba(0, 211, 95, 0.7) 0%, rgba(0, 96, 255, 0.7) 100%); /* background: linear-gradient(270deg, rgba(0, 211, 95, 0.7) 0%, rgba(0, 96, 255, 0.7) 100%); */
display: none; display: none;
} }
@ -17,18 +17,43 @@
filter: grayscale(1); filter: grayscale(1);
} }
.card.flat {
padding: 0; /* Marcadores personalizados para listas */
background-color: transparent; ul.custom-li {
border: none; list-style: none;
box-shadow: none; padding-left: 0;
} }
.card.flat .card-body { ul.custom-li li {
padding: 0; position: relative;
background-color: transparent; padding-left: 2em;
border: none; margin-bottom: 0.5em;
box-shadow: none; }
ul.custom-li li::before {
content: "";
position: absolute;
left: 0;
top: 0em;
/* Ajusta este valor para alinear verticalmente */
width: 1.2em;
height: 1.2em;
background-image: url('img/li1.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: inline-block;
}
/* Borde degradado para elementos con border-custom */
.border-custom {
border: 4px solid transparent;
border-radius: 16px;
background-image: linear-gradient(white, white), linear-gradient(90deg, #37adff, #0064cf);
background-origin: border-box;
background-clip: content-box, border-box;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
} }
.mySwiper { .mySwiper {
@ -37,6 +62,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
z-index: 500;
} }
.mySwiper .swiper-slide { .mySwiper .swiper-slide {
@ -92,7 +118,7 @@
height: 100%; height: 100%;
left: 0; left: 0;
right: 0; right: 0;
z-index: 55; /* z-index: 55; */
top: 0; top: 0;
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
-ms-flex-pack: justify; -ms-flex-pack: justify;
@ -104,101 +130,76 @@
.swiper-custom-button-next img, .swiper-custom-button-next img,
.swiper-custom-button-prev img { .swiper-custom-button-prev img {
height: 85px; height: 35px;
width: auto; width: auto;
z-index: 100;
}
.swiper-custom-button-prev {
border-radius: 20%;
z-index: 500;
} }
.swiper-custom-button-next { .swiper-custom-button-next {
border-radius: 20%; border-radius: 20%;
} z-index: 500;
.row-card {
border-radius: 15px;
background-color: rgba(255, 255, 255, .6);
box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
border: none;
}
.custom-card .swiper-slide {
overflow: hidden;
}
.btn-open-info {
cursor: pointer;
width: 100%;
max-width: 70px;
border-radius: 50%;
margin-left: 1em;
} }
.customSwiper .swiper-slide { .customSwiper .swiper-slide {
height: 300px !important; height: 300px !important;
} }
.customSwiper .swiper-slide {
width: 100% !important;
box-sizing: border-box;
}
@media (min-width: 768px) { @media (min-width: 768px) {
.swiper-custom-button-next img, .swiper-custom-button-next img,
.swiper-custom-button-prev img { .swiper-custom-button-prev img {
height: 150px; height: 50px;
width: auto; width: auto;
} }
.mySwiper { .mySwiper {
height: 200px !important; height: 200px !important;
} }
.swiper-nav::before {
content: "";
display: block;
width: 60%;
height: 86%;
background: url(img/soport.png) no-repeat center center;
background-size: 100% 100%;
position: absolute;
left: 20%;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
z-index: 1;
}
} }
@media (min-width: 1200px) {
.card-with-avatar { .swiper-nav::before {
position: relative; content: "";
background: linear-gradient(to right, #D4F8E8, #C0F1FF); display: block;
border-radius: 12px; width: 60%;
padding: 2rem; height: 88%;
/* deja espacio para el avatar a la derecha */ background: url(img/soport.png) no-repeat center center;
padding-right: 300px; background-size: 100% 100%;
overflow: visible; position: absolute;
left: 20%;
/* para que el avatar “salga” sin recortarse */ top: 50%;
transform: translateY(-50%);
pointer-events: none;
z-index: 1;
}
} }
/* Texto dentro de la tarjeta */
.card-body p {
margin: 0;
}
/* El círculo que contendrá la imagen */
.avatar-circle {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
height: 260px;
}
/* La imagen ocupa todo el círculo y se recorta */
.avatar-circle img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.swal2-popup.swal-fullscreen {
align-items: center;
height: auto !important;
min-height: 100vh;
align-content: center;
}
.swal2-popup.swal-fullscreen .swal2-html-container {
overflow: hidden;
}
.custom-card-swal {
background-color: transparent;
border: none;
}
@media (max-width: 576px) { @media (max-width: 576px) {
@ -206,14 +207,6 @@
height: 370px !important; height: 370px !important;
} }
.avatar-circle {
position: relative;
top: 0;
transform: translateY(0px);
max-width: 70%;
margin: 0 auto;
}
.avatar-circle img { .avatar-circle img {
object-fit: scale-down; object-fit: scale-down;
} }
@ -222,17 +215,6 @@
padding: 9px; padding: 9px;
} }
.card-with-avatar {
position: relative;
background: linear-gradient(to right, #D4F8E8, #C0F1FF);
border-radius: 12px;
padding: 1rem;
/* deja espacio para el avatar a la derecha */
padding-right: 0;
overflow: visible;
/* para que el avatar “salga” sin recortarse */
}
} }
</style> </style>
<div class="w-100 page-sco back0 h-100 pt-4 pt-md-0" id="sco15"> <div class="w-100 page-sco back0 h-100 pt-4 pt-md-0" id="sco15">
@ -241,8 +223,8 @@
<div class="col-12"> <div class="col-12">
<div class="row"> <div class="row">
<div class="col-12 text-center px-4 animate__animated animate__backInLeft"> <div class="col-12 text-center px-4 animate__animated animate__backInLeft">
<h2 class="fw-semibold text-secondary">Componentes y beneficios</h2> <h2 class="fw-semibold text-blue-3">Componentes y beneficios</h2>
<p>En infertilidad masculina</p> <p class="text-blue-4">En infertilidad masculina</p>
</div> </div>
</div> </div>
<div class="text-center wrap-sw text-white"> <div class="text-center wrap-sw text-white">
@ -274,15 +256,45 @@
<img src="img/icon_04.png" /> <img src="img/icon_04.png" />
</div> </div>
</div> </div>
<div class="swiper-slide">
<div class="img-icon">
<img src="img/icon_05.png" />
</div>
</div>
<div class="swiper-slide">
<div class="img-icon">
<img src="img/icon_06.png" />
</div>
</div>
<div class="swiper-slide">
<div class="img-icon">
<img src="img/icon_07.png" />
</div>
</div>
<div class="swiper-slide">
<div class="img-icon">
<img src="img/icon_08.png" />
</div>
</div>
<div class="swiper-slide">
<div class="img-icon">
<img src="img/icon_09.png" />
</div>
</div>
<div class="swiper-slide">
<div class="img-icon">
<img src="img/icon_10.png" />
</div>
</div>
</div> </div>
</div> </div>
<!-- navegacion --> <!-- navegacion -->
<div class="position-absolute mx-auto swiper-nav"> <div class="position-absolute mx-auto swiper-nav">
<div class="swiper-custom-button-prev"> <div class="swiper-custom-button-prev">
<img src="img/prev.webp" alt="" /> <img src="img/prev.png" alt="" />
</div> </div>
<div class="swiper-custom-button-next"> <div class="swiper-custom-button-next">
<img src="img/next.webp" alt="" /> <img src="img/next.png" alt="" />
</div> </div>
</div> </div>
</div> </div>
@ -300,60 +312,152 @@
<!-- Swiper con validación de slides visitados --> <!-- Swiper con validación de slides visitados -->
<div class="swiper customSwiper"> <div class="swiper customSwiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide py-3 pe-3 ps-2 text-center"> <div class="swiper-slide text-center">
<div class="d-flex h-100 align-items-center justify-content-center"> <div class="d-flex align-items-center justify-content-center">
<div class="card-with-avatar"> <div class="card w-100 bg-white border-custom">
<div class="card-body"> <div class="card-body py-md-5 px-md-5">
<h3 class="text-blue-4 fw-semibold">Omega-3</h3>
<p> <p>
Conocimiento de tus <strong <b class="text-orange-1">Aumenta</b> el recuento
class="text-azul-claro">compromisos</strong>: total, la concentración y morfología de los
diario, semanal y quincenal. espermatozoides.
</p> </p>
</div> </div>
<div class="avatar-circle">
<img src="img/04.1.png" alt="Avatar ilustrado">
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="swiper-slide py-3 pe-3 ps-2 text-center"> <div class="swiper-slide text-center">
<div class="d-flex h-100 align-items-center justify-content-center"> <div class="d-flex align-items-center justify-content-center">
<div class="card-with-avatar"> <div class="card w-100 bg-white border-custom">
<div class="card-body"> <div class="card-body py-md-5 px-md-5">
<p><strong class="text-azul-claro">Grito de <h3 class="text-blue-4 fw-semibold">L-Carnitina</h3>
guerra</strong>: motivación para arrancar con <ul class="custom-li text-start">
fuerza.</p> <li>Mejora la <b class="text-orange-1">motilidad</b>
</div> de los espermatozoides.</li>
<div class="avatar-circle"> <li><b class="text-orange-1">Incrementa</b> el
<img src="img/04.2.png" alt="Avatar ilustrado"> número total de espermatozoides.
</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="swiper-slide text-center"> <div class="swiper-slide text-center">
<div class="d-flex h-100 align-items-center justify-content-center"> <div class="d-flex align-items-center justify-content-center">
<div class="card-with-avatar"> <div class="card w-100 bg-white border-custom">
<div class="card-body"> <div class="card-body py-md-5 px-md-5">
<p><strong class="text-azul-claro">Role Play</strong>: <h3 class="text-blue-4 fw-semibold">Vitamina C</h3>
ejercicios para mejorar tu discurso de ventas.</p> <ul class="custom-li text-start">
</div> <li>Reduce el <b class="text-orange-1">estrés</b>
<div class="avatar-circle"> oxidativo.</li>
<img src="img/04.3.png" alt="Avatar ilustrado"> <li><b class="text-orange-1">Incrementa</b> la
motilidad de los espermatozoides.
</li>
<li>Mejora la <b class="text-orange-1">calidad</b>
del semen.</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="swiper-slide text-center"> <div class="swiper-slide text-center">
<div class="d-flex h-100 align-items-center justify-content-center"> <div class="d-flex align-items-center justify-content-center">
<div class="card-with-avatar"> <div class="card w-100 bg-white border-custom">
<div class="card-body"> <div class="card-body py-md-5 px-md-5">
<p><strong class="text-azul-claro">Prospección</strong>: <h3 class="text-blue-4 fw-semibold">Vitamina E</h3>
ya sea por telemarketing, cambaceo tradicional, en <ul class="custom-li text-start">
negocios o seguimiento.</p> <li>Mejora la calidad de las mitocondrias.</li>
<li><b class="text-orange-1">Disminuye</b> el daño a
los espermatozoides.</li>
</ul>
</div> </div>
<div class="avatar-circle"> </div>
<img src="img/04.4.png" alt="Avatar ilustrado"> </div>
</div>
<div class="swiper-slide text-center">
<div class="d-flex align-items-center justify-content-center">
<div class="card w-100 bg-white border-custom">
<div class="card-body py-md-5 px-md-5">
<h3 class="text-blue-4 fw-semibold">Licopeno</h3>
<ul class="custom-li text-start">
<li>Mejora los <b class="text-orange-1">parámetros
del esperma</b>.</li>
<li>Reduce el daño del ADN.</li>
<li>Mejora la morfología de los espermatozoides.
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="swiper-slide text-center">
<div class="d-flex align-items-center justify-content-center">
<div class="card w-100 bg-white border-custom">
<div class="card-body py-md-5 px-md-5">
<h3 class="text-blue-4 fw-semibold">Coenzima Q10 (Q10)
</h3>
<ul class="custom-li text-start">
<li>Aumenta la <b
class="text-orange-1">concentración de
esperma</b>.</li>
<li>Mejora la motilidad.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="swiper-slide text-center">
<div class="d-flex align-items-center justify-content-center">
<div class="card w-100 bg-white border-custom">
<div class="card-body py-md-5 px-md-5">
<h3 class="text-blue-4 fw-semibold">Zinc (Zn)</h3>
<ul class="custom-li text-start">
<li><b class="text-orange-1">Antibacteriano</b> en
el tracto reproductivo.</li>
<li>Mejora la motilidad y la <b
class="text-orange-1">fecundación</b> de los
espermatozoides.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="swiper-slide text-center">
<div class="d-flex align-items-center justify-content-center">
<div class="card w-100 bg-white border-custom">
<div class="card-body py-md-5 px-md-5">
<h3 class="text-blue-4 fw-semibold">Selenio (Se)</h3>
<p>Mejora la morfología y <b
class="text-orange-1">aumenta</b> la motilidad
de los espermatozoides.</p>
</div>
</div>
</div>
</div>
<div class="swiper-slide text-center">
<div class="d-flex align-items-center justify-content-center">
<div class="card w-100 bg-white border-custom">
<div class="card-body py-md-5 px-md-5">
<h3 class="text-blue-4 fw-semibold">Vitamina D</h3>
<p>Mejora la <b>calidad</b> del semen y la <b>fertilidad
masculina</b>.</p>
</div>
</div>
</div>
</div>
<div class="swiper-slide text-center">
<div class="d-flex align-items-center justify-content-center">
<div class="card w-100 bg-white border-custom">
<div class="card-body py-md-5 px-md-5">
<h3 class="text-blue-4 fw-semibold">Vitaminas B9 y B12
</h3>
<ul class="custom-li text-start">
<li>Incrementan el <b class="text-orange-1">recuento
total</b> de
espermatozoides.</li>
<li>Aumentan la motilidad y mejoran la morfología.
</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
@ -424,15 +528,20 @@
}); });
CourseNav.audioController.stopAllSoundsAndPlay(audioh06); CourseNav.audioController.stopAllSoundsAndPlay(audioh06);
const audioFiles = [ const audioFiles = [
CourseNav.createSound("audio/audio11.mp3"), CourseNav.createSound("audio/audioh07.mp3"),
CourseNav.createSound("audio/audio12.mp3"), CourseNav.createSound("audio/audioh08.mp3"),
CourseNav.createSound("audio/audio13.mp3"), CourseNav.createSound("audio/audioh09.mp3"),
CourseNav.createSound("audio/audio14.mp3"), CourseNav.createSound("audio/audioh10.mp3"),
CourseNav.createSound("audio/audioh11.mp3"),
CourseNav.createSound("audio/audioh12.mp3"),
CourseNav.createSound("audio/audioh13.mp3"),
CourseNav.createSound("audio/audioh14.mp3"),
CourseNav.createSound("audio/audioh15.mp3"),
CourseNav.createSound("audio/audioh16.mp3"),
]; ];
function onAllSlidesVisited() { function onAllSlidesVisited() {
console.log("completado");
$('.swiper-custom-button-next').removeClass('animate__animated animate__pulse animate__infinite'); $('.swiper-custom-button-next').removeClass('animate__animated animate__pulse animate__infinite');
CourseNav.setSlideVisited(); CourseNav.setSlideVisited();
} }
@ -444,7 +553,6 @@
// Validación del audio // Validación del audio
let audio = null; let audio = null;
const audioData = $element.data("sound"); const audioData = $element.data("sound");
console.log(audioData);
if (audioData) { if (audioData) {
try { try {
audio = eval(audioData); audio = eval(audioData);

48
Ogestan_andractiv/contenido/04.html
View File

@ -46,9 +46,9 @@
} }
.foco-bubble { .foco-bubble {
background: rgba(24, 24, 24, 0.7); background: rgba(55, 173, 255, 0.7);
color: #fff; color: #fff;
border: 2px solid #fff; border: 0px solid #fff;
border-radius: 2rem; border-radius: 2rem;
padding: 1.5rem 2rem; padding: 1.5rem 2rem;
line-height: 1.45; line-height: 1.45;
@ -72,6 +72,10 @@
font-weight: 600; font-weight: 600;
} }
.text-yellow {
color: #ffc306 !important;
}
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.foco-wrap { .foco-wrap {
width: 100%; width: 100%;
@ -84,27 +88,17 @@
} }
.foco-bubble { .foco-bubble {
padding: 1rem 1.2rem; padding: 1rem 1.2rem;
} }
} }
.back0 { .back0 {
background-image: url('img/bg02.jpg'); background-image: url('img/bg04.jpg');
background-attachment: fixed; background-attachment: fixed;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
/*
.btn-open-pop {
width: 70px;
height: 70px;
line-height: 30px;
text-align: center;
font-size: 40px;
} */
</style> </style>
<section class="page-sco back0 py-md-4 py-2"> <section class="page-sco back0 py-md-4 py-2">
@ -113,22 +107,22 @@
</div> --> </div> -->
<div class="container-fluid px-0 my-md-5 my-xl-3 d-none" id="container3"> <div class="container-fluid px-0 my-md-5 my-xl-3 d-none" id="container3">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 col-md-10 text-white"> <div class="col-12 col-md-10 text-white animate__animated animate__fadeInDown">
<h2 class="fw-semibold">Beneficios Generales </h2> <h2 class="fw-semibold text-center text-blue-6">Beneficios Generales </h2>
<p>Conoce los beneficios generales de <b>OGestan<sup>®</sup> Andractiv</b>. Descubre cómo mejora <p>Conoce los beneficios generales de <b class="text-blue-6">OGestan<sup class="text-blue-6">®</sup> Andractiv</b>. Descubre cómo mejora
parámetros esenciales del semen y fortalece la fertilidad masculina.</p> parámetros esenciales del semen y fortalece la fertilidad masculina.</p>
</div> </div>
</div> </div>
<div class="row mb-5 animate__animated animate__fadeInLeft"> <div class="row align-items-center mb-md-2 animate__animated animate__fadeInLeft">
<!-- Foco izquierda --> <!-- Foco izquierda -->
<div class="col-6 col-md-3 d-flex justify-content-center mb-3 mb-md-0"> <div class="col-6 col-md-3 col-xl-2 d-flex justify-content-center mb-3 mb-md-0">
<div class="foco-wrap"> <div class="foco-wrap">
<img src="img/foco1.png" data-on="img/foco1.png" data-off="img/foco1off.png" alt="Foco encendido" <img src="img/foco1.png" data-on="img/foco1.png" data-off="img/foco1off.png" alt="Foco encendido"
class="foco-img" id="focoIzquierda" /> class="foco-img" id="focoIzquierda" />
</div> </div>
</div> </div>
<!-- Texto derecha --> <!-- Texto derecha -->
<div class="col-12 col-md-9"> <div class="col-12 col-md-8 col-xl-6">
<div class="foco-bubble"> <div class="foco-bubble">
Esta combinación de <b class="text-yellow">Antioxidantes, Vitaminas, Minerales y Omega–3</b> está Esta combinación de <b class="text-yellow">Antioxidantes, Vitaminas, Minerales y Omega–3</b> está
diseñada para la mejora en la diseñada para la mejora en la
@ -137,17 +131,17 @@
</div> </div>
</div> </div>
<div class="row align-items-center justify-content-end flex-md-row-reverse animate__animated animate__fadeInRight d-none" <div class="row align-items-center justify-content-start flex-row-reverse animate__animated animate__fadeInRight d-none"
id="focoDerecha"> id="focoDerecha">
<!-- Foco derecha --> <!-- Foco derecha -->
<div class="col-6 col-md-3 d-flex justify-content-center mb-3 mb-md-0"> <div class="col-6 col-md-3 col-xl-2 d-flex justify-content-center mb-3 mb-md-0">
<div class="foco-wrap"> <div class="foco-wrap">
<img src="img/foco2.png" data-on="img/foco2on.png" data-off="img/foco2.png" alt="Foco apagado" <img src="img/foco2.png" data-on="img/foco2on.png" data-off="img/foco2.png" alt="Foco apagado"
class="foco-img foco-apagado" id="focoDerechaImg" /> class="foco-img foco-apagado" id="focoDerechaImg" />
</div> </div>
</div> </div>
<!-- Texto izquierda --> <!-- Texto izquierda -->
<div class="col-12 col-md-9"> <div class="col-12 col-md-8 col-xl-6">
<div class="foco-bubble"> <div class="foco-bubble">
<ul class="my-0"> <ul class="my-0">
<li>Mejora la <b class="text-yellow">motilidad</b> de los espermatozoides.</li> <li>Mejora la <b class="text-yellow">motilidad</b> de los espermatozoides.</li>
@ -212,7 +206,7 @@
CourseNav.audioController.stopAllSoundsAndPlay(audioh18); CourseNav.audioController.stopAllSoundsAndPlay(audioh18);
// Cambiar estado visual // Cambiar estado visual
setFocoState($focoIzquierda, 'on'); setFocoState($focoIzquierda, 'on');
setFocoState($focoDerecha, 'off'); // setFocoState($focoDerecha, 'off');
$(this).removeClass('animate__animated animate__headShake animate__infinite') $(this).removeClass('animate__animated animate__headShake animate__infinite')
}); });
@ -225,7 +219,7 @@
CourseNav.audioController.stopAllSoundsAndPlay(audioh19); CourseNav.audioController.stopAllSoundsAndPlay(audioh19);
// Cambiar estado visual // Cambiar estado visual
setFocoState($focoDerecha, 'on'); setFocoState($focoDerecha, 'on');
setFocoState($focoIzquierda, 'off'); // setFocoState($focoIzquierda, 'off');
$(this).removeClass('animate__animated animate__heartBeat animate__infinite') $(this).removeClass('animate__animated animate__heartBeat animate__infinite')
}); });
@ -235,9 +229,9 @@
const bubble2Visible = $('.foco-bubble').eq(1).hasClass('show'); const bubble2Visible = $('.foco-bubble').eq(1).hasClass('show');
if (bubble1Visible && bubble2Visible) { if (bubble1Visible && bubble2Visible) {
// Prende ambos focos al completar // Prende ambos focos al completar
setFocoState($focoIzquierda, 'on'); // setFocoState($focoIzquierda, 'on');
setFocoState($focoDerecha, 'on'); // setFocoState($focoDerecha, 'on');
// CourseNav.setSlideVisited(); CourseNav.setSlideVisited();
} }
} }

34
Ogestan_andractiv/contenido/05.html
View File

@ -1,6 +1,6 @@
<style> <style>
.fake { .back0 {
background-image: url(img/bg08.webp); background-image: url(img/bg05.jpg);
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -16,12 +16,13 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 10002; z-index: 10002;
background-color: rgba(0, 0, 0, 0.5); background-color: rgb(111 156 202);
border-radius: 12px; border-radius: 12px;
} }
#video { #video {
z-index: 99; z-index: 99;
border-radius: 15px;
} }
.play-button-container button { .play-button-container button {
@ -29,32 +30,31 @@
border: none; border: none;
background: none; background: none;
cursor: pointer; cursor: pointer;
width: 25%;
} }
</style> </style>
<div class="page-sco full-page-sco w-100 pt-2 pt-md-0"> <div class="page-sco full-page-sco back0 w-100 pt-2 pt-md-0">
<div class="container"> <div class="container">
<div class="row justify-content-center align-items-center"> <div class="row justify-content-center align-items-center">
<div class="col-12"> <div class="col-12">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 mb-3 text-center animate__animated animate__bounceInDown"> <div class="col-12 mb-3 text-center animate__animated animate__bounceInDown">
<h1 class="fw-bold text-white text-center text-white">Me acompañó, no solo me afilió</h1> <h2 class="fw-semibold text-blue-3">Información Nutricional ​</h2>
<p class="animate__animated animate__lightSpeedInLeft animate__delay-2s">Erika no fue
convencida. Fue escuchada, comprendida… y eso la llevó a decir que sí.​<br>
Descubre cómo una conversación sin presión puede abrir una puerta real.</p>
</div> </div>
<div class="col-12 col-md-8 col-xl-7 mt-3 mt-md-0 animate__animated animate__zoomIn"> <div class="col-12 col-md-8 col-xl-7 mt-3 mt-md-0 animate__animated animate__zoomIn">
<div class="w-100 animate__animated animate__flipInX"> <div class="w-100 animate__animated animate__flipInX">
<div class="ratio ratio-16x9"> <div class="ratio ratio-16x9">
<video id="video" class="embed-responsive-item" controls playsinline <video id="video" class="embed-responsive-item" controls playsinline
poster="video/poster.png"> poster="video/poster.png">
<source src="video/V1 M2 - Me Acompanio, No Me Vendio_V4.mp4" type="video/mp4"> <source src="video/demo.mp4" type="video/mp4">
Your browser does not support the video tag. Your browser does not support the video tag.
</video> </video>
<div class="play-button-container"> <div class="play-button-container">
<button <button
class="p-0 animate__animated animate__heartBeat animate__infinite waves-effect disabled" class="p-0 animate__animated animate__heartBeat animate__infinite waves-effect disabled"
id="btn_video"> id="btn_video">
<i class="fa-solid fa-play fa-3x text-white"></i> <!-- <i class="fa-solid fa-play fa-3x text-white"></i> -->
<img src="img/play-button.png" alt="Play Button" class="img-fluid">
</button> </button>
</div> </div>
</div> </div>
@ -70,13 +70,17 @@
"use strict"; "use strict";
$('body').addClass('fake'); $('body').addClass('fake');
const audioh23 = CourseNav.createSound('audio/audioh23.mp3'); // const audioh23 = CourseNav.createSound('audio/audioh23.mp3');
CourseNav.audioController.stopAllSoundsAndPlay(audioh23); // CourseNav.audioController.stopAllSoundsAndPlay(audioh23);
audioh23.on('end', function () { // audioh23.on('end', function () {
$("#btn_video").removeClass("disabled"); // $("#btn_video").removeClass("disabled");
}); // });
setTimeout(function () {
$("#btn_video").removeClass("disabled").click();
}, 200);
var video = document.getElementById("video"); var video = document.getElementById("video");
var btnVideo = document.getElementById("btn_video"); var btnVideo = document.getElementById("btn_video");

160
Ogestan_andractiv/contenido/06.html
View File

@ -1,4 +1,43 @@
<style> <style>
.back0 {
background: #0367d1;
/* background-color: #fff; */
}
/* Marcadores personalizados para listas */
ul.custom-li {
list-style: none;
padding-left: 0;
}
ul.custom-li li {
position: relative;
padding-left: 2em;
margin-bottom: 0.5em;
}
ul.custom-li li::before {
content: "";
position: absolute;
left: 0;
top: 0em;
width: 1.2em;
height: 1.2em;
background-image: url('img/li1.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: inline-block;
}
.bg-gra1 {
background: linear-gradient(180deg, #0064cf, #37adff);
}
.bg-gra2 {
background: linear-gradient(0deg, #8c8f91, #4d5d73);
}
.full-screen { .full-screen {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -10,7 +49,7 @@
.wrapper-card { .wrapper-card {
display: inline-flex; display: inline-flex;
border-radius: 30px; border-radius: 30px;
background-color: var(--bs-gray-100); background-color: transparent;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -18,6 +57,7 @@
-moz-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease;
-o-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease;
transition: background-color 0.5s ease; transition: background-color 0.5s ease;
width: 75%;
} }
[data-popid="#pop-dexeed"]:hover { [data-popid="#pop-dexeed"]:hover {
@ -58,94 +98,41 @@
z-index: 5; z-index: 5;
text-align: center; text-align: center;
} }
.pop-type0-new {
width: 80%;
}
} }
.grid-diagrama-1, @media (min-width: 1200px) {
.ajuste-grid { .pop-type0-new {
display: grid; width: 60%;
justify-items: center;
align-items: center;
grid-template-columns: 1fr;
margin-top: 1em;
}
.grid-item-1:not(.arrow) {
background-color: #edeeee;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
color: var(--bs-gris);
font-weight: bold;
padding: 10px;
border-radius: 15px;
width: 100%;
}
.grid-item-1:not(.arrow)>img {
margin-right: .3em;
}
.grid-item-1.arrow>img {
display: block;
transform: rotate(90deg);
}
@media (min-width: 768px) {
.mr-custom {
margin-right: 3px;
}
.ajuste-titulo {
margin-left: 10%;
}
.grid-diagrama-1 {
display: grid;
justify-items: legacy;
grid-template-columns: auto 30px auto;
}
.ajuste-grid {
display: grid;
justify-items: legacy;
grid-template-columns: auto 30px auto 30px auto;
}
.grid-item-1:not(.arrow) {
width: auto;
height: 100%;
}
.grid-item-1.arrow>img {
display: block;
transform: rotate(0deg);
} }
} }
</style> </style>
<div class="w-100 page-sco h-100 p-0"> <div class="w-100 page-sco back0 h-100 p-0">
<div class="full-screen"> <div class="full-screen">
<div class="eletxt"> <div class="eletxt">
<div class="w-100 text-center mt-md-4 mt-2"> <div class="w-100 text-center mt-md-4 mt-2 animate__animated animate__fadeInDown">
<h2 class="text-primary fw-semibold">Competidores</h2> <h2 class="text-white fw-semibold">Competidores</h2>
</div> </div>
</div> </div>
<div class="middle bg-morado bg-opacity-10 animate__animated animate__fadeInLeft" <div class="middle bg-gra1 animate__animated animate__fadeInLeft">
style="background-image: url('img/r1.webp')">
<div data-popid="#pop-dexeed" data-audio="audioh21" <div data-popid="#pop-dexeed" data-audio="audioh21"
data-backdrop="url(img/pool.webp) no-repeat center / cover" data-backdrop="url(img/pool.webp) no-repeat center / cover"
class="wrapper-card cursor py-3 px-5 animate__animated animate__pulse animate__infinite disabled card-shadow text-azul"> class="wrapper-card cursor py-3 px-5 animate__animated animate__pulse animate__infinite disabled card-shadow text-azul">
<i class="fa-regular fa-sack"></i> <!-- <i class="fa-regular fa-sack"></i>
<div>DAXEED</div> <div>DAXEED</div> -->
<img src="img/06.1.png" alt="Dexeed Logo" class="img-fluid">
</div> </div>
</div> </div>
<div class="middle bg-warning bg-opacity-10 animate__animated animate__fadeInRight" <div class="middle bg-gra2 animate__animated animate__fadeInRight">
style="background-image: url('img/l1.webp')">
<div data-popid="#pop-otros" data-backdrop="url(img/semilla.webp) no-repeat center / cover" <div data-popid="#pop-otros" data-backdrop="url(img/semilla.webp) no-repeat center / cover"
data-audio="audioh22" data-audio="audioh22"
class="wrapper-card cursor py-3 px-5 animate__animated animate__pulse animate__infinite disabled card-shadow text-magenta"> class="wrapper-card cursor py-3 px-5 animate__animated animate__pulse animate__infinite disabled card-shadow text-magenta">
<i class="fa-regular fa-hand-holding-seedling"></i> <!-- <i class="fa-regular fa-hand-holding-seedling"></i>
<div>OTROS​</div> <div>OTROS​</div> -->
<img src="img/06.2.png" alt="Otros Logo" class="img-fluid">
</div> </div>
</div> </div>
</div> </div>
@ -154,13 +141,13 @@
<div id="pop-dexeed"> <div id="pop-dexeed">
<div class="d-flex justify-content-center align-items-center flex-column align-self-center"> <div class="d-flex justify-content-center align-items-center flex-column align-self-center">
<div class="container"> <div class="container">
<div class="row"> <div class="row justify-content-center align-items-center">
<div class="col-12"> <div class="col-12 col-md-10 col-xl-8">
<ul class="text-start"> <ul class="text-start custom-li">
<li>Comercializado por Corne.</li> <li>Comercializado por Corne.</li>
<li>8 componentes: antioxidantes, aminoácidos, vitaminas y zinc.</li> <li>8 componentes: antioxidantes, aminoácidos, vitaminas y zinc.</li>
<li>No contiene Omega-3.</li> <li><b class="text-orange-1">No contiene Omega-3.</b></li>
<li>No contiene Selenio.</li> <li><b class="text-orange-1">No contiene Selenio.</b></li>
<li>Ácido fólico estándar.</li> <li>Ácido fólico estándar.</li>
<li>Alto costo.</li> <li>Alto costo.</li>
<li>Limitada disponibilidad en puntos de venta.</li> <li>Limitada disponibilidad en puntos de venta.</li>
@ -168,6 +155,9 @@
<li>Presentación en sobres.</li> <li>Presentación en sobres.</li>
</ul> </ul>
</div> </div>
<div class="col-12 col-md-5 col-xl-4">
<img src="img/06.1.png" class="img-fluid">
</div>
</div> </div>
</div> </div>
<!-- <div class="w-100 text-center mt-4 pb-4"> <!-- <div class="w-100 text-center mt-4 pb-4">
@ -178,9 +168,9 @@
<div id="pop-otros"> <div id="pop-otros">
<div class="d-flex justify-content-center align-items-center flex-column align-self-center"> <div class="d-flex justify-content-center align-items-center flex-column align-self-center">
<div class="container"> <div class="container">
<div class="row justify-content-center"> <div class="row justify-content-center align-items-center">
<div class="col-12 text-center"> <div class="col-12 col-md-10 col-xl-8 text-center">
<ul class="text-start"> <ul class="text-start custom-li">
<li>Fabricantes no establecidos, ni reconocidos en México.</li> <li>Fabricantes no establecidos, ni reconocidos en México.</li>
<li>Venta sólo por E-commerce y enviados desde el extranjero.</li> <li>Venta sólo por E-commerce y enviados desde el extranjero.</li>
<li>Sin permisos por la autoridad mexicana.</li> <li>Sin permisos por la autoridad mexicana.</li>
@ -189,6 +179,9 @@
<li>Altos costos de envío.</li> <li>Altos costos de envío.</li>
</ul> </ul>
</div> </div>
<div class="col-12 col-md-5 col-xl-4">
<img src="img/06.2.png" class="img-fluid">
</div>
</div> </div>
</div> </div>
<!-- <div class="w-100 text-center mt-4 pb-4"> <!-- <div class="w-100 text-center mt-4 pb-4">
@ -207,7 +200,9 @@
audioh20.on("end", () => { audioh20.on("end", () => {
$(".wrapper-card").removeClass("disabled"); $(".wrapper-card").removeClass("disabled");
}); });
setTimeout(() => {
CourseNav.audioController.stopAllSoundsAndPlay(audioh20); CourseNav.audioController.stopAllSoundsAndPlay(audioh20);
}, 100);
audioh22.on("end", function () { audioh22.on("end", function () {
@ -228,7 +223,6 @@
// Validación del audio // Validación del audio
let audio = null; let audio = null;
const audioData = $element.data("audio"); const audioData = $element.data("audio");
console.log(audioData);
if (audioData) { if (audioData) {
try { try {
audio = eval(audioData); audio = eval(audioData);
@ -273,9 +267,9 @@
focusConfirm: false, focusConfirm: false,
confirmButtonText: "Cerrar", confirmButtonText: "Cerrar",
customClass: { customClass: {
popup: 'pop-type0 bg-transparent p-0', popup: 'pop-type0-new bg-transparent p-0',
htmlContainer: 'html-pop-style p-3', htmlContainer: 'html-pop-style p-3',
confirmButton: 'btn btn-begin text-white fw-bold animate__animated animate__pulse animate__infinite py-1 px-4' confirmButton: 'btn btn-begin border-3 border-blue-6 text-white fw-bold animate__animated animate__pulse animate__infinite py-1 px-4'
}, },
// backdrop: backDrop, // backdrop: backDrop,
willOpen: () => { willOpen: () => {

730
Ogestan_andractiv/contenido/07.bak.html Normal file
View File

@ -0,0 +1,730 @@
<style>
.fake {
background-image: url("img/actividad/inicio.webp");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
}
.fake-activity {
background-image: url("img/actividad/desarrollo.webp");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.fake-closing {
background-image: url("img/actividad/inicio.webp");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.fake-max-attempts {
background-image: url("img/actividad/inicio.webp");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.page-activity {
display: none;
}
.swal-instructions,
.pieces-card {
background: transparent;
box-shadow: none;
border: none;
border-radius: 0px !important;
}
#inicio {
display: flex;
}
.option-btn {
width: 100%;
height: max-content;
margin-bottom: 1em;
text-align: center;
cursor: pointer;
text-align: center;
border: solid 0px var(--bs-rosa-claro);
border-radius: 10px;
padding: 5px;
background: #ffffffe8;
box-shadow: 15px 9px 0px 3px #b7bcbe;
display: flex;
justify-content: center;
align-items: center;
}
.option-btn:hover i {
color: var(--bs-secondary);
}
.option-btn.selected {
background: var(--bs-secondary);
color: #fff;
}
.results {
text-align: center;
}
.results h2 {
margin-bottom: 20px;
}
.custom-card {
/* background: linear-gradient(180deg, #ffffff 0%, #c0b9c8 100%); */
border-radius: 15px;
border: solid 2px #fff;
}
.visualFeedback {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
}
.piece {
cursor: pointer;
/*display: flex;*/
/*align-items: end;*/
}
.list-options {
display: flex;
justify-content: space-around;
}
.list-options li {
display: inline-flex;
align-items: center;
}
.piece.completed img {
/* filter: grayscale(100%); */
}
.custom-hr {
border: 1px solid #ff5733;
/* Cambia #ff5733 por el color que desees */
}
.pop_course {
width: 80%;
}
.feedback {
display: none;
}
.option-btn img {
width: 100px;
}
.swal2-popup {
box-shadow: none !important;
}
@media (min-width: 768px) {
/* .fake {
background-image: url("img/actividad/bg25.1.webp");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
} */
.option-btn {
text-align: center;
}
.option-btn {
width: 100%;
height: 200px;
}
.piece {
max-width: 100px;
}
.visualFeedback {
bottom: 0px;
}
.pieces-wrap {
transform: translate(0px, 40px);
z-index: 50;
position: relative;
}
.pop_course {
width: 30%;
}
}
</style>
<div class="page-sco page-activity h-100" id="inicio">
<div class="container">
<div class="row justify-content-center align-items-md-center align-items-center">
<div class="col-12">
<div class="row justify-content-center align-items-center">
<div class="col-7 col-md-6 text-center animate__animated animate__bounceInLeft">
<div class="row justify-content-center align-items-center">
<div class="col-12 col-md-9">
<img src="img/actividad/0.webp" class="img-fluid" loading="lazy" alt="" />
</div>
</div>
</div>
<div class="col-12 col-md-6 pt-4 pt-md-0 animate__animated animate__bounceInRight">
<div class="card custom-card bg-white border-0">
<div class="card-body text-center">
<h1 class="text-primary fw-bold">¿Quién está diciendo la verdad?</h1>
<p>En esta actividad podrás practicar cómo responder
<b>objeciones</b> y elegir quién da la respuesta correcta.
</p>
<p>Prepárate para afinar tu criterio y tomar la mejor decisión.</p>
</div>
</div>
<div class="w-100 my-md-3 my-2 text-center"><button class="btn btn-primary disable"
id="btn-comenzar">Comenzar</button></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page-sco page-activity h-100" id="desarrollo" style="display: none;">
<div class="container-fluid h-100">
<div class="row justify-content-center align-items-center align-items-md-start h-100">
<div class="col-12 col-md-12 px-0 bg-gris text-white intro">
<div class="row justify-content-center align-items-center my-2 my-md-4 mx-3">
<div class="col-12 col-md-10">
<p><b>Instrucciones:</b> Lee la respuesta de los dos representantes sobre una objeción. Analiza
cuidadosamente sus argumentos y elige quién tiene la razón.</p>
</div>
</div>
</div>
<div class="col-12 col-md-12 pt-0 pt-md-2">
<div class="row justify-content-center align-items-center">
<div class="col-11 col-md-10 mb-md-3">
<div class="card custom-card flat pieces-card d-block d-md-block mb-md-3">
<div class="card-body w-100 py-2">
<div id="quiz-container"></div>
</div>
</div>
</div>
<div class="d-none d-md-block" id="row-x"></div>
<div class="col-12 col-md-5">
<div class="row justify-content-center align-items-center">
<div class="piece col-2 col-md-2" data-piece="1">
<img src="img/actividad/checked.webp" class="img-fluid" loading="lazy" alt="" />
</div>
<div class="piece col-2 col-md-2" data-piece="2">
<img src="img/actividad/checked.webp" class="img-fluid" loading="lazy" alt="" />
</div>
<div class="piece col-2 col-md-2" data-piece="3">
<img src="img/actividad/checked.webp" class="img-fluid" loading="lazy" alt="" />
</div>
<div class="piece col-2 col-md-2" data-piece="4">
<img src="img/actividad/checked.webp" class="img-fluid" loading="lazy" alt="" />
</div>
<div class="piece col-2 col-md-2" data-piece="5">
<img src="img/actividad/checked.webp" class="img-fluid" loading="lazy" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page-sco page-activity h-100" id="cierre" style="display: none;">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12 col-md-10">
<div class="row justify-content-center align-items-center">
<div class="col-12 col-md-6">
<div class="card bg-white">
<div class="card-body">
<div class="passed text-center feedback">
<h1 class="text-rosa-claro fw-bold">¡Muy bien!</h1>
<p>Has demostrado una excelente comprensión del programa Tutoría Campo.</p>
<p>Tu capacidad para <b>distinguir</b> entre información correcta y confusiones
comunes es clave para
aplicar este conocimiento con claridad y seguridad.</p>
</div>
<div class="failed text-center feedback">
<h1 class="text-rosa-claro fw-bold">¿Te confundiste?</h1>
<p>Te invitamos a intentarlo una vez más para reforzar lo aprendido y mejorar tu
resultado. </p>
<p class="text-center fw-bold text-primary">¡Tú puedes!</p>
</div>
<div class="without-attempts text-center feedback">
<p>Revisa nuevamente el contenido y responde la actividad cuando estés preparado.
</p>
</div>
</div>
</div>
<div class="row justify-content-center failed feedback my-3">
<div class="col-12 col-md-12 text-center">
<button
class="btn btn-mango animate__animated animate__pulse animate__infinite waves-effect"
id="reintentar">Volver a intentar</button>
</div>
</div>
<div class="row justify-content-center without-attempts feedback my-3">
<div class="col-12 col-md-12 text-center">
<button id="reiniciar"
class="btn btn-mango animate__animated animate__pulse animate__infinite waves-effect">Reiniciar</button>
</div>
</div>
</div>
<div class="col-12 col-md-6 text-center">
<div class="row justify-content-center">
<div class="col-7 col-md-10 my-2 my-md-0 text-center">
<img src="img/actividad/correct.webp" class="img-fluid passed feedback">
<img src="img/actividad/failed.webp" class="img-fluid failed feedback">
<img src="img/actividad/attempts.webp" class="img-fluid without-attempts feedback">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/QuizManager.min.js"></script>
<script>
$(document).ready(async function () {
// Configuración inicial
$("body").addClass("fake");
//Configuracion de audio
const audios = {
fondo: CourseNav.createSound("audio/FastTalkin.mp3"),
introduction: CourseNav.createSound("audio/audioh23.mp3"),
instruccions: CourseNav.createSound("audio/audioh24.mp3"),
correct: CourseNav.createSound("audio/audioh25.mp3"),
incorrect: CourseNav.createSound("audio/audioh26.mp3"),
attemptLimitReached: CourseNav.createSound("audio/audioh27.mp3"),
feedbackIncorrect: CourseNav.createSound("audio/feedback-incorrect.mp3"),
feedbackCorrect: CourseNav.createSound("audio/feedback-correct.mp3"),
// videogame: CourseNav.createSound("audio/video-game.mp3"),
openQuestion: CourseNav.createSound("audio/open-question.mp3"),
gameover: CourseNav.createSound("audio/game-over.mp3"),
};
// Configuración de las páginas
const pageActivity = ".page-activity";
const pageStart = "#inicio";
const pageDevelopment = "#desarrollo";
const pageSummary = "#cierre";
//Configuracion Instrucciones
let InstructionsPop = false;
// Crear instancia de QuizManager
const quizManager = new QuizManager({
excelFileUrl: "Quiz.xlsx",
mandatoryFields: {
question: "pregunta",
correctFeedback: "retroalimentacion_correcta",
incorrectFeedback: "retroalimentacion_incorrecta",
},
optionPrefix: "opcion", // Prefijo para las opciones
randomizeQuestions: true, // Habilitar preguntas aleatorias
randomizeOptions: false, // Habilitar opciones aleatorias
passingScore: 80, // Puntaje mínimo aprobatorio
defaultWeight: 1, // Ponderación por defecto
maxAttempts: 3, // Intentos máximos por defecto
specialOptions: ["Ninguna de las anteriores", "Todas las anteriores"], // Textos especiales
maxQuestions: 5, // Limitar a 5 preguntas
});
// Configurar intentos iniciales con validación desde el LMS
const attempt = !isNaN(CourseNav.getLessonLocation()) ? Number(CourseNav.getLessonLocation()) : 0;
// Establecer los intentos iniciales
quizManager.setAttempts(attempt);
// Cargar las preguntas al inicio
await loadAndStartQuiz();
audios.instruccions.on("end", function () {
if (InstructionsPop) {
$('.swal-confirm').addClass('animate__animated animate__pulse animate__infinite');
} else {
$('.piece[data-piece="1"]').click();
if (!$('#row-x').is(':visible')) {
$('.intro').hide();
}
}
});
// 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
$("body").removeClass("fake").addClass("fake-activity");
// if (!quizManager.hasReachedMaxAttempts()) {
$(pageActivity).hide();
$(pageDevelopment).show();
// Incrementar los intentos y guardar en el LMS
quizManager.incrementAttempts();
CourseNav.setLessonLocation(quizManager.getAttempts());
$(".piece").addClass("disabled");
$(".piece").first().removeClass("disabled");
// Mostrar instrucciones siempre en un pop de swal js y reproducir audio al abrir el pop
if (InstructionsPop) {
Swal.fire({
html: "<div class=''><h4>Instrucciones</h4><p class='w-100 text-start'>Da clic en cada ícono para leer las preguntas y elige las respuestas correctas. Si respondes correctamente, podrás atrapar al espía.</p><div class='col-12'><div class='row justify-content-center'><div class='col-5 col-md-2'><img src='img/25.1.webp' class='img-fluid'></div><div class='col-5 col-md-2'><img src='img/25.2.webp' class='img-fluid'></div><div class='col-5 col-md-2 my-2 my-md-0'><img src='img/25.3.webp' class='img-fluid'></div><div class='col-5 col-md-2 my-2 my-md-0'><img src='img/25.4.webp' class='img-fluid'></div></div></div></div>",
confirmButtonText: "Aceptar",
customClass: "swal-instructions",
didOpen: () => {
CourseNav.audioController.stopAllSoundsAndPlay(audios.instruccions);
},
didClose: () => {
CourseNav.audioController.stopAudio();
audios.fondo.loop(true).volume(0.2).play();
},
});
} else {
CourseNav.audioController.stopAllSoundsAndPlay(audios.instruccions);
}
// } else {
// Mostrar mensaje si se alcanzó el límite de intentos
// const maxAttemptsTxt = maxAttempts === Infinity ? "&infin;" : 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.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) {
const questionData = quizManager.getRenderData();
if (questionData) {
const questionHtml = `
<p id="question-text" class="card bg-white text-center fw-bold py-4 px-3">${questionData.text}</p>
<ul class="list-unstyled list-options row justify-content-center align-items-center">
<li class="col-12 col-md-5 d-flex justify-content-center">
<div class="option-btn d-flex flex-row flex-md-column justify-content-center" data-correct="${questionData.options[0].isCorrect}">
${questionData.options[0].text}
</div>
</li>
<li class="col-12 col-md-2 d-flex justify-content-center align-items-center">
<img src="img/actividad/vs.webp" alt="Versus" class="img-fluid" style="max-height:80px;">
</li>
<li class="col-12 col-md-5 d-flex justify-content-center">
<div class="option-btn d-flex flex-row flex-md-column justify-content-center" data-correct="${questionData.options[1].isCorrect}">
${questionData.options[1].text}
</div>
</li>
</ul>
<div class="w-100 d-none justify-content-center">
<button id="validate-btn" class="btn btn-primary mt-3">Validar</button>
</div>
`;
if (useSwal) {
// Mostrar la pregunta en un Swal
Swal.fire({
html: questionHtml,
showConfirmButton: false,
customClass: { popup: "swal-question-popup" },
didOpen: () => {
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 () {
$("#validate-btn").addClass("animate__animated animate__pulse animate__infinite");
if (questionData.multiple) {
$(this).toggleClass("selected");
} else {
$(swalContent).find(".option-btn").removeClass("selected");
$(this).addClass("selected");
}
});
// Manejar clic en el botón de validación
$(swalContent)
.find("#validate-btn")
.off("click")
.on("click", function () {
validateAnswers(containerSelector, true);
});
},
});
} 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");
$(containerSelector).off("click", "#validate-btn");
// Manejar clic en las opciones
$(containerSelector).on("click", ".option-btn", function () {
$("#validate-btn").addClass("animate__animated animate__pulse animate__infinite");
if (questionData.multiple) {
$(this).toggleClass("selected");
$('#validate-btn').click();
} else {
$(containerSelector).find(".option-btn").removeClass("selected");
$(this).addClass("selected");
$('#validate-btn').click();
}
});
// Manejar clic en el botón de validación
$(containerSelector).on("click", "#validate-btn", function () {
validateAnswers(containerSelector, false);
});
}
}
}
/**
* Valida las respuestas seleccionadas por el usuario.
* @param {string} containerSelector - Selector del contenedor donde se renderiza la pregunta.
* @param {boolean} useSwal - Si es `true`, las preguntas se muestran en un Swal.
*/
function validateAnswers(containerSelector, useSwal) {
const questionData = quizManager.getRenderData();
const selectedOptions = $(containerSelector).find(".option-btn.selected");
const selectedIndexes = selectedOptions.map((index, element) => $(element).parent().index()).get();
if (questionData.multiple) {
// Validar selección múltiple
const correctIndexes = questionData.options
.map((option, index) => option.isCorrect ? index : -1)
.filter(index => index !== -1);
const allCorrectSelected = correctIndexes.every(index => selectedIndexes.includes(index)) &&
selectedIndexes.every(index => correctIndexes.includes(index));
if (allCorrectSelected) {
handleFeedback(true, questionData.correctFeedback || "¡Correcto!", containerSelector, useSwal);
} else {
handleFeedback(false, questionData.incorrectFeedback || "Incorrecto", containerSelector, useSwal);
}
} else {
// Validar selección única
const isCorrect = selectedOptions.length === 1 && selectedOptions.data("correct");
const feedback = isCorrect
? questionData.correctFeedback || "¡Correcto!"
: questionData.incorrectFeedback || "Incorrecto";
handleFeedback(isCorrect, feedback, containerSelector, useSwal);
}
}
/**
* 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) {
quizManager.answerCurrentQuestion(isCorrect); // Registra respuesta
let imageSwal = "";
// const imagesArrayRetro = ["img/actividad/1_esposas.gif", "img/actividad/2_numero.gif", "img/actividad/3_uniformee.gif", "img/actividad/4_celda.gif"];
if (isCorrect) {
// const questionIndex = quizManager.currentQuestionIndex; // Obtener el número de la pregunta actual
// imageSwal = imagesArrayRetro[questionIndex % imagesArrayRetro.length]; // Mostrar la imagen correspondiente
imageSwal = "img/actividad/correcto.gif";
} else {
imageSwal = "img/actividad/incorrecto.gif";
}
var html = `<img src="${imageSwal}" class="img-fluid" alt="Feedback Image">`;
Swal.fire({
html: html,
showCloseButton: true,
showCancelButton: false,
showConfirmButton: false,
allowOutsideClick: false,
allowEscapeKey: false,
allowEnterKey: false,
target: $('.mainsco')[0],
backdrop: "rgba(25,25,26,.85)",
background: "transparent",
customClass: { popup: 'pop_course' },
willOpen: function () { },
didOpen: function () {
updateVisualFeedback(isCorrect); // Actualiza visualización
$("#validate-btn").removeClass("animate__animated animate__pulse animate__infinite");
$(".swal2-close").css("height", "2.2em");
},
didRender: function () { },
didClose: function () {
//audios.fondo.loop(true).volume(0.2).play();
// Simular clic en la siguiente pieza disponible (pregunta)
$("#quiz-container").html("");
const time = isCorrect ? 100 : 100;
setTimeout(() => {
if ($(".piece").length == $(".piece.completed").length) {
renderResults("#resume-container");
} else {
quizManager.getNextQuestion();
$(".piece.disabled").first().removeClass("disabled");
$(".piece:not(.completed):not(.disabled)").first().click();
}
}, time);
},
willClose: function () { }
});
}
/**
* Renderiza los resultados finales en un contenedor específico.
* @param {string} containerSelector - Selector del contenedor donde se renderizarán los resultados.
*/
function renderResults(containerSelector) {
CourseNav.audioController.stopAudio();
$(pageActivity).hide();
$(pageSummary).show();
const summary = quizManager.getSummary();
const maxAttempts = quizManager.config.maxAttempts || Infinity; // Intentos máximos desde la configuración
const maxAttemptsTxt = maxAttempts === Infinity ? "&infin;" : maxAttempts;
if (summary.passed) {
$("body").removeClass("fake-activity").addClass("fake-closing");
$(".passed").show();
CourseNav.audioController.stopAllSoundsAndPlay(audios.correct);
// audios.videogame.volume(0.2);
// audios.videogame.play();
CourseNav.setSlideVisited();
} else {
if (quizManager.getAttempts() >= maxAttempts) {
$("body").removeClass("fake-activity").addClass("fake-max-attempts");
$(".without-attempts").show();
CourseNav.audioController.stopAllSoundsAndPlay(audios.attemptLimitReached);
} else {
$("body").removeClass("fake-activity").addClass("fake-closing");
$(".failed").show();
CourseNav.audioController.stopAllSoundsAndPlay(audios.incorrect);
audios.gameover.volume(0.2);
audios.gameover.play();
}
}
}
/**
* Actualiza la retroalimentación visual y muestra la siguiente pregunta o resultados finales.
* @param {boolean} isCorrect - Indica si la respuesta del usuario es correcta.
*/
function updateVisualFeedback(isCorrect) {
// const imagesArray = ["img/actividad/01.png", "img/actividad/02.png", "img/actividad/03.png"];
const lastState = $(".visualFeedback").html();
if (isCorrect) {
const correctAnswersCount = quizManager.currentQuestionIndex;
//CourseNav.audioController.stopAllSoundsAndPlay(audios.feedbackCorrect);
audios.feedbackCorrect.play();
// Cambia la imagen de la pieza actual agregando la 'a' antes del formato
const $currentPiece = $(".piece").eq(correctAnswersCount);
const $img = $currentPiece.find("img");
const src = $img.attr("src");
// Reemplaza el nombre del archivo por el mismo nombre con 'a' antes de la extensión
const newSrc = src.replace(/(\.[a-z]+)$/i, 'a$1');
$img.attr("src", newSrc);
} else {
// Mostrar la retroalimentación incorrecta
//$(".visualFeedback").html(`<img src="img/actividad/error.gif" class="img-fluid">`);
//CourseNav.audioController.stopAllSoundsAndPlay(audios.feedbackIncorrect);
audios.feedbackIncorrect.play();
}
}
// Iniciar audio de introducción
audios.introduction.on("end", function () {
$("#btn-comenzar").removeClass("disabled").addClass("animate__animated animate__pulse animate__infinite");
});
CourseNav.audioController.stopAllSoundsAndPlay(audios.introduction);
// Manejar clic en las piezas
$(".piece").click(function () {
if ($(this).hasClass("completed") || $(this).hasClass("disabled")) return;
const piece = $(this).data("piece");
$(this).find("img").removeClass("animate__animated animate__pulse animate__infinite");
let containerSelector = "#quiz-container";
let useSwal = false;
// Validar si el contenedor de preguntas está visible
if (!$('.pieces-card').is(':visible')) {
containerSelector = ".swal-question-popup";
useSwal = false;
}
if (!allPiecesCompleted()) {
$(this).addClass("completed");
//CourseNav.audioController.stopAllSoundsAndPlay(audios.openQuestion);
audios.openQuestion.play();
renderQuestion(containerSelector, useSwal); // Renderizar la siguiente pregunta
} else {
renderResults("#resume-container"); // Mostrar resultados finales
}
});
// Validar si todas las piezas han sido completadas
function allPiecesCompleted() {
return $(".piece").length === $(".piece.completed").length;
}
// Reiniciar el curso
$("#reiniciar").click(function () {
CourseNav.resetCourse();
});
// Reintentar el curso
$("#reintentar").click(function () {
CourseNav.reload();
});
});
</script>

978
Ogestan_andractiv/contenido/07.html
View File

File diff suppressed because it is too large Load Diff

69
Ogestan_andractiv/contenido/08.html Normal file
View File

@ -0,0 +1,69 @@
<style>
.back0 {
background-image: url(img/bg08.jpg);
background-size: cover;
background-position: 68% 100%;
background-repeat: no-repeat;
}
.border-top-perso {
border-top: 3px solid;
opacity: 1;
}
.anim0 {
display: none;
}
@media(min-width: 768px) {
.back0 {
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-12 col-md-7 animate__animated animate__bounceInDown">
<div class="position-relative d-inline-block mb-3">
<h1 class="text-blue-3 fw-bold">¡Gran trabajo!</h1>
<hr class="m-0 text-blue-3 border-top-perso">
</div>
<p class="animate__animated animate__fadeInUp animate__delay-2s">Has completado el módulo de
<b>OGestan<sup>®</sup> Andractiv</b> y ahora cuentas con bases más sólidas para comunicar
sus beneficios y
diferenciadores con total seguridad.
</p>
<p class="animate__animated animate__fadeInUp animate__delay-10s">Sigue avanzando, confía en lo
que sabes y continúa fortaleciendo tu preparación.</p>
<p class="mb-0 text-blue-4 animate__animated animate__fadeInUp animate__delay-15s">
¡<strong>¡Lo estás haciendo excelente!</strong>!</p>
</div>
<div class="col-12 col-md-5 text-center animate__animated animate__zoomIn">
<img src="img/celebracion.png" alt="Celebración" class="img-fluid floating">
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
"use strict";
$('body').addClass('fake');
const audioh27 = CourseNav.createSound('audio/audioh27.mp3');
CourseNav.audioController.stopAllSoundsAndPlay(audioh27);
audioh27.on('play', function () {
$('.anim0').show();
});
audioh27.on("end", function () {
CourseNav.completeLesson();
});
CourseNav.setSlideVisited();
CourseNav.completeLesson();
});
</script>

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

File diff suppressed because one or more lines are too long

71
Ogestan_andractiv/css/style.scss
View File

@ -62,9 +62,9 @@ body {
>main { >main {
grid-area: main; grid-area: main;
overflow-y: auto;
min-height: 0; // ← ESTO ES CRUCIAL PARA GRID min-height: 0; // ← ESTO ES CRUCIAL PARA GRID
position: relative; position: relative;
overflow: auto;
} }
} }
@ -295,6 +295,7 @@ h4,
overflow-x: hidden; overflow-x: hidden;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
background-color: #fff;
// Aplica a TODOS los contenedores de Bootstrap 5 dentro de .page-sco // Aplica a TODOS los contenedores de Bootstrap 5 dentro de .page-sco
.container, .container,
@ -384,13 +385,11 @@ h4,
background: #dd3352; background: #dd3352;
background: linear-gradient(to right, #dd3352 0%, #fe8a29 100%); background: linear-gradient(to right, #dd3352 0%, #fe8a29 100%);
border-radius: 20px; border-radius: 20px;
border: solid 4px #86d3ff;
} }
.btn-begin:hover { .btn-begin:hover {
background: #dd3352; background: #dd3352;
background: linear-gradient(to left, #dd3352 0%, #fe8a29 100%); background: linear-gradient(to left, #dd3352 0%, #fe8a29 100%);
border: solid 4px #86d3ff;
} }
.animate__animated.animate__pulse { .animate__animated.animate__pulse {
@ -644,42 +643,46 @@ h4,
} }
} }
.bg-variacolor { .bg-variacolor {
background: #00285b; background: #00285b;
background: linear-gradient(to right, #00285b 12%, #0064cf 100%); background: linear-gradient(to right, #00285b 12%, #0064cf 100%);
} }
.border-top-2 { .border-top-2 {
border-top: 3px solid; border-top: 3px solid;
} }
ul>li { ul>li {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
ul>li:last-child { ul>li:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
ul.bul0 { ul.bul0 {
list-style-type: none; list-style-type: none;
list-style-image: url(../img/bul0.png); list-style-image: url(../img/bul0.png);
} }
.btn-next-section { ul.bul1 {
cursor: pointer; list-style-type: none;
} list-style-image: url(../img/bul1.png);
}
.btn-next-section {
cursor: pointer;
}
body.swal2-height-auto { body.swal2-height-auto {
height: 100% !important; height: 100% !important;
} }
.html-pop-style { .html-pop-style {
border: 6px solid transparent; border: 6px solid transparent;
border-radius: 20px; border-radius: 20px;
background: url(../img/fondo-pop.jpg) padding-box, linear-gradient(to right, #00928e 32%, #c1c902 96%) border-box !important; background: url(../img/fondo-pop.jpg) padding-box, linear-gradient(to right, #00928e 32%, #c1c902 96%) border-box !important;
background-size: cover !important; background-size: cover !important;
background-position: center !important; background-position: center !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
} }

10
Ogestan_andractiv/css/stylee.css
View File

@ -51,9 +51,9 @@ body > footer .coursenav-btn-navigation:disabled {
} }
body > main { body > main {
grid-area: main; grid-area: main;
overflow-y: auto;
min-height: 0; min-height: 0;
position: relative; position: relative;
overflow: auto;
} }
header { header {
@ -271,6 +271,7 @@ h4,
overflow-x: hidden; overflow-x: hidden;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
background-color: #fff;
} }
.page-sco .container, .page-sco .container,
.page-sco .container-fluid, .page-sco .container-fluid,
@ -358,13 +359,11 @@ h4,
background: #dd3352; background: #dd3352;
background: linear-gradient(to right, #dd3352 0%, #fe8a29 100%); background: linear-gradient(to right, #dd3352 0%, #fe8a29 100%);
border-radius: 20px; border-radius: 20px;
border: solid 4px #86d3ff;
} }
.btn-begin:hover { .btn-begin:hover {
background: #dd3352; background: #dd3352;
background: linear-gradient(to left, #dd3352 0%, #fe8a29 100%); background: linear-gradient(to left, #dd3352 0%, #fe8a29 100%);
border: solid 4px #86d3ff;
} }
.animate__animated.animate__pulse { .animate__animated.animate__pulse {
@ -747,6 +746,11 @@ ul.bul0 {
list-style-image: url(../img/bul0.png); list-style-image: url(../img/bul0.png);
} }
ul.bul1 {
list-style-type: none;
list-style-image: url(../img/bul1.png);
}
.btn-next-section { .btn-next-section {
cursor: pointer; cursor: pointer;
} }

BIN
Ogestan_andractiv/img/02..2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
Ogestan_andractiv/img/02.1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
Ogestan_andractiv/img/02.2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
Ogestan_andractiv/img/02.3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
Ogestan_andractiv/img/02.4.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
Ogestan_andractiv/img/02.5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

BIN
Ogestan_andractiv/img/02.6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

BIN
Ogestan_andractiv/img/02.7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

BIN
Ogestan_andractiv/img/02.8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 89 KiB

BIN
Ogestan_andractiv/img/04.1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
Ogestan_andractiv/img/04.2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

BIN
Ogestan_andractiv/img/04.3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

BIN
Ogestan_andractiv/img/04.4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
Ogestan_andractiv/img/06.1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
Ogestan_andractiv/img/06.2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 172 KiB

BIN
Ogestan_andractiv/img/actividad/0.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 99 KiB

BIN
Ogestan_andractiv/img/actividad/GOS.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.9 KiB

BIN
Ogestan_andractiv/img/actividad/RPF.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.9 KiB

BIN
Ogestan_andractiv/img/actividad/atenciona.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
Ogestan_andractiv/img/actividad/atencionb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
Ogestan_andractiv/img/actividad/attempts.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 95 KiB

BIN
Ogestan_andractiv/img/actividad/avatar-inicio.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 137 KiB

BIN
Ogestan_andractiv/img/actividad/bannerbien.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 468 KiB

BIN
Ogestan_andractiv/img/actividad/bannerbienmd.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 378 KiB

BIN
Ogestan_andractiv/img/actividad/bannermal.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 449 KiB

BIN
Ogestan_andractiv/img/actividad/bannermalmd.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 375 KiB

BIN
Ogestan_andractiv/img/actividad/check.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
Ogestan_andractiv/img/actividad/checked.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.7 KiB

BIN
Ogestan_andractiv/img/actividad/checkeda.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.6 KiB

BIN
Ogestan_andractiv/img/actividad/correct.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 77 KiB

BIN
Ogestan_andractiv/img/actividad/correcto.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 875 KiB

BIN
Ogestan_andractiv/img/actividad/desarrollo.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.6 KiB

BIN
Ogestan_andractiv/img/actividad/failed.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 68 KiB

BIN
Ogestan_andractiv/img/actividad/fondo-developer.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 207 KiB

BIN
Ogestan_andractiv/img/actividad/fondo-inicio.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 205 KiB

BIN
Ogestan_andractiv/img/actividad/incorrecto.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 MiB

18
Ogestan_andractiv/img/actividad/inicio.svg
View File

@ -1,18 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Capa_2" data-name="Capa 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1366 768">
<defs>
<style>
.cls-1 {
fill: url(#linear-gradient);
stroke-width: 0px;
}
</style>
<linearGradient id="linear-gradient" x1="683" y1="-238.85" x2="683" y2="981.69" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#006990"/>
<stop offset="1" stop-color="#b1005c"/>
</linearGradient>
</defs>
<g id="Capa_1-2" data-name="Capa 1">
<rect class="cls-1" width="1366" height="768"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 642 B

BIN
Ogestan_andractiv/img/actividad/inicio.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 134 KiB

BIN
Ogestan_andractiv/img/actividad/medico.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
Ogestan_andractiv/img/actividad/retrobien.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
Ogestan_andractiv/img/actividad/retromal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
Ogestan_andractiv/img/actividad/tocheck.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 891 B

BIN
Ogestan_andractiv/img/actividad/uncheck.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
Ogestan_andractiv/img/actividad/vs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
Ogestan_andractiv/img/actividad/vs.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
Ogestan_andractiv/img/actividad/vsmd.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
Ogestan_andractiv/img/bg01.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 136 KiB

After

Width:  |  Height:  |  Size: 159 KiB

BIN
Ogestan_andractiv/img/bg02a.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 92 KiB

After

Width:  |  Height:  |  Size: 118 KiB

BIN
Ogestan_andractiv/img/bg03.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 92 KiB

After

Width:  |  Height:  |  Size: 242 KiB

BIN
Ogestan_andractiv/img/bg04.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 242 KiB

After

Width:  |  Height:  |  Size: 690 KiB

BIN
Ogestan_andractiv/img/bg04.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 441 KiB

BIN
Ogestan_andractiv/img/bg05.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 182 KiB

BIN
Ogestan_andractiv/img/bg08.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 125 KiB

BIN
Ogestan_andractiv/img/celebracion.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 275 KiB

BIN
Ogestan_andractiv/img/foco1.bak.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
Ogestan_andractiv/img/foco1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 33 KiB

BIN
Ogestan_andractiv/img/foco1off.bak.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
Ogestan_andractiv/img/foco1off.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.1 KiB

After

Width:  |  Height:  |  Size: 28 KiB

BIN
Ogestan_andractiv/img/foco2.bak.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
Ogestan_andractiv/img/foco2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 29 KiB

BIN
Ogestan_andractiv/img/foco2on.bak.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
Ogestan_andractiv/img/foco2on.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 33 KiB

BIN
Ogestan_andractiv/img/icon_01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
Ogestan_andractiv/img/icon_02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
Ogestan_andractiv/img/icon_03.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
Ogestan_andractiv/img/icon_04.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
Ogestan_andractiv/img/icon_05.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
Ogestan_andractiv/img/icon_06.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
Ogestan_andractiv/img/icon_07.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
Ogestan_andractiv/img/icon_08.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
Ogestan_andractiv/img/icon_09.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
Ogestan_andractiv/img/icon_10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
Ogestan_andractiv/img/li1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 583 B

BIN
Ogestan_andractiv/img/next.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 856 B

BIN
Ogestan_andractiv/img/play-button.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
Ogestan_andractiv/img/prev.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 831 B

Some files were not shown because too many files have changed in this diff Show More