Automatically focus code input field
[gamestick-pjgsapi.git] / templates / activate-code.phtml
index 16da967de0b3c6dba2f3faa8c46c1b28246b124d..bd960107d94e7e104ea4a2440aa9a18a867841ae 100644 (file)
@@ -2,25 +2,44 @@
   <head>
     <meta charset="utf-8"/>
     <title>GameStick activation: Code</title>
-    <style>
-      .error {
-        color: red;
-      }
-    </style>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <link rel="stylesheet" href="css/activate.css"/>
+    <link rel="icon" type="image/png" href="img/faviconnew.png"/>
   </head>
-  <body>
-    <h1>PlayJam GameStick activation</h1>
-    <form method="post" action="activate.php">
-      <div>
-        <label for="code">Verification code:</label>
-        <input name="code" type="text" value="<?= htmlspecialchars($code) ?>"/>
-      </div>
+  <body class="code">
+    <img id="gslogo" src="img/logo_2.png" alt="GameStick" width="176" height="24"/>
+
+    <div class="content">
+      <h1>Welcome</h1>
+
+      <ul id="progressbar">
+        <li>Select
+          language</li>
+        <li>Setup
+          screen</li>
+        <li>Connect to
+          the internet</li>
+        <li>Update
+          software</li>
+        <li class="active">Activate
+          GameStick</li>
+      </ul>
+
+      <p>Almost there, just a few more steps and you will have activated your GameStick.</p>
+      <p>Please enter the code displayed on your TV screen below.</p>
+
       <?php if ($error): ?>
-      <div>
-        <p class="error"><?= htmlspecialchars($error) ?></p>
-      </div>
+      <p class="error"><?= htmlspecialchars($error) ?></p>
       <?php endif ?>
-      <button type="submit">Submit</button>
-    </form>
+
+      <form class="code" method="post" action="activate.php">
+        <input class="code-input" name="code" type="text"
+          value="<?= htmlspecialchars($code) ?>"
+          placeholder="Verification code"
+          autofocus=""
+        />
+        <button class="button" type="submit">Continue</button>
+      </form>
+    </div>
   </body>
 </html>