edward/openstreetmap-tools
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Update homepage tool cards

Browse source
This commit is contained in:
Edward Betts 2026-08-15 11:45:04 +01:00
parent a2e4292b46
commit 42484907ac
1 changed files with 41 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

64
homepage/index.html
View file

@ -112,13 +112,10 @@
.tools-grid { .tools-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr;
gap: 1.5rem; gap: 1.5rem;
} }
.tool-card--featured {
grid-column: 1 / -1;
}
/* ── Cards ───────────────────────────────────────────────────── */ /* ── Cards ───────────────────────────────────────────────────── */
.tool-card { .tool-card {
@ -130,16 +127,13 @@
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
transition: box-shadow 0.2s; transition: box-shadow 0.2s;
min-height: 100%;
} }
.tool-card:hover { .tool-card:hover {
box-shadow: 0 4px 24px rgba(0,0,0,0.07); box-shadow: 0 4px 24px rgba(0,0,0,0.07);
} }
.tool-card--featured {
border-left: 3px solid var(--green);
}
.card-header { .card-header {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@ -175,27 +169,27 @@
line-height: 1.7; line-height: 1.7;
} }
/* ── PT form ─────────────────────────────────────────────────── */ /* ── Tool form ───────────────────────────────────────────────── */
.pt-form { .tool-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
} }
.pt-form label { .tool-form label {
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 600; font-weight: 600;
color: var(--text); color: var(--text);
letter-spacing: 0.01em; letter-spacing: 0.01em;
} }
.pt-form-row { .tool-form-row {
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
} }
.pt-input { .tool-input {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
padding: 0.6rem 0.9rem; padding: 0.6rem 0.9rem;
@ -209,12 +203,12 @@
transition: border-color 0.15s, background 0.15s; transition: border-color 0.15s, background 0.15s;
} }
.pt-input:focus { .tool-input:focus {
border-color: var(--green); border-color: var(--green);
background: white; background: white;
} }
.pt-input::placeholder { color: #b0b8c4; } .tool-input::placeholder { color: #b0b8c4; }
.btn-go { .btn-go {
padding: 0.6rem 1.3rem; padding: 0.6rem 1.3rem;
@ -282,8 +276,7 @@
@media (max-width: 620px) { @media (max-width: 620px) {
.tools-grid { grid-template-columns: 1fr; } .tools-grid { grid-template-columns: 1fr; }
.tool-card--featured { grid-column: 1; } .tool-form-row { flex-direction: column; }
.pt-form-row { flex-direction: column; }
.btn-go { width: 100%; } .btn-go { width: 100%; }
} }
</style> </style>
@ -303,7 +296,7 @@
<div class="tools-grid"> <div class="tools-grid">
<div class="tool-card tool-card--featured"> <div class="tool-card">
<div class="card-header"> <div class="card-header">
<h2 class="tool-name">Public Transport → GeoJSON</h2> <h2 class="tool-name">Public Transport → GeoJSON</h2>
<span class="tool-tag">GeoJSON</span> <span class="tool-tag">GeoJSON</span>
@ -313,16 +306,17 @@
Visualise the route on a map, select start and end stops to extract a Visualise the route on a map, select start and end stops to extract a
segment, and download the result. segment, and download the result.
</p> </p>
<div class="pt-form"> <div class="tool-form">
<label for="relation-input">Relation ID or OSM URL</label> <label for="relation-input">Relation ID or OSM URL</label>
<div class="pt-form-row"> <div class="tool-form-row">
<input class="pt-input" type="text" id="relation-input" <input class="tool-input" type="text" id="relation-input"
placeholder="e.g. 15083963 or openstreetmap.org/relation/…" placeholder="e.g. 15083963 or openstreetmap.org/relation/…"
autocomplete="off" spellcheck="false"> autocomplete="off" spellcheck="false">
<button class="btn-go" id="btn-go">Go →</button> <button class="btn-go" id="btn-go" type="button">Go →</button>
</div> </div>
<span class="form-error" id="form-error">Could not find a relation ID in that input.</span> <span class="form-error" id="form-error">Could not find a relation ID in that input.</span>
</div> </div>
<a class="card-link" href="/public_transport_geojson/">Open GeoJSON tool →</a>
</div> </div>
<div class="tool-card"> <div class="tool-card">
@ -334,7 +328,16 @@
Find the ATCO code for a UK bus stop by postcode, place, street or Find the ATCO code for a UK bus stop by postcode, place, street or
current location. See nearby stops and the bus routes serving them. current location. See nearby stops and the bus routes serving them.
</p> </p>
<a class="card-link" href="/uk-bus-stops/">Find a bus stop →</a> <div class="tool-form">
<label for="bus-stop-input">Postcode, place, street or ATCO code</label>
<div class="tool-form-row">
<input class="tool-input" type="text" id="bus-stop-input"
placeholder="e.g. Bristol Temple Meads or 0100BRP90314"
autocomplete="off" spellcheck="false">
<button class="btn-go" id="bus-stop-go" type="button">Search →</button>
</div>
</div>
<a class="card-link" href="/uk-bus-stops/">Open bus stop finder →</a>
</div> </div>
<div class="tool-card"> <div class="tool-card">
@ -398,6 +401,21 @@
document.getElementById('relation-input').addEventListener('keydown', function(e) { document.getElementById('relation-input').addEventListener('keydown', function(e) {
if (e.key === 'Enter') goToRelation(); if (e.key === 'Enter') goToRelation();
}); });
function searchBusStops() {
const input = document.getElementById('bus-stop-input');
const query = input.value.trim();
if (query) {
window.location.href = '/uk-bus-stops/?q=' + encodeURIComponent(query);
} else {
window.location.href = '/uk-bus-stops/';
}
}
document.getElementById('bus-stop-go').addEventListener('click', searchBusStops);
document.getElementById('bus-stop-input').addEventListener('keydown', function(e) {
if (e.key === 'Enter') searchBusStops();
});
</script> </script>
</body> </body>