nespaint/views/surface.html

        <div class="pure-u-2-3">
          <div class="pure-g">
            <div class="pure-u-1 simple-padding">
              <canvas id="painter" width:"128" height:"256"></canvas>
            </div>
          </div>
          <div class="pure-g">
            <div class="pure-u-1-2">
              <div class="simple-padding">
                NES System Palette
              </div>
              <div class="NES-palette simple-padding">
                <div class="pure-g">
                  <div class="pure-u-1-4"> 
                    <div class="pure-g">
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="00">00</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="01">01</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="02">02</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="03">03</button></div>
                    </div>
                  </div>
                  <div class="pure-u-1-4">
                    <div class="pure-g">
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="04">04</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="05">05</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="06">06</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="07">07</button></div>
                    </div>
                  </div>
                  <div class="pure-u-1-4">
                    <div class="pure-g">
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="08">08</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="09">09</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="0A">0A</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="0B">0B</button></div>
                    </div>
                  </div>
                  <div class="pure-u-1-4">
                    <div class="pure-g">
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="0C">0C</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="0D">0D</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="0E">0E</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="0F">0F</button></div>
                    </div>
                  </div> 
                </div>
                <div class="pure-g">
                  <div class="pure-u-1-4">
                    <div class="pure-g">
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="10">10</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="11">11</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="12">12</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="13">13</button></div>
                    </div>
                  </div>
                  <div class="pure-u-1-4">
                    <div class="pure-g">
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="14">14</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="15">15</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="16">16</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="17">17</button></div>
                    </div>
                  </div>
                  <div class="pure-u-1-4">
                    <div class="pure-g">
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="18">18</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="19">19</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="1A">1A</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="1B">1B</button></div>
                    </div>
                  </div>
                  <div class="pure-u-1-4">
                    <div class="pure-g">
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="1C">1C</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="1D">1D</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="1E">1E</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="1F">1F</button></div>
                    </div>
                  </div>
                </div>
                <div class="pure-g">
                  <div class="pure-u-1-4">
                    <div class="pure-g">
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="20">20</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="21">21</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="22">22</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="23">23</button></div>
                    </div>
                  </div>
                  <div class="pure-u-1-4">
                    <div class="pure-g">
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="24">24</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="25">25</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="26">26</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="27">27</button></div>
                    </div>
                  </div>
                  <div class="pure-u-1-4">
                    <div class="pure-g">
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="28">28</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="29">29</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="2A">2A</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="2B">2B</button></div>
                    </div>
                  </div>
                  <div class="pure-u-1-4">
                    <div class="pure-g">
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="2C">2C</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="2D">2D</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="2E">2E</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="2F">2F</button></div>
                    </div>
                  </div> 
                </div>
                <div class="pure-g">
                  <div class="pure-u-1-4">
                    <div class="pure-g">
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="30">30</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="31">31</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="32">32</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="33">33</button></div>
                    </div>
                  </div>
                  <div class="pure-u-1-4">
                    <div class="pure-g">
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="34">34</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="35">35</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="36">36</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="37">37</button></div>
                    </div>
                  </div>
                  <div class="pure-u-1-4">
                    <div class="pure-g">
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="38">38</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="39">39</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="3A">3A</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="3B">3B</button></div>
                    </div>
                  </div>
                  <div class="pure-u-1-4">
                    <div class="pure-g">
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="3C">3C</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="3D">3D</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="3E">3E</button></div>
                      <div class="pure-u-1-4"><button class="pure-button" nesidx="3F">3F</button></div>
                    </div>
                  </div> 
                </div>
              </div>
            </div>
            <div class="pure-u-1-2">
              <div class-"simple-padding">
                Drawing Palettes
              </div>
              <div class="pure-g">
                <div class="pure-u-1-2">
                  <div class="simple-padding">
                    Palette 1
                  </div>
                  <div class="simple-padding">
                    <div class="pure-button-group" role="group">
                      <button class="pure-button" cidx="0" pidx="0">0</button>
                      <button class="pure-button" cidx="1" pidx="0">1</button>
                      <button class="pure-button" cidx="2" pidx="0">2</button>
                      <button class="pure-button" cidx="3" pidx="0">3</button>
                    </div>
                  </div>
                </div>
                <div class="pure-u-1-2">
                  <div class="simple-padding">
                    Palette 2
                  </div>
                  <div class="simple-padding">
                    <div class="pure-button-group" role="group">
                      <button class="pure-button" cidx="0" pidx="1">0</button>
                      <button class="pure-button" cidx="1" pidx="1">1</button>
                      <button class="pure-button" cidx="2" pidx="1">2</button>
                      <button class="pure-button" cidx="3" pidx="1">3</button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="pure-g">
                <div class="pure-u-1-2">
                  <div class="simple-padding">
                    Palette 3
                  </div>
                  <div class="simple-padding">
                    <div class="pure-button-group" role="group">
                      <button class="pure-button" cidx="0" pidx="2">0</button>
                      <button class="pure-button" cidx="1" pidx="2">1</button>
                      <button class="pure-button" cidx="2" pidx="2">2</button>
                      <button class="pure-button" cidx="3" pidx="2">3</button>
                    </div>
                  </div>
                </div>
                <div class="pure-u-1-2">
                  <div class="simple-padding">
                    Palette 4
                  </div>
                  <div class="simple-padding">
                    <div class="pure-button-group" role="group">
                      <button class="pure-button" cidx="0" pidx="3">0</button>
                      <button class="pure-button" cidx="1" pidx="3">1</button>
                      <button class="pure-button" cidx="2" pidx="3">2</button>
                      <button class="pure-button" cidx="3" pidx="3">3</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>