From 412dc96eb38addc47150823d432985df4e41dce9 Mon Sep 17 00:00:00 2001
From: alexcherman <sashacherman@gmail.com>
Date: Thu, 27 Jun 2019 10:52:35 +0200
Subject: [PATCH] helper page: add basic navigation

---
 _includes/layout/base/helper-intro.html     |  22 +-
 _includes/layout/base/helper-step-1.html    | 236 ++++++++++----------
 _includes/layout/base/helper-step-2.html    | 104 ++++-----
 _includes/layout/base/helper-step-3.html    |  10 +-
 _includes/layout/base/helper-step-4.html    | 168 +++++++-------
 _includes/layout/base/wallets-selector.html |   6 +-
 _sass/_helper.scss                          |   9 +
 _templates/helper.html                      |  42 +++-
 js/main.js                                  |   4 +
 9 files changed, 330 insertions(+), 271 deletions(-)

diff --git a/_includes/layout/base/helper-intro.html b/_includes/layout/base/helper-intro.html
index 9ea9e440..3c28c118 100644
--- a/_includes/layout/base/helper-intro.html
+++ b/_includes/layout/base/helper-intro.html
@@ -3,16 +3,18 @@ This file is licensed under the MIT License (MIT) available on
 http://opensource.org/licenses/MIT.
 {% endcomment %}
 
-<div class="helper-intro">
-  <div class="helper-intro-img-wrapper">
-    <img src="/img/helper/helper-illustration.svg" alt="people and wallet">
-  </div>
-  <div class="helper-intro-description">
-    <h2 class="section-title helper-intro-title">Let us help you to choose a Bitcoin wallet.</h2>
-    <p class="helper-intro-text">Please answer the following questions to find the best matching wallet. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
-    <div class="helper-navigation helper-intro-navigation">
-      <a class="skip-helper-btn" href="/{{ page.lang }}/{% translate choose-your-wallet url %}">Skip helper</a>
-      <button class="helper-next-btn btn-bright">Next</button>
+<div class="helper-step" data-step="intro">
+  <div class="helper-intro">
+    <div class="helper-intro-img-wrapper">
+      <img src="/img/helper/helper-illustration.svg" alt="people and wallet">
+    </div>
+    <div class="helper-intro-description">
+      <h2 class="section-title helper-intro-title">Let us help you to choose a Bitcoin wallet.</h2>
+      <p class="helper-intro-text">Please answer the following questions to find the best matching wallet. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
+      <div class="helper-navigation helper-intro-navigation">
+        <a class="skip-helper-btn" href="/{{ page.lang }}/{% translate choose-your-wallet url %}">Skip helper</a>
+        <button class="helper-next-btn btn-bright js-helper-next" data-selector="os">Next</button>
+      </div>
     </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/_includes/layout/base/helper-step-1.html b/_includes/layout/base/helper-step-1.html
index 04391e8a..a5641908 100644
--- a/_includes/layout/base/helper-step-1.html
+++ b/_includes/layout/base/helper-step-1.html
@@ -3,122 +3,124 @@ This file is licensed under the MIT License (MIT) available on
 http://opensource.org/licenses/MIT.
 {% endcomment %}
 
