Cambios añadidos

node_modules/admin-lte/dist/css/ohanastyle.css

@@ -138,6 +138,7 @@
     z-index: 800;
   }
 
+  
   /* Estilos para el contenedor fluido */
   .container-fluid {
     width: 100%;
@@ -145,8 +146,11 @@
     padding-left: 15px;
     margin-right: auto;
     margin-left: auto;
+  
   }
 
+  
+
   /* Estilos generales del body */
   .hold-transition {
     transition: all 0.2s ease-in-out;
@@ -224,6 +228,8 @@
     
   }
 
+  
+
   .img-fluid {
     max-width: 150px; /* Ajusta el tamaño máximo de las imágenes */
     height: auto; /* Mantiene la proporción de la imagen */

node_modules/admin-lte/dist/js/gallery.js

@@ -0,0 +1,34 @@
+$(document).ready(function () {
+    // Inicializar Ekko Lightbox
+    $(document).on('click', '[data-toggle="lightbox"]', function (event) {
+        event.preventDefault();
+        $(this).ekkoLightbox();
+    });
+
+    // Inicializar Filterizr
+    var filterizd = $('.filter-container').filterizr({
+        layout: 'sameSize'
+    });
+
+    // Manejo de clic en los botones de filtro
+    $('.filter').on('click', function () {
+        // Remover clase 'active' de todos los botones y agregarla al botón clickeado
+        $('.filter').removeClass('active');
+        $(this).addClass('active');
+
+        // Obtener el filtro correspondiente al botón clickeado
+        var filter = $(this).data('filter');
+        filterizd.filterizr('filter', filter);
+
+        // Si el filtro es "Category 1", cambiar a la siguiente pestaña (Category 2)
+        if (filter === "1") {
+            setTimeout(function () {
+                // Buscar el siguiente botón de categoría
+                var nextButton = $('.filter[data-filter="2"]');
+                if (nextButton.length > 0) {
+                    nextButton.click();
+                }
+            }, 1000); // Cambiar rápidamente, puedes ajustar el tiempo si lo deseas
+        }
+    });
+});

node_modules/admin-lte/ohana.html

@@ -18,19 +18,19 @@
   <div class="content-wrapper">
     <section class="content">
       <div class="container-fluid">
-        <h2 class="mt-4">Gallery</h2>
+        <h2 class="mt-4">Food Gallery</h2>
 
         <!-- Filtro de categorías -->
         <div class="card card-primary">
           <div class="card-header">
-            <h3 class="card-title">FilteriZr Gallery with Ekko Lightbox</h3>
+            <h3 class="card-title">Desayuno</h3>
           </div>
           <div class="card-body">
             <div class="btn-group w-100 mb-2">
               <button class="btn btn-primary filter" data-filter="all">All items</button>
-              <button class="btn btn-info filter" data-filter="1">Category 1 (WHITE)</button>
+              <button class="btn btn-info filter" data-filter="1">Category 1 </button>
-              <button class="btn btn-success filter" data-filter="2">Category 2 (BLACK)</button>
+              <button class="btn btn-success filter" data-filter="2">Category 2 </button>
-              <button class="btn btn-warning filter" data-filter="3">Category 3 (COLORED)</button>
+              <button class="btn btn-warning filter" data-filter="3">Category 3 </button>
             </div>
             
             <div class="filter-container p-0 row">
@@ -40,13 +40,30 @@
                 </a>
               </div>
               <div class="filtr-item col-md-3" data-category="2">
-                <a href="./dist/img/ohana/comida.jpeg" data-toggle="lightbox" data-gallery="gallery">
+                <a href="./dist/img/ohana/fruta.jpg" data-toggle="lightbox" data-gallery="gallery">
-                  <img src="./dist/img/ohana/comida.jpeg" class="img-fluid" alt="Black Sample">
+                  <img src="./dist/img/ohana/fruta.jpg" class="img-fluid" alt="Black Sample">
                 </a>
               </div>
               <div class="filtr-item col-md-3" data-category="3">
-                <a href="./dist/img/ohana/comida.jpeg" data-toggle="lightbox" data-gallery="gallery">
+                <a href="./dist/img/ohana/hotcakes.jpg" data-toggle="lightbox" data-gallery="gallery">
-                  <img src="./dist/img/ohana/comida.jpeg" class="img-fluid" alt="Colored Sample">
+                  <img src="./dist/img/ohana/hotcakes.jpg" class="img-fluid" alt="Colored Sample">
+                </a>
+              </div>
+              <div class="filtr-item col-md-3" data-category="2">
+                <a href="./dist/img/ohana/pan.jpg" data-toggle="lightbox" data-gallery="gallery">
+                  <img src="./dist/img/ohana/pan.jpg" class="img-fluid" alt="Colored Sample">
+                </a>
+              </div>
+
+              <div class="filtr-item col-md-3" data-category="3">
+                <a href="./dist/img/ohana/sandwich.jpg" data-toggle="lightbox" data-gallery="gallery">
+                  <img src="./dist/img/ohana/sandwich.jpg" class="img-fluid" alt="Colored Sample">
+                </a>
+              </div>
+
+              <div class="filtr-item col-md-3" data-category="3">
+                <a href="./dist/img/ohana/sushi.jpg" data-toggle="lightbox" data-gallery="gallery">
+                  <img src="./dist/img/ohana/sushi.jpg" class="img-fluid" alt="Colored Sample">
                 </a>
               </div>
             </div>
@@ -56,18 +73,24 @@
         <!-- Sección de Lightbox -->
         <div class="card card-primary">
           <div class="card-header">
-            <h3 class="card-title">Ekko Lightbox</h3>
+            <h3 class="card-title">Comida</h3>
           </div>
           <div class="card-body">
             <div class="row">
-              <div class="col-md-3">
+              <div class="col-md-3" style="display: inline-block" >
-                <a href="./dist/img/ohana/comida.jpeg" data-toggle="lightbox" data-gallery="gallery">
+                <a href="./dist/img/ohana/rice.jpg " data-toggle="lightbox" data-gallery="gallery">
-                  <img src="./dist/img/ohana/comida.jpeg" class="img-fluid" alt="Sample 1">
+                  <img src="./dist/img/ohana/rice.jpg" class="img-fluid" alt="Sample 1">
                 </a>
               </div>
-              <div class="col-md-3">
+              <div class="col-md-3"style="display: inline-block">
-                <a href="./dist/img/ohana/comida.jpeg" data-toggle="lightbox" data-gallery="gallery">
+                <a href="./dist/img/ohana/filet.jpg" data-toggle="lightbox" data-gallery="gallery">
-                  <img src="./dist/img/ohana/comida.jpeg" class="img-fluid" alt="Sample 2">
+                  <img src="./dist/img/ohana/filet.jpg" class="img-fluid" alt="Sample 2">
+                </a>
+              </div>
+
+              <div class="col-md-3" style="display: inline-block">
+                <a href="./dist/img/ohana/fish.jpg" data-toggle="lightbox" data-gallery="gallery">
+                  <img src="./dist/img/ohana/fish.jpg" class="img-fluid" alt="Sample 3">
                 </a>
               </div>
             </div>
@@ -77,17 +100,8 @@
       </div>
     </section>
   </div>
-
-  
-  
-
-
-  
 </div>
 
-
-
-
 <!-- Scripts -->
 <script src="../plugins/jquery/jquery.min.js"></script>
 <script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
@@ -115,5 +129,16 @@
   });
 </script>
 
+<!-- Script para las pestañas -->
+<script>
+  $(document).ready(function() {
+    // Inicializa las pestañas
+    $('#myTabs a').on('click', function (e) {
+      e.preventDefault();
+      $(this).tab('show');
+    });
+  });
+</script>
+
 </body>
-</html>
+</html>