ObsidianBlk
/
nespaint
关注 1
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
A pixel art painter geared specifically at NES pixel art. Includes export for .chr binary file as well as palette and namespace data.
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
123 提交
4 分支
分支: dev-tmpl
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 'dev-tmpl'
${ noResults }
nespaint/index.html

264 行
14KB
原始文件 永久链接 Blame 文件历史 

  1. <!DOCTYPE html>

  2. <html lang="en">

  3.   <head>

  4.     <meta charset="utf-8">

  5.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  6. 

  7.     <title>NES Painter</title>

  8. 

  9.     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

  10.     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

  11.     <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">

  12.     <link rel="stylesheet" href="app/css/nespaint.css">

  13.   </head>

  14.   <body>

  15. 

  16.     <div id="Welcome" class="modal">

  17.       <div class="modal-content">

  18.         Welcome to the modal!

  19.       </div>

  20.     </div>

  21. 

  22.     <div class="header">

  23.       <div class="home-menu pure-menu pure-menu-horizontal">

  24.         <a class="pure-menu-heading" href="">

  25.           <span class="color-NES-06">NES </span>

  26.           <span class="color-NES-random">P</span><span class="color-NES-random">a</span><span class="color-NES-random">i</span><span class="color-NES-random">n</span><span class="color-NES-random">t</span>

  27.         </a> 

  28.       </div>

  29.     </div>

  30. 

  31.     <div class="content-wrapper">

  32.       <div class="pure-g">

  33.         <div class="pure-u-1-8 simple-padding">

  34.           <div class="pure-button-group" role="group" aria-label="...">

  35.             <button emit="modal-open" emit-args='{"id":"Welcome"}' class="pure-button">

  36.               <i class="fa fa-brush"></i>

  37.             </button>

  38.             <button emit="modal-open" emit-args='{"id":"Welcome"}' class="pure-button">

  39.               <i class="fa fa-eraser"></i>

  40.             </button>

  41.             <button class="pure-button pure-button-active">

  42.               <i class="fa fa-eye-dropper"></i>

  43.             </button>

  44.           </div>

  45.         </div>

  46.         <div class="pure-u-2-3">

  47.           <div class="pure-g">

  48.             <div class="pure-u-1 simple-padding">

  49.               <canvas id="painter" width:"128" height:"256"></canvas>

  50.             </div>

  51.           </div>

  52.           <div class="pure-g">

  53.             <div class="pure-u-1-2">

  54.               <div class="simple-padding">

  55.                 NES System Palette

  56.               </div>

  57.               <div class="NES-palette simple-padding">

  58.                 <div class="pure-g">

  59.                   <div class="pure-u-1-4"> 

  60.                     <div class="pure-g">

  61.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="00">00</button></div>

  62.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="01">01</button></div>

  63.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="02">02</button></div>

  64.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="03">03</button></div>

  65.                     </div>

  66.                   </div>

  67.                   <div class="pure-u-1-4">

  68.                     <div class="pure-g">

  69.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="04">04</button></div>

  70.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="05">05</button></div>

  71.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="06">06</button></div>

  72.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="07">07</button></div>

  73.                     </div>

  74.                   </div>

  75.                   <div class="pure-u-1-4">

  76.                     <div class="pure-g">

  77.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="08">08</button></div>

  78.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="09">09</button></div>

  79.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="0A">0A</button></div>

  80.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="0B">0B</button></div>

  81.                     </div>

  82.                   </div>

  83.                   <div class="pure-u-1-4">

  84.                     <div class="pure-g">

  85.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="0C">0C</button></div>

  86.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="0D">0D</button></div>

  87.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="0E">0E</button></div>

  88.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="0F">0F</button></div>

  89.                     </div>

  90.                   </div> 

  91.                 </div>

  92.                 <div class="pure-g">

  93.                   <div class="pure-u-1-4">

  94.                     <div class="pure-g">

  95.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="10">10</button></div>

  96.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="11">11</button></div>

  97.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="12">12</button></div>

  98.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="13">13</button></div>

  99.                     </div>

  100.                   </div>

  101.                   <div class="pure-u-1-4">

  102.                     <div class="pure-g">

  103.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="14">14</button></div>

  104.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="15">15</button></div>

  105.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="16">16</button></div>

  106.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="17">17</button></div>

  107.                     </div>

  108.                   </div>

  109.                   <div class="pure-u-1-4">

  110.                     <div class="pure-g">

  111.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="18">18</button></div>

  112.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="19">19</button></div>

  113.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="1A">1A</button></div>

  114.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="1B">1B</button></div>

  115.                     </div>

  116.                   </div>

  117.                   <div class="pure-u-1-4">

  118.                     <div class="pure-g">

  119.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="1C">1C</button></div>

  120.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="1D">1D</button></div>

  121.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="1E">1E</button></div>

  122.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="1F">1F</button></div>

  123.                     </div>

  124.                   </div>

  125.                 </div>

  126.                 <div class="pure-g">

  127.                   <div class="pure-u-1-4">

  128.                     <div class="pure-g">

  129.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="20">20</button></div>

  130.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="21">21</button></div>

  131.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="22">22</button></div>

  132.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="23">23</button></div>

  133.                     </div>

  134.                   </div>

  135.                   <div class="pure-u-1-4">

  136.                     <div class="pure-g">

  137.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="24">24</button></div>

  138.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="25">25</button></div>

  139.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="26">26</button></div>

  140.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="27">27</button></div>

  141.                     </div>

  142.                   </div>

  143.                   <div class="pure-u-1-4">

  144.                     <div class="pure-g">

  145.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="28">28</button></div>

  146.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="29">29</button></div>

  147.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="2A">2A</button></div>

  148.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="2B">2B</button></div>

  149.                     </div>

  150.                   </div>

  151.                   <div class="pure-u-1-4">

  152.                     <div class="pure-g">

  153.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="2C">2C</button></div>

  154.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="2D">2D</button></div>

  155.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="2E">2E</button></div>

  156.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="2F">2F</button></div>

  157.                     </div>

  158.                   </div> 

  159.                 </div>

  160.                 <div class="pure-g">

  161.                   <div class="pure-u-1-4">

  162.                     <div class="pure-g">

  163.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="30">30</button></div>

  164.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="31">31</button></div>

  165.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="32">32</button></div>

  166.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="33">33</button></div>

  167.                     </div>

  168.                   </div>

  169.                   <div class="pure-u-1-4">

  170.                     <div class="pure-g">

  171.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="34">34</button></div>

  172.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="35">35</button></div>

  173.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="36">36</button></div>

  174.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="37">37</button></div>

  175.                     </div>

  176.                   </div>

  177.                   <div class="pure-u-1-4">

  178.                     <div class="pure-g">

  179.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="38">38</button></div>

  180.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="39">39</button></div>

  181.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="3A">3A</button></div>

  182.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="3B">3B</button></div>

  183.                     </div>

  184.                   </div>

  185.                   <div class="pure-u-1-4">

  186.                     <div class="pure-g">

  187.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="3C">3C</button></div>

  188.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="3D">3D</button></div>

  189.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="3E">3E</button></div>

  190.                       <div class="pure-u-1-4"><button class="pure-button" nesidx="3F">3F</button></div>

  191.                     </div>

  192.                   </div> 

  193.                 </div>

  194.               </div>

  195.             </div>

  196.             <div class="pure-u-1-2">

  197.               <div class-"simple-padding">

  198.                 Drawing Palettes

  199.               </div>

  200.               <div class="pure-g">

  201.                 <div class="pure-u-1-2">

  202.                   <div class="simple-padding">

  203.                     Palette 1

  204.                   </div>

  205.                   <div class="simple-padding">

  206.                     <div class="pure-button-group" role="group">

  207.                       <button class="pure-button" cidx="0" pidx="0">0</button>

  208.                       <button class="pure-button" cidx="1" pidx="0">1</button>

  209.                       <button class="pure-button" cidx="2" pidx="0">2</button>

  210.                       <button class="pure-button" cidx="3" pidx="0">3</button>

  211.                     </div>

  212.                   </div>

  213.                 </div>

  214.                 <div class="pure-u-1-2">

  215.                   <div class="simple-padding">

  216.                     Palette 2

  217.                   </div>

  218.                   <div class="simple-padding">

  219.                     <div class="pure-button-group" role="group">

  220.                       <button class="pure-button" cidx="0" pidx="1">0</button>

  221.                       <button class="pure-button" cidx="1" pidx="1">1</button>

  222.                       <button class="pure-button" cidx="2" pidx="1">2</button>

  223.                       <button class="pure-button" cidx="3" pidx="1">3</button>

  224.                     </div>

  225.                   </div>

  226.                 </div>

  227.               </div>

  228.               <div class="pure-g">

  229.                 <div class="pure-u-1-2">

  230.                   <div class="simple-padding">

  231.                     Palette 3

  232.                   </div>

  233.                   <div class="simple-padding">

  234.                     <div class="pure-button-group" role="group">

  235.                       <button class="pure-button" cidx="0" pidx="2">0</button>

  236.                       <button class="pure-button" cidx="1" pidx="2">1</button>

  237.                       <button class="pure-button" cidx="2" pidx="2">2</button>

  238.                       <button class="pure-button" cidx="3" pidx="2">3</button>

  239.                     </div>

  240.                   </div>

  241.                 </div>

  242.                 <div class="pure-u-1-2">

  243.                   <div class="simple-padding">

  244.                     Palette 4

  245.                   </div>

  246.                   <div class="simple-padding">

  247.                     <div class="pure-button-group" role="group">

  248.                       <button class="pure-button" cidx="0" pidx="3">0</button>

  249.                       <button class="pure-button" cidx="1" pidx="3">1</button>

  250.                       <button class="pure-button" cidx="2" pidx="3">2</button>

  251.                       <button class="pure-button" cidx="3" pidx="3">3</button>

  252.                     </div>

  253.                   </div>

  254.                 </div>

  255.               </div>

  256.             </div>

  257.           </div>

  258.         </div>

  259.       </div>

  260.     </div>

  261.   </body>

  262.   <script src="app/js/main.js" type="module"></script>

  263. </html>