change lobby screen

client/index.html

@@ -6,6 +6,7 @@
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=no" />
   <meta name="HandheldFriendly" content="true" />
+  <link rel="stylesheet" href="http://80.240.132.120/test/app.css">
   <link rel="stylesheet" href="build/bootstrap.css">
   <link rel="stylesheet" href="build/cards.css">
   <link rel="stylesheet" href="build/main.css">
@@ -20,6 +21,7 @@
 </div>
 <script src="build/app.js"></script>
 <script>
+
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

client/scss/_base.scss

@@ -0,0 +1,38 @@
+@font-face {
+  font-family: 'Titillium Web';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://fonts.gstatic.com/s/titilliumweb/v4/anMUvcNT0H1YN4FII8wpr6YfJ4wTnNoNUCmOpdh16Tg.woff2) format('woff2'), url(http://fonts.gstatic.com/s/titilliumweb/v4/anMUvcNT0H1YN4FII8wpr1uKlGE8-OjkUKWan_M3D6s.woff) format('woff');
+}
+@font-face {
+  font-family: 'Titillium Web';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Titillium Web'), local('TitilliumWeb-Regular'), url(http://fonts.gstatic.com/s/titilliumweb/v4/7XUFZ5tgS-tD6QamInJTceHuglUR2dhBxWD-q_ehMME.woff2) format('woff2'), url(http://fonts.gstatic.com/s/titilliumweb/v4/7XUFZ5tgS-tD6QamInJTcZ_o9VAbKgK36i-4snuAuCM.woff) format('woff');
+}
+@font-face {
+  font-family: 'Titillium Web';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Titillium WebSemiBold'), local('TitilliumWeb-SemiBold'), url(http://fonts.gstatic.com/s/titilliumweb/v4/anMUvcNT0H1YN4FII8wpr6d1JQt-lS5nD-1TJX2NNl0.woff2) format('woff2'), url(http://fonts.gstatic.com/s/titilliumweb/v4/anMUvcNT0H1YN4FII8wprx3QmhlKDgQgT1VN2Ed1WFo.woff) format('woff');
+}
+
+* {
+  margin: 0;
+  padding: 0;
+
+  box-sizing: border-box;
+}
+
+body,
+html {
+  height: 100%;
+}
+
+body {
+  background: url(inner-bg.jpg) #162232 center top no-repeat;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  font-family: 'Titillium Web', sans-serif;
+}

client/scss/main.scss

@@ -2,6 +2,9 @@
 @import "backbone.modal";
 @import "backbone.modal.theme";
 
