{
	"$schema": "../../schemas/code-crispies-module-schema.json",
	"id": "html-elements",
	"title": "HTML Block & Inline",
	"description": "فهم الفرق الأساسي بين عناصر الحاويات (الكتلية) والعناصر السطرية",
	"mode": "html",
	"difficulty": "beginner",
	"lessons": [
		{
			"id": "block-vs-inline-intro",
			"title": "العناصر الكتلية vs السطرية",
			"description": "تنقسم عناصر HTML إلى فئتين رئيسيتين:<br><br><strong>العناصر الكتلية</strong> (الحاويات) تبدأ في سطر جديد وتأخذ العرض الكامل. أمثلة: <kbd>&lt;div&gt;</kbd>, <kbd>&lt;p&gt;</kbd>, <kbd>&lt;h1&gt;</kbd>, <kbd>&lt;section&gt;</kbd><br><br><strong>العناصر السطرية</strong> تتدفق داخل النص وتأخذ العرض المطلوب فقط. أمثلة: <kbd>&lt;span&gt;</kbd>, <kbd>&lt;a&gt;</kbd>, <kbd>&lt;strong&gt;</kbd>, <kbd>&lt;em&gt;</kbd>",
			"task": "أحط الكلمة <kbd>مهمة</kbd> بوسوم <kbd>&lt;strong&gt;</kbd> لجعلها عريضة. لاحظ كيف يأخذ الفقرة (كتلي) العرض الكامل بينما strong (سطري) يتدفق مع النص.",
			"previewHTML": "",
			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; } p { background: #e3f2fd; padding: 10px; } strong { background: #ffecb3; }",
			"sandboxCSS": "",
			"initialCode": "<p>هذه فقرة تحتوي على كلمة مهمة.</p>",
			"solution": "<p>هذه فقرة تحتوي على كلمة <strong>مهمة</strong>.</p>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_exists",
					"value": "p",
					"message": "أضف عنصر فقرة <kbd>&lt;p&gt;</kbd>"
				},
				{
					"type": "parent_child",
					"value": { "parent": "p", "child": "strong" },
					"message": "أحط الكلمة <kbd>مهمة</kbd> بوسوم <kbd>&lt;strong&gt;</kbd>"
				}
			]
		},
		{
			"id": "semantic-containers",
			"title": "الوسوم الدلالية",
			"description": "يستخدم HTML الحديث حاويات دلالية تصف محتواها:<br><br><kbd>&lt;header&gt;</kbd> - رأس الصفحة أو القسم<br><kbd>&lt;nav&gt;</kbd> - روابط التنقل<br><kbd>&lt;main&gt;</kbd> - منطقة المحتوى الرئيسي<br><kbd>&lt;section&gt;</kbd> - تجميع موضوعي<br><kbd>&lt;article&gt;</kbd> - محتوى مستقل<br><kbd>&lt;footer&gt;</kbd> - تذييل الصفحة أو القسم",
			"task": "أنشئ هيكل صفحة أساسي:<br>1. أضف <kbd>&lt;header&gt;</kbd> مع <kbd>&lt;h1&gt;</kbd> يحتوي على النص <code>موقعي</code><br>2. أضف عنصر <kbd>&lt;main&gt;</kbd> مع فقرة تقول <code>مرحباً بك في موقعي!</code><br>3. أضف <kbd>&lt;footer&gt;</kbd> مع فقرة تقول <code>Copyright 2026</code>",
			"previewHTML": "",
			"previewBaseCSS": "body { font-family: system-ui; margin: 0; } header { background: #1976d2; color: white; padding: 15px; } main { padding: 20px; min-height: 100px; } footer { background: #424242; color: white; padding: 10px; text-align: center; }",
			"sandboxCSS": "",
			"initialCode": "",
			"solution": "<header>\n  <h1>موقعي</h1>\n</header>\n<main>\n  <p>مرحباً بك في موقعي!</p>\n</main>\n<footer>\n  <p>Copyright 2026</p>\n</footer>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_exists",
					"value": "header",
					"message": "أضف عنصر <kbd>&lt;header&gt;</kbd>"
				},
				{
					"type": "element_exists",
					"value": "main",
					"message": "أضف عنصر <kbd>&lt;main&gt;</kbd>"
				},
				{
					"type": "element_exists",
					"value": "footer",
					"message": "أضف عنصر <kbd>&lt;footer&gt;</kbd>"
				},
				{
					"type": "parent_child",
					"value": { "parent": "header", "child": "h1" },
					"message": "أضف عنوان <kbd>&lt;h1&gt;</kbd> داخل header"
				}
			]
		}
	]
}