<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>