cambios esteticos index+desafios+sluciones+ecosistema

script.js

@@ -0,0 +1,73 @@
+/* ==========================================================================
+   CONTROLADOR DEL MODAL
+   ========================================================================== */
+function openModal(modalId) {
+  const modal = document.getElementById(modalId);
+  if (!modal) return;
+  modal.classList.add("is-active");
+  document.body.style.overflow = "hidden";
+
+  const scrollArea = modal.querySelector(".ide-modal-scroll");
+  if (scrollArea) scrollArea.scrollTop = 0;
+}
+
+function closeModal(modalId) {
+  const modal = document.getElementById(modalId);
+  if (!modal) return;
+  modal.classList.remove("is-active");
+  document.body.style.overflow = "";
+}
+
+// Inicialización de eventos del modal una vez cargado el DOM
+document.addEventListener("DOMContentLoaded", () => {
+  // 1. Botón externo HTML
+  const btnTrigger = document.getElementById("btnOpenProjectsModal");
+  if (btnTrigger) {
+    btnTrigger.addEventListener("click", () => {
+      openModal("modal-ide-projects");
+    });
+  }
+
+  // 2. Botón Cerrar (X)
+  const btnClose = document.getElementById("btnCloseModal");
+  if (btnClose) {
+    btnClose.addEventListener("click", () => {
+      closeModal("modal-ide-projects");
+    });
+  }
+
+  // 3. Cerrar al hacer clic en el backdrop oscuro
+  const modal = document.getElementById("modal-ide-projects");
+  if (modal) {
+    modal.addEventListener("click", (e) => {
+      if (e.target === modal) {
+        closeModal("modal-ide-projects");
+      }
+    });
+  }
+
+  // 4. Cerrar con tecla Escape
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      closeModal("modal-ide-projects");
+    }
+  });
+
+  // 5. Ocultar indicador "Desliza para leer más" al scrollear
+  const scrollArea = document.getElementById("modalScrollArea");
+  const scrollHint = document.getElementById("scrollHint");
+  if (scrollArea && scrollHint) {
+    scrollArea.addEventListener("scroll", () => {
+      const isAtBottom = scrollArea.scrollHeight - scrollArea.scrollTop - scrollArea.clientHeight < 40;
+      if (isAtBottom) {
+        scrollHint.classList.add("is-hidden");
+      } else {
+        scrollHint.classList.remove("is-hidden");
+      }
+    });
+  }
+});
+
+// Inicialización del motor Canvas
+//initNetwork();
+//requestAnimationFrame(animate);