Besins/Ogestan_Drossagyn_Papilocare
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
David Martinez
2025-12-11 00:25:09 -06:00
parent 26c6c32de5
commit 5cb73effe7
28 changed files with 643 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
OgestanPlus/contenido/06.html
+307
View File
@@ -0,0 +1,307 @@
<style>
.back0 {
background-image: url(img/bg06.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100%;
}
.back1 {
background-image: url(img/bg06.jpg);
background-repeat: no-repeat;
background-position: bottom center;
background-size: cover;
}
.anim0, .anim1 {
display: none;
}
.shadow-vx {
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
max-width: 100%;
}
.cid1 .swiper-wrapper {
box-sizing: border-box;
}
.btn-arrow {
max-width: 85px;
}
@media(min-width: 991px) {
.img-mx-w img {
max-width: 71%;
}
}
@media(min-width: 768px) {
.shadow-vx {
max-width: 76%;
}
.btn-arrow {
max-width: 75px;
}
}
</style>
<div id="sec0" class='page-sco py-2 py-md-0 back0'>
<div class='container'>
<div class='row justify-content-center align-items-center'>
<div class='col-12'>
<div class='row justify-content-center'>
<div class="col-12 mb-3" data-sal="slide-right">
<h2 class="text-secondary fw-bold">Competidores</h2>
<p class="mb-0 animate__animated animate__lightSpeedInLeft animate__delay-1s">En el mercado de suplementos para maternidad existen varias marcas con características y formulaciones distintas.
Aunque cada una ofrece beneficios, <strong>ninguna presenta la combinación completa de nutrientes que ofrece
OGestan<sup>®</sup> Plus.</strong></p>
</div>
<div class="col-12 mb-3">
<div class="row justify-content-center">
<div class="col-5 col-md-4 img-mx-w text-center mb-3" data-sal="zoom-in" data-sal-delay="100">
<img src="img/06.0.png" class="img-fluid">
</div>
<div class="col-5 col-md-4 img-mx-w text-center mb-3" data-sal="zoom-in" data-sal-delay="300">
<img src="img/06.1.png" class="img-fluid">
</div>
<div class="col-5 col-md-4 img-mx-w text-center mb-3" data-sal="zoom-in" data-sal-delay="500">
<img src="img/06.2.png" class="img-fluid">
</div>
<div class="col-5 col-md-4 img-mx-w text-center mb-3 mb-md-0" data-sal="zoom-in" data-sal-delay="600">
<img src="img/06.3.png" class="img-fluid">
</div>
<div class="col-5 col-md-4 img-mx-w text-center" data-sal="zoom-in" data-sal-delay="800">
<img src="img/06.4.png" class="img-fluid">
</div>
<div class="col-5 col-md-4 img-mx-w text-center" data-sal="zoom-in" data-sal-delay="1000">
<img src="img/06.5.png" class="img-fluid">
</div>
</div>
</div>
<div class="col-12 text-center ins0" style="display: none;">
<div class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite" data-sec="sec1" data-audio="audiom14">
<img src="img/nSec.png" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="sec1" class="page-sco back1" style="display: none;">
<div class='container'>
<div class='row justify-content-center align-items-center'>
<div class='col-12'>
<div class="row justify-content-center">
<div class="col-12 text-center mb-3" data-sal="slide-left">
<h2 class="text-orange-2 fw-bold">No olvidemos…</h2>
</div>
<div class="col-12 col-lg-9" data-sal="flip-down">
<div class="d-flex flex-wrap flex-md-row justify-content-center align-items-center gap-2">
<div class="btn-prev btn-arrow d-inline-block order-2 order-md-1">
<img src="img/06.6.png" class="img-fluid">
</div>
<div class="position-relative shadow-vx flex-fill order-1 order-md-2 rounded-3">
<div class="swiper cid1">
<div class="swiper-wrapper">
<div class="swiper-slide visited completed">
<div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
<div class="row justify-content-center align-items-center">
<div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
<ol class="mb-0">
<li><strong>Número</strong> de componentes.</li>
<li>Cantidad de <strong>Omega 3.</strong></li>
<li>Contenido de <strong>Vitamina D.</strong></li>
<li>Diferenciación del hierro (hierro <strong>bisglicinato</strong>).</li>
</ol>
</div>
<div class="col-7 col-md-4 text-center">
<img src="img/06.8.png" class="img-fluid">
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
<div class="row justify-content-center align-items-center">
<div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
<p class="mb-0">Destacar que <strong>Regenesis</strong><strong> Max (RM) no contiene hierro </strong><strong>bisglicinato</strong>
(solo sulfato ferroso), y un <strong>mínimo de Vitamina D.</strong></p>
</div>
<div class="col-7 col-md-4 text-center">
<img src="img/06.9.png" class="img-fluid">
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
<div class="row justify-content-center align-items-center">
<div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
<p class="mb-0">Destacar la <strong>menor cantidad de Omega 3 en </strong><strong>Previta</strong> <strong>Mom</strong><strong>.</strong></p>
</div>
<div class="col-7 col-md-4 text-center">
<img src="img/06.10.png" class="img-fluid">
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
<div class="row justify-content-center align-items-center">
<div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
<p class="mb-0">Elevit 2 Omegas <strong>no cumple con las cantidades requeridas de ácido fólico</strong>.</p>
</div>
<div class="col-7 col-md-4 text-center">
<img src="img/06.11.png" class="img-fluid">
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
<div class="row justify-content-center align-items-center">
<div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
<p class="mb-0">Materplus tiene <strong>una fórmula muy limitada en elementos.</strong></p>
</div>
<div class="col-7 col-md-4 text-center">
<img src="img/06.12.png" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="btn-next btn-arrow rounded-circle d-inline-block order-2 order-md-3 animate__animated animate__pulse animate__infinite">
<img src="img/06.7.png" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
"use strict";
const audiom13 = CourseNav.createSound('audio/audiom13.mp3');
const audiom14 = CourseNav.createSound('audio/audiom14.mp3');
CourseNav.audioController.stopAllSoundsAndPlay(audiom13);
audiom13.on('play', function () {
$('.anim0').show();
});
audiom13.on('end', function () {
$('.ins0').show();
});
const paths = [
"audio/audiom14.mp3",
"audio/audiom15.mp3",
"audio/audiom16.mp3",
"audio/audiom17.mp3",
"audio/audiom18.mp3"
];
let audios = [];
paths.forEach(function (element) {
audios.push(CourseNav.createSound(element));
});
let sec1Shown = false;
// Asegurar que sec0 esté visible al inicio
$('#sec0').show();
$('#sec1').hide();
let isScrolling = false;
$('.btn-next-section').click(function () {
if (isScrolling) return;
$(this).removeClass('animate__animated animate__pulse animate__infinite');
sec1Shown = true;
$('.ins0').hide();
const currentScroll = $(window).scrollTop();
const windowHeight = $(window).height();
const documentHeight = $(document).height();
const scrollNeeded = documentHeight - windowHeight;
if (currentScroll < scrollNeeded && scrollNeeded > 0) {
isScrolling = true;
$('html, body').animate({
scrollTop: scrollNeeded
}, 600, () => {
isScrolling = false;
setTimeout(() => {
gotoSection($(this).data('sec'));
}, 200);
});
} else {
gotoSection($(this).data('sec'));
}
const audioName = $(this).data('audio');
if (audioName) {
setTimeout(() => {
CourseNav.audioController.stopAllSoundsAndPlay(eval(audioName));
}, isScrolling ? 800 : 500);
} else {
CourseNav.soundClick();
}
});
const mySwiper = new Swiper(".cid1", {
effect: "slide",
autoHeight: true,
slidesPerView: 1, // Mobile: 1 slide a la vez
spaceBetween: 20,
navigation: {
nextEl: '.btn-next',
prevEl: '.btn-prev',
},
on: {
init: function () {
// Ocultar prev en el primer slide
$('.btn-prev').css('opacity', '.5').addClass('disabled');
},
slideChange: function () {
const activeIndex = this.activeIndex;
const slides = this.slides;
const totalSlides = this.slides.length;
// Controlar opacidad y clase disabled de botones
if (activeIndex === 0) {
$('.btn-prev').css('opacity', '.5').addClass('disabled');
} else {
$('.btn-prev').css('opacity', '1').removeClass('disabled');
}
if (activeIndex === totalSlides - 1) {
$('.btn-next').css('opacity', '.5').addClass('disabled');
} else {
$('.btn-next').css('opacity', '1').removeClass('disabled');
}
slides[activeIndex].classList.add("visited", "completed");
const completedSlides = $(".cid1 .swiper-slide.completed").length;
if (completedSlides == totalSlides) {
$('.btn-next').removeClass('animate__animated animate__pulse animate__infinite');
CourseNav.setSlideVisited();
}
CourseNav.audioController.stopAllSoundsAndPlay(audios[activeIndex]);
}
}
});
});
</script>