244 lines
8.5 KiB
HTML
244 lines
8.5 KiB
HTML
<style>
|
||
.page-sco {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.foco-wrap {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.foco-img {
|
||
width: 100%;
|
||
height: auto;
|
||
object-fit: contain;
|
||
filter: drop-shadow(0 0 18px #fff8) drop-shadow(0 0 8px #ffe06633);
|
||
transition: filter 0.6s cubic-bezier(.68, -0.55, .27, 1.55), transform 0.35s;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.foco-prendido {
|
||
filter: drop-shadow(0 0 32px #fff) drop-shadow(0 0 16px #FBC518aa);
|
||
}
|
||
|
||
.foco-prendido:hover,
|
||
.foco-prendido:focus {
|
||
filter: drop-shadow(0 0 48px #fff) drop-shadow(0 0 28px #FBC518cc) brightness(1.2);
|
||
transform: scale(1.04) rotate(-2deg);
|
||
}
|
||
|
||
.foco-apagado {
|
||
filter: drop-shadow(0 0 6px #aaa2) grayscale(0.2);
|
||
}
|
||
|
||
.foco-apagado:hover,
|
||
.foco-apagado:focus,
|
||
.btn-open-pop:hover {
|
||
filter: drop-shadow(0 0 28px #fff) drop-shadow(0 0 14px #FBC51899);
|
||
transform: scale(1.04) rotate(2deg);
|
||
}
|
||
|
||
.foco-bubble {
|
||
background: rgba(55, 173, 255, 0.2);
|
||
color: #fff;
|
||
border: 0px solid #fff;
|
||
border-radius: 2rem;
|
||
padding: 1.5rem 2rem;
|
||
line-height: 1.45;
|
||
box-shadow: 0 6px 28px -8px #0008;
|
||
margin: 0.5rem 0;
|
||
position: relative;
|
||
transition: box-shadow 0.3s;
|
||
display: none;
|
||
/* Ocultar inicialmente */
|
||
}
|
||
|
||
.foco-bubble.show {
|
||
display: block;
|
||
}
|
||
|
||
.foco-bubble .resalta {
|
||
background: #FBC518;
|
||
color: #222;
|
||
border-radius: 0.33em;
|
||
padding: 0 0.25em;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* .text-yellow {
|
||
color: #ffc306 !important;
|
||
} */
|
||
|
||
@media (max-width: 767.98px) {
|
||
.foco-wrap {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.foco-img {
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.foco-bubble {
|
||
padding: 1rem 1.2rem;
|
||
}
|
||
}
|
||
|
||
.back0 {
|
||
background-image: url('img/bg04.jpg');
|
||
background-attachment: fixed;
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
</style>
|
||
|
||
<section class="page-sco back0 py-md-4 py-2">
|
||
<!-- <div class="container-fluid">
|
||
|
||
</div> -->
|
||
<div class="container-fluid px-0 my-md-5 my-xl-3 d-none" id="container3">
|
||
<div class="row justify-content-center">
|
||
<div class="col-11 col-md-10 text-white animate__animated animate__fadeInDown">
|
||
<h2 class="fw-semibold text-center text-blue-6">Beneficios Generales </h2>
|
||
<p>Conoce los beneficios generales de <b class="text-blue-6">OGestan<sup class="text-blue-6">®</sup> Andractiv</b>. Descubre cómo mejora
|
||
parámetros esenciales del semen y fortalece la fertilidad masculina.</p>
|
||
</div>
|
||
</div>
|
||
<div class="row align-items-center mb-md-2 animate__animated animate__fadeInLeft">
|
||
<!-- Foco izquierda -->
|
||
<div class="col-6 col-md-3 col-xl-2 d-flex justify-content-center mb-3 mb-md-0">
|
||
<div class="foco-wrap">
|
||
<img src="img/foco1.png" data-on="img/foco1.png" data-off="img/foco1off.png" alt="Foco encendido"
|
||
class="foco-img" id="focoIzquierda" />
|
||
</div>
|
||
</div>
|
||
<!-- Texto derecha -->
|
||
<div class="col-12 col-md-8 col-xl-6">
|
||
<div class="foco-bubble">
|
||
Esta combinación de <b class="text-yellow">Antioxidantes, Vitaminas, Minerales y Omega–3</b> está
|
||
diseñada para la mejora en la
|
||
cantidad, calidad y motilidad espermática.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row align-items-center justify-content-start flex-row-reverse animate__animated animate__fadeInRight d-none"
|
||
id="focoDerecha">
|
||
<!-- Foco derecha -->
|
||
<div class="col-6 col-md-3 col-xl-2 d-flex justify-content-center mb-3 mb-md-0">
|
||
<div class="foco-wrap">
|
||
<img src="img/foco2.png" data-on="img/foco2on.png" data-off="img/foco2.png" alt="Foco apagado"
|
||
class="foco-img foco-apagado" id="focoDerechaImg" />
|
||
</div>
|
||
</div>
|
||
<!-- Texto izquierda -->
|
||
<div class="col-12 col-md-8 col-xl-6">
|
||
<div class="foco-bubble">
|
||
<ul class="my-0">
|
||
<li>Mejora la <b class="text-yellow">motilidad</b> de los espermatozoides.</li>
|
||
<li>Mejora la <b class="text-yellow">morfología</b> del espermatozoide.</li>
|
||
<li>Mejora el <b class="text-yellow">recuento</b> de espermatozoides.</li>
|
||
<li>Mejora el <b class="text-yellow">volumen</b> del semen.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<script>
|
||
$(function () {
|
||
'use strict';
|
||
|
||
// Focos (usa IDs o clases únicas)
|
||
const $focoIzquierda = $("#focoIzquierda");
|
||
const $focoDerecha = $("#focoDerechaImg");
|
||
|
||
const audioh17 = CourseNav.createSound('audio/audioh17.mp3');
|
||
const audioh18 = CourseNav.createSound('audio/audioh18.mp3');
|
||
const audioh19 = CourseNav.createSound('audio/audioh19.mp3');
|
||
|
||
|
||
function setFocoState($img, state) {
|
||
// state = 'on' | 'off'
|
||
if (!$img.length) return;
|
||
const onSrc = $img.data("on");
|
||
const offSrc = $img.data("off");
|
||
if (state === 'on') {
|
||
$img.removeClass('foco-apagado').addClass('foco-prendido');
|
||
if (onSrc) $img.attr('src', onSrc);
|
||
} else {
|
||
$img.removeClass('foco-prendido').addClass('foco-apagado');
|
||
if (offSrc) $img.attr('src', offSrc);
|
||
}
|
||
}
|
||
|
||
|
||
setFocoState($focoIzquierda, 'off');
|
||
setFocoState($focoDerecha, 'off');
|
||
$focoIzquierda.removeClass('foco-prendido').addClass('foco-apagado');
|
||
$focoDerecha.removeClass('foco-prendido').addClass('foco-apagado');
|
||
|
||
// Cuando termina audioh17, muestra container3 y arranca audioh18
|
||
|
||
audioh17.on("play", function () {
|
||
$("#container3").removeClass("d-none");
|
||
$("#focoDerecha").removeClass("d-none");
|
||
});
|
||
|
||
audioh17.on("end", function () {
|
||
$('.foco-img').addClass('animate__animated animate__headShake animate__infinite');
|
||
});
|
||
|
||
// Funcionalidad de clic para el foco izquierdo
|
||
$focoIzquierda.on('click', function () {
|
||
// Mostrar su bubble correspondiente
|
||
$(this).closest('.row').find('.foco-bubble').addClass('show');
|
||
// Reproducir audioh18
|
||
CourseNav.audioController.stopAllSoundsAndPlay(audioh18);
|
||
// Cambiar estado visual
|
||
setFocoState($focoIzquierda, 'on');
|
||
// setFocoState($focoDerecha, 'off');
|
||
|
||
$(this).removeClass('animate__animated animate__headShake animate__infinite')
|
||
});
|
||
|
||
// Funcionalidad de clic para el foco derecho
|
||
$focoDerecha.on('click', function () {
|
||
// Mostrar su bubble correspondiente
|
||
$(this).closest('.row').find('.foco-bubble').addClass('show');
|
||
// Reproducir audioh19
|
||
CourseNav.audioController.stopAllSoundsAndPlay(audioh19);
|
||
// Cambiar estado visual
|
||
setFocoState($focoDerecha, 'on');
|
||
// setFocoState($focoIzquierda, 'off');
|
||
$(this).removeClass('animate__animated animate__heartBeat animate__infinite')
|
||
});
|
||
|
||
// Cuando terminan los audios, marcar como visitado si ambos bubbles están visibles
|
||
function checkCompletion() {
|
||
const bubble1Visible = $('.foco-bubble').eq(0).hasClass('show');
|
||
const bubble2Visible = $('.foco-bubble').eq(1).hasClass('show');
|
||
if (bubble1Visible && bubble2Visible) {
|
||
// Prende ambos focos al completar
|
||
// setFocoState($focoIzquierda, 'on');
|
||
// setFocoState($focoDerecha, 'on');
|
||
CourseNav.setSlideVisited();
|
||
}
|
||
}
|
||
|
||
audioh18.on("end", checkCompletion);
|
||
audioh19.on("end", checkCompletion);
|
||
|
||
CourseNav.audioController.stopAllSoundsAndPlay(audioh17);
|
||
|
||
});
|
||
</script> |