Commit Graph

71 Commits

Author SHA1 Message Date
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
7fb70e7257 refactor: replace custom modal with native HTML dialog element
- Convert help and reset modals to native <dialog> elements
- Content is now in HTML, not dynamically generated via JS
- Use dialog.showModal() and dialog.close() native API
- Dialog handles Escape key natively for closing
- Fix list indentation in help dialog with proper padding
- Add styled kbd elements for keyboard shortcuts
- Separate dialogs for help and reset confirmation
- Apply same changes to German version

Benefits:
- Better accessibility (native focus trapping, escape handling)
- Simpler JavaScript (no DOM manipulation for content)
- Content visible in HTML source for easier editing
- Native backdrop styling via ::backdrop
2025-12-24 00:57:24 +01:00
1c99e0ab0d feat: add language switcher between English and German
- Add language toggle button in header (EN/DE)
- Link directly to the other language version
- Style consistent with existing header buttons
- Accessible with proper aria-labels
2025-12-24 00:51:54 +01:00
8d5e126258 fix: remove unused validation percentage indicator
The 0% indicator next to the Run button was not providing useful
feedback. Removed from HTML, CSS, and app.js.
2025-12-24 00:17:28 +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
90585293c7 fix: hide original textarea to prevent browser form restoration artifact
- Add display:none to initial textarea (CodeMirror replaces it)
- Add autocomplete=off to prevent browser from restoring old form values
2025-12-22 10:06:55 +01:00
b5cf77376f refactor: redesign layout to Flexbox Froggy style with slide-out sidebar
- Implement 50/50 split layout (left: instructions + editor, right: preview)
- Replace always-visible sidebar with slide-out drawer menu
- Move footer, progress, and settings into sidebar
- Add toggleable expected result overlay (hidden by default)
- Create new hint system with step progress indicators
- Add ghost button styles for modal and text button for sidebar reset
- Fix HTML lesson task instruction and typo ("important" not "importing")
- Add padding to preview frames to prevent corner clipping
- Optimize layout for iPadOS and tablet devices
2025-12-21 23:20:07 +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
c549d5c65e feat: add footer with links to project repository and author website 2025-05-20 19:42:17 +02:00
Michael Czechowski
8d499bf497 feat: add toggle switch for disabling error feedback and persist user settings 2025-05-20 00:37:36 +02:00
Michael Czechowski
281e7d5d33 feat: increase logo size for better visibility and add shadow to logo 2025-05-19 20:27:17 +02:00
Michael Czechowski
7e23e5b331 feat: implement better progress tracking and user feedback, run code after some idle time 2025-05-19 20:21:53 +02:00
Michael Czechowski
e4d03c6b7f WIP: enhance validation feedback in code editor, add support for multiple validation indicators and new validation types 2025-05-19 12:55:43 +02:00
Michael Czechowski
48ef3e07d4 feat: update module titles and enhance button styles 2025-05-14 03:40:15 +02:00
Michael Czechowski
9249f122a4 feat: restructure lesson files and update success indicators 2025-05-14 00:51:10 +02:00
Michael Czechowski
910529a6c3 feat: enhance success indicators and update favicon path 2025-05-13 21:35:16 +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
Michael Czechowski
6fe1e2b4d9 feat: enhance lesson progress tracking and UI feedback 2025-05-13 19:57:27 +02:00
Michael Czechowski
12b70e0b31 refactor: update styles and improve layout 2025-05-13 19:09:11 +02:00
Michael Czechowski
c46d6efd6b init project 2025-05-13 18:10:40 +02:00