From c7afc1e4ce770cbd6e308b478f44f8f3791b9a55 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Tue, 30 Dec 2025 22:05:58 +0100
Subject: [PATCH] fix: add dir=rtl to Arabic Hello World text

---
 lessons/00-welcome.json    | 6 +++---
 lessons/de/00-welcome.json | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/lessons/00-welcome.json b/lessons/00-welcome.json
index a9be45c..570b7e6 100644
--- a/lessons/00-welcome.json
+++ b/lessons/00-welcome.json
@@ -30,11 +30,11 @@
 			"title": "Get Started!",
 			"description": "<strong>You're ready!</strong> Open the menu (☰) to explore all modules.<br><br><strong>Recommended learning path:</strong><br>1. <em>HTML Block & Inline</em> - Understand container vs inline elements<br>2. <em>HTML Forms</em> - Build interactive forms with validation<br>3. <em>CSS Selectors</em> - Target elements precisely<br>4. <em>CSS Box Model</em> - Master padding, margin, borders<br>5. <em>CSS Flexbox</em> - Create flexible layouts<br>6. <em>CSS Animations</em> - Add motion and transitions<br><br><strong>Tips:</strong><br>• Use <em>Show Expected</em> to see the target result<br>• Your progress is saved automatically<br>• Try Emmet in HTML mode: <kbd>ul>li*3</kbd> + Tab<br><br><strong>Open Source:</strong><br>• <a href=\"https://github.com/nextlevelshit/code-crispies\" target=\"_blank\">GitHub</a> · <a href=\"https://git.librete.ch/public/code-crispies\" target=\"_blank\">Gitea</a><br>• Made by <a href=\"https://librete.ch\" target=\"_blank\">librete.ch</a> · <a href=\"https://www.linkedin.com/in/michael-werner-czechowski\" target=\"_blank\">LinkedIn</a>",
 			"task": "Let's go!",
