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)
- 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)
- 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)
- 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
- 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)
