<html xmlns="http://www.w3.org/1999/xhtml">
-<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>
-
- <p>
- Also you can sign yourself as a Founder.
- </p>
- <form method="post" action="activate.php">
+ <head>
+ <meta charset="utf-8"/>
+ <title>GameStick activation: Profile</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>
+ <img id="gslogo" src="img/logo_2.png" alt="GameStick" width="176" height="24"/>
+
+ <div class="content">
+ <h1>PlayJam GameStick activation: Profile</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>
+
+ <form class="profile" 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>
+ <p class="intro-mobile">
+ Select your user name and profile image for this GameStick
+ to personalise your account.
+ </p>
+
+ <div class="twocol">
+ <!-- left: avatar selection -->
+ <div class="left">
+
+ <span class="avatarlabel">Avatar</span>
+ <div class="avatars">
+ <?php foreach ($avatars as $key => $smallImagePath): ?>
+ <div class="avatar">
+ <input type="radio" name="avatar"
+ id="avatar-<?= htmlspecialchars($key) ?>"
+ value="<?= htmlspecialchars($key) ?>"
+ <?php if ($input['avatar'] == $key) { echo 'checked=""';} ?>
+ />
+ <label for="avatar-<?= htmlspecialchars($key) ?>">
+ <img src="<?= htmlspecialchars($smallImagePath) ?>"
+ alt="Avatar <?= htmlspecialchars($key) ?>"
+ width="118" height="118"
+ />
+ </label>
+ </div>
+ <?php endforeach ?>
+ </div>
+
+ </div>
+
+ <!-- right: form values -->
+ <div class="right">
+ <!-- original message:
+ <p>
+ Create your own unique PlayTag and choose a profile image
+ to personalise your account.
+ </p>
+ <p>
+ Your email address and password will be required to sign
+ into your account.
+ </p>
+ -->
+ <p class="intro-desktop">
+ Select your user name and profile image for this GameStick
+ to personalise your account.
+ </p>
+
+ <?php if ($input['submit'] && count($errors)): ?>
+ <p class="error">
+ Errors:
+ </p>
+ <ul class="error">
<?php foreach ($errors as $msg): ?>
- <li><?= htmlspecialchars($msg) ?></li>
+ <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>
+ <?php endif ?>
+
+ <div class="profile-row">
+ <label for="gamerTag">PlayTag*</label>
+ <input 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>
- <label>
- <input id="founderFlag" name="founderFlag" type="checkbox"
- value="1"
- <?php if ($input['founderFlag']) { echo 'checked=""';} ?>
- />
- I am a founder
- </label>
- </div>
+ <br/>
- <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>
- <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=""';} ?>
- />
- 3+
- </label>
-
- <label>
- <input type="radio" name="minAge" value="7"
- <?php if ($input['minAge'] == 7) { echo 'checked=""';} ?>
- />
- 7+
- </label>
-
- <label>
- <input type="radio" name="minAge" value="12"
- <?php if ($input['minAge'] == 12) { echo 'checked=""';} ?>
- />
- 12+
- </label>
-
- <label>
- <input type="radio" name="minAge" value="17"
- <?php if ($input['minAge'] == 17) { echo 'checked=""';} ?>
- />
- 17+
- </label>
- </div>
- <div name="lewy" style="width: 48%;">
- <label>Avatar image:</label>
- <div id="avatary"> <br>
- <br>
-
-
- <?php foreach ($avatars as $key => $smallImagePath): ?>
- <br>
- <div id="test">
+ <div class="profile-row">
+ <span></span>
<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=""';} ?>
+ <input id="founderFlag" name="founderFlag" type="checkbox"
+ value="1"
+ <?php if ($input['founderFlag']) { echo 'checked=""';} ?>
/>
+ I am a founder
</label>
</div>
- <?php endforeach ?>
+ <div class="profile-row">
+ <label for="founderName">Founder name:</label>
+ <input 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>
+
+ <br/>
+
+ <div class="profile-row minage">
+ <label>Show games suitable for ages:</label>
+ <div>
+ <label>
+ <input type="radio" name="minAge" value="3"
+ <?php if ($input['minAge'] == 3) { echo 'checked=""';} ?>
+ />
+ <span class="tag teal">3+</span>
+ </label>
+
+ <label>
+ <input type="radio" name="minAge" value="7"
+ <?php if ($input['minAge'] == 7) { echo 'checked=""';} ?>
+ />
+ <span class="tag teal">7+</span>
+ </label>
+
+ <label>
+ <input type="radio" name="minAge" value="12"
+ <?php if ($input['minAge'] == 12) { echo 'checked=""';} ?>
+ />
+ <span class="tag orange">12+</span>
+ </label>
+
+ <label>
+ <input type="radio" name="minAge" value="17"
+ <?php if ($input['minAge'] == 17) { echo 'checked=""';} ?>
+ />
+ <span class="tag red">17+</span>
+ </label>
+ </div>
+ </div>
+
+ <button name="submit" value="1" type="submit">Submit</button>
+ </div>
</div>
- <button style="float:right; " name="submit" value="1" type="submit">Submit</button>
- </div>
- </form>
+ </form>
- </div>
-</div>
-</body>
+ </div>
+ </body>
</html>
git.cweiske.de / gamestick-pjgsapi.git / blobdiff