added qr code popup to Chinese site

src/cn.html

@@ -40,15 +40,21 @@
             <div class="slide__inner">
               <div class="header">
                 <div class="header__inner">
-
+                  <div class="qr-popup">
-                    <div class="nav">
+                    <h4>中文社区经理微信号</h4>
+                    <div class="qr-popup-wrap">
+                      <div class="qr-code qr-code--one"></div>
+                      <div class="qr-code qr-code--two"></div>
+                    </div>
+                  </div>
+                    <div class="nav nav--left">
                       <a class="nav__item" target="_blank" href="https://blog.status.im/">博客</a>
                       <a class="nav__item nav__item--features" href="#">特性</a>
                       <a class="nav__item nav__item--about" href="#">发现</a>
                       <a class="nav__item" target="_blank" href="https://wiki.status.im/">维基</a>
-                      <a class="nav__item" target="_blank" href="http://artifacts.status.im:8081/artifactory/nightlies-local/im.status.ethereum-07c247.apk">Download</a>
+                      <a class="nav__item nav__item--download" target="_blank" href="http://artifacts.status.im:8081/artifactory/nightlies-local/im.status.ethereum-07c247.apk">Download</a>
                     </div>
-                    <div class="nav nav--right">
+                    <div class="nav nav--hide">
                       <a class="nav__item" target="_blank" href="https://status.im/">English</a>
                       <a class="nav__item" target="_blank" href="https://www.facebook.com/ethstatus">Facebook</a>
                       <a class="nav__item" target="_blank" href="https://twitter.com/ethstatus">Twitter</a>
@@ -565,7 +571,6 @@
 
 
     <script src="js/app.js?v=44d5354"></script>
-    <script src="js/mc-validate.js"></script>
     <!-- Google Analytics -->
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

src/css/main.css

