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
4.8 KiB
JSON
84 lines
4.8 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-dialog",
|
|
"title": "Diálogos",
|
|
"description": "Crea diálogos modales sin bibliotecas JavaScript",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "dialog-basic",
|
|
"title": "Abrir diálogo",
|
|
"description": "El elemento <kbd><dialog></kbd> crea un modal nativo. Añade el atributo <kbd>open</kbd> para mostrarlo.<br><br>¡Usa <kbd><form method=\"dialog\"></kbd> dentro para cerrarlo al enviar el formulario - sin JavaScript!",
|
|
"task": "Crea un diálogo con:<br>1. El atributo <kbd>open</kbd> para mostrarlo<br>2. Un <kbd><h2></kbd> que diga <code>¡Bienvenido!</code><br>3. Un <kbd><p></kbd> con un mensaje de saludo<br>4. Un <kbd><form method=\"dialog\"></kbd> con un botón de cerrar",
|
|
"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": "Añade un elemento <kbd><dialog></kbd>"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "dialog", "attr": "open", "value": true },
|
|
"message": "Añade el atributo <kbd>open</kbd> para mostrar el diálogo"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "dialog h2",
|
|
"message": "Añade un encabezado <kbd><h2></kbd> dentro del diálogo"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "form[method='dialog']",
|
|
"message": "Añade un <kbd><form method=\"dialog\"></kbd> para cerrar"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "dialog button",
|
|
"message": "Añade un botón de cerrar dentro del formulario"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "dialog-form",
|
|
"title": "Diálogo + Formulario",
|
|
"description": "Los diálogos pueden contener formularios completos. El <kbd>method=\"dialog\"</kbd> hace que el formulario cierre el diálogo al enviar en lugar de enviar datos.<br><br>Este patrón es perfecto para diálogos de confirmación, entradas rápidas o paneles de configuración.",
|
|
"task": "Crea un diálogo de confirmación:<br>1. Añade <kbd>open</kbd> para mostrarlo<br>2. Un <kbd><h2></kbd> que diga <code>Confirmar eliminación</code><br>3. Un <kbd><p></kbd> preguntando <code>¿Estás seguro?</code><br>4. Un <kbd><form method=\"dialog\"></kbd> con botones Cancelar y Eliminar",
|
|
"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": "Añade un <kbd><dialog></kbd> con el atributo open"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "dialog h2",
|
|
"message": "Añade un encabezado al diálogo"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "form[method='dialog']",
|
|
"message": "Añade un <kbd><form method=\"dialog\"></kbd> para los botones"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "dialog button", "min": 2 },
|
|
"message": "Añade al menos 2 botones (Cancelar y Confirmar)"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|