game.html

{{ define "main" }}

<style type="text/css">

  .word {
    padding: 3% 3% 1.5% 3%;
    width: 94%;
    background: #def5fa;
    float: none;
    margin-right: 0;
    margin-bottom: 15px;
    display: block;
    font-size: 24px;
  }

  #errors {
    padding: 3% 3% 1.5% 3%;
    width: 94%;
    color: #FFE8E8;
    background: #fe2400;
    margin-bottom: 15px;
    display: block;
    font-size: 24px;
  }

  #win, #lose {
    letter-spacing: 0;
    line-height: 36px;
    background: #fff;
    border: 7px solid #def5fa;
    width: 406px;
    display: none;
  }

  #win em {
    color: #00CC00;
    font-style: normal
  }

  #lose em {
    color: #CC3300;
    font-style: normal
  }

  .person {
    background: url(/img/person.jpg) top right no-repeat #def5fa;
  }

  .computer {
    background: url(/img/computer.jpg) top right no-repeat #def5fa;
  }

  #words a {
    color: #000;
    text-decoration: none;
    border-bottom: none;
  }

  .error {
    float: none;
    margin-right: 0;
    margin-bottom: 15px;
    display: block;
    font-size: 24px;
  }

  .error strong {
    font-weight: normal;
    text-transform: uppercase;
    font-size: 10px;
    color: #fff;
  }

  p.add {
    border-top: 1px dashed #94B4BF;
    display: block
  }

  .word input {
    padding: 0;
    width: 100%;
    height: 100%;
    border-left: 0;
    outline: none;
    font-size: 24px;
  }

  .good {
    color: #49b64e;
    font-size: 10px;
    display: block;
    float: left;
    margin-right: 4px;
  }

  .bad {
    color: #c03e3e;
    font-size: 10px;
    display: block;
    float: left;
    margin-right: 4px;
  }

  .nohover:hover {
    text-decoration: none;
  }

  .show {
    display: inline;
  }

  .hide, .hidden {
    display: none;
  }

</style>

<main>
  <div id="post">
    <p>Change one letter in the four-letter word the computer gives you. The computer will then change one letter in the
      word you used and so on. You may not use proper nouns or reuse words that have already been used. The first person
      to use all possible words wins!</p>
  </div>
</main>

<p class="word" id="win">
  <em>Congratulations, you win!</em><br/>The computer has no possible words left to use.<br/>
  <span id="score_one"></span> words were used in your game.<br/>
  <a href="/game">Play Again?</a>
</p>

<p class="word" id="lose">
  <em>Sorry, you lost.</em><br/>There are no more possible words you can use.<br/>
  <span id="score_two"></span> words were used in your game.<br/>
  <a href="/game">Play Again?</a>
</p>

<div id="errors" style="display:none"></div>

<form action="#" method="post" style="display:inline;" name="entry_form" id="entry_form">
  <div class="word person" id="entry_area">
    <input type="text" name="entry" id="entry"/>
  </div>
</form>

<div id="words"></div>
{{ end }}