refactor: replace custom modal with native HTML dialog element

- Convert help and reset modals to native <dialog> elements
- Content is now in HTML, not dynamically generated via JS
- Use dialog.showModal() and dialog.close() native API
- Dialog handles Escape key natively for closing
- Fix list indentation in help dialog with proper padding
- Add styled kbd elements for keyboard shortcuts
- Separate dialogs for help and reset confirmation
- Apply same changes to German version

Benefits:
- Better accessibility (native focus trapping, escape handling)
- Simpler JavaScript (no DOM manipulation for content)
- Content visible in HTML source for easier editing
- Native backdrop styling via ::backdrop

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/app.de.js

@@ -49,11 +49,13 @@ const elements = {
 	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")
+	// Dialogs
+	helpDialog: document.getElementById("help-dialog"),
+	helpDialogClose: document.getElementById("help-dialog-close"),
+	resetDialog: document.getElementById("reset-dialog"),
+	resetDialogClose: document.getElementById("reset-dialog-close"),
+	cancelReset: document.getElementById("cancel-reset"),
+	confirmReset: document.getElementById("confirm-reset")
 };
 
 // Initialize the lesson engine - now the single source of truth
@@ -448,78 +450,36 @@ function runCode() {
 	}
 }
 
-// ================= MODALS =================
+// ================= DIALOGS =================
 
 function showHelp() {
-	elements.modalTitle.textContent = "Hilfe";
+	elements.helpDialog.showModal();
+}
 
-	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 closeHelpDialog() {
+	elements.helpDialog.close();
 }
 
 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");
+	elements.resetDialog.showModal();
 }
 
-function closeModal() {
-	elements.modalContainer.classList.add("hidden");
+function closeResetDialog() {
+	elements.resetDialog.close();
+}
+
+function handleResetConfirm() {
+	lessonEngine.clearProgress();
+	closeResetDialog();
+	closeSidebar();
+
+	// Reload first module
+	const modules = lessonEngine.modules;
+	if (modules.length > 0) {
+		selectModule(modules[0].id);
+	}
+
+	updateProgressDisplay();
 }
 
 // ================= INITIALIZATION =================
@@ -575,10 +535,13 @@ function init() {
 	});
 	elements.resetCodeBtn.addEventListener("click", resetCode);
 
-	// Modals
+	// Dialogs
 	elements.helpBtn.addEventListener("click", showHelp);
-	elements.modalClose.addEventListener("click", closeModal);
+	elements.helpDialogClose.addEventListener("click", closeHelpDialog);
 	elements.resetBtn.addEventListener("click", showResetConfirmation);
+	elements.resetDialogClose.addEventListener("click", closeResetDialog);
+	elements.cancelReset.addEventListener("click", closeResetDialog);
+	elements.confirmReset.addEventListener("click", handleResetConfirm);
 
 	// Settings
 	elements.disableFeedbackToggle.addEventListener("change", (e) => {
@@ -599,10 +562,9 @@ function init() {
 			e.preventDefault();
 		}
 
-		// Escape to close sidebar
+		// Escape to close sidebar (dialogs handle Escape natively)
 		if (e.key === "Escape") {
 			closeSidebar();
-			closeModal();
 		}
 	});
 }

src/app.js

@@ -49,11 +49,13 @@ const elements = {
 	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")
+	// Dialogs
+	helpDialog: document.getElementById("help-dialog"),
+	helpDialogClose: document.getElementById("help-dialog-close"),
+	resetDialog: document.getElementById("reset-dialog"),
+	resetDialogClose: document.getElementById("reset-dialog-close"),
+	cancelReset: document.getElementById("cancel-reset"),
+	confirmReset: document.getElementById("confirm-reset")
 };
 
 // Initialize the lesson engine - now the single source of truth
@@ -448,78 +450,36 @@ function runCode() {
 	}
 }
 
-// ================= MODALS =================
+// ================= DIALOGS =================
 
 function showHelp() {
-	elements.modalTitle.textContent = "Help";
+	elements.helpDialog.showModal();
+}
 
