Commit Graph

276 Commits

Author SHA1 Message Date
c3655da9ff chore: temporarily disable Tailwind CSS section
- 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.
2026-01-25 15:40:53 +01:00
9068287694 feat: add Markdown learning module with 8 beginner lessons
- 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
2026-01-25 11:27:07 +01:00
8ed6a908a8 feat(app): pass codePrefix/codeSuffix to editor on lesson load
- Update loadCurrentLesson() to pass prefix/suffix to editor
- Use getEditableValue() in runCode() to get only user code
2026-01-25 02:00:07 +01:00
3a1c0a36f9 style: add styling for read-only editor zones
Dimmed appearance with subtle background for codePrefix/codeSuffix regions.
2026-01-25 01:59:59 +01:00
c1b627674d feat(editor): add read-only zones support for codePrefix/codeSuffix
- 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
2026-01-25 00:39:09 +01:00
c8a1172eba fix: restore gradient scaling and distribute milestone colors evenly 2026-01-16 23:45:19 +01:00
a471de9566 fix: milestone colors now correctly reflect position in 0-100 gradient 2026-01-16 23:40:38 +01:00
f5151706c1 fix: progress bar now shows milestone progress instead of overall progress 2026-01-16 23:21:41 +01:00
044b14c1b4 fix: shorten German reset progress label to 'Fortschritt' 2026-01-16 22:01:15 +01:00
2f85df98cb feat: add lesson difficulty indicators and improve mobile sidebar
- 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
2026-01-16 21:47:47 +01:00
cd43482048 fix: update German CTA to 'Jetzt gleich anfangen' 2026-01-16 16:53:38 +01:00
2abc995a70 fix: update German landing hero text to 'Lerne Web Entwicklung mit CODE CRISPIES' 2026-01-16 16:41:17 +01:00
ca95f8eb7d feat: redesign sidebar progress to show milestone progress and total lessons 2026-01-16 16:37:23 +01:00
10e067c06b fix: show Next button disabled in playground instead of hiding it 2026-01-16 15:32:21 +01:00
ca526052f5 fix: remove centered class toggle - grid layout handles positioning 2026-01-16 15:31:17 +01:00
cafeba2c6b fix: add gap between game controls grid items 2026-01-16 15:29:44 +01:00
3990b69f42 fix: use CSS grid for game controls to keep pill centered when next is hidden 2026-01-16 15:28:45 +01:00
ee21a2bd09 fix: change 'Crispy Code' to 'Code Crispy' in landing page title 2026-01-16 15:27:14 +01:00
a89a078da4 fix: move device notice under section cards on landing page 2026-01-16 15:26:10 +01:00
b5b7188bf9 fix: make copyright year dynamic in footer 2026-01-16 15:25:04 +01:00
c3c793414e feat: add more Umami tracking events
New events:
- run_code (with module, lesson, playground flag)
- logo_click
- privacy_open
- imprint_open
- setting_change (with setting name and value)
2026-01-16 15:18:23 +01:00
1f439307e5 feat: add Umami analytics tracking for auth events
Track the following events:
- auth_login (with method: email, github, google)
- auth_signup (with method: email)
- auth_logout
- auth_delete_account
2026-01-16 15:15:50 +01:00
00b018ec3a feat: keep preview glow permanently after animation completes 2026-01-16 15:14:43 +01:00
dc0c9c4fa6 fix: keep preview glow visible after animation ends 2026-01-16 15:11:39 +01:00
5d71c1f91a feat: improve progress display with gradient milestones
- 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)
2026-01-16 15:08:57 +01:00
3e92464396 fix: remove border-left from nav-link-ref, use margin instead 2026-01-16 15:05:46 +01:00
3b1e4dc7c7 feat: add section color coding to overview first paragraphs
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)
2026-01-16 15:05:12 +01:00
d26e1447ad fix: clean up OAuth debug logging
Remove temporary console.log statements used during OAuth debugging.
2026-01-16 15:04:24 +01:00
41fb8208d2 fix: simplify playground navigation - just hide Next button
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)
2026-01-16 15:01:44 +01:00
578be3de2e fix: playground back button goes to previous lesson
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)
2026-01-16 15:00:13 +01:00
33b4b64f13 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
f1fa285c56 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
21fda0a851 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
870e91aa80 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
89340af322 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
9cf313001b 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
b693013743 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
b0b39e2f02 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
988d2fdcfe fix: change tracking logs to console.debug 2026-01-16 11:19:14 +01:00
dbaef72c79 fix: add tracking debug logs for success and blocked states 2026-01-16 11:16:49 +01:00
ca1248abf1 fix: add console.log to debug newsletter tracking 2026-01-16 11:16:26 +01:00
1d59d18870 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
d167541b19 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
5a681ab502 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
8caabe1ec9 fix: center game controls in playground mode
🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 05:05:29 +01:00
4305700421 fix: remove duplicate isPlayground declaration
🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 05:03:55 +01:00
2603c93f29 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
f366e2ca33 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
643a664c0f 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
b499d53c50 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