Commit Graph

323 Commits

Author SHA1 Message Date
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
249becc756 feat(animation): speech bubble shape with tail pointing to bowl 2026-01-14 17:03:51 +01:00
5986e83237 fix(animation): bowl size to 50% of wrapper 2026-01-14 17:01:50 +01:00
bfd2d6943f fix(animation): responsive bowl size - min 200px or 1/3 wrapper width 2026-01-14 17:01:21 +01:00
4643477bf5 fix(animation): center bowl peek horizontally 2026-01-14 16:59:39 +01:00
f7b4962255 fix(animation): simplify text scale to 4 smooth keyframes 2026-01-14 15:53:19 +01:00
7fa67daac8 fix(animation): more dramatic text scale on entrance 2026-01-14 15:51:05 +01:00
1d0c2426dc fix(animation): sync bowl peek timing with text animation 2026-01-14 15:50:29 +01:00
cc1b972132 fix(animation): smoother bowl peek with gentle settle motion 2026-01-14 15:49:46 +01:00
047de757f7 fix(animation): move bowl inside preview-frame with overflow hidden 2026-01-14 15:48:53 +01:00