288 lines
9.8 KiB
HTML
288 lines
9.8 KiB
HTML
<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>
|