feat: add Playground module with full-height editor

lessons/99-playground.json

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

lessons/de/99-playground.json

@@ -0,0 +1,23 @@
+{
+	"$schema": "../../schemas/code-crispies-module-schema.json",
+	"id": "playground",
+	"title": "Playground",
+	"description": "Freier HTML & CSS Spielplatz",
+	"mode": "html",
+	"difficulty": "beginner",
+	"lessons": [
+		{
+			"id": "playground",
+			"title": "Playground",
+			"description": "",
+			"task": "",
+			"previewHTML": "",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; }",
+			"sandboxCSS": "",
+			"initialCode": "",
+			"solution": "",
+			"previewContainer": "preview-area",
+			"validations": []
+		}
+	]
+}

src/app.js

@@ -21,6 +21,7 @@ const elements = {
 	helpBtn: document.getElementById("help-btn"),
 
 	// Left panel
+	instructionsSection: document.querySelector(".instructions"),
 	editorSection: document.querySelector(".editor-section"),
 	modulePill: document.getElementById("module-pill"),
 	moduleName: document.querySelector(".module-name"),
@@ -384,6 +385,16 @@ function loadCurrentLesson() {
 
 	const lesson = engineState.lesson;
 	const mode = lesson.mode || engineState.module?.mode || "css";
+	const isPlayground = engineState.module.id === "playground";
+
+	// Handle playground mode - hide instructions, full height editor
+	if (isPlayground) {
+		elements.instructionsSection?.classList.add("hidden");
+		elements.editorSection?.classList.add("playground-mode");
+	} else {
+		elements.instructionsSection?.classList.remove("hidden");
+		elements.editorSection?.classList.remove("playground-mode");
+	}
 
 	// Add transition class for smooth content swap
 	elements.editorSection?.classList.add("transitioning");

src/config/lessons.js

@@ -19,6 +19,7 @@ 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";
@@ -36,6 +37,7 @@ 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 = [
@@ -60,7 +62,9 @@ const moduleStoreEN = [
 	flexboxEN,
 	responsiveEN,
 	// CSS Animationen
-	transitionsAnimationsEN
+	transitionsAnimationsEN,
+	// Playground
+	playgroundEN
 ];
 
 // German module store - ordered by learning path
@@ -86,7 +90,9 @@ const moduleStoreDE = [
 	flexboxDE,
 	responsiveDE,
 	// CSS Animationen
-	transitionsAnimationsDE
+	transitionsAnimationsDE,
+	// Playground
+	playgroundDE
 ];
 
 /**

src/main.css

@@ -395,6 +395,12 @@ code, kbd {
 	position: relative;
 }
 
+/* Playground mode - full height editor */
+.editor-section.playground-mode {
+	flex: 1;
+	min-height: 0;
+}
+
 .code-editor {
 	flex: 1;
 	display: flex;