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:
1 parent
069d059ef1
commit
2a0a79b19e
3 files changed
+183
No files matched your search
@@ -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>
|
||||
|
||||
|
||||
Reference in new issue
Block a user