update
This commit is contained in:
parent
def53c643a
commit
516821801a
@ -11,14 +11,18 @@
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-rows: auto auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.img-center {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.btn-tema-go {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, .4);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
|
||||
cursor: pointer;
|
||||
border-radius: 35px;
|
||||
transition: transform 0.3s ease;
|
||||
@ -27,108 +31,149 @@
|
||||
.btn-tema-go.hover:hover {
|
||||
transform: scale(1.05) !important;
|
||||
}
|
||||
|
||||
.w-text p {
|
||||
padding: 0.6rem;
|
||||
background: rgba(242, 232, 222, 0.76);
|
||||
background: linear-gradient(to right, rgba(242, 232, 222, 0.76) 0%, #ffffff 100%);
|
||||
width: 94%;
|
||||
}
|
||||
</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-11">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-8">
|
||||
<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-12">
|
||||
<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
|
||||
class="position-absolute w-100 h-100 w-text top-0 start-0 d-flex justify-content-center align-items-center"
|
||||
>
|
||||
<p class="mb-0 text-primary fw-bold">Vivir con enfermedad renal</p>
|
||||
</div>
|
||||
</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
|
||||
class="position-absolute w-100 h-100 w-text top-0 start-0 d-flex justify-content-center align-items-center"
|
||||
>
|
||||
<p class="mb-0 text-primary 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
|
||||
class="position-absolute w-100 h-100 w-text top-0 start-0 d-flex justify-content-center align-items-center"
|
||||
>
|
||||
<p class="mb-0 text-primary 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
|
||||
class="position-absolute w-100 h-100 w-text top-0 start-0 d-flex justify-content-center align-items-center"
|
||||
>
|
||||
<p class="mb-0 text-primary 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
|
||||
class="position-absolute w-100 h-100 w-text top-0 start-0 d-flex justify-content-center align-items-center"
|
||||
>
|
||||
<p class="mb-0 text-primary 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
|
||||
class="position-absolute w-100 h-100 w-text top-0 start-0 d-flex justify-content-center align-items-center"
|
||||
>
|
||||
<p class="mb-0 text-primary fw-bold">
|
||||
Manejo de medicamentos y terapia dialítica
|
||||
</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
|
||||
class="position-absolute w-100 h-100 w-text top-0 start-0 d-flex justify-content-center align-items-center"
|
||||
>
|
||||
<p class="mb-0 text-primary 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
|
||||
class="position-absolute w-100 h-100 w-text top-0 start-0 d-flex justify-content-center align-items-center"
|
||||
>
|
||||
<p class="mb-0 text-primary fw-bold">Actuación ante incidencias</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-span position-relative text-center img-center">
|
||||
<div class="position-relative d-inline-block" style="width: 70%">
|
||||
<img src="img/02.0.png" class="img-fluid" />
|
||||
</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
|
||||
class="position-absolute w-100 h-100 w-text top-0 start-0 d-flex justify-content-center align-items-center"
|
||||
>
|
||||
<p class="mb-0 text-primary 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
|
||||
class="position-absolute w-100 h-100 w-text top-0 start-0 d-flex justify-content-center align-items-center"
|
||||
>
|
||||
<p class="mb-0 text-primary fw-bold">Alarmas</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-span position-relative text-center">
|
||||
<!-- <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
|
||||
class="position-absolute w-100 h-100 w-text top-0 start-0 d-flex justify-content-center align-items-center"
|
||||
>
|
||||
<p class="mb-0 text-primary fw-bold">Despedida</p>
|
||||
</div>
|
||||
</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>
|
||||
@ -136,19 +181,20 @@
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.wrap-course-content').addClass('fake');
|
||||
$(".wrap-course-content").addClass("fake");
|
||||
|
||||
// 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;
|
||||
var alreadyVisited = contentArray.some(function (slide) {
|
||||
return slide.content === "contenido/02.html" && slide.visited;
|
||||
});
|
||||
|
||||
if (!alreadyVisited) {
|
||||
gsap.fromTo(".btn-tema-go",
|
||||
gsap.fromTo(
|
||||
".btn-tema-go",
|
||||
{
|
||||
opacity: 0,
|
||||
y: 90
|
||||
y: 90,
|
||||
},
|
||||
{
|
||||
opacity: 1,
|
||||
@ -156,22 +202,24 @@
|
||||
duration: 1,
|
||||
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');
|
||||
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');
|
||||
$(".btn-tema-go").addClass("hover");
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
|
||||
$('.btn-tema-go').on('click', function() {
|
||||
$(".btn-tema-go").on("click", function () {
|
||||
CourseNav.soundClick();
|
||||
var pagina = $(this).data('pagina');
|
||||
var pagina = $(this).data("pagina");
|
||||
CourseNav.gotoSlide(pagina);
|
||||
});
|
||||
});
|
||||
|
||||
BIN
img/05.6.png
BIN
img/05.6.png
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 32 KiB |
BIN
img/15.5.png
BIN
img/15.5.png
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 21 KiB |
BIN
img/18.0.png
BIN
img/18.0.png
Binary file not shown.
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 78 KiB |
BIN
img/card.png
BIN
img/card.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 6.3 KiB |
Loading…
x
Reference in New Issue
Block a user