-<div class="helper-row">
-  <div class="helper-page-numbers">
-    <div class="helper-page-number active">1</div>
-    <div class="helper-page-number">2</div>
-    <div class="helper-page-number">3</div>
-    <div class="helper-page-number">4</div>
+<div class="helper-step" data-step="os">
+  <div class="helper-row">
+    <div class="helper-page-numbers">
+      <div class="helper-page-number active">1</div>
+      <div class="helper-page-number">2</div>
+      <div class="helper-page-number">3</div>
+      <div class="helper-page-number">4</div>
+    </div>
+  
+    <div class="helper-content">
+      <div class="helper-header">
+        <h2 class="helper-title">What type of wallet are you interested in?</h2>  
+        <p class="helper-subtitle">Please choose one</p>  
+      </div>
+  
+      <div class="helper-platforms">
+        <div class="helper-platforms-section">
+          <h3 class="helper-platforms-title">Mobile wallets</h3>
+          <div class="helper-platforms-row">
+            <label class="helper-radio-wrapper">
+              <input type="radio" class="platform-radio js-wallet-selector" name="platform" value="android"/>
+              <div class="platform-radio-custom helper-platforms-radio">
+                <img src="/img/os/wallet_menu_android.svg" alt="android" class="platform-radio-icon-inactive">
+                <img src="/img/os/wallet_menu_android_bright.svg" alt="android" class="platform-radio-icon-active">
+              </div>
+            </label>
+            <label class="helper-radio-wrapper">
+              <input type="radio" class="platform-radio js-wallet-selector" name="platform" value="ios"/>
+              <div class="platform-radio-custom helper-platforms-radio">
+                <img src="/img/os/wallet_menu_mac.svg" alt="ios" class="platform-radio-icon-inactive">
+                <img src="/img/os/wallet_menu_mac_bright.svg" alt="ios" class="platform-radio-icon-active">
+              </div>
+            </label>
+          </div>
+          <p class="bullet bullet-positive">Fast</p>
+          <p class="bullet bullet-positive">Safer than online wallets</p>
+          <p class="bullet bullet-positive">Use on the go</p>
+          <p class="bullet bullet-negative">Easy to lost</p>
+          <p class="bullet bullet-negative">Risk of mobile viruses</p>
+        </div>
+        <div class="helper-platforms-section">
+          <h3 class="helper-platforms-title">Desktop wallets</h3>
+          <div class="helper-platforms-row">
+            <label class="helper-radio-wrapper">
+              <input type="radio" class="platform-radio js-wallet-selector" name="platform" value="linux"/>
+              <div class="platform-radio-custom helper-platforms-radio">
+                <img src="/img/os/wallet_menu_linux.svg" alt="linux" class="platform-radio-icon-inactive">
+                <img src="/img/os/wallet_menu_linux_bright.svg" alt="linux" class="platform-radio-icon-active">
+              </div>
+            </label>
+            <label class="helper-radio-wrapper">
+              <input type="radio" class="platform-radio js-wallet-selector" name="platform" value="mac"/>
+              <div class="platform-radio-custom helper-platforms-radio">
+                <img src="/img/os/wallet_menu_mac.svg" alt="mac" class="platform-radio-icon-inactive">
+                <img src="/img/os/wallet_menu_mac_bright.svg" alt="mac" class="platform-radio-icon-active">
+              </div>
+            </label>
+            <label class="helper-radio-wrapper">
+              <input type="radio" class="platform-radio js-wallet-selector" name="platform" value="windows"/>
+              <div class="platform-radio-custom helper-platforms-radio">
+                <img src="/img/os/wallet_menu_windows.svg" alt="windows" class="platform-radio-icon-inactive">
+                <img src="/img/os/wallet_menu_windows_bright.svg" alt="windows" class="platform-radio-icon-active">
+              </div>
+            </label>
+          </div>
+          <p class="bullet bullet-positive">For those who trade cryptos form their computers</p>
+          <p class="bullet bullet-positive">Private keys are not stored on a third-party server</p>
+          <p class="bullet bullet-negative">Less secure wallet</p>
+          <p class="bullet bullet-negative">Lorem ipsum</p>
+        </div>
+      </div>
+      <div class="helper-platforms">
+        <div class="helper-platforms-section">
+          <h3 class="helper-platforms-title">Web wallets</h3>
+          <div class="helper-platforms-row">
+            <label class="helper-radio-wrapper">
+              <input type="radio" class="platform-radio js-wallet-selector" name="platform" value="web"/>
+              <div class="platform-radio-custom helper-platforms-radio">
+                <img src="/img/os/wallet_menu_web.svg" alt="web" class="platform-radio-icon-inactive">
+                <img src="/img/os/wallet_menu_web_bright.svg" alt="web" class="platform-radio-icon-active">
+              </div>
+            </label>
+          </div>
+          <p class="bullet bullet-positive">Enable fast transactions</p>
+          <p class="bullet bullet-positive">Manage multiple cryptocurrencies</p>
+          <p class="bullet bullet-positive">Use on the go and far active trading</p>
+          <p class="bullet bullet-negative">Risk of online security and viruses</p>
+          <p class="bullet bullet-negative">A third-party is a storing your crypto</p>
+        </div>
+        <div class="helper-platforms-section">
+          <h3 class="helper-platforms-title">Hardware wallets</h3>
+          <div class="helper-platforms-row">
+            <label class="helper-radio-wrapper">
+              <input type="radio" class="platform-radio js-wallet-selector" name="platform" value="hardware"/>
+              <div class="platform-radio-custom helper-platforms-radio">
+                <img src="/img/os/wallet_menu_hardware.svg" alt="hardware" class="platform-radio-icon-inactive">
+                <img src="/img/os/wallet_menu_hardware_bright.svg" alt="hardware" class="platform-radio-icon-active">
+              </div>
+            </label>
+          </div>
+          <p class="bullet bullet-positive">Safest crypto wallet options</p>
+          <p class="bullet bullet-positive">Great for storing large amounts of cryptocurrencies</p>
+          <p class="bullet bullet-negative">Most expensive type of wallet</p>
+          <p class="bullet bullet-negative">Not as user-friendly especially for beginners</p>
+        </div>
+      </div>
+      
+      <div class="helper-navigation">
+        <a class="skip-helper-btn" href="/{{ page.lang }}/{% translate choose-your-wallet url %}">Skip helper</a>
+        <button class="helper-next-btn btn-bright js-helper-next" data-selector="user">Next</button>
+      </div>
+    </div>
+  
+    <div class="discover">
+      <h2 class="discover-title">Discover more</h2>
+      <a href="#" class="discover-link">Read about each wallet type</a>
+      <a href="#" class="discover-link">Which wallet is the best?</a>
+    </div>
+  
   </div>
