index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Game Of Life</title>

  <link rel="stylesheet" href="./src/styles/index.css">
  <link rel="stylesheet" href="./src/styles/cheatsheet.css">
  <meta http-equiv="origin-trial" content="AuF/zqBwjG2Yp1BVqkKiFupnY4PMXYtb0guqS3vI8WMIlLyh+/fsFw5vGcGS+n/KZWYzlv1cLr8wzFLmXs8xBw0AAABqeyJvcmlnaW4iOiJodHRwczovL3BlYW5jb3JlZC5naXRodWIuaW86NDQzIiwiZmVhdHVyZSI6IlVucmVzdHJpY3RlZFNoYXJlZEFycmF5QnVmZmVyIiwiZXhwaXJ5IjoxNjU4ODc5OTk5fQ==">
  <script src="./coi-serviceworker.min.js"></script>
  <script src="./libs/wasm-arrays.min.js"></script>
  <script src="./libs/gl-matrix-min.js"></script>
  <script src="./libs/stats.min.js"></script>
</head>
<body>
  <canvas id="canvas"></canvas>

  <div id="patterns" class="patterns">
    <div class="patterns-handle">
      Patterns
    </div>

    <div class="patterns__header">
      <h1>Patterns</h1>
      <div class="patterns__header__description">(drag and drop to the field)</div>
      <input id="search" class="patterns__search" type="text" placeholder="Search...">
      <div class="patterns__sort__wrapper">
        <div>Order by:</div>
        <select id="sort" class="patterns__sort">
          <option value="name">Name</option>
          <option value="size-asc">Size (asc)</option>
          <option value="size-desc">Size (desc)</option>
        </select>
      </div>
    </div>
    <div id="patterns-container"></div>
  </div>

  <div id="state" class="state"></div>

  <script type="module" src="./src/index.js"></script>
  <script type="module" src="./src/patterns.js"></script>
  <script type="module" src="./src/cheatsheet.js"></script>
  <script async src="src/wasm.js"></script>
</body>
</html>