cmbuckley/woop.html

## woop.html
<html>
  <head>
    <script>
    document.addEventListener('keypress', function (e) {
        if (e.charCode == 13) {
            document.body.classList.add('flash');
            document.querySelector('.warning').innerText = 'Bye bye thing!';
            var a = new Audio('http://soundbible.com/mp3/Woop%20Woop-SoundBible.com-198943467.mp3');
            a.play();
            a.addEventListener('ended', function() {
                this.currentTime = 0;
                this.play();
            }, false);
        }
    });
    </script>
    <style>
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        display: table;
        color: white;
        background-color: black;
    }

    .warning {
        text-align: center;
        font-size: 900%;
        font-family: helvetica;
        font-weight: bold;
        display: table-cell;
        vertical-align:middle;
    }

    @-webkit-keyframes flash {
        0% {
            background-color: yellow;
            opacity: 1;
        }
        22% {
            background-color: yellow;
        }
        77% {
            background-color: red;
        }
        100% {
            background-color: #777;
        }
    }

    .flash {
        animation-name: flash;
        animation-duration: 900ms;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
    }
    </style>
  </head>
  <body>
    <p class="warning">Decommission the Thing</p>
  </body>
</html>
	<html>
	<head>
	<script>
	document.addEventListener('keypress', function (e) {
	if (e.charCode == 13) {
	document.body.classList.add('flash');
	document.querySelector('.warning').innerText = 'Bye bye thing!';
	var a = new Audio('http://soundbible.com/mp3/Woop%20Woop-SoundBible.com-198943467.mp3');
	a.play();
	a.addEventListener('ended', function() {
	this.currentTime = 0;
	this.play();
	}, false);
	}
	});
	</script>
	<style>
	html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	display: table;
	color: white;
	background-color: black;
	}

	.warning {
	text-align: center;
	font-size: 900%;
	font-family: helvetica;
	font-weight: bold;
	display: table-cell;
	vertical-align:middle;
	}

	@-webkit-keyframes flash {
	0% {
	background-color: yellow;
	opacity: 1;
	}
	22% {
	background-color: yellow;
	}
	77% {
	background-color: red;
	}
	100% {
	background-color: #777;
	}
	}

	.flash {
	animation-name: flash;
	animation-duration: 900ms;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	}
	</style>
	</head>
	<body>
	<p class="warning">Decommission the Thing</p>
	</body>
	</html>