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