diff --git a/app/ui-tarot-lightbox.js b/app/ui-tarot-lightbox.js
index 16e14f1..fa8e35b 100644
--- a/app/ui-tarot-lightbox.js
+++ b/app/ui-tarot-lightbox.js
@@ -8,6 +8,8 @@
let settingsPanelEl = null;
let helpButtonEl = null;
let helpPanelEl = null;
+ let helpTitleEl = null;
+ let helpListEl = null;
let compareButtonEl = null;
let deckCompareButtonEl = null;
let mobileInfoButtonEl = null;
@@ -115,6 +117,50 @@
return Number(window.innerWidth) <= 900;
}
+ function getLightboxHelpTitle() {
+ return isCompactLightboxLayout() ? "Lightbox Gestures" : "Lightbox Shortcuts";
+ }
+
+ function getLightboxHelpLines() {
+ if (isCompactLightboxLayout()) {
+ return [
+ "Pinch the card: zoom in or out",
+ "Drag while zoomed: pan around the card",
+ "Tap the side arrows: move between cards, or move the overlay card in compare mode",
+ "Tap Overlay: choose a second card to compare",
+ "Tap Compare: show the same card from other registered decks",
+ "Tap outside the card or use Close Lightbox to exit"
+ ];
+ }
+
+ return [
+ "Click card: toggle zoom at the clicked point",
+ "Left / Right: move cards, or move overlay card in compare mode",
+ "Overlay: pick a second card to compare",
+ "Compare: show the same card from other registered decks",
+ "Space: swap base and overlay cards",
+ "R: rotate base card, or rotate overlay card in compare mode",
+ "+ / -: zoom in or out in steps",
+ "W A S D: pan while zoomed",
+ "Escape or backdrop click: close"
+ ];
+ }
+
+ function syncHelpContent() {
+ if (!helpTitleEl || !helpListEl) {
+ return;
+ }
+
+ helpTitleEl.textContent = getLightboxHelpTitle();
+ helpListEl.replaceChildren();
+
+ getLightboxHelpLines().forEach((line) => {
+ const lineEl = document.createElement("div");
+ lineEl.textContent = line;
+ helpListEl.appendChild(lineEl);
+ });
+ }
+
function hasSequenceNavigation() {
return Array.isArray(lightboxState.sequenceIds)
&& lightboxState.sequenceIds.length > 1
@@ -2065,6 +2111,8 @@
return;
}
+ syncHelpContent();
+
const canShow = lightboxState.isOpen && !zoomed;
helpButtonEl.style.display = canShow ? "inline-flex" : "none";
helpPanelEl.style.display = canShow && lightboxState.helpOpen ? "flex" : "none";
@@ -2688,32 +2736,18 @@
helpPanelEl.style.pointerEvents = "auto";
helpPanelEl.style.zIndex = "2";
- const helpTitleEl = document.createElement("div");
+ helpTitleEl = document.createElement("div");
helpTitleEl.textContent = "Lightbox Shortcuts";
helpTitleEl.style.font = "700 13px/1.3 sans-serif";
- const helpListEl = document.createElement("div");
+ helpListEl = document.createElement("div");
helpListEl.style.display = "flex";
helpListEl.style.flexDirection = "column";
helpListEl.style.gap = "6px";
helpListEl.style.font = "500 12px/1.4 sans-serif";
helpListEl.style.color = "rgba(226, 232, 240, 0.92)";
- [
- "Click card: toggle zoom at the clicked point",
- "Left / Right: move cards, or move overlay card in compare mode",
- "Overlay: pick a second card to compare",
- "Compare: show the same card from other registered decks",
- "Space: swap base and overlay cards",
- "R: rotate base card, or rotate overlay card in compare mode",
- "+ / -: zoom in or out in steps",
- "W A S D: pan while zoomed",
- "Escape or backdrop click: close"
- ].forEach((line) => {
- const lineEl = document.createElement("div");
- lineEl.textContent = line;
- helpListEl.appendChild(lineEl);
- });
+ syncHelpContent();
helpPanelEl.append(helpTitleEl, helpListEl);
@@ -2852,6 +2886,22 @@
exportButtonEl.style.cursor = "pointer";
exportButtonEl.style.backdropFilter = "blur(12px)";
+ const closeLightboxButtonEl = document.createElement("button");
+ closeLightboxButtonEl.type = "button";
+ closeLightboxButtonEl.textContent = "Close Lightbox";
+ closeLightboxButtonEl.style.display = "inline-flex";
+ closeLightboxButtonEl.style.alignItems = "center";
+ closeLightboxButtonEl.style.justifyContent = "center";
+ closeLightboxButtonEl.style.width = "100%";
+ closeLightboxButtonEl.style.border = "1px solid rgba(248, 250, 252, 0.18)";
+ closeLightboxButtonEl.style.background = "rgba(127, 29, 29, 0.72)";
+ closeLightboxButtonEl.style.color = "#f8fafc";
+ closeLightboxButtonEl.style.borderRadius = "999px";
+ closeLightboxButtonEl.style.padding = "10px 14px";
+ closeLightboxButtonEl.style.font = "600 13px/1.1 sans-serif";
+ closeLightboxButtonEl.style.cursor = "pointer";
+ closeLightboxButtonEl.style.backdropFilter = "blur(12px)";
+
deckComparePanelEl = document.createElement("div");
deckComparePanelEl.style.position = "fixed";
deckComparePanelEl.style.top = "24px";
@@ -2963,7 +3013,8 @@
exportButtonEl,
helpButtonEl,
zoomControlEl,
- opacityControlEl
+ opacityControlEl,
+ closeLightboxButtonEl
);
toolbarEl.append(settingsButtonEl);
@@ -3535,6 +3586,11 @@
event.stopPropagation();
await exportCurrentLightboxView();
});
+ closeLightboxButtonEl.addEventListener("click", (event) => {
+ event.preventDefault();
+ event.stopPropagation();
+ close();
+ });
opacitySliderEl.addEventListener("change", restoreLightboxFocus);
opacitySliderEl.addEventListener("pointerup", restoreLightboxFocus);
mobilePrevButtonEl.addEventListener("click", (event) => {
diff --git a/index.html b/index.html
index 429e5cc..8afe813 100644
--- a/index.html
+++ b/index.html
@@ -1331,7 +1331,7 @@
-
+