diff --git a/_layouts/wallet-platform-container.html b/_layouts/wallet-platform-container.html
deleted file mode 100644
index 92b9eec8..00000000
--- a/_layouts/wallet-platform-container.html
+++ /dev/null
@@ -1,49 +0,0 @@
----
-# This file is licensed under the MIT License (MIT) available on
-# http://opensource.org/licenses/MIT.
-
-layout: base
-end_of_page: |
-
-
----
-
-{{ content }}
-
-{% if page.id != "choose-your-wallet" %}
-
-{% endif %}
diff --git a/_layouts/wallet-platform.html b/_layouts/wallet-platform.html
index 48a0aea1..2b4e57da 100644
--- a/_layouts/wallet-platform.html
+++ b/_layouts/wallet-platform.html
@@ -2,7 +2,7 @@
# This file is licensed under the MIT License (MIT) available on
# http://opensource.org/licenses/MIT.
-layout: wallet-platform-container
+layout: base
---
diff --git a/_sass/_helper.scss b/_sass/_helper.scss
new file mode 100644
index 00000000..ecc5306c
--- /dev/null
+++ b/_sass/_helper.scss
@@ -0,0 +1,36 @@
+.helper {
+ padding: 50px 0;
+}
+.helper-intro {
+ display: flex;
+ justify-content: space-between;
+}
+.helper-intro-img-wrapper {
+ width: 40.5%;
+}
+.helper-intro-description {
+ width: 57%;
+ margin-left: 2.5%;
+}
+.helper-intro-title {
+ margin: 0 0 20px;
+}
+.helper-intro-text {
+ margin-bottom: 35px;
+}
+.helper-navigation {
+ display: flex;
+ justify-content: space-between;
+ padding-top: 15px;
+ border-top: 1px solid #dadada;
+}
+.skip-helper-btn {
+ font-size: 16px;
+ color: #4D5060;
+ line-height: 52px;
+ text-decoration: underline;
+}
+.helper-next-btn {
+ width: 170px;
+ border: none;
+}
\ No newline at end of file
diff --git a/_sass/_wallet-selector.scss b/_sass/_wallet-selector.scss
index cb25fce5..e331cc9e 100644
--- a/_sass/_wallet-selector.scss
+++ b/_sass/_wallet-selector.scss
@@ -15,30 +15,221 @@
color: #13161F;
line-height: 22px;
}
+.tooltip-trigger:hover .tooltip {
+ display: block;
+}
+
+.tooltip {
+ display: none;
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ width: 200px;
+ transform: translate(-50%, 100%);
+ padding: 10px;
+ background: #FFFFFF;
+ border: 1px solid #E1E1E1;
+ border-radius: 3px;
+ font-size: 12px;
+ color: #13161F;
+ line-height: 22px;
+ z-index: 1000;
+}
+.tooltip::after,
+.tooltip::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 22px;
+ transform: translateY(-100%) rotate(-90deg);
+ border: 4px solid transparent;
+ border-left: 4px solid #fff;
+}
+.tooltip::after {
+ top: 0;
+}
+.tooltip::before {
+ top: -1px;
+ border-left: 4px solid #dadada;
+}
+.checkbox-wrapper .checkbox {
+ position: absolute;
+ z-index: -1;
+ opacity: 0;
+ margin: 0;
+}
+.checkbox-text {
+ position: relative;
+ padding: 0 0 0 36px;
+ font-weight: 600;
+ font-size: 16px;
+ color: #4D5060;
+ line-height: 30px;
+ cursor: pointer;
+}
+.checkbox-text::before {
+ content: '';
+ position: absolute;
+ top: 4px;
+ left: 0;
+ width: 22px;
+ height: 22px;
+ background: #fff;
+ border: 1px solid #dadada;
+}
+.checkbox:checked + .checkbox-text::before {
+ background: #F7931A url('../img/icons/check.svg') center no-repeat;
+ border: 1px solid #F7931A;
+}
+.checkbox:checked + .checkbox-text {
+ color: #13161F;
+}
+.checkbox[disabled] + .checkbox-text {
+ cursor: not-allowed;
+}
+.checkbox[disabled] + .checkbox-text::before {
+ background: #e5e5e5;
+ border: 1px solid #e5e5e5;
+}
+.checkbox[disabled] + .checkbox-text {
+ color: #b3b4ba;
+}
+
+
+.user-radio-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+.user-radio-row + .user-radio-row {
+ margin-top: 5px;
+}
+.user-radio {
+ position: absolute;
+ z-index: -1;
+ opacity: 0;
+ margin: 0;
+}
+.user-radio-text {
+ position: relative;
+ padding: 0 0 0 36px;
+ font-weight: 600;
+ font-size: 16px;
+ color: #4D5060;
+ line-height: 30px;
+ cursor: pointer;
+}
+.user-radio-text::before {
+ content: '';
+ position: absolute;
+ top: 3px;
+ left: 0;
+ width: 22px;
+ height: 22px;
+ border: 1px solid #dadada;
+ border-radius: 50%;
+ background: #FFF;
+}
+.user-radio-text::after {
+ content: '';
+ position: absolute;
+ top: 10px;
+ left: 7px;
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background: #F7931A;
+ opacity: 0;
+}
+.user-radio:checked + .user-radio-text::after {
+ opacity: 1;
+}
+.user-radio:checked + .user-radio-text {
+ color: #13161F
+}
+.user-radio[disabled] + .user-radio-text {
+ cursor: not-allowed;
+}
+.user-radio[disabled] + .user-radio-text::before {
+ background: #e5e5e5;
+}
+.user-radio[disabled] + .user-radio-text {
+ color: #b3b4ba;
+}
+
+.platform-radio-wrapper + .platform-radio-wrapper {
+ margin-left: 5px;
+}
+.platform-radio {
+ position: absolute;
+ z-index: -1;
+ opacity: 0;
+}
+.platform-radio-custom {
+ position: relative;
+ width: 36px;
+ height: 36px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #FFFFFF;
+ border: 1px solid #DADADA;
+ box-sizing: border-box;
+ cursor: pointer;
+}
+.platform-radio-icon-active {
+ display: none;
+}
+.platform-radio:checked + .platform-radio-custom {
+ border: 2px solid #F7931A;
+}
+.platform-radio:checked + .platform-radio-custom .platform-radio-icon-active {
+ display: block;
+}
+.platform-radio:checked + .platform-radio-custom .platform-radio-icon-inactive {
+ display: none;
+}
.wallet-selector {
padding: 50px 0 25px;
}
.wallet-selector-row {
- display: flex;
+ display: flex;
+ align-items: flex-start;
}
.sidebar-selector {
width: 270px;
padding: 15px;
- margin-right: 130px;
+ margin-right: 30px;
background: #f8f8f8;
}
+.sidebar-selector-section {
+ padding-bottom: 16px;
+ margin-bottom: 10px;
+ border-bottom: 1px solid #dadada;
+}
.sidebar-selector-title {
margin: 0 0 5px;
font-size: 20px;
color: #13161F;
line-height: 36px;
}
+.sidebar-selector-text {
+ font-size: 16px;
+ color: #4D5060;
+ line-height: 22px;
+}
+.sidebar-selector-platforms-row + .sidebar-selector-platforms-row {
+ margin-top: 13px;
+}
.sidebar-selector-platforms-row {
display: flex;
}
.sidebar-selector-platform {
- width: 100%;
+ width: 118px;
+}
+.sidebar-selector-platform + .sidebar-selector-platform {
+ margin-left: 15px;
}
.sidebar-selector-label-row {
display: flex;
@@ -53,11 +244,41 @@
color: #13161F;
line-height: 30px;
}
+.wallet-selector-tooltip {
+ left: -20px;
+ transform: translate(0, 100%)
+}
+.sidebar-selector-os-row {
+ display: flex;
+}
+.sidebar-selector-section-top {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+.important-checkbox-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.important-checkbox-row + .important-checkbox-row {
+ margin-top: 10px;
+}
+.wallet-selector-content {
+ width: 100%;
+}
.wallet-table-head {
+ display: table-cell;
border: none;
}
+.wallet-table-wrapper.hidden {
+ display: none;
+ margin-bottom: 20px;
+}
.wallet-table {
+ display: table;
+ width: 100%;
border-collapse: separate;
border-spacing: 0 9px;
}
@@ -76,9 +297,16 @@
vertical-align: middle;
}
.wallet-table-row {
- cursor: pointer;
+ display: table-row;
+}
+.wallet-link {
+ display: none;
+}
+.wallet-link.visible {
+ display: table-row;
}
.wallet-table-data {
+ display: table-cell;
padding: 20px;
border: 1px solid #DADADA;
border-left: 0;
@@ -101,7 +329,6 @@
.wallet-hints-row {
display: flex;
align-items: center;
- margin-top: 20px;
}
.wallet-hint {
display: flex;
@@ -141,3 +368,25 @@
color: #13161F;
line-height: 36px;
}
+
+.empty-box {
+ width: 96%;
+ border: 1px solid #DADADA;
+ text-align: center;
+ padding: 75px 30px 60px;
+}
+.empty-box.hidden {
+ display: none;
+}
+.empty-box-title {
+ margin: 15px 0;
+ font-weight: 400;
+ font-size: 22px;
+ color: #13161F;
+ text-align: center;
+ line-height: 36px;
+}
+.empty-box-text {
+ max-width: 505px;
+ margin: 0 auto;
+}
diff --git a/_sass/_wallets.scss b/_sass/_wallets.scss
index cdc2ca6e..3c57d4de 100644
--- a/_sass/_wallets.scss
+++ b/_sass/_wallets.scss
@@ -609,382 +609,4 @@ $scores: good $black 600, pass $black 600, neutral $black 600, fail $black 600;
width: 100%;
height: 100%;
}
-}
-
-.tooltip-trigger {
- position: relative;
-}
-.tooltip-trigger:hover .tooltip {
- display: block;
-}
-.tooltip {
- display: none;
- position: absolute;
- bottom: 0;
- left: 50%;
- width: 200px;
- transform: translate(-50%, 100%);
- padding: 10px;
- background: #FFFFFF;
- border: 1px solid #E1E1E1;
- border-radius: 3px;
- font-size: 12px;
- color: #13161F;
- line-height: 22px;
- z-index: 1000;
-}
-.tooltip::after,
-.tooltip::before {
- content: '';
- position: absolute;
- top: 0;
- left: 22px;
- transform: translateY(-100%) rotate(-90deg);
- border: 4px solid transparent;
- border-left: 4px solid #fff;
-}
-.tooltip::after {
- top: 0;
-}
-.tooltip::before {
- top: -1px;
- border-left: 4px solid #dadada;
-}
-.checkbox-wrapper .checkbox {
- position: absolute;
- z-index: -1;
- opacity: 0;
- margin: 0;
-}
-.checkbox-text {
- position: relative;
- padding: 0 0 0 36px;
- font-weight: 600;
- font-size: 16px;
- color: #4D5060;
- line-height: 30px;
- cursor: pointer;
-}
-.checkbox-text::before {
- content: '';
- position: absolute;
- top: 4px;
- left: 0;
- width: 22px;
- height: 22px;
- background: #fff;
- border: 1px solid #dadada;
-}
-.checkbox:checked + .checkbox-text::before {
- background: #F7931A url('../img/icons/check.svg') center no-repeat;
- border: 1px solid #F7931A;
-}
-.checkbox:checked + .checkbox-text {
- color: #13161F;
-}
-.checkbox[disabled] + .checkbox-text {
- cursor: not-allowed;
-}
-.checkbox[disabled] + .checkbox-text::before {
- background: #e5e5e5;
- border: 1px solid #e5e5e5;
-}
-.checkbox[disabled] + .checkbox-text {
- color: #b3b4ba;
-}
-
-
-.user-radio-row {
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-.user-radio-row + .user-radio-row {
- margin-top: 5px;
-}
-.user-radio {
- position: absolute;
- z-index: -1;
- opacity: 0;
- margin: 0;
-}
-.user-radio-text {
- position: relative;
- padding: 0 0 0 36px;
- font-weight: 600;
- font-size: 16px;
- color: #4D5060;
- line-height: 30px;
- cursor: pointer;
-}
-.user-radio-text::before {
- content: '';
- position: absolute;
- top: 3px;
- left: 0;
- width: 22px;
- height: 22px;
- border: 1px solid #dadada;
- border-radius: 50%;
- background: #FFF;
-}
-.user-radio-text::after {
- content: '';
- position: absolute;
- top: 10px;
- left: 7px;
- width: 10px;
- height: 10px;
- border-radius: 50%;
- background: #F7931A;
- opacity: 0;
-}
-.user-radio:checked + .user-radio-text::after {
- opacity: 1;
-}
-.user-radio:checked + .user-radio-text {
- color: #13161F
-}
-.user-radio[disabled] + .user-radio-text {
- cursor: not-allowed;
-}
-.user-radio[disabled] + .user-radio-text::before {
- background: #e5e5e5;
-}
-.user-radio[disabled] + .user-radio-text {
- color: #b3b4ba;
-}
-
-.platform-radio-wrapper + .platform-radio-wrapper {
- margin-left: 5px;
-}
-.platform-radio {
- position: absolute;
- z-index: -1;
- opacity: 0;
-}
-.platform-radio-custom {
- position: relative;
- width: 36px;
- height: 36px;
- display: flex;
- align-items: center;
- justify-content: center;
- background: #FFFFFF;
- border: 1px solid #DADADA;
- box-sizing: border-box;
- cursor: pointer;
-}
-.platform-radio-icon-active {
- display: none;
-}
-.platform-radio:checked + .platform-radio-custom {
- border: 2px solid #F7931A;
-}
-.platform-radio:checked + .platform-radio-custom .platform-radio-icon-active {
- display: block;
-}
-.platform-radio:checked + .platform-radio-custom .platform-radio-icon-inactive {
- display: none;
-}
-
-.wallet-selector {
- padding: 50px 0 25px;
-}
-.wallet-selector-row {
- display: flex;
- align-items: flex-start;
-}
-.sidebar-selector {
- width: 270px;
- padding: 15px;
- margin-right: 30px;
- background: #f8f8f8;
-}
-.sidebar-selector-section {
- padding-bottom: 16px;
- margin-bottom: 10px;
- border-bottom: 1px solid #dadada;
-}
-.sidebar-selector-title {
- margin: 0 0 5px;
- font-size: 20px;
- color: #13161F;
- line-height: 36px;
-}
-.sidebar-selector-text {
- font-size: 16px;
- color: #4D5060;
- line-height: 22px;
-}
-.sidebar-selector-platforms-row + .sidebar-selector-platforms-row {
- margin-top: 13px;
-}
-.sidebar-selector-platforms-row {
- display: flex;
-}
-.sidebar-selector-platform {
- width: 118px;
-}
-.sidebar-selector-platform + .sidebar-selector-platform {
- margin-left: 15px;
-}
-.sidebar-selector-label-row {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 5px;
-}
-.sidebar-selector-label {
- margin: 0;
- font-weight: 600;
- font-size: 16px;
- color: #13161F;
- line-height: 30px;
-}
-.wallet-selector-tooltip {
- left: -20px;
- transform: translate(0, 100%)
-}
-.sidebar-selector-os-row {
- display: flex;
-}
-.sidebar-selector-section-top {
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-.important-checkbox-row {
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-.important-checkbox-row + .important-checkbox-row {
- margin-top: 10px;
-}
-
-.wallet-selector-content {
- width: 100%;
-}
-.wallet-table-head {
- display: table-cell;
- border: none;
-}
-.wallet-table-wrapper.hidden {
- display: none;
- margin-bottom: 20px;
-}
-.wallet-table {
- display: table;
- width: 100%;
- border-collapse: separate;
- border-spacing: 0 9px;
-}
-.wallet-table-title {
- font-weight: 400;
- font-size: 14px;
- color: #13161F;
- line-height: 1.4;
- text-align: center;
-}
-.wallet-label {
- font-weight: 600;
- font-size: 17px;
- color: #13161F;
- line-height: 1.4;
- vertical-align: middle;
-}
-.wallet-table-row {
- display: table-row;
-}
-.wallet-link {
- display: none;
-}
-.wallet-link.visible {
- display: table-row;
-}
-.wallet-table-data {
- display: table-cell;
- padding: 20px;
- border: 1px solid #DADADA;
- border-left: 0;
- border-right: 0;
-}
-.wallet-table-data:first-child {
- padding-right: 25px;
- border-left: 1px solid #DADADA;
-}
-.wallet-table-data:last-child {
- padding-right: 25px;
- border-right: 1px solid #DADADA;
-}
-.wallet-img {
- width: 35px;
- margin-right: 13px;
- vertical-align: middle;
-}
-
-.wallet-hints-row {
- display: flex;
- align-items: center;
-}
-.wallet-hint {
- display: flex;
- align-items: center;
- margin-right: 30px;
-}
-.wallet-good {
- margin: 0 auto;
- width: 13px;
- height: 13px;
- border-radius: 50%;
- background: #7EBF1E;
-}
-.wallet-caution {
- margin: 0 auto;
- width: 0;
- height: 0;
- border-left: 7px solid transparent;
- border-right: 7px solid transparent;
- border-bottom: 11px solid #F7931A;
-}
-.wallet-neutral {
- margin: 0 auto;
- width: 12px;
- height: 12px;
- background: #aaa;
-}
-.wallet-hint-text {
- margin-left: 8px;
- font-size: 14px;
- color: #13161F;
- line-height: 30px;
-}
-.wallet-table-head:first-child .wallet-table-title {
- text-align: left;
- font-size: 22px;
- color: #13161F;
- line-height: 36px;
-}
-
-.empty-box {
- width: 96%;
- border: 1px solid #DADADA;
- text-align: center;
- padding: 75px 30px 60px;
-}
-.empty-box.hidden {
- display: none;
-}
-.empty-box-title {
- margin: 15px 0;
- font-weight: 400;
- font-size: 22px;
- color: #13161F;
- text-align: center;
- line-height: 36px;
-}
-.empty-box-text {
- max-width: 505px;
- margin: 0 auto;
-}
+}
\ No newline at end of file
diff --git a/_sass/screen.scss b/_sass/screen.scss
index 83d7c9cb..ca6ecc5a 100644
--- a/_sass/screen.scss
+++ b/_sass/screen.scss
@@ -5043,6 +5043,8 @@ br.big {
}
}
+@import 'helper';
@import 'wallets';
+@import 'wallet-selector';
@import 'wallets-menu';
@import 'donation-banner';
diff --git a/_templates/helper.html b/_templates/helper.html
new file mode 100644
index 00000000..36174d83
--- /dev/null
+++ b/_templates/helper.html
@@ -0,0 +1,33 @@
+---
+# This file is licensed under the MIT License (MIT) available on
+# http://opensource.org/licenses/MIT.
+
+layout: base
+id: helper
+---
+
+
+
+
+
+
+{% translate pagetitle choose-your-wallet %}
+{% translate pagedesc choose-your-wallet %}
+ {% include helpers/hero-social.html %} +
+
\ No newline at end of file
diff --git a/_translations/en.yml b/_translations/en.yml
index e1b11e51..78b26413 100644
--- a/_translations/en.yml
+++ b/_translations/en.yml
@@ -1094,6 +1094,7 @@ en:
bitcoin-for-businesses: bitcoin-for-businesses
buy: buy
choose-your-wallet: choose-your-wallet
+ helper: helper
community: community
developer-documentation: developer-documentation
developer-examples: developer-examples
diff --git a/img/helper/helper-illustration.svg b/img/helper/helper-illustration.svg
new file mode 100644
index 00000000..f9d8485c
Binary files /dev/null and b/img/helper/helper-illustration.svg differ
diff --git a/js/main.js b/js/main.js
index 8b6de73c..2123820c 100644
--- a/js/main.js
+++ b/js/main.js
@@ -635,60 +635,6 @@ function onScrollButton() {
});
}
}
-function walletMenuAccordion() {
- var tabs = document.querySelectorAll(".js-tab");
-
- for (var i = 0; i < tabs.length; i++) {
- tabs[i].addEventListener("click", function() {
- this.classList.toggle("is-expanded");
-
- for (var index = 0; index < tabs.length; index++) {
- if (this !== tabs[index]) {
- tabs[index].classList.remove("is-expanded");
- }
- }
- });
- }
-}
-function showNextMobileAccordion() {
- var platformItems = document.querySelectorAll(".js-platform");
- var tabs = document.querySelectorAll(".accordion-tab");
- var platformTab = document.querySelector(".accordion-tab-1");
- var osAccordion = document.querySelectorAll(".accordion-os");
- var walletAccordion = document.querySelector(".accordion-wallets");
-
- for (var i = 0; i < platformItems.length; i++) {
-
- platformItems[i].addEventListener("click", function(e) {
-
- for (var num = 0; num < tabs.length; num++) {
- tabs[num].classList.remove("is-selected");
- tabs[num].querySelector(".selected-item").textContent = "";
- }
-
- var selectedPlatform = e.target;
-
- var platformName = selectedPlatform.dataset.platformName;
- document.querySelector(".selected-platform").textContent = selectedPlatform.textContent;
-
- // Display next accordion and hide not selected accordion
- for (var a = 0; a < osAccordion.length; a++) {
- if (platformName === osAccordion[a].dataset.os) {
- osAccordion[a].classList.add("is-visible");
- osAccordion[a].querySelector('.accordion-tab-2').classList.add('is-expanded');
- platformTab.classList.add("is-selected");
- } else {
- osAccordion[a].classList.remove("is-visible");
- }
- }
-
- // Close accordion after selection
- platformTab.classList.remove("is-expanded");
- // Hide wallet accordion if user want to change platform
- walletAccordion.classList.remove("is-visible");
- });
- }
-}
function handleDevDocsRedirect(name) {
var blockchainGuideRedirects = ["proof-of-work", "block-height-and-forking", "transaction-data", "consensus-rule-changes", "detecting-forks", "term-consensus", "term-consensus-rules", "term-block", "term-merkle-root", "term-txid", "term-utxo", "term-transaction-fee", "term-miner", "term-proof-of-work", "term-target", "term-difficulty", "term-51-attack", "term-block-height", "term-genesis-block", "term-fork", "term-stale-block", "term-merkle-tree", "term-hard-fork", "term-soft-fork", "term-uasf", "term-masf"];
+
+
+
+
+ 
+
+
+
+
+ Let us help you to choose a Bitcoin wallet.
+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.
+ +