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

Drossagyn curso completo

Browse Source
This commit is contained in:
David Martinez
2025-12-14 20:53:27 -06:00
parent 79ecb530d2
commit 10937a66ef
327 changed files with 47184 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Drossagyn/contenido/02.html
+287
View File
@@ -0,0 +1,287 @@
<style>
.back0 {
background-image: url(img/bg02.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.back1 {
background-image: url(img/bg03.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hr-style {
border-top: 3px solid #fff;
opacity: 1;
}
.anim0 {
display: none;
}
.shadow-externo {
position: relative;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 50px;
background-image: url(img/02.2.png);
background-repeat: no-repeat;
background-position: 100% 100%;
background-size: 100% 100%;
justify-content: center;
align-items: center;
}
.cid0 .swiper-wrapper {
box-sizing: border-box;
}
.btn-slide-circ {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 100%;
background: #F2F2F2;
background: linear-gradient(to bottom, #F2F2F2 11%, #BDCCD4 100%);
outline: 4px solid rgba(14, 28, 98, .3);
cursor: pointer;
}
.circ_interno {
width: 34px;
height: 34px;
border-radius: 100%;
background: #dcdcdc;
}
.btn-slide-circ:hover .circ_interno {
background: #006EAB;
background: linear-gradient(to left, #006EAB 0%, #00928E 100%);
}
.btn-slide-circ.selected .circ_interno {
background: #006EAB;
background: linear-gradient(to right, #006EAB 0%, #00928E 100%);
}
.content-swiper {
min-width: 100%;
}
@media(min-width: 991px) {
.shadow-externo {
grid-template-columns: auto 50px;
grid-template-rows: 1fr;
gap: 12px;
}
.content-swiper {
height: max-content;
}
.cid0 {
height: clamp(350px, 40vh, 400px);
}
}
</style>
<div class='page-sco py-2 py-md-4 back0'>
<div class='container'>
<div class='row justify-content-center align-items-center'>
<div class='col-12 anim0'>
<div class='row justify-content-center align-items-center'>
<div class="col-7 col-md-4 text-center order-2 order-md-1 animate__animated animate__zoomIn">
<img src="img/02.0.png" class="img-fluid">
</div>
<div class="col-12 col-md-7 col-lg-6 order-1 order-md-2" data-sal="zoom-in">
<div class="position-relative d-inline-block">
<hr class="m-0 mb-2 hr-style">
<h2 class="text-secondary fw-bold">¿Qué es Drossagyn<sup>®</sup>?</h2>
<p class="mb-2 animate__animated animate__lightSpeedInRight animate__delay-2s">Drossagyn<sup>®</sup> es una crema vaginal a base de <strong>estriol</strong>, diseñada para aliviar y restaurar el
tejido afectado por la deficiencia estrogénica.</p>
<hr class="m-0 mb-2 hr-style">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="position-relative w-100 bg-white apa0 pt-3" style="display: none;">
<div class="container">
<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"
data-audio="audioh03"
>
<img src="img/nSec.png" class="img-fluid">
</div>
</div>
</div>
</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 anim1'>
<div class="row justify-content-center align-items-center">
<div class="col-12 col-lg-9">
<div class="shadow-externo rounded-3 px-4 py-5 p-lg-5">
<div class="position-relative content-swiper">
<div class="swiper cid0">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="row justify-content-center align-items-center h-100">
<div class="col-7 col-md-5 text-center mb-3 mb-md-0">
<img src="img/02.1.png" class="img-fluid">
</div>
<div class="col-12 col-md-7">
<h4 class="fw-bold text-green-1">Forma Farmacéutica y formulación</h4>
<p>Principio activo: <strong>Estriol</strong></p>
<p>Forma farmacéutica : <strong>Crema</strong></p>
<p>Formulación:</p>
<p>Cada 100 gramos contienen:</p>
<ul class="mb-0">
<li><strong>Estriol</strong> 50mg</li>
<li>Excipiente cbp 100g</li>
</ul>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row justify-content-center align-items-center h-100">
<div class="col-7 col-md-5 text-center mb-3 mb-md-0">
<img src="img/02.1.png" class="img-fluid">
</div>
<div class="col-12 col-md-7">
<h4 class="fw-bold text-green-1">Presentación Comercial</h4>
<p class="mb-0">Caja de cartón con un <strong>tubo de 50g</strong>, equivalente a <strong>3 meses</strong> de tratamiento con
aplicador e instructivo anexo.</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12 col-md-6 mb-2">
<h4 class="fw-bold text-green-1">Indicaciones</h4>
<p>En el tratamiento de <strong>alteraciones relacionadas con la deficiencia de estrógenos</strong>, tales como:</p>
<ul class="mb-0">
<li>Vaginitis</li>
<li>Vulvitis</li>
<li>Prurito vulvar y vaginal</li>
<li>Craurosis (atrofia progresiva crónica de la piel y mucosa vulvar)</li>
</ul>
</div>
<div class="col-12 col-md-6">
<ul class="mb-0">
<li>Secreciones</li>
<li>Úlceras por presión en pacientes que utilizan pesario</li>
<li>Facilitar la discriminación en los frotis vaginales difíciles de evaluar</li>
<li>Pre y post tratamiento de cirugía vaginal</li>
<li>Tratamiento coadyuvante en las infecciones vaginales</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="position-relative d-flex flex-lg-column justify-content-center align-items-center mx-auto gap-4 mt-3 mt-lg-0">
<div class="btn-slide-circ selected completed" data-slide="0">
<div class="circ_interno"></div>
</div>
<div class="btn-slide-circ animate__animated animate__pulse animate__infinite" data-slide="1">
<div class="circ_interno"></div>
</div>
<div class="btn-slide-circ animate__animated animate__pulse animate__infinite" data-slide="2">
<div class="circ_interno"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
"use strict";
const audioh02 = CourseNav.createSound('audio/audioh02.mp3');
const audioh03 = CourseNav.createSound('audio/audioh03.mp3');
const paths = [
"audio/audioh03.mp3",
"audio/audioh04.mp3",
"audio/audioh05.mp3"
];
let audios = [];
paths.forEach(function (element) {
audios.push(CourseNav.createSound(element));
});
CourseNav.audioController.stopAllSoundsAndPlay(audioh02);
audioh02.on('play', function () {
$('.anim0').show();
});
audioh02.on('end', function () {
$('.apa0').show();
//$('.btn-slide-circ').first().click();
});
$('.btn-next-section').click(function () {
$(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();
}
});
const mySwiper = new Swiper(".cid0", {
effect: "slide",
autoHeight: true,
slidesPerView: 1,
spaceBetween: 10,
direction: 'horizontal',
breakpoints: {
991: {
direction: 'vertical',
autoHeight: false
}
}
});
$('.btn-slide-circ').click(function () {
CourseNav.soundClick();
const slideIndex = $(this).data('slide');
mySwiper.slideTo(slideIndex);
$(this).removeClass('animate__animated animate__pulse animate__infinite');
$('.btn-slide-circ').removeClass('selected');
$(this).addClass('selected completed');
if ($('.btn-slide-circ.completed').length === $('.btn-slide-circ').length) {
CourseNav.setSlideVisited();
}
if (audios[slideIndex]) {
CourseNav.audioController.stopAllSoundsAndPlay(audios[slideIndex]);
}
});
});
</script>