refactor: merge playground into welcome module

- Rename welcome lessons to Get Started, Overview, Playground
- Remove separate playground module files
- Fix playground detection to check lesson.mode instead of module.id

lessons/00-welcome.json

@@ -7,8 +7,8 @@
 	"difficulty": "beginner",
 	"lessons": [
 		{
-			"id": "welcome",
+			"id": "get-started",
-			"title": "Welcome!",
+			"title": "Get Started",
 			"description": "<strong>Code Crispies</strong> is a free, open-source platform for learning web development through hands-on exercises. No account required!<br><br><strong>What you'll learn:</strong><br>• <strong>HTML</strong> - Semantic elements, forms, tables, SVG (<em>HTML Block & Inline</em>, <em>HTML Forms</em>, <em>HTML Tables</em>)<br>• <strong>CSS</strong> - Selectors, box model, flexbox, animations (<em>CSS Selectors</em>, <em>CSS Box Model</em>, <em>CSS Flexbox</em>)<br>• <strong>Responsive Design</strong> - Media queries and mobile-first layouts<br><br><strong>How it works:</strong><br>1. Read the task in the left panel<br>2. Write code in the editor<br>3. See live results in the preview<br>4. Get instant feedback with hints<br><br><strong>Keyboard shortcuts:</strong> <kbd>Ctrl+Z</kbd> to undo, <kbd>Ctrl+Shift+Z</kbd> to redo<br><br><strong>More resources:</strong><br>• <a href=\"https://nextlevelshit.github.io/html-over-js/\" target=\"_blank\">HTML over JS</a> - Native HTML vs JavaScript solutions<br>• <a href=\"https://nextlevelshit.github.io/web-engineering-mandala/\" target=\"_blank\">Web Engineering Mandala</a> - JavaScript technology roadmap",
 			"task": "Hello World",
 			"previewHTML": "",
@@ -26,8 +26,8 @@
 			]
 		},
 		{
-			"id": "get-started",
+			"id": "overview",
-			"title": "Good Luck!",
+			"title": "Overview",
 			"description": "<strong>You're ready!</strong> Open the menu (☰) to explore all modules.<br><br><strong>Recommended learning path:</strong><br>1. <em>HTML Block & Inline</em> - Understand container vs inline elements<br>2. <em>HTML Forms</em> - Build interactive forms with validation<br>3. <em>CSS Selectors</em> - Target elements precisely<br>4. <em>CSS Box Model</em> - Master padding, margin, borders<br>5. <em>CSS Flexbox</em> - Create flexible layouts<br>6. <em>CSS Animations</em> - Add motion and transitions<br><br><strong>Tips:</strong><br>• Use <em>Show Expected</em> to see the target result<br>• Your progress is saved automatically<br>• Try Emmet in HTML mode: <kbd>ul>li*3</kbd> + Tab<br><br><strong>Open Source:</strong><br>• <a href=\"https://git.librete.ch/public/code-crispies\" target=\"_blank\">Gitea (Source)</a> · <a href=\"https://github.com/nextlevelshit/code-crispies\" target=\"_blank\">GitHub (Mirror)</a><br>• Made by <a href=\"https://librete.ch\" target=\"_blank\">LibreTECH</a> · <a href=\"https://www.linkedin.com/in/michael-werner-czechowski\" target=\"_blank\">Michael Czechowski</a>",
 			"task": "Click Next to continue",
 			"previewHTML": "<p>Hello World! 🌍</p><p>Hallo Welt!</p><p>Bonjour le monde!</p><p>¡Hola Mundo!</p><p>Ciao Mondo!</p><p>Olá Mundo!</p><p>こんにちは世界!</p><p>你好世界!</p><p>안녕 세상!</p><p>Привет мир!</p><p dir=\"rtl\">שלום עולם!</p><p dir=\"rtl\">مرحبا بالعالم!</p>",
@@ -43,6 +43,20 @@
 					"message": "Click Next to continue"
 				}
 			]
+		},
+		{
+			"id": "playground",
+			"title": "Playground",
+			"mode": "playground",
+			"description": "",
+			"task": "",
+			"previewHTML": "",
+			"previewBaseCSS": "",
+			"sandboxCSS": "",
+			"initialCode": "<style>\n  body {\n    font-family: system-ui, sans-serif;\n    padding: 20px;\n  }\n</style>\n\n<h1>Hello World</h1>\n<p>Start coding!</p>",
+			"solution": "",
+			"previewContainer": "preview-area",
+			"validations": []
 		}
 	]
 }

