<html>
  <head>
    <meta charset="utf-8" />
    <title>@siemens/ix-icons</title>
    <link href="css/<%= fontName %>.css" rel="stylesheet" />
    <style>
      body {
        font-family: 'Siemens Sans', 'Helvetica', 'Arial', sans-serif;
        text-align: center;
        background: #f7f7f7;
      }
      body > h1 {
        color: #666;
        margin: 1em 0;
      }
      .glyph-icon-list {
        display: flex;
        flex-wrap: wrap;
        background-color: #e2e2e2;
      }
      .glyph-demo {
        margin: 1rem;
      }
      .glyph {
        padding: 0;
        background-color: #fff;
      }
      .glyph > li {
        display: inline-block;
        margin: 0.3em 0.2em;
        width: 5em;
        height: 6.5em;
        background: #fff;
        border-radius: 0.5em;
        position: relative;
      }
      .glyph > li .s {
        display: block;
        margin-top: 0.1em;
        line-height: 0;
      }
      .glyph > li > i > span {
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        width: 100%;
        color: rgba(0, 0, 0, 0);
        line-height: 1em;
      }
      .glyph-name {
        font-size: 0.8em;
        color: #666;
        display: block;
      }
      .glyph-input {
        display: block;
        text-align: center;
      }
      .glyph-codepoint {
        color: #999;
        font-family: monospace;
      }
      .installation {
        list-style: none;
        background-color: #e2e2e2;
        padding: 1rem;
      }
    </style>
    <style>
      #snackbar {
        visibility: hidden;
        min-width: 250px;
        margin-left: -125px;
        background-color: #333;
        color: #fff;
        text-align: center;
        border-radius: 2px;
        padding: 16px;
        position: fixed;
        z-index: 1;
        left: 50%;
        bottom: 30px;
        font-size: 17px;
      }

      #snackbar.show {
        visibility: visible;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
      }

      @-webkit-keyframes fadein {
        from {
          bottom: 0;
          opacity: 0;
        }
        to {
          bottom: 30px;
          opacity: 1;
        }
      }

      @keyframes fadein {
        from {
          bottom: 0;
          opacity: 0;
        }
        to {
          bottom: 30px;
          opacity: 1;
        }
      }

      @-webkit-keyframes fadeout {
        from {
          bottom: 30px;
          opacity: 1;
        }
        to {
          bottom: 0;
          opacity: 0;
        }
      }

      @keyframes fadeout {
        from {
          bottom: 30px;
          opacity: 1;
        }
        to {
          bottom: 0;
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <h1>@siemens/ix-icons</h1>
    <h1>Getting started</h1>
    <ul class="installation">
      <li>Install <code>npm install @siemens/ix-icons</code></li>
      <li>
        Add
        <code
          >"node_modules/@siemens/ix-icons/dist/scss/ix-icons.scss"</code
        >
        to your angular.json - e.g "styles":
        ["node_modules/@siemens/ix-icons/dist/scss/ix-icons.scss"]
      </li>
    </ul>
    <div class="glyph-icon-list">
      <% _.each(glyphs, function(glyph) { %>
      <div class="glyph-demo">
        <i
          class="<%= className %> <%= className %>-<%= glyph.name %> <%= className %>-4x"
        ></i>
        <span class="glyph-name"><%= glyph.name %></span>
        <span class="glyph-codepoint"
          ><%= glyph.codepoint.toString(16).toUpperCase() %></span
        >
        <input
          readonly
          onclick="myFunction(this)"
          class="glyph-input"
          type="text"
          value="glyph glyph-<%= glyph.name %>"
        />
      </div>
      <% }); %>
    </div>
    <div id="snackbar">Copied!</div>
    <script>
      function myFunction(event) {
        var copyText = event;
        copyText.select();
        copyText.setSelectionRange(0, 99999); /*For mobile devices*/
        document.execCommand('copy');
        var x = document.getElementById('snackbar');
        x.className = 'show';
        setTimeout(function () {
          x.className = x.className.replace('show', '');
        }, 3000);
      }
    </script>
  </body>
</html>
