<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>JSON Editor</title>
<link rel="stylesheet" type="text/css" href="app.min.css">
<script type="text/javascript" src="app.min.js" charset="utf-8"></script>
</head>
<body>
<div id="header">
<a href="#" class="header">
<img alt="JSON Editor" title="JSON Editor" src="img/logo.png" id="logo">
</a>
<div id="name-menu">
<div id="name" title="Document name. Click to change"></div>
<div id="name-status" title="Changes are automatically saved online"></div>
</div>
<div id="menu">
<ul>
<li>
<a id="new" title="Open a new, empty document">New</a>
</li>
<li>
<a id="open" title="Open file">
Open <span class="dropDownIcon">▼</span>
</a>
<ul id="openMenu">
<li>
<a id="openFromDisk" title="Open file from disk">Open from disk</a>
</li>
<li>
<a id="openUrl" title="Open file from url">Open url</a>
</li>
<li id="filesList"></li>
</ul>
</li>
<li>
<a id="save" title="Save file">
Save <span class="dropDownIcon">▼</span>
</a>
<ul id="saveMenu">
<li>
<a id="saveToDisk" title="Save file to disk">Save to disk</a>
</li>
<li>
<a id="saveOnline" title="Save and share online">Save online</a>
</li>
</ul>
</li>
<li class="settings">
<a id="settings" title="Settings">
Settings <span class="dropDownIcon">▼</span>
</a>
<ul id="settingsMenu">
<li>
<div class="indentation">
<label for="indentation">Indentation <input id="indentation" value="2" /></label>
</div>
</li>
<li id="schemasList"></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="auto">
<div id="contents">
<div id="codeEditor"></div>
<div id="splitter">
<div id="buttons">
<div>
<button id="toTree" class="convert" title="Copy code to tree editor (Ctrl + >)">
<div class="convert-right"></div>
</button>
</div>
<div>
<button id="toCode" class="convert" title="Copy tree to code editor (Ctrl + <)">
<div class="convert-left"></div>
</button>
</div>
</div>
<div id="drag"></div>
</div>
<div id="treeEditor"></div>
<script type="text/javascript">
app.load();
app.resize();
</script>
</div>
</div>
</body>
</html>
