Update: version 1
This commit is contained in:
parent
594539b531
commit
b42d53e844
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -9,27 +9,27 @@
|
||||
"content": "contenido/01.html"
|
||||
},
|
||||
{
|
||||
"title": "La familia OGestan",
|
||||
"title": "Introducción a OGestan ® Andractiv",
|
||||
"content": "contenido/02.html"
|
||||
},
|
||||
{
|
||||
"title": "¿Qué es OGestan<sup>®</sup> Plus?",
|
||||
"title": "Componentes y beneficios",
|
||||
"content": "contenido/03.html"
|
||||
},
|
||||
{
|
||||
"title": "Beneficios",
|
||||
"title": "Información nutricional",
|
||||
"content": "contenido/04.html"
|
||||
},
|
||||
{
|
||||
"title": "Información Nutricional",
|
||||
"title": "Competidores y diferenciadores",
|
||||
"content": "contenido/05.html"
|
||||
},
|
||||
{
|
||||
"title": "Competencia",
|
||||
"title": "Competidores y diferenciadores",
|
||||
"content": "contenido/06.html"
|
||||
},
|
||||
{
|
||||
"title": "Manejo de Objeciones",
|
||||
"title": "Manejo de Objeciones (Actividad de aprendizaje)",
|
||||
"content": "contenido/07.html"
|
||||
},
|
||||
{
|
||||
|
||||
@ -24,20 +24,20 @@
|
||||
<div class="container">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12">
|
||||
<div class="row">
|
||||
<div class="row justify-content-center">
|
||||
<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">
|
||||
<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"> -->
|
||||
<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 class="col-12 text-center" data-sal="flip-up">
|
||||
<div class="w-100 position-relative">
|
||||
<div id="wrap-comenzar" data-sec="sec1"
|
||||
class="btn btn-begin text-white fw-bold animate__animated animate__pulse animate__infinite py-1">
|
||||
class="btn btn-begin text-white fw-bold border border-3 border-blue-6 animate__animated animate__pulse animate__infinite py-1">
|
||||
Comenzar
|
||||
</div>
|
||||
</div>
|
||||
@ -66,16 +66,16 @@
|
||||
<img src="img/01.0.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 col-md-7 col-xl-5 order-1 order-md-2 mb-3 mb-md-0" data-sal="flip-left">
|
||||
<h2 class="text-secondary 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>,
|
||||
<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 class="text-gray-2">OGestan<sup>®</sup> Andractiv</b>,
|
||||
para quién está diseñado y cuál es su papel
|
||||
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
|
||||
resulta tan importante para apoyar
|
||||
la
|
||||
<b>calidad y funcionamiento del esperma</b>.
|
||||
<b class="text-gray-2">calidad y funcionamiento del esperma</b>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -11,9 +11,46 @@
|
||||
}
|
||||
|
||||
.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) {
|
||||
.content-pop-lateral {
|
||||
@ -22,7 +59,7 @@
|
||||
|
||||
.pop_lateral {
|
||||
grid-template-columns: 1fr !important;
|
||||
grid-template-rows: 75% 25% !important;
|
||||
grid-template-rows: 85% auto !important;
|
||||
grid-row: 1 / 1 !important;
|
||||
place-self: start !important;
|
||||
width: 75% !important;
|
||||
@ -36,46 +73,65 @@
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-12">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-12 mb-md-4 mb-2">
|
||||
<h2 class="text-secondary 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>.
|
||||
<div class="col-12 col-md-12 mb-md-4 mb-2 animate__animated animate__fadeInDown">
|
||||
<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
|
||||
class="text-gray-2">OGestan<sup>®</sup> Andractiv</b>.
|
||||
Aquí
|
||||
podrás revisar su <b>nombre comercial</b>, su <b>presentación</b>, su <b>indicación</b> y su
|
||||
<b>modo
|
||||
podrás revisar su <b class="text-gray-2">nombre comercial</b>, su <b
|
||||
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
|
||||
con
|
||||
claridad qué es, cómo se utiliza y a quién está dirigido.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-xl-5 px-md-5 my-md-3 my-2">
|
||||
<div class="card btn-pop animate__animated animate__pulse animate__infinite disabled"
|
||||
<div
|
||||
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">
|
||||
<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 class="col-12 col-md-6 col-xl-5 px-md-5 my-md-3 my-2">
|
||||
<div class="card btn-pop animate__animated animate__pulse animate__infinite disabled"
|
||||
<div
|
||||
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">
|
||||
<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 class="col-12 col-md-6 col-xl-5 px-md-5 my-md-3 my-2">
|
||||
<div class="card btn-pop animate__animated animate__pulse animate__infinite disabled"
|
||||
<div
|
||||
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">
|
||||
<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 class="col-12 col-md-6 col-xl-5 px-md-5 my-md-3 my-2">
|
||||
<div class="card btn-pop animate__animated animate__pulse animate__infinite disabled"
|
||||
<div
|
||||
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">
|
||||
<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>
|
||||
@ -93,15 +149,16 @@
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-12 col-xl-8 text-start text-white">
|
||||
<h3 class="fw-semibold">Nombre comercial</h3>
|
||||
<ul>
|
||||
<ul class="custom-li">
|
||||
<li>OGestan® Andractiv</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>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-md-5 col-xl-4 mt-md-4">
|
||||
<img src="img/02.1.png" class="img-fluid" alt="Nombre comercial">
|
||||
<div class="col-12 col-md-7 col-xl-5 mt-md-4">
|
||||
<img src="img/02.5.png" class="img-fluid floating" alt="Nombre comercial">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -115,10 +172,10 @@
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-12 col-xl-8 text-start text-white">
|
||||
<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 class="col-12 col-md-5 col-xl-4 mt-md-4">
|
||||
<img src="img/02.1.png" class="img-fluid" alt="Nombre comercial">
|
||||
<div class="col-12 col-md-7 col-xl-5 mt-md-4">
|
||||
<img src="img/02.6.png" class="img-fluid floating" alt="Nombre comercial">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -130,13 +187,13 @@
|
||||
<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 text-white">
|
||||
<div class="col-12 col-md-12 col-xl-10 text-start text-white">
|
||||
<h3 class="fw-semibold">Indicación</h3>
|
||||
<p>Suplemento alimenticio, para <b class="text-yellow">complementar</b> la alimentación en
|
||||
los hombres.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-5 col-xl-4 mt-md-4">
|
||||
<img src="img/02.1.png" class="img-fluid" alt="Nombre comercial">
|
||||
<div class="col-12 col-md-7 col-xl-5 mt-md-2">
|
||||
<img src="img/02.7.png" class="img-fluid floating" alt="Nombre comercial">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -148,14 +205,16 @@
|
||||
<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 text-white">
|
||||
<div class="col-12 col-md-12 col-xl-10 text-start text-white">
|
||||
<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>
|
||||
<p>Edad: <b>A partir de 18 años</b>.</p>
|
||||
<p><b>No exceder</b> la dosis recomendada.</p>
|
||||
<ul class="custom-li">
|
||||
<li>Dosis: <b class="text-yellow">1 cápsula al día</b> con algún alimento.</li>
|
||||
<li>Edad: <b>A partir de 18 años</b>.</li>
|
||||
<li><b>No exceder</b> la dosis recomendada.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-md-5 col-xl-4 mt-md-4">
|
||||
<img src="img/02.1.png" class="img-fluid" alt="Nombre comercial">
|
||||
<div class="col-12 col-md-7 col-xl-5">
|
||||
<img src="img/02.8.png" class="img-fluid floating" alt="Nombre comercial">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -200,14 +259,14 @@
|
||||
popup: 'pop_lateral',
|
||||
htmlContainer: 'd-flex justify-content-center align-items-center',
|
||||
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",
|
||||
showConfirmButton: true,
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
focusConfirm: false,
|
||||
backdrop: "rgba(65, 60, 60, .95)",
|
||||
backdrop: "rgba(0, 40, 91, .80)",
|
||||
grow: 'fullscreen',
|
||||
showClass: {
|
||||
popup: 'animate__animated animate__fadeInLeft animate__faster' // Animación dinámica (derecha/izquierda)
|
||||
|
||||
@ -7,8 +7,8 @@
|
||||
}
|
||||
|
||||
.wrap-sw {
|
||||
background: rgba(0, 211, 95, 10);
|
||||
background: linear-gradient(270deg, rgba(0, 211, 95, 0.7) 0%, rgba(0, 96, 255, 0.7) 100%);
|
||||
background: rgba(0, 0, 0, 0);
|
||||
/* background: linear-gradient(270deg, rgba(0, 211, 95, 0.7) 0%, rgba(0, 96, 255, 0.7) 100%); */
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -17,18 +17,43 @@
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
.card.flat {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
|
||||
/* Marcadores personalizados para listas */
|
||||
ul.custom-li {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.card.flat .card-body {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
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;
|
||||
/* 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 {
|
||||
@ -37,6 +62,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
.mySwiper .swiper-slide {
|
||||
@ -92,7 +118,7 @@
|
||||
height: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 55;
|
||||
/* z-index: 55; */
|
||||
top: 0;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
@ -104,101 +130,76 @@
|
||||
|
||||
.swiper-custom-button-next img,
|
||||
.swiper-custom-button-prev img {
|
||||
height: 85px;
|
||||
height: 35px;
|
||||
width: auto;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.swiper-custom-button-prev {
|
||||
border-radius: 20%;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
.swiper-custom-button-next {
|
||||
border-radius: 20%;
|
||||
}
|
||||
|
||||
.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;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
.customSwiper .swiper-slide {
|
||||
height: 300px !important;
|
||||
}
|
||||
|
||||
.customSwiper .swiper-slide {
|
||||
width: 100% !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
.swiper-custom-button-next img,
|
||||
.swiper-custom-button-prev img {
|
||||
height: 150px;
|
||||
height: 50px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.mySwiper {
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.card-with-avatar {
|
||||
position: relative;
|
||||
background: linear-gradient(to right, #D4F8E8, #C0F1FF);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
/* deja espacio para el avatar a la derecha */
|
||||
padding-right: 300px;
|
||||
overflow: visible;
|
||||
|
||||
/* para que el avatar “salga” sin recortarse */
|
||||
@media (min-width: 1200px) {
|
||||
.swiper-nav::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 60%;
|
||||
height: 88%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
|
||||
@ -206,14 +207,6 @@
|
||||
height: 370px !important;
|
||||
}
|
||||
|
||||
.avatar-circle {
|
||||
position: relative;
|
||||
top: 0;
|
||||
transform: translateY(0px);
|
||||
max-width: 70%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.avatar-circle img {
|
||||
object-fit: scale-down;
|
||||
}
|
||||
@ -222,17 +215,6 @@
|
||||
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>
|
||||
<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="row">
|
||||
<div class="col-12 text-center px-4 animate__animated animate__backInLeft">
|
||||
<h2 class="fw-semibold text-secondary">Componentes y beneficios</h2>
|
||||
<p>En infertilidad masculina</p>
|
||||
<h2 class="fw-semibold text-blue-3">Componentes y beneficios</h2>
|
||||
<p class="text-blue-4">En infertilidad masculina</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center wrap-sw text-white">
|
||||
@ -274,15 +256,45 @@
|
||||
<img src="img/icon_04.png" />
|
||||
</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>
|
||||
<!-- navegacion -->
|
||||
<div class="position-absolute mx-auto swiper-nav">
|
||||
<div class="swiper-custom-button-prev">
|
||||
<img src="img/prev.webp" alt="" />
|
||||
<img src="img/prev.png" alt="" />
|
||||
</div>
|
||||
<div class="swiper-custom-button-next">
|
||||
<img src="img/next.webp" alt="" />
|
||||
<img src="img/next.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -300,60 +312,152 @@
|
||||
<!-- Swiper con validación de slides visitados -->
|
||||
<div class="swiper customSwiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide py-3 pe-3 ps-2 text-center">
|
||||
<div class="d-flex h-100 align-items-center justify-content-center">
|
||||
<div class="card-with-avatar">
|
||||
<div class="card-body">
|
||||
<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">Omega-3</h3>
|
||||
<p>
|
||||
Conocimiento de tus <strong
|
||||
class="text-azul-claro">compromisos</strong>:
|
||||
diario, semanal y quincenal.
|
||||
<b class="text-orange-1">Aumenta</b> el recuento
|
||||
total, la concentración y morfología de los
|
||||
espermatozoides.
|
||||
</p>
|
||||
</div>
|
||||
<div class="avatar-circle">
|
||||
<img src="img/04.1.png" alt="Avatar ilustrado">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="swiper-slide py-3 pe-3 ps-2 text-center">
|
||||
<div class="d-flex h-100 align-items-center justify-content-center">
|
||||
<div class="card-with-avatar">
|
||||
<div class="card-body">
|
||||
<p><strong class="text-azul-claro">Grito de
|
||||
guerra</strong>: motivación para arrancar con
|
||||
fuerza.</p>
|
||||
</div>
|
||||
<div class="avatar-circle">
|
||||
<img src="img/04.2.png" alt="Avatar ilustrado">
|
||||
<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">L-Carnitina</h3>
|
||||
<ul class="custom-li text-start">
|
||||
<li>Mejora la <b class="text-orange-1">motilidad</b>
|
||||
de los espermatozoides.</li>
|
||||
<li><b class="text-orange-1">Incrementa</b> el
|
||||
número total de espermatozoides.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide text-center">
|
||||
<div class="d-flex h-100 align-items-center justify-content-center">
|
||||
<div class="card-with-avatar">
|
||||
<div class="card-body">
|
||||
<p><strong class="text-azul-claro">Role Play</strong>:
|
||||
ejercicios para mejorar tu discurso de ventas.</p>
|
||||
</div>
|
||||
<div class="avatar-circle">
|
||||
<img src="img/04.3.png" alt="Avatar ilustrado">
|
||||
<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 C</h3>
|
||||
<ul class="custom-li text-start">
|
||||
<li>Reduce el <b class="text-orange-1">estrés</b>
|
||||
oxidativo.</li>
|
||||
<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 class="swiper-slide text-center">
|
||||
<div class="d-flex h-100 align-items-center justify-content-center">
|
||||
<div class="card-with-avatar">
|
||||
<div class="card-body">
|
||||
<p><strong class="text-azul-claro">Prospección</strong>:
|
||||
ya sea por telemarketing, cambaceo tradicional, en
|
||||
negocios o seguimiento.</p>
|
||||
<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 E</h3>
|
||||
<ul class="custom-li text-start">
|
||||
<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 class="avatar-circle">
|
||||
<img src="img/04.4.png" alt="Avatar ilustrado">
|
||||
</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">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>
|
||||
@ -424,15 +528,20 @@
|
||||
});
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audioh06);
|
||||
const audioFiles = [
|
||||
CourseNav.createSound("audio/audio11.mp3"),
|
||||
CourseNav.createSound("audio/audio12.mp3"),
|
||||
CourseNav.createSound("audio/audio13.mp3"),
|
||||
CourseNav.createSound("audio/audio14.mp3"),
|
||||
CourseNav.createSound("audio/audioh07.mp3"),
|
||||
CourseNav.createSound("audio/audioh08.mp3"),
|
||||
CourseNav.createSound("audio/audioh09.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() {
|
||||
console.log("completado");
|
||||
$('.swiper-custom-button-next').removeClass('animate__animated animate__pulse animate__infinite');
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
@ -444,7 +553,6 @@
|
||||
// Validación del audio
|
||||
let audio = null;
|
||||
const audioData = $element.data("sound");
|
||||
console.log(audioData);
|
||||
if (audioData) {
|
||||
try {
|
||||
audio = eval(audioData);
|
||||
|
||||
@ -46,9 +46,9 @@
|
||||
}
|
||||
|
||||
.foco-bubble {
|
||||
background: rgba(24, 24, 24, 0.7);
|
||||
background: rgba(55, 173, 255, 0.7);
|
||||
color: #fff;
|
||||
border: 2px solid #fff;
|
||||
border: 0px solid #fff;
|
||||
border-radius: 2rem;
|
||||
padding: 1.5rem 2rem;
|
||||
line-height: 1.45;
|
||||
@ -72,6 +72,10 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.text-yellow {
|
||||
color: #ffc306 !important;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.foco-wrap {
|
||||
width: 100%;
|
||||
@ -84,27 +88,17 @@
|
||||
}
|
||||
|
||||
.foco-bubble {
|
||||
|
||||
padding: 1rem 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.back0 {
|
||||
background-image: url('img/bg02.jpg');
|
||||
background-image: url('img/bg04.jpg');
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/*
|
||||
.btn-open-pop {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
} */
|
||||
</style>
|
||||
|
||||
<section class="page-sco back0 py-md-4 py-2">
|
||||
@ -113,22 +107,22 @@
|
||||
</div> -->
|
||||
<div class="container-fluid px-0 my-md-5 my-xl-3 d-none" id="container3">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-md-10 text-white">
|
||||
<h2 class="fw-semibold">Beneficios Generales </h2>
|
||||
<p>Conoce los beneficios generales de <b>OGestan<sup>®</sup> Andractiv</b>. Descubre cómo mejora
|
||||
<div class="col-12 col-md-10 text-white animate__animated animate__fadeInDown">
|
||||
<h2 class="fw-semibold text-center text-blue-6">Beneficios Generales </h2>
|
||||
<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>
|
||||
</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 -->
|
||||
<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">
|
||||
<img src="img/foco1.png" data-on="img/foco1.png" data-off="img/foco1off.png" alt="Foco encendido"
|
||||
class="foco-img" id="focoIzquierda" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Texto derecha -->
|
||||
<div class="col-12 col-md-9">
|
||||
<div class="col-12 col-md-8 col-xl-6">
|
||||
<div class="foco-bubble">
|
||||
Esta combinación de <b class="text-yellow">Antioxidantes, Vitaminas, Minerales y Omega–3</b> está
|
||||
diseñada para la mejora en la
|
||||
@ -137,17 +131,17 @@
|
||||
</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">
|
||||
<!-- 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">
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Texto izquierda -->
|
||||
<div class="col-12 col-md-9">
|
||||
<div class="col-12 col-md-8 col-xl-6">
|
||||
<div class="foco-bubble">
|
||||
<ul class="my-0">
|
||||
<li>Mejora la <b class="text-yellow">motilidad</b> de los espermatozoides.</li>
|
||||
@ -212,7 +206,7 @@
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audioh18);
|
||||
// Cambiar estado visual
|
||||
setFocoState($focoIzquierda, 'on');
|
||||
setFocoState($focoDerecha, 'off');
|
||||
// setFocoState($focoDerecha, 'off');
|
||||
|
||||
$(this).removeClass('animate__animated animate__headShake animate__infinite')
|
||||
});
|
||||
@ -225,7 +219,7 @@
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audioh19);
|
||||
// Cambiar estado visual
|
||||
setFocoState($focoDerecha, 'on');
|
||||
setFocoState($focoIzquierda, 'off');
|
||||
// setFocoState($focoIzquierda, 'off');
|
||||
$(this).removeClass('animate__animated animate__heartBeat animate__infinite')
|
||||
});
|
||||
|
||||
@ -235,9 +229,9 @@
|
||||
const bubble2Visible = $('.foco-bubble').eq(1).hasClass('show');
|
||||
if (bubble1Visible && bubble2Visible) {
|
||||
// Prende ambos focos al completar
|
||||
setFocoState($focoIzquierda, 'on');
|
||||
setFocoState($focoDerecha, 'on');
|
||||
// CourseNav.setSlideVisited();
|
||||
// setFocoState($focoIzquierda, 'on');
|
||||
// setFocoState($focoDerecha, 'on');
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<style>
|
||||
.fake {
|
||||
background-image: url(img/bg08.webp);
|
||||
.back0 {
|
||||
background-image: url(img/bg05.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@ -16,12 +16,13 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 10002;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
background-color: rgb(111 156 202);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
#video {
|
||||
z-index: 99;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.play-button-container button {
|
||||
@ -29,32 +30,31 @@
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
width: 25%;
|
||||
}
|
||||
</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="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 animate__animated animate__bounceInDown">
|
||||
<h1 class="fw-bold text-white text-center text-white">Me acompañó, no solo me afilió</h1>
|
||||
<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>
|
||||
<h2 class="fw-semibold text-blue-3">Información Nutricional </h2>
|
||||
</div>
|
||||
<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="ratio ratio-16x9">
|
||||
<video id="video" class="embed-responsive-item" controls playsinline
|
||||
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.
|
||||
</video>
|
||||
<div class="play-button-container">
|
||||
<button
|
||||
class="p-0 animate__animated animate__heartBeat animate__infinite waves-effect disabled"
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
@ -70,13 +70,17 @@
|
||||
"use strict";
|
||||
$('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 () {
|
||||
$("#btn_video").removeClass("disabled");
|
||||
});
|
||||
// audioh23.on('end', function () {
|
||||
// $("#btn_video").removeClass("disabled");
|
||||
// });
|
||||
|
||||
setTimeout(function () {
|
||||
$("#btn_video").removeClass("disabled").click();
|
||||
}, 200);
|
||||
|
||||
var video = document.getElementById("video");
|
||||
var btnVideo = document.getElementById("btn_video");
|
||||
|
||||
@ -1,4 +1,43 @@
|
||||
<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 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -10,7 +49,7 @@
|
||||
.wrapper-card {
|
||||
display: inline-flex;
|
||||
border-radius: 30px;
|
||||
background-color: var(--bs-gray-100);
|
||||
background-color: transparent;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -18,6 +57,7 @@
|
||||
-moz-transition: background-color 0.5s ease;
|
||||
-o-transition: background-color 0.5s ease;
|
||||
transition: background-color 0.5s ease;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
[data-popid="#pop-dexeed"]:hover {
|
||||
@ -58,94 +98,41 @@
|
||||
z-index: 5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pop-type0-new {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-diagrama-1,
|
||||
.ajuste-grid {
|
||||
display: grid;
|
||||
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);
|
||||
@media (min-width: 1200px) {
|
||||
.pop-type0-new {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
</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="eletxt">
|
||||
<div class="w-100 text-center mt-md-4 mt-2">
|
||||
<h2 class="text-primary fw-semibold">Competidores</h2>
|
||||
<div class="w-100 text-center mt-md-4 mt-2 animate__animated animate__fadeInDown">
|
||||
<h2 class="text-white fw-semibold">Competidores</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle bg-morado bg-opacity-10 animate__animated animate__fadeInLeft"
|
||||
style="background-image: url('img/r1.webp')">
|
||||
<div class="middle bg-gra1 animate__animated animate__fadeInLeft">
|
||||
<div data-popid="#pop-dexeed" data-audio="audioh21"
|
||||
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">
|
||||
<i class="fa-regular fa-sack"></i>
|
||||
<div>DAXEED</div>
|
||||
<!-- <i class="fa-regular fa-sack"></i>
|
||||
<div>DAXEED</div> -->
|
||||
<img src="img/06.1.png" alt="Dexeed Logo" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle bg-warning bg-opacity-10 animate__animated animate__fadeInRight"
|
||||
style="background-image: url('img/l1.webp')">
|
||||
<div class="middle bg-gra2 animate__animated animate__fadeInRight">
|
||||
<div data-popid="#pop-otros" data-backdrop="url(img/semilla.webp) no-repeat center / cover"
|
||||
data-audio="audioh22"
|
||||
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>
|
||||
<div>OTROS</div>
|
||||
<!-- <i class="fa-regular fa-hand-holding-seedling"></i>
|
||||
<div>OTROS</div> -->
|
||||
<img src="img/06.2.png" alt="Otros Logo" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -154,13 +141,13 @@
|
||||
<div id="pop-dexeed">
|
||||
<div class="d-flex justify-content-center align-items-center flex-column align-self-center">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<ul class="text-start">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-10 col-xl-8">
|
||||
<ul class="text-start custom-li">
|
||||
<li>Comercializado por Corne.</li>
|
||||
<li>8 componentes: antioxidantes, aminoácidos, vitaminas y zinc.</li>
|
||||
<li>No contiene Omega-3.</li>
|
||||
<li>No contiene Selenio.</li>
|
||||
<li><b class="text-orange-1">No contiene Omega-3.</b></li>
|
||||
<li><b class="text-orange-1">No contiene Selenio.</b></li>
|
||||
<li>Ácido fólico estándar.</li>
|
||||
<li>Alto costo.</li>
|
||||
<li>Limitada disponibilidad en puntos de venta.</li>
|
||||
@ -168,6 +155,9 @@
|
||||
<li>Presentación en sobres.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-md-5 col-xl-4">
|
||||
<img src="img/06.1.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="w-100 text-center mt-4 pb-4">
|
||||
@ -178,9 +168,9 @@
|
||||
<div id="pop-otros">
|
||||
<div class="d-flex justify-content-center align-items-center flex-column align-self-center">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center">
|
||||
<ul class="text-start">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-10 col-xl-8 text-center">
|
||||
<ul class="text-start custom-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>Sin permisos por la autoridad mexicana.</li>
|
||||
@ -189,6 +179,9 @@
|
||||
<li>Altos costos de envío.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-md-5 col-xl-4">
|
||||
<img src="img/06.2.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="w-100 text-center mt-4 pb-4">
|
||||
@ -207,7 +200,9 @@
|
||||
audioh20.on("end", () => {
|
||||
$(".wrapper-card").removeClass("disabled");
|
||||
});
|
||||
setTimeout(() => {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audioh20);
|
||||
}, 100);
|
||||
|
||||
audioh22.on("end", function () {
|
||||
|
||||
@ -228,7 +223,6 @@
|
||||
// Validación del audio
|
||||
let audio = null;
|
||||
const audioData = $element.data("audio");
|
||||
console.log(audioData);
|
||||
if (audioData) {
|
||||
try {
|
||||
audio = eval(audioData);
|
||||
@ -273,9 +267,9 @@
|
||||
focusConfirm: false,
|
||||
confirmButtonText: "Cerrar",
|
||||
customClass: {
|
||||
popup: 'pop-type0 bg-transparent p-0',
|
||||
popup: 'pop-type0-new bg-transparent p-0',
|
||||
htmlContainer: 'html-pop-style p-3',
|
||||
confirmButton: 'btn btn-begin text-white fw-bold animate__animated animate__pulse animate__infinite py-1 px-4'
|
||||
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,
|
||||
willOpen: () => {
|
||||
|
||||
730
Ogestan_andractiv/contenido/07.bak.html
Normal file
730
Ogestan_andractiv/contenido/07.bak.html
Normal 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 ? "∞" : 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 ? "∞" : 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>
|
||||
File diff suppressed because it is too large
Load Diff
69
Ogestan_andractiv/contenido/08.html
Normal file
69
Ogestan_andractiv/contenido/08.html
Normal 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
2
Ogestan_andractiv/css/style.min.css
vendored
File diff suppressed because one or more lines are too long
@ -62,9 +62,9 @@ body {
|
||||
|
||||
>main {
|
||||
grid-area: main;
|
||||
overflow-y: auto;
|
||||
min-height: 0; // ← ESTO ES CRUCIAL PARA GRID
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@ -295,6 +295,7 @@ h4,
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
|
||||
// Aplica a TODOS los contenedores de Bootstrap 5 dentro de .page-sco
|
||||
.container,
|
||||
@ -384,13 +385,11 @@ h4,
|
||||
background: #dd3352;
|
||||
background: linear-gradient(to right, #dd3352 0%, #fe8a29 100%);
|
||||
border-radius: 20px;
|
||||
border: solid 4px #86d3ff;
|
||||
}
|
||||
|
||||
.btn-begin:hover {
|
||||
background: #dd3352;
|
||||
background: linear-gradient(to left, #dd3352 0%, #fe8a29 100%);
|
||||
border: solid 4px #86d3ff;
|
||||
}
|
||||
|
||||
.animate__animated.animate__pulse {
|
||||
@ -644,42 +643,46 @@ h4,
|
||||
}
|
||||
}
|
||||
|
||||
.bg-variacolor {
|
||||
background: #00285b;
|
||||
background: linear-gradient(to right, #00285b 12%, #0064cf 100%);
|
||||
}
|
||||
.bg-variacolor {
|
||||
background: #00285b;
|
||||
background: linear-gradient(to right, #00285b 12%, #0064cf 100%);
|
||||
}
|
||||
|
||||
.border-top-2 {
|
||||
border-top: 3px solid;
|
||||
}
|
||||
.border-top-2 {
|
||||
border-top: 3px solid;
|
||||
}
|
||||
|
||||
ul>li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
ul>li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
ul>li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
ul>li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul.bul0 {
|
||||
list-style-type: none;
|
||||
list-style-image: url(../img/bul0.png);
|
||||
}
|
||||
ul.bul0 {
|
||||
list-style-type: none;
|
||||
list-style-image: url(../img/bul0.png);
|
||||
}
|
||||
|
||||
.btn-next-section {
|
||||
cursor: pointer;
|
||||
}
|
||||
ul.bul1 {
|
||||
list-style-type: none;
|
||||
list-style-image: url(../img/bul1.png);
|
||||
}
|
||||
|
||||
.btn-next-section {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
body.swal2-height-auto {
|
||||
height: 100% !important;
|
||||
}
|
||||
body.swal2-height-auto {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.html-pop-style {
|
||||
border: 6px solid transparent;
|
||||
border-radius: 20px;
|
||||
background: url(../img/fondo-pop.jpg) padding-box, linear-gradient(to right, #00928e 32%, #c1c902 96%) border-box !important;
|
||||
background-size: cover !important;
|
||||
background-position: center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
.html-pop-style {
|
||||
border: 6px solid transparent;
|
||||
border-radius: 20px;
|
||||
background: url(../img/fondo-pop.jpg) padding-box, linear-gradient(to right, #00928e 32%, #c1c902 96%) border-box !important;
|
||||
background-size: cover !important;
|
||||
background-position: center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
@ -51,9 +51,9 @@ body > footer .coursenav-btn-navigation:disabled {
|
||||
}
|
||||
body > main {
|
||||
grid-area: main;
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
header {
|
||||
@ -271,6 +271,7 @@ h4,
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
.page-sco .container,
|
||||
.page-sco .container-fluid,
|
||||
@ -358,13 +359,11 @@ h4,
|
||||
background: #dd3352;
|
||||
background: linear-gradient(to right, #dd3352 0%, #fe8a29 100%);
|
||||
border-radius: 20px;
|
||||
border: solid 4px #86d3ff;
|
||||
}
|
||||
|
||||
.btn-begin:hover {
|
||||
background: #dd3352;
|
||||
background: linear-gradient(to left, #dd3352 0%, #fe8a29 100%);
|
||||
border: solid 4px #86d3ff;
|
||||
}
|
||||
|
||||
.animate__animated.animate__pulse {
|
||||
@ -747,6 +746,11 @@ ul.bul0 {
|
||||
list-style-image: url(../img/bul0.png);
|
||||
}
|
||||
|
||||
ul.bul1 {
|
||||
list-style-type: none;
|
||||
list-style-image: url(../img/bul1.png);
|
||||
}
|
||||
|
||||
.btn-next-section {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
BIN
Ogestan_andractiv/img/02..2.png
Normal file
BIN
Ogestan_andractiv/img/02..2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 1.6 KiB |
BIN
Ogestan_andractiv/img/02.5.png
Normal file
BIN
Ogestan_andractiv/img/02.5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
BIN
Ogestan_andractiv/img/02.6.png
Normal file
BIN
Ogestan_andractiv/img/02.6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
BIN
Ogestan_andractiv/img/02.7.png
Normal file
BIN
Ogestan_andractiv/img/02.7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
BIN
Ogestan_andractiv/img/02.8.png
Normal file
BIN
Ogestan_andractiv/img/02.8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
BIN
Ogestan_andractiv/img/04.1.png
Normal file
BIN
Ogestan_andractiv/img/04.1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
Ogestan_andractiv/img/04.2.png
Normal file
BIN
Ogestan_andractiv/img/04.2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
BIN
Ogestan_andractiv/img/04.3.png
Normal file
BIN
Ogestan_andractiv/img/04.3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
BIN
Ogestan_andractiv/img/04.4.png
Normal file
BIN
Ogestan_andractiv/img/04.4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
BIN
Ogestan_andractiv/img/06.1.png
Normal file
BIN
Ogestan_andractiv/img/06.1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
BIN
Ogestan_andractiv/img/06.2.png
Normal file
BIN
Ogestan_andractiv/img/06.2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.9 KiB |
BIN
Ogestan_andractiv/img/actividad/atenciona.png
Normal file
BIN
Ogestan_andractiv/img/actividad/atenciona.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
Ogestan_andractiv/img/actividad/atencionb.png
Normal file
BIN
Ogestan_andractiv/img/actividad/atencionb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 95 KiB |
BIN
Ogestan_andractiv/img/actividad/avatar-inicio.png
Normal file
BIN
Ogestan_andractiv/img/actividad/avatar-inicio.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
BIN
Ogestan_andractiv/img/actividad/bannerbien.jpg
Normal file
BIN
Ogestan_andractiv/img/actividad/bannerbien.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 468 KiB |
BIN
Ogestan_andractiv/img/actividad/bannerbienmd.jpg
Normal file
BIN
Ogestan_andractiv/img/actividad/bannerbienmd.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 378 KiB |
BIN
Ogestan_andractiv/img/actividad/bannermal.jpg
Normal file
BIN
Ogestan_andractiv/img/actividad/bannermal.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 449 KiB |
BIN
Ogestan_andractiv/img/actividad/bannermalmd.jpg
Normal file
BIN
Ogestan_andractiv/img/actividad/bannermalmd.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 375 KiB |
BIN
Ogestan_andractiv/img/actividad/check.png
Normal file
BIN
Ogestan_andractiv/img/actividad/check.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 875 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB |
BIN
Ogestan_andractiv/img/actividad/fondo-developer.jpg
Normal file
BIN
Ogestan_andractiv/img/actividad/fondo-developer.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
BIN
Ogestan_andractiv/img/actividad/fondo-inicio.jpg
Normal file
BIN
Ogestan_andractiv/img/actividad/fondo-inicio.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 205 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
@ -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>
|
||||
|
Before Width: | Height: | Size: 642 B |
Binary file not shown.
|
Before Width: | Height: | Size: 134 KiB |
BIN
Ogestan_andractiv/img/actividad/medico.png
Normal file
BIN
Ogestan_andractiv/img/actividad/medico.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
Ogestan_andractiv/img/actividad/retrobien.png
Normal file
BIN
Ogestan_andractiv/img/actividad/retrobien.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
Ogestan_andractiv/img/actividad/retromal.png
Normal file
BIN
Ogestan_andractiv/img/actividad/retromal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
Ogestan_andractiv/img/actividad/tocheck.png
Normal file
BIN
Ogestan_andractiv/img/actividad/tocheck.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 891 B |
BIN
Ogestan_andractiv/img/actividad/uncheck.png
Normal file
BIN
Ogestan_andractiv/img/actividad/uncheck.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
Ogestan_andractiv/img/actividad/vs.png
Normal file
BIN
Ogestan_andractiv/img/actividad/vs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
BIN
Ogestan_andractiv/img/actividad/vsmd.png
Normal file
BIN
Ogestan_andractiv/img/actividad/vsmd.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 136 KiB After Width: | Height: | Size: 159 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 242 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 242 KiB After Width: | Height: | Size: 690 KiB |
BIN
Ogestan_andractiv/img/bg04.png
Normal file
BIN
Ogestan_andractiv/img/bg04.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 441 KiB |
BIN
Ogestan_andractiv/img/bg05.jpg
Normal file
BIN
Ogestan_andractiv/img/bg05.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
BIN
Ogestan_andractiv/img/bg08.jpg
Normal file
BIN
Ogestan_andractiv/img/bg08.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
BIN
Ogestan_andractiv/img/celebracion.png
Normal file
BIN
Ogestan_andractiv/img/celebracion.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 275 KiB |
BIN
Ogestan_andractiv/img/foco1.bak.png
Normal file
BIN
Ogestan_andractiv/img/foco1.bak.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 33 KiB |
BIN
Ogestan_andractiv/img/foco1off.bak.png
Normal file
BIN
Ogestan_andractiv/img/foco1off.bak.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 28 KiB |
BIN
Ogestan_andractiv/img/foco2.bak.png
Normal file
BIN
Ogestan_andractiv/img/foco2.bak.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 29 KiB |
BIN
Ogestan_andractiv/img/foco2on.bak.png
Normal file
BIN
Ogestan_andractiv/img/foco2on.bak.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 33 KiB |
BIN
Ogestan_andractiv/img/icon_01.png
Normal file
BIN
Ogestan_andractiv/img/icon_01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
Ogestan_andractiv/img/icon_02.png
Normal file
BIN
Ogestan_andractiv/img/icon_02.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
Ogestan_andractiv/img/icon_03.png
Normal file
BIN
Ogestan_andractiv/img/icon_03.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
Ogestan_andractiv/img/icon_04.png
Normal file
BIN
Ogestan_andractiv/img/icon_04.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
Ogestan_andractiv/img/icon_05.png
Normal file
BIN
Ogestan_andractiv/img/icon_05.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
Ogestan_andractiv/img/icon_06.png
Normal file
BIN
Ogestan_andractiv/img/icon_06.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
Ogestan_andractiv/img/icon_07.png
Normal file
BIN
Ogestan_andractiv/img/icon_07.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
Ogestan_andractiv/img/icon_08.png
Normal file
BIN
Ogestan_andractiv/img/icon_08.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
Ogestan_andractiv/img/icon_09.png
Normal file
BIN
Ogestan_andractiv/img/icon_09.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
Ogestan_andractiv/img/icon_10.png
Normal file
BIN
Ogestan_andractiv/img/icon_10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
Ogestan_andractiv/img/li1.png
Normal file
BIN
Ogestan_andractiv/img/li1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 583 B |
BIN
Ogestan_andractiv/img/next.png
Normal file
BIN
Ogestan_andractiv/img/next.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 856 B |
BIN
Ogestan_andractiv/img/play-button.png
Normal file
BIN
Ogestan_andractiv/img/play-button.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
Ogestan_andractiv/img/prev.png
Normal file
BIN
Ogestan_andractiv/img/prev.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 831 B |
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user