250 lines
8.4 KiB
HTML
250 lines
8.4 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(24, 24, 24, 0.7);
|
|||
|
|
color: #fff;
|
|||
|
|
border: 2px 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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@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/bg02.jpg');
|
|||
|
|
background-attachment: fixed;
|
|||
|
|
background-size: cover;
|
|||
|
|
background-position: center;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
.btn-open-pop {
|
|||
|
|
width: 70px;
|
|||
|
|
height: 70px;
|
|||
|
|
line-height: 30px;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 40px;
|
|||
|
|
} */
|
|||
|
|
</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-12 col-md-10 text-white">
|
|||
|
|
<h2 class="fw-semibold">Beneficios Generales </h2>
|
|||
|
|
<p>Conoce los beneficios generales de <b>OGestan<sup>®</sup> Andractiv</b>. Descubre cómo mejora
|
|||
|
|
parámetros esenciales del semen y fortalece la fertilidad masculina.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row mb-5 animate__animated animate__fadeInLeft">
|
|||
|
|
<!-- Foco izquierda -->
|
|||
|
|
<div class="col-6 col-md-3 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-9">
|
|||
|
|
<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-end flex-md-row-reverse animate__animated animate__fadeInRight d-none"
|
|||
|
|
id="focoDerecha">
|
|||
|
|
<!-- Foco derecha -->
|
|||
|
|
<div class="col-6 col-md-3 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-9">
|
|||
|
|
<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>
|