<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>AI Design Icons</title>
  <link href="css/<%= fontFileName %>.css" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    body {
      margin: 0;
      padding: 0;
      color: #222;
      font-family: Gill Sans;
      text-align: center;
      background: #f7f7f7
    }
    
    h1, h2, div, footer {
      font-family: "Helvetica Neue", Arial, sans-serif;
    }
    
    h1 {
      padding: 20px 20px 16px 20px;
      font-size: 26px;
      line-height: 26px;
      font-weight: normal;
      color: #FFF;
      background: -webkit-linear-gradient(left top, #669cff, #9a84ff); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(bottom right, #669cff, #9a84ff); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(bottom right, #669cff, #9a84ff); /* Firefox 3.6 - 15 */
      background: linear-gradient(to bottom right, #669cff, #9a84ff); /* Standard */
    }
    
    h1 svg {
      vertical-align: middle;
      width: 26px;
      height: 26px;
      margin: 0 6px 4px 0;
    }
    
    h1 svg path {
      fill: #FFF;
    }
    
    h1 .version {
      font-size: 14px;
      /*background: #FFF;*/
      padding: 4px 10px;
      float: right;
      border-radius: 2px;
      margin: -3px 0 0 0;
      color: #ffffff;
      font-weight: bold;
    }
    
    h1 .version::before {
      content: 'v';
    }
    
    h2 {
      font-size: 18px;
      padding: 20px;
    }
    
    .icons {
      padding: 0 20px 10px 20px;
      -webkit-column-count: 5;
      -moz-column-count: 5;
      column-count: 5;
      -webkit-column-gap: 20px;
      -moz-column-gap: 20px;
      column-gap: 20px;
    }
    
    .icons div {
      line-height: 2em;
    }
    
    .icons div span {
      cursor: pointer;
      font-size: 14px;
      text-overflow: ellipsis;
      display: inline-block;
      max-width: calc(100% - 90px);
      overflow: hidden;
      vertical-align: middle;
      white-space: nowrap;
    }
    
    .icons div code:hover,
    .icons div span:hover {
      background: -webkit-linear-gradient(left top, #669cff, #9a84ff); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(bottom right, #669cff, #9a84ff); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(bottom right, #669cff, #9a84ff); /* Firefox 3.6 - 15 */
      background: linear-gradient(to bottom right, #669cff, #9a84ff); /* Standard */
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .icons div i:hover {
      color: #3c90be;
    }
    
    .icons div code:hover {
      background: -webkit-linear-gradient(left top, #669cff, #9a84ff); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(bottom right, #669cff, #9a84ff); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(bottom right, #669cff, #9a84ff); /* Firefox 3.6 - 15 */
      background: linear-gradient(to bottom right, #669cff, #9a84ff); /* Standard */
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    .icons div code {
      border: 1px solid #DDD;
      width: 46px;
      margin-left: 2px;
      margin-right: 4px;
      border-radius: 4px;
      display: inline-block;
      vertical-align: middle;
      text-align: center;
      line-height: 24px;
      cursor: pointer;
    }
    
    .icons div i {
      display: inline-block;
      /*width: 32px;*/
      /*height: 24px;*/
      text-align: center;
      vertical-align: middle;
      cursor: pointer;
      line-height: 24px;
    }
    
    .icons .aid:before {
      /*font-size: 24px;*/
    }
    
    pre {
      margin: 0 20px;
      font-family: Consolas, monospace;
      padding: 10px;
      border: 1px solid #DDD;
      background: #F1F1F1;
    }
    
    div.copied {
      position: fixed;
      top: 100px;
      left: 50%;
      width: 200px;
      text-align: center;
      /*color: #3c763d;*/
      /*background-color: #dff0d8;*/
      /*border: 1px solid #d6e9c6;*/
      padding: 10px 15px;
      border-radius: 4px;
      margin-left: -100px;
      color: #ffffff;
      box-shadow: 0 0 10px #3DDB92;
      
      background: -webkit-linear-gradient(left top, #5ADBD3, #3DDB92); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(bottom right, #5ADBD3, #3DDB92); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(bottom right, #5ADBD3, #3DDB92); /* Firefox 3.6 - 15 */
      background: linear-gradient(to bottom right, #5ADBD3, #3DDB92); /* Standard */
    }
    
    footer {
      margin-top: 30px ;
      padding: 20px;
      border-top: 1px solid #DDD;
      text-align: center;
      color: #ffffff;
      font-size: 13px;
      /*background: #F1F1F1;*/
      background: -webkit-linear-gradient(left top, #669cff, #9a84ff); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(bottom right, #669cff, #9a84ff); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(bottom right, #669cff, #9a84ff); /* Firefox 3.6 - 15 */
      background: linear-gradient(to bottom right, #669cff, #9a84ff); /* Standard */
    }
    
    footer a {
      color: #e91e63;
      text-decoration: none;
    }
  </style>
</head>
<body>
<h1>
  <span class="aid aid-chemical-weapon"></span> <%= fontName %>
  <span class="version"><%= version %></span>
</h1>
<h2>Usage</h2>
<pre><code>&lt;span class=&quot;aid aid-<span id="name">name</span>&quot;&gt;&lt;/span&gt;</code></pre>
<h2>Icons
  <small>(click to copy to clipboard)</small>
</h2>
<div class="icons" id="icons"></div>
<footer>All Rights Reserved Copyright @2016 Asiainfo UXT Team</footer>

<script type="text/javascript">
  (function () {
    var icons = [
      <% _.each(glyphs, function(glyph) {  %>
        {"name": "<%= glyph.name %>", "hex": "<%= glyph.codepoint.toString(16).toUpperCase() %>"},
        <% }); %>];
    var copyText = function (text) {
      var copyFrom = document.createElement('textarea');
      copyFrom.setAttribute("style", "position:absolute;opacity:0");
      copyFrom.value = text;
      document.body.appendChild(copyFrom);
      copyFrom.select();
      document.execCommand('copy');
      var copied = document.createElement('div');
      copied.setAttribute('class', 'copied');
//      var checkIcon = document.createElement('span');
//      checkIcon.setAttribute('class', 'aid-old aid-old-checkbox-marked-circle-outline');
//      copied.appendChild(checkIcon);
      copied.appendChild(document.createTextNode(' Copied to Clipboard'));
      document.body.appendChild(copied);
      setTimeout(function () {
        document.body.removeChild(copyFrom);
        document.body.removeChild(copied);
      }, 1500);
    };
    for (var j = 0; j < icons.length; j++) {
      var div = document.createElement('div'),
        i = document.createElement('i');
      i.className = 'aid aid-4x aid-' + icons[j].name;
      div.appendChild(i);
      var code = document.createElement('code');
      code.appendChild(document.createTextNode(icons[j].hex));
      div.appendChild(code);
      var span = document.createElement('span');
      span.appendChild(document.createTextNode('aid-' + icons[j].name));
      div.appendChild(span);
      span.onclick = (function (icon) {
        return function () {
          document.getElementById('name').innerHTML = icon.name;
        };
      })(icons[j]);
      i.onmouseup = (function (icon) {
        return function () {
          copyText(String.fromCharCode(parseInt(icon.hex, 16)));
        };
      })(icons[j]);
      code.onmouseup = (function (icon) {
        return function () {
          copyText(icon.hex);
        };
      })(icons[j]);
      span.onmouseup = (function (icon) {
        return function () {
          copyText('aid-' + icon.name);
        };
      })(icons[j]);
      document.getElementById('icons').appendChild(div);
    }
  })();
</script>
</body>
</html>