-
-  <div class="helper-content">
-    <div class="helper-header">
-      <h2 class="helper-title">What type of wallet are you interested in?</h2>  
-      <p class="helper-subtitle">Please choose one</p>  
-    </div>
-
-    <div class="helper-platforms">
-      <div class="helper-platforms-section">
-        <h3 class="helper-platforms-title">Mobile wallets</h3>
-        <div class="helper-platforms-row">
-          <label class="helper-radio-wrapper">
-            <input type="radio" class="platform-radio js-wallet-selector" name="platform" value="android"/>
-            <div class="platform-radio-custom helper-platforms-radio">
-              <img src="/img/os/wallet_menu_android.svg" alt="android" class="platform-radio-icon-inactive">
-              <img src="/img/os/wallet_menu_android_bright.svg" alt="android" class="platform-radio-icon-active">
-            </div>
-          </label>
-          <label class="helper-radio-wrapper">
-            <input type="radio" class="platform-radio js-wallet-selector" name="platform" value="ios"/>
-            <div class="platform-radio-custom helper-platforms-radio">
-              <img src="/img/os/wallet_menu_mac.svg" alt="ios" class="platform-radio-icon-inactive">
-              <img src="/img/os/wallet_menu_mac_bright.svg" alt="ios" class="platform-radio-icon-active">
-            </div>
-          </label>
-        </div>
-        <p class="bullet bullet-positive">Fast</p>
-        <p class="bullet bullet-positive">Safer than online wallets</p>
-        <p class="bullet bullet-positive">Use on the go</p>
-        <p class="bullet bullet-negative">Easy to lost</p>
-        <p class="bullet bullet-negative">Risk of mobile viruses</p>
-      </div>
-      <div class="helper-platforms-section">
-        <h3 class="helper-platforms-title">Desktop wallets</h3>
-        <div class="helper-platforms-row">
-          <label class="helper-radio-wrapper">
-            <input type="radio" class="platform-radio js-wallet-selector" name="platform" value="linux"/>
-            <div class="platform-radio-custom helper-platforms-radio">
-              <img src="/img/os/wallet_menu_linux.svg" alt="linux" class="platform-radio-icon-inactive">
-              <img src="/img/os/wallet_menu_linux_bright.svg" alt="linux" class="platform-radio-icon-active">
-            </div>
-          </label>
-          <label class="helper-radio-wrapper">
-            <input type="radio" class="platform-radio js-wallet-selector" name="platform" value="mac"/>
-            <div class="platform-radio-custom helper-platforms-radio">
-              <img src="/img/os/wallet_menu_mac.svg" alt="mac" class="platform-radio-icon-inactive">
-              <img src="/img/os/wallet_menu_mac_bright.svg" alt="mac" class="platform-radio-icon-active">
-            </div>
-          </label>
-          <label class="helper-radio-wrapper">
-            <input type="radio" class="platform-radio js-wallet-selector" name="platform" value="windows"/>
-            <div class="platform-radio-custom helper-platforms-radio">
-              <img src="/img/os/wallet_menu_windows.svg" alt="windows" class="platform-radio-icon-inactive">
-              <img src="/img/os/wallet_menu_windows_bright.svg" alt="windows" class="platform-radio-icon-active">
-            </div>
-          </label>
-        </div>
-        <p class="bullet bullet-positive">For those who trade cryptos form their computers</p>
-        <p class="bullet bullet-positive">Private keys are not stored on a third-party server</p>
-        <p class="bullet bullet-negative">Less secure wallet</p>
-        <p class="bullet bullet-negative">Lorem ipsum</p>
-      </div>
-    </div>
-    <div class="helper-platforms">
-      <div class="helper-platforms-section">
-        <h3 class="helper-platforms-title">Web wallets</h3>
-        <div class="helper-platforms-row">
-          <label class="helper-radio-wrapper">
-            <input type="radio" class="platform-radio js-wallet-selector" name="platform" value="web"/>
-            <div class="platform-radio-custom helper-platforms-radio">
-              <img src="/img/os/wallet_menu_web.svg" alt="web" class="platform-radio-icon-inactive">
-              <img src="/img/os/wallet_menu_web_bright.svg" alt="web" class="platform-radio-icon-active">
-            </div>
-          </label>
-        </div>
-        <p class="bullet bullet-positive">Enable fast transactions</p>
-        <p class="bullet bullet-positive">Manage multiple cryptocurrencies</p>
-        <p class="bullet bullet-positive">Use on the go and far active trading</p>
-        <p class="bullet bullet-negative">Risk of online security and viruses</p>
-        <p class="bullet bullet-negative">A third-party is a storing your crypto</p>
-      </div>
-      <div class="helper-platforms-section">
-        <h3 class="helper-platforms-title">Hardware wallets</h3>
-        <div class="helper-platforms-row">
-          <label class="helper-radio-wrapper">
-            <input type="radio" class="platform-radio js-wallet-selector" name="platform" value="hardware"/>
-            <div class="platform-radio-custom helper-platforms-radio">
-              <img src="/img/os/wallet_menu_hardware.svg" alt="hardware" class="platform-radio-icon-inactive">
-              <img src="/img/os/wallet_menu_hardware_bright.svg" alt="hardware" class="platform-radio-icon-active">
-            </div>
-          </label>
-        </div>
-        <p class="bullet bullet-positive">Safest crypto wallet options</p>
-        <p class="bullet bullet-positive">Great for storing large amounts of cryptocurrencies</p>
-        <p class="bullet bullet-negative">Most expensive type of wallet</p>
-        <p class="bullet bullet-negative">Not as user-friendly especially for beginners</p>
-      </div>
-    </div>
-    
-    <div class="helper-navigation">
-      <a class="skip-helper-btn" href="/{{ page.lang }}/{% translate choose-your-wallet url %}">Skip helper</a>
-      <button class="helper-next-btn btn-bright">Next</button>
-    </div>
-  </div>
-
-  <div class="discover">
-    <h2 class="discover-title">Discover more</h2>
-    <a href="#" class="discover-link">Read about each wallet type</a>
-    <a href="#" class="discover-link">Which wallet is the best?</a>
-  </div>
-
 </div>
