Commit Graph

15 Commits

Author SHA1 Message Date
42e9d06705 fix: ensure preview iframe html/body have min-height 100% 2025-12-30 16:29:49 +01:00
8949d5e709 feat: add module pill indicator and cross-module navigation
- 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
2025-12-25 15:25:39 +01:00
34659a1c85 feat: add undo/redo/reset editor tools with keyboard shortcuts
- Add history extension to CodeMirror for undo/redo support
- Ctrl+Z for undo, Ctrl+Shift+Z for redo now work
- Add toolbar buttons: ↶ Undo, ↷ Redo, ⟲ Reset
- Reset button restores editor to initial lesson code
- Add .btn-icon and .editor-tools CSS styles
2025-12-23 23:14:32 +01:00
8ee6f3dd0a fix: resolve initialization bugs breaking level indicator and expected preview
- Fix renderLesson to handle null inputEl (CodeMirror replaces textarea)
- Fix renderExpectedPreview to use 'solution' property instead of 'solutionCode'
- These fixes restore level indicator, expected preview, and auto-run functionality
2025-12-22 10:04:41 +01:00
0169c8c9a9 fix: use One Dark theme for CodeMirror syntax highlighting
- Replace custom highlight styles with @codemirror/theme-one-dark
- Cleaner implementation with official CodeMirror theme
- Keep custom font and padding overrides
2025-12-22 01:17:10 +01:00
238853d2e1 feat: add CodeMirror 6 editor with Emmet support
- Replace textarea with CodeMirror 6 for syntax highlighting
- Add Emmet abbreviation expansion (Tab to expand)
- Support HTML and CSS language modes with autocomplete
- Add dark theme matching app design
- Tab indentation with Shift-Tab for outdent
- Update help modal with Emmet shortcuts
2025-12-21 23:37:14 +01:00
50c4d51523 feat: add HTML lessons mode and side-by-side comparison UI
- 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
2025-12-21 22:12:00 +01:00
Michael Czechowski
671b6cc813 refactor: clean up unused lesson imports and improve code consistency 2025-06-10 23:45:46 +02:00
Michael Czechowski
7c9daa413c feat: enhance LessonEngine to manage user progress and code storage 2025-06-05 23:31:13 +02:00
10fce10033 feat: implement tailwind validations and basic example 2025-06-01 22:34:55 +02:00
Michael Czechowski
1f50963028 feat: enhance lesson preview functionality and improve run button interaction; change lesson indicator to percentage; split preview css for better isolation 2025-05-19 23:30:22 +02:00
Michael Czechowski
1ce1f6cd2f feat: update localStorage keys for user progress and last module ID, enhance editor layout with validation indicator 2025-05-18 23:22:17 +02:00
Michael Czechowski
10094e36dc WIP: enhance code editor layout and implement live preview functionality 2025-05-18 21:55:49 +02:00
Michael Czechowski
19188f1415 style: run format first time 2025-05-13 21:08:18 +02:00
Michael Czechowski
94bd7ba0cb refactor: reorganize project structure and update import paths 2025-05-13 20:29:59 +02:00