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>