feat: add complete German translation of the website

- Add German HTML entry point (index.de.html) - Add German app.js with translated UI strings (app.de.js) - Add German lesson config (lessons.de.js) - Add German translations of all 6 lesson modules: - HTML Elements: Block vs Inline - HTML Forms: Basic Inputs - HTML Forms: Validation - CSS: Basic Selectors - CSS: Advanced Selectors - Tailwind: Basics All IDs, variable names, and code examples remain in English. Only user-facing text has been translated to German. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-24 00:32:07 +01:00
parent 31664c4fe9
commit 991965b78e
9 changed files with 2373 additions and 0 deletions
--- a/src/app.de.js
+++ b/src/app.de.js
@@ -0,0 +1,611 @@
+import { LessonEngine } from "./impl/LessonEngine.js";
+import { CodeEditor } from "./impl/CodeEditor.js";
+import { renderLesson, renderModuleList, renderLevelIndicator, updateActiveLessonInSidebar } from "./helpers/renderer.js";
+import { loadModules } from "./config/lessons.de.js";
+
+// Simplified state - LessonEngine now manages lesson state and progress
+const state = {
+	userSettings: {
+		disableFeedbackErrors: false
+	},
+	showExpected: false
+};
+
+// DOM elements - updated for new layout
+const elements = {
+	// Header
+	menuBtn: document.getElementById("menu-btn"),
+	helpBtn: document.getElementById("help-btn"),
+
+	// Left panel
+	lessonTitle: document.getElementById("lesson-title"),
+	lessonDescription: document.getElementById("lesson-description"),
+	taskInstruction: document.getElementById("task-instruction"),
+	codeInput: document.getElementById("code-input"),
+	runBtn: document.getElementById("run-btn"),
+	undoBtn: document.getElementById("undo-btn"),
+	redoBtn: document.getElementById("redo-btn"),
+	resetCodeBtn: document.getElementById("reset-code-btn"),
+	hintArea: document.getElementById("hint-area"),
+	editorContent: document.querySelector(".editor-content"),
+	codeEditor: document.querySelector(".code-editor"),
+
+	// Right panel
+	previewArea: document.getElementById("preview-area"),
+	showExpectedBtn: document.getElementById("show-expected-btn"),
+	expectedOverlay: document.getElementById("expected-overlay"),
+	previewWrapper: document.querySelector(".preview-wrapper"),
+	prevBtn: document.getElementById("prev-btn"),
+	nextBtn: document.getElementById("next-btn"),
+	levelIndicator: document.getElementById("level-indicator"),
+
+	// Sidebar
+	sidebarDrawer: document.getElementById("sidebar-drawer"),
+	sidebarBackdrop: document.getElementById("sidebar-backdrop"),
+	closeSidebar: document.getElementById("close-sidebar"),
+	moduleList: document.getElementById("module-list"),
+	progressFill: document.getElementById("progress-fill"),
+	progressText: document.getElementById("progress-text"),
+	resetBtn: document.getElementById("reset-btn"),
+	disableFeedbackToggle: document.getElementById("disable-feedback-toggle"),
+
+	// Modal
+	modalContainer: document.getElementById("modal-container"),
+	modalTitle: document.getElementById("modal-title"),
+	modalContent: document.getElementById("modal-content"),
+	modalClose: document.getElementById("modal-close")
+};
+
+// Initialize the lesson engine - now the single source of truth
+const lessonEngine = new LessonEngine();
+
+// Code editor instance (initialized later)
+let codeEditor = null;
+let currentMode = "css";
+
+// ================= SIDEBAR FUNCTIONS =================
+
+function openSidebar() {
+	elements.sidebarDrawer.classList.add("open");
+	elements.sidebarBackdrop.classList.add("visible");
+}
+
+function closeSidebar() {
+	elements.sidebarDrawer.classList.remove("open");
+	elements.sidebarBackdrop.classList.remove("visible");
+}
+
+// ================= EXPECTED RESULT TOGGLE =================
+
+function toggleExpectedResult() {
+	state.showExpected = !state.showExpected;
+
+	if (state.showExpected) {
+		elements.expectedOverlay.classList.add("visible");
+		elements.showExpectedBtn.textContent = "Lösung ausblenden";
+		elements.showExpectedBtn.classList.add("btn-primary");
+	} else {
+		elements.expectedOverlay.classList.remove("visible");
+		elements.showExpectedBtn.textContent = "Lösung zeigen";
+		elements.showExpectedBtn.classList.remove("btn-primary");
+	}
+}
+
+// ================= HINT SYSTEM =================
+
+function showHint(message, step, total, isSuccess = false) {
+	const hintClass = isSuccess ? "hint hint-success" : "hint";
+	elements.hintArea.innerHTML = `
+		<div class="${hintClass}">
+			<span class="hint-progress">${step}/${total}</span>
+			<span class="hint-message">${message}</span>
+		</div>
+	`;
+}
+
+function clearHint() {
+	elements.hintArea.innerHTML = "";
+}
+
+function showSuccessHint(message) {
+	elements.hintArea.innerHTML = `
+		<div class="hint hint-success">
+			<span class="hint-progress">✓</span>
+			<span class="hint-message">${message}</span>
+		</div>
+	`;
+}
+
+// ================= PROGRESS DISPLAY =================
+
+function updateProgressDisplay() {
+	const stats = lessonEngine.getProgressStats();
+	elements.progressFill.style.width = `${stats.percentComplete}%`;
+	elements.progressText.textContent = `${stats.percentComplete}% abgeschlossen (${stats.totalCompleted}/${stats.totalLessons})`;
+}
+
+// ================= USER SETTINGS =================
+
+function loadUserSettings() {
+	const savedSettings = localStorage.getItem("codeCrispies.settings");
+	if (savedSettings) {
+		try {
+			const settings = JSON.parse(savedSettings);
+			state.userSettings = { ...state.userSettings, ...settings };
+			elements.disableFeedbackToggle.checked = !state.userSettings.disableFeedbackErrors;
+		} catch (e) {
+			console.error("Fehler beim Laden der Einstellungen:", e);
+		}
+	}
+}
+
+function saveUserSettings() {
+	localStorage.setItem("codeCrispies.settings", JSON.stringify(state.userSettings));
+}
+
+// ================= MODULE INITIALIZATION =================
+
+async function initializeModules() {
+	try {
+		const modules = await loadModules();
+		lessonEngine.setModules(modules);
+
+		// Use the new renderModuleList function with both callbacks
+		renderModuleList(elements.moduleList, modules, selectModule, selectLesson);
+
+		// Load saved progress and select appropriate module
+		const progressData = lessonEngine.loadUserProgress();
+		const lastModuleId = progressData?.lastModuleId;
+
+		if (lastModuleId && modules.find((m) => m.id === lastModuleId)) {
+			selectModule(lastModuleId);
+		} else if (modules.length > 0) {
+			selectModule(modules[0].id);
+		}
+
+		updateProgressDisplay();
+	} catch (error) {
+		console.error("Module konnten nicht geladen werden:", error);
+		elements.lessonDescription.textContent = "Module konnten nicht geladen werden. Bitte Seite neu laden.";
+	}
+}
+
+// ================= MODULE/LESSON SELECTION =================
+
+function selectModule(moduleId) {
+	const success = lessonEngine.setModuleById(moduleId);
+	if (!success) return;
+
+	// Update module list UI to highlight the active module
+	const moduleItems = elements.moduleList.querySelectorAll(".module-header");
+	moduleItems.forEach((item) => {
+		item.classList.remove("active");
+		if (item.dataset.moduleId === moduleId) {
+			item.classList.add("active");
+		}
+	});
+
+	loadCurrentLesson();
+	resetSuccessIndicators();
+
+	// Close sidebar after selection on mobile
+	if (window.innerWidth <= 768) {
+		closeSidebar();
+	}
+}
+
+function selectLesson(moduleId, lessonIndex) {
+	const currentState = lessonEngine.getCurrentState();
+	if (!currentState.module || currentState.module.id !== moduleId) {
+		lessonEngine.setModuleById(moduleId);
+	}
+
+	lessonEngine.setLessonByIndex(lessonIndex);
+	loadCurrentLesson();
+
+	// Close sidebar after selection on mobile
+	if (window.innerWidth <= 768) {
+		closeSidebar();
+	}
+}
+
+// ================= LESSON LOADING =================
+
+function resetSuccessIndicators() {
+	elements.codeEditor.classList.remove("success-highlight");
+	elements.lessonTitle.classList.remove("success-text");
+	elements.nextBtn.classList.remove("success");
+	elements.taskInstruction.classList.remove("success-instruction");
+	elements.runBtn.classList.remove("success");
+	elements.previewWrapper?.classList.remove("matched");
+}
+
+function updateEditorForMode(mode) {
+	const editorLabel = document.querySelector(".editor-label");
+
+	const modeConfig = {
+		html: {
+			placeholder: "HTML hier eingeben... Probiere: nav>ul>li*3 dann Tab drücken",
+			label: "HTML-Editor",
+			cmMode: "html"
+		},
+		tailwind: {
+			placeholder: "Tailwind-Klassen eingeben (z.B. bg-blue-500 text-white p-4)",
+			label: "Tailwind-Klassen",
+			cmMode: "css"
+		},
+		css: {
+			placeholder: "CSS-Code hier eingeben...",
+			label: "CSS-Editor",
+			cmMode: "css"
+		}
+	};
+
+	const config = modeConfig[mode] || modeConfig.css;
+	if (editorLabel) editorLabel.textContent = config.label;
+
+	// Update CodeMirror mode if needed
+	if (codeEditor && currentMode !== config.cmMode) {
+		currentMode = config.cmMode;
+		codeEditor.setMode(config.cmMode);
+	}
+}
+
+function loadCurrentLesson() {
+	const engineState = lessonEngine.getCurrentState();
+
+	if (!engineState.module || !engineState.lesson) {
+		return;
+	}
+
+	const lesson = engineState.lesson;
+	const mode = lesson.mode || engineState.module?.mode || "css";
+
+	// Update UI based on mode
+	updateEditorForMode(mode);
+
+	// Reset any success indicators
+	resetSuccessIndicators();
+
+	// Clear hints
+	clearHint();
+
+	// Hide expected overlay
+	state.showExpected = false;
+	elements.expectedOverlay.classList.remove("visible");
+	elements.showExpectedBtn.textContent = "Lösung zeigen";
+	elements.showExpectedBtn.classList.remove("btn-primary");
+
+	// Update UI
+	renderLesson(
+		elements.lessonTitle,
+		elements.lessonDescription,
+		elements.taskInstruction,
+		elements.previewArea,
+		null, // editorPrefix no longer used
+		null, // codeInput no longer used (using CodeMirror)
+		null, // editorSuffix no longer used
+		lesson
+	);
+
+	// Set user code in CodeMirror
+	if (codeEditor) {
+		codeEditor.setValue(engineState.userCode);
+	}
+
+	// Update Run button text based on completion status
+	if (engineState.isCompleted) {
+		elements.runBtn.innerHTML = '<img src="./gear.svg" alt="" />Erneut';
+
+		// Add completion badge if not present
+		if (!document.querySelector(".completion-badge")) {
+			const badge = document.createElement("span");
+			badge.className = "completion-badge";
+			badge.textContent = "Erledigt";
+			elements.lessonTitle.appendChild(badge);
+		}
+	} else {
+		elements.runBtn.innerHTML = '<img src="./gear.svg" alt="" />Ausführen';
+
+		// Remove completion badge if exists
+		const badge = document.querySelector(".completion-badge");
+		if (badge) badge.remove();
+	}
+
+	// Update level indicator
+	renderLevelIndicator(elements.levelIndicator, engineState.lessonIndex + 1, engineState.totalLessons);
+
+	// Update active lesson in sidebar
+	updateActiveLessonInSidebar(engineState.module.id, engineState.lessonIndex);
+
+	// Update navigation buttons
+	updateNavigationButtons();
+
+	// Update progress display
+	updateProgressDisplay();
+
+	// Focus on the code editor
+	if (codeEditor) {
+		codeEditor.focus();
+	}
+
+	// Render the expected/solution preview
+	lessonEngine.renderExpectedPreview();
+}
+
+// ================= LIVE PREVIEW =================
+
+let previewTimer = null;
+
+function handleEditorChange(code) {
+	if (previewTimer) {
+		clearTimeout(previewTimer);
+	}
+
+	previewTimer = setTimeout(() => {
+		runCode();
+	}, 800);
+}
+
+// ================= NAVIGATION =================
+
+function updateNavigationButtons() {
+	const engineState = lessonEngine.getCurrentState();
+
+	elements.prevBtn.disabled = !engineState.canGoPrev;
+	elements.nextBtn.disabled = !engineState.canGoNext;
+
+	elements.prevBtn.classList.toggle("btn-disabled", !engineState.canGoPrev);
+	elements.nextBtn.classList.toggle("btn-disabled", !engineState.canGoNext);
+}
+
+function nextLesson() {
+	const success = lessonEngine.nextLesson();
+	if (success) {
+		loadCurrentLesson();
+	}
+}
+
+function prevLesson() {
+	const success = lessonEngine.previousLesson();
+	if (success) {
+		loadCurrentLesson();
+	}
+}
+
+// ================= CODE EXECUTION =================
+
+function resetCode() {
+	// Reset editor to initial code for current lesson
+	lessonEngine.reset();
+	const engineState = lessonEngine.getCurrentState();
+	if (codeEditor && engineState.lesson) {
+		codeEditor.setValue(engineState.lesson.initialCode || "");
+	}
+	// Clear hints and success indicators
+	clearHint();
+	resetSuccessIndicators();
+}
+
+function runCode() {
+	const userCode = codeEditor ? codeEditor.getValue() : "";
+
+	// Rotate the Run button icon
+	const runButtonImg = document.querySelector("#run-btn img");
+	if (runButtonImg) {
+		const currentRotation = parseInt(runButtonImg.style.transform?.match(/\d+/)?.[0] || "0");
+		runButtonImg.style.transform = `rotate(${currentRotation + 180}deg)`;
+	}
+
+	// Apply the code to the preview via LessonEngine
+	lessonEngine.applyUserCode(userCode, true);
+
+	// Validate code using LessonEngine
+	const validationResult = lessonEngine.validateCode();
+
+	if (validationResult.isValid) {
+		// Show success hint
+		showSuccessHint(validationResult.message || "Super! Dein Code funktioniert korrekt.");
+
+		// Update Run button
+		elements.runBtn.innerHTML = '<img src="./gear.svg" alt="" />Erneut';
+		elements.runBtn.classList.add("success");
+
+		// Add completion badge
+		if (!document.querySelector(".completion-badge")) {
+			const badge = document.createElement("span");
+			badge.className = "completion-badge";
+			badge.textContent = "Erledigt";
+			elements.lessonTitle.appendChild(badge);
+		}
+
+		// Add success visual indicators
+		elements.codeEditor.classList.add("success-highlight");
+		elements.lessonTitle.classList.add("success-text");
+		elements.nextBtn.classList.add("success");
+		elements.taskInstruction.classList.add("success-instruction");
+
+		// Show match animation
+		elements.previewWrapper?.classList.add("matched");
+		setTimeout(() => {
+			elements.previewWrapper?.classList.remove("matched");
+		}, 2500);
+
+		updateNavigationButtons();
+		updateProgressDisplay();
+	} else {
+		// Reset success indicators
+		resetSuccessIndicators();
+
+		// Show hint with step progress
+		const step = validationResult.validCases + 1;
+		const total = validationResult.totalCases;
+
+		// Only show hints if enabled
+		if (!state.userSettings.disableFeedbackErrors) {
+			showHint(validationResult.message || "Weiter versuchen!", step, total);
+		}
+	}
+}
+
+// ================= MODALS =================
+
+function showHelp() {
+	elements.modalTitle.textContent = "Hilfe";
+
+	elements.modalContent.innerHTML = `
+		<h3>So verwendest du Code Crispies</h3>
+		<p>Code Crispies ist eine interaktive Plattform zum Erlernen von HTML, CSS und Tailwind durch praktische Übungen.</p>
+
+		<h4>Erste Schritte</h4>
+		<p>Öffne das Menü (☰), um ein Lektionsmodul auszuwählen. Jedes Modul enthält eine Reihe von Lektionen.</p>
+
+		<h4>Lektionen abschließen</h4>
+		<ol>
+			<li>Lies die Anleitung auf der linken Seite</li>
+			<li>Schreibe deinen Code im Editor</li>
+			<li>Klicke auf "Ausführen" oder drücke Strg+Enter zum Testen</li>
+			<li>Folge den Hinweisen, um Probleme zu beheben</li>
+			<li>Klicke auf "Weiter", wenn du fertig bist</li>
+		</ol>
+
+		<h4>Tipps</h4>
+		<ul>
+			<li>Klicke auf "Lösung zeigen", um das Zielergebnis zu sehen</li>
+			<li>Dein Fortschritt wird automatisch gespeichert</li>
+			<li>Strg+Enter führt deinen Code aus</li>
+		</ul>
+
+		<h4>Emmet-Kürzel (HTML-Modus)</h4>
+		<p>Tippe Abkürzungen ein und drücke Tab zum Erweitern:</p>
+		<ul>
+			<li><kbd>div.container</kbd> → div mit Klasse</li>
+			<li><kbd>ul>li*5</kbd> → ul mit 5 li-Kindern</li>
+			<li><kbd>nav>ul>li*3>a</kbd> → verschachtelte Struktur</li>
+			<li><kbd>p{Hallo}</kbd> → p mit Textinhalt</li>
+		</ul>
+	`;
+
+	elements.modalContainer.classList.remove("hidden");
+}
+
+function showResetConfirmation() {
+	elements.modalTitle.textContent = "Fortschritt zurücksetzen";
+
+	elements.modalContent.innerHTML = `
+		<p>Bist du sicher, dass du deinen gesamten Fortschritt zurücksetzen möchtest? Dies kann nicht rückgängig gemacht werden.</p>
+		<div style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;">
+			<button id="cancel-reset" class="btn">Abbrechen</button>
+			<button id="confirm-reset" class="btn btn-ghost">Alles zurücksetzen</button>
+		</div>
+	`;
+
+	document.getElementById("cancel-reset").addEventListener("click", closeModal);
+	document.getElementById("confirm-reset").addEventListener("click", () => {
+		lessonEngine.clearProgress();
+		closeModal();
+		closeSidebar();
+
+		// Reload first module
+		const modules = lessonEngine.modules;
+		if (modules.length > 0) {
+			selectModule(modules[0].id);
+		}
+
+		updateProgressDisplay();
+	});
+
+	elements.modalContainer.classList.remove("hidden");
+}
+
+function closeModal() {
+	elements.modalContainer.classList.add("hidden");
+}
+
+// ================= INITIALIZATION =================
+
+function initCodeEditor() {
+	const container = elements.editorContent;
+	if (!container) return;
+
+	// Remove the textarea - CodeMirror will replace it
+	const textarea = container.querySelector("textarea");
+	if (textarea) {
+		textarea.remove();
+	}
+
+	// Initialize CodeMirror
+	codeEditor = new CodeEditor(container, {
+		mode: currentMode,
+		placeholder: "Code hier eingeben...",
+		onChange: handleEditorChange
+	});
+
+	codeEditor.init("");
+}
+
+function init() {
+	loadUserSettings();
+
+	// Initialize CodeMirror editor
+	initCodeEditor();
+
+	// Load modules after editor is ready
+	initializeModules().catch(console.error);
+
+	// Sidebar controls
+	elements.menuBtn.addEventListener("click", openSidebar);
+	elements.closeSidebar.addEventListener("click", closeSidebar);
+	elements.sidebarBackdrop.addEventListener("click", closeSidebar);
+
+	// Expected result toggle
+	elements.showExpectedBtn.addEventListener("click", toggleExpectedResult);
+
+	// Navigation
+	elements.prevBtn.addEventListener("click", prevLesson);
+	elements.nextBtn.addEventListener("click", nextLesson);
+	elements.runBtn.addEventListener("click", runCode);
+
+	// Editor tools
+	elements.undoBtn.addEventListener("click", () => {
+		if (codeEditor) codeEditor.undo();
+	});
+	elements.redoBtn.addEventListener("click", () => {
+		if (codeEditor) codeEditor.redo();
+	});
+	elements.resetCodeBtn.addEventListener("click", resetCode);
+
+	// Modals
+	elements.helpBtn.addEventListener("click", showHelp);
+	elements.modalClose.addEventListener("click", closeModal);
+	elements.resetBtn.addEventListener("click", showResetConfirmation);
+
+	// Settings
+	elements.disableFeedbackToggle.addEventListener("change", (e) => {
+		state.userSettings.disableFeedbackErrors = !e.target.checked;
+		saveUserSettings();
+	});
+
+	// Click on editor content to focus CodeMirror
+	elements.editorContent?.addEventListener("click", () => {
+		if (codeEditor) codeEditor.focus();
+	});
+
+	// Keyboard shortcuts
+	document.addEventListener("keydown", (e) => {
+		// Ctrl+Enter to run code
+		if (e.ctrlKey && e.key === "Enter") {
+			runCode();
+			e.preventDefault();
+		}
+
+		// Escape to close sidebar
+		if (e.key === "Escape") {
+			closeSidebar();
+			closeModal();
+		}
+	});
+}
+
+// Start the application
+init();
--- a/src/config/lessons.de.js
+++ b/src/config/lessons.de.js
@@ -0,0 +1,111 @@
+/**
+ * Lesson Config (German) - Functions for loading lesson configurations
+ */
+
+// Import German lesson configs
+import basicSelectorsConfig from "../../lessons/de/00-basic-selectors.json";
+import advancedSelectorsConfig from "../../lessons/de/01-advanced-selectors.json";
+import tailwindConfig from "../../lessons/de/10-tailwind-basics.json";
+// HTML lessons
+import htmlElementsConfig from "../../lessons/de/20-html-elements.json";
+import htmlFormsBasicConfig from "../../lessons/de/21-html-forms-basic.json";
+import htmlFormsValidationConfig from "../../lessons/de/22-html-forms-validation.json";
+
+// Module store
+const moduleStore = [
+	htmlElementsConfig,
+	htmlFormsBasicConfig,
+	htmlFormsValidationConfig,
+	basicSelectorsConfig,
+	advancedSelectorsConfig,
+	tailwindConfig
+];
+
+/**
+ * Load all available modules
+ * @returns {Promise<Array>} Promise resolving to array of modules
+ */
+export async function loadModules() {
+	return moduleStore.map((module) => ({
+		...module,
+		lessons: module.lessons.map((lesson) => ({
+			...lesson,
+			mode: module.mode || "css"
+		}))
+	}));
+}
+
+/**
+ * Get a module by its ID
+ * @param {string} moduleId - The module ID to find
+ * @returns {Object|null} The module object or null if not found
+ */
+export function getModuleById(moduleId) {
+	return moduleStore.find((module) => module.id === moduleId) || null;
+}
+
+/**
+ * Load module configs from a URL
+ * @param {string} url - URL to load the config from
+ * @returns {Promise<Object>} Promise resolving to the module config
+ */
+export async function loadModuleFromUrl(url) {
+	try {
+		const response = await fetch(url);
+		if (!response.ok) {
+			throw new Error(`Failed to load module: ${response.status} ${response.statusText}`);
+		}
+
+		const moduleConfig = await response.json();
+		validateModuleConfig(moduleConfig);
+
+		return moduleConfig;
+	} catch (error) {
+		console.error("Error loading module from URL:", error);
+		throw error;
+	}
+}
+
+/**
+ * Validate a module configuration
+ * @param {Object} config - The module configuration to validate
+ * @throws {Error} If the configuration is invalid
+ */
+function validateModuleConfig(config) {
+	// Required fields
+	if (!config.id) throw new Error('Module config missing "id"');
+	if (!config.title) throw new Error('Module config missing "title"');
+	if (!Array.isArray(config.lessons)) throw new Error('Module config missing "lessons" array');
+
+	// Check each lesson
+	config.lessons.forEach((lesson, index) => {
+		if (!lesson.title) throw new Error(`Lesson ${index} missing "title"`);
+		if (!lesson.previewHTML) throw new Error(`Lesson ${index} missing "previewHTML"`);
+	});
+}
+
+/**
+ * Add a custom module to the store
+ * @param {Object} moduleConfig - The module configuration to add
+ * @returns {boolean} Success status
+ */
+export function addCustomModule(moduleConfig) {
+	try {
+		validateModuleConfig(moduleConfig);
+
+		// Check if module with same ID already exists
+		const existingIndex = moduleStore.findIndex((m) => m.id === moduleConfig.id);
+		if (existingIndex >= 0) {
+			// Replace existing module
+			moduleStore[existingIndex] = moduleConfig;
+		} else {
+			// Add new module
+			moduleStore.push(moduleConfig);
+		}
+
+		return true;
+	} catch (error) {
+		console.error("Error adding custom module:", error);
+		return false;
+	}
+}
--- a/src/index.de.html
+++ b/src/index.de.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="de">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" href="./favicon.ico" type="image/x-icon" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>CODE CRISPIES - CSS interaktiv lernen</title>
+		<link rel="stylesheet" href="main.css" />
+	</head>
+	<body>
+		<div class="app-container">
+			<!-- Minimaler Header -->
+			<header class="header">
+				<button id="menu-btn" class="menu-toggle" aria-label="Menü öffnen">
+					<span class="hamburger-line"></span>
+					<span class="hamburger-line"></span>
+					<span class="hamburger-line"></span>
+				</button>
+				<div class="logo">
+					<img src="./bowl.png" width="40" alt="CODE CRISPIES Logo" />
+					<h1>CODE<span>CRISPIES</span></h1>
+				</div>
+				<button id="help-btn" class="help-toggle" aria-label="Hilfe">?</button>
+			</header>
+
+			<!-- Hauptlayout -->
+			<main class="game-layout">
+				<!-- Linke Spalte: Anleitung + Editor -->
+				<div class="left-panel">
+					<section class="instructions">
+						<h2 id="lesson-title">Laden...</h2>
+						<div class="lesson-description" id="lesson-description">
+							Bitte wähle eine Lektion aus, um zu beginnen.
+						</div>
+						<div class="task-instruction" id="task-instruction">
+							<!-- Aufgabenanweisungen werden hier angezeigt -->
+						</div>
+					</section>
+
+					<section class="editor-section">
+						<div class="code-editor">
+							<div class="editor-header">
+								<label for="code-input" class="editor-label">CSS-Editor</label>
+								<div class="editor-actions">
+									<div class="editor-tools">
+										<button id="undo-btn" class="btn btn-icon" title="Rückgängig (Strg+Z)">↶</button>
+										<button id="redo-btn" class="btn btn-icon" title="Wiederholen (Strg+Umschalt+Z)">↷</button>
+										<button id="reset-code-btn" class="btn btn-icon" title="Auf Anfangscode zurücksetzen">⟲</button>
+									</div>
+									<button id="run-btn" class="btn btn-run">
+										<img src="./gear.svg" alt="" />Ausführen
+									</button>
+								</div>
+							</div>
+							<div class="editor-content">
+								<!-- Textarea wird durch CodeMirror ersetzt -->
+								<textarea id="code-input" class="code-input" spellcheck="false" autocomplete="off" style="display: none;"></textarea>
+							</div>
+						</div>
+						<div class="hint-area" id="hint-area">
+							<!-- Hinweise werden hier angezeigt -->
+						</div>
+					</section>
+				</div>
+
+				<!-- Rechte Spalte: Vorschau + Navigation -->
+				<div class="right-panel">
+					<div class="preview-section">
+						<div class="preview-header">
+							<span class="preview-label">Deine Ausgabe</span>
+							<button id="show-expected-btn" class="btn btn-small">Lösung zeigen</button>
+						</div>
+						<div class="preview-wrapper">
+							<div class="preview-frame" id="preview-area">
+								<!-- Vorschau-Iframe wird hier angezeigt -->
+							</div>
+							<div class="expected-overlay" id="expected-overlay">
+								<div class="expected-frame" id="preview-expected">
+									<!-- Erwartetes Ergebnis (umschaltbar) -->
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="game-controls">
+						<button id="prev-btn" class="btn">Zurück</button>
+						<div class="level-indicator" id="level-indicator">Lektion 0/0</div>
+						<button id="next-btn" class="btn btn-primary">Weiter</button>
+					</div>
+				</div>
+			</main>
+
+			<!-- Seitenleisten-Hintergrund -->
+			<div class="sidebar-backdrop" id="sidebar-backdrop"></div>
+
+			<!-- Ausklappbare Seitenleiste -->
+			<aside class="sidebar-drawer" id="sidebar-drawer">
+				<div class="sidebar-header">
+					<h3>Menü</h3>
+					<button id="close-sidebar" class="close-btn" aria-label="Menü schließen">&times;</button>
+				</div>
+
+				<div class="sidebar-section">
+					<h4>Fortschritt</h4>
+					<div class="progress-display" id="progress-display">
+						<div class="progress-bar">
+							<div class="progress-fill" id="progress-fill"></div>
+						</div>
+						<span class="progress-text" id="progress-text">0% abgeschlossen</span>
+					</div>
+				</div>
+
+				<div class="sidebar-section">
+					<h4>Lektionen</h4>
+					<div class="module-list" id="module-list">
+						<!-- Modulliste wird hier eingefügt -->
+					</div>
+				</div>
+
+				<div class="sidebar-section">
+					<h4>Einstellungen</h4>
+					<label class="toggle-switch">
+						<input type="checkbox" id="disable-feedback-toggle" checked />
+						<span class="toggle-slider"></span>
+						<span class="toggle-label">Hinweise anzeigen</span>
+					</label>
+					<button id="reset-btn" class="btn btn-text">Fortschritt zurücksetzen</button>
+				</div>
+
+				<footer class="app-footer">
+					Open Source:
+					<a href="https://github.com/nextlevelshit/code-crispies" target="_blank">GitHub</a>
+					von <a href="https://dailysh.it" title="Michael W. Czechowski">mwc</a>
+				</footer>
+			</aside>
+
+			<!-- Hilfe-Modal -->
+			<div id="modal-container" class="modal-container hidden">
+				<div class="modal">
+					<div class="modal-header">
+						<h3 id="modal-title">Modal-Titel</h3>
+						<button id="modal-close" class="modal-close">&times;</button>
+					</div>
+					<div class="modal-content" id="modal-content">
+						<!-- Modal-Inhalt wird hier eingefügt -->
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<script type="module" src="app.de.js"></script>
+	</body>
+</html>