Commit Graph

238 Commits

Author SHA1 Message Date
988d2fdcfe fix: change tracking logs to console.debug 2026-01-16 11:19:14 +01:00
dbaef72c79 fix: add tracking debug logs for success and blocked states 2026-01-16 11:16:49 +01:00
ca1248abf1 fix: add console.log to debug newsletter tracking 2026-01-16 11:16:26 +01:00
1d59d18870 feat: add newsletter signup with email field and Umami tracking
- Add email input field to newsletter signup form
- Add disclaimer about max frequency and unsubscribe option
- Add newsletter translations for all 6 languages (en, de, pl, es, ar, uk)
- Update hero highlight to "Crispy Code"
- Update CTA button to "Let's get crispy!"
- Add Umami tracking for newsletter submissions
- Style newsletter form without white background
2026-01-16 11:06:42 +01:00
d167541b19 feat: add coming soon section and device notice to landing page
- Add "Coming Soon" section with Cloud Sync, Achievements, JavaScript, Frameworks
- Add device notice recommending desktop/tablet for best experience
- Add translations for all 6 languages (en, de, pl, es, ar, uk)
- Add CSS styling with responsive grid layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 10:46:12 +01:00
5a681ab502 fix: hide expected result button in playground mode
🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 05:06:17 +01:00
8caabe1ec9 fix: center game controls in playground mode
🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 05:05:29 +01:00
4305700421 fix: remove duplicate isPlayground declaration
🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 05:03:55 +01:00
2603c93f29 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
f366e2ca33 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
643a664c0f 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
b499d53c50 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
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