<!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/preview.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/brighten.js" type="text/javascript"></script> <script src="tools/darken.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, preview, editor, toolbar, modal; retina = window.devicePixelRatio > 1; toolbar = toolbarWidget(retina); toolbar.init(); palette = paletteWidget(retina); codepage = codepageGenerator(palette, retina); preview = previewCanvas(100, codepage, retina); preview.init(document.getElementById("preview")); editor = editorCanvas(100, palette, preview, codepage, retina); editor.init(document.getElementById("editor")); toolbar.addTool(freehandTool(editor, palette), {"keyCode": 102, "symbol": "f"}).select(); 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(extendedBrushTool(editor, palette, codepage, retina), {"keyCode": 101, "symbol": "e"}); toolbar.addTool(textTool(editor, toolbar, palette, codepage, retina), {"keyCode": 116, "symbol": "t"}); toolbar.addTool(brightenTool(editor), {"keyCode": 98, "symbol": "b"}); toolbar.addTool(darkenTool(editor), {"keyCode": 100, "symbol": "d"}); toolbar.addTool(fillTool(editor, palette), {"keyCode": 110, "symbol": "n"}); toolbar.addTool(colorBrushTool(editor, palette), {"keyCode": 99, "symbol": "c"}); toolbar.addTool(mirrorTool(editor), {"keyCode": 109, "symbol": "m"}); toolbar.addTool(gridTool(editor, codepage, retina), {"keyCode": 103, "symbol": "g"}); toolbar.addTool(undoTool(editor), {"keyCode": 122, "symbol": "z"}); toolbar.addTool(loadTool(editor, toolbar)); toolbar.addTool(saveTool(editor, toolbar)); toolbar.addTool(clearTool(editor, toolbar)); }); </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>