update submenu y algunas imagenes
This commit is contained in:
parent
fd779d0724
commit
677ae01b56
44
config.json
44
config.json
@ -16,6 +16,10 @@
|
||||
"title": "Vivir con enfermedad renal ",
|
||||
"content": "contenido/03.html"
|
||||
},
|
||||
{
|
||||
"title": "Contenidos ",
|
||||
"content": "contenido/02.html"
|
||||
},
|
||||
{
|
||||
"title": "Inicio en la terapia de diálisis peritoneal ",
|
||||
"content": "contenido/04.html"
|
||||
@ -24,10 +28,18 @@
|
||||
"title": "Inicio en la terapia de diálisis peritoneal ",
|
||||
"content": "contenido/05.html"
|
||||
},
|
||||
{
|
||||
"title": "Contenidos ",
|
||||
"content": "contenido/02.html"
|
||||
},
|
||||
{
|
||||
"title": "Acceso peritoneal y sus cuidados ",
|
||||
"content": "contenido/06.html"
|
||||
},
|
||||
{
|
||||
"title": "Contenidos ",
|
||||
"content": "contenido/02.html"
|
||||
},
|
||||
{
|
||||
"title": "Terapia segura en casa ",
|
||||
"content": "contenido/07.html"
|
||||
@ -36,6 +48,10 @@
|
||||
"title": "Terapia segura en casa ",
|
||||
"content": "contenido/08.html"
|
||||
},
|
||||
{
|
||||
"title": "Contenidos ",
|
||||
"content": "contenido/02.html"
|
||||
},
|
||||
{
|
||||
"title": "Terapia segura en casa ",
|
||||
"content": "contenido/09.html"
|
||||
@ -44,6 +60,10 @@
|
||||
"title": "Terapia segura en casa ",
|
||||
"content": "contenido/10.html"
|
||||
},
|
||||
{
|
||||
"title": "Contenidos ",
|
||||
"content": "contenido/02.html"
|
||||
},
|
||||
{
|
||||
"title": "Autocuidado ",
|
||||
"content": "contenido/11.html"
|
||||
@ -52,26 +72,50 @@
|
||||
"title": "Autocuidado ",
|
||||
"content": "contenido/12.html"
|
||||
},
|
||||
{
|
||||
"title": "Contenidos ",
|
||||
"content": "contenido/02.html"
|
||||
},
|
||||
{
|
||||
"title": "Manejo de medicamentos y terapia dialítica",
|
||||
"content": "contenido/13.html"
|
||||
},
|
||||
{
|
||||
"title": "Contenidos ",
|
||||
"content": "contenido/02.html"
|
||||
},
|
||||
{
|
||||
"title": "Entrega domiciliaria ",
|
||||
"content": "contenido/14.html"
|
||||
},
|
||||
{
|
||||
"title": "Contenidos ",
|
||||
"content": "contenido/02.html"
|
||||
},
|
||||
{
|
||||
"title": "Actuación ante incidencias ",
|
||||
"content": "contenido/15.html"
|
||||
},
|
||||
{
|
||||
"title": "Contenidos ",
|
||||
"content": "contenido/02.html"
|
||||
},
|
||||
{
|
||||
"title": "Procedimientos",
|
||||
"content": "contenido/16.html"
|
||||
},
|
||||
{
|
||||
"title": "Contenidos ",
|
||||
"content": "contenido/02.html"
|
||||
},
|
||||
{
|
||||
"title": "Procedimientos",
|
||||
"content": "contenido/17.html"
|
||||
},
|
||||
{
|
||||
"title": "Contenidos ",
|
||||
"content": "contenido/02.html"
|
||||
},
|
||||
{
|
||||
"title": "Alarmas",
|
||||
"content": "contenido/18.html"
|
||||
|
||||
@ -7,64 +7,149 @@
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.bul0 {
|
||||
list-style-type: none;
|
||||
list-style-image: url(img/bul0.png);
|
||||
.grid-cards {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
ul.bul0>li {
|
||||
margin-bottom: .5rem;
|
||||
.btn-tema-go {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, .4);
|
||||
cursor: pointer;
|
||||
border-radius: 35px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-tema-go.hover:hover {
|
||||
transform: scale(1.05) !important;
|
||||
}
|
||||
</style>
|
||||
<div class='page-sco py-2 py-md-0 h-100'>
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-12'>
|
||||
<div class='row justify-content-center'>
|
||||
<div class="col-12 text-center animate__animated animate__bounceInDown">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Contenidos</h2>
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div class="page-sco py-2 py-md-0 h-100">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-11">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-6">
|
||||
<ul class="bul0 text-verde-oscuro fw-bold">
|
||||
<li>Vivir con enfermedad renal </li>
|
||||
<li>Inicio en la terapia de diálisis peritoneal </li>
|
||||
<li>Acceso peritoneal y sus cuidados </li>
|
||||
<li>Terapia segura en casa </li>
|
||||
<li>Autocuidado </li>
|
||||
<li>Manejo de medicamentos y terapia dialítica</li>
|
||||
<li>Entrega domiciliaria </li>
|
||||
<li>Actuación ante incidencias </li>
|
||||
<li>Procedimientos</li>
|
||||
<li>Alarmas</li>
|
||||
<li>Despedida</li>
|
||||
</ul>
|
||||
<div class="col-8">
|
||||
<div class="grid-cards gap-2">
|
||||
<div class="card-span position-relative text-center">
|
||||
<div class="position-relative btn-tema-go d-inline-block" data-pagina="2">
|
||||
<img src="img/card.png" />
|
||||
<div class="position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center p-3">
|
||||
<p class="mb-0 text-white fw-bold">Vivir con enfermedad renal</p>
|
||||
</div>
|
||||
<div class="col-6 text-center animate__animated animate__zoomIn">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-span position-relative text-center">
|
||||
<div class="position-relative btn-tema-go d-inline-block" data-pagina="4">
|
||||
<img src="img/card.png" />
|
||||
<div class="position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center p-3">
|
||||
<p class="mb-0 text-white fw-bold">Inicio en la terapia de diálisis peritoneal</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-span position-relative text-center">
|
||||
<div class="position-relative btn-tema-go d-inline-block" data-pagina="7">
|
||||
<img src="img/card.png" />
|
||||
<div class="position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center p-3">
|
||||
<p class="mb-0 text-white fw-bold">Acceso peritoneal y sus cuidados</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-span position-relative text-center">
|
||||
<div class="position-relative btn-tema-go d-inline-block" data-pagina="9">
|
||||
<img src="img/card.png" />
|
||||
<div class="position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center p-3">
|
||||
<p class="mb-0 text-white fw-bold">Terapia segura en casa</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-span position-relative text-center">
|
||||
<div class="position-relative btn-tema-go d-inline-block" data-pagina="15">
|
||||
<img src="img/card.png" />
|
||||
<div class="position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center p-3">
|
||||
<p class="mb-0 text-white fw-bold">Autocuidado</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-span position-relative text-center">
|
||||
<div class="position-relative btn-tema-go d-inline-block" data-pagina="18">
|
||||
<img src="img/card.png" />
|
||||
<div class="position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center p-3">
|
||||
<p class="mb-0 text-white fw-bold">Manejo de medicamentos y terapia dialítica</li></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-span position-relative text-center">
|
||||
<div class="position-relative btn-tema-go d-inline-block" data-pagina="20">
|
||||
<img src="img/card.png" />
|
||||
<div class="position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center p-3">
|
||||
<p class="mb-0 text-white fw-bold">Entrega domiciliaria</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-span position-relative text-center">
|
||||
<div class="position-relative btn-tema-go d-inline-block" data-pagina="22">
|
||||
<img src="img/card.png" />
|
||||
<div class="position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center p-3">
|
||||
<p class="mb-0 text-white fw-bold">Actuación ante incidencias </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-span position-relative text-center">
|
||||
<div class="position-relative btn-tema-go d-inline-block" data-pagina="24">
|
||||
<img src="img/card.png" />
|
||||
<div class="position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center p-3">
|
||||
<p class="mb-0 text-white fw-bold">Procedimientos</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-span position-relative text-center">
|
||||
<div class="position-relative btn-tema-go d-inline-block" data-pagina="28">
|
||||
<img src="img/card.png" />
|
||||
<div class="position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center p-3">
|
||||
<p class="mb-0 text-white fw-bold">Alarmas</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-span position-relative text-center">
|
||||
<div class="position-relative btn-tema-go d-inline-block" data-pagina="29">
|
||||
<img src="img/card.png" />
|
||||
<div class="position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center p-3">
|
||||
<p class="mb-0 text-white fw-bold">Despedida</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 text-center">
|
||||
<img src="img/02.0.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.wrap-course-content').addClass('fake');
|
||||
gsap.fromTo(".bul0 li",
|
||||
// Estado INICIAL (from)
|
||||
|
||||
// Verificar si algún slide con contenido/02.html ya fue visitado
|
||||
var contentArray = CourseNav.getCourseContentArray();
|
||||
var alreadyVisited = contentArray.some(function(slide) {
|
||||
return slide.content === 'contenido/02.html' && slide.visited;
|
||||
});
|
||||
|
||||
if (!alreadyVisited) {
|
||||
gsap.fromTo(".btn-tema-go",
|
||||
{
|
||||
opacity: 0,
|
||||
y: 90
|
||||
},
|
||||
// Estado FINAL (to)
|
||||
{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
@ -72,9 +157,22 @@
|
||||
stagger: 0.2,
|
||||
ease: "power3.out",
|
||||
onComplete: function() {
|
||||
$('.btn-tema-go').addClass('animate__animated animate__pulse').one('animationend', function() {
|
||||
$(this).removeClass('animate__animated animate__pulse').addClass('hover');
|
||||
});
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
}
|
||||
);
|
||||
} else {
|
||||
$('.btn-tema-go').addClass('hover');
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
|
||||
$('.btn-tema-go').on('click', function() {
|
||||
CourseNav.soundClick();
|
||||
var pagina = $(this).data('pagina');
|
||||
CourseNav.gotoSlide(pagina);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
80
contenido/02.html.back
Normal file
80
contenido/02.html.back
Normal file
@ -0,0 +1,80 @@
|
||||
<style>
|
||||
.fake {
|
||||
background-image: url(img/bg00.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.bul0 {
|
||||
list-style-type: none;
|
||||
list-style-image: url(img/bul0.png);
|
||||
}
|
||||
|
||||
ul.bul0>li {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
</style>
|
||||
<div class='page-sco py-2 py-md-0 h-100'>
|
||||
<div class='container h-100'>
|
||||
<div class='row justify-content-center align-items-center h-100'>
|
||||
<div class='col-12'>
|
||||
<div class='row justify-content-center'>
|
||||
<div class="col-12 text-center animate__animated animate__bounceInDown">
|
||||
<div class="position-relative d-inline-block">
|
||||
<h2 class="text-primary mb-1 fw-bold">Contenidos</h2>
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-6">
|
||||
<ul class="bul0 text-verde-oscuro fw-bold">
|
||||
<li>Vivir con enfermedad renal </li>
|
||||
<li>Inicio en la terapia de diálisis peritoneal </li>
|
||||
<li>Acceso peritoneal y sus cuidados </li>
|
||||
<li>Terapia segura en casa </li>
|
||||
<li>Autocuidado </li>
|
||||
<li>Manejo de medicamentos y terapia dialítica</li>
|
||||
<li>Entrega domiciliaria </li>
|
||||
<li>Actuación ante incidencias </li>
|
||||
<li>Procedimientos</li>
|
||||
<li>Alarmas</li>
|
||||
<li>Despedida</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 text-center animate__animated animate__zoomIn">
|
||||
<img src="img/02.0.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.wrap-course-content').addClass('fake');
|
||||
gsap.fromTo(".bul0 li",
|
||||
// Estado INICIAL (from)
|
||||
{
|
||||
opacity: 0,
|
||||
y: 90
|
||||
},
|
||||
// Estado FINAL (to)
|
||||
{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 1,
|
||||
stagger: 0.2,
|
||||
ease: "power3.out",
|
||||
onComplete: function() {
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
</script>
|
||||
BIN
img/04.0.png
BIN
img/04.0.png
Binary file not shown.
|
Before Width: | Height: | Size: 186 KiB After Width: | Height: | Size: 186 KiB |
BIN
img/04.1.webp
BIN
img/04.1.webp
Binary file not shown.
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 64 KiB |
BIN
img/04.2.webp
BIN
img/04.2.webp
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 63 KiB |
BIN
img/05.0.png
BIN
img/05.0.png
Binary file not shown.
|
Before Width: | Height: | Size: 209 KiB After Width: | Height: | Size: 275 KiB |
BIN
img/08.2.png
BIN
img/08.2.png
Binary file not shown.
|
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 20 KiB |
BIN
img/card.png
Normal file
BIN
img/card.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Loading…
x
Reference in New Issue
Block a user