diff --git a/static/css/style.css b/static/css/style.css index 71e247f..19d99bc 100644 --- a/static/css/style.css +++ b/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; diff --git a/static/js/main.js b/static/js/main.js index 6df3544..a9a6b28 100644 --- a/static/js/main.js +++ b/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; diff --git a/templates/index.html b/templates/index.html index ae97418..7ec786d 100644 --- a/templates/index.html +++ b/templates/index.html @@ -5,6 +5,9 @@

Your Everyday Tools

All the utilities you need, in one place.

+
{% for cat in tool_categories %} @@ -14,7 +17,7 @@
{% for tool in cat.tools %} - +

{{ tool.name }}

@@ -25,4 +28,5 @@
{% endfor %} + {% endblock %}