aplicacion de cambios

This commit is contained in:
2026-09-15 02:55:51 -06:00
parent d73a046a57
commit a809375946
36 changed files with 1181 additions and 398 deletions
+68 -22
View File
@@ -20,9 +20,8 @@
.grid-custom {
position: relative;
width: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
@@ -41,24 +40,35 @@
<div class="row justify-content-center justify-content-md-end">
<div class="col-12 col-md-7">
<div class="row justify-content-center">
<div class="col-12 mb-3 text-center" data-sal="zoom-in">
<div
class="col-12 mb-3 text-center"
data-sal="zoom-in"
>
<div class="d-inline-block position-relative">
<hr class="m-0 mb-2 opacity-100 border-top-2 text-white">
<h1 class="text-primary fw-bolder">¡Bienvenido a OGestan<sup>®</sup> Pré!</h1>
<hr class="m-0 mt-2 opacity-100 border-top-2 text-white">
</div>
</div>
<div class="col-12 text-center mb-3 mb-md-0" data-sal="flip-up">
<div
class="col-12 text-center mb-3 mb-md-0"
data-sal="flip-up"
>
<div class="w-100 position-relative">
<div id="wrap-comenzar"
<div
id="wrap-comenzar"
data-sec="sec1"
class="btn btn-begin text-white fw-bold animate__animated animate__pulse animate__infinite px-3 py-1">
class="btn btn-begin text-white fw-bold animate__animated animate__pulse animate__infinite px-3 py-1"
>
Comenzar
</div>
</div>
</div>
<div class="col-7 text-center d-block d-md-none">
<img src="img/01.0.png" class="img-fluid">
<img
src="img/01.0.png"
class="img-fluid"
>
</div>
</div>
</div>
@@ -67,16 +77,27 @@
</div>
</div>
</div>
<div id="sec1" class="page-sco back1 py-3 py-md-4" style="display: none;">
<div
id="sec1"
class="page-sco back1 py-3 py-md-4"
style="display: none;"
>
<div class="grid-custom flex-fill">
<div class="part0 w-100 d-flex flex-column justify-content-center h-100 align-items-center py-3 py-md-4" style="background-color: rgba(201, 124, 187, .5);">
<div
class="part0 w-100 d-flex flex-column justify-content-center h-100 align-items-center py-3 py-md-4"
style="background-color: rgba(201, 124, 187, .5);"
>
<div class="container">
<div class="row justify-content-center">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-12 col-md-10 col-lg-9" data-sal="slide-right">
<div
class="col-12 col-md-10 col-lg-9"
data-sal="slide-right"
>
<div class="card bg-transparent border-0 rounded-0 shadow-none py-2 px-0 text-secondary">
<p class="mb-0">Gracias por formar parte de esta sesión dedicada a <strong>OGestan<sup>® </sup>Pré</strong>, una herramienta esencial
<p class="mb-0">Gracias por formar parte de esta sesión dedicada a <strong>OGestan<sup>®
</sup>Pré</strong>, una herramienta esencial
para acompañar a las mujeres en el momento más importante de su vida reproductiva.</p>
</div>
</div>
@@ -85,20 +106,44 @@
</div>
</div>
</div>
<div class="part1 w-100 d-flex flex-column justify-content-center align-items-center h-100">
<div class="w-100 position-relative mt-3 img-sop animate__animated animate__zoomIn">
<div class="row justify-content-center">
<div class="col-12 text-center">
<img
src="img/03.8.png"
class="img-fluid"
>
</div>
</div>
</div>
<div
class="part1 w-100 flex-column justify-content-center align-items-center h-100"
style="flex: 1;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 apa0" style="display: none;">
<div class="col-12 apa0">
<div class="row justify-content-center align-items-center">
<div class="col-7 col-md-5 col-xl-4 text-center order-2 order-md-1" data-sal="zoom-in">
<img src="img/01.1.png" class="img-fluid">
<div
class="col-7 col-md-5 col-xl-4 text-center order-2 order-md-1"
data-sal="zoom-in"
>
<img
src="img/01.1.png"
class="img-fluid"
>
</div>
<div class="col-12 col-md-7 col-xl-5 order-1 order-md-2 mb-3 mb-md-0" data-sal="flip-left">
<div
class="col-12 col-md-7 col-xl-5 order-1 order-md-2 mb-3 mb-md-0"
data-sal="flip-left"
>
<h2 class="text-purple-1 fw-medium">¿Qué aprenderás hoy?</h2>
<p class="mb-0">Al finalizar este módulo, <strong class="text-blue-1">podrás identificar y explicar</strong> los elementos fundamentales de
OGestan<sup>®</sup> Pré, incluyendo qué es, a quién está dirigido, cuáles son sus beneficios y cómo se diferencia de
<p class="mb-0">Al finalizar este módulo, <strong class="text-blue-1">podrás identificar y
explicar</strong> los elementos fundamentales de
OGestan<sup>®</sup> Pré, incluyendo qué es, a quién está dirigido, cuáles son sus
beneficios y cómo se diferencia de
la competencia, para comunicar su valor clínico y comercial de manera más efectiva.</p>
</div>
</div>
@@ -117,12 +162,13 @@
const audiom00 = CourseNav.createSound('audio/audiom00.mp3');
const audiom01 = CourseNav.createSound('audio/audiom01.mp3');
audiom00.on('end',function(){
audiom00.on('end', function () {
CourseNav.audioController.stopAllSoundsAndPlay(audiom01);
$('.apa0').show();
$(".img-sop").hide();
$('.part1').css("display", "flex");
});
audiom01.on('end',function(){
audiom01.on('end', function () {
CourseNav.setSlideVisited();
});