From 63e2ada84b53112ddc3a54996ccbeb02c0cc6cc8 Mon Sep 17 00:00:00 2001 From: 5shekel Date: Sun, 18 Jan 2026 17:22:49 +0200 Subject: [PATCH] Add help panel with keyboard shortcuts, URL deep linking, and speaker click docs --- app.js | 24 ++++++++++++++++++++---- index.html | 13 +++++++++++++ styles.css | 15 +++++++++++++++ 3 files changed, 48 insertions(+), 4 deletions(-) diff --git a/app.js b/app.js index 711b6ec..1eae688 100644 --- a/app.js +++ b/app.js @@ -10,6 +10,8 @@ const spectrogramOverlay = document.getElementById("spectrogramOverlay"); const transcriptPanel = document.getElementById("transcriptPanel"); const configToggle = document.getElementById("configToggle"); const configPanel = document.getElementById("configPanel"); +const helpToggle = document.getElementById("helpToggle"); +const helpPanel = document.getElementById("helpPanel"); const opacityRange = document.getElementById("opacityRange"); const rowsRange = document.getElementById("rowsRange"); const sizeSelect = document.getElementById("sizeSelect"); @@ -908,13 +910,27 @@ async function init() { if (configToggle && configPanel) { configToggle.addEventListener("click", () => { configPanel.classList.toggle("open"); - }); - window.addEventListener("click", (event) => { - if (configPanel.contains(event.target) || configToggle.contains(event.target)) return; - configPanel.classList.remove("open"); + helpPanel?.classList.remove("open"); }); } + if (helpToggle && helpPanel) { + helpToggle.addEventListener("click", () => { + helpPanel.classList.toggle("open"); + configPanel?.classList.remove("open"); + }); + } + + // Close panels when clicking outside + window.addEventListener("click", (event) => { + if (configPanel && !configPanel.contains(event.target) && !configToggle.contains(event.target)) { + configPanel.classList.remove("open"); + } + if (helpPanel && !helpPanel.contains(event.target) && !helpToggle.contains(event.target)) { + helpPanel.classList.remove("open"); + } + }); + if (opacityRange) { opacityRange.addEventListener("input", () => { state.transcriptOpacity = Number(opacityRange.value); diff --git a/index.html b/index.html index a757a90..0bd91d8 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,19 @@
Amuta Space Talkers
-
+ +