@@ -219,7 +219,7 @@ a {
   z-index: 900;
   top: 40px;
   left: 0;
-  opacity: .6;
+  opacity: 1;
   transition: opacity .2s ease; }
 
 .header-wrap--page .header {
@@ -229,6 +229,7 @@ a {
   opacity: 1; }
 
 .header__inner {
+  position: relative;
   width: 1080px;
   display: -ms-flexbox;
   display: flex;
@@ -238,6 +239,52 @@ a {
 .header-wrap--page .header__inner {
   width: 1012px; }
 
+.qr-popup {
+  left: 0;
+  top: 48px;
+  position: absolute;
+  background: #FFFFFF;
+  box-shadow: 0 3px 7px 0 rgba(175, 192, 202, 0.41);
+  border-radius: 10px;
+  padding: 8px;
+  opacity: 0;
+  transform: translate3d(0, 15px, 0) scale(1);
+  visibility: hidden;
+  transition: visibility .5s linear 0s, opacity .2s ease, transform .2s ease; }
+
+.qr-popup.qr-popup--shown {
+  transition-delay: 0s;
+  visibility: visible;
+  opacity: 1;
+  transform: translate3d(0, 0, 0) scale(1); }
+
+.qr-popup h4 {
+  font-size: 22px;
+  color: #49555F;
+  line-height: 35px;
+  margin: 8px 8px 0 8px;
+  font-weight: bold; }
+
+.qr-popup-wrap {
+  display: -ms-flexbox;
+  display: flex;
+  padding: 8px; }
+
+.qr-code {
+  width: 256px;
+  height: 256px;
+  border: 1px solid #E5EAEE;
+  border-radius: 8px;
+  background-size: 256px;
+  background-repeat: no-repeat;
+  margin: 8px; }
+
+.qr-code.qr-code--one {
+  background-image: url(../img/new-site/u32.jpg); }
+
+.qr-code.qr-code--two {
+  background-image: url(../img/new-site/u38.jpg); }
+
 .nav {
   display: -ms-flexbox;
   display: flex;
@@ -392,6 +439,8 @@ li.social-link a {
     width: 100%; } }
 
 @media (max-width: 960px) {
+  .qr-popup.qr-popup--shown {
+    display: none; }
   .header-wrap--page .nav {
     display: none; }
   .header-wrap--page a.logo,
@@ -414,7 +463,7 @@ li.social-link a {
   .nav {
     -ms-flex-align: center;
     align-items: center; }
-  .nav:first-child {
+  .nav--hide {
     display: none; } }
 
 @media (max-width: 767px) {
@@ -1462,7 +1511,7 @@ li.social-link a {
   background-image: linear-gradient(-180deg, #F2F5F8 0%, #FAFBFC 99%); }
 
 .crowdsale .tagline {
-  margin: 130px 0 60px 0; }
+  margin: 120px 0 30px 0; }
 
 .tagline .tagline__title {
   width: 440px;
@@ -1550,7 +1599,10 @@ li.social-link a {
   color: #6673CE; }
 
 .about {
-  padding: 50px 0 0 0; }
+  padding: 40px 0 0 0; }
+
+.about .tagline {
+  margin: 0 0 50px 0; }
 
 .app-buttons {
   display: -ms-flexbox;
@@ -1560,7 +1612,7 @@ li.social-link a {
 .app-button {
   display: block;
   text-align: left;
-  width: 210px;
+  width: 224px;
   height: 68px;
   padding: 16px;
   box-sizing: border-box;
@@ -1912,8 +1964,6 @@ input.email-form__input--email:disabled {
     top: 69px; } }
 
 @media (max-width: 767px) {
-  .about {
-    padding: 20px 0 0 0; }
   .app-buttons {
     -ms-flex-direction: column;
     flex-direction: column; }
@@ -2028,7 +2078,7 @@ input.email-form__input--email:disabled {
 .dapp__inner {
   background-color: white;
   height: 240px;
-  margin: 10px;
+  margin: 8px;
   box-shadow: 0px 4px 18px 0px rgba(189, 208, 223, 0.26);
   border-radius: 8px;
   padding: 20px;

src/index.html

@@ -40,13 +40,12 @@
             <div class="slide__inner">
               <div class="header">
                 <div class="header__inner">
-                    <div class="nav">
+                    <div class="nav nav--hide">
                       <a class="nav__item" target="_blank" href="https://blog.status.im/">Blog</a>
                       <a class="nav__item nav__item--features" href="#">Features</a>
                       <a class="nav__item nav__item--about" href="#">Discover</a>
                       <a class="nav__item" target="_blank" href="https://hackathon.status.im/">Hackathon</a>
                       <a class="nav__item" target="_blank" href="https://wiki.status.im/">Wiki</a>
-
                     </div>
                     <div class="nav nav--right">
                       <a class="nav__item" target="_blank" href="https://status.im/cn.html">中文</a>

src/js/app.js

@@ -9982,6 +9982,16 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
       event.preventDefault();
     });
 
+    if (document.querySelectorAll(".nav__item--download")[0]) {
+      document.querySelectorAll(".nav__item--download")[0].addEventListener('mouseover', function (event) {
+        showQRPopup();
+      });
+
+      document.querySelectorAll(".nav__item--download")[0].addEventListener('mouseout', function (event) {
+        hideQRPopup();
+      });
+    }
+
     cookieButton.addEventListener('click', function (event) {
       createCookie("status-cookie-policy", "accepted", 30);
       hideCookiePopup();
@@ -10024,6 +10034,14 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
       }]
     }).init();
 
+    function showQRPopup() {
+      addClassToElement(document.querySelectorAll(".qr-popup")[0], "qr-popup--shown");
+    }
+
+    function hideQRPopup() {
+      removeClassFromElement(document.querySelectorAll(".qr-popup")[0], "qr-popup--shown");
+    }
+
     function hideCookiePopup() {
       document.querySelectorAll(".cookie-popup__inner")[0].style.display = "none";
       return true;
@@ -10071,4 +10089,19 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
       }
       window.location.replace("https://status.im/" + lang + ".html");
     });
+
+    /*---Utils---*/
+    function addClassToElement(element, className) {
+      element.classList ? element.classList.add(className) : element.className += ' ' + className;
+      return element;
+    }
+
+    function removeClassFromElement(element, className) {
+      if (element.classList) {
+        element.classList.remove(className);
+      } else {
+        element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+      }
+      return element;
+    }
   }, { "./lib/ScrollOver.js": 17, "./lib/animatescroll.js": 18 }] }, {}, [19]);

src/js/main.js

@@ -31,6 +31,16 @@ document.querySelectorAll(".nav__item--about")[0].addEventListener('click', func
     event.preventDefault()
 })
 
+if(document.querySelectorAll(".nav__item--download")[0]) {
+  document.querySelectorAll(".nav__item--download")[0].addEventListener('mouseover', function(event){
+      showQRPopup()
+  })
+
+  document.querySelectorAll(".nav__item--download")[0].addEventListener('mouseout', function(event){
+      hideQRPopup()
+  })
+}
+
 cookieButton.addEventListener('click', function(event){
     createCookie("status-cookie-policy", "accepted", 30)
     hideCookiePopup()
@@ -81,6 +91,14 @@ new ScrollOver({
   ]
 }).init()
 
+function showQRPopup() {
+  addClassToElement(document.querySelectorAll(".qr-popup")[0], "qr-popup--shown")
+}
+
+function hideQRPopup() {
+  removeClassFromElement(document.querySelectorAll(".qr-popup")[0], "qr-popup--shown")
+}
+
 function hideCookiePopup() {
   document.querySelectorAll(".cookie-popup__inner")[0].style.display = "none"
   return true
@@ -129,3 +147,18 @@ languageSelect.addEventListener("change", function () {
     }
     window.location.replace("https://status.im/" + lang + ".html")
 })
+
+/*---Utils---*/
+function addClassToElement(element, className) {
+  (element.classList) ? element.classList.add(className) : element.className += ' ' + className
+  return element
+}
+
+function removeClassFromElement(element, className) {
+  if(element.classList) {
+    element.classList.remove(className)
+  } else {
+    element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ')
+  }
+  return element
+}

src/scss/header.scss

@@ -19,7 +19,7 @@
   z-index: 900;
   top: 40px;
   left: 0;
-  opacity: .6;
+  opacity: 1;
   transition: opacity .2s ease;
 }
 
@@ -32,6 +32,7 @@
 }
 
 .header__inner {
+  position: relative;
   width: 1080px;
   display: flex;
   justify-content: space-between;
@@ -41,6 +42,60 @@
   width: 1012px;
 }
 
+.qr-popup {
+  left: 0;
+  top: 48px;
+  position: absolute;
+
+  background: #FFFFFF;
+  box-shadow: 0 3px 7px 0 rgba(175,192,202,0.41);
+  border-radius: 10px;
+  padding: 8px;
+
+  opacity: 0;
+  transform: translate3d(0, 15px ,0) scale(1);
+  visibility: hidden;
+  transition: visibility .5s linear 0s, opacity .2s ease, transform .2s ease;
+}
+
+.qr-popup.qr-popup--shown {
+  transition-delay: 0s;
+  visibility: visible;
+  opacity: 1;
+  transform: translate3d(0, 0 ,0) scale(1);
+}
+
+.qr-popup h4 {
+  font-size: 22px;
+  color: #49555F;
+  line-height: 35px;
+  margin: 8px 8px 0 8px;
+  font-weight: bold;
+}
+
+.qr-popup-wrap {
+  display: flex;
+  padding: 8px;
+}
+
+.qr-code {
+  width: 256px;
+  height: 256px;
+  border: 1px solid #E5EAEE;
+  border-radius: 8px;
+  background-size: 256px;
+  background-repeat: no-repeat;
+  margin: 8px;
+}
+
+.qr-code.qr-code--one {
+    background-image: url(../img/new-site/u32.jpg);
+}
+
+.qr-code.qr-code--two {
+    background-image: url(../img/new-site/u38.jpg);
+}
+
 .nav {
   display: flex;
   align-items: flex-start;
@@ -218,6 +273,10 @@ li.social-link a {
 
 @media (max-width: 960px) {
 
+  .qr-popup.qr-popup--shown {
+    display: none;
+  }
+
   .header-wrap--page .nav {
     display: none;
   }
@@ -249,7 +308,7 @@ li.social-link a {
     align-items: center;
   }
 
-  .nav:first-child {
+  .nav--hide {
     display: none;
   }
 }

src/scss/slide--one.scss

@@ -23,7 +23,7 @@
 }
 
 .crowdsale .tagline {
-  margin: 130px 0 60px 0;
+  margin: 120px 0 30px 0;
 }
 
 .tagline .tagline__title {
@@ -129,9 +129,12 @@
 }
 
 .about {
-  padding: 50px 0 0 0
+  padding: 40px 0 0 0;
 }
 
+.about .tagline {
+  margin: 0 0 50px 0;
+}
 
 .app-buttons {
   display: flex;
@@ -141,7 +144,7 @@
 .app-button {
   display: block;
   text-align: left;
-  width: 210px;
+  width: 224px;
   height: 68px;
   padding: 16px;
   box-sizing: border-box;
@@ -621,10 +624,6 @@ input.email-form__input--email:disabled {
 
 @media (max-width: 767px) {
 
-  .about {
-    padding: 20px 0 0 0;
-  }
-
   .app-buttons {
     flex-direction: column;
   }

src/scss/slide--two.scss

@@ -70,7 +70,7 @@
 .dapp__inner {
   background-color: $colorWhite;
   height: 240px;
-  margin: 10px;
+  margin: 8px;
   box-shadow: 0px 4px 18px 0px rgba(189,208,223,0.26);
   border-radius: 8px;
   padding: 20px;