Add tool search functionality to home page

- Introduced a search input field for tools in the home hero section.
- Implemented JavaScript functionality to filter tool cards based on user input.
- Added a message for when no tools match the search criteria.
- Updated CSS for the search input and empty state styling.

static/css/style.css

@@ -272,6 +272,34 @@ html.theme-animate *::after {
 .home-hero h1 { font-size: 2rem; margin-bottom: .4rem; }
 .home-hero p { color: var(--text-light); font-size: 1.05rem; }
 
+.home-search {
+    margin: 1.25rem auto 0;
+    max-width: 480px;
+}
+.home-search input {
+    width: 100%;
+    padding: .55rem 1rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--surface);
+    color: var(--text);
+    font-size: .95rem;
+    font-family: var(--font);
+    outline: none;
+    transition: border-color .15s, box-shadow .15s;
+}
+.home-search input:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(67,97,238,.12);
+}
+
+.search-empty {
+    text-align: center;
+    padding: 2rem;
+    color: var(--text-light);
+    font-size: .95rem;
+}
+
 .category-section { margin-bottom: 2rem; }
 .category-title {
     font-size: 1.1rem;

static/js/main.js

@@ -89,12 +89,43 @@ document.addEventListener("DOMContentLoaded", () => {
     });
 
     initTheme();
+    initToolSearch();
     initUploadZone();
     initToolForm();
     initDependentOptions();
     initCapabilityStatus();
 });
 
+/* ── Home Page Tool Search ────────────────────── */
+function initToolSearch() {
+    const input = document.getElementById("tool-search");
+    if (!input) return;
+
+    const cards = Array.from(document.querySelectorAll(".tool-card"));
+    const sections = Array.from(document.querySelectorAll(".category-section"));
+    const empty = document.getElementById("search-empty");
+
+    input.addEventListener("input", () => {
+        const query = input.value.trim().toLowerCase();
+
+        cards.forEach(card => {
+            const match = !query || card.dataset.search.includes(query);
+            card.style.display = match ? "" : "none";
+        });
+
+        sections.forEach(section => {
+            const hasVisible = Array.from(section.querySelectorAll(".tool-card"))
+                .some(c => c.style.display !== "none");
+            section.style.display = hasVisible ? "" : "none";
+        });
+
+        if (empty) {
+            const anyVisible = cards.some(c => c.style.display !== "none");
+            empty.style.display = anyVisible ? "none" : "";
+        }
+    });
+}
+
 async function initCapabilityStatus() {
     const box = document.getElementById("capability-status");
     if (!box) return;

templates/index.html

@@ -5,6 +5,9 @@
 <div class="home-hero">
     <h1>Your Everyday Tools</h1>
     <p>All the utilities you need, in one place.</p>
+    <div class="home-search">
+        <input type="text" id="tool-search" placeholder="Search tools..." autocomplete="off">
+    </div>
 </div>
 
 {% for cat in tool_categories %}
@@ -14,7 +17,7 @@
     </div>
     <div class="tools-grid">
         {% for tool in cat.tools %}
-        <a href="/{{ cat.id }}/{{ tool.id }}" class="tool-card">
+        <a href="/{{ cat.id }}/{{ tool.id }}" class="tool-card" data-search="{{ (tool.name ~ ' ' ~ tool.desc) | lower }}">
             <div class="card-icon"><i class="bi {{ tool.icon }}"></i></div>
             <div class="card-body">
                 <h3>{{ tool.name }}</h3>
@@ -25,4 +28,5 @@
     </div>
 </div>
 {% endfor %}
+<p id="search-empty" class="search-empty" style="display:none;">No tools match your search.</p>
 {% endblock %}