improve mobile version in EN file

Bloomca · Oct 29, 2018 · 0b6076b · 0b6076b
1 parent ee79773
commit 0b6076b
Show file tree

Hide file tree

Showing 5 changed files with 182 additions and 3 deletions.
diff --git a/apple_store.svg b/apple_store.svg
diff --git a/client.js b/client.js
@@ -2,6 +2,8 @@
 (function () {
   var screens = {
     start: 'start-app',
+    mobileStart: 'start-mobile-app',
+    mobileApplication: 'mobile-application',
     notification: 'notification',
     cookies: 'cookies',
     ageVerification: 'age-verification',
@@ -25,6 +27,16 @@
     }, 300);
   });
 
+  onClick('start-mobile-btn', function () {
+    hideScreen(screens.mobileStart);
+    showScreen(screens.mobileApplication);
+  });
+
+  onClick('mobile-application-btn', function () {
+    hideScreen(screens.mobileApplication);
+    showScreen(screens.notification);
+  });
+
   onClick('no-notifications-btn', chooseNotifications);
   onClick('yes-notifications-btn', chooseNotifications);
 

diff --git a/en.html b/en.html
@@ -24,20 +24,47 @@
   <meta name="twitter:image" content="https://2018.bloomca.me/twitter_summary_en.jpg">
 </head>
 <body>
+  <div id="start-mobile-app">
+    <h1 class="start-title">
+      Mobile Websites in 2018
+    </h1>
+    <button id="start-mobile-btn" class="btn">
+      Start
+    </button>
+    <div class="footer">
+      Original idea from telegram channel <a href="https://t.me/uxlive/6571" target="_blank">uxlive</a>.
+      <br />
+      Author – <a href="https://blog.bloomca.me/about" target="_blank">Seva Zaikov</a> (<a href="https://github.com/Bloomca/website-in-2018" target="_blank">source code</a>)
+      <br />
+    </div>
+  </div>
   <div id="start-app">
     <h1 class="start-title">
       Websites in 2018
     </h1>
     <button id="start-btn" class="btn">
       Start
     </button>
-    <div style="position: absolute; bottom: 50px; left: 0; right: 0; font-size: 120%; text-align: center; line-height: 1.5em;">
+    <div class="footer" style="font-size: 120%;">
       Original idea from telegram channel <a href="https://t.me/uxlive/6571" target="_blank">uxlive</a>.
       <br />
       Author – <a href="https://blog.bloomca.me/about" target="_blank">Seva Zaikov</a> (<a href="https://github.com/Bloomca/website-in-2018" target="_blank">source code</a>)
       <br />
     </div>
   </div>
+  <div id="mobile-application" style="display: none;">
+    <h1>
+      We have mobile applications:
+    </h1>
+    <div style="text-align: center;">
+      <img src="./apple_store.svg" class="mobile-badge" />
+      <img src="./google_play.png" class="mobile-badge" style="position: relative; top: 9px;" />
+    </div>
+
+    <div id="mobile-application-btn">
+      Continue with web
+    </div>
+  </div>
   <div id="loader" class="loader-container" style="display: none">
     <div class="loader-wrapper"><img class="loader" src="./spinner.gif" /></div>
   </div>
@@ -106,7 +133,7 @@ <h1>You Can't Visit This Website</h1>
     <p>
       According to the California Law §28, Hague Convention and Maritime Law, we can't show the content of this website to people who have not reached 18 years age.
     </p>
-    <div style="position: absolute; bottom: 50px; left: 0; right: 0; text-align: center; line-height: 1.5em;">
+    <div class="footer">
         Original idea from telegram channel <a href="https://t.me/uxlive/6571" target="_blank">uxlive</a>.
         <br />
         Author – <a href="https://blog.bloomca.me/about" target="_blank">Seva Zaikov</a> (<a href="https://github.com/Bloomca/website-in-2018" target="_blank">source code</a>)
