<title>Sequence</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Official Bootstrap -->

<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">

<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap-theme.min.css">

<!-- Our project CSS -->

<link rel="stylesheet" href="style.css">

<div class="container">

<div class="page-header">

<h1>Sequence</h1>

</div>

<div class="jumbotron">

<p>Welcome to Sequence, the game of guessing number sequences.</p>

<p>Each number is a single digit, 0-9, with no number appearing more than once. You will have 10 chances to guess the correct number sequence.</p>

<p>To play, enter one number per field and click "Make Guess". You will be given feedback as follows:</p>

<ul>

<li>Green means you have correctly placed a number in the sequence</li>

<li>Yellow means the number exists within the sequence, but in a different position</li>

<li>Red means the number does not exist anywhere in the sequence</li>

</ul>

<p class="text-right"><button id="play" class="btn btn-primary btn-lg">Play Sequence</button></p>

</div>

</div>

<div id="game" class="hidden container">

<div class="panel panel-primary">

<div class="hidden panel-heading">

</div>

<div class="panel-body">

<div class="row">

<div id="col1" class="col-xs-4"><span class="glyphicon"></span><input type="text" maxlength="1" class="number"></div>

<div id="col2" class="col-xs-4"><span class="glyphicon"></span><input type="text" maxlength="1" class="number"></div>

<div id="col3" class="col-xs-4"><span class="glyphicon"></span><input type="text" maxlength="1" class="number"></div>

</div>

<p>Guesses remaining: <span id="remaining"></span></p>

</div>

<div class="panel-footer">

<button id="guess" class="btn btn-primary btn-lg">Make Guess</button>

<button id="again" class="hidden btn btn-primary btn-lg">Play Again</button>

</div>

</div>

<div id="error" style="display: none" class="alert alert-danger" role="alert"></div>

</div>

</div>

<!-- Official JQuery -->

<script src="lib/jquery/dist/jquery.min.js"></script>

<script src="lib/jquery-ui/jquery-ui.min.js"></script>

<!-- Official Bootstrap -->

<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>

<!-- Our project JS -->

<script src="sequence.js"></script>