{
	"$schema": "../../schemas/code-crispies-module-schema.json",
	"id": "html-marquee",
	"title": "HTML Marquee",
	"description": "أنشئ نصاً متحركاً باستخدام عنصر marquee الكلاسيكي (قديم لكنه ممتع!)",
	"mode": "html",
	"difficulty": "beginner",
	"lessons": [
		{
			"id": "marquee-basic",
			"title": "النص المتحرك",
			"description": "عنصر <kbd>&lt;marquee&gt;</kbd> ينشئ نصاً متحركاً - كلاسيكي من الويب القديم! رغم أنه قديم، لا يزال يعمل في معظم المتصفحات.<br><br>ملاحظة: للإنتاج، استخدم حركات CSS بدلاً منه. لكن للتعلم والمرح، marquee رائع!",
			"task": "أنشئ marquee بسيط:<br>1. أضف عنصر <kbd>&lt;marquee&gt;</kbd><br>2. ضع نصاً بداخله مثل <code>مرحباً بك في موقعي!</code>",
			"previewHTML": "",
			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); min-height: 150px; display: flex; align-items: center; } marquee { font-size: 2rem; color: #00ff00; text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00; font-family: 'Courier New', monospace; }",
			"sandboxCSS": "",
			"initialCode": "",
			"solution": "<marquee>Welcome to my website!</marquee>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_exists",
					"value": "marquee",
					"message": "أضف عنصر <kbd>&lt;marquee&gt;</kbd>"
				}
			]
		},
		{
			"id": "marquee-direction",
			"title": "الاتجاه والسلوك",
			"description": "تحكم في marquee باستخدام السمات:<br>• <kbd>direction</kbd>: left، right، up، down<br>• <kbd>behavior</kbd>: scroll (افتراضي)، slide (يتوقف عند الحافة)، alternate (يرتد)<br>• <kbd>scrollamount</kbd>: السرعة (الافتراضي 6)",
			"task": "أنشئ marquee مرتداً:<br>1. أضف عنصر <kbd>&lt;marquee&gt;</kbd><br>2. اضبط <kbd>behavior=\"alternate\"</kbd> ليرتد<br>3. أضف نصاً ممتعاً",
			"previewHTML": "",
			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%); min-height: 150px; display: flex; align-items: center; } marquee { font-size: 2.5rem; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); font-weight: bold; }",
			"sandboxCSS": "",
			"initialCode": "",
			"solution": "<marquee behavior=\"alternate\">Bounce! Bounce! Bounce!</marquee>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_exists",
					"value": "marquee",
					"message": "أضف عنصر <kbd>&lt;marquee&gt;</kbd>"
				},
				{
					"type": "attribute_value",
					"value": { "selector": "marquee", "attr": "behavior", "value": "alternate" },
					"message": "أضف <kbd>behavior=</kbd>\"alternate\" ليرتد"
				}
			]
		},
		{
			"id": "marquee-retro",
			"title": "شريط أخبار كلاسيكي",
			"description": "اجمع عدة سمات marquee لتأثير شريط أخبار كلاسيكي. يمكنك حتى وضع عناصر متعددة بداخله!<br><br>تذكر: هذا HTML قديم. المواقع الحديثة تستخدم حركات CSS، لكن marquee رائع لفهم تاريخ الويب.",
			"task": "أنشئ شريط أخبار:<br>1. عنصر <kbd>&lt;marquee&gt;</kbd> مع <kbd>direction=\"left\"</kbd><br>2. اضبط <kbd>scrollamount=\"5\"</kbd> للتمرير السلس<br>3. أضف عنواناً إخبارياً عاجلاً بداخله",
			"previewHTML": "",
			"previewBaseCSS": "body { font-family: system-ui; padding: 0; margin: 0; background: #1a1a2e; } marquee { background: linear-gradient(90deg, #c0392b 0%, #e74c3c 50%, #c0392b 100%); padding: 15px 0; font-size: 1.3rem; color: white; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; border-top: 3px solid #f1c40f; border-bottom: 3px solid #f1c40f; }",
			"sandboxCSS": "",
			"initialCode": "",
			"solution": "<marquee direction=\"left\" scrollamount=\"5\">BREAKING NEWS: Marquee element still works in browsers!</marquee>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_exists",
					"value": "marquee",
					"message": "أضف عنصر <kbd>&lt;marquee&gt;</kbd>"
				},
				{
					"type": "attribute_value",
					"value": { "selector": "marquee", "attr": "direction", "value": "left" },
					"message": "أضف <kbd>direction=</kbd>\"left\" للتمرير الأفقي"
				},
				{
					"type": "attribute_value",
					"value": { "selector": "marquee", "attr": "scrollamount", "value": "5" },
					"message": "أضف <kbd>scrollamount=</kbd>\"5\" لسرعة سلسة"
				}
			]
		}
	]
}