@@ -223,7 +250,7 @@ <h1>
     <p>
       Maybe somebody will think why is it so and what can we do to avoid it in the future to improve web experience.
     </p>
-    <div style="position: absolute; bottom: 50px; left: 0; right: 0; text-align: center; line-height: 1.5em;">
+    <div class="footer">
         Original idea from telegram channel <a href="https://t.me/uxlive/6571" target="_blank">uxlive</a>.
         <br />
         Author – <a href="https://blog.bloomca.me/about" target="_blank">Seva Zaikov</a> (<a href="https://github.com/Bloomca/website-in-2018" target="_blank">source code</a>)

diff --git a/google_play.png b/google_play.png
diff --git a/style.css b/style.css
@@ -5,6 +5,12 @@ body {
   font-family: 'Lora', serif;
 }
 
+@media screen and (max-width: 760px) {
+  body {
+    padding-top: 50px;
+  }
+}
+
 h1, h2, h3, h4, h5, h6 {
   font-family: 'PT Sans Caption', sans;
 }
@@ -19,9 +25,51 @@ a {
   color: #bbb;
 }
 
+.footer {
+  position: absolute;
+  bottom: 50px;
+  left: 0;
+  right: 0;
+  text-align: center;
+  line-height: 1.5em;
+}
+
+@media screen and (max-width: 760px) {
+  .footer {
+    margin-top: 100px;
+    position: static;
+  }
+}
+
+@media screen and (min-width: 760px) {
+  #start-mobile-app {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 760px) {
+  #start-app {
+    display: none;
+  }
+}
+
+.mobile-badge {
+  max-width: 150px;
+}
+
+#mobile-application-btn {
+  text-decoration: underline;
+  cursor: pointer;
+  padding: 10px;
+  text-align: center;
+  font-size: 20px;
+  margin-top: 30px;
+}
+
 .start-title {
   margin-top: 75px;
   margin-bottom: 50px;
+  padding: 0 10px;
 }
 
 .loader-container {
@@ -54,6 +102,12 @@ a {
   text-align: center;
 }
 
+@media screen and (max-width: 760px) {
+  .container {
+    font-size: 110%;
+  }
+}
+
 .btn {
   background-color: #cdeaf5;
   border-radius: 5px;
@@ -82,6 +136,13 @@ a {
   width: 295px;
 }
 
+@media screen and (max-width: 760px) {
+  .notification {
+    max-width: calc(100vw - 36px);
+    left: 3px;
+  }
+}
+
 .notification-icon {
   width: 14px;
   height: 14px;
@@ -120,6 +181,14 @@ a {
   padding: 25px 50px;
 }
 
+@media screen and (max-width: 760px) {
+  .cookies {
+    position: relative;
+    top: -50px;
+    padding: 15px;
+  }
+}
+
 .cookies-title {
   text-align: left;
 }
@@ -151,6 +220,13 @@ a {
   min-width: 400px;
 }
 
+@media screen and (max-width: 760px) {
+  .choice {
+    min-width: initial;
+    max-width: calc(100% - 20px);
+  }
+}
+
 .choice-btn {
   border-radius: 5px;
   padding: 10px 30px;
@@ -199,6 +275,12 @@ a {
   font-size: 18px;
 }
 
+@media screen and (max-width: 760px) {
+  .subscription-text {
+    padding: 10px 5px;
+  }
+}
+
 .subscription-input {
   border: 1px solid #cdeaf5;
   border-radius: 5px;
@@ -209,6 +291,12 @@ a {
   margin-right: 5px;
 }
 
+@media screen and (max-width: 760px) {
+  .subscription-input {
+    margin-bottom: 10px;
+  }
+}
+
 .recommend {
   position: absolute;
   text-align: center;
@@ -225,6 +313,12 @@ a {
   justify-content: center;
 }
 
+@media screen and (max-width: 760px) {
+  .recommend {
+    display: none;
+  }
+}
+
 .recommend-circle {
   border: 1px solid #666;
   border-radius: 100%;