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>