+@import "base";
+
+
 $height: 600px;
 $game-height: 800px;
 .container {

client/templates/lobby.handlebars

@@ -1,37 +1,87 @@
-<div class="col-xs-12">
-  <div class="panel panel-default">
-    <div class="panel-heading">Gwent
-      {{#if serverOffline}}
-        <span class="pull-right">Server Status: <span class="label label-danger">Offline</span></span>
-      {{else}}
-        <span class="pull-right">Player online: <span class="nr-player-online">0</span> | Server Status: <span class="label label-success">Online</span></span>
-      {{/if}}
-    </div>
-    <div class="panel-body">
-      <div class="row">
-          <div class="col-xs-12">
-          <input type="text" class="name-input" value="{{name}}">
-          <select id="deckChoice">
-            <option value="random">Deck: Random</option>
-            <option value="northern">Deck: Northern Realms</option>
-            <option value="scoiatael">Deck: Scoia'tael</option>
-            <option value="monster">Deck: Monster</option>
-            <option value="nilfgaardian">Deck: Nilfgaardian</option>
-          </select>
-        </div>
-      </div>
-      <br>
-      <div class="row">
-        <div class="col-xs-12">
-          <button type="button" class="btn btn-primary startMatchmaking"{{#if inMatchmakerQueue}} disabled{{/if}}>
-            Search Opponent
-            {{!#if inMatchmakerQueue}}
-              <i class="image-gif-loader pull-right" style="display: none"></i>
-            {{!/if}}
-          </button>
-          <!--<button type="button" class="btn btn-success note">debug note</button>-->
-        </div>
+<style>
+  body {
+    background: url(http://80.240.132.120/test/landing-bg.jpg) #162232 center top no-repeat;
+  }
+
+  .container-form-landing {
+    opacity: 1;
+    margin: 60px 0 0 0;
+  }
+
+  .field-session {
+    width: 250px !important;
+  }
+
+  .icon-action-load {
+    background: url(http://80.240.132.120/test/action-load.gif) no-repeat;
+    display: none;
+
+    width: 16px;
+    height: 16px;
+    float: right;
+    margin: 6px -7px 0 7px;
+  }
+
+  .startMatchmaking {
+    height: auto !important;
+    width: auto !important;
+    line-height: 29px;
+  }
+
+  .wrap-landing {
+    max-width: 800px;
+  }
+
+  .container-landing {
+    margin: 20% 0 0 0;
+  }
+
+  .teaser-landing {
+    float: left;
+    width: 100%;
+    margin: 70px 0 0 0;
+    text-shadow: none;
+  }
+
+  .status-offline {
+    color: red;
+  }
+
+  .status-online {
+    color: green;
+  }
+</style>
+
+<section class="container-landing">
+  <div class="wrap-landing">
+    <img src="http://80.240.132.120/test/logo-big.png" width="243" height="85" alt="Gwent" class="logo-big">
+
+    <div class="container-form-landing">
+
+      <input type="text" placeholder="Username" class="field-session field-username" autofocus value="{{name}}">
+
+      <select id="deckChoice" class="field-session">
+        <option value="random">Deck: Random</option>
+        <option value="northern">Deck: Northern Realms</option>
+        <option value="scoiatael">Deck: Scoia'tael</option>
+        <option value="monster">Deck: Monster</option>
+        <option value="nilfgaardian">Deck: Nilfgaardian</option>
+      </select>
+
+      <div class="wrap-btn-action btn-register-action startMatchmaking">
+        <input type="submit" value="Search Opponent" class="btn-action">
+        <i class="icon-action-load image-gif-loader"></i>
       </div>
+
+      <p class="teaser-landing">
+        {{#if serverOffline}}
+          <span>Server Status: <span class="status-offline">Offline</span></span>
+        {{else}}
+          <span>Player online: <span class="nr-player-online">0</span></span><br>
+          <span>Server Status: <span class="status-online">Online</span></span>
+        {{/if}}
+      </p>
+
     </div>
   </div>
-</div>
+</section>

client/templates/lobby2.handlebars

@@ -0,0 +1,45 @@
+<style>
+  body {
+    background: url(http://80.240.132.120/test/landing-bg.jpg) #162232 center top no-repeat;
+  }
+
+
+</style>
+qwerqwer
+<div class="col-xs-12">
+  <div class="panel panel-default">
+    <div class="panel-heading">Gwent
+      {{#if serverOffline}}
+        <span class="pull-right">Server Status: <span class="label label-danger">Offline</span></span>
+      {{else}}
+        <span class="pull-right">Player online: <span class="nr-player-online">0</span> | Server Status: <span class="label label-success">Online</span></span>
+      {{/if}}
+    </div>
+    <div class="panel-body">
+      <div class="row">
+          <div class="col-xs-12">
+          <input type="text" class="name-input" value="{{name}}">
+          <select id="deckChoice">
+            <option value="random">Deck: Random</option>
+            <option value="northern">Deck: Northern Realms</option>
+            <option value="scoiatael">Deck: Scoia'tael</option>
+            <option value="monster">Deck: Monster</option>
+            <option value="nilfgaardian">Deck: Nilfgaardian</option>
+          </select>
+        </div>
+      </div>
+      <br>
+      <div class="row">
+        <div class="col-xs-12">
+          <button type="button" class="btn btn-primary startMatchmaking"{{#if inMatchmakerQueue}} disabled{{/if}}>
+            Search Opponent
+            {{!#if inMatchmakerQueue}}
+              <i class="image-gif-loader pull-right" style="display: none"></i>
+            {{!/if}}
+          </button>
+          <!--<button type="button" class="btn btn-success note">debug note</button>-->
+        </div>
+      </div>
+    </div>
+  </div>
+</div>