Commit Graph

22 Commits

Author SHA1 Message Date
f1496e7232 feat: improve playground UX and fix undo/redo across lessons
- Add dice SVG icon for random template button
- Reset button now restores last loaded template in playground
- Clear editor history when switching lessons (prevents cross-lesson undo)
- Add playground link to goodbye lesson
- Center icon buttons with flexbox

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 02:28:12 +01:00
3a2027e825 feat: add custom CodeMirror theme with purple accent colors
Replace oneDark theme with custom crispyEditorTheme featuring:
- Purple accent (#c9a6eb) for keywords and HTML tags
- Matching dark background (#262630)
- Applied consistently across editor and reference code blocks

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 02:08:16 +01:00
5b6b283470 fix: clear current module/lesson when reloading modules for language switch
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.
2026-01-15 23:26:16 +01:00
6f9091ceb4 fix: clear completed status when resetting a lesson
- 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)
2026-01-15 12:37:50 +01:00
a2f998195c fix: handle playground mode as HTML mode in preview rendering
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)
2026-01-15 12:26:44 +01:00
7125b7adc9 feat: add landing pages and section navigation
- Add home landing page with section cards (CSS, HTML, Tailwind)
- Add section landing pages with module grid and progress tracking
- Implement extended URL routing for pages, sections, and lessons
- Create sections.js configuration for module categorization
- Exclude welcome/goodbye modules from progress stats
- Add main navigation links in header (desktop only)
- Update logo click to navigate to home landing

Routes:
- # → Home landing
- #css, #html, #tailwind → Section landing pages
- #module/index → Lesson (unchanged)

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-14 23:15:34 +01:00
fbe0f20ef7 feat: add reset code confirmation dialog with skip option
- Add dialog to confirm resetting code to initial state
- Allow users to skip confirmation with "don't show again" checkbox
- Save preference to user settings
- Improve i18n and CodeEditor components
2026-01-07 14:16:45 +01:00
3bf630adf6 fix: ensure preview iframe html/body have min-height 100% 2025-12-30 16:29:49 +01:00
5ec56e52fc 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
1328d7c004 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
fc4fb9ef06 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
f9d08749d3 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
a1f1da0d06 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
b13c8ffea5 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
4664bc7fdb refactor: clean up unused lesson imports and improve code consistency 2025-06-10 23:45:46 +02:00
Michael Czechowski
5da62807a2 feat: enhance LessonEngine to manage user progress and code storage 2025-06-05 23:31:13 +02:00
9e28534562 feat: implement tailwind validations and basic example 2025-06-01 22:34:55 +02:00
Michael Czechowski
6c7ef3ff0b 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
4f5154b795 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
c6f1179568 WIP: enhance code editor layout and implement live preview functionality 2025-05-18 21:55:49 +02:00
Michael Czechowski
0f2308a132 style: run format first time 2025-05-13 21:08:18 +02:00
Michael Czechowski
ab4279f9ca refactor: reorganize project structure and update import paths 2025-05-13 20:29:59 +02:00