\ No newline at end of file
diff --git a/_includes/layout/base/helper-step-2.html b/_includes/layout/base/helper-step-2.html
index 53194985..f6fe0e05 100644
--- a/_includes/layout/base/helper-step-2.html
+++ b/_includes/layout/base/helper-step-2.html
@@ -3,60 +3,62 @@ This file is licensed under the MIT License (MIT) available on
 http://opensource.org/licenses/MIT.
 {% endcomment %}
 
-<div class="helper-row">
-  <div class="helper-page-numbers">
-    <div class="helper-page-number completed"></div>
-    <div class="helper-page-number active">2</div>
-    <div class="helper-page-number">3</div>
-    <div class="helper-page-number">4</div>
-  </div>
-
-  <div class="helper-content">
-    <div class="helper-header">
-      <div class="helper-header-row">
-        <h2 class="helper-title previous">What’s your operating system?</h2> 
-        <div class="row">
-          <div class="helper-selected-filter">Desktop wallets / OS X</div>
-          <button class="helper-change-btn">Change</button>
+<div class="helper-step" data-step="user">
+  <div class="helper-row">
+    <div class="helper-page-numbers">
+      <div class="helper-page-number completed"></div>
+      <div class="helper-page-number active">2</div>
+      <div class="helper-page-number">3</div>
+      <div class="helper-page-number">4</div>
+    </div>
+  
+    <div class="helper-content">
+      <div class="helper-header">
+        <div class="helper-header-row">
+          <h2 class="helper-title previous">What’s your operating system?</h2> 
+          <div class="row">
+            <div class="helper-selected-filter">Desktop wallets / OS X</div>
+            <button class="helper-change-btn">Change</button>
+          </div>
+        </div>
+      </div>
+      <div class="helper-header">
+        <h2 class="helper-title">How much do I know about Bitcoin?</h2>  
+      </div>
+      
+      <div class="helper-user-types">
+        <label class="helper-user-radio-wrapper">
+          <input type="radio" class="helper-user-radio js-wallet-selector" name="user" value="new"/>
+          <div class="helper-user-radio-custom">
+            <img src="/img/icons/plant.svg" alt="plant & bitcoin">
+            <h4 class="helper-user-radio-title">I’m a Bitcoin Beginner</h4>
+            <p class="helper-user-radio-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+          </div>
+        </label>
+        <p class="helper-user-separator">or</p>
+        <label class="helper-user-radio-wrapper">
+          <input type="radio" class="helper-user-radio js-wallet-selector" name="user" value="experienced"/>
+          <div class="helper-user-radio-custom">
+            <img src="/img/icons/trees.svg" alt="trees & bitcoin">
+            <h4 class="helper-user-radio-title">I’m an advance Bitcoin user</h4>
+            <p class="helper-user-radio-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+          </div>
+        </label>
+      </div>
+      
+      <div class="helper-navigation">
+        <a class="skip-helper-btn" href="/{{ page.lang }}/{% translate choose-your-wallet url %}">Skip helper</a>
+        <div class="helper-navigation-row">
+          <button class="helper-back-btn btn-light js-helper-back" data-selector="os">Back</button>
+          <button class="helper-next-btn btn-bright js-helper-next" data-selector="important">Next</button>
         </div>
       </div>
     </div>
-    <div class="helper-header">
-      <h2 class="helper-title">How much do I know about Bitcoin?</h2>  
-    </div>
-    
-    <div class="helper-user-types">
-      <label class="helper-user-radio-wrapper">
-        <input type="radio" class="helper-user-radio js-wallet-selector" name="user" value="new"/>
-        <div class="helper-user-radio-custom">
-          <img src="/img/icons/plant.svg" alt="plant & bitcoin">
-          <h4 class="helper-user-radio-title">I’m a Bitcoin Beginner</h4>
-          <p class="helper-user-radio-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-        </div>
-      </label>
-      <p class="helper-user-separator">or</p>
-      <label class="helper-user-radio-wrapper">
-        <input type="radio" class="helper-user-radio js-wallet-selector" name="user" value="experienced"/>
-        <div class="helper-user-radio-custom">
-          <img src="/img/icons/trees.svg" alt="trees & bitcoin">
-          <h4 class="helper-user-radio-title">I’m an advance Bitcoin user</h4>
-          <p class="helper-user-radio-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-        </div>
-      </label>
-    </div>
-    
-    <div class="helper-navigation">
-      <a class="skip-helper-btn" href="/{{ page.lang }}/{% translate choose-your-wallet url %}">Skip helper</a>
-      <div class="helper-navigation-row">
-        <button class="helper-back-btn btn-light">Back</button>
-        <button class="helper-next-btn btn-bright">Next</button>
-      </div>
+  
+    <div class="discover">
+      <h2 class="discover-title">Discover more</h2>
+      <a href="#" class="discover-link">Learn about Bitcoin</a>
     </div>
+  
   </div>
-
-  <div class="discover">
-    <h2 class="discover-title">Discover more</h2>
-    <a href="#" class="discover-link">Learn about Bitcoin</a>
-  </div>
-
 </div>
\ No newline at end of file
diff --git a/_includes/layout/base/helper-step-3.html b/_includes/layout/base/helper-step-3.html
index 858a8d1e..c157c9da 100644
--- a/_includes/layout/base/helper-step-3.html
+++ b/_includes/layout/base/helper-step-3.html
@@ -3,7 +3,8 @@ This file is licensed under the MIT License (MIT) available on
 http://opensource.org/licenses/MIT.
 {% endcomment %}
 
-<div class="helper-row">
+<div class="helper-step" data-step="important">
+  <div class="helper-row">
     <div class="helper-page-numbers">
       <div class="helper-page-number completed"></div>
       <div class="helper-page-number completed"></div>
@@ -84,8 +85,8 @@ http://opensource.org/licenses/MIT.
       <div class="helper-navigation">
         <a class="skip-helper-btn" href="/{{ page.lang }}/{% translate choose-your-wallet url %}">Skip helper</a>
         <div class="helper-navigation-row">
-          <button class="helper-back-btn btn-light">Back</button>
-          <button class="helper-next-btn btn-bright">Next</button>
+          <button class="helper-back-btn btn-light js-helper-back" data-selector="user">Back</button>
+          <button class="helper-next-btn btn-bright js-helper-next" data-selector="features">Next</button>
         </div>
       </div>
     </div>
