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": {}
}
+87 -39
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>
<div class="col-6 text-center align-self-center"> <div class="col-6 text-center align-self-center">
<div class="main-txt pt-4 anim anim3"> <div class="main-txt pt-4 anim anim3">
<h2>Prevención y Detección de Operaciones con Recursos de Procedencia Ilícita</h2> <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 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;"> </div>
<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 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> </div>
</div> </div>
</section> </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",.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.fromTo(".anim3", 1,{opacity:0,y:-300,rotationX:-180,rotationY:180},{opacity:1,y:0,rotationX:0,rotationY:0}); tl.fromTo(
'.anim3',
1,
{ opacity: 0, y: -300, rotationX: -180, rotationY: 180 },
{ opacity: 1, y: 0, rotationX: 0, rotationY: 0 }
);
tl.call(fn_end); 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>
+49 -43
View File
@@ -1,29 +1,40 @@
<!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
actualizar. ¿Puedes apoyarme?
</div> </div>
</div> </div>
<div class="col-7 align-self-end anim anim2"> <div class="col-7 align-self-end anim anim2">
@@ -42,16 +53,17 @@
</div> </div>
</section> </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');
@@ -59,45 +71,39 @@ jQuery(document).ready(function($) {
$('.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",.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_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>
+109 -77
View File
@@ -1,22 +1,48 @@
<!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">
@@ -24,7 +50,11 @@
<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">
Y dime Rubén, ¿en Mapfre contamos con algún
<b>Manual de Cumplimiento</b>
para prevenir y detectar operaciones con recursos de procedencia ilícita? Me gustaría revisarlo.
</p>
</div> </div>
</div> </div>
<div class="col-6 align-self-end anim anim2"> <div class="col-6 align-self-end anim anim2">
@@ -34,29 +64,40 @@
</div> </div>
</div> </div>
<div class="col-6 align-self-center"> <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="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 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 obj2 anim anim4"><img src="img/16.png" alt="" /></div>
<div class="obj obj3 anim anim5"><img src="img/17.png" alt=""></div> <div class="obj obj3 anim anim5"><img src="img/17.png" alt="" /></div>
</div> </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="nota btn_nota animated pulse infinite d-none" data-popid="#pop0">
<img src="img/nota.png" alt="" />
</div>
</section> </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
<b>Institución debe tener</b>
y una vez que sea
<b>aprobado</b>
, primero por su Comité de Comunicación y Control y, después, por su Comité de Auditoría, tendrá que
enviarse a
<b>registro de la CNSF</b>
y, a través del medio que elijan, las Instituciones deberán ponerlo a
<b>disposición</b>
de los Intermediarios de seguros y de fianzas con quienes tengan contrato.
</p> </p>
</div> </div>
</div> </div>
@@ -64,64 +105,60 @@
</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",.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_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,
@@ -130,52 +167,47 @@ jQuery(document).ready(function($) {
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 {
}else{
stopAllSoundsAndPlay(__click); stopAllSoundsAndPlay(__click);
} }
if ($(este).hasClass('visitado')) { if ($(este).hasClass('visitado')) {
instruccion(7); instruccion(7);
$(".swal2-close").show(); $('.swal2-close').show();
}else{ } else {
instruccion(7); instruccion(7);
$(".swal2-close").show(); $('.swal2-close').show();
} }
}, },
onRender: function() {}, onRender: function () {},
onClose: function() { onClose: function () {
$(este).addClass('visitado'); $(este).addClass('visitado');
stopAllSoundsAndPlay(__click); stopAllSoundsAndPlay(__click);
if ($(".btn_nota").length == $(".btn_nota.visitado").length) { if ($('.btn_nota').length == $('.btn_nota.visitado').length) {
fn_end(); fn_end();
} else {
}else{
} }
}, },
onAfterClose: function() {} onAfterClose: function () {}
}); });
} }
}); });
function fn_end(){ function fn_end() {
instruccion(1); instruccion(1);
} }
});
});
</script> </script>
+137 -91
View File
@@ -1,29 +1,58 @@
<!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">
<h5 class="title_ m-0">Enfoque Basado en Riesgos (EBR)</h5>
</div>
</div> </div>
</div> </div>
<div class="row justify-content-center mt-3 anim anim1"> <div class="row justify-content-center mt-3 anim anim1">
@@ -33,39 +62,51 @@
<div class="col-10"> <div class="col-10">
<div class="bubble bub1 shadow pl-5 pr-3 py-2"> <div class="bubble bub1 shadow pl-5 pr-3 py-2">
<p class="m-0"> <p class="m-0">
Rubén, he escuchado que en MAPFRE también contamos con una metodología basada en riesgos para prevenir 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 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? utilizar el
<b>Régimen de Excepción</b>
. ¿Puedes hablarme un poco de ella, por favor?
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 anim anim5" style="margin-top: -25px;"> <div class="col-12 anim anim5" style="margin-top: -25px">
<img src="img/30.png" class="mx-auto d-block" alt=""> <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 pop1" data-popid="#pop0" data-backcolor="#63a7bf">
<div class="btn-pop pop2" data-popid="#pop2" data-backcolor="#b9230f"><img src="img/32.png" alt=""></div> <img src="img/31.png" alt="" />
<div class="btn-pop pop3" data-popid="#pop1" data-backcolor="#eb7f3d"><img src="img/33.png" alt=""></div> </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> </div>
<div class="row justify-content-center mt-2 anim anim2"> <div class="row justify-content-center mt-2 anim anim2">
<div class="col-8"> <div class="col-8">
<div class="bubble bub2 shadow pr-5 pl-3 py-2"> <div class="bubble bub2 shadow pr-5 pl-3 py-2">
<p class="m-0"> <p class="m-0">
Claro que sí, Marcos. Nosotros tenemos una metodología que recoge todos los <b>riesgos</b> a los Claro que sí, Marcos. Nosotros tenemos una metodología que recoge todos los
que estamos expuestos y que nos señala cuándo debemos <b>usarla</b>, así como <b>qué hacer </b>en <b>riesgos</b>
caso de identificarlos. 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> </p>
</div> </div>
</div> </div>
<div class="col-1"> <div class="col-1">
<div class="personaje personaje_r_4" style="margin-left: -117px;"></div> <div class="personaje personaje_r_4" style="margin-left: -117px"></div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
</div> </div>
</body> </body>
</html> </html>
<!--POPS--> <!--POPS-->
<div class="d-none"> <div class="d-none">
@@ -75,13 +116,19 @@
<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
geográficos en las que opere, transacciones y canales de envió o distribución.
</p>
<p class="m-0"> <p class="m-0">
Esta metodología deberá establecer y describir todos los <b>procesos</b> que se llevarán a cabo para la Esta metodología deberá establecer y describir todos los
<b>identificación, medición y mitigación de los Riesgos</b>, tomando en cuenta los factores de Riesgo que se <b>procesos</b>
hayan identificado y la información que resulte aplicable en la <b>Evaluación Nacional de Riesgos.</b> que se llevarán a cabo para la
<b>identificación, medición y mitigación de los Riesgos</b>
, tomando en cuenta los factores de Riesgo que se hayan identificado y la información que resulte aplicable
en la
<b>Evaluación Nacional de Riesgos.</b>
</p> </p>
</div> </div>
</div> </div>
@@ -94,8 +141,13 @@
<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>
con base en dicha metodología deberá realizarse
<b>cada 12 meses</b>
y con
<b>antelación al lanzamiento</b>
o uso de nuevos productos, servicios, prácticas o tecnologías.
</p> </p>
</div> </div>
</div> </div>
@@ -108,9 +160,12 @@
<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
<b>modificar sus políticas, criterios, medidas y procedimientos</b>
a fin de establecer los Mitigantes que consideren necesarios en función de los
<b>Riesgos identificados.</b>
</p> </p>
</div> </div>
</div> </div>
@@ -118,23 +173,22 @@
</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');
@@ -142,44 +196,41 @@ jQuery(document).ready(function($) {
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,
@@ -187,53 +238,48 @@ jQuery(document).ready(function($) {
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 {
}else{
stopAllSoundsAndPlay(__click); stopAllSoundsAndPlay(__click);
} }
if ($(este).hasClass('visitado')) { if ($(este).hasClass('visitado')) {
instruccion(7); instruccion(7);
$(".swal2-close").show(); $('.swal2-close').show();
}else{ } else {
instruccion(7); instruccion(7);
$(".swal2-close").show(); $('.swal2-close').show();
} }
}, },
onRender: function() {}, onRender: function () {},
onClose: function() { onClose: function () {
$(este).addClass('visitado'); $(este).addClass('visitado');
stopAllSoundsAndPlay(__click); stopAllSoundsAndPlay(__click);
if ($(".btn-pop").length == $(".btn-pop.visitado").length) { if ($('.btn-pop').length == $('.btn-pop.visitado').length) {
fn_end(); fn_end();
} else {
}else{
} }
}, },
onAfterClose: function() {} onAfterClose: function () {}
}); });
} }
}); });
} }
function fn_end(){ function fn_end() {
instruccion(1); instruccion(1);
} }
});
});
</script> </script>
+52 -46
View File
@@ -1,24 +1,34 @@
<!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">
@@ -26,9 +36,10 @@
<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
que viva fuera del país representa un riesgo mayor que otro cliente que sí reside aquí?
</p> </p>
</div> </div>
</div> </div>
@@ -48,16 +59,17 @@
</div> </div>
</section> </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');
@@ -65,45 +77,39 @@ jQuery(document).ready(function($) {
$('.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",.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_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>
+54 -47
View File
@@ -1,24 +1,34 @@
<!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">
@@ -26,10 +36,13 @@
<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
<b>reportarlas a la SHCP</b>
, a través de la CNSF, ¿te gustaría escucharlos para que así puedas identificar a qué tipo de
operaciones pertenecen?
</p> </p>
</div> </div>
</div> </div>
@@ -49,16 +62,16 @@
</div> </div>
</section> </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');
@@ -66,45 +79,39 @@ jQuery(document).ready(function($) {
$('.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",.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_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>
+59 -47
View File
@@ -1,24 +1,38 @@
<!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">
@@ -31,20 +45,23 @@
<h5 class="title_ text-center py-2 anim anim1">Operaciones inusuales</h5> <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"> <div class="bubble d-flex align-items-center shadow px-3 py-2 anim anim1">
<p class="m-0"> <p class="m-0">
Me parece que estamos ante una <b>operación inusual</b>, ya que esta es una operación de Me parece que estamos ante una
seguros o de fianzas, en la cual la actividad, conducta o comportamiento del Cliente <b>operación inusual</b>
no concuerda con los antecedentes o actividad conocida de él por la Aseguradora o la , ya que esta es una operación de seguros o de fianzas, en la cual la actividad, conducta o
Afianzadora, o declarada a éstas, o no coincide con el perfil transaccional inicial o comportamiento del Cliente no concuerda con los antecedentes o actividad conocida de él por la
habitual de dicho Cliente, en función al origen o destino de los recursos, así como al Aseguradora o la Afianzadora, o declarada a éstas, o no coincide con el perfil transaccional inicial o
monto, frecuencia, tipo o naturaleza de la Operación de que se trate, sin que exista una habitual de dicho Cliente, en función al origen o destino de los recursos, así como al monto,
justificación razonable para dicha operación, actividad, conducta o comportamiento. 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> </p>
</div> </div>
<div class="paper mt-2 anim anim3"> <div class="paper mt-2 anim anim3">
<img src="img/41.png" alt=""> <img src="img/41.png" alt="" />
<div class="txt_paper"> <div class="txt_paper">
<p> <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. 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> </p>
</div> </div>
</div> </div>
@@ -53,52 +70,47 @@
</div> </div>
</section> </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",.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_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>
+124 -79
View File
@@ -1,30 +1,54 @@
<!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">
@@ -35,23 +59,35 @@
</div> </div>
<div class="col-6"> <div class="col-6">
<div class="paper mt-3 anim anim3"> <div class="paper mt-3 anim anim3">
<img src="img/55.png" alt=""> <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 pop1" data-popid="#pop0" data-backcolor="#00ab9c">
<div class="btn-pop pop2" data-popid="#pop1" data-backcolor="#b9230f"><img src="img/57.png" alt=""></div> <img src="img/56.png" alt="" />
<div class="btn-pop pop3" data-popid="#pop2" data-backcolor="#63a7bf"><img src="img/58.png" alt=""></div> </div>
<div class="btn-pop pop4" data-popid="#pop3" data-backcolor="#274663"><img src="img/59.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>
</div> </div>
<div class="bubble p-2 w-75"> <div class="bubble p-2 w-75">
<p class="m-0"> <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: 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> </p>
</div> </div>
</div> </div>
</section> </section>
</div> </div>
</body> </body>
</html> </html>
<!--POPS--> <!--POPS-->
<div class="d-none"> <div class="d-none">
@@ -60,8 +96,11 @@
<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
<b>directivo, funcionario, empleado o apoderado de Mapfre,</b>
mantiene un nivel de vida notoriamente superior al que le correspondería, de acuerdo con los ingresos que
percibe.
</p> </p>
</div> </div>
</div> </div>
@@ -73,8 +112,13 @@
<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,
<b>sin causa justificada,</b>
algún directivo, funcionario, empleado o apoderado de Mapfre, haya
<b>intervenido</b>
de manera reiterada en la realización de Operaciones que hayan sido reportadas como
<b>Operaciones Inusuales.</b>
</p> </p>
</div> </div>
</div> </div>
@@ -86,9 +130,13 @@
<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>
de que algún directivo, funcionario, empleado o apoderado de Mapfre pudieran
<b>haber incurrido en actos, omisiones u Operaciones</b>
que pudiesen favorecer, prestar ayuda, auxilio o cooperación de cualquier especie para la comisión de los
delitos de Lavado de Dinero y Financiamiento al Terrorismo.
</p> </p>
</div> </div>
</div> </div>
@@ -100,9 +148,12 @@
<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>
que se le encomendaron al directivo, funcionario, empleado o apoderado de Mapfre y las
<b>actividades</b>
que de hecho lleva a cabo.
</p> </p>
</div> </div>
</div> </div>
@@ -110,53 +161,51 @@
</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,
@@ -164,53 +213,49 @@ jQuery(document).ready(function($) {
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 {
}else{
stopAllSoundsAndPlay(__click); stopAllSoundsAndPlay(__click);
} }
if ($(este).hasClass('visitado')) { if ($(este).hasClass('visitado')) {
instruccion(7); instruccion(7);
$(".swal2-close").show(); $('.swal2-close').show();
}else{ } else {
instruccion(7); instruccion(7);
$(".swal2-close").show(); $('.swal2-close').show();
} }
}, },
onRender: function() {}, onRender: function () {},
onClose: function() { onClose: function () {
$(este).addClass('visitado'); $(este).addClass('visitado');
stopAllSoundsAndPlay(__click); stopAllSoundsAndPlay(__click);
if ($(".btn-pop").length == $(".btn-pop.visitado").length) { if ($('.btn-pop').length == $('.btn-pop.visitado').length) {
fn_end(); fn_end();
} else {
}else{
instruccion(11); instruccion(11);
} }
}, },
onAfterClose: function() {} onAfterClose: function () {}
}); });
} }
}); });
} }
function fn_end(){ function fn_end() {
instruccion(1); instruccion(1);
} }
});
});
</script> </script>
+68 -39
View File
@@ -1,19 +1,43 @@
<!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">
@@ -22,61 +46,67 @@
<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>
que posee Mapfre, mismas a las que deberás acudir en caso de haber
<b>detectado irregularidades</b>
en alguna operación.
</p> </p>
</div> </div>
</div> </div>
<div class="col-7 animated zoomIn"> <div class="col-7 animated zoomIn">
<div class="play border_video block"></div> <div class="play border_video block"></div>
<div class="embed-responsive embed-responsive-16by9 h-100"> <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> <video
id="video"
controls=""
class="myvideo embed-responsive-item"
src="video/pld_extenso_05.mp4"
></video>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </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();
@@ -84,9 +114,8 @@ jQuery(document).ready(function($) {
} }
}); });
$('video').on('ended',function(){ $('video').on('ended', function () {
instruccion(1); instruccion(1);
}); });
});
});
</script> </script>
+90 -52
View File
@@ -1,22 +1,43 @@
<!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">
@@ -28,7 +49,8 @@
<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
<b>Prevención de Lavado de Dinero y Financiamiento al Terrorismo.</b>
</p> </p>
</div> </div>
</div> </div>
@@ -39,7 +61,14 @@
<div class="card"> <div class="card">
<div class="card-header headone" id="headingOne"> <div class="card-header headone" id="headingOne">
<h2 class="mb-0"> <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"> <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> <b>01</b>
</button> </button>
</h2> </h2>
@@ -47,8 +76,9 @@
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample"> <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body"> <div class="card-body">
La petición deberá ser realizada únicamente por los funcionarios de las Instituciones hayan autorizados para tales efectos, La petición deberá ser realizada únicamente por los funcionarios de las Instituciones hayan
mediante escrito en el que deberá especificarse el motivo y la clase de información que se requiera 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>
</div> </div>
@@ -56,14 +86,22 @@
<div class="card"> <div class="card">
<div class="card-header headtwo" id="headingTwo"> <div class="card-header headtwo" id="headingTwo">
<h2 class="mb-0"> <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"> <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> <b>02</b>
</button> </button>
</h2> </h2>
</div> </div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body"> <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. 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>
@@ -74,38 +112,42 @@
<div class="col-9"> <div class="col-9">
<div class="bubble d-flex align-items-center shadow pr-5 pl-3 py-2"> <div class="bubble d-flex align-items-center shadow pr-5 pl-3 py-2">
<p class="m-0"> <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>, Por nada, Marcos. Recuerda que también es posible el
únicamente cuando se tenga como finalidad fortalecer las medidas para prevenir y detectar delitos en esta materia. Para ello, debemos considerar: <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> </p>
</div> </div>
</div> </div>
<div class="col-1"> <div class="col-1">
<div class="personaje personaje_r_4" style="margin-left: -117px;"></div> <div class="personaje personaje_r_4" style="margin-left: -117px"></div>
</div> </div>
</div> </div>
</div> </div>
</section> </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');
@@ -113,36 +155,34 @@ jQuery(document).ready(function($) {
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');
@@ -153,10 +193,8 @@ jQuery(document).ready(function($) {
}); });
} }
function fn_end(){ function fn_end() {
instruccion(1); instruccion(1);
} }
});
});
</script> </script>
+254 -144
View File
@@ -1,51 +1,141 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head>
<head>
<style> <style>
.sec0{background-image:url(img/fondos/bg7.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;} .sec0 {
.sec1{background-image:url(img/fondos/bg6.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;} background-image: url(img/fondos/bg7.jpg);
.sco .swal2-container{background-color:rgba(22,40,68,1)!important;} background-repeat: no-repeat;
.btn_{position:absolute;bottom:-11%;left:72%;} background-size: cover;
.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;} background-position: center;
.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;} .sec1 {
.bg-gris{background-image:url(img/actividad/bg_gris.png);background-repeat:no-repeat;background-size:cover;background-position:center;} background-image: url(img/fondos/bg6.jpg);
.cuadro_gris{position:relative;background-image:url(img/actividad/gris.png);background-repeat:no-repeat;background-size:100% 100%;margin:0 auto;} background-repeat: no-repeat;
.opcion{position:relative;padding-top:10px;cursor:pointer;padding-left:18px;} background-size: cover;
.opcion:hover{font-weight:bold;background-color:#D67E72;} background-position: center;
.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%);} .sco .swal2-container {
.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;} background-color: rgba(22, 40, 68, 1) !important;
.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;} .btn_ {
.text-rojo-1{color:#b9230f;font-weight:bold;} position: absolute;
.txt_final p,h4 { margin-bottom: .2rem; } bottom: -11%;
.cuadro_gris { padding: 2rem 1rem 3rem 1rem; } 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> </style>
</head> </head>
<body> <body>
<section class="section_charge w-100 h-100"> <section class="section_charge w-100 h-100">
<section id="sec0" class="sec0 w-100 h-100 px-3"> <section id="sec0" class="sec0 w-100 h-100 px-3">
<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-4 align-self-end animated bounceInLeft"> <div class="col-4 align-self-end animated bounceInLeft">
<img src="img/sprites/h3.png" class="mx-auto d-block" alt=""> <img src="img/sprites/h3.png" class="mx-auto d-block" alt="" />
</div> </div>
<div class="col-8 animated zoomIn"> <div class="col-8 animated zoomIn">
<div class="card card_intro shadow p-3"> <div class="card card_intro shadow p-3">
<div class="row"> <div class="row">
<div class="col-12 mb-2 text-center"> <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> <p class="text-rojo-1 f33">
<b><i>¡Bienvenido a la Evaluación final!</i></b>
</p>
</div> </div>
<div class="col-12 mb-3"> <div class="col-12 mb-3">
<p> <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>. Para concluir con tu curso, queremos invitarte a resolver la siguiente
</p> <b>evaluación</b>
<p> , en la cual deberás tomar la
Para hacerlo, lee con atención cada pregunta y selecciona la opción que consideres correcta. <b>mejor decisión</b>
.
</p> </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="w-100 text-center mb-3">
<div class="badge badge-secondary mx-auto intento text-center">1 de 6</div> <div class="badge badge-secondary mx-auto intento text-center">1 de 6</div>
</div> </div>
@@ -54,7 +144,13 @@
</div> </div>
</div> </div>
<div class="btn_"> <div class="btn_">
<img src="img/template/btn-comenzar.svg" width="223" height="76" class="btn_comenzar" style="display: none;"> <img
src="img/template/btn-comenzar.svg"
width="223"
height="76"
class="btn_comenzar"
style="display: none"
/>
</div> </div>
</div> </div>
</div> </div>
@@ -65,30 +161,35 @@
<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> lee atentamente cada una de las situaciones que se te presentan y selecciona el tipo de operación al cual corresponden. <b class="text-rojo-2">Instrucciones:</b>
lee atentamente cada una de las situaciones que se te presentan y selecciona el tipo de operación al
cual corresponden.
</p> </p>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-7 bg_actividad text-white py-3"> <div class="col-7 bg_actividad text-white py-3">
<div class="qtxt d-flex flex-row"> <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="number px-3 font-weight-bold f28"
style="padding-right: 10px; text-align: center; padding-left: 1px"
></div>
<div class="txt"></div> <div class="txt"></div>
</div> </div>
<div class="row wopciones mt-3"></div> <div class="row wopciones mt-3"></div>
</div> </div>
<div class="col-5"> <div class="col-5">
<div class="col-4 text-center"> <div class="col-4 text-center">
<img src="img/sprites/marcos_actividad.png" alt=""> <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">
@@ -134,29 +235,38 @@
</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><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> <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>
<div class="col-8 text-white mt-3"> <div class="col-8 text-white mt-3">
<h4 class="text-center">¡Muy bien!</h4> <h4 class="text-center">¡Muy bien!</h4>
@@ -169,7 +279,7 @@
<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/4.png" alt=""> <img src="img/actividad/4.png" alt="" />
</div> </div>
<div class="col-8 text-white mt-3"> <div class="col-8 text-white mt-3">
<h4 class="text-center">¡Incorrecto!</h4> <h4 class="text-center">¡Incorrecto!</h4>
@@ -178,12 +288,10 @@
</div> </div>
</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();
@@ -192,64 +300,62 @@ jQuery(document).ready(function($) {
var preguntas; var preguntas;
var quiz_object = new Object(); var quiz_object = new Object();
instruccion(0); instruccion(0);
var audio24 = newSound("audio/Audio_24_Marcos.mp3"); var audio24 = newSound('audio/Audio_24_Marcos.mp3');
quiz_object.preguntaActual = 0; quiz_object.preguntaActual = 0;
quiz_object.maxPreguntas = 0; quiz_object.maxPreguntas = 0;
quiz_object.correctas = 0; quiz_object.correctas = 0;
quiz_object.incorrectas = 0; quiz_object.incorrectas = 0;
quiz_object.oportunidades = 2; quiz_object.oportunidades = 2;
$(".layer-load").show(); $('.layer-load').show();
$(document.querySelector('.wcontainer')).waitForImages({ $(document.querySelector('.wcontainer')).waitForImages({
finished: function() { finished: function () {
$(".section_charge").css("visibility", "visible"); $('.section_charge').css('visibility', 'visible');
$(".wloader").hide(); $('.wloader').hide();
if (intentos >= max_intentos_mapfre || score >= 80) { if (intentos >= max_intentos_mapfre || score >= 80) {
resumen() resumen();
} else { } else {
var disponesde = Number(max_intentos_mapfre - intentos); var disponesde = Number(max_intentos_mapfre - intentos);
if (disponesde == 1) { if (disponesde == 1) {
$(".intento").html(disponesde + " intento restante"); $('.intento').html(disponesde + ' intento restante');
} else { } else {
$(".intento").html(disponesde + " intentos restantes"); $('.intento').html(disponesde + ' intentos restantes');
} }
stopAllSoundsAndPlay(audio24); stopAllSoundsAndPlay(audio24);
} }
}, },
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
}); });
audio24.on("play", function() { audio24.on('play', function () {
$(".personaje").addClass('play'); $('.personaje').addClass('play');
}); });
audio24.on("end", function() { audio24.on('end', function () {
$(".personaje").removeClass('play').addClass('stop'); $('.personaje').removeClass('play').addClass('stop');
instruccion(2); instruccion(2);
$(".btn_comenzar").show(); $('.btn_comenzar').show();
$(".btn_comenzar").addClass('animated pulse infinite'); $('.btn_comenzar').addClass('animated pulse infinite');
}); });
ImportFile(); ImportFile();
function ImportFile() { function ImportFile() {
$(".quiz-loader").show(); $('.quiz-loader').show();
var excelUrl = "excel/evaluacion.xlsx"; var excelUrl = 'excel/evaluacion.xlsx';
var oReq = new XMLHttpRequest(); var oReq = new XMLHttpRequest();
oReq.open("GET", excelUrl, true); oReq.open('GET', excelUrl, true);
oReq.responseType = "arraybuffer"; oReq.responseType = 'arraybuffer';
oReq.onload = function(e) { oReq.onload = function (e) {
var arraybuffer = oReq.response; var arraybuffer = oReq.response;
var data = new Uint8Array(arraybuffer); var data = new Uint8Array(arraybuffer);
var arr = new Array(); var arr = new Array();
for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]); for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
var bstr = arr.join(""); var bstr = arr.join('');
var workbook = XLSX.read(bstr, { type: "binary" }); var workbook = XLSX.read(bstr, { type: 'binary' });
var first_sheet_name = workbook.SheetNames[0]; var first_sheet_name = workbook.SheetNames[0];
var worksheet = workbook.Sheets[first_sheet_name]; var worksheet = workbook.Sheets[first_sheet_name];
preguntas = XLSX.utils.sheet_to_json(worksheet, { raw: false }); preguntas = XLSX.utils.sheet_to_json(worksheet, { raw: false });
@@ -257,21 +363,21 @@ jQuery(document).ready(function($) {
transformer_options(); transformer_options();
quiz_object.preguntas = preguntas; quiz_object.preguntas = preguntas;
//console.dir(quiz_object.preguntas); //console.dir(quiz_object.preguntas);
if (quiz_object.maxPreguntas == 0) { quiz_object.maxPreguntas = quiz_object.preguntas.length; } if (quiz_object.maxPreguntas == 0) {
quiz_object.maxPreguntas = quiz_object.preguntas.length;
} }
};
oReq.send(); oReq.send();
} }
function transformer_options() { function transformer_options() {
$.each(preguntas, function(index, pregunta) { $.each(preguntas, function (index, pregunta) {
var opciones = new Array(); var opciones = new Array();
$.each(Object.keys(pregunta), function(index, key) { $.each(Object.keys(pregunta), function (index, key) {
if (key.toLowerCase().indexOf("opcion") >= 0) { if (key.toLowerCase().indexOf('opcion') >= 0) {
var opcion = new Object(); var opcion = new Object();
opcion.text = pregunta[key]; opcion.text = pregunta[key];
if (key.toLowerCase().indexOf("correcta") >= 0) { if (key.toLowerCase().indexOf('correcta') >= 0) {
opcion.valor = 1; opcion.valor = 1;
} else { } else {
opcion.valor = 0; opcion.valor = 0;
@@ -293,13 +399,13 @@ jQuery(document).ready(function($) {
return array; return array;
} }
$(".btn_comenzar").click(function(event) { $('.btn_comenzar').click(function (event) {
__click.play(); __click.play();
setLocation(Number(intentos + 1)); setLocation(Number(intentos + 1));
$(this).removeClass('animated pulse infinite'); $(this).removeClass('animated pulse infinite');
instruccion(8); instruccion(8);
$(".sec0").hide(); $('.sec0').hide();
$(".sec1").show(); $('.sec1').show();
siguientePregunta(); siguientePregunta();
}); });
@@ -308,25 +414,30 @@ jQuery(document).ready(function($) {
// body... // body...
instruccion(8); instruccion(8);
var pregunta = quiz_object.preguntas[quiz_object.preguntaActual]; var pregunta = quiz_object.preguntas[quiz_object.preguntaActual];
$(".qtxt").find(".txt").html(pregunta.pregunta); $('.qtxt').find('.txt').html(pregunta.pregunta);
$(".number").html(quiz_object.preguntaActual + 1); $('.number').html(quiz_object.preguntaActual + 1);
$(".wopciones").html(""); $('.wopciones').html('');
$(".btn-enviar").hide(); $('.btn-enviar').hide();
$(".btn-siguiente-quiz").hide(); $('.btn-siguiente-quiz').hide();
$.each(pregunta.opciones, function(index, opcion) { $.each(pregunta.opciones, function (index, opcion) {
$(".wopciones").append('<div class="col-12 pl-4 wopciones-info mb-1" style="opacity:0;">' + $('.wopciones').append(
'<div data-val="' + opcion.valor + '" class="opcion">' + opcion.text + '<div class="col-12 pl-4 wopciones-info mb-1" style="opacity:0;">' +
'</div></div>'); '<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); TweenMax.staggerFromTo('.wopciones-info', 0.5, { opacity: 0, x: -250 }, { opacity: 1, x: 0 }, 0.25);
$(".opcion").click(function(event) { $('.opcion').click(function (event) {
quiz_object.preguntaActual++; quiz_object.preguntaActual++;
__click.play(); __click.play();
$(".opcion").removeClass('selected'); $('.opcion').removeClass('selected');
$(this).addClass('selected'); $(this).addClass('selected');
$(".txt_retro_bien").html(pregunta.retro_correcta); $('.txt_retro_bien').html(pregunta.retro_correcta);
$(".txt_retro_mal").html(pregunta.retro_incorrecta); $('.txt_retro_mal').html(pregunta.retro_incorrecta);
var valor = $(this).data("val"); var valor = $(this).data('val');
if (Number(valor) > 0) { if (Number(valor) > 0) {
quiz_object.correctas++; quiz_object.correctas++;
if (quiz_object.preguntaActual >= quiz_object.maxPreguntas) { if (quiz_object.preguntaActual >= quiz_object.maxPreguntas) {
@@ -344,91 +455,90 @@ jQuery(document).ready(function($) {
} }
console.log(quiz_object.preguntaActual); console.log(quiz_object.preguntaActual);
$('.btn-siguiente-quiz').show();
$(".btn-siguiente-quiz").show();
//quiz_object.preguntaActual++; //quiz_object.preguntaActual++;
}); });
} }
function finActividad() { function finActividad() {
// body... // body...
$(".sec1").hide(); $('.sec1').hide();
$(".sec2").show(); $('.sec2').show();
var calificacion = (quiz_object.correctas * 100) / quiz_object.maxPreguntas; var calificacion = (quiz_object.correctas * 100) / quiz_object.maxPreguntas;
calificacion = Math.floor(Math.round(calificacion * 100) / 100); calificacion = Math.floor(Math.round(calificacion * 100) / 100);
$("#totalp").html(quiz_object.maxPreguntas); $('#totalp').html(quiz_object.maxPreguntas);
$("#totalc").html(quiz_object.correctas); $('#totalc').html(quiz_object.correctas);
$("#totali").html(quiz_object.incorrectas); $('#totali').html(quiz_object.incorrectas);
$("#cal").html(calificacion + "%"); $('#cal').html(calificacion + '%');
intentos = getLocation(); intentos = getLocation();
setScore(calificacion); setScore(calificacion);
if (calificacion >= 80) { if (calificacion >= 80) {
$(".sec2").addClass('good'); $('.sec2').addClass('good');
//$(".img_change").attr("src","img/actividad2/7.png"); //$(".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>"); $('.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'); $('.personaje_good').removeClass('d-none');
$(".leyenda").addClass('mt-2'); $('.leyenda').addClass('mt-2');
$(".leyenda").css("color","#333"); $('.leyenda').css('color', '#333');
instruccion(1); instruccion(1);
instruccion(13); instruccion(13);
setLessonStatus("completed"); setLessonStatus('completed');
} else { } else {
$(".leyenda").addClass('text-white'); $('.leyenda').addClass('text-white');
if (intentos >= max_intentos_mapfre) { if (intentos >= max_intentos_mapfre) {
setLessonStatus("completed"); setLessonStatus('completed');
//setLessonStatus("c"); //setLessonStatus("c");
$(".sec2").addClass('bad'); $('.sec2').addClass('bad');
//$(".img_change").attr("src","img/actividad2/6.png"); //$(".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>"); $('.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'); $('.personaje_bad').removeClass('d-none');
$(".leyenda").addClass('mt-2'); $('.leyenda').addClass('mt-2');
$(".leyenda").css("color","#333"); $('.leyenda').css('color', '#333');
//$(".btn_re").removeClass('d-none'); //$(".btn_re").removeClass('d-none');
instruccion(1); instruccion(1);
instruccion(13); instruccion(13);
} else { } else {
$(".sec2").addClass('bad'); $('.sec2').addClass('bad');
//$(".img_change").attr("src","img/actividad2/6.png"); //$(".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>"); $('.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'); $('.personaje_bad').removeClass('d-none');
$(".leyenda").addClass('text-white'); $('.leyenda').addClass('text-white');
$(".btn_re").removeClass('d-none'); $('.btn_re').removeClass('d-none');
instruccion(15); instruccion(15);
} }
}
} }
} $('.btn_re').click(function (event) {
$(".btn_re").click(function(event) {
__click.play(); __click.play();
__loadsco(); __loadsco();
}); });
function resumen() { function resumen() {
$(".sec0, .wcars").hide(); $('.sec0, .wcars').hide();
$(".sec1").hide(); $('.sec1').hide();
$(".sec2").show(); $('.sec2').show();
var score = getScore(); var score = getScore();
$(".txt_final").html("<p>Calificación reportada: <b>" + score + "%</b></p>"); $('.txt_final').html('<p>Calificación reportada: <b>' + score + '%</b></p>');
if (score >= 80) { if (score >= 80) {
$(".sec2").addClass('good'); $('.sec2').addClass('good');
$(".personaje_good").removeClass("d-none"); $('.personaje_good').removeClass('d-none');
$(".leyenda").addClass('mt-2'); $('.leyenda').addClass('mt-2');
$(".leyenda").css("color","#333"); $('.leyenda').css('color', '#333');
} } else {
else{ $('.sec2').addClass('bad');
$(".sec2").addClass('bad'); $('.personaje_bad').removeClass('d-none');
$(".personaje_bad").removeClass("d-none"); $('.txt_final').addClass('text-white');
$(".txt_final").addClass('text-white') $('.leyenda').addClass('text-white mt-2');
$(".leyenda").addClass('text-white mt-2');
} }
instruccion(13); instruccion(13);
} }
});
});
</script> </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

+86 -79
View File
@@ -1,95 +1,94 @@
<!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;
@@ -99,32 +98,32 @@ div.subtenma > div.btn-show-subs > i.far.fa-chevron-left {
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;
@@ -139,44 +138,44 @@ div.subtenma > div.btn-show-subs > i.far.fa-chevron-left {
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>
<div class="d-flex align-self-end align-items-center soportemenu position-absolute"> <div class="d-flex align-self-end align-items-center soportemenu position-absolute">
<div class="btn-menu-sco mx-3 btn__home"> <div class="btn-menu-sco mx-3 btn__home">
<img src="img/template/home.svg" width="40" height="40"> <img src="img/template/home.svg" width="40" height="40" />
</div> </div>
<div class="btn-menu-sco mx-3 btn__menu"> <div class="btn-menu-sco mx-3 btn__menu">
<img src="img/template/menu.svg" width="40" height="40"> <img src="img/template/menu.svg" width="40" height="40" />
</div> </div>
<div class="btn-menu-sco mx-3 btn__reload"> <div class="btn-menu-sco mx-3 btn__reload">
<img src="img/template/recargar.svg" width="40" height="40"> <img src="img/template/recargar.svg" width="40" height="40" />
</div> </div>
</div> </div>
</div> </div>
@@ -189,17 +188,17 @@ div.subtenma > div.btn-show-subs > i.far.fa-chevron-left {
</div> </div>
</div> </div>
<div class="footer position-absolute bg-white"> <div class="footer position-absolute bg-white">
<div class="btn__mute position-absolute btn-sound-control-sco" style="left: 0; top: 0;"> <div class="btn__mute position-absolute btn-sound-control-sco" style="left: 0; top: 0">
<img src="img/template/sound.svg" height="68" class=""> <img src="img/template/sound.svg" height="68" class="" />
</div> </div>
<div class="wnavs"> <div class="wnavs">
<div class="btn-menu-sco btn__atras"> <div class="btn-menu-sco btn__atras">
<img src="img/template/prev.svg" height="68"> <img src="img/template/prev.svg" height="68" />
</div> </div>
<div class="__paginacion">01/10</div> <div class="__paginacion">01/10</div>
<div class="btn-menu-sco btn__siguiente"> <div class="btn-menu-sco btn__siguiente">
<img src="img/template/next.svg" height="68"> <img src="img/template/next.svg" height="68" />
</div> </div>
</div> </div>
</div> </div>
@@ -207,8 +206,14 @@ div.subtenma > div.btn-show-subs > i.far.fa-chevron-left {
<p>Da clic en siguiente</p> <p>Da clic en siguiente</p>
</div> </div>
<div class="wmenu flex-row pt-5"> <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;"> <img
<div class="w-50 text-white p-3 d-flex flex-column" style="height: 696px; overflow-y: auto;"> src="img/template/close.svg"
width="54"
height="46"
class="position-absolute btn-close-menu"
style="top: 23px; right: 50px; z-index: 55"
/>
<div class="w-50 text-white p-3 d-flex flex-column" style="height: 696px; overflow-y: auto">
<div class="itemsmenu mb-2"></div> <div class="itemsmenu mb-2"></div>
</div> </div>
<div class="avancesco w-50 align-items-center d-flex justify-content-center h-100"> <div class="avancesco w-50 align-items-center d-flex justify-content-center h-100">
@@ -230,7 +235,10 @@ div.subtenma > div.btn-show-subs > i.far.fa-chevron-left {
</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.