edward/bristol-eurostar
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Show destinations as one-click cards

Browse source
This commit is contained in:
Edward Betts 2026-04-01 12:38:54 +01:00
parent 945d028c13
commit a9d5a0589d
2 changed files with 102 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

79
templates/base.html
View file

@ -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>

39
templates/index.html
View file

@ -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">
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>
<span class="field-label">Eurostar destination</span>
<div class="destination-grid" role="radiogroup" aria-label="Eurostar destination">
{% 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"
style="width:100%;padding:0.6rem 0.8rem;font-size:1rem;border:1px solid #cbd5e0;border-radius:4px">
<select id="min_connection" name="min_connection" class="form-control">
{% 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"
style="width:100%;padding:0.6rem 0.8rem;font-size:1rem;border:1px solid #cbd5e0;border-radius:4px">
<select id="max_connection" name="max_connection" class="form-control">
{% 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 %}