Automatically focus code input field
[gamestick-pjgsapi.git] / templates / activate-code.phtml
index cb7a738fc28e70a25f853043aefa9777730d163d..bd960107d94e7e104ea4a2440aa9a18a867841ae 100644 (file)
@@ -1,40 +1,45 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-  <meta charset="utf-8"/>
-  <title>GameStick activation: Code</title>
-  <link rel="stylesheet" href="css/css.css">
-</head>
-<body>
-  <h1 id="logo_small"><a href="#">Game Stick</a></h1>
-  <div id="gs">
-
-    <div id="page_1" class="page">
-
-      <h2>Welcome</h2>
-
-      <div class="register_bar"><img style="width: 100%" src="img/register_bar.png">
-      </div>
-
-      <p>Almost there, just  few more steps and you will have activated your GameStick.</p>
+  <head>
+    <meta charset="utf-8"/>
+    <title>GameStick activation: Code</title>
+    <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 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>
 
-      <form id="code_form" method="post" action="activate.php">
-
-       <label for="code">Verification code:</label><br>
-       <input id="code_input" name="code" type="text" value="<?= htmlspecialchars($code) ?>"/>
-     </div>
-     <?php if ($error): ?>
-      <div>
-        <p class="error"><?= htmlspecialchars($error) ?></p>
-      </div>
-    <?php endif ?>
-
-    <button class="button" type="submit">Continue</button>
-  </form>
-</div></div>
-
-
-
-</body>
+      <?php if ($error): ?>
+      <p class="error"><?= htmlspecialchars($error) ?></p>
+      <?php endif ?>
+
+      <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>
-