@@ -100,4 +101,5 @@ http://opensource.org/licenses/MIT.
       <a href="#" class="discover-link">Read more about Privacy</a>
     </div>
 
-  </div>
\ No newline at end of file
+  </div>
+</div>
\ No newline at end of file
diff --git a/_includes/layout/base/helper-step-4.html b/_includes/layout/base/helper-step-4.html
index be15bd9e..a9d5631f 100644
--- a/_includes/layout/base/helper-step-4.html
+++ b/_includes/layout/base/helper-step-4.html
@@ -3,96 +3,98 @@ This file is licensed under the MIT License (MIT) available on
 http://opensource.org/licenses/MIT.
 {% endcomment %}
 
-<div class="helper-row">
-  <div class="helper-page-numbers">
-    <div class="helper-page-number completed"></div>
-    <div class="helper-page-number completed"></div>
-    <div class="helper-page-number completed"></div>
-    <div class="helper-page-number active">4</div>
-  </div>
-
-  <div class="helper-content">
-    <div class="helper-header">
-      <div class="helper-header-row">
-        <h2 class="helper-title previous">What’s your operating system?</h2> 
-        <div class="row">
-          <div class="helper-selected-filter">Desktop wallets / OS X</div>
-          <button class="helper-change-btn">Change</button>
-        </div>
-      </div>
+<div class="helper-step" data-step="features">
+  <div class="helper-row">
+    <div class="helper-page-numbers">
+      <div class="helper-page-number completed"></div>
+      <div class="helper-page-number completed"></div>
+      <div class="helper-page-number completed"></div>
+      <div class="helper-page-number active">4</div>
     </div>
-    <div class="helper-header">
-      <div class="helper-header-row">
-        <h2 class="helper-title previous">How much do I know about Bitcoin?</h2> 
-        <div class="row">
-          <div class="helper-selected-filter">New user</div>
-          <button class="helper-change-btn">Change</button>
-        </div>
-      </div>
-    </div>
-    <div class="helper-header">
-      <div class="helper-header-row">
-        <h2 class="helper-title previous">Which criteria are the most important to me?</h2> 
-        <div class="row">
-          <div class="helper-selected-filter">Control, Fees</div>
-          <button class="helper-change-btn">Change</button>
-        </div>
-      </div>
-    </div>
-    <div class="helper-header">
-      <h2 class="helper-title">What features am I looking for?</h2> 
-    </div>
-
+  
     <div class="helper-content">
-      <div class="helper-checkboxes-row">
-        <label class="checkbox-wrapper helper-checkbox-wrapper">
-          <input type="checkbox" name="features" value="multisig" class="checkbox js-wallet-selector" />
-          <div class="checkbox-text helper-checkbox-text">
-            <p class="helper-checkbox-title">Multisig</p>
-            <p class="helper-checkbox-description">Refers to requiring more than one key to authorize a Bitcoin transaction. It is generally used to divide up responsibility for possession of bitcoins</p>
+      <div class="helper-header">
+        <div class="helper-header-row">
+          <h2 class="helper-title previous">What’s your operating system?</h2> 
+          <div class="row">
+            <div class="helper-selected-filter">Desktop wallets / OS X</div>
+            <button class="helper-change-btn">Change</button>
           </div>
-        </label>
-        <label class="checkbox-wrapper helper-checkbox-wrapper">
-          <input type="checkbox" name="features" value="segwit" class="checkbox js-wallet-selector" />
-          <div class="checkbox-text helper-checkbox-text">
-            <p class="helper-checkbox-title">Segwit</p>
-            <p class="helper-checkbox-description">Is an implemented protocol upgrade intended to provide protection from transaction malleability and increase block capacity. SegWit separates the witness from the list of inputs. The witness contains data required to check transaction validity but is not required to determine transaction effects.</p>
+        </div>
+      </div>
+      <div class="helper-header">
+        <div class="helper-header-row">
+          <h2 class="helper-title previous">How much do I know about Bitcoin?</h2> 
+          <div class="row">
+            <div class="helper-selected-filter">New user</div>
+            <button class="helper-change-btn">Change</button>
           </div>
