Vantive/Manual_Vantive
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
DavidMtz 2026-02-12 16:03:06 -06:00
parent def53c643a
commit 516821801a
5 changed files with 94 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
contenido/02.html
View File

@ -11,14 +11,18 @@
position: relative; position: relative;
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto; grid-template-rows: auto auto;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.img-center {
grid-column: span 2;
}
.btn-tema-go { .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; cursor: pointer;
border-radius: 35px; border-radius: 35px;
transition: transform 0.3s ease; transition: transform 0.3s ease;
@ -27,108 +31,149 @@
.btn-tema-go.hover:hover { .btn-tema-go.hover:hover {
transform: scale(1.05) !important; 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> </style>
<div class="page-sco py-2 py-md-0 h-100"> <div class="page-sco py-2 py-md-0 h-100">
<div class="container h-100"> <div class="container h-100">
<div class="row justify-content-center align-items-center h-100"> <div class="row justify-content-center align-items-center h-100">
<div class="col-11"> <div class="col-11">
<div class="row justify-content-center align-items-center"> <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="grid-cards gap-2">
<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="2"> <div class="position-relative btn-tema-go d-inline-block" data-pagina="2">
<img src="img/card.png" /> <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"> <div
<p class="mb-0 text-white fw-bold">Vivir con enfermedad renal</p> 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>
</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="4"> <div class="position-relative btn-tema-go d-inline-block" data-pagina="4">
<img src="img/card.png" /> <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"> <div
<p class="mb-0 text-white fw-bold">Inicio en la terapia de diálisis peritoneal</p> 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>
</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="7"> <div class="position-relative btn-tema-go d-inline-block" data-pagina="7">
<img src="img/card.png" /> <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"> <div
<p class="mb-0 text-white fw-bold">Acceso peritoneal y sus cuidados</p> 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>
</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="9"> <div class="position-relative btn-tema-go d-inline-block" data-pagina="9">
<img src="img/card.png" /> <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"> <div
<p class="mb-0 text-white fw-bold">Terapia segura en casa</p> 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>
</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="15"> <div class="position-relative btn-tema-go d-inline-block" data-pagina="15">
<img src="img/card.png" /> <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"> <div
<p class="mb-0 text-white fw-bold">Autocuidado</p> 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>
</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="18"> <div class="position-relative btn-tema-go d-inline-block" data-pagina="18">
<img src="img/card.png" /> <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"> <div
<p class="mb-0 text-white fw-bold">Manejo de medicamentos y terapia dialítica</li></p> 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>
</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="20"> <div class="position-relative btn-tema-go d-inline-block" data-pagina="20">
<img src="img/card.png" /> <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"> <div
<p class="mb-0 text-white fw-bold">Entrega domiciliaria</p> 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>
</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="22"> <div class="position-relative btn-tema-go d-inline-block" data-pagina="22">
<img src="img/card.png" /> <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"> <div
<p class="mb-0 text-white fw-bold">Actuación ante incidencias </p> 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>
</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="card-span position-relative text-center">
<div class="position-relative btn-tema-go d-inline-block" data-pagina="24"> <div class="position-relative btn-tema-go d-inline-block" data-pagina="24">
<img src="img/card.png" /> <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"> <div
<p class="mb-0 text-white fw-bold">Procedimientos</p> 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>
</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="28"> <div class="position-relative btn-tema-go d-inline-block" data-pagina="28">
<img src="img/card.png" /> <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"> <div
<p class="mb-0 text-white fw-bold">Alarmas</p> 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>
</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"> <div class="position-relative btn-tema-go d-inline-block" data-pagina="29">
<img src="img/card.png" /> <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"> <div
<p class="mb-0 text-white fw-bold">Despedida</p> 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> </div>
<div class="col-4 text-center">
<img src="img/02.0.png" class="img-fluid">
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -136,19 +181,20 @@
<script> <script>
$(function () { $(function () {
"use strict"; "use strict";
$('.wrap-course-content').addClass('fake'); $(".wrap-course-content").addClass("fake");
// Verificar si algún slide con contenido/02.html ya fue visitado // Verificar si algún slide con contenido/02.html ya fue visitado
var contentArray = CourseNav.getCourseContentArray(); var contentArray = CourseNav.getCourseContentArray();
var alreadyVisited = contentArray.some(function (slide) { var alreadyVisited = contentArray.some(function (slide) {
return slide.content === 'contenido/02.html' && slide.visited; return slide.content === "contenido/02.html" && slide.visited;
}); });
if (!alreadyVisited) { if (!alreadyVisited) {
gsap.fromTo(".btn-tema-go", gsap.fromTo(
".btn-tema-go",
{ {
opacity: 0, opacity: 0,
y: 90 y: 90,
}, },
{ {
opacity: 1, opacity: 1,
@ -157,21 +203,23 @@
stagger: 0.2, stagger: 0.2,
ease: "power3.out", ease: "power3.out",
onComplete: function () { onComplete: function () {
$('.btn-tema-go').addClass('animate__animated animate__pulse').one('animationend', function() { $(".btn-tema-go")
$(this).removeClass('animate__animated animate__pulse').addClass('hover'); .addClass("animate__animated animate__pulse")
.one("animationend", function () {
$(this).removeClass("animate__animated animate__pulse").addClass("hover");
}); });
CourseNav.setSlideVisited(); CourseNav.setSlideVisited();
} },
} }
); );
} else { } else {
$('.btn-tema-go').addClass('hover'); $(".btn-tema-go").addClass("hover");
CourseNav.setSlideVisited(); CourseNav.setSlideVisited();
} }
$('.btn-tema-go').on('click', function() { $(".btn-tema-go").on("click", function () {
CourseNav.soundClick(); CourseNav.soundClick();
var pagina = $(this).data('pagina'); var pagina = $(this).data("pagina");
CourseNav.gotoSlide(pagina); CourseNav.gotoSlide(pagina);
}); });
}); });

BIN
img/05.6.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 32 KiB

BIN
img/15.5.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 21 KiB

BIN
img/18.0.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 78 KiB

After

Width:  |  Height:  |  Size: 78 KiB

BIN
img/card.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB