Commit Graph

276 Commits

Author SHA1 Message Date
36aaaa3d07 style: balance section colors between muted and vibrant
Find middle ground between old muted and badge colors:
- CSS: #9163b8 (balanced purple)
- HTML: #d45aa0 (balanced pink)
- Tailwind: #1aafb8 (balanced teal)

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 04:57:20 +01:00
7bd9b41077 style: update section colors to match completed badge
Use colors from the completed badge gradient:
- CSS: #9b59b6 (purple)
- HTML: #e040fb (pink/magenta)
- Tailwind: #00bcd4 (cyan)

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 04:56:32 +01:00
d35a4a3e22 feat: add interactive UI component templates
Add 10 new templates showcasing native HTML features:
- Accordion FAQ: using <details> and <summary>
- Form Validation: HTML5 validation attributes
- Toggle Switch: styled checkbox as iOS toggle
- CSS Tabs: pure CSS tabs with radio buttons
- Modal Dialog: native <dialog> element
- Tooltip: CSS-only hover tooltips
- Progress Steps: checkout wizard indicator
- Dropdown Menu: CSS :hover/:focus-within
- Star Rating: interactive CSS-only stars
- Search Box: styled search with suggestions

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 04:52:33 +01:00
d6ff5edf5c fix: footer links on all pages and scroll behavior
- Render footer lesson links in initializeModules() for all pages
- Fix scroll to top using requestAnimationFrame for proper timing
- Move dice button to left of editor tools

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 04:50:47 +01:00
68368560cb feat: add real Unsplash images to playground templates
Replace CSS gradient placeholders with actual photos:
- Card Component: mountain landscape
- Profile Card: woman portrait
- Social Post: avatar + nature photo
- Story Highlights: 5 different portrait photos
- Comment Section: 2 avatar photos
- Bio Section: woman portrait with gradient ring
- Status Update: man portrait

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 04:50:29 +01:00
395fc95c4b feat: add social media playground templates and use EUR currency
- Add 10 new social media templates: Social Post, Story Highlights,
  Like Button, Comment Section, Notification Badge, Emoji Reactions,
  Bio Section, Status Update, Chat Bubble
- Change pricing from $ to € (€9, €29, €99)
- Fix Story Highlights with shorter names for better rendering
- Fix Bio Section avatar overflow issue

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 04:48:03 +01:00
e866b0ca1c feat: add comprehensive analytics tracking and enhance practice links
- Add tracking for: coming_soon_click, external_link, header_nav_click,
  footer_link, practice_link, expected_toggle
- Enhance practice links (.ref-see-also) with gradient background and
  button-like styling to encourage learning
- Simplify reference nav (remove sticky positioning)
2026-01-16 04:38:13 +01:00
c0db8bba48 feat: complete section color coding with logo, hints, editor themes, and footers
- Add section-specific CodeMirror syntax highlighting (purple selectors for CSS)
- Logo now uses section colors (CSS purple as default, changes per section)
- Add section color coding for hints
- Add full footer to section and reference pages
- Fix nav highlight updates for sidebar and prev/next navigation
- Change welcome module mode to CSS for purple theme on first lesson
- Rebrand "Code Crispies" to "CODE CRISPIES" across all translations
- Fix scroll to top on section page navigation
- Change HTML section color to raspberry (#c75b7a)
2026-01-16 04:32:55 +01:00
47cda00a81 fix: balance section colors - more vibrant but still readable 2026-01-16 03:59:34 +01:00
10354f1b57 fix: desaturate section colors for better readability and add section progress bars 2026-01-16 03:58:31 +01:00
a98357c713 fix: use completed color gradient for progress bar 2026-01-16 03:55:10 +01:00
26500c5672 fix: add section color coding for reset code button 2026-01-16 03:54:35 +01:00
6bb7ca051e fix: add section color coding for module pill between nav buttons 2026-01-16 03:53:55 +01:00
f5962f66d0 fix: add section color coding for code blocks on section pages 2026-01-16 03:53:12 +01:00
46ce0f357d fix: improve color coding for nav buttons, CodeMirror theme, and prev/next navigation 2026-01-16 03:51:25 +01:00
34958b11b4 feat: implement section-based color coding
- Add CSS variables for section colors (CSS violet, HTML raspberry, Tailwind cyan)
- Set data-section attribute on body based on current route
- Color code header nav links, logo, reference nav, topic links
- Color code CodeMirror editor cursor/selection
- Color code task instruction bubble
- Add reference page footer
- Section pages, lessons, and references all use matching colors
2026-01-16 03:50:01 +01:00
6d05a81e99 feat: add 4th benefit card (Free & Open Source) with translations 2026-01-16 03:44:53 +01:00
565f360c97 fix: purple-gray Coming Soon badge, raspberry HTML color 2026-01-16 03:40:05 +01:00
46f91ff02a feat: update section card colors to match completion badge theme 2026-01-16 03:39:21 +01:00
edb09ab065 fix: darken Coming Soon badge background 2026-01-16 03:37:13 +01:00
379494d6b0 fix: restore clickable Tailwind card on landing page 2026-01-16 03:36:50 +01:00
80baa4a1fc 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
8ad0d273a3 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
1f7f7bb027 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
8d67405cf1 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
983e9ca19f copy(de): update German landing page headline 2026-01-16 01:53:41 +01:00
5c96359686 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
fc67f32a99 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
792127b1c6 fix: sync language dropdown when switching via URL hash 2026-01-15 22:37:42 +01:00
3bfe7a5b01 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
a03aa09570 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
8b8e5a19ad 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
01e75688a4 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
acc738b130 copy: change hero CTA to 'Start Learning NOW' 2026-01-15 17:30:08 +01:00
840b9f254e fix: move CTA subtitle below button 2026-01-15 17:27:08 +01:00
114f4abe7c 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
390cb1bfd2 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
8c5012ab89 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
d5cf502ca1 fix: add missing --spacing-xl CSS variable for reference section spacing 2026-01-15 16:06:36 +01:00
16ba62fe84 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
50d458c1d1 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
635c3112de 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
a862e29674 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
c2dcd08ea4 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
7687360bb4 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
b9a4ff2118 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
1ec3576fe6 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
8887932e2c 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
28bd246c73 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
282580a40a 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