Add wallet selector sidebar
This commit is contained in:
alexcherman
parent
f0e65de930
commit
6c7e71ffa0
@ -6,90 +6,436 @@ http://opensource.org/licenses/MIT.
|
||||
<div class="wallet-selector">
|
||||
<div class="container">
|
||||
|
||||
<p class="wallet-table-headline">Below is a list of wallets available for your operating system</p>
|
||||
<table class="wallet-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="wallet-table-head">
|
||||
<p class="wallet-table-title">iOS Wallets:</p>
|
||||
</th>
|
||||
<th class="wallet-table-head">
|
||||
<p class="wallet-table-title">Control</p>
|
||||
</th>
|
||||
<th class="wallet-table-head">
|
||||
<p class="wallet-table-title">Validation</p>
|
||||
</th>
|
||||
<th class="wallet-table-head">
|
||||
<p class="wallet-table-title">Transparency</p>
|
||||
</th>
|
||||
<th class="wallet-table-head">
|
||||
<p class="wallet-table-title">Environment</p>
|
||||
</th>
|
||||
<th class="wallet-table-head">
|
||||
<p class="wallet-table-title">Fees</p>
|
||||
</th>
|
||||
<th class="wallet-table-head">
|
||||
<p class="wallet-table-title">Reuse</p>
|
||||
</th>
|
||||
<th class="wallet-table-head">
|
||||
<p class="wallet-table-title">Privacy<br>Disclosure</p>
|
||||
</th>
|
||||
<th class="wallet-table-head">
|
||||
<p class="wallet-table-title">Tor</p>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for wallet in site.wallets %}
|
||||
{% for platform in wallet.platform %}
|
||||
{% for os in platform.os %}
|
||||
<tr class="wallet-table-row">
|
||||
<td class="wallet-table-data">
|
||||
<img class="wallet-img" src="/img/wallet/{{ wallet.id }}.png?{{site.time | date: '%s'}}" alt="{{ wallet.title }}" />
|
||||
<span class="wallet-label">{{wallet.title}}</span>
|
||||
</td>
|
||||
{% for check in os.check %}
|
||||
{% assign checkName = check[0] %}
|
||||
{% if checkName == "privacy" %}
|
||||
{% continue %}
|
||||
{% endif %}
|
||||
{% assign checkValue = check[1] %}
|
||||
<td class="wallet-table-data">
|
||||
<div class="wallet-{% if checkValue contains 'checkgood' %}good{% elsif checkValue contains 'checkpass' %}good{% elsif checkValue contains 'checkfail' %}caution{% elsif checkValue contains 'checkneutral' %}neutral{% endif %}"></div>
|
||||
</td>
|
||||
{% endfor %}
|
||||
{% if os.privacycheck %}
|
||||
{% for privacycheck in os.privacycheck %}
|
||||
{% assign privacycheckValue = privacycheck[1] %}
|
||||
<td class="wallet-table-data">
|
||||
<div class="wallet-{% if privacycheckValue contains 'checkgood' %}good{% elsif privacycheckValue contains 'checkpass' %}good{% elsif privacycheckValue contains 'checkfail' %}caution{% elsif privacycheckValue contains 'checkneutral' %}neutral{% endif %}"></div>
|
||||
</td>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<td class="wallet-table-data">-</td>
|
||||
<td class="wallet-table-data">-</td>
|
||||
<td class="wallet-table-data">-</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="wallet-selector-row">
|
||||
<div class="sidebar-selector">
|
||||
<div class="sidebar-selector-section">
|
||||
<h3 class="sidebar-selector-title">Wallet type:</h3>
|
||||
<div class="sidebar-selector-platforms">
|
||||
<div class="sidebar-selector-platforms-row">
|
||||
<div class="sidebar-selector-platform">
|
||||
<div class="sidebar-selector-label-row">
|
||||
<h3 class="sidebar-selector-label">Mobile:</h3>
|
||||
<div class="sidebar-selector-info tooltip-trigger">
|
||||
<img src="/img/icons/info-alt.svg" alt="info">
|
||||
<div class="wallet-selector-tooltip tooltip">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-selector-os-row">
|
||||
<label class="platform-radio-wrapper">
|
||||
<input type="radio" class="platform-radio" name="platform"/>
|
||||
<div class="platform-radio-custom">
|
||||
<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="platform-radio-wrapper">
|
||||
<input type="radio" class="platform-radio" name="platform"/>
|
||||
<div class="platform-radio-custom">
|
||||
<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>
|
||||
<label class="platform-radio-wrapper">
|
||||
<input type="radio" class="platform-radio" name="platform"/>
|
||||
<div class="platform-radio-custom">
|
||||
<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>
|
||||
</div>
|
||||
<div class="sidebar-selector-platform">
|
||||
<div class="sidebar-selector-label-row">
|
||||
<h3 class="sidebar-selector-label">Desktop:</h3>
|
||||
<div class="sidebar-selector-info tooltip-trigger">
|
||||
<img src="/img/icons/info-alt.svg" alt="info">
|
||||
<div class="wallet-selector-tooltip tooltip">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-selector-os-row">
|
||||
<label class="platform-radio-wrapper">
|
||||
<input type="radio" class="platform-radio" name="platform"/>
|
||||
<div class="platform-radio-custom">
|
||||
<img src="/img/os/wallet_menu_linux.svg" alt="android" class="platform-radio-icon-inactive">
|
||||
<img src="/img/os/wallet_menu_linux_bright.svg" alt="android" class="platform-radio-icon-active">
|
||||
</div>
|
||||
</label>
|
||||
<label class="platform-radio-wrapper">
|
||||
<input type="radio" class="platform-radio" name="platform"/>
|
||||
<div class="platform-radio-custom">
|
||||
<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>
|
||||
<label class="platform-radio-wrapper">
|
||||
<input type="radio" class="platform-radio" name="platform"/>
|
||||
<div class="platform-radio-custom">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-selector-platforms-row">
|
||||
<div class="sidebar-selector-platform">
|
||||
<div class="sidebar-selector-label-row">
|
||||
<h3 class="sidebar-selector-label">Hardware:</h3>
|
||||
<div class="sidebar-selector-info tooltip-trigger">
|
||||
<img src="/img/icons/info-alt.svg" alt="info">
|
||||
<div class="wallet-selector-tooltip tooltip">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-selector-os-row">
|
||||
<label class="platform-radio-wrapper">
|
||||
<input type="radio" class="platform-radio" name="platform"/>
|
||||
<div class="platform-radio-custom">
|
||||
<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>
|
||||
</div>
|
||||
<div class="sidebar-selector-platform">
|
||||
<div class="sidebar-selector-label-row">
|
||||
<h3 class="sidebar-selector-label">Web:</h3>
|
||||
<div class="sidebar-selector-info tooltip-trigger">
|
||||
<img src="/img/icons/info-alt.svg" alt="info">
|
||||
<div class="wallet-selector-tooltip tooltip">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-selector-os-row">
|
||||
<label class="platform-radio-wrapper">
|
||||
<input type="radio" class="platform-radio" name="platform"/>
|
||||
<div class="platform-radio-custom">
|
||||
<img src="/img/os/wallet_menu_web.svg" alt="windows" class="platform-radio-icon-inactive">
|
||||
<img src="/img/os/wallet_menu_web_bright.svg" alt="windows" class="platform-radio-icon-active">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-selector-section">
|
||||
<h3 class="sidebar-selector-title">User type:</h3>
|
||||
<div class="user-radio-row">
|
||||
<label class="user-radio-wrapper">
|
||||
<input type="radio" class="user-radio" name="user" />
|
||||
<div class="user-radio-text">Bitcoin beginner</div>
|
||||
</label>
|
||||
<div class="sidebar-selector-info tooltip-trigger">
|
||||
<img src="/img/icons/info-alt.svg" alt="info">
|
||||
<div class="wallet-selector-tooltip tooltip">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-radio-row">
|
||||
<label class="user-radio-wrapper">
|
||||
<input type="radio" class="user-radio" name="user" />
|
||||
<div class="user-radio-text">Normal User</div>
|
||||
</label>
|
||||
<div class="sidebar-selector-info tooltip-trigger">
|
||||
<img src="/img/icons/info-alt.svg" alt="info">
|
||||
<div class="wallet-selector-tooltip tooltip">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-radio-row">
|
||||
<label class="user-radio-wrapper">
|
||||
<input type="radio" class="user-radio" name="user" />
|
||||
<div class="user-radio-text">Advance User</div>
|
||||
</label>
|
||||
<div class="sidebar-selector-info tooltip-trigger">
|
||||
<img src="/img/icons/info-alt.svg" alt="info">
|
||||
<div class="wallet-selector-tooltip tooltip">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-selector-section">
|
||||
<div class="sidebar-selector-section-top">
|
||||
<h3 class="sidebar-selector-title">Important criteria:</h3>
|
||||
<span class="allowed-criteria-amount">1/3</span>
|
||||
</div>
|
||||
<div class="important-checkbox-row">
|
||||
<label class="checkbox-wrapper">
|
||||
<input type="checkbox" class="checkbox" />
|
||||
<div class="checkbox-text">Control</div>
|
||||
</label>
|
||||
<div class="sidebar-selector-info tooltip-trigger">
|
||||
<img src="/img/icons/info-alt.svg" alt="info">
|
||||
<div class="wallet-selector-tooltip tooltip">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="important-checkbox-row">
|
||||
<label class="checkbox-wrapper">
|
||||
<input type="checkbox" class="checkbox" />
|
||||
<div class="checkbox-text">Validation</div>
|
||||
</label>
|
||||
<div class="sidebar-selector-info tooltip-trigger">
|
||||
<img src="/img/icons/info-alt.svg" alt="info">
|
||||
<div class="wallet-selector-tooltip tooltip">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="important-checkbox-row">
|
||||
<label class="checkbox-wrapper">
|
||||
<input type="checkbox" class="checkbox" />
|
||||
<div class="checkbox-text">Fees</div>
|
||||
</label>
|
||||
<div class="sidebar-selector-info tooltip-trigger">
|
||||
<img src="/img/icons/info-alt.svg" alt="info">
|
||||
<div class="wallet-selector-tooltip tooltip">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="important-checkbox-row">
|
||||
<label class="checkbox-wrapper">
|
||||
<input type="checkbox" class="checkbox" />
|
||||
<div class="checkbox-text">Transparency</div>
|
||||
</label>
|
||||
<div class="sidebar-selector-info tooltip-trigger">
|
||||
<img src="/img/icons/info-alt.svg" alt="info">
|
||||
<div class="wallet-selector-tooltip tooltip">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="important-checkbox-row">
|
||||
<label class="checkbox-wrapper">
|
||||
<input type="checkbox" class="checkbox" />
|
||||
<div class="checkbox-text">Environment</div>
|
||||
</label>
|
||||
<div class="sidebar-selector-info tooltip-trigger">
|
||||
<img src="/img/icons/info-alt.svg" alt="info">
|
||||
<div class="wallet-selector-tooltip tooltip">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="important-checkbox-row">
|
||||
<label class="checkbox-wrapper">
|
||||
<input type="checkbox" class="checkbox" />
|
||||
<div class="checkbox-text">Reuse</div>
|
||||
</label>
|
||||
<div class="sidebar-selector-info tooltip-trigger">
|
||||
<img src="/img/icons/info-alt.svg" alt="info">
|
||||
<div class="wallet-selector-tooltip tooltip">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="important-checkbox-row">
|
||||
<label class="checkbox-wrapper">
|
||||
<input type="checkbox" class="checkbox" />
|
||||
<div class="checkbox-text">Disclosure</div>
|
||||
</label>
|
||||
<div class="sidebar-selector-info tooltip-trigger">
|
||||
<img src="/img/icons/info-alt.svg" alt="info">
|
||||
<div class="wallet-selector-tooltip tooltip">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="important-checkbox-row">
|
||||
<label class="checkbox-wrapper">
|
||||
<input type="checkbox" class="checkbox" />
|
||||
<div class="checkbox-text">Tor</div>
|
||||
</label>
|
||||
<div class="sidebar-selector-info tooltip-trigger">
|
||||
<img src="/img/icons/info-alt.svg" alt="info">
|
||||
<div class="wallet-selector-tooltip tooltip">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-selector-section">
|
||||
<div class="sidebar-selector-section-top">
|
||||
<h3 class="sidebar-selector-title">Features:</h3>
|
||||
<span class="allowed-criteria-amount">1/2</span>
|
||||
</div>
|
||||
<div class="important-checkbox-row">
|
||||
<label class="checkbox-wrapper">
|
||||
<input type="checkbox" class="checkbox" />
|
||||
<div class="checkbox-text">Multisig</div>
|
||||
</label>
|
||||
<div class="sidebar-selector-info tooltip-trigger">
|
||||
<img src="/img/icons/info-alt.svg" alt="info">
|
||||
<div class="wallet-selector-tooltip tooltip">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="important-checkbox-row">
|
||||
<label class="checkbox-wrapper">
|
||||
<input type="checkbox" class="checkbox" />
|
||||
<div class="checkbox-text">Segwit</div>
|
||||
</label>
|
||||
<div class="sidebar-selector-info tooltip-trigger">
|
||||
<img src="/img/icons/info-alt.svg" alt="info">
|
||||
<div class="wallet-selector-tooltip tooltip">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="important-checkbox-row">
|
||||
<label class="checkbox-wrapper">
|
||||
<input type="checkbox" class="checkbox" />
|
||||
<div class="checkbox-text">Bech32</div>
|
||||
</label>
|
||||
<div class="sidebar-selector-info tooltip-trigger">
|
||||
<img src="/img/icons/info-alt.svg" alt="info">
|
||||
<div class="wallet-selector-tooltip tooltip">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="important-checkbox-row">
|
||||
<label class="checkbox-wrapper">
|
||||
<input type="checkbox" class="checkbox" />
|
||||
<div class="checkbox-text">Lightning</div>
|
||||
</label>
|
||||
<div class="sidebar-selector-info tooltip-trigger">
|
||||
<img src="/img/icons/info-alt.svg" alt="info">
|
||||
<div class="wallet-selector-tooltip tooltip">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="important-checkbox-row">
|
||||
<label class="checkbox-wrapper">
|
||||
<input type="checkbox" class="checkbox" />
|
||||
<div class="checkbox-text">Lorem ipsum</div>
|
||||
</label>
|
||||
<div class="sidebar-selector-info tooltip-trigger">
|
||||
<img src="/img/icons/info-alt.svg" alt="info">
|
||||
<div class="wallet-selector-tooltip tooltip">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="important-checkbox-row">
|
||||
<label class="checkbox-wrapper">
|
||||
<input type="checkbox" class="checkbox" />
|
||||
<div class="checkbox-text">Lorem ipsum</div>
|
||||
</label>
|
||||
<div class="sidebar-selector-info tooltip-trigger">
|
||||
<img src="/img/icons/info-alt.svg" alt="info">
|
||||
<div class="wallet-selector-tooltip tooltip">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="sidebar-selector-title">Need some help?</h3>
|
||||
<p class="sidebar-selector-text">You can find more information and help on the resources and community pages or on the Wiki FAQ</p>
|
||||
</div>
|
||||
|
||||
<div class="wallet-hints-row">
|
||||
<div class="wallet-hint">
|
||||
<div class="wallet-good"></div>
|
||||
<p class="wallet-hint-text">- Good</p>
|
||||
</div>
|
||||
<div class="wallet-hint">
|
||||
<div class="wallet-caution"></div>
|
||||
<p class="wallet-hint-text">- Caution</p>
|
||||
</div>
|
||||
<div class="wallet-hint">
|
||||
<div class="wallet-neutral"></div>
|
||||
<p class="wallet-hint-text">- Neural</p>
|
||||
<div>
|
||||
<p class="wallet-table-headline">Below is a list of wallets available for your operating system</p>
|
||||
<table class="wallet-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="wallet-table-head">
|
||||
<p class="wallet-table-title">iOS Wallets:</p>
|
||||
</th>
|
||||
<th class="wallet-table-head">
|
||||
<p class="wallet-table-title">Control</p>
|
||||
</th>
|
||||
<th class="wallet-table-head">
|
||||
<p class="wallet-table-title">Validation</p>
|
||||
</th>
|
||||
<th class="wallet-table-head">
|
||||
<p class="wallet-table-title">Transparency</p>
|
||||
</th>
|
||||
<th class="wallet-table-head">
|
||||
<p class="wallet-table-title">Environment</p>
|
||||
</th>
|
||||
<th class="wallet-table-head">
|
||||
<p class="wallet-table-title">Fees</p>
|
||||
</th>
|
||||
<th class="wallet-table-head">
|
||||
<p class="wallet-table-title">Reuse</p>
|
||||
</th>
|
||||
<th class="wallet-table-head">
|
||||
<p class="wallet-table-title">Privacy<br>Disclosure</p>
|
||||
</th>
|
||||
<th class="wallet-table-head">
|
||||
<p class="wallet-table-title">Tor</p>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for wallet in site.wallets %}
|
||||
{% for platform in wallet.platform %}
|
||||
{% for os in platform.os %}
|
||||
<tr class="wallet-table-row">
|
||||
<td class="wallet-table-data">
|
||||
<img class="wallet-img" src="/img/wallet/{{ wallet.id }}.png?{{site.time | date: '%s'}}" alt="{{ wallet.title }}" />
|
||||
<span class="wallet-label">{{wallet.title}}</span>
|
||||
</td>
|
||||
{% for check in os.check %}
|
||||
{% assign checkName = check[0] %}
|
||||
{% if checkName == "privacy" %}
|
||||
{% continue %}
|
||||
{% endif %}
|
||||
{% assign checkValue = check[1] %}
|
||||
<td class="wallet-table-data">
|
||||
<div class="wallet-{% if checkValue contains 'checkgood' %}good{% elsif checkValue contains 'checkpass' %}good{% elsif checkValue contains 'checkfail' %}caution{% elsif checkValue contains 'checkneutral' %}neutral{% endif %}"></div>
|
||||
</td>
|
||||
{% endfor %}
|
||||
{% if os.privacycheck %}
|
||||
{% for privacycheck in os.privacycheck %}
|
||||
{% assign privacycheckValue = privacycheck[1] %}
|
||||
<td class="wallet-table-data">
|
||||
<div class="wallet-{% if privacycheckValue contains 'checkgood' %}good{% elsif privacycheckValue contains 'checkpass' %}good{% elsif privacycheckValue contains 'checkfail' %}caution{% elsif privacycheckValue contains 'checkneutral' %}neutral{% endif %}"></div>
|
||||
</td>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<td class="wallet-table-data">-</td>
|
||||
<td class="wallet-table-data">-</td>
|
||||
<td class="wallet-table-data">-</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="wallet-hints-row">
|
||||
<div class="wallet-hint">
|
||||
<div class="wallet-good"></div>
|
||||
<p class="wallet-hint-text">- Good</p>
|
||||
</div>
|
||||
<div class="wallet-hint">
|
||||
<div class="wallet-caution"></div>
|
||||
<p class="wallet-hint-text">- Caution</p>
|
||||
</div>
|
||||
<div class="wallet-hint">
|
||||
<div class="wallet-neutral"></div>
|
||||
<p class="wallet-hint-text">- Neural</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
151
_sass/_wallet-selector.scss
Normal file
151
_sass/_wallet-selector.scss
Normal file
@ -0,0 +1,151 @@
|
||||
.tooltip-trigger {
|
||||
position: relative;
|
||||
}
|
||||
.tooltip {
|
||||
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;
|
||||
}
|
||||
|
||||
.wallet-selector {
|
||||
padding: 50px 0 25px;
|
||||
}
|
||||
.wallet-selector-row {
|
||||
display: flex;
|
||||
}
|
||||
.sidebar-selector {
|
||||
width: 270px;
|
||||
padding: 15px;
|
||||
margin-right: 130px;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
.sidebar-selector-title {
|
||||
margin: 0 0 5px;
|
||||
font-size: 20px;
|
||||
color: #13161F;
|
||||
line-height: 36px;
|
||||
}
|
||||
.sidebar-selector-platforms-row {
|
||||
display: flex;
|
||||
}
|
||||
.sidebar-selector-platform {
|
||||
width: 100%;
|
||||
}
|
||||
.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-table-head {
|
||||
border: none;
|
||||
}
|
||||
.wallet-table {
|
||||
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 {
|
||||
cursor: pointer;
|
||||
}
|
||||
.wallet-table-data {
|
||||
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;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.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-headline {
|
||||
margin-bottom: 37px;
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
color: #13161F;
|
||||
line-height: 36px;
|
||||
}
|
||||
.wallet-table-head:first-child .wallet-table-title {
|
||||
text-align: left;
|
||||
font-size: 22px;
|
||||
color: #13161F;
|
||||
line-height: 36px;
|
||||
}
|
||||
@ -133,105 +133,6 @@ $checks: control, validation, transparency, environment, fees, privacy;
|
||||
|
||||
$scores: good $black 600, pass $black 600, neutral $black 600, fail $black 600;
|
||||
|
||||
.wallet-selector {
|
||||
padding: 50px 0 25px;
|
||||
}
|
||||
.wallet-table-head {
|
||||
border: none;
|
||||
}
|
||||
.wallet-table {
|
||||
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 {
|
||||
cursor: pointer;
|
||||
}
|
||||
.wallet-table-data {
|
||||
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;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.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-headline {
|
||||
margin-bottom: 37px;
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
color: #13161F;
|
||||
line-height: 36px;
|
||||
}
|
||||
.wallet-table-head:first-child .wallet-table-title {
|
||||
text-align: left;
|
||||
font-size: 22px;
|
||||
color: #13161F;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.wallet {
|
||||
.wallet-logo-container {
|
||||
text-align: center;
|
||||
@ -564,12 +465,6 @@ $scores: good $black 600, pass $black 600, neutral $black 600, fail $black 600;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
// .wallet-os-ico-dark {
|
||||
// display: block;
|
||||
// width: 18px;
|
||||
// height: 18px;
|
||||
// }
|
||||
|
||||
.wallet-list-os-link:hover .wallet-ico-tooltip {
|
||||
display: block;
|
||||
}
|
||||
@ -842,3 +737,340 @@ $scores: good $black 600, pass $black 600, neutral $black 600, fail $black 600;
|
||||
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-wrapper .checkbox:checked + .checkbox-text:before {
|
||||
background: #F7931A url('../img/icons/check.svg') center no-repeat;
|
||||
border: 1px solid #F7931A;
|
||||
}
|
||||
.checkbox-wrapper .checkbox:checked + .checkbox-text {
|
||||
color: #13161F;
|
||||
}
|
||||
|
||||
|
||||
.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-wrapper .user-radio:checked + .user-radio-text:after {
|
||||
opacity: 1;
|
||||
}
|
||||
.user-radio-wrapper .user-radio:checked + .user-radio-text {
|
||||
color: #13161F
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.allowed-criteria-amount {
|
||||
margin-bottom: 5px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #13161F;
|
||||
text-align: right;
|
||||
line-height: 30px;
|
||||
}
|
||||
.important-checkbox-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.important-checkbox-row + .important-checkbox-row {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.wallet-table-head {
|
||||
border: none;
|
||||
}
|
||||
.wallet-table {
|
||||
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 {
|
||||
cursor: pointer;
|
||||
}
|
||||
.wallet-table-data {
|
||||
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;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.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-headline {
|
||||
margin-bottom: 37px;
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
color: #13161F;
|
||||
line-height: 36px;
|
||||
}
|
||||
.wallet-table-head:first-child .wallet-table-title {
|
||||
text-align: left;
|
||||
font-size: 22px;
|
||||
color: #13161F;
|
||||
line-height: 36px;
|
||||
}
|
||||
BIN
img/icons/check.svg
Normal file
BIN
img/icons/check.svg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
img/icons/info-alt.svg
Normal file
BIN
img/icons/info-alt.svg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
Loading…
Reference in New Issue
Block a user