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

Update: ajuste GI

Browse Source
This commit is contained in:
andres.sanjuan
2025-10-22 09:12:21 -06:00
parent 5bd28589ec
commit 3fdb3bf9e3
19 changed files with 186 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contenido/09.html
+82 -24
View File
@@ -22,11 +22,13 @@
cursor: pointer;
}
.drag-list, .content-drags {
.drag-list,
.content-drags {
display: flex;
flex-direction: column;
gap: 1.7rem;
}
.drag-sortable {
background: #f3e9df;
border-radius: 1.25rem;
@@ -42,11 +44,14 @@
cursor: grab;
user-select: none;
}
.drag-sortable:active, .drag-sortable.ui-sortable-helper {
box-shadow: 0 12px 30px rgba(0,0,0,0.3);
.drag-sortable:active,
.drag-sortable.ui-sortable-helper {
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
transform: scale(1.018);
cursor: grabbing;
}
.drag-number {
width: 36px;
height: 36px;
@@ -70,17 +75,32 @@
background: #e8fdf4 !important;
color: #30C48D !important;
border-color: #30C48D !important;
box-shadow: 0 2px 16px rgba(48,196,141,0.12) !important;
box-shadow: 0 2px 16px rgba(48, 196, 141, 0.12) !important;
animation: correcto-bounce 0.7s;
}
@keyframes correcto-bounce {
0% {transform: scale(1);}
30% {transform: scale(1.18);}
55% {transform: scale(0.96);}
80% {transform: scale(1.05);}
100% {transform: scale(1);}
0% {
transform: scale(1);
}
30% {
transform: scale(1.18);
}
55% {
transform: scale(0.96);
}
80% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.drag-icon {
color: #72256b;
font-size: 1.35rem;
@@ -89,6 +109,7 @@
flex-shrink: 0;
font-weight: 600;
}
.drag-placeholder {
background: #fff6fc !important;
border: 2px dashed #E1006B !important;
@@ -99,7 +120,12 @@
color: #fff;
}
.fa-duotone.fa-swap-opacity:before, .fa-duotone:after, .fa-swap-opacity .fa-duotone:before, .fa-swap-opacity .fad:before, .fad.fa-swap-opacity:before, .fad:after {
.fa-duotone.fa-swap-opacity:before,
.fa-duotone:after,
.fa-swap-opacity .fa-duotone:before,
.fa-swap-opacity .fad:before,
.fad.fa-swap-opacity:before,
.fad:after {
opacity: 1;
}
@@ -112,14 +138,35 @@
display: inline-flex;
align-items: center;
}
@keyframes hand-down-up {
0% { transform: translateY(-7px) scale(1.03);}
18% { transform: translateY(5px) scale(1.02);}
35% { transform: translateY(-4px) scale(1.04);}
50% { transform: translateY(4px) scale(1);}
68% { transform: translateY(-5px) scale(1.01);}
85% { transform: translateY(6px) scale(0.99);}
100% { transform: translateY(-7px) scale(1.03);}
0% {
transform: translateY(-7px) scale(1.03);
}
18% {
transform: translateY(5px) scale(1.02);
}
35% {
transform: translateY(-4px) scale(1.04);
}
50% {
transform: translateY(4px) scale(1);
}
68% {
transform: translateY(-5px) scale(1.01);
}
85% {
transform: translateY(6px) scale(0.99);
}
100% {
transform: translateY(-7px) scale(1.03);
}
}
.btn-reintentar {
@@ -145,11 +192,20 @@
<div class="col-6">
<div class="card bg-white border-0 rounded-3 p-0 bx-shadow">
<div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX text-center">
<p class="mb-0">El lavado de manos también es una fase fundamental en el proceso de diálisis peritoneal.</p>
<p class="mb-0">El jabón que utilice para el lavado de manos de preferencia debe ser <b
class="text-lila-claro">líquido</b>, sin
embargo, lo prioritario es que sea exclusivo para cuando usted realice los recambios en casa.</p>
<p><b class="text-lila-claro">Lo mismo ocurre con la toalla</b> que utilice para secar sus manos.
</p>
<p>Sus manos, después de un correcto lavado, se encontrarán <b class="text-lila-claro">limpias, pero nunca estériles.</b>
</p>
</div>
<div
class="position-relative w-100 bg-lila-rosa text-primary text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">
<p class="mb-0">Veamos los pasos para un lavado de manos adecuado.</p>
<p class="mb-0"><b>Veamos los pasos para un lavado de manos adecuado.</b></p>
</div>
<div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
<div
@@ -159,7 +215,7 @@
</div>
</div>
</div>
<div class="col-6 text-center animate__animated animate__zoomIn">
<div class="col-4 text-center animate__animated animate__zoomIn">
<img src="img/09.0.png" class="img-fluid">
</div>
</div>
@@ -189,7 +245,8 @@
<div class="col-10">
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book0.png" class="img-fluid">
<p class="mb-0"><strong>Instrucciones:</strong> Arrastre los pasos del lavado de manos para colocarlos en el orden correcto.</p>
<p class="mb-0"><strong>Instrucciones:</strong> Arrastre los pasos del lavado de manos para
colocarlos en el orden correcto.</p>
</div>
</div>
</div>
@@ -197,7 +254,7 @@
</div>
<div class="col-11">
<div class="row justify-content-center align-items-center">
<div class="col-12 anim1" >
<div class="col-12 anim1">
<div class="d-flex flex-column w-100 position-relative gap-2 content-drags drag-list">
<div class="drag-sortable" data-order="0">
<span class="drag-number"></span>
@@ -224,7 +281,8 @@
<div class="drag-sortable" data-order="4">
<span class="drag-number"></span>
<span class="drag-icon">&#8597;</span>
Rodeando el pulgar izquierdo con la palma de la mano derecha frótese con un movimiento de rotación y viceversa.
Rodeando el pulgar izquierdo con la palma de la mano derecha frótese con un movimiento de rotación y
viceversa.
</div>
<div class="drag-sortable" data-order="5">
<span class="drag-number"></span>
@@ -415,4 +473,4 @@
CourseNav.setSlideVisited();
}
});
</script>
</script>