selin.html

---
layout: selin
---

<div class="modal fade" id="modal-reset-question">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Reset</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Do you wish to reset the puzzle?</p>
      </div>
      <div class="modal-footer">
      	<button type="button" class="btn btn-success" id="modal-reset-no">NO</button>        
        <button type="button" class="btn btn-danger" id="modal-reset-yes">YES</button>        
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal-title"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p id="modal-description"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="modal-dialog-ok">OK</button>        
      </div>
    </div>
  </div>
</div>

<div class="jumbotron selin-green">
	<h2>Christmas Treasure hunt</h2>
	<p>Enter the code you are given and read the clue to find the next present and code!</p>

	<div class="row">
		<div class="col-md-4">						
			<img class="mx-auto d-block" id="selin-image-1" src="/media/xmas/deer.svg">					
		</div>

		<div class="col-md-4">
			<img class="mx-auto d-block" id="selin-image-2" class="pull-right" src="/media/xmas/deer.svg">
		</div>

		<div class="col-md-4">
			<img class="mx-auto d-block" id="selin-image-3" class="pull-right" src="/media/xmas/deer.svg">
		</div>
	</div>
	<button class="btn btn-secondary selin-green" type="button" id="puzzle-reset" >Reset</button>	        
</div>

<div class="container">	
	<h3 id="puzzle-title">Title</h3>

	<div class="input-group" id="puzzle-content">      
	      <!-- <input type="text" class="form-control" name="puzzle-input" id="puzzle-input" placeholder="Type in the code you find..." />	       -->
	      <input type="number" class="form-control puzzle-number-input" name="puzzle-input-1" id="puzzle-input-1" min="0" max="9" value="0" />
	      <input type="number" class="form-control puzzle-number-input" name="puzzle-input-2" id="puzzle-input-2" min="0" max="9" value="0" />
	      <input type="number" class="form-control puzzle-number-input" name="puzzle-input-3" id="puzzle-input-3" min="0" max="9" value="0" />
	      <span class="input-group-btn">        
	        <button class="btn btn-secondary selin-green" type="button" id="puzzle-submit" >Submit!</button>	        
	      </span>
	</div>		
</div>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
<script src="{{ "/js/selin-compiled.js" | prepend: site.baseurl }}""></script>