Show destinations as one-click cards

templates/base.html

@@ -47,6 +47,85 @@
       padding: 2rem;
     }
 
+    .field-label {
+      display: block;
+      font-weight: 600;
+      margin-bottom: 0.4rem;
+    }
+
+    .form-control {
+      width: 100%;
+      padding: 0.6rem 0.8rem;
+      font-size: 1rem;
+      border: 1px solid #cbd5e0;
+      border-radius: 4px;
+    }
+
+    .destination-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      gap: 0.75rem;
+    }
+
+    .destination-option {
+      position: relative;
+    }
+
+    .destination-option input {
+      position: absolute;
+      opacity: 0;
+      inset: 0;
+      margin: 0;
+      cursor: pointer;
+    }
+
+    .destination-option label {
+      display: block;
+      min-height: 100%;
+      padding: 0.95rem 1rem;
+      border: 1px solid #cbd5e0;
+      border-radius: 10px;
+      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+      cursor: pointer;
+      transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
+    }
+
+    .destination-option label strong {
+      display: block;
+      color: #0f172a;
+      font-size: 1rem;
+      margin-bottom: 0.2rem;
+    }
+
+    .destination-option label span {
+      display: block;
+      color: #475569;
+      font-size: 0.9rem;
+    }
+
+    .destination-option input:hover + label {
+      border-color: #7aa7d9;
+      box-shadow: 0 4px 12px rgba(0, 83, 159, 0.08);
+    }
+
+    .destination-option input:focus-visible + label {
+      border-color: #00539f;
+      box-shadow: 0 0 0 3px rgba(0, 83, 159, 0.2);
+    }
+
+    .destination-option input:checked + label {
+      border-color: #00539f;
+      background: linear-gradient(180deg, #eef6ff 0%, #dcecff 100%);
+      box-shadow: 0 8px 20px rgba(0, 83, 159, 0.16);
+      transform: translateY(-1px);
+    }
+
+    @media (max-width: 640px) {
+      .card {
+        padding: 1.25rem;
+      }
+    }
+
     a { color: #00539f; }
   </style>
 </head>

templates/index.html

@@ -4,33 +4,41 @@
   <h2 style="margin-top:0">Plan your journey</h2>
   <form method="get" action="{{ url_for('search') }}">
     <div style="margin-bottom:1.2rem">
-      <label for="destination" style="display:block;font-weight:600;margin-bottom:0.4rem">
+      <span class="field-label">Eurostar destination</span>
-        Eurostar destination
+      <div class="destination-grid" role="radiogroup" aria-label="Eurostar destination">
-      </label>
-      <select id="destination" name="destination" required
-        style="width:100%;padding:0.6rem 0.8rem;font-size:1rem;border:1px solid #cbd5e0;border-radius:4px">
-        <option value="" disabled selected>Select destination&hellip;</option>
         {% for slug, name in destinations.items() %}
-          <option value="{{ slug }}">{{ name }}</option>
+          {% set city = name.replace(' Gare du Nord', '').replace(' Centraal', '').replace(' Midi', '').replace(' Europe', '') %}
+          <div class="destination-option">
+            <input
+              type="radio"
+              id="destination-{{ slug }}"
+              name="destination"
+              value="{{ slug }}"
+              {% if loop.first %}checked{% endif %}
+              required>
+            <label for="destination-{{ slug }}">
+              <strong>{{ city }}</strong>
+              <span>{{ name }}</span>
+            </label>
+          </div>
         {% endfor %}
-      </select>
+      </div>
     </div>
 
     <div style="margin-bottom:1.5rem">
-      <label for="travel_date" style="display:block;font-weight:600;margin-bottom:0.4rem">
+      <label for="travel_date" class="field-label">
         Travel date
       </label>
       <input type="date" id="travel_date" name="travel_date" required
         min="{{ today }}" value="{{ today }}"
-        style="width:100%;padding:0.6rem 0.8rem;font-size:1rem;border:1px solid #cbd5e0;border-radius:4px">
+        class="form-control">
     </div>
 
     <div style="margin-bottom:1.2rem">
-      <label for="min_connection" style="display:block;font-weight:600;margin-bottom:0.4rem">
+      <label for="min_connection" class="field-label">
         Minimum connection time (Paddington &rarr; St&nbsp;Pancras)
       </label>
-      <select id="min_connection" name="min_connection"
+      <select id="min_connection" name="min_connection" class="form-control">
-        style="width:100%;padding:0.6rem 0.8rem;font-size:1rem;border:1px solid #cbd5e0;border-radius:4px">
         {% for mins in [50, 60, 70, 80, 90, 100, 110, 120] %}
           <option value="{{ mins }}" {% if mins == 50 %}selected{% endif %}>{{ mins }} min</option>
         {% endfor %}
@@ -38,11 +46,10 @@
     </div>
 
     <div style="margin-bottom:1.5rem">
-      <label for="max_connection" style="display:block;font-weight:600;margin-bottom:0.4rem">
+      <label for="max_connection" class="field-label">
         Maximum connection time (Paddington &rarr; St&nbsp;Pancras)
       </label>
-      <select id="max_connection" name="max_connection"
+      <select id="max_connection" name="max_connection" class="form-control">
-        style="width:100%;padding:0.6rem 0.8rem;font-size:1rem;border:1px solid #cbd5e0;border-radius:4px">
         {% for mins in [60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180] %}
           <option value="{{ mins }}" {% if mins == 110 %}selected{% endif %}>{{ mins }} min</option>
         {% endfor %}