Merge branch 'main' of https://github.com/ifpi-picos/projeto-integrad…

…or-i-menu
ifpi-picos · Aug 12, 2024 · 95555ff · 95555ff
2 parents 898b2bb + 0e47498
commit 95555ff
Show file tree

Hide file tree

Showing 15 changed files with 160 additions and 253 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/images/cardapio 1.jpg b/images/cardapio 1.jpg
diff --git a/images/cardapio 2.jpg b/images/cardapio 2.jpg
diff --git a/images/cardapio 3.jpg b/images/cardapio 3.jpg
diff --git a/images/cardapio 4.jpg b/images/cardapio 4.jpg
diff --git a/images/cardapio 5.jpg b/images/cardapio 5.jpg
diff --git a/images/cardapio 6.jpg b/images/cardapio 6.jpg
diff --git a/images/cardapio 7.jpg b/images/cardapio 7.jpg
diff --git a/images/cardapio 8.jpg b/images/cardapio 8.jpg
diff --git a/index.html b/index.html
@@ -4,14 +4,12 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://unpkg.com/scrollreveal"></script>
     <title>iMenu Inicio</title>
 
     <!-- Swiper JS CSS-->
     <link rel="stylesheet" href="style.css">
 
-    <!-- Scroll Reveal -->
-    <link rel="stylesheet" href="js/script.js">
-
     <!-- Boxicons -->
     <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
 
@@ -295,4 +293,4 @@ <h4 class="section-subtitle"><i>Restaurantes visitados recentemente</i></h4>
 <!-- JavaScript -->
     <script src="js/script.js"></script>
 </body>
-</html>
+</html>
diff --git a/pesquisa.css b/pesquisa.css
@@ -0,0 +1,52 @@
+/* Import Google font - Poppins */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
+
+* {
+  font-family: "Poppins", sans-serif;
+}
+
+body {
+  background: #f1f1f1 !important;
+}
+
+body .container {
+  max-width: 1100px;
+}
+
+#filter-buttons button {
+  border-radius: 3px;
+  background: #fff;
+  border-color: transparent;
+}
+
+#filter-buttons button:hover {
+  background: #ddd;
+}
+
+#filter-buttons button.active {
+  color: #fff;
+  background: #6c757d;
+}
+
+#filterable-cards .card {
+  width: 15rem;
+  border: 2px solid transparent;
+}
+
+#filterable-cards .card.hide {
+  display: none;
+}
+
+.tamanho-c1 {
+  max-width: 50px
+}
+
+@media (max-width: 600px) {
+  #filterable-cards {
+    justify-content: center;
+  }
+
+  #filterable-cards .card {
+    width: calc(100% / 2 - 10px);
+  }
+}
diff --git a/pesquisa.html b/pesquisa.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8" />
+    <title>Filterable Image Gallery Bootstrap</title>
+    <link rel="stylesheet" href="pesquisa.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
+    <script src="script.js" defer></script>
+  </head>
+  <body>
+    <div class="container">
+      <!-- Images Filter Buttons Section -->
+      <div class="row mt-5" id="filter-buttons">
+        <div class="col-12">
+          <button class="btn mb-2 me-1 active" data-filter="all">Todos</button>
+          <button class="btn mb-2 mx-1" data-filter="Bebidas">Bebidas</button>
+          <button class="btn mb-2 mx-1" data-filter="Refeições">Refeições</button>
+          <button class="btn mb-2 mx-1" data-filter="Sobremesas">Sobremesas</button>
+        </div>
+      </div>
+
+      <!-- Filterable Images / Cards Section -->
+      <div class="row px-2 mt-4 gap-3" id="filterable-cards">
+        <div class="card p-0" data-name="Bebidas">
+          <img src="images/cardapio 1.jpg" alt="img" />
+          <div class="card-body">
+            <div class="tamanho">
+            </div>
+          </div>
+        </div>
+        <div class="card p-0" data-name="Bebidas">
+          <img src="images/cardapio 2.jpg" alt="img" />
+          <div class="card-body">
+            <div class="tamanho">
+            </div>
+          </div>
+        </div>
+        <div class="card p-0" data-name="Bebidas">
+          <img src="images/cardapio 3.jpg" alt="img" />
+          <div class="card-body">
+            <div class="tamanho">
+            </div>
+          </div>
+        </div>
+        <div class="card p-0" data-name="Bebidas">
+          <img src="images/cardapio 4.jpg" alt="img" />
+          <div class="card-body">
+            <div class="tamanho">
+            </div>
+          </div>
+        </div>
+        <div class="card p-0" data-name="Refeições">
+          <img src="images/cardapio 5.jpg" alt="img" />
+          <div class="card-body">
+            <div class="tamanho">
+            </div>
+          </div>
+        </div>
+        <div class="card p-0" data-name="Refeições">
+          <img src="images/cardapio 6.jpg" alt="img" />
+          <div class="card-body">
+            <div class="tamanho">
+            </div>
+          </div>
+        </div>
+        <div class="card p-0" data-name="Refeições">
+          <img src="images/cardapio 8.jpg" alt="img" />
+          <div class="card-body">
+            <div class="tamanho">
+            </div>
+          </div>
+        </div>
+        <div class="card p-0" data-name="Sobremesas">
+          <img src="images/cardapio 7.jpg" alt="img" />
+          <div class="card-body">
+          </div>
+          <div class="tamanho">
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/pesquisa.js b/pesquisa.js
@@ -0,0 +1,19 @@
+// Select relevant HTML elements
+const filterButtons = document.querySelectorAll("#filter-buttons button");
+const filterableCards = document.querySelectorAll("#filterable-cards .card");
+
+// Function to filter cards based on filter buttons
+const filterCards = (e) => {
+    document.querySelector("#filter-buttons .active").classList.remove("active");
+    e.target.classList.add("active");
+
+    filterableCards.forEach(card => {
+        // show the card if it matches the clicked filter or show all cards if "all" filter is clicked
+        if(card.dataset.name === e.target.dataset.filter || e.target.dataset.filter === "all") {
+            return card.classList.replace("hide", "show");
+        }
+        card.classList.add("hide");
+    });
+}
+
+filterButtons.forEach(button => button.addEventListener("click", filterCards));
diff --git a/scriptperfil.js b/scriptperfil.js