lessons/99-playground.json

@@ -1,23 +0,0 @@
-{
-	"$schema": "../schemas/code-crispies-module-schema.json",
-	"id": "playground",
-	"title": "Playground",
-	"description": "Free-form HTML & CSS playground",
-	"mode": "playground",
-	"difficulty": "beginner",
-	"lessons": [
-		{
-			"id": "playground",
-			"title": "Playground",
-			"description": "",
-			"task": "",
-			"previewHTML": "",
-			"previewBaseCSS": "",
-			"sandboxCSS": "",
-			"initialCode": "<style>\n  body {\n    font-family: system-ui, sans-serif;\n    padding: 20px;\n  }\n</style>\n\n<h1>Hello World</h1>\n<p>Start coding!</p>",
-			"solution": "",
-			"previewContainer": "preview-area",
-			"validations": []
-		}
-	]
-}

lessons/de/00-welcome.json

@@ -7,8 +7,8 @@
 	"difficulty": "beginner",
 	"lessons": [
 		{
-			"id": "welcome",
+			"id": "get-started",
-			"title": "Willkommen!",
+			"title": "Los geht's",
 			"description": "<strong>Code Crispies</strong> ist eine kostenlose Open-Source-Plattform zum Erlernen von Webentwicklung durch praktische Übungen. Kein Konto erforderlich!<br><br><strong>Was du lernst:</strong><br>• <strong>HTML</strong> - Semantische Elemente, Formulare, Tabellen, SVG (<em>HTML Block & Inline</em>, <em>HTML Formulare</em>, <em>HTML Tabellen</em>)<br>• <strong>CSS</strong> - Selektoren, Box-Model, Flexbox, Animationen (<em>CSS Selektoren</em>, <em>CSS Box-Model</em>, <em>CSS Flexbox</em>)<br>• <strong>Responsive Design</strong> - Media Queries und Mobile-First Layouts<br><br><strong>So funktioniert's:</strong><br>1. Lies die Aufgabe im linken Bereich<br>2. Schreibe Code im Editor<br>3. Sieh Live-Ergebnisse in der Vorschau<br>4. Bekomme sofortiges Feedback mit Hinweisen<br><br><strong>Tastenkürzel:</strong> <kbd>Strg+Z</kbd> rückgängig, <kbd>Strg+Umschalt+Z</kbd> wiederholen<br><br><strong>Weitere Ressourcen:</strong><br>• <a href=\"https://nextlevelshit.github.io/html-over-js/\" target=\"_blank\">HTML over JS</a> - Native HTML vs JavaScript-Lösungen<br>• <a href=\"https://nextlevelshit.github.io/web-engineering-mandala/\" target=\"_blank\">Web Engineering Mandala</a> - JavaScript Technologie-Roadmap",
 			"task": "Hallo Welt",
 			"previewHTML": "",
@@ -26,8 +26,8 @@
 			]
 		},
 		{
-			"id": "get-started",
+			"id": "overview",
-			"title": "Viel Erfolg!",
+			"title": "Übersicht",
 			"description": "<strong>Du bist bereit!</strong> Öffne das Menü (☰) um alle Module zu erkunden.<br><br><strong>Empfohlener Lernpfad:</strong><br>1. <em>HTML Block & Inline</em> - Container vs Inline-Elemente verstehen<br>2. <em>HTML Formulare</em> - Interaktive Formulare mit Validierung erstellen<br>3. <em>CSS Selektoren</em> - Elemente präzise ansprechen<br>4. <em>CSS Box-Model</em> - Padding, Margin, Borders meistern<br>5. <em>CSS Flexbox</em> - Flexible Layouts erstellen<br>6. <em>CSS Animationen</em> - Bewegung und Übergänge hinzufügen<br><br><strong>Tipps:</strong><br>• Nutze <em>Lösung einblenden</em> um das Zielergebnis zu sehen<br>• Dein Fortschritt wird automatisch gespeichert<br>• Probiere Emmet im HTML-Modus: <kbd>ul>li*3</kbd> + Tab<br><br><strong>Open Source:</strong><br>• <a href=\"https://git.librete.ch/public/code-crispies\" target=\"_blank\">Gitea (Source)</a> · <a href=\"https://github.com/nextlevelshit/code-crispies\" target=\"_blank\">GitHub (Mirror)</a><br>• Entwickelt von <a href=\"https://librete.ch\" target=\"_blank\">LibreTECH</a> · <a href=\"https://www.linkedin.com/in/michael-werner-czechowski\" target=\"_blank\">Michael Czechowski</a>",
 			"task": "Klicke auf Weiter",
 			"previewHTML": "<p>Hello World! 🌍</p><p>Hallo Welt!</p><p>Bonjour le monde!</p><p>¡Hola Mundo!</p><p>Ciao Mondo!</p><p>Olá Mundo!</p><p>こんにちは世界!</p><p>你好世界!</p><p>안녕 세상!</p><p>Привет мир!</p><p dir=\"rtl\">שלום עולם!</p><p dir=\"rtl\">مرحبا بالعالم!</p>",
@@ -43,6 +43,20 @@
 					"message": "Klicke auf Weiter"
 				}
 			]
