<!DOCTYPE html>
<html>
<head>
<title>JQAB</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link type="text/css" href="css/bootstrap-theme.css" rel="stylesheet" />
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- Handlebars -->
<script type="text/javascript" src="js/handlebars.min.js"></script>
<!-- Alpaca -->
<script type="text/javascript" src="js/alpaca.min.js"></script>
<link type="text/css" href="css/alpaca.min.css" rel="stylesheet" />
<!-- Beautify (used by EditorField) -->
<script src="js/beautify.js" type="text/javascript" charset="utf-8"></script>
<script src="js/beautify-css.js" type="text/javascript" charset="utf-8"></script>
<script src="js/beautify-html.js" type="text/javascript" charset="utf-8"></script>
<!-- typeahead.js -->
<script src="js/bloodhound.min.js" type="text/javascript"></script>
<script src="js/typeahead.bundle.min.js" type="text/javascript"></script>
<!-- datatables (for TableField) -->
<script src="js/jquery.dataTables.js" type="text/javascript"></script>
<script src="js/dataTables.bootstrap.js" type="text/javascript"></script>
<script src="js/dataTables.rowReorder.js" type="text/javascript"></script>
<link type="text/css" href="css/dataTables.bootstrap.css" rel="stylesheet"/>
<!-- ckeditor (for the ckeditor field) -->
<script src="js/ckeditor.js" type="text/javascript"></script>
<!-- fileupload control (for UploadField) -->
<link rel="stylesheet" type="text/css" href="css/jquery.fileupload.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery.fileupload-ui.css"/>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script src="js/jquery.fileupload-process.js"></script>
<script src="js/jquery.fileupload-ui.js"></script>
<!-- handsontable (for GridField) -->
<script src="js/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="css/handsontable.full.css"/>
<!-- moment for date and datetime controls -->
<script src="js/moment-with-locales.min.js"></script>
<!-- bootstrap datetimepicker for date and datetime controls -->
<script src="js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" media="screen" href="css/bootstrap-datetimepicker.css"/>
<!-- bootstrap-multiselect for time field -->
<script src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" media="screen" href="css/bootstrap-multiselect.css"/>
<!-- jQuery Price Format for currency field -->
<script type="text/javascript" src="js/jquery.priceformat.min.js"></script>
<!-- ACE editor -->
<script src="js/ace.js" type="text/javascript" charset="utf-8"></script>
<!-- jQuery UI for draggable support -->
<script src="js/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/form-builder.js"></script>
<link type="text/css" href="css/form-builder.css" rel="stylesheet" />
</head>
<body data-spy="scroll" data-target=".demo-nav">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">JQAB</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="form-builder.html">Form Builder</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12">
<div>
<ul class="nav nav-tabs">
<li class="active"><a href="form-builder.html#source" data-toggle="tab" class="tab-item tab-item-source">Source</a></li>
<li><a href="form-builder.html#designer" data-toggle="tab" class="tab-item tab-item-designer">Designer</a></li>
<li><a href="form-builder.html#view" data-toggle="tab" class="tab-item tab-item-view">View</a></li>
<li><a href="form-builder.html#code" data-toggle="tab" class="tab-item tab-item-code">Code</a></li>
<li><a href="form-builder.html#loadsave" data-toggle="tab" class="tab-item tab-item-loadsave">Load / Save</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="source">
<div class="row">
<div class="col-md-6">
<div>
<ul class="nav nav-tabs">
<li class="active"><a href="form-builder.html#schema" data-toggle="tab" class="tab-source-schema">Schema</a></li>
<li><a href="form-builder.html#options" data-toggle="tab" class="tab-source-options">Options</a></li>
<li><a href="form-builder.html#data" data-toggle="tab" class="tab-source-data">Data</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="schema">
</div>
<div class="tab-pane" id="options">
</div>
<div class="tab-pane" id="data">
</div>
</div>
</div>
<div class="col-md-6">
<div>
<ul class="nav nav-tabs">
<li class="active"><a href="form-builder.html#preview" data-toggle="tab">Preview</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="preview">
<div class="row">
<div class="col-md-12">
<div id="previewDiv"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="designer">
<div class="row">
<div class="col-md-7">
<div class="row">
<div class="col-md-12">
<div id="designerDiv"></div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<div>
<ul class="nav nav-tabs">
<li class="active"><a href="form-builder.html#types" data-toggle="tab">Types</a></li>
<li><a href="form-builder.html#basic" data-toggle="tab">Basic</a></li>
<li><a href="form-builder.html#advanced" data-toggle="tab">Advanced</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="types"></div>
<div class="tab-pane" id="basic"></div>
<div class="tab-pane" id="advanced"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="view">
<div class="row">
<div class="col-md-12">
<div id="viewDiv"></div>
</div>
</div>
</div>
<div class="tab-pane" id="code">
<div class="row">
<div class="col-md-12">
<div id="codeDiv"></div>
</div>
</div>
</div>
<div class="tab-pane" id="loadsave">
<div class="row">
<div class="col-md-12">
<button class="btn btn-default load-button">Load Form</button>
<br/>
<br/>
<button class="btn btn-default save-button">Save Form</button>
<br/>
<br/>
<br/>
<input id="form" type="text" />
<select class="select-form"></select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>