{
	"$schema": "../../schemas/code-crispies-module-schema.json",
	"id": "html-progress-meter",
	"title": "HTML Progress & Meter",
	"description": "اعرض حالة الإكمال والقياسات بشكل أصلي",
	"mode": "html",
	"difficulty": "beginner",
	"lessons": [
		{
			"id": "progress-basic",
			"title": "أشرطة التقدم",
			"description": "عنصر <kbd>&lt;progress&gt;</kbd> يُظهر إكمال المهمة. استخدم <kbd>value</kbd> للتقدم الحالي و <kbd>max</kbd> للإجمالي.<br><br><b>ملاحظة:</b> هذا ليس وسماً ذاتي الإغلاق! اكتب <kbd>&lt;progress&gt;...&lt;/progress&gt;</kbd> مع نص بديل بالداخل للمتصفحات القديمة.",
			"task": "أنشئ شريط تقدم يُظهر 70% إكمال:<br>1. أضف <kbd>&lt;label&gt;</kbd> يقول <code>Download:</code><br>2. أضف <kbd>&lt;progress&gt;</kbd> مع <kbd>value=\"70\"</kbd> و <kbd>max=\"100\"</kbd>",
			"previewHTML": "",
			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } progress { width: 100%; height: 20px; border-radius: 10px; } progress::-webkit-progress-bar { background: #e0e0e0; border-radius: 10px; } progress::-webkit-progress-value { background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; } progress::-moz-progress-bar { background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; }",
			"sandboxCSS": "",
			"initialCode": "",
			"solution": "<label for=\"download\">Download:</label>\n<progress id=\"download\" value=\"70\" max=\"100\">70%</progress>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_exists",
					"value": "progress",
					"message": "أضف عنصر <kbd>&lt;progress&gt;</kbd>"
				},
				{
					"type": "attribute_value",
					"value": { "selector": "progress", "attr": "value", "value": "70" },
					"message": "عيّن <kbd>value=</kbd>\"70\" في عنصر progress"
				},
				{
					"type": "attribute_value",
					"value": { "selector": "progress", "attr": "max", "value": "100" },
					"message": "عيّن <kbd>max=</kbd>\"100\" في عنصر progress"
				},
				{
					"type": "element_exists",
					"value": "label",
					"message": "أضف <kbd>&lt;label&gt;</kbd> لشريط التقدم"
				}
			]
		},
		{
			"id": "progress-indeterminate",
			"title": "تقدم غير محدد",
			"description": "عندما يكون التقدم غير معروف (مثل التحميل)، احذف سمة <kbd>value</kbd>. هذا ينشئ حالة متحركة غير محددة.<br><br>مفيد لطلبات الشبكة أو العمليات ذات المدة غير المعروفة.",
			"task": "أنشئ مؤشر تحميل:<br>1. أضف <kbd>&lt;p&gt;</kbd> يقول <code>Loading...</code><br>2. أضف <kbd>&lt;progress&gt;</kbd> بدون سمة value",
			"previewHTML": "",
			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } p { margin-bottom: 10px; color: #666; } progress { width: 100%; height: 8px; border-radius: 4px; } progress::-webkit-progress-bar { background: #e0e0e0; border-radius: 4px; }",
			"sandboxCSS": "",
			"initialCode": "",
			"solution": "<p>Loading...</p>\n<progress></progress>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_exists",
					"value": "progress",
					"message": "أضف عنصر <kbd>&lt;progress&gt;</kbd>"
				},
				{
					"type": "element_exists",
					"value": "p",
					"message": "أضف <kbd>&lt;p&gt;</kbd> مع نص التحميل"
				}
			]
		},
		{
			"id": "meter-gauge",
			"title": "مقاييس meter",
			"description": "عنصر <kbd>&lt;meter&gt;</kbd> يعرض قيمة قياسية ضمن نطاق. استخدمه للقياسات مثل مساحة القرص، البطارية، أو التقييمات.<br><br>عيّن <kbd>low</kbd> و <kbd>high</kbd> و <kbd>optimum</kbd> لتحديد النطاقات الجيدة/السيئة - المتصفح يلونها وفقاً لذلك!",
			"task": "أنشئ مقياس مستوى البطارية:<br>1. أضف <kbd>&lt;label&gt;</kbd> يقول <code>Battery:</code><br>2. أضف <kbd>&lt;meter&gt;</kbd> مع:<br>   - <kbd>value=\"0.8\"</kbd><br>   - <kbd>min=\"0\"</kbd> و <kbd>max=\"1\"</kbd><br>   - <kbd>low=\"0.2\"</kbd> و <kbd>high=\"0.8\"</kbd><br>   - <kbd>optimum=\"1\"</kbd>",
			"previewHTML": "",
			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } meter { width: 100%; height: 25px; }",
			"sandboxCSS": "",
			"initialCode": "",
			"solution": "<label for=\"battery\">Battery:</label>\n<meter id=\"battery\" value=\"0.8\" min=\"0\" max=\"1\" low=\"0.2\" high=\"0.8\" optimum=\"1\">80%</meter>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_exists",
					"value": "meter",
					"message": "أضف عنصر <kbd>&lt;meter&gt;</kbd>"
				},
				{
					"type": "attribute_value",
					"value": { "selector": "meter", "attr": "value", "value": "0.8" },
					"message": "عيّن <kbd>value=</kbd>\"0.8\" في meter"
				},
				{
					"type": "attribute_value",
					"value": { "selector": "meter", "attr": "min", "value": "0" },
					"message": "عيّن <kbd>min=</kbd>\"0\" في meter"
				},
				{
					"type": "attribute_value",
					"value": { "selector": "meter", "attr": "max", "value": "1" },
					"message": "عيّن <kbd>max=</kbd>\"1\" في meter"
				},
				{
					"type": "attribute_value",
					"value": { "selector": "meter", "attr": "low", "value": "0.2" },
					"message": "عيّن <kbd>low=</kbd>\"0.2\" لتحديد العتبة المنخفضة"
				},
				{
					"type": "attribute_value",
					"value": { "selector": "meter", "attr": "high", "value": "0.8" },
					"message": "عيّن <kbd>high=</kbd>\"0.8\" لتحديد العتبة العالية"
				},
				{
					"type": "attribute_value",
					"value": { "selector": "meter", "attr": "optimum", "value": "1" },
					"message": "عيّن <kbd>optimum=</kbd>\"1\" للإشارة إلى القيمة المثلى"
				},
				{
					"type": "element_exists",
					"value": "label",
					"message": "أضف <kbd>&lt;label&gt;</kbd> للـ meter"
				}
			]
		}
	]
}