<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>
--- /dev/null
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+body {
+ background-color: #333738;
+ font-family: sans-serif;
+ line-height: 1.5;
+}
+
+#page {
+ margin-top: 36px;
+ margin-bottom: 36px;
+ padding-top: 30px;
+ padding-bottom: 30px;
+ padding-left: 10px;
+ padding-right: 10px;
+ background-color: white;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+/* For a wide screen, just use the center of the window for content. */
+@media screen and (min-width: 500px) {
+ #page {
+ max-width: 720px;
+ padding-left: 50px;
+ padding-right: 50px;
+ }
+}
+
+/* And when the screen is narrow, let's kill the wasted vertical space
+ above it too. */
+@media screen and (max-width: 499px) {
+ #page {
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+}
+
+h1 {
+ color: #333738;
+ font-size: 150%;
+ font-weight: bold;
+}
+
+h2 {
+ color: #333738;
+ font-size: 110%;
+ font-weight: bold;
+}
+
+p,dl,dd {
+ margin-bottom: 1em;
+}
+
/* Default message severity is "info" but can be overriden. */
.message {
padding: 1em;
- background-color: #46a7f5;
+ background-color: #44c7ef;
color: white;
transition: 0.3s;
margin-bottom: 0.5em;
}
.success {
- background-color: #6abc6d;
+ background-color: #44c7ef;
}
.warning {
#players-div {
display:none;
}
+
+#register-form {
+ max-width: 100%;
+ display: grid;
+ grid-template-columns: 49% 49%;
+ grid-column-gap: 2%;
+}
+
+.form-row {
+ max-width: 100%;
+ padding-bottom: 0.25em;
+}
+
+.form-row.medium.left {
+ grid-column-start: 1;
+}
+
+.form-row.medium.right {
+ grid-column-start: 2;
+}
+
+.form-row.large {
+ grid-column-start: 1;
+ grid-column-end: span 2;
+}
+
+/* For a narrow screen, use a single-column for medium form rows. */
+@media screen and (max-width: 600px) {
+ .form-row.medium.left,.form-row.medium.right {
+ grid-column-start: 1;
+ grid-column-end: span 2
+ }
+}
+
+input {
+ width: 100%;
+}
+
+input {
+ box-sizing: border-box;
+
+ height: 40px;
+
+ padding: 10px 12px;
+
+ border: 1px solid #287789;
+ border-radius: 4px;
+}
+
+input:focus {
+ border: 2px solid #44c7ef;
+}
+
+button {
+ display: inline-block;
+ border-radius: 4px;
+ background-color: #287789;
+ border: none;
+ color: white;
+ text-align: center;
+ font-size: 125%;
+ margin-top: .25em;
+ padding-top: 0.25em;
+ padding-bottom: 0.25em;
+ width: 200px;
+ transition: all 150ms ease;
+}
+
+button:hover {
+ transform: translateY(-1px);
+ background-color: #44c7ef;
+}
+
+:focus {
+ outline: none;
+}
+::-moz-focus-inner {
+ border: 0;
+}
projects / empires-html / commitdiff