Update index.html

index.html

@@ -109,12 +109,13 @@
                         <li>Modelo: *Cloud-first*, centrado en *workspaces* colaborativos.</li>
                     </ul>
                 </div>
-                <!-- Placeholder GIF -->
-                <div class="w-1/2">
-                    <div class="gif-placeholder aspect-video">
-                        <span class="text-gray-500 text-2xl font-semibold">Espacio para GIF</span>
-                    </div>
+                <div class="w-1/2 flex justify-center items-center">
+                    <img src="descarga_e_instalacion_postman.gif" 
+                         alt="Instalación de Postman"
+                         class="rounded-xl cursor-pointer shadow-lg transition hover:scale-105 duration-300"
+                         onclick="openModal('descarga_e_instalacion_postman.gif')">
                 </div>
+
             </div>
         </div>
 
@@ -176,11 +177,13 @@
                     </ul>
                 </div>
                 <!-- Placeholder GIF -->
-                <div class="w-1/2">
-                    <div class="gif-placeholder aspect-video">
-                        <span class="text-gray-500 text-2xl font-semibold">Espacio para GIF</span>
-                    </div>
+                <div class="w-1/2 flex justify-center items-center">
+                    <img src="descarga_e_instalacion_yaak.gif" 
+                         alt="Instalación de Yaak"
+                         class="rounded-xl cursor-pointer shadow-lg transition hover:scale-105 duration-300"
+                         onclick="openModal('descarga_e_instalacion_yaak.gif')">
                 </div>
+
             </div>
         </div>
         
@@ -483,6 +486,47 @@
             counter.textContent = `1 / ${totalSlides}`;
         });
     </script>
+<!-- Modal para mostrar GIF -->
+<div id="gif-modal" class="fixed inset-0 bg-black bg-opacity-80 hidden justify-center items-center z-50">
+    <div class="relative">
+        <img id="modal-image" src="" alt="GIF ampliado" class="max-w-[90vw] max-h-[80vh] rounded-lg shadow-2xl border border-gray-600">
+        <button id="close-modal"
+            class="absolute top-2 right-2 bg-gray-800 hover:bg-gray-700 text-white rounded-full px-3 py-1 font-bold text-lg">
+            ✕
+        </button>
+    </div>
+</div>
+
+<script>
+    // Mostrar modal
+    function openModal(gifSrc) {
+        const modal = document.getElementById('gif-modal');
+        const modalImg = document.getElementById('modal-image');
+        modalImg.src = gifSrc;
+        modal.classList.remove('hidden');
+        modal.classList.add('flex');
+    }
+
+    // Cerrar modal
+    function closeModal() {
+        const modal = document.getElementById('gif-modal');
+        modal.classList.add('hidden');
+        modal.classList.remove('flex');
+        document.getElementById('modal-image').src = "";
+    }
+
+    document.getElementById('close-modal').addEventListener('click', closeModal);
+
+    // Cierra modal al hacer clic fuera del GIF
+    document.getElementById('gif-modal').addEventListener('click', (e) => {
+        if (e.target.id === 'gif-modal') closeModal();
+    });
+
+    // Cierra modal con tecla ESC
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') closeModal();
+    });
+</script>
 
 </body>
 </html>