Update homepage tool cards

homepage/index.html

@@ -112,13 +112,10 @@
     .tools-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
+      grid-auto-rows: 1fr;
       gap: 1.5rem;
     }
 
-    .tool-card--featured {
-      grid-column: 1 / -1;
-    }
-
     /* ── Cards ───────────────────────────────────────────────────── */
 
     .tool-card {
@@ -130,16 +127,13 @@
       flex-direction: column;
       gap: 1rem;
       transition: box-shadow 0.2s;
+      min-height: 100%;
     }
 
     .tool-card:hover {
       box-shadow: 0 4px 24px rgba(0,0,0,0.07);
     }
 
-    .tool-card--featured {
-      border-left: 3px solid var(--green);
-    }
-
     .card-header {
       display: flex;
       align-items: flex-start;
@@ -175,27 +169,27 @@
       line-height: 1.7;
     }
 
-    /* ── PT form ─────────────────────────────────────────────────── */
+    /* ── Tool form ───────────────────────────────────────────────── */
 
-    .pt-form {
+    .tool-form {
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
     }
 
-    .pt-form label {
+    .tool-form label {
       font-size: 0.8rem;
       font-weight: 600;
       color: var(--text);
       letter-spacing: 0.01em;
     }
 
-    .pt-form-row {
+    .tool-form-row {
       display: flex;
       gap: 0.5rem;
     }
 
-    .pt-input {
+    .tool-input {
       flex: 1;
       min-width: 0;
       padding: 0.6rem 0.9rem;
@@ -209,12 +203,12 @@
       transition: border-color 0.15s, background 0.15s;
     }
 
-    .pt-input:focus {
+    .tool-input:focus {
       border-color: var(--green);
       background: white;
     }
 
-    .pt-input::placeholder { color: #b0b8c4; }
+    .tool-input::placeholder { color: #b0b8c4; }
 
     .btn-go {
       padding: 0.6rem 1.3rem;
@@ -282,8 +276,7 @@
 
     @media (max-width: 620px) {
       .tools-grid { grid-template-columns: 1fr; }
-      .tool-card--featured { grid-column: 1; }
-      .pt-form-row { flex-direction: column; }
+      .tool-form-row { flex-direction: column; }
       .btn-go { width: 100%; }
     }
   </style>
@@ -303,7 +296,7 @@
 
   <div class="tools-grid">
 
-    <div class="tool-card tool-card--featured">
+    <div class="tool-card">
       <div class="card-header">
         <h2 class="tool-name">Public Transport → GeoJSON</h2>
         <span class="tool-tag">GeoJSON</span>
@@ -313,16 +306,17 @@
         Visualise the route on a map, select start and end stops to extract a
         segment, and download the result.
       </p>
-      <div class="pt-form">
+      <div class="tool-form">
         <label for="relation-input">Relation ID or OSM URL</label>
-        <div class="pt-form-row">
-          <input class="pt-input" type="text" id="relation-input"
+        <div class="tool-form-row">
+          <input class="tool-input" type="text" id="relation-input"
             placeholder="e.g. 15083963 or openstreetmap.org/relation/…"
             autocomplete="off" spellcheck="false">
-          <button class="btn-go" id="btn-go">Go →</button>
+          <button class="btn-go" id="btn-go" type="button">Go →</button>
         </div>
         <span class="form-error" id="form-error">Could not find a relation ID in that input.</span>
       </div>
+      <a class="card-link" href="/public_transport_geojson/">Open GeoJSON tool →</a>
     </div>
 
     <div class="tool-card">
@@ -334,7 +328,16 @@
         Find the ATCO code for a UK bus stop by postcode, place, street or
         current location. See nearby stops and the bus routes serving them.
       </p>
-      <a class="card-link" href="/uk-bus-stops/">Find a bus stop →</a>
+      <div class="tool-form">
+        <label for="bus-stop-input">Postcode, place, street or ATCO code</label>
+        <div class="tool-form-row">
+          <input class="tool-input" type="text" id="bus-stop-input"
+            placeholder="e.g. Bristol Temple Meads or 0100BRP90314"
+            autocomplete="off" spellcheck="false">
+          <button class="btn-go" id="bus-stop-go" type="button">Search →</button>
+        </div>
+      </div>
+      <a class="card-link" href="/uk-bus-stops/">Open bus stop finder →</a>
     </div>
 
     <div class="tool-card">
@@ -398,6 +401,21 @@
   document.getElementById('relation-input').addEventListener('keydown', function(e) {
     if (e.key === 'Enter') goToRelation();
   });
+
+  function searchBusStops() {
+    const input = document.getElementById('bus-stop-input');
+    const query = input.value.trim();
+    if (query) {
+      window.location.href = '/uk-bus-stops/?q=' + encodeURIComponent(query);
+    } else {
+      window.location.href = '/uk-bus-stops/';
+    }
+  }
+
+  document.getElementById('bus-stop-go').addEventListener('click', searchBusStops);
+  document.getElementById('bus-stop-input').addEventListener('keydown', function(e) {
+    if (e.key === 'Enter') searchBusStops();
+  });
 </script>
 
 </body>