Commit Graph

382 Commits

Author SHA1 Message Date
d428f394c5 fix: restore clickable Tailwind card on landing page 2026-01-16 03:36:50 +01:00
072b2ad210 feat: add Coming Soon badge to Tailwind section
- Show Coming Soon badge on Tailwind landing card
- Disable Tailwind topic links with Coming Soon badges
- Add i18n translations for Coming Soon in all 6 languages
- Add CSS for disabled states and badge styling

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 03:36:15 +01:00
1368f1c079 feat: add landing footer with donation support, change license to Unlicense
- Add extended landing footer with module links grouped by section
- Integrate Liberapay donation widget with Umami tracking
- Add support section to help dialog and goodbye lesson
- Change license from MIT to Unlicense (public domain)
- Disable Tailwind section (not yet activated)
- Update German CTA copy
- Update all 6 language translations for license text

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 03:33:41 +01:00
f1496e7232 feat: improve playground UX and fix undo/redo across lessons
- Add dice SVG icon for random template button
- Reset button now restores last loaded template in playground
- Clear editor history when switching lessons (prevents cross-lesson undo)
- Add playground link to goodbye lesson
- Center icon buttons with flexbox

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 02:28:12 +01:00
3a2027e825 feat: add custom CodeMirror theme with purple accent colors
Replace oneDark theme with custom crispyEditorTheme featuring:
- Purple accent (#c9a6eb) for keywords and HTML tags
- Matching dark background (#262630)
- Applied consistently across editor and reference code blocks

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 02:08:16 +01:00
d0d8c5a2c0 copy(de): update German landing page headline 2026-01-16 01:53:41 +01:00
b9d13d064f fix: improve UX and tracking
- Change landing page progress to positive wording ('X lessons to explore')
- Add scroll to top when navigating between pages
- Fix section pill highlighting for welcome/playground modules
- Add Umami tracking for language URL switch and landing page clicks
2026-01-16 01:47:49 +01:00
5b6b283470 fix: clear current module/lesson when reloading modules for language switch
When setModules is called (e.g., during language switch), clear currentModule
and currentLesson to force fresh lookup from the new modules array. This
prevents stale module objects from the old language being used.
2026-01-15 23:26:16 +01:00
9733ce4d56 fix: sync language dropdown when switching via URL hash 2026-01-15 22:37:42 +01:00
f2e1ae17e9 fix: fully apply language when switching via URL hash
- Reload lesson modules in new language
- Re-render sidebar module list
- Update progress display
- Now #de, #pl etc. properly translate entire UI
2026-01-15 20:57:08 +01:00
8cbf0b0f26 feat: add URL-based language switching (#de, #pl, #es, #ar, #uk)
- Visit #de to switch to German and go to home
- Visit #pl for Polish, #es for Spanish, #ar for Arabic, #uk for Ukrainian
- Language is persisted to localStorage
- URL is cleaned up after switching (hash removed)
2026-01-15 17:47:20 +01:00
42c4c5d586 feat: add collapsible reference tables for sections with >5 rows
- Tables with more than 5 rows now show first 5 with 'Show N more...' toggle
- Uses native <details>/<summary> for expand/collapse
- Keeps reference pages cleaner by reducing visual noise from long sections
- Box Model, Typography, Transitions now collapsed by default
2026-01-15 17:42:03 +01:00
3010b1a902 feat(i18n): add landing page localization for 6 languages
- Add translation keys for landing page (hero, benefits, learning paths, CTA)
- Support EN, DE, PL, ES, AR, UK languages
- Add data-i18n attributes to landing page HTML elements
2026-01-15 17:33:58 +01:00
7093a36694 copy: change hero CTA to 'Start Learning NOW' 2026-01-15 17:30:08 +01:00
11a57cb39b fix: move CTA subtitle below button 2026-01-15 17:27:08 +01:00
85205f836e feat: redesign landing page with SEO enhancements
- Add comprehensive SEO meta tags (Open Graph, Twitter Cards, JSON-LD)
- Restructure landing page with Khan Academy-style "Why It Works" section
- Replace "How It Works" + "Features" with 3 benefit cards:
  - Learn by Doing (code icon)
  - Practice at Your Pace (progress icon)
  - Master Real Skills (tools icon)
- Add "Explore Learning Paths" section with learning tracks
- Implement dynamic meta tag updates for route-based SEO
- Update page title and descriptions based on current route
- Add new CSS styles for benefit cards, learning paths, and enhanced CTA

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 17:26:02 +01:00
6639a70070 feat: complete reference coverage and UX improvements
Reference pages:
- Add min-width, min-height, border-collapse to Box Model
- Add blockquote to Text Content
- Add new Semantic Inline section (time, mark, small, abbr, kbd, sub, sup, ins, del)

UX improvements:
- Rename "Free Coding" to "HTML & CSS Editor" in Playground
- Keep Welcome and Playground modules always expanded in sidebar

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 16:26:20 +01:00
3b6639b401 rename: Playground → HTML & CSS Editor, Hello! → Getting started! 2026-01-15 16:18:17 +01:00
357f6dc57c feat: extend references and enhance analytics tracking
Reference pages:
- Add Transitions & Animations section (transition-*, animation-*)
- Add CSS Variables section (--*, var(), :root)
- Add Interactive Elements section (<details>, <summary>, <dialog>, <progress>, <meter>, <datalist>)

Analytics tracking (Umami v2):
- Add lesson_nav tracking for next/prev navigation
- Add lesson_select tracking for sidebar lesson clicks
- Add reset_code tracking for code resets
- Add help_open tracking for help dialog
- Add sidebar_open tracking for menu opens
- Add share_open and share_copy tracking for sharing

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 16:13:31 +01:00
79ff72635e fix: add missing --spacing-xl CSS variable for reference section spacing 2026-01-15 16:06:36 +01:00
b04688734d feat: add cross-reference links throughout the website
- Add "See also" links to all 5 reference pages connecting related content
- Add reference links to section content (Selectors, Flexbox, Grid, HTML)
- Add inline links to landing page features section
- Add quick navigation links to help dialog
- Add CSS styling for .ref-see-also, .topic-ref, .section-see-also, .help-nav-links
- Fix spacing between reference sections (add margin-top)

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 16:03:18 +01:00
c6f33194e8 feat: add Reference link to main navigation
- Add Reference nav link with subtle separator styling
- Update nav highlight to show active state on reference pages

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 15:54:43 +01:00
0340a4d4bc feat: implement reference/cheatsheet pages
- Add reference page container to index.html with tab navigation
- Create comprehensive cheatsheets for CSS properties, selectors,
  flexbox, grid, and HTML elements
- Add showReferencePage function with CodeMirror syntax highlighting
- Add reference_view analytics tracking
- Style reference tables, lists, and navigation with responsive design

Routes: #reference/css, #reference/selectors, #reference/flexbox,
        #reference/grid, #reference/html

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 15:53:05 +01:00
aa5292b653 feat: add Umami analytics tracking
- Add Umami v2.13.2 script to index.html
- Track key events: lesson_complete, module_start, section_view,
  language_change, playground_template, reset_progress

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 15:45:03 +01:00
6f9091ceb4 fix: clear completed status when resetting a lesson
- Remove completion badge and reset Run button text in resetSuccessIndicators()
- Remove lesson from completed array in LessonEngine.reset()
- Update sidebar to remove completed class from lesson item
- Update progress display after reset

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 12:37:50 +01:00
a2f998195c fix: handle playground mode as HTML mode in preview rendering
Playground mode was falling through to the CSS branch, wrapping user code
in a <style> tag. This prevented HTML elements and font styles from rendering
correctly. Now playground mode is treated like HTML mode, allowing templates
with <style> blocks and HTML content to work properly.

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 12:26:44 +01:00
50605e6939 fix: improve playground templates layout and typography
- Add font-family: system-ui, sans-serif to all template bodies
- Wrap pricing cards in .pricing flex container
- Wrap animation boxes in .animation-demo flex container
- Wrap flexbox layout in .layout container
- Simplify navigation (fewer links to fit preview)
- Reduce sizes to better fit preview area

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 12:21:43 +01:00
8f4a53f1d9 feat: add random template button to playground
- Create 10 boilerplate templates (cards, nav, forms, animations, etc.)
- Add dice button (🎲) visible only in playground mode
- Load random template and apply to preview on click
- Templates include: Card, Navigation, Profile, Buttons, Pricing,
  Form, Features Grid, Badges, CSS Animation, Flexbox Layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 12:10:17 +01:00
6d5d727ad6 refactor: simplify onboarding/offboarding and move playground to end
- Reduce welcome module from 3 lessons to 1 concise intro
- Reduce goodbye module from 3 lessons to 1 concise outro
- Create standalone playground module at end of module list
- Update all translated welcome files (de, pl, es, ar, uk)
- Playground now appears after goodbye, less prominent

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 12:02:58 +01:00
301200abc2 feat: add CodeMirror syntax highlighting to section page code blocks
- Use CodeMirror in read-only mode for code examples
- Auto-detect CSS vs HTML based on content
- Clean up views when navigating between sections
- Add transparent background to blend with code-block container

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 11:54:50 +01:00
a8410df42a feat: improve section pages with GitBook-style layout and landing page
- Add side-by-side layout for section pages (text left, code right)
- Include educational content with code examples for CSS, HTML, Tailwind
- Add section overviews explaining each technology
- Make header level pill clickable to return to last lesson
- Update landing page with "How It Works" steps and features section
- Improve code block readability with GitHub-dark color scheme
- Add prominent topic links with SEO-friendly accessible text
- Add responsive grid layout that stacks on mobile

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 11:52:26 +01:00
512f716054 fix: move main nav to header-actions (right side) 2026-01-14 23:21:39 +01:00
7125b7adc9 feat: add landing pages and section navigation
- Add home landing page with section cards (CSS, HTML, Tailwind)
- Add section landing pages with module grid and progress tracking
- Implement extended URL routing for pages, sections, and lessons
- Create sections.js configuration for module categorization
- Exclude welcome/goodbye modules from progress stats
- Add main navigation links in header (desktop only)
- Update logo click to navigate to home landing

Routes:
- # → Home landing
- #css, #html, #tailwind → Section landing pages
- #module/index → Lesson (unchanged)

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-14 23:15:34 +01:00
0f14568d2c feat: add shareable lesson links with URL routing
- Add share button with SVG link icon in lesson title row
- Create share dialog with copy URL functionality
- Implement URL hash-based routing for lesson navigation
- Support browser back/forward navigation
- Add i18n translations for share dialog in all languages
- Position share button between title and completion badge
- Add RTL support for title row layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-14 21:35:49 +01:00
a4563638a0 cleanup: remove commented out and duplicate RTL code 2026-01-14 20:25:41 +01:00
99380cb9ce replace: remove hex complete message due to not so funny and replace with +1 2026-01-14 19:20:37 +01:00
aebb3f267b fix(rtl): orientation and direction of elements in the sidebar 2026-01-14 19:17:36 +01:00
96f2ec1970 fix(rtl): sidebar chevron and titles right-aligned using order property 2026-01-14 18:37:04 +01:00
daf5aa1134 fix(rtl): let natural RTL flex flow position burger on right edge 2026-01-14 18:36:20 +01:00
ac83bb2faa fix(rtl): header layout, completion badge spacing, sidebar alignment, list bullets, code blocks 2026-01-14 18:12:24 +01:00
6da748fe66 fix: use native details/summary marker instead of custom chevrons 2026-01-14 17:59:07 +01:00
af2ded5381 fix: use clip-path for sidebar chevrons (better cross-browser support) 2026-01-14 17:56:50 +01:00
468163a2ec fix: header pill shows module name + level, fix RTL checkmark spacing 2026-01-14 17:53:29 +01:00
64caaeb049 feat: add header level pill on desktop, use native details/summary for sidebar
- Add lesson indicator pill to header (visible on desktop only)
- Logo stays centered, pill on left with burger menu
- Replace emoji arrows with CSS triangles for iOS compatibility
- Use native <details>/<summary> for expand/collapse
- Update tests for new implementation
2026-01-14 17:51:34 +01:00
be9bc7bd2f fix(animation): sync disappear timing (bowl 3s, bubble 2.7s + 0.3s delay) 2026-01-14 17:45:25 +01:00
2d376f4fe2 fix(animation): offset speech bubble timing for bounce effect 2026-01-14 17:27:35 +01:00
6e2fce813f fix: change +1 message from binary to hex (0x2B 0x31) 2026-01-14 17:26:20 +01:00
22c49ae713 fix(animation): position speech bubble above the bowl 2026-01-14 17:24:45 +01:00
275f2d75c3 fix(animation): speech bubble now animates like bowl with scale 2026-01-14 17:23:53 +01:00
46d8f7d282 feat(animation): proper SVG speech bubble with tail using mask-image 2026-01-14 17:15:49 +01:00