{
  "id": "widgets_showcase",
  "type": "panel",
  "x": 50,
  "y": 50,
  "width": 700,
  "height": 500,
  "style": {
    "bgColor": "0x2c3e50FF"
  },
  "layout": {
    "type": "vertical",
    "padding": 20,
    "spacing": 15,
    "align": "stretch"
  },
  "children": [
    {
      "type": "label",
      "text": "UIModule Phase 4 - All Widgets Showcase",
      "height": 30,
      "style": {
        "fontSize": 20,
        "color": "0xecf0f1FF"
      }
    },
    {
      "type": "panel",
      "height": 100,
      "style": {
        "bgColor": "0x34495eFF"
      },
      "layout": {
        "type": "horizontal",
        "padding": 10,
        "spacing": 20,
        "align": "center"
      },
      "children": [
        {
          "type": "panel",
          "flex": 1,
          "layout": {
            "type": "vertical",
            "spacing": 5
          },
          "children": [
            {
              "type": "label",
              "text": "Volume Slider",
              "height": 25,
              "style": {
                "fontSize": 14,
                "color": "0xecf0f1FF"
              }
            },
            {
              "type": "slider",
              "id": "volume_slider",
              "height": 30,
              "min": 0,
              "max": 100,
              "value": 75,
              "onChange": "settings:volume",
              "style": {
                "trackColor": "0x475569FF",
                "fillColor": "0x3498dbFF",
                "handleColor": "0xecf0f1FF",
                "handleSize": 20
              }
            }
          ]
        },
        {
          "type": "panel",
          "flex": 1,
          "layout": {
            "type": "vertical",
            "spacing": 5
          },
          "children": [
            {
              "type": "label",
              "text": "Brightness",
              "height": 25,
              "style": {
                "fontSize": 14,
                "color": "0xecf0f1FF"
              }
            },
            {
              "type": "slider",
              "id": "brightness_slider",
              "height": 30,
              "min": 0,
              "max": 10,
              "value": 7,
              "step": 1,
              "onChange": "settings:brightness",
              "style": {
                "trackColor": "0x475569FF",
                "fillColor": "0xf39c12FF",
                "handleColor": "0xecf0f1FF"
              }
            }
          ]
        }
      ]
    },
    {
      "type": "panel",
      "height": 120,
      "style": {
        "bgColor": "0x34495eFF"
      },
      "layout": {
        "type": "vertical",
        "padding": 10,
        "spacing": 8
      },
      "children": [
        {
          "type": "label",
          "text": "Settings",
          "height": 25,
          "style": {
            "fontSize": 16,
                "color": "0xecf0f1FF"
              }
            },
            {
              "type": "checkbox",
              "id": "fullscreen_check",
              "text": "Fullscreen Mode",
              "height": 30,
              "checked": false,
              "onChange": "settings:fullscreen",
              "style": {
                "boxColor": "0x475569FF",
                "checkColor": "0x2ecc71FF",
                "textColor": "0xecf0f1FF",
                "fontSize": 14
              }
            },
            {
              "type": "checkbox",
              "id": "vsync_check",
              "text": "Vertical Sync",
              "height": 30,
              "checked": true,
              "onChange": "settings:vsync",
              "style": {
                "boxColor": "0x475569FF",
                "checkColor": "0x2ecc71FF",
                "textColor": "0xecf0f1FF",
                "fontSize": 14
              }
            }
          ]
        },
        {
          "type": "panel",
          "height": 100,
          "style": {
            "bgColor": "0x34495eFF"
          },
          "layout": {
            "type": "horizontal",
            "padding": 10,
            "spacing": 15,
            "align": "center"
          },
          "children": [
            {
              "type": "panel",
              "flex": 1,
              "layout": {
                "type": "vertical",
                "spacing": 5
              },
              "children": [
                {
                  "type": "label",
                  "text": "Loading Progress",
                  "height": 25,
                  "style": {
                    "fontSize": 14,
                    "color": "0xecf0f1FF"
                  }
                },
                {
                  "type": "progressbar",
                  "id": "loading_bar",
                  "height": 30,
                  "progress": 0.65,
                  "showText": true,
                  "style": {
                    "bgColor": "0x475569FF",
                    "fillColor": "0x2ecc71FF",
                    "textColor": "0xFFFFFFFF",
                    "fontSize": 12
                  }
                }
              ]
            },
            {
              "type": "panel",
              "flex": 1,
              "layout": {
                "type": "vertical",
                "spacing": 5
              },
              "children": [
                {
                  "type": "label",
                  "text": "Health Bar",
                  "height": 25,
                  "style": {
                    "fontSize": 14,
                    "color": "0xecf0f1FF"
                  }
                },
                {
                  "type": "progressbar",
                  "id": "health_bar",
                  "height": 30,
                  "progress": 0.35,
                  "showText": true,
                  "style": {
                    "bgColor": "0x475569FF",
                    "fillColor": "0xe74c3cFF",
                    "textColor": "0xFFFFFFFF",
                    "fontSize": 12
                  }
                }
              ]
            }
          ]
        },
        {
          "type": "panel",
          "flex": 1,
          "style": {
            "bgColor": "0x34495eFF"
          },
          "layout": {
            "type": "horizontal",
            "padding": 10,
            "spacing": 10,
            "align": "center",
            "justify": "center"
          },
          "children": [
            {
              "type": "button",
              "id": "btn_apply",
              "text": "Apply Settings",
              "width": 150,
              "height": 40,
              "onClick": "settings:apply",
              "style": {
                "fontSize": 14,
                "normal": { "bgColor": "0x27ae60FF", "textColor": "0xFFFFFFFF" },
                "hover": { "bgColor": "0x2ecc71FF", "textColor": "0xFFFFFFFF" },
                "pressed": { "bgColor": "0x229954FF", "textColor": "0xFFFFFFFF" }
              }
            },
            {
              "type": "button",
              "id": "btn_reset",
              "text": "Reset",
              "width": 120,
              "height": 40,
              "onClick": "settings:reset",
              "style": {
                "fontSize": 14,
                "normal": { "bgColor": "0x95a5a6FF", "textColor": "0xFFFFFFFF" },
                "hover": { "bgColor": "0xbdc3c7FF", "textColor": "0xFFFFFFFF" },
                "pressed": { "bgColor": "0x7f8c8dFF", "textColor": "0xFFFFFFFF" }
              }
            }
          ]
        }
      ]
    }