This commit is contained in:
2026-06-05 16:56:04 -06:00
parent 4858993c86
commit 05f2b55fce
30 changed files with 2174 additions and 1780 deletions
+8
View File
@@ -0,0 +1,8 @@
{
"folders": [
{
"path": "."
}
],
"settings": {}
}
+113 -65
View File
@@ -1,80 +1,128 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<style> <style>
.sec0 { background-image: url(img/fondos/bg2.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; } .sec0 {
.cuadro_navegacion { background-color: #00263a!important; border-radius: 25px; } background-image: url(img/fondos/bg2.jpg);
.cuadro_navegacion .card-header { border: 1px solid #657380; } background-repeat: no-repeat;
.btn_ponter { cursor: pointer; position: absolute; } background-size: cover;
.buttonss0 { left: -69px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } background-position: center;
.buttonss1 { right: -69px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } }
.obj { position: absolute; } .cuadro_navegacion {
.obj1 { top: 3%; left: 11%; } background-color: #00263a !important;
.btn-comenzar { display: inline-block; } border-radius: 25px;
.anim { opacity: 0; } }
</style> .cuadro_navegacion .card-header {
</head> border: 1px solid #657380;
<body> }
.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="section_charge w-100 h-100">
<div class="d-none"></div> <div class="d-none"></div>
<section id="sec0" class="sec0 w-100 h-100"> <section id="sec0" class="sec0 w-100 h-100">
<div class="container pl-0 h-100"> <div class="container pl-0 h-100">
<div class="row justify-content-center h-100"> <div class="row justify-content-center h-100">
<div class="col-5 align-self-end"> <div class="col-5 align-self-end">
<img src="img/1.png" class="anim anim1" alt=""> <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&eacute;xico S.A. / MAPFRE Fianzas S.A., emite el presente certificado en cumplimiento a las Disposiciones Quincuag&eacute;sima Segunda, en relaci&oacute;n con la Quincuag&eacute;sima Primera, del acuerdo por el que se emiten las disposiciones de Car&aacute;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&oacute;n el 19 de Noviembre del 2020.</em></p>
</div>
</div>
</div>
</div> </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&eacute;xico S.A. / Mapfre Fianzas S.A., emite el presente certificado en cumplimiento a las
Disposiciones Quincuag&eacute;sima Segunda, en relaci&oacute;n con la Quincuag&eacute;sima Primera,
del acuerdo por el que se emiten las disposiciones de Car&aacute;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&oacute;n el 19 de Noviembre
del 2020.
</em>
</p>
</div>
</div>
</div>
</div>
</section>
</div> </div>
</body> </body>
</html> </html>
<script> <script>
jQuery(document).ready(function($) { jQuery(document).ready(function ($) {
instruccion(0); instruccion(0);
$(".layer-load").show(); $('.layer-load').show();
$('.section_charge').waitForImages({ $('.section_charge').waitForImages({
finished: function() { finished: function () {
$(".section_charge").css("visibility", "visible"); $('.section_charge').css('visibility', 'visible');
$(".wloader").hide(); $('.wloader').hide();
fn_animate(); fn_animate();
},
}, each: function (loaded, count, success) {
each: function(loaded, count, success) { var total = Math.floor((loaded * 100) / count);
var total = Math.floor((loaded * 100) / count); $('.wloader').show();
$(".wloader").show(); },
waitForAll: true
},
waitForAll: true
}); });
function fn_animate() {
function fn_animate(){ var tl = new TimelineMax();
var tl = new TimelineMax(); tl.fromTo('.anim1', 0.7, { opacity: 0, x: -250 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
tl.fromTo(".anim1",.7,{opacity:0, x:-250},{opacity:1, x:0, ease:Expo.easeInOut}); tl.fromTo(
tl.fromTo(".anim3", 1,{opacity:0,y:-300,rotationX:-180,rotationY:180},{opacity:1,y:0,rotationX:0,rotationY:0}); '.anim3',
tl.call(fn_end); 1,
{ opacity: 0, y: -300, rotationX: -180, rotationY: 180 },
{ opacity: 1, y: 0, rotationX: 0, rotationY: 0 }
);
tl.call(fn_end);
} }
function fn_end(){ function fn_end() {
instruccion(2); instruccion(2);
$('.btn-comenzar').addClass('animated infinite pulse'); $('.btn-comenzar').addClass('animated infinite pulse');
} }
$(".btn-comenzar").click(function(event) { $('.btn-comenzar').click(function (event) {
/* Act on the event */ /* Act on the event */
instruccion(1); instruccion(1);
__siguiente() __siguiente();
}); });
});
}); </script>
</script>
+90 -84
View File
@@ -1,103 +1,109 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<style> <style>
.sec0 { background-image: url(img/fondos/bg4.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; } .sec0 {
.bubble { background-image: url(img/fondos/bg4.jpg);
width: 100%; height: 112px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9); background-repeat: no-repeat;
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; background-size: cover;
} background-position: center;
.anim { opacity: 0; } }
.bubble {
</style> width: 100%;
</head> height: 112px;
<body> 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="section_charge bg w-100 h-100">
<div class="d-none"> <div class="d-none">
<img src="img/sprites/marco_1.png" alt=""> <img src="img/sprites/marco_1.png" alt="" />
<img src="img/sprites/marco_2.png" alt=""> <img src="img/sprites/marco_2.png" alt="" />
</div> </div>
<section id="sec0" class="sec0 w-100 h-100"> <section id="sec0" class="sec0 w-100 h-100">
<div class="container h-100"> <div class="container h-100">
<div class="row justify-content-center h-100"> <div class="row justify-content-center h-100">
<div class="col-9 offset-2 mt-2 anim anim1"> <div class="col-9 offset-2 mt-2 anim anim1">
<div class="bubble d-flex align-items-center shadow px-3 py-2"> <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 ¡Buenos días! Soy Marcos Aguilar, el nuevo colaborador de Mapfre. Me interesa mucho conocer las nuevas
sobre Prevención de Lavado de Dinero y Financiamiento al Terrorismo para poderme actualizar. ¿Puedes apoyarme? disposiciones sobre Prevención de Lavado de Dinero y Financiamiento al Terrorismo para poderme
</div> 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> </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> </div>
</body> </body>
</html> </html>
<script> <script>
jQuery(document).ready(function($) { jQuery(document).ready(function ($) {
instruccion(0); instruccion(0);
var Audio_4 = newSound("audio/Audio_4_Marcos.mp3"); var Audio_4 = newSound('audio/Audio_4_Marcos.mp3');
var Audio_R1 = newSound("audio/Audio_1_Ruben.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 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() { Audio_4.on('end', function () {
stopAllSoundsAndPlay(Audio_R1); stopAllSoundsAndPlay(Audio_R1);
$('.bubble').html(txt1); $('.bubble').html(txt1);
$('.personaje_m_2').addClass('d-none'); $('.personaje_m_2').addClass('d-none');
$('.personaje_m_1').removeClass('d-none'); $('.personaje_m_1').removeClass('d-none');
$('.personaje_r_2').addClass('d-none'); $('.personaje_r_2').addClass('d-none');
$('.personaje_r_1').removeClass('d-none').addClass('play'); $('.personaje_r_1').removeClass('d-none').addClass('play');
}); });
Audio_R1.on("end", function() { Audio_R1.on('end', function () {
fn_end(); fn_end();
$('.personaje_r_1').removeClass('play') $('.personaje_r_1').removeClass('play');
}); });
$('.layer-load').show();
$(".layer-load").show();
$('.section_charge').waitForImages({ $('.section_charge').waitForImages({
finished: function() { finished: function () {
$(".section_charge").css("visibility", "visible"); $('.section_charge').css('visibility', 'visible');
$(".wloader").hide(); $('.wloader').hide();
fn_animate(); fn_animate();
},
}, each: function (loaded, count, success) {
each: function(loaded, count, success) { var total = Math.floor((loaded * 100) / count);
var total = Math.floor((loaded * 100) / count); $('.wloader').show();
$(".wloader").show(); },
waitForAll: true
},
waitForAll: true
}); });
function fn_animate() {
function fn_animate(){ var tl = new TimelineMax();
var tl = new TimelineMax(); tl.fromTo('.anim2', 1, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
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.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut}); tl.call(fn_firstAudio);
tl.call(fn_firstAudio);
} }
function fn_firstAudio(){ function fn_firstAudio() {
stopAllSoundsAndPlay(Audio_4); stopAllSoundsAndPlay(Audio_4);
$('.personaje_m_2').addClass('play'); $('.personaje_m_2').addClass('play');
} }
function fn_end(){ function fn_end() {
instruccion(1); instruccion(1);
} }
});
</script>
});
</script>
+185 -153
View File
@@ -1,181 +1,213 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<style> <style>
.sec0 { background-image: url(img/fondos/bg4.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; } .sec0 {
.bubble { background-image: url(img/fondos/bg4.jpg);
width: 100%; height: 98px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9); background-repeat: no-repeat;
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; background-size: cover;
} background-position: center;
.obj { position: absolute;} }
.obj1 { top: 4%; left: 27%;} .bubble {
.obj2 { top: 40%; left: 31%;} width: 100%;
.obj3 { top: 72%; left: 29%;} height: 98px;
.nota { position: absolute; bottom: 10%; right: 2%; z-index: 10;} background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
.anim { opacity: 0; } border-top-left-radius: 25px;
border-top-right-radius: 25px;
</style> border-bottom-right-radius: 25px;
</head> }
<body> .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="section_charge bg w-100 h-100">
<div class="d-none"></div> <div class="d-none"></div>
<section id="sec0" class="sec0 w-100 h-100"> <section id="sec0" class="sec0 w-100 h-100">
<div class="container h-100"> <div class="container h-100">
<div class="row h-100"> <div class="row h-100">
<div class="col-9 offset-2 mt-2"> <div class="col-9 offset-2 mt-2">
<div class="bubble d-flex align-items-center shadow px-3 py-2 anim anim1"> <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> <p class="m-0">
</div> Y dime Rubén, ¿en Mapfre contamos con algún
</div> <b>Manual de Cumplimiento</b>
<div class="col-6 align-self-end anim anim2"> para prevenir y detectar operaciones con recursos de procedencia ilícita? Me gustaría revisarlo.
<div class="row"> </p>
<div class="col-6 align-self-end"><div class="personaje_r_1 stop mx-auto"></div></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>
<div class="nota btn_nota animated pulse infinite d-none" data-popid="#pop0"><img src="img/nota.png" alt=""></div> <div class="col-6 align-self-end anim anim2">
</section> <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> </div>
</body> </body>
</html> </html>
<!--POPS--> <!--POPS-->
<div class="d-none"> <div class="d-none">
<div id="pop0"> <div id="pop0">
<div class="container-fluid py-3"> <div class="container-fluid py-3">
<div class="row justify-content-center align-items-center h-100"> <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-3"><img src="img/img_nota.png" class="mx-auto d-block" alt="" /></div>
<div class="col-8 text-left text-white"> <div class="col-8 text-left text-white">
<p class="m-0"> <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>, Recuerda que estos aspectos integran el
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 <b>Manual de Cumplimiento</b>
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. , mismo que cada
</p> <b>Institución debe tener</b>
</div> y una vez que sea
</div> <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>
</div>
</div> </div>
<script> <script>
jQuery(document).ready(function($) { jQuery(document).ready(function ($) {
instruccion(0); instruccion(0);
var Audio_7 = newSound("audio/Audio_7_Marcos.mp3"); var Audio_7 = newSound('audio/Audio_7_Marcos.mp3');
var Audio_R5 = newSound("audio/Audio_5_Ruben.mp3"); var Audio_R5 = newSound('audio/Audio_5_Ruben.mp3');
var txt1 = "Por supuesto, se compone de tres aspectos fundamentales, los cuales son:"; var txt1 = 'Por supuesto, se compone de tres aspectos fundamentales, los cuales son:';
Audio_7.on("end", function() { Audio_7.on('end', function () {
stopAllSoundsAndPlay(Audio_R5); stopAllSoundsAndPlay(Audio_R5);
$('.bubble').html(txt1); $('.bubble').html(txt1);
$('.personaje_m_2').removeClass('play').addClass('personaje7 stop'); $('.personaje_m_2').removeClass('play').addClass('personaje7 stop');
$('.personaje_r_1').removeClass('stop').addClass('play'); $('.personaje_r_1').removeClass('stop').addClass('play');
var tl2 = new TimelineMax(); var tl2 = new TimelineMax();
tl2.fromTo(".anim3",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut}, 5.572); 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('.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) ; tl2.fromTo('.anim5', 1, { opacity: 0, x: -250 }, { opacity: 1, x: 0, ease: Expo.easeInOut }, 10.98);
}); });
Audio_R5.on("end", function() { Audio_R5.on('end', function () {
$('.personaje_r_1').removeClass('play').addClass('stop'); $('.personaje_r_1').removeClass('play').addClass('stop');
$('.nota').removeClass('d-none'); $('.nota').removeClass('d-none');
instruccion(16); instruccion(16);
}); });
$('.layer-load').show();
$(".layer-load").show();
$('.section_charge').waitForImages({ $('.section_charge').waitForImages({
finished: function() { finished: function () {
$(".section_charge").css("visibility", "visible"); $('.section_charge').css('visibility', 'visible');
$(".wloader").hide(); $('.wloader').hide();
fn_animate(); fn_animate();
},
}, each: function (loaded, count, success) {
each: function(loaded, count, success) { var total = Math.floor((loaded * 100) / count);
var total = Math.floor((loaded * 100) / count); $('.wloader').show();
$(".wloader").show(); },
waitForAll: true
},
waitForAll: true
}); });
function fn_animate() {
function fn_animate(){ var tl = new TimelineMax();
var tl = new TimelineMax(); tl.fromTo('.anim2', 1, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
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.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut}); tl.call(fn_firstAudio);
tl.call(fn_firstAudio);
} }
function fn_firstAudio(){ function fn_firstAudio() {
stopAllSoundsAndPlay(Audio_7); stopAllSoundsAndPlay(Audio_7);
$('.personaje_m_2').addClass('play'); $('.personaje_m_2').addClass('play');
} }
$(".btn_nota").click(function(event) { $('.btn_nota').click(function (event) {
if (!$(this).hasClass('block')) { if (!$(this).hasClass('block')) {
$(this).removeClass('animated pulse infinite'); $(this).removeClass('animated pulse infinite');
var este = $(this); var este = $(this);
var html = $($(this).data('popid')); var html = $($(this).data('popid'));
var imgbackdrop = $(this).data("imgbackdrop"); var imgbackdrop = $(this).data('imgbackdrop');
Swal.fire({ Swal.fire({
html: html, html: html,
showCancelButton: false, showCancelButton: false,
showCloseButton: true, showCloseButton: true,
target: $('.sco')[0], target: $('.sco')[0],
customClass: { popup: 'popup-class pop-nota' }, customClass: { popup: 'popup-class pop-nota' },
//backdrop: '#fff url("img/' + imgbackdrop + '") center center no-repeat', //backdrop: '#fff url("img/' + imgbackdrop + '") center center no-repeat',
background: '#4a7d8f', background: '#4a7d8f',
width:"100%", width: '100%',
padding: ".5rem .5rem .5rem .5rem", padding: '.5rem .5rem .5rem .5rem',
allowOutsideClick: false, allowOutsideClick: false,
allowEscapeKey: false, allowEscapeKey: false,
allowEnterKey: false, allowEnterKey: false,
showConfirmButton: false, showConfirmButton: false,
closeButtonHtml: '<div><img src="img/template/close.png"></div>', closeButtonHtml: '<div><img src="img/template/close.png"></div>',
onBeforeOpen: function() {}, onBeforeOpen: function () {},
onOpen: function() { onOpen: function () {
$(".swal2-popup.popup-class").closest('.swal2-container').css("z-index","998"); $('.swal2-popup.popup-class').closest('.swal2-container').css('z-index', '998');
if ($(este).data("audio")) { if ($(este).data('audio')) {
stopAllSoundsAndPlay(eval($(este).data("audio"))); stopAllSoundsAndPlay(eval($(este).data('audio')));
} else {
stopAllSoundsAndPlay(__click);
}
}else{ if ($(este).hasClass('visitado')) {
stopAllSoundsAndPlay(__click); instruccion(7);
} $('.swal2-close').show();
} else {
instruccion(7);
$('.swal2-close').show();
}
},
onRender: function () {},
onClose: function () {
$(este).addClass('visitado');
stopAllSoundsAndPlay(__click);
if ($(este).hasClass('visitado')) { if ($('.btn_nota').length == $('.btn_nota.visitado').length) {
instruccion(7); fn_end();
$(".swal2-close").show(); } else {
}else{ }
instruccion(7); },
$(".swal2-close").show(); onAfterClose: function () {}
} });
}, }
onRender: function() {},
onClose: function() {
$(este).addClass('visitado');
stopAllSoundsAndPlay(__click);
if ($(".btn_nota").length == $(".btn_nota.visitado").length) {
fn_end();
}else{
}
},
onAfterClose: function() {}
});
}
}); });
function fn_end(){ function fn_end() {
instruccion(1); instruccion(1);
} }
});
</script>
});
</script>
+251 -205
View File
@@ -1,239 +1,285 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<style> <style>
.sec0 { background-image: url(img/fondos/bg4.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; } .sec0 {
.personaje { position: relative; z-index: 2;} background-image: url(img/fondos/bg4.jpg);
.bubble { background-repeat: no-repeat;
position: relative; width: 100%; height: auto; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9); background-size: cover;
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; background-position: center;
} }
.btn-pop { position: absolute; cursor: pointer; z-index: 5;} .personaje {
.pop1{ top: -97%; left: 31%; } position: relative;
.pop2{ top: -38%; left: 53.9%;} z-index: 2;
.pop3{ top: 72%; left: 34%;} }
.anim { opacity: 0; } .bubble {
position: relative;
</style> width: 100%;
</head> height: auto;
<body> 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="section_charge bg w-100 h-100">
<div class="d-none"></div> <div class="d-none"></div>
<section id="sec0" class="sec0 w-100 h-100"> <section id="sec0" class="sec0 w-100 h-100">
<div class="container h-100"> <div class="container h-100">
<div class="row justify-content-end"> <div class="row justify-content-end">
<div class="col-6 pt-5 anim anim0"> <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 class="bubble shadow pl-5 pr-3 py-2">
</div> <h5 class="title_ m-0">Enfoque Basado en Riesgos (EBR)</h5>
</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> </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> </div>
</body> </body>
</html> </html>
<!--POPS--> <!--POPS-->
<div class="d-none"> <div class="d-none">
<div id="pop0"> <div id="pop0">
<div class="container-fluid py-3"> <div class="container-fluid py-3">
<div class="row justify-content-center align-items-center h-100"> <div class="row justify-content-center align-items-center h-100">
<div class="col-11 text-left text-white"> <div class="col-11 text-left text-white">
<p><b>Objetivo</b></p> <p><b>Objetivo</b></p>
<p> <p>
Es una metodología para realizar una <b>evaluación de Riesgos </b>a la que está expuesta la Institución Es una metodología para realizar una
en virtud de sus productos, servicios, Clientes, países o áreas geográficos en las que opere, transacciones <b>evaluación de Riesgos</b>
y canales de envió o distribución. </p> a la que está expuesta la Institución en virtud de sus productos, servicios, Clientes, países o áreas
<p class="m-0"> geográficos en las que opere, transacciones y canales de envió o distribución.
Esta metodología deberá establecer y describir todos los <b>procesos</b> que se llevarán a cabo para la </p>
<b>identificación, medición y mitigación de los Riesgos</b>, tomando en cuenta los factores de Riesgo que se <p class="m-0">
hayan identificado y la información que resulte aplicable en la <b>Evaluación Nacional de Riesgos.</b> Esta metodología deberá establecer y describir todos los
</p> <b>procesos</b>
</div> que se llevarán a cabo para la
</div> <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>
</div>
<div id="pop1"> <div id="pop1">
<div class="container-fluid py-3"> <div class="container-fluid py-3">
<div class="row justify-content-center align-items-center h-100"> <div class="row justify-content-center align-items-center h-100">
<div class="col-11 text-left text-white"> <div class="col-11 text-left text-white">
<p><b>Periodicidad</b></p> <p><b>Periodicidad</b></p>
<p class="m-0"> <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 La
con <b>antelación al lanzamiento </b>o uso de nuevos productos, servicios, prácticas o tecnologías. <b>evaluación de Riesgos</b>
</p> con base en dicha metodología deberá realizarse
</div> <b>cada 12 meses</b>
</div> 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>
</div>
<div id="pop2"> <div id="pop2">
<div class="container-fluid py-3"> <div class="container-fluid py-3">
<div class="row justify-content-center align-items-center h-100"> <div class="row justify-content-center align-items-center h-100">
<div class="col-11 text-left text-white"> <div class="col-11 text-left text-white">
<p><b>Acciones</b></p> <p><b>Acciones</b></p>
<p class="m-0"> <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 Cuando los resultados de la evaluación de Riesgos revelen la
deberán <b>modificar sus políticas, criterios, medidas y procedimientos</b> a fin de establecer los Mitigantes que <b>existencia de mayores o nuevos Riesgos,</b>
consideren necesarios en función de los <b>Riesgos identificados.</b> las Instituciones deberán
</p> <b>modificar sus políticas, criterios, medidas y procedimientos</b>
</div> a fin de establecer los Mitigantes que consideren necesarios en función de los
</div> <b>Riesgos identificados.</b>
</p>
</div> </div>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
jQuery(document).ready(function($) { jQuery(document).ready(function ($) {
instruccion(0); instruccion(0);
var Audio_10 = newSound("audio/Audio_10_Marcos.mp3"); var Audio_10 = newSound('audio/Audio_10_Marcos.mp3');
var Audio_R7 = newSound("audio/Audio_7_Ruben.mp3"); var Audio_R7 = newSound('audio/Audio_7_Ruben.mp3');
Audio_10.on("end", function() { Audio_10.on('end', function () {
var tl3 = new TimelineMax(); var tl3 = new TimelineMax();
tl3.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut}); tl3.fromTo('.anim2', 1, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
stopAllSoundsAndPlay(Audio_R7); stopAllSoundsAndPlay(Audio_R7);
$('.personaje_m_4').removeClass('play'); $('.personaje_m_4').removeClass('play');
$('.personaje_r_4').addClass('play'); $('.personaje_r_4').addClass('play');
}); });
Audio_R7.on("end", function() { Audio_R7.on('end', function () {
fn_pops(); fn_pops();
var tl2 = new TimelineMax(); var tl2 = new TimelineMax();
tl2.fromTo(".anim3",.7,{opacity:0, y:-50},{opacity:1, y:0, ease:Expo.easeInOut}); tl2.fromTo('.anim3', 0.7, { opacity: 0, y: -50 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
$('.personaje_r_4').removeClass('play'); $('.personaje_r_4').removeClass('play');
$('.bub1, .bub2').addClass('d-none'); $('.bub1, .bub2').addClass('d-none');
$('.anim5').removeClass('anim'); $('.anim5').removeClass('anim');
instruccion(11); instruccion(11);
}); });
$('.layer-load').show();
$(".layer-load").show();
$('.section_charge').waitForImages({ $('.section_charge').waitForImages({
finished: function() { finished: function () {
$(".section_charge").css("visibility", "visible"); $('.section_charge').css('visibility', 'visible');
$(".wloader").hide(); $('.wloader').hide();
fn_animate(); fn_animate();
$(".carousel").carousel({ interval: false }); $('.carousel').carousel({ interval: false });
},
}, each: function (loaded, count, success) {
each: function(loaded, count, success) { var total = Math.floor((loaded * 100) / count);
var total = Math.floor((loaded * 100) / count); $('.wloader').show();
$(".wloader").show(); },
waitForAll: true
},
waitForAll: true
}); });
function fn_animate(){ function fn_animate() {
var tl = new TimelineMax(); var tl = new TimelineMax();
tl.fromTo(".anim0",.7,{opacity:0, x:150},{opacity:1, x:0, ease:Expo.easeInOut}); tl.fromTo('.anim0', 0.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.fromTo('.anim1', 0.7, { opacity: 0, x: -250 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
tl.call(fn_firstAudio); tl.call(fn_firstAudio);
} }
function fn_firstAudio(){ function fn_firstAudio() {
stopAllSoundsAndPlay(Audio_10); stopAllSoundsAndPlay(Audio_10);
$('.personaje_m_4').addClass('play'); $('.personaje_m_4').addClass('play');
} }
function fn_pops(){ function fn_pops() {
$(".btn-pop").addClass('animated pulse infinite'); $('.btn-pop').addClass('animated pulse infinite');
$(".btn-pop").click(function(event) { $('.btn-pop').click(function (event) {
if (!$(this).hasClass('block')) { if (!$(this).hasClass('block')) {
$(this).removeClass('animated pulse infinite'); $(this).removeClass('animated pulse infinite');
var este = $(this); var este = $(this);
var html = $($(this).data('popid')); var html = $($(this).data('popid'));
var backcolor = $(this).data("backcolor"); var backcolor = $(this).data('backcolor');
Swal.fire({ Swal.fire({
html: html, html: html,
showCancelButton: false, showCancelButton: false,
showCloseButton: true, showCloseButton: true,
target: $('.sco')[0], target: $('.sco')[0],
customClass: { popup: 'popup-class pop-nota' }, customClass: { popup: 'popup-class pop-nota' },
background: backcolor, background: backcolor,
width:"100%", width: '100%',
padding: ".5rem .5rem .5rem .5rem", padding: '.5rem .5rem .5rem .5rem',
allowOutsideClick: false, allowOutsideClick: false,
allowEscapeKey: false, allowEscapeKey: false,
allowEnterKey: false, allowEnterKey: false,
showConfirmButton: false, showConfirmButton: false,
closeButtonHtml: '<div><img src="img/template/close.png"></div>', closeButtonHtml: '<div><img src="img/template/close.png"></div>',
onBeforeOpen: function() {}, onBeforeOpen: function () {},
onOpen: function() { onOpen: function () {
$(".swal2-popup.popup-class").closest('.swal2-container').css("z-index","998"); $('.swal2-popup.popup-class').closest('.swal2-container').css('z-index', '998');
if ($(este).data("audio")) { if ($(este).data('audio')) {
stopAllSoundsAndPlay(eval($(este).data("audio"))); stopAllSoundsAndPlay(eval($(este).data('audio')));
} else {
stopAllSoundsAndPlay(__click);
}
}else{ if ($(este).hasClass('visitado')) {
stopAllSoundsAndPlay(__click); instruccion(7);
} $('.swal2-close').show();
} else {
instruccion(7);
$('.swal2-close').show();
}
},
onRender: function () {},
onClose: function () {
$(este).addClass('visitado');
stopAllSoundsAndPlay(__click);
if ($(este).hasClass('visitado')) { if ($('.btn-pop').length == $('.btn-pop.visitado').length) {
instruccion(7); fn_end();
$(".swal2-close").show(); } else {
}else{ }
instruccion(7); },
$(".swal2-close").show(); onAfterClose: function () {}
} });
}, }
onRender: function() {}, });
onClose: function() {
$(este).addClass('visitado');
stopAllSoundsAndPlay(__click);
if ($(".btn-pop").length == $(".btn-pop.visitado").length) {
fn_end();
}else{
}
},
onAfterClose: function() {}
});
}
});
} }
function fn_end(){ function fn_end() {
instruccion(1); instruccion(1);
} }
});
</script>
});
</script>
+96 -90
View File
@@ -1,109 +1,115 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<style> <style>
.sec0 { background-image: url(img/fondos/bg11.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; } .sec0 {
.bubble { background-image: url(img/fondos/bg11.jpg);
width: 100%; height: 136px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9); background-repeat: no-repeat;
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; background-size: cover;
} background-position: center;
.anim { opacity: 0; } }
.bubble {
</style> width: 100%;
</head> height: 136px;
<body> 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="section_charge bg w-100 h-100">
<div class="d-none"> <div class="d-none">
<img src="img/fondos/bg11.jpg" alt=""> <img src="img/fondos/bg11.jpg" alt="" />
<img src="img/sprites/marco_6.png" alt=""> <img src="img/sprites/marco_6.png" alt="" />
<img src="img/sprites/marco_7.png" alt=""> <img src="img/sprites/marco_7.png" alt="" />
<img src="img/sprites/ruben_5.png" alt=""> <img src="img/sprites/ruben_5.png" alt="" />
<img src="img/sprites/ruben_6.png" alt=""> <img src="img/sprites/ruben_6.png" alt="" />
</div> </div>
<section id="sec0" class="sec0 w-100 h-100"> <section id="sec0" class="sec0 w-100 h-100">
<div class="container h-100"> <div class="container h-100">
<div class="row justify-content-center h-100"> <div class="row justify-content-center h-100">
<div class="col-9 offset-2 mt-2 anim anim1"> <div class="col-9 offset-2 mt-2 anim anim1">
<div class="bubble d-flex align-items-center shadow px-3 py-2"> <div class="bubble d-flex align-items-center shadow px-3 py-2">
<p class="m-0"> <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> Rubén, recientemente leí un reportaje en el que una aseguradora tuvo que investigar a uno de sus
porque algunas de sus operaciones sobrepasaban el monto permitido, ¿consideras que un cliente así o que viva fuera del país <b>clientes extranjeros</b>
representa un riesgo mayor que otro cliente que sí reside aquí? porque algunas de sus operaciones sobrepasaban el monto permitido, ¿consideras que un cliente así o
</p> que viva fuera del país representa un riesgo mayor que otro cliente que sí reside aquí?
</div> </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> </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> </div>
</body> </body>
</html> </html>
<script> <script>
jQuery(document).ready(function($) { jQuery(document).ready(function ($) {
instruccion(0); instruccion(0);
var Audio_11 = newSound("audio/Audio_11_Marcos.mp3"); var Audio_11 = newSound('audio/Audio_11_Marcos.mp3');
var Audio_R8 = newSound("audio/Audio_8_Ruben.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 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() { Audio_11.on('end', function () {
stopAllSoundsAndPlay(Audio_R8); stopAllSoundsAndPlay(Audio_R8);
$('.bubble p').html(txt1); $('.bubble p').html(txt1);
$('.personaje_m_6').addClass('d-none'); $('.personaje_m_6').addClass('d-none');
$('.personaje_m_7').removeClass('d-none'); $('.personaje_m_7').removeClass('d-none');
$('.personaje_r_5').addClass('d-none'); $('.personaje_r_5').addClass('d-none');
$('.personaje_r_6').removeClass('d-none').addClass('play'); $('.personaje_r_6').removeClass('d-none').addClass('play');
}); });
Audio_R8.on("end", function() { Audio_R8.on('end', function () {
fn_end(); fn_end();
$('.personaje_r_6').removeClass('play'); $('.personaje_r_6').removeClass('play');
}); });
$('.layer-load').show();
$(".layer-load").show();
$('.section_charge').waitForImages({ $('.section_charge').waitForImages({
finished: function() { finished: function () {
$(".section_charge").css("visibility", "visible"); $('.section_charge').css('visibility', 'visible');
$(".wloader").hide(); $('.wloader').hide();
fn_animate(); fn_animate();
},
}, each: function (loaded, count, success) {
each: function(loaded, count, success) { var total = Math.floor((loaded * 100) / count);
var total = Math.floor((loaded * 100) / count); $('.wloader').show();
$(".wloader").show(); },
waitForAll: true
},
waitForAll: true
}); });
function fn_animate() {
function fn_animate(){ var tl = new TimelineMax();
var tl = new TimelineMax(); tl.fromTo('.anim2', 1, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
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.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut}); tl.call(fn_firstAudio);
tl.call(fn_firstAudio);
} }
function fn_firstAudio(){ function fn_firstAudio() {
stopAllSoundsAndPlay(Audio_11); stopAllSoundsAndPlay(Audio_11);
$('.personaje_m_6').addClass('play'); $('.personaje_m_6').addClass('play');
} }
function fn_end(){ function fn_end() {
instruccion(1); instruccion(1);
} }
});
</script>
});
</script>
+98 -91
View File
@@ -1,110 +1,117 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<style> <style>
.sec0 { background-image: url(img/fondos/bg11.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; } .sec0 {
.bubble { background-image: url(img/fondos/bg11.jpg);
width: 100%; height: 136px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9); background-repeat: no-repeat;
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; background-size: cover;
} background-position: center;
.anim { opacity: 0; } }
.bubble {
</style> width: 100%;
</head> height: 136px;
<body> 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="section_charge bg w-100 h-100">
<div class="d-none"> <div class="d-none">
<img src="img/fondos/bg11.jpg" alt=""> <img src="img/fondos/bg11.jpg" alt="" />
<img src="img/sprites/marco_6.png" alt=""> <img src="img/sprites/marco_6.png" alt="" />
<img src="img/sprites/marco_7.png" alt=""> <img src="img/sprites/marco_7.png" alt="" />
<img src="img/sprites/ruben_5.png" alt=""> <img src="img/sprites/ruben_5.png" alt="" />
<img src="img/sprites/ruben_6.png" alt=""> <img src="img/sprites/ruben_6.png" alt="" />
</div> </div>
<section id="sec0" class="sec0 w-100 h-100"> <section id="sec0" class="sec0 w-100 h-100">
<div class="container h-100"> <div class="container h-100">
<div class="row justify-content-center h-100"> <div class="row justify-content-center h-100">
<div class="col-9 offset-2 mt-2 anim anim1"> <div class="col-9 offset-2 mt-2 anim anim1">
<div class="bubble d-flex align-items-center shadow px-3 py-2"> <div class="bubble d-flex align-items-center shadow px-3 py-2">
<p class="m-0"> <p class="m-0">
Ahora te compartiré algo nuevo Marcos. Recientemente en MAPFRE hemos recibido el reporte de tres casos en los que Ahora te compartiré algo nuevo Marcos. Recientemente en Mapfre hemos recibido el reporte de tres casos
pueden aplicar las <b>nuevas disposiciones de PLD/FT. </b>Como sabes, parte de nuestras obligaciones es en los que pueden aplicar las
<b>reportarlas a la SHCP</b>, a través de la CNSF, ¿te gustaría escucharlos para que así puedas identificar <b>nuevas disposiciones de PLD/FT.</b>
a qué tipo de operaciones pertenecen? Como sabes, parte de nuestras obligaciones es
</p> <b>reportarlas a la SHCP</b>
</div> , a través de la CNSF, ¿te gustaría escucharlos para que así puedas identificar a qué tipo de
</div> operaciones pertenecen?
<div class="col-7 align-self-end anim anim2"> </p>
<div class="row justify-content-center"> </div>
<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> </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> </div>
</body> </body>
</html> </html>
<script> <script>
jQuery(document).ready(function($) { jQuery(document).ready(function ($) {
instruccion(0); instruccion(0);
var Audio_12 = newSound("audio/Audio_12_Marcos.mp3"); var Audio_12 = newSound('audio/Audio_12_Marcos.mp3');
var Audio_R11 = newSound("audio/Audio_11_Ruben.mp3"); var Audio_R11 = newSound('audio/Audio_11_Ruben.mp3');
var txt1 = "Por supuesto. Cuéntame los casos y juntos los analizaremos."; var txt1 = 'Por supuesto. Cuéntame los casos y juntos los analizaremos.';
Audio_R11.on("end", function() { Audio_R11.on('end', function () {
stopAllSoundsAndPlay(Audio_12); stopAllSoundsAndPlay(Audio_12);
$('.bubble p').html(txt1); $('.bubble p').html(txt1);
$('.personaje_r_6').addClass('d-none'); $('.personaje_r_6').addClass('d-none');
$('.personaje_r_5').removeClass('d-none'); $('.personaje_r_5').removeClass('d-none');
$('.personaje_m_7').addClass('d-none'); $('.personaje_m_7').addClass('d-none');
$('.personaje_m_6').removeClass('d-none').addClass('play'); $('.personaje_m_6').removeClass('d-none').addClass('play');
}); });
Audio_12.on("end", function() { Audio_12.on('end', function () {
fn_end(); fn_end();
$('.personaje_m_6').removeClass('play'); $('.personaje_m_6').removeClass('play');
}); });
$('.layer-load').show();
$(".layer-load").show();
$('.section_charge').waitForImages({ $('.section_charge').waitForImages({
finished: function() { finished: function () {
$(".section_charge").css("visibility", "visible"); $('.section_charge').css('visibility', 'visible');
$(".wloader").hide(); $('.wloader').hide();
fn_animate(); fn_animate();
},
}, each: function (loaded, count, success) {
each: function(loaded, count, success) { var total = Math.floor((loaded * 100) / count);
var total = Math.floor((loaded * 100) / count); $('.wloader').show();
$(".wloader").show(); },
waitForAll: true
},
waitForAll: true
}); });
function fn_animate() {
function fn_animate(){ var tl = new TimelineMax();
var tl = new TimelineMax(); tl.fromTo('.anim2', 1, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
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.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut}); tl.call(fn_firstAudio);
tl.call(fn_firstAudio);
} }
function fn_firstAudio(){ function fn_firstAudio() {
stopAllSoundsAndPlay(Audio_R11); stopAllSoundsAndPlay(Audio_R11);
$('.personaje_r_6').addClass('play'); $('.personaje_r_6').addClass('play');
} }
function fn_end(){ function fn_end() {
instruccion(1); instruccion(1);
} }
});
</script>
});
</script>
+99 -87
View File
@@ -1,104 +1,116 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<style> <style>
.sec0 { .sec0 {
background-image: url(img/fondos/bg3.jpg); background-image: url(img/fondos/bg3.jpg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }
.bubble { .bubble {
width: 100%; height: auto; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9); width: 100%;
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; height: auto;
} background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
.paper { position: relative; width: 590px; margin: auto;} border-top-left-radius: 25px;
.txt_paper { position: absolute; top: 158px; left: 15px; padding: 0 1rem;} border-top-right-radius: 25px;
.anim { opacity: 0; } border-bottom-right-radius: 25px;
}
</style> .paper {
</head> position: relative;
<body> 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="section_charge bg w-100 h-100">
<div class="d-none"></div> <div class="d-none"></div>
<section id="sec0" class="sec0 w-100 h-100"> <section id="sec0" class="sec0 w-100 h-100">
<div class="container h-100"> <div class="container h-100">
<div class="row justify-content-center align-items-center h-100"> <div class="row justify-content-center align-items-center h-100">
<div class="col-4 align-self-end"> <div class="col-4 align-self-end">
<div class="personaje_m_0 mx-auto anim anim2"></div> <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> </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> </div>
</body> </body>
</html> </html>
<script> <script>
jQuery(document).ready(function($) { jQuery(document).ready(function ($) {
instruccion(0); instruccion(0);
var Audio_13 = newSound("audio/Audio_13_Marcos.mp3"); var Audio_13 = newSound('audio/Audio_13_Marcos.mp3');
Audio_13.on("end", function() { Audio_13.on('end', function () {
$('.personaje_m_0').removeClass('play'); $('.personaje_m_0').removeClass('play');
var tl = new TimelineMax(); var tl = new TimelineMax();
tl.fromTo(".anim3",1,{opacity:0, y:-150},{opacity:1, y:0, ease:Expo.easeInOut}); tl.fromTo('.anim3', 1, { opacity: 0, y: -150 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
tl.call(fn_end); tl.call(fn_end);
}); });
$(".layer-load").show(); $('.layer-load').show();
$('.section_charge').waitForImages({ $('.section_charge').waitForImages({
finished: function() { finished: function () {
$(".section_charge").css("visibility", "visible"); $('.section_charge').css('visibility', 'visible');
$(".wloader").hide(); $('.wloader').hide();
fn_animate(); fn_animate();
},
}, each: function (loaded, count, success) {
each: function(loaded, count, success) { var total = Math.floor((loaded * 100) / count);
var total = Math.floor((loaded * 100) / count); $('.wloader').show();
$(".wloader").show(); },
waitForAll: true
},
waitForAll: true
}); });
function fn_animate() {
function fn_animate(){ var tl = new TimelineMax();
var tl = new TimelineMax(); tl.fromTo('.anim2', 1, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
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.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut}); tl.call(fn_firstAudio);
tl.call(fn_firstAudio);
} }
function fn_firstAudio(){ function fn_firstAudio() {
stopAllSoundsAndPlay(Audio_13); stopAllSoundsAndPlay(Audio_13);
$('.personaje_m_0').addClass('play'); $('.personaje_m_0').addClass('play');
} }
function fn_end(){ function fn_end() {
instruccion(1); instruccion(1);
} }
});
</script>
});
</script>
+226 -181
View File
@@ -1,216 +1,261 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<style> <style>
.sec0 { .sec0 {
background-image: url(img/fondos/bg13.jpg); background-image: url(img/fondos/bg13.jpg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: top; background-position: top;
} }
.bubble { .bubble {
position: absolute; width: 100%; height: auto; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9); position: absolute;
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; bottom: 3%; left: 0; right: 0; margin: auto; width: 100%;
} height: auto;
.btn-pop { position: absolute;} background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
.pop1{ top: 3%; left: 24.5%; } border-top-left-radius: 25px;
.pop2{ top: 38.5%; left: 47.5%; } border-top-right-radius: 25px;
.pop3{ top: 74%; left: 24.5%; } border-bottom-right-radius: 25px;
.pop4{ top: 39%; left: 2%; } bottom: 3%;
.anim { opacity: 0; } left: 0;
right: 0;
</style> margin: auto;
</head> }
<body> .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="section_charge bg w-100 h-100">
<div class="d-none"> <div class="d-none">
<img src="img/fondos/bg13.jpg" alt=""> <img src="img/fondos/bg13.jpg" alt="" />
</div> </div>
<section id="sec0" class="sec0 w-100 h-100"> <section id="sec0" class="sec0 w-100 h-100">
<div class="container h-100"> <div class="container h-100">
<div class="row justify-content-center align-items-center h-100"> <div class="row justify-content-center align-items-center h-100">
<div class="col-6 align-self-end"> <div class="col-6 align-self-end">
<h5 class="title_ py-2 anim anim1"><b>Operaciones Internas Preocupantes</b></h5> <h5 class="title_ py-2 anim anim1"><b>Operaciones Internas Preocupantes</b></h5>
<div class="personaje_m_0 mx-auto anim anim2"></div> <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> </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> </div>
</body> </body>
</html> </html>
<!--POPS--> <!--POPS-->
<div class="d-none"> <div class="d-none">
<div id="pop0"> <div id="pop0">
<div class="container-fluid py-3"> <div class="container-fluid py-3">
<div class="row justify-content-center align-items-center h-100"> <div class="row justify-content-center align-items-center h-100">
<div class="col-11 text-left text-white"> <div class="col-11 text-left text-white">
<p class="m-0"> <p class="m-0">
<b>1. </b>Cuando se detecte que algún <b>directivo, funcionario, empleado o apoderado de MAPFRE, </b> <b>1.</b>
mantiene un nivel de vida notoriamente superior al que le correspondería, de acuerdo con los ingresos que percibe. Cuando se detecte que algún
</p> <b>directivo, funcionario, empleado o apoderado de Mapfre,</b>
</div> mantiene un nivel de vida notoriamente superior al que le correspondería, de acuerdo con los ingresos que
</div> percibe.
</p>
</div> </div>
</div>
</div> </div>
</div>
<div id="pop1"> <div id="pop1">
<div class="container-fluid py-3"> <div class="container-fluid py-3">
<div class="row justify-content-center align-items-center h-100"> <div class="row justify-content-center align-items-center h-100">
<div class="col-11 text-left text-white"> <div class="col-11 text-left text-white">
<p class="m-0"> <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> <b>2.</b>
de manera reiterada en la realización de Operaciones que hayan sido reportadas como <b>Operaciones Inusuales.</b> Cuando,
</p> <b>sin causa justificada,</b>
</div> algún directivo, funcionario, empleado o apoderado de Mapfre, haya
</div> <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>
</div>
<div id="pop2"> <div id="pop2">
<div class="container-fluid py-3"> <div class="container-fluid py-3">
<div class="row justify-content-center align-items-center h-100"> <div class="row justify-content-center align-items-center h-100">
<div class="col-11 text-left text-white"> <div class="col-11 text-left text-white">
<p class="m-0"> <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>3.</b>
<b>haber incurrido en actos, omisiones u Operaciones</b> que pudiesen favorecer, prestar ayuda, auxilio o cooperación Cuando existan
de cualquier especie para la comisión de los delitos de Lavado de Dinero y Financiamiento al Terrorismo. <b>sospechas</b>
</p> de que algún directivo, funcionario, empleado o apoderado de Mapfre pudieran
</div> <b>haber incurrido en actos, omisiones u Operaciones</b>
</div> 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>
</div>
<div id="pop3"> <div id="pop3">
<div class="container-fluid py-3"> <div class="container-fluid py-3">
<div class="row justify-content-center align-items-center h-100"> <div class="row justify-content-center align-items-center h-100">
<div class="col-11 text-left text-white"> <div class="col-11 text-left text-white">
<p class="m-0"> <p class="m-0">
<b>4. </b>Cuando, sin causa justificada, exista una <b>falta de correspondencia entre las funciones </b>que <b>4.</b>
se le encomendaron al directivo, funcionario, empleado o apoderado de MAPFRE y las <b>actividades</b> que de Cuando, sin causa justificada, exista una
hecho lleva a cabo. <b>falta de correspondencia entre las funciones</b>
</p> que se le encomendaron al directivo, funcionario, empleado o apoderado de Mapfre y las
</div> <b>actividades</b>
</div> que de hecho lleva a cabo.
</p>
</div> </div>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
jQuery(document).ready(function($) { jQuery(document).ready(function ($) {
instruccion(0); instruccion(0);
var Audio_19 = newSound("audio/Audio_19_Marcos.mp3"); var Audio_19 = newSound('audio/Audio_19_Marcos.mp3');
Audio_19.on("end", function() { Audio_19.on('end', function () {
$('.personaje_m_0').removeClass('play'); $('.personaje_m_0').removeClass('play');
var tl = new TimelineMax(); var tl = new TimelineMax();
tl.fromTo(".anim3",1,{opacity:0, y:-150},{opacity:1, y:0, ease:Expo.easeInOut}); tl.fromTo('.anim3', 1, { opacity: 0, y: -150 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
tl.call(fn_pops); tl.call(fn_pops);
}); });
$(".layer-load").show(); $('.layer-load').show();
$('.section_charge').waitForImages({ $('.section_charge').waitForImages({
finished: function() { finished: function () {
$(".section_charge").css("visibility", "visible"); $('.section_charge').css('visibility', 'visible');
$(".wloader").hide(); $('.wloader').hide();
fn_animate(); fn_animate();
},
}, each: function (loaded, count, success) {
each: function(loaded, count, success) { var total = Math.floor((loaded * 100) / count);
var total = Math.floor((loaded * 100) / count); $('.wloader').show();
$(".wloader").show(); },
waitForAll: true
},
waitForAll: true
}); });
function fn_animate(){ function fn_animate() {
var tl = new TimelineMax(); var tl = new TimelineMax();
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut}); 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.fromTo('.anim1', 0.7, { opacity: 0, y: -250 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
tl.call(fn_firstAudio); tl.call(fn_firstAudio);
} }
function fn_firstAudio(){ function fn_firstAudio() {
stopAllSoundsAndPlay(Audio_19); stopAllSoundsAndPlay(Audio_19);
$('.personaje_m_0').addClass('play'); $('.personaje_m_0').addClass('play');
} }
function fn_pops(){ function fn_pops() {
instruccion(11); instruccion(11);
$(".btn-pop").addClass('animated pulse infinite'); $('.btn-pop').addClass('animated pulse infinite');
$(".btn-pop").click(function(event) { $('.btn-pop').click(function (event) {
if (!$(this).hasClass('block')) { if (!$(this).hasClass('block')) {
$(this).removeClass('animated pulse infinite'); $(this).removeClass('animated pulse infinite');
var este = $(this); var este = $(this);
var html = $($(this).data('popid')); var html = $($(this).data('popid'));
var backcolor = $(this).data("backcolor"); var backcolor = $(this).data('backcolor');
Swal.fire({ Swal.fire({
html: html, html: html,
showCancelButton: false, showCancelButton: false,
showCloseButton: true, showCloseButton: true,
target: $('.sco')[0], target: $('.sco')[0],
customClass: { popup: 'popup-class pop-nota' }, customClass: { popup: 'popup-class pop-nota' },
background: backcolor, background: backcolor,
width:"100%", width: '100%',
padding: ".5rem .5rem .5rem .5rem", padding: '.5rem .5rem .5rem .5rem',
allowOutsideClick: false, allowOutsideClick: false,
allowEscapeKey: false, allowEscapeKey: false,
allowEnterKey: false, allowEnterKey: false,
showConfirmButton: false, showConfirmButton: false,
closeButtonHtml: '<div><img src="img/template/close.png"></div>', closeButtonHtml: '<div><img src="img/template/close.png"></div>',
onBeforeOpen: function() {}, onBeforeOpen: function () {},
onOpen: function() { onOpen: function () {
$(".swal2-popup.popup-class").closest('.swal2-container').css("z-index","998"); $('.swal2-popup.popup-class').closest('.swal2-container').css('z-index', '998');
if ($(este).data("audio")) { if ($(este).data('audio')) {
stopAllSoundsAndPlay(eval($(este).data("audio"))); stopAllSoundsAndPlay(eval($(este).data('audio')));
} else {
stopAllSoundsAndPlay(__click);
}
}else{ if ($(este).hasClass('visitado')) {
stopAllSoundsAndPlay(__click); instruccion(7);
} $('.swal2-close').show();
} else {
instruccion(7);
$('.swal2-close').show();
}
},
onRender: function () {},
onClose: function () {
$(este).addClass('visitado');
stopAllSoundsAndPlay(__click);
if ($(este).hasClass('visitado')) { if ($('.btn-pop').length == $('.btn-pop.visitado').length) {
instruccion(7); fn_end();
$(".swal2-close").show(); } else {
}else{ instruccion(11);
instruccion(7); }
$(".swal2-close").show(); },
} onAfterClose: function () {}
}, });
onRender: function() {}, }
onClose: function() { });
$(este).addClass('visitado');
stopAllSoundsAndPlay(__click);
if ($(".btn-pop").length == $(".btn-pop.visitado").length) {
fn_end();
}else{
instruccion(11);
}
},
onAfterClose: function() {}
});
}
});
} }
function fn_end(){ function fn_end() {
instruccion(1); instruccion(1);
} }
});
</script>
});
</script>
+101 -72
View File
@@ -1,92 +1,121 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<style> <style>
.sec0 { background-image: url(img/fondos/bg6.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; } .sec0 {
.bubble { background-image: url(img/fondos/bg6.jpg);
width: 100%; height: 112px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9); background-repeat: no-repeat;
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; background-size: cover;
} background-position: center;
.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; } .bubble {
.anim { opacity: 0; } width: 100%;
height: 112px;
</style> background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
</head> border-top-left-radius: 25px;
<body> 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="section_charge bg w-100 h-100">
<div class="d-none"></div> <div class="d-none"></div>
<section id="sec0" class="sec0 w-100 h-100"> <section id="sec0" class="sec0 w-100 h-100">
<div class="container h-100"> <div class="container h-100">
<div class="row justify-content-center h-100"> <div class="row justify-content-center h-100">
<div class="col-11 mt-5 pt-"> <div class="col-11 mt-5 pt-">
<div class="bubble d-flex align-items-center shadow px-3 py-2 anim anim1"> <div class="bubble d-flex align-items-center shadow px-3 py-2 anim anim1">
<p class="m-0"> <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> A continuación, podrás observar un video en el cual conocerás las funciones de las
que posee MAPFRE, mismas a las que deberás acudir en caso de haber <b>detectado irregularidades </b>en alguna operación. <b>estructuras internas de control</b>
</p> que posee Mapfre, mismas a las que deberás acudir en caso de haber
</div> <b>detectado irregularidades</b>
</div> en alguna operación.
<div class="col-7 animated zoomIn"> </p>
<div class="play border_video block"></div> </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> </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> </div>
</body> </body>
</html> </html>
<script> <script>
jQuery(document).ready(function($) { jQuery(document).ready(function ($) {
instruccion(0); 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() { Audio_R15.on('end', function () {
$(".play").removeClass('block'); $('.play').removeClass('block');
instruccion(10); instruccion(10);
}); });
$(".layer-load").show(); $('.layer-load').show();
$('.section_charge').waitForImages({ $('.section_charge').waitForImages({
finished: function() { finished: function () {
$(".section_charge").css("visibility", "visible"); $('.section_charge').css('visibility', 'visible');
$(".wloader").hide(); $('.wloader').hide();
fn_animate(); fn_animate();
},
}, each: function (loaded, count, success) {
each: function(loaded, count, success) { var total = Math.floor((loaded * 100) / count);
var total = Math.floor((loaded * 100) / count); $('.wloader').show();
$(".wloader").show(); },
waitForAll: true
},
waitForAll: true
}); });
function fn_animate(){ function fn_animate() {
var tl = new TimelineMax(); var tl = new TimelineMax();
tl.fromTo(".anim1",1,{opacity:0, y:-100},{opacity:1, y:0, ease:Expo.easeInOut}); tl.fromTo('.anim1', 1, { opacity: 0, y: -100 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
tl.call(fn_firstAudio); tl.call(fn_firstAudio);
} }
function fn_firstAudio(){ function fn_firstAudio() {
stopAllSoundsAndPlay(Audio_R15); stopAllSoundsAndPlay(Audio_R15);
} }
var vid = document.getElementById("video"); var vid = document.getElementById('video');
$(".play").click(function(event) { $('.play').click(function (event) {
if (!$(this).hasClass('block')) { if (!$(this).hasClass('block')) {
instruccion(0); instruccion(0);
$(this).hide(); $(this).hide();
vid.play(); vid.play();
} }
}); });
$('video').on('ended',function(){ $('video').on('ended', function () {
instruccion(1); instruccion(1);
}); });
});
}); </script>
</script>
+175 -137
View File
@@ -1,162 +1,200 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<style> <style>
.sec0 { background-image: url(img/fondos/bg3.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; } .sec0 {
.personaje { position: relative; z-index: 2;} background-image: url(img/fondos/bg3.jpg);
.bubble { background-repeat: no-repeat;
position: relative; width: 100%; height: 112px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9); background-size: cover;
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; background-position: center;
} }
.btn_ponter { cursor: pointer; position: absolute; } .personaje {
.headone { background-image: linear-gradient(to right, #60718f, #718aaa, #81a3c6, #91bee1, #a2d9fd); } position: relative;
.headtwo { background-image: linear-gradient(to left, #b9230f, #bf3018, #c53c20, #cb4628, #d15030);} 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; } .anim {
opacity: 0;
</style> }
</head> </style>
<body> </head>
<body>
<div class="section_charge bg w-100 h-100"> <div class="section_charge bg w-100 h-100">
<div class="d-none"></div> <div class="d-none"></div>
<section id="sec0" class="sec0 w-100 h-100"> <section id="sec0" class="sec0 w-100 h-100">
<div class="container h-100"> <div class="container h-100">
<div class="row justify-content-center pt-5 anim anim1"> <div class="row justify-content-center pt-5 anim anim1">
<div class="col-1"> <div class="col-1">
<div class="personaje personaje_m_4 mx-auto"></div> <div class="personaje personaje_m_4 mx-auto"></div>
</div> </div>
<div class="col-9"> <div class="col-9">
<div class="bubble d-flex align-items-center shadow pl-5 pr-3 py-2"> <div class="bubble d-flex align-items-center shadow pl-5 pr-3 py-2">
<p class="m-0"> <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> Gracias por tu ayuda, Rubén. Ahora sé lo indispensable sobre las nuevas disposiciones en torno a la
</p> <b>Prevención de Lavado de Dinero y Financiamiento al Terrorismo.</b>
</div> </p>
</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> </div>
</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> </div>
</body> </body>
</html> </html>
<script> <script>
jQuery(document).ready(function($) { jQuery(document).ready(function ($) {
instruccion(0); instruccion(0);
var Audio_22 = newSound("audio/Audio_22_Marcos.mp3"); var Audio_22 = newSound('audio/Audio_22_Marcos.mp3');
var Audio_R17 = newSound("audio/Audio_17_Ruben.mp3"); var Audio_R17 = newSound('audio/Audio_17_Ruben.mp3');
Audio_22.on("end", function() { Audio_22.on('end', function () {
stopAllSoundsAndPlay(Audio_R17); stopAllSoundsAndPlay(Audio_R17);
var tl2 = new TimelineMax(); var tl2 = new TimelineMax();
tl2.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut}); tl2.fromTo('.anim2', 1, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
$('.personaje_m_4').removeClass('play'); $('.personaje_m_4').removeClass('play');
$('.personaje_r_4').addClass('play'); $('.personaje_r_4').addClass('play');
}); });
Audio_R17.on("end", function() { Audio_R17.on('end', function () {
var tl3 = new TimelineMax(); var tl3 = new TimelineMax();
tl3.fromTo(".anim3",.7,{opacity:0, y:-50},{opacity:1, y:0, ease:Expo.easeInOut}); tl3.fromTo('.anim3', 0.7, { opacity: 0, y: -50 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
$('.personaje_r_4').removeClass('play'); $('.personaje_r_4').removeClass('play');
$('.card-header').removeClass('block').addClass('animated pulse slowly infinite'); $('.card-header').removeClass('block').addClass('animated pulse slowly infinite');
fn_accordion(); fn_accordion();
instruccion(11); instruccion(11);
}); });
$(".layer-load").show(); $('.layer-load').show();
$('.section_charge').waitForImages({ $('.section_charge').waitForImages({
finished: function() { finished: function () {
$(".section_charge").css("visibility", "visible"); $('.section_charge').css('visibility', 'visible');
$(".wloader").hide(); $('.wloader').hide();
fn_animate(); fn_animate();
$(".carousel").carousel({ interval: false }); $('.carousel').carousel({ interval: false });
},
}, each: function (loaded, count, success) {
each: function(loaded, count, success) { var total = Math.floor((loaded * 100) / count);
var total = Math.floor((loaded * 100) / count); $('.wloader').show();
$(".wloader").show(); },
waitForAll: true
},
waitForAll: true
}); });
function fn_animate(){ function fn_animate() {
var tl = new TimelineMax(); var tl = new TimelineMax();
tl.fromTo(".anim1",.7,{opacity:0, x:-250},{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); tl.call(fn_firstAudio);
} }
function fn_firstAudio(){ function fn_firstAudio() {
stopAllSoundsAndPlay(Audio_22); stopAllSoundsAndPlay(Audio_22);
$('.personaje_m_4').addClass('play'); $('.personaje_m_4').addClass('play');
} }
function fn_accordion(){ function fn_accordion() {
$('.card-header').click(function(){ $('.card-header').click(function () {
if (!$(this).hasClass('block')) { if (!$(this).hasClass('block')) {
$(this).addClass('visit'); $(this).addClass('visit');
$(this).removeClass('animated pulse slowly infinite'); $(this).removeClass('animated pulse slowly infinite');
if ($('.card-header').length <= $('.card-header.visit').length) { if ($('.card-header').length <= $('.card-header.visit').length) {
instruccion(1); instruccion(1);
} }
} }
}); });
} }
function fn_end(){ function fn_end() {
instruccion(1); instruccion(1);
} }
});
</script>
});
</script>
+503 -393
View File
@@ -1,434 +1,544 @@
<!DOCTYPE html> <!doctype html>
<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> <body>
<style> <section class="section_charge w-100 h-100">
.sec0{background-image:url(img/fondos/bg7.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;} <section id="sec0" class="sec0 w-100 h-100 px-3">
.sec1{background-image:url(img/fondos/bg6.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;} <div class="container h-100">
.sco .swal2-container{background-color:rgba(22,40,68,1)!important;} <div class="row align-items-center h-100">
.btn_{position:absolute;bottom:-11%;left:72%;} <div class="col-4 align-self-end animated bounceInLeft">
.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;} <img src="img/sprites/h3.png" class="mx-auto d-block" alt="" />
.bg-blanco{background-image:url(img/fondos/bg0.png);background-repeat:no-repeat;background-size:cover;background-position:center;} </div>
.bg_actividad{background-image:linear-gradient(to right,#b9230f,#ad210e,#a21e0d,#961c0c,#8b1a0b);border-top-right-radius:25px;} <div class="col-8 animated zoomIn">
.bg-gris{background-image:url(img/actividad/bg_gris.png);background-repeat:no-repeat;background-size:cover;background-position:center;} <div class="card card_intro shadow p-3">
.cuadro_gris{position:relative;background-image:url(img/actividad/gris.png);background-repeat:no-repeat;background-size:100% 100%;margin:0 auto;} <div class="row">
.opcion{position:relative;padding-top:10px;cursor:pointer;padding-left:18px;} <div class="col-12 mb-2 text-center">
.opcion:hover{font-weight:bold;background-color:#D67E72;} <p class="text-rojo-1 f33">
.opcion:hover:before{background-color:#fff;} <b><i>¡Bienvenido a la Evaluación final!</i></b>
.opcion:before{content:"";position:absolute;width:20px;height:20px;border:2px solid #fff;top:61%;left:-13px;border-radius:25px;transform:translateY(-50%);} </p>
.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;} </div>
.sec2.good{background-image:url(img/fondos/bg8.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;} <div class="col-12 mb-3">
.sec2.bad{background-image:url(img/fondos/bg9.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;} <p>
.text-rojo-1{color:#b9230f;font-weight:bold;} Para concluir con tu curso, queremos invitarte a resolver la siguiente
.txt_final p,h4 { margin-bottom: .2rem; } <b>evaluación</b>
.cuadro_gris { padding: 2rem 1rem 3rem 1rem; } , en la cual deberás tomar la
</style> <b>mejor decisión</b>
</head> .
</p>
<body> <p>Para hacerlo, lee con atención cada pregunta y selecciona la opción que consideres correcta.</p>
<section class="section_charge w-100 h-100"> <div class="w-100 text-center mb-3">
<section id="sec0" class="sec0 w-100 h-100 px-3"> <div class="badge badge-secondary mx-auto intento text-center">1 de 6</div>
<div class="container h-100"> </div>
<div class="row align-items-center h-100"> <p class="text-center f30 text-rojo-1"><b>¡Éxito!</b></p>
<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> </div>
<p class="text-center f30 text-rojo-1"><b>¡Éxito!</b></p>
</div> </div>
</div> </div>
</div> <div class="btn_">
<div class="btn_"> <img
<img src="img/template/btn-comenzar.svg" width="223" height="76" class="btn_comenzar" style="display: none;"> src="img/template/btn-comenzar.svg"
width="223"
height="76"
class="btn_comenzar"
style="display: none"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </section>
</section> <section id="sec1" class="sec1 w-100 h-100 px-3 pt-4">
<section id="sec1" class="sec1 w-100 h-100 px-3 pt-4"> <div class="container">
<div class="container"> <div class="row justify-content-center">
<div class="row justify-content-center"> <div class="col-12 mb-1 mt-3">
<div class="col-12 mb-1 mt-3"> <p>
<p> <b class="text-rojo-2">Instrucciones:</b>
<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. lee atentamente cada una de las situaciones que se te presentan y selecciona el tipo de operación al
</p> cual corresponden.
</div> </p>
</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>
</div> </div>
<div class="row wopciones mt-3"></div>
</div> </div>
<div class="col-5"> <div class="row">
<div class="col-4 text-center"> <div class="col-7 bg_actividad text-white py-3">
<img src="img/sprites/marcos_actividad.png" alt=""> <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>
</div> </div>
</div> </section>
</section> <section id="sec2" class="sec2 w-100 h-100 px-3" style="display: none">
<section id="sec2" class="sec2 w-100 h-100 px-3" style="display: none;"> <div class="container h-100">
<div class="container h-100"> <div class="row align-items-center h-100">
<div class="row align-items-center h-100"> <div class="col-7">
<div class="col-7 "> <div class="card bg-transparent p-2 shadow-none border-0">
<div class="card bg-transparent p-2 shadow-none border-0"> <div class="row">
<div class="row"> <!-- <div class="col-12 text-center mb-2">
<!-- <div class="col-12 text-center mb-2">
<img class="img_change"> <img class="img_change">
</div> --> </div> -->
<div class="col-12 text-center"> <div class="col-12 text-center">
<div class="txt_final"></div> <div class="txt_final"></div>
<div class="cuadro_gris wcars"> <div class="cuadro_gris wcars">
<div class="row"> <div class="row">
<div class="col-12 mb-2"> <div class="col-12 mb-2">
<div class="cuadro_naranja pl-1"> <div class="cuadro_naranja pl-1">
<div class="row align-items-center justify-content-center w-100 h-100"> <div class="row align-items-center justify-content-center w-100 h-100">
<div class="col-7 text-left">Total de preguntas:</div> <div class="col-7 text-left">Total de preguntas:</div>
<div id="totalp" class="col-3"></div> <div id="totalp" class="col-3"></div>
</div>
</div> </div>
</div> </div>
</div> <div class="col-12 mb-2">
<div class="col-12 mb-2"> <div class="cuadro_naranja">
<div class="cuadro_naranja"> <div class="row align-items-center justify-content-center w-100 h-100">
<div class="row align-items-center justify-content-center w-100 h-100"> <div class="col-7 text-left">Correctas:</div>
<div class="col-7 text-left">Correctas:</div> <div id="totalc" class="col-3"></div>
<div id="totalc" class="col-3"></div> </div>
</div> </div>
</div> </div>
</div> <div class="col-12 mb-2">
<div class="col-12 mb-2"> <div class="cuadro_naranja">
<div class="cuadro_naranja"> <div class="row align-items-center justify-content-center w-100 h-100">
<div class="row align-items-center justify-content-center w-100 h-100"> <div class="col-7 text-left">Incorrectas:</div>
<div class="col-7 text-left">Incorrectas:</div> <div id="totali" class="col-3"></div>
<div id="totali" class="col-3"></div> </div>
</div> </div>
</div> </div>
</div> <div class="col-12 mb-2">
<div class="col-12 mb-2"> <div class="cuadro_naranja">
<div class="cuadro_naranja"> <div class="row align-items-center justify-content-center w-100 h-100">
<div class="row align-items-center justify-content-center w-100 h-100"> <div class="col-7 text-left">Calificación:</div>
<div class="col-7 text-left">Calificación:</div> <div id="cal" class="col-3"></div>
<div id="cal" class="col-3"></div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="col-12 text-center">
<div class="col-12 text-center"> <img src="img/actividad/btn_reintentar.svg" width="367" height="87" class="btn_re d-none" />
<img src="img/actividad/btn_reintentar.svg" width="367" height="87" class="btn_re d-none"> </div>
</div> <div class="col-12 leyenda" style="font-size: 16px">
<div class="col-12 leyenda" style="font-size: 16px;"> <p>
<p><em>MAPFRE M&eacute;xico S.A. / MAPFRE Fianzas S.A., emite el presente certificado en cumplimiento a las Disposiciones Quincuag&eacute;sima Segunda, en relaci&oacute;n con la Quincuag&eacute;sima Primera, del acuerdo por el que se emiten las disposiciones de Car&aacute;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&oacute;n el 19 de Noviembre del 2020.</em></p> <em>
Mapfre M&eacute;xico S.A. / Mapfre Fianzas S.A., emite el presente certificado en cumplimiento a
las Disposiciones Quincuag&eacute;sima Segunda, en relaci&oacute;n con la Quincuag&eacute;sima
Primera, del acuerdo por el que se emiten las disposiciones de Car&aacute;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&oacute;n el 19 de Noviembre del 2020.
</em>
</p>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="col-5 text-center align-self-end">
<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/h3.png" class="personaje_good d-none" alt=""> <img src="img/sprites/h6.png" class="personaje_bad d-none" alt="" />
<img src="img/sprites/h6.png" class="personaje_bad d-none" alt=""> </div>
</div> </div>
</div> </div>
</div> </section>
</section> </section>
</section> </body>
</body> <div class="d-none">
<div class="d-none"> <div id="pop0" class="w-100 h-100">
<div id="pop0" class="w-100 h-100"> <div class="container-fluid pt-2">
<div class="container-fluid pt-2"> <div class="row w-100 h-100 align-items-center justify-content-center">
<div class="row w-100 h-100 align-items-center justify-content-center"> <div class="col-12 text-white text-center">
<div class="col-12 text-white text-center"> <img src="img/actividad/3.png" alt="" />
<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>
<div class="col-8 text-white mt-3"> </div>
<h4 class="text-center">¡Muy bien!</h4> </div>
<div class="txt_retro_bien"></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> </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> </html>
<script> <script>
jQuery(document).ready(function ($) {
jQuery(document).ready(function($) { /**************************************/
/**************************************/ var max_intentos_mapfre = 6;
var max_intentos_mapfre = 6; var intentos = getLocation();
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();
var score = getScore(); var score = getScore();
$(".txt_final").html("<p>Calificación reportada: <b>" + score + "%</b></p>"); /****************************************/
if (score >= 80) { var preguntas;
$(".sec2").addClass('good'); var quiz_object = new Object();
$(".personaje_good").removeClass("d-none"); instruccion(0);
$(".leyenda").addClass('mt-2'); var audio24 = newSound('audio/Audio_24_Marcos.mp3');
$(".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);
}
}); quiz_object.preguntaActual = 0;
</script> 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
View File
@@ -1,236 +1,244 @@
<!DOCTYPE html> <!doctype html>
<html lang="es"> <html lang="es">
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1">
<title>MAPFRE</title> <title>MAPFRE</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.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/sweetalert2.min.css" />
<link rel="stylesheet" type="text/css" href="css/borderless.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/animate.min.css" />
<link rel="stylesheet" type="text/css" href="css/all.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="webfonts/muli/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="css/x.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/colors.css" />
<link rel="stylesheet" type="text/css" href="css/sprites.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/mysprites.css" />
<link rel="stylesheet" type="text/css" href="css/site.css"> <link rel="stylesheet" type="text/css" href="css/site.css" />
<style type="text/css"> <style type="text/css">
.wmenu.open { .wmenu.open {
left: 0; left: 0;
height: 874px; height: 874px;
top: 0; top: 0;
z-index: 999; z-index: 999;
overflow: auto; overflow: auto;
} }
.header { .header {
background-size: 100%; background-size: 100%;
height: 75px; height: 75px;
} }
.footer { .footer {
height: 71px; height: 71px;
bottom: -4px; bottom: -4px;
} }
.sco { .sco {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: calc(100% - (68px + 75px)); height: calc(100% - (68px + 75px));
top: 75px; top: 75px;
} }
.sco.hasvideo { .sco.hasvideo {
top: 5px; top: 5px;
height: 100%; height: 100%;
} }
.subtenma { .subtenma {
position: absolute; position: absolute;
left: 0; left: 0;
top: 80px; top: 80px;
padding: .325em; padding: 0.325em;
background-color: #A60000; background-color: #a60000;
border-top-right-radius: 15px; border-top-right-radius: 15px;
border-bottom-right-radius: 15px; border-bottom-right-radius: 15px;
color: #FFF; color: #fff;
-webkit-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out; transition: all 0.5s ease-out;
} }
.subtenma.abierto { .subtenma.abierto {
left: 0!important; left: 0 !important;
} }
div.subtenma > div.btn-show-subs > i.far.fa-chevron-right { div.subtenma > div.btn-show-subs > i.far.fa-chevron-right {
display: inline; display: inline;
} }
div.subtenma > div.btn-show-subs > i.far.fa-chevron-left { div.subtenma > div.btn-show-subs > i.far.fa-chevron-left {
display: none; display: none;
} }
.soportemenu { .soportemenu {
background-color: #737373; background-color: #737373;
height: 80px; height: 80px;
right: 20px; right: 20px;
top: 0; top: 0;
border-bottom-left-radius: 30px; border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px; border-bottom-right-radius: 30px;
} }
.__paginacion { .__paginacion {
position: absolute; position: absolute;
top: 15px; top: 15px;
left: 139px; left: 139px;
font-weight: bold; font-weight: bold;
font-size: 35px; font-size: 35px;
} }
.instruccionsco { .instruccionsco {
border: red solid 2px; border: red solid 2px;
border-top-left-radius: 15px; border-top-left-radius: 15px;
border-bottom-left-radius: 15px; border-bottom-left-radius: 15px;
bottom: 0; bottom: 0;
z-index: 1103; z-index: 1103;
top: auto; top: auto;
} }
.footer .wnavs { .footer .wnavs {
height: 67px; height: 67px;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
margin: 0 auto; margin: 0 auto;
width: 358px; width: 358px;
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
position: absolute; position: absolute;
} }
.btn__atras { .btn__atras {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
} }
.btn__siguiente { .btn__siguiente {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
} }
.__paginacion { .__paginacion {
position: absolute; position: absolute;
top: 11px; top: 11px;
left: 139px; left: 139px;
font-weight: bold; font-weight: bold;
font-size: 35px; font-size: 35px;
color: #616A73; color: #616a73;
} }
.wmenu { .wmenu {
position: absolute; position: absolute;
z-index: 90; z-index: 90;
height: 100% !important; height: 100% !important;
width: 100%; width: 100%;
left: -100%; left: -100%;
background-color: #00263A; background-color: #00263a;
-webkit-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out; transition: all 0.2s ease-out;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
overflow: auto; overflow: auto;
overflow-x: hidden; overflow-x: hidden;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
align-content: flex-start; align-content: flex-start;
justify-content: space-around; justify-content: space-around;
align-items: flex-start; align-items: flex-start;
z-index: 1104 !important; z-index: 1104 !important;
} }
.wcontainer .swal2-content { .wcontainer .swal2-content {
font-size: 24px; font-size: 24px;
} }
.mute::after { .mute::after {
content: '\f05e'; content: '\f05e';
position: absolute; position: absolute;
text-align: center; text-align: center;
z-index: 5; z-index: 5;
font-family: "Font Awesome 5 Pro"; font-family: 'Font Awesome 5 Pro';
left: 27px; left: 27px;
font-size: 2.5em; font-size: 2.5em;
color: #FFF; color: #fff;
top: -5px; top: -5px;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="wcontainer" id="wcontainer"> <div class="wcontainer" id="wcontainer">
<div class="header position-absolute d-flex align-items-center px-2 bg-white shadow"> <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="row h-100 w-100 align-items-center">
<div class="col-2 text-center"> <div class="col-2 text-center">
<img src="img/template/logo.png"> <img src="img/template/logo.png" class="img-fluid" />
</div> </div>
<div class="col-8 text-left" style="font-size: 30px;padding-left: 2rem;line-height: 31px;"> <div class="col-8 text-left" style="font-size: 30px; padding-left: 2rem; line-height: 31px">
<span class="nombredelcurso"></span> <span class="nombredelcurso"></span>
</div> </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> </div>
<div class="sco"></div> <div class="d-flex align-self-end align-items-center soportemenu position-absolute">
<div class="subtenma abierto d-flex align-items-center flex-row"> <div class="btn-menu-sco mx-3 btn__home">
<div class="subtematxt"></div> <img src="img/template/home.svg" width="40" height="40" />
<div class="btn-show-subs pl-3 pr-1"> </div>
<i class="far fa-chevron-left"></i> <div class="btn-menu-sco mx-3 btn__menu">
<i class="far fa-chevron-right"></i> <img src="img/template/menu.svg" width="40" height="40" />
</div> </div>
<div class="btn-menu-sco mx-3 btn__reload">
<img src="img/template/recargar.svg" width="40" height="40" />
</div>
</div> </div>
<div class="footer position-absolute bg-white"> </div>
<div class="btn__mute position-absolute btn-sound-control-sco" style="left: 0; top: 0;"> <div class="sco"></div>
<img src="img/template/sound.svg" height="68" class=""> <div class="subtenma abierto d-flex align-items-center flex-row">
</div> <div class="subtematxt"></div>
<div class="btn-show-subs pl-3 pr-1">
<div class="wnavs"> <i class="far fa-chevron-left"></i>
<div class="btn-menu-sco btn__atras"> <i class="far fa-chevron-right"></i>
<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>
<div class="instruccionsco"> </div>
<p>Da clic en siguiente</p> <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>
<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="wnavs">
<div class="w-50 text-white p-3 d-flex flex-column" style="height: 696px; overflow-y: auto;"> <div class="btn-menu-sco btn__atras">
<div class="itemsmenu mb-2"></div> <img src="img/template/prev.svg" height="68" />
</div> </div>
<div class="avancesco w-50 align-items-center d-flex justify-content-center h-100"> <div class="__paginacion">01/10</div>
<div class="curso-progress"></div> <div class="btn-menu-sco btn__siguiente">
</div> <img src="img/template/next.svg" height="68" />
</div>
</div> </div>
<div class="wloader justify-content-center align-items-center flex-column bg-light"> </div>
<div class="lds-roller"> <div class="instruccionsco">
<div></div> <p>Da clic en siguiente</p>
<div></div> </div>
<div></div> <div class="wmenu flex-row pt-5">
<div></div> <img
<div></div> src="img/template/close.svg"
<div></div> width="54"
<div></div> height="46"
<div></div> class="position-absolute btn-close-menu"
</div> style="top: 23px; right: 50px; z-index: 55"
<div class="w-100 text-center loaderstatus">Cargando...</div> />
<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>
<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> </div>
<!-- js --> <!-- 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-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.min.js" type="text/javascript" charset="utf-8"></script>-->
<script src="js/jquery-ui.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/instrucciones.js" type="text/javascript" charset="utf-8"></script>
<script src="js/site.js" type="text/javascript" charset="utf-8"></script> <script src="js/site.js" type="text/javascript" charset="utf-8"></script>
<!-- end js --> <!-- end js -->
</body> </body>
</html>
</html>
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
View File
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.