From 5725ed3ebcd8179548fc2243ff9f7dcce1681ffd Mon Sep 17 00:00:00 2001 From: teahubxyz Date: Wed, 21 Oct 2026 03:15:46 +0000 Subject: [PATCH] =?UTF-8?q?station=20sheet:=20an=20=C3=97=20in=20the=20top?= =?UTF-8?q?=20right=20instead=20of=20a=20CLOSE=20button?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Fable 5.1 Claude-Session: https://claude.ai/code/session_01K6897PWcUEwHiqZMcVnNF6 --- index.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index b9f1352..3562fea 100644 --- a/index.html +++ b/index.html @@ -82,6 +82,8 @@ input,textarea{font:inherit;color:inherit} #stationSheet,#picker,#tapePick{z-index:6} #stationSheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(480px,100%);background:var(--card);border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;padding:14px 14px calc(14px + env(safe-area-inset-bottom));z-index:6;box-shadow:0 -20px 60px rgba(0,0,0,.6)} #stationSheet h4{font:600 10px var(--font);letter-spacing:.2em;color:var(--dim);margin:0 0 10px} +#stationSheet .x{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--dim);font:300 22px var(--sans);line-height:1} +#stationSheet .x:hover{color:var(--ink);background:var(--bg)} #stationSheet label{display:block;color:var(--dim);font-size:12px;margin:8px 0 4px} #stationSheet input{width:100%;background:var(--field);border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:none} #stationSheet .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} @@ -853,6 +855,8 @@ async function stationSheet(id) { const s = (await db.all("stations")).find((x) => x.id === id); if (!s) return; const p = $("#stationSheet"); p.innerHTML = ""; p.append(Object.assign(document.createElement("h4"), { textContent: "STATION" })); + const x = Object.assign(document.createElement("button"), { className: "x", textContent: "×", title: "close" }); x.setAttribute("aria-label", "close"); + x.addEventListener("click", () => p.classList.add("hidden")); p.append(x); const name = document.createElement("input"); name.value = s.name || ""; name.placeholder = s.seed; name.maxLength = 60; p.append(Object.assign(document.createElement("label"), { textContent: "name" }), name, Object.assign(document.createElement("label"), { textContent: "seed · " + s.seed + " · " + (s.played || 0) + " tracks" })); const lookRow = document.createElement("div"); lookRow.className = "row"; lookRow.style.marginTop = "8px"; @@ -908,8 +912,7 @@ async function stationSheet(id) { if (state.stationId === id) { state.audio.pause(); state.playing = false; setPlayIcon(); state.current = null; state.nextJob = null; state.stationId = ""; state.seed = ""; state.station = ""; $("#player").classList.add("hidden"); $("#seed").classList.remove("hidden"); $("#nowRow").classList.add("hidden"); setUrl(); } p.classList.add("hidden"); listStations().catch(() => {}); toast("Station deleted."); }); - const close = Object.assign(document.createElement("button"), { textContent: "CLOSE" }); close.addEventListener("click", () => p.classList.add("hidden")); - row.append(save, reset, del, close); p.append(row); p.classList.remove("hidden"); name.focus({ preventScroll: true }); + row.append(save, reset, del); p.append(row); p.classList.remove("hidden"); name.focus({ preventScroll: true }); } $("#stationName").addEventListener("click", () => { if (state.stationId && !state.tape) stationSheet(state.stationId); }); /* links: the URL follows the station (#seed); a share link carries the current track's sheet music (?t=) so the same