update

2025-12-05 10:31:16 -06:00 · 2025-12-05 10:31:16 -06:00 · 1be82dd149
commit 1be82dd149
parent 61e208390d
26 changed files with 130 additions and 22 deletions
--- a/Actividades_Rotafolio_Vantive.xlsx
+++ b/Actividades_Rotafolio_Vantive.xlsx
--- a/Drag_Drop.xlsx
+++ b/Drag_Drop.xlsx
--- a/contenido/01.html
+++ b/contenido/01.html
@ -21,7 +21,7 @@
                    <div class="col-11">
                        <div class="row justify-content-center align-items-center">
                            <div class="col-8">
-                                <h1 class="text-white fw-bold">INDUCCIÓN AL PACIENTE EN<br>DIÁLISIS PERIOTONIAL <span
+                                <h1 class="text-white fw-bold">INDUCCIÓN AL PROGRAMA DE <br> DIÁLISIS PERITONEAL<span
                                        class="fw-bold text-verde-ceniza">>>></span></h1>
                                        <p class="text-white">Pioneros en el cuidado de la enfermedad renal crónica</p>
                            </div>
@ -50,4 +50,4 @@
        //     CourseNav.nextSlide();
        // });
    });
-</script>
+</script>
--- a/contenido/06.html
+++ b/contenido/06.html
@ -76,7 +76,7 @@
      return shuffled;
    }

-    const imgNums = ['img/06.0.png', 'img/06.1.png', 'img/06.2.png'];
+    // const imgNums = ['img/06.0.png', 'img/06.1.png', 'img/06.2.png'];

    // Crear y mezclar las tarjetas
    function createShuffledCards() {
@ -96,7 +96,7 @@
                        <div class="card border-0 card-sort bg-transparent text-white fw-bold text-center shadow-none"
                             data-order="${number}"
                             style="cursor:grab;">
-                          <div class='position-relative w-100 nums'><img src="${imgNums[number-1]}" class="img-fluid"></div>
+
                          <div class="card-body bg-verde-claro px-0 py-0">
                            <img src="img/5.${number}b.png" class="img-fluid">
                            </div>
@ -104,16 +104,28 @@
                    `;
        container.append(cardHtml);
      });
+
+      // Actualizar números después de crear las tarjetas
+      // updateCardNumbers();
    }

+    // Actualizar números mostrados según posición actual
+    // function updateCardNumbers() {
+    //   $('#sortable-cards .card-sort').each(function (index) {
+    //     $(this).find('.nums img').attr('src', imgNums[index]);
+    //   });
+    // }
+
    // Verificar si las tarjetas están en orden correcto
    function checkOrder() {
      let correct = true;
      $('#sortable-cards .card-sort').each(function (index) {
        if ($(this).data('order') === index + 1) {
          $(this).find('.card-body').removeClass('bg-verde-claro').addClass('bg-verde-pasto');
+          $(this).addClass('locked').css('cursor', 'default');
        } else {
          $(this).find('.card-body').removeClass('bg-verde-pasto').addClass('bg-verde-claro');
+          $(this).removeClass('locked').css('cursor', 'grab');
          correct = false;
        }
      });
@ -131,7 +143,9 @@
      tolerance: 'pointer',
      helper: "clone",
      cursorAt: { top: 50, left: 50 },
+      cancel: '.locked',
      update: function (event, ui) {
+        // updateCardNumbers();
        if (checkOrder()) {
          $('#sortable-cards').sortable('disable');
          const html = $("#pop0").html();
@ -164,6 +178,9 @@
        }
      },
      start: function (event, ui) {
+        if (ui.item.hasClass('locked')) {
+          return false;
+        }
        ui.item.addClass('ui-sortable-helper');
        if (ui.position) {
          ui.position.left = 0;
--- a/contenido/07.html
+++ b/contenido/07.html
@ -133,7 +133,7 @@
            <div class="card bg-white border-0 my-2 rounded-0 bg-custom p-3 text-center">
              <div class="d-flex justify-content-center align-items-center flex-row">
                <img src="img/3.1.png" class="img-fluid mx-3">
-                <p class="mb-0"><strong>Instrucciones:</strong> Presiona cada ícono, lee con atención las oraciones que se presentan acerca de los tipos de diálisis y determina si son falsas o verdaderas para llenar el medidor de salud del paciente.</p>
+                <p class="mb-0"><strong>Instrucciones:</strong> Presiona cada ícono, lee con atención las oraciones que se presentan acerca de los tipos de diálisis y determina si son falsas o verdaderas. <!-- para llenar el medidor de salud del paciente. --></p>
              </div>
            </div>
          </div>
--- a/contenido/08.html
+++ b/contenido/08.html
@ -166,14 +166,14 @@
  <div id="retro-pop">
    <div class="container-fluid">
      <div class=" w-100 text-center">
-        <img src="img/3.5.png" class="img-fluid">
+        <img src="img/08.7.png" class="img-fluid">
      </div>
      <div class="row justify-content-center">
        <div class="col-12 text-center mb-2">
-          <h3 class="text-secondary-dark fw-bold">¡Bien hecho!</h3>
+          <h3 class="text-secondary-dark fw-bold">¡Recuerda!</h3>
        </div>
        <div class="col-12 text-center">
-          <p class="mb-0">Has concluido la actividad.</p>
+          <p class="mb-0">Siempre debes lavar tus manos de acuerdo con la técnica de la OMS antes de empezar cualquier terapia.</p>
        </div>
      </div>
    </div>
--- a/contenido/09.html
+++ b/contenido/09.html
@ -167,7 +167,7 @@
          <h3 class="text-secondary-dark fw-bold">¡Recuerda!</h3>
        </div>
        <div class="col-12 text-center">
-          <p class="mb-0">Siempre debes lavar tus manos antes de empezar cualquier terapia.</p>
+          <p class="mb-0">Siempre debes lavar tus manos de acuerdo con la técnica de la OMS antes de empezar cualquier terapia.</p>
        </div>
      </div>
    </div>
--- a/contenido/13.html
+++ b/contenido/13.html
@ -8,7 +8,6 @@

  .hr-style {
    opacity: 1;
-    width: 50%;
  }

  .card-style {
@ -20,9 +19,12 @@
    <div class='row justify-content-center align-items-center h-100'>
      <div class='col-12 px-0'>
        <div class='row justify-content-center'>
-          <div class="col-10 mb-4 px-4 animate__animated animate__bounceInDown">
-            <h2 class="text-center fw-bold text-primary">Lavado de manos y uso correcto de cubrebocas</h2>
-            <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
+          <div class="col-10 mb-4 px-4 animate__animated animate__bounceInDown text-center">
+            <div class="position-relative d-inline-block">
+              <h2 class="text-center fw-bold text-primary">Lavado de manos de acuerdo con la técnica de la <br> OMS y uso correcto de
+                cubrebocas</h2>
+              <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
+            </div>
          </div>
          <div class="col-12 px-0">
            <div class="card card-style border-0 rounded-0 shadow-none py-3 px-4">
--- a/contenido/14.html
+++ b/contenido/14.html
@ -8,7 +8,6 @@

  .hr-style {
    opacity: 1;
-    width: 50%;
  }

  .custom-grid {
@ -38,9 +37,11 @@
    <div class='row justify-content-center align-items-center h-100'>
      <div class='col-12'>
        <div class='row justify-content-center' id="activity1">
-          <div class="col-10 mb-2">
-            <h2 class="text-center fw-bold text-primary">Técnica correcta para higiene de manos</h2>
-            <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
+          <div class="col-10 mb-2 text-center">
+            <div  class="position-relative d-inline-block">
+              <h2 class="text-center fw-bold text-primary">Técnica correcta para higiene de manos <br> de acuerdo con la técnica de la OMS</h2>
+              <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
+            </div>
          </div>
          <div class="col-10 px-0 mb-1 col-instrucciones">
            <div class="card bg-lila-rosa border-0 my-2 rounded-4 bg-custom px-3 py-2 text-center">
--- a/contenido/19.html
+++ b/contenido/19.html
@ -33,7 +33,7 @@
                      </div>
                      <div class="col-12 mb-3 animate__animated animate__lightSpeedInLeft animate__delay-1s">
                        <h2 class="text-verde-claro">Has terminado las actividades de la</h2>
-                        <h2 class="text-white"><strong>Inducción al paciente </strong><strong>en Diálisis Peritoneal.</strong></h2>
+                        <h2 class="text-white fw-bold">Inducción al programa de Diálisis Peritoneal.</h2>
                      </div>
                      <div class="col-12 animate__animated animate__zoomIn animate__delay-2s">
                        <p class="text-white mb-0">¡Tu esfuerzo marca la diferencia!</p>
--- a/contenido/ruleta.html
+++ b/contenido/ruleta.html
@ -145,8 +145,8 @@
                <img src="img/2.1.png" alt="" class="img-fluid" />
              </div>
              <div>
-                <b>Instrucciones:</b> Gira la ruleta y contesta correctamente la pregunta acerca de la alimentación o medicación del paciente en diálisis
-                peritoneal para ganar los puntos.
+                <b>Instrucciones:</b> Da clic en la ruleta y contesta correctamente la pregunta acerca de la alimentación o medicación en diálisis peritoneal
+                para ganar los puntos.
              </div>
            </div>
          </div>
--- a/css/theme.min.css
+++ b/css/theme.min.css
--- a/css/theme.scss
+++ b/css/theme.scss
@ -13,6 +13,7 @@ $custom-colors: (
  'verde-pasto': #84a816,
  'verde-claro': #d6e3da,
  'verde-gris': #cadcd4,
+  'verde2': #d3e0d7,
  'lila-claro': #905c8b,
  'morado-claro': #915c8c,
  'gris': #959595,
--- a/css/themee.css
+++ b/css/themee.css
@ -73,6 +73,7 @@
  --bs-verde-pasto: #84a816;
  --bs-verde-claro: #d6e3da;
  --bs-verde-gris: #cadcd4;
+  --bs-verde2: #d3e0d7;
  --bs-lila-claro: #905c8b;
  --bs-morado-claro: #915c8c;
  --bs-gris: #959595;
@ -102,6 +103,7 @@
  --bs-verde-pasto-rgb: 132, 168, 22;
  --bs-verde-claro-rgb: 214, 227, 218;
  --bs-verde-gris-rgb: 202, 220, 212;
+  --bs-verde2-rgb: 211, 224, 215;
  --bs-lila-claro-rgb: 144, 92, 139;
  --bs-morado-claro-rgb: 145, 92, 140;
  --bs-gris-rgb: 149, 149, 149;
@ -3339,6 +3341,23 @@ textarea.form-control-lg {
  --bs-btn-disabled-border-color: #cadcd4;
 }

+.btn-verde2 {
+  --bs-btn-color: #000;
+  --bs-btn-bg: #d3e0d7;
+  --bs-btn-border-color: #d3e0d7;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #dae5dd;
+  --bs-btn-hover-border-color: #d7e3db;
+  --bs-btn-focus-shadow-rgb: 179, 190, 183;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #dce6df;
+  --bs-btn-active-border-color: #d7e3db;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #d3e0d7;
+  --bs-btn-disabled-border-color: #d3e0d7;
+}
+
 .btn-lila-claro {
  --bs-btn-color: #fff;
  --bs-btn-bg: #905c8b;
@ -3832,6 +3851,23 @@ textarea.form-control-lg {
  --bs-gradient: none;
 }

+.btn-outline-verde2 {
+  --bs-btn-color: #d3e0d7;
+  --bs-btn-border-color: #d3e0d7;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #d3e0d7;
+  --bs-btn-hover-border-color: #d3e0d7;
+  --bs-btn-focus-shadow-rgb: 211, 224, 215;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #d3e0d7;
+  --bs-btn-active-border-color: #d3e0d7;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #d3e0d7;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #d3e0d7;
+  --bs-gradient: none;
+}
+
 .btn-outline-lila-claro {
  --bs-btn-color: #905c8b;
  --bs-btn-border-color: #905c8b;
@ -5657,6 +5693,15 @@ textarea.form-control-lg {
  color: #414644;
 }

+.alert-verde2 {
+  --bs-alert-color: #545a56;
+  --bs-alert-bg: #f6f9f7;
+  --bs-alert-border-color: #f2f6f3;
+}
+.alert-verde2 .alert-link {
+  color: #434845;
+}
+
 .alert-lila-claro {
  --bs-alert-color: #563753;
  --bs-alert-bg: #e9dee8;
@ -6340,6 +6385,20 @@ textarea.form-control-lg {
  border-color: #515855;
 }

+.list-group-item-verde2 {
+  color: #545a56;
+  background-color: #f6f9f7;
+}
+.list-group-item-verde2.list-group-item-action:hover, .list-group-item-verde2.list-group-item-action:focus {
+  color: #545a56;
+  background-color: #dde0de;
+}
+.list-group-item-verde2.list-group-item-action.active {
+  color: #ffffff;
+  background-color: #545a56;
+  border-color: #545a56;
+}
+
 .list-group-item-lila-claro {
  color: #563753;
  background-color: #e9dee8;
@ -8035,6 +8094,11 @@ textarea.form-control-lg {
  background-color: RGBA(202, 220, 212, var(--bs-bg-opacity, 1)) !important;
 }

+.text-bg-verde2 {
+  color: #000 !important;
+  background-color: RGBA(211, 224, 215, var(--bs-bg-opacity, 1)) !important;
+}
+
 .text-bg-lila-claro {
  color: #fff !important;
  background-color: RGBA(144, 92, 139, var(--bs-bg-opacity, 1)) !important;
@ -8232,6 +8296,13 @@ textarea.form-control-lg {
  color: #d5e3dd !important;
 }

+.link-verde2 {
+  color: #d3e0d7 !important;
+}
+.link-verde2:hover, .link-verde2:focus {
+  color: #dce6df !important;
+}
+
 .link-lila-claro {
  color: #905c8b !important;
 }
@ -8804,6 +8875,11 @@ textarea.form-control-lg {
  border-color: rgba(var(--bs-verde-gris-rgb), var(--bs-border-opacity)) !important;
 }

+.border-verde2 {
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-verde2-rgb), var(--bs-border-opacity)) !important;
+}
+
 .border-lila-claro {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-lila-claro-rgb), var(--bs-border-opacity)) !important;
@ -9766,6 +9842,11 @@ textarea.form-control-lg {
  color: rgba(var(--bs-verde-gris-rgb), var(--bs-text-opacity)) !important;
 }

+.text-verde2 {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-verde2-rgb), var(--bs-text-opacity)) !important;
+}
+
 .text-lila-claro {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-lila-claro-rgb), var(--bs-text-opacity)) !important;
@ -9952,6 +10033,11 @@ textarea.form-control-lg {
  background-color: rgba(var(--bs-verde-gris-rgb), var(--bs-bg-opacity)) !important;
 }

+.bg-verde2 {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-verde2-rgb), var(--bs-bg-opacity)) !important;
+}
+
 .bg-lila-claro {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-lila-claro-rgb), var(--bs-bg-opacity)) !important;
--- a/img/07.3.png
+++ b/img/07.3.png
--- a/img/08.3.png
+++ b/img/08.3.png
--- a/img/08.4c.png
+++ b/img/08.4c.png
--- a/img/08.7.png
+++ b/img/08.7.png
--- a/img/09.0.png
+++ b/img/09.0.png
--- a/img/09.7.png
+++ b/img/09.7.png
--- a/img/15.0.png
+++ b/img/15.0.png
--- a/img/4.2.png
+++ b/img/4.2.png
--- a/img/4.4.png
+++ b/img/4.4.png
--- a/img/5.3a.png
+++ b/img/5.3a.png
--- a/img/5.4a.png
+++ b/img/5.4a.png
--- a/index.html
+++ b/index.html
@ -23,7 +23,8 @@
      <div class="wrap-course-content" id="wrap-course-content">
        <header>
          <nav class="navbar navbar-light bg-transparent sticky-top shadow-none py-0" id="coursenav-navbar">
-            <div class="container-fluid d-flex align-items-center px-3">
+            <div class="container-fluid d-flex align-items-center ps-0 pe-3">
+              <div class="advertencia small bg-verde2 px-3 py-2 text-verde-pino" style="border-top-right-radius: 30px;border-bottom-right-radius: 30px;">“ESTE MATERIAL ES CON FINES EDUCATIVOS”</div>
              <!-- Logo -->
              <a class="navbar-brand p-0 disabled ms-auto" href="#">
                <img src="img/template/logo.svg" width="133" alt="Logo" />