redesign user frontend

src/Mine/SeekerBundle/Resources/public/css/style.homepage.css

@@ -1,9 +1,3 @@
-/*@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Ravi+Prakash&subset=latin-ext');*/
-/*
-font-family: 'Ravi Prakash', cursive;
-font-family: 'Open Sans Condensed', sans-serif;
-*/
-
 * {
     outline: none;
     padding: 0;
@@ -11,59 +5,86 @@ font-family: 'Open Sans Condensed', sans-serif;
 }
 
 html, body {
-    background: #2C3E50;
+    background: #ffffff;
     display: block;
     width: 100%;
     height: 100%;
 }
 
 header {
-    background: rgba(255, 255, 255, 0.7) url('/bundles/mineseeker/images/homepage/header.jpg') no-repeat;
-    background-size: cover;
+    background: #d1e8ff;
+    width: 100%;
+    height: 900px;
+    color: #ffffff;
+}
+
+header section {
     position: relative;
     display: flex;
-    align-items: center;
-    justify-content: center;
+    align-items: flex-start;
+    justify-content: flex-start;
     flex-direction: column;
+    max-width: 1300px;
     width: 100%;
     height: 100%;
-    color: #ffffff;
-    overflow: hidden;
+    padding: 20px;
+    margin: 0 auto;
 }
 
-header h1 {
-    display: block;
-    font: normal 72px 'Ravi Prakash', cursive;
-    text-align: center;
-    line-height: 20px;
-    color: #ffa800;
+header section div.logo img {
+    width: 350px;
+    margin: 50px 0;
+}
 
+header section > img {
+    position: absolute;
+    width: 1300px;
+    height: 1300px;
+    right: -50%;
+    bottom: -30%;
+
+    z-index: 1;
+}
+
+header section > div {
     z-index: 2;
 }
 
-header h3 {
-    display: block;
-    font: normal 32px 'Open Sans Condensed', sans-serif;
-    text-align: center;
-    color: #ffcd02;
-
-    z-index: 2;
+header section h1 {
+    font: bold 40px 'Rajdhani', sans-serif;
+    color: #434242;
+    margin-bottom: 100px;
 }
 
-header > a {
-    background: #e8e8e8;
+header section h2 {
+    font: normal 32px 'Rajdhani', sans-serif;
+    color: #434242;
+}
+
+header section h3 {
     display: block;
-    font: bold 22px 'Open Sans Condensed', sans-serif;
+    font: bold 16px 'Rajdhani', sans-serif;
+    color: #434242;
+    margin-top: 10px;
+}
+
+header section h3 img {
+    width: 16px;
+}
+
+header section div > a {
+    background: #83aed9;
+    display: table;
+    font: bold 32px 'Rajdhani', sans-serif;
     text-transform: uppercase;
     text-decoration: none;
-    color: #2C3E50;
-    padding: 10px 70px;
+    border: 1px solid #658fb8;
+    color: #FFFFFF;
+    padding: 25px 100px;
     margin-top: 20px;
 
-    z-index: 2;
-
-    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.75);
-    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.75);
+    -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
     -webkit-border-radius: 3px;
     border-radius: 3px;
     -webkit-transition: all 250ms ease-in-out;
@@ -72,36 +93,56 @@ header > a {
     transition: all 250ms ease-in-out;
 }
 
-header > a:hover {
-    background: #ffffff;
+header section div > a:hover {
+    background: #86b5e1;
 
-    -webkit-box-shadow: 0 7px 10px rgba(0, 0, 0, 0.75);
-    box-shadow: 0 7px 10px rgba(0, 0, 0, 0.75);
+    -webkit-box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
     -webkit-transition: all 250ms ease-in-out;
     -moz-transition: all 250ms ease-in-out;
     -o-transition: all 250ms ease-in-out;
     transition: all 250ms ease-in-out;
 }
 
-header > img {
-    position: absolute;
-    width: 50%;
-    max-width: 1000px;
-    bottom: -25%;
+@media screen and (max-width: 1100px) {
+    header section {
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    }
 
-    z-index: 1;
-}
+    header section div > a {
+        margin: 0 auto;
+    }
 
-@media screen and (max-width: 1500px) {
-    header > img {
-        width: 60%;
-        bottom: -40%;
+    header section h1 {
+        margin-bottom: 20px;
+    }
+
+    header section div.logo img {
+        margin-bottom: 0;
+    }
+
+    header section > img {
+        display: none;
     }
 }
 
-@media screen and (max-width: 1500px) {
-    header > img {
-        width: 70%;
-        bottom: -20%;
+@media screen and (max-width: 500px) {
+    header {
+        min-height: 100%;
+        height: auto;
     }
-}
+
+    header section {
+        width: auto;
+    }
+
+    header section div.logo img {
+        width: 100%;
+    }
+
+    header section div > a {
+        display: block;
+    }
+}

src/Mine/SeekerBundle/Resources/public/js/mine-seeker/app.js

@@ -289,13 +289,14 @@ class MineSeeker extends React.Component {
             });
     }
 
-    /** After rendering */
-    componentDidMount() {
+    connectWithWebsocket() {
         /** Create Websocket w/ Bahnhof.js */
         let websocket = WS.connect(
             this.state.env === 'dev'
+                // ? "ws://mine.dev:6450"
+                // : "ws://www.mineseeker.ninja:6450"
                 ? "ws://mine.dev:6450"
-                : (this.state.ssl === 'true' ? "wss" : "ws") + "://www.mineseeker.ninja:6450"
+                : (this.state.ssl === 'true' ? "wss" : "ws") + "://system7.ddns.net:443/"
         );
 
         /**
@@ -346,6 +347,11 @@ class MineSeeker extends React.Component {
         });
     }
 
+    /** After rendering */
+    componentDidMount() {
+
+    }
+
     /**
      * Cache the steps unless reconnection
      *