Download raw (2.0 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; width: 100pt; display: inline-block; /*outline: 3pt solid black;*/ } figure img { width: 100pt; } .plot { float: right; cursor: pointer; } .plot:hover { color: blue; } </style> </head> <body> <h5> <a href="/p/meta">metapost pad</a> </h5> <div id="chars"></div> <script> $("window").ready(function () { var ranges = [['A', 'Z'], ['0', '9'], ['a', 'z']] for (var r = 0; r < ranges.length; r++) { for (i = ranges[r][0].charCodeAt(0); i <= ranges[r][1].charCodeAt(0); i++) { $("#chars").append("<figure data-charcode='" + i + "'><img src='svg/" + i + ".svg' data-charcode='" + i + "' alt=''><figcaption>" + String.fromCharCode(i) + "</figcaption></figure>"); } } }); $("body").on("click", "figure", function (e) { if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) { e.preventDefault(); var result = window.confirm('Do you want to plot that glyph ?'); if (result) { $.get('/api/plot/', { charcode: $(this).attr('data-charcode') }); } } else { window.location = "single.html?char=" + $(this).attr('data-charcode') } }); setInterval(function () { stamp = (new Date).getTime(); $("img").each(function () { var src = 'svg/' + $(this).attr('data-charcode') + '.svg?' + stamp $(this).attr('src', src); }); }, 7000); </script> </body> </html>