Commit Graph

126 Commits

Author SHA1 Message Date
03029a757f 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
af5a5a2045 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
b7a34b02d8 fix(rtl): auto-detect text direction for untranslated content 2025-12-31 01:51:01 +01:00
62157e8b78 fix(rtl): keep Code Crispies logo in LTR order 2025-12-31 01:50:26 +01:00
822afd574b 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
c0bb79da9f feat: add Playground module with full-height editor 2025-12-31 00:36:14 +01:00
13798f5e83 feat: make logo clickable to navigate to welcome page 2025-12-31 00:30:34 +01:00
d5f9f1a843 style: improve hamburger menu icon with cleaner CSS 2025-12-31 00:28:18 +01:00
d234408e1c 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
11bcdc9c62 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
9181f4019a fix: shorten CRISPY animation to 4s, visible for 5s 2025-12-30 22:02:29 +01:00
59c8bf6a45 fix: center CRISPY animation with translate offset 2025-12-30 21:59:44 +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
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
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
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
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
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
d5c572b8de style: widen help dialog from 500px to 600px 2025-12-30 14:54:35 +01:00
15afa72a2f 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
027232f5e8 fix: add kbd tags to validation messages for clarity
- Wrap HTML element names in <kbd> tags in all validation messages
- Apply consistent formatting to both English and German lessons
- Make hints clearer about which elements/attributes to use
- Fix mobile editor layout overflow issue
2025-12-25 15:55:26 +01:00
2c8d46d592 fix: improve WCAG compliance and mobile editor height
- Add aria-describedby to password inputs for screen readers
- Connect hint text to input via id reference
- Increase mobile editor min-height to 50vh
2025-12-25 15:28:11 +01:00
eb67d733d6 fix: add minimum height for code editor on mobile
- Set min-height: 200px for editor-section
- Set min-height: 150px for editor-content
- Ensures editor is usable on small screens
2025-12-25 15:27:03 +01:00
8949d5e709 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
ac662ea11d feat: rename success message to "CRISPY!" with Japanese smiley
- Update overlay text: "Perfect Match!" → "CRISPY! ٩(◕‿◕)۶"
- Update success hint in English and German versions
- Fun branding touch matching the app name
2025-12-24 01:43:26 +01:00
46ecbaba68 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
79e7f69414 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
df981f77d7 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
34659a1c85 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
238853d2e1 feat: add CodeMirror 6 editor with Emmet support
- Replace textarea with CodeMirror 6 for syntax highlighting
- Add Emmet abbreviation expansion (Tab to expand)
- Support HTML and CSS language modes with autocomplete
- Add dark theme matching app design
- Tab indentation with Shift-Tab for outdent
- Update help modal with Emmet shortcuts
2025-12-21 23:37:14 +01:00