<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>
+
<html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta charset="utf-8"/>
- <title>GameStick activation: Profile</title>
- <style>
- .error {
- color: red;
- }
- </style>
- </head>
- <body>
- <h1>PlayJam GameStick activation: Profile</h1>
- <form method="post" action="activate.php">
- <input type="hidden" name="code" value="<?= htmlspecialchars($code) ?>"/>
-
- <?php if ($input['submit'] && count($errors)): ?>
- <div style="color: red">
- Errors:
- <ul>
- <?php foreach ($errors as $msg): ?>
- <li><?= htmlspecialchars($msg) ?></li>
- <?php endforeach ?>
- </ul>
- </div>
- <?php endif ?>
+<head>
+ <meta charset="utf-8"/>
+ <title>GameStick activation: Profile</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>PlayJam GameStick activation: Profile</h2>
+ <div class="register_bar"><img style="width: 100%" src="img/register_bar.png"></div>
+
+ <div class="prawy">
+ <p>Create your own unique PlayTag and choose a profile image to personalise your account</p>
- <div>
- <label for="gamerTag">Gamer tag:</label>
- <input id="gamerTag" name="gamerTag" type="text"
+ <p>
+ Also you can sign yourself as a Founder.
+ </p>
+ <form method="post" action="activate.php">
+ <input type="hidden" name="code" value="<?= htmlspecialchars($code) ?>"/>
+
+ <?php if ($input['submit'] && count($errors)): ?>
+ <div style="color: red">
+ Errors:
+ <ul>
+ <?php foreach ($errors as $msg): ?>
+ <li><?= htmlspecialchars($msg) ?></li>
+ <?php endforeach ?>
+ </ul>
+ </div>
+ <?php endif ?>
+
+ <div>
+ <label style="font-size: 16px;" for="gamerTag">PlayTag:</label>
+ <input style="float: right;" id="gamerTag" name="gamerTag" type="text"
value="<?= htmlspecialchars($input['gamerTag']) ?>"
pattern="[a-zA-Z0-9 ]+"
required=""
title="Allowed: A-Z, a-z, 0-9, space"
- />
- </div>
+ />
+ </div>
- <div>
- <label>
- <input id="founderFlag" name="founderFlag" type="checkbox"
+ <div>
+ <label>
+ <input id="founderFlag" name="founderFlag" type="checkbox"
value="1"
<?php if ($input['founderFlag']) { echo 'checked=""';} ?>
- />
- I am a founder
- </label>
- </div>
+ />
+ I am a founder
+ </label>
+ </div>
- <div>
- <label for="founderName">Founder name:</label>
- <input id="founderName" name="founderName" type="text"
+ <div>
+ <br>
+ <label style="font-size: 16px;" for="founderName">Founder name:</label>
+ <input style="float: right;" id="founderName" name="founderName" type="text"
value="<?= htmlspecialchars($input['founderName']) ?>"
pattern="[a-zA-Z0-9 ]*"
title="Allowed: A-Z, a-z, 0-9, space"
/>
- </div>
-
- <div>
- <label>Show games suitable for ages:</label>
+ </div>
+ <br>
+ <label style="font-size: 14px;">Show games suitable for ages:</label><br>
<label>
<input type="radio" name="minAge" value="3"
- <?php if ($input['minAge'] == 3) { echo 'checked=""';} ?>
+ <?php if ($input['minAge'] == 3) { echo 'checked=""';} ?>
/>
3+
- </label><br/>
+ </label>
<label>
<input type="radio" name="minAge" value="7"
- <?php if ($input['minAge'] == 7) { echo 'checked=""';} ?>
+ <?php if ($input['minAge'] == 7) { echo 'checked=""';} ?>
/>
7+
- </label><br/>
+ </label>
<label>
<input type="radio" name="minAge" value="12"
- <?php if ($input['minAge'] == 12) { echo 'checked=""';} ?>
+ <?php if ($input['minAge'] == 12) { echo 'checked=""';} ?>
/>
12+
- </label><br/>
+ </label>
<label>
<input type="radio" name="minAge" value="17"
- <?php if ($input['minAge'] == 17) { echo 'checked=""';} ?>
+ <?php if ($input['minAge'] == 17) { echo 'checked=""';} ?>
/>
17+
- </label><br/>
+ </label>
</div>
-
- <div>
+ <div name="lewy" style="width: 48%;">
<label>Avatar image:</label>
- <?php foreach ($avatars as $key => $smallImagePath): ?>
- <label>
- <input type="radio" name="avatar" value="<?= htmlspecialchars($key) ?>"
- <?php if ($input['avatar'] == $key) { echo 'checked=""';} ?>
- />
- <img src="<?= htmlspecialchars($smallImagePath) ?>"
- alt="Avatar <?= htmlspecialchars($key) ?>"
- width="118" height="118"
- />
- </label><br/>
- <?php endforeach ?>
+ <div id="avatary"> <br>
+ <br>
- </div>
- <button name="submit" value="1" type="submit">Submit</button>
+ <?php foreach ($avatars as $key => $smallImagePath): ?>
+ <br>
+ <div id="test">
+ <label>
+
+
+
+ <img src="<?= htmlspecialchars($smallImagePath) ?>"
+ alt="Avatar <?= htmlspecialchars($key) ?>"
+ width="118" height="118"
+ />
+ <br>
+ <input style="
+ align-items: center;" type="radio" name="avatar" id="radioo" value="<?= htmlspecialchars($key) ?>"
+ <?php if ($input['avatar'] == $key) { echo 'checked=""';} ?>
+ />
+ </label>
+ </div>
+ <?php endforeach ?>
+
+ </div>
+
+ <button style="float:right; " name="submit" value="1" type="submit">Submit</button>
+ </div>
</form>
- </body>
+
+ </div>
+</div>
+</body>
</html>
+
<html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta charset="utf-8"/>
- <title>GameStick activation: Success</title>
- </head>
- <body>
- <h1>PlayJam GameStick activation complete</h1>
- <p>
- Your profile has been updated.
- You can continue with your GameStick setup.
- </p>
- </body>
-</html>
+<head>
+ <meta charset="utf-8"/>
+ <title>GameStick activation: Success</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">
+
+ <div class="register_bar"><img style="width: 100%" src="img/register_bar.png"></div>
+ <div id="content">
+ <div class="succes">
+ <p>PlayJam GameStick activation complete</p>
+ <br>
+ <p>
+ Your profile has been updated.
+ You can continue with your GameStick setup.
+ </p>
+ </div>
+ </div>
+
+ </body>
+ </html>
--- /dev/null
+ .error {
+ color: red;
+}
+input[type="radio"]:checked+label { display:none; }
+
+ body {font-size:12px;
+ color:#fff;
+ background:url(/img/web_background_24.png) no-repeat rgb(146,155,155); background-size:100%;
+ overflow:auto;
+ font-family:Avenir,Arial,sans-serif;}
+ .register_bar{width:100%; margin-bottom:5%; }
+ .prawy{
+ width: 48%;float:right;
+}
+#avatary{width:100%;display:flex;flex-wrap: wrap; }
+
+
+#content{}
+.succes{
+ clear:left;display: flex; align-content: center;flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+}
+.button{
+ color: white;
+ font-size: 16px;
+ width: 200px;
+ background-color: grey;
+ height: 40px;
+ position: absolute;
+ right: 0;
+ margin-top:20px;
+}
+.button:hover{
+ background-color: #f652c3;
+}
+.page h2{margin-bottom:5px; font-size:24px; font-weight:normal;}
+#gs{ margin: auto;
+ width: 75%;
+padding: 10px;margin-top:10%;/* font-size:16px; */}
+#page_1 p{margin:30px 0;font-size:18px;text-align:left;line-height:40px;}
+#logo a{width:137px; height:67px; background:url(/web/20150908165227im_/https://www.gamestick.tv/img/logo.png) no-repeat 0 0; position:absolute; top:52px; left:21px; display:block; text-indent:-9999em;}
+#logo_small a{width:176px; height:24px; background:url(/img/logo_2.png) no-repeat 0 0; position:absolute; top:45px; left:21px; display:block; text-indent:-9999em;}
+
+
+
+
+#code_form{text-align:center;background:#f652c3;height:66px;margin: auto;
+ width: 80%;
+
+ padding: 10px;margin-top:10%;}
+ #code_form input{margin: auto;
+ width: 90%;
+
+ padding: 10px;margin-top:10%; height:36px; padding:4px 4px; margin:9px; font-size:34px; border:2px solid #787e7d;}
+ .page h2{margin-bottom:5px; font-size:24px; font-weight:normal;}