-	elements.modalContent.innerHTML = `
-		<h3>How to Use Code Crispies</h3>
-		<p>Code Crispies is an interactive platform for learning HTML, CSS, and Tailwind through practical exercises.</p>
-
-		<h4>Getting Started</h4>
-		<p>Open the menu (☰) to select a lesson module. Each module contains a series of lessons.</p>
-
-		<h4>Completing Lessons</h4>
-		<ol>
-			<li>Read the instructions on the left</li>
-			<li>Write your code in the editor</li>
-			<li>Click "Run" or press Ctrl+Enter to test</li>
-			<li>Follow the hints to fix any issues</li>
-			<li>Click "Next" when you're done</li>
-		</ol>
-
-		<h4>Tips</h4>
-		<ul>
-			<li>Click "Show Expected" to see the target result</li>
-			<li>Your progress is saved automatically</li>
-			<li>Ctrl+Enter runs your code</li>
-		</ul>
-
-		<h4>Emmet Shortcuts (HTML mode)</h4>
-		<p>Type abbreviations and press Tab to expand:</p>
-		<ul>
-			<li><kbd>div.container</kbd> → div with class</li>
-			<li><kbd>ul>li*5</kbd> → ul with 5 li children</li>
-			<li><kbd>nav>ul>li*3>a</kbd> → nested structure</li>
-			<li><kbd>p{Hello}</kbd> → p with text content</li>
-		</ul>
-	`;
-
-	elements.modalContainer.classList.remove("hidden");
+function closeHelpDialog() {
+	elements.helpDialog.close();
 }
 
 function showResetConfirmation() {
-	elements.modalTitle.textContent = "Reset Progress";
-
-	elements.modalContent.innerHTML = `
-		<p>Are you sure you want to reset all your progress? This cannot be undone.</p>
-		<div style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;">
-			<button id="cancel-reset" class="btn">Cancel</button>
-			<button id="confirm-reset" class="btn btn-ghost">Reset All</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");
+	elements.resetDialog.showModal();
 }
 
-function closeModal() {
-	elements.modalContainer.classList.add("hidden");
+function closeResetDialog() {
+	elements.resetDialog.close();
+}
+
+function handleResetConfirm() {
+	lessonEngine.clearProgress();
+	closeResetDialog();
+	closeSidebar();
+
+	// Reload first module
+	const modules = lessonEngine.modules;
+	if (modules.length > 0) {
+		selectModule(modules[0].id);
+	}
+
+	updateProgressDisplay();
 }
 
 // ================= INITIALIZATION =================
@@ -575,10 +535,13 @@ function init() {
 	});
 	elements.resetCodeBtn.addEventListener("click", resetCode);
 
-	// Modals
+	// Dialogs
 	elements.helpBtn.addEventListener("click", showHelp);
-	elements.modalClose.addEventListener("click", closeModal);
+	elements.helpDialogClose.addEventListener("click", closeHelpDialog);
 	elements.resetBtn.addEventListener("click", showResetConfirmation);
+	elements.resetDialogClose.addEventListener("click", closeResetDialog);
+	elements.cancelReset.addEventListener("click", closeResetDialog);
+	elements.confirmReset.addEventListener("click", handleResetConfirm);
 
 	// Settings
 	elements.disableFeedbackToggle.addEventListener("change", (e) => {
@@ -599,10 +562,9 @@ function init() {
 			e.preventDefault();
 		}
 
-		// Escape to close sidebar
+		// Escape to close sidebar (dialogs handle Escape natively)
 		if (e.key === "Escape") {
 			closeSidebar();
-			closeModal();
 		}
 	});
 }

src/index.de.html

@@ -136,18 +136,60 @@
 				</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 -->
+			<!-- Hilfe-Dialog -->
+			<dialog id="help-dialog" class="dialog">
+				<div class="dialog-header">
+					<h3>Hilfe</h3>
+					<button id="help-dialog-close" class="dialog-close" aria-label="Schließen">&times;</button>
+				</div>
+				<div class="dialog-content">
+					<h4>So verwendest du Code Crispies</h4>
+					<p>Code Crispies ist eine interaktive Plattform zum Lernen 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 Fehler 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 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>
+				</div>
+			</dialog>
+
+			<!-- Zurücksetzen-Bestätigungsdialog -->
+			<dialog id="reset-dialog" class="dialog">
+				<div class="dialog-header">
+					<h3>Fortschritt zurücksetzen</h3>
+					<button id="reset-dialog-close" class="dialog-close" aria-label="Schließen">&times;</button>
+				</div>
+				<div class="dialog-content">
+					<p>Bist du sicher, dass du deinen gesamten Fortschritt zurücksetzen möchtest? Dies kann nicht rückgängig gemacht werden.</p>
+					<div class="dialog-actions">
+						<button id="cancel-reset" class="btn">Abbrechen</button>
+						<button id="confirm-reset" class="btn btn-ghost">Alles zurücksetzen</button>
 					</div>
 				</div>
-			</div>
+			</dialog>
 		</div>
 
 		<script type="module" src="app.de.js"></script>

src/index.html

@@ -136,18 +136,60 @@
 				</footer>
 			</aside>
 
-			<!-- Help Modal -->
-			<div id="modal-container" class="modal-container hidden">
-				<div class="modal">
-					<div class="modal-header">
-						<h3 id="modal-title">Modal Title</h3>
-						<button id="modal-close" class="modal-close">&times;</button>
-					</div>
-					<div class="modal-content" id="modal-content">
-						<!-- Modal content will be populated here -->
+			<!-- Help Dialog -->
+			<dialog id="help-dialog" class="dialog">
+				<div class="dialog-header">
+					<h3>Help</h3>
+					<button id="help-dialog-close" class="dialog-close" aria-label="Close">&times;</button>
+				</div>
+				<div class="dialog-content">
+					<h4>How to Use Code Crispies</h4>
+					<p>Code Crispies is an interactive platform for learning HTML, CSS, and Tailwind through practical exercises.</p>
+
+					<h4>Getting Started</h4>
+					<p>Open the menu (☰) to select a lesson module. Each module contains a series of lessons.</p>
+
+					<h4>Completing Lessons</h4>
+					<ol>
+						<li>Read the instructions on the left</li>
+						<li>Write your code in the editor</li>
+						<li>Click "Run" or press Ctrl+Enter to test</li>
+						<li>Follow the hints to fix any issues</li>
+						<li>Click "Next" when you're done</li>
+					</ol>
+
+					<h4>Tips</h4>
+					<ul>
+						<li>Click "Show Expected" to see the target result</li>
+						<li>Your progress is saved automatically</li>
+						<li>Ctrl+Enter runs your code</li>
+					</ul>
+
+					<h4>Emmet Shortcuts (HTML mode)</h4>
+					<p>Type abbreviations and press Tab to expand:</p>
+					<ul>
+						<li><kbd>div.container</kbd> → div with class</li>
+						<li><kbd>ul>li*5</kbd> → ul with 5 li children</li>
+						<li><kbd>nav>ul>li*3>a</kbd> → nested structure</li>
+						<li><kbd>p{Hello}</kbd> → p with text content</li>
+					</ul>
+				</div>
+			</dialog>
+
+			<!-- Reset Confirmation Dialog -->
+			<dialog id="reset-dialog" class="dialog">
+				<div class="dialog-header">
+					<h3>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>
+					<div class="dialog-actions">
+						<button id="cancel-reset" class="btn">Cancel</button>
+						<button id="confirm-reset" class="btn btn-ghost">Reset All</button>
 					</div>
 				</div>
-			</div>
+			</dialog>
 		</div>
 
 		<script type="module" src="app.js"></script>

src/main.css

@@ -839,32 +839,24 @@ input:checked + .toggle-slider::before {
 }
 
 
-/* ================= MODAL ================= */
-.modal-container {
-	position: fixed;
-	inset: 0;
-	background: var(--modal-bg);
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	z-index: 1000;
-}
-
-.modal-container.hidden {
-	display: none;
-}
-
-.modal {
-	background: var(--panel-bg);
+/* ================= DIALOG (Native HTML) ================= */
+.dialog {
+	border: none;
 	border-radius: var(--border-radius-lg);
 	box-shadow: var(--shadow-modal);
+	padding: 0;
 	width: 90%;
 	max-width: 500px;
 	max-height: 80vh;
 	overflow-y: auto;
+	background: var(--panel-bg);
 }
 
-.modal-header {
+.dialog::backdrop {
+	background: var(--modal-bg);
+}
+
+.dialog-header {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -872,22 +864,75 @@ input:checked + .toggle-slider::before {
 	border-bottom: 1px solid var(--border-color);
 }
 
-.modal-close {
+.dialog-header h3 {
+	margin: 0;
+}
+
+.dialog-close {
 	background: none;
 	border: none;
 	font-size: 1.5rem;
 	cursor: pointer;
 	color: var(--light-text);
+	line-height: 1;
+	padding: 0;
+	width: 28px;
+	height: 28px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+	transition: all 0.2s;
 }
 
-.modal-content {
+.dialog-close:hover {
+	background: var(--primary-bg-light);
+	color: var(--primary-color);
+}
+
+.dialog-content {
 	padding: var(--spacing-lg);
 }
 
-.modal-content p {
+.dialog-content h4 {
+	margin-top: var(--spacing-md);
+	margin-bottom: var(--spacing-xs);
+	color: var(--dark-text);
+}
+
+.dialog-content h4:first-child {
+	margin-top: 0;
+}
+
+.dialog-content p {
 	margin-bottom: var(--spacing-md);
 }
 
+.dialog-content ul,
+.dialog-content ol {
+	margin: 0 0 var(--spacing-md) 0;
+	padding-left: var(--spacing-lg);
+}
+
+.dialog-content li {
+	margin-bottom: var(--spacing-xs);
+}
+
+.dialog-content kbd {
+	background: var(--code-bg);
+	padding: 2px 6px;
+	border-radius: var(--border-radius-sm);
+	font-size: 0.85em;
+	border: 1px solid var(--border-color);
+}
+
+.dialog-actions {
+	display: flex;
+	justify-content: flex-end;
+	gap: var(--spacing-sm);
+	margin-top: var(--spacing-lg);
+}
+
 /* ================= FOOTER ================= */
 .app-footer {
 	padding: var(--spacing-md);