<!DOCTYPE html>
<html>
  <head>
    <link rel="icon" href="data:,">
  </head>
  <body>
    <!-- https://github.com/puppeteer/puppeteer/blob/v13.0.1/test/assets/grid.html -->
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        function generatePalette(amount) {
          var result = [];
          var hueStep = 360 / amount;
          for (var i = 0; i < amount; ++i)
            result.push('hsl(' + (hueStep * i) + ', 100%, 90%)');
          return result;
        }

        var palette = generatePalette(100);
        for (var i = 0; i < 200; ++i) {
          var box = document.createElement('div');
          box.classList.add('box');
          box.style.setProperty('background-color', palette[i % palette.length]);
          var x = i;
          do {
            var digit = x % 10;
            x = (x / 10)|0;
            var img = document.createElement('img');
            img.src = `./digits/${digit}.png`;
            box.insertBefore(img, box.firstChild);
          } while (x);
          document.body.appendChild(box);
        }
      });
    </script>

    <style>
      body {
        margin: 0;
        padding: 0;
      }

      .box {
        font-family: arial;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        width: 50px;
        height: 50px;
        box-sizing: border-box;
        border: 1px solid darkgray;
      }

      ::-webkit-scrollbar {
        display: none;
      }
    </style>
  </body>
</html>