-        </label>
-        <label class="checkbox-wrapper helper-checkbox-wrapper">
-          <input type="checkbox" name="features" value="2fa" class="checkbox js-wallet-selector" />
-          <div class="checkbox-text helper-checkbox-text">
-            <p class="helper-checkbox-title">2FA</p>
-            <p class="helper-checkbox-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium, deserunt! Nesciunt fugit maiores, quidem sed labore modi nihil in quaerat laboriosam, atque repudiandae perferendis fuga ducimus amet rem. Est, ipsam?</p>
+        </div>
+      </div>
+      <div class="helper-header">
+        <div class="helper-header-row">
+          <h2 class="helper-title previous">Which criteria are the most important to me?</h2> 
+          <div class="row">
+            <div class="helper-selected-filter">Control, Fees</div>
+            <button class="helper-change-btn">Change</button>
           </div>
-        </label>
-        <label class="checkbox-wrapper helper-checkbox-wrapper">
-          <input type="checkbox" name="features" value="bech32" class="checkbox js-wallet-selector" />
-          <div class="checkbox-text helper-checkbox-text">
-            <p class="helper-checkbox-title">Bech32</p>
-            <p class="helper-checkbox-description">Bech32 is a new bitcoin address format specified by BIP 0173. This page tracks the adoption of Bech32. Ideally wallets and services would first support sending to bech32 addresses. After almost everything can send to. then people may willing to adopt bech 32 widely for receiving.</p>
-          </div>
-        </label>
+        </div>
+      </div>
+      <div class="helper-header">
+        <h2 class="helper-title">What features am I looking for?</h2> 
+      </div>
+  
+      <div class="helper-content">
+        <div class="helper-checkboxes-row">
+          <label class="checkbox-wrapper helper-checkbox-wrapper">
+            <input type="checkbox" name="features" value="multisig" class="checkbox js-wallet-selector" />
+            <div class="checkbox-text helper-checkbox-text">
+              <p class="helper-checkbox-title">Multisig</p>
+              <p class="helper-checkbox-description">Refers to requiring more than one key to authorize a Bitcoin transaction. It is generally used to divide up responsibility for possession of bitcoins</p>
+            </div>
+          </label>
+          <label class="checkbox-wrapper helper-checkbox-wrapper">
+            <input type="checkbox" name="features" value="segwit" class="checkbox js-wallet-selector" />
+            <div class="checkbox-text helper-checkbox-text">
+              <p class="helper-checkbox-title">Segwit</p>
+              <p class="helper-checkbox-description">Is an implemented protocol upgrade intended to provide protection from transaction malleability and increase block capacity. SegWit separates the witness from the list of inputs. The witness contains data required to check transaction validity but is not required to determine transaction effects.</p>
+            </div>
+          </label>
+          <label class="checkbox-wrapper helper-checkbox-wrapper">
+            <input type="checkbox" name="features" value="2fa" class="checkbox js-wallet-selector" />
+            <div class="checkbox-text helper-checkbox-text">
+              <p class="helper-checkbox-title">2FA</p>
+              <p class="helper-checkbox-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium, deserunt! Nesciunt fugit maiores, quidem sed labore modi nihil in quaerat laboriosam, atque repudiandae perferendis fuga ducimus amet rem. Est, ipsam?</p>
+            </div>
+          </label>
+          <label class="checkbox-wrapper helper-checkbox-wrapper">
+            <input type="checkbox" name="features" value="bech32" class="checkbox js-wallet-selector" />
+            <div class="checkbox-text helper-checkbox-text">
+              <p class="helper-checkbox-title">Bech32</p>
+              <p class="helper-checkbox-description">Bech32 is a new bitcoin address format specified by BIP 0173. This page tracks the adoption of Bech32. Ideally wallets and services would first support sending to bech32 addresses. After almost everything can send to. then people may willing to adopt bech 32 widely for receiving.</p>
+            </div>
+          </label>
+        </div>
+      </div>
+      
+      <div class="helper-navigation">
+        <a class="skip-helper-btn" href="/{{ page.lang }}/{% translate choose-your-wallet url %}">Skip helper</a>
+        <div class="helper-navigation-row">
+          <button class="helper-back-btn btn-light js-helper-back" data-selector="important">Back</button>
+          <a class="helper-next-btn btn-bright" href="/{{ page.lang }}/{% translate choose-your-wallet url %}">Next</a>
+        </div>
       </div>
     </div>
