redefine app structure

site/client/app/modules/landing/components/landing.js

@@ -0,0 +1,48 @@
+module.exports = {
+
+  template: require('./../views/landing.html'),
+
+  inherit: true,
+
+  data: function() {
+    return {
+      modal: false
+    }
+  },
+
+  components: {
+    login: require('./login')
+  },
+
+  ready: function() {
+    setTimeout(function() {
+      $('.container-form-landing').addClass('active')
+    }, 300);
+  },
+
+  methods: {
+    asGuest: function() {
+      // set localstorage for guest
+      $('.icon-guest-load').show();
+
+      setTimeout(function() {
+        window.location.href = './lobby';
+      }, 500);
+    },
+
+    openLogin: function() {
+      this.modal = true;
+
+      setTimeout(function() {
+        $('.login-username').focus();
+      }, 300);
+    },
+
+    closeLogin: function(e) {
+      if(e.target.className == 'modal active') {
+        this.modal = false;
+      }
+    }
+  }
+
+};

site/client/app/modules/landing/components/login.js

@@ -0,0 +1,11 @@
+module.exports = {
+
+  template: require('./../views/login.html'),
+
+  inherit: true,
+
+  methods: {
+
+  }
+
+};

site/client/app/modules/landing/views/landing.html

@@ -0,0 +1,31 @@
+<login></login>
+
+<section class="container-landing">
+  <div class="wrap-landing">
+    <img src="assets/img/logo-big.png" width="243" height="85" alt="Gwent" class="logo-big">
+
+    <p class="teaser-landing">
+      Play The Witcher Gwent Card-Game online!<br>
+      Play with randomly generated teams, or build your own!
+    </p>
+
+    <div class="container-form-landing">
+
+      <form class="form-session">
+        <input type="text" placeholder="Username" class="field-session" autofocus>
+        <input type="password" placeholder="Password" class="field-session">
+
+        <div class="wrap-btn-action btn-register-action">
+          <input type="submit" value="Register" class="btn-action">
+          <i class="icon-action-load"></i>
+        </div>
+      </form>
+
+      <span class="choose">or</span>
+
+      <a class="btn-second btn-guest" v-on="click: asGuest">Play as guest <i class="icon-guest-load"></i></a>
+      <a class="btn-none btn-login" v-on="click: openLogin">Login</a>
+
+    </div>
+  </div>
+</section>

site/client/app/modules/landing/views/login.html

@@ -0,0 +1,19 @@
+<div class="modal" v-class="active: modal" v-on="click: closeLogin">
+  <div class="modal-banner">
+    <div class="wrap-modal-login">
+
+      <form class="form-session">
+        <input type="text" placeholder="Username" class="field-session login-username">
+        <input type="password" placeholder="Password" class="field-session login-password">
+
+        <div class="wrap-btn-action btn-register-action">
+          <input type="submit" value="Login" class="btn-action">
+          <i class="icon-action-load"></i>
+        </div>
+
+        <span class="btn-sub">Forgot Password?</span>
+      </form>
+
+    </div>
+  </div>
+</div>