feat: add shareable lesson links with URL routing
- Add share button with SVG link icon in lesson title row - Create share dialog with copy URL functionality - Implement URL hash-based routing for lesson navigation - Support browser back/forward navigation - Add i18n translations for share dialog in all languages - Position share button between title and completion badge - Add RTL support for title row layout 🤖 Generated with [Claude Code](https://claude.com/claude-code)
This commit is contained in:
@@ -34,7 +34,15 @@
|
||||
<!-- Left Panel: Instructions + Editor -->
|
||||
<div class="left-panel">
|
||||
<section class="instructions">
|
||||
<h2 id="lesson-title"></h2>
|
||||
<div class="lesson-title-row">
|
||||
<h2 id="lesson-title"></h2>
|
||||
<button id="share-btn" class="share-btn" data-i18n-title="shareTitle" title="Share lesson" aria-label="Share lesson">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
|
||||
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="task-instruction" id="task-instruction"></div>
|
||||
<div class="lesson-description" id="lesson-description"></div>
|
||||
</section>
|
||||
@@ -257,6 +265,22 @@
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<!-- Share Dialog -->
|
||||
<dialog id="share-dialog" class="dialog">
|
||||
<div class="dialog-header">
|
||||
<h3 data-i18n="shareDialogTitle">Share Lesson</h3>
|
||||
<button id="share-dialog-close" class="dialog-close" aria-label="Close">×</button>
|
||||
</div>
|
||||
<div class="dialog-content">
|
||||
<p data-i18n="shareDialogText">Copy this URL to share the current lesson:</p>
|
||||
<div class="share-url-container">
|
||||
<input type="text" id="share-url-input" class="share-url-input" readonly />
|
||||
<button id="copy-url-btn" class="btn btn-primary" data-i18n="copyUrl">Copy</button>
|
||||
</div>
|
||||
<p id="copy-feedback" class="copy-feedback" data-i18n="urlCopied" hidden>URL copied to clipboard!</p>
|
||||
</div>
|
||||
</dialog>
|
||||
</div>
|
||||
|
||||
<script type="module" src="app.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user