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

Last cc

Browse Source
This commit is contained in:
Salvador Martínez Gaytán
2026-09-24 11:41:29 -06:00
parent a954e655da
commit 55f2822ef5
43 changed files with 665 additions and 639 deletions
Download Patch File Download Diff File Expand all files Collapse all files
OgestanPre/contenido/01.html
+51 -80
View File
@@ -14,7 +14,7 @@
}
.card-back0 {
background-color: rgba(189, 204, 212, .3);
background-color: rgba(189, 204, 212, 0.3);
}
.grid-custom {
@@ -26,7 +26,7 @@
align-items: center;
}
@media(min-width: 768px) {
@media (min-width: 768px) {
.back0 {
background-image: url(img/bg00.jpg);
background-position: 33% 88%;
@@ -40,35 +40,24 @@
<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">
<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"
data-sec="sec1"
class="btn btn-begin text-white fw-bold animate__animated animate__pulse animate__infinite px-3 py-1"
>
Comenzar
</div>
<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">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>
@@ -77,28 +66,24 @@
</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 img-sop" style="background-color: rgba(201, 124, 187, 0.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
para acompañar a las mujeres en el momento más importante de su vida reproductiva.</p>
<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>
</div>
@@ -106,45 +91,33 @@
</div>
</div>
</div>
<div class="w-100 position-relative mt-3 img-sop animate__animated animate__zoomIn">
<div class="w-100 position-relative mt-3 animate__animated animate__zoomIn img-sop">
<div class="row justify-content-center">
<div class="col-12 text-center">
<img
src="img/03.8.png"
class="img-fluid"
>
<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="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">
<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
la competencia, para comunicar su valor clínico y comercial de manera más efectiva.</p>
<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>
</div>
@@ -159,16 +132,16 @@
$(function () {
"use strict";
const audiom00 = CourseNav.createSound('audio/audiom00.mp3');
const audiom01 = CourseNav.createSound('audio/audiom01.mp3');
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);
$(".img-sop").hide();
$('.part1').css("display", "flex");
$(".img-sop").hide().addClass('d-none');
$(".part1").css("display", "flex");
});
audiom01.on('end', function () {
audiom01.on("end", function () {
CourseNav.setSlideVisited();
});
@@ -185,12 +158,11 @@
$("#wrap-comenzar").click(function (e) {
e.preventDefault();
CourseNav.soundClick();
gotoSection($(this).data('sec'));
gotoSection($(this).data("sec"));
CourseNav.audioController.stopAllSoundsAndPlay(audiom00);
$(this).removeClass('animate__animated animate__pulse animate__infinite');
$(this).removeClass("animate__animated animate__pulse animate__infinite");
});
/**
* Inicia un tour interactivo que guía al usuario a través de las funcionalidades del curso.
* Utiliza la biblioteca driver.js para crear el tour y define acciones específicas para
@@ -248,8 +220,8 @@
align: "start",
},
onHighlightStarted: () => {
if (!$('.toggle-icon').first().find('i').hasClass('fa-square-chevron-down')) {
$('.toggle-icon').first().click();
if (!$(".toggle-icon").first().find("i").hasClass("fa-square-chevron-down")) {
$(".toggle-icon").first().click();
}
CourseNav.openSidebar();
},
@@ -261,8 +233,8 @@
description: "Esta barra muestra tu progreso en el curso.",
},
onHighlightStarted: () => {
if (!$('.toggle-icon').first().find('i').hasClass('fa-square-chevron-down')) {
$('.toggle-icon').first().click();
if (!$(".toggle-icon").first().find("i").hasClass("fa-square-chevron-down")) {
$(".toggle-icon").first().click();
}
CourseNav.openSidebar();
},
@@ -348,6 +320,5 @@
// Iniciar el tour
driverObj.drive();
}
});
</script>
OgestanPre/contenido/04.html
+1 -1
View File
@@ -84,7 +84,7 @@
<div class="col-12 text-center animate__animated animate__rotateInDownRight">
<h2 class="my-0 text-pink-1 fw-bold">Información Nutricional</h2>
</div>
<div class="col-12 col-md-10 col-lg-6 animate__animated animate__zoomIn my-3">
<div class="col-12 col-md-10 col-lg-8 animate__animated animate__zoomIn my-3">
<div class="w-100">
<div class="ratio ratio-16x9">
<video id="video" class="embed-responsive-item" controls autoplay poster="video/poster.jpg">
OgestanPre/contenido/05.html
+37 -1
View File
@@ -31,6 +31,32 @@
display: none;
}
.grid-competidores {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
justify-items: center;
margin-top: 12px;
}
.grid-competidores img {
max-width: 100%;
max-height: 200px;
object-fit: contain;
}
@media (max-width: 767px) {
.grid-competidores {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 480px) {
.grid-competidores {
grid-template-columns: repeat(2, 1fr);
}
}
@media(min-width: 991px) {
.shadow-vx {
max-width: 76%;
@@ -44,6 +70,15 @@
<div class='row justify-content-center'>
<div class="col-12 mb-3 text-center apa0 animate__animated animate__fadeInDown">
<h2 class="fw-bold text-blue-1">Competidores</h2>
<div class="grid-competidores">
<img src="img/05.0.png" class="img-fluid">
<img src="img/05.1.png" class="img-fluid">
<img src="img/05.2.png" class="img-fluid">
<img src="img/05.3.png" class="img-fluid">
<img src="img/05.4.png" class="img-fluid">
<img src="img/05.5.png" class="img-fluid">
<img src="img/05.6.png" class="img-fluid">
</div>
</div>
<div class="col-12 apa1 animate__animated animate__zoomIn">
<div class="d-flex flex-wrap flex-md-row justify-content-center align-items-center gap-2">
@@ -215,7 +250,7 @@
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
<h3 class="fw-medium text-purple-1">Nocele</h3>
<ul class="mb-0 bul1">
<li>Solo tiene <strong class="text-secondary">ácido folico</strong></li>
<li>Solo tiene <strong class="text-secondary">ácido folico</strong> (su fórmula está basada únicamente en L-metilfolato)</li>
<!-- <li>Basado principalmente en <strong class="text-secondary">ácido fólico y
nutrimentos básicos</strong>.</li> -->
<!-- <li>Su fórmula es <strong class="text-secondary">limitada para cubrir
@@ -284,6 +319,7 @@
});
audiom17.on('end', function () {
$('.grid-competidores').hide();
$('.apa1').show();
CourseNav.audioController.stopAllSoundsAndPlay(audios[0]);
});