299 lines
10 KiB
HTML
299 lines
10 KiB
HTML
<style>
|
||
.back0 {
|
||
background: #0367d1;
|
||
/* background-color: #fff; */
|
||
}
|
||
|
||
/* 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: 0em;
|
||
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;
|
||
}
|
||
|
||
.bg-gra1 {
|
||
background: linear-gradient(180deg, #0064cf, #37adff);
|
||
}
|
||
|
||
.bg-gra2 {
|
||
background: linear-gradient(0deg, #8c8f91, #4d5d73);
|
||
}
|
||
|
||
.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: transparent;
|
||
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;
|
||
width: 75%;
|
||
}
|
||
|
||
[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;
|
||
}
|
||
|
||
.rounded-15 {
|
||
border-radius: 35px;
|
||
}
|
||
|
||
@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;
|
||
}
|
||
|
||
.pop-type0-new {
|
||
width: 80%;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1200px) {
|
||
.pop-type0-new {
|
||
width: 60%;
|
||
}
|
||
}
|
||
</style>
|
||
<div class="w-100 page-sco back0 h-100 p-0">
|
||
<div class="full-screen">
|
||
<div class="eletxt my-3 my-md-0">
|
||
<div class="w-100 text-center mt-md-4 mt-2 animate__animated animate__fadeInDown">
|
||
<h2 class="fw-semibold text-blue-4"><span class="bg-white border-3 rounded-15 border border-blue-7 py-2 px-4">Competidores</span></h2>
|
||
</div>
|
||
</div>
|
||
<div class="middle bg-gra1 animate__animated animate__fadeInLeft">
|
||
<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> -->
|
||
<img src="img/06.1.png" alt="Dexeed Logo" class="img-fluid">
|
||
</div>
|
||
</div>
|
||
<div class="middle bg-gra2 animate__animated animate__fadeInRight">
|
||
<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> -->
|
||
<img src="img/06.2.png" alt="Otros Logo" class="img-fluid">
|
||
</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 justify-content-center align-items-center">
|
||
<div class="col-12 col-md-10 col-xl-8">
|
||
<ul class="text-start custom-li">
|
||
<li>Comercializado por Corne.</li>
|
||
<li>8 componentes: antioxidantes, aminoácidos, vitaminas y zinc.</li>
|
||
<li><b class="text-orange-1">No contiene Omega-3.</b></li>
|
||
<li><b class="text-orange-1">No contiene Selenio.</b></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 class="col-12 col-md-5 col-xl-4">
|
||
<img src="img/06.1.png" class="img-fluid">
|
||
</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 align-items-center">
|
||
<div class="col-12 col-md-10 col-xl-8 text-center">
|
||
<ul class="text-start custom-li">
|
||
<li>Fabricantes <b class="text-orange-1"> no establecidos, ni reconocidos</b> en México.</li>
|
||
<li>Venta sólo por E-commerce y enviados desde el extranjero.</li>
|
||
<li><b class="text-orange-1">Sin permisos</b> por la autoridad mexicana.</li>
|
||
<li><b class="text-orange-1">Sin respaldo</b> o soporte científico.</li>
|
||
<li>Calidad cuestionable.</li>
|
||
<li>Altos costos de envío.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-12 col-md-5 col-xl-4">
|
||
<img src="img/06.2.png" class="img-fluid">
|
||
</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");
|
||
|
||
audioh20.on("end", () => {
|
||
$(".wrapper-card").removeClass("disabled");
|
||
});
|
||
setTimeout(() => {
|
||
CourseNav.audioController.stopAllSoundsAndPlay(audioh20);
|
||
}, 100);
|
||
|
||
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");
|
||
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-new bg-transparent p-0',
|
||
htmlContainer: 'html-pop-style p-3',
|
||
confirmButton: 'btn btn-begin border-3 border-blue-6 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: onAllSlidesVisited,
|
||
didDestroy: null,
|
||
});
|
||
});
|
||
|
||
function onAllSlidesVisited() {
|
||
if ($(".wrapper-card").length === $(".wrapper-card.visited").length) {
|
||
CourseNav.setSlideVisited();
|
||
}
|
||
}
|
||
});
|
||
</script> |