- Add computeLessonDifficulty function to determine lesson difficulty
based on selector complexity (easy/medium/hard)
- Display difficulty badge with bar indicator in lesson title row
- Add mobile navigation links (CSS, HTML, Tailwind) to sidebar
- Add mobile auth trigger button in sidebar
- Redesign settings section with card layout and native toggles
- Add difficulty translations for all 6 languages
- Fix module pill overflow on narrow screens
- Progress text now says "X of Y lessons completed" in all languages
- Each milestone badge shows a portion of the gradient based on position
- Progress bar shows full gradient, cropped to current progress percentage
🤖 Generated with [Claude Code](https://claude.com/claude-code)
The strong and code elements in .section-overview now use
section-specific colors (purple/pink/teal) instead of default purple.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Previous button stays "Previous" and works the same everywhere.
Only difference in playground: Next button is hidden.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
The Back button in playground now works the same as Previous button
on other pages - it navigates to the previous lesson.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Instead of a separate back button, the Previous button is repurposed
as "Back" in playground mode - same position (left), same style.
Only the Next button is hidden in playground mode.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Add back button to game-controls (shown only in playground mode)
- Replace dice img with inline SVG using currentColor for consistent styling
- Add SVG sizing rule to .btn-icon
- Add "back" translation to all 6 languages
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Topic headings (h2, h3) and inline code now use section-specific colors:
- CSS: purple
- HTML: pink
- Tailwind: teal
Uses CSS custom properties (--section-color-dark, --section-color-rgb)
that are already set per section.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
The progress text was showing "0 of 1" (next milestone) which was confusing.
Now shows "0 of 101" (total lessons) while milestone dots show the milestone progression.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
TODO: Configure OAuth providers in Supabase dashboard:
- Google: Add Client ID and Secret from Google Cloud Console
- GitHub: Add Client ID and Secret from GitHub Developer Settings
- Set redirect URLs in Authentication → URL Configuration
Progress System:
- Replace percentage-based progress with milestone markers (1, 5, 10, 20, 30, 50, 75, 100)
- Add visual milestone indicators with reached/current/next states
- Add celebration animation when milestones are reached
- Update progress bar to show progress toward next milestone
- Add progressTextMilestone i18n key for all 6 languages
New Lessons Activated:
- HTML Dialog (native modal dialogs)
- HTML Progress & Meter (indicator elements)
- HTML Fieldset (form grouping)
- HTML Datalist (autocomplete inputs)
This adds 10 new lessons across all 6 languages, bringing total from ~66 to ~76.
- Analyze MDN HTML/CSS documentation for new lesson ideas
- Design milestone-based progress system (1, 5, 10, 20, 30, 50, 75, 100)
- Document 13 inactive lesson files ready to activate
- Plan 34 new lessons to reach 100 total
- Include technical implementation notes
- 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
- 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)
- 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)
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)
