update
This commit is contained in:
@@ -1,31 +1,80 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url("img/bg00.jpg");
|
||||
background-image: url(img/bg00s.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.back1 {
|
||||
background-image: url(img/bg01.jpg);
|
||||
background-size: cover;
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@media(min-width: 991px) {
|
||||
.back0 {
|
||||
background-image: url(img/bg00.jpg);
|
||||
background-position: center center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="page-sco back0">
|
||||
<div class="page-sco back0 py-2 py-md-4">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-7 col-md-5 text-center mb-3">
|
||||
<img src="img/01.0.png" class="img-fluid floating" />
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-7">
|
||||
<div class="row justify-content-center">
|
||||
<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-white fw-bolder">¡Bienvenido a <br> OGestan<sup>®</sup> Plus!</h1>
|
||||
<hr class="m-0 mt-2 opacity-100 border-top-2 text-white">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center" 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 py-1">
|
||||
Comenzar
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-7 mb-3 text-center">
|
||||
<h3 class="amor text-gris-1 fw-light">Bienvenido al curso:</h3>
|
||||
<div class="position-relative w-100 text-center mb-2">
|
||||
<h1 class="amor fw-bold text-rosa-claro mb-0">Orientación al Cliente</h1>
|
||||
<img src="img/adorno1.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sec1" class="page-sco back1 py-3 py-md-4" style="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 col-md-10 col-lg-9 mb-3" data-sal="slide-right">
|
||||
<div class="card bg-var-2 border-0 rounded-3 shadow-none px-3 py-2 text-blue-1">
|
||||
<p>Gracias por iniciar este módulo. Aquí conocerás los puntos clave de <strong>OGestan<sup>®</sup> Plus</strong>, el
|
||||
suplemento más completo para apoyar la etapa de <strong>fertilidad, embarazo y lactancia</strong>.</p>
|
||||
</div>
|
||||
<div class="position-relative w-100 mb-4">
|
||||
<h1 class="text-primary amor">y Empatía</h1>
|
||||
</div>
|
||||
<div class="w-100 position-relative">
|
||||
<div id="wrap-comenzar" class="btn btn-begin animate__animated animate__pulse animate__infinite py-2">
|
||||
Comenzar
|
||||
</div>
|
||||
<div class="col-12 apa0" style="display: none;">
|
||||
<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.0.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">
|
||||
<h2 class="text-secondary fw-medium">¿Qué aprenderás hoy?</h2>
|
||||
<p class="animate__animated animate__zoomIn animate__delay-2s">Al terminar este módulo podrás:</p>
|
||||
<ul class="mb-0 bul0">
|
||||
<li class="animate__animated animate__fadeInUp animate__delay-4s">Comunicar qué es OGestan<sup>®</sup> Plus.</li>
|
||||
<li class="animate__animated animate__fadeInUp animate__delay-7s">Describir sus beneficios más importantes.</li>
|
||||
<li class="animate__animated animate__fadeInUp animate__delay-10s">Identificar lo que lo hace único en el mercado.</li>
|
||||
<li class="animate__animated animate__fadeInUp animate__delay-13s">Responder objeciones comunes de médicos.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -38,6 +87,18 @@
|
||||
$(function () {
|
||||
"use strict";
|
||||
|
||||
const audiom00 = CourseNav.createSound('audio/audiom00.mp3');
|
||||
const audiom01 = CourseNav.createSound('audio/audiom01.mp3');
|
||||
|
||||
audiom00.on('end',function(){
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom01);
|
||||
$('.apa0').show();
|
||||
});
|
||||
|
||||
audiom01.on('end',function(){
|
||||
CourseNav.setSlideVisited();
|
||||
});
|
||||
|
||||
if (!CourseNav.isVisited() || CourseNav.isDebug()) {
|
||||
tour();
|
||||
} else {
|
||||
@@ -46,9 +107,16 @@
|
||||
|
||||
function showIntro() {
|
||||
$("#wrap-comenzar").removeClass("disabled");
|
||||
$('.personaje').addClass('animate__animated animate__pulse');
|
||||
}
|
||||
|
||||
$("#wrap-comenzar").click(function (e) {
|
||||
e.preventDefault();
|
||||
CourseNav.soundClick();
|
||||
gotoSection($(this).data('sec'));
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom00);
|
||||
$(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.
|
||||
|
||||
@@ -0,0 +1,260 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url(img/bg02.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.shadow-externo {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.gradient-card {
|
||||
background: #C1C902;
|
||||
background: linear-gradient(to right, #C1C902 0%, #006EAB 100%);
|
||||
}
|
||||
|
||||
.cid0 .swiper-wrapper {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.btn-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: 8px solid rgba(14, 28, 98, .3);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.circ_interno {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 100%;
|
||||
background: #dcdcdc;
|
||||
}
|
||||
|
||||
.btn-circ:hover .circ_interno {
|
||||
background: #DD3352;
|
||||
background: linear-gradient(to top, #DD3352 11%, #FEA968 100%);
|
||||
}
|
||||
|
||||
.btn-circ.selected .circ_interno {
|
||||
background: #DD3352;
|
||||
background: linear-gradient(to top, #DD3352 11%, #FEA968 100%);
|
||||
}
|
||||
|
||||
.custom-grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.anim0 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.text-t {
|
||||
max-width: 25%;
|
||||
margin-right: 3%;
|
||||
}
|
||||
|
||||
.text-t1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.custom-flx {
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.text-2 {
|
||||
flex: 1;
|
||||
max-width: 70%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class='page-sco back0 py-3 py-md-4'>
|
||||
<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 mb-3 text-center anim0 animate__animated animate__lightSpeedInLeft">
|
||||
<h2 class="text-primary fw-bold">La familia OGestan<sup>®</sup>: lo esencial para el proceso de fertilidad, embarazo y lactancia</h2>
|
||||
</div>
|
||||
<div class="col-12 col-lg-10 apa0 animate__animated animate__zoomIn" style="display: none;">
|
||||
<div class="shadow-externo rounded-3">
|
||||
<div class="swiper cid0">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="card gradient-card border-0 rounded-3 shadow-none p-2">
|
||||
<div class="card-body bg-white border-0 rounded-3 shadow-none px-3 pt-3 pb-0">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-6 col-md-4 text-center order-2 order-md-1">
|
||||
<img src="img/02.0.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 col-md-8 order-1 order-md-2 mb-3 mb-md-0">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 mb-3">
|
||||
<p class="mb-0">OGestan<sup>®</sup> acompaña a la mujer —y también al hombre— durante todo el proceso reproductivo:</p>
|
||||
</div>
|
||||
<div class="col-8 col-md-7 col-lg-12 text-center mb-3">
|
||||
<img src="img/02.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<p class="mb-0">Preconcepción y 1er trimestre de embarazo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card gradient-card border-0 rounded-3 shadow-none p-2">
|
||||
<div class="card-body bg-white border-0 rounded-3 shadow-none px-3 pt-3 pb-0">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-6 col-md-4 text-center order-2 order-md-1">
|
||||
<img src="img/02.2.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 col-md-8 order-1 order-md-2 mb-3 mb-md-0">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-8 col-md-7 col-lg-12 text-center mb-3">
|
||||
<img src="img/02.3.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<p class="mb-0">2do trimestre, 3er trimestre y lactancia (hasta los 6 meses de lactancia).</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card gradient-card border-0 rounded-3 shadow-none p-2">
|
||||
<div class="card-body bg-white border-0 rounded-3 shadow-none px-3 py-3">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12">
|
||||
<div class="custom-grid">
|
||||
<div class="d-flex flex-wrap justify-content-center align-items-center gap-2">
|
||||
<div class="text-t">
|
||||
<p class="mb-0 fw-bold text-pink">Fertilidad Femenina</p>
|
||||
</div>
|
||||
<div class="d-flex custom-flx flex-fill gap-2 justify-content-center text-center">
|
||||
<div class="text-t1">
|
||||
<p>1er trimestre de <br> embarazo</p>
|
||||
<img src="img/02.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="text-t1">
|
||||
<p>2do trimestre de <br> embarazo hasta lactancia</p>
|
||||
<img src="img/02.3.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-relative w-100">
|
||||
<img src="img/02.4" class="img-fluid">
|
||||
</div>
|
||||
<div class="d-flex flex-wrap justify-content-center align-items-center gap-2">
|
||||
<div class="text-t">
|
||||
<p class="mb-0 fw-bold text-pink">Fertilidad masculina</p>
|
||||
</div>
|
||||
<div class="text-2 d-flex justify-content-center">
|
||||
<div class="col-7 col-md-6 col-lg-8 text-center">
|
||||
<img src="img/02.5.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-relative w-100 mt-3">
|
||||
<div class="d-flex justify-content-center align-items-center gap-4">
|
||||
<div class="btn-circ animate__animated animate__pulse animate__infinite" data-slide="0">
|
||||
<div class="circ_interno"></div>
|
||||
</div>
|
||||
<div class="btn-circ animate__animated animate__pulse animate__infinite" data-slide="1">
|
||||
<div class="circ_interno"></div>
|
||||
</div>
|
||||
<div class="btn-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";
|
||||
$('body').addClass('fake');
|
||||
|
||||
const audiom02a = CourseNav.createSound('audio/audiom02a.mp3');
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom02a);
|
||||
|
||||
audiom02a.on('play', function () {
|
||||
$('.anim0').show();
|
||||
});
|
||||
|
||||
audiom02a.on('end',function(){
|
||||
$('.apa0').show();
|
||||
$('.btn-circ').first().click();
|
||||
});
|
||||
|
||||
const paths = [
|
||||
"audio/audiom02b.mp3",
|
||||
"audio/audiom03.mp3",
|
||||
"audio/audiom04.mp3"
|
||||
];
|
||||
let audios = [];
|
||||
paths.forEach(function (element) {
|
||||
audios.push(CourseNav.createSound(element));
|
||||
});
|
||||
|
||||
const mySwiper = new Swiper(".cid0", {
|
||||
effect: "slide",
|
||||
autoHeight: true,
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 10
|
||||
});
|
||||
|
||||
$('.btn-circ').click(function(){
|
||||
CourseNav.soundClick();
|
||||
const slideIndex = $(this).data('slide');
|
||||
mySwiper.slideTo(slideIndex);
|
||||
$(this).removeClass('animate__animated animate__pulse animate__infinite');
|
||||
$('.btn-circ').removeClass('selected');
|
||||
$(this).addClass('selected completed');
|
||||
|
||||
if($('.btn-circ.completed').length === $('.btn-circ').length){
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
|
||||
if(audios[slideIndex]){
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios[slideIndex]);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,110 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url(img/bg03.jpg);
|
||||
background-size: cover;
|
||||
background-position: 12% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.back1 {
|
||||
background-image: url(img/bg04.jpg);
|
||||
background-size: cover;
|
||||
background-position: 12% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.text-card {
|
||||
background-color: rgba(255, 255, 255, .7);
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.anim0 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.back0 {
|
||||
background-position: 28% 100%;
|
||||
}
|
||||
|
||||
.text-card {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class='page-sco'>
|
||||
<div class="sec_i0 back0 py-2 py-md-4 flex-fill d-flex flex-column justify-content-center align-items-center">
|
||||
<div class='container'>
|
||||
<div class='row justify-content-center align-items-center'>
|
||||
<div class='col-12'>
|
||||
<div class='row justify-content-center justify-content-md-end mb-3'>
|
||||
<div class="col-12 col-md-7 col-lg-6 text-center anim0" data-sal="slide-down">
|
||||
<div class="d-inline-block position-relative">
|
||||
<hr class="m-0 mb-2 opacity-100 border-top-2 text-white">
|
||||
<div class="text-card p-2 p-md-0">
|
||||
<h2 class="text-primary fw-bold">¿Qué es OGestan<sup>®</sup> Plus?</h2>
|
||||
<p class="mb-0"><strong>OGestan<sup class="fw-bolder">®</sup> Plus</strong> es un suplemento alimenticio
|
||||
en cápsulas, con aceite de pescado vitaminas y minerales. Forma parte de la
|
||||
línea OGestan<sup>®</sup>, enfocada en acompañar a la madre y al bebé en su desarrollo.</p>
|
||||
</div>
|
||||
<hr class="m-0 mt-2 opacity-100 border-top-2 text-white">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sec_i1 py-2 py-md-4" style="display: none;">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<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">
|
||||
<img src="img/nSec.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sec1" class='page-sco py-2 py-md-4 back1'>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('body').addClass('fake');
|
||||
const audiom05 = CourseNav.createSound('audio/audiom05.mp3');
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom05);
|
||||
|
||||
audiom05.on('play',function(){
|
||||
$('.anim0').show();
|
||||
});
|
||||
|
||||
audiom05.on('end',function(){
|
||||
$('.sec_i1').show();
|
||||
CourseNav.setSlideVisited();
|
||||
});
|
||||
|
||||
$('.btn-next-section').click(function(){
|
||||
CourseNav.soundClick();
|
||||
$(this).removeClass('animate__animated animate__pulse animate__infinite');
|
||||
gotoSection($(this).data('sec'));
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user