empires: Adapt HTML to use 'form-field' instead of 'form-row' class

[lmno.games] / empires / index.html
diff --git a/empires/index.html b/empires/index.html

index 4f574b90b22c9bf071225e81bb8799c357e86040..a1b568827d7c8d37c1a3ce54361eb7b43846c2ab 100644 (file)
--- a/empires/index.html
+++ b/empires/index.html
@@ -1,9 +1,13 @@
  <!DOCTYPE html>
  <html>
    <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
+
      <title>The Game of Empires</title>
  
-    <link rel="stylesheet" href="reset.css" type="text/css" />
+    <link rel="stylesheet" href="/reset.css" type="text/css" />
+    <link rel="stylesheet" href="/style.css" type="text/css" />
      <link rel="stylesheet" href="style.css" type="text/css" />
    </head>
  <body>
@@ -12,6 +16,22 @@
  
  <div id="page">
  
+  <span style="float:right;cursor:pointer" onclick="toggle_host_tools()">
+    ⚙
+  </span>
+
+  <div id="host-tools">
+    <button onclick="post_reveal()">
+      Reveal Characters
+    </button>
+    <button onclick="post_start()">
+      Start Game
+    </button>
+    <button onclick="post_reset()">
+      Reset Game
+    </button>
+  </div>
+
    <div id="message-area">
    </div>
  
@@ -41,17 +61,17 @@
  
      <!-- The return false prevents the page from being reloaded -->
      <form id="register-form" onsubmit="register(this); return false">
-      <div class="form-row medium left">
+      <div class="form-field medium left">
          <label for="name">Your name</label>
          <input type="text" id="name" required>
        </div>
  
-      <div class="form-row medium right">
+      <div class="form-field medium right">
          <label for="character">Character name</label>
          <input type="text" id="character" autocomplete="off" required>
        </div>
  
-      <div class="form-row large">
+      <div class="form-field large">
          <button type="submit">
            Join game
          </button>
@@ -63,7 +83,7 @@
    <div class="show-state-reveal">
      <h1>Watch and memorize each character!</h1>
  
-    <h1 id="character-reveal"></h1>
+    <span id="character-reveal"></span>
    </div>
  
    <div class="hide-state-reveal" id="players-div">