mirror of https://github.com/BTCPrivate/copay.git
Merge pull request #253 from bitjson/wip/design
Full design review & polishing onboarding process
This commit is contained in:
Jason Dreyzehner
GitHub
commit
3068fc31f4
|
|
@ -20,7 +20,8 @@
|
|||
<preference name="ShowSplashScreenSpinner" value="false" />
|
||||
<preference name="AutoHideSplashScreen" value="false" />
|
||||
<preference name="FadeSplashScreen" value="true" />
|
||||
<preference name="FadeSplashScreenDuration" value="1" />
|
||||
<preference name="FadeSplashScreenDuration" value=".3" />
|
||||
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
|
||||
<preference name="StatusBarOverlaysWebView" value="true" />
|
||||
<preference name="StatusBarBackgroundColor" value="#1e3186" />
|
||||
<preference name="StatusBarStyle" value="lightcontent" />
|
||||
|
|
@ -29,6 +30,7 @@
|
|||
<preference name="Orientation" value="default" />
|
||||
|
||||
<!-- Plugins -->
|
||||
<plugin name="cordova-plugin-device" spec="~1.1.3"/>
|
||||
<plugin name="cordova-plugin-globalization" spec="~1.0.4" />
|
||||
<plugin name="cordova.plugins.diagnostic" spec="~3.2.1" />
|
||||
<plugin name="cordova-plugin-splashscreen" spec="~4.0.0" />
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
"scripts": {
|
||||
"preinstall": "bower install && npm i fs-extra",
|
||||
"postinstall": "npm run apply:bitpay && cordova prepare",
|
||||
"start": "npm run build:www && ionic serve --nolivereload --nogulp",
|
||||
"start": "npm run build:www && ionic serve --nolivereload --nogulp -s",
|
||||
"start:ios": "npm run build:www && npm run build:ios && npm run open:ios",
|
||||
"start:android": "npm run build:www && npm run build:android && npm run open:android",
|
||||
"watch": "grunt watch",
|
||||
|
|
|
|||
|
|
@ -72,8 +72,8 @@ angular.module('copayApp.controllers').controller('backupController',
|
|||
|
||||
var showBackupResult = function() {
|
||||
if ($scope.backupError) {
|
||||
var title = gettextCatalog.getString('uh oh...');
|
||||
var message = gettextCatalog.getString("It's importante that you write your backup phrase down correctly. If something happens to your wallet, you'll need this backup to recover your money Please review your backup and try again");
|
||||
var title = gettextCatalog.getString('Uh oh...');
|
||||
var message = gettextCatalog.getString("It's important that you write your backup phrase down correctly. If something happens to your wallet, you'll need this backup to recover your money. Please review your backup and try again.");
|
||||
popupService.showAlert(title, message, function() {
|
||||
$scope.goToStep(1);
|
||||
})
|
||||
|
|
@ -205,4 +205,4 @@ angular.module('copayApp.controllers').controller('backupController',
|
|||
});
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ angular.module('copayApp.controllers').controller('backupRequestController', fun
|
|||
$scope.openPopup = function() {
|
||||
|
||||
var title = gettextCatalog.getString('Without a backup, you could lose money.');
|
||||
var message = gettextCatalog.getString('If this device is damaged, this app is delted, or you migrate to another device, neither you nor BitPay can recover your funds.');
|
||||
var message = gettextCatalog.getString('If this device is replaced or this app is deleted, neither you nor BitPay can recover your funds without a backup.');
|
||||
var okText = gettextCatalog.getString('I understand');
|
||||
var cancelText = gettextCatalog.getString('Go back');
|
||||
popupService.showConfirm(title, message, okText, cancelText, function(val) {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
'use strict';
|
||||
angular.module('copayApp.controllers').controller('tourController',
|
||||
function($scope, $state, $log, $timeout, ongoingProcess, profileService) {
|
||||
function($scope, $state, $log, $timeout, $filter, ongoingProcess, profileService, rateService) {
|
||||
|
||||
var tries = 0;
|
||||
|
||||
|
|
@ -17,6 +17,14 @@ angular.module('copayApp.controllers').controller('tourController',
|
|||
}
|
||||
};
|
||||
|
||||
rateService.whenAvailable(function() {
|
||||
var localCurrency = 'USD';
|
||||
var btcAmount = 1;
|
||||
var rate = rateService.toFiat(btcAmount * 1e8, localCurrency);
|
||||
$scope.localCurrencySymbol = '$';
|
||||
$scope.localCurrencyPerBtc = $filter('formatFiatAmount')(parseFloat(rate.toFixed(2), 10));
|
||||
});
|
||||
|
||||
$scope.createDefaultWallet = function() {
|
||||
ongoingProcess.set('creatingWallet', true);
|
||||
profileService.createDefaultWallet(function(err, walletClient) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
// white on $positive
|
||||
$button-primary-bg: $positive;
|
||||
$button-primary-text: #fff;
|
||||
$button-primary-border: transparent;
|
||||
$button-primary-active-bg: darken($positive, 5%);
|
||||
$button-primary-active-border: transparent;
|
||||
|
||||
//white on translucent-white
|
||||
$button-secondary-onboarding-bg: rgba($light-gray, 0.1); // rgba(215, 215, 215, 0.1);
|
||||
$button-secondary-onboarding-text: #fff;
|
||||
$button-secondary-onboarding-border: transparent;
|
||||
$button-secondary-onboarding-active-bg: rgba($light-gray, 0.2); // rgba(215, 215, 215, 0.2);
|
||||
$button-secondary-onboarding-active-border: transparent;
|
||||
|
||||
//dark-gray on translucent-gray
|
||||
$button-secondary-bg: $subtle-gray;
|
||||
$button-secondary-text: $dark-gray;
|
||||
$button-secondary-border: transparent;
|
||||
$button-secondary-active-bg: darken($subtle-gray, 5%);
|
||||
$button-secondary-active-border: transparent;
|
||||
|
||||
%button-standard {
|
||||
width: 85%;
|
||||
max-width: 300px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.button,
|
||||
.onboarding .button {
|
||||
&.button-primary {
|
||||
@include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $button-primary-text);
|
||||
@include button-clear($button-primary-bg);
|
||||
@include button-outline($button-primary-bg);
|
||||
}
|
||||
&.button-primary,
|
||||
&.button-secondary {
|
||||
&.button-standard {
|
||||
@extend %button-standard;
|
||||
}
|
||||
}
|
||||
}
|
||||
.onboarding .button {
|
||||
&.button-secondary {
|
||||
@include button-style($button-secondary-onboarding-bg, $button-secondary-onboarding-border, $button-secondary-onboarding-active-bg, $button-secondary-onboarding-active-border, $button-secondary-onboarding-text);
|
||||
@include button-clear($button-secondary-onboarding-text);
|
||||
@include button-outline($button-secondary-onboarding-text);
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
&.button-secondary {
|
||||
@include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $button-secondary-text);
|
||||
@include button-clear($button-secondary-text);
|
||||
@include button-outline($button-secondary-text);
|
||||
}
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: $hovering-box-shadow;
|
||||
background-repeat:no-repeat;
|
||||
background-clip: padding-box;
|
||||
background-size: 103%;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
@import "fonts";
|
||||
@import "variables";
|
||||
@import "icons";
|
||||
@import "ionic";
|
||||
@import "icons";
|
||||
@import "buttons";
|
||||
@import "forms";
|
||||
@import "mixins/mixins";
|
||||
@import "views/views";
|
||||
|
|
|
|||
|
|
@ -92,12 +92,6 @@ input[type=number] {
|
|||
}
|
||||
}
|
||||
|
||||
.button-block {
|
||||
width: 90% !important;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.name-wallet {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
|
|
|
|||
|
|
@ -2,20 +2,33 @@
|
|||
$royal: #1e3186;
|
||||
$soft-blue: #647ce8;
|
||||
$fill-blue: #D5DFFF;
|
||||
$subtle-gray: #f5f5f5;
|
||||
$subtle-gray: #f7f7f7;
|
||||
$roboto: "Roboto", sans-serif;
|
||||
$roboto-light: "Roboto-Light", sans-serif-light;
|
||||
$success-green: #17ae8c;
|
||||
$warning-orange: #ffa500;
|
||||
$dark-gray: #445;
|
||||
$mid-gray: #667;
|
||||
$light-gray: #9b9bab;
|
||||
$subtle-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
|
||||
$hovering-box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);
|
||||
$subtle-radius: 3px;
|
||||
$visible-radius: 6px;
|
||||
$unmistakable-radius: 12px;
|
||||
|
||||
/* Set ionic variables */
|
||||
|
||||
$positive: $soft-blue;
|
||||
|
||||
$font-size-base: 16px;
|
||||
$font-size-small: 12px;
|
||||
$font-family-sans-serif: $roboto;
|
||||
$font-family-light-sans-serif: $roboto-light;
|
||||
|
||||
$button-border-radius: $visible-radius;
|
||||
$button-height: 52px;
|
||||
$button-padding: 16px;
|
||||
|
||||
$base-background-color: $subtle-gray;
|
||||
|
||||
$item-default-active-bg: $subtle-gray;
|
||||
|
|
@ -25,4 +38,4 @@ $tabs-icon-size: 22px;
|
|||
|
||||
$ios-transition-duration: 200ms;
|
||||
|
||||
$card-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
|
||||
$card-box-shadow: $subtle-box-shadow;
|
||||
|
|
|
|||
|
|
@ -1,54 +1,6 @@
|
|||
#backup-warning{
|
||||
.warning{
|
||||
margin:4rem auto 1rem;
|
||||
height: 11rem;
|
||||
}
|
||||
button{
|
||||
color:#fff;
|
||||
}
|
||||
#arrow-down{
|
||||
font-size: 4.2rem;
|
||||
}
|
||||
.cta-buttons{
|
||||
float:none;
|
||||
bottom:67px;
|
||||
position: absolute;
|
||||
width:100%;
|
||||
button{
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px){
|
||||
#backup-warning{
|
||||
.warning{
|
||||
margin: 2rem auto 1rem;
|
||||
height: 8rem;
|
||||
}
|
||||
h3{
|
||||
font-size:1.3rem;
|
||||
}
|
||||
p{
|
||||
font-size:.9rem;
|
||||
max-width: 80%;
|
||||
flex: 0 0 80%;
|
||||
}
|
||||
.warning-image{
|
||||
height: 11rem;
|
||||
}
|
||||
.cta-buttons{
|
||||
float:none;
|
||||
bottom:65px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-height: 540px){
|
||||
#backup-warning{
|
||||
.cta-buttons{
|
||||
float:left;
|
||||
position: relative;
|
||||
}
|
||||
#cta-buttons {
|
||||
@extend %cta-buttons;
|
||||
padding-bottom: 10vh;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,16 +7,17 @@
|
|||
width: 90%;
|
||||
max-width: 350px;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: .25rem;
|
||||
border-radius: $unmistakable-radius;
|
||||
text-align: center;
|
||||
&-header {
|
||||
&-success {
|
||||
background: rgb(1, 209, 162);
|
||||
background: $success-green;
|
||||
}
|
||||
&-warning {
|
||||
background: orange;
|
||||
background: $warning-orange;
|
||||
}
|
||||
padding: 1rem;
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
padding: 2rem;
|
||||
border-radius: $unmistakable-radius $unmistakable-radius 0 0;
|
||||
min-height: 120px;
|
||||
&-img{
|
||||
height: 6rem;
|
||||
|
|
@ -39,28 +40,31 @@
|
|||
}
|
||||
}
|
||||
&-content {
|
||||
padding: .5rem .8rem;
|
||||
h5,p{
|
||||
margin:0 0 1rem;
|
||||
}
|
||||
h5 {
|
||||
color: rgb(74, 74, 74);
|
||||
font-weight: bold;
|
||||
font-size: 1.3rem;
|
||||
margin-top:1rem;
|
||||
}
|
||||
p{
|
||||
font-weight: 200;
|
||||
}
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
&-heading {
|
||||
margin:0 0 1rem;
|
||||
color: $dark-gray;
|
||||
font-weight: bold;
|
||||
font-size: 1.3rem;
|
||||
margin-top: 1rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
&-message {
|
||||
color: $mid-gray;
|
||||
font-weight: 200;
|
||||
}
|
||||
.button {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
&-content-success {
|
||||
button{
|
||||
color:rgb(23, 174, 140) !important;
|
||||
.button {
|
||||
color: $success-green !important;
|
||||
}
|
||||
}
|
||||
&-content-warning {
|
||||
button{
|
||||
color: orange !important;
|
||||
.button {
|
||||
color: $warning-orange !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,63 +1,31 @@
|
|||
#onboarding-backup-request{
|
||||
.warning{
|
||||
margin:4rem auto 1rem;
|
||||
height: 11rem;
|
||||
#onboarding-backup-request {
|
||||
#warning {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 320px);
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
button{
|
||||
color:#fff;
|
||||
#alert-icon {
|
||||
margin: 20px auto 5px;
|
||||
height: 10vh;
|
||||
}
|
||||
#arrow-down{
|
||||
@media (min-width: 570px){
|
||||
#backup-description {
|
||||
max-width: 500px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
#arrow-down {
|
||||
font-size: 4.2rem;
|
||||
color: $soft-blue;
|
||||
}
|
||||
.cta-buttons{
|
||||
width:100%;
|
||||
float:none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
#backup-tldr {
|
||||
font-size: 16px;
|
||||
}
|
||||
@media (min-width: 415px){
|
||||
.warning{
|
||||
height:16rem;
|
||||
}
|
||||
.cta-buttons {
|
||||
@extend %cta-buttons;
|
||||
padding-bottom: 4vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 399px){
|
||||
#onboarding-backup-request{
|
||||
.warning{
|
||||
margin: 2rem auto 1rem;
|
||||
height: 8rem;
|
||||
}
|
||||
h3{
|
||||
font-size:1.3rem;
|
||||
}
|
||||
p{
|
||||
font-size:.9rem;
|
||||
max-width: 80%;
|
||||
flex: 0 0 80%;
|
||||
}
|
||||
.cta-buttons{
|
||||
float:none;
|
||||
bottom:0;
|
||||
position: absolute;
|
||||
button{
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-height: 540px){
|
||||
#onboarding-backup-request{
|
||||
.cta-buttons{
|
||||
float:left;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-height: 980px){
|
||||
#onboarding-backup-request{
|
||||
#arrow-down{
|
||||
margin-top: 7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,26 @@
|
|||
$relish-success: 1.3s;
|
||||
|
||||
#onboarding-collect-email {
|
||||
background: rgb(17, 209, 166);
|
||||
.overlay {
|
||||
|
||||
#success-container {
|
||||
top: 41vh;
|
||||
position: relative;
|
||||
animation-name: emailCollectSlideUp;
|
||||
animation-iteration-count: 1;
|
||||
animation-timing-function: ease-in;
|
||||
animation-duration: .5s;
|
||||
animation-delay: $relish-success;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
#success-image {
|
||||
width: 13vh;
|
||||
margin: 0 auto 2vh;
|
||||
}
|
||||
#success-message {
|
||||
font-size: 3vh;
|
||||
}
|
||||
.collect-overlay {
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
|
|
@ -8,107 +28,66 @@
|
|||
height: 100%;
|
||||
background: rgba(0,0,0,.4);
|
||||
z-index: 4;
|
||||
animation-name: emailCollectOpacity;
|
||||
animation-iteration-count: 1;
|
||||
animation-timing-function: ease-in;
|
||||
animation-duration: .2s;
|
||||
animation-delay: $relish-success;
|
||||
animation-fill-mode: forwards;
|
||||
opacity: 0;
|
||||
button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
.scroll-content {
|
||||
margin-top: 0;
|
||||
height: 101%;
|
||||
.heading {
|
||||
color: $dark-gray;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
margin: 3rem 0 1rem;
|
||||
}
|
||||
.scroll {
|
||||
height: 100%;
|
||||
transform: translate3d(0px, 0px, 0px) scale(1) !important;
|
||||
.prompt {
|
||||
margin: 1rem 1.5rem;
|
||||
color: $mid-gray;
|
||||
}
|
||||
#success-image {
|
||||
margin-top: 4rem;
|
||||
height: 10rem;
|
||||
#email-form {
|
||||
margin: 0 1.5rem 1rem;
|
||||
}
|
||||
.col {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
#email-label {
|
||||
border-radius: $visible-radius;
|
||||
background: rgba(200, 200, 200, 0.20);
|
||||
height: 3rem;
|
||||
margin-top:0;
|
||||
}
|
||||
.collect-overlay {
|
||||
animation-name: opacity;
|
||||
animation-iteration-count: 1;
|
||||
animation-timing-function: ease-in;
|
||||
animation-duration: .2s;
|
||||
animation-delay: .8s;
|
||||
animation-fill-mode: forwards;
|
||||
opacity: 0;
|
||||
button {
|
||||
position: absolute;
|
||||
right: 11px;
|
||||
}
|
||||
}
|
||||
.collect-overlay{
|
||||
top:-1px;
|
||||
}
|
||||
#collect-email {
|
||||
opacity: 1;
|
||||
background: #fff;
|
||||
color: rgb(108, 108, 108);
|
||||
height: 14rem;
|
||||
height: 25rem;
|
||||
animation-name: topBottom;
|
||||
animation-iteration-count: 1;
|
||||
animation-timing-function: ease-in;
|
||||
animation-duration: .4s;
|
||||
animation-delay: 1s;
|
||||
animation-delay: $relish-success + .2s;
|
||||
position: absolute;
|
||||
bottom: -14rem;
|
||||
bottom: -100%;
|
||||
animation-fill-mode: forwards;
|
||||
z-index: 5;
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
form {
|
||||
label {
|
||||
background: rgba(200, 200, 200, 0.20);
|
||||
height: 3rem;
|
||||
margin-top:0;
|
||||
i {
|
||||
position: absolute;
|
||||
right: 3%;
|
||||
top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
#news-updates{
|
||||
padding-top:0;
|
||||
.list{
|
||||
max-width: 310px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
@include center-block();
|
||||
label{
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
padding-bottom: 1rem;
|
||||
.checkbox{
|
||||
left:0;
|
||||
margin-left:0;
|
||||
}
|
||||
.item-content{
|
||||
margin-left: 12%;
|
||||
position: relative;
|
||||
font-size:.8rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 415px){
|
||||
&{
|
||||
max-width: 400px;
|
||||
label{
|
||||
.checkbox{
|
||||
left:1rem;
|
||||
}
|
||||
.item-content{
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#collect-email-inner {
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#news-updates {
|
||||
padding-top: 0;
|
||||
}
|
||||
.item {
|
||||
border: none;
|
||||
label{
|
||||
label {
|
||||
background: none;
|
||||
}
|
||||
.checkbox input:before,
|
||||
|
|
@ -116,29 +95,34 @@
|
|||
border-radius: 50% !important;
|
||||
background: none;
|
||||
border-width: 2px;
|
||||
padding: .9rem;
|
||||
padding: 12px;
|
||||
position: relative;
|
||||
left: -7px;
|
||||
top: -8px;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
}
|
||||
.checkbox input:checked:after,
|
||||
input:checked + .checkbox-icon:after {
|
||||
border-color: rgb(19, 229, 182);
|
||||
top:20%;
|
||||
left:11%;
|
||||
top: 4px;
|
||||
left: 6px;
|
||||
}
|
||||
.item-content {
|
||||
width: 90%;
|
||||
margin-left: 10%;
|
||||
color: $mid-gray;
|
||||
text-align: left;
|
||||
margin-left: 75px;
|
||||
white-space: initial;
|
||||
}
|
||||
}
|
||||
.item-checkbox {
|
||||
padding: 1rem 0;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.item-checkbox .checkbox {
|
||||
margin-left: 10%;
|
||||
top: 55%;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.checkbox input:before,
|
||||
.checkbox .checkbox-icon:before{
|
||||
border-color:$soft-blue;
|
||||
border-color: $soft-blue;
|
||||
}
|
||||
.checkbox input:checked:before,
|
||||
.checkbox input:checked + .checkbox-icon:before {
|
||||
|
|
@ -146,34 +130,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1000px){
|
||||
#onboarding-collect-email{
|
||||
#collect-email{
|
||||
p, form{
|
||||
max-width: 600px;
|
||||
@include center-block();
|
||||
}
|
||||
form{
|
||||
margin-top:.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes topBottom {
|
||||
0% {
|
||||
bottom: -100%;
|
||||
}
|
||||
100% {
|
||||
bottom: 0;
|
||||
}
|
||||
0% { bottom: -100%; }
|
||||
100% { bottom: 0; }
|
||||
}
|
||||
|
||||
@keyframes opacity {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
@keyframes emailCollectOpacity {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes emailCollectSlideUp {
|
||||
0% { top: 41vh; }
|
||||
100% { top: calc((100vh - 20rem) / 2 - 11vh);}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,27 @@
|
|||
#onboarding-disclaimer {
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
ion-content{
|
||||
height: 100%;
|
||||
&.has-header{
|
||||
&-container {
|
||||
max-width: 450px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
height: calc(100vh - 160px);
|
||||
}
|
||||
.has-header > &-container {
|
||||
height: calc(100vh - 210px);
|
||||
}
|
||||
#disclaimer-topic {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
#disclaimer-description {
|
||||
margin: 1rem 1rem 2rem;
|
||||
}
|
||||
ion-content {
|
||||
height: 101%;
|
||||
&.has-header {
|
||||
top:40px !important;
|
||||
}
|
||||
.scroll{
|
||||
|
|
@ -29,6 +47,7 @@
|
|||
background: transparent;
|
||||
border: none;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
.checkbox input:before,
|
||||
.checkbox .checkbox-icon:before {
|
||||
border-radius: 50% !important;
|
||||
|
|
@ -46,13 +65,8 @@
|
|||
.checkbox input:checked:after,
|
||||
input:checked + .checkbox-icon:after {
|
||||
border-color: rgb(19, 229, 182);
|
||||
top:20%;
|
||||
left:11%;
|
||||
@media (min-width:450px){
|
||||
&{
|
||||
left: 20%;
|
||||
}
|
||||
}
|
||||
top: 4px;
|
||||
left: 5px;
|
||||
}
|
||||
.item-content {
|
||||
width: 90%;
|
||||
|
|
@ -64,14 +78,14 @@
|
|||
margin-left: 3%;
|
||||
top:44%;
|
||||
}
|
||||
#agree-to-terms{
|
||||
#agree-to-terms {
|
||||
background: #fff;
|
||||
padding:1rem;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
&.header-present{
|
||||
bottom:16px;
|
||||
bottom: 38px;
|
||||
}
|
||||
&-content{
|
||||
max-width: 600px;
|
||||
|
|
@ -87,6 +101,7 @@
|
|||
}
|
||||
p{
|
||||
color:rgb(58,58,58);
|
||||
text-align: left;
|
||||
}
|
||||
@media (min-width:450px){
|
||||
p{
|
||||
|
|
|
|||
|
|
@ -1,49 +1,9 @@
|
|||
#onboarding-push-notifications {
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
#notifications-topic {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
#cta {
|
||||
background-image: url('../img/onboarding-push-notifications.svg');
|
||||
height: 15rem;
|
||||
margin-top: .75rem;
|
||||
}
|
||||
.cta-buttons {
|
||||
float: none;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
button {
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
#onboarding-push-notifications {
|
||||
.cta-buttons {
|
||||
float: none;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 540px) {
|
||||
#onboarding-push-notifications {
|
||||
#cta {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.cta-buttons {
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 450px) {
|
||||
#onboarding-push-notifications {
|
||||
#cta {
|
||||
height: 26rem;
|
||||
}
|
||||
#cta-buttons {
|
||||
@extend %cta-buttons;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,68 +1,31 @@
|
|||
#onboard-tour {
|
||||
&-secure {
|
||||
#cta {
|
||||
background-image: url(../img/onboarding-tour-phone.svg);
|
||||
height: 17rem;
|
||||
margin-bottom:-1.5rem;
|
||||
}
|
||||
}
|
||||
#onboarding-tour {
|
||||
&-currency {
|
||||
#cta {
|
||||
background-image: url(../img/onboarding-tour-currency-bg.svg);
|
||||
height:18rem;
|
||||
}
|
||||
.next-slide {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
&-control {
|
||||
#cta {
|
||||
background-image: url(../img/onboarding-tour-control.svg);
|
||||
margin-bottom: .05rem;
|
||||
height: 15rem;
|
||||
background-position: top;
|
||||
}
|
||||
.cta-buttons {
|
||||
@extend %cta-buttons;
|
||||
padding-bottom: 12vh;
|
||||
}
|
||||
.cta-button{
|
||||
position: absolute;
|
||||
bottom: 85px;
|
||||
#onboarding-illustration-currency-exchange-rate {
|
||||
background-color: $soft-blue;
|
||||
border-radius: $button-border-radius;
|
||||
box-shadow: $subtle-box-shadow;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
height: 40px;
|
||||
line-height: 38px;
|
||||
margin: 10px auto 0;
|
||||
position: relative;
|
||||
width: 140px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 359px){
|
||||
#onboard-tour{
|
||||
&-secure, &-currency, &-control{
|
||||
#cta{
|
||||
height: 14rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 450px){
|
||||
#onboard-tour{
|
||||
&-secure, &-currency, &-control{
|
||||
#cta{
|
||||
height: 26rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1000px){
|
||||
#onboard-tour{
|
||||
p, h2, h3{
|
||||
max-width: 600px;
|
||||
}
|
||||
button{
|
||||
max-width: 400px;
|
||||
}
|
||||
#cta{
|
||||
margin: 2rem 0 0;
|
||||
}
|
||||
&-control{
|
||||
#cta{
|
||||
margin-bottom: 2rem;
|
||||
.swiper-pagination {
|
||||
&-bullet {
|
||||
background: $soft-blue;
|
||||
&-active {
|
||||
background: $soft-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,73 +1,36 @@
|
|||
#onboard-welcome {
|
||||
ion-content {
|
||||
& > ion-content {
|
||||
background: url(../img/onboarding-welcome-bg.png);
|
||||
background-position: top center;
|
||||
background-size: contain;
|
||||
background-repeat: repeat-x;
|
||||
#shopping-24 {
|
||||
content: url("../img/onboarding-welcome-shopping24.png");
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
right: 5%;
|
||||
width: 35px;
|
||||
height: auto;
|
||||
}
|
||||
.logo,
|
||||
p {
|
||||
@include center-block();
|
||||
}
|
||||
.logo {
|
||||
margin-top: 20rem;
|
||||
}
|
||||
button {
|
||||
@include center-block(1rem);
|
||||
color: #fff;
|
||||
&.get-started {
|
||||
background: rgb(100, 124, 232);
|
||||
margin-top: 4rem;
|
||||
}
|
||||
&.restore {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
#cta-buttons {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
button {
|
||||
max-width: 400px;
|
||||
min-width: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:500px),
|
||||
(max-height:800px) {
|
||||
#onboard-welcome {
|
||||
ion-content {
|
||||
.logo {
|
||||
margin-top: 12rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:420px) {
|
||||
#onboard-welcome {
|
||||
ion-content {
|
||||
.logo {
|
||||
margin-top: 8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height:550px) {
|
||||
#onboard-welcome {
|
||||
#cta-buttons {
|
||||
position: relative !important;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
#qrcode {
|
||||
content: url("../img/onboarding-welcome-qrcode.png");
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
right: 5%;
|
||||
width: 20px;
|
||||
height: auto;
|
||||
}
|
||||
#logo-tagline {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
#logo {
|
||||
width: 40%;
|
||||
max-width: 200px;
|
||||
margin: 5rem auto 0;
|
||||
}
|
||||
#lead {
|
||||
line-height: 1.6;
|
||||
font-size: 18px;
|
||||
}
|
||||
#cta-buttons {
|
||||
@extend %cta-buttons;
|
||||
padding-bottom: 4vw;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,110 +1,46 @@
|
|||
.onboarding {
|
||||
background: rgba(30, 49, 134, 1);
|
||||
background: -moz-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
|
||||
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(30, 49, 134, 1)), color-stop(100%, rgba(17, 27, 73, 1)));
|
||||
background: -webkit-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
|
||||
background: -o-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
|
||||
background: #1e3186;
|
||||
color: #fff;
|
||||
background-image: linear-gradient(to bottom, #1e3186 0%, #111b49 100%);
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
.bar.bar-header {
|
||||
background: rgb(30, 49, 134);
|
||||
background: none;
|
||||
border: 0 none transparent;
|
||||
color: #fff;
|
||||
button {
|
||||
color: #fff;
|
||||
}
|
||||
.secondary-buttons {
|
||||
button {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
.bar.bar-stable{
|
||||
border-color: transparent;
|
||||
border:none;
|
||||
.onboarding-topic,
|
||||
.onboarding-description,
|
||||
.onboarding-tldr {
|
||||
margin-left: 3rem;
|
||||
margin-right: 3rem;
|
||||
}
|
||||
ion-content {
|
||||
height: 100%;
|
||||
.scroll{
|
||||
height: 100%;
|
||||
}
|
||||
color: #fff;
|
||||
h2, h3{color:#fff;}
|
||||
h2 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
p {
|
||||
&.tagline {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
}
|
||||
#cta {
|
||||
background-size: contain;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
height: 23rem;
|
||||
margin-bottom: -3rem;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
img {
|
||||
height: 16rem;
|
||||
}
|
||||
}
|
||||
button {
|
||||
color:#fff;
|
||||
}
|
||||
@media (min-width: 450px){
|
||||
p{
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
}
|
||||
.onboarding-topic {
|
||||
font-size: 24px;
|
||||
margin-top: .5rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.col {
|
||||
@include center-block(.5rem);
|
||||
.onboarding-description {
|
||||
margin-top: 1rem;
|
||||
font-size: 16px;
|
||||
color: rgba(255,255,255,0.5);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.swiper-pagination {
|
||||
&-bullet {
|
||||
background: rgb(100, 124, 232);
|
||||
&-active {
|
||||
background: rgb(100, 124, 232);
|
||||
}
|
||||
}
|
||||
}
|
||||
.button-transparent{
|
||||
background: none !important;
|
||||
}
|
||||
.button-translucent{
|
||||
background: rgba(215, 215, 215, 0.1)
|
||||
}
|
||||
.button-primary{
|
||||
background: rgb(100, 124, 232) !important;
|
||||
color:#fff;
|
||||
}
|
||||
.light-blue{
|
||||
color:rgb(100, 124, 232);
|
||||
.onboarding-tldr {
|
||||
font-size: 18px;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1em;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 415px){
|
||||
.onboarding{
|
||||
ion-content{
|
||||
h2{
|
||||
font-size: 2rem;
|
||||
}
|
||||
p{
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.9rem;
|
||||
}
|
||||
p,h2,h3{
|
||||
max-width: 600px !important;
|
||||
}
|
||||
button{
|
||||
max-width: 400px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
%cta-buttons {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@import "terms-of-use";
|
||||
|
|
@ -115,3 +51,37 @@
|
|||
@import "../backup-warning";
|
||||
@import "onboard-disclaimer";
|
||||
@import "onboard-push-notifications";
|
||||
|
||||
%onboarding-illustration {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
margin-top: 25vh;
|
||||
top: 0;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
z-index: -1;
|
||||
}
|
||||
.onboarding-illustration {
|
||||
&-secure {
|
||||
@extend %onboarding-illustration;
|
||||
background-image: url(../img/onboarding-tour-phone.svg);
|
||||
}
|
||||
&-currency {
|
||||
@extend %onboarding-illustration;
|
||||
background-image: url(../img/onboarding-tour-currency-bg.svg);
|
||||
}
|
||||
&-control {
|
||||
@extend %onboarding-illustration;
|
||||
background-image: url(../img/onboarding-tour-control.svg);
|
||||
}
|
||||
&-notifications {
|
||||
@extend %onboarding-illustration;
|
||||
background-image: url(../img/onboarding-push-notifications.svg);
|
||||
}
|
||||
&-backup-warning {
|
||||
@extend %onboarding-illustration;
|
||||
background-image: url(../img/backup-warning.svg);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
#terms-of-use {
|
||||
ion-header-bar {
|
||||
background: #fff;
|
||||
box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.2);
|
||||
box-shadow: $subtle-box-shadow;
|
||||
.primary-buttons{
|
||||
.button{
|
||||
font-size: 2rem;
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
}
|
||||
ion-content{
|
||||
padding-top: 1.5rem;
|
||||
color: rgba(86, 86, 86, 0.77);
|
||||
color: $dark-gray;
|
||||
p {
|
||||
padding: 0 2.5%;
|
||||
margin: 2rem auto;
|
||||
|
|
@ -24,6 +24,7 @@
|
|||
padding: 1rem;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
.checkbox input:before,
|
||||
.checkbox .checkbox-icon:before {
|
||||
border-radius: 50% !important;
|
||||
|
|
@ -53,7 +54,7 @@
|
|||
width: 10%;
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
top: 50px;
|
||||
top: 25px;
|
||||
.item-content {
|
||||
white-space: normal;
|
||||
}
|
||||
|
|
@ -61,7 +62,7 @@
|
|||
p {
|
||||
color: rgb(58, 58, 58);
|
||||
float: left;
|
||||
width: 70%;
|
||||
width: 80%;
|
||||
}
|
||||
.checkbox input:before,
|
||||
.checkbox .checkbox-icon:before {
|
||||
|
|
|
|||
|
|
@ -1,140 +1,112 @@
|
|||
#wallet-backup-phrase {
|
||||
&,
|
||||
& ion-content,
|
||||
& ion-content .scroll {
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
#wallet-backup-phrase {
|
||||
.bar.bar-royal .title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
.backup-phrase {
|
||||
background-color: $subtle-gray;
|
||||
padding: 12px;
|
||||
border: 2px dashed darken($subtle-gray, 10%);
|
||||
border-radius: $subtle-radius;
|
||||
color: #2b2b2b;
|
||||
text-align: center;
|
||||
max-width: 500px;
|
||||
min-height: 10rem;
|
||||
width: 85%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&-content {
|
||||
font-weight: bold;
|
||||
line-height: 2;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
@media (min-width: 575px) {
|
||||
font-size: 18px;
|
||||
padding: 3rem;
|
||||
}
|
||||
.bar.bar-royal {
|
||||
.title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
background: #fff;
|
||||
.backup-phrase {
|
||||
background: rgba(246, 246, 246, 0.87);
|
||||
padding: .5rem .5rem 1.7rem;
|
||||
border: 2px dashed rgb(206, 206, 206);
|
||||
width: 95%;
|
||||
margin: 1rem auto;
|
||||
color: rgb(43, 43, 43);
|
||||
text-align: center;
|
||||
span {
|
||||
line-height: 2rem;
|
||||
font-weight: bold;
|
||||
max-width: 400px;
|
||||
color: rgb(43, 43, 43);
|
||||
}
|
||||
}
|
||||
.bold-text {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
p {
|
||||
color: rgb(58, 58, 58);
|
||||
font-weight: 200;
|
||||
}
|
||||
.cta-buttons {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
bottom: 45px;
|
||||
button {
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
.select-word {
|
||||
background: #fff;
|
||||
box-shadow: 0px 4px 5px 0px rgba(50, 50, 50, 0.37);
|
||||
margin: .1rem 0;
|
||||
display: inline-block;
|
||||
padding: 0 5px;
|
||||
}
|
||||
#select-phrase {
|
||||
background: rgba(246, 246, 246, 0.87);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 45px;
|
||||
padding-bottom: 20px;
|
||||
padding: .5rem .5rem .9rem;
|
||||
p {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
padding-top: .7rem;
|
||||
margin-bottom: 0.3rem;
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
.select-word {
|
||||
&.button[disabled] {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
color: transparent;
|
||||
border: 1px solid rgb(211, 211, 211);
|
||||
}
|
||||
}
|
||||
#confirm-phrase {
|
||||
margin: 5px auto 0;
|
||||
}
|
||||
}
|
||||
ion-content.has-tabs{
|
||||
.cta-buttons{
|
||||
bottom:110px;
|
||||
}
|
||||
.cta-buttons, #select-phrase{
|
||||
bottom:110px;
|
||||
&-word-readonly {
|
||||
padding: 0 1px;
|
||||
@media (min-width: 575px) {
|
||||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-step-1,
|
||||
&-step-2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 70%;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
&-step-1 {
|
||||
height: 70%;
|
||||
}
|
||||
&-step-2 {
|
||||
height: 60%
|
||||
}
|
||||
&-step-3 {
|
||||
|
||||
@media (min-width : 320px) and (max-width : 415px) and (orientation : portrait), (min-width : 650px) and (max-width : 770px) and (orientation : portrait){
|
||||
#wallet-backup-phrase{
|
||||
.cta-buttons,#select-phrase{
|
||||
bottom: 64px;
|
||||
}
|
||||
}
|
||||
.initial-prompt,
|
||||
.confirmation-prompt,
|
||||
.tldr-prompt {
|
||||
color: $dark-gray;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
.initial-prompt,
|
||||
.confirmation-prompt {
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
.tldr-prompt {
|
||||
font-weight: bold;
|
||||
}
|
||||
.cta-buttons {
|
||||
@extend %cta-buttons;
|
||||
padding-bottom: 5vh;
|
||||
}
|
||||
.select-word {
|
||||
background: #fff;
|
||||
box-shadow: $subtle-box-shadow;
|
||||
display: inline-block;
|
||||
margin: 3px 0;
|
||||
min-height: 38px;
|
||||
line-height: 33px;
|
||||
padding: 0 8px;
|
||||
@media (min-width: 400px) {
|
||||
margin: 4px 3px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
#select-phrase {
|
||||
background: $subtle-gray;
|
||||
padding: 5% 0;
|
||||
.select-word {
|
||||
&.button[disabled] {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
color: transparent;
|
||||
border: 1px solid rgb(211, 211, 211);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
#wallet-backup-phrase {
|
||||
ion-content {
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
max-width: 600px !important;
|
||||
}
|
||||
button {
|
||||
max-width: 400px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@media (max-height: 560px) {
|
||||
#wallet-backup-phrase {
|
||||
&,
|
||||
& ion-content,
|
||||
& ion-content .scroll {
|
||||
overflow-y:visible;
|
||||
}
|
||||
#select-phrase {
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
.backup-phrase {
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-height: 379px) {
|
||||
#wallet-backup-phrase {
|
||||
.cta-buttons {
|
||||
float: left;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
ion-content.has-tabs{
|
||||
// TODO: review
|
||||
.cta-buttons{
|
||||
bottom:110px;
|
||||
}
|
||||
.cta-buttons, #select-phrase{
|
||||
bottom:110px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,48 +1,50 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="375px" height="257px" viewBox="0 0 375 257" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>bitcoin-currency</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="83.858817%" id="linearGradient-1">
|
||||
<stop stop-color="#CDE7FF" offset="0%"></stop>
|
||||
<stop stop-color="#FFFFFF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="89.4673583%" id="linearGradient-2">
|
||||
<stop stop-color="#3950B5" offset="0%"></stop>
|
||||
<stop stop-color="#162360" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<rect id="path-3" x="0" y="0" width="130" height="48" rx="4"></rect>
|
||||
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
|
||||
<feOffset dx="0" dy="8" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="7" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.128877944 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="Onboarding" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="0.2.2---Tour-2" transform="translate(0.000000, -200.000000)">
|
||||
<g id="bitcoin-currency" transform="translate(0.000000, 206.000000)">
|
||||
<g id="bg-2" transform="translate(0.000000, 3.530453)">
|
||||
<polygon id="Line-Copy" fill="url(#linearGradient-1)" opacity="0.0632579291" points="54.267049 126.565292 98.7558134 99.5675085 139.106088 120.429432 185.506195 82.3871008 222.910505 82.3871008 246.706821 49.2534574 278.7801 65.2066927 324.303487 56.6164892 367.788457 36.8590204 374.999986 185.469547 150.148438 185.469547 0.425715204 185.469547 0.425715204 135.155496"></polygon>
|
||||
<polyline id="Line" stroke="#13E5B6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="0 133.969547 54.2670471 127.792464 97.7211891 98.3403365 140.140716 120.429432 184.629481 81.1599288 222.910503 81.1599288 247.741449 48.0262854 280.849359 67.6610371 321.199634 56.6164892 375.000006 35.469547"></polyline>
|
||||
<path d="M137.25,120.469547 L137.25,183.486924" id="Line-Copy-2" stroke="#FFFFFF" stroke-width="0.5" stroke-linecap="square" stroke-dasharray="4" opacity="0.333547108"></path>
|
||||
<path d="M77.25,110.469547 L77.25,184.266212" id="Line-Copy-3" stroke="#FFFFFF" stroke-width="0.5" stroke-linecap="square" stroke-dasharray="4" opacity="0.333547108"></path>
|
||||
<path d="M264.25,64.469547 L264.25,183.870892" id="Line-Copy-4" stroke="#FFFFFF" stroke-width="0.5" stroke-linecap="square" stroke-dasharray="4" opacity="0.333547108"></path>
|
||||
<path d="M330.25,57.469547 L330.25,183.5043" id="Line-Copy-5" stroke="#FFFFFF" stroke-width="0.5" stroke-linecap="square" stroke-dasharray="4" opacity="0.333547108"></path>
|
||||
<path d="M187.5,247.469547 C255.707167,247.469547 311,192.176714 311,123.969547 C311,55.7623804 255.707167,0.469547015 187.5,0.469547015 C119.292833,0.469547015 64,55.7623804 64,123.969547 C64,192.176714 119.292833,247.469547 187.5,247.469547 Z" id="Oval-2" fill="url(#linearGradient-2)" opacity="0.300000012"></path>
|
||||
</g>
|
||||
<g id="price-" transform="translate(122.000000, 0.000000)">
|
||||
<path d="M67,42.5 L67,188.5" id="Line" stroke="#9012FE" stroke-width="2" stroke-linecap="square" opacity="0.639999986"></path>
|
||||
<g id="Rectangle-3" opacity="0.699999988">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
|
||||
<use fill="#647CE8" fill-rule="evenodd" xlink:href="#path-3"></use>
|
||||
</g>
|
||||
<text id="1-BTC-=-$650" font-family="Roboto-Regular, Roboto" font-size="16" font-weight="normal" fill="#FFFFFF">
|
||||
<tspan x="15.1328125" y="28.8046875">1 BTC = $650</tspan>
|
||||
</text>
|
||||
<circle id="Oval-5" stroke="#FFFFFF" stroke-width="3" fill="#1A2A71" cx="67.5" cy="83.5" r="4.5"></circle>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="onboarding-market-illustration"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 375 257"
|
||||
style="enable-background:new 0 0 375 257;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{opacity:0.3;fill:url(#SVGID_1_);enable-background:new ;}
|
||||
.st1{opacity:0.3;fill:url(#SVGID_2_);enable-background:new ;}
|
||||
.st2{opacity:0.3;}
|
||||
.st3{fill:#13E5B6;}
|
||||
.st4{opacity:0.64;fill:none;stroke:#9012FE;stroke-width:2;stroke-linecap:square;enable-background:new ;}
|
||||
.st5{fill:#1A2A71;stroke:#FFFFFF;stroke-width:3;}
|
||||
</style>
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-234.5445" y1="11.6925" x2="-234.5445" y2="12.5871" gradientTransform="matrix(247 0 0 247 58120 -2878.0242)">
|
||||
<stop offset="0" style="stop-color:#3950B5"/>
|
||||
<stop offset="1" style="stop-color:#162360"/>
|
||||
</linearGradient>
|
||||
<path class="st0" d="M187.5,257c68.2,0,123.5-55.3,123.5-123.5S255.7,10,187.5,10S64,65.3,64,133.5S119.3,257,187.5,257z"/>
|
||||
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="187.5" y1="195.0305" x2="187.5" y2="45.0305">
|
||||
<stop offset="0" style="stop-color:#3950B5"/>
|
||||
<stop offset="1" style="stop-color:#202F77"/>
|
||||
</linearGradient>
|
||||
<polygon class="st1" points="54.3,137.3 97.7,107.8 140.1,129.9 184.6,90.7 222.9,90.7 247.7,57.5 280.8,77.2 321.2,66.1 375,45
|
||||
375,195 150.1,195 0.4,195 0,143.5 "/>
|
||||
<g class="st2">
|
||||
<path class="st3" d="M300.2,195h-0.5v-4h0.5V195z M300.2,187h-0.5v-4h0.5V187z M300.2,179h-0.5v-4h0.5V179z M300.2,171h-0.5v-4h0.5
|
||||
V171z M300.2,163h-0.5v-4h0.5V163z M300.2,155h-0.5v-4h0.5V155z M300.2,147h-0.5v-4h0.5V147z M300.2,139h-0.5v-4h0.5V139z
|
||||
M300.2,131h-0.5v-4h0.5V131z M300.2,123h-0.5v-4h0.5V123z M300.2,115h-0.5v-4h0.5V115z M300.2,107h-0.5v-4h0.5V107z M300.2,99
|
||||
h-0.5v-4h0.5V99z M300.2,91h-0.5v-4h0.5V91z M300.2,83h-0.5v-4h0.5V83z M300.2,75h-0.5v-4h0.5V75z"/>
|
||||
<path class="st3" d="M225.2,195h-0.5v-4h0.5V195z M225.2,187h-0.5v-4h0.5V187z M225.2,179h-0.5v-4h0.5V179z M225.2,171h-0.5v-4h0.5
|
||||
V171z M225.2,163h-0.5v-4h0.5V163z M225.2,155h-0.5v-4h0.5V155z M225.2,147h-0.5v-4h0.5V147z M225.2,139h-0.5v-4h0.5V139z
|
||||
M225.2,131h-0.5v-4h0.5V131z M225.2,123h-0.5v-4h0.5V123z M225.2,115h-0.5v-4h0.5V115z M225.2,107h-0.5v-4h0.5V107z M225.2,99
|
||||
h-0.5v-4h0.5V99z M225.2,91h-0.5v-3.2h0.5V91z"/>
|
||||
<path class="st3" d="M150.2,195h-0.5v-4h0.5V195z M150.2,187h-0.5v-4h0.5V187z M150.2,179h-0.5v-4h0.5V179z M150.2,171h-0.5v-4h0.5
|
||||
V171z M150.2,163h-0.5v-4h0.5V163z M150.2,155h-0.5v-4h0.5V155z M150.2,147h-0.5v-4h0.5V147z M150.2,139h-0.5v-4h0.5V139z
|
||||
M150.2,131h-0.5v-4h0.5V131z M150.2,123h-0.5v-2h0.5V123z"/>
|
||||
<path class="st3" d="M75.2,195h-0.5v-4h0.5V195z M75.2,187h-0.5v-4h0.5V187z M75.2,179h-0.5v-4h0.5V179z M75.2,171h-0.5v-4h0.5V171
|
||||
z M75.2,163h-0.5v-4h0.5V163z M75.2,155h-0.5v-4h0.5V155z M75.2,147h-0.5v-4h0.5V147z M75.2,139h-0.5v-4h0.5V139z M75.2,131h-0.5
|
||||
v-4h0.5V131z"/>
|
||||
</g>
|
||||
<path class="st3" d="M0,144.5c-0.5,0-0.9-0.4-1-0.9c-0.1-0.5,0.3-1,0.9-1.1l54.1-6.2L97.1,107c0.3-0.2,0.7-0.2,1-0.1l41.8,21.8
|
||||
l44-38.7c0.2-0.2,0.4-0.2,0.7-0.2h37.8l24.5-32.8c0.3-0.4,0.9-0.5,1.3-0.3l32.7,19.5l39.9-11l53.8-21.1c0.5-0.2,1.1,0.1,1.3,0.6
|
||||
c0.2,0.5-0.1,1.1-0.6,1.3l-53.8,21.1c0,0-0.1,0-0.1,0l-40.4,11.1c-0.3,0.1-0.5,0-0.8-0.1L248,58.9l-24.3,32.5
|
||||
c-0.2,0.3-0.5,0.4-0.8,0.4H185l-44.2,39c-0.3,0.3-0.8,0.3-1.1,0.1L97.8,109l-42.9,29.2c-0.1,0.1-0.3,0.1-0.4,0.2l-54.3,6.2
|
||||
C0.1,144.5,0,144.5,0,144.5z"/>
|
||||
<g>
|
||||
<path id="Line_1_" class="st4" d="M187.5,48.5v146"/>
|
||||
<circle id="dot" class="st5" cx="187.5" cy="89.5" r="4.5"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 3.6 KiB |
|
|
@ -1,167 +1,107 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="375px" height="247px" viewBox="0 0 375 247" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>digital-money</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="75.2641068%" id="linearGradient-1">
|
||||
<stop stop-color="#3950B5" offset="0%"></stop>
|
||||
<stop stop-color="#162360" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<path d="M31.8181818,0 L0,0 L0,31.8181818 L31.8181818,31.8181818 L31.8181818,0 L31.8181818,0 Z M27.2727273,27.2727273 L4.54545455,27.2727273 L4.54545455,4.54545455 L27.2727273,4.54545455 L27.2727273,27.2727273 L27.2727273,27.2727273 Z" id="path-2"></path>
|
||||
<mask id="mask-3" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="31.8181818" height="31.8181818" fill="white">
|
||||
<use xlink:href="#path-2"></use>
|
||||
</mask>
|
||||
<polygon id="path-4" points="65.9090909 90.9090909 61.3636364 90.9090909 61.3636364 100 100 100 100 95.4545455 65.9090909 95.4545455"></polygon>
|
||||
<mask id="mask-5" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="38.6363636" height="9.09090909" fill="white">
|
||||
<use xlink:href="#path-4"></use>
|
||||
</mask>
|
||||
<rect id="path-6" x="9.09090909" y="9.09090909" width="13.6363636" height="13.6363636"></rect>
|
||||
<mask id="mask-7" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="13.6363636" height="13.6363636" fill="white">
|
||||
<use xlink:href="#path-6"></use>
|
||||
</mask>
|
||||
<path d="M0,100 L31.8181818,100 L31.8181818,68.1818182 L0,68.1818182 L0,100 L0,100 Z M4.54545455,72.7272727 L27.2727273,72.7272727 L27.2727273,95.4545455 L4.54545455,95.4545455 L4.54545455,72.7272727 L4.54545455,72.7272727 Z" id="path-8"></path>
|
||||
<mask id="mask-9" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="31.8181818" height="31.8181818" fill="white">
|
||||
<use xlink:href="#path-8"></use>
|
||||
</mask>
|
||||
<rect id="path-10" x="9.09090909" y="77.2727273" width="13.6363636" height="13.6363636"></rect>
|
||||
<mask id="mask-11" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="13.6363636" height="13.6363636" fill="white">
|
||||
<use xlink:href="#path-10"></use>
|
||||
</mask>
|
||||
<path d="M68.1818182,0 L68.1818182,31.8181818 L100,31.8181818 L100,0 L68.1818182,0 L68.1818182,0 Z M95.4545455,27.2727273 L72.7272727,27.2727273 L72.7272727,4.54545455 L95.4545455,4.54545455 L95.4545455,27.2727273 L95.4545455,27.2727273 Z" id="path-12"></path>
|
||||
<mask id="mask-13" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="31.8181818" height="31.8181818" fill="white">
|
||||
<use xlink:href="#path-12"></use>
|
||||
</mask>
|
||||
<rect id="path-14" x="77.2727273" y="9.09090909" width="13.6363636" height="13.6363636"></rect>
|
||||
<mask id="mask-15" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="13.6363636" height="13.6363636" fill="white">
|
||||
<use xlink:href="#path-14"></use>
|
||||
</mask>
|
||||
<rect id="path-16" x="90.9090909" y="36.3636364" width="9.09090909" height="9.09090909"></rect>
|
||||
<mask id="mask-17" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="9.09090909" height="9.09090909" fill="white">
|
||||
<use xlink:href="#path-16"></use>
|
||||
</mask>
|
||||
<rect id="path-18" x="0" y="54.5454545" width="9.09090909" height="9.09090909"></rect>
|
||||
<mask id="mask-19" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="9.09090909" height="9.09090909" fill="white">
|
||||
<use xlink:href="#path-18"></use>
|
||||
</mask>
|
||||
<polygon id="path-20" points="47.7272727 36.3636364 29.5454545 36.3636364 29.5454545 40.9090909 52.2727273 40.9090909 52.2727273 31.8181818 52.2727273 27.2727273 56.8181818 27.2727273 56.8181818 18.1818182 52.2727273 18.1818182 47.7272727 18.1818182 43.1818182 18.1818182 43.1818182 9.09090909 47.7272727 9.09090909 47.7272727 13.6363636 63.6363636 13.6363636 63.6363636 0 59.0909091 0 59.0909091 9.09090909 52.2727273 9.09090909 52.2727273 0 50 0 40.9090909 0 38.6363636 0 38.6363636 22.7272727 47.7272727 22.7272727 47.7272727 27.2727273 38.6363636 27.2727273 38.6363636 31.8181818 47.7272727 31.8181818"></polygon>
|
||||
<mask id="mask-21" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="34.0909091" height="40.9090909" fill="white">
|
||||
<use xlink:href="#path-20"></use>
|
||||
</mask>
|
||||
<polygon id="path-22" points="6.81818182 50 15.9090909 50 20.4545455 50 22.7272727 50 22.7272727 54.5454545 13.6363636 54.5454545 13.6363636 59.0909091 22.7272727 59.0909091 22.7272727 63.6363636 40.9090909 63.6363636 40.9090909 59.0909091 27.2727273 59.0909091 27.2727273 54.5454545 27.2727273 45.4545455 20.4545455 45.4545455 20.4545455 38.6363636 15.9090909 38.6363636 15.9090909 45.4545455 11.3636364 45.4545455 11.3636364 36.3636364 0 36.3636364 0 40.9090909 6.81818182 40.9090909"></polygon>
|
||||
<mask id="mask-23" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="40.9090909" height="27.2727273" fill="white">
|
||||
<use xlink:href="#path-22"></use>
|
||||
</mask>
|
||||
<polygon id="path-24" points="50 90.9090909 50 79.5454545 40.9090909 79.5454545 40.9090909 70.4545455 36.3636364 70.4545455 36.3636364 84.0909091 45.4545455 84.0909091 45.4545455 90.9090909 36.3636364 90.9090909 36.3636364 95.4545455 45.4545455 95.4545455 45.4545455 100 56.8181818 100 56.8181818 95.4545455 50 95.4545455"></polygon>
|
||||
<mask id="mask-25" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="20.4545455" height="29.5454545" fill="white">
|
||||
<use xlink:href="#path-24"></use>
|
||||
</mask>
|
||||
<polygon id="path-26" points="72.7272727 45.4545455 63.6363636 45.4545455 63.6363636 34.0909091 59.0909091 34.0909091 59.0909091 50 81.8181818 50 81.8181818 45.4545455 77.2727273 45.4545455 77.2727273 40.9090909 84.0909091 40.9090909 84.0909091 36.3636364 77.2727273 36.3636364 72.7272727 36.3636364 68.1818182 36.3636364 68.1818182 40.9090909 72.7272727 40.9090909"></polygon>
|
||||
<mask id="mask-27" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="25" height="15.9090909" fill="white">
|
||||
<use xlink:href="#path-26"></use>
|
||||
</mask>
|
||||
<polygon id="path-28" points="68.1818182 86.3636364 75 86.3636364 75 90.9090909 84.0909091 90.9090909 84.0909091 86.3636364 84.0909091 81.8181818 84.0909091 75 75 75 75 81.8181818 68.1818182 81.8181818 68.1818182 75 63.6363636 75 63.6363636 81.8181818 59.0909091 81.8181818 59.0909091 63.6363636 54.5454545 63.6363636 54.5454545 59.0909091 50 59.0909091 50 45.4545455 34.0909091 45.4545455 34.0909091 54.5454545 38.6363636 54.5454545 38.6363636 50 45.4545455 50 45.4545455 59.0909091 45.4545455 68.1818182 54.5454545 68.1818182 54.5454545 81.8181818 54.5454545 86.3636364 59.0909091 86.3636364 63.6363636 86.3636364"></polygon>
|
||||
<mask id="mask-29" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="50" height="45.4545455" fill="white">
|
||||
<use xlink:href="#path-28"></use>
|
||||
</mask>
|
||||
<polygon id="path-30" points="95.4545455 56.8181818 88.6363636 56.8181818 84.0909091 56.8181818 72.7272727 56.8181818 72.7272727 65.9090909 68.1818182 65.9090909 68.1818182 56.8181818 63.6363636 56.8181818 63.6363636 70.4545455 77.2727273 70.4545455 77.2727273 61.3636364 84.0909091 61.3636364 84.0909091 68.1818182 88.6363636 68.1818182 88.6363636 61.3636364 95.4545455 61.3636364 95.4545455 75 88.6363636 75 88.6363636 88.6363636 100 88.6363636 100 84.0909091 93.1818182 84.0909091 93.1818182 79.5454545 100 79.5454545 100 61.3636364 100 56.8181818 100 50 95.4545455 50"></polygon>
|
||||
<mask id="mask-31" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="36.3636364" height="38.6363636" fill="white">
|
||||
<use xlink:href="#path-30"></use>
|
||||
</mask>
|
||||
</defs>
|
||||
<g id="Onboarding" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="0.2.1---Tour-1" transform="translate(0.000000, -210.000000)">
|
||||
<g id="digital-money" transform="translate(0.000000, 210.000000)">
|
||||
<g id="bg-1">
|
||||
<g id="cityscape" opacity="0.15" transform="translate(0.000000, 54.000000)" stroke-width="2" stroke="#FFFFFF">
|
||||
<g id="travel-24px-outline_hotel" transform="translate(0.000000, 47.163934)">
|
||||
<g id="Group">
|
||||
<polyline id="Shape" points="12.9658816 82.4918033 0 82.4918033 0 48.7451565 12.9658816 48.7451565"></polyline>
|
||||
<polyline id="Shape" points="58.3464671 82.4918033 71.3123487 82.4918033 71.3123487 48.7451565 58.3464671 48.7451565"></polyline>
|
||||
<rect id="Rectangle-path" x="12.9658816" y="0" width="45.3805855" height="82.4918033"></rect>
|
||||
<path d="M25.9317632,14.9985097 L29.1732335,14.9985097" id="Shape"></path>
|
||||
<path d="M42.1391151,14.9985097 L45.3805855,14.9985097" id="Shape"></path>
|
||||
<path d="M25.9317632,29.9970194 L29.1732335,29.9970194" id="Shape"></path>
|
||||
<path d="M42.1391151,29.9970194 L45.3805855,29.9970194" id="Shape"></path>
|
||||
<path d="M25.9317632,44.9955291 L29.1732335,44.9955291" id="Shape"></path>
|
||||
<path d="M42.1391151,44.9955291 L45.3805855,44.9955291" id="Shape"></path>
|
||||
<path d="M25.9317632,59.9940387 L29.1732335,59.9940387" id="Shape"></path>
|
||||
<path d="M42.1391151,59.9940387 L45.3805855,59.9940387" id="Shape"></path>
|
||||
<path d="M35.6561743,82.4918033 L35.6561743,74.9925484" id="Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g id="business-24px-outline_building" transform="translate(71.312349, 0.000000)">
|
||||
<g id="Group">
|
||||
<polyline id="Shape" points="71.5050847 59.1304348 71.5050847 29.5652174 61.2900726 29.5652174 61.2900726 11.826087 40.8600484 11.826087 40.8600484 29.5652174 30.6450363 29.5652174 30.6450363 76.8695652"></polyline>
|
||||
<path d="M40.8600484,130.086957 L61.2900726,130.086957" id="Shape"></path>
|
||||
<path d="M51.0750605,0 L51.0750605,11.826087" id="Shape"></path>
|
||||
<rect id="Rectangle-path" x="0" y="76.8695652" width="40.8600484" height="53.2173913"></rect>
|
||||
<rect id="Rectangle-path" x="61.2900726" y="59.1304348" width="40.8600484" height="70.9565217"></rect>
|
||||
<path d="M76.6125908,76.8695652 L86.8276029,76.8695652" id="Shape"></path>
|
||||
<path d="M76.6125908,94.6086957 L86.8276029,94.6086957" id="Shape"></path>
|
||||
<path d="M76.6125908,112.347826 L86.8276029,112.347826" id="Shape"></path>
|
||||
<path d="M15.3225182,94.6086957 L25.5375303,94.6086957" id="Shape"></path>
|
||||
<path d="M15.3225182,112.347826 L25.5375303,112.347826" id="Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g id="travel-24px-outline_hotel-copy" transform="translate(224.537530, 50.163934)">
|
||||
<g id="Group">
|
||||
<polyline id="Shape" points="12.9658816 82.4918033 0 82.4918033 0 48.7451565 12.9658816 48.7451565"></polyline>
|
||||
<polyline id="Shape" points="58.3464671 82.4918033 71.3123487 82.4918033 71.3123487 48.7451565 58.3464671 48.7451565"></polyline>
|
||||
<rect id="Rectangle-path" x="12.9658816" y="0" width="45.3805855" height="82.4918033"></rect>
|
||||
<path d="M25.9317632,14.9985097 L29.1732335,14.9985097" id="Shape"></path>
|
||||
<path d="M42.1391151,14.9985097 L45.3805855,14.9985097" id="Shape"></path>
|
||||
<path d="M25.9317632,29.9970194 L29.1732335,29.9970194" id="Shape"></path>
|
||||
<path d="M42.1391151,29.9970194 L45.3805855,29.9970194" id="Shape"></path>
|
||||
<path d="M25.9317632,44.9955291 L29.1732335,44.9955291" id="Shape"></path>
|
||||
<path d="M42.1391151,44.9955291 L45.3805855,44.9955291" id="Shape"></path>
|
||||
<path d="M25.9317632,59.9940387 L29.1732335,59.9940387" id="Shape"></path>
|
||||
<path d="M42.1391151,59.9940387 L45.3805855,59.9940387" id="Shape"></path>
|
||||
<path d="M35.6561743,82.4918033 L35.6561743,74.9925484" id="Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g id="business-24px-outline_building-copy" transform="translate(295.849879, 3.000000)">
|
||||
<g id="Group">
|
||||
<polyline id="Shape" points="71.5050847 59.1304348 71.5050847 29.5652174 61.2900726 29.5652174 61.2900726 11.826087 40.8600484 11.826087 40.8600484 29.5652174 30.6450363 29.5652174 30.6450363 76.8695652"></polyline>
|
||||
<path d="M40.8600484,130.086957 L61.2900726,130.086957" id="Shape"></path>
|
||||
<path d="M51.0750605,0 L51.0750605,11.826087" id="Shape"></path>
|
||||
<rect id="Rectangle-path" x="0" y="76.8695652" width="40.8600484" height="53.2173913"></rect>
|
||||
<rect id="Rectangle-path" x="61.2900726" y="59.1304348" width="40.8600484" height="70.9565217"></rect>
|
||||
<path d="M76.6125908,76.8695652 L86.8276029,76.8695652" id="Shape"></path>
|
||||
<path d="M76.6125908,94.6086957 L86.8276029,94.6086957" id="Shape"></path>
|
||||
<path d="M76.6125908,112.347826 L86.8276029,112.347826" id="Shape"></path>
|
||||
<path d="M15.3225182,94.6086957 L25.5375303,94.6086957" id="Shape"></path>
|
||||
<path d="M15.3225182,112.347826 L25.5375303,112.347826" id="Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M187.5,247 C255.707167,247 311,191.707167 311,123.5 C311,55.2928334 255.707167,1.42108547e-14 187.5,1.42108547e-14 C119.292833,1.42108547e-14 64,55.2928334 64,123.5 C64,191.707167 119.292833,247 187.5,247 Z" id="Oval-2" fill="url(#linearGradient-1)" opacity="0.300000012"></path>
|
||||
</g>
|
||||
<g id="phone" transform="translate(133.000000, 32.000000)" stroke-width="2">
|
||||
<rect id="Combined-Shape" stroke="#647CE8" fill-opacity="0.65477808" fill="#223483" x="0" y="0" width="99.8310062" height="183.875349" rx="8"></rect>
|
||||
<path d="M0.519953157,155.972885 L99.311053,155.972885" id="Line" stroke="#647CE8" stroke-linecap="square"></path>
|
||||
<path d="M44.0762994,170.254952 L62.7946131,170.254952" id="Line" stroke="#647CE8" stroke-linecap="square"></path>
|
||||
<g id="qr-code" transform="translate(33.000000, 34.000000)" stroke="#1E307E" fill="#12E5B6">
|
||||
<g id="Group">
|
||||
<use id="Shape" mask="url(#mask-3)" xlink:href="#path-2"></use>
|
||||
<use id="Shape" mask="url(#mask-5)" xlink:href="#path-4"></use>
|
||||
<use id="Rectangle-path" mask="url(#mask-7)" xlink:href="#path-6"></use>
|
||||
<use id="Shape" mask="url(#mask-9)" xlink:href="#path-8"></use>
|
||||
<use id="Rectangle-path" mask="url(#mask-11)" xlink:href="#path-10"></use>
|
||||
<use id="Shape" mask="url(#mask-13)" xlink:href="#path-12"></use>
|
||||
<use id="Rectangle-path" mask="url(#mask-15)" xlink:href="#path-14"></use>
|
||||
<use id="Rectangle-path" mask="url(#mask-17)" xlink:href="#path-16"></use>
|
||||
<use id="Rectangle-path" mask="url(#mask-19)" xlink:href="#path-18"></use>
|
||||
<use id="Shape" mask="url(#mask-21)" xlink:href="#path-20"></use>
|
||||
<use id="Shape" mask="url(#mask-23)" xlink:href="#path-22"></use>
|
||||
<use id="Shape" mask="url(#mask-25)" xlink:href="#path-24"></use>
|
||||
<use id="Shape" mask="url(#mask-27)" xlink:href="#path-26"></use>
|
||||
<use id="Shape" mask="url(#mask-29)" xlink:href="#path-28"></use>
|
||||
<use id="Shape" mask="url(#mask-31)" xlink:href="#path-30"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 375 247" style="enable-background:new 0 0 375 247;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{opacity:0.15;}
|
||||
.st1{fill:none;stroke:#FFFFFF;stroke-width:2;}
|
||||
.st2{opacity:0.3;fill:url(#SVGID_1_);enable-background:new ;}
|
||||
.st3{fill:#293881;fill-opacity:0.6548;stroke:#6778BA;stroke-width:2;}
|
||||
.st4{fill:none;stroke:#6778BA;stroke-width:2;stroke-linecap:square;}
|
||||
.st5{fill:#5BC2A7;}
|
||||
</style>
|
||||
<g transform="translate(0.000000, 54.000000)" class="st0">
|
||||
<g>
|
||||
<polyline id="Shape" class="st1" points="13,123.7 0,123.7 0,90 13,90 "/>
|
||||
<polyline id="Shape_1_" class="st1" points="58.3,123.7 71.3,123.7 71.3,90 58.3,90 "/>
|
||||
<rect id="Rectangle-path" x="13" y="41.2" class="st1" width="45.4" height="82.5"/>
|
||||
<path id="Shape_2_" class="st1" d="M25.9,56.2h3.2"/>
|
||||
<path id="Shape_3_" class="st1" d="M42.1,56.2h3.2"/>
|
||||
<path id="Shape_4_" class="st1" d="M25.9,71.2h3.2"/>
|
||||
<path id="Shape_5_" class="st1" d="M42.1,71.2h3.2"/>
|
||||
<path id="Shape_6_" class="st1" d="M25.9,86.2h3.2"/>
|
||||
<path id="Shape_7_" class="st1" d="M42.1,86.2h3.2"/>
|
||||
<path id="Shape_8_" class="st1" d="M25.9,101.2h3.2"/>
|
||||
<path id="Shape_9_" class="st1" d="M42.1,101.2h3.2"/>
|
||||
<path id="Shape_10_" class="st1" d="M35.7,123.7v-7.5"/>
|
||||
</g>
|
||||
<g>
|
||||
<polyline id="Shape_11_" class="st1" points="142.8,67 142.8,37.5 132.6,37.5 132.6,19.7 112.2,19.7 112.2,37.5 102,37.5
|
||||
102,84.8 "/>
|
||||
<path id="Shape_12_" class="st1" d="M112.2,138h20.4"/>
|
||||
<path id="Shape_13_" class="st1" d="M122.4,7.9v11.8"/>
|
||||
<rect id="Rectangle-path_1_" x="71.3" y="84.8" class="st1" width="40.9" height="53.2"/>
|
||||
<rect id="Rectangle-path_2_" x="132.6" y="67" class="st1" width="40.9" height="71"/>
|
||||
<path id="Shape_14_" class="st1" d="M147.9,84.8h10.2"/>
|
||||
<path id="Shape_15_" class="st1" d="M147.9,102.5h10.2"/>
|
||||
<path id="Shape_16_" class="st1" d="M147.9,120.2h10.2"/>
|
||||
<path id="Shape_17_" class="st1" d="M86.6,102.5h10.2"/>
|
||||
<path id="Shape_18_" class="st1" d="M86.6,120.2h10.2"/>
|
||||
</g>
|
||||
<g>
|
||||
<polyline id="Shape_19_" class="st1" points="237.5,135.4 224.5,135.4 224.5,101.6 237.5,101.6 "/>
|
||||
<polyline id="Shape_20_" class="st1" points="282.9,135.4 295.8,135.4 295.8,101.6 282.9,101.6 "/>
|
||||
<rect id="Rectangle-path_3_" x="237.5" y="52.9" class="st1" width="45.4" height="82.5"/>
|
||||
<path id="Shape_21_" class="st1" d="M250.5,67.9h3.2"/>
|
||||
<path id="Shape_22_" class="st1" d="M266.7,67.9h3.2"/>
|
||||
<path id="Shape_23_" class="st1" d="M250.5,82.9h3.2"/>
|
||||
<path id="Shape_24_" class="st1" d="M266.7,82.9h3.2"/>
|
||||
<path id="Shape_25_" class="st1" d="M250.5,97.9h3.2"/>
|
||||
<path id="Shape_26_" class="st1" d="M266.7,97.9h3.2"/>
|
||||
<path id="Shape_27_" class="st1" d="M250.5,112.9h3.2"/>
|
||||
<path id="Shape_28_" class="st1" d="M266.7,112.9h3.2"/>
|
||||
<path id="Shape_29_" class="st1" d="M260.2,135.4v-7.5"/>
|
||||
</g>
|
||||
<g>
|
||||
<polyline id="Shape_30_" class="st1" points="367.4,56 367.4,26.4 357.1,26.4 357.1,8.7 336.7,8.7 336.7,26.4 326.5,26.4
|
||||
326.5,73.8 "/>
|
||||
<path id="Shape_31_" class="st1" d="M336.7,127.1h20.4"/>
|
||||
<path id="Shape_32_" class="st1" d="M346.9-3.1V8.7"/>
|
||||
<rect id="Rectangle-path_4_" x="295.8" y="73.8" class="st1" width="40.9" height="53.2"/>
|
||||
<rect id="Rectangle-path_5_" x="357.1" y="56" class="st1" width="40.9" height="71"/>
|
||||
<path id="Shape_33_" class="st1" d="M372.5,73.8h10.2"/>
|
||||
<path id="Shape_34_" class="st1" d="M372.5,91.5h10.2"/>
|
||||
<path id="Shape_35_" class="st1" d="M372.5,109.2h10.2"/>
|
||||
<path id="Shape_36_" class="st1" d="M311.2,91.5h10.2"/>
|
||||
<path id="Shape_37_" class="st1" d="M311.2,109.2h10.2"/>
|
||||
</g>
|
||||
</g>
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-234.5445" y1="2.2024" x2="-234.5445" y2="2.9551" gradientTransform="matrix(247 0 0 247 58120 -544)">
|
||||
<stop offset="0" style="stop-color:#4054A5"/>
|
||||
<stop offset="1" style="stop-color:#24285E"/>
|
||||
</linearGradient>
|
||||
<path class="st2" d="M187.5,247c68.2,0,123.5-55.3,123.5-123.5S255.7,0,187.5,0S64,55.3,64,123.5S119.3,247,187.5,247z"/>
|
||||
<g>
|
||||
<path class="st3" d="M141,32h83.8c4.4,0,8,3.6,8,8v167.9c0,4.4-3.6,8-8,8H141c-4.4,0-8-3.6-8-8V40C133,35.6,136.6,32,141,32z"/>
|
||||
<path class="st4" d="M133.5,188h98.8"/>
|
||||
<path class="st4" d="M177.1,202.3h18.7"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st5" d="M197.8,66H166v31.8h31.8V66L197.8,66z M193.3,93.3h-22.7V70.5h22.7V93.3L193.3,93.3z"/>
|
||||
<polygon class="st5" points="231.9,156.9 227.4,156.9 227.4,166 266,166 266,161.5 231.9,161.5 "/>
|
||||
<rect x="175.1" y="75.1" class="st5" width="13.6" height="13.6"/>
|
||||
<path class="st5" d="M166,166h31.8v-31.8H166V166L166,166z M170.5,138.7h22.7v22.7h-22.7V138.7L170.5,138.7z"/>
|
||||
<rect x="175.1" y="143.3" class="st5" width="13.6" height="13.6"/>
|
||||
<path class="st5" d="M234.2,66v31.8H266V66H234.2L234.2,66z M261.5,93.3h-22.7V70.5h22.7V93.3L261.5,93.3z"/>
|
||||
<rect x="243.3" y="75.1" class="st5" width="13.6" height="13.6"/>
|
||||
<rect x="256.9" y="102.4" class="st5" width="9.1" height="9.1"/>
|
||||
<rect x="166" y="120.5" class="st5" width="9.1" height="9.1"/>
|
||||
<polygon class="st5" points="213.7,102.4 195.5,102.4 195.5,106.9 218.3,106.9 218.3,97.8 218.3,93.3 222.8,93.3 222.8,84.2
|
||||
218.3,84.2 213.7,84.2 209.2,84.2 209.2,75.1 213.7,75.1 213.7,79.6 229.6,79.6 229.6,66 225.1,66 225.1,75.1 218.3,75.1 218.3,66
|
||||
216,66 206.9,66 204.6,66 204.6,88.7 213.7,88.7 213.7,93.3 204.6,93.3 204.6,97.8 213.7,97.8 "/>
|
||||
<polygon class="st5" points="172.8,116 181.9,116 186.5,116 188.7,116 188.7,120.5 179.6,120.5 179.6,125.1 188.7,125.1
|
||||
188.7,129.6 206.9,129.6 206.9,125.1 193.3,125.1 193.3,120.5 193.3,111.5 186.5,111.5 186.5,104.6 181.9,104.6 181.9,111.5
|
||||
177.4,111.5 177.4,102.4 166,102.4 166,106.9 172.8,106.9 "/>
|
||||
<polygon class="st5" points="216,156.9 216,145.5 206.9,145.5 206.9,136.5 202.4,136.5 202.4,150.1 211.5,150.1 211.5,156.9
|
||||
202.4,156.9 202.4,161.5 211.5,161.5 211.5,166 222.8,166 222.8,161.5 216,161.5 "/>
|
||||
<polygon class="st5" points="238.7,111.5 229.6,111.5 229.6,100.1 225.1,100.1 225.1,116 247.8,116 247.8,111.5 243.3,111.5
|
||||
243.3,106.9 250.1,106.9 250.1,102.4 243.3,102.4 238.7,102.4 234.2,102.4 234.2,106.9 238.7,106.9 "/>
|
||||
<polygon class="st5" points="234.2,152.4 241,152.4 241,156.9 250.1,156.9 250.1,152.4 250.1,147.8 250.1,141 241,141 241,147.8
|
||||
234.2,147.8 234.2,141 229.6,141 229.6,147.8 225.1,147.8 225.1,129.6 220.5,129.6 220.5,125.1 216,125.1 216,111.5 200.1,111.5
|
||||
200.1,120.5 204.6,120.5 204.6,116 211.5,116 211.5,125.1 211.5,134.2 220.5,134.2 220.5,147.8 220.5,152.4 225.1,152.4
|
||||
229.6,152.4 "/>
|
||||
<polygon class="st5" points="261.5,122.8 254.6,122.8 250.1,122.8 238.7,122.8 238.7,131.9 234.2,131.9 234.2,122.8 229.6,122.8
|
||||
229.6,136.5 243.3,136.5 243.3,127.4 250.1,127.4 250.1,134.2 254.6,134.2 254.6,127.4 261.5,127.4 261.5,141 254.6,141
|
||||
254.6,154.6 266,154.6 266,150.1 259.2,150.1 259.2,145.5 266,145.5 266,127.4 266,122.8 266,116 261.5,116 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 6.9 KiB |
|
Before Width: | Height: | Size: 713 B After Width: | Height: | Size: 713 B |
|
|
@ -6,73 +6,68 @@
|
|||
<ion-nav-back-button>
|
||||
</ion-nav-back-button>
|
||||
</ion-nav-bar>
|
||||
<ion-content>
|
||||
<ion-content scroll="false">
|
||||
<div class="ng-hide" ng-show="deleted">
|
||||
<div class="row text-center">
|
||||
<h3 translate class="col col-75 center-block">Wallet recovery phrase not available.</h3>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<p translate class="col col-75 center-block">
|
||||
You can still export it from Advanced > Export.
|
||||
</p>
|
||||
</div>
|
||||
<div class="phrase-unavailable" translate>Wallet recovery phrase not available.</div>
|
||||
<div class="phrase-unavailable-instructions" translate>You can still export it from Advanced > Export.</div>
|
||||
</div>
|
||||
<!--
|
||||
<!--
|
||||
## STEP 1
|
||||
-->
|
||||
<div class="ng-hide" ng-show="step == 1 && (mnemonicWords || (!credentialsEncrypted && !deleted))">
|
||||
<div id="wallet-backup-phrase-step-1" class="ng-hide" ng-show="step == 1 && (mnemonicWords || (!credentialsEncrypted && !deleted))">
|
||||
<div class="initial-prompt" translate>Please carefully write down this phrase.</div>
|
||||
<div class="backup-phrase" ng-class="{'enable_text_select': wallet.network == 'testnet'}">
|
||||
<span ng-repeat="word in mnemonicWords track by $index"><span style="white-space:nowrap">{{word}}</span><span ng-show="useIdeograms">　</span> </span>
|
||||
<div class="backup-phrase-content">
|
||||
<span class="backup-phrase-content-word-readonly" ng-repeat="word in mnemonicWords track by $index"><span style="white-space:nowrap">{{word}}</span><span ng-show="useIdeograms">　</span> </span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<p class="col col-70" translate>
|
||||
Please carefully write down this phrase
|
||||
</p>
|
||||
</div>
|
||||
<div class="row text-center" ng-show="mnemonicHasPassphrase">
|
||||
<p class="bold-text col col-80 center-block">
|
||||
<span translate>
|
||||
<div class="password-required" ng-show="mnemonicHasPassphrase" translate>
|
||||
This recovery phrase was created with a password. To recover this wallet both the recovery phrase and password are needed.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="cta-buttons">
|
||||
<button ng-show="!deleted" ng-disabled="credentialsEncrypted || error" class="button button-block button-positive" ng-click="goToStep(2);" translate>I've written it down
|
||||
</button>
|
||||
<div class="tldr-prompt" translate>We'll confirm on the next screen.</div>
|
||||
<button ng-show="!deleted" ng-disabled="credentialsEncrypted || error" class="button button-standard button-primary" ng-click="goToStep(2);" translate>I've written it down</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<!--
|
||||
## STEP 2
|
||||
-->
|
||||
<div class="ng-hide" ng-show="step == 2">
|
||||
<div id="wallet-backup-phrase-step-2" class="ng-hide" ng-show="step == 2">
|
||||
<div class="confirmation-prompt" translate>Let's verify your backup phrase.</div>
|
||||
<div class="backup-phrase">
|
||||
<span ng-repeat="cword in customWords track by $index" ng-show="customWords[$index]">
|
||||
<button class="button select-word" ng-click="removeButton($index, cword)">{{cword.word}}</button>
|
||||
</span>
|
||||
<div class="backup-phrase-content">
|
||||
<span ng-repeat="cword in customWords track by $index" ng-show="customWords[$index]">
|
||||
<button class="button select-word" ng-click="removeButton($index, cword)">{{cword.word}}</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="select-phrase" class="cta-buttons">
|
||||
<div id="select-phrase-content">
|
||||
<div ng-show="!selectComplete" class="tldr-prompt" translate>Please tap each word in the correct order.</div>
|
||||
<div ng-show="selectComplete" class="tldr-prompt" translate>Is this correct?</div>
|
||||
<span ng-show="!selectComplete" ng-repeat="shuffledWord in shuffledMnemonicWords track by $index">
|
||||
<button class="button select-word" ng-click="addButton($index, shuffledWord)"
|
||||
ng-disabled="shuffledWord.selected">{{shuffledWord.word}}
|
||||
</button>
|
||||
</span>
|
||||
<button ng-show="selectComplete" class="button button-standard button-primary" ng-click="goToStep(3);" translate>Confirm</button>
|
||||
<!-- TODO: implement -->
|
||||
<button ng-show="selectComplete" class="button button-standard button-secondary button-clear" ng-click="clearAll();" translate>Clear</button>
|
||||
</div>
|
||||
<div id="select-phrase">
|
||||
<p translate>
|
||||
Please tap each word in the correct order.
|
||||
</p>
|
||||
<span ng-repeat="shuffledWord in shuffledMnemonicWords track by $index">
|
||||
<button class="button select-word" ng-click="addButton($index, shuffledWord)"
|
||||
ng-disabled="shuffledWord.selected">{{shuffledWord.word}}
|
||||
</button>
|
||||
</span>
|
||||
<button ng-show="selectComplete" id="confirm-phrase" class="button button-block button-positive" ng-click="goToStep(3);" translate>Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<!--
|
||||
## STEP 3
|
||||
-->
|
||||
<div class="ng-hide" ng-show="step == 3">
|
||||
<h5 translate>Enter your password</h5>
|
||||
<label class="item item-input item-stacked-label">
|
||||
<span class="input-label" transalate>In order to verify your wallet backup, please type your password:</span>
|
||||
<input type="text" id="passphrase" ng-model="data.passphrase" autocapitalize="off" spellcheck="false" autofocus/>
|
||||
</label>
|
||||
<button ng-disabled="!data.passphrase" class="button button-block button-positive" ng-click="goToStep(4);" translate>Confirm
|
||||
</button>
|
||||
<div id="wallet-backup-phrase-step-3" class="ng-hide" ng-show="step == 3">
|
||||
<div class="password-prompt" translate>Enter your password</h5>
|
||||
<label class="item item-input item-stacked-label">
|
||||
<div class="input-label" translate>In order to verify your wallet backup, please type your password.</div>
|
||||
<input type="text" id="passphrase" ng-model="data.passphrase" autocapitalize="off" spellcheck="false" autofocus/>
|
||||
</label>
|
||||
<button ng-disabled="!data.passphrase" class="button button-block button-positive" ng-click="goToStep(4);" translate>Confirm
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<ion-view id="backup-warning" class="onboarding" ng-controller="backupWarningController">
|
||||
<ion-nav-bar class="bar-royal">
|
||||
<ion-nav-bar>
|
||||
<ion-nav-buttons side="primary">
|
||||
<button class="button button-back button-clear" ng-click="goBack()">
|
||||
<i class="icon ion-ios-arrow-thin-left"></i>
|
||||
|
|
@ -7,26 +7,12 @@
|
|||
</ion-nav-buttons>
|
||||
</ion-nav-bar>
|
||||
<ion-content scroll="false">
|
||||
<div class="row text-center">
|
||||
<h3 translate class="col col-80">
|
||||
Are you being watched?
|
||||
</h3>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<p class="col col-75 tagline">
|
||||
Now is a perfect time to assess your surroundings. Nearby windows? Hidden cameras? Shoulder-spies?
|
||||
</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<img src="img/backup-warning.svg" class="col col-60 warning-image">
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<p class="col col-60">
|
||||
Anyone with your backup phrase can access or spend your bitcoin.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cta-buttons">
|
||||
<button class="button button-block button-primary col col-75" ng-click="openPopup()" translate>All clear, let's do this</button>
|
||||
<div class="onboarding-topic">Are you being watched?</div>
|
||||
<div class="onboarding-description">Now is a perfect time to assess your surroundings. Nearby windows? Hidden cameras? Shoulder-spies?</div>
|
||||
<div class="onboarding-illustration-backup-warning"></div>
|
||||
<div id="cta-buttons">
|
||||
<div class="onboarding-tldr">Anyone with your backup phrase can access or spend your bitcoin.</div>
|
||||
<button class="button button-standard button-primary" ng-click="openPopup()" translate>All clear, let's do this</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,10 @@
|
|||
<div id="backup-confirm-modal" class="popup-modal">
|
||||
<div class="popup-modal-header">
|
||||
<div ng-class="{'popup-modal-header-img-success': !backupError, 'popup-modal-header-img-fail': backupError}" class="popup-modal-header-img"></div>
|
||||
<div class="popup-modal-header popup-modal-header-success">
|
||||
<div class="popup-modal-header-img-success popup-modal-header-img"></div>
|
||||
</div>
|
||||
<div class="popup-modal-content" ng-class="{'popup-modal-content-success': !backupError, 'popup-modal-content-fail': backupError}">
|
||||
<div class="text-center" ng-show="!backupError">
|
||||
<h5 translate>Your bitcoin wallet is backed up!</h5>
|
||||
<p translate> Be sure to store your recovery phrase in a secure place. If this app is deelted, you money cannot be recoved with out it.</p>
|
||||
<button
|
||||
class="button button-clear expand"
|
||||
ng-click="closeBackupResultModal()"
|
||||
translate>I Understand
|
||||
</button>
|
||||
</div>
|
||||
<div class="popup-modal-content popup-modal-content-success">
|
||||
<div class="popup-modal-heading" translate>Your bitcoin wallet is backed up!</div>
|
||||
<div class="popup-modal-message" translate>Be sure to store your recovery phrase in a secure place. If this app is deleted, your money cannot be recoved without it.</div>
|
||||
<button class="button button-clear" ng-click="closeBackupResultModal()" translate>Got it</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,12 @@
|
|||
<div id="screenshot-warning-modal" class="popup-modal">
|
||||
<div class="popup-modal-header-success">
|
||||
<div class="popup-modal-header-img"></div>
|
||||
<div class="popup-modal-header popup-modal-header-warning">
|
||||
<div class="popup-modal-header-img-warning popup-modal-header-img"></div>
|
||||
</div>
|
||||
<div class="popup-modal-content" ng-class="{'popup-modal-content-success': !backupError, 'popup-modal-content-fail': backupError}">
|
||||
<div class="text-center" ng-show="!backupError">
|
||||
<h5 translate>Screenshots are <br /> not secure</h5>
|
||||
<p translate> If you take a screenshot, your backup may be viewed by other apps. You can make a safe backup with physical paper and a pen.</p>
|
||||
<button
|
||||
class="button button-clear expand"
|
||||
ng-click="close()"
|
||||
translate>I Understand
|
||||
</button>
|
||||
<div class="popup-modal-content popup-modal-content-warning">
|
||||
<div>
|
||||
<div class="popup-modal-heading" translate>Screenshots are not secure</div>
|
||||
<div class="popup-modal-message" translate>If you take a screenshot, your backup may be viewed by other apps. You can make a safe backup with physical paper and a pen.</div>
|
||||
<button class="button button-clear" ng-click="close()" translate>I understand</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,15 @@
|
|||
<ion-view id="onboarding-backup-request" class="onboarding">
|
||||
<ion-content ng-controller="backupRequestController" scroll="false">
|
||||
<div class="row">
|
||||
<img src="img/onboarding-warning.svg" class="col col-75 warning">
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<h3 translate class="col-75 col">
|
||||
No backup, no bitcoin.
|
||||
</h3>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p class="col col-60 text-center">
|
||||
Since only you control your money, you’ll need save your backup phrase in case this app is deleted.
|
||||
</p>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<i class="ion-ios-arrow-thin-down light-blue col col-60" id="arrow-down"></i>
|
||||
<div id="warning">
|
||||
<img src="img/onboarding-warning.svg" id="alert-icon">
|
||||
<div class="onboarding-topic" translate>No backup, no bitcoin.</div>
|
||||
<div class="onboarding-description" id="backup-description" translate>Since only you control your money, you’ll need save your backup phrase in case this app is deleted.</div>
|
||||
</div>
|
||||
<div class="cta-buttons">
|
||||
<div class="row">
|
||||
<button class="button button-block button-positive col-75 col" href
|
||||
ui-sref="onboarding.backupWarning({from: 'onboarding.backupRequest', walletId: walletId})" translate>Backup wallet</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button class="button button-block button-transparent col-75 col" ng-click="openPopup()" translate>I'll backup my wallet later</button>
|
||||
</div>
|
||||
<i class="ion-ios-arrow-thin-down" id="arrow-down"></i>
|
||||
<div class="onboarding-tldr" id="backup-tldr" translate>Your wallet is never saved to cloud storage or standard device backups.</div>
|
||||
<button class="button button-standard button-primary" ui-sref="onboarding.backupWarning({from: 'onboarding.backupRequest', walletId: walletId})" translate>Backup wallet</button>
|
||||
<button class="button button-standard button-secondary button-clear" ng-click="openPopup()" translate>I'll backup my wallet later</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
|
|
|
|||
|
|
@ -1,33 +1,26 @@
|
|||
<ion-view ng-controller="collectEmailController" id="onboarding-collect-email" class="onboarding">
|
||||
<ion-content>
|
||||
<div class="row">
|
||||
<img src="img/onboarding-success.svg" class="col col-75" id="success-image" />
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<h3 translate class="col">Wallet Created</h3>
|
||||
<ion-content scroll="false">
|
||||
<div id="success-container">
|
||||
<img src="img/onboarding-success.svg" id="success-image" />
|
||||
<div id="success-message" translate>Wallet Created</div>
|
||||
</div>
|
||||
<div id="collect-email">
|
||||
<div ng-if="!confirmation">
|
||||
<div class="row text-center">
|
||||
<p translate class="col col-75">Where would you like to receive email notifications about payments?</p>
|
||||
</div>
|
||||
<form name="emailForm" ng-submit="confirm(emailForm)" novalidate>
|
||||
<label class="item item-input col col-75">
|
||||
<i class="icon ion-arrow-right-c"></i>
|
||||
<input type="email" id="email" name="email" ng-model="email" placeholder="satoshi@example.com" required></input>
|
||||
<div id="collect-email-inner" ng-if="!confirmation">
|
||||
<div translate class="heading">Email Notifications</div>
|
||||
<div translate class="prompt">Where would you like to receive email notifications about payments?</div>
|
||||
<form id="email-form" name="emailForm" ng-submit="confirm(emailForm)" novalidate>
|
||||
<label class="item item-input" id="email-label">
|
||||
<input type="email" name="email" ng-model="email" placeholder="email address" required></input>
|
||||
</label>
|
||||
<ion-checkbox ng-model="data.accept"><span translate>Get news and updates from BitPay</span></ion-checkbox>
|
||||
<button class="button button-standard button-primary" disabled>
|
||||
Continue →
|
||||
</button>
|
||||
</form>
|
||||
<ion-list id="news-updates" class="row">
|
||||
<ion-checkbox ng-model="data.accept" class="col col-80"><span translate>Get news and updates from Bitpay</span></ion-checkbox>
|
||||
</ion-list>
|
||||
</div>
|
||||
<div ng-if="confirmation">
|
||||
<div class="row text-center">
|
||||
<p translate class="col col-75">Is this email address correct?</p>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<p class="col col-75">{{email}}</p>
|
||||
</div>
|
||||
<p translate class="confirm">Is this email address correct?</p>
|
||||
<p class="user-email">{{email}}</p>
|
||||
<div class="row">
|
||||
<div class="col col-50">
|
||||
<button class="button button-block button-stable" ng-click="cancel()">
|
||||
|
|
|
|||
|
|
@ -8,23 +8,23 @@
|
|||
</ion-nav-buttons>
|
||||
</ion-nav-bar>
|
||||
<ion-content scroll="false" ng-class="{'has-header': backedUp == 'false'}">
|
||||
<div class="row text-center">
|
||||
<h3 translate class="col-75 col">Almost done! Let's review</h3>
|
||||
<div id="onboarding-disclaimer-container">
|
||||
<div class="onboarding-topic" id="disclaimer-topic">Almost done! Let's review.</div>
|
||||
<div class="onboarding-description" id="disclaimer-description">Bitcoin is different – it cannot be safely held with a bank or web service.</div>
|
||||
<ion-list>
|
||||
<ion-checkbox ng-model="accept1">
|
||||
<span translate>I understand that my funds are held securely on this device, not by a company.</span>
|
||||
</ion-checkbox>
|
||||
<ion-checkbox ng-model="accept2">
|
||||
<span translate>I understand that if this app is moved to another device or deleted, my bitcoin can only be recovered with the backup phrase.</span>
|
||||
</ion-checkbox>
|
||||
</ion-list>
|
||||
</div>
|
||||
<div class="row text-center tag">
|
||||
<p translate class="col col-75">
|
||||
Bitcoin is different - it cannot be safely held with a bank or web service
|
||||
</p>
|
||||
</div>
|
||||
<ion-list>
|
||||
<ion-checkbox ng-model="accept1"><span translate>I understand my funds are held securely on this device, not by a company.</span></ion-checkbox>
|
||||
<ion-checkbox ng-model="accept2"><span translate>I understand if this app moved to another device or deleted, my bitcoin can only be recovered with the backup phrase</span></ion-checkbox>
|
||||
</ion-list>
|
||||
<div id="agree-to-terms" ng-if="accept1 && accept2" ng-class="{'header-present': backedUp == 'false'}">
|
||||
<div id="agree-to-terms-content" class="center-block">
|
||||
<ion-checkbox ng-model="terms.accept3"></ion-checkbox>
|
||||
<p translate>I have read, understood, and agree with the <a ng-click="openTermsModal()" translate>Terms of use</a>.</p>
|
||||
<button ng-disabled="!accept1 || !accept2 || !terms.accept3" class="button button-block button-positive" ng-click="confirm()" translate>Confirm & Finish</button>
|
||||
<p translate>I have read, understood, and agree to the <a ng-click="openTermsModal()" translate>Terms of Use</a>.</p>
|
||||
<button ng-disabled="!accept1 || !accept2 || !terms.accept3" class="button button-block button-positive" ng-click="confirm()" translate>Confirm & Finish</button>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,11 @@
|
|||
<ion-view class="onboarding" id="onboarding-push-notifications">
|
||||
<ion-content ng-controller="notificationsController">
|
||||
<div class="text-center row">
|
||||
<h2 translate class="col col-80">
|
||||
Push Notifications
|
||||
</h2>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<p class="col col-75 tagline" translate>
|
||||
Would you like to receive push notifications about payments?
|
||||
</p>
|
||||
</div>
|
||||
<div id="cta">
|
||||
</div>
|
||||
<div class="cta-buttons">
|
||||
<button class="button button-block button-primary col col-75" ng-click="allowNotif()" translate>Allow notifications</button>
|
||||
<button class="button button-block button-translucent col col-75" href ui-sref="onboarding.backupRequest({walletId: walletId})" translate>Not now</button>
|
||||
</div>
|
||||
<div class="onboarding-topic" id="notifications-topic" translate>Push Notifications</div>
|
||||
<div class="onboarding-description" translate>Would you like to receive push notifications about payments?</div>
|
||||
<div class="onboarding-illustration-notifications"></div>
|
||||
<div id="cta-buttons">
|
||||
<button class="button button-standard button-primary" ng-click="allowNotif()" translate>Allow notifications</button>
|
||||
<button class="button button-standard button-secondary button-clear" href ui-sref="onboarding.backupRequest({walletId: walletId})" translate>Not now</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<ion-view ng-controller="tourController" ng-init="init()" class="onboarding" id="onboard-tour">
|
||||
<ion-nav-bar class="bar-stable">
|
||||
<ion-view ng-controller="tourController" ng-init="init()" class="onboarding" id="onboarding-tour">
|
||||
<ion-nav-bar>
|
||||
<ion-nav-title></ion-nav-title>
|
||||
<ion-nav-buttons side="primary">
|
||||
<button class="button back-button button-clear" ng-click="goBack()">
|
||||
|
|
@ -7,79 +7,46 @@
|
|||
</button>
|
||||
</ion-nav-buttons>
|
||||
<ion-nav-buttons side="secondary">
|
||||
<button class="button back-button button-clear" ng-show="data.index == 0" ng-click="createDefaultWallet()">
|
||||
{{'Skip' | translate}}
|
||||
</button>
|
||||
<button class="button back-button button-clear" ng-show="data.index == 0" ng-click="createDefaultWallet()">{{'Skip' | translate}}</button>
|
||||
</ion-nav-buttons>
|
||||
</ion-nav-bar>
|
||||
<ion-slides class="slides" options="options" slider="data.slider">
|
||||
<ion-slide-page>
|
||||
<ion-content id="onboard-tour-secure" scroll="false">
|
||||
<div class="text-center row">
|
||||
<h2 class="col col-60" translate>Bitcoin is secure, digital money</h2>
|
||||
</div>
|
||||
<div class="text-center row">
|
||||
<p translate class="col col-75 tagline">
|
||||
You can spend bitcoin at millions of websites and stores worldwide
|
||||
</p>
|
||||
</div>
|
||||
<div id="cta">
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<p translate class="col">
|
||||
Just scan the code to pay
|
||||
</p>
|
||||
</div>
|
||||
<div class="row cta-button">
|
||||
<button class="button button-positive col col-75 next-slide button-translucent" ng-click="slideNext()">
|
||||
Got it <i class="icon ion-ios-arrow-thin-right"></i>
|
||||
<div class="onboarding-topic" translate>Bitcoin is secure,<br/>digital money.</div>
|
||||
<div class="onboarding-description" translate>You can spend bitcoin at millions of websites and stores worldwide.</div>
|
||||
<div class="onboarding-illustration-secure"></div>
|
||||
<div class="cta-buttons">
|
||||
<div class="onboarding-tldr" translate>Just scan the code to pay.</div>
|
||||
<button class="button button-standard button-secondary" ng-click="slideNext()">
|
||||
Got it →
|
||||
</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-slide-page>
|
||||
<ion-slide-page>
|
||||
<ion-content id="onboard-tour-currency" scroll="false">
|
||||
<div class="text-center row">
|
||||
<h2 class="col col-75" translate>Bitcoin is a currency</h2>
|
||||
<div class="onboarding-topic" translate>Bitcoin is a currency.</div>
|
||||
<div class="onboarding-description" translate>You can trade it for other currencies like US Dollars, Euros, or Pounds.</div>
|
||||
<div class="onboarding-illustration-currency">
|
||||
<div id="onboarding-illustration-currency-exchange-rate">1 BTC = {{localCurrencySymbol}}{{localCurrencyPerBtc}}</div>
|
||||
</div>
|
||||
<div class="text-center row">
|
||||
<p translate class="col col-75 tagline">
|
||||
You can trade it for other currencies like US Dollars, Euros, or Pounds
|
||||
</p>
|
||||
</div>
|
||||
<div id="cta">
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<p translate class="col">
|
||||
The exchange rate changes with the market
|
||||
</p>
|
||||
</div>
|
||||
<div class="row cta-button">
|
||||
<button class="button button-positive col col-75 next-slide button-translucent" ng-click="slideNext()">
|
||||
Makes sense <i class="icon ion-ios-arrow-thin-right"></i>
|
||||
<div class="cta-buttons">
|
||||
<div class="onboarding-tldr" translate>The exchange rate changes with the market.</div>
|
||||
<button class="button button-standard button-secondary" ng-click="slideNext()">
|
||||
Makes sense →
|
||||
</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-slide-page>
|
||||
<ion-slide-page>
|
||||
<ion-content id="onboard-tour-control" scroll="false">
|
||||
<div class="text-center row">
|
||||
<h2 translate class="col col-80">You control your bitcoin</h2>
|
||||
</div>
|
||||
<div class="text-center row">
|
||||
<p translate class="col col-75 tagline">
|
||||
The BitPay wallet stores your bitcoin with cutting-edge security
|
||||
</p>
|
||||
</div>
|
||||
<div id="cta">
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<p translate class="col">
|
||||
Not even BitPay can access it
|
||||
</p>
|
||||
</div>
|
||||
<div class="row cta-button">
|
||||
<button class="button button-positive col col-75 get-started" ng-click="createDefaultWallet()">
|
||||
<div translate class="onboarding-topic">You control your bitcoin.</div>
|
||||
<div translate class="onboarding-description">This app stores your bitcoin with cutting-edge security.</div>
|
||||
<div class="onboarding-illustration-control"></div>
|
||||
<div class="cta-buttons">
|
||||
<div class="onboarding-tldr" translate>Not even BitPay can access it.</div>
|
||||
<button class="button button-standard button-primary" ng-click="createDefaultWallet()">
|
||||
Create bitcoin wallet
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,13 @@
|
|||
<ion-view id="onboard-welcome" class="onboarding">
|
||||
<ion-content ng-controller="welcomeController" ng-init="createProfile()" scroll="false">
|
||||
<!-- <qr-scanner id="shopping-24" on-scan="goImport(data)"></qr-scanner> -->
|
||||
<article id="logo-tagline">
|
||||
<div class="row text-center">
|
||||
<img src='img/bitpay-logo.svg' class="logo col col-50" />
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<p translate class="text-center col col-60">
|
||||
Take control of your money, <br /> get started with bitcoin.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
<article id="cta-buttons">
|
||||
<div class="row">
|
||||
<button class="button button-block get-started col col-75" href ui-sref="onboarding.tour" translate>Get started</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button class="button button-block restore col col-75" translate href ui-sref="onboarding.import({'fromOnboarding':true})">Restore</button>
|
||||
</div>
|
||||
</article>
|
||||
<!-- <qr-scanner id="qrcode" on-scan="goImport(data)"></qr-scanner> -->
|
||||
<div id="logo-tagline">
|
||||
<img src='img/bitpay-logo.svg' id="logo" />
|
||||
<p id="lead" translate>Take control of your money,<br />get started with bitcoin.</p>
|
||||
</div>
|
||||
<div id="cta-buttons">
|
||||
<button class="button button-standard button-primary" id="get-started" href ui-sref="onboarding.tour" translate>Get started</button>
|
||||
<button class="button button-standard button-secondary button-clear" id="restore" translate href ui-sref="onboarding.import({'fromOnboarding':true})">Restore from backup</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
|
|
|
|||
Loading…
Reference in New Issue