<head>
<title>The Game of Empires</title>
+ <link rel="stylesheet" href="reset.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<script src="empires-client.js"></script>
+<div id="page">
+
<div id="message-area">
</div>
<div id="pre-game" class="show-state-join">
- <h1>Welcome to the game of Empires!</h1>
+ <h1>The Game of Empires</h1>
<p>
To join the game, type your own name below. Also, choose the name
</p>
<!-- The return false prevents the page from being reloaded -->
- <form onsubmit="register(this); return false">
- <label for="name">Your name</label>
- <input type="text" id="name" required>
-
- <label for="character">Character name</label>
- <input type="text" id="character" autocomplete="off" required>
-
- <input type="submit" value="Join game">
+ <form id="register-form" onsubmit="register(this); return false">
+ <div class="form-row medium left">
+ <label for="name">Your name</label>
+ <input type="text" id="name" required>
+ </div>
+
+ <div class="form-row medium right">
+ <label for="character">Character name</label>
+ <input type="text" id="character" autocomplete="off" required>
+ </div>
+
+ <div class="form-row large">
+ <button type="submit">
+ Join game
+ </button>
+ </div>
</form>
</div>
</div>
+</div>
</body>
</html>