Commit Graph

136 Commits

Author SHA1 Message Date
3c08b45b6a feat: add whyThisWorks translation key for concept section
Add 'Why This Works' translation key to all 6 supported languages (en, de, pl, es, ar, uk) for the new concept section UI in lessons.
2026-01-11 04:40:21 +01:00
e21bca16a8 feat: populate concept section in renderLesson function
- Add logic to populate concept explanation, diagram, and containerVsItem fields
- Show concept section when concept data exists, hide when not defined
- Clear optional fields to prevent stale data from previous lessons
- Use textContent for text fields and innerHTML for diagram (SVG support)
2026-01-11 04:38:52 +01:00
0e39cffccb auto-claude: 2.2 - Add CSS styles for the concept panel: distinct vis 2026-01-11 04:35:27 +01:00
2a9565cff6 auto-claude: 2.1 - Add native <details><summary> element for Why This Works section 2026-01-11 04:32:41 +01:00
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
8d1a940588 fix(rtl): comprehensive layout fixes for Arabic
- Swap left/right panels in RTL mode
- Flip left panel border to left side
- Flip hint border to right side
- Flip lessons container indentation (margin, border, padding)
- Flip module expand icon and lesson checkmark margins
- Flip toggle switch slider margin
- Reverse setting row and preview controls
2025-12-31 10:31:49 +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
13382565c0 fix(rtl): auto-detect text direction for untranslated content 2025-12-31 01:51:01 +01:00
f8a981225f fix(rtl): keep Code Crispies logo in LTR order 2025-12-31 01:50:26 +01:00
e4dd0ae70e fix(i18n): show current language and add RTL support for Arabic
- Language switcher now shows current language code (EN, DE, PL, etc.)
- Add RTL layout support for Arabic (dir="rtl" on html element)
- Sidebar slides from right in RTL mode
- Flip horizontal layouts, navigation, and text alignment for RTL
2025-12-31 01:49:03 +01:00
b9d9a0ab0c feat(i18n): add support for Polish, Spanish, Arabic, and Ukrainian
- Create lesson directories and copy English lessons as templates
- Add full UI translations for pl, es, ar, uk languages
- Update lessons.js with module stores for all new languages
- Implement language cycling (en → de → pl → es → ar → uk → en)
- Fix playground mode detection (lesson.mode takes precedence)
2025-12-31 01:45:52 +01:00
89ad5228b4 refactor: merge playground into welcome module
- Rename welcome lessons to Get Started, Overview, Playground
- Remove separate playground module files
- Fix playground detection to check lesson.mode instead of module.id
2025-12-31 00:46:42 +01:00
6390e29caf fix: playground mode with HTML & CSS editor, no validation 2025-12-31 00:38:41 +01:00
4a9db6d10f feat: add Playground module with full-height editor 2025-12-31 00:36:14 +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
d7ba44ce40 fix: shorten CRISPY animation to 4s, visible for 5s 2025-12-30 22:02:29 +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
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