Edward Betts
71be0dd8cf
Extract repeated inline styles from templates into named CSS classes in base.html: layout helpers, buttons, form groups, alert boxes, results table rules, row highlight classes, typography utilities, and empty-state styles. Remove the per-page <style> block from results.html. Update README to reflect current destinations, GraphQL data source, Circle Line timetable, configurable connection range, and GWR fare table. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
301 lines
8.1 KiB
HTML
301 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{% block title %}Bristol to Europe via Eurostar{% endblock %}</title>
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:site_name" content="Bristol to Europe via Eurostar">
|
|
<meta property="og:title" content="{% block og_title %}Bristol to Europe via Eurostar{% endblock %}">
|
|
<meta property="og:description" content="{% block og_description %}Find Bristol Temple Meads to Europe itineraries via Paddington, St Pancras, and Eurostar.{% endblock %}">
|
|
<meta property="og:url" content="{{ request.url }}">
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="twitter:title" content="{% block twitter_title %}Bristol to Europe via Eurostar{% endblock %}">
|
|
<meta name="twitter:description" content="{% block twitter_description %}Find Bristol Temple Meads to Europe itineraries via Paddington, St Pancras, and Eurostar.{% endblock %}">
|
|
<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;
|
|
}
|
|
.col-transfer { display: none; }
|
|
}
|
|
|
|
a { color: #00539f; }
|
|
|
|
/* Card helpers */
|
|
.card > h2:first-child { margin-top: 0; }
|
|
.card-scroll { overflow-x: auto; }
|
|
|
|
/* Form groups */
|
|
.form-group { margin-bottom: 1.2rem; }
|
|
.form-group-lg { margin-bottom: 1.5rem; }
|
|
|
|
/* Buttons */
|
|
.btn-primary {
|
|
background: #00539f;
|
|
color: #fff;
|
|
border: none;
|
|
padding: 0.75rem 2rem;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-nav {
|
|
padding: 0.3rem 0.75rem;
|
|
border: 1px solid #cbd5e0;
|
|
border-radius: 4px;
|
|
text-decoration: none;
|
|
color: #00539f;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Inline select */
|
|
.select-inline {
|
|
padding: 0.3rem 0.6rem;
|
|
font-size: 0.9rem;
|
|
border: 1px solid #cbd5e0;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Alert boxes */
|
|
.alert {
|
|
margin-top: 1rem;
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 4px;
|
|
}
|
|
.alert-error {
|
|
background: #fff5f5;
|
|
border: 1px solid #fc8181;
|
|
color: #c53030;
|
|
}
|
|
.alert-warning {
|
|
background: #fffbeb;
|
|
border: 1px solid #f6e05e;
|
|
color: #744210;
|
|
}
|
|
|
|
/* Results page layout */
|
|
.back-link { margin-bottom: 1rem; }
|
|
.date-nav { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
|
|
.switcher-section { margin: 0.9rem 0 1rem; }
|
|
.section-label { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.45rem; }
|
|
.filter-row { margin-top: 0.75rem; display: flex; gap: 1.5rem; align-items: center; }
|
|
.filter-label { font-size: 0.9rem; font-weight: 600; margin-right: 0.5rem; }
|
|
.card-meta { color: #4a5568; margin: 0; }
|
|
.footnote { margin-top: 1rem; font-size: 0.82rem; color: #718096; }
|
|
|
|
/* Results table */
|
|
.results-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
|
|
.results-table th,
|
|
.results-table td { padding: 0.6rem 0.8rem; }
|
|
.results-table thead tr { border-bottom: 2px solid #e2e8f0; text-align: left; }
|
|
.results-table tbody tr { border-bottom: 1px solid #e2e8f0; }
|
|
.row-fast { background: #f0fff4; }
|
|
.row-slow { background: #fff5f5; }
|
|
.row-alt { background: #f7fafc; }
|
|
.row-unreachable { background: #f7fafc; color: #a0aec0; }
|
|
|
|
/* Empty state */
|
|
.empty-state { color: #4a5568; text-align: center; padding: 3rem 2rem; }
|
|
.empty-state p { margin: 0; }
|
|
.empty-state p:first-child { font-size: 1.1rem; margin-bottom: 0.5rem; }
|
|
.empty-state p:last-child { font-size: 0.9rem; }
|
|
|
|
/* Utilities */
|
|
.text-muted { color: #718096; }
|
|
.text-dimmed { color: #a0aec0; }
|
|
.text-green { color: #276749; }
|
|
.text-red { color: #c53030; }
|
|
.text-blue { color: #00539f; }
|
|
.text-sm { font-size: 0.85rem; }
|
|
.text-xs { font-size: 0.75rem; }
|
|
.nowrap { white-space: nowrap; }
|
|
.font-bold { font-weight: 600; }
|
|
.font-normal { font-weight: 400; }
|
|
</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>
|