feat: add help button (?) in reader toolbar with shortcuts modal

- circled ? button in toolbar-right opens modal
- modal shows keyboard nav (arrows), bookmark (Ctrl+B),
  zoom (+/-), theme toggle, fullscreen (F), search (Ctrl+F)
- Esc or click outside closes modal
- CSS: btn-help circle style + help-overlay/help-modal layout
- responsive: max-width 440px, max-height 80vh
This commit is contained in:
truetype committed 2026-07-23 07:18:33 +02:00
1 parent 069d059ef1
commit 2a0a79b19e
3 files changed
+183

No files matched your search

+30
View File
@@ -28,6 +28,36 @@
<button class="tool-btn" id="searchToggle" title="Cerca">🔍</button>
<button class="tool-btn" id="bookmarkToggle" title="Segnalibro (Ctrl+B)">🔖</button>
<button class="tool-btn" id="fullscreenToggle" title="Schermo intero">⛶</button>
<button class="tool-btn btn-help" id="helpToggle" title="Aiuto e scorciatoie">?</button>
</div>
</div>
<div class="help-overlay" id="helpOverlay">
<div class="help-modal">
<div class="help-header">
<h3>Aiuto e scorciatoie</h3>
<button class="tool-btn" id="helpClose">✕</button>
</div>
<div class="help-body">
<div class="help-section">
<h4>Navigazione</h4>
<div class="help-row"><kbd>←</kbd><kbd>→</kbd><span>Pagina precedente/successiva</span></div>
<div class="help-row"><kbd>Ctrl</kbd>+<kbd>B</kbd><span>Aggiungi/rimuovi segnalibro</span></div>
<div class="help-row"><kbd>Ctrl</kbd>+<kbd>F</kbd><span>Cerca nel libro</span></div>
<div class="help-row"><kbd>F</kbd><span>Schermo intero</span></div>
</div>
<div class="help-section">
<h4>Lettura</h4>
<div class="help-row"><kbd>+</kbd><kbd>-</kbd><span>Zoom avanti/indietro (testo)</span></div>
<div class="help-row"><span class="help-icon">☰</span><span>Mostra/nascondi indice</span></div>
<div class="help-row"><span class="help-icon">🔖</span><span>Aggiunge segnalibro alla pagina corrente</span></div>
<div class="help-row"><span class="help-icon">🌙 ☀️ 🟤</span><span>Cicla tema: chiaro, scuro, seppia</span></div>
</div>
<div class="help-section">
<h4>Slider larghezza</h4>
<p>Regola la larghezza dell'area di lettura dal 40% al 100% dello schermo. Utile per files con righe molto lunghe.</p>
</div>
</div>
</div>
</div>