Cleaning up design
This commit is contained in:
parent
09952fb470
commit
89b2a7171e
3 changed files with 174 additions and 160 deletions
35
app.js
35
app.js
|
|
@ -9,6 +9,9 @@ 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 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 idInput = document.querySelector("#route-id");
|
||||
const nameInput = document.querySelector("#route-name");
|
||||
|
|
@ -28,9 +31,10 @@ let routes = loadRoutes();
|
|||
|
||||
authForm.addEventListener("submit", authenticate);
|
||||
logoutButton.addEventListener("click", lockApp);
|
||||
showFormButton.addEventListener("click", startAddRoute);
|
||||
form.addEventListener("submit", saveRoute);
|
||||
cancelEditButton.addEventListener("click", resetForm);
|
||||
clearAllButton.addEventListener("click", removeAllRoutes);
|
||||
clearAllButton?.addEventListener("click", removeAllRoutes);
|
||||
routesList.addEventListener("click", handleRouteAction);
|
||||
|
||||
if (sessionStorage.getItem(AUTH_SESSION_KEY) === "yes") {
|
||||
|
|
@ -85,7 +89,7 @@ function saveRoute(event) {
|
|||
event.preventDefault();
|
||||
|
||||
const route = {
|
||||
id: idInput.value || crypto.randomUUID(),
|
||||
id: idInput.value || createId(),
|
||||
name: nameInput.value.trim(),
|
||||
link: linkInput.value.trim(),
|
||||
date: dateInput.value,
|
||||
|
|
@ -120,7 +124,9 @@ function renderRoutes() {
|
|||
|
||||
routeCount.textContent = routes.length === 1 ? "1 route saved." : `${routes.length} routes saved.`;
|
||||
emptyState.classList.toggle("hidden", routes.length > 0);
|
||||
if (clearAllButton) {
|
||||
clearAllButton.hidden = routes.length === 0;
|
||||
}
|
||||
|
||||
for (const route of routes) {
|
||||
const card = template.content.firstElementChild.cloneNode(true);
|
||||
|
|
@ -131,13 +137,16 @@ function renderRoutes() {
|
|||
const openLink = card.querySelector(".open-link");
|
||||
|
||||
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.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) {
|
||||
image.hidden = false;
|
||||
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) {
|
||||
formPanel.hidden = false;
|
||||
formTitle.textContent = "Edit route";
|
||||
idInput.value = route.id;
|
||||
nameInput.value = route.name;
|
||||
linkInput.value = route.link;
|
||||
|
|
@ -233,8 +254,14 @@ async function shareRoute(route) {
|
|||
function resetForm() {
|
||||
form.reset();
|
||||
idInput.value = "";
|
||||
formTitle.textContent = "Add route";
|
||||
saveButton.textContent = "Add route";
|
||||
cancelEditButton.hidden = true;
|
||||
formPanel.hidden = true;
|
||||
}
|
||||
|
||||
function createId() {
|
||||
return crypto.randomUUID?.() || `${Date.now()}-${Math.random().toString(16).slice(2)}`;
|
||||
}
|
||||
|
||||
function isValidUrl(value) {
|
||||
|
|
|
|||
15
index.html
15
index.html
|
|
@ -23,19 +23,15 @@
|
|||
|
||||
<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" id="show-form-button">Add route</button>
|
||||
<button type="button" class="secondary" id="logout-button">Lock</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<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>
|
||||
<form id="route-form" autocomplete="off">
|
||||
<input type="hidden" id="route-id" />
|
||||
|
|
@ -67,7 +63,7 @@
|
|||
|
||||
<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>
|
||||
<button type="button" class="secondary" id="cancel-edit" hidden>Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
|
@ -78,12 +74,11 @@
|
|||
<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>
|
||||
<p>Tap “Add route” to save your first map link.</p>
|
||||
</div>
|
||||
|
||||
<div id="routes-list" class="routes-list" aria-live="polite"></div>
|
||||
|
|
@ -93,7 +88,7 @@
|
|||
|
||||
<template id="route-card-template">
|
||||
<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-meta"></div>
|
||||
<h3><a class="route-title" target="_blank" rel="noopener noreferrer"></a></h3>
|
||||
|
|
|
|||
280
styles.css
280
styles.css
|
|
@ -1,30 +1,31 @@
|
|||
:root {
|
||||
color-scheme: light dark;
|
||||
--bg: #f5f7fb;
|
||||
--bg: #f7f8fb;
|
||||
--panel: #ffffff;
|
||||
--text: #162033;
|
||||
--muted: #667085;
|
||||
--border: #d8dee9;
|
||||
--text: #111827;
|
||||
--muted: #6b7280;
|
||||
--border: #e5e7eb;
|
||||
--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;
|
||||
--shadow: 0 10px 28px rgba(17, 24, 39, 0.08);
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
[hidden],
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: radial-gradient(circle at top left, #dbeafe, transparent 34rem), var(--bg);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
|
|
@ -35,43 +36,48 @@ body {
|
|||
padding: 1rem;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
width: min(100%, 430px);
|
||||
padding: 1.5rem;
|
||||
.panel,
|
||||
.route-card,
|
||||
.empty-state {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 1rem;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.auth-card h1 {
|
||||
font-size: clamp(2rem, 10vw, 3.25rem);
|
||||
}
|
||||
|
||||
.auth-card button {
|
||||
.auth-card,
|
||||
.form-panel {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.auth-message {
|
||||
min-height: 1.5rem;
|
||||
margin: 0;
|
||||
color: var(--danger);
|
||||
font-weight: 700;
|
||||
.auth-card {
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.hero,
|
||||
.layout {
|
||||
width: min(100%, 780px);
|
||||
margin: 0 auto;
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem) 1rem;
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
gap: 0.75rem;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 0.75rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
background: color-mix(in srgb, var(--bg) 92%, transparent);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 0.35rem;
|
||||
color: var(--primary);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
font-size: 0.78rem;
|
||||
.layout {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
|
|
@ -82,69 +88,74 @@ p {
|
|||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.4rem, 8vw, 5rem);
|
||||
line-height: 0.95;
|
||||
margin-bottom: 0.75rem;
|
||||
margin-bottom: 0;
|
||||
font-size: clamp(1.9rem, 9vw, 3rem);
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
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,
|
||||
#route-count {
|
||||
#route-count,
|
||||
.route-meta,
|
||||
.route-description,
|
||||
.empty-state,
|
||||
.auth-message {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.auth-message {
|
||||
min-height: 1.4rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.skip-link {
|
||||
color: var(--primary);
|
||||
color: var(--danger);
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
.header-actions,
|
||||
.form-actions,
|
||||
.route-actions,
|
||||
.section-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.header-actions,
|
||||
.route-actions,
|
||||
.form-actions {
|
||||
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;
|
||||
.section-heading {
|
||||
justify-content: space-between;
|
||||
margin: 1rem 0 0.75rem;
|
||||
}
|
||||
|
||||
form {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
color: var(--text);
|
||||
gap: 0.35rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
|
@ -152,52 +163,30 @@ input,
|
|||
textarea {
|
||||
width: 100%;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.8rem;
|
||||
padding: 0.8rem 0.9rem;
|
||||
border-radius: 0.75rem;
|
||||
padding: 0.75rem 0.85rem;
|
||||
background: var(--panel);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
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;
|
||||
padding: 0.7rem 0.95rem;
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
font: inherit;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
|
|
@ -208,7 +197,7 @@ button:hover,
|
|||
.secondary {
|
||||
background: transparent;
|
||||
color: var(--primary);
|
||||
border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.secondary:hover {
|
||||
|
|
@ -217,42 +206,44 @@ button:hover,
|
|||
|
||||
.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);
|
||||
}
|
||||
|
||||
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 {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.route-card {
|
||||
display: grid;
|
||||
grid-template-columns: 180px 1fr;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.route-image {
|
||||
min-height: 180px;
|
||||
background: linear-gradient(135deg, #b8d7ff, #d7f7df);
|
||||
min-height: 130px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.route-content {
|
||||
padding: 1.1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.route-meta {
|
||||
color: var(--muted);
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.35rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.route-title {
|
||||
|
|
@ -266,64 +257,65 @@ button:hover,
|
|||
}
|
||||
|
||||
.route-description {
|
||||
color: var(--muted);
|
||||
margin-bottom: 0.85rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 2rem;
|
||||
padding: 1.5rem 1rem;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
@media (max-width: 520px) {
|
||||
.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) {
|
||||
.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;
|
||||
@media (min-width: 700px) {
|
||||
.route-card:has(.route-image:not([hidden])) {
|
||||
display: grid;
|
||||
grid-template-columns: 180px 1fr;
|
||||
}
|
||||
|
||||
.route-image {
|
||||
min-height: 150px;
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: #0f172a;
|
||||
--panel: #111c31;
|
||||
--text: #e5eefc;
|
||||
--muted: #a5b4c8;
|
||||
--border: #2d3b55;
|
||||
--panel: #111827;
|
||||
--text: #eef2ff;
|
||||
--muted: #a6b0c3;
|
||||
--border: #273244;
|
||||
--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);
|
||||
--shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue