ObsidianBlk
/
nespaint
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Adding some HTML/CSS for the NES System Palette.

dev-tmpl
Bryan Miller 6 years ago
parent
89ac4f642b
commit
87429d3b5c
2 changed files with 158 additions and 2 deletions
Split View Show Diff Stats
  1. +9
    -1
      app/css/nespaint.css
  2. +149
    -1
      index.html

+ 9
- 1
app/css/nespaint.css View File

@@ -1,5 +1,7 @@

body{
background-color:#303030;
font-family: 'Roboto', sans-serif;
}

.pure-menu{
@@ -13,13 +15,19 @@ body{
height:100%;
}


.content-wrapper{
width:100%;
height:100%;
overflow:hidden;
}

div.NES-palette{
font-size:0.65em;
}

.NES-palette button{
width:2rem;
}

span.color-NES-06{
background-color:#000;

+ 149
- 1
index.html View File

@@ -6,6 +6,7 @@

<title>NES Painter</title>

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<link rel="stylesheet" href="app/css/nespaint.css">
@@ -43,7 +44,154 @@
</div>
</div>
<div class="pure-u-2-3">
<canvas id="painter" width:"128" height:"256"></canvas>
<div class="pure-g">
<div class="pure-u-1">
<canvas id="painter" width:"128" height:"256"></canvas>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1-2 NES-palette">
<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 class="pure-u-1-2">

</div>
</div>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save