Update: Base para Andractiv
This commit is contained in:
@@ -0,0 +1,244 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user