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-10 13:30:26 -06:00
parent f9cdd739e3
commit 98f89dbf92
15 changed files with 285 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
OgestanPlus/contenido/03.html
+133 -18
View File
@@ -23,6 +23,40 @@
display: none;
}
.custom-switch {
width: 6em;
height: 3em;
background: #dd3352;
background: linear-gradient(to left, #dd3352 33%, #ff8c29 100%);
border-radius: 1.5em;
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
position: relative;
cursor: pointer;
transition: all 0.3s ease;
}
.custom-switch::before {
content: '';
position: absolute;
width: 2.4em;
height: 2.4em;
background: #fff;
border-radius: 50%;
top: 0.3em;
left: 0.3em;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.custom-switch.active {
background: #3ac0d5;
background: linear-gradient(to right, #3ac0d5 20%, #c1c902 100%);
}
.custom-switch.active::before {
transform: translateX(3em);
}
@media(min-width: 768px) {
.back0 {
background-position: 28% 100%;
@@ -58,14 +92,62 @@
</div>
</div>
</div>
<div class="sec_i1 py-2 py-md-4" style="display: none;">
<div class="container">
<div class="row justify-content-center">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-12 text-center">
<div class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite" data-sec="sec1">
<img src="img/nSec.png" class="img-fluid">
<div class="w-100 py-2 py-md-4 text-center sec_i1" style="display: none;">
<div class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite" data-sec="sec1" data-audio="audiom06">
<img src="img/nSec.png" class="img-fluid">
</div>
</div>
</div>
<div id="sec1" class='page-sco py-2 py-md-4 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="zoom-in">
<div class="custom-switch mx-auto animate__animated animate__pulse animate__infinite" id="customSwitch"></div>
</div>
<div class="col-12" data-sal="zoom-in">
<div id="carouselTxt" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active animate__animated animate__flipInX">
<div class="row justify-content-center align-items-center">
<div class="col-12 col-md-7 col-xl-6">
<div class="d-flex flex-column justify-content-center">
<h2 class="text-secondary fw-bold">Presentación Comercial</h2>
<p class="animate__animated animate__lightSpeedInLeft">OGestan<sup>®</sup> Plus se presenta en una <strong>caja con 30
cápsulas de 950 mg</strong>. Cada cápsula aporta
nutrientes esenciales, especialmente Omega 3, vitaminas y minerales.</p>
</div>
</div>
<div class="col-8 col-md-4 text-center">
<img src="img/03.0.png" class="img-fluid">
</div>
</div>
</div>
<div class="carousel-item animate__animated animate__flipInX">
<div class="row justify-content-center align-items-center">
<div class="col-12 col-md-7 col-lg-6 col-xl-5">
<div class="d-flex flex-column justify-content-center">
<h2 class="text-secondary fw-bold">¿Cómo se usa?</h2>
<p class="animate__animated animate__lightSpeedInLeft animate__delay-1s"><strong
class="text-primary">Indicación:</strong></p>
<p class="animate__animated animate__lightSpeedInLeft animate__delay-2s">Suplemento para embarazo y lactancia.</p>
<p class="animate__animated animate__bounceInLeft animate__delay-7s"><strong class="text-primary">Modo de
empleo:</strong></p>
<ul class="bul0 mb-0">
<li class="animate__animated animate__fadeInUp animate__delay-8s">Dosis: <strong>1 cápsula al día</strong> con algún
alimento.</li>
<li class="animate__animated animate__fadeInUp animate__delay-13s">Edad: <strong>A partir de 18
años</strong><strong>.</strong></li>
<li class="animate__animated animate__fadeInUp animate__delay-17s">No exceder la dosis recomendada.</li>
</ul>
</div>
</div>
<div class="col-8 col-md-4 text-center">
<img src="img/03.1.png" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
@@ -74,20 +156,21 @@
</div>
</div>
</div>
<div id="sec1" class='page-sco py-2 py-md-4 back1'>
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-12">
<div class="row justify-content-center"></div>
</div>
</div>
</div>
</div>
<script>
$(function () {
"use strict";
$('body').addClass('fake');
const audiom05 = CourseNav.createSound('audio/audiom05.mp3');
const audiom06 = CourseNav.createSound('audio/audiom06.mp3');
const paths = [
"audio/audiom06.mp3",
"audio/audiom07.mp3"
];
let audios = [];
paths.forEach(function (element) {
audios.push(CourseNav.createSound(element));
});
CourseNav.audioController.stopAllSoundsAndPlay(audiom05);
@@ -101,9 +184,41 @@
});
$('.btn-next-section').click(function(){
CourseNav.soundClick();
$(this).removeClass('animate__animated animate__pulse animate__infinite');
gotoSection($(this).data('sec'));
$(this).parent().hide();
const audioName = $(this).data('audio');
if (audioName) {
setTimeout(() => {
CourseNav.audioController.stopAllSoundsAndPlay(eval(audioName));
}, 500);
} else {
CourseNav.soundClick();
}
});
// Manejar click del switch personalizado
$('#customSwitch').click(function () {
CourseNav.soundClick();
$(this).toggleClass('active');
$(this).removeClass('animate__animated animate__pulse animate__infinite');
// Cambiar contenido y reproducir audio según el estado del switch
if ($(this).hasClass('active')) {
// Mostrar segundo item del carousel
$('.carousel-item').removeClass('active');
$('.carousel-item').eq(1).addClass('active');
CourseNav.audioController.stopAllSoundsAndPlay(audios[1]); // audiom07.mp3
} else {
// Mostrar primer item del carousel
$('.carousel-item').removeClass('active');
$('.carousel-item').eq(0).addClass('active');
CourseNav.audioController.stopAllSoundsAndPlay(audios[0]); // audiom06.mp3
}
CourseNav.setSlideVisited();
});
});