Update
This commit is contained in:
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"folders": [
|
||||
{
|
||||
"path": "."
|
||||
}
|
||||
],
|
||||
"settings": {}
|
||||
}
|
||||
+113
-65
@@ -1,80 +1,128 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg2.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.cuadro_navegacion { background-color: #00263a!important; border-radius: 25px; }
|
||||
.cuadro_navegacion .card-header { border: 1px solid #657380; }
|
||||
.btn_ponter { cursor: pointer; position: absolute; }
|
||||
.buttonss0 { left: -69px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
|
||||
.buttonss1 { right: -69px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
|
||||
.obj { position: absolute; }
|
||||
.obj1 { top: 3%; left: 11%; }
|
||||
.btn-comenzar { display: inline-block; }
|
||||
.anim { opacity: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 {
|
||||
background-image: url(img/fondos/bg2.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.cuadro_navegacion {
|
||||
background-color: #00263a !important;
|
||||
border-radius: 25px;
|
||||
}
|
||||
.cuadro_navegacion .card-header {
|
||||
border: 1px solid #657380;
|
||||
}
|
||||
.btn_ponter {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
}
|
||||
.buttonss0 {
|
||||
left: -69px;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
-o-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.buttonss1 {
|
||||
right: -69px;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
-o-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.obj {
|
||||
position: absolute;
|
||||
}
|
||||
.obj1 {
|
||||
top: 3%;
|
||||
left: 11%;
|
||||
}
|
||||
.btn-comenzar {
|
||||
display: inline-block;
|
||||
}
|
||||
.anim {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container pl-0 h-100">
|
||||
<div class="row justify-content-center h-100">
|
||||
<div class="col-5 align-self-end">
|
||||
<img src="img/1.png" class="anim anim1" alt="">
|
||||
</div>
|
||||
<div class="col-6 text-center align-self-center">
|
||||
<div class="main-txt pt-4 anim anim3">
|
||||
<h2>Prevención y Detección de Operaciones con Recursos de Procedencia Ilícita</h2>
|
||||
<div class="btn-comenzar mt-3"><img src="img/template/btn-comenzar.svg" class="d-block mx-auto" width="268" height="64"></div>
|
||||
</div>
|
||||
<div class="position-absolute anim3" style="right: 0;top: 328px;font-size: 16px;text-align: left;">
|
||||
<p><em>MAPFRE México S.A. / MAPFRE Fianzas S.A., emite el presente certificado en cumplimiento a las Disposiciones Quincuagésima Segunda, en relación con la Quincuagésima Primera, del acuerdo por el que se emiten las disposiciones de Carácter General a que se refiere el Art. 492 de la Ley de Instituciones de Seguros y de Fianzas aplicables a instituciones y sociedades mutualistas de seguros, publicado en el Diario Oficial de la Federación el 19 de Noviembre del 2020.</em></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container pl-0 h-100">
|
||||
<div class="row justify-content-center h-100">
|
||||
<div class="col-5 align-self-end">
|
||||
<img src="img/1.png" class="anim anim1" alt="" />
|
||||
</div>
|
||||
</section>
|
||||
<div class="col-6 text-center align-self-center">
|
||||
<div class="main-txt pt-4 anim anim3">
|
||||
<h2>Prevención y Detección de Operaciones con Recursos de Procedencia Ilícita</h2>
|
||||
<div class="btn-comenzar mt-3">
|
||||
<img src="img/template/btn-comenzar.svg" class="d-block mx-auto" width="268" height="64" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-absolute anim3" style="right: 0; top: 328px; font-size: 16px; text-align: left">
|
||||
<p>
|
||||
<em>
|
||||
Mapfre México S.A. / Mapfre Fianzas S.A., emite el presente certificado en cumplimiento a las
|
||||
Disposiciones Quincuagésima Segunda, en relación con la Quincuagésima Primera,
|
||||
del acuerdo por el que se emiten las disposiciones de Carácter General a que se refiere el
|
||||
Art. 492 de la Ley de Instituciones de Seguros y de Fianzas aplicables a instituciones y sociedades
|
||||
mutualistas de seguros, publicado en el Diario Oficial de la Federación el 19 de Noviembre
|
||||
del 2020.
|
||||
</em>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
jQuery(document).ready(function ($) {
|
||||
instruccion(0);
|
||||
$(".layer-load").show();
|
||||
$('.layer-load').show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
finished: function () {
|
||||
$('.section_charge').css('visibility', 'visible');
|
||||
$('.wloader').hide();
|
||||
fn_animate();
|
||||
},
|
||||
each: function (loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$('.wloader').show();
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim1",.7,{opacity:0, x:-250},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim3", 1,{opacity:0,y:-300,rotationX:-180,rotationY:180},{opacity:1,y:0,rotationX:0,rotationY:0});
|
||||
tl.call(fn_end);
|
||||
function fn_animate() {
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo('.anim1', 0.7, { opacity: 0, x: -250 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
|
||||
tl.fromTo(
|
||||
'.anim3',
|
||||
1,
|
||||
{ opacity: 0, y: -300, rotationX: -180, rotationY: 180 },
|
||||
{ opacity: 1, y: 0, rotationX: 0, rotationY: 0 }
|
||||
);
|
||||
tl.call(fn_end);
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(2);
|
||||
$('.btn-comenzar').addClass('animated infinite pulse');
|
||||
function fn_end() {
|
||||
instruccion(2);
|
||||
$('.btn-comenzar').addClass('animated infinite pulse');
|
||||
}
|
||||
|
||||
$(".btn-comenzar").click(function(event) {
|
||||
/* Act on the event */
|
||||
instruccion(1);
|
||||
__siguiente()
|
||||
$('.btn-comenzar').click(function (event) {
|
||||
/* Act on the event */
|
||||
instruccion(1);
|
||||
__siguiente();
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
});
|
||||
</script>
|
||||
|
||||
+90
-84
@@ -1,103 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg4.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.bubble {
|
||||
width: 100%; height: 112px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 {
|
||||
background-image: url(img/fondos/bg4.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.bubble {
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
}
|
||||
.anim {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none">
|
||||
<img src="img/sprites/marco_1.png" alt="">
|
||||
<img src="img/sprites/marco_2.png" alt="">
|
||||
</div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center h-100">
|
||||
<div class="col-9 offset-2 mt-2 anim anim1">
|
||||
<div class="bubble d-flex align-items-center shadow px-3 py-2">
|
||||
¡Buenos días! Soy Marcos Aguilar, el nuevo colaborador de MAPFRE. Me interesa mucho conocer las nuevas disposiciones
|
||||
sobre Prevención de Lavado de Dinero y Financiamiento al Terrorismo para poderme actualizar. ¿Puedes apoyarme?
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7 align-self-end anim anim2">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-4 align-self-end">
|
||||
<div class="personaje_r_1 d-none"></div>
|
||||
<div class="personaje_r_2"></div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="personaje_m_1 d-none"></div>
|
||||
<div class="personaje_m_2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-none">
|
||||
<img src="img/sprites/marco_1.png" alt="" />
|
||||
<img src="img/sprites/marco_2.png" alt="" />
|
||||
</div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center h-100">
|
||||
<div class="col-9 offset-2 mt-2 anim anim1">
|
||||
<div class="bubble d-flex align-items-center shadow px-3 py-2">
|
||||
¡Buenos días! Soy Marcos Aguilar, el nuevo colaborador de Mapfre. Me interesa mucho conocer las nuevas
|
||||
disposiciones sobre Prevención de Lavado de Dinero y Financiamiento al Terrorismo para poderme
|
||||
actualizar. ¿Puedes apoyarme?
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="col-7 align-self-end anim anim2">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-4 align-self-end">
|
||||
<div class="personaje_r_1 d-none"></div>
|
||||
<div class="personaje_r_2"></div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="personaje_m_1 d-none"></div>
|
||||
<div class="personaje_m_2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
jQuery(document).ready(function ($) {
|
||||
instruccion(0);
|
||||
var Audio_4 = newSound("audio/Audio_4_Marcos.mp3");
|
||||
var Audio_R1 = newSound("audio/Audio_1_Ruben.mp3");
|
||||
var txt1 = "¡Buen día! Te estábamos esperando Marcos. Yo soy Rubén Gutiérrez y con gusto te guiaré para que conozcas mejor estas disposiciones.";
|
||||
var Audio_4 = newSound('audio/Audio_4_Marcos.mp3');
|
||||
var Audio_R1 = newSound('audio/Audio_1_Ruben.mp3');
|
||||
var txt1 =
|
||||
'¡Buen día! Te estábamos esperando Marcos. Yo soy Rubén Gutiérrez y con gusto te guiaré para que conozcas mejor estas disposiciones.';
|
||||
|
||||
Audio_4.on("end", function() {
|
||||
stopAllSoundsAndPlay(Audio_R1);
|
||||
$('.bubble').html(txt1);
|
||||
$('.personaje_m_2').addClass('d-none');
|
||||
$('.personaje_m_1').removeClass('d-none');
|
||||
$('.personaje_r_2').addClass('d-none');
|
||||
$('.personaje_r_1').removeClass('d-none').addClass('play');
|
||||
Audio_4.on('end', function () {
|
||||
stopAllSoundsAndPlay(Audio_R1);
|
||||
$('.bubble').html(txt1);
|
||||
$('.personaje_m_2').addClass('d-none');
|
||||
$('.personaje_m_1').removeClass('d-none');
|
||||
$('.personaje_r_2').addClass('d-none');
|
||||
$('.personaje_r_1').removeClass('d-none').addClass('play');
|
||||
});
|
||||
Audio_R1.on("end", function() {
|
||||
fn_end();
|
||||
$('.personaje_r_1').removeClass('play')
|
||||
Audio_R1.on('end', function () {
|
||||
fn_end();
|
||||
$('.personaje_r_1').removeClass('play');
|
||||
});
|
||||
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.layer-load').show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
finished: function () {
|
||||
$('.section_charge').css('visibility', 'visible');
|
||||
$('.wloader').hide();
|
||||
fn_animate();
|
||||
},
|
||||
each: function (loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$('.wloader').show();
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
function fn_animate() {
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo('.anim2', 1, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
|
||||
tl.fromTo('.anim1', 0.7, { opacity: 0, y: -250 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_4);
|
||||
$('.personaje_m_2').addClass('play');
|
||||
function fn_firstAudio() {
|
||||
stopAllSoundsAndPlay(Audio_4);
|
||||
$('.personaje_m_2').addClass('play');
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
function fn_end() {
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
});
|
||||
</script>
|
||||
|
||||
+185
-153
@@ -1,181 +1,213 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg4.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.bubble {
|
||||
width: 100%; height: 98px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.obj { position: absolute;}
|
||||
.obj1 { top: 4%; left: 27%;}
|
||||
.obj2 { top: 40%; left: 31%;}
|
||||
.obj3 { top: 72%; left: 29%;}
|
||||
.nota { position: absolute; bottom: 10%; right: 2%; z-index: 10;}
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 {
|
||||
background-image: url(img/fondos/bg4.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.bubble {
|
||||
width: 100%;
|
||||
height: 98px;
|
||||
background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
}
|
||||
.obj {
|
||||
position: absolute;
|
||||
}
|
||||
.obj1 {
|
||||
top: 4%;
|
||||
left: 27%;
|
||||
}
|
||||
.obj2 {
|
||||
top: 40%;
|
||||
left: 31%;
|
||||
}
|
||||
.obj3 {
|
||||
top: 72%;
|
||||
left: 29%;
|
||||
}
|
||||
.nota {
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
right: 2%;
|
||||
z-index: 10;
|
||||
}
|
||||
.anim {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row h-100">
|
||||
<div class="col-9 offset-2 mt-2">
|
||||
<div class="bubble d-flex align-items-center shadow px-3 py-2 anim anim1">
|
||||
<p class="m-0">Y dime Rubén, ¿en MAPFRE contamos con algún <b>Manual de Cumplimiento</b> para prevenir y detectar operaciones con recursos de procedencia ilícita? Me gustaría revisarlo.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 align-self-end anim anim2">
|
||||
<div class="row">
|
||||
<div class="col-6 align-self-end"><div class="personaje_r_1 stop mx-auto"></div></div>
|
||||
<div class="col-6 align-self-end"><div class="personaje_m_2"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 align-self-center">
|
||||
<div class="position-relative anim anim3" style="z-index: 2;"><img src="img/14.png" alt=""></div>
|
||||
<div class="obj obj1 anim anim3"><img src="img/15.png" alt=""></div>
|
||||
<div class="obj obj2 anim anim4"><img src="img/16.png" alt=""></div>
|
||||
<div class="obj obj3 anim anim5"><img src="img/17.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row h-100">
|
||||
<div class="col-9 offset-2 mt-2">
|
||||
<div class="bubble d-flex align-items-center shadow px-3 py-2 anim anim1">
|
||||
<p class="m-0">
|
||||
Y dime Rubén, ¿en Mapfre contamos con algún
|
||||
<b>Manual de Cumplimiento</b>
|
||||
para prevenir y detectar operaciones con recursos de procedencia ilícita? Me gustaría revisarlo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nota btn_nota animated pulse infinite d-none" data-popid="#pop0"><img src="img/nota.png" alt=""></div>
|
||||
</section>
|
||||
<div class="col-6 align-self-end anim anim2">
|
||||
<div class="row">
|
||||
<div class="col-6 align-self-end"><div class="personaje_r_1 stop mx-auto"></div></div>
|
||||
<div class="col-6 align-self-end"><div class="personaje_m_2"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 align-self-center">
|
||||
<div class="position-relative anim anim3" style="z-index: 2"><img src="img/14.png" alt="" /></div>
|
||||
<div class="obj obj1 anim anim3"><img src="img/15.png" alt="" /></div>
|
||||
<div class="obj obj2 anim anim4"><img src="img/16.png" alt="" /></div>
|
||||
<div class="obj obj3 anim anim5"><img src="img/17.png" alt="" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nota btn_nota animated pulse infinite d-none" data-popid="#pop0">
|
||||
<img src="img/nota.png" alt="" />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
<!--POPS-->
|
||||
<div class="d-none">
|
||||
<div id="pop0">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-3"><img src="img/img_nota.png" class="mx-auto d-block" alt=""></div>
|
||||
<div class="col-8 text-left text-white">
|
||||
<p class="m-0">
|
||||
Recuerda que estos aspectos integran el <b>Manual de Cumplimiento</b>, mismo que cada <b>Institución debe tener</b> y una vez que sea <b>aprobado</b>,
|
||||
primero por su Comité de Comunicación y Control y, después, por su Comité de Auditoría, tendrá que enviarse a <b>registro de la CNSF </b>y, a través
|
||||
del medio que elijan, las Instituciones deberán ponerlo a <b>disposición</b> de los Intermediarios de seguros y de fianzas con quienes tengan contrato.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop0">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-3"><img src="img/img_nota.png" class="mx-auto d-block" alt="" /></div>
|
||||
<div class="col-8 text-left text-white">
|
||||
<p class="m-0">
|
||||
Recuerda que estos aspectos integran el
|
||||
<b>Manual de Cumplimiento</b>
|
||||
, mismo que cada
|
||||
<b>Institución debe tener</b>
|
||||
y una vez que sea
|
||||
<b>aprobado</b>
|
||||
, primero por su Comité de Comunicación y Control y, después, por su Comité de Auditoría, tendrá que
|
||||
enviarse a
|
||||
<b>registro de la CNSF</b>
|
||||
y, a través del medio que elijan, las Instituciones deberán ponerlo a
|
||||
<b>disposición</b>
|
||||
de los Intermediarios de seguros y de fianzas con quienes tengan contrato.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
jQuery(document).ready(function ($) {
|
||||
instruccion(0);
|
||||
var Audio_7 = newSound("audio/Audio_7_Marcos.mp3");
|
||||
var Audio_R5 = newSound("audio/Audio_5_Ruben.mp3");
|
||||
var txt1 = "Por supuesto, se compone de tres aspectos fundamentales, los cuales son:";
|
||||
var Audio_7 = newSound('audio/Audio_7_Marcos.mp3');
|
||||
var Audio_R5 = newSound('audio/Audio_5_Ruben.mp3');
|
||||
var txt1 = 'Por supuesto, se compone de tres aspectos fundamentales, los cuales son:';
|
||||
|
||||
Audio_7.on("end", function() {
|
||||
stopAllSoundsAndPlay(Audio_R5);
|
||||
$('.bubble').html(txt1);
|
||||
$('.personaje_m_2').removeClass('play').addClass('personaje7 stop');
|
||||
$('.personaje_r_1').removeClass('stop').addClass('play');
|
||||
var tl2 = new TimelineMax();
|
||||
tl2.fromTo(".anim3",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut}, 5.572);
|
||||
tl2.fromTo(".anim4",1,{opacity:0, x:-250},{opacity:1, x:0, ease:Expo.easeInOut}, 8.257);
|
||||
tl2.fromTo(".anim5",1,{opacity:0, x:-250},{opacity:1, x:0, ease:Expo.easeInOut}, 10.980) ;
|
||||
Audio_7.on('end', function () {
|
||||
stopAllSoundsAndPlay(Audio_R5);
|
||||
$('.bubble').html(txt1);
|
||||
$('.personaje_m_2').removeClass('play').addClass('personaje7 stop');
|
||||
$('.personaje_r_1').removeClass('stop').addClass('play');
|
||||
var tl2 = new TimelineMax();
|
||||
tl2.fromTo('.anim3', 1, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut }, 5.572);
|
||||
tl2.fromTo('.anim4', 1, { opacity: 0, x: -250 }, { opacity: 1, x: 0, ease: Expo.easeInOut }, 8.257);
|
||||
tl2.fromTo('.anim5', 1, { opacity: 0, x: -250 }, { opacity: 1, x: 0, ease: Expo.easeInOut }, 10.98);
|
||||
});
|
||||
Audio_R5.on("end", function() {
|
||||
$('.personaje_r_1').removeClass('play').addClass('stop');
|
||||
$('.nota').removeClass('d-none');
|
||||
instruccion(16);
|
||||
Audio_R5.on('end', function () {
|
||||
$('.personaje_r_1').removeClass('play').addClass('stop');
|
||||
$('.nota').removeClass('d-none');
|
||||
instruccion(16);
|
||||
});
|
||||
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.layer-load').show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
finished: function () {
|
||||
$('.section_charge').css('visibility', 'visible');
|
||||
$('.wloader').hide();
|
||||
fn_animate();
|
||||
},
|
||||
each: function (loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$('.wloader').show();
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
function fn_animate() {
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo('.anim2', 1, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
|
||||
tl.fromTo('.anim1', 0.7, { opacity: 0, y: -250 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_7);
|
||||
$('.personaje_m_2').addClass('play');
|
||||
function fn_firstAudio() {
|
||||
stopAllSoundsAndPlay(Audio_7);
|
||||
$('.personaje_m_2').addClass('play');
|
||||
}
|
||||
|
||||
$(".btn_nota").click(function(event) {
|
||||
if (!$(this).hasClass('block')) {
|
||||
$(this).removeClass('animated pulse infinite');
|
||||
var este = $(this);
|
||||
var html = $($(this).data('popid'));
|
||||
var imgbackdrop = $(this).data("imgbackdrop");
|
||||
Swal.fire({
|
||||
html: html,
|
||||
showCancelButton: false,
|
||||
showCloseButton: true,
|
||||
target: $('.sco')[0],
|
||||
customClass: { popup: 'popup-class pop-nota' },
|
||||
//backdrop: '#fff url("img/' + imgbackdrop + '") center center no-repeat',
|
||||
background: '#4a7d8f',
|
||||
width:"100%",
|
||||
padding: ".5rem .5rem .5rem .5rem",
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
allowEnterKey: false,
|
||||
showConfirmButton: false,
|
||||
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
|
||||
onBeforeOpen: function() {},
|
||||
onOpen: function() {
|
||||
$(".swal2-popup.popup-class").closest('.swal2-container').css("z-index","998");
|
||||
if ($(este).data("audio")) {
|
||||
stopAllSoundsAndPlay(eval($(este).data("audio")));
|
||||
$('.btn_nota').click(function (event) {
|
||||
if (!$(this).hasClass('block')) {
|
||||
$(this).removeClass('animated pulse infinite');
|
||||
var este = $(this);
|
||||
var html = $($(this).data('popid'));
|
||||
var imgbackdrop = $(this).data('imgbackdrop');
|
||||
Swal.fire({
|
||||
html: html,
|
||||
showCancelButton: false,
|
||||
showCloseButton: true,
|
||||
target: $('.sco')[0],
|
||||
customClass: { popup: 'popup-class pop-nota' },
|
||||
//backdrop: '#fff url("img/' + imgbackdrop + '") center center no-repeat',
|
||||
background: '#4a7d8f',
|
||||
width: '100%',
|
||||
padding: '.5rem .5rem .5rem .5rem',
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
allowEnterKey: false,
|
||||
showConfirmButton: false,
|
||||
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
|
||||
onBeforeOpen: function () {},
|
||||
onOpen: function () {
|
||||
$('.swal2-popup.popup-class').closest('.swal2-container').css('z-index', '998');
|
||||
if ($(este).data('audio')) {
|
||||
stopAllSoundsAndPlay(eval($(este).data('audio')));
|
||||
} else {
|
||||
stopAllSoundsAndPlay(__click);
|
||||
}
|
||||
|
||||
}else{
|
||||
stopAllSoundsAndPlay(__click);
|
||||
}
|
||||
if ($(este).hasClass('visitado')) {
|
||||
instruccion(7);
|
||||
$('.swal2-close').show();
|
||||
} else {
|
||||
instruccion(7);
|
||||
$('.swal2-close').show();
|
||||
}
|
||||
},
|
||||
onRender: function () {},
|
||||
onClose: function () {
|
||||
$(este).addClass('visitado');
|
||||
stopAllSoundsAndPlay(__click);
|
||||
|
||||
if ($(este).hasClass('visitado')) {
|
||||
instruccion(7);
|
||||
$(".swal2-close").show();
|
||||
}else{
|
||||
instruccion(7);
|
||||
$(".swal2-close").show();
|
||||
}
|
||||
},
|
||||
onRender: function() {},
|
||||
onClose: function() {
|
||||
$(este).addClass('visitado');
|
||||
stopAllSoundsAndPlay(__click);
|
||||
|
||||
if ($(".btn_nota").length == $(".btn_nota.visitado").length) {
|
||||
fn_end();
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
onAfterClose: function() {}
|
||||
});
|
||||
}
|
||||
if ($('.btn_nota').length == $('.btn_nota.visitado').length) {
|
||||
fn_end();
|
||||
} else {
|
||||
}
|
||||
},
|
||||
onAfterClose: function () {}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
function fn_end() {
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
});
|
||||
</script>
|
||||
|
||||
+251
-205
@@ -1,239 +1,285 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg4.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.personaje { position: relative; z-index: 2;}
|
||||
.bubble {
|
||||
position: relative; width: 100%; height: auto; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.btn-pop { position: absolute; cursor: pointer; z-index: 5;}
|
||||
.pop1{ top: -97%; left: 31%; }
|
||||
.pop2{ top: -38%; left: 53.9%;}
|
||||
.pop3{ top: 72%; left: 34%;}
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 {
|
||||
background-image: url(img/fondos/bg4.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.personaje {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.bubble {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
}
|
||||
.btn-pop {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
z-index: 5;
|
||||
}
|
||||
.pop1 {
|
||||
top: -97%;
|
||||
left: 31%;
|
||||
}
|
||||
.pop2 {
|
||||
top: -38%;
|
||||
left: 53.9%;
|
||||
}
|
||||
.pop3 {
|
||||
top: 72%;
|
||||
left: 34%;
|
||||
}
|
||||
.anim {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-end">
|
||||
<div class="col-6 pt-5 anim anim0">
|
||||
<div class="bubble shadow pl-5 pr-3 py-2"><h5 class="title_ m-0">Enfoque Basado en Riesgos (EBR)</h5></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mt-3 anim anim1">
|
||||
<div class="col-1">
|
||||
<div class="personaje personaje_m_4 mx-auto"></div>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<div class="bubble bub1 shadow pl-5 pr-3 py-2">
|
||||
<p class="m-0">
|
||||
Rubén, he escuchado que en MAPFRE también contamos con una metodología basada en riesgos para prevenir
|
||||
y detectar operaciones con Recursos de Procedencia Ilícita, la cual es un requisito indispensable para
|
||||
utilizar el <b>Régimen de Excepción</b>. ¿Puedes hablarme un poco de ella, por favor?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 anim anim5" style="margin-top: -25px;">
|
||||
<img src="img/30.png" class="mx-auto d-block" alt="">
|
||||
<div class="btn-pop pop1" data-popid="#pop0" data-backcolor="#63a7bf"><img src="img/31.png" alt=""></div>
|
||||
<div class="btn-pop pop2" data-popid="#pop2" data-backcolor="#b9230f"><img src="img/32.png" alt=""></div>
|
||||
<div class="btn-pop pop3" data-popid="#pop1" data-backcolor="#eb7f3d"><img src="img/33.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mt-2 anim anim2">
|
||||
<div class="col-8">
|
||||
<div class="bubble bub2 shadow pr-5 pl-3 py-2">
|
||||
<p class="m-0">
|
||||
Claro que sí, Marcos. Nosotros tenemos una metodología que recoge todos los <b>riesgos</b> a los
|
||||
que estamos expuestos y que nos señala cuándo debemos <b>usarla</b>, así como <b>qué hacer </b>en
|
||||
caso de identificarlos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<div class="personaje personaje_r_4" style="margin-left: -117px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-end">
|
||||
<div class="col-6 pt-5 anim anim0">
|
||||
<div class="bubble shadow pl-5 pr-3 py-2">
|
||||
<h5 class="title_ m-0">Enfoque Basado en Riesgos (EBR)</h5>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="row justify-content-center mt-3 anim anim1">
|
||||
<div class="col-1">
|
||||
<div class="personaje personaje_m_4 mx-auto"></div>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<div class="bubble bub1 shadow pl-5 pr-3 py-2">
|
||||
<p class="m-0">
|
||||
Rubén, he escuchado que en Mapfre también contamos con una metodología basada en riesgos para prevenir
|
||||
y detectar operaciones con Recursos de Procedencia Ilícita, la cual es un requisito indispensable para
|
||||
utilizar el
|
||||
<b>Régimen de Excepción</b>
|
||||
. ¿Puedes hablarme un poco de ella, por favor?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 anim anim5" style="margin-top: -25px">
|
||||
<img src="img/30.png" class="mx-auto d-block" alt="" />
|
||||
<div class="btn-pop pop1" data-popid="#pop0" data-backcolor="#63a7bf">
|
||||
<img src="img/31.png" alt="" />
|
||||
</div>
|
||||
<div class="btn-pop pop2" data-popid="#pop2" data-backcolor="#b9230f">
|
||||
<img src="img/32.png" alt="" />
|
||||
</div>
|
||||
<div class="btn-pop pop3" data-popid="#pop1" data-backcolor="#eb7f3d">
|
||||
<img src="img/33.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mt-2 anim anim2">
|
||||
<div class="col-8">
|
||||
<div class="bubble bub2 shadow pr-5 pl-3 py-2">
|
||||
<p class="m-0">
|
||||
Claro que sí, Marcos. Nosotros tenemos una metodología que recoge todos los
|
||||
<b>riesgos</b>
|
||||
a los que estamos expuestos y que nos señala cuándo debemos
|
||||
<b>usarla</b>
|
||||
, así como
|
||||
<b>qué hacer</b>
|
||||
en caso de identificarlos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<div class="personaje personaje_r_4" style="margin-left: -117px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
<!--POPS-->
|
||||
<div class="d-none">
|
||||
<div id="pop0">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p><b>Objetivo</b></p>
|
||||
<p>
|
||||
Es una metodología para realizar una <b>evaluación de Riesgos </b>a la que está expuesta la Institución
|
||||
en virtud de sus productos, servicios, Clientes, países o áreas geográficos en las que opere, transacciones
|
||||
y canales de envió o distribución. </p>
|
||||
<p class="m-0">
|
||||
Esta metodología deberá establecer y describir todos los <b>procesos</b> que se llevarán a cabo para la
|
||||
<b>identificación, medición y mitigación de los Riesgos</b>, tomando en cuenta los factores de Riesgo que se
|
||||
hayan identificado y la información que resulte aplicable en la <b>Evaluación Nacional de Riesgos.</b>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop0">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p><b>Objetivo</b></p>
|
||||
<p>
|
||||
Es una metodología para realizar una
|
||||
<b>evaluación de Riesgos</b>
|
||||
a la que está expuesta la Institución en virtud de sus productos, servicios, Clientes, países o áreas
|
||||
geográficos en las que opere, transacciones y canales de envió o distribución.
|
||||
</p>
|
||||
<p class="m-0">
|
||||
Esta metodología deberá establecer y describir todos los
|
||||
<b>procesos</b>
|
||||
que se llevarán a cabo para la
|
||||
<b>identificación, medición y mitigación de los Riesgos</b>
|
||||
, tomando en cuenta los factores de Riesgo que se hayan identificado y la información que resulte aplicable
|
||||
en la
|
||||
<b>Evaluación Nacional de Riesgos.</b>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pop1">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p><b>Periodicidad</b></p>
|
||||
<p class="m-0">
|
||||
La <b>evaluación de Riesgos </b>con base en dicha metodología deberá realizarse <b>cada 12 meses </b>y
|
||||
con <b>antelación al lanzamiento </b>o uso de nuevos productos, servicios, prácticas o tecnologías.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop1">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p><b>Periodicidad</b></p>
|
||||
<p class="m-0">
|
||||
La
|
||||
<b>evaluación de Riesgos</b>
|
||||
con base en dicha metodología deberá realizarse
|
||||
<b>cada 12 meses</b>
|
||||
y con
|
||||
<b>antelación al lanzamiento</b>
|
||||
o uso de nuevos productos, servicios, prácticas o tecnologías.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pop2">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p><b>Acciones</b></p>
|
||||
<p class="m-0">
|
||||
Cuando los resultados de la evaluación de Riesgos revelen la <b>existencia de mayores o nuevos Riesgos, </b>las Instituciones
|
||||
deberán <b>modificar sus políticas, criterios, medidas y procedimientos</b> a fin de establecer los Mitigantes que
|
||||
consideren necesarios en función de los <b>Riesgos identificados.</b>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop2">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p><b>Acciones</b></p>
|
||||
<p class="m-0">
|
||||
Cuando los resultados de la evaluación de Riesgos revelen la
|
||||
<b>existencia de mayores o nuevos Riesgos,</b>
|
||||
las Instituciones deberán
|
||||
<b>modificar sus políticas, criterios, medidas y procedimientos</b>
|
||||
a fin de establecer los Mitigantes que consideren necesarios en función de los
|
||||
<b>Riesgos identificados.</b>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
jQuery(document).ready(function ($) {
|
||||
instruccion(0);
|
||||
var Audio_10 = newSound("audio/Audio_10_Marcos.mp3");
|
||||
var Audio_R7 = newSound("audio/Audio_7_Ruben.mp3");
|
||||
var Audio_10 = newSound('audio/Audio_10_Marcos.mp3');
|
||||
var Audio_R7 = newSound('audio/Audio_7_Ruben.mp3');
|
||||
|
||||
Audio_10.on("end", function() {
|
||||
var tl3 = new TimelineMax();
|
||||
tl3.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
stopAllSoundsAndPlay(Audio_R7);
|
||||
$('.personaje_m_4').removeClass('play');
|
||||
$('.personaje_r_4').addClass('play');
|
||||
|
||||
Audio_10.on('end', function () {
|
||||
var tl3 = new TimelineMax();
|
||||
tl3.fromTo('.anim2', 1, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
|
||||
stopAllSoundsAndPlay(Audio_R7);
|
||||
$('.personaje_m_4').removeClass('play');
|
||||
$('.personaje_r_4').addClass('play');
|
||||
});
|
||||
Audio_R7.on("end", function() {
|
||||
fn_pops();
|
||||
var tl2 = new TimelineMax();
|
||||
tl2.fromTo(".anim3",.7,{opacity:0, y:-50},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
|
||||
$('.personaje_r_4').removeClass('play');
|
||||
$('.bub1, .bub2').addClass('d-none');
|
||||
$('.anim5').removeClass('anim');
|
||||
instruccion(11);
|
||||
Audio_R7.on('end', function () {
|
||||
fn_pops();
|
||||
var tl2 = new TimelineMax();
|
||||
tl2.fromTo('.anim3', 0.7, { opacity: 0, y: -50 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
|
||||
|
||||
$('.personaje_r_4').removeClass('play');
|
||||
$('.bub1, .bub2').addClass('d-none');
|
||||
$('.anim5').removeClass('anim');
|
||||
instruccion(11);
|
||||
});
|
||||
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.layer-load').show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
$(".carousel").carousel({ interval: false });
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
finished: function () {
|
||||
$('.section_charge').css('visibility', 'visible');
|
||||
$('.wloader').hide();
|
||||
fn_animate();
|
||||
$('.carousel').carousel({ interval: false });
|
||||
},
|
||||
each: function (loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$('.wloader').show();
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim0",.7,{opacity:0, x:150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, x:-250},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
function fn_animate() {
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo('.anim0', 0.7, { opacity: 0, x: 150 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
|
||||
tl.fromTo('.anim1', 0.7, { opacity: 0, x: -250 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_10);
|
||||
$('.personaje_m_4').addClass('play');
|
||||
function fn_firstAudio() {
|
||||
stopAllSoundsAndPlay(Audio_10);
|
||||
$('.personaje_m_4').addClass('play');
|
||||
}
|
||||
|
||||
function fn_pops(){
|
||||
$(".btn-pop").addClass('animated pulse infinite');
|
||||
$(".btn-pop").click(function(event) {
|
||||
if (!$(this).hasClass('block')) {
|
||||
$(this).removeClass('animated pulse infinite');
|
||||
var este = $(this);
|
||||
var html = $($(this).data('popid'));
|
||||
var backcolor = $(this).data("backcolor");
|
||||
Swal.fire({
|
||||
html: html,
|
||||
showCancelButton: false,
|
||||
showCloseButton: true,
|
||||
target: $('.sco')[0],
|
||||
customClass: { popup: 'popup-class pop-nota' },
|
||||
background: backcolor,
|
||||
width:"100%",
|
||||
padding: ".5rem .5rem .5rem .5rem",
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
allowEnterKey: false,
|
||||
showConfirmButton: false,
|
||||
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
|
||||
onBeforeOpen: function() {},
|
||||
onOpen: function() {
|
||||
$(".swal2-popup.popup-class").closest('.swal2-container').css("z-index","998");
|
||||
if ($(este).data("audio")) {
|
||||
stopAllSoundsAndPlay(eval($(este).data("audio")));
|
||||
function fn_pops() {
|
||||
$('.btn-pop').addClass('animated pulse infinite');
|
||||
$('.btn-pop').click(function (event) {
|
||||
if (!$(this).hasClass('block')) {
|
||||
$(this).removeClass('animated pulse infinite');
|
||||
var este = $(this);
|
||||
var html = $($(this).data('popid'));
|
||||
var backcolor = $(this).data('backcolor');
|
||||
Swal.fire({
|
||||
html: html,
|
||||
showCancelButton: false,
|
||||
showCloseButton: true,
|
||||
target: $('.sco')[0],
|
||||
customClass: { popup: 'popup-class pop-nota' },
|
||||
background: backcolor,
|
||||
width: '100%',
|
||||
padding: '.5rem .5rem .5rem .5rem',
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
allowEnterKey: false,
|
||||
showConfirmButton: false,
|
||||
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
|
||||
onBeforeOpen: function () {},
|
||||
onOpen: function () {
|
||||
$('.swal2-popup.popup-class').closest('.swal2-container').css('z-index', '998');
|
||||
if ($(este).data('audio')) {
|
||||
stopAllSoundsAndPlay(eval($(este).data('audio')));
|
||||
} else {
|
||||
stopAllSoundsAndPlay(__click);
|
||||
}
|
||||
|
||||
}else{
|
||||
stopAllSoundsAndPlay(__click);
|
||||
}
|
||||
if ($(este).hasClass('visitado')) {
|
||||
instruccion(7);
|
||||
$('.swal2-close').show();
|
||||
} else {
|
||||
instruccion(7);
|
||||
$('.swal2-close').show();
|
||||
}
|
||||
},
|
||||
onRender: function () {},
|
||||
onClose: function () {
|
||||
$(este).addClass('visitado');
|
||||
stopAllSoundsAndPlay(__click);
|
||||
|
||||
if ($(este).hasClass('visitado')) {
|
||||
instruccion(7);
|
||||
$(".swal2-close").show();
|
||||
}else{
|
||||
instruccion(7);
|
||||
$(".swal2-close").show();
|
||||
}
|
||||
},
|
||||
onRender: function() {},
|
||||
onClose: function() {
|
||||
$(este).addClass('visitado');
|
||||
stopAllSoundsAndPlay(__click);
|
||||
|
||||
if ($(".btn-pop").length == $(".btn-pop.visitado").length) {
|
||||
fn_end();
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
onAfterClose: function() {}
|
||||
});
|
||||
}
|
||||
});
|
||||
if ($('.btn-pop').length == $('.btn-pop.visitado').length) {
|
||||
fn_end();
|
||||
} else {
|
||||
}
|
||||
},
|
||||
onAfterClose: function () {}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
function fn_end() {
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
});
|
||||
</script>
|
||||
|
||||
+96
-90
@@ -1,109 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg11.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.bubble {
|
||||
width: 100%; height: 136px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 {
|
||||
background-image: url(img/fondos/bg11.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.bubble {
|
||||
width: 100%;
|
||||
height: 136px;
|
||||
background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
}
|
||||
.anim {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none">
|
||||
<img src="img/fondos/bg11.jpg" alt="">
|
||||
<img src="img/sprites/marco_6.png" alt="">
|
||||
<img src="img/sprites/marco_7.png" alt="">
|
||||
<img src="img/sprites/ruben_5.png" alt="">
|
||||
<img src="img/sprites/ruben_6.png" alt="">
|
||||
</div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center h-100">
|
||||
<div class="col-9 offset-2 mt-2 anim anim1">
|
||||
<div class="bubble d-flex align-items-center shadow px-3 py-2">
|
||||
<p class="m-0">
|
||||
Rubén, recientemente leí un reportaje en el que una aseguradora tuvo que investigar a uno de sus <b>clientes extranjeros</b>
|
||||
porque algunas de sus operaciones sobrepasaban el monto permitido, ¿consideras que un cliente así o que viva fuera del país
|
||||
representa un riesgo mayor que otro cliente que sí reside aquí?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7 align-self-end anim anim2">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-4 align-self-end">
|
||||
<div class="personaje_r_5"></div>
|
||||
<div class="personaje_r_6 d-none"></div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="personaje_m_6"></div>
|
||||
<div class="personaje_m_7 d-none"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-none">
|
||||
<img src="img/fondos/bg11.jpg" alt="" />
|
||||
<img src="img/sprites/marco_6.png" alt="" />
|
||||
<img src="img/sprites/marco_7.png" alt="" />
|
||||
<img src="img/sprites/ruben_5.png" alt="" />
|
||||
<img src="img/sprites/ruben_6.png" alt="" />
|
||||
</div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center h-100">
|
||||
<div class="col-9 offset-2 mt-2 anim anim1">
|
||||
<div class="bubble d-flex align-items-center shadow px-3 py-2">
|
||||
<p class="m-0">
|
||||
Rubén, recientemente leí un reportaje en el que una aseguradora tuvo que investigar a uno de sus
|
||||
<b>clientes extranjeros</b>
|
||||
porque algunas de sus operaciones sobrepasaban el monto permitido, ¿consideras que un cliente así o
|
||||
que viva fuera del país representa un riesgo mayor que otro cliente que sí reside aquí?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="col-7 align-self-end anim anim2">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-4 align-self-end">
|
||||
<div class="personaje_r_5"></div>
|
||||
<div class="personaje_r_6 d-none"></div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="personaje_m_6"></div>
|
||||
<div class="personaje_m_7 d-none"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
jQuery(document).ready(function ($) {
|
||||
instruccion(0);
|
||||
var Audio_11 = newSound("audio/Audio_11_Marcos.mp3");
|
||||
var Audio_R8 = newSound("audio/Audio_8_Ruben.mp3");
|
||||
var txt1 = "Ciertamente es un tema delicado, Marcos. En <b>MAPFRE</b> contamos con una <b>política de conocimiento del cliente </b>que nos permite dar un seguimiento a sus operaciones mediante un perfil y el Grado de Riesgo que representa, viva o no en el país. ¡Acompáñame para conocer más sobre ella!";
|
||||
var Audio_11 = newSound('audio/Audio_11_Marcos.mp3');
|
||||
var Audio_R8 = newSound('audio/Audio_8_Ruben.mp3');
|
||||
var txt1 =
|
||||
'Ciertamente es un tema delicado, Marcos. En <b>Mapfre</b> contamos con una <b>política de conocimiento del cliente </b>que nos permite dar un seguimiento a sus operaciones mediante un perfil y el Grado de Riesgo que representa, viva o no en el país. ¡Acompáñame para conocer más sobre ella!';
|
||||
|
||||
Audio_11.on("end", function() {
|
||||
stopAllSoundsAndPlay(Audio_R8);
|
||||
$('.bubble p').html(txt1);
|
||||
$('.personaje_m_6').addClass('d-none');
|
||||
$('.personaje_m_7').removeClass('d-none');
|
||||
$('.personaje_r_5').addClass('d-none');
|
||||
$('.personaje_r_6').removeClass('d-none').addClass('play');
|
||||
Audio_11.on('end', function () {
|
||||
stopAllSoundsAndPlay(Audio_R8);
|
||||
$('.bubble p').html(txt1);
|
||||
$('.personaje_m_6').addClass('d-none');
|
||||
$('.personaje_m_7').removeClass('d-none');
|
||||
$('.personaje_r_5').addClass('d-none');
|
||||
$('.personaje_r_6').removeClass('d-none').addClass('play');
|
||||
});
|
||||
Audio_R8.on("end", function() {
|
||||
fn_end();
|
||||
$('.personaje_r_6').removeClass('play');
|
||||
Audio_R8.on('end', function () {
|
||||
fn_end();
|
||||
$('.personaje_r_6').removeClass('play');
|
||||
});
|
||||
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.layer-load').show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
finished: function () {
|
||||
$('.section_charge').css('visibility', 'visible');
|
||||
$('.wloader').hide();
|
||||
fn_animate();
|
||||
},
|
||||
each: function (loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$('.wloader').show();
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
function fn_animate() {
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo('.anim2', 1, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
|
||||
tl.fromTo('.anim1', 0.7, { opacity: 0, y: -250 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_11);
|
||||
$('.personaje_m_6').addClass('play');
|
||||
function fn_firstAudio() {
|
||||
stopAllSoundsAndPlay(Audio_11);
|
||||
$('.personaje_m_6').addClass('play');
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
function fn_end() {
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
});
|
||||
</script>
|
||||
|
||||
+98
-91
@@ -1,110 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg11.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.bubble {
|
||||
width: 100%; height: 136px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 {
|
||||
background-image: url(img/fondos/bg11.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.bubble {
|
||||
width: 100%;
|
||||
height: 136px;
|
||||
background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
}
|
||||
.anim {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none">
|
||||
<img src="img/fondos/bg11.jpg" alt="">
|
||||
<img src="img/sprites/marco_6.png" alt="">
|
||||
<img src="img/sprites/marco_7.png" alt="">
|
||||
<img src="img/sprites/ruben_5.png" alt="">
|
||||
<img src="img/sprites/ruben_6.png" alt="">
|
||||
</div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center h-100">
|
||||
<div class="col-9 offset-2 mt-2 anim anim1">
|
||||
<div class="bubble d-flex align-items-center shadow px-3 py-2">
|
||||
<p class="m-0">
|
||||
Ahora te compartiré algo nuevo Marcos. Recientemente en MAPFRE hemos recibido el reporte de tres casos en los que
|
||||
pueden aplicar las <b>nuevas disposiciones de PLD/FT. </b>Como sabes, parte de nuestras obligaciones es
|
||||
<b>reportarlas a la SHCP</b>, a través de la CNSF, ¿te gustaría escucharlos para que así puedas identificar
|
||||
a qué tipo de operaciones pertenecen?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7 align-self-end anim anim2">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-4 align-self-end">
|
||||
<div class="personaje_r_5 d-none"></div>
|
||||
<div class="personaje_r_6"></div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="personaje_m_6 d-none"></div>
|
||||
<div class="personaje_m_7"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-none">
|
||||
<img src="img/fondos/bg11.jpg" alt="" />
|
||||
<img src="img/sprites/marco_6.png" alt="" />
|
||||
<img src="img/sprites/marco_7.png" alt="" />
|
||||
<img src="img/sprites/ruben_5.png" alt="" />
|
||||
<img src="img/sprites/ruben_6.png" alt="" />
|
||||
</div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center h-100">
|
||||
<div class="col-9 offset-2 mt-2 anim anim1">
|
||||
<div class="bubble d-flex align-items-center shadow px-3 py-2">
|
||||
<p class="m-0">
|
||||
Ahora te compartiré algo nuevo Marcos. Recientemente en Mapfre hemos recibido el reporte de tres casos
|
||||
en los que pueden aplicar las
|
||||
<b>nuevas disposiciones de PLD/FT.</b>
|
||||
Como sabes, parte de nuestras obligaciones es
|
||||
<b>reportarlas a la SHCP</b>
|
||||
, a través de la CNSF, ¿te gustaría escucharlos para que así puedas identificar a qué tipo de
|
||||
operaciones pertenecen?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="col-7 align-self-end anim anim2">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-4 align-self-end">
|
||||
<div class="personaje_r_5 d-none"></div>
|
||||
<div class="personaje_r_6"></div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="personaje_m_6 d-none"></div>
|
||||
<div class="personaje_m_7"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
jQuery(document).ready(function ($) {
|
||||
instruccion(0);
|
||||
var Audio_12 = newSound("audio/Audio_12_Marcos.mp3");
|
||||
var Audio_R11 = newSound("audio/Audio_11_Ruben.mp3");
|
||||
var txt1 = "Por supuesto. Cuéntame los casos y juntos los analizaremos.";
|
||||
var Audio_12 = newSound('audio/Audio_12_Marcos.mp3');
|
||||
var Audio_R11 = newSound('audio/Audio_11_Ruben.mp3');
|
||||
var txt1 = 'Por supuesto. Cuéntame los casos y juntos los analizaremos.';
|
||||
|
||||
Audio_R11.on("end", function() {
|
||||
stopAllSoundsAndPlay(Audio_12);
|
||||
$('.bubble p').html(txt1);
|
||||
$('.personaje_r_6').addClass('d-none');
|
||||
$('.personaje_r_5').removeClass('d-none');
|
||||
$('.personaje_m_7').addClass('d-none');
|
||||
$('.personaje_m_6').removeClass('d-none').addClass('play');
|
||||
Audio_R11.on('end', function () {
|
||||
stopAllSoundsAndPlay(Audio_12);
|
||||
$('.bubble p').html(txt1);
|
||||
$('.personaje_r_6').addClass('d-none');
|
||||
$('.personaje_r_5').removeClass('d-none');
|
||||
$('.personaje_m_7').addClass('d-none');
|
||||
$('.personaje_m_6').removeClass('d-none').addClass('play');
|
||||
});
|
||||
Audio_12.on("end", function() {
|
||||
fn_end();
|
||||
$('.personaje_m_6').removeClass('play');
|
||||
Audio_12.on('end', function () {
|
||||
fn_end();
|
||||
$('.personaje_m_6').removeClass('play');
|
||||
});
|
||||
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.layer-load').show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
finished: function () {
|
||||
$('.section_charge').css('visibility', 'visible');
|
||||
$('.wloader').hide();
|
||||
fn_animate();
|
||||
},
|
||||
each: function (loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$('.wloader').show();
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
function fn_animate() {
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo('.anim2', 1, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
|
||||
tl.fromTo('.anim1', 0.7, { opacity: 0, y: -250 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_R11);
|
||||
$('.personaje_r_6').addClass('play');
|
||||
function fn_firstAudio() {
|
||||
stopAllSoundsAndPlay(Audio_R11);
|
||||
$('.personaje_r_6').addClass('play');
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
function fn_end() {
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
});
|
||||
</script>
|
||||
|
||||
+99
-87
@@ -1,104 +1,116 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 {
|
||||
background-image: url(img/fondos/bg3.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.bubble {
|
||||
width: 100%; height: auto; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.paper { position: relative; width: 590px; margin: auto;}
|
||||
.txt_paper { position: absolute; top: 158px; left: 15px; padding: 0 1rem;}
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 {
|
||||
background-image: url(img/fondos/bg3.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.bubble {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
}
|
||||
.paper {
|
||||
position: relative;
|
||||
width: 590px;
|
||||
margin: auto;
|
||||
}
|
||||
.txt_paper {
|
||||
position: absolute;
|
||||
top: 158px;
|
||||
left: 15px;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
.anim {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-4 align-self-end">
|
||||
<div class="personaje_m_0 mx-auto anim anim2"></div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<h5 class="title_ text-center py-2 anim anim1">Operaciones inusuales</h5>
|
||||
<div class="bubble d-flex align-items-center shadow px-3 py-2 anim anim1">
|
||||
<p class="m-0">
|
||||
Me parece que estamos ante una <b>operación inusual</b>, ya que esta es una operación de
|
||||
seguros o de fianzas, en la cual la actividad, conducta o comportamiento del Cliente
|
||||
no concuerda con los antecedentes o actividad conocida de él por la Aseguradora o la
|
||||
Afianzadora, o declarada a éstas, o no coincide con el perfil transaccional inicial o
|
||||
habitual de dicho Cliente, en función al origen o destino de los recursos, así como al
|
||||
monto, frecuencia, tipo o naturaleza de la Operación de que se trate, sin que exista una
|
||||
justificación razonable para dicha operación, actividad, conducta o comportamiento.
|
||||
</p>
|
||||
</div>
|
||||
<div class="paper mt-2 anim anim3">
|
||||
<img src="img/41.png" alt="">
|
||||
<div class="txt_paper">
|
||||
<p>
|
||||
En MAPFRE contamos con diferentes situaciones que pueden implicar la comisión de una <b>operación inusual</b>. Conozcámoslas más a detalle.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-4 align-self-end">
|
||||
<div class="personaje_m_0 mx-auto anim anim2"></div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="col-8">
|
||||
<h5 class="title_ text-center py-2 anim anim1">Operaciones inusuales</h5>
|
||||
<div class="bubble d-flex align-items-center shadow px-3 py-2 anim anim1">
|
||||
<p class="m-0">
|
||||
Me parece que estamos ante una
|
||||
<b>operación inusual</b>
|
||||
, ya que esta es una operación de seguros o de fianzas, en la cual la actividad, conducta o
|
||||
comportamiento del Cliente no concuerda con los antecedentes o actividad conocida de él por la
|
||||
Aseguradora o la Afianzadora, o declarada a éstas, o no coincide con el perfil transaccional inicial o
|
||||
habitual de dicho Cliente, en función al origen o destino de los recursos, así como al monto,
|
||||
frecuencia, tipo o naturaleza de la Operación de que se trate, sin que exista una justificación
|
||||
razonable para dicha operación, actividad, conducta o comportamiento.
|
||||
</p>
|
||||
</div>
|
||||
<div class="paper mt-2 anim anim3">
|
||||
<img src="img/41.png" alt="" />
|
||||
<div class="txt_paper">
|
||||
<p>
|
||||
En Mapfre contamos con diferentes situaciones que pueden implicar la comisión de una
|
||||
<b>operación inusual</b>
|
||||
. Conozcámoslas más a detalle.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
jQuery(document).ready(function ($) {
|
||||
instruccion(0);
|
||||
var Audio_13 = newSound("audio/Audio_13_Marcos.mp3");
|
||||
Audio_13.on("end", function() {
|
||||
$('.personaje_m_0').removeClass('play');
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim3",1,{opacity:0, y:-150},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_end);
|
||||
var Audio_13 = newSound('audio/Audio_13_Marcos.mp3');
|
||||
Audio_13.on('end', function () {
|
||||
$('.personaje_m_0').removeClass('play');
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo('.anim3', 1, { opacity: 0, y: -150 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
|
||||
tl.call(fn_end);
|
||||
});
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.layer-load').show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
finished: function () {
|
||||
$('.section_charge').css('visibility', 'visible');
|
||||
$('.wloader').hide();
|
||||
fn_animate();
|
||||
},
|
||||
each: function (loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$('.wloader').show();
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
function fn_animate() {
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo('.anim2', 1, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
|
||||
tl.fromTo('.anim1', 0.7, { opacity: 0, y: -250 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_13);
|
||||
$('.personaje_m_0').addClass('play');
|
||||
function fn_firstAudio() {
|
||||
stopAllSoundsAndPlay(Audio_13);
|
||||
$('.personaje_m_0').addClass('play');
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
function fn_end() {
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
});
|
||||
</script>
|
||||
|
||||
+226
-181
@@ -1,216 +1,261 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 {
|
||||
background-image: url(img/fondos/bg13.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
}
|
||||
.bubble {
|
||||
position: absolute; width: 100%; height: auto; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; bottom: 3%; left: 0; right: 0; margin: auto;
|
||||
}
|
||||
.btn-pop { position: absolute;}
|
||||
.pop1{ top: 3%; left: 24.5%; }
|
||||
.pop2{ top: 38.5%; left: 47.5%; }
|
||||
.pop3{ top: 74%; left: 24.5%; }
|
||||
.pop4{ top: 39%; left: 2%; }
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 {
|
||||
background-image: url(img/fondos/bg13.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
}
|
||||
.bubble {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
bottom: 3%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
.btn-pop {
|
||||
position: absolute;
|
||||
}
|
||||
.pop1 {
|
||||
top: 3%;
|
||||
left: 24.5%;
|
||||
}
|
||||
.pop2 {
|
||||
top: 38.5%;
|
||||
left: 47.5%;
|
||||
}
|
||||
.pop3 {
|
||||
top: 74%;
|
||||
left: 24.5%;
|
||||
}
|
||||
.pop4 {
|
||||
top: 39%;
|
||||
left: 2%;
|
||||
}
|
||||
.anim {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none">
|
||||
<img src="img/fondos/bg13.jpg" alt="">
|
||||
</div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-6 align-self-end">
|
||||
<h5 class="title_ py-2 anim anim1"><b>Operaciones Internas Preocupantes</b></h5>
|
||||
<div class="personaje_m_0 mx-auto anim anim2"></div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="paper mt-3 anim anim3">
|
||||
<img src="img/55.png" alt="">
|
||||
<div class="btn-pop pop1" data-popid="#pop0" data-backcolor="#00ab9c"><img src="img/56.png" alt=""></div>
|
||||
<div class="btn-pop pop2" data-popid="#pop1" data-backcolor="#b9230f"><img src="img/57.png" alt=""></div>
|
||||
<div class="btn-pop pop3" data-popid="#pop2" data-backcolor="#63a7bf"><img src="img/58.png" alt=""></div>
|
||||
<div class="btn-pop pop4" data-popid="#pop3" data-backcolor="#274663"><img src="img/59.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bubble p-2 w-75">
|
||||
<p class="m-0">
|
||||
Es importante que dentro de MAPFRE, identifiquemos las <b>situaciones</b> que pudieran dar lugar a considerar que existe una <b>operación interna preocupante</b>. Algunas de ellas son:
|
||||
</p>
|
||||
</div>
|
||||
<div class="d-none">
|
||||
<img src="img/fondos/bg13.jpg" alt="" />
|
||||
</div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-6 align-self-end">
|
||||
<h5 class="title_ py-2 anim anim1"><b>Operaciones Internas Preocupantes</b></h5>
|
||||
<div class="personaje_m_0 mx-auto anim anim2"></div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="col-6">
|
||||
<div class="paper mt-3 anim anim3">
|
||||
<img src="img/55.png" alt="" />
|
||||
<div class="btn-pop pop1" data-popid="#pop0" data-backcolor="#00ab9c">
|
||||
<img src="img/56.png" alt="" />
|
||||
</div>
|
||||
<div class="btn-pop pop2" data-popid="#pop1" data-backcolor="#b9230f">
|
||||
<img src="img/57.png" alt="" />
|
||||
</div>
|
||||
<div class="btn-pop pop3" data-popid="#pop2" data-backcolor="#63a7bf">
|
||||
<img src="img/58.png" alt="" />
|
||||
</div>
|
||||
<div class="btn-pop pop4" data-popid="#pop3" data-backcolor="#274663">
|
||||
<img src="img/59.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bubble p-2 w-75">
|
||||
<p class="m-0">
|
||||
Es importante que dentro de Mapfre, identifiquemos las
|
||||
<b>situaciones</b>
|
||||
que pudieran dar lugar a considerar que existe una
|
||||
<b>operación interna preocupante</b>
|
||||
. Algunas de ellas son:
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
<!--POPS-->
|
||||
<div class="d-none">
|
||||
<div id="pop0">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p class="m-0">
|
||||
<b>1. </b>Cuando se detecte que algún <b>directivo, funcionario, empleado o apoderado de MAPFRE, </b>
|
||||
mantiene un nivel de vida notoriamente superior al que le correspondería, de acuerdo con los ingresos que percibe.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop0">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p class="m-0">
|
||||
<b>1.</b>
|
||||
Cuando se detecte que algún
|
||||
<b>directivo, funcionario, empleado o apoderado de Mapfre,</b>
|
||||
mantiene un nivel de vida notoriamente superior al que le correspondería, de acuerdo con los ingresos que
|
||||
percibe.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pop1">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p class="m-0">
|
||||
<b>2. </b>Cuando, <b>sin causa justificada, </b>algún directivo, funcionario, empleado o apoderado de MAPFRE, haya <b>intervenido </b>
|
||||
de manera reiterada en la realización de Operaciones que hayan sido reportadas como <b>Operaciones Inusuales.</b>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop1">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p class="m-0">
|
||||
<b>2.</b>
|
||||
Cuando,
|
||||
<b>sin causa justificada,</b>
|
||||
algún directivo, funcionario, empleado o apoderado de Mapfre, haya
|
||||
<b>intervenido</b>
|
||||
de manera reiterada en la realización de Operaciones que hayan sido reportadas como
|
||||
<b>Operaciones Inusuales.</b>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pop2">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p class="m-0">
|
||||
<b>3. </b>Cuando existan <b>sospechas</b> de que algún directivo, funcionario, empleado o apoderado de MAPFRE pudieran
|
||||
<b>haber incurrido en actos, omisiones u Operaciones</b> que pudiesen favorecer, prestar ayuda, auxilio o cooperación
|
||||
de cualquier especie para la comisión de los delitos de Lavado de Dinero y Financiamiento al Terrorismo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop2">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p class="m-0">
|
||||
<b>3.</b>
|
||||
Cuando existan
|
||||
<b>sospechas</b>
|
||||
de que algún directivo, funcionario, empleado o apoderado de Mapfre pudieran
|
||||
<b>haber incurrido en actos, omisiones u Operaciones</b>
|
||||
que pudiesen favorecer, prestar ayuda, auxilio o cooperación de cualquier especie para la comisión de los
|
||||
delitos de Lavado de Dinero y Financiamiento al Terrorismo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pop3">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p class="m-0">
|
||||
<b>4. </b>Cuando, sin causa justificada, exista una <b>falta de correspondencia entre las funciones </b>que
|
||||
se le encomendaron al directivo, funcionario, empleado o apoderado de MAPFRE y las <b>actividades</b> que de
|
||||
hecho lleva a cabo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop3">
|
||||
<div class="container-fluid py-3">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11 text-left text-white">
|
||||
<p class="m-0">
|
||||
<b>4.</b>
|
||||
Cuando, sin causa justificada, exista una
|
||||
<b>falta de correspondencia entre las funciones</b>
|
||||
que se le encomendaron al directivo, funcionario, empleado o apoderado de Mapfre y las
|
||||
<b>actividades</b>
|
||||
que de hecho lleva a cabo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
jQuery(document).ready(function ($) {
|
||||
instruccion(0);
|
||||
var Audio_19 = newSound("audio/Audio_19_Marcos.mp3");
|
||||
Audio_19.on("end", function() {
|
||||
$('.personaje_m_0').removeClass('play');
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim3",1,{opacity:0, y:-150},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_pops);
|
||||
var Audio_19 = newSound('audio/Audio_19_Marcos.mp3');
|
||||
Audio_19.on('end', function () {
|
||||
$('.personaje_m_0').removeClass('play');
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo('.anim3', 1, { opacity: 0, y: -150 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
|
||||
tl.call(fn_pops);
|
||||
});
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.layer-load').show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
finished: function () {
|
||||
$('.section_charge').css('visibility', 'visible');
|
||||
$('.wloader').hide();
|
||||
fn_animate();
|
||||
},
|
||||
each: function (loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$('.wloader').show();
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
function fn_animate() {
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo('.anim2', 1, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
|
||||
tl.fromTo('.anim1', 0.7, { opacity: 0, y: -250 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_19);
|
||||
$('.personaje_m_0').addClass('play');
|
||||
function fn_firstAudio() {
|
||||
stopAllSoundsAndPlay(Audio_19);
|
||||
$('.personaje_m_0').addClass('play');
|
||||
}
|
||||
|
||||
function fn_pops(){
|
||||
instruccion(11);
|
||||
$(".btn-pop").addClass('animated pulse infinite');
|
||||
$(".btn-pop").click(function(event) {
|
||||
if (!$(this).hasClass('block')) {
|
||||
$(this).removeClass('animated pulse infinite');
|
||||
var este = $(this);
|
||||
var html = $($(this).data('popid'));
|
||||
var backcolor = $(this).data("backcolor");
|
||||
Swal.fire({
|
||||
html: html,
|
||||
showCancelButton: false,
|
||||
showCloseButton: true,
|
||||
target: $('.sco')[0],
|
||||
customClass: { popup: 'popup-class pop-nota' },
|
||||
background: backcolor,
|
||||
width:"100%",
|
||||
padding: ".5rem .5rem .5rem .5rem",
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
allowEnterKey: false,
|
||||
showConfirmButton: false,
|
||||
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
|
||||
onBeforeOpen: function() {},
|
||||
onOpen: function() {
|
||||
$(".swal2-popup.popup-class").closest('.swal2-container').css("z-index","998");
|
||||
if ($(este).data("audio")) {
|
||||
stopAllSoundsAndPlay(eval($(este).data("audio")));
|
||||
function fn_pops() {
|
||||
instruccion(11);
|
||||
$('.btn-pop').addClass('animated pulse infinite');
|
||||
$('.btn-pop').click(function (event) {
|
||||
if (!$(this).hasClass('block')) {
|
||||
$(this).removeClass('animated pulse infinite');
|
||||
var este = $(this);
|
||||
var html = $($(this).data('popid'));
|
||||
var backcolor = $(this).data('backcolor');
|
||||
Swal.fire({
|
||||
html: html,
|
||||
showCancelButton: false,
|
||||
showCloseButton: true,
|
||||
target: $('.sco')[0],
|
||||
customClass: { popup: 'popup-class pop-nota' },
|
||||
background: backcolor,
|
||||
width: '100%',
|
||||
padding: '.5rem .5rem .5rem .5rem',
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
allowEnterKey: false,
|
||||
showConfirmButton: false,
|
||||
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
|
||||
onBeforeOpen: function () {},
|
||||
onOpen: function () {
|
||||
$('.swal2-popup.popup-class').closest('.swal2-container').css('z-index', '998');
|
||||
if ($(este).data('audio')) {
|
||||
stopAllSoundsAndPlay(eval($(este).data('audio')));
|
||||
} else {
|
||||
stopAllSoundsAndPlay(__click);
|
||||
}
|
||||
|
||||
}else{
|
||||
stopAllSoundsAndPlay(__click);
|
||||
}
|
||||
if ($(este).hasClass('visitado')) {
|
||||
instruccion(7);
|
||||
$('.swal2-close').show();
|
||||
} else {
|
||||
instruccion(7);
|
||||
$('.swal2-close').show();
|
||||
}
|
||||
},
|
||||
onRender: function () {},
|
||||
onClose: function () {
|
||||
$(este).addClass('visitado');
|
||||
stopAllSoundsAndPlay(__click);
|
||||
|
||||
if ($(este).hasClass('visitado')) {
|
||||
instruccion(7);
|
||||
$(".swal2-close").show();
|
||||
}else{
|
||||
instruccion(7);
|
||||
$(".swal2-close").show();
|
||||
}
|
||||
},
|
||||
onRender: function() {},
|
||||
onClose: function() {
|
||||
$(este).addClass('visitado');
|
||||
stopAllSoundsAndPlay(__click);
|
||||
|
||||
if ($(".btn-pop").length == $(".btn-pop.visitado").length) {
|
||||
fn_end();
|
||||
|
||||
}else{
|
||||
instruccion(11);
|
||||
}
|
||||
},
|
||||
onAfterClose: function() {}
|
||||
});
|
||||
}
|
||||
});
|
||||
if ($('.btn-pop').length == $('.btn-pop.visitado').length) {
|
||||
fn_end();
|
||||
} else {
|
||||
instruccion(11);
|
||||
}
|
||||
},
|
||||
onAfterClose: function () {}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
function fn_end() {
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
});
|
||||
</script>
|
||||
|
||||
+101
-72
@@ -1,92 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg6.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.bubble {
|
||||
width: 100%; height: 112px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.myvideo { height: 100%; width: 100%; }
|
||||
.play { position: absolute; background-image: url(img/play.png); background-repeat: no-repeat; background-position: center; width: 100%; height: 100%; top: 0; left:0; z-index: 1; cursor: pointer; }
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 {
|
||||
background-image: url(img/fondos/bg6.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.bubble {
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
}
|
||||
.myvideo {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.play {
|
||||
position: absolute;
|
||||
background-image: url(img/play.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.anim {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center h-100">
|
||||
<div class="col-11 mt-5 pt-">
|
||||
<div class="bubble d-flex align-items-center shadow px-3 py-2 anim anim1">
|
||||
<p class="m-0">
|
||||
A continuación, podrás observar un video en el cual conocerás las funciones de las <b>estructuras internas de control </b>
|
||||
que posee MAPFRE, mismas a las que deberás acudir en caso de haber <b>detectado irregularidades </b>en alguna operación.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7 animated zoomIn">
|
||||
<div class="play border_video block"></div>
|
||||
<div class="embed-responsive embed-responsive-16by9 h-100">
|
||||
<video id="video" controls="" class="myvideo embed-responsive-item" src="video/pld_extenso_05.mp4"></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center h-100">
|
||||
<div class="col-11 mt-5 pt-">
|
||||
<div class="bubble d-flex align-items-center shadow px-3 py-2 anim anim1">
|
||||
<p class="m-0">
|
||||
A continuación, podrás observar un video en el cual conocerás las funciones de las
|
||||
<b>estructuras internas de control</b>
|
||||
que posee Mapfre, mismas a las que deberás acudir en caso de haber
|
||||
<b>detectado irregularidades</b>
|
||||
en alguna operación.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="col-7 animated zoomIn">
|
||||
<div class="play border_video block"></div>
|
||||
<div class="embed-responsive embed-responsive-16by9 h-100">
|
||||
<video
|
||||
id="video"
|
||||
controls=""
|
||||
class="myvideo embed-responsive-item"
|
||||
src="video/pld_extenso_05.mp4"
|
||||
></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
jQuery(document).ready(function ($) {
|
||||
instruccion(0);
|
||||
var Audio_R15 = newSound("audio/Audio_15_Ruben.mp3");
|
||||
var Audio_R15 = newSound('audio/Audio_15_Ruben.mp3');
|
||||
|
||||
Audio_R15.on("end", function() {
|
||||
$(".play").removeClass('block');
|
||||
instruccion(10);
|
||||
Audio_R15.on('end', function () {
|
||||
$('.play').removeClass('block');
|
||||
instruccion(10);
|
||||
});
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.layer-load').show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
finished: function () {
|
||||
$('.section_charge').css('visibility', 'visible');
|
||||
$('.wloader').hide();
|
||||
fn_animate();
|
||||
},
|
||||
each: function (loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$('.wloader').show();
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim1",1,{opacity:0, y:-100},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
function fn_animate() {
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo('.anim1', 1, { opacity: 0, y: -100 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_R15);
|
||||
function fn_firstAudio() {
|
||||
stopAllSoundsAndPlay(Audio_R15);
|
||||
}
|
||||
|
||||
var vid = document.getElementById("video");
|
||||
$(".play").click(function(event) {
|
||||
if (!$(this).hasClass('block')) {
|
||||
instruccion(0);
|
||||
$(this).hide();
|
||||
vid.play();
|
||||
}
|
||||
var vid = document.getElementById('video');
|
||||
$('.play').click(function (event) {
|
||||
if (!$(this).hasClass('block')) {
|
||||
instruccion(0);
|
||||
$(this).hide();
|
||||
vid.play();
|
||||
}
|
||||
});
|
||||
|
||||
$('video').on('ended',function(){
|
||||
instruccion(1);
|
||||
$('video').on('ended', function () {
|
||||
instruccion(1);
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
});
|
||||
</script>
|
||||
|
||||
+175
-137
@@ -1,162 +1,200 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 { background-image: url(img/fondos/bg3.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||||
.personaje { position: relative; z-index: 2;}
|
||||
.bubble {
|
||||
position: relative; width: 100%; height: 112px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
|
||||
}
|
||||
.btn_ponter { cursor: pointer; position: absolute; }
|
||||
.headone { background-image: linear-gradient(to right, #60718f, #718aaa, #81a3c6, #91bee1, #a2d9fd); }
|
||||
.headtwo { background-image: linear-gradient(to left, #b9230f, #bf3018, #c53c20, #cb4628, #d15030);}
|
||||
<head>
|
||||
<style>
|
||||
.sec0 {
|
||||
background-image: url(img/fondos/bg3.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.personaje {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.bubble {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
}
|
||||
.btn_ponter {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
}
|
||||
.headone {
|
||||
background-image: linear-gradient(to right, #60718f, #718aaa, #81a3c6, #91bee1, #a2d9fd);
|
||||
}
|
||||
.headtwo {
|
||||
background-image: linear-gradient(to left, #b9230f, #bf3018, #c53c20, #cb4628, #d15030);
|
||||
}
|
||||
|
||||
.anim { opacity: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
.anim {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section_charge bg w-100 h-100">
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center pt-5 anim anim1">
|
||||
<div class="col-1">
|
||||
<div class="personaje personaje_m_4 mx-auto"></div>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<div class="bubble d-flex align-items-center shadow pl-5 pr-3 py-2">
|
||||
<p class="m-0">
|
||||
Gracias por tu ayuda, Rubén. Ahora sé lo indispensable sobre las nuevas disposiciones en torno a la <b>Prevención de Lavado de Dinero y Financiamiento al Terrorismo.</b>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<div class="accordion" id="accordionExample">
|
||||
<div class="card">
|
||||
<div class="card-header headone" id="headingOne">
|
||||
<h2 class="mb-0">
|
||||
<button class="btn btn-link btn-block text-left text-white" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="flase" aria-controls="collapseOne">
|
||||
<b>01</b>
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
La petición deberá ser realizada únicamente por los funcionarios de las Instituciones hayan autorizados para tales efectos,
|
||||
mediante escrito en el que deberá especificarse el motivo y la clase de información que se requiera
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header headtwo" id="headingTwo">
|
||||
<h2 class="mb-0">
|
||||
<button class="btn btn-link btn-block text-left text-white collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
<b>02</b>
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
De forma previa o simultánea a que una Institución comparta, con otra u otras Instituciones la información deberá dar aviso de tal circunstancia a la Secretaría.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mt-3 anim anim2">
|
||||
<div class="col-9">
|
||||
<div class="bubble d-flex align-items-center shadow pr-5 pl-3 py-2">
|
||||
<p class="m-0">
|
||||
Por nada, Marcos. Recuerda que también es posible el <b>intercambio de información</b> de Operaciones de Clientes entre las <b>Instituciones de MAPFRE</b>,
|
||||
únicamente cuando se tenga como finalidad fortalecer las medidas para prevenir y detectar delitos en esta materia. Para ello, debemos considerar:
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<div class="personaje personaje_r_4" style="margin-left: -117px;"></div>
|
||||
</div>
|
||||
<div class="d-none"></div>
|
||||
<section id="sec0" class="sec0 w-100 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center pt-5 anim anim1">
|
||||
<div class="col-1">
|
||||
<div class="personaje personaje_m_4 mx-auto"></div>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<div class="bubble d-flex align-items-center shadow pl-5 pr-3 py-2">
|
||||
<p class="m-0">
|
||||
Gracias por tu ayuda, Rubén. Ahora sé lo indispensable sobre las nuevas disposiciones en torno a la
|
||||
<b>Prevención de Lavado de Dinero y Financiamiento al Terrorismo.</b>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<div class="accordion" id="accordionExample">
|
||||
<div class="card">
|
||||
<div class="card-header headone" id="headingOne">
|
||||
<h2 class="mb-0">
|
||||
<button
|
||||
class="btn btn-link btn-block text-left text-white"
|
||||
type="button"
|
||||
data-toggle="collapse"
|
||||
data-target="#collapseOne"
|
||||
aria-expanded="flase"
|
||||
aria-controls="collapseOne"
|
||||
>
|
||||
<b>01</b>
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
La petición deberá ser realizada únicamente por los funcionarios de las Instituciones hayan
|
||||
autorizados para tales efectos, mediante escrito en el que deberá especificarse el motivo y la
|
||||
clase de información que se requiera
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header headtwo" id="headingTwo">
|
||||
<h2 class="mb-0">
|
||||
<button
|
||||
class="btn btn-link btn-block text-left text-white collapsed"
|
||||
type="button"
|
||||
data-toggle="collapse"
|
||||
data-target="#collapseTwo"
|
||||
aria-expanded="false"
|
||||
aria-controls="collapseTwo"
|
||||
>
|
||||
<b>02</b>
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
De forma previa o simultánea a que una Institución comparta, con otra u otras Instituciones la
|
||||
información deberá dar aviso de tal circunstancia a la Secretaría.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mt-3 anim anim2">
|
||||
<div class="col-9">
|
||||
<div class="bubble d-flex align-items-center shadow pr-5 pl-3 py-2">
|
||||
<p class="m-0">
|
||||
Por nada, Marcos. Recuerda que también es posible el
|
||||
<b>intercambio de información</b>
|
||||
de Operaciones de Clientes entre las
|
||||
<b>Instituciones de Mapfre</b>
|
||||
, únicamente cuando se tenga como finalidad fortalecer las medidas para prevenir y detectar delitos en
|
||||
esta materia. Para ello, debemos considerar:
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<div class="personaje personaje_r_4" style="margin-left: -117px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
jQuery(document).ready(function ($) {
|
||||
instruccion(0);
|
||||
var Audio_22 = newSound("audio/Audio_22_Marcos.mp3");
|
||||
var Audio_R17 = newSound("audio/Audio_17_Ruben.mp3");
|
||||
var Audio_22 = newSound('audio/Audio_22_Marcos.mp3');
|
||||
var Audio_R17 = newSound('audio/Audio_17_Ruben.mp3');
|
||||
|
||||
Audio_22.on("end", function() {
|
||||
Audio_22.on('end', function () {
|
||||
stopAllSoundsAndPlay(Audio_R17);
|
||||
var tl2 = new TimelineMax();
|
||||
tl2.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
|
||||
$('.personaje_m_4').removeClass('play');
|
||||
$('.personaje_r_4').addClass('play');
|
||||
var tl2 = new TimelineMax();
|
||||
tl2.fromTo('.anim2', 1, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
|
||||
|
||||
$('.personaje_m_4').removeClass('play');
|
||||
$('.personaje_r_4').addClass('play');
|
||||
});
|
||||
|
||||
Audio_R17.on("end", function() {
|
||||
var tl3 = new TimelineMax();
|
||||
tl3.fromTo(".anim3",.7,{opacity:0, y:-50},{opacity:1, y:0, ease:Expo.easeInOut});
|
||||
|
||||
$('.personaje_r_4').removeClass('play');
|
||||
$('.card-header').removeClass('block').addClass('animated pulse slowly infinite');
|
||||
fn_accordion();
|
||||
instruccion(11);
|
||||
Audio_R17.on('end', function () {
|
||||
var tl3 = new TimelineMax();
|
||||
tl3.fromTo('.anim3', 0.7, { opacity: 0, y: -50 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
|
||||
|
||||
$('.personaje_r_4').removeClass('play');
|
||||
$('.card-header').removeClass('block').addClass('animated pulse slowly infinite');
|
||||
fn_accordion();
|
||||
instruccion(11);
|
||||
});
|
||||
|
||||
$(".layer-load").show();
|
||||
$('.layer-load').show();
|
||||
$('.section_charge').waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
fn_animate();
|
||||
$(".carousel").carousel({ interval: false });
|
||||
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
finished: function () {
|
||||
$('.section_charge').css('visibility', 'visible');
|
||||
$('.wloader').hide();
|
||||
fn_animate();
|
||||
$('.carousel').carousel({ interval: false });
|
||||
},
|
||||
each: function (loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$('.wloader').show();
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
function fn_animate(){
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo(".anim1",.7,{opacity:0, x:-250},{opacity:1, x:0, ease:Expo.easeInOut});
|
||||
tl.call(fn_firstAudio);
|
||||
function fn_animate() {
|
||||
var tl = new TimelineMax();
|
||||
tl.fromTo('.anim1', 0.7, { opacity: 0, x: -250 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
|
||||
tl.call(fn_firstAudio);
|
||||
}
|
||||
|
||||
function fn_firstAudio(){
|
||||
stopAllSoundsAndPlay(Audio_22);
|
||||
$('.personaje_m_4').addClass('play');
|
||||
function fn_firstAudio() {
|
||||
stopAllSoundsAndPlay(Audio_22);
|
||||
$('.personaje_m_4').addClass('play');
|
||||
}
|
||||
|
||||
function fn_accordion(){
|
||||
$('.card-header').click(function(){
|
||||
if (!$(this).hasClass('block')) {
|
||||
$(this).addClass('visit');
|
||||
$(this).removeClass('animated pulse slowly infinite');
|
||||
if ($('.card-header').length <= $('.card-header.visit').length) {
|
||||
instruccion(1);
|
||||
}
|
||||
}
|
||||
});
|
||||
function fn_accordion() {
|
||||
$('.card-header').click(function () {
|
||||
if (!$(this).hasClass('block')) {
|
||||
$(this).addClass('visit');
|
||||
$(this).removeClass('animated pulse slowly infinite');
|
||||
if ($('.card-header').length <= $('.card-header.visit').length) {
|
||||
instruccion(1);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function fn_end(){
|
||||
instruccion(1);
|
||||
function fn_end() {
|
||||
instruccion(1);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
});
|
||||
</script>
|
||||
|
||||
+503
-393
@@ -1,434 +1,544 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.sec0 {
|
||||
background-image: url(img/fondos/bg7.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.sec1 {
|
||||
background-image: url(img/fondos/bg6.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.sco .swal2-container {
|
||||
background-color: rgba(22, 40, 68, 1) !important;
|
||||
}
|
||||
.btn_ {
|
||||
position: absolute;
|
||||
bottom: -11%;
|
||||
left: 72%;
|
||||
}
|
||||
.card_intro {
|
||||
background-image: linear-gradient(to bottom, #ffffff, #fafaff, #f3f5ff, #ebf0ff, #e1ecff);
|
||||
border: 0;
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
}
|
||||
.bg-blanco {
|
||||
background-image: url(img/fondos/bg0.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.bg_actividad {
|
||||
background-image: linear-gradient(to right, #b9230f, #ad210e, #a21e0d, #961c0c, #8b1a0b);
|
||||
border-top-right-radius: 25px;
|
||||
}
|
||||
.bg-gris {
|
||||
background-image: url(img/actividad/bg_gris.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.cuadro_gris {
|
||||
position: relative;
|
||||
background-image: url(img/actividad/gris.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.opcion {
|
||||
position: relative;
|
||||
padding-top: 10px;
|
||||
cursor: pointer;
|
||||
padding-left: 18px;
|
||||
}
|
||||
.opcion:hover {
|
||||
font-weight: bold;
|
||||
background-color: #d67e72;
|
||||
}
|
||||
.opcion:hover:before {
|
||||
background-color: #fff;
|
||||
}
|
||||
.opcion:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #fff;
|
||||
top: 61%;
|
||||
left: -13px;
|
||||
border-radius: 25px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.opcion.selected:hover {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-image: url(img/actividad/2.png);
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
background-repeat: no-repeat;
|
||||
top: 0;
|
||||
left: -60px;
|
||||
}
|
||||
.sec2.good {
|
||||
background-image: url(img/fondos/bg8.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.sec2.bad {
|
||||
background-image: url(img/fondos/bg9.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.text-rojo-1 {
|
||||
color: #b9230f;
|
||||
font-weight: bold;
|
||||
}
|
||||
.txt_final p,
|
||||
h4 {
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.cuadro_gris {
|
||||
padding: 2rem 1rem 3rem 1rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
.sec0{background-image:url(img/fondos/bg7.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;}
|
||||
.sec1{background-image:url(img/fondos/bg6.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;}
|
||||
.sco .swal2-container{background-color:rgba(22,40,68,1)!important;}
|
||||
.btn_{position:absolute;bottom:-11%;left:72%;}
|
||||
.card_intro{background-image:linear-gradient(to bottom,#ffffff,#fafaff,#f3f5ff,#ebf0ff,#e1ecff);border:0;border-top-left-radius:25px;border-top-right-radius:25px;}
|
||||
.bg-blanco{background-image:url(img/fondos/bg0.png);background-repeat:no-repeat;background-size:cover;background-position:center;}
|
||||
.bg_actividad{background-image:linear-gradient(to right,#b9230f,#ad210e,#a21e0d,#961c0c,#8b1a0b);border-top-right-radius:25px;}
|
||||
.bg-gris{background-image:url(img/actividad/bg_gris.png);background-repeat:no-repeat;background-size:cover;background-position:center;}
|
||||
.cuadro_gris{position:relative;background-image:url(img/actividad/gris.png);background-repeat:no-repeat;background-size:100% 100%;margin:0 auto;}
|
||||
.opcion{position:relative;padding-top:10px;cursor:pointer;padding-left:18px;}
|
||||
.opcion:hover{font-weight:bold;background-color:#D67E72;}
|
||||
.opcion:hover:before{background-color:#fff;}
|
||||
.opcion:before{content:"";position:absolute;width:20px;height:20px;border:2px solid #fff;top:61%;left:-13px;border-radius:25px;transform:translateY(-50%);}
|
||||
.opcion.selected:hover{content:"";position:absolute;background-image:url(img/actividad/2.png);width:52px;height:52px;background-repeat:no-repeat;top:0;left:-60px;}
|
||||
.sec2.good{background-image:url(img/fondos/bg8.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;}
|
||||
.sec2.bad{background-image:url(img/fondos/bg9.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;}
|
||||
.text-rojo-1{color:#b9230f;font-weight:bold;}
|
||||
.txt_final p,h4 { margin-bottom: .2rem; }
|
||||
.cuadro_gris { padding: 2rem 1rem 3rem 1rem; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section class="section_charge w-100 h-100">
|
||||
<section id="sec0" class="sec0 w-100 h-100 px-3">
|
||||
<div class="container h-100">
|
||||
<div class="row align-items-center h-100">
|
||||
<div class="col-4 align-self-end animated bounceInLeft">
|
||||
<img src="img/sprites/h3.png" class="mx-auto d-block" alt="">
|
||||
</div>
|
||||
<div class="col-8 animated zoomIn">
|
||||
<div class="card card_intro shadow p-3">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-2 text-center">
|
||||
<p class="text-rojo-1 f33"><b><i>¡Bienvenido a la Evaluación final!</i></b></p>
|
||||
</div>
|
||||
<div class="col-12 mb-3">
|
||||
<p>
|
||||
Para concluir con tu curso, queremos invitarte a resolver la siguiente <b>evaluación</b>, en la cual deberás tomar la <b>mejor decisión</b>.
|
||||
</p>
|
||||
<p>
|
||||
Para hacerlo, lee con atención cada pregunta y selecciona la opción que consideres correcta.
|
||||
</p>
|
||||
<div class="w-100 text-center mb-3">
|
||||
<div class="badge badge-secondary mx-auto intento text-center">1 de 6</div>
|
||||
<body>
|
||||
<section class="section_charge w-100 h-100">
|
||||
<section id="sec0" class="sec0 w-100 h-100 px-3">
|
||||
<div class="container h-100">
|
||||
<div class="row align-items-center h-100">
|
||||
<div class="col-4 align-self-end animated bounceInLeft">
|
||||
<img src="img/sprites/h3.png" class="mx-auto d-block" alt="" />
|
||||
</div>
|
||||
<div class="col-8 animated zoomIn">
|
||||
<div class="card card_intro shadow p-3">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-2 text-center">
|
||||
<p class="text-rojo-1 f33">
|
||||
<b><i>¡Bienvenido a la Evaluación final!</i></b>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12 mb-3">
|
||||
<p>
|
||||
Para concluir con tu curso, queremos invitarte a resolver la siguiente
|
||||
<b>evaluación</b>
|
||||
, en la cual deberás tomar la
|
||||
<b>mejor decisión</b>
|
||||
.
|
||||
</p>
|
||||
<p>Para hacerlo, lee con atención cada pregunta y selecciona la opción que consideres correcta.</p>
|
||||
<div class="w-100 text-center mb-3">
|
||||
<div class="badge badge-secondary mx-auto intento text-center">1 de 6</div>
|
||||
</div>
|
||||
<p class="text-center f30 text-rojo-1"><b>¡Éxito!</b></p>
|
||||
</div>
|
||||
<p class="text-center f30 text-rojo-1"><b>¡Éxito!</b></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn_">
|
||||
<img src="img/template/btn-comenzar.svg" width="223" height="76" class="btn_comenzar" style="display: none;">
|
||||
<div class="btn_">
|
||||
<img
|
||||
src="img/template/btn-comenzar.svg"
|
||||
width="223"
|
||||
height="76"
|
||||
class="btn_comenzar"
|
||||
style="display: none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="sec1" class="sec1 w-100 h-100 px-3 pt-4">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 mb-1 mt-3">
|
||||
<p>
|
||||
<b class="text-rojo-2">Instrucciones:</b> lee atentamente cada una de las situaciones que se te presentan y selecciona el tipo de operación al cual corresponden.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-7 bg_actividad text-white py-3">
|
||||
<div class="qtxt d-flex flex-row">
|
||||
<div class="number px-3 font-weight-bold f28" style="padding-right: 10px;text-align: center;padding-left: 1px;"></div>
|
||||
<div class="txt"></div>
|
||||
</section>
|
||||
<section id="sec1" class="sec1 w-100 h-100 px-3 pt-4">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 mb-1 mt-3">
|
||||
<p>
|
||||
<b class="text-rojo-2">Instrucciones:</b>
|
||||
lee atentamente cada una de las situaciones que se te presentan y selecciona el tipo de operación al
|
||||
cual corresponden.
|
||||
</p>
|
||||
</div>
|
||||
<div class="row wopciones mt-3"></div>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<div class="col-4 text-center">
|
||||
<img src="img/sprites/marcos_actividad.png" alt="">
|
||||
<div class="row">
|
||||
<div class="col-7 bg_actividad text-white py-3">
|
||||
<div class="qtxt d-flex flex-row">
|
||||
<div
|
||||
class="number px-3 font-weight-bold f28"
|
||||
style="padding-right: 10px; text-align: center; padding-left: 1px"
|
||||
></div>
|
||||
<div class="txt"></div>
|
||||
</div>
|
||||
<div class="row wopciones mt-3"></div>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<div class="col-4 text-center">
|
||||
<img src="img/sprites/marcos_actividad.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="sec2" class="sec2 w-100 h-100 px-3" style="display: none;">
|
||||
<div class="container h-100">
|
||||
<div class="row align-items-center h-100">
|
||||
<div class="col-7 ">
|
||||
<div class="card bg-transparent p-2 shadow-none border-0">
|
||||
<div class="row">
|
||||
<!-- <div class="col-12 text-center mb-2">
|
||||
</section>
|
||||
<section id="sec2" class="sec2 w-100 h-100 px-3" style="display: none">
|
||||
<div class="container h-100">
|
||||
<div class="row align-items-center h-100">
|
||||
<div class="col-7">
|
||||
<div class="card bg-transparent p-2 shadow-none border-0">
|
||||
<div class="row">
|
||||
<!-- <div class="col-12 text-center mb-2">
|
||||
<img class="img_change">
|
||||
</div> -->
|
||||
<div class="col-12 text-center">
|
||||
<div class="txt_final"></div>
|
||||
<div class="cuadro_gris wcars">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-2">
|
||||
<div class="cuadro_naranja pl-1">
|
||||
<div class="row align-items-center justify-content-center w-100 h-100">
|
||||
<div class="col-7 text-left">Total de preguntas:</div>
|
||||
<div id="totalp" class="col-3"></div>
|
||||
<div class="col-12 text-center">
|
||||
<div class="txt_final"></div>
|
||||
<div class="cuadro_gris wcars">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-2">
|
||||
<div class="cuadro_naranja pl-1">
|
||||
<div class="row align-items-center justify-content-center w-100 h-100">
|
||||
<div class="col-7 text-left">Total de preguntas:</div>
|
||||
<div id="totalp" class="col-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-2">
|
||||
<div class="cuadro_naranja">
|
||||
<div class="row align-items-center justify-content-center w-100 h-100">
|
||||
<div class="col-7 text-left">Correctas:</div>
|
||||
<div id="totalc" class="col-3"></div>
|
||||
<div class="col-12 mb-2">
|
||||
<div class="cuadro_naranja">
|
||||
<div class="row align-items-center justify-content-center w-100 h-100">
|
||||
<div class="col-7 text-left">Correctas:</div>
|
||||
<div id="totalc" class="col-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-2">
|
||||
<div class="cuadro_naranja">
|
||||
<div class="row align-items-center justify-content-center w-100 h-100">
|
||||
<div class="col-7 text-left">Incorrectas:</div>
|
||||
<div id="totali" class="col-3"></div>
|
||||
<div class="col-12 mb-2">
|
||||
<div class="cuadro_naranja">
|
||||
<div class="row align-items-center justify-content-center w-100 h-100">
|
||||
<div class="col-7 text-left">Incorrectas:</div>
|
||||
<div id="totali" class="col-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-2">
|
||||
<div class="cuadro_naranja">
|
||||
<div class="row align-items-center justify-content-center w-100 h-100">
|
||||
<div class="col-7 text-left">Calificación:</div>
|
||||
<div id="cal" class="col-3"></div>
|
||||
<div class="col-12 mb-2">
|
||||
<div class="cuadro_naranja">
|
||||
<div class="row align-items-center justify-content-center w-100 h-100">
|
||||
<div class="col-7 text-left">Calificación:</div>
|
||||
<div id="cal" class="col-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<img src="img/actividad/btn_reintentar.svg" width="367" height="87" class="btn_re d-none">
|
||||
</div>
|
||||
<div class="col-12 leyenda" style="font-size: 16px;">
|
||||
<p><em>MAPFRE México S.A. / MAPFRE Fianzas S.A., emite el presente certificado en cumplimiento a las Disposiciones Quincuagésima Segunda, en relación con la Quincuagésima Primera, del acuerdo por el que se emiten las disposiciones de Carácter General a que se refiere el Art. 492 de la Ley de Instituciones de Seguros y de Fianzas aplicables a instituciones y sociedades mutualistas de seguros, publicado en el Diario Oficial de la Federación el 19 de Noviembre del 2020.</em></p>
|
||||
<div class="col-12 text-center">
|
||||
<img src="img/actividad/btn_reintentar.svg" width="367" height="87" class="btn_re d-none" />
|
||||
</div>
|
||||
<div class="col-12 leyenda" style="font-size: 16px">
|
||||
<p>
|
||||
<em>
|
||||
Mapfre México S.A. / Mapfre Fianzas S.A., emite el presente certificado en cumplimiento a
|
||||
las Disposiciones Quincuagésima Segunda, en relación con la Quincuagésima
|
||||
Primera, del acuerdo por el que se emiten las disposiciones de Carácter General a que se
|
||||
refiere el Art. 492 de la Ley de Instituciones de Seguros y de Fianzas aplicables a
|
||||
instituciones y sociedades mutualistas de seguros, publicado en el Diario Oficial de la
|
||||
Federación el 19 de Noviembre del 2020.
|
||||
</em>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-5 text-center align-self-end">
|
||||
<img src="img/sprites/h3.png" class="personaje_good d-none" alt="">
|
||||
<img src="img/sprites/h6.png" class="personaje_bad d-none" alt="">
|
||||
<div class="col-5 text-center align-self-end">
|
||||
<img src="img/sprites/h3.png" class="personaje_good d-none" alt="" />
|
||||
<img src="img/sprites/h6.png" class="personaje_bad d-none" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</body>
|
||||
<div class="d-none">
|
||||
<div id="pop0" class="w-100 h-100">
|
||||
<div class="container-fluid pt-2">
|
||||
<div class="row w-100 h-100 align-items-center justify-content-center">
|
||||
<div class="col-12 text-white text-center">
|
||||
<img src="img/actividad/3.png" alt="">
|
||||
</body>
|
||||
<div class="d-none">
|
||||
<div id="pop0" class="w-100 h-100">
|
||||
<div class="container-fluid pt-2">
|
||||
<div class="row w-100 h-100 align-items-center justify-content-center">
|
||||
<div class="col-12 text-white text-center">
|
||||
<img src="img/actividad/3.png" alt="" />
|
||||
</div>
|
||||
<div class="col-8 text-white mt-3">
|
||||
<h4 class="text-center">¡Muy bien!</h4>
|
||||
<div class="txt_retro_bien"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8 text-white mt-3">
|
||||
<h4 class="text-center">¡Muy bien!</h4>
|
||||
<div class="txt_retro_bien"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop1" class="w-100 h-100">
|
||||
<div class="container-fluid pt-2">
|
||||
<div class="row w-100 h-100 align-items-center justify-content-center">
|
||||
<div class="col-12 text-white text-center">
|
||||
<img src="img/actividad/4.png" alt="" />
|
||||
</div>
|
||||
<div class="col-8 text-white mt-3">
|
||||
<h4 class="text-center">¡Incorrecto!</h4>
|
||||
<div class="txt_retro_mal"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop1" class="w-100 h-100">
|
||||
<div class="container-fluid pt-2">
|
||||
<div class="row w-100 h-100 align-items-center justify-content-center">
|
||||
<div class="col-12 text-white text-center">
|
||||
<img src="img/actividad/4.png" alt="">
|
||||
</div>
|
||||
<div class="col-8 text-white mt-3">
|
||||
<h4 class="text-center">¡Incorrecto!</h4>
|
||||
<div class="txt_retro_mal"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</html>
|
||||
<script>
|
||||
|
||||
jQuery(document).ready(function($) {
|
||||
/**************************************/
|
||||
var max_intentos_mapfre = 6;
|
||||
var intentos = getLocation();
|
||||
var score = getScore();
|
||||
/****************************************/
|
||||
var preguntas;
|
||||
var quiz_object = new Object();
|
||||
instruccion(0);
|
||||
var audio24 = newSound("audio/Audio_24_Marcos.mp3");
|
||||
|
||||
quiz_object.preguntaActual = 0;
|
||||
quiz_object.maxPreguntas = 0;
|
||||
quiz_object.correctas = 0;
|
||||
quiz_object.incorrectas = 0;
|
||||
quiz_object.oportunidades = 2;
|
||||
$(".layer-load").show();
|
||||
$(document.querySelector('.wcontainer')).waitForImages({
|
||||
finished: function() {
|
||||
$(".section_charge").css("visibility", "visible");
|
||||
$(".wloader").hide();
|
||||
if (intentos >= max_intentos_mapfre || score >= 80) {
|
||||
resumen()
|
||||
} else {
|
||||
var disponesde = Number(max_intentos_mapfre - intentos);
|
||||
if (disponesde == 1) {
|
||||
$(".intento").html(disponesde + " intento restante");
|
||||
} else {
|
||||
$(".intento").html(disponesde + " intentos restantes");
|
||||
}
|
||||
stopAllSoundsAndPlay(audio24);
|
||||
}
|
||||
},
|
||||
each: function(loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$(".wloader").show();
|
||||
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
audio24.on("play", function() {
|
||||
$(".personaje").addClass('play');
|
||||
});
|
||||
|
||||
audio24.on("end", function() {
|
||||
$(".personaje").removeClass('play').addClass('stop');
|
||||
instruccion(2);
|
||||
$(".btn_comenzar").show();
|
||||
$(".btn_comenzar").addClass('animated pulse infinite');
|
||||
|
||||
});
|
||||
|
||||
ImportFile();
|
||||
function ImportFile() {
|
||||
$(".quiz-loader").show();
|
||||
var excelUrl = "excel/evaluacion.xlsx";
|
||||
var oReq = new XMLHttpRequest();
|
||||
oReq.open("GET", excelUrl, true);
|
||||
oReq.responseType = "arraybuffer";
|
||||
oReq.onload = function(e) {
|
||||
var arraybuffer = oReq.response;
|
||||
var data = new Uint8Array(arraybuffer);
|
||||
var arr = new Array();
|
||||
for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
|
||||
var bstr = arr.join("");
|
||||
var workbook = XLSX.read(bstr, { type: "binary" });
|
||||
var first_sheet_name = workbook.SheetNames[0];
|
||||
var worksheet = workbook.Sheets[first_sheet_name];
|
||||
preguntas = XLSX.utils.sheet_to_json(worksheet, { raw: false });
|
||||
//shuffleArray(preguntas);
|
||||
transformer_options();
|
||||
quiz_object.preguntas = preguntas;
|
||||
//console.dir(quiz_object.preguntas);
|
||||
if (quiz_object.maxPreguntas == 0) { quiz_object.maxPreguntas = quiz_object.preguntas.length; }
|
||||
|
||||
|
||||
}
|
||||
oReq.send();
|
||||
}
|
||||
|
||||
function transformer_options() {
|
||||
$.each(preguntas, function(index, pregunta) {
|
||||
var opciones = new Array();
|
||||
$.each(Object.keys(pregunta), function(index, key) {
|
||||
if (key.toLowerCase().indexOf("opcion") >= 0) {
|
||||
var opcion = new Object();
|
||||
opcion.text = pregunta[key];
|
||||
if (key.toLowerCase().indexOf("correcta") >= 0) {
|
||||
opcion.valor = 1;
|
||||
} else {
|
||||
opcion.valor = 0;
|
||||
}
|
||||
opciones.push(opcion);
|
||||
}
|
||||
});
|
||||
pregunta.opciones = shuffleArray(opciones);
|
||||
});
|
||||
}
|
||||
|
||||
function shuffleArray(array) {
|
||||
for (var i = array.length - 1; i > 0; i--) {
|
||||
var j = Math.floor(Math.random() * (i + 1));
|
||||
var temp = array[i];
|
||||
array[i] = array[j];
|
||||
array[j] = temp;
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
$(".btn_comenzar").click(function(event) {
|
||||
__click.play();
|
||||
setLocation(Number(intentos + 1));
|
||||
$(this).removeClass('animated pulse infinite');
|
||||
instruccion(8);
|
||||
$(".sec0").hide();
|
||||
$(".sec1").show();
|
||||
|
||||
siguientePregunta();
|
||||
});
|
||||
|
||||
function siguientePregunta() {
|
||||
// body...
|
||||
instruccion(8);
|
||||
var pregunta = quiz_object.preguntas[quiz_object.preguntaActual];
|
||||
$(".qtxt").find(".txt").html(pregunta.pregunta);
|
||||
$(".number").html(quiz_object.preguntaActual + 1);
|
||||
$(".wopciones").html("");
|
||||
$(".btn-enviar").hide();
|
||||
$(".btn-siguiente-quiz").hide();
|
||||
$.each(pregunta.opciones, function(index, opcion) {
|
||||
$(".wopciones").append('<div class="col-12 pl-4 wopciones-info mb-1" style="opacity:0;">' +
|
||||
'<div data-val="' + opcion.valor + '" class="opcion">' + opcion.text +
|
||||
'</div></div>');
|
||||
});
|
||||
TweenMax.staggerFromTo(".wopciones-info", 0.5, { opacity: 0, x: -250 }, { opacity: 1, x: 0 }, 0.25);
|
||||
$(".opcion").click(function(event) {
|
||||
quiz_object.preguntaActual++;
|
||||
__click.play();
|
||||
$(".opcion").removeClass('selected');
|
||||
$(this).addClass('selected');
|
||||
$(".txt_retro_bien").html(pregunta.retro_correcta);
|
||||
$(".txt_retro_mal").html(pregunta.retro_incorrecta);
|
||||
var valor = $(this).data("val");
|
||||
if (Number(valor) > 0) {
|
||||
quiz_object.correctas++;
|
||||
if (quiz_object.preguntaActual >= quiz_object.maxPreguntas) {
|
||||
finActividad();
|
||||
} else {
|
||||
siguientePregunta();
|
||||
}
|
||||
} else {
|
||||
quiz_object.incorrectas++;
|
||||
if (quiz_object.preguntaActual >= quiz_object.maxPreguntas) {
|
||||
finActividad();
|
||||
} else {
|
||||
siguientePregunta();
|
||||
}
|
||||
}
|
||||
console.log(quiz_object.preguntaActual);
|
||||
|
||||
|
||||
$(".btn-siguiente-quiz").show();
|
||||
//quiz_object.preguntaActual++;
|
||||
});
|
||||
}
|
||||
|
||||
function finActividad() {
|
||||
// body...
|
||||
$(".sec1").hide();
|
||||
$(".sec2").show();
|
||||
var calificacion = (quiz_object.correctas * 100) / quiz_object.maxPreguntas;
|
||||
calificacion = Math.floor(Math.round(calificacion * 100) / 100);
|
||||
$("#totalp").html(quiz_object.maxPreguntas);
|
||||
$("#totalc").html(quiz_object.correctas);
|
||||
$("#totali").html(quiz_object.incorrectas);
|
||||
$("#cal").html(calificacion + "%");
|
||||
|
||||
intentos = getLocation();
|
||||
setScore(calificacion);
|
||||
|
||||
|
||||
if (calificacion >= 80) {
|
||||
$(".sec2").addClass('good');
|
||||
//$(".img_change").attr("src","img/actividad2/7.png");
|
||||
$(".txt_final").html("<h4 class='text-rojo-1 text-center'>¡Felicidades!</h4><p>¡Has conseguido responder correctamente tu evaluación! Estamos seguros que con tu ayuda podremos prevenir y detectar operaciones con recursos de procedencia ilícita.</p>");
|
||||
$('.personaje_good').removeClass('d-none');
|
||||
$(".leyenda").addClass('mt-2');
|
||||
$(".leyenda").css("color","#333");
|
||||
instruccion(1);
|
||||
instruccion(13);
|
||||
setLessonStatus("completed");
|
||||
|
||||
} else {
|
||||
$(".leyenda").addClass('text-white');
|
||||
if (intentos >= max_intentos_mapfre) {
|
||||
setLessonStatus("completed");
|
||||
//setLessonStatus("c");
|
||||
$(".sec2").addClass('bad');
|
||||
//$(".img_change").attr("src","img/actividad2/6.png");
|
||||
$(".txt_final").html("<h4 class='text-rojo-1 text-center'>Lo sentimos</h4><p class='text-white'>, se han agotado los intentos.</p>");
|
||||
$('.personaje_bad').removeClass('d-none');
|
||||
$(".leyenda").addClass('mt-2');
|
||||
$(".leyenda").css("color","#333");
|
||||
//$(".btn_re").removeClass('d-none');
|
||||
instruccion(1);
|
||||
instruccion(13);
|
||||
} else {
|
||||
$(".sec2").addClass('bad');
|
||||
//$(".img_change").attr("src","img/actividad2/6.png");
|
||||
$(".txt_final").html("<h4 class='text-rojo-1 text-center'>Lo sentimos</h4><p class='text-white'>En esta oportunidad no has conseguido responder de manera exitosa la evaluación, pero no te preocupes, puedes intentarlo de nuevo.</p>");
|
||||
$('.personaje_bad').removeClass('d-none');
|
||||
$(".leyenda").addClass('text-white');
|
||||
$(".btn_re").removeClass('d-none');
|
||||
instruccion(15);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$(".btn_re").click(function(event) {
|
||||
__click.play();
|
||||
__loadsco();
|
||||
});
|
||||
|
||||
function resumen() {
|
||||
$(".sec0, .wcars").hide();
|
||||
$(".sec1").hide();
|
||||
$(".sec2").show();
|
||||
jQuery(document).ready(function ($) {
|
||||
/**************************************/
|
||||
var max_intentos_mapfre = 6;
|
||||
var intentos = getLocation();
|
||||
var score = getScore();
|
||||
$(".txt_final").html("<p>Calificación reportada: <b>" + score + "%</b></p>");
|
||||
if (score >= 80) {
|
||||
$(".sec2").addClass('good');
|
||||
$(".personaje_good").removeClass("d-none");
|
||||
$(".leyenda").addClass('mt-2');
|
||||
$(".leyenda").css("color","#333");
|
||||
}
|
||||
else{
|
||||
$(".sec2").addClass('bad');
|
||||
$(".personaje_bad").removeClass("d-none");
|
||||
$(".txt_final").addClass('text-white')
|
||||
$(".leyenda").addClass('text-white mt-2');
|
||||
}
|
||||
instruccion(13);
|
||||
}
|
||||
/****************************************/
|
||||
var preguntas;
|
||||
var quiz_object = new Object();
|
||||
instruccion(0);
|
||||
var audio24 = newSound('audio/Audio_24_Marcos.mp3');
|
||||
|
||||
});
|
||||
</script>
|
||||
quiz_object.preguntaActual = 0;
|
||||
quiz_object.maxPreguntas = 0;
|
||||
quiz_object.correctas = 0;
|
||||
quiz_object.incorrectas = 0;
|
||||
quiz_object.oportunidades = 2;
|
||||
$('.layer-load').show();
|
||||
$(document.querySelector('.wcontainer')).waitForImages({
|
||||
finished: function () {
|
||||
$('.section_charge').css('visibility', 'visible');
|
||||
$('.wloader').hide();
|
||||
if (intentos >= max_intentos_mapfre || score >= 80) {
|
||||
resumen();
|
||||
} else {
|
||||
var disponesde = Number(max_intentos_mapfre - intentos);
|
||||
if (disponesde == 1) {
|
||||
$('.intento').html(disponesde + ' intento restante');
|
||||
} else {
|
||||
$('.intento').html(disponesde + ' intentos restantes');
|
||||
}
|
||||
stopAllSoundsAndPlay(audio24);
|
||||
}
|
||||
},
|
||||
each: function (loaded, count, success) {
|
||||
var total = Math.floor((loaded * 100) / count);
|
||||
$('.wloader').show();
|
||||
},
|
||||
waitForAll: true
|
||||
});
|
||||
|
||||
audio24.on('play', function () {
|
||||
$('.personaje').addClass('play');
|
||||
});
|
||||
|
||||
audio24.on('end', function () {
|
||||
$('.personaje').removeClass('play').addClass('stop');
|
||||
instruccion(2);
|
||||
$('.btn_comenzar').show();
|
||||
$('.btn_comenzar').addClass('animated pulse infinite');
|
||||
});
|
||||
|
||||
ImportFile();
|
||||
function ImportFile() {
|
||||
$('.quiz-loader').show();
|
||||
var excelUrl = 'excel/evaluacion.xlsx';
|
||||
var oReq = new XMLHttpRequest();
|
||||
oReq.open('GET', excelUrl, true);
|
||||
oReq.responseType = 'arraybuffer';
|
||||
oReq.onload = function (e) {
|
||||
var arraybuffer = oReq.response;
|
||||
var data = new Uint8Array(arraybuffer);
|
||||
var arr = new Array();
|
||||
for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
|
||||
var bstr = arr.join('');
|
||||
var workbook = XLSX.read(bstr, { type: 'binary' });
|
||||
var first_sheet_name = workbook.SheetNames[0];
|
||||
var worksheet = workbook.Sheets[first_sheet_name];
|
||||
preguntas = XLSX.utils.sheet_to_json(worksheet, { raw: false });
|
||||
//shuffleArray(preguntas);
|
||||
transformer_options();
|
||||
quiz_object.preguntas = preguntas;
|
||||
//console.dir(quiz_object.preguntas);
|
||||
if (quiz_object.maxPreguntas == 0) {
|
||||
quiz_object.maxPreguntas = quiz_object.preguntas.length;
|
||||
}
|
||||
};
|
||||
oReq.send();
|
||||
}
|
||||
|
||||
function transformer_options() {
|
||||
$.each(preguntas, function (index, pregunta) {
|
||||
var opciones = new Array();
|
||||
$.each(Object.keys(pregunta), function (index, key) {
|
||||
if (key.toLowerCase().indexOf('opcion') >= 0) {
|
||||
var opcion = new Object();
|
||||
opcion.text = pregunta[key];
|
||||
if (key.toLowerCase().indexOf('correcta') >= 0) {
|
||||
opcion.valor = 1;
|
||||
} else {
|
||||
opcion.valor = 0;
|
||||
}
|
||||
opciones.push(opcion);
|
||||
}
|
||||
});
|
||||
pregunta.opciones = shuffleArray(opciones);
|
||||
});
|
||||
}
|
||||
|
||||
function shuffleArray(array) {
|
||||
for (var i = array.length - 1; i > 0; i--) {
|
||||
var j = Math.floor(Math.random() * (i + 1));
|
||||
var temp = array[i];
|
||||
array[i] = array[j];
|
||||
array[j] = temp;
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
$('.btn_comenzar').click(function (event) {
|
||||
__click.play();
|
||||
setLocation(Number(intentos + 1));
|
||||
$(this).removeClass('animated pulse infinite');
|
||||
instruccion(8);
|
||||
$('.sec0').hide();
|
||||
$('.sec1').show();
|
||||
|
||||
siguientePregunta();
|
||||
});
|
||||
|
||||
function siguientePregunta() {
|
||||
// body...
|
||||
instruccion(8);
|
||||
var pregunta = quiz_object.preguntas[quiz_object.preguntaActual];
|
||||
$('.qtxt').find('.txt').html(pregunta.pregunta);
|
||||
$('.number').html(quiz_object.preguntaActual + 1);
|
||||
$('.wopciones').html('');
|
||||
$('.btn-enviar').hide();
|
||||
$('.btn-siguiente-quiz').hide();
|
||||
$.each(pregunta.opciones, function (index, opcion) {
|
||||
$('.wopciones').append(
|
||||
'<div class="col-12 pl-4 wopciones-info mb-1" style="opacity:0;">' +
|
||||
'<div data-val="' +
|
||||
opcion.valor +
|
||||
'" class="opcion">' +
|
||||
opcion.text +
|
||||
'</div></div>'
|
||||
);
|
||||
});
|
||||
TweenMax.staggerFromTo('.wopciones-info', 0.5, { opacity: 0, x: -250 }, { opacity: 1, x: 0 }, 0.25);
|
||||
$('.opcion').click(function (event) {
|
||||
quiz_object.preguntaActual++;
|
||||
__click.play();
|
||||
$('.opcion').removeClass('selected');
|
||||
$(this).addClass('selected');
|
||||
$('.txt_retro_bien').html(pregunta.retro_correcta);
|
||||
$('.txt_retro_mal').html(pregunta.retro_incorrecta);
|
||||
var valor = $(this).data('val');
|
||||
if (Number(valor) > 0) {
|
||||
quiz_object.correctas++;
|
||||
if (quiz_object.preguntaActual >= quiz_object.maxPreguntas) {
|
||||
finActividad();
|
||||
} else {
|
||||
siguientePregunta();
|
||||
}
|
||||
} else {
|
||||
quiz_object.incorrectas++;
|
||||
if (quiz_object.preguntaActual >= quiz_object.maxPreguntas) {
|
||||
finActividad();
|
||||
} else {
|
||||
siguientePregunta();
|
||||
}
|
||||
}
|
||||
console.log(quiz_object.preguntaActual);
|
||||
|
||||
$('.btn-siguiente-quiz').show();
|
||||
//quiz_object.preguntaActual++;
|
||||
});
|
||||
}
|
||||
|
||||
function finActividad() {
|
||||
// body...
|
||||
$('.sec1').hide();
|
||||
$('.sec2').show();
|
||||
var calificacion = (quiz_object.correctas * 100) / quiz_object.maxPreguntas;
|
||||
calificacion = Math.floor(Math.round(calificacion * 100) / 100);
|
||||
$('#totalp').html(quiz_object.maxPreguntas);
|
||||
$('#totalc').html(quiz_object.correctas);
|
||||
$('#totali').html(quiz_object.incorrectas);
|
||||
$('#cal').html(calificacion + '%');
|
||||
|
||||
intentos = getLocation();
|
||||
setScore(calificacion);
|
||||
|
||||
if (calificacion >= 80) {
|
||||
$('.sec2').addClass('good');
|
||||
//$(".img_change").attr("src","img/actividad2/7.png");
|
||||
$('.txt_final').html(
|
||||
"<h4 class='text-rojo-1 text-center'>¡Felicidades!</h4><p>¡Has conseguido responder correctamente tu evaluación! Estamos seguros que con tu ayuda podremos prevenir y detectar operaciones con recursos de procedencia ilícita.</p>"
|
||||
);
|
||||
$('.personaje_good').removeClass('d-none');
|
||||
$('.leyenda').addClass('mt-2');
|
||||
$('.leyenda').css('color', '#333');
|
||||
instruccion(1);
|
||||
instruccion(13);
|
||||
setLessonStatus('completed');
|
||||
} else {
|
||||
$('.leyenda').addClass('text-white');
|
||||
if (intentos >= max_intentos_mapfre) {
|
||||
setLessonStatus('completed');
|
||||
//setLessonStatus("c");
|
||||
$('.sec2').addClass('bad');
|
||||
//$(".img_change").attr("src","img/actividad2/6.png");
|
||||
$('.txt_final').html(
|
||||
"<h4 class='text-rojo-1 text-center'>Lo sentimos</h4><p class='text-white'>, se han agotado los intentos.</p>"
|
||||
);
|
||||
$('.personaje_bad').removeClass('d-none');
|
||||
$('.leyenda').addClass('mt-2');
|
||||
$('.leyenda').css('color', '#333');
|
||||
//$(".btn_re").removeClass('d-none');
|
||||
instruccion(1);
|
||||
instruccion(13);
|
||||
} else {
|
||||
$('.sec2').addClass('bad');
|
||||
//$(".img_change").attr("src","img/actividad2/6.png");
|
||||
$('.txt_final').html(
|
||||
"<h4 class='text-rojo-1 text-center'>Lo sentimos</h4><p class='text-white'>En esta oportunidad no has conseguido responder de manera exitosa la evaluación, pero no te preocupes, puedes intentarlo de nuevo.</p>"
|
||||
);
|
||||
$('.personaje_bad').removeClass('d-none');
|
||||
$('.leyenda').addClass('text-white');
|
||||
$('.btn_re').removeClass('d-none');
|
||||
instruccion(15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$('.btn_re').click(function (event) {
|
||||
__click.play();
|
||||
__loadsco();
|
||||
});
|
||||
|
||||
function resumen() {
|
||||
$('.sec0, .wcars').hide();
|
||||
$('.sec1').hide();
|
||||
$('.sec2').show();
|
||||
var score = getScore();
|
||||
$('.txt_final').html('<p>Calificación reportada: <b>' + score + '%</b></p>');
|
||||
if (score >= 80) {
|
||||
$('.sec2').addClass('good');
|
||||
$('.personaje_good').removeClass('d-none');
|
||||
$('.leyenda').addClass('mt-2');
|
||||
$('.leyenda').css('color', '#333');
|
||||
} else {
|
||||
$('.sec2').addClass('bad');
|
||||
$('.personaje_bad').removeClass('d-none');
|
||||
$('.txt_final').addClass('text-white');
|
||||
$('.leyenda').addClass('text-white mt-2');
|
||||
}
|
||||
instruccion(13);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 682 B After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 287 B After Width: | Height: | Size: 754 B |
Binary file not shown.
|
Before Width: | Height: | Size: 289 B After Width: | Height: | Size: 438 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 53 KiB |
+229
-222
@@ -1,236 +1,244 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="es">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1" />
|
||||
<title>MAPFRE</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/sweetalert2.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/borderless.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/all.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="webfonts/muli/stylesheet.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/x.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/colors.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/sprites.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/mysprites.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/site.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/sweetalert2.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/borderless.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/all.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="webfonts/muli/stylesheet.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/x.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/colors.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/sprites.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/mysprites.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/site.css" />
|
||||
<style type="text/css">
|
||||
.wmenu.open {
|
||||
left: 0;
|
||||
height: 874px;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
overflow: auto;
|
||||
}
|
||||
.header {
|
||||
background-size: 100%;
|
||||
height: 75px;
|
||||
}
|
||||
.footer {
|
||||
height: 71px;
|
||||
bottom: -4px;
|
||||
}
|
||||
.sco {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: calc(100% - (68px + 75px));
|
||||
top: 75px;
|
||||
}
|
||||
.sco.hasvideo {
|
||||
top: 5px;
|
||||
height: 100%;
|
||||
}
|
||||
.subtenma {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 80px;
|
||||
padding: .325em;
|
||||
background-color: #A60000;
|
||||
border-top-right-radius: 15px;
|
||||
border-bottom-right-radius: 15px;
|
||||
color: #FFF;
|
||||
-webkit-transition: all 0.5s ease-out;
|
||||
-moz-transition: all 0.5s ease-out;
|
||||
-o-transition: all 0.5s ease-out;
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
.subtenma.abierto {
|
||||
left: 0!important;
|
||||
}
|
||||
div.subtenma > div.btn-show-subs > i.far.fa-chevron-right {
|
||||
display: inline;
|
||||
}
|
||||
div.subtenma > div.btn-show-subs > i.far.fa-chevron-left {
|
||||
display: none;
|
||||
}
|
||||
.soportemenu {
|
||||
background-color: #737373;
|
||||
height: 80px;
|
||||
right: 20px;
|
||||
top: 0;
|
||||
border-bottom-left-radius: 30px;
|
||||
border-bottom-right-radius: 30px;
|
||||
}
|
||||
.__paginacion {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 139px;
|
||||
font-weight: bold;
|
||||
font-size: 35px;
|
||||
}
|
||||
.instruccionsco {
|
||||
border: red solid 2px;
|
||||
border-top-left-radius: 15px;
|
||||
border-bottom-left-radius: 15px;
|
||||
bottom: 0;
|
||||
z-index: 1103;
|
||||
top: auto;
|
||||
}
|
||||
.footer .wnavs {
|
||||
height: 67px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
width: 358px;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
position: absolute;
|
||||
}
|
||||
.btn__atras {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.btn__siguiente {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.__paginacion {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: 139px;
|
||||
font-weight: bold;
|
||||
font-size: 35px;
|
||||
color: #616A73;
|
||||
}
|
||||
.wmenu {
|
||||
position: absolute;
|
||||
z-index: 90;
|
||||
height: 100% !important;
|
||||
width: 100%;
|
||||
left: -100%;
|
||||
background-color: #00263A;
|
||||
-webkit-transition: all 0.2s ease-out;
|
||||
-moz-transition: all 0.2s ease-out;
|
||||
-o-transition: all 0.2s ease-out;
|
||||
transition: all 0.2s ease-out;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
justify-content: space-around;
|
||||
align-items: flex-start;
|
||||
z-index: 1104 !important;
|
||||
}
|
||||
.wcontainer .swal2-content {
|
||||
font-size: 24px;
|
||||
}
|
||||
.mute::after {
|
||||
content: '\f05e';
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
z-index: 5;
|
||||
font-family: "Font Awesome 5 Pro";
|
||||
left: 27px;
|
||||
font-size: 2.5em;
|
||||
color: #FFF;
|
||||
top: -5px;
|
||||
}
|
||||
.wmenu.open {
|
||||
left: 0;
|
||||
height: 874px;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
overflow: auto;
|
||||
}
|
||||
.header {
|
||||
background-size: 100%;
|
||||
height: 75px;
|
||||
}
|
||||
.footer {
|
||||
height: 71px;
|
||||
bottom: -4px;
|
||||
}
|
||||
.sco {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: calc(100% - (68px + 75px));
|
||||
top: 75px;
|
||||
}
|
||||
.sco.hasvideo {
|
||||
top: 5px;
|
||||
height: 100%;
|
||||
}
|
||||
.subtenma {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 80px;
|
||||
padding: 0.325em;
|
||||
background-color: #a60000;
|
||||
border-top-right-radius: 15px;
|
||||
border-bottom-right-radius: 15px;
|
||||
color: #fff;
|
||||
-webkit-transition: all 0.5s ease-out;
|
||||
-moz-transition: all 0.5s ease-out;
|
||||
-o-transition: all 0.5s ease-out;
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
.subtenma.abierto {
|
||||
left: 0 !important;
|
||||
}
|
||||
div.subtenma > div.btn-show-subs > i.far.fa-chevron-right {
|
||||
display: inline;
|
||||
}
|
||||
div.subtenma > div.btn-show-subs > i.far.fa-chevron-left {
|
||||
display: none;
|
||||
}
|
||||
.soportemenu {
|
||||
background-color: #737373;
|
||||
height: 80px;
|
||||
right: 20px;
|
||||
top: 0;
|
||||
border-bottom-left-radius: 30px;
|
||||
border-bottom-right-radius: 30px;
|
||||
}
|
||||
.__paginacion {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 139px;
|
||||
font-weight: bold;
|
||||
font-size: 35px;
|
||||
}
|
||||
.instruccionsco {
|
||||
border: red solid 2px;
|
||||
border-top-left-radius: 15px;
|
||||
border-bottom-left-radius: 15px;
|
||||
bottom: 0;
|
||||
z-index: 1103;
|
||||
top: auto;
|
||||
}
|
||||
.footer .wnavs {
|
||||
height: 67px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
width: 358px;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
position: absolute;
|
||||
}
|
||||
.btn__atras {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.btn__siguiente {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.__paginacion {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: 139px;
|
||||
font-weight: bold;
|
||||
font-size: 35px;
|
||||
color: #616a73;
|
||||
}
|
||||
.wmenu {
|
||||
position: absolute;
|
||||
z-index: 90;
|
||||
height: 100% !important;
|
||||
width: 100%;
|
||||
left: -100%;
|
||||
background-color: #00263a;
|
||||
-webkit-transition: all 0.2s ease-out;
|
||||
-moz-transition: all 0.2s ease-out;
|
||||
-o-transition: all 0.2s ease-out;
|
||||
transition: all 0.2s ease-out;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
justify-content: space-around;
|
||||
align-items: flex-start;
|
||||
z-index: 1104 !important;
|
||||
}
|
||||
.wcontainer .swal2-content {
|
||||
font-size: 24px;
|
||||
}
|
||||
.mute::after {
|
||||
content: '\f05e';
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
z-index: 5;
|
||||
font-family: 'Font Awesome 5 Pro';
|
||||
left: 27px;
|
||||
font-size: 2.5em;
|
||||
color: #fff;
|
||||
top: -5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body>
|
||||
<div class="wcontainer" id="wcontainer">
|
||||
<div class="header position-absolute d-flex align-items-center px-2 bg-white shadow">
|
||||
<div class="row h-100 w-100 align-items-center">
|
||||
<div class="col-2 text-center">
|
||||
<img src="img/template/logo.png">
|
||||
</div>
|
||||
<div class="col-8 text-left" style="font-size: 30px;padding-left: 2rem;line-height: 31px;">
|
||||
<span class="nombredelcurso"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-self-end align-items-center soportemenu position-absolute">
|
||||
<div class="btn-menu-sco mx-3 btn__home">
|
||||
<img src="img/template/home.svg" width="40" height="40">
|
||||
</div>
|
||||
<div class="btn-menu-sco mx-3 btn__menu">
|
||||
<img src="img/template/menu.svg" width="40" height="40">
|
||||
</div>
|
||||
<div class="btn-menu-sco mx-3 btn__reload">
|
||||
<img src="img/template/recargar.svg" width="40" height="40">
|
||||
</div>
|
||||
</div>
|
||||
<div class="header position-absolute d-flex align-items-center px-2 bg-white shadow">
|
||||
<div class="row h-100 w-100 align-items-center">
|
||||
<div class="col-2 text-center">
|
||||
<img src="img/template/logo.png" class="img-fluid" />
|
||||
</div>
|
||||
<div class="col-8 text-left" style="font-size: 30px; padding-left: 2rem; line-height: 31px">
|
||||
<span class="nombredelcurso"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sco"></div>
|
||||
<div class="subtenma abierto d-flex align-items-center flex-row">
|
||||
<div class="subtematxt"></div>
|
||||
<div class="btn-show-subs pl-3 pr-1">
|
||||
<i class="far fa-chevron-left"></i>
|
||||
<i class="far fa-chevron-right"></i>
|
||||
</div>
|
||||
<div class="d-flex align-self-end align-items-center soportemenu position-absolute">
|
||||
<div class="btn-menu-sco mx-3 btn__home">
|
||||
<img src="img/template/home.svg" width="40" height="40" />
|
||||
</div>
|
||||
<div class="btn-menu-sco mx-3 btn__menu">
|
||||
<img src="img/template/menu.svg" width="40" height="40" />
|
||||
</div>
|
||||
<div class="btn-menu-sco mx-3 btn__reload">
|
||||
<img src="img/template/recargar.svg" width="40" height="40" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer position-absolute bg-white">
|
||||
<div class="btn__mute position-absolute btn-sound-control-sco" style="left: 0; top: 0;">
|
||||
<img src="img/template/sound.svg" height="68" class="">
|
||||
</div>
|
||||
|
||||
<div class="wnavs">
|
||||
<div class="btn-menu-sco btn__atras">
|
||||
<img src="img/template/prev.svg" height="68">
|
||||
</div>
|
||||
<div class="__paginacion">01/10</div>
|
||||
<div class="btn-menu-sco btn__siguiente">
|
||||
<img src="img/template/next.svg" height="68">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sco"></div>
|
||||
<div class="subtenma abierto d-flex align-items-center flex-row">
|
||||
<div class="subtematxt"></div>
|
||||
<div class="btn-show-subs pl-3 pr-1">
|
||||
<i class="far fa-chevron-left"></i>
|
||||
<i class="far fa-chevron-right"></i>
|
||||
</div>
|
||||
<div class="instruccionsco">
|
||||
<p>Da clic en siguiente</p>
|
||||
</div>
|
||||
<div class="footer position-absolute bg-white">
|
||||
<div class="btn__mute position-absolute btn-sound-control-sco" style="left: 0; top: 0">
|
||||
<img src="img/template/sound.svg" height="68" class="" />
|
||||
</div>
|
||||
<div class="wmenu flex-row pt-5">
|
||||
<img src="img/template/close.svg" width="54" height="46" class="position-absolute btn-close-menu" style="top: 23px;right: 50px;z-index: 55;">
|
||||
<div class="w-50 text-white p-3 d-flex flex-column" style="height: 696px; overflow-y: auto;">
|
||||
<div class="itemsmenu mb-2"></div>
|
||||
</div>
|
||||
<div class="avancesco w-50 align-items-center d-flex justify-content-center h-100">
|
||||
<div class="curso-progress"></div>
|
||||
</div>
|
||||
|
||||
<div class="wnavs">
|
||||
<div class="btn-menu-sco btn__atras">
|
||||
<img src="img/template/prev.svg" height="68" />
|
||||
</div>
|
||||
<div class="__paginacion">01/10</div>
|
||||
<div class="btn-menu-sco btn__siguiente">
|
||||
<img src="img/template/next.svg" height="68" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="wloader justify-content-center align-items-center flex-column bg-light">
|
||||
<div class="lds-roller">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="w-100 text-center loaderstatus">Cargando...</div>
|
||||
</div>
|
||||
<div class="instruccionsco">
|
||||
<p>Da clic en siguiente</p>
|
||||
</div>
|
||||
<div class="wmenu flex-row pt-5">
|
||||
<img
|
||||
src="img/template/close.svg"
|
||||
width="54"
|
||||
height="46"
|
||||
class="position-absolute btn-close-menu"
|
||||
style="top: 23px; right: 50px; z-index: 55"
|
||||
/>
|
||||
<div class="w-50 text-white p-3 d-flex flex-column" style="height: 696px; overflow-y: auto">
|
||||
<div class="itemsmenu mb-2"></div>
|
||||
</div>
|
||||
<div class="avancesco w-50 align-items-center d-flex justify-content-center h-100">
|
||||
<div class="curso-progress"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wloader justify-content-center align-items-center flex-column bg-light">
|
||||
<div class="lds-roller">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="w-100 text-center loaderstatus">Cargando...</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- js -->
|
||||
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?version=3.52.0&features=blissfuljs%2Cdefault%2Ces2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019%2Ces5%2Ces6%2Ces7"></script>
|
||||
<script
|
||||
crossorigin="anonymous"
|
||||
src="https://polyfill.io/v3/polyfill.min.js?version=3.52.0&features=blissfuljs%2Cdefault%2Ces2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019%2Ces5%2Ces6%2Ces7"
|
||||
></script>
|
||||
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<!--<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>-->
|
||||
<script src="js/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
@@ -249,6 +257,5 @@ div.subtenma > div.btn-show-subs > i.far.fa-chevron-left {
|
||||
<script src="js/instrucciones.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="js/site.js" type="text/javascript" charset="utf-8"></script>
|
||||
<!-- end js -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Reference in New Issue
Block a user