feat: add contact section and smooth lesson transitions

- Add contact section to help dialog with librete.ch, GitHub, Gitea, LinkedIn links
- Add HTML/CSS prefixes to English module titles for consistency with German
- Add CSS transitions for smooth lesson switching
- Add transitioning class to prevent content flash during lesson changes

src/app.js

@@ -20,6 +20,7 @@ const elements = {
 	helpBtn: document.getElementById("help-btn"),
 
 	// Left panel
+	editorSection: document.querySelector(".editor-section"),
 	modulePill: document.getElementById("module-pill"),
 	moduleName: document.querySelector(".module-name"),
 	lessonTitle: document.getElementById("lesson-title"),
@@ -313,6 +314,9 @@ function loadCurrentLesson() {
 	const lesson = engineState.lesson;
 	const mode = lesson.mode || engineState.module?.mode || "css";
 
+	// Add transition class for smooth content swap
+	elements.editorSection?.classList.add("transitioning");
+
 	// Update UI based on mode
 	updateEditorForMode(mode);
 
@@ -388,6 +392,11 @@ function loadCurrentLesson() {
 
 	// Render the expected/solution preview
 	lessonEngine.renderExpectedPreview();
+
+	// Remove transition class after content is updated
+	requestAnimationFrame(() => {
+		elements.editorSection?.classList.remove("transitioning");
+	});
 }
 
 // ================= LIVE PREVIEW =================

src/i18n.js

@@ -76,6 +76,10 @@ const translations = {
 		emmetNested: "<kbd>form>input+button</kbd> → nested structure",
 		emmetContent: "<kbd>p{Hello}</kbd> → p with text content",
 
+		// Contact
+		contactTitle: "Contact & Links",
+		contactText: "Code Crispies is developed by librete.ch",
+
 		// Reset dialog
 		resetDialogTitle: "Reset Progress",
 		resetDialogText: "Are you sure you want to reset all your progress? This cannot be undone.",
@@ -165,6 +169,10 @@ const translations = {
 		emmetNested: "<kbd>form>input+button</kbd> → verschachtelte Struktur",
 		emmetContent: "<kbd>p{Hallo}</kbd> → p mit Textinhalt",
 
+		// Contact
+		contactTitle: "Kontakt & Links",
+		contactText: "Code Crispies wird von librete.ch entwickelt",
+
 		// Reset dialog
 		resetDialogTitle: "Fortschritt zurücksetzen",
 		resetDialogText: "Bist du sicher, dass du deinen gesamten Fortschritt zurücksetzen möchtest? Dies kann nicht rückgängig gemacht werden.",

src/index.html

@@ -178,6 +178,15 @@
 						<li data-i18n-html="emmetNested"><kbd>form>input+button</kbd> → nested structure</li>
 						<li data-i18n-html="emmetContent"><kbd>p{Hello}</kbd> → p with text content</li>
 					</ul>
+
+					<h4 data-i18n="contactTitle">Contact & Links</h4>
+					<p data-i18n="contactText">Code Crispies is developed by librete.ch</p>
+					<ul>
+						<li><a href="https://librete.ch" target="_blank">librete.ch</a></li>
+						<li><a href="https://github.com/nextlevelshit/code-crispies" target="_blank">GitHub</a></li>
+						<li><a href="https://git.librete.ch/libretech/code-crispies" target="_blank">Gitea</a></li>
+						<li><a href="https://www.linkedin.com/in/michael-werner-czechowski" target="_blank">LinkedIn</a></li>
+					</ul>
 				</div>
 			</dialog>
 

src/main.css

@@ -228,6 +228,19 @@ code, kbd {
 	border-bottom: 1px solid var(--border-color);
 }
 
+/* Smooth lesson transition */
+#lesson-title,
+.lesson-description,
+.task-instruction {
+	transition: opacity 0.1s ease;
+}
+
+.editor-section.transitioning #lesson-title,
+.editor-section.transitioning .lesson-description,
+.editor-section.transitioning .task-instruction {
+	opacity: 0.3;
+}
+
 .module-pill {
 	display: inline-flex;
 	align-items: center;