git.cworth.org Git - lmno.games/blob - empires/index.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8"/>
   5
   6     <title>The Game of Empires</title>
   7
   8     <link rel="stylesheet" href="reset.css" type="text/css" />
   9     <link rel="stylesheet" href="style.css" type="text/css" />
  10   </head>
  11 <body>
  12
  13   <script src="empires-client.js"></script>
  14
  15 <div id="page">
  16
  17   <div id="message-area">
  18   </div>
  19
  20   <div id="loading" class="show-state-none">
  21     <h1>The Game of Empires</h1>
  22
  23     <p>
  24       Contacting server. Please wait...
  25     </p>
  26   </div>
  27
  28   <div id="pre-game" class="show-state-join">
  29
  30     <h1>The Game of Empires</h1>
  31
  32     <p>
  33       To join the game, type your own name below. Also, choose the name
  34       of a character that you want to play as. This can be anyone (real
  35       or fictional) that everyone playing the game would be likely to
  36       know, (for example "Albert Einstein" or "Harry Potter").
  37     </p>
  38
  39     <p>
  40       Note: After you have joined the game, another player can use this
  41       same device to join the game as well.
  42     </p>
  43
  44     <!-- The return false prevents the page from being reloaded -->
  45     <form id="register-form" onsubmit="register(this); return false">
  46       <div class="form-row medium left">
  47         <label for="name">Your name</label>
  48         <input type="text" id="name" required>
  49       </div>
  50
  51       <div class="form-row medium right">
  52         <label for="character">Character name</label>
  53         <input type="text" id="character" autocomplete="off" required>
  54       </div>
  55
  56       <div class="form-row large">
  57         <button type="submit">
  58           Join game
  59         </button>
  60       </div>
  61     </form>
  62
  63   </div>
  64
  65   <div class="show-state-reveal">
  66     <h1>Watch and memorize each character!</h1>
  67
  68     <span id="character-reveal"></span>
  69   </div>
  70
  71   <div class="hide-state-reveal" id="players-div">
  72     <h1>Players in the game</h1>
  73
  74     <ul id="players">
  75     </ul>
  76
  77   </div>
  78
  79 </div>
  80 </body>
  81 </html>