Commit Graph

118 Commits

Author SHA1 Message Date
b9c90112a3 feat: add JavaScript learning section with starter lessons and sidebar section headers
Implementation following plan:
- S01: Foundation: schema, section config, and router
- S02: Install CodeMirror JavaScript language support
- S03: Create JavaScript lesson JSON files (variables, DOM, events)
- S04: Register JavaScript lessons in module stores
- S05: Add JavaScript validation logic
- S06: Add JavaScript mode to LessonEngine preview rendering
- S07: Add JavaScript mode to CodeEditor
- S08: Update app.js for JavaScript mode support
- S09: Update navigation HTML and CSS theming for JavaScript section
- S10: Add section grouping headers in sidebar navigation
- S11: Update and write tests
2026-03-28 20:22:50 +01:00
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
c8a1172eba fix: restore gradient scaling and distribute milestone colors evenly 2026-01-16 23:45:19 +01:00
f5151706c1 fix: progress bar now shows milestone progress instead of overall progress 2026-01-16 23:21:41 +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
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
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
00b018ec3a feat: keep preview glow permanently after animation completes 2026-01-16 15:14:43 +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
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
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
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
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
d6ff5edf5c 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
e866b0ca1c 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
c0db8bba48 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
46ce0f357d fix: improve color coding for nav buttons, CodeMirror theme, and prev/next navigation 2026-01-16 03:51:25 +01:00
34958b11b4 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
80baa4a1fc 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
8ad0d273a3 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
1f7f7bb027 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
8d67405cf1 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
5c96359686 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
792127b1c6 fix: sync language dropdown when switching via URL hash 2026-01-15 22:37:42 +01:00
3bfe7a5b01 fix: fully apply language when switching via URL hash
- Reload lesson modules in new language
- Re-render sidebar module list
- Update progress display
- Now #de, #pl etc. properly translate entire UI
2026-01-15 20:57:08 +01:00
a03aa09570 feat: add URL-based language switching (#de, #pl, #es, #ar, #uk)
- Visit #de to switch to German and go to home
- Visit #pl for Polish, #es for Spanish, #ar for Arabic, #uk for Ukrainian
- Language is persisted to localStorage
- URL is cleaned up after switching (hash removed)
2026-01-15 17:47:20 +01:00
8b8e5a19ad feat: add collapsible reference tables for sections with >5 rows
- Tables with more than 5 rows now show first 5 with 'Show N more...' toggle
- Uses native <details>/<summary> for expand/collapse
- Keeps reference pages cleaner by reducing visual noise from long sections
- Box Model, Typography, Transitions now collapsed by default
2026-01-15 17:42:03 +01:00
114f4abe7c feat: redesign landing page with SEO enhancements
- Add comprehensive SEO meta tags (Open Graph, Twitter Cards, JSON-LD)
- Restructure landing page with Khan Academy-style "Why It Works" section
- Replace "How It Works" + "Features" with 3 benefit cards:
  - Learn by Doing (code icon)
  - Practice at Your Pace (progress icon)
  - Master Real Skills (tools icon)
- Add "Explore Learning Paths" section with learning tracks
- Implement dynamic meta tag updates for route-based SEO
- Update page title and descriptions based on current route
- Add new CSS styles for benefit cards, learning paths, and enhanced CTA

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 17:26:02 +01:00
390cb1bfd2 feat: complete reference coverage and UX improvements
Reference pages:
- Add min-width, min-height, border-collapse to Box Model
- Add blockquote to Text Content
- Add new Semantic Inline section (time, mark, small, abbr, kbd, sub, sup, ins, del)

UX improvements:
- Rename "Free Coding" to "HTML & CSS Editor" in Playground
- Keep Welcome and Playground modules always expanded in sidebar

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 16:26:20 +01:00
8c5012ab89 feat: extend references and enhance analytics tracking
Reference pages:
- Add Transitions & Animations section (transition-*, animation-*)
- Add CSS Variables section (--*, var(), :root)
- Add Interactive Elements section (<details>, <summary>, <dialog>, <progress>, <meter>, <datalist>)

Analytics tracking (Umami v2):
- Add lesson_nav tracking for next/prev navigation
- Add lesson_select tracking for sidebar lesson clicks
- Add reset_code tracking for code resets
- Add help_open tracking for help dialog
- Add sidebar_open tracking for menu opens
- Add share_open and share_copy tracking for sharing

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 16:13:31 +01:00
16ba62fe84 feat: add cross-reference links throughout the website
- Add "See also" links to all 5 reference pages connecting related content
- Add reference links to section content (Selectors, Flexbox, Grid, HTML)
- Add inline links to landing page features section
- Add quick navigation links to help dialog
- Add CSS styling for .ref-see-also, .topic-ref, .section-see-also, .help-nav-links
- Fix spacing between reference sections (add margin-top)

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 16:03:18 +01:00
50d458c1d1 feat: add Reference link to main navigation
- Add Reference nav link with subtle separator styling
- Update nav highlight to show active state on reference pages

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 15:54:43 +01:00
635c3112de feat: implement reference/cheatsheet pages
- Add reference page container to index.html with tab navigation
- Create comprehensive cheatsheets for CSS properties, selectors,
  flexbox, grid, and HTML elements
- Add showReferencePage function with CodeMirror syntax highlighting
- Add reference_view analytics tracking
- Style reference tables, lists, and navigation with responsive design

Routes: #reference/css, #reference/selectors, #reference/flexbox,
        #reference/grid, #reference/html

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 15:53:05 +01:00