diff --git a/bookish/static/css/style.css b/bookish/static/css/style.css index f494252..9cd4069 100644 --- a/bookish/static/css/style.css +++ b/bookish/static/css/style.css @@ -465,6 +465,134 @@ body { font-variant-numeric: tabular-nums; } +/* Help button */ +.btn-help { + width: 26px; + height: 26px; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + font-size: 0.85rem; + font-weight: 700; + color: #888; + background: #f5f5f7; + border: 1px solid #ddd; + cursor: pointer; + transition: all 0.2s; +} + +.btn-help:hover { + background: #007aff; + color: #fff; + border-color: #007aff; +} + +/* Help overlay modal */ +.help-overlay { + display: none; + position: fixed; + inset: 0; + background: rgba(0,0,0,0.35); + z-index: 200; + align-items: center; + justify-content: center; +} + +.help-overlay.open { + display: flex; +} + +.help-modal { + background: #fff; + border-radius: 14px; + width: min(440px, 90vw); + max-height: min(520px, 80vh); + display: flex; + flex-direction: column; + box-shadow: 0 12px 40px rgba(0,0,0,0.2); + overflow: hidden; +} + +.help-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 1.2rem; + border-bottom: 1px solid #eee; +} + +.help-header h3 { + margin: 0; + font-size: 1rem; + font-weight: 600; +} + +.help-body { + padding: 0.8rem 1.2rem 1.2rem; + overflow-y: auto; +} + +.help-section { + margin-bottom: 1rem; +} + +.help-section h4 { + font-size: 0.8rem; + font-weight: 600; + color: #007aff; + text-transform: uppercase; + letter-spacing: 0.04em; + margin: 0 0 0.5rem; +} + +.help-section p { + margin: 0; + font-size: 0.85rem; + color: #555; + line-height: 1.5; +} + +.help-row { + display: flex; + align-items: center; + gap: 0.4rem; + padding: 0.3rem 0; + font-size: 0.85rem; + color: #333; +} + +.help-row span:last-child { + color: #555; +} + +.help-row kbd { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 24px; + padding: 1px 6px; + font-size: 0.7rem; + font-family: inherit; + background: #f0f0f0; + border: 1px solid #d0d0d5; + border-radius: 4px; + box-shadow: 0 1px 0 #ccc; + color: #444; +} + +.help-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 22px; + height: 22px; + font-size: 0.75rem; + background: #f0f0f0; + border-radius: 4px; +} + /* Reader Layout */ .reader-container { display: flex; diff --git a/bookish/static/js/reader.js b/bookish/static/js/reader.js index 26eff62..4e1a7ca 100644 --- a/bookish/static/js/reader.js +++ b/bookish/static/js/reader.js @@ -307,6 +307,31 @@ }); } + // Help modal toggle + const helpToggle = document.getElementById("helpToggle"); + const helpOverlay = document.getElementById("helpOverlay"); + const helpClose = document.getElementById("helpClose"); + function toggleHelp(show) { + if (!helpOverlay) return; + if (show === undefined) show = !helpOverlay.classList.contains("open"); + helpOverlay.classList.toggle("open", show); + } + if (helpToggle) { + helpToggle.addEventListener("click", () => toggleHelp(true)); + } + if (helpClose) { + helpClose.addEventListener("click", () => toggleHelp(false)); + } + if (helpOverlay) { + helpOverlay.addEventListener("click", (e) => { + if (e.target === helpOverlay) toggleHelp(false); + }); + } + // Keyboard: Esc to close help + document.addEventListener("keydown", (e) => { + if (e.key === "Escape") toggleHelp(false); + }); + // Bookmark button const bookmarkToggle = document.getElementById("bookmarkToggle"); if (bookmarkToggle) { diff --git a/bookish/templates/reader.html b/bookish/templates/reader.html index 7c0c983..c0cd470 100644 --- a/bookish/templates/reader.html +++ b/bookish/templates/reader.html @@ -28,6 +28,36 @@ + + + + +
+
+
+

Aiuto e scorciatoie

+ +
+
+
+

Navigazione

+
←→Pagina precedente/successiva
+
Ctrl+BAggiungi/rimuovi segnalibro
+
Ctrl+FCerca nel libro
+
FSchermo intero
+
+
+

Lettura

+
+-Zoom avanti/indietro (testo)
+
☰Mostra/nascondi indice
+
🔖Aggiunge segnalibro alla pagina corrente
+
🌙 ☀️ 🟤Cicla tema: chiaro, scuro, seppia
+
+
+

Slider larghezza

+

Regola la larghezza dell'area di lettura dal 40% al 100% dello schermo. Utile per files con righe molto lunghe.

+
+