bristol-eurostar/templates/index.html

66 lines
2.5 KiB
HTML

{% extends "base.html" %}
{% block content %}
<div class="card">
<h2 style="margin-top:0">Plan your journey</h2>
<form method="get" action="{{ url_for('search') }}">
<div style="margin-bottom:1.2rem">
<span class="field-label">Eurostar destination</span>
<div class="destination-grid" role="radiogroup" aria-label="Eurostar destination">
{% for slug, name in destinations.items() %}
{% 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 %}
</div>
</div>
<div style="margin-bottom:1.5rem">
<label for="travel_date" class="field-label">
Travel date
</label>
<input type="date" id="travel_date" name="travel_date" required
min="{{ today }}" value="{{ today }}"
class="form-control">
</div>
<div style="margin-bottom:1.2rem">
<label for="min_connection" class="field-label">
Minimum connection time (Paddington &rarr; St&nbsp;Pancras)
</label>
<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 %}
</select>
</div>
<div style="margin-bottom:1.5rem">
<label for="max_connection" class="field-label">
Maximum connection time (Paddington &rarr; St&nbsp;Pancras)
</label>
<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 %}
</select>
</div>
<button type="submit"
style="background:#00539f;color:#fff;border:none;padding:0.75rem 2rem;
font-size:1rem;font-weight:600;border-radius:4px;cursor:pointer">
Search journeys
</button>
</form>
</div>
{% endblock %}