Add first wizard page
This commit is contained in:
alexcherman
parent
786f4bef7b
commit
2010bbbb78
20
_config.yml
20
_config.yml
@ -164,6 +164,26 @@ redirects:
|
||||
/sr/developer-glossary: /sr/programeri-recnik
|
||||
/sr/developer-guide: /sr/programeri-vodic
|
||||
/sr/developer-reference: /sr/programeri-reference
|
||||
## Helper bitcoin page; remove as each language is updated to include the translated page
|
||||
/ar/helper: /en/helper
|
||||
/bg/helper: /en/helper
|
||||
/da/helper: /en/helper
|
||||
/el/helper: /en/helper
|
||||
/es/helper: /en/helper
|
||||
/fa/helper: /en/helper
|
||||
/fr/helper: /en/helper
|
||||
/hi/helper: /en/helper
|
||||
/hu/helper: /en/helper
|
||||
/ko/helper: /en/helper
|
||||
/nl/helper: /en/helper
|
||||
/pl/helper: /en/helper
|
||||
/ro/helper: /en/helper
|
||||
/ru/helper: /en/helper
|
||||
/sl/helper: /en/helper
|
||||
/sv/helper: /en/helper
|
||||
/tr/helper: /en/helper
|
||||
/uk/helper: /en/helper
|
||||
/zh_TW/helper: /en/helper
|
||||
## Buy bitcoin page; remove as each language is updated to include the translated page
|
||||
/ar/buy: /en/buy
|
||||
/bg/buy: /en/buy
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<p class="mainsummary">{% translate listintro %}</p>
|
||||
<div class="btn-container">
|
||||
<a class="btn btn-bright btn-home" href="/{{ page.lang }}/{% translate getting-started url %}">{% translate getstarted layout %}</a>
|
||||
<a class="btn btn-light btn-home" href="/{{ page.lang }}/{% translate choose-your-wallet url %}">{% translate choosebut getting-started %}</a>
|
||||
<a class="btn btn-light btn-home" href="/{{ page.lang }}/{% translate helper url %}">{% translate choosebut getting-started %}</a>
|
||||
</div>
|
||||
|
||||
<div class="mainvideo">
|
||||
|
||||
@ -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
|
||||
max_wallet_text_length: 418 ## Unicode characters
|
||||
---
|
||||
<div class="wallet" data-id="{{page.wallet.id}}">
|
||||
|
||||
@ -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: |
|
||||
<script>walletMenuAccordion();</script>
|
||||
<script>showNextMobileAccordion();</script>
|
||||
---
|
||||
|
||||
{{ content }}
|
||||
|
||||
{% if page.id != "choose-your-wallet" %}
|
||||
<script>
|
||||
var pageUrl = (window.location.pathname).split("/").filter(Boolean);
|
||||
var platform = pageUrl[2];
|
||||
var os = pageUrl[3];
|
||||
var wallet = pageUrl[4];
|
||||
var platformTab = document.querySelector('.accordion-tab-1');
|
||||
|
||||
platformTab.classList.add('is-selected');
|
||||
document.querySelector('.selected-platform').textContent = platform;
|
||||
|
||||
if (os) {
|
||||
if (platform === "desktop" || platform === "mobile") {
|
||||
var osAccordion = document.querySelectorAll('.accordion-os');
|
||||
// Display relevant os accordion
|
||||
for (var a = 0; a < osAccordion.length; a++) {
|
||||
if (platform === osAccordion[a].dataset.os) {
|
||||
var relevantOsAcc = osAccordion[a];
|
||||
relevantOsAcc.classList.add('is-visible');
|
||||
|
||||
// Made relevant accordion tab selected
|
||||
relevantOsAcc.querySelector('.accordion-tab-2').classList.add('is-selected');
|
||||
relevantOsAcc.querySelector('.selected-os').textContent = os;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
wallet = os;
|
||||
}
|
||||
}
|
||||
|
||||
if (wallet) {
|
||||
var walletTab = document.querySelector('.accordion-tab-3');
|
||||
walletTab.classList.add('is-selected');
|
||||
walletTab.classList.remove('is-expanded');
|
||||
}
|
||||
</script>
|
||||
{% endif %}
|
||||
@ -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
|
||||
---
|
||||
|
||||
<div class="hero">
|
||||
|
||||
36
_sass/_helper.scss
Normal file
36
_sass/_helper.scss
Normal file
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -5043,6 +5043,8 @@ br.big {
|
||||
}
|
||||
}
|
||||
|
||||
@import 'helper';
|
||||
@import 'wallets';
|
||||
@import 'wallet-selector';
|
||||
@import 'wallets-menu';
|
||||
@import 'donation-banner';
|
||||
|
||||
33
_templates/helper.html
Normal file
33
_templates/helper.html
Normal file
@ -0,0 +1,33 @@
|
||||
---
|
||||
# This file is licensed under the MIT License (MIT) available on
|
||||
# http://opensource.org/licenses/MIT.
|
||||
|
||||
layout: base
|
||||
id: helper
|
||||
---
|
||||
|
||||
<div class="hero">
|
||||
<div class="container hero-container">
|
||||
<h1>{% translate pagetitle choose-your-wallet %}</h1>
|
||||
<p class="summary">{% translate pagedesc choose-your-wallet %}</p>
|
||||
{% include helpers/hero-social.html %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="helper">
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@ -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
|
||||
|
||||
BIN
img/helper/helper-illustration.svg
Normal file
BIN
img/helper/helper-illustration.svg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
54
js/main.js
54
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"];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user