302 lines
10 KiB
HTML
302 lines
10 KiB
HTML
|
<style>
|
|||
|
|
.full-screen {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
grid-template-rows: max-content;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wrapper-card {
|
|||
|
|
display: inline-flex;
|
|||
|
|
border-radius: 30px;
|
|||
|
|
background-color: var(--bs-gray-100);
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
-webkit-transition: background-color 0.5s ease;
|
|||
|
|
-moz-transition: background-color 0.5s ease;
|
|||
|
|
-o-transition: background-color 0.5s ease;
|
|||
|
|
transition: background-color 0.5s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[data-popid="#pop-dexeed"]:hover {
|
|||
|
|
background-color: var(--bs-azul);
|
|||
|
|
color: #fff !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[data-popid="#pop-otros"]:hover {
|
|||
|
|
background-color: var(--bs-rosa);
|
|||
|
|
color: #fff !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.full-screen .middle {
|
|||
|
|
padding: 0;
|
|||
|
|
margin: 0;
|
|||
|
|
display: flex;
|
|||
|
|
flex: 1 1 auto;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
background-position: center;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: cover;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (min-width: 768px) {
|
|||
|
|
.full-screen {
|
|||
|
|
grid-template-columns: 1fr 1fr;
|
|||
|
|
grid-template-rows: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.eletxt {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
position: absolute;
|
|||
|
|
width: 100%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
z-index: 5;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<div class="w-100 page-sco 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>
|
|||
|
|
</div>
|
|||
|
|
<div class="middle bg-morado bg-opacity-10 animate__animated animate__fadeInLeft"
|
|||
|
|
style="background-image: url('img/r1.webp')">
|
|||
|
|
<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>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="middle bg-warning bg-opacity-10 animate__animated animate__fadeInRight"
|
|||
|
|
style="background-image: url('img/l1.webp')">
|
|||
|
|
<div data-popid="#pop-otros" data-backdrop="url(img/semilla.webp) no-repeat center / cover"
|
|||
|
|
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>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="d-none">
|
|||
|
|
<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">
|
|||
|
|
<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>Ácido fólico estándar.</li>
|
|||
|
|
<li>Alto costo.</li>
|
|||
|
|
<li>Limitada disponibilidad en puntos de venta.</li>
|
|||
|
|
<li>Sin promoción médica.</li>
|
|||
|
|
<li>Presentación en sobres.</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- <div class="w-100 text-center mt-4 pb-4">
|
|||
|
|
<div class="btn btn-mango text-white" onclick="Swal.close()">Cerrar</div>
|
|||
|
|
</div> -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<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">
|
|||
|
|
<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>
|
|||
|
|
<li>Sin respaldo o soporte científico.</li>
|
|||
|
|
<li>Calidad cuestionable.</li>
|
|||
|
|
<li>Altos costos de envío.</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- <div class="w-100 text-center mt-4 pb-4">
|
|||
|
|
<div class="btn btn-mango text-white" onclick="Swal.close()">Cerrar</div>
|
|||
|
|
</div> -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script>
|
|||
|
|
$(function () {
|
|||
|
|
const audioh20 = CourseNav.createSound("audio/audioh20.mp3");
|
|||
|
|
const audioh21 = CourseNav.createSound("audio/audioh21.mp3");
|
|||
|
|
const audioh22 = CourseNav.createSound("audio/audioh22.mp3");
|
|||
|
|
|
|||
|
|
CourseNav.audioController.stopAllSoundsAndPlay(audioh20);
|
|||
|
|
audioh20.on("end", () => {
|
|||
|
|
$(".wrapper-card").removeClass("disabled");
|
|||
|
|
});
|
|||
|
|
CourseNav.audioController.stopAllSoundsAndPlay(audioh20);
|
|||
|
|
|
|||
|
|
audioh22.on("end", function () {
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
audioh21.on("end", function () {
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$(".wrapper-card").click(function () {
|
|||
|
|
$(this).removeClass("animate__animated animate__pulse animate__infinite").addClass("visited");
|
|||
|
|
|
|||
|
|
const $element = $(this);
|
|||
|
|
|
|||
|
|
// Validación del HTML del pop-up
|
|||
|
|
const popId = $element.data("popid");
|
|||
|
|
const html = popId && $(popId).length ? $(popId).html() : "";
|
|||
|
|
|
|||
|
|
// Validación del audio
|
|||
|
|
let audio = null;
|
|||
|
|
const audioData = $element.data("audio");
|
|||
|
|
console.log(audioData);
|
|||
|
|
if (audioData) {
|
|||
|
|
try {
|
|||
|
|
audio = eval(audioData);
|
|||
|
|
CourseNav.audioController.stopAllSoundsAndPlay(audio);
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error(`Error al evaluar el audio: ${audioData}`, error);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Validación de la clase personalizada
|
|||
|
|
const customClass = $element.data("customclass") || "";
|
|||
|
|
|
|||
|
|
const backDrop = $element.data("backdrop") ? $element.data("backdrop") : true;
|
|||
|
|
// Validación de la función onclose
|
|||
|
|
let onclose = null;
|
|||
|
|
const oncloseData = $element.data("onclose");
|
|||
|
|
if (oncloseData) {
|
|||
|
|
try {
|
|||
|
|
onclose = eval(oncloseData);
|
|||
|
|
if (typeof onclose !== "function") {
|
|||
|
|
console.warn(`El valor de onclose no es una función: ${oncloseData}`);
|
|||
|
|
onclose = null;
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error(`Error al evaluar onclose: ${oncloseData}`, error);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// const showConfirmButton = CourseNav.isVisited();
|
|||
|
|
|
|||
|
|
Swal.fire({
|
|||
|
|
html: html,
|
|||
|
|
target: "body",
|
|||
|
|
customClass: `pop_class`,
|
|||
|
|
showConfirmButton: false,
|
|||
|
|
showCloseButton: false,
|
|||
|
|
closeButtonHtml: "",
|
|||
|
|
showDenyButton: false,
|
|||
|
|
showCancelButton: false,
|
|||
|
|
allowOutsideClick: false,
|
|||
|
|
allowEscapeKey: false,
|
|||
|
|
focusConfirm: false,
|
|||
|
|
confirmButtonText: "Cerrar",
|
|||
|
|
customClass: {
|
|||
|
|
popup: 'pop-type0 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'
|
|||
|
|
},
|
|||
|
|
// backdrop: backDrop,
|
|||
|
|
willOpen: () => {
|
|||
|
|
$('.swal2-actions').show();
|
|||
|
|
$('.swal2-confirm').show();
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
didOpen: null,
|
|||
|
|
didRender: null,
|
|||
|
|
willClose: () => {
|
|||
|
|
CourseNav.audioController.stopAudio();
|
|||
|
|
},
|
|||
|
|
didClose: onclose,
|
|||
|
|
didDestroy: null,
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function onAllSlidesVisited() {
|
|||
|
|
if ($(".wrapper-card").length === $(".wrapper-card.visited").length) {
|
|||
|
|
CourseNav.setSlideVisited();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
</script>
|