search_bar been added

static/css/style.css

@@ -42,7 +42,8 @@
   width:80vw;
   padding:20px;
 }
-#addLog_button{
+/*button*/
+#button{
   display:flex;
   align-items:center;
   gap:8px;
@@ -58,6 +59,22 @@
   transition: all 0.2s;
 }
 
-#navagtor{
-  
+/*search_bar*/
+#search_bar{
+  margin-top: 20px;
+  width: 100%;
+}
+
+#mediaSearch {
+  width:100%;
+  padding: 15px;
+  font-size:1rem;
+  border: 2px solid #eee;
+  border-radius: 10px;
+    outline: none;
+    transition: border-color 0.3s;
+    box-sizing: border-box; /* Ensures padding doesn't break width */
+}
+#mediaSearch:focus {
+    border-color: var(--show-color); /* Changes color when you click it */
 }

static/js/main.js

@@ -17,4 +17,29 @@ document.addEventListener("DOMContentLoaded", function() {
             modal.close();
         });
     }
-});
+});
+
+document.addEventListener('DOMContentLoaded',() => {
+ const searchBar = document.getElementById('mediaSearch');
+  
+  if(searchBar){
+    searchBar.addEventListener('keyup', ()=>{
+      const input = searchBar.value.toLowerCase();
+      const cards = document.getElementsByClassName('card');
+
+      for (let i = 0; i < cards.length; i++) {
+        // We search all text inside the card (Title, Author, Genre)
+        const cardText = cards[i].innerText.toLowerCase();
+                
+        if (cardText.includes(input)) {
+          cards[i].style.display = "";
+        } 
+        else {
+          cards[i].style.display = "none";
+        }
+      }
+    });
+  }
+    
+});
+