303 lines
13 KiB
HTML
303 lines
13 KiB
HTML
<style>
|
|
.back0 {
|
|
background-image: url("img/bg02a.jpg");
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.btn-pop {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.pop_lateral {
|
|
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 {
|
|
grid-template-rows: 1fr !important;
|
|
}
|
|
|
|
.pop_lateral {
|
|
grid-template-columns: 1fr !important;
|
|
grid-template-rows: 85% auto !important;
|
|
grid-row: 1 / 1 !important;
|
|
place-self: start !important;
|
|
width: 75% !important;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
<style></style>
|
|
<div class="page-sco back0 py-3 py-md-4">
|
|
<div class="container">
|
|
<div class="row justify-content-center align-items-center">
|
|
<div class="col-12 col-md-12">
|
|
<div class="row justify-content-center align-items-center">
|
|
<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 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-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">
|
|
<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-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">
|
|
<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-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">
|
|
<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-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">
|
|
<div class="d-flex flex-row justify-content-center align-items-center gap-2">
|
|
<img src="img/02.4.png" class="img-fluid">
|
|
<h2>Modo de empleo</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-none">
|
|
<div id="pop0">
|
|
<div class="container-fluid">
|
|
<div class="row justify-content-center align-items-center">
|
|
<div class="col-12">
|
|
<div class="row justify-content-center align-items-center">
|
|
<div class="col-12 col-md-12 col-xl-8 text-start text-white">
|
|
<h3 class="fw-semibold">Nombre comercial</h3>
|
|
<ul class="custom-li">
|
|
<li>OGestan® Andractiv</li>
|
|
<li>Suplemento alimenticio en cápsulas.</li>
|
|
<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-7 col-xl-5 mt-md-4">
|
|
<img src="img/02.5.png" class="img-fluid floating" alt="Nombre comercial">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="pop1">
|
|
<div class="container-fluid">
|
|
<div class="row justify-content-center align-items-center">
|
|
<div class="col-12">
|
|
<div class="row justify-content-center align-items-center">
|
|
<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">30 cápsulas</b> de 1.617gr.</p>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="pop2">
|
|
<div class="container-fluid">
|
|
<div class="row justify-content-center align-items-center">
|
|
<div class="col-12">
|
|
<div class="row justify-content-center align-items-center">
|
|
<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-7 col-xl-5 mt-md-2">
|
|
<img src="img/02.7.png" class="img-fluid floating" alt="Nombre comercial">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="pop3">
|
|
<div class="container-fluid">
|
|
<div class="row justify-content-center align-items-center">
|
|
<div class="col-12">
|
|
<div class="row justify-content-center align-items-center">
|
|
<div class="col-12 col-md-12 col-xl-10 text-start text-white">
|
|
<h3 class="fw-semibold">Modo de empleo</h3>
|
|
<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-7 col-xl-5">
|
|
<img src="img/02.8.png" class="img-fluid floating" alt="Nombre comercial">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
$(function () {
|
|
"use strict";
|
|
$('body').addClass('fake');
|
|
const audioh01 = CourseNav.createSound('audio/audioh01.mp3');
|
|
|
|
CourseNav.audioController.stopAllSoundsAndPlay(audioh01);
|
|
|
|
audioh01.on('play', function () {
|
|
|
|
$('.btn-pop').removeClass('disabled');
|
|
});
|
|
|
|
audioh01.on('end', function () {
|
|
$('.btn-pop').removeClass('disabled');
|
|
});
|
|
|
|
const audios = [
|
|
CourseNav.createSound('audio/audioh02.mp3'),
|
|
CourseNav.createSound('audio/audioh03.mp3'),
|
|
CourseNav.createSound('audio/audioh04.mp3'),
|
|
CourseNav.createSound('audio/audioh05.mp3')
|
|
];
|
|
|
|
$('.btn-pop').click(function (e) {
|
|
e.preventDefault();
|
|
const html = $($(this).data('popid')).html();
|
|
const audio = $(this).data('audio');
|
|
$(this).addClass('completed').removeClass('animate__animated animate__pulse animate__infinite');
|
|
Swal.fire({
|
|
html: html,
|
|
target: "body",
|
|
customClass: {
|
|
container: 'p-0 content-pop-lateral',
|
|
popup: 'pop_lateral',
|
|
htmlContainer: 'd-flex justify-content-center align-items-center',
|
|
actions: 'my-0',
|
|
confirmButton: 'btn btn-begin border-3 border-blue-6 text-white fw-bold animate__animated animate__pulse animate__infinite py-1 px-4'
|
|
},
|
|
confirmButtonText: "Cerrar",
|
|
showConfirmButton: true,
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
focusConfirm: false,
|
|
backdrop: "rgba(0, 40, 91, .80)",
|
|
grow: 'fullscreen',
|
|
showClass: {
|
|
popup: 'animate__animated animate__fadeInLeft animate__faster' // Animación dinámica (derecha/izquierda)
|
|
},
|
|
hideClass: {
|
|
popup: 'animate__animated animate__fadeOutLeft animate__faster' // Animación de salida coherente
|
|
},
|
|
didOpen: () => {
|
|
$('.swal2-confirm').show();
|
|
CourseNav.audioController.stopAllSoundsAndPlay(audios[audio]);
|
|
if (CourseNav.isVisited()) {
|
|
$('.swal2-confirm').show();
|
|
} else {
|
|
audios[audio].on('end', function () {
|
|
$('.swal2-confirm').show();
|
|
});
|
|
}
|
|
},
|
|
didClose: () => {
|
|
CourseNav.audioController.stopAudio();
|
|
isCompleted();
|
|
},
|
|
});
|
|
});
|
|
|
|
function isCompleted() {
|
|
if ($('.btn-pop').length == $('.btn-pop.completed').length) {
|
|
CourseNav.setSlideVisited();
|
|
}
|
|
}
|
|
|
|
|
|
});
|
|
</script> |