Drossagyn curso completo
This commit is contained in:
@@ -0,0 +1,238 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url(img/bg05.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#svg-container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#svg-container svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.btn_svg {
|
||||
cursor: pointer;
|
||||
transform-box: content-box;
|
||||
/* transform-origin: center !important; */
|
||||
}
|
||||
|
||||
.anim0 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.xactive {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.texts {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</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-12 mb-3 text-center animate__animated animate__zoomIn">
|
||||
<h2 class="fw-bold text-secondary mb-0">Dosis y vía de administración</h2>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-5 animate__animated animate__zoomIn">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-3 col-md-5 text-center">
|
||||
<img src="img/04.0.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-5 col-md-7 col-lg-6 col-xl-5 text-center">
|
||||
<div id="svg-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="col-hide" class="col-12 col-md-6 col-lg-7 d-none d-md-block animate__animated animate__zoomIn">
|
||||
<div id="txt1" class="texts position-relative w-100">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-7 col-md-9 text-center mb-3">
|
||||
<img src="img/04.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<p class="mb-0">Vía de administración: <strong>Vaginal</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="txt2" class="texts position-relative w-100">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center text-md-start mb-3">
|
||||
<p class="fw-bold">Dosificación</p>
|
||||
<p class="mb-0">1 dosis = 1 gr de crema = 0.5 mg de Estriol</p>
|
||||
</div>
|
||||
<div class="col-12 mb-3">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-6 text-center">
|
||||
<img src="img/04.2.png" class="img-fluid mb-2"><br>
|
||||
<p class="mb-0">1gr de crema x las noches.</p>
|
||||
</div>
|
||||
<div class="col-6 text-center">
|
||||
<img src="img/04.3.png" class="img-fluid mb-2"><br>
|
||||
<p class="mb-0">1gr de crema 2 a 3 veces x semana, hasta que los síntomas desaparezcan.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center text-md-start">
|
||||
<p class="mb-0">Esta dosificación puede mantenerse <strong>hasta un máximo de </strong><strong>3 meses.</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="txt3" class="texts position-relative w-100">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center text-md-start mb-3">
|
||||
<p class="fw-bold">Tratamiento a largo plazo</p>
|
||||
<ul class="mb-0 text-start">
|
||||
<li>Tras 2 a 3 meses de uso continuo, realizar un <strong>descanso de 4 semanas</strong>.</li>
|
||||
<li>Después de la pausa, evaluar si es necesario reiniciar el tratamiento.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-7 col-md-12 text-center text-md-end">
|
||||
<img src="img/04.4.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('body').addClass('fake');
|
||||
|
||||
const audioh06 = CourseNav.createSound('audio/audioh06.mp3');
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audioh06);
|
||||
|
||||
audioh06.on('play', function () {
|
||||
loadSVG();
|
||||
$('.anim0').show();
|
||||
$('#text1').show();
|
||||
});
|
||||
|
||||
const paths = [
|
||||
"audio/audioh06.mp3",
|
||||
"audio/audioh07.mp3",
|
||||
"audio/audioh08.mp3"
|
||||
];
|
||||
let audios = [];
|
||||
paths.forEach(function (element) {
|
||||
audios.push(CourseNav.createSound(element));
|
||||
});
|
||||
|
||||
// Function to load the SVG file and insert it into the container
|
||||
function loadSVG() {
|
||||
$.get('img/04.5.svg', function (data) {
|
||||
var svg = $(data).find('svg');
|
||||
$('#svg-container').html(svg);
|
||||
// Remove width and height attributes to make SVG responsive
|
||||
svg.removeAttr('width').removeAttr('height');
|
||||
attachClickHandlers(); // Attach click handlers after SVG is loaded
|
||||
animateButtons();
|
||||
// Enable first button after SVG is loaded
|
||||
setTimeout(() => {
|
||||
$('#xbtn0').addClass('completed').removeClass('disabled animate__animated animate__pulse animate__infinite');
|
||||
$('#xbtn0').find('.xnormal').hide();
|
||||
$('#xbtn0').find('.xactive').show();
|
||||
$('#txt1').show();
|
||||
$("#xbtn1").removeClass('disabled');
|
||||
// Abrir el primer popup automáticamente en móviles
|
||||
if ($("#col-hide").css('display') == 'none') {
|
||||
mobilePop('#txt1');
|
||||
}
|
||||
}, 100);
|
||||
}, 'xml');
|
||||
}
|
||||
|
||||
// Function to handle click events
|
||||
function handleButtonClick(buttonId, textId, audioIndex, nextButtonId) {
|
||||
$(buttonId).addClass("animate__animated animate__pulse animate__infinite btn_svg disabled");
|
||||
$(buttonId).click(function () {
|
||||
CourseNav.soundClick();
|
||||
// Detener todas las animaciones activas
|
||||
gsap.globalTimeline.clear();
|
||||
// Hide all text sections
|
||||
$('.texts').hide();
|
||||
// Show the selected text section
|
||||
gsap.fromTo(textId, { opacity: 0, y: 20 }, { opacity: 1, y: 0, duration: 0.5, display: 'block' });
|
||||
$(buttonId).removeClass('animate__animated animate__pulse animate__infinite').addClass('completed');
|
||||
$('.xactive').hide();
|
||||
$('.xnormal').show();
|
||||
$(buttonId).find('.xnormal').hide();
|
||||
$(buttonId).find('.xactive').show();
|
||||
// Play the corresponding audio
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios[audioIndex]);
|
||||
|
||||
if ($("#col-hide").css('display') == 'none') {
|
||||
mobilePop(textId);
|
||||
}
|
||||
|
||||
// Habilitar el siguiente botón después de hacer clic
|
||||
if (nextButtonId) {
|
||||
$(nextButtonId).removeClass('disabled');
|
||||
}
|
||||
|
||||
objectIsCompleted();
|
||||
});
|
||||
}
|
||||
|
||||
function objectIsCompleted() {
|
||||
if ($(".btn_svg").length === $(".btn_svg.completed").length) {
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
}
|
||||
|
||||
// Attach click handlers to SVG buttons
|
||||
function attachClickHandlers() {
|
||||
handleButtonClick('#xbtn0', '#txt1', 0, '#xbtn1');
|
||||
handleButtonClick('#xbtn1', '#txt2', 1, '#xbtn2');
|
||||
handleButtonClick('#xbtn2', '#txt3', 2);
|
||||
// Add more buttons as needed
|
||||
}
|
||||
|
||||
function mobilePop(textId) {
|
||||
Swal.fire({
|
||||
html: $(textId).html(),
|
||||
target: 'body',
|
||||
customClass: {
|
||||
popup: 'pop-type0 bg-transparent p-0',
|
||||
htmlContainer: 'html-pop-style p-3',
|
||||
confirmButton: 'btn btn-begin pop-button-confirm text-white fw-bold animate__animated animate__pulse animate__infinite p-2'
|
||||
},
|
||||
confirmButtonText: '<div class="inside-card px-4 py-2">Cerrar</div>',
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
focusConfirm: false,
|
||||
backdrop: "rgba(14, 28, 98, .8)",
|
||||
heightAuto: false,
|
||||
willClose: () => { CourseNav.audioController.stopAudio(); }
|
||||
});
|
||||
}
|
||||
|
||||
// Function to animate buttons with GSAP
|
||||
function animateButtons() {
|
||||
const buttons = ['#xbtn0', '#xbtn1', '#xbtn2'];
|
||||
buttons.forEach((button, index) => {
|
||||
gsap.from(button, {
|
||||
opacity: 0,
|
||||
y: -20,
|
||||
duration: 0.5,
|
||||
delay: index * 0.2
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user