<!DOCTYPE html>

<html>
  <head>
    <!-- INIT -->
    <meta charset="UTF-8">
    <title>pixiemoji 0.2 by kid marscat</title>
    <link href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAHlBMVEUAAAAcHDiAULDYKDjYgCDw2Cj///gowEAwkODAcDhkTtsCAAAAAXRSTlMAQObYZgAAAD1JREFUeF59xrERABAMAEDH4ZTZwJnAnRUygEavUuuyQkqtbVVS5qs3wrWK6EfXIiJtZluyFpHuAQhravkeWwIX6cJMEXAAAAAASUVORK5CYII=" rel="icon" type="image/png" />
    <!-- CSS -->
    <style>
      body
      {
        background-color: black;
        color: white;
        
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1vw;
        text-align: center;
      }
      
      a
      {
        color: pink;
        text-decoration: none;
      }
      a:hover
      {
        color: white;
      }
      
      .container
      {
        display: flex;
        align-items: stretch;
      }
      
      .sidebar
      {
        width: 33%;
        order: 1;
      }
      
      .editor
      {
        width: 66%;
        order: 2;
      }
      
      h1
      {
        font-weight: bold;
        font-style:  normal;
      }
      
      textarea
      {
        background: none;
        color: inherit;
      
        font-size: inherit;
        font-family: inherit;
      
        width:  90%;
        height: 32vw;
        
        padding: 1vw;
        
        border: 1px solid gray;
        border-radius: 1vw;
        
        overflow: auto;
        white-space: pre;
        
        letter-spacing: -0.25vw;
        line-height: 1.125vw;
      }
      
      /* buttons */
      button
      {
        color:      inherit;
        background: none;
      
        font-size: inherit;
        font-family: inherit;
        
        padding: 0.5vw;
        margin: 0.25vw;
        
        border-radius: 1vw;
        border: 1px solid gray;
      }
      button:hover
      {
        transform: scale(1.1);
      }
      button:active
      {
        transform: scale(0.9);
      }      
      
      /* buttons: background color selector */
      .button_bkgrA
      {
        background-color: black;
        color:  white;
        width:  16vw;
      }
      
      .button_bkgrB
      {
        background-color: #15202b;
        color:  white;
        width:  16vw;
      }
      
      .button_bkgrC
      {
        background-color: #ffffff;
        color:  #222;
        width:  16vw;
      }
      
      .button_emoji
      {
        width:   2.5vw;
      }
      
      /* character counter */
      #chrCount
      {
        display: inline;
      }
    </style>
    <!-- javascripts -->
    <script>
      // change background color
      function changeColors(bgColor,fgColor)
      {
        var app = document.getElementById('app');
        
        app.style.backgroundColor = bgColor;
        app.style.color           = fgColor;
      }
            
      // insert emoji into textarea
      function insertEmoji(newChr)
      {
        var textArea = document.getElementById('text');
        
        var strPost = textArea.selectionStart;
        var strPrev = textArea.value.substring(0, strPost);
        var strNext = textArea.value.substring(strPost, textArea.value.length);
               
        textArea.value = strPrev + newChr + strNext;
        
        strPost = strPost + newChr.length;
            
        textArea.selectionStart = strPost;
        textArea.selectionEnd  = strPost;
        textArea.focus();
        
        countChr(); // update character counter
      }
      
      // copy emoji into clipboard
      function copyEmoji()
      {
        document.querySelector("textarea").select();
        document.execCommand('copy');
      }      
    </script>
  </head>
  
  <body id="app">
    <div class="container">
      <div class="sidebar">
        <h1>pixiemoji 0.2</h1>
        <h6>by kid marscat</h6>
      
        <!-- background color selector -->    
        <p>Change the background color:</p>
      
        <p>
          <button class="button_bkgrA" onclick="changeColors(getComputedStyle(this).backgroundColor, getComputedStyle(this).color);">Lights Out</button><br>
          <button class="button_bkgrB" onclick="changeColors(getComputedStyle(this).backgroundColor, getComputedStyle(this).color);">Dim</button><br>
          <button class="button_bkgrC" onclick="changeColors(getComputedStyle(this).backgroundColor, getComputedStyle(this).color);">Default</button><br>
        </p>

        <!-- emoji color selector -->
        <p>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >🟥</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >🟧</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >🟨</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >🟩</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >🟦</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >🟪</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >🟫</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >⬛</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >⬜</button>
        </p>
        
        <p>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >🔴</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >🟠</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >🟡</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >🟢</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >🔵</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >🟣</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >🟤</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >⚫</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >⚪</button>
        </p>
        
        <p>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >❤</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >🧡</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >💛</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >💚</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >💙</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >💜</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >🤎</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >🖤</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >🤍</button>
        </p>
        
        <p>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >🌑</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >🌒</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >🌓</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >🌔</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >🌕</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >🌖</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >🌗</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >🌘</button>
          <button class="button_emoji" onclick="insertEmoji(this.innerHTML);" >⭐</button>
        </p>
        
        <p>
          <button class="button_emoji" onclick="insertEmoji('\n');" style="width: 10vw;">line break ↩️</button>
          <button class="button_emoji" onclick="copyEmoji()" style="width: 12vw;">copy to clipboard 📋</button>
        </p>        
        
        <p style="font-size: 75%;">note: this is hardly a finished product, and it might be entirely broken on your browser of choice. i really only made this for fun, so accept it as it is. thanks and enjoy! ミ☆<br>- kid marscat</p>
        
        <p style="font-size: 50%;><a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png" /></a><br>This work is licensed under a<br><a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0<br>International License</a></p>
        
      </div>
      
      <!-- emoji pixel art editor -->
      <div class="editor">
        <p>
          <textarea id="text" onload="countChr();" oninput="countChr();" onpropertychange="countChr();" onmousemove="countChr();" onkeyup="countChr();"></textarea>
        </p>
      </div>
    </div>
    
  </body>
</html>