The impl-feature pipeline changed the default color scheme from
lilac/purple (#5e4b8b, #9163b8) to pink (#c9507a, #d95a8a).
This was unintentional — lilac was the chosen brand color.
Reverted: primary, section defaults, bg tints, success colors,
gradients, nav highlights, and all hardcoded rgba values back to
the original purple palette.
Restricts script sources to self and known CDNs, connect sources to
self and Supabase, blocks unauthorized resource loading. Allows
unsafe-inline for styles (CodeMirror requirement) and blob: for
sandboxed preview iframes.
Addresses SEC-5 (HIGH) from security audit.
Add sandbox='allow-scripts' to all preview iframes. This isolates
user-executed code from the parent page's localStorage (auth tokens),
cookies, and DOM. Switch from document.write() to srcdoc attribute
since sandboxed iframes can't use document.write().
Addresses SEC-1 (critical) from security audit.
- Comment out Tailwind nav links in header and sidebar
- Comment out Tailwind card on landing page
- Remove tailwind from router SECTIONS array
- Remove tailwind from landing page progress tracking
Tailwind content and styles remain in codebase for easy re-enabling.
- Add markdown-basics module with lessons for headings, text formatting,
lists, links, and inline code
- Integrate markdown section with blue color theme (#5b8dd9)
- Add markdown mode support in CodeEditor and LessonEngine
- Add markdown preview rendering using marked library
- Add section overview page with educational content
- Add markdown reference page with syntax guide
- Add i18n translations for 6 languages (EN, DE, PL, ES, AR, UK)
- Update router to recognize #markdown as section route
- Add all section-specific CSS styles for markdown theme
- Add initWithContext() method for prefix/suffix initialization
- Implement changeFilter to prevent edits in read-only zones
- Add transactionFilter to constrain cursor to editable area
- Add visual decorations with cm-readonly-zone class
- Update getValue/setValue to handle editable portions correctly
- 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)
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.
- 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
