244 lines
9.4 KiB
HTML
244 lines
9.4 KiB
HTML
<style>
|
|
.fake {
|
|
background-image: url(img/bg00.jpg);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.grid-cards {
|
|
position: relative;
|
|
width: 100%;
|
|
display: grid;
|
|
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, 0.4);
|
|
cursor: pointer;
|
|
border-radius: 35px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.btn-tema-go.hover:hover {
|
|
transform: scale(1.05) !important;
|
|
}
|
|
|
|
.w-text p {
|
|
padding: 0.6rem 1.2rem;
|
|
background: rgba(242, 232, 222, 0.76);
|
|
background: linear-gradient(to right, rgba(242, 232, 222, 0.76) 0%, #ffffff 100%);
|
|
width: 94%;
|
|
}
|
|
|
|
.w-text.large-text p {
|
|
font-size: 1.4rem;
|
|
padding: 0.6rem 1.4rem;
|
|
}
|
|
</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-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" class="img-fluid" />
|
|
<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" class="img-fluid" />
|
|
<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" class="img-fluid" />
|
|
<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" class="img-fluid" />
|
|
<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" class="img-fluid" />
|
|
<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" class="img-fluid" />
|
|
<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" class="img-fluid" />
|
|
<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" class="img-fluid" />
|
|
<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" class="img-fluid" />
|
|
<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" class="img-fluid" />
|
|
<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="position-relative btn-tema-go d-inline-block" data-pagina="29">
|
|
<img src="img/card.png" />
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
$(function () {
|
|
"use strict";
|
|
$(".wrap-course-content").addClass("fake");
|
|
$(".navbar-brand").hide();
|
|
|
|
// Ajustar tamaño de texto según ancho de ventana
|
|
function adjustTextSize() {
|
|
if (window.innerWidth >= 1500) {
|
|
$(".w-text").addClass("large-text");
|
|
} else {
|
|
$(".w-text").removeClass("large-text");
|
|
}
|
|
}
|
|
adjustTextSize();
|
|
$(window).on("resize", adjustTextSize);
|
|
|
|
// 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,
|
|
},
|
|
{
|
|
opacity: 1,
|
|
y: 0,
|
|
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");
|
|
});
|
|
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>
|