marijo/routes
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Cleaning up design

Browse source
This commit is contained in:
marijo 2026-06-29 07:51:42 +00:00
parent 09952fb470
commit 89b2a7171e
3 changed files with 174 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

37
app.js
View file

@ -9,6 +9,9 @@ const authSecretInput = document.querySelector("#auth-secret");
const authMessage = document.querySelector("#auth-message"); const authMessage = document.querySelector("#auth-message");
const appShell = document.querySelector("#app-shell"); const appShell = document.querySelector("#app-shell");
const logoutButton = document.querySelector("#logout-button"); const logoutButton = document.querySelector("#logout-button");
const showFormButton = document.querySelector("#show-form-button");
const formPanel = document.querySelector("#route-editor");
const formTitle = document.querySelector("#form-title");
const form = document.querySelector("#route-form"); const form = document.querySelector("#route-form");
const idInput = document.querySelector("#route-id"); const idInput = document.querySelector("#route-id");
const nameInput = document.querySelector("#route-name"); const nameInput = document.querySelector("#route-name");
@ -28,9 +31,10 @@ let routes = loadRoutes();
authForm.addEventListener("submit", authenticate); authForm.addEventListener("submit", authenticate);
logoutButton.addEventListener("click", lockApp); logoutButton.addEventListener("click", lockApp);
showFormButton.addEventListener("click", startAddRoute);
form.addEventListener("submit", saveRoute); form.addEventListener("submit", saveRoute);
cancelEditButton.addEventListener("click", resetForm); cancelEditButton.addEventListener("click", resetForm);
clearAllButton.addEventListener("click", removeAllRoutes); clearAllButton?.addEventListener("click", removeAllRoutes);
routesList.addEventListener("click", handleRouteAction); routesList.addEventListener("click", handleRouteAction);
if (sessionStorage.getItem(AUTH_SESSION_KEY) === "yes") { if (sessionStorage.getItem(AUTH_SESSION_KEY) === "yes") {
@ -85,7 +89,7 @@ function saveRoute(event) {
event.preventDefault(); event.preventDefault();
const route = { const route = {
id: idInput.value || crypto.randomUUID(), id: idInput.value || createId(),
name: nameInput.value.trim(), name: nameInput.value.trim(),
link: linkInput.value.trim(), link: linkInput.value.trim(),
date: dateInput.value, date: dateInput.value,
@ -120,7 +124,9 @@ function renderRoutes() {
routeCount.textContent = routes.length === 1 ? "1 route saved." : `${routes.length} routes saved.`; routeCount.textContent = routes.length === 1 ? "1 route saved." : `${routes.length} routes saved.`;
emptyState.classList.toggle("hidden", routes.length > 0); emptyState.classList.toggle("hidden", routes.length > 0);
clearAllButton.hidden = routes.length === 0; if (clearAllButton) {
clearAllButton.hidden = routes.length === 0;
}
for (const route of routes) { for (const route of routes) {
const card = template.content.firstElementChild.cloneNode(true); const card = template.content.firstElementChild.cloneNode(true);
@ -131,13 +137,16 @@ function renderRoutes() {
const openLink = card.querySelector(".open-link"); const openLink = card.querySelector(".open-link");
card.dataset.id = route.id; card.dataset.id = route.id;
meta.textContent = route.date ? formatDate(route.date) : "No date"; meta.textContent = route.date ? formatDate(route.date) : "";
meta.hidden = !route.date;
title.textContent = route.name; title.textContent = route.name;
title.href = route.link; title.href = route.link;
openLink.href = route.link; openLink.href = route.link;
description.textContent = route.description || "No description added."; description.textContent = route.description;
description.hidden = !route.description;
if (route.picture) { if (route.picture) {
image.hidden = false;
image.style.backgroundImage = `url("${cssUrlEscape(route.picture)}")`; image.style.backgroundImage = `url("${cssUrlEscape(route.picture)}")`;
} }
@ -170,7 +179,19 @@ function handleRouteAction(event) {
} }
} }
function startAddRoute() {
resetForm();
formPanel.hidden = false;
formTitle.textContent = "Add route";
saveButton.textContent = "Add route";
cancelEditButton.hidden = false;
form.scrollIntoView({ behavior: "smooth", block: "start" });
nameInput.focus();
}
function editRoute(route) { function editRoute(route) {
formPanel.hidden = false;
formTitle.textContent = "Edit route";
idInput.value = route.id; idInput.value = route.id;
nameInput.value = route.name; nameInput.value = route.name;
linkInput.value = route.link; linkInput.value = route.link;
@ -233,8 +254,14 @@ async function shareRoute(route) {
function resetForm() { function resetForm() {
form.reset(); form.reset();
idInput.value = ""; idInput.value = "";
formTitle.textContent = "Add route";
saveButton.textContent = "Add route"; saveButton.textContent = "Add route";
cancelEditButton.hidden = true; cancelEditButton.hidden = true;
formPanel.hidden = true;
}
function createId() {
return crypto.randomUUID?.() || `${Date.now()}-${Math.random().toString(16).slice(2)}`;
} }
function isValidUrl(value) { function isValidUrl(value) {

17
index.html
View file

@ -23,19 +23,15 @@
<div id="app-shell" hidden> <div id="app-shell" hidden>
<header class="hero"> <header class="hero">
<div> <h1>Routes</h1>
<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"> <div class="header-actions">
<a class="skip-link" href="#route-form">Add a route</a> <button type="button" id="show-form-button">Add route</button>
<button type="button" class="secondary" id="logout-button">Lock</button> <button type="button" class="secondary" id="logout-button">Lock</button>
</div> </div>
</header> </header>
<main class="layout"> <main class="layout">
<section class="panel form-panel" aria-labelledby="form-title"> <section id="route-editor" class="panel form-panel" aria-labelledby="form-title" hidden>
<h2 id="form-title">Add route</h2> <h2 id="form-title">Add route</h2>
<form id="route-form" autocomplete="off"> <form id="route-form" autocomplete="off">
<input type="hidden" id="route-id" /> <input type="hidden" id="route-id" />
@ -67,7 +63,7 @@
<div class="form-actions"> <div class="form-actions">
<button type="submit" id="save-button">Add route</button> <button type="submit" id="save-button">Add route</button>
<button type="button" class="secondary" id="cancel-edit" hidden>Cancel edit</button> <button type="button" class="secondary" id="cancel-edit" hidden>Cancel</button>
</div> </div>
</form> </form>
</section> </section>
@ -78,12 +74,11 @@
<h2 id="routes-title">Saved routes</h2> <h2 id="routes-title">Saved routes</h2>
<p id="route-count">No routes yet.</p> <p id="route-count">No routes yet.</p>
</div> </div>
<button type="button" class="secondary danger" id="clear-all" hidden>Remove all</button>
</div> </div>
<div id="empty-state" class="empty-state"> <div id="empty-state" class="empty-state">
<h3>No routes saved</h3> <h3>No routes saved</h3>
<p>Add your first Google Maps route link using the form.</p> <p>Tap “Add route” to save your first map link.</p>
</div> </div>
<div id="routes-list" class="routes-list" aria-live="polite"></div> <div id="routes-list" class="routes-list" aria-live="polite"></div>
@ -93,7 +88,7 @@
<template id="route-card-template"> <template id="route-card-template">
<article class="route-card"> <article class="route-card">
<div class="route-image" aria-hidden="true"></div> <div class="route-image" aria-hidden="true" hidden></div>
<div class="route-content"> <div class="route-content">
<div class="route-meta"></div> <div class="route-meta"></div>
<h3><a class="route-title" target="_blank" rel="noopener noreferrer"></a></h3> <h3><a class="route-title" target="_blank" rel="noopener noreferrer"></a></h3>

280
styles.css
View file

@ -1,30 +1,31 @@
:root { :root {
color-scheme: light dark; color-scheme: light dark;
--bg: #f5f7fb; --bg: #f7f8fb;
--panel: #ffffff; --panel: #ffffff;
--text: #162033; --text: #111827;
--muted: #667085; --muted: #6b7280;
--border: #d8dee9; --border: #e5e7eb;
--primary: #1769e0; --primary: #1769e0;
--primary-dark: #1155b4; --primary-dark: #1155b4;
--danger: #c73636; --danger: #c73636;
--danger-dark: #9f2424; --danger-dark: #9f2424;
--shadow: 0 18px 45px rgba(22, 32, 51, 0.12); --shadow: 0 10px 28px rgba(17, 24, 39, 0.08);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
[hidden] { [hidden],
.hidden {
display: none !important; display: none !important;
} }
body { body {
margin: 0; margin: 0;
min-height: 100vh; min-height: 100vh;
background: radial-gradient(circle at top left, #dbeafe, transparent 34rem), var(--bg); background: var(--bg);
color: var(--text); color: var(--text);
} }
@ -35,43 +36,48 @@ body {
padding: 1rem; padding: 1rem;
} }
.auth-card { .panel,
width: min(100%, 430px); .route-card,
padding: 1.5rem; .empty-state {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 1rem;
box-shadow: var(--shadow);
} }
.auth-card h1 { .auth-card,
font-size: clamp(2rem, 10vw, 3.25rem); .form-panel {
}
.auth-card button {
width: 100%; width: 100%;
padding: 1rem;
} }
.auth-message { .auth-card {
min-height: 1.5rem; max-width: 420px;
margin: 0; }
color: var(--danger);
font-weight: 700; .hero,
.layout {
width: min(100%, 780px);
margin: 0 auto;
padding-inline: 1rem;
} }
.hero { .hero {
display: flex; display: flex;
align-items: end; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 1rem; gap: 0.75rem;
padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem) 1rem; padding-top: 1rem;
max-width: 1180px; padding-bottom: 0.75rem;
margin: 0 auto; position: sticky;
top: 0;
z-index: 2;
background: color-mix(in srgb, var(--bg) 92%, transparent);
backdrop-filter: blur(10px);
} }
.eyebrow { .layout {
margin: 0 0 0.35rem; padding-bottom: 2rem;
color: var(--primary);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.78rem;
} }
h1, h1,
@ -82,69 +88,74 @@ p {
} }
h1 { h1 {
font-size: clamp(2.4rem, 8vw, 5rem); margin-bottom: 0;
line-height: 0.95; font-size: clamp(1.9rem, 9vw, 3rem);
margin-bottom: 0.75rem; letter-spacing: -0.04em;
} }
h2 { h2 {
margin-bottom: 1rem; margin-bottom: 0.75rem;
font-size: 1.2rem;
}
h3 {
margin-bottom: 0.35rem;
}
.eyebrow {
margin-bottom: 0.35rem;
color: var(--primary);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
} }
.intro, .intro,
#route-count { #route-count,
.route-meta,
.route-description,
.empty-state,
.auth-message {
color: var(--muted); color: var(--muted);
}
.auth-message {
min-height: 1.4rem;
margin-bottom: 0; margin-bottom: 0;
} color: var(--danger);
.skip-link {
color: var(--primary);
font-weight: 700; font-weight: 700;
white-space: nowrap;
} }
.header-actions { .header-actions,
.form-actions,
.route-actions,
.section-heading {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.5rem;
}
.header-actions,
.route-actions,
.form-actions {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-end; justify-content: flex-end;
} }
.layout { .section-heading {
display: grid; justify-content: space-between;
grid-template-columns: minmax(280px, 390px) 1fr; margin: 1rem 0 0.75rem;
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 { form {
display: grid; display: grid;
gap: 1rem; gap: 0.8rem;
} }
label { label {
display: grid; display: grid;
gap: 0.4rem; gap: 0.35rem;
color: var(--text);
font-weight: 700; font-weight: 700;
} }
@ -152,52 +163,30 @@ input,
textarea { textarea {
width: 100%; width: 100%;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 0.8rem; border-radius: 0.75rem;
padding: 0.8rem 0.9rem; padding: 0.75rem 0.85rem;
background: var(--panel); background: var(--panel);
color: var(--text); color: var(--text);
font: inherit; font: inherit;
font-weight: 500; font-size: 16px;
} }
textarea { textarea {
resize: vertical; 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, button,
.open-link { .open-link {
border: 0; border: 0;
border-radius: 999px; border-radius: 999px;
padding: 0.72rem 1rem; padding: 0.7rem 0.95rem;
background: var(--primary); background: var(--primary);
color: #fff; color: #fff;
font: inherit; font: inherit;
font-weight: 800; font-weight: 800;
cursor: pointer;
text-decoration: none;
line-height: 1; line-height: 1;
text-decoration: none;
cursor: pointer;
} }
button:hover, button:hover,
@ -208,7 +197,7 @@ button:hover,
.secondary { .secondary {
background: transparent; background: transparent;
color: var(--primary); color: var(--primary);
border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border)); border: 1px solid var(--border);
} }
.secondary:hover { .secondary:hover {
@ -217,42 +206,44 @@ button:hover,
.danger { .danger {
color: var(--danger); color: var(--danger);
border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
} }
.danger:hover { .danger:hover {
color: #fff; color: #fff;
background: var(--danger-dark); background: var(--danger-dark);
border-color: var(--danger-dark); }
button:focus-visible,
a:focus-visible,
input:focus,
textarea:focus {
outline: 3px solid color-mix(in srgb, var(--primary) 30%, transparent);
outline-offset: 2px;
} }
.routes-list { .routes-list {
display: grid; display: grid;
gap: 1rem; gap: 0.75rem;
} }
.route-card { .route-card {
display: grid;
grid-template-columns: 180px 1fr;
overflow: hidden; overflow: hidden;
} }
.route-image { .route-image {
min-height: 180px; min-height: 130px;
background: linear-gradient(135deg, #b8d7ff, #d7f7df);
background-position: center; background-position: center;
background-size: cover; background-size: cover;
} }
.route-content { .route-content {
padding: 1.1rem; padding: 1rem;
} }
.route-meta { .route-meta {
color: var(--muted); margin-bottom: 0.25rem;
font-weight: 700;
font-size: 0.9rem; font-size: 0.9rem;
margin-bottom: 0.35rem; font-weight: 700;
} }
.route-title { .route-title {
@ -266,64 +257,65 @@ button:hover,
} }
.route-description { .route-description {
color: var(--muted); margin-bottom: 0.85rem;
white-space: pre-wrap; white-space: pre-wrap;
} }
.empty-state { .empty-state {
padding: 2rem; padding: 1.5rem 1rem;
text-align: center; text-align: center;
color: var(--muted);
} }
.empty-state h3 { .empty-state h3 {
color: var(--text); color: var(--text);
} }
.hidden { @media (max-width: 520px) {
display: none !important; .hero {
align-items: flex-start;
}
.header-actions {
max-width: 9rem;
}
.header-actions button {
padding-inline: 0.8rem;
}
.route-actions {
display: grid;
grid-template-columns: 1fr 1fr;
justify-content: stretch;
}
.route-actions > * {
text-align: center;
}
} }
@media (max-width: 820px) { @media (min-width: 700px) {
.hero, .route-card:has(.route-image:not([hidden])) {
.layout { display: grid;
display: block; grid-template-columns: 180px 1fr;
}
.skip-link {
display: inline-block;
margin-top: 1rem;
}
.form-panel {
position: static;
margin-bottom: 1.25rem;
}
.route-card {
grid-template-columns: 1fr;
} }
.route-image { .route-image {
min-height: 150px; min-height: 100%;
} }
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--bg: #0f172a; --bg: #0f172a;
--panel: #111c31; --panel: #111827;
--text: #e5eefc; --text: #eef2ff;
--muted: #a5b4c8; --muted: #a6b0c3;
--border: #2d3b55; --border: #273244;
--primary: #75a7ff; --primary: #75a7ff;
--primary-dark: #4f8df0; --primary-dark: #4f8df0;
--danger: #ff8585; --danger: #ff8585;
--danger-dark: #d95050; --danger-dark: #d95050;
--shadow: 0 18px 45px rgba(0, 0, 0, 0.35); --shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
body {
background: radial-gradient(circle at top left, #15315c, transparent 34rem), var(--bg);
} }
} }