<!DOCTYPE html>
<html>
<head>
<title>Tis demo</title>
<style>
html {
font-family: sans-serif;
}
h1, p {
text-align: center;
}
pre {
margin: 40px auto;
width: 128ch;
height: 32em;
line-height: 1em;
background: #eee;
border: 3px solid #800;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h1>Tis demo</h1>
<p>
<a href="http://github.com/ttencate/tis">Tis on GitHub</a>
</p>
<p>
Size: <span id="size"></span> (<span id="delta"></span>)
</p>
<pre id="code"></pre>
<p>If you quit Tis, type the <a href="https://en.wikipedia.org/wiki/Konami_Code">Konami code</a> to get it back.</p>
<script>
$.get('tis.min.js', function(code, textStatus, xhr) {
// These are actually characters, not bytes. But we don't use any Unicode.
var size = code.length;
var target = 4096;
$('#size').text(size);
$('#delta').text(
Math.abs(size - target) + ' bytes ' +
(size > target ? 'over' : 'under') + ' target')
.css('color', size > target ? '#800' : '#080');
$('#code').text(code);
}, 'text');
</script>
<script src="tis.js"></script>
<script>
var konamiCode = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
for (i in konamiCode) {
// Firing a native keyboard event is way harder than it should be,
// but we can fake it.
// http://stackoverflow.com/questions/961532/firing-a-keyboard-event-in-javascript
var e = document.createEvent('Event');
e.initEvent('keydown', true, true);
e.keyCode = konamiCode[i];
document.dispatchEvent(e);
}
</script>
</body>
</html>