coldcard/Bitcoin.org
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

helper page: add basic navigation

Browse Source
This commit is contained in:
alexcherman 2019-06-27 10:52:35 +02:00
parent af1f77a218
commit 412dc96eb3
9 changed files with 330 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
_includes/layout/base/helper-intro.html
View File

@ -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>

236
_includes/layout/base/helper-step-1.html
View File

@ -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>

104
_includes/layout/base/helper-step-2.html
View File

@ -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>

10
_includes/layout/base/helper-step-3.html
View File

@ -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>
</div>
</div>

168
_includes/layout/base/helper-step-4.html
View File

@ -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>

6
_includes/layout/base/wallets-selector.html
View File

@ -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();
}

9
_sass/_helper.scss
View File

@ -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;

42
_templates/helper.html
View File

@ -22,4 +22,44 @@ id: helper
{% include layout/base/helper-step-3.html %}
{% include layout/base/helper-step-4.html %}
</div>
</div>
</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>

4
js/main.js
View File

@ -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));
}