Merge pull request #39 from TartejBrothers/Changes

Changes
TartejBrothers · Jan 30, 2024 · a5a5156 · a5a5156
2 parents 68c5307 + 537da73
commit a5a5156
Show file tree

Hide file tree

Showing 15 changed files with 160 additions and 12 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/Flask/.DS_Store b/Flask/.DS_Store
diff --git a/Flask/static/css/global.css b/Flask/static/css/global.css
@@ -21,6 +21,25 @@
 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;
@@ -337,6 +356,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 {

diff --git a/Flask/static/js/script.js b/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);
diff --git a/Flask/templates/activites.html b/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>

diff --git a/Flask/templates/index.html b/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>

diff --git a/Flask/templates/information.html b/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>

diff --git a/Flask/templates/mentees.html b/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>

diff --git a/activites.html b/activites.html
@@ -13,7 +13,10 @@
       <div class="navbar">
         <div class="navleft">
           <img src="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>

diff --git a/css/global.css b/css/global.css
@@ -21,6 +21,26 @@
 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;
@@ -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 {

diff --git a/css/style.css b/css/style.css
@@ -381,7 +381,7 @@ input[type="radio"]:checked {
   }
 
   .bodymission img {
-    height: 120px;
+    height: 100px;
   }
   .volunteer {
     flex-direction: column;

diff --git a/index.html b/index.html
@@ -15,8 +15,14 @@
       <div class="navbar">
         <div class="navleft">
           <img src="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>
+          <!-- <input type="text" id="search" /> -->
         </div>
+
         <div class="navright">
           <a href="index.html" class="navitems">Home</a>
 
@@ -74,7 +80,7 @@
         </div>
       </div>
       <hr class="splitter" />
-      <div class="headerbody">
+      <div class="headerbody searchable">
         <h1>Changing Lives, One Act of Kindness at a Time.</h1>
         <p>
           Our activities aim to provide better outcomes for marginalized and
@@ -228,7 +234,6 @@ <h1>Volunteer Now</h1>
     <div class="donation" id="donation">
       <div class="donationleft">
         <h1>Donation</h1>
-
         <p class="donationbody">
           AD Life Trust has 12A registration under Income Tax Act, exempting it
           from paying taxes on income, we also an eligible institution under 80G
@@ -242,7 +247,7 @@ <h1>Donation</h1>
           <font color="#E6222b">adlife.trust@addlifegroup.com</font>
         </p>
       </div>
-      <div class="donationright">
+      <div class="donationright searchablea">
         <form>
           <input type="text" placeholder="E-Mail" class="inputfull" />
           <input
@@ -281,6 +286,7 @@ <h1>Donation</h1>
         </form>
       </div>
     </div>
+
     <div class="footer" id="contact">
       <div class="footerleft">
         <div class="footerlefthead">

diff --git a/information.html b/information.html
@@ -14,7 +14,10 @@
       <div class="navbar">
         <div class="navleft">
           <img src="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>

diff --git a/js/script.js b/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);
diff --git a/mentees.html b/mentees.html
@@ -13,7 +13,10 @@
       <div class="navbar">
         <div class="navleft">
           <img src="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>