Create Index.HTML

Robbbo-T · Dec 1, 2024 · 15dc478 · 15dc478
1 parent cae4c7d
commit 15dc478
Showing 1 changed file with 126 additions and 0 deletions.
diff --git a/Index.HTML b/Index.HTML
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Searchable Hierarchical Index</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+    }
+    .search-bar {
+      margin: 20px;
+    }
+    .tree {
+      list-style: none;
+      padding-left: 20px;
+    }
+    .tree ul {
+      list-style: none;
+      padding-left: 20px;
+      display: none;
+    }
+    .tree li {
+      margin: 5px 0;
+      cursor: pointer;
+    }
+    .tree li span {
+      font-weight: bold;
+      color: #007BFF;
+    }
+    .tree li span:hover {
+      text-decoration: underline;
+    }
+    .tree .expanded > ul {
+      display: block;
+    }
+    .highlight {
+      background-color: yellow;
+    }
+  </style>
+</head>
+<body>
+  <div class="search-bar">
+    <input type="text" id="searchInput" placeholder="Search by part number or description..." oninput="searchTree()" />
+  </div>
+  <ul id="hierarchyTree" class="tree">
+    <li>
+      <span>24 - Electrical Power System</span>
+      <ul>
+        <li>
+          <span>2420 - AC Generation System</span>
+          <ul>
+            <li>2421 - AC Generator-Alternator</li>
+            <li>2422 - AC Inverter</li>
+          </ul>
+        </li>
+        <li>
+          <span>2430 - DC Generation System</span>
+          <ul>
+            <li>2431 - Battery Overheat Warning System</li>
+            <li>2432 - Battery/Charger System</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+    <li>
+      <span>25 - Equipment/Furnishings</span>
+      <ul>
+        <li>
+          <span>2510 - Flight Compartment Equipment</span>
+          <ul>
+            <li>2511 - Flight Display Unit</li>
+            <li>2512 - Control Panels</li>
+          </ul>
+        </li>
+        <li>
+          <span>2520 - Passenger Compartment Equipment</span>
+          <ul>
+            <li>2521 - Seating System</li>
+            <li>2522 - Storage Compartments</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+
+  <script>
+    // Toggle tree visibility on click
+    document.querySelectorAll(".tree li > span").forEach(item => {
+      item.addEventListener("click", function () {
+        const parent = this.parentElement;
+        parent.classList.toggle("expanded");
+      });
+    });
+
+    // Search function
+    function searchTree() {
+      const query = document.getElementById("searchInput").value.toLowerCase();
+      const treeItems = document.querySelectorAll(".tree li");
+
+      treeItems.forEach(item => {
+        item.style.display = "none";
+        item.classList.remove("highlight");
+      });
+
+      const matchingItems = Array.from(treeItems).filter(item => {
+        const text = item.innerText.toLowerCase();
+        return text.includes(query);
+      });
+
+      matchingItems.forEach(item => {
+        item.style.display = "block";
+        item.classList.add("highlight");
+
+        // Expand parent nodes
+        let parent = item.parentElement;
+        while (parent && parent.tagName === "UL") {
+          parent.style.display = "block";
+          parent.parentElement.classList.add("expanded");
+          parent = parent.parentElement.parentElement;
+        }
+      });
+    }
+  </script>
+</body>
+</html>