199 lines
4.2 KiB
HTML
199 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Bristol to Europe via Eurostar</title>
|
|
<link rel="icon" href="{{ url_for('static', filename='favicon.svg') }}" type="image/svg+xml">
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
background: #f0f4f8;
|
|
color: #1a202c;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
header {
|
|
background: #00539f;
|
|
color: #fff;
|
|
padding: 1rem 2rem;
|
|
}
|
|
|
|
header h1 {
|
|
margin: 0;
|
|
font-size: 1.4rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
header p {
|
|
margin: 0.2rem 0 0;
|
|
font-size: 0.85rem;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
main {
|
|
max-width: 960px;
|
|
margin: 2rem auto;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.card {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 4px rgba(0,0,0,0.12);
|
|
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;
|
|
}
|
|
|
|
.fixed-station {
|
|
padding: 0.85rem 1rem;
|
|
border: 1px solid #cbd5e0;
|
|
border-radius: 10px;
|
|
background: linear-gradient(180deg, #f8fbff 0%, #eef4fa 100%);
|
|
}
|
|
|
|
.fixed-station strong {
|
|
display: block;
|
|
color: #0f172a;
|
|
font-size: 1rem;
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
.fixed-station span {
|
|
display: block;
|
|
color: #475569;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.chip-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.chip-link,
|
|
.chip-current {
|
|
display: inline-block;
|
|
padding: 0.35rem 0.8rem;
|
|
border: 1px solid #cbd5e0;
|
|
border-radius: 999px;
|
|
font-size: 0.9rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.chip-link {
|
|
color: #00539f;
|
|
background: #fff;
|
|
}
|
|
|
|
.chip-link:hover {
|
|
border-color: #7aa7d9;
|
|
background: #f8fbff;
|
|
}
|
|
|
|
.chip-current {
|
|
color: #fff;
|
|
background: #00539f;
|
|
border-color: #00539f;
|
|
font-weight: 600;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.card {
|
|
padding: 1.25rem;
|
|
}
|
|
}
|
|
|
|
a { color: #00539f; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Bristol to Europe via Eurostar</h1>
|
|
<p>GWR to Paddington → St Pancras → Eurostar
|
|
·
|
|
<a href="https://git.4angle.com/edward/bristol-eurostar"
|
|
style="color:rgba(255,255,255,0.75);font-size:0.8rem"
|
|
target="_blank" rel="noopener">source</a>
|
|
</p>
|
|
</header>
|
|
<main>
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
</body>
|
|
</html>
|