Commit Graph

170 Commits

Author SHA1 Message Date
59c8bf6a45 fix: center CRISPY animation with translate offset 2025-12-30 21:59:44 +01:00
926e431180 fix: simplify welcome validations, remove deprecated shortcuts, fix rerun text 2025-12-30 21:58:21 +01:00
1c2f9409dd fix: simplify welcome lesson task texts 2025-12-30 21:55:14 +01:00
4d4f25c571 fix: sync Lösung einblenden across i18n and welcome lesson 2025-12-30 21:54:31 +01:00
c404ae3ab1 fix: purple reset-code button instead of sidebar reset 2025-12-30 21:53:20 +01:00
31a99197f8 fix: update German translations and make reset button prominent 2025-12-30 21:52:13 +01:00
f135c8ee15 refactor: streamline welcome lesson with comprehensive info and links 2025-12-30 21:49:49 +01:00
5a36f094a5 fix: mobile preview-header above preview-wrapper 2025-12-30 21:47:01 +01:00
3992dcdb92 fix: mobile preview visibility with explicit flex display 2025-12-30 21:45:41 +01:00
e28f23d126 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
7f3451922a style: purple background pill for CODE in logo 2025-12-30 21:34:45 +01:00
66e047a440 fix: editor min-height 50vh, scrollable instructions on desktop 2025-12-30 21:28:48 +01:00
a4787731dc 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
1185d452dc fix: make module-pill expand on mobile with spacing to buttons 2025-12-30 21:10:44 +01:00
1cb7aebb42 fix: move preview-header back to bottom, add spacing beneath 2025-12-30 21:09:46 +01:00
00b0a0f3f8 fix: remove max-height constraint from module-list 2025-12-30 21:08:26 +01:00
b6655ced44 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
3d71e37828 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
801fbe918e 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
b703992713 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
d601ae5286 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
0fc5af959f 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
52142f1594 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
a359900d6e 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
2cab401597 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
82f7fde3e5 refactor: simplify compound class names in lessons
- German flexbox: .flex-container → .wrap
- 00-basics: .responsive-element → .box, .flex-container → .wrap
2025-12-30 20:21:09 +01:00
2814a4788a 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
3cd1ae132b 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
583c53371d 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
e9e8490737 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
d7313399c7 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
9c07122d60 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
e34d7eb70a 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
e85df3d322 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
e54199b12e 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
2d9b8290db style: make preview-header transparent, remove border 2025-12-30 18:28:57 +01:00
825972a1ba fix: change preview-header border from bottom to top 2025-12-30 18:27:59 +01:00
e13a4fe41f 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
00c94fc7ec 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
d89c1cb693 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
b269472367 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
b4d2f52d50 refactor: shorten class names in layout lessons for easier typing
- flexbox.json: .flex-container → .wrap
- grid.json: .grid-container → .grid, .grid-layout → .page,
  .responsive-grid → .cards, .align-grid → .cells, .overlap-grid → .stack
- 07-layouts.json: .flex-container → .flex, .flex-item → .item,
  .grid-container → .grid
- CLAUDE.md: add short class names rule (1-2 syllables max)
2025-12-30 16:47:31 +01:00
42e9d06705 fix: ensure preview iframe html/body have min-height 100% 2025-12-30 16:29:49 +01:00
919cfc4249 refactor: shorten lesson titles and improve content
- Shorten verbose lesson titles for better sidebar display
- Minor content improvements across lessons
2025-12-30 16:22:48 +01:00
1073b2a486 fix: improve lesson content with kbd tags, solutions, and animation contrast
- Add <kbd> tags to CSS property values and selectors in task descriptions
- Add solution code to all lessons for better guidance
- Improve animation contrast in transitions lesson (black/white instead
  of similar purples, dramatic color changes for visibility)
- Simplify validation messages with kbd formatting
2025-12-30 16:22:24 +01:00
46546165cd Merge branch 'feat/i18n-js' - JS-based internationalization 2025-12-30 16:11:23 +01:00
d353221f1c 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
8d7a0ab2c3 test: update renderer tests for i18n changes
Remove expectations for Lessons heading since it's now in
HTML rather than being added by renderModuleList()
2025-12-30 15:12:04 +01:00
24ea9b93ca chore: change port to 1234 and add Makefile/flake.nix
- Change dev server port from 1312 to 1234
- Add Makefile for common development commands
- Add flake.nix for Nix development environment
2025-12-30 15:11:57 +01:00
eea4b1e8f5 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