Michael Czechowski
1a5c09b750
Synchronizes 72 lesson files across 5 languages (de, pl, es, ar, uk) to match the English source. This ensures code, solutions, and validations are identical while only title, description, task, and message fields are translated. Changes include: - Box model lessons (01-box-model.json) - Units and variables (05-units-variables.json) - Transitions and animations (06-transitions-animations.json) - Responsive design (08-responsive.json) - HTML elements (20-html-elements.json) - HTML forms basic and validation (21, 22) - HTML details/summary, progress/meter (23, 24) - HTML datalist, dialog, fieldset (25, 27, 28) - HTML tables and SVG (30, 32) - HTML marquee (31) - Welcome module (00-welcome.json) Fixes validation inconsistencies and removes extra content that exceeded English source. German translations were largely correct; Polish, Spanish, Arabic, and Ukrainian required full translations.
84 lines
5.0 KiB
JSON
84 lines
5.0 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-dialog",
|
|
"title": "مربعات الحوار",
|
|
"description": "أنشئ مربعات حوار نموذجية بدون مكتبات JavaScript",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "dialog-basic",
|
|
"title": "فتح مربع الحوار",
|
|
"description": "عنصر <kbd><dialog></kbd> ينشئ نافذة نموذجية أصلية. أضف سمة <kbd>open</kbd> لعرضها.<br><br>استخدم <kbd><form method=\"dialog\"></kbd> بداخلها لإغلاقها عند إرسال النموذج - بدون JavaScript!",
|
|
"task": "أنشئ مربع حوار مع:<br>1. سمة <kbd>open</kbd> لعرضه<br>2. عنصر <kbd><h2></kbd> يقول <code>أهلاً!</code><br>3. عنصر <kbd><p></kbd> مع رسالة ترحيب<br>4. عنصر <kbd><form method=\"dialog\"></kbd> مع زر إغلاق",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; min-height: 200px; background: #f5f5f5; } dialog { border: none; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); padding: 25px; max-width: 400px; } dialog::backdrop { background: rgba(0,0,0,0.5); } dialog h2 { margin: 0 0 15px 0; color: #1976d2; } dialog p { color: #666; margin: 0 0 20px 0; } dialog button { background: #1976d2; color: white; border: none; padding: 10px 25px; border-radius: 6px; cursor: pointer; font-size: 16px; } dialog button:hover { background: #1565c0; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<dialog open>\n <h2>Welcome!</h2>\n <p>This is a native HTML dialog element.</p>\n <form method=\"dialog\">\n <button>Close</button>\n </form>\n</dialog>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "dialog",
|
|
"message": "أضف عنصر <kbd><dialog></kbd>"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "dialog", "attr": "open", "value": true },
|
|
"message": "أضف سمة <kbd>open</kbd> لعرض مربع الحوار"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "dialog h2",
|
|
"message": "أضف عنوان <kbd><h2></kbd> داخل مربع الحوار"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "form[method='dialog']",
|
|
"message": "أضف <kbd><form method=\"dialog\"></kbd> للإغلاق"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "dialog button",
|
|
"message": "أضف زر إغلاق داخل النموذج"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "dialog-form",
|
|
"title": "حوار + نموذج",
|
|
"description": "مربعات الحوار يمكن أن تحتوي على نماذج كاملة. <kbd>method=\"dialog\"</kbd> يجعل النموذج يغلق مربع الحوار عند الإرسال بدلاً من إرسال البيانات.<br><br>هذا النمط مثالي لحوارات التأكيد، المدخلات السريعة، أو لوحات الإعدادات.",
|
|
"task": "أنشئ مربع حوار تأكيد:<br>1. أضف <kbd>open</kbd> لعرضه<br>2. عنصر <kbd><h2></kbd> يقول <code>تأكيد الحذف</code><br>3. عنصر <kbd><p></kbd> يسأل <code>هل أنت متأكد؟</code><br>4. عنصر <kbd><form method=\"dialog\"></kbd> مع أزرار إلغاء وحذف",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; min-height: 200px; background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%); } dialog { border: none; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); padding: 25px; max-width: 350px; text-align: center; } dialog h2 { margin: 0 0 10px 0; color: #c62828; } dialog p { color: #666; margin: 0 0 20px 0; } dialog form { display: flex; gap: 10px; justify-content: center; } dialog button { padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 14px; border: none; } dialog button:first-child { background: #e0e0e0; color: #333; } dialog button:last-child { background: #c62828; color: white; } dialog button:hover { opacity: 0.9; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<dialog open>\n <h2>Confirm Delete</h2>\n <p>Are you sure you want to delete this item?</p>\n <form method=\"dialog\">\n <button value=\"cancel\">Cancel</button>\n <button value=\"delete\">Delete</button>\n </form>\n</dialog>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "dialog[open]",
|
|
"message": "أضف <kbd><dialog></kbd> مع سمة open"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "dialog h2",
|
|
"message": "أضف عنواناً لمربع الحوار"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "form[method='dialog']",
|
|
"message": "أضف <kbd><form method=\"dialog\"></kbd> للأزرار"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "dialog button", "min": 2 },
|
|
"message": "أضف على الأقل زرين (إلغاء وتأكيد)"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|