Commit Graph

44 Commits

Author SHA1 Message Date
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
6f7964f014 refactor: move language picker to sidebar as dropdown
- Remove language button from header
- Add language select dropdown in sidebar settings
- Add translations for "Language" label in all languages
- Remove unused .lang-switch CSS
2025-12-31 10:26:51 +01:00
eaf2d0c7f3 feat: make logo clickable to navigate to welcome page 2025-12-31 00:30:34 +01:00
bb936844d8 style: improve hamburger menu icon with cleaner CSS 2025-12-31 00:28:18 +01:00
d25dbcdf6d seo: update meta description and title for HTML & CSS learning
Some checks failed
Deploy static content to Pages / deploy (push) Has been cancelled
2025-12-30 22:37:42 +01:00
85eb19ecc3 style: improve CRISPY animation and simplify sidebar footer
- Remove ! from CRISPY, add spacing to smiley
- Use darker green for better contrast
- Increase font size to 1.3rem
- Remove GitHub link from sidebar (keep only Gitea)
2025-12-30 22:35:55 +01:00
6303358521 feat: hide Run button, update LibreTECH branding, improve welcome lessons
- Hide Run button (live preview is stable)
- Update all references from librete.ch to LibreTECH
- Add context to repo links (Gitea Source, GitHub Mirror)
- Fix welcome lesson redundant text
- Slow down CRISPY animation to 8s
- Remove editor-tools margin-right
2025-12-30 22:22:00 +01:00
7a18abd446 style: purple background pill for CODE in logo 2025-12-30 21:34:45 +01:00
82612126cb feat: add More Projects section to help dialog
- Add HTML over JS and Web Engineering Mandala projects
- Include i18n translations for EN and DE
- Add userCode to lesson cache for faster reload
2025-12-30 21:21:47 +01:00
12f36698a7 fix: move preview-header back to bottom, add spacing beneath 2025-12-30 21:09:46 +01:00
bc4972b1d6 perf: make module loading synchronous, flip right panel layout
- Remove unnecessary async/await from loadModules (static imports)
- Move game controls to top of right panel
- Move preview header below controls, above preview
- Flip inset shadow to top of preview section
2025-12-30 21:07:00 +01:00
109c2fadcf fix: remove all placeholder text, cache level indicator
- Remove "Please select a lesson" default text
- Remove "1 of 3" default level indicator
- Add level indicator to lesson cache for instant restore
2025-12-30 20:54:57 +01:00
e0f5fbc45c fix: prevent Loading text flash on page load
- Remove data-i18n="loading" from lesson title and module name
- Start with empty content instead of "Loading..." placeholder
- Remove data-i18n attribute after restoring cache to prevent overwrites
2025-12-30 20:53:38 +01:00
3addeda28d feat: add contact section and smooth lesson transitions
- Add contact section to help dialog with librete.ch, GitHub, Gitea, LinkedIn links
- Add HTML/CSS prefixes to English module titles for consistency with German
- Add CSS transitions for smooth lesson switching
- Add transitioning class to prevent content flash during lesson changes
2025-12-30 20:48:03 +01:00
08b38a4368 style: move module pill to nav bar with lesson counter
- Module pill now in game-controls between prev/next buttons
- Level indicator (e.g. "1 of 3") inside the pill
- Updated pill styling for nav bar context
2025-12-30 19:51:05 +01:00
68472b41fa refactor: shorten compound class names to single words
- box-model: .margin-box→.outer, .border-box→.sized, .shorthand-box→.spaced,
  .padding-box→.padded, .border-demo→.line
- units-variables: .unit-box→.box, .var-box→.themed, .calc-box→.sized,
  .viewport-box→.view
- responsive: .responsive-box→.panel, .fluid-text→.text, .grid-responsive→.cards
- Move expected toggle below preview area
- Update German translations with same changes
2025-12-30 18:23:54 +01:00
45e6cbaa8d fix: reorder instruction elements - title first, pill second
- Move h2 lesson-title before module-pill
- Add more spacing before lesson-description
2025-12-30 18:11:11 +01:00
334b147706 refactor: reorder lesson modules and update footer links
- Reorder modules by learning path: HTML first, then CSS, then Tailwind
- Group modules with comments for clarity
- Change footer link from GitHub to Gitea (librete.ch)
2025-12-30 18:09:47 +01:00
38541c7a78 fix: add kbd tags to lesson messages and reorder task/description
- Replace single quotes with <kbd> tags in validation messages
- German and English lessons updated for consistent formatting
- Move task instruction before description in UI (index.html)
2025-12-30 18:08:11 +01:00
b9f8fde9b9 fix(i18n): update help text to reflect live preview
- Preview updates automatically as you type
- Ctrl+Enter triggers immediate validation, not required for basic use
2025-12-30 15:11:50 +01:00
0570453a25 feat(i18n): add JS-based internationalization
- Create i18n.js module with EN/DE translations
- Add data-i18n attributes to index.html for dynamic text
- Update renderer.js to use translation functions
- Language switcher button replaces link to German page
- Stores preference in localStorage, detects browser language
2025-12-30 15:10:38 +01:00
83d1bb4d18 docs: expand help dialog with learning modes and editor tools
- Add About section mentioning open-source and no account required
- Add Learning Modes section (CSS, Tailwind, HTML)
- Add Editor Tools section (undo, redo, reset, show expected)
- Add dedicated Keyboard Shortcuts section
- Update Emmet examples to be more practical
2025-12-30 14:54:43 +01:00
36c281d7e7 feat: improve sidebar keyboard accessibility
- Add skip-to-content link for keyboard users
- Convert module headers and lesson items from divs to buttons
- Add ARIA attributes (aria-expanded, aria-controls, aria-label)
- Add focus return to trigger element when closing sidebar
- Shift main content when sidebar is open using CSS :has()
- Add code element styling in instruction boxes
2025-12-30 12:24:53 +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
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