244 lines
10 KiB
HTML
244 lines
10 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, #003d53, #005a6f);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
@media(min-width: 768px) {
|
||
|
|
.content-pop-lateral {
|
||
|
|
grid-template-rows: 1fr !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pop_lateral {
|
||
|
|
grid-template-columns: 1fr !important;
|
||
|
|
grid-template-rows: 75% 25% !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">
|
||
|
|
<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>.
|
||
|
|
Aquí
|
||
|
|
podrás revisar su <b>nombre comercial</b>, su <b>presentación</b>, su <b>indicación</b> y su
|
||
|
|
<b>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"
|
||
|
|
data-popid="#pop0" data-audio="0">
|
||
|
|
<div class="card-body">
|
||
|
|
<h3>Nombre comercial</h3>
|
||
|
|
</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"
|
||
|
|
data-popid="#pop1" data-audio="1">
|
||
|
|
<div class="card-body">
|
||
|
|
<h3>Presentación</h3>
|
||
|
|
</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"
|
||
|
|
data-popid="#pop2" data-audio="2">
|
||
|
|
<div class="card-body">
|
||
|
|
<h3>Indicación</h3>
|
||
|
|
</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"
|
||
|
|
data-popid="#pop3" data-audio="3">
|
||
|
|
<div class="card-body">
|
||
|
|
<h3>Modo de empleo</h3>
|
||
|
|
</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>
|
||
|
|
<li>OGestan® Andractiv</li>
|
||
|
|
<li>Suplemento alimenticio en cápsulas.</li>
|
||
|
|
<li>Combinación de Antioxidantes, Vitaminas, Minerales y Omega-3 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>
|
||
|
|
</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 h3">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>
|
||
|
|
</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-8 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>
|
||
|
|
</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-8 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>
|
||
|
|
</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>
|
||
|
|
</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 bg-primary text-white fw-semibold animate__animated animate__pulse animate__infinite'
|
||
|
|
},
|
||
|
|
confirmButtonText: "Cerrar",
|
||
|
|
showConfirmButton: true,
|
||
|
|
allowOutsideClick: false,
|
||
|
|
allowEscapeKey: false,
|
||
|
|
focusConfirm: false,
|
||
|
|
backdrop: "rgba(65, 60, 60, .95)",
|
||
|
|
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>
|