43 lines
1.7 KiB
HTML
43 lines
1.7 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
<div class="card">
|
|
<h2 style="margin-top:0">Plan your journey</h2>
|
|
<form id="journey-form">
|
|
<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…</option>
|
|
{% for slug, name in destinations.items() %}
|
|
<option value="{{ slug }}">{{ name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div style="margin-bottom:1.5rem">
|
|
<label for="travel_date" style="display:block;font-weight:600;margin-bottom:0.4rem">
|
|
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">
|
|
</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>
|
|
<script>
|
|
document.getElementById('journey-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
const slug = this.querySelector('[name="destination"]').value;
|
|
const date = this.querySelector('[name="travel_date"]').value;
|
|
if (slug && date) window.location.href = '/results/' + slug + '/' + date;
|
|
});
|
|
</script>
|
|
{% endblock %}
|