- 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)
Playground mode was falling through to the CSS branch, wrapping user code
in a <style> tag. This prevented HTML elements and font styles from rendering
correctly. Now playground mode is treated like HTML mode, allowing templates
with <style> blocks and HTML content to work properly.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Add font-family: system-ui, sans-serif to all template bodies
- Wrap pricing cards in .pricing flex container
- Wrap animation boxes in .animation-demo flex container
- Wrap flexbox layout in .layout container
- Simplify navigation (fewer links to fit preview)
- Reduce sizes to better fit preview area
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Reduce welcome module from 3 lessons to 1 concise intro
- Reduce goodbye module from 3 lessons to 1 concise outro
- Create standalone playground module at end of module list
- Update all translated welcome files (de, pl, es, ar, uk)
- Playground now appears after goodbye, less prominent
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Use CodeMirror in read-only mode for code examples
- Auto-detect CSS vs HTML based on content
- Clean up views when navigating between sections
- Add transparent background to blend with code-block container
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Add side-by-side layout for section pages (text left, code right)
- Include educational content with code examples for CSS, HTML, Tailwind
- Add section overviews explaining each technology
- Make header level pill clickable to return to last lesson
- Update landing page with "How It Works" steps and features section
- Improve code block readability with GitHub-dark color scheme
- Add prominent topic links with SEO-friendly accessible text
- Add responsive grid layout that stacks on mobile
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Add share button with SVG link icon in lesson title row
- Create share dialog with copy URL functionality
- Implement URL hash-based routing for lesson navigation
- Support browser back/forward navigation
- Add i18n translations for share dialog in all languages
- Position share button between title and completion badge
- Add RTL support for title row layout
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Add lesson indicator pill to header (visible on desktop only)
- Logo stays centered, pill on left with burger menu
- Replace emoji arrows with CSS triangles for iOS compatibility
- Use native <details>/<summary> for expand/collapse
- Update tests for new implementation
- Add scale transition (50% → 100%) to crispy badge animation
- Rotate through random encouraging quotes on completion
- Keep gradient border visible after completing a lesson
- Match completion badge gradient colors to glow effect
- Improve bounce animation with elastic bezier curve
- Border increased from 4px to 6px
- Glow layer uses same conic-gradient with 20px blur
- Reduced preview-frame padding to compensate
- Higher glow opacity (0.8) for more vibrant effect
Based on https://codetv.dev/blog/animated-css-gradient-border
- Uses @property for smooth angle interpolation
- Two backgrounds: padding-box + border-box approach
- Blurred glow layer synced with border rotation
- Works in Chrome, Safari, Edge (not Firefox)
Use transform: rotate(-360deg) to physically spin the conic-gradient
around the preview border. Two layers:
- Blurred glow layer (z-index: -2)
- Crisp border using mask-composite (z-index: -1)
The gradient colors (purple/magenta/cyan/violet) now visually travel
anti-clockwise around the border like Gemini's UI.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Previous implementation used CSS @property which isn't supported in
Firefox. New approach uses animated box-shadow with three layers:
- 3px solid border cycling through colors
- 15px inner glow
- 30px outer glow
Colors cycle: purple → magenta → cyan → violet → purple, then fade out.
Works in all modern browsers.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Remove bouncing "CRISPY" text animation (dvd-bounce)
- Add rotating conic-gradient border with glow effect
- Colors: purple (#9b59b6), magenta (#e040fb), cyan (#00bcd4), violet (#7c4dff)
- Animation plays once (2.5s) then fades out so students can continue
- Update success colors from green to purple theme:
- success-color: #9b6dd4
- success-color-dark: #7c4dff
- success-color-light: #c9b8e8
- Uses CSS @property for animating conic-gradient angle
- Two layers: blurred glow + crisp border using mask-composite
🤖 Generated with [Claude Code](https://claude.com/claude-code)
