diff --git a/node_modules/admin-lte/dist/css/ohanastyle.css b/node_modules/admin-lte/dist/css/ohanastyle.css
index 6988c0d..0f13bda 100644
--- a/node_modules/admin-lte/dist/css/ohanastyle.css
+++ b/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 */
diff --git a/node_modules/admin-lte/dist/img/comida.jpeg b/node_modules/admin-lte/dist/img/comida.jpeg
new file mode 100644
index 0000000..9b36b47
Binary files /dev/null and b/node_modules/admin-lte/dist/img/comida.jpeg differ
diff --git a/node_modules/admin-lte/dist/img/ohana/filet.jpg b/node_modules/admin-lte/dist/img/ohana/filet.jpg
new file mode 100644
index 0000000..640f828
Binary files /dev/null and b/node_modules/admin-lte/dist/img/ohana/filet.jpg differ
diff --git a/node_modules/admin-lte/dist/img/ohana/fish.jpg b/node_modules/admin-lte/dist/img/ohana/fish.jpg
new file mode 100644
index 0000000..1080970
Binary files /dev/null and b/node_modules/admin-lte/dist/img/ohana/fish.jpg differ
diff --git a/node_modules/admin-lte/dist/img/ohana/fruta.jpg b/node_modules/admin-lte/dist/img/ohana/fruta.jpg
new file mode 100644
index 0000000..50ef2bb
Binary files /dev/null and b/node_modules/admin-lte/dist/img/ohana/fruta.jpg differ
diff --git a/node_modules/admin-lte/dist/img/ohana/hotcakes.jpg b/node_modules/admin-lte/dist/img/ohana/hotcakes.jpg
new file mode 100644
index 0000000..99f2f35
Binary files /dev/null and b/node_modules/admin-lte/dist/img/ohana/hotcakes.jpg differ
diff --git a/node_modules/admin-lte/dist/img/ohana/pan.jpg b/node_modules/admin-lte/dist/img/ohana/pan.jpg
new file mode 100644
index 0000000..8ea9d2f
Binary files /dev/null and b/node_modules/admin-lte/dist/img/ohana/pan.jpg differ
diff --git a/node_modules/admin-lte/dist/img/ohana/rice.jpg b/node_modules/admin-lte/dist/img/ohana/rice.jpg
new file mode 100644
index 0000000..f639696
Binary files /dev/null and b/node_modules/admin-lte/dist/img/ohana/rice.jpg differ
diff --git a/node_modules/admin-lte/dist/img/ohana/sandwich.jpg b/node_modules/admin-lte/dist/img/ohana/sandwich.jpg
new file mode 100644
index 0000000..afc821f
Binary files /dev/null and b/node_modules/admin-lte/dist/img/ohana/sandwich.jpg differ
diff --git a/node_modules/admin-lte/dist/img/ohana/sushi.jpg b/node_modules/admin-lte/dist/img/ohana/sushi.jpg
new file mode 100644
index 0000000..1c5b3b2
Binary files /dev/null and b/node_modules/admin-lte/dist/img/ohana/sushi.jpg differ
diff --git a/node_modules/admin-lte/dist/js/gallery.js b/node_modules/admin-lte/dist/js/gallery.js
new file mode 100644
index 0000000..01304e1
--- /dev/null
+++ b/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
+ }
+ });
+});
diff --git a/node_modules/admin-lte/ohana.html b/node_modules/admin-lte/ohana.html
index bd66f5d..bb9bc76 100644
--- a/node_modules/admin-lte/ohana.html
+++ b/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-success filter" data-filter="2">Category 2 (BLACK)</button>
- <button class="btn btn-warning filter" data-filter="3">Category 3 (COLORED)</button>
+ <button class="btn btn-info filter" data-filter="1">Category 1 </button>
+ <button class="btn btn-success filter" data-filter="2">Category 2 </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">
- <img src="./dist/img/ohana/comida.jpeg" class="img-fluid" alt="Black Sample">
+ <a href="./dist/img/ohana/fruta.jpg" data-toggle="lightbox" data-gallery="gallery">
+ <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">
- <img src="./dist/img/ohana/comida.jpeg" class="img-fluid" alt="Colored Sample">
+ <a href="./dist/img/ohana/hotcakes.jpg" data-toggle="lightbox" data-gallery="gallery">
+ <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">
- <a href="./dist/img/ohana/comida.jpeg" data-toggle="lightbox" data-gallery="gallery">
- <img src="./dist/img/ohana/comida.jpeg" class="img-fluid" alt="Sample 1">
+ <div class="col-md-3" style="display: inline-block" >
+ <a href="./dist/img/ohana/rice.jpg " data-toggle="lightbox" data-gallery="gallery">
+ <img src="./dist/img/ohana/rice.jpg" class="img-fluid" alt="Sample 1">
</a>
</div>
- <div class="col-md-3">
- <a href="./dist/img/ohana/comida.jpeg" data-toggle="lightbox" data-gallery="gallery">
- <img src="./dist/img/ohana/comida.jpeg" class="img-fluid" alt="Sample 2">
+ <div class="col-md-3"style="display: inline-block">
+ <a href="./dist/img/ohana/filet.jpg" data-toggle="lightbox" data-gallery="gallery">
+ <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>
\ No newline at end of file
+</html>