Updated: search Bar

Flask/static/css/global.css

@@ -1,26 +1,46 @@
 @font-face {
   font-family: mediamoure;
-  src: url("../fonts/mediamoure.ttf");
+  src: url("/fonts/mediamoure.ttf");
 }
 @font-face {
   font-family: abhayalibre;
-  src: url("../fonts/AbhayaLibre.ttf");
+  src: url("/fonts/AbhayaLibre.ttf");
 }
 @font-face {
   font-family: lora;
-  src: url("../fonts/lora.ttf");
+  src: url("/fonts/lora.ttf");
 }
 @font-face {
   font-family: roboto;
-  src: url("../fonts/roboto.ttf");
+  src: url("/fonts/roboto.ttf");
 }
 @font-face {
   font-family: opensans;
-  src: url("../fonts/opensans.ttf");
+  src: url("/fonts/opensans.ttf");
 }
 html {
   scroll-behavior: smooth;
 }
+.search-container {
+  width: 200px;
+}
+#searchResults {
+  margin-top: 10px;
+  width: 200px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  background-color: #f9f9f9;
+  display: none;
+  position: absolute;
+}
+
+#searchResults .close-button {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  cursor: pointer;
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -51,7 +71,7 @@ input#search {
   border: 1px solid #000;
   font-size: 16px;
   background-color: transparent;
-  background-image: url("../images/assests/searchdark.png");
+  background-image: url("/images/assests/searchdark.png");
   background-position: 5px 5px;
   background-repeat: no-repeat;
   width: 100%;
@@ -337,6 +357,16 @@ input#search {
   .socials {
     justify-content: center;
   }
+  .search-container {
+    width: 130px;
+  }
+  .navbar {
+    justify-content: space-around;
+    padding: 20px 0px;
+  }
+  .navleft {
+    justify-content: center;
+  }
 }
 @media screen and (min-width: 1000px) {
   #mobileview {

Flask/static/js/script.js

@@ -36,3 +36,34 @@ function changemenumentors() {
   menteesbutton.style.backgroundColor = "#fff";
   menteesbutton.style.color = "#1B204A";
 }
+
+function search() {
+  var searchTerm = document.getElementById("search").value.toLowerCase();
+  var resultsContainer = document.getElementById("searchResults");
+  resultsContainer.innerHTML = "";
+
+  var searchableElements = document.querySelectorAll(".searchable");
+  var hasResults = false;
+
+  searchableElements.forEach(function (element) {
+    var content = element.textContent.toLowerCase();
+
+    if (content.includes(searchTerm)) {
+      var resultItem = document.createElement("div");
+      resultItem.textContent = content;
+      resultsContainer.appendChild(resultItem);
+      hasResults = true;
+    }
+  });
+  resultsContainer.style.display = hasResults ? "block" : "none";
+  resultsContainer.innerHTML += searchTerm.split(" ").join("<br>");
+  resultsContainer.innerHTML +=
+    '<div class="close-button" onclick="closeSearchResults()">✖</div>';
+}
+
+function closeSearchResults() {
+  var resultsContainer = document.getElementById("searchResults");
+  resultsContainer.style.display = "none";
+}
+
+document.getElementById("search").addEventListener("input", search);

Flask/templates/activites.html

@@ -17,7 +17,10 @@
       <div class="navbar">
         <div class="navleft">
           <img src="../static/images/assests/logo.png" alt="logo" />
-          <input type="text" id="search" />
+          <div class="search-container">
+            <input type="text" id="search" />
+            <div id="searchResults"></div>
+          </div>
         </div>
         <div class="navright">
           <a href="index.html" class="navitems">Home</a>

Flask/templates/index.html

@@ -19,7 +19,10 @@
       <div class="navbar">
         <div class="navleft">
           <img src="../static/images/assests/logo.png" alt="logo" />
-          <input type="text" id="search" />
+          <div class="search-container">
+            <input type="text" id="search" />
+            <div id="searchResults"></div>
+          </div>
         </div>
         <div class="navright">
           <a href="index.html" class="navitems">Home</a>

Flask/templates/information.html

@@ -18,7 +18,10 @@
       <div class="navbar">
         <div class="navleft">
           <img src="../static/images/assests/logo.png" alt="logo" />
-          <input type="text" id="search" />
+          <div class="search-container">
+            <input type="text" id="search" />
+            <div id="searchResults"></div>
+          </div>
         </div>
         <div class="navright">
           <a href="index.html" class="navitems">Home</a>

Flask/templates/mentees.html

@@ -17,7 +17,10 @@
       <div class="navbar">
         <div class="navleft">
           <img src="../static/images/assests/logo.png" alt="logo" />
-          <input type="text" id="search" />
+          <div class="search-container">
+            <input type="text" id="search" />
+            <div id="searchResults"></div>
+          </div>
         </div>
         <div class="navright">
           <a href="index.html" class="navitems">Home</a>

js/script.js

@@ -49,7 +49,6 @@ function search() {
     var content = element.textContent.toLowerCase();
 
     if (content.includes(searchTerm)) {
-      // Create a new div for each matching result
       var resultItem = document.createElement("div");
       resultItem.textContent = content;
       resultsContainer.appendChild(resultItem);