Download raw (1.5 KB)

<html>

<head>
  <meta charset="UTF-8">
  <title>-</title>
  <script src="jquery.min.js"></script>
  <style type="text/css" media="screen">
    body {
      background-color: lightgrey;
    }

    figure {
      background-color: white;
    }

    .plot {
      float: right;
      cursor: pointer;
    }

    .plot:hover {
      color: blue;
    }
  </style>
</head>

<body>
  <h5>
    <a href="index.html">← back</a>
    <a href="/ether/p/erg">metapost pad</a>
  </h5>
  <div id="chars">

  </div>
  <script>
    $("window").ready(function () {

      const params = new URLSearchParams(document.location.search.substring(1));
      let char = params.get("char");

      if (char.match(/^\d+$/)) {
        char = parseInt(char);
      } else {
        char = char.charCodeAt(0);
      }

      $("#chars").append("<figure data-charcode='" + char + "'><img src='svg/" + char + ".svg' data-charcode='" + char + "' alt=''><figcaption>" + String.fromCharCode(char) + "</figcaption></figure>");
    });

    setInterval(function () {
      stamp = (new Date).getTime();
      $("img").each(function () {
        var src = 'svg/' + $(this).attr('data-charcode') + '.svg?' + stamp
        $(this).attr('src', src);
      });
    }, 3000);


    $("body").on("click", "figure", function () {
      var result = window.confirm('Do you want to plot that glyph ?');

      if (result) {
        $.get('/api/plot/', { charcode: $(this).attr('data-charcode') });
      }
    });

  </script>
</body>

</html>