Update web/templates/search.html

web/templates/search.html

@@ -1,36 +1,34 @@
 {% extends "base.html" %}
-{% block title %}Search - Illustrations DB{% endblock %}
+{% load static %}
+
 {% block content %}
-  <div class="panel">
-    <h1>Search</h1>
-    {% if ran_search %}
-      {% if result_count and result_count > 0 %}
-        <div class="flash">Found <strong>{{ result_count }}</strong> matching entries. Opening the first match…</div>
-      {% else %}
-        <div class="flash">No results found for <code>{{ q }}</code> in the selected fields.</div>
-      {% endif %}
-    {% endif %}
-    <p class="small"><strong>How to search:</strong> Type words or phrases (quotes for exact), use wildcards, and choose which fields to search.</p>
-    <form method="get" action="/search/">
-      <div class="row">
-        <div>
-          <label>Search terms</label>
-          <input type="text" name="q" value="{{ q|default:'' }}" placeholder="Type words, phrases, or wildcards…" />
+<div class="container">
+  <h1 class="page-title">Search</h1>
+  <p class="page-subtitle">Use wildcards: <code>*</code> matches many characters (e.g., <code>*love*</code>), <code>?</code> matches one. By default we search Subject, Illustration, and Application.</p>
+
+  <form method="get" class="search-form">
+    <div class="search-row">
+      <input type="text" name="q" value="{{ q }}" placeholder="Type to search…" class="search-input" autofocus>
+      <button class="btn btn-primary">Search</button>
     </div>
-        <div>
-          <label>Fields to search</label>
-          <div class="chips">
-            {% for opt in field_options %}
-              <label class="badge"><input type="checkbox" name="{{ opt.name }}" {% if opt.checked %}checked{% endif %}/> {{ opt.label }}</label>
+
+    <div class="filter-row">
+      {% for f in field_options %}
+        <label class="check-pill">
+          <input type="checkbox" name="{{ f.name }}" {% if f.checked %}checked{% endif %}>
+          <span>{{ f.label }}</span>
+        </label>
       {% endfor %}
     </div>
-        </div>
-      </div>
-      <div style="margin-top:16px; display:flex; gap:10px; justify-content:flex-end;">
-        <button class="btn primary" type="submit">Search</button>
-      </div>
+
+    <div class="muted small">Total entries: {{ total }}</div>
   </form>
+
+  {% if ran_search and result_count == 0 %}
+    <div class="empty-state">
+      <div class="empty-title">No results</div>
+      <div class="empty-subtitle">Try broadening your terms or enabling more fields above.</div>
+    </div>
+  {% endif %}
 </div>
-  <div class="spacer"></div>
-  <div class="small">Total entries in database: <strong>{{ total }}</strong></div>
 {% endblock %}