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
-