-    
-    <div class="helper-navigation">
-      <a class="skip-helper-btn" href="/{{ page.lang }}/{% translate choose-your-wallet url %}">Skip helper</a>
-      <div class="helper-navigation-row">
-        <button class="helper-back-btn btn-light">Back</button>
-        <button class="helper-next-btn btn-bright">Next</button>
-      </div>
+  
+    <div class="discover">
+      <h2 class="discover-title">Discover more</h2>
+      <a href="#" class="discover-link">Read more about Control</a>
+      <a href="#" class="discover-link">Read more about Validation</a>
+      <a href="#" class="discover-link">Read more about Fees</a>
+      <a href="#" class="discover-link">Read more about Transparency</a>
+      <a href="#" class="discover-link">Read more about Environment</a>
+      <a href="#" class="discover-link">Read more about Privacy</a>
     </div>
+  
   </div>
-
-  <div class="discover">
-    <h2 class="discover-title">Discover more</h2>
-    <a href="#" class="discover-link">Read more about Control</a>
-    <a href="#" class="discover-link">Read more about Validation</a>
-    <a href="#" class="discover-link">Read more about Fees</a>
-    <a href="#" class="discover-link">Read more about Transparency</a>
-    <a href="#" class="discover-link">Read more about Environment</a>
-    <a href="#" class="discover-link">Read more about Privacy</a>
-  </div>
-
 </div>
\ No newline at end of file
diff --git a/_includes/layout/base/wallets-selector.html b/_includes/layout/base/wallets-selector.html
index a71cb754..cd08aef4 100644
--- a/_includes/layout/base/wallets-selector.html
+++ b/_includes/layout/base/wallets-selector.html
@@ -429,10 +429,6 @@ http://opensource.org/licenses/MIT.
 
 <script>
   var queries = {};
-
-  function setFilterUrlParameter(value) {
-    history.pushState(null, null, updateQueryStringParameter('filters', value));
-  }
   
   var linksList = document.querySelectorAll('.wallet-link');  
   var selectorsList = document.querySelectorAll('.js-wallet-selector');
@@ -530,7 +526,7 @@ http://opensource.org/licenses/MIT.
     setWalletsVisibility(filters);
     setInputActivity();
     displayContentSections();
-    setFilterUrlParameter(filters);
+    setUrlParameter('filters', filters);
     displaySelectedOs();
   }
 
diff --git a/_sass/_helper.scss b/_sass/_helper.scss
index 48b23cd0..15e9a36e 100644
--- a/_sass/_helper.scss
+++ b/_sass/_helper.scss
@@ -1,6 +1,12 @@
 .helper {
   padding: 50px 0;
 }
+.helper-step {
+  display: none;
+}
+.helper-step.visible {
+  display: block;
+}
 .helper-intro {
   display: flex;
   justify-content: space-between;
@@ -44,6 +50,9 @@
   margin-right: 30px;
 }
 .helper-next-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 170px;
   height: 55px;
   border: none;
diff --git a/_templates/helper.html b/_templates/helper.html
index 3d2c928a..090eb826 100644
--- a/_templates/helper.html
+++ b/_templates/helper.html
@@ -22,4 +22,44 @@ id: helper
     {% include layout/base/helper-step-3.html %}
     {% include layout/base/helper-step-4.html %}
   </div>
-</div>
\ No newline at end of file
+</div>
+
+<script>
+  function displayRelevantStep(selectedStep) {
+    var sectionsList = document.querySelectorAll('.helper-step');
+    sectionsList.forEach(function(section) {
+      if (section.dataset.step === selectedStep) section.classList.add('visible');
+      else section.classList.remove('visible');
+    })
+    setUrlParameter('step', selectedStep);
+  }
+  
+  function setListners() {
+    var nextButtons = document.querySelectorAll('.js-helper-next')
+    nextButtons.forEach(function(button) {
+      button.addEventListener('click', function() {
+        displayRelevantStep(this.dataset.selector);
+      })
+    })
+
+    var backButtons = document.querySelectorAll('.js-helper-back');
+    backButtons.forEach(function(button) {
+      button.addEventListener('click', function() {
+        displayRelevantStep(this.dataset.selector);
+      })
+    })
+  }
+  
+  function displayDefaultStep() {
+    var step = getUrlParameter('step');
+    if (step) displayRelevantStep(step);
+    else displayRelevantStep('intro');
+  }
+  
+  function init() {
+    displayDefaultStep();
+    setListners();
+  }
+
+  init();
+</script>
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 2123820c..1d6692a7 100644
--- a/js/main.js
+++ b/js/main.js
@@ -705,4 +705,8 @@ function checkIfFiltersInclude(categories, filters) {
     if (!categories.includes(filter)) return false;
   }
   return true;
+}
+
+function setUrlParameter(parameter, value) {
+  history.pushState(null, null, updateQueryStringParameter(parameter, value));
 }
\ No newline at end of file