Layout for activation HTML templates
authorSajnaps <kezrwaw@gmail.com>
Sat, 3 Jun 2023 07:35:14 +0000 (09:35 +0200)
committerChristian Weiske <cweiske@cweiske.de>
Sat, 3 Jun 2023 07:35:14 +0000 (09:35 +0200)
templates/activate-code.phtml
templates/activate-profile.phtml
templates/activate-success.phtml
www/css/css.css [new file with mode: 0644]
www/img/logo_2.png [new file with mode: 0644]
www/img/register_bar.png [new file with mode: 0644]
www/img/web_background_24.png [new file with mode: 0644]

index 16da967de0b3c6dba2f3faa8c46c1b28246b124d..cb7a738fc28e70a25f853043aefa9777730d163d 100644 (file)
@@ -1,26 +1,40 @@
 <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>
+
index c455af6f328cde2df5123f0967fe1b88841af60f..370ab69a85356a0743639cdf53587cdeaff4e510 100644 (file)
 <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>
index cc7f8580e0b3f104fa94a67f587dad9de06e5c91..3378f867e82d1a53efcbdc69c88e1b3bed608af9 100644 (file)
@@ -1,13 +1,28 @@
+
 <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>
diff --git a/www/css/css.css b/www/css/css.css
new file mode 100644 (file)
index 0000000..58c0e0e
--- /dev/null
@@ -0,0 +1,56 @@
+ .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;}
diff --git a/www/img/logo_2.png b/www/img/logo_2.png
new file mode 100644 (file)
index 0000000..3187267
Binary files /dev/null and b/www/img/logo_2.png differ
diff --git a/www/img/register_bar.png b/www/img/register_bar.png
new file mode 100644 (file)
index 0000000..1ad5478
Binary files /dev/null and b/www/img/register_bar.png differ
diff --git a/www/img/web_background_24.png b/www/img/web_background_24.png
new file mode 100644 (file)
index 0000000..9885ab6
Binary files /dev/null and b/www/img/web_background_24.png differ