ドット絵エディター

  <!-- Color -->
  <div class="px-panel">
    <div class="px-panel-title">カラー</div>
    <div class="px-color-preview">
      <div id="px-current-swatch" class="px-current-swatch" title="現在の色"></div>
      <div>
        <div class="px-color-label">現在の色</div>
        <div id="px-color-hex-display" class="px-color-hex">#000000</div>
      </div>
    </div>
    <input type="color" id="px-custom-color" class="px-custom-input" value="#000000" title="カスタムカラー">
    <div style="font-size:10px;color:#94a3b8;margin-top:4px;">カスタムカラーを選択</div>
  </div>

  <!-- Palette -->
  <div class="px-panel">
    <div class="px-panel-title">パレット</div>
    <div class="px-palette" id="px-palette"></div>
  </div>

  <!-- Grid toggle -->
  <div class="px-panel">
    <div class="px-panel-title">表示</div>
    <label class="px-toggle">
      <input type="checkbox" id="px-grid-toggle" checked>
      グリッド表示
    </label>
  </div>

  <!-- Actions -->
  <div class="px-panel">
    <div class="px-panel-title">操作</div>
    <div class="px-actions">
      <button id="px-btn-undo" class="px-action-btn" disabled>&#8617; 元に戻す</button>
      <button id="px-btn-redo" class="px-action-btn" disabled>&#8618; やり直し</button>
      <button id="px-btn-clear" class="px-action-btn danger">&#128465; クリア</button>
      <button id="px-btn-export" class="px-action-btn primary">&#128190; PNG書き出し</button>
    </div>
  </div>
</div>

<!-- Canvas area -->
<div class="px-canvas-area">
  <div class="px-zoom-bar">
    <button class="px-zoom-btn" id="px-btn-zoom-out" title="ズームアウト">&#8722;</button>
    <span class="px-zoom-label" id="px-zoom-label">×16</span>
    <button class="px-zoom-btn" id="px-btn-zoom-in" title="ズームイン">&#43;</button>
    <span style="font-size:11px;color:#94a3b8;margin-left:8px;">右クリック: 消去</span>
  </div>
  <div class="px-canvas-wrapper" id="px-canvas-wrapper">
    <canvas id="px-canvas"></canvas>
  </div>
  <div class="px-status" id="px-status"></div>
</div>