commit 0b901a8a9f01c3d6029931de5965fab62464d90c
Author: marijo <marijo@novosel.dk>
Date:   Mon Jun 29 07:36:10 2026 +0000

    Initial routes webpage

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c317064
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+AGENTS.md
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..d7465ff
--- /dev/null
+++ b/README.md
@@ -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
+```
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..6e848c3
--- /dev/null
+++ b/app.js
@@ -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('"', '\\"');
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..bab6ad8
--- /dev/null
+++ b/index.html
@@ -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>
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..c454262
--- /dev/null
+++ b/styles.css
@@ -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);
+  }
+}