<!doctype html>
<html>
<head>
<meta charset=utf-8>
<link href='http://fonts.googleapis.com/css?family=Press+Start+2P|PT+Mono' rel='stylesheet' type='text/css'>
<link href="snake.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class=corner></div><div class=corner></div><div class=corner></div><div class=corner></div>
<div id=container>
<div class=corner></div><div class=corner></div><div class=corner></div><div class=corner></div>
<header><h1>SNAKE</h1></header><!--
--><section id=description>
<h4>Play SNAKE!</h4>
<p>You are the <span style="color: #88F">BLUE</span>
snake. Eat the <span style="color: green">GREEN</span> food to
grow longer! But be careful! Don't run into the walls or
yourself!</p>
</section><!--
--><section id=levelSelect>
<h4>Level Select</h4>
</section><!--
--><section id=gameContainer>
<canvas id=snakeCanvas tabIndex=1></canvas>
</section><!--
--><section id=controls>
<h4>Controls</h4>
<ul><li><img src="arrow.svg" class="arrow up">
<img src="arrow.svg" class="arrow down">
<img src="arrow.svg" class="arrow left">;
<img src="arrow.svg" class="arrow right">: Move </li>
<li>SPACE: (Re)start.</li>
<li>PAUSE: (Un)Pause</li>
</ul>
</section><!--
--><section id=options>
<h4>Options</h4>
<button>Level Editor
<div class=corner></div><div class=corner></div>
<div class=corner></div><div class=corner></div></button>
</section><!--
--><section id=editorControls>
<label>Speed</label><input type=text id=speed>
<label>Rows</label><input type=text id=rows>
<label>Columns</label><input type=text id=cols>
<input type=checkbox id=hasGoal><label>Winning Score</label><!--
--><input type=text id=targetScore>
<label>Growth</label><input type=text id=growthFactor>
<label>Growth Increase</label><!--
--><input type=text id=growthFactorIncrease>
</section><!--
--><section id=score>
<h4>Score</h4>
<span class=value>0</span>
</section>
</div>
<div class=debug-aspect>
<span class=wide-only>wide</span>
<span class=landscape-only>landscape</span>
<span class=even-only>even</span>
<span class=portrait-only>portrait</span>
<span class=tall-only>tall</span>
</div>
<div class=debug-size>
<span class=small-only>small</span>
<span class=medium-only>medium</span>
<span class=large-only>large</span>
<span class=ultralarge-only>ultralarge</span>
</div>
<script src="../resources/js/jquery-2.1.1.min.js" type="application/javascript"></script>
<script src="../resources/js/underscore-1.7.0.min.js" type="application/javascript"></script>
<script src="snake.js" type="application/javascript"></script>
<script src="snake-levels.js" type="application/javascript"></script>
<script src="snake-page.js" type="application/javascript"></script>
</body>
</html>