+		},
+		{
+			"id": "playground",
+			"title": "Playground",
+			"mode": "playground",
+			"description": "",
+			"task": "",
+			"previewHTML": "",
+			"previewBaseCSS": "",
+			"sandboxCSS": "",
+			"initialCode": "<style>\n  body {\n    font-family: system-ui, sans-serif;\n    padding: 20px;\n  }\n</style>\n\n<h1>Hallo Welt</h1>\n<p>Los geht's!</p>",
+			"solution": "",
+			"previewContainer": "preview-area",
+			"validations": []
 		}
 	]
 }

lessons/de/99-playground.json

@@ -1,23 +0,0 @@
-{
-	"$schema": "../../schemas/code-crispies-module-schema.json",
-	"id": "playground",
-	"title": "Playground",
-	"description": "Freier HTML & CSS Spielplatz",
-	"mode": "playground",
-	"difficulty": "beginner",
-	"lessons": [
-		{
-			"id": "playground",
-			"title": "Playground",
-			"description": "",
-			"task": "",
-			"previewHTML": "",
-			"previewBaseCSS": "",
-			"sandboxCSS": "",
-			"initialCode": "<style>\n  body {\n    font-family: system-ui, sans-serif;\n    padding: 20px;\n  }\n</style>\n\n<h1>Hallo Welt</h1>\n<p>Los geht's!</p>",
-			"solution": "",
-			"previewContainer": "preview-area",
-			"validations": []
-		}
-	]
-}

src/app.js

@@ -390,7 +390,7 @@ function loadCurrentLesson() {
 
 	const lesson = engineState.lesson;
 	const mode = lesson.mode || engineState.module?.mode || "css";
-	const isPlayground = engineState.module.id === "playground";
+	const isPlayground = lesson.mode === "playground";
 
 	// Handle playground mode - hide instructions, full height editor
 	if (isPlayground) {
@@ -581,7 +581,7 @@ function resetCode() {
 function runCode() {
 	const userCode = codeEditor ? codeEditor.getValue() : "";
 	const engineState = lessonEngine.getCurrentState();
-	const isPlayground = engineState.module?.id === "playground";
+	const isPlayground = engineState.lesson?.mode === "playground";
 
 	// Rotate the Run button icon
 	const runButtonImg = document.querySelector("#run-btn img");

src/config/lessons.js

@@ -19,7 +19,6 @@ import htmlTablesEN from "../../lessons/30-html-tables.json";
 import htmlMarqueeEN from "../../lessons/31-html-marquee.json";
 import htmlSvgEN from "../../lessons/32-html-svg.json";
 import flexboxEN from "../../lessons/flexbox.json";
-import playgroundEN from "../../lessons/99-playground.json";
 
 // German lesson imports
 import welcomeDE from "../../lessons/de/00-welcome.json";
@@ -37,7 +36,6 @@ import htmlTablesDE from "../../lessons/de/30-html-tables.json";
 import htmlMarqueeDE from "../../lessons/de/31-html-marquee.json";
 import htmlSvgDE from "../../lessons/de/32-html-svg.json";
 import flexboxDE from "../../lessons/de/flexbox.json";
-import playgroundDE from "../../lessons/de/99-playground.json";
 
 // English module store - ordered by learning path
 const moduleStoreEN = [
@@ -62,9 +60,7 @@ const moduleStoreEN = [
 	flexboxEN,
 	responsiveEN,
 	// CSS Animationen
-	transitionsAnimationsEN,
+	transitionsAnimationsEN
-	// Playground
-	playgroundEN
 ];
 
 // German module store - ordered by learning path
@@ -90,9 +86,7 @@ const moduleStoreDE = [
 	flexboxDE,
 	responsiveDE,
 	// CSS Animationen
-	transitionsAnimationsDE,
+	transitionsAnimationsDE
-	// Playground
-	playgroundDE
 ];
 
 /**