Add sandbox='allow-scripts' to all preview iframes. This isolates
user-executed code from the parent page's localStorage (auth tokens),
cookies, and DOM. Switch from document.write() to srcdoc attribute
since sandboxed iframes can't use document.write().
Addresses SEC-1 (critical) from security audit.
- Add markdown-basics module with lessons for headings, text formatting,
lists, links, and inline code
- Integrate markdown section with blue color theme (#5b8dd9)
- Add markdown mode support in CodeEditor and LessonEngine
- Add markdown preview rendering using marked library
- Add section overview page with educational content
- Add markdown reference page with syntax guide
- Add i18n translations for 6 languages (EN, DE, PL, ES, AR, UK)
- Update router to recognize #markdown as section route
- Add all section-specific CSS styles for markdown theme
Progress System:
- Replace percentage-based progress with milestone markers (1, 5, 10, 20, 30, 50, 75, 100)
- Add visual milestone indicators with reached/current/next states
- Add celebration animation when milestones are reached
- Update progress bar to show progress toward next milestone
- Add progressTextMilestone i18n key for all 6 languages
New Lessons Activated:
- HTML Dialog (native modal dialogs)
- HTML Progress & Meter (indicator elements)
- HTML Fieldset (form grouping)
- HTML Datalist (autocomplete inputs)
This adds 10 new lessons across all 6 languages, bringing total from ~66 to ~76.
When setModules is called (e.g., during language switch), clear currentModule
and currentLesson to force fresh lookup from the new modules array. This
prevents stale module objects from the old language being used.
- Remove completion badge and reset Run button text in resetSuccessIndicators()
- Remove lesson from completed array in LessonEngine.reset()
- Update sidebar to remove completed class from lesson item
- Update progress display after reset
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Playground mode was falling through to the CSS branch, wrapping user code
in a <style> tag. This prevented HTML elements and font styles from rendering
correctly. Now playground mode is treated like HTML mode, allowing templates
with <style> blocks and HTML content to work properly.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Add module title pill above lesson title showing current category
- Enable next/prev buttons to cross module boundaries
- Automatically advance to next module when completing last lesson
- Go to last lesson of previous module when navigating back
- Add HTML mode support with new validation types (element_exists,
element_count, attribute_value, element_text, parent_child, sibling)
- Create 3 HTML lesson modules: Elements, Forms Basic, Forms Validation
- Implement side-by-side preview comparison (Your Output vs Expected)
- Add merge animation with "Perfect Match!" overlay on validation success
- Render expected output from solutionCode field in lesson JSON
- Update schema to support HTML mode and solutionCode
- Reorder modules: HTML first, then CSS, then Tailwind
- Update tests for new functionality
