feat(i18n): add JS-based internationalization

- Create i18n.js module with EN/DE translations - Add data-i18n attributes to index.html for dynamic text - Update renderer.js to use translation functions - Language switcher button replaces link to German page - Stores preference in localStorage, detects browser language
2025-12-30 15:10:38 +01:00
parent f4181d6ada
commit c9513e4e33
3 changed files with 355 additions and 80 deletions
--- a/src/helpers/renderer.js
+++ b/src/helpers/renderer.js
@@ -1,6 +1,7 @@
 /**
 * Renderer - Handles UI updates for the CSS learning platform
 */
+import { t } from "../i18n.js";

 // Feedback elements cache
 let feedbackElement = null;
@@ -77,7 +78,7 @@ export function renderModuleList(container, modules, onSelectModule, onSelectLes
 			lessonItem.classList.add("lesson-list-item");
 			lessonItem.dataset.moduleId = module.id;
 			lessonItem.dataset.lessonIndex = index;
-			lessonItem.textContent = lesson.title || `Lesson ${index + 1}`;
+			lessonItem.textContent = lesson.title || t("lessonFallback", { index: index + 1 });

 			// Mark lesson as completed if in progress data
 			if (progress[module.id] && progress[module.id].completed.includes(index)) {
@@ -137,7 +138,7 @@ export function renderModuleList(container, modules, onSelectModule, onSelectLes
 */
 export function renderLesson(titleEl, descriptionEl, taskEl, previewEl, prefixEl, inputEl, suffixEl, lesson) {
 	// Set lesson title and description
-	titleEl.textContent = lesson.title || "Untitled Lesson";
+	titleEl.textContent = lesson.title || t("untitledLesson");
 	descriptionEl.innerHTML = lesson.description || "";

 	// Set task instructions
@@ -162,7 +163,7 @@ export function renderLesson(titleEl, descriptionEl, taskEl, previewEl, prefixEl
 * @param {number} total - The total number of levels
 */
 export function renderLevelIndicator(element, current, total) {
-	element.textContent = `Lesson ${current} of ${total}`;
+	element.textContent = t("levelIndicator", { current, total });
 }

 /**
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -0,0 +1,287 @@
+/**
+ * Internationalization module for Code Crispies
+ */
+
+const translations = {
+	en: {
+		// Page
+		pageTitle: "CODE CRISPIES - Learn CSS Interactively",
+		skipLink: "Skip to main content",
+
+		// Header
+		menuOpen: "Open menu",
+		langSwitch: "DE",
+		langSwitchLabel: "Sprache wechseln: Deutsch",
+		help: "Help",
+
+		// Instructions
+		loading: "Loading...",
+		selectLesson: "Please select a lesson to begin.",
+		editorLabel: "CSS Editor",
+		undoTitle: "Undo (Ctrl+Z)",
+		redoTitle: "Redo (Ctrl+Shift+Z)",
+		resetCodeTitle: "Reset to initial code",
+		run: "Run",
+		rerun: "Re-run",
+
+		// Preview
+		yourOutput: "Your Output",
+		showExpected: "Show Expected",
+		hideExpected: "Hide Expected",
+		previous: "Previous",
+		next: "Next",
+		levelIndicator: "Lesson {current} of {total}",
+
+		// Sidebar
+		menu: "Menu",
+		closeMenu: "Close menu",
+		progress: "Progress",
+		progressText: "{percent}% Complete ({completed}/{total})",
+		lessons: "Lessons",
+		settings: "Settings",
+		showHints: "Show Hints",
+		resetAllProgress: "Reset All Progress",
+		openSource: "Open Source:",
+		by: "by",
+
+		// Help dialog
+		helpTitle: "Help",
+		aboutTitle: "About Code Crispies",
+		aboutText: "Code Crispies is a free, open-source platform for learning web development through hands-on exercises. No account required - just start coding!",
+		learningModesTitle: "Learning Modes",
+		modeCss: "<strong>CSS</strong> - Write CSS rules to style elements",
+		modeTailwind: "<strong>Tailwind</strong> - Apply utility classes directly in HTML",
+		modeHtml: "<strong>HTML</strong> - Practice semantic markup and native elements",
+		gettingStartedTitle: "Getting Started",
+		gettingStartedText: "Open the menu (☰) to browse lesson modules. Each module covers a specific topic with progressive exercises.",
+		completingLessonsTitle: "Completing Lessons",
+		completingStep1: "Read the task instructions on the left",
+		completingStep2: "Write your code in the editor",
+		completingStep3: "Click <strong>Run</strong> or press <kbd>Ctrl+Enter</kbd> to test",
+		completingStep4: "Follow hints to fix any issues",
+		completingStep5: "Click <strong>Next</strong> when complete",
+		editorToolsTitle: "Editor Tools",
+		editorToolUndo: "<strong>↶ Undo</strong> / <strong>↷ Redo</strong> - Navigate edit history",
+		editorToolReset: "<strong>⟲ Reset</strong> - Restore initial code for current lesson",
+		editorToolExpected: "<strong>Show Expected</strong> - Toggle the target result overlay",
+		keyboardShortcutsTitle: "Keyboard Shortcuts",
+		shortcutRun: "<kbd>Ctrl+Enter</kbd> - Run your code",
+		shortcutUndo: "<kbd>Ctrl+Z</kbd> - Undo",
+		shortcutRedo: "<kbd>Ctrl+Shift+Z</kbd> - Redo",
+		emmetTitle: "Emmet Shortcuts (HTML mode)",
+		emmetText: "Type abbreviations and press <kbd>Tab</kbd> to expand:",
+		emmetClass: "<kbd>div.box</kbd> → div with class",
+		emmetChildren: "<kbd>ul>li*3</kbd> → ul with 3 li children",
+		emmetNested: "<kbd>form>input+button</kbd> → nested structure",
+		emmetContent: "<kbd>p{Hello}</kbd> → p with text content",
+
+		// Reset dialog
+		resetDialogTitle: "Reset Progress",
+		resetDialogText: "Are you sure you want to reset all your progress? This cannot be undone.",
+		cancel: "Cancel",
+		resetAll: "Reset All",
+
+		// Dynamic content
+		completed: "Completed",
+		successMessage: "CRISPY! ٩(◕‿◕)۶ Your code works correctly.",
+		keepTrying: "Keep trying!",
+		failedToLoad: "Failed to load modules. Please refresh the page.",
+		tailwindPlaceholder: "Enter Tailwind classes (e.g., bg-blue-500 text-white p-4)",
+		lessonFallback: "Lesson {index}",
+		untitledLesson: "Untitled Lesson"
+	},
+
+	de: {
+		// Page
+		pageTitle: "CODE CRISPIES - CSS interaktiv lernen",
+		skipLink: "Zum Hauptinhalt springen",
+
+		// Header
+		menuOpen: "Menü öffnen",
+		langSwitch: "EN",
+		langSwitchLabel: "Switch language: English",
+		help: "Hilfe",
+
+		// Instructions
+		loading: "Laden...",
+		selectLesson: "Bitte wähle eine Lektion aus, um zu beginnen.",
+		editorLabel: "CSS-Editor",
+		undoTitle: "Rückgängig (Strg+Z)",
+		redoTitle: "Wiederholen (Strg+Umschalt+Z)",
+		resetCodeTitle: "Auf Anfangscode zurücksetzen",
+		run: "Ausführen",
+		rerun: "Erneut anwenden",
+
+		// Preview
+		yourOutput: "Deine Ausgabe",
+		showExpected: "Lösung zeigen",
+		hideExpected: "Lösung ausblenden",
+		previous: "Zurück",
+		next: "Weiter",
+		levelIndicator: "Lektion {current} von {total}",
+
+		// Sidebar
+		menu: "Menü",
+		closeMenu: "Menü schließen",
+		progress: "Fortschritt",
+		progressText: "{percent}% abgeschlossen ({completed}/{total})",
+		lessons: "Lektionen",
+		settings: "Einstellungen",
+		showHints: "Hinweise anzeigen",
+		resetAllProgress: "Fortschritt zurücksetzen",
+		openSource: "Open Source:",
+		by: "von",
+
+		// Help dialog
+		helpTitle: "Hilfe",
+		aboutTitle: "Über Code Crispies",
+		aboutText: "Code Crispies ist eine kostenlose Open-Source-Plattform zum Erlernen von Webentwicklung durch praktische Übungen. Kein Konto erforderlich - einfach loslegen!",
+		learningModesTitle: "Lernmodi",
+		modeCss: "<strong>CSS</strong> - Schreibe CSS-Regeln zum Stylen von Elementen",
+		modeTailwind: "<strong>Tailwind</strong> - Wende Utility-Klassen direkt im HTML an",
+		modeHtml: "<strong>HTML</strong> - Übe semantisches Markup und native Elemente",
+		gettingStartedTitle: "Erste Schritte",
+		gettingStartedText: "Öffne das Menü (☰), um Lektionsmodule zu durchsuchen. Jedes Modul behandelt ein Thema mit aufeinander aufbauenden Übungen.",
+		completingLessonsTitle: "Lektionen abschließen",
+		completingStep1: "Lies die Aufgabenstellung auf der linken Seite",
+		completingStep2: "Schreibe deinen Code im Editor",
+		completingStep3: "Klicke auf <strong>Ausführen</strong> oder drücke <kbd>Strg+Enter</kbd>",
+		completingStep4: "Folge den Hinweisen, um Fehler zu beheben",
+		completingStep5: "Klicke auf <strong>Weiter</strong>, wenn du fertig bist",
+		editorToolsTitle: "Editor-Werkzeuge",
+		editorToolUndo: "<strong>↶ Rückgängig</strong> / <strong>↷ Wiederholen</strong> - Bearbeitungsverlauf navigieren",
+		editorToolReset: "<strong>⟲ Zurücksetzen</strong> - Ursprünglichen Code wiederherstellen",
+		editorToolExpected: "<strong>Lösung zeigen</strong> - Zielergebnis ein-/ausblenden",
+		keyboardShortcutsTitle: "Tastenkürzel",
+		shortcutRun: "<kbd>Strg+Enter</kbd> - Code ausführen",
+		shortcutUndo: "<kbd>Strg+Z</kbd> - Rückgängig",
+		shortcutRedo: "<kbd>Strg+Umschalt+Z</kbd> - Wiederholen",
+		emmetTitle: "Emmet-Kürzel (HTML-Modus)",
+		emmetText: "Tippe Abkürzungen und drücke <kbd>Tab</kbd> zum Erweitern:",
+		emmetClass: "<kbd>div.box</kbd> → div mit Klasse",
+		emmetChildren: "<kbd>ul>li*3</kbd> → ul mit 3 li-Kindern",
+		emmetNested: "<kbd>form>input+button</kbd> → verschachtelte Struktur",
+		emmetContent: "<kbd>p{Hallo}</kbd> → p mit Textinhalt",
+
+		// 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.",
+		cancel: "Abbrechen",
+		resetAll: "Alles zurücksetzen",
+
+		// Dynamic content
+		completed: "Erledigt",
+		successMessage: "CRISPY! ٩(◕‿◕)۶ Dein Code funktioniert.",
+		keepTrying: "Weiter versuchen!",
+		failedToLoad: "Module konnten nicht geladen werden. Bitte Seite neu laden.",
+		tailwindPlaceholder: "Tailwind-Klassen eingeben (z.B. bg-blue-500 text-white p-4)",
+		lessonFallback: "Lektion {index}",
+		untitledLesson: "Unbenannte Lektion"
+	}
+};
+
+let currentLang = "en";
+
+/**
+ * Detect initial language from localStorage or browser
+ */
+export function detectLanguage() {
+	// Check localStorage first
+	const stored = localStorage.getItem("codeCrispies.language");
+	if (stored && translations[stored]) {
+		return stored;
+	}
+
+	// Check browser language
+	const browserLang = navigator.language.split("-")[0];
+	if (translations[browserLang]) {
+		return browserLang;
+	}
+
+	return "en";
+}
+
+/**
+ * Get current language
+ */
+export function getLanguage() {
+	return currentLang;
+}
+
+/**
+ * Set language and persist to localStorage
+ */
+export function setLanguage(lang) {
+	if (!translations[lang]) {
+		console.warn(`Language "${lang}" not supported, falling back to English`);
+		lang = "en";
+	}
+	currentLang = lang;
+	localStorage.setItem("codeCrispies.language", lang);
+	document.documentElement.lang = lang;
+}
+
+/**
+ * Get a translation by key with optional interpolation
+ * @param {string} key - Translation key
+ * @param {Object} params - Optional parameters for interpolation
+ */
+export function t(key, params = {}) {
+	const text = translations[currentLang]?.[key] || translations.en[key] || key;
+
+	if (Object.keys(params).length === 0) {
+		return text;
+	}
+
+	// Replace {param} placeholders
+	return text.replace(/\{(\w+)\}/g, (match, param) => {
+		return params[param] !== undefined ? params[param] : match;
+	});
+}
+
+/**
+ * Apply translations to all elements with data-i18n attribute
+ */
+export function applyTranslations() {
+	// Update page title
+	document.title = t("pageTitle");
+
+	// Update elements with data-i18n attribute (text content)
+	document.querySelectorAll("[data-i18n]").forEach((el) => {
+		const key = el.dataset.i18n;
+		el.textContent = t(key);
+	});
+
+	// Update elements with data-i18n-html attribute (innerHTML)
+	document.querySelectorAll("[data-i18n-html]").forEach((el) => {
+		const key = el.dataset.i18nHtml;
+		el.innerHTML = t(key);
+	});
+
+	// Update elements with data-i18n-title attribute
+	document.querySelectorAll("[data-i18n-title]").forEach((el) => {
+		const key = el.dataset.i18nTitle;
+		el.title = t(key);
+	});
+
+	// Update elements with data-i18n-aria-label attribute
+	document.querySelectorAll("[data-i18n-aria-label]").forEach((el) => {
+		const key = el.dataset.i18nAriaLabel;
+		el.setAttribute("aria-label", t(key));
+	});
+
+	// Update elements with data-i18n-placeholder attribute
+	document.querySelectorAll("[data-i18n-placeholder]").forEach((el) => {
+		const key = el.dataset.i18nPlaceholder;
+		el.placeholder = t(key);
+	});
+}
+
+/**
+ * Initialize i18n system
+ */
+export function initI18n() {
+	const lang = detectLanguage();
+	setLanguage(lang);
+	applyTranslations();
+}
--- a/src/index.html
+++ b/src/index.html
@@ -8,11 +8,10 @@
 		<link rel="stylesheet" href="main.css" />
 	</head>
 	<body>
-		<a href="#main-content" class="skip-link">Skip to main content</a>
+		<a href="#main-content" class="skip-link" data-i18n="skipLink">Skip to main content</a>
 		<div class="app-container">
-			<!-- Minimal Header -->
 			<header class="header">
-				<button id="menu-btn" class="menu-toggle" aria-label="Open menu">
+				<button id="menu-btn" class="menu-toggle" data-i18n-aria-label="menuOpen" aria-label="Open menu">
 					<span class="hamburger-line"></span>
 					<span class="hamburger-line"></span>
 					<span class="hamburger-line"></span>
@@ -22,49 +21,43 @@
 					<h1>CODE<span>CRISPIES</span></h1>
 				</div>
 				<div class="header-actions">
-					<a href="./index.de.html" class="lang-switch" aria-label="Sprache wechseln: Deutsch">DE</a>
-					<button id="help-btn" class="help-toggle" aria-label="Help">?</button>
+					<button id="lang-btn" class="lang-switch" data-i18n-aria-label="langSwitchLabel" data-i18n="langSwitch" aria-label="Sprache wechseln: Deutsch">DE</button>
+					<button id="help-btn" class="help-toggle" data-i18n-aria-label="help" aria-label="Help">?</button>
 				</div>
 			</header>

-			<!-- Main Game Layout -->
 			<main class="game-layout" id="main-content">
 				<!-- Left Panel: Instructions + Editor -->
 				<div class="left-panel">
 					<section class="instructions">
-						<span class="module-pill" id="module-pill">Loading...</span>
-						<h2 id="lesson-title">Loading...</h2>
-						<div class="lesson-description" id="lesson-description">
+						<span class="module-pill" id="module-pill" data-i18n="loading">Loading...</span>
+						<h2 id="lesson-title" data-i18n="loading">Loading...</h2>
+						<div class="lesson-description" id="lesson-description" data-i18n="selectLesson">
 							Please select a lesson to begin.
 						</div>
-						<div class="task-instruction" id="task-instruction">
-							<!-- Task instructions will be shown here -->
-						</div>
+						<div class="task-instruction" id="task-instruction"></div>
 					</section>

 					<section class="editor-section">
 						<div class="code-editor">
 							<div class="editor-header">
-								<label for="code-input" class="editor-label">CSS Editor</label>
+								<label for="code-input" class="editor-label" data-i18n="editorLabel">CSS Editor</label>
 								<div class="editor-actions">
 									<div class="editor-tools">
-										<button id="undo-btn" class="btn btn-icon" title="Undo (Ctrl+Z)">↶</button>
-										<button id="redo-btn" class="btn btn-icon" title="Redo (Ctrl+Shift+Z)">↷</button>
-										<button id="reset-code-btn" class="btn btn-icon" title="Reset to initial code">⟲</button>
+										<button id="undo-btn" class="btn btn-icon" data-i18n-title="undoTitle" title="Undo (Ctrl+Z)">↶</button>
+										<button id="redo-btn" class="btn btn-icon" data-i18n-title="redoTitle" title="Redo (Ctrl+Shift+Z)">↷</button>
+										<button id="reset-code-btn" class="btn btn-icon" data-i18n-title="resetCodeTitle" title="Reset to initial code">⟲</button>
 									</div>
 									<button id="run-btn" class="btn btn-run">
-										<img src="./gear.svg" alt="" />Run
+										<img src="./gear.svg" alt="" /><span data-i18n="run">Run</span>
 									</button>
 								</div>
 							</div>
 							<div class="editor-content">
-								<!-- Textarea is replaced by CodeMirror; autocomplete off prevents browser form restoration -->
 								<textarea id="code-input" class="code-input" spellcheck="false" autocomplete="off" style="display: none;"></textarea>
 							</div>
 						</div>
-						<div class="hint-area" id="hint-area">
-							<!-- Hints displayed inline here -->
-						</div>
+						<div class="hint-area" id="hint-area"></div>
 					</section>
 				</div>

@@ -72,24 +65,20 @@
 				<div class="right-panel">
 					<div class="preview-section">
 						<div class="preview-header">
-							<span class="preview-label">Your Output</span>
-							<button id="show-expected-btn" class="btn btn-small">Show Expected</button>
+							<span class="preview-label" data-i18n="yourOutput">Your Output</span>
+							<button id="show-expected-btn" class="btn btn-small" data-i18n="showExpected">Show Expected</button>
 						</div>
 						<div class="preview-wrapper">
-							<div class="preview-frame" id="preview-area">
-								<!-- User's preview iframe will be shown here -->
-							</div>
+							<div class="preview-frame" id="preview-area"></div>
 							<div class="expected-overlay" id="expected-overlay">
-								<div class="expected-frame" id="preview-expected">
-									<!-- Expected result iframe (toggleable) -->
-								</div>
+								<div class="expected-frame" id="preview-expected"></div>
 							</div>
 						</div>
 					</div>
 					<div class="game-controls">
-						<button id="prev-btn" class="btn">Previous</button>
+						<button id="prev-btn" class="btn" data-i18n="previous">Previous</button>
 						<div class="level-indicator" id="level-indicator">Level 0/0</div>
-						<button id="next-btn" class="btn btn-primary">Next</button>
+						<button id="next-btn" class="btn btn-primary" data-i18n="next">Next</button>
 					</div>
 				</div>
 			</main>
@@ -98,14 +87,14 @@
 			<div class="sidebar-backdrop" id="sidebar-backdrop"></div>

 			<!-- Slide-out Sidebar -->
-			<aside class="sidebar-drawer" id="sidebar-drawer" aria-label="Navigation menu">
+			<aside class="sidebar-drawer" id="sidebar-drawer" data-i18n-aria-label="menu" aria-label="Menu">
 				<div class="sidebar-header">
-					<h3>Menu</h3>
-					<button id="close-sidebar" class="close-btn" aria-label="Close menu">&times;</button>
+					<h3 data-i18n="menu">Menu</h3>
+					<button id="close-sidebar" class="close-btn" data-i18n-aria-label="closeMenu" aria-label="Close menu">&times;</button>
 				</div>

 				<div class="sidebar-section">
-					<h4>Progress</h4>
+					<h4 data-i18n="progress">Progress</h4>
 					<div class="progress-display" id="progress-display">
 						<div class="progress-bar">
 							<div class="progress-fill" id="progress-fill"></div>
@@ -115,79 +104,77 @@
 				</div>

 				<nav class="sidebar-section" aria-label="Lesson navigation">
-					<h4 id="lessons-heading">Lessons</h4>
-					<div class="module-list" id="module-list" role="tree" aria-labelledby="lessons-heading">
-						<!-- Module list will be populated here -->
-					</div>
+					<h4 id="lessons-heading" data-i18n="lessons">Lessons</h4>
+					<div class="module-list" id="module-list" role="tree" aria-labelledby="lessons-heading"></div>
 				</nav>

 				<div class="sidebar-section">
-					<h4>Settings</h4>
+					<h4 data-i18n="settings">Settings</h4>
 					<label class="toggle-switch">
 						<input type="checkbox" id="disable-feedback-toggle" checked />
 						<span class="toggle-slider"></span>
-						<span class="toggle-label">Show Hints</span>
+						<span class="toggle-label" data-i18n="showHints">Show Hints</span>
 					</label>
-					<button id="reset-btn" class="btn btn-text">Reset All Progress</button>
+					<button id="reset-btn" class="btn btn-text" data-i18n="resetAllProgress">Reset All Progress</button>
 				</div>

 				<footer class="app-footer">
-					Open Source:
+					<span data-i18n="openSource">Open Source:</span>
 					<a href="https://github.com/nextlevelshit/code-crispies" target="_blank">GitHub</a>
-					by <a href="https://dailysh.it" title="Michael W. Czechowski">mwc</a>
+					<span data-i18n="by">by</span> <a href="https://dailysh.it" title="Michael W. Czechowski">mwc</a>
 				</footer>
 			</aside>

 			<!-- Help Dialog -->
 			<dialog id="help-dialog" class="dialog">
 				<div class="dialog-header">
-					<h3>Help</h3>
+					<h3 data-i18n="helpTitle">Help</h3>
 					<button id="help-dialog-close" class="dialog-close" aria-label="Close">&times;</button>
 				</div>
 				<div class="dialog-content">
-					<h4>About Code Crispies</h4>
-					<p>Code Crispies is a free, open-source platform for learning web development through hands-on exercises. No account required - just start coding!</p>
+					<h4 data-i18n="aboutTitle">About Code Crispies</h4>
+					<p data-i18n="aboutText">Code Crispies is a free, open-source platform for learning web development through hands-on exercises. No account required - just start coding!</p>

-					<h4>Learning Modes</h4>
+					<h4 data-i18n="learningModesTitle">Learning Modes</h4>
 					<ul>
-						<li><strong>CSS</strong> - Write CSS rules to style elements</li>
-						<li><strong>Tailwind</strong> - Apply utility classes directly in HTML</li>
-						<li><strong>HTML</strong> - Practice semantic markup and native elements</li>
+						<li data-i18n-html="modeCss"><strong>CSS</strong> - Write CSS rules to style elements</li>
+						<li data-i18n-html="modeTailwind"><strong>Tailwind</strong> - Apply utility classes directly in HTML</li>
+						<li data-i18n-html="modeHtml"><strong>HTML</strong> - Practice semantic markup and native elements</li>
 					</ul>

-					<h4>Getting Started</h4>
-					<p>Open the menu (☰) to browse lesson modules. Each module covers a specific topic with progressive exercises.</p>
+					<h4 data-i18n="gettingStartedTitle">Getting Started</h4>
+					<p data-i18n="gettingStartedText">Open the menu (☰) to browse lesson modules. Each module covers a specific topic with progressive exercises.</p>

-					<h4>Completing Lessons</h4>
+					<h4 data-i18n="completingLessonsTitle">Completing Lessons</h4>
 					<ol>
-						<li>Read the task instructions on the left</li>
-						<li>Write your code in the editor</li>
-						<li>Click <strong>Run</strong> or press <kbd>Ctrl+Enter</kbd> to test</li>
-						<li>Follow hints to fix any issues</li>
-						<li>Click <strong>Next</strong> when complete</li>
+						<li data-i18n="completingStep1">Read the task instructions on the left</li>
+						<li data-i18n="completingStep2">Write your code in the editor</li>
+						<li data-i18n-html="completingStep3">Click <strong>Run</strong> or press <kbd>Ctrl+Enter</kbd> to test</li>
+						<li data-i18n="completingStep4">Follow hints to fix any issues</li>
+						<li data-i18n-html="completingStep5">Click <strong>Next</strong> when complete</li>
 					</ol>

-					<h4>Editor Tools</h4>
+					<h4 data-i18n="editorToolsTitle">Editor Tools</h4>
 					<ul>
-						<li><strong>↶ Undo</strong> / <strong>↷ Redo</strong> - Navigate edit history</li>
-						<li><strong>⟲ Reset</strong> - Restore initial code for current lesson</li>
-						<li><strong>Show Expected</strong> - Toggle the target result overlay</li>
+						<li data-i18n-html="editorToolUndo"><strong>↶ Undo</strong> / <strong>↷ Redo</strong> - Navigate edit history</li>
+						<li data-i18n-html="editorToolReset"><strong>⟲ Reset</strong> - Restore initial code for current lesson</li>
+						<li data-i18n-html="editorToolExpected"><strong>Show Expected</strong> - Toggle the target result overlay</li>
 					</ul>

-					<h4>Keyboard Shortcuts</h4>
+					<h4 data-i18n="keyboardShortcutsTitle">Keyboard Shortcuts</h4>
 					<ul>
-						<li><kbd>Ctrl+Enter</kbd> - Run your code</li>
-						<li><kbd>Ctrl+Z</kbd> - Undo</li>
-						<li><kbd>Ctrl+Shift+Z</kbd> - Redo</li>
+						<li data-i18n-html="shortcutRun"><kbd>Ctrl+Enter</kbd> - Run your code</li>
+						<li data-i18n-html="shortcutUndo"><kbd>Ctrl+Z</kbd> - Undo</li>
+						<li data-i18n-html="shortcutRedo"><kbd>Ctrl+Shift+Z</kbd> - Redo</li>
 					</ul>

-					<h4>Emmet Shortcuts (HTML mode)</h4>
-					<p>Type abbreviations and press <kbd>Tab</kbd> to expand:</p>
+					<h4 data-i18n="emmetTitle">Emmet Shortcuts (HTML mode)</h4>
+					<p data-i18n-html="emmetText">Type abbreviations and press <kbd>Tab</kbd> to expand:</p>
 					<ul>
-						<li><kbd>div.box</kbd> → div with class</li>
-						<li><kbd>ul>li*3</kbd> → ul with 3 li children</li>
-						<li><kbd>form>input+button</kbd> → nested structure</li>
-						<li><kbd>p{Hello}</kbd> → p with text content</li>
+						<li data-i18n-html="emmetClass"><kbd>div.box</kbd> → div with class</li>
+						<li data-i18n-html="emmetChildren"><kbd>ul>li*3</kbd> → ul with 3 li children</li>
+						<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>
 				</div>
 			</dialog>
@@ -195,14 +182,14 @@
 			<!-- Reset Confirmation Dialog -->
 			<dialog id="reset-dialog" class="dialog">
 				<div class="dialog-header">
-					<h3>Reset Progress</h3>
+					<h3 data-i18n="resetDialogTitle">Reset Progress</h3>
 					<button id="reset-dialog-close" class="dialog-close" aria-label="Close">&times;</button>
 				</div>
 				<div class="dialog-content">
-					<p>Are you sure you want to reset all your progress? This cannot be undone.</p>
+					<p data-i18n="resetDialogText">Are you sure you want to reset all your progress? This cannot be undone.</p>
 					<div class="dialog-actions">
-						<button id="cancel-reset" class="btn">Cancel</button>
-						<button id="confirm-reset" class="btn btn-ghost">Reset All</button>
+						<button id="cancel-reset" class="btn" data-i18n="cancel">Cancel</button>
+						<button id="confirm-reset" class="btn btn-ghost" data-i18n="resetAll">Reset All</button>
 					</div>
 				</div>
 			</dialog>