<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Viewer</title>
</head>
<body>
    <div id="form-container"></div>

    <script>
        // Пример JSON-файла
        const formJson = {
  "components": [
    {
      "text": "# File an Invoice\n\nAdd your invoice details below.",
      "type": "text",
      "id": "Field_1na090z",
      "layout": {
        "row": "Row_0lmsy15"
      }
    },
    {
      "label": "Image view",
      "type": "image",
      "layout": {
        "row": "Row_1ju954r",
        "columns": null
      },
      "id": "Field_0kfhe9d",
      "source": "https://i.ibb.co/NrZMfsR/105.png"
    },
    {
      "key": "creditor",
      "label": "Creditor",
      "type": "textfield",
      "validate": {
        "required": true
      },
      "id": "Field_12chft0",
      "layout": {
        "row": "Row_1rvpcsw"
      }
    },
    {
      "description": "An invoice number in the format: C-123.",
      "key": "invoiceNumber",
      "label": "Invoice Number",
      "type": "textfield",
      "validate": {
        "pattern": "^C-[0-9]+$"
      },
      "id": "Field_0jcge34",
      "layout": {
        "row": "Row_0960rdj"
      }
    },
    {
      "values": [
        {
          "label": "Value",
          "value": "value"
        }
      ],
      "label": "Tag list",
      "type": "taglist",
      "layout": {
        "row": "Row_1szoxy7",
        "columns": null
      },
      "id": "Field_0mea1nt",
      "key": "taglist_30y47"
    },
    {
      "values": [
        {
          "label": "Value",
          "value": "value"
        }
      ],
      "label": "Checkbox group",
      "type": "checklist",
      "layout": {
        "row": "Row_1szoxy7",
        "columns": null
      },
      "id": "Field_0u7r33p",
      "key": "checklist_vyc3y"
    },
    {
      "action": "submit",
      "key": "submit",
      "label": "Submit",
      "type": "button",
      "id": "Field_0ie528a",
      "layout": {
        "row": "Row_1szoxy7"
      }
    }
  ],
  "schemaVersion": 16,
  "exporter": {
    "name": "form-js (https://demo.bpmn.io)",
    "version": "1.8.3"
  },
  "type": "default",
  "id": "Form_020yixm"
};

        // Функция для генерации HTML-формы
        function generateForm(formData) {
            const container = document.getElementById('form-container');
            formData.components.forEach(component => {
                const element = document.createElement('div');
                element.id = component.id;

                if (component.type === 'text') {
                    element.innerHTML = `<p>${component.text}</p>`;
                } else if (component.type === 'textfield') {
                    element.innerHTML = `<label for="${component.key}">${component.label}</label>
                                         <input type="text" id="${component.key}" name="${component.key}" ${component.validate.required ? 'required' : ''}>`;
                } else if (component.type === 'checklist') {
                    element.innerHTML = `<label>${component.label}</label>`;
                    component.values.forEach(value => {
                        element.innerHTML += `<input type="checkbox" id="${value.value}" name="${value.value}" value="${value.value}">
                                              <label for="${value.value}">${value.label}</label>`;
                    });
                } else if (component.type === 'button') {
                    element.innerHTML = `<button type="button" id="${component.key}">${component.label}</button>`;
                }

                container.appendChild(element);
            });
        }

        // Генерация формы
        generateForm(formJson);
    </script>
</body>
</html>