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> |