index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>ansiedit</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="scripts/elementhelper.js" type="text/javascript"></script>
<script src="editor/toolbar.js" type="text/javascript"></script>
<script src="editor/modal.js" type="text/javascript"></script>
<script src="editor/palette.js" type="text/javascript"></script>
<script src="editor/codepage.js" type="text/javascript"></script>
<script src="editor/editor.js" type="text/javascript"></script>
<script src="tools/freehand.js" type="text/javascript"></script>
<script src="tools/mirror.js" type="text/javascript"></script>
<script src="tools/fill.js" type="text/javascript"></script>
<script src="tools/colorbrush.js" type="text/javascript"></script>
<script src="tools/charbrush.js" type="text/javascript"></script>
<script src="tools/grid.js" type="text/javascript"></script>
<script src="tools/undo.js" type="text/javascript"></script>
<script src="tools/clear.js" type="text/javascript"></script>
<script src="tools/load.js" type="text/javascript"></script>
<script src="tools/save.js" type="text/javascript"></script>
<script src="tools/text.js" type="text/javascript"></script>
<script src="tools/extendedbrush.js" type="text/javascript"></script>
<script type="text/javascript" type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
"use strict";
var retina, palette, codepage, editor, toolbar, modal;
retina = window.devicePixelRatio > 1;
toolbar = toolbarWidget(retina);
toolbar.init();
palette = paletteWidget(retina);
codepage = codepageGenerator(palette, retina);
editor = editorCanvas(100, palette, codepage, retina);
editor.init(document.getElementById("editor"));
toolbar.addTool(freehandTool(editor, palette), {"keyCode": 102, "symbol": "f"}).select();
toolbar.addTool(mirrorTool(editor), {"keyCode": 109, "symbol": "m"});
toolbar.addTool(fillTool(editor, palette), {"keyCode": 110, "symbol": "n"});
toolbar.addTool(colorBrushTool(editor, palette), {"keyCode": 99, "symbol": "c"});
toolbar.addTool(charBrushTool("Shading", editor, palette, [{"charCode": codepage.LIGHT_SHADE, "name": "Light"}, {"charCode": codepage.MEDIUM_SHADE, "name": "Medium"}, {"charCode": codepage.DARK_SHADE, "name": "Dark"}]), {"keyCode": 115, "symbol": "s"});
toolbar.addTool(charBrushTool("Vertical Block", editor, palette, [{"charCode": codepage.LEFT_HALF_BLOCK, "name": "Left"}, {"charCode": codepage.RIGHT_HALF_BLOCK, "name": "Right"}]), {"keyCode": 118, "symbol": "v"});
toolbar.addTool(gridTool(editor, codepage, retina), {"keyCode": 103, "symbol": "g"}).select();
toolbar.addTool(undoTool(editor), {"keyCode": 122, "symbol": "z"});
toolbar.addTool(clearTool(editor));
toolbar.addTool(loadTool(editor, toolbar));
toolbar.addTool(saveTool(editor, toolbar));
toolbar.addTool(textTool(editor, toolbar, palette, codepage, retina), {"keyCode": 116, "symbol": "t"});
toolbar.addTool(extendedBrushTool(editor, palette, codepage, retina), {"keyCode": 98, "symbol": "b"});
});
</script>
</head>
<body>
<div class="editor-container">
<div id="toolkit">
<div id="tools">
</div>
<div id="palette">
</div>
</div>
<div id="editor"></div>
<div id="preview">
</div>
</div>
</body>
</html>