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.6 KiB
JSON
84 lines
5.6 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": "Додайте принаймні 2 кнопки (Скасувати та Підтвердити)"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|