<head>
<meta charset="utf-8"/>
<title>GameStick activation: Code</title>
- <link rel="stylesheet" href="css/css.css"/>
+ <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 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>
- <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) ?>"/>
-
- <?php if ($error): ?>
- <div>
- <p class="error"><?= htmlspecialchars($error) ?></p>
- </div>
- <?php endif ?>
-
- <button class="button" type="submit">Continue</button>
- </form>
- </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): ?>
+ <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"
+ />
+ <button class="button" type="submit">Continue</button>
+ </form>
</div>
</body>
</html>
<head>
<meta charset="utf-8"/>
<title>GameStick activation: Profile</title>
- <link rel="stylesheet" href="css/css.css"/>
+ <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 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>
+ <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) ?>"/>
+
+ <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>
- <p>
- Also you can sign yourself as a Founder.
- </p>
- <form method="post" action="activate.php">
- <input type="hidden" name="code" value="<?= htmlspecialchars($code) ?>"/>
+ </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)): ?>
- <div style="color: red">
+ <p class="error">
Errors:
- <ul>
- <?php foreach ($errors as $msg): ?>
- <li><?= htmlspecialchars($msg) ?></li>
- <?php endforeach ?>
- </ul>
- </div>
+ </p>
+ <ul class="error">
+ <?php foreach ($errors as $msg): ?>
+ <li><?= htmlspecialchars($msg) ?></li>
+ <?php endforeach ?>
+ </ul>
<?php endif ?>
- <div>
- <label style="font-size: 16px;" for="gamerTag">PlayTag:</label>
- <input style="float: right;" id="gamerTag" name="gamerTag" type="text"
+ <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=""
/>
</div>
- <div>
+ <br/>
+
+ <div class="profile-row">
+ <span></span>
<label>
<input id="founderFlag" name="founderFlag" type="checkbox"
value="1"
</label>
</div>
- <div>
- <br/>
- <label style="font-size: 16px;" for="founderName">Founder name:</label>
- <input style="float: right;" id="founderName" name="founderName" type="text"
+ <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>
- <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>
+ <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>
- <label>
- <input type="radio" name="minAge" value="7"
- <?php if ($input['minAge'] == 7) { echo 'checked=""';} ?>
- />
- 7+
- </label>
+ <button name="submit" value="1" type="submit">Submit</button>
+ </div>
+ </div>
- <label>
- <input type="radio" name="minAge" value="12"
- <?php if ($input['minAge'] == 12) { echo 'checked=""';} ?>
- />
- 12+
- </label>
+ </form>
- <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">
- <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>
<head>
<meta charset="utf-8"/>
<title>GameStick activation: Success</title>
- <link rel="stylesheet" href="css/css.css"/>
+ <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 id="logo_small"><a href="#">Game Stick</a></h1>
- <div id="gs">
- <div id="page_1" class="page">
+ <img id="gslogo" src="img/logo_2.png" alt="GameStick" width="176" height="24"/>
- <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>
- </div>
+ <div class="content">
+ <h1>Success</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>PlayJam GameStick activation complete</p>
+
+ <p>
+ Your profile has been updated.
+ You can continue with your GameStick setup.
+ </p>
</div>
</body>
</html>
'founderFlag' => (bool) ($_POST['founderFlag'] ?? false),
'founderName' => $_POST['founderName'] ?? null,
'minAge' => $_POST['minAge'] ?? 3,
- 'avatar' => $_POST['avatar'] ?? 'avatar_1',
+ 'avatar' => $_POST['avatar'] ?? 'rocket',
'submit' => $_POST['submit'] ?? false,
];
-$avatars = [];
-foreach (glob(__DIR__ . '/../www/resources/avatars/*.small.jpg') as $smallImage) {
+$avatars = [
+ $input['avatar'] => null,//have active one first, especially for mobile
+];
+$avatarFiles = glob(__DIR__ . '/../www/resources/avatars/*.small.{jpg,png}', GLOB_BRACE);
+foreach ($avatarFiles as $smallImage) {
$key = basename($smallImage, '.small.jpg');
$avatars[$key] = '/resources/avatars/' . basename($smallImage);
}
+$avatars = array_filter($avatars);
//input validation
$errors = [];
--- /dev/null
+* {
+ box-sizing: border-box;
+}
+html {
+ min-height: 100%;
+}
+
+body {
+ font-family: Arial, sans-serif;
+ font-size: 18px;
+ color: #fff;
+
+ max-width: 960px;
+
+ margin-left: auto;
+ margin-right: auto;
+
+ /*background: url(/img/web_background_24.png) no-repeat rgb(146,155,155);*/
+ /* dark: #394443
+ light: #7c8c8a
+ pink: #f652c3
+ progress:
+ dark: #202222
+ light: #dadada
+ */
+ /*background-size: 100%;*/
+ background: radial-gradient(at 50% 100%, #7c8c8a, #394443);
+}
+div.content {
+ max-width: 763px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+form.profile div.twocol {
+ display: flex;
+}
+form.profile div.twocol > div {
+ flex-basis: 0;
+ flex-grow: 1;
+}
+form.profile div.twocol > div.left {
+ min-width: 380px;
+}
+form.profile div.twocol > div.right {
+ padding-left: 1em;
+}
+
+h1 {
+ font-weight: normal;
+ font-size: 24px;
+}
+.error {
+ color: #F77;
+}
+
+#gslogo {
+ max-width: 100%;
+ height: auto;
+ margin-bottom: 2rem;
+}
+
+ul#progressbar {
+ display: flex;
+ padding-left: 0px;
+}
+ul#progressbar li {
+ font-size: 15px;
+ background-color: #1e2020;
+ color: #dadada;
+ font-weight: bold;
+ text-transform: uppercase;
+ white-space: pre-line;
+
+ display: block;
+ flex-basis: 0;
+ flex-grow: 1;
+
+ text-align: center;
+ padding-top: 16px;
+
+ padding-bottom: 16px;
+
+}
+ul#progressbar li + li {
+ border-left: 34px solid;
+ border-image: url('../img/progress-i2i.svg');
+ border-image-slice: 0 0 0 100%;
+}
+ul#progressbar li.active {
+ background-color: #dadada;
+ color: #4b504f;
+ border-left: 30px solid;
+ border-image: url('../img/progress-i2a.svg');
+ border-image-slice: 0 0 0 100%;
+}
+
+p, form {
+ text-align: center;
+}
+form.profile, form.profile p {
+ text-align: left;
+}
+
+form.code {
+ background-color: #f652c3;
+ padding: 0.5rem;
+ width: 20rem;
+ margin-left: auto;
+ margin-right: auto;
+ display: flex;
+ column-gap: 0.5rem;
+}
+form.code .code-input {
+ width: 100%;
+ padding: 0.5em;
+ border: 0.2em solid #7d9387;
+}
+form.code button {
+ background-color: #4b504f;
+ color: white;
+ border: 0.2em solid #7d9387;
+ border: none;
+}
+
+form.profile .twocol p:first-child {
+ margin-top: 0;
+}
+form.profile .profile-row {
+ display: flex;
+ margin-bottom: 0.2rem;
+}
+form.profile .profile-row > * {
+ width: 50%;
+}
+
+form.profile .profile-row.minage > label {
+ width: 70%;
+}
+form.profile .profile-row.minage > div {
+ width: 30%;
+ text-align: right;
+}
+form.profile .profile-row.minage > div label {
+ display: block;
+ margin-bottom: 0.5em;
+ white-space: nowrap;
+}
+form.profile .profile-row.minage .tag {
+ display: inline-block;
+ width: 2.5em;
+ padding: 0.1em;
+ border: 1px solid white;
+ border-radius: 0.5em;
+ text-align: center;
+ font-weight: bold;
+}
+.tag.teal {
+ background-color: #00b29e;
+ background: linear-gradient(165deg, white, #00b29e 50%, #00b29e);
+}
+.tag.orange {
+ background-color: #dd780e;
+ background: linear-gradient(165deg, white, #dd780e 50%, #dd780e);
+}
+.tag.red {
+ background-color: #fc2841;
+ background: linear-gradient(165deg, white, #fc2841 50%, #fc2841);
+}
+
+form.profile input[type="radio"] {
+ accent-color: #f652c3;
+ width: 1.2em;
+ height: 1.2em;
+}
+form.profile input[type="text"] {
+ border: none;
+}
+form.profile input:focus, form.profile button:focus {
+ outline: 2px solid #f652c3;
+}
+
+form.profile button {
+ margin-top: 2rem;
+ background-color: #4b504f;
+ color: white;
+ padding: 0.5em 2em;
+ font-weight: bold;
+ width: 100%;
+ border: none;
+}
+
+form.profile .avatarlabel {
+ display: none;
+}
+form.profile .avatars {
+ display: flex;
+ flex-wrap: wrap;
+ max-height: 400px;
+ overflow: scroll;
+ scrollbar-color: #f652c3 transparent;
+}
+
+form.profile .avatar {
+ display: block;
+}
+form.profile .avatar input {
+ position: fixed;
+ opacity: 0;
+ top: 0;
+ left: 0;
+ width: 0;
+ height: 0;
+}
+form.profile .avatar label {
+ display: inline-block;
+}
+form.profile .avatar input + label {
+ border: 4px solid transparent;
+}
+form.profile .avatar input:checked + label {
+ border: 4px solid #f652c3;
+}
+form.profile .avatar input + label img {
+ filter: grayscale(100%);
+}
+form.profile .avatar input + label img:hover {
+ filter: none;
+}
+form.profile .avatar input:checked + label img {
+ filter: none;
+}
+
+form.profile .intro-mobile {
+ display: none;
+}
+
+
+@media (max-width: 820px) {
+ body {
+ margin-left: 5px;
+ margin-right: 5px;
+ }
+ form.code {
+ width: 100%;
+ flex-direction: column;
+ }
+ ul#progressbar {
+ display: none;
+ }
+
+ form.profile .intro-mobile {
+ display: block;
+ }
+ form.profile .intro-desktop {
+ display: none;
+ }
+
+ form.profile .avatarlabel {
+ display: block;
+ }
+ form.profile .avatars {
+ flex-wrap: nowrap;
+ margin-bottom: 1rem;
+ }
+ form.profile .avatar {
+ /* make space for scrollbar */
+ margin-bottom: 0.5rem;
+ }
+ form.profile div.twocol {
+ display: block;
+ }
+ form.profile div.twocol > div.right {
+ padding-left: 0;
+ }
+ form.profile .profile-row.minage > div label {
+ margin-right: 1rem;
+ }
+ form button {
+ padding: 1rem;
+ }
+}
+
+@media (min-height: 500px) {
+ p, form.code {
+ margin-top: 3rem;
+ }
+ p.error + form.code {
+ margin-top: 1rem;
+ }
+ form.profile p.error {
+ margin-top: 1rem;
+ margin-bottom: 0;
+ }
+ form.profile ul.error {
+ margin-top: 0;
+ }
+ p.intro-mobile {
+ margin-top: 1rem;
+ }
+}
+++ /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;
-}
-
-.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 {
- width: 90%;
- height: 36px;
-
- padding: 4px 4px;
- margin-top: 10%;
- margin: 9px;
- font-size: 34px;
- border: 2px solid #787e7d;
-}
-.page h2 {
- margin-bottom: 5px;
- font-size: 24px;
- font-weight: normal;
-}
--- /dev/null
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ width="40" height="80" viewBox="0 0 40 80">
+ <rect width="100%" height="100%" fill="#7c8c8a" />
+ <g>
+ <path
+ style="fill:#1e2020;fill-opacity:1;"
+ d="M 0,0 40,40 0,80 Z"/>
+ <path
+ style="fill:#dadada;fill-opacity:1;"
+ d="M 0,0 H 40 l 0,40 z"/>
+ <path
+ style="fill:#dadada;fill-opacity:1;"
+ d="M 0,80 H 40 l 0,-40 z"/>
+ </g>
+</svg>
--- /dev/null
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ width="44" height="80" viewBox="0 0 44 80">
+ <rect width="100%" height="100%" fill="#7c8c8a" />
+ <g>
+ <path
+ style="fill:#1e2020;fill-opacity:1"
+ d="M 0,0 40,40 0,80 Z"/>
+ <path
+ style="fill:#1e2020;fill-opacity:1"
+ d="M 4,0 H 44 l 0,40 z"/>
+ <path
+ style="fill:#1e2020;fill-opacity:1"
+ d="M 4,80 H 44 l 0,-40 z"/>
+ </g>
+</svg>
git.cweiske.de / gamestick-pjgsapi.git / commitdiff
