Commit Graph

265 Commits

Author SHA1 Message Date
1fd7cc31eb fix: simplify welcome validations, remove deprecated shortcuts, fix rerun text 2025-12-30 21:58:21 +01:00
d248e4af3c fix: purple reset-code button instead of sidebar reset 2025-12-30 21:53:20 +01:00
d51678c681 fix: update German translations and make reset button prominent 2025-12-30 21:52:13 +01:00
192b9b01ff fix: mobile preview-header above preview-wrapper 2025-12-30 21:47:01 +01:00
9c22aa9ce4 fix: mobile preview visibility with explicit flex display 2025-12-30 21:45:41 +01:00
a7cc035410 feat: add welcome lesson, DVD bounce animation, mobile layout reorder
- Add Welcome module with intro lessons (EN/DE)
- Success message now bounces like DVD screensaver (10s duration)
- Mobile: nav bar at top, preview before editor
- Logo: CODE with purple background pill
2025-12-30 21:44:37 +01:00
7a18abd446 style: purple background pill for CODE in logo 2025-12-30 21:34:45 +01:00
ca2c5607da fix: editor min-height 50vh, scrollable instructions on desktop 2025-12-30 21:28:48 +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
79cbfd404d fix: make module-pill expand on mobile with spacing to buttons 2025-12-30 21:10:44 +01:00
12f36698a7 fix: move preview-header back to bottom, add spacing beneath 2025-12-30 21:09:46 +01:00
a8f4739912 fix: remove max-height constraint from module-list 2025-12-30 21:08:26 +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
138918995b feat: add gentle loading fallback after 3 seconds
If no lesson loads within 3 seconds, show a centered, gray notice
with fade-in animation suggesting to select from menu or check help.
Includes link to help dialog.
2025-12-30 20:57:54 +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
ef98e1aa96 feat: cache lesson content for instant restore on reload
Store lesson title, description, and task in localStorage after each
lesson load. On page reload, immediately restore the cached content
to avoid showing "Loading..." placeholder text.
2025-12-30 20:50:25 +01:00
2a0e5386c7 fix: add transition effect to language switch
Apply transitioning class during language toggle to prevent
content flash when switching between English and German.
2025-12-30 20:48:40 +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
dddce116bd refactor: add HTML/CSS prefixes to German module titles and improve UI
- Shorten German module titles with consistent HTML/CSS prefixes
- Add .completion-badge styling for the lesson title completion badge
- Make sidebar lessons section fill available height on desktop
- Improve flexbox lesson descriptions with more context
2025-12-30 20:38:41 +01:00
6eec215096 refactor: remove lessons not covered in HdM lectures
Keep only modules covered in 223015c lectures:
- HTML: Elements, Forms, Validation, Details, Progress, Tables, SVG, Marquee
- CSS: Basic Selectors, Box Model, Units & Variables, Flexbox, Responsive, Transitions

Remove:
- Advanced Selectors
- Tailwind
- HTML: Datalist, Data Attributes, Dialog, Fieldset, Figure
2025-12-30 20:26:45 +01:00
db5c7980d6 style: only truncate module name on mobile
- Remove max-width from desktop
- Apply truncation only in mobile media query
2025-12-30 20:17:37 +01:00
b299c63ee3 fix: improve module name truncation in pill
- Add min-width: 0 and flex-shrink to pill for proper flex behavior
- Reduce max-width to 120px desktop, 80px mobile
2025-12-30 20:15:52 +01:00
cfce603980 style: improve pill layout for mobile
- Wrap lesson label in span for mobile hiding
- Truncate module name with ellipsis if too long
- Hide "Lesson/Lektion" label on mobile, show only "1 / 3"
- Add lessonLabel i18n keys for EN/DE
2025-12-30 20:03:33 +01:00
5940fb2e72 style: improve hint text readability on dark background
- Change hint-message color to light text
- Update kbd/code styling for dark background
2025-12-30 19:59:11 +01:00
0817d9dd13 style: show full instructions on mobile without scroll
- Remove max-height and overflow constraints from instructions
- Instructions now expand fully on mobile devices
2025-12-30 19:57:03 +01:00
01b4fda4b4 fix: update module name element instead of overwriting pill
- Add moduleName element reference for .module-name span
- Update only module name text, preserving level indicator
2025-12-30 19:53:40 +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
bf43902444 style: make hint bar float over editor
- Editor content now extends full height
- Hint area floats at bottom with blur effect
- Hide hint area when empty
- Update hint styling for dark background
2025-12-30 18:36:19 +01:00
bf2a53eca6 style: improve preview section UI
- Make preview-header fully transparent
- Add inset shadow to preview-section
- Remove green tint from expected overlay
2025-12-30 18:34:41 +01:00
6a21cacdee style: make preview-header transparent, remove border 2025-12-30 18:28:57 +01:00
3dfb63ac31 fix: change preview-header border from bottom to top 2025-12-30 18:27:59 +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
3bf630adf6 fix: ensure preview iframe html/body have min-height 100% 2025-12-30 16:29:49 +01:00
2e8cd6a050 feat(i18n): add dynamic lesson loading by language
- Import both EN and DE lesson files in lessons.js
- loadModules() now accepts language parameter
- toggleLanguage() reloads lessons in new language
- initializeModules() uses current language from i18n
- Preserves user position when switching languages
2025-12-30 15:43:00 +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
08c3c8faee refactor(i18n): remove duplicate German files
German content now handled via i18n.js translations module.
Removes index.de.html and app.de.js in favor of single
language-agnostic codebase.
2025-12-30 15:10:57 +01:00
ffee16a3d4 feat(i18n): integrate translations in app.js
- Import and initialize i18n module
- Add language toggle button handler
- Replace hardcoded strings with t() function calls
- Update dynamic text (progress, success messages, etc.)
2025-12-30 15:10:44 +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
0ad7ea1c54 feat: close dialogs on backdrop click
Native dialog elements don't close on backdrop click by default.
Added click handlers that check if click target is the dialog itself
(not its children) to enable this expected UX behavior.
2025-12-30 14:54:49 +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
901c584145 style: widen help dialog from 500px to 600px 2025-12-30 14:54:35 +01:00
44e9f3041f fix: remove redundant Lessons heading from sidebar
The HTML already has an h4 heading for the lessons section with proper
ARIA labeling. The renderer was adding a duplicate h3 heading.
2025-12-30 14:54:28 +01:00
6f00985894 fix(i18n): change button text 'Erneut' to 'Erneut anwenden' 2025-12-30 12:39:08 +01:00
2edec54110 style: add code element styling and accessibility enhancements
- Style code elements in task instructions with white alpha background
- Style code elements in lesson descriptions and hints
- Add skip-link CSS for keyboard navigation
- Add sidebar shift animation when drawer is open
- Add focus styles for sidebar navigation items
2025-12-30 12:25:02 +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
09f937ca07 feat: add CSS lessons matching lecture content (box model, flexbox, responsive, transitions, variables)
- Add 5 CSS modules to lessons.js config (EN)
- Create German translations for all 5 CSS modules
- Add CSS modules to lessons.de.js config
- Fix test to use toBeGreaterThanOrEqual for module count
2025-12-29 15:26:59 +01:00