<html>
  <head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
  </head>
  <body>
  <script src="/bricks/bricks.js"></script>
	<script>
		const opts = 
{
	"widget": {
		"widgettype":"VBox",
		"options":{"height":"100%"},
		"subwidgets":[
			{
				"widgettype":"HBox",
				"options":{"height":"auto"},
				"subwidgets":[
					{
						"widgettype":"Text",
						"options":{
							"otext":"Please change Font size",
							"i18n":true
						}
					},
				   {
						"widgettype":"Button",
						"options":{
							"label":"A",
							"width":"auto",
							"item_rate":1.4
						},
						"binds":[
							{
								"wid":"self",
								"event":"click",
								"actiontype":"script",
								"target":"app",
								"script":"bricks_app.textsize_bigger()"
							}
						]
					},
					{
						"widgettype":"Button",
						"options":{
							"label":"A",
							"width":"auto",
							"item_rate":0.8
						},
						"binds":[
							{
								"wid":"self",
								"event":"click",
								"actiontype":"script",
								"target":"app",
								"script":"bricks_app.textsize_smaller()"
							}
						]
					}
				]
			},
			{
				"widgettype":"Form",
				"options":{
					"submit_url":"/ttt/ttt.dspy",
					"title":"Test hahah  Form",
					"description":"test input implemented",
					"fields":[
						{
							"uitype":"email",
							"name":"email",
							"label":"Email",
							'required':true
						},
						{
							"uitype":"tel",
							"name":"tel",
							"pattern":"{\d}3-{\d}4-{\d}4",
							"label":"Tel",
							'required':true
						},
						{
							"uitype":"file",
							"name":"file",
							"label":"File",
							'required':true
						},
						{
							"uitype":"str",
							"minlength":3,
							"length":30,
							"value":"tlegre",
							"name":"name",
							"label":"Name",
							'required':true
						},
						{
							"uitype":"int",
							"minlength":3,
							"length":30,
							"value":12432,
							"name":"integer",
							"label":"Integer",
							'required':true
						},
						{
							"uitype":"float",
							"dec_length":3,
							"length":25,
							"name":"float",
							"label":"Float"
						},
						{
							"uitype":"date",
							"name":"date",
							"label":"Date",
							'required':true
						},
						{
							"uitype":"password",
							"minlength":3,
							"length":30,
							"name":"password",
							"label":"Password",
							'required':true
						},
						{
							"uitype":"checkbox",
							"name":"checkbox",
							"label":"CheckBox",
							"value":2,
							"dataurl":"test_code.json",
							'required':true
						},
						{
							"uitype":"audio",
							"name":"audio",
							"label":"Audio",
							'required':true
						},
						{
							"uitype":"code",
							"name":"code",
							"label":"Code",
							"value":2,
							"dataurl":"test_code.json",
							'required':true
						},
						{
							"uitype":"text",
							"name":"text",
							"value":"This is a test",
							"label":"Text",
							'required':true
						}
					]
				}
			}
		]
	}
}

		;
		const app = new BricksApp(opts);
		app.run();
	</script>
</body>
</html>