Layout for activation HTML templates

[gamestick-pjgsapi.git] / templates / activate-code.phtml
diff --git a/templates/activate-code.phtml b/templates/activate-code.phtml

index 16da967de0b3c6dba2f3faa8c46c1b28246b124d..cb7a738fc28e70a25f853043aefa9777730d163d 100644 (file)
--- a/templates/activate-code.phtml
+++ b/templates/activate-code.phtml
@@ -1,26 +1,40 @@
  <html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <meta charset="utf-8"/>
-    <title>GameStick activation: Code</title>
-    <style>
-      .error {
-        color: red;
-      }
-    </style>
-  </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) ?>"/>
+<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>
-      <?php if ($error): ?>
+
+      <p>Almost there, just  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 type="submit">Submit</button>
-    </form>
-  </body>
+    <?php endif ?>
+
+    <button class="button" type="submit">Continue</button>
+  </form>
+</div></div>
+
+
+
+</body>
  </html>
+