395 lines
18 KiB
HTML
395 lines
18 KiB
HTML
---
|
||
# This file is licensed under the MIT License (MIT) available on
|
||
# http://opensource.org/licenses/MIT.
|
||
|
||
layout: base
|
||
max_wallet_text_length: 418 ## Unicode characters
|
||
---
|
||
<div class="wallet" data-id="{{page.wallet.id}}">
|
||
<div class="hero">
|
||
<div class="container wallet-logo-container hero-container">
|
||
<img class="wallet-logo" src="/img/wallet/{{ page.wallet.id }}.png" alt="{{ page.wallet.title }}" />
|
||
<h1 class="wallet-title">
|
||
{{ page.wallet.title }}
|
||
</h1>
|
||
<p class="wallet-description">
|
||
{% translate wallet{{page.wallet.id}} choose-your-wallet %}
|
||
</p>
|
||
<div class="features">
|
||
<div class="feature-header">
|
||
<div class="line"></div>
|
||
<p class="features-title">{% translate wallet-selector-features choose-your-wallet %}:</p>
|
||
<div class="line"></div>
|
||
</div>
|
||
{% assign features = page.os.features | split: " " %}
|
||
<div class="features-elements">
|
||
{% for featureName in features %}
|
||
<div class="features-element">
|
||
<div class="features-element-left">
|
||
<img src="/img/icons/checked.svg" alt="checked" />
|
||
<p class="features-text">
|
||
{% translate wizard-feature-{{featureName}} choose-your-wallet %}
|
||
</p>
|
||
</div>
|
||
<div class="information-icon">
|
||
<img src="/img/icons/information.svg" alt="information" onclick="showModal('feature-{{featureName}}')" />
|
||
<div id="feature-{{featureName}}" class="tooltip features-tooltip">
|
||
<div class="close-btn" onclick="closeModal('feature-{{featureName}}')">×</div>
|
||
<div class="tooltip-title">
|
||
{% translate wizard-feature-{{featureName}} choose-your-wallet %}:
|
||
</div>
|
||
<div class="tooltip-text">
|
||
{% translate wizard-feature-{{featureName}}-description choose-your-wallet %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wallet-platforms">
|
||
<div class="container">
|
||
{% assign platform = page.platform %} {% assign pageOs = page.os %}
|
||
<div class="wallet-platforms-row">
|
||
<div class="wallet-points">
|
||
<div class="wallet-hints-row">
|
||
<div class="wallet-hint">
|
||
<div class="wallet-good"></div>
|
||
<p class="wallet-hint-text">{% translate wallet-scoring-good choose-your-wallet %}</p>
|
||
</div>
|
||
<div class="wallet-hint">
|
||
<div class="wallet-pass"></div>
|
||
<p class="wallet-hint-text">{% translate wallet-scoring-pass choose-your-wallet %}</p>
|
||
</div>
|
||
<div class="wallet-hint">
|
||
<div class="wallet-caution"></div>
|
||
<p class="wallet-hint-text">{% translate wallet-scoring-fail choose-your-wallet %}</p>
|
||
</div>
|
||
<div class="wallet-hint">
|
||
<div class="wallet-neutral"></div>
|
||
<p class="wallet-hint-text">{% translate wallet-scoring-neutral choose-your-wallet %}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wallet-os-overview">
|
||
<div class="wallet-os-checks">
|
||
{% for check in pageOs.check %} {% assign checkName = check[0] %} {% assign checkValue = check[1] %}
|
||
<div
|
||
class="wallet-os-check-item check{{ checkName }} {% if checkValue contains 'checkgood' %}checkgood{% elsif checkValue contains 'checkpass' %}checkpass{% elsif checkValue contains 'checkneutral' %}checkneutral{% else %}checkfail{% endif %}">
|
||
<p class="wallet-os-check-title">
|
||
{% translate {{checkValue}} choose-your-wallet %}
|
||
</p>
|
||
<div class="wallet-os-check-details">
|
||
<p>{% translate {{checkValue}}txt choose-your-wallet %}</p>
|
||
{% if checkName == 'privacy' and pageOs.privacycheck %} {% for privacycheck in pageOs.privacycheck %}
|
||
<div
|
||
class="check{{ privacycheck[0] }} {% if privacycheck[1] contains 'checkgood' %}checkgood{% elsif privacycheck[1] contains 'checkpass' %}checkpass{% elsif privacycheck[1] contains 'checkneutral' %}checkneutral{% else %}checkfail{% endif %}">
|
||
<p class="wallet-privacy-subhead">{% translate {{privacycheck[1]}} choose-your-wallet %}</p>
|
||
<p>{% translate {{privacycheck[1]}}txt choose-your-wallet %}</p>
|
||
</div>
|
||
{% endfor %} {% endif %}
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="os-selector">
|
||
<div id="walletAccordion" class="acc wallet-accordion">
|
||
<button id="walletAccordionButton" class="acc-btn wallet-accordion-btn" data-button-os=""></button>
|
||
<div class="acc-content wallet-accordion-content">
|
||
<div class="os-selector-tabs">
|
||
{% for platform in page.wallet.platform %}
|
||
{% for platformOs in platform.os %}
|
||
<button class="acc-content-btn os-selector-tab" data-tab="{{platformOs.name}}">
|
||
<img src="/img/os/wallet_menu_{{platformOs.name}}.svg" alt="{{platformOs.name}} logo"
|
||
class="os-selector-icon os-selector-{{platformOs.name}}-icon os-selector-icon-inactive">
|
||
<img src="/img/os/wallet_menu_{{platformOs.name}}_bright.svg" alt="{{platformOs.name}} logo"
|
||
class="os-selector-icon os-selector-{{platformOs.name}}-icon os-selector-icon-active">
|
||
{{platformOs.name}}
|
||
</button>
|
||
{% endfor %}
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{% for platform in page.wallet.platform %}
|
||
{% for platformOs in platform.os %}
|
||
{% capture url %}{{ page.url | split: "/"}}{% endcapture %}
|
||
{% if url contains platformOs.name %}
|
||
{% assign tabContentClass = 'visible' %}
|
||
{% else %}
|
||
{% assign tabContentClass = '' %}
|
||
{% endif %}
|
||
<div class="os-selector-content {{tabContentClass}}" data-content="{{platformOs.name}}">
|
||
<div class="os-selector-links-row">
|
||
{% if platformOs.link == 'bitcoincore' %}
|
||
<a class="os-selector-link btn-bright"
|
||
href="/{{ page.lang }}/{% translate download url %}">{% translate walletdownload choose-your-wallet %}</a>
|
||
{% elsif platformOs.link contains 'play.google.com' or platformOs.link contains 'itunes.apple.com' or platformOs.link contains 'apps.apple.com' or platformOs.link contains 'chrome.google.com' %}
|
||
<a class="os-selector-link btn-bright"
|
||
href="{{ platformOs.link }}">{% translate walletdownload choose-your-wallet %}</a>
|
||
{% else %}
|
||
<a class="os-selector-link btn-bright"
|
||
href="{{ platformOs.link }}">{% translate walletvisit choose-your-wallet %}</a>
|
||
{% endif %}
|
||
{% if platformOs.source %}
|
||
<a class="os-selector-link btn-light" href="{{ platformOs.source }}">
|
||
{% translate walletsourcecode choose-your-wallet %}</a>
|
||
{% endif %}
|
||
</div>
|
||
<img src="/img/screenshots/{{platformOs.screenshot}}" class="os-screenshot" alt="screenshot">
|
||
</div>
|
||
{% endfor %}
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="wallet-table-wrapper wallet-selector-section similar-wallets-table">
|
||
|
||
<h2 id="walletTableLabel" class="wallet-table-label">{% translate wallet-selector-similar choose-your-wallet %} {{os.name}} {% translate wallet-selector-results-wallets choose-your-wallet %}</h2>
|
||
|
||
<div class="table-sort">
|
||
<h3 id="tableSortTitle" class="table-sort-title">{% translate wallet-selector-sort choose-your-wallet %}:</h3>
|
||
<div id="tableAccordion" class="acc">
|
||
<button id="tableAccordionButton" class="acc-btn">{% translate wizard-criteria-control choose-your-wallet %}</button>
|
||
<div class="acc-content">
|
||
<button class="acc-content-btn table-sort-btn" data-sort="control">{% translate wizard-criteria-control choose-your-wallet %}</button>
|
||
<button class="acc-content-btn table-sort-btn" data-sort="validation">{% translate wizard-criteria-validation choose-your-wallet %}</button>
|
||
<button class="acc-content-btn table-sort-btn" data-sort="transparency">{% translate wizard-criteria-transparency choose-your-wallet %}</button>
|
||
<button class="acc-content-btn table-sort-btn" data-sort="environment">{% translate wizard-criteria-environment choose-your-wallet %}</button>
|
||
<button class="acc-content-btn table-sort-btn" data-sort="privacy">{% translate wizard-criteria-privacy choose-your-wallet %}</button>
|
||
<button class="acc-content-btn table-sort-btn" data-sort="fees">{% translate wizard-criteria-fees choose-your-wallet %}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wallet-table">
|
||
<div class="wallet-table-row">
|
||
<div class="wallet-table-head">
|
||
<p class="wallet-table-title">Similar {{os.name}} wallets</p>
|
||
</div>
|
||
<div class="wallet-table-head">
|
||
<p class="wallet-table-title">{% translate wizard-criteria-control choose-your-wallet %}</p>
|
||
</div>
|
||
<div class="wallet-table-head">
|
||
<p class="wallet-table-title">{% translate wizard-criteria-validation choose-your-wallet %}</p>
|
||
</div>
|
||
<div class="wallet-table-head">
|
||
<p class="wallet-table-title">{% translate wizard-criteria-transparency choose-your-wallet %}</p>
|
||
</div>
|
||
<div class="wallet-table-head">
|
||
<p class="wallet-table-title">{% translate wizard-criteria-environment choose-your-wallet %}</p>
|
||
</div>
|
||
<div class="wallet-table-head">
|
||
<p class="wallet-table-title">{% translate wizard-criteria-privacy choose-your-wallet %}</p>
|
||
</div>
|
||
<div class="wallet-table-head">
|
||
<p class="wallet-table-title">{% translate wizard-criteria-fees choose-your-wallet %}</p>
|
||
</div>
|
||
</div>
|
||
|
||
{% for wallet in site.wallets %}
|
||
{% assign id = wallet.id | remove: '/wallets/' %}
|
||
{% for platform in wallet.platform %}
|
||
{% for os in platform.os %}
|
||
<a
|
||
href="{% if platform.name == os.name %}/{{page.lang}}/wallets/{{platform.name}}/{{id}}/{% else %}/{{page.lang}}/wallets/{{platform.name}}/{{os.name}}/{{id}}/{% endif %}"
|
||
class="wallet-table-row wallet-link"
|
||
data-categories="{% if wallet.user %}{{wallet.user}}{% endif %} experienced {% for check in os.check %}{% assign checkValue = check[1] %}{% assign checkName = check[0] %}{% if checkValue contains 'checkgood' %}{{checkName}} {% endif %}{% endfor %}{{os.name}} {{os.features}}"
|
||
data-id="{{id}}"
|
||
>
|
||
<div class="wallet-table-data">
|
||
<img class="wallet-img" src="/img/wallet/{{id}}.png" alt="{{ wallet.title }}" />
|
||
<span class="wallet-label">{{wallet.titleshort}}</span>
|
||
</div>
|
||
{% for check in os.check %}
|
||
{% assign checkName = check[0] %}
|
||
{% assign checkValue = check[1] %}
|
||
<div class="wallet-table-data" data-cell="{{checkName}}">
|
||
<div class="wallet-score-wrapper">
|
||
{% if checkValue contains 'checkgood' %}
|
||
<span class="wallet-table-text">{% translate wallet-scoring-good choose-your-wallet %}</span>
|
||
<div class="wallet-score wallet-good"></div>
|
||
{% elsif checkValue contains 'checkpass' %}
|
||
<span class="wallet-table-text">{% translate wallet-scoring-pass choose-your-wallet %}</span>
|
||
<div class="wallet-score wallet-pass"></div>
|
||
{% elsif checkValue contains 'checkfail' %}
|
||
<span class="wallet-table-text">{% translate wallet-scoring-fail choose-your-wallet %}</span>
|
||
<div class="wallet-score wallet-caution"></div>
|
||
{% elsif checkValue contains 'checkneutral' %}
|
||
<span class="wallet-table-text">{% translate wallet-scoring-neutral choose-your-wallet %}</span>
|
||
<div class="wallet-score wallet-neutral"></div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</a>
|
||
{% endfor %}
|
||
{% endfor %}
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<div class="wallet-hints-row">
|
||
<div class="wallet-hint">
|
||
<div class="wallet-good"></div>
|
||
<p class="wallet-hint-text">{% translate wallet-scoring-good choose-your-wallet %}</p>
|
||
</div>
|
||
<div class="wallet-hint">
|
||
<div class="wallet-pass"></div>
|
||
<p class="wallet-hint-text">{% translate wallet-scoring-pass choose-your-wallet %}</p>
|
||
</div>
|
||
<div class="wallet-hint">
|
||
<div class="wallet-caution"></div>
|
||
<p class="wallet-hint-text">{% translate wallet-scoring-fail choose-your-wallet %}</p>
|
||
</div>
|
||
<div class="wallet-hint">
|
||
<div class="wallet-neutral"></div>
|
||
<p class="wallet-hint-text">{% translate wallet-scoring-neutral choose-your-wallet %}</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script data-proofer-ignore>
|
||
var tabSelectors = Array.prototype.slice.call(document.querySelectorAll('.os-selector-tab'));
|
||
var linksList = Array.prototype.slice.call(document.querySelectorAll('.wallet-link'));
|
||
var tooltipsList = Array.prototype.slice.call(document.querySelectorAll('.tooltip'));
|
||
|
||
tooltipsList.forEach(function (tooltip) {
|
||
document.addEventListener('click', function(e){
|
||
if (e.target.closest('.tooltip')){
|
||
console.log('click inside');
|
||
return;
|
||
}
|
||
tooltip.style.display === 'block' && closeModal(tooltip.id)
|
||
});
|
||
})
|
||
|
||
function showModal(feature) {
|
||
var tooltip = document.getElementById(feature);
|
||
setTimeout(function() {
|
||
tooltip.style.display = "block";
|
||
}, 0);
|
||
}
|
||
|
||
function closeModal(feature) {
|
||
var tooltip = document.getElementById(feature);
|
||
tooltip.style.display = "none";
|
||
}
|
||
|
||
function selectRelevantTab(os) {
|
||
for (var i = 0; i < tabSelectors.length; i++) {
|
||
var tab = tabSelectors[i];
|
||
if (tab.dataset.tab === os) tab.classList.add('active');
|
||
else tab.classList.remove('active');
|
||
}
|
||
|
||
var tabContents = document.querySelectorAll('.os-selector-content');
|
||
for (var j = 0; j < tabContents.length; j++) {
|
||
var content = tabContents[j];
|
||
if (content.dataset.content === os) content.classList.add('visible');
|
||
else content.classList.remove('visible');
|
||
}
|
||
var walletAccordionButton = document.getElementById('walletAccordionButton');
|
||
var walletAccordion = document.getElementById('walletAccordion');
|
||
changeAccordionButtonText(walletAccordionButton, os);
|
||
walletAccordionButton.dataset.buttonOs = os;
|
||
walletAccordion.classList.remove('open');
|
||
}
|
||
|
||
function displayDefaultTabContent() {
|
||
var tabSelector = document.querySelector('.wallet-accordion');
|
||
tabSelector.classList.add('visible');
|
||
var urlPath = window.location.pathname.split('/');
|
||
|
||
for (var i = 0; i < tabSelectors.length; i++) {
|
||
var tabName = tabSelectors[i].dataset.tab;
|
||
if (urlPath.indexOf(tabName) > -1) {
|
||
selectRelevantTab(tabName);
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
function setListners() {
|
||
tabSelectors.forEach(function(tab) {
|
||
tab.addEventListener('click', function() {
|
||
selectRelevantTab(this.dataset.tab);
|
||
});
|
||
})
|
||
|
||
linksList.forEach(function(link) {
|
||
link.addEventListener('click', function(e) {
|
||
var href = this.getAttribute("href");
|
||
location.href = href + window.location.search;
|
||
e.preventDefault();
|
||
});
|
||
});
|
||
|
||
var accordionButtons = Array.prototype.slice.call(document.querySelectorAll('.acc-btn'));
|
||
accordionButtons.forEach(function(button) {
|
||
button.addEventListener('click', function() {
|
||
this.parentNode.classList.toggle('open');
|
||
});
|
||
});
|
||
|
||
var tableSortButtons = Array.prototype.slice.call(document.querySelectorAll('.table-sort-btn'));
|
||
tableSortButtons.forEach(function(button) {
|
||
button.addEventListener('click', function() {
|
||
sortTableColumn(button.dataset.sort);
|
||
});
|
||
});
|
||
|
||
}
|
||
|
||
function checkIfPlatformSelected(filters) {
|
||
var platforms = document.querySelectorAll('[data-tab]');
|
||
var isPlatformSelected = false;
|
||
|
||
for (var i = 0; i < platforms.length; i++) {
|
||
var platform = platforms[i];
|
||
if(filters.indexOf(platform.dataset.tab) > -1) isPlatformSelected = true;
|
||
}
|
||
|
||
return isPlatformSelected;
|
||
}
|
||
|
||
function displaySimilarWallets() {
|
||
var parameters = queryStringToArray();
|
||
if (!checkIfPlatformSelected(parameters)) return;
|
||
var currentWalletId = document.querySelector('.wallet').dataset.id;
|
||
|
||
for (var i = 0; i < linksList.length; i++) {
|
||
var link = linksList[i];
|
||
var categories = link.dataset.categories.split(' ');
|
||
var linkId = link.dataset.id;
|
||
|
||
if (checkIfFiltersInclude(categories, parameters) && linkId !== currentWalletId) link.classList.add('visible');
|
||
else link.classList.remove('visible');
|
||
}
|
||
|
||
var visibleWalletsLinks = document.querySelectorAll('.wallet-link.visible');
|
||
var walletsTable = document.querySelector('.wallet-selector-section');
|
||
if (visibleWalletsLinks.length) walletsTable.classList.add('visible');
|
||
}
|
||
|
||
function init() {
|
||
displayDefaultTabContent();
|
||
displaySimilarWallets();
|
||
sortTableColumn('control');
|
||
setListners();
|
||
}
|
||
init();
|
||
</script>
|