Commit Graph

307 Commits

Author SHA1 Message Date
55379c14f0 fix: remove duplicate isPlayground declaration
🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 05:03:55 +01:00
c59736c0e2 fix: hide lesson counter in playground mode
- Hide level indicator (1/1) in playground mode
- Show only module title in header pill for playground
- Keep nav buttons hidden in playground

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 05:02:40 +01:00
c0e1dab0d9 fix: hide prev/next buttons in playground mode
🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 05:01:15 +01:00
469f6a81a5 refactor: make CSS purple the default section color
- Update :root section colors to CSS purple (#9163b8)
- Remove redundant [data-section="css"] overrides
- CSS section now uses fallback colors automatically

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 05:00:00 +01:00
cb87adb249 fix: update all section color references to balanced colors
Update all rgba and hex values for hover/active states:
- CSS: rgba(145, 99, 184), #724a95
- HTML: rgba(212, 90, 160), #b24485
- Tailwind: rgba(26, 175, 184), #0d8f96

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 04:59:01 +01:00
96b71079d8 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
8513189efe 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
e65fdb0abc 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
30635a9e69 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
d408c49e45 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
817dc09a58 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
4c56342cb7 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
0a03d51e63 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
5ebb007568 fix: balance section colors - more vibrant but still readable 2026-01-16 03:59:34 +01:00
f4cdfa1e57 fix: desaturate section colors for better readability and add section progress bars 2026-01-16 03:58:31 +01:00
0fe618f551 fix: use completed color gradient for progress bar 2026-01-16 03:55:10 +01:00
f2a5156d01 fix: add section color coding for reset code button 2026-01-16 03:54:35 +01:00
848881f243 fix: add section color coding for module pill between nav buttons 2026-01-16 03:53:55 +01:00
03212da9af fix: add section color coding for code blocks on section pages 2026-01-16 03:53:12 +01:00
af74a7024d fix: improve color coding for nav buttons, CodeMirror theme, and prev/next navigation 2026-01-16 03:51:25 +01:00
8790d3c19e 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
f475d84b39 feat: add 4th benefit card (Free & Open Source) with translations 2026-01-16 03:44:53 +01:00
9753c7066c fix: purple-gray Coming Soon badge, raspberry HTML color 2026-01-16 03:40:05 +01:00
cb8852f64b feat: update section card colors to match completion badge theme 2026-01-16 03:39:21 +01:00
410833e91e fix: darken Coming Soon badge background 2026-01-16 03:37:13 +01:00
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