-			"previewHTML": "<p>Hello World! 🌍</p><p>Hallo Welt!</p><p>Bonjour le monde!</p><p>¡Hola Mundo!</p><p>Ciao Mondo!</p><p>こんにちは世界!</p><p>Привет мир!</p><p>مرحبا بالعالم!</p>",
+			"previewHTML": "<p>Hello World! 🌍</p><p>Hallo Welt!</p><p>Bonjour le monde!</p><p>¡Hola Mundo!</p><p>Ciao Mondo!</p><p>こんにちは世界!</p><p>Привет мир!</p><p dir=\"rtl\">مرحبا بالعالم!</p>",
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 16px; } p { margin: 8px 0; padding: 8px 16px; border-radius: 8px; font-weight: 600; } p:nth-child(1) { background: #fef3c7; color: #92400e; font-size: 1.4em; } p:nth-child(2) { background: #dcfce7; color: #166534; font-size: 1.2em; } p:nth-child(3) { background: #dbeafe; color: #1e40af; font-size: 1.1em; } p:nth-child(4) { background: #fce7f3; color: #9d174d; } p:nth-child(5) { background: #e0e7ff; color: #4338ca; font-size: 1.3em; } p:nth-child(6) { background: #fef9c3; color: #854d0e; } p:nth-child(7) { background: #fee2e2; color: #991b1b; font-size: 1.1em; } p:nth-child(8) { background: #f3e8ff; color: #7c3aed; }",
 			"sandboxCSS": "",
-			"initialCode": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>こんにちは世界!</p>\n<p>Привет мир!</p>\n<p>مرحبا بالعالم!</p>",
-			"solution": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>こんにちは世界!</p>\n<p>Привет мир!</p>\n<p>مرحبا بالعالم!</p>",
+			"initialCode": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>こんにちは世界!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
+			"solution": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>こんにちは世界!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
diff --git a/lessons/de/00-welcome.json b/lessons/de/00-welcome.json
index bbeb67a..385b8a7 100644
--- a/lessons/de/00-welcome.json
+++ b/lessons/de/00-welcome.json
@@ -30,11 +30,11 @@
 			"title": "Los geht's!",
 			"description": "<strong>Du bist bereit!</strong> Öffne das Menü (☰) um alle Module zu erkunden.<br><br><strong>Empfohlener Lernpfad:</strong><br>1. <em>HTML Block & Inline</em> - Container vs Inline-Elemente verstehen<br>2. <em>HTML Formulare</em> - Interaktive Formulare mit Validierung erstellen<br>3. <em>CSS Selektoren</em> - Elemente präzise ansprechen<br>4. <em>CSS Box-Model</em> - Padding, Margin, Borders meistern<br>5. <em>CSS Flexbox</em> - Flexible Layouts erstellen<br>6. <em>CSS Animationen</em> - Bewegung und Übergänge hinzufügen<br><br><strong>Tipps:</strong><br>• Nutze <em>Lösung einblenden</em> um das Zielergebnis zu sehen<br>• Dein Fortschritt wird automatisch gespeichert<br>• Probiere Emmet im HTML-Modus: <kbd>ul>li*3</kbd> + Tab<br><br><strong>Open Source:</strong><br>• <a href=\"https://github.com/nextlevelshit/code-crispies\" target=\"_blank\">GitHub</a> · <a href=\"https://git.librete.ch/public/code-crispies\" target=\"_blank\">Gitea</a><br>• Entwickelt von <a href=\"https://librete.ch\" target=\"_blank\">librete.ch</a> · <a href=\"https://www.linkedin.com/in/michael-werner-czechowski\" target=\"_blank\">LinkedIn</a>",
 			"task": "Los geht's!",
-			"previewHTML": "<p>Hello World! 🌍</p><p>Hallo Welt!</p><p>Bonjour le monde!</p><p>¡Hola Mundo!</p><p>Ciao Mondo!</p><p>こんにちは世界!</p><p>Привет мир!</p><p>مرحبا بالعالم!</p>",
+			"previewHTML": "<p>Hello World! 🌍</p><p>Hallo Welt!</p><p>Bonjour le monde!</p><p>¡Hola Mundo!</p><p>Ciao Mondo!</p><p>こんにちは世界!</p><p>Привет мир!</p><p dir=\"rtl\">مرحبا بالعالم!</p>",
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 16px; } p { margin: 8px 0; padding: 8px 16px; border-radius: 8px; font-weight: 600; } p:nth-child(1) { background: #fef3c7; color: #92400e; font-size: 1.4em; } p:nth-child(2) { background: #dcfce7; color: #166534; font-size: 1.2em; } p:nth-child(3) { background: #dbeafe; color: #1e40af; font-size: 1.1em; } p:nth-child(4) { background: #fce7f3; color: #9d174d; } p:nth-child(5) { background: #e0e7ff; color: #4338ca; font-size: 1.3em; } p:nth-child(6) { background: #fef9c3; color: #854d0e; } p:nth-child(7) { background: #fee2e2; color: #991b1b; font-size: 1.1em; } p:nth-child(8) { background: #f3e8ff; color: #7c3aed; }",
 			"sandboxCSS": "",
-			"initialCode": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>こんにちは世界!</p>\n<p>Привет мир!</p>\n<p>مرحبا بالعالم!</p>",
-			"solution": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>こんにちは世界!</p>\n<p>Привет мир!</p>\n<p>مرحبا بالعالم!</p>",
+			"initialCode": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>こんにちは世界!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
+			"solution": "<p>Hello World! 🌍</p>\n<p>Hallo Welt!</p>\n<p>Bonjour le monde!</p>\n<p>¡Hola Mundo!</p>\n<p>Ciao Mondo!</p>\n<p>こんにちは世界!</p>\n<p>Привет мир!</p>\n<p dir=\"rtl\">مرحبا بالعالم!</p>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{