Pixel Art Editor

<!-- Tools -->
<div class="px-panel">
  <div class="px-panel-label">Tool</div>
  <div class="px-tools">
    <button class="px-tool-btn active" id="px-tool-pen" title="Pen (P)">
      <span class="px-tool-icon">&#9998;</span>Pen
    </button>
    <button class="px-tool-btn" id="px-tool-eraser" title="Eraser (E)">
      <span class="px-tool-icon">&#9641;</span>Eraser
    </button>
    <button class="px-tool-btn" id="px-tool-fill" title="Fill (F)">
      <span class="px-tool-icon">&#9724;</span>Fill
    </button>
    <button class="px-tool-btn" id="px-tool-picker" title="Eyedropper (I)">
      <span class="px-tool-icon">&#128451;</span>Pick
    </button>
  </div>
</div>

<!-- Color -->
<div class="px-panel">
  <div class="px-panel-label">Color</div>
  <div class="px-palette-grid" id="px-palette"></div>
  <div class="px-color-row">
    <div class="px-current-color" id="px-current-color-swatch"></div>
    <span class="px-color-label" id="px-current-color-hex">#000000</span>
    <label class="px-custom-color" title="Custom color">
      <input type="color" id="px-custom-color-input" value="#000000">
    </label>
  </div>
</div>

<!-- Grid size -->
<div class="px-panel">
  <div class="px-panel-label">Grid Size</div>
  <div class="px-size-btns">
    <button class="px-size-btn" data-size="8">8x8</button>
    <button class="px-size-btn active" data-size="16">16x16</button>
    <button class="px-size-btn" data-size="32">32x32</button>
    <button class="px-size-btn" data-size="64">64x64</button>
  </div>
</div>

<!-- View -->
<div class="px-panel">
  <div class="px-panel-label">View</div>
  <div class="px-zoom-row" style="margin-bottom:8px;">
    <button class="px-zoom-btn" id="px-zoom-out">&#8722;</button>
    <span class="px-zoom-label" id="px-zoom-label">1x</span>
    <button class="px-zoom-btn" id="px-zoom-in">&#43;</button>
  </div>
  <div class="px-toggle-row">
    <label class="px-toggle">
      <input type="checkbox" id="px-grid-toggle" checked>
      <span class="px-toggle-slider"></span>
    </label>
    <span class="px-toggle-label">Show grid</span>
  </div>
</div>

<!-- Actions -->
<div class="px-panel">
  <div class="px-panel-label">Actions</div>
  <div class="px-actions">
    <div class="px-btn-row">
      <button class="px-btn" id="px-undo" title="Undo (Ctrl+Z)" disabled>&#8592; Undo</button>
      <button class="px-btn" id="px-redo" title="Redo (Ctrl+Y)" disabled>Redo &#8594;</button>
    </div>
    <button class="px-btn danger" id="px-clear">Clear Canvas</button>
    <button class="px-btn success" id="px-export">&#8595; Export PNG</button>
  </div>
</div>