Commit Graph

175 Commits

Author SHA1 Message Date
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
4928223291 fix: add dir=rtl to Arabic Hello World text 2025-12-30 22:05:58 +01:00
7febd65845 fix: fill editor with Hello World p tags on Get Started lesson 2025-12-30 22:03:37 +01:00
d7ba44ce40 fix: shorten CRISPY animation to 4s, visible for 5s 2025-12-30 22:02:29 +01:00
499695a9c3 feat: add Hello World in 8 languages with colorful styling 2025-12-30 22:01:55 +01:00
4801ddae32 fix: center CRISPY animation with translate offset 2025-12-30 21:59:44 +01:00
1fd7cc31eb fix: simplify welcome validations, remove deprecated shortcuts, fix rerun text 2025-12-30 21:58:21 +01:00
6d4dec2edf fix: simplify welcome lesson task texts 2025-12-30 21:55:14 +01:00
448fc32ed8 fix: sync Lösung einblenden across i18n and welcome lesson 2025-12-30 21:54:31 +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
8c032adebd refactor: streamline welcome lesson with comprehensive info and links 2025-12-30 21:49:49 +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
fb76db1a21 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
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
1267ce15ae 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
3bf630adf6 fix: ensure preview iframe html/body have min-height 100% 2025-12-30 16:29:49 +01:00
15f10bcdf8 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
23549f1e90 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