Ohjeet: screenshot-upload paste & drag-drop + kuva-lightbox

Screenshottien lisääminen ohjeisiin nyt helpompaa:
- Ctrl+V / Cmd+V: liitä kuvakaappaus suoraan leikepöydältä editoriin
- Drag & drop: raahaa kuvatiedostoja suoraan textarea-editoriin
- Upload-placeholder näkyy latauksen aikana (![Ladataan: ...]())
- Vihjeet editorin alla kertovat käytettävissä olevat tavat
- Kuva-lightbox: klikkaa kuvaa lukunäkymässä → avautuu isona
- Kuvien hover-efekti (zoom-in kursori, kevyt varjo)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-11 12:48:21 +02:00
parent 9cb2eeeb62
commit 42b815116b
3 changed files with 91 additions and 18 deletions

View File

@@ -412,8 +412,9 @@
<span style="flex:1;"></span>
<button type="button" class="guide-tb-btn" id="btn-guide-preview-toggle">Esikatselu</button>
</div>
<textarea id="guide-form-content" rows="20" style="font-family:'SF Mono',Monaco,Consolas,monospace;font-size:0.88rem;line-height:1.6;resize:vertical;min-height:300px;" placeholder="Kirjoita Markdown-muodossa..."></textarea>
<textarea id="guide-form-content" rows="20" style="font-family:'SF Mono',Monaco,Consolas,monospace;font-size:0.88rem;line-height:1.6;resize:vertical;min-height:300px;" placeholder="Kirjoita Markdown-muodossa...&#10;&#10;Vinkki: Liitä kuvakaappaus suoraan Ctrl+V / ⌘V tai raahaa kuvatiedosto tähän"></textarea>
<div id="guide-preview-pane" class="guide-content" style="display:none;padding:1rem;border:2px solid #e0e0e0;border-radius:8px;min-height:300px;background:#fafbfc;"></div>
<div style="font-size:0.78rem;color:#999;margin-top:4px;">📋 Liitä screenshot: Ctrl+V &nbsp;|&nbsp; 📁 Raahaa kuva editoriin &nbsp;|&nbsp; 📷 Tai käytä Kuva-nappia</div>
</div>
<label style="display:flex;align-items:center;gap:0.5rem;margin:0.75rem 0;font-size:0.9rem;cursor:pointer;">
<input type="checkbox" id="guide-form-pinned"> Kiinnitetty (näkyy aina listauksen alussa)