git.bytex64.net -- niven

/src/index.html
<!DOCTYPE html>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="app.js"></script>

<div class="app">
  <div class="editor">
    <div class="tools1">
      <div class="drawing-tools">
        <button id="pen" onclick="selectTool(TOOL_PEN)">Pen</button>
        <button id="fill" onclick="selectTool(TOOL_FILL)">Fill</button>
        <button id="line" onclick="selectTool(TOOL_LINE)">Line</button>
        <button id="rect" onclick="selectTool(TOOL_RECT)">Rect</button>
        <button id="snow" onclick="selectTool(TOOL_SNOW)">Snow</button>
      </div>
      <div class="spacer"></div>
      <div class="global-actions">
        <button onclick="savePNG()">Save</button>
        <button onclick="loadFile()">Load</button>
        <button onclick="undo()">Undo</button>
        <button onclick="toggleGrid()" id="button-grid" class="active">Grid</button>
        <button onclick="showSizes()" id="button-size">Size</button>
      </div>
      <div class="preview" id="preview"></div>
    </div>
    <div class="viewport">
      <canvas id="pixelEditor"></canvas>
    </div>
    <div class="tools2">
      <div class="palette-switch">
        <button onclick="prevPalette()">&larr;</button>
        <button onclick="nextPalette()">&rarr;</button>
      </div>
      <div id="palette-id"></div>
      <div class="palette" id="palette">
        <div class="swatch"></div>
        <div class="swatch"></div>
        <div class="swatch"></div>
        <div class="swatch"></div>
        <div class="swatch"></div>
        <div class="swatch"></div>
        <div class="swatch"></div>
        <div class="swatch"></div>
        <div class="swatch"></div>
        <div class="swatch"></div>
        <div class="swatch"></div>
        <div class="swatch"></div>
        <div class="swatch"></div>
        <div class="swatch"></div>
        <div class="swatch"></div>
        <div class="swatch"></div>
      </div>
      <!--
      <div class="transparent-selector">
        <button id="button-no-transparency" class="active">No Trans</button>
        <button id="button-transparency">Trans</button>
      </div>
      -->
    </div>
  </div>
  <div class="debug">
  </div>
</div>

<div class="dialog" id="dialog-select-size" style="display: none">
  <h2>Canvas Size</h2>
  <div class="content">
    <button onclick="selectSize(8)" style="width: 16px; height: 16px">8</button>
    <button onclick="selectSize(16)" style="width: 32px; height: 32px; left: 20px">16</button>
    <button onclick="selectSize(24)" style="width: 48px; height: 48px; left: 4px; top: 38px">24</button>
    <button onclick="selectSize(32)" style="width: 64px; height: 64px; left: 56px;">32</button>
    <button onclick="selectSize(48)" style="width: 96px; height: 96px; left: 124px">48</button>
    <button onclick="selectSize(64)" style="width: 128px; height: 128px; top: 91px">64</button>
    <button onclick="selectSize(96)" style="width: 192px; height: 192px; left: 224px">96</button>
    <button onclick="selectSize(128)" style="width: 256px; height: 256px; left: 145px; top: 114px">128</button>
  </div>
  <div class="controls">
    <button id="select-size-cancel">Cancel</button>
  </div>
</div>

<div class="dialog" id="dialog-colorpicker" style="display: none">
  <h2>Edit Color</h2>
  <div class="content">
    <div id="colorpicker-color"></div>
    <div class="colorpicker-values">
      <div>Red: <input id="colorpicker-red" type="text" size="3"></div>
      <div>Green: <input id="colorpicker-green" type="text" size="3"></div>
      <div>Blue: <input id="colorpicker-blue" type="text" size="3"></div>
    </div>
  </div>
  <div class="controls">
    <button id="colorpicker-cancel">Cancel</button>
    <button id="colorpicker-ok">OK</button>
  </div>
</div>

<div class="dialog" id="dialog-save-fail" style="display: none">
  <h2>Save</h2>
  <div class="content">
    It looks like your browser can't directly save this image. You might
    be able to right click and save it below, or drag-and-drop it,
    though.
    <p><img id="save-fail-image">
  </div>
  <div class="controls">
    <button id="save-fail-close">Close</button>
  </div>
</div>

<iframe id="saver"></iframe>
<input id="loader" type="file">