From: Christian Weiske Date: Sun, 4 Jun 2023 05:06:37 +0000 (+0200) Subject: Make activation code entry mobile ready X-Git-Url: https://git.cweiske.de/gamestick-pjgsapi.git/commitdiff_plain/f741e9333d450f066a876cd3dc4ca3d06b25d841 Make activation code entry mobile ready --- diff --git a/templates/activate-code.phtml b/templates/activate-code.phtml index eb435c5..374e8dc 100644 --- a/templates/activate-code.phtml +++ b/templates/activate-code.phtml @@ -2,35 +2,43 @@ GameStick activation: Code - + + + - -

Game Stick

- -

Welcome

- -

Almost there, just few more steps and you will have activated your GameStick.

Please enter the code displayed on your TV screen below.

- - -

+ +

Welcome

+ +

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

+ +

Almost there, just a few more steps and you will have activated your GameStick.

Please enter the code displayed on your TV screen below.

+ + +

diff --git a/templates/activate-profile.phtml b/templates/activate-profile.phtml index ad2620a..00f9551 100644 --- a/templates/activate-profile.phtml +++ b/templates/activate-profile.phtml @@ -2,39 +2,93 @@ GameStick activation: Profile - + + + -

Game Stick

- -

PlayJam GameStick activation: Profile

- -

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 0000000..6696b9f Binary files /dev/null and b/www/img/faviconnew.png differ 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 @@ + +