Create your own unique PlayTag and choose a profile image to personalise your account

PlayJam GameStick activation: Profile

+ +

Select + language
Setup + screen
Connect to + the internet
Update + software
Activate + GameStick

+ +

+ + +

+ Select your user name and profile image for this GameStick + to personalise your account. +

+ +

+ + Avatar +

+ $smallImagePath): ?> +

+ + /> + +

+ +

- Also you can sign yourself as a Founder. -

- - +

+ + +

+ +

+ Select your user name and profile image for this GameStick + to personalise your account. +

Errors: -

- PlayTag: - + PlayTag* +

+
+ +

-
- Founder name: - + Founder name: +

+
-

- Show games suitable for ages:
- - - /> - 3+ - +

+ Show games suitable for ages: +

+ + + /> + 3+ + + + + + /> + 7+ + + + + + /> + 12+ + + + + + /> + 17+ + +

- - - /> - 7+ - + +

- - - /> - 12+ - + - - - /> - 17+ - -

- Avatar image: -

-
-
- - - $smallImagePath): ?> -
-

- - Avatar <?= htmlspecialchars($key) ?>

-
- - /> - -

- -

diff --git a/templates/activate-success.phtml b/templates/activate-success.phtml index 57c9355..b5d4109 100644 --- a/templates/activate-success.phtml +++ b/templates/activate-success.phtml @@ -2,25 +2,35 @@ GameStick activation: Success - + + + -

Game Stick

PlayJam GameStick activation complete

-
-

- Your profile has been updated. - You can continue with your GameStick setup. -

Success

+ +

Select + language
Setup + screen
Connect to + the internet
Update + software
Activate + GameStick

+ +

PlayJam GameStick activation complete

+ +

+ Your profile has been updated. + You can continue with your GameStick setup. +

diff --git a/www/activate.php b/www/activate.php index 3bbcb1f..58325fe 100644 --- a/www/activate.php +++ b/www/activate.php @@ -33,15 +33,19 @@ $input = [ '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 = []; diff --git a/www/css/activate.css b/www/css/activate.css new file mode 100644 index 0000000..eb657c2 --- /dev/null +++ b/www/css/activate.css @@ -0,0 +1,301 @@ +* { + 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; + } +} diff --git a/www/css/css.css b/www/css/css.css deleted file mode 100644 index d162f74..0000000 --- a/www/css/css.css +++ /dev/null @@ -1,115 +0,0 @@ -.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; -} diff --git a/www/img/faviconnew.png b/www/img/faviconnew.png new file mode 100644 index 0000000000000000000000000000000000000000..6696b9f7857e07b73b86b7e97c9d768e95863993 GIT binary patch literal 6826 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 Y0HcG%BD@~ literal 0 HcmV?d00001 diff --git a/www/img/progress-i2a.svg b/www/img/progress-i2a.svg new file mode 100644 index 0000000..bc10b36 --- /dev/null +++ b/www/img/progress-i2a.svg @@ -0,0 +1,16 @@ + + diff --git a/www/img/progress-i2i.svg b/www/img/progress-i2i.svg new file mode 100644 index 0000000..fb5f254 --- /dev/null +++ b/www/img/progress-i2i.svg @@ -0,0 +1,16 @@ + + -- 2.30.2

Game Stick

Welcome

Welcome

Game Stick