Add surah search bar

med6ba · med6ba · commit 58cb7069b95c · 2026-01-24T14:28:13.000+01:00
diff --git a/assets/subpages/holy-quran.html b/assets/subpages/holy-quran.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="ar" dir="rtl">
   <head>
     <!-- Required meta tags -->
@@ -29,10 +29,12 @@
   <body class="d-flex flex-column min-h-dvh">
     <!-- Page loader -->
     <div id="pre-loader"></div>
+
     <!-- Back to TOP -->
     <div id="progress">
       <span id="progress-value"><i class="fa-solid fa-up-long"></i></span>
     </div>
+
     <!-- NavBar -->
     <nav class="navbar navbar-expand-lg shadow sticky-top">
       <div
@@ -41,6 +43,7 @@
         <a href="../../index.html" class="ms-auto" id="back" title="عودة للخلف">
           <i class="fa-solid fa-left-long fa-flip-horizontal"></i>
         </a>
+
         <a
           href="../../index.html"
           class="navbar-brand position-absolute start-50 translate-middle-x"
@@ -51,20 +54,35 @@
             height="60px"
           />
         </a>
+
         <button id="theme-switch">
           <i class="fa-solid fa-moon"></i>
           <i class="fa-solid fa-sun"></i>
         </button>
       </div>
     </nav>
-    <!-- Main -->
+
     <main class="container text-center my-4" id="main">
       <section class="container my-4">
         <h1 class="text-center fs-1 fs-md-2 fs-lg-3" id="section-header">
           فهرس السور
         </h1>
-        <br />
-        <div class="row row-cols-2 row-cols-md-3 row-cols-lg-3 g-4">
+        <div class="row justify-content-center my-3">
+          <div class="col-12 col-md-6">
+            <input
+              type="text"
+              id="surahSearch"
+              class="form-control text-center"
+              placeholder="ابحث عن اسم السورة..."
+              autocomplete="off"
+            />
+            <small id="searchError" class="text-warning d-none mt-2"></small>
+          </div>
+        </div>
+        <div
+          id="surahGrid"
+          class="row row-cols-2 row-cols-md-3 row-cols-lg-3 g-4"
+        >
           <article class="col">
             <a href="quran-pages/surah-1.html" class="text-decoration-none">
               <div
@@ -1092,7 +1110,9 @@ <h5 class="card-title">سورة الناس</h5>
             </a>
           </article>
         </div>
+
         <div></div>
+
         <a
           href="https://www.youtube.com/playlist?list=PLWzzF688g_njHA-QzbZUcxNGneHOYpVbQ"
           download
@@ -1103,19 +1123,22 @@ <h5 class="card-title">سورة الناس</h5>
             المصحف المرتل &nbsp<i class="fa-brands fa-youtube fa-lg"></i>
           </button>
         </a>
+
         <a href="../resources/holy-quran.pdf" download id="more-link-3">
           <button class="mt-4" id="more">
             رابط التحميل &nbsp<i class="fa-solid fa-file-pdf fa-lg"></i>
           </button>
         </a>
       </section>
     </main>
+
     <!-- Footer -->
     <footer class="mt-auto">
       <div class="text-center">
         <p>جميع الحقوق محفوظة &copy; 2025</p>
       </div>
     </footer>
+
     <!-- Required scripts -->
     <script src="../../js/script.js"></script>
     <script src="../../js/bootstrap.js"></script>
diff --git a/css/style.css b/css/style.css
@@ -734,3 +734,51 @@ label {
     border-radius: 15px;
   }
 }
+
+/* -------------------- Search Bar Style ---------------------- */
+
+#surahSearch {
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto !important;
+  padding: 14px 18px !important;
+
+  background-color: var(--nav-cards-bg) !important;
+  color: var(--text-color) !important;
+
+  border: 2px solid var(--accent-color) !important;
+  border-radius: 15px !important;
+
+  box-shadow: none !important;
+  transition: none !important;
+}
+
+#surahSearch::placeholder {
+  color: var(--text-color) !important;
+  opacity: 0.6;
+}
+
+#surahSearch:focus {
+  outline: none !important;
+  box-shadow: none !important;
+  border-color: var(--accent-color) !important;
+}
+
+#searchError {
+  display: inline-block;
+  font-size: 2rem;
+  font-weight: 500;
+  opacity: 0.85;
+  color: var(--accent-color);
+}
+
+@media (max-width: 576px) {
+  #surahSearch {
+    padding: 12px 16px !important;
+    font-size: 1rem !important;
+  }
+
+  #searchError {
+    font-size: 0.95rem;
+  }
+}
diff --git a/js/script.js b/js/script.js
@@ -117,3 +117,54 @@ function shareContent() {
     alert("المشاركة غير مدعومة على متصفحك.");
   }
 }
+
+// -------------------------- Search Bar Logic ----------------------------
+
+document.addEventListener("DOMContentLoaded", () => {
+  const searchInput = document.getElementById("surahSearch");
+  const errorMsg = document.getElementById("searchError");
+  const surahCards = document.querySelectorAll("#surahGrid article.col");
+
+  if (!searchInput || !errorMsg || !surahCards.length) return;
+
+  function normalizeArabic(text) {
+    return text
+      .replace(/[أإآ]/g, "ا")
+      .replace(/ى/g, "ي")
+      .replace(/ؤ/g, "و")
+      .replace(/ئ/g, "ي")
+      .replace(/ة/g, "ه")
+      .replace(/[\u064B-\u065F]/g, "")
+      .replace(/\s+/g, " ")
+      .replace("سورة", "")
+      .trim()
+      .toLowerCase();
+  }
+
+  searchInput.addEventListener("input", function () {
+    const query = normalizeArabic(this.value);
+    let found = false;
+
+    if (query === "") {
+      surahCards.forEach((card) => (card.style.display = ""));
+      errorMsg.classList.add("d-none");
+      return;
+    }
+
+    surahCards.forEach((card) => {
+      const titleEl = card.querySelector(".card-title");
+      const title = titleEl ? titleEl.innerText : "";
+      const normalizedTitle = normalizeArabic(title);
+
+      if (normalizedTitle.includes(query)) {
+        card.style.display = "";
+        found = true;
+      } else {
+        card.style.display = "none";
+      }
+    });
+
+    if (!found) errorMsg.classList.remove("d-none");
+    else errorMsg.classList.add("d-none");
+  });
+});
