feat: add More Projects section to help dialog

- Add HTML over JS and Web Engineering Mandala projects
- Include i18n translations for EN and DE
- Add userCode to lesson cache for faster reload

src/app.js

@@ -207,6 +207,8 @@ function saveUserSettings() {
 
 // ================= LESSON CACHE =================
 
+let cachedUserCode = null;
+
 function restoreLessonCache() {
 	try {
 		const cached = localStorage.getItem("codeCrispies.lessonCache");
@@ -230,6 +232,10 @@ function restoreLessonCache() {
 			if (data.levelIndicator && elements.levelIndicator) {
 				elements.levelIndicator.innerHTML = data.levelIndicator;
 			}
+			// Store userCode to apply after editor init
+			if (data.userCode) {
+				cachedUserCode = data.userCode;
+			}
 		}
 	} catch (e) {
 		// Ignore cache errors
@@ -471,7 +477,9 @@ function loadCurrentLesson() {
 				lessonTitle: lesson.title,
 				lessonDescription: lesson.description,
 				taskInstruction: lesson.task,
-				levelIndicator: elements.levelIndicator?.innerHTML
+				levelIndicator: elements.levelIndicator?.innerHTML,
+				userCode: engineState.userCode,
+				mode: mode
 			})
 		);
 	} catch (e) {

src/i18n.js

@@ -76,6 +76,11 @@ const translations = {
 		emmetNested: "<kbd>form>input+button</kbd> → nested structure",
 		emmetContent: "<kbd>p{Hello}</kbd> → p with text content",
 
+		// More Projects
+		moreProjectsTitle: "More Projects",
+		htmlOverJsDesc: " - Learn to leverage native HTML elements instead of custom JavaScript solutions",
+		mandalaDesc: " - Interactive visualization of JavaScript technologies organized by complexity",
+
 		// Contact
 		contactTitle: "Contact & Links",
 		contactText: "Code Crispies is developed by librete.ch",
@@ -170,6 +175,11 @@ const translations = {
 		emmetNested: "<kbd>form>input+button</kbd> → verschachtelte Struktur",
 		emmetContent: "<kbd>p{Hallo}</kbd> → p mit Textinhalt",
 
+		// More Projects
+		moreProjectsTitle: "Weitere Projekte",
+		htmlOverJsDesc: " - Lerne, native HTML-Elemente statt eigener JavaScript-Lösungen zu nutzen",
+		mandalaDesc: " - Interaktive Visualisierung von JavaScript-Technologien nach Komplexität geordnet",
+
 		// Contact
 		contactTitle: "Kontakt & Links",
 		contactText: "Code Crispies wird von librete.ch entwickelt",

src/index.html

@@ -177,6 +177,18 @@
 						<li data-i18n-html="emmetContent"><kbd>p{Hello}</kbd> → p with text content</li>
 					</ul>
 
+					<h4 data-i18n="moreProjectsTitle">More Projects</h4>
+					<ul>
+						<li>
+							<a href="https://nextlevelshit.github.io/html-over-js/" target="_blank"><strong>HTML over JS</strong></a>
+							<span data-i18n="htmlOverJsDesc"> - Learn to leverage native HTML elements instead of custom JavaScript solutions</span>
+						</li>
+						<li>
+							<a href="https://nextlevelshit.github.io/web-engineering-mandala/" target="_blank"><strong>Web Engineering Mandala</strong></a>
+							<span data-i18n="mandalaDesc"> - Interactive visualization of JavaScript technologies organized by complexity</span>
+						</li>
+					</ul>
+
 					<h4 data-i18n="contactTitle">Contact & Links</h4>
 					<p data-i18n="contactText">Code Crispies is developed by librete.ch</p>
 					<ul>

src/main.css

@@ -496,7 +496,6 @@ code, kbd {
 	display: flex;
 	flex-direction: column;
 	min-height: 0;
-	box-shadow: inset 0 -40px 30px -30px rgba(0, 0, 0, 0.08);
 }
 
 .preview-header {
@@ -608,6 +607,7 @@ code, kbd {
 	padding: var(--spacing-md);
 	background: var(--panel-bg);
 	border-bottom: 1px solid var(--border-color);
+	box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.08);
 }
 
 /* ================= SIDEBAR ================= */