phred · November 25, 2014 19:06
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 	<title>stripes</title>
 	<style type="text/css" media="screen">
 		#app {
 			font-family: sans-serif;
 			position: relative;
 			width: 80%;
 		}
 		#exemplar {
 			font-size: 18px;
 			font-family: monospace;
 			padding: 8px;
 		}
 		input {
 			font-size: 18px;
 			font-family: monospace;
 			width: 512px;
 			padding: 8px;
 		}
 		.mismatch {
 			background-color: salmon;
 		}
 		.match input {
 			background-color: lime;
 		}
 		.output {
 			transition: opacity 0.5s ease-out;
 			opacity: 0;
 		}
 		.match .output {
 			opacity: 1;
 		}
 		aside {
 			position: absolute;
 			right: 0px;
 			top: 0px;
 			width: 40%;
 		}
 		aside + aside {
 			top: 150px;
 		}
 	</style>
 </head>
 <body>
 <h1>typebox</h1>
 <section id='app'>
 	<p id='exemplar'></p>
 	<input type="text" name="typebox" value="" autocomplete="off" autofill="off"/>
 	<aside id='instruct'></aside>
 	<aside id='completed' class='output'></aside>
 	<pre id="output" class="output">Certificate:
    Data:
        Version: 1 (0x0)
        Serial Number:
            df:29:77:52:a0:dd:aa:a8
        Signature Algorithm: sha1WithRSAEncryption
        Issuer: CN=*.fred.dev, C=US
        Validity
            Not Before: Sep  2 17:51:15 2014 GMT
            Not After : Jul 11 17:51:15 2047 GMT
        Subject: CN=*.fred.dev, C=US
        Subject Public Key Info:
            Public Key Algorithm: rsaEncryption
            RSA Public Key: (2048 bit)
                Modulus (2048 bit):
                    00:d0:3f:80:3d:5d:4c:fb:99:9a:4b:e1:5d:af:b9:
                    75:59:b9:10:76:15:c2:95:1b:a6:49:0e:91:20:cb:
                    88:b8:0b:7b:49:7c:58:15:3e:1b:7d:bc:b7:4e:b0:
                    55:94:6d:24:bd:6f:15:cd:7d:c2:32:8a:90:21:0c:
                    3f:37:c0:61:0e:0a:0e:b0:56:c0:85:9e:36:81:eb:
                    bd:e5:e1:c3:99:72:f2:2a:81:86:79:1a:55:2b:88:
                    8b:b3:8d:6c:2c:a6:d8:81:b3:54:ed:d3:3f:96:81:
                    27:02:1d:53:a4:75:05:e4:02:8f:db:01:94:aa:ab:
                    8b:77:97:bb:ea:00:00:e1:eb:1c:2a:56:9b:ae:59:
                    5c:9b:aa:d6:ff:bc:7d:0a:0b:1a:0a:ba:8b:2b:96:
                    03:c7:4b:5b:71:70:7a:90:06:43:89:7f:f3:c2:86:
                    84:84:1c:0b:5a:73:99:d3:43:4f:55:bd:30:dc:5a:
                    9d:9e:6b:dd:be:c3:a7:69:56:c2:8b:61:df:65:f5:
                    5e:6f:c9:f2:97:97:d1:00:8a:78:e5:f5:b8:15:2f:
                    7c:20:dc:67:2e:cd:38:4b:b4:4d:47:90:1c:eb:bf:
                    1f:b3:ba:29:5e:df:51:99:f2:84:a6:cb:ae:a5:61:
                    f2:29:79:e1:d5:e8:ca:2b:79:1e:0f:78:36:79:06:
                    58:05
                Exponent: 65537 (0x10001)
    Signature Algorithm: sha1WithRSAEncryption
        3f:09:a7:80:05:11:77:5a:aa:e2:68:05:fe:f3:58:55:fc:1b:
        67:43:5e:0d:1f:6a:54:17:ea:a9:4c:04:a2:50:20:4e:45:03:
        3d:05:ea:4e:92:b7:b6:d1:e8:a2:98:78:02:78:7c:15:f5:c5:
        49:bb:5e:5e:85:af:ae:1c:c8:b6:ac:42:f9:4e:9c:e0:b4:9a:
        d9:38:53:fb:73:c9:c3:54:09:9d:ee:b3:57:72:46:49:16:c8:
        6c:a3:fc:42:c0:58:65:29:6e:8c:c3:b8:cc:38:5d:85:37:89:
        46:2c:81:c0:2c:05:b1:93:a5:0e:8f:9a:45:63:7f:2d:e8:23:
        92:d5:96:bd:50:c4:52:aa:26:cc:c3:24:c3:b8:44:22:3c:db:
        ae:fb:2e:6b:3f:e5:6e:0d:fc:b6:e2:bb:cc:41:f6:fe:16:68:
        b2:36:ee:e9:16:b4:f0:af:6c:90:56:ed:41:1f:1c:d4:a1:e1:
        86:7f:aa:a9:e2:de:db:54:43:38:69:ff:a9:b5:99:fc:5c:ca:
        8a:57:20:36:fa:21:17:2b:69:ce:dc:5f:fd:8d:b9:41:3d:06:
        b0:bb:9b:85:18:43:6c:8b:b0:5f:a9:e9:aa:f8:f3:5e:51:7b:
        e8:cb:c5:d0:11:25:55:8f:2c:8f:91:da:11:56:ab:e0:8d:f7:
        49:af:9e:7b
 </pre>
 </section>
 <script>
 	var slides = [
 		{
 			"expect": "openssl x509 -in test.pem -noout -text",
 			"output": "Certificate:\n			    Data:\n			        Version: 1 (0x0)\n			        Serial Number:…",
 			"instruct": "<h2>openssl: intro</h2><p>First, let's examine the cert in <code>test.pem</code>.</p><p>Type the command exactly as written.</p>",
 			"completed": "<p>Awesome!</p><p>Now let's examine the output.</p>"
 		}
 	];

 	current_slide = slides[0];
 	var typebox = document.querySelector('[name="typebox"]');
 	var exemplar = document.querySelector('#exemplar');
 	var output = document.querySelector('#output');
 	var instruct = document.querySelector('#instruct');
 	var completed = document.querySelector('#completed');

 	typebox.setAttribute('placeholder', current_slide.expect);
 	exemplar.innerText = current_slide.expect;
 	instruct.innerHTML = current_slide.instruct;
 	completed.innerHTML = current_slide.completed;
 	// output.innerText = current_slide.output;

 	typebox.addEventListener('keyup', function (evt) {
 		var input = '^\\s*' + evt.target.value.trim().replace(/\s+/, ' ');
 		var match = current_slide.expect.match(new RegExp(input));
 		if (match && match == current_slide.expect) {
 			typebox.classList.remove('mismatch');
 			typebox.parentNode.classList.add('match');
 		}
 		else if (!match) {
 			typebox.classList.add('mismatch');
 		}
 		else {
 			typebox.classList.remove('mismatch');
 		}
 		evt.preventDefault();
 	});
 	typebox.focus();
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>stripes</title>
	<style type="text/css" media="screen">
	#app {
	font-family: sans-serif;
	position: relative;
	width: 80%;
	}
	#exemplar {
	font-size: 18px;
	font-family: monospace;
	padding: 8px;
	}
	input {
	font-size: 18px;
	font-family: monospace;
	width: 512px;
	padding: 8px;
	}
	.mismatch {
	background-color: salmon;
	}
	.match input {
	background-color: lime;
	}
	.output {
	transition: opacity 0.5s ease-out;
	opacity: 0;
	}
	.match .output {
	opacity: 1;
	}
	aside {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 40%;
	}
	aside + aside {
	top: 150px;
	}
	</style>
	</head>
	<body>
	<h1>typebox</h1>
	<section id='app'>
	<p id='exemplar'></p>
	<input type="text" name="typebox" value="" autocomplete="off" autofill="off"/>
	<aside id='instruct'></aside>
	<aside id='completed' class='output'></aside>
	<pre id="output" class="output">Certificate:
	Data:
	Version: 1 (0x0)
	Serial Number:
	df:29:77:52:a0:dd:aa:a8
	Signature Algorithm: sha1WithRSAEncryption
	Issuer: CN=*.fred.dev, C=US
	Validity
	Not Before: Sep 2 17:51:15 2014 GMT
	Not After : Jul 11 17:51:15 2047 GMT
	Subject: CN=*.fred.dev, C=US
	Subject Public Key Info:
	Public Key Algorithm: rsaEncryption
	RSA Public Key: (2048 bit)
	Modulus (2048 bit):
	00:d0:3f:80:3d:5d:4c:fb:99:9a:4b:e1:5d:af:b9:
	75:59:b9:10:76:15:c2:95:1b:a6:49:0e:91:20:cb:
	88:b8:0b:7b:49:7c:58:15:3e:1b:7d:bc:b7:4e:b0:
	55:94:6d:24:bd:6f:15:cd:7d:c2:32:8a:90:21:0c:
	3f:37:c0:61:0e:0a:0e:b0:56:c0:85:9e:36:81:eb:
	bd:e5:e1:c3:99:72:f2:2a:81:86:79:1a:55:2b:88:
	8b:b3:8d:6c:2c:a6:d8:81:b3:54:ed:d3:3f:96:81:
	27:02:1d:53:a4:75:05:e4:02:8f:db:01:94:aa:ab:
	8b:77:97:bb:ea:00:00:e1:eb:1c:2a:56:9b:ae:59:
	5c:9b:aa:d6:ff:bc:7d:0a:0b:1a:0a:ba:8b:2b:96:
	03:c7:4b:5b:71:70:7a:90:06:43:89:7f:f3:c2:86:
	84:84:1c:0b:5a:73:99:d3:43:4f:55:bd:30:dc:5a:
	9d:9e:6b:dd:be:c3:a7:69:56:c2:8b:61:df:65:f5:
	5e:6f:c9:f2:97:97:d1:00:8a:78:e5:f5:b8:15:2f:
	7c:20:dc:67:2e:cd:38:4b:b4:4d:47:90:1c:eb:bf:
	1f:b3:ba:29:5e:df:51:99:f2:84:a6:cb:ae:a5:61:
	f2:29:79:e1:d5:e8:ca:2b:79:1e:0f:78:36:79:06:
	58:05
	Exponent: 65537 (0x10001)
	Signature Algorithm: sha1WithRSAEncryption
	3f:09:a7:80:05:11:77:5a:aa:e2:68:05:fe:f3:58:55:fc:1b:
	67:43:5e:0d:1f:6a:54:17:ea:a9:4c:04:a2:50:20:4e:45:03:
	3d:05:ea:4e:92:b7:b6:d1:e8:a2:98:78:02:78:7c:15:f5:c5:
	49:bb:5e:5e:85:af:ae:1c:c8:b6:ac:42:f9:4e:9c:e0:b4:9a:
	d9:38:53:fb:73:c9:c3:54:09:9d:ee:b3:57:72:46:49:16:c8:
	6c:a3:fc:42:c0:58:65:29:6e:8c:c3:b8:cc:38:5d:85:37:89:
	46:2c:81:c0:2c:05:b1:93:a5:0e:8f:9a:45:63:7f:2d:e8:23:
	92:d5:96:bd:50:c4:52:aa:26:cc:c3:24:c3:b8:44:22:3c:db:
	ae:fb:2e:6b:3f:e5:6e:0d:fc:b6:e2:bb:cc:41:f6:fe:16:68:
	b2:36:ee:e9:16:b4:f0:af:6c:90:56:ed:41:1f:1c:d4:a1:e1:
	86:7f:aa:a9:e2:de:db:54:43:38:69:ff:a9:b5:99:fc:5c:ca:
	8a:57:20:36:fa:21:17:2b:69:ce:dc:5f:fd:8d:b9:41:3d:06:
	b0:bb:9b:85:18:43:6c:8b:b0:5f:a9:e9:aa:f8:f3:5e:51:7b:
	e8:cb:c5:d0:11:25:55:8f:2c:8f:91:da:11:56:ab:e0:8d:f7:
	49:af:9e:7b
	</pre>
	</section>
	<script>
	var slides = [
	{
	"expect": "openssl x509 -in test.pem -noout -text",
	"output": "Certificate:\n Data:\n Version: 1 (0x0)\n Serial Number:…",
	"instruct": "<h2>openssl: intro</h2><p>First, let's examine the cert in <code>test.pem</code>.</p><p>Type the command exactly as written.</p>",
	"completed": "<p>Awesome!</p><p>Now let's examine the output.</p>"
	}
	];

	current_slide = slides[0];
	var typebox = document.querySelector('[name="typebox"]');
	var exemplar = document.querySelector('#exemplar');
	var output = document.querySelector('#output');
	var instruct = document.querySelector('#instruct');
	var completed = document.querySelector('#completed');

	typebox.setAttribute('placeholder', current_slide.expect);
	exemplar.innerText = current_slide.expect;
	instruct.innerHTML = current_slide.instruct;
	completed.innerHTML = current_slide.completed;
	// output.innerText = current_slide.output;

	typebox.addEventListener('keyup', function (evt) {
	var input = '^\\s*' + evt.target.value.trim().replace(/\s+/, ' ');
	var match = current_slide.expect.match(new RegExp(input));
	if (match && match == current_slide.expect) {
	typebox.classList.remove('mismatch');
	typebox.parentNode.classList.add('match');
	}
	else if (!match) {
	typebox.classList.add('mismatch');
	}
	else {
	typebox.classList.remove('mismatch');
	}
	evt.preventDefault();
	});
	typebox.focus();
	</script>
	</body>
	</html>