Commit Graph

325 Commits

Author SHA1 Message Date
28d41344d1 fix: use same button position/style for playground back button
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)
2026-01-16 14:58:25 +01:00
fb5fbe4107 feat: add back button to playground and fix dice icon color
- 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)
2026-01-16 14:55:11 +01:00
7ecc115c55 feat: add section color coding to overview page elements
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)
2026-01-16 14:45:30 +01:00
d802172e5b feat: add section color coding to lesson title h2
The lesson title now uses section-specific colors:
- CSS: purple (#9163b8)
- HTML: pink (#d45aa0)
- Tailwind: teal (#1aafb8)

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 14:44:10 +01:00
73a0c59722 fix: show total lessons instead of next milestone in progress text
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)
2026-01-16 14:27:12 +01:00
630a0a6a21 docs: update roadmap with completed milestones and lesson counts 2026-01-16 14:17:51 +01:00
be9c753a0e feat: add new lesson modules and reach 101 total lessons
New CSS Modules:
- Gradients (3 lessons): linear-gradient, radial-gradient, direction
- Filters (4 lessons): blur, grayscale, brightness, drop-shadow
- Positioning (4 lessons): relative, absolute, offset properties
- Pseudo-elements (4 lessons): ::before, ::after, content, decorative

New HTML Module:
- Semantic HTML (3 lessons): article, section, aside

Expanded Existing Modules:
- Typography: +2 lessons (text-decoration, text-shadow)
- Tables: +2 lessons (thead/tbody/tfoot, colspan)

Total lessons: 101 (up from ~66)
- Enables full milestone system (1, 5, 10, 20, 30, 50, 75, 100)
- All modules added to all 6 language stores with EN fallback
2026-01-16 14:17:13 +01:00
a7e765cb80 fix: add DROP statements to supabase-setup.sql for clean reinstalls
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
2026-01-16 14:06:14 +01:00
d2fbe0e085 feat: implement milestone-based progress system and activate new lessons
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.
2026-01-16 13:56:29 +01:00
b051974957 docs: add comprehensive roadmap for lessons and milestone system
- 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
2026-01-16 13:47:42 +01:00
68407fe12b feat: add authentication, cloud sync, and GDPR compliance
Authentication & Cloud Sync:
- Add Supabase integration for auth (email/password, Google, GitHub OAuth)
- Add cloud progress sync for logged-in users
- Add account deletion feature with confirmation dialog
- Auth is optional - anonymous users can still use localStorage

UI Improvements:
- Add dark-themed account section in sidebar
- Show user email in header when logged in
- Add signup success feedback message
- Update landing page: remove cloud sync from Coming Soon, add Code Challenges
- Update benefit text to mention optional cloud sync

GDPR Compliance:
- Add Privacy Policy dialog with full GDPR-compliant content
- Add Imprint dialog with legal contact information
- Add footer links for Privacy and Imprint
- All legal content translated to 6 languages (en, de, pl, es, ar, uk)

Files added:
- src/supabase.js - Supabase client with auth and progress sync helpers
- src/auth.js - Authentication logic and form handlers
- supabase-setup.sql - Database schema and RLS policies
2026-01-16 12:37:22 +01:00
ea57ce6d28 fix: change tracking logs to console.debug 2026-01-16 11:19:14 +01:00
0fb352c027 fix: add tracking debug logs for success and blocked states 2026-01-16 11:16:49 +01:00
9f9dc73b11 fix: add console.log to debug newsletter tracking 2026-01-16 11:16:26 +01:00
0748b23d4c 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
1b3c2b42dc 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
efbadbfb76 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
547840c3fd fix: center game controls in playground mode
🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 05:05:29 +01:00
55379c14f0 fix: remove duplicate isPlayground declaration
🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 05:03:55 +01:00
c59736c0e2 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
c0e1dab0d9 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
469f6a81a5 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
cb87adb249 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
96b71079d8 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
8513189efe 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
e65fdb0abc 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
30635a9e69 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
d408c49e45 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
817dc09a58 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
4c56342cb7 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
0a03d51e63 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
5ebb007568 fix: balance section colors - more vibrant but still readable 2026-01-16 03:59:34 +01:00
f4cdfa1e57 fix: desaturate section colors for better readability and add section progress bars 2026-01-16 03:58:31 +01:00
0fe618f551 fix: use completed color gradient for progress bar 2026-01-16 03:55:10 +01:00
f2a5156d01 fix: add section color coding for reset code button 2026-01-16 03:54:35 +01:00
848881f243 fix: add section color coding for module pill between nav buttons 2026-01-16 03:53:55 +01:00
03212da9af fix: add section color coding for code blocks on section pages 2026-01-16 03:53:12 +01:00
af74a7024d fix: improve color coding for nav buttons, CodeMirror theme, and prev/next navigation 2026-01-16 03:51:25 +01:00
8790d3c19e 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
f475d84b39 feat: add 4th benefit card (Free & Open Source) with translations 2026-01-16 03:44:53 +01:00
9753c7066c fix: purple-gray Coming Soon badge, raspberry HTML color 2026-01-16 03:40:05 +01:00
cb8852f64b feat: update section card colors to match completion badge theme 2026-01-16 03:39:21 +01:00
410833e91e fix: darken Coming Soon badge background 2026-01-16 03:37:13 +01:00
d428f394c5 fix: restore clickable Tailwind card on landing page 2026-01-16 03:36:50 +01:00
072b2ad210 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
1368f1c079 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
f1496e7232 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
3a2027e825 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
d0d8c5a2c0 copy(de): update German landing page headline 2026-01-16 01:53:41 +01:00
b9d13d064f 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