Initial routes webpage
This commit is contained in:
commit
0b901a8a9f
5 changed files with 732 additions and 0 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
AGENTS.md
|
||||||
22
README.md
Normal file
22
README.md
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
# Routes
|
||||||
|
|
||||||
|
A small static webpage for saving and sharing Google Maps route links.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- Add routes with name and Google Maps link (mandatory)
|
||||||
|
- Optional date, description, and picture URL
|
||||||
|
- Click route names or **Open map** to open saved Google Maps links
|
||||||
|
- Edit, remove, share, or copy route links
|
||||||
|
- Data is stored locally in the browser with `localStorage`
|
||||||
|
- Simple secret gate before the app opens
|
||||||
|
|
||||||
|
Open `index.html` in a browser to use it.
|
||||||
|
|
||||||
|
## Secret
|
||||||
|
|
||||||
|
The current demo secret is `change-me`. Before publishing, replace `AUTH_SECRET_HASH` in `app.js` with the SHA-256 hash of your real secret. This is a simple client-side gate, not strong server-side security.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
printf 'your-secret' | sha256sum
|
||||||
|
```
|
||||||
271
app.js
Normal file
271
app.js
Normal file
|
|
@ -0,0 +1,271 @@
|
||||||
|
const STORAGE_KEY = "routes.links.v1";
|
||||||
|
const AUTH_SESSION_KEY = "routes.authenticated.v1";
|
||||||
|
// SHA-256 hash of the secret. Default secret is "change-me".
|
||||||
|
// Replace this hash before publishing. Generate a new one with:
|
||||||
|
// printf 'your-secret' | sha256sum
|
||||||
|
const AUTH_SECRET_HASH = "e2186dbdb1bb4193608605e84f33208765b5693b55edd4f730a719a100eeea6f";
|
||||||
|
|
||||||
|
const authScreen = document.querySelector("#auth-screen");
|
||||||
|
const authForm = document.querySelector("#auth-form");
|
||||||
|
const authSecretInput = document.querySelector("#auth-secret");
|
||||||
|
const authMessage = document.querySelector("#auth-message");
|
||||||
|
const appShell = document.querySelector("#app-shell");
|
||||||
|
const logoutButton = document.querySelector("#logout-button");
|
||||||
|
const form = document.querySelector("#route-form");
|
||||||
|
const idInput = document.querySelector("#route-id");
|
||||||
|
const nameInput = document.querySelector("#route-name");
|
||||||
|
const linkInput = document.querySelector("#route-link");
|
||||||
|
const dateInput = document.querySelector("#route-date");
|
||||||
|
const pictureInput = document.querySelector("#route-picture");
|
||||||
|
const descriptionInput = document.querySelector("#route-description");
|
||||||
|
const saveButton = document.querySelector("#save-button");
|
||||||
|
const cancelEditButton = document.querySelector("#cancel-edit");
|
||||||
|
const clearAllButton = document.querySelector("#clear-all");
|
||||||
|
const routeCount = document.querySelector("#route-count");
|
||||||
|
const emptyState = document.querySelector("#empty-state");
|
||||||
|
const routesList = document.querySelector("#routes-list");
|
||||||
|
const template = document.querySelector("#route-card-template");
|
||||||
|
|
||||||
|
let routes = loadRoutes();
|
||||||
|
|
||||||
|
authForm.addEventListener("submit", authenticate);
|
||||||
|
logoutButton.addEventListener("click", lockApp);
|
||||||
|
form.addEventListener("submit", saveRoute);
|
||||||
|
cancelEditButton.addEventListener("click", resetForm);
|
||||||
|
clearAllButton.addEventListener("click", removeAllRoutes);
|
||||||
|
routesList.addEventListener("click", handleRouteAction);
|
||||||
|
|
||||||
|
if (sessionStorage.getItem(AUTH_SESSION_KEY) === "yes") {
|
||||||
|
unlockApp();
|
||||||
|
} else {
|
||||||
|
lockApp();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function authenticate(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
authMessage.textContent = "";
|
||||||
|
|
||||||
|
let hash;
|
||||||
|
try {
|
||||||
|
hash = await sha256(authSecretInput.value.trim());
|
||||||
|
} catch {
|
||||||
|
authMessage.textContent = "Authentication needs HTTPS, localhost, or a modern browser.";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (hash !== AUTH_SECRET_HASH) {
|
||||||
|
authMessage.textContent = "Wrong secret.";
|
||||||
|
authSecretInput.select();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
sessionStorage.setItem(AUTH_SESSION_KEY, "yes");
|
||||||
|
unlockApp();
|
||||||
|
}
|
||||||
|
|
||||||
|
function unlockApp() {
|
||||||
|
authScreen.hidden = true;
|
||||||
|
appShell.hidden = false;
|
||||||
|
authSecretInput.value = "";
|
||||||
|
authMessage.textContent = "";
|
||||||
|
renderRoutes();
|
||||||
|
}
|
||||||
|
|
||||||
|
function lockApp() {
|
||||||
|
sessionStorage.removeItem(AUTH_SESSION_KEY);
|
||||||
|
appShell.hidden = true;
|
||||||
|
authScreen.hidden = false;
|
||||||
|
resetForm();
|
||||||
|
authSecretInput.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function sha256(value) {
|
||||||
|
const data = new TextEncoder().encode(value);
|
||||||
|
const digest = await crypto.subtle.digest("SHA-256", data);
|
||||||
|
return [...new Uint8Array(digest)].map((byte) => byte.toString(16).padStart(2, "0")).join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadRoutes() {
|
||||||
|
try {
|
||||||
|
return JSON.parse(localStorage.getItem(STORAGE_KEY)) ?? [];
|
||||||
|
} catch {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function storeRoutes() {
|
||||||
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(routes));
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveRoute(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
const route = {
|
||||||
|
id: idInput.value || crypto.randomUUID(),
|
||||||
|
name: nameInput.value.trim(),
|
||||||
|
link: linkInput.value.trim(),
|
||||||
|
date: dateInput.value,
|
||||||
|
picture: pictureInput.value.trim(),
|
||||||
|
description: descriptionInput.value.trim(),
|
||||||
|
updatedAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!route.name || !route.link) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isValidUrl(route.link) || (route.picture && !isValidUrl(route.picture))) {
|
||||||
|
alert("Please enter valid URLs for the map link and picture.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const existingIndex = routes.findIndex((item) => item.id === route.id);
|
||||||
|
if (existingIndex >= 0) {
|
||||||
|
routes[existingIndex] = route;
|
||||||
|
} else {
|
||||||
|
routes.unshift(route);
|
||||||
|
}
|
||||||
|
|
||||||
|
storeRoutes();
|
||||||
|
renderRoutes();
|
||||||
|
resetForm();
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderRoutes() {
|
||||||
|
routesList.innerHTML = "";
|
||||||
|
|
||||||
|
routeCount.textContent = routes.length === 1 ? "1 route saved." : `${routes.length} routes saved.`;
|
||||||
|
emptyState.classList.toggle("hidden", routes.length > 0);
|
||||||
|
clearAllButton.hidden = routes.length === 0;
|
||||||
|
|
||||||
|
for (const route of routes) {
|
||||||
|
const card = template.content.firstElementChild.cloneNode(true);
|
||||||
|
const image = card.querySelector(".route-image");
|
||||||
|
const meta = card.querySelector(".route-meta");
|
||||||
|
const title = card.querySelector(".route-title");
|
||||||
|
const description = card.querySelector(".route-description");
|
||||||
|
const openLink = card.querySelector(".open-link");
|
||||||
|
|
||||||
|
card.dataset.id = route.id;
|
||||||
|
meta.textContent = route.date ? formatDate(route.date) : "No date";
|
||||||
|
title.textContent = route.name;
|
||||||
|
title.href = route.link;
|
||||||
|
openLink.href = route.link;
|
||||||
|
description.textContent = route.description || "No description added.";
|
||||||
|
|
||||||
|
if (route.picture) {
|
||||||
|
image.style.backgroundImage = `url("${cssUrlEscape(route.picture)}")`;
|
||||||
|
}
|
||||||
|
|
||||||
|
routesList.append(card);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleRouteAction(event) {
|
||||||
|
const button = event.target.closest("button");
|
||||||
|
if (!button) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const card = button.closest(".route-card");
|
||||||
|
const route = routes.find((item) => item.id === card?.dataset.id);
|
||||||
|
if (!route) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (button.classList.contains("edit-route")) {
|
||||||
|
editRoute(route);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (button.classList.contains("remove-route")) {
|
||||||
|
removeRoute(route.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (button.classList.contains("share-route")) {
|
||||||
|
shareRoute(route);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function editRoute(route) {
|
||||||
|
idInput.value = route.id;
|
||||||
|
nameInput.value = route.name;
|
||||||
|
linkInput.value = route.link;
|
||||||
|
dateInput.value = route.date;
|
||||||
|
pictureInput.value = route.picture;
|
||||||
|
descriptionInput.value = route.description;
|
||||||
|
saveButton.textContent = "Save changes";
|
||||||
|
cancelEditButton.hidden = false;
|
||||||
|
form.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||||
|
nameInput.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeRoute(id) {
|
||||||
|
const route = routes.find((item) => item.id === id);
|
||||||
|
if (!route || !confirm(`Remove "${route.name}"?`)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
routes = routes.filter((item) => item.id !== id);
|
||||||
|
storeRoutes();
|
||||||
|
renderRoutes();
|
||||||
|
if (idInput.value === id) {
|
||||||
|
resetForm();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeAllRoutes() {
|
||||||
|
if (!routes.length || !confirm("Remove all saved routes?")) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
routes = [];
|
||||||
|
storeRoutes();
|
||||||
|
renderRoutes();
|
||||||
|
resetForm();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function shareRoute(route) {
|
||||||
|
const shareData = {
|
||||||
|
title: route.name,
|
||||||
|
text: route.description || route.name,
|
||||||
|
url: route.link,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (navigator.share) {
|
||||||
|
try {
|
||||||
|
await navigator.share(shareData);
|
||||||
|
return;
|
||||||
|
} catch (error) {
|
||||||
|
if (error.name === "AbortError") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
await navigator.clipboard.writeText(route.link);
|
||||||
|
alert("Route link copied to clipboard.");
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetForm() {
|
||||||
|
form.reset();
|
||||||
|
idInput.value = "";
|
||||||
|
saveButton.textContent = "Add route";
|
||||||
|
cancelEditButton.hidden = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isValidUrl(value) {
|
||||||
|
try {
|
||||||
|
const url = new URL(value);
|
||||||
|
return url.protocol === "http:" || url.protocol === "https:";
|
||||||
|
} catch {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDate(value) {
|
||||||
|
return new Intl.DateTimeFormat(undefined, { dateStyle: "medium" }).format(new Date(`${value}T00:00:00`));
|
||||||
|
}
|
||||||
|
|
||||||
|
function cssUrlEscape(value) {
|
||||||
|
return value.replaceAll("\\", "\\\\").replaceAll('"', '\\"');
|
||||||
|
}
|
||||||
113
index.html
Normal file
113
index.html
Normal file
|
|
@ -0,0 +1,113 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Routes</title>
|
||||||
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<section id="auth-screen" class="auth-screen" aria-labelledby="auth-title">
|
||||||
|
<form id="auth-form" class="panel auth-card" autocomplete="off">
|
||||||
|
<p class="eyebrow">Private routes</p>
|
||||||
|
<h1 id="auth-title">Enter secret</h1>
|
||||||
|
<p class="intro">This route list is available only after entering the shared secret.</p>
|
||||||
|
<label>
|
||||||
|
Secret
|
||||||
|
<input id="auth-secret" name="secret" type="password" required autofocus />
|
||||||
|
</label>
|
||||||
|
<button type="submit">Unlock</button>
|
||||||
|
<p id="auth-message" class="auth-message" role="status" aria-live="polite"></p>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div id="app-shell" hidden>
|
||||||
|
<header class="hero">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow">Google Maps route collection</p>
|
||||||
|
<h1>Routes</h1>
|
||||||
|
<p class="intro">Save, edit, open, and share your favorite Google Maps route links.</p>
|
||||||
|
</div>
|
||||||
|
<div class="header-actions">
|
||||||
|
<a class="skip-link" href="#route-form">Add a route</a>
|
||||||
|
<button type="button" class="secondary" id="logout-button">Lock</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="layout">
|
||||||
|
<section class="panel form-panel" aria-labelledby="form-title">
|
||||||
|
<h2 id="form-title">Add route</h2>
|
||||||
|
<form id="route-form" autocomplete="off">
|
||||||
|
<input type="hidden" id="route-id" />
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Name <span aria-hidden="true">*</span>
|
||||||
|
<input id="route-name" name="name" required maxlength="120" placeholder="Weekend mountain drive" />
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Google Maps link <span aria-hidden="true">*</span>
|
||||||
|
<input id="route-link" name="link" type="url" required placeholder="https://maps.app.goo.gl/..." />
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Date
|
||||||
|
<input id="route-date" name="date" type="date" />
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Picture URL
|
||||||
|
<input id="route-picture" name="picture" type="url" placeholder="https://example.com/photo.jpg" />
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Description
|
||||||
|
<textarea id="route-description" name="description" rows="5" placeholder="Notes about stops, distance, road conditions..."></textarea>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="form-actions">
|
||||||
|
<button type="submit" id="save-button">Add route</button>
|
||||||
|
<button type="button" class="secondary" id="cancel-edit" hidden>Cancel edit</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="routes-section" aria-labelledby="routes-title">
|
||||||
|
<div class="section-heading">
|
||||||
|
<div>
|
||||||
|
<h2 id="routes-title">Saved routes</h2>
|
||||||
|
<p id="route-count">No routes yet.</p>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="secondary danger" id="clear-all" hidden>Remove all</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="empty-state" class="empty-state">
|
||||||
|
<h3>No routes saved</h3>
|
||||||
|
<p>Add your first Google Maps route link using the form.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="routes-list" class="routes-list" aria-live="polite"></div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template id="route-card-template">
|
||||||
|
<article class="route-card">
|
||||||
|
<div class="route-image" aria-hidden="true"></div>
|
||||||
|
<div class="route-content">
|
||||||
|
<div class="route-meta"></div>
|
||||||
|
<h3><a class="route-title" target="_blank" rel="noopener noreferrer"></a></h3>
|
||||||
|
<p class="route-description"></p>
|
||||||
|
<div class="route-actions">
|
||||||
|
<a class="open-link" target="_blank" rel="noopener noreferrer">Open map</a>
|
||||||
|
<button type="button" class="secondary share-route">Share</button>
|
||||||
|
<button type="button" class="secondary edit-route">Edit</button>
|
||||||
|
<button type="button" class="secondary danger remove-route">Remove</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script src="app.js" defer></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
325
styles.css
Normal file
325
styles.css
Normal file
|
|
@ -0,0 +1,325 @@
|
||||||
|
:root {
|
||||||
|
color-scheme: light dark;
|
||||||
|
--bg: #f5f7fb;
|
||||||
|
--panel: #ffffff;
|
||||||
|
--text: #162033;
|
||||||
|
--muted: #667085;
|
||||||
|
--border: #d8dee9;
|
||||||
|
--primary: #1769e0;
|
||||||
|
--primary-dark: #1155b4;
|
||||||
|
--danger: #c73636;
|
||||||
|
--danger-dark: #9f2424;
|
||||||
|
--shadow: 0 18px 45px rgba(22, 32, 51, 0.12);
|
||||||
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: radial-gradient(circle at top left, #dbeafe, transparent 34rem), var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-screen {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-card {
|
||||||
|
width: min(100%, 430px);
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-card h1 {
|
||||||
|
font-size: clamp(2rem, 10vw, 3.25rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-card button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-message {
|
||||||
|
min-height: 1.5rem;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--danger);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
display: flex;
|
||||||
|
align-items: end;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem) 1rem;
|
||||||
|
max-width: 1180px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
margin: 0 0 0.35rem;
|
||||||
|
color: var(--primary);
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
p {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: clamp(2.4rem, 8vw, 5rem);
|
||||||
|
line-height: 0.95;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro,
|
||||||
|
#route-count {
|
||||||
|
color: var(--muted);
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skip-link {
|
||||||
|
color: var(--primary);
|
||||||
|
font-weight: 700;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(280px, 390px) 1fr;
|
||||||
|
gap: 1.5rem;
|
||||||
|
max-width: 1180px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1rem clamp(1rem, 4vw, 3rem) 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel,
|
||||||
|
.route-card,
|
||||||
|
.empty-state {
|
||||||
|
background: color-mix(in srgb, var(--panel) 94%, transparent);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 1.25rem;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-panel {
|
||||||
|
padding: 1.25rem;
|
||||||
|
align-self: start;
|
||||||
|
position: sticky;
|
||||||
|
top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.4rem;
|
||||||
|
color: var(--text);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
padding: 0.8rem 0.9rem;
|
||||||
|
background: var(--panel);
|
||||||
|
color: var(--text);
|
||||||
|
font: inherit;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus,
|
||||||
|
textarea:focus,
|
||||||
|
button:focus-visible,
|
||||||
|
a:focus-visible {
|
||||||
|
outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-actions,
|
||||||
|
.route-actions,
|
||||||
|
.section-heading {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.65rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-heading {
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
.open-link {
|
||||||
|
border: 0;
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 0.72rem 1rem;
|
||||||
|
background: var(--primary);
|
||||||
|
color: #fff;
|
||||||
|
font: inherit;
|
||||||
|
font-weight: 800;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover,
|
||||||
|
.open-link:hover {
|
||||||
|
background: var(--primary-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--primary);
|
||||||
|
border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary:hover {
|
||||||
|
background: color-mix(in srgb, var(--primary) 10%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.danger {
|
||||||
|
color: var(--danger);
|
||||||
|
border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
|
||||||
|
}
|
||||||
|
|
||||||
|
.danger:hover {
|
||||||
|
color: #fff;
|
||||||
|
background: var(--danger-dark);
|
||||||
|
border-color: var(--danger-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.routes-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-card {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 180px 1fr;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-image {
|
||||||
|
min-height: 180px;
|
||||||
|
background: linear-gradient(135deg, #b8d7ff, #d7f7df);
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-content {
|
||||||
|
padding: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-meta {
|
||||||
|
color: var(--muted);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin-bottom: 0.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-title {
|
||||||
|
color: var(--text);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-title:hover {
|
||||||
|
color: var(--primary);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-description {
|
||||||
|
color: var(--muted);
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state h3 {
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 820px) {
|
||||||
|
.hero,
|
||||||
|
.layout {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skip-link {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-panel {
|
||||||
|
position: static;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-card {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-image {
|
||||||
|
min-height: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--bg: #0f172a;
|
||||||
|
--panel: #111c31;
|
||||||
|
--text: #e5eefc;
|
||||||
|
--muted: #a5b4c8;
|
||||||
|
--border: #2d3b55;
|
||||||
|
--primary: #75a7ff;
|
||||||
|
--primary-dark: #4f8df0;
|
||||||
|
--danger: #ff8585;
|
||||||
|
--danger-dark: #d95050;
|
||||||
|
--shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: radial-gradient(circle at top left, #15315c, transparent 34rem), var(--bg);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue