index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta property="og:title" content="Kiddo Paint - A simple paint program for kids" />
  <meta property="og:site_name" content="Kiddo Paint" />
  <meta property="og:url" content="https://kiddopaint.com/" />
  <meta property="og:description" content="Kiddo Paint is a simple paint program reminiscent of MS Paint, Kid Pix, Dr. Halo, and MacPaint. Open source: https://github.com/vikrum/kiddopaint" />
  <meta property="og:image" content="https://kiddopaint.com/static/kiddopaint.jpg" />
  <meta property="og:image:type" content="image/jpeg" />
  <meta property="og:image:width" content="1215" />
  <meta property="og:image:height" content="854" />
  <title>Kiddo Paint</title>
  <link rel="stylesheet" type="text/css" href="css/kiddopaint.css">
  <link rel="icon" type="image/png" href="img/br21.png" />
  <script type="text/javascript" src="js/app.js"></script>
</head>

<body onload="init_kiddo_paint();">
<div id="container">

  <div id="toolbar">
    <button class="tool" id="save" title="Save"><emj>💾</emj></button>
    <button class="tool" id="pencil" title="Pencil"><emj>✏️</emj></button>
    <button class="tool" id="pen" title="Pen"><emj>✒️</emj> </button>
    <button class="tool" id="line" title="Line"><emj>📏</emj></button>
    <button class="tool" id="square" title="Square"><emj>⬜</emj></button>
    <button class="tool" id="circle" title="Circle"><emj>⚪</emj></button>
    <button class="tool" id="brush" title="Brush"><emj>🎨</emj></button>
    <button class="tool" id="jumble" title="Jumble"><emj>🌀</emj></button>
    <button class="tool" id="stamp" title="Stamp"><emj>🚂</emj></button>
    <button class="tool" id="alphabet" title="Alphabet"><h1>T</h1></button>
    <button class="tool" id="flood" title="Flood"><emj>👅</emj></button>
    <button class="tool" id="truck" title="Truck Copy"><emj>🚛</emj></button>
    <button class="tool" id="undo" title="Undo"><emj>🙀</emj></button>
    <button class="tool" id="erase" title="Erase"><emj>💣</emj></button>
    <br>
    <br>
    <div id="colorbar">
      <button class="currentColor" id="currentColor"> </button>
      <div id="colorselector">
        <button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button><button class="color"></button>
      </div>
    </div>
    <div id="sliders">
      <input type="range" min="1" max="100" value="100" class="slider" id="alphaslider">
    </div>
    <div class="github">
      <a href="https://github.com/vikrum/kiddopaint" target="_blank"><img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" class="github"/></a>
    </div>
  </div>

  <div id="hcontainer">
    <div id="subtoolbars" class="subtoolbar">
       <div id="genericsubmenu" class="hidden"></div>
       <div id="brushtoolbar" class="hidden">
         <button class="tool" id="br1"><img src="img/bl1.png"></button>
         <button class="tool" id="br2"><img src="img/bl2.png"></button>
         <button class="tool" id="br3"><emj>⚫</emj></button>
         <button class="tool" id="br4"><emj>👣</emj></button>
         <button class="tool" id="br5"><emj>🐾</emj></button>
         <button class="tool" id="br6"><img src="img/br6.png"></button>
         <button class="tool" id="br7"><img src="img/br7.png"></button>
         <button class="tool" id="br8"><img src="img/br8.png"></button>
         <button class="tool" id="br9"><img src="img/br9.png"></button>
         <button class="tool" id="br10"><img src="img/br10.png"></button>
         <button class="tool" id="br11"><img src="img/br11.png"></button>
         <button class="tool" id="br12"><img src="img/br12.png"></button>
         <button class="tool" id="br13"><img src="img/br13.png"></button>
         <button class="tool" id="br14"><img src="img/br14.png"></button>
         <button class="tool" id="br15"><img src="img/br15.png"></button>
         <button class="tool" id="br16"><img src="img/br16.png"></button>
         <button class="tool" id="br17"><emj>🔎</emj></button>
         <button class="tool" id="br18"><img src="img/br18.png"></button>
         <button class="tool" id="br23"><img src="img/br23.png"></button>
         <button class="tool" id="br24"><emj>🌳</emj></button>
         <button class="tool" id="br19"><img src="img/br19.png"></button>
         <button class="tool" id="br20"><img src="img/br20.png"></button>
         <button class="tool" id="br21"><img src="img/br21.png"></button>
         <button class="tool" id="br22"><emj>👇🏾</emj></button>
         <button class="tool" id="br25"><emj>🥑</emj></button>
         <button class="tool" id="br26"><emj>💨</emj></button>
       </div>
       <div id="stamptoolbar" class="hidden">
         <button class="tool" id="xst0"></button>
         <button class="tool" id="xst1"></button>
         <button class="tool" id="xst2"></button>
         <button class="tool" id="xst3"></button>
         <button class="tool" id="xst4"></button>
         <button class="tool" id="xst5"></button>
         <button class="tool" id="xst6"></button>
         <button class="tool" id="xst7"></button>
         <button class="tool" id="xst8"></button>
         <button class="tool" id="xst9"></button>
         <button class="tool" id="xst10"></button>
         <button class="tool" id="xst11"></button>
         <button class="tool" id="xst12"></button>
         <button class="tool" id="xst13"></button>
         <button class="tool" id="xst14"></button>
         <button class="tool" id="xst15"></button>
         <button class="tool" id="xst16"></button>
         <button class="tool" id="xst17"></button>
         <button class="tool" id="xst18"></button>
         <button class="tool" id="xst19"></button>
         <button class="tool" id="xst20"></button>
         <button class="tool" id="xst21"></button>
         <button class="tool" id="xst22"></button>
         <button class="tool" id="xst23"></button>
         <button class="tool" id="xst24"></button>
         <button class="tool" id="xst25"></button>
         <button class="tool" id="xst26"></button>
         <button class="tool" id="xst27"></button>
         <button class="tool" id="xst28"></button>
         <button class="tool" id="xst29"></button>
         <button class="tool" id="stnext"><h1>↪</h1></button>
       </div>
       <div id="alphabettoolbar" class="hidden">
         <button class="tool" id="xal0"></button>
         <button class="tool" id="xal1"></button>
         <button class="tool" id="xal2"></button>
         <button class="tool" id="xal3"></button>
         <button class="tool" id="xal4"></button>
         <button class="tool" id="xal5"></button>
         <button class="tool" id="xal6"></button>
         <button class="tool" id="xal7"></button>
         <button class="tool" id="xal8"></button>
         <button class="tool" id="xal9"></button>
         <button class="tool" id="xal10"></button>
         <button class="tool" id="xal11"></button>
         <button class="tool" id="xal12"></button>
         <button class="tool" id="xal13"></button>
         <button class="tool" id="xal14"></button>
         <button class="tool" id="xal15"></button>
         <button class="tool" id="xal16"></button>
         <button class="tool" id="xal17"></button>
         <button class="tool" id="xal18"></button>
         <button class="tool" id="xal19"></button>
         <button class="tool" id="xal20"></button>
         <button class="tool" id="xal21"></button>
         <button class="tool" id="xal22"></button>
         <button class="tool" id="xal23"></button>
         <button class="tool" id="xal24"></button>
         <button class="tool" id="xal25"></button>
         <button class="tool" id="alnext"><h1>↪</h1></button>
       </div>
    </div>
    <div id="paint">
      <canvas id="kiddopaint" width="1920" height="1200">:(</canvas>
    </div>
  </div>

<div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-100498966-2"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-100498966-2');
</script>
</body>
</html>