Merge pull request #253 from bitjson/wip/design
Full design review & polishing onboarding process
This commit is contained in:
Jason Dreyzehner
GitHub
commit
3068fc31f4
34 changed files with 779 additions and 1129 deletions
|
|
@ -20,7 +20,8 @@
|
||||||
<preference name="ShowSplashScreenSpinner" value="false" />
|
<preference name="ShowSplashScreenSpinner" value="false" />
|
||||||
<preference name="AutoHideSplashScreen" value="false" />
|
<preference name="AutoHideSplashScreen" value="false" />
|
||||||
<preference name="FadeSplashScreen" value="true" />
|
<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="StatusBarOverlaysWebView" value="true" />
|
||||||
<preference name="StatusBarBackgroundColor" value="#1e3186" />
|
<preference name="StatusBarBackgroundColor" value="#1e3186" />
|
||||||
<preference name="StatusBarStyle" value="lightcontent" />
|
<preference name="StatusBarStyle" value="lightcontent" />
|
||||||
|
|
@ -29,6 +30,7 @@
|
||||||
<preference name="Orientation" value="default" />
|
<preference name="Orientation" value="default" />
|
||||||
|
|
||||||
<!-- Plugins -->
|
<!-- Plugins -->
|
||||||
|
<plugin name="cordova-plugin-device" spec="~1.1.3"/>
|
||||||
<plugin name="cordova-plugin-globalization" spec="~1.0.4" />
|
<plugin name="cordova-plugin-globalization" spec="~1.0.4" />
|
||||||
<plugin name="cordova.plugins.diagnostic" spec="~3.2.1" />
|
<plugin name="cordova.plugins.diagnostic" spec="~3.2.1" />
|
||||||
<plugin name="cordova-plugin-splashscreen" spec="~4.0.0" />
|
<plugin name="cordova-plugin-splashscreen" spec="~4.0.0" />
|
||||||
|
|
|
||||||
|
|
@ -64,7 +64,7 @@
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"preinstall": "bower install && npm i fs-extra",
|
"preinstall": "bower install && npm i fs-extra",
|
||||||
"postinstall": "npm run apply:bitpay && cordova prepare",
|
"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: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",
|
"start:android": "npm run build:www && npm run build:android && npm run open:android",
|
||||||
"watch": "grunt watch",
|
"watch": "grunt watch",
|
||||||
|
|
|
||||||
|
|
@ -72,8 +72,8 @@ angular.module('copayApp.controllers').controller('backupController',
|
||||||
|
|
||||||
var showBackupResult = function() {
|
var showBackupResult = function() {
|
||||||
if ($scope.backupError) {
|
if ($scope.backupError) {
|
||||||
var title = gettextCatalog.getString('uh oh...');
|
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 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() {
|
popupService.showAlert(title, message, function() {
|
||||||
$scope.goToStep(1);
|
$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() {
|
$scope.openPopup = function() {
|
||||||
|
|
||||||
var title = gettextCatalog.getString('Without a backup, you could lose money.');
|
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 okText = gettextCatalog.getString('I understand');
|
||||||
var cancelText = gettextCatalog.getString('Go back');
|
var cancelText = gettextCatalog.getString('Go back');
|
||||||
popupService.showConfirm(title, message, okText, cancelText, function(val) {
|
popupService.showConfirm(title, message, okText, cancelText, function(val) {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
angular.module('copayApp.controllers').controller('tourController',
|
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;
|
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() {
|
$scope.createDefaultWallet = function() {
|
||||||
ongoingProcess.set('creatingWallet', true);
|
ongoingProcess.set('creatingWallet', true);
|
||||||
profileService.createDefaultWallet(function(err, walletClient) {
|
profileService.createDefaultWallet(function(err, walletClient) {
|
||||||
|
|
|
||||||
58
src/sass/buttons.scss
Normal file
58
src/sass/buttons.scss
Normal file
|
|
@ -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%;
|
border-radius: 50%;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 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-repeat:no-repeat;
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
background-size: 103%;
|
background-size: 103%;
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
@import "fonts";
|
@import "fonts";
|
||||||
@import "variables";
|
@import "variables";
|
||||||
@import "icons";
|
|
||||||
@import "ionic";
|
@import "ionic";
|
||||||
|
@import "icons";
|
||||||
|
@import "buttons";
|
||||||
@import "forms";
|
@import "forms";
|
||||||
@import "mixins/mixins";
|
@import "mixins/mixins";
|
||||||
@import "views/views";
|
@import "views/views";
|
||||||
|
|
|
||||||
|
|
@ -92,12 +92,6 @@ input[type=number] {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-block {
|
|
||||||
width: 90% !important;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name-wallet {
|
.name-wallet {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
|
||||||
|
|
@ -2,20 +2,33 @@
|
||||||
$royal: #1e3186;
|
$royal: #1e3186;
|
||||||
$soft-blue: #647ce8;
|
$soft-blue: #647ce8;
|
||||||
$fill-blue: #D5DFFF;
|
$fill-blue: #D5DFFF;
|
||||||
$subtle-gray: #f5f5f5;
|
$subtle-gray: #f7f7f7;
|
||||||
$roboto: "Roboto", sans-serif;
|
$roboto: "Roboto", sans-serif;
|
||||||
$roboto-light: "Roboto-Light", sans-serif-light;
|
$roboto-light: "Roboto-Light", sans-serif-light;
|
||||||
|
$success-green: #17ae8c;
|
||||||
|
$warning-orange: #ffa500;
|
||||||
$dark-gray: #445;
|
$dark-gray: #445;
|
||||||
$mid-gray: #667;
|
$mid-gray: #667;
|
||||||
$light-gray: #9b9bab;
|
$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 */
|
/* Set ionic variables */
|
||||||
|
|
||||||
$positive: $soft-blue;
|
$positive: $soft-blue;
|
||||||
|
|
||||||
|
$font-size-base: 16px;
|
||||||
|
$font-size-small: 12px;
|
||||||
$font-family-sans-serif: $roboto;
|
$font-family-sans-serif: $roboto;
|
||||||
$font-family-light-sans-serif: $roboto-light;
|
$font-family-light-sans-serif: $roboto-light;
|
||||||
|
|
||||||
|
$button-border-radius: $visible-radius;
|
||||||
|
$button-height: 52px;
|
||||||
|
$button-padding: 16px;
|
||||||
|
|
||||||
$base-background-color: $subtle-gray;
|
$base-background-color: $subtle-gray;
|
||||||
|
|
||||||
$item-default-active-bg: $subtle-gray;
|
$item-default-active-bg: $subtle-gray;
|
||||||
|
|
@ -25,4 +38,4 @@ $tabs-icon-size: 22px;
|
||||||
|
|
||||||
$ios-transition-duration: 200ms;
|
$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{
|
#backup-warning{
|
||||||
.warning{
|
#cta-buttons {
|
||||||
margin:4rem auto 1rem;
|
@extend %cta-buttons;
|
||||||
height: 11rem;
|
padding-bottom: 10vh;
|
||||||
}
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,16 +7,17 @@
|
||||||
width: 90%;
|
width: 90%;
|
||||||
max-width: 350px;
|
max-width: 350px;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
border-radius: .25rem;
|
border-radius: $unmistakable-radius;
|
||||||
|
text-align: center;
|
||||||
&-header {
|
&-header {
|
||||||
&-success {
|
&-success {
|
||||||
background: rgb(1, 209, 162);
|
background: $success-green;
|
||||||
}
|
}
|
||||||
&-warning {
|
&-warning {
|
||||||
background: orange;
|
background: $warning-orange;
|
||||||
}
|
}
|
||||||
padding: 1rem;
|
padding: 2rem;
|
||||||
border-radius: .25rem .25rem 0 0;
|
border-radius: $unmistakable-radius $unmistakable-radius 0 0;
|
||||||
min-height: 120px;
|
min-height: 120px;
|
||||||
&-img{
|
&-img{
|
||||||
height: 6rem;
|
height: 6rem;
|
||||||
|
|
@ -39,28 +40,31 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-content {
|
&-content {
|
||||||
padding: .5rem .8rem;
|
padding: 1rem 2rem;
|
||||||
h5,p{
|
}
|
||||||
margin:0 0 1rem;
|
&-heading {
|
||||||
}
|
margin:0 0 1rem;
|
||||||
h5 {
|
color: $dark-gray;
|
||||||
color: rgb(74, 74, 74);
|
font-weight: bold;
|
||||||
font-weight: bold;
|
font-size: 1.3rem;
|
||||||
font-size: 1.3rem;
|
margin-top: 1rem;
|
||||||
margin-top:1rem;
|
line-height: 1.3;
|
||||||
}
|
}
|
||||||
p{
|
&-message {
|
||||||
font-weight: 200;
|
color: $mid-gray;
|
||||||
}
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
&-content-success {
|
&-content-success {
|
||||||
button{
|
.button {
|
||||||
color:rgb(23, 174, 140) !important;
|
color: $success-green !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-content-warning {
|
&-content-warning {
|
||||||
button{
|
.button {
|
||||||
color: orange !important;
|
color: $warning-orange !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,63 +1,31 @@
|
||||||
#onboarding-backup-request{
|
#onboarding-backup-request {
|
||||||
.warning{
|
#warning {
|
||||||
margin:4rem auto 1rem;
|
display: flex;
|
||||||
height: 11rem;
|
flex-direction: column;
|
||||||
|
height: calc(100vh - 320px);
|
||||||
|
justify-content: center;
|
||||||
|
align-content: center;
|
||||||
}
|
}
|
||||||
button{
|
#alert-icon {
|
||||||
color:#fff;
|
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;
|
font-size: 4.2rem;
|
||||||
|
color: $soft-blue;
|
||||||
}
|
}
|
||||||
.cta-buttons{
|
#backup-tldr {
|
||||||
width:100%;
|
font-size: 16px;
|
||||||
float:none;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
}
|
||||||
@media (min-width: 415px){
|
.cta-buttons {
|
||||||
.warning{
|
@extend %cta-buttons;
|
||||||
height:16rem;
|
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 {
|
#onboarding-collect-email {
|
||||||
background: rgb(17, 209, 166);
|
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;
|
position: absolute;
|
||||||
top:0;
|
top:0;
|
||||||
left:0;
|
left:0;
|
||||||
|
|
@ -8,107 +28,66 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: rgba(0,0,0,.4);
|
background: rgba(0,0,0,.4);
|
||||||
z-index: 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 {
|
.heading {
|
||||||
margin-top: 0;
|
color: $dark-gray;
|
||||||
height: 101%;
|
font-size: 1.2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 3rem 0 1rem;
|
||||||
}
|
}
|
||||||
.scroll {
|
.prompt {
|
||||||
height: 100%;
|
margin: 1rem 1.5rem;
|
||||||
transform: translate3d(0px, 0px, 0px) scale(1) !important;
|
color: $mid-gray;
|
||||||
}
|
}
|
||||||
#success-image {
|
#email-form {
|
||||||
margin-top: 4rem;
|
margin: 0 1.5rem 1rem;
|
||||||
height: 10rem;
|
|
||||||
}
|
}
|
||||||
.col {
|
#email-label {
|
||||||
margin-top: 1rem;
|
border-radius: $visible-radius;
|
||||||
margin-bottom: 1rem;
|
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 {
|
#collect-email {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: rgb(108, 108, 108);
|
height: 25rem;
|
||||||
height: 14rem;
|
|
||||||
animation-name: topBottom;
|
animation-name: topBottom;
|
||||||
animation-iteration-count: 1;
|
animation-iteration-count: 1;
|
||||||
animation-timing-function: ease-in;
|
animation-timing-function: ease-in;
|
||||||
animation-duration: .4s;
|
animation-duration: .4s;
|
||||||
animation-delay: 1s;
|
animation-delay: $relish-success + .2s;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -14rem;
|
bottom: -100%;
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
form {
|
}
|
||||||
label {
|
#collect-email-inner {
|
||||||
background: rgba(200, 200, 200, 0.20);
|
max-width: 400px;
|
||||||
height: 3rem;
|
margin: 0 auto;
|
||||||
margin-top:0;
|
}
|
||||||
i {
|
|
||||||
position: absolute;
|
|
||||||
right: 3%;
|
|
||||||
top: 1rem;
|
#news-updates {
|
||||||
}
|
padding-top: 0;
|
||||||
}
|
|
||||||
}
|
|
||||||
#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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.item {
|
.item {
|
||||||
border: none;
|
border: none;
|
||||||
label{
|
label {
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
.checkbox input:before,
|
.checkbox input:before,
|
||||||
|
|
@ -116,29 +95,34 @@
|
||||||
border-radius: 50% !important;
|
border-radius: 50% !important;
|
||||||
background: none;
|
background: none;
|
||||||
border-width: 2px;
|
border-width: 2px;
|
||||||
padding: .9rem;
|
padding: 12px;
|
||||||
position: relative;
|
position: relative;
|
||||||
left: -7px;
|
right: 5px;
|
||||||
top: -8px;
|
bottom: 5px;
|
||||||
}
|
}
|
||||||
.checkbox input:checked:after,
|
.checkbox input:checked:after,
|
||||||
input:checked + .checkbox-icon:after {
|
input:checked + .checkbox-icon:after {
|
||||||
border-color: rgb(19, 229, 182);
|
border-color: rgb(19, 229, 182);
|
||||||
top:20%;
|
top: 4px;
|
||||||
left:11%;
|
left: 6px;
|
||||||
}
|
}
|
||||||
.item-content {
|
.item-content {
|
||||||
width: 90%;
|
color: $mid-gray;
|
||||||
margin-left: 10%;
|
text-align: left;
|
||||||
|
margin-left: 75px;
|
||||||
|
white-space: initial;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.item-checkbox {
|
||||||
|
padding: 1rem 0;
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
.item-checkbox .checkbox {
|
.item-checkbox .checkbox {
|
||||||
margin-left: 10%;
|
margin-left: 15px;
|
||||||
top: 55%;
|
|
||||||
}
|
}
|
||||||
.checkbox input:before,
|
.checkbox input:before,
|
||||||
.checkbox .checkbox-icon:before{
|
.checkbox .checkbox-icon:before{
|
||||||
border-color:$soft-blue;
|
border-color: $soft-blue;
|
||||||
}
|
}
|
||||||
.checkbox input:checked:before,
|
.checkbox input:checked:before,
|
||||||
.checkbox input:checked + .checkbox-icon: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 {
|
@keyframes topBottom {
|
||||||
0% {
|
0% { bottom: -100%; }
|
||||||
bottom: -100%;
|
100% { bottom: 0; }
|
||||||
}
|
|
||||||
100% {
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes opacity {
|
@keyframes emailCollectOpacity {
|
||||||
0% {
|
0% { opacity: 0; }
|
||||||
opacity: 0;
|
100% { opacity: 1; }
|
||||||
}
|
}
|
||||||
100% {
|
|
||||||
opacity: 1;
|
@keyframes emailCollectSlideUp {
|
||||||
}
|
0% { top: 41vh; }
|
||||||
|
100% { top: calc((100vh - 20rem) / 2 - 11vh);}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,27 @@
|
||||||
#onboarding-disclaimer {
|
#onboarding-disclaimer {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
ion-content{
|
&-container {
|
||||||
height: 100%;
|
max-width: 450px;
|
||||||
&.has-header{
|
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;
|
top:40px !important;
|
||||||
}
|
}
|
||||||
.scroll{
|
.scroll{
|
||||||
|
|
@ -29,6 +47,7 @@
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
text-align: left;
|
||||||
.checkbox input:before,
|
.checkbox input:before,
|
||||||
.checkbox .checkbox-icon:before {
|
.checkbox .checkbox-icon:before {
|
||||||
border-radius: 50% !important;
|
border-radius: 50% !important;
|
||||||
|
|
@ -46,13 +65,8 @@
|
||||||
.checkbox input:checked:after,
|
.checkbox input:checked:after,
|
||||||
input:checked + .checkbox-icon:after {
|
input:checked + .checkbox-icon:after {
|
||||||
border-color: rgb(19, 229, 182);
|
border-color: rgb(19, 229, 182);
|
||||||
top:20%;
|
top: 4px;
|
||||||
left:11%;
|
left: 5px;
|
||||||
@media (min-width:450px){
|
|
||||||
&{
|
|
||||||
left: 20%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.item-content {
|
.item-content {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
|
|
@ -64,14 +78,14 @@
|
||||||
margin-left: 3%;
|
margin-left: 3%;
|
||||||
top:44%;
|
top:44%;
|
||||||
}
|
}
|
||||||
#agree-to-terms{
|
#agree-to-terms {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding:1rem;
|
padding:1rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
&.header-present{
|
&.header-present{
|
||||||
bottom:16px;
|
bottom: 38px;
|
||||||
}
|
}
|
||||||
&-content{
|
&-content{
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
|
|
@ -87,6 +101,7 @@
|
||||||
}
|
}
|
||||||
p{
|
p{
|
||||||
color:rgb(58,58,58);
|
color:rgb(58,58,58);
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
@media (min-width:450px){
|
@media (min-width:450px){
|
||||||
p{
|
p{
|
||||||
|
|
|
||||||
|
|
@ -1,49 +1,9 @@
|
||||||
#onboarding-push-notifications {
|
#onboarding-push-notifications {
|
||||||
h2 {
|
#notifications-topic {
|
||||||
margin-top: 2rem;
|
margin-top: 3rem;
|
||||||
}
|
}
|
||||||
#cta {
|
#cta-buttons {
|
||||||
background-image: url('../img/onboarding-push-notifications.svg');
|
@extend %cta-buttons;
|
||||||
height: 15rem;
|
padding-bottom: 1rem;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,68 +1,31 @@
|
||||||
#onboard-tour {
|
#onboarding-tour {
|
||||||
&-secure {
|
|
||||||
#cta {
|
|
||||||
background-image: url(../img/onboarding-tour-phone.svg);
|
|
||||||
height: 17rem;
|
|
||||||
margin-bottom:-1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&-currency {
|
&-currency {
|
||||||
#cta {
|
|
||||||
background-image: url(../img/onboarding-tour-currency-bg.svg);
|
|
||||||
height:18rem;
|
|
||||||
}
|
|
||||||
.next-slide {
|
.next-slide {
|
||||||
margin-top: 3rem;
|
margin-top: 3rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-control {
|
.cta-buttons {
|
||||||
#cta {
|
@extend %cta-buttons;
|
||||||
background-image: url(../img/onboarding-tour-control.svg);
|
padding-bottom: 12vh;
|
||||||
margin-bottom: .05rem;
|
|
||||||
height: 15rem;
|
|
||||||
background-position: top;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.cta-button{
|
#onboarding-illustration-currency-exchange-rate {
|
||||||
position: absolute;
|
background-color: $soft-blue;
|
||||||
bottom: 85px;
|
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;
|
||||||
}
|
}
|
||||||
}
|
.swiper-pagination {
|
||||||
|
&-bullet {
|
||||||
@media (max-width: 359px){
|
background: $soft-blue;
|
||||||
#onboard-tour{
|
&-active {
|
||||||
&-secure, &-currency, &-control{
|
background: $soft-blue;
|
||||||
#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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,73 +1,36 @@
|
||||||
#onboard-welcome {
|
#onboard-welcome {
|
||||||
ion-content {
|
& > ion-content {
|
||||||
background: url(../img/onboarding-welcome-bg.png);
|
background: url(../img/onboarding-welcome-bg.png);
|
||||||
background-position: top center;
|
background-position: top center;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
#shopping-24 {
|
}
|
||||||
content: url("../img/onboarding-welcome-shopping24.png");
|
#qrcode {
|
||||||
position: absolute;
|
content: url("../img/onboarding-welcome-qrcode.png");
|
||||||
top: 5%;
|
position: absolute;
|
||||||
right: 5%;
|
top: 5%;
|
||||||
width: 35px;
|
right: 5%;
|
||||||
height: auto;
|
width: 20px;
|
||||||
}
|
height: auto;
|
||||||
.logo,
|
}
|
||||||
p {
|
#logo-tagline {
|
||||||
@include center-block();
|
width: 100%;
|
||||||
}
|
height: 70%;
|
||||||
.logo {
|
display: flex;
|
||||||
margin-top: 20rem;
|
flex-direction: column;
|
||||||
}
|
justify-content: space-around;
|
||||||
button {
|
}
|
||||||
@include center-block(1rem);
|
#logo {
|
||||||
color: #fff;
|
width: 40%;
|
||||||
&.get-started {
|
max-width: 200px;
|
||||||
background: rgb(100, 124, 232);
|
margin: 5rem auto 0;
|
||||||
margin-top: 4rem;
|
}
|
||||||
}
|
#lead {
|
||||||
&.restore {
|
line-height: 1.6;
|
||||||
background: none;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
}
|
#cta-buttons {
|
||||||
#cta-buttons {
|
@extend %cta-buttons;
|
||||||
position: absolute;
|
padding-bottom: 4vw;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,110 +1,46 @@
|
||||||
.onboarding {
|
.onboarding {
|
||||||
background: rgba(30, 49, 134, 1);
|
background: #1e3186;
|
||||||
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%);
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
background-image: linear-gradient(to bottom, #1e3186 0%, #111b49 100%);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
.bar.bar-header {
|
.bar.bar-header {
|
||||||
background: rgb(30, 49, 134);
|
background: none;
|
||||||
|
border: 0 none transparent;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
button {
|
button {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
.secondary-buttons {
|
|
||||||
button {
|
|
||||||
color: rgba(255, 255, 255, .5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.bar.bar-stable{
|
.onboarding-topic,
|
||||||
border-color: transparent;
|
.onboarding-description,
|
||||||
border:none;
|
.onboarding-tldr {
|
||||||
|
margin-left: 3rem;
|
||||||
|
margin-right: 3rem;
|
||||||
}
|
}
|
||||||
ion-content {
|
.onboarding-topic {
|
||||||
height: 100%;
|
font-size: 24px;
|
||||||
.scroll{
|
margin-top: .5rem;
|
||||||
height: 100%;
|
line-height: 1.3;
|
||||||
}
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.col {
|
.onboarding-description {
|
||||||
@include center-block(.5rem);
|
margin-top: 1rem;
|
||||||
|
font-size: 16px;
|
||||||
|
color: rgba(255,255,255,0.5);
|
||||||
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
.swiper-pagination {
|
.onboarding-tldr {
|
||||||
&-bullet {
|
font-size: 18px;
|
||||||
background: rgb(100, 124, 232);
|
margin-top: 1rem;
|
||||||
&-active {
|
margin-bottom: 1em;
|
||||||
background: rgb(100, 124, 232);
|
line-height: 1.3;
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.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);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 415px){
|
%cta-buttons {
|
||||||
.onboarding{
|
position: absolute;
|
||||||
ion-content{
|
bottom: 0;
|
||||||
h2{
|
width: 100%;
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
p{
|
|
||||||
font-size: 1.4rem;
|
|
||||||
line-height: 1.9rem;
|
|
||||||
}
|
|
||||||
p,h2,h3{
|
|
||||||
max-width: 600px !important;
|
|
||||||
}
|
|
||||||
button{
|
|
||||||
max-width: 400px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@import "terms-of-use";
|
@import "terms-of-use";
|
||||||
|
|
@ -115,3 +51,37 @@
|
||||||
@import "../backup-warning";
|
@import "../backup-warning";
|
||||||
@import "onboard-disclaimer";
|
@import "onboard-disclaimer";
|
||||||
@import "onboard-push-notifications";
|
@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 {
|
#terms-of-use {
|
||||||
ion-header-bar {
|
ion-header-bar {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.2);
|
box-shadow: $subtle-box-shadow;
|
||||||
.primary-buttons{
|
.primary-buttons{
|
||||||
.button{
|
.button{
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
}
|
}
|
||||||
ion-content{
|
ion-content{
|
||||||
padding-top: 1.5rem;
|
padding-top: 1.5rem;
|
||||||
color: rgba(86, 86, 86, 0.77);
|
color: $dark-gray;
|
||||||
p {
|
p {
|
||||||
padding: 0 2.5%;
|
padding: 0 2.5%;
|
||||||
margin: 2rem auto;
|
margin: 2rem auto;
|
||||||
|
|
@ -24,6 +24,7 @@
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
.checkbox input:before,
|
.checkbox input:before,
|
||||||
.checkbox .checkbox-icon:before {
|
.checkbox .checkbox-icon:before {
|
||||||
border-radius: 50% !important;
|
border-radius: 50% !important;
|
||||||
|
|
@ -53,7 +54,7 @@
|
||||||
width: 10%;
|
width: 10%;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
top: 50px;
|
top: 25px;
|
||||||
.item-content {
|
.item-content {
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
}
|
}
|
||||||
|
|
@ -61,7 +62,7 @@
|
||||||
p {
|
p {
|
||||||
color: rgb(58, 58, 58);
|
color: rgb(58, 58, 58);
|
||||||
float: left;
|
float: left;
|
||||||
width: 70%;
|
width: 80%;
|
||||||
}
|
}
|
||||||
.checkbox input:before,
|
.checkbox input:before,
|
||||||
.checkbox .checkbox-icon:before {
|
.checkbox .checkbox-icon:before {
|
||||||
|
|
|
||||||
|
|
@ -1,140 +1,112 @@
|
||||||
#wallet-backup-phrase {
|
#wallet-backup-phrase {
|
||||||
&,
|
.bar.bar-royal .title {
|
||||||
& ion-content,
|
font-size: 1rem;
|
||||||
& ion-content .scroll {
|
}
|
||||||
height: 100%;
|
background: #fff;
|
||||||
overflow-y: hidden;
|
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 {
|
&-word-readonly {
|
||||||
.title {
|
padding: 0 1px;
|
||||||
font-size: 1rem;
|
@media (min-width: 575px) {
|
||||||
}
|
padding: 0 6px;
|
||||||
}
|
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
&-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{
|
.initial-prompt,
|
||||||
.cta-buttons,#select-phrase{
|
.confirmation-prompt,
|
||||||
bottom: 64px;
|
.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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&-content {
|
||||||
@media (max-width: 400px) {
|
max-width: 500px;
|
||||||
#wallet-backup-phrase {
|
width: 90%;
|
||||||
ion-content {
|
margin-left: auto;
|
||||||
h2 {
|
margin-right: auto;
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
p,
|
|
||||||
h2,
|
|
||||||
h3 {
|
|
||||||
max-width: 600px !important;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
max-width: 400px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
@media (max-height: 560px) {
|
ion-content.has-tabs{
|
||||||
#wallet-backup-phrase {
|
// TODO: review
|
||||||
&,
|
.cta-buttons{
|
||||||
& ion-content,
|
bottom:110px;
|
||||||
& ion-content .scroll {
|
}
|
||||||
overflow-y:visible;
|
.cta-buttons, #select-phrase{
|
||||||
}
|
bottom:110px;
|
||||||
#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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,48 +1,50 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
<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: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
|
<svg version="1.1" id="onboarding-market-illustration"
|
||||||
<title>bitcoin-currency</title>
|
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 375 257"
|
||||||
<desc>Created with Sketch.</desc>
|
style="enable-background:new 0 0 375 257;" xml:space="preserve">
|
||||||
<defs>
|
<style type="text/css">
|
||||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="83.858817%" id="linearGradient-1">
|
.st0{opacity:0.3;fill:url(#SVGID_1_);enable-background:new ;}
|
||||||
<stop stop-color="#CDE7FF" offset="0%"></stop>
|
.st1{opacity:0.3;fill:url(#SVGID_2_);enable-background:new ;}
|
||||||
<stop stop-color="#FFFFFF" offset="100%"></stop>
|
.st2{opacity:0.3;}
|
||||||
</linearGradient>
|
.st3{fill:#13E5B6;}
|
||||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="89.4673583%" id="linearGradient-2">
|
.st4{opacity:0.64;fill:none;stroke:#9012FE;stroke-width:2;stroke-linecap:square;enable-background:new ;}
|
||||||
<stop stop-color="#3950B5" offset="0%"></stop>
|
.st5{fill:#1A2A71;stroke:#FFFFFF;stroke-width:3;}
|
||||||
<stop stop-color="#162360" offset="100%"></stop>
|
</style>
|
||||||
</linearGradient>
|
<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)">
|
||||||
<rect id="path-3" x="0" y="0" width="130" height="48" rx="4"></rect>
|
<stop offset="0" style="stop-color:#3950B5"/>
|
||||||
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
|
<stop offset="1" style="stop-color:#162360"/>
|
||||||
<feOffset dx="0" dy="8" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
</linearGradient>
|
||||||
<feGaussianBlur stdDeviation="7" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
<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"/>
|
||||||
<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>
|
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="187.5" y1="195.0305" x2="187.5" y2="45.0305">
|
||||||
</filter>
|
<stop offset="0" style="stop-color:#3950B5"/>
|
||||||
</defs>
|
<stop offset="1" style="stop-color:#202F77"/>
|
||||||
<g id="Onboarding" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
</linearGradient>
|
||||||
<g id="0.2.2---Tour-2" transform="translate(0.000000, -200.000000)">
|
<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
|
||||||
<g id="bitcoin-currency" transform="translate(0.000000, 206.000000)">
|
375,195 150.1,195 0.4,195 0,143.5 "/>
|
||||||
<g id="bg-2" transform="translate(0.000000, 3.530453)">
|
<g class="st2">
|
||||||
<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>
|
<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
|
||||||
<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>
|
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
|
||||||
<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>
|
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
|
||||||
<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>
|
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 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 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
|
||||||
<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>
|
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
|
||||||
<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>
|
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
|
||||||
</g>
|
h-0.5v-4h0.5V99z M225.2,91h-0.5v-3.2h0.5V91z"/>
|
||||||
<g id="price-" transform="translate(122.000000, 0.000000)">
|
<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
|
||||||
<path d="M67,42.5 L67,188.5" id="Line" stroke="#9012FE" stroke-width="2" stroke-linecap="square" opacity="0.639999986"></path>
|
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
|
||||||
<g id="Rectangle-3" opacity="0.699999988">
|
M150.2,131h-0.5v-4h0.5V131z M150.2,123h-0.5v-2h0.5V123z"/>
|
||||||
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
|
<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
|
||||||
<use fill="#647CE8" fill-rule="evenodd" xlink:href="#path-3"></use>
|
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
|
||||||
</g>
|
v-4h0.5V131z"/>
|
||||||
<text id="1-BTC-=-$650" font-family="Roboto-Regular, Roboto" font-size="16" font-weight="normal" fill="#FFFFFF">
|
</g>
|
||||||
<tspan x="15.1328125" y="28.8046875">1 BTC = $650</tspan>
|
<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
|
||||||
</text>
|
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
|
||||||
<circle id="Oval-5" stroke="#FFFFFF" stroke-width="3" fill="#1A2A71" cx="67.5" cy="83.5" r="4.5"></circle>
|
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
|
||||||
</g>
|
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
|
||||||
</g>
|
C0.1,144.5,0,144.5,0,144.5z"/>
|
||||||
</g>
|
<g>
|
||||||
</g>
|
<path id="Line_1_" class="st4" d="M187.5,48.5v146"/>
|
||||||
</svg>
|
<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"?>
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
<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: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
|
<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"
|
||||||
<title>digital-money</title>
|
viewBox="0 0 375 247" style="enable-background:new 0 0 375 247;" xml:space="preserve">
|
||||||
<desc>Created with Sketch.</desc>
|
<style type="text/css">
|
||||||
<defs>
|
.st0{opacity:0.15;}
|
||||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="75.2641068%" id="linearGradient-1">
|
.st1{fill:none;stroke:#FFFFFF;stroke-width:2;}
|
||||||
<stop stop-color="#3950B5" offset="0%"></stop>
|
.st2{opacity:0.3;fill:url(#SVGID_1_);enable-background:new ;}
|
||||||
<stop stop-color="#162360" offset="100%"></stop>
|
.st3{fill:#293881;fill-opacity:0.6548;stroke:#6778BA;stroke-width:2;}
|
||||||
</linearGradient>
|
.st4{fill:none;stroke:#6778BA;stroke-width:2;stroke-linecap:square;}
|
||||||
<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>
|
.st5{fill:#5BC2A7;}
|
||||||
<mask id="mask-3" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="31.8181818" height="31.8181818" fill="white">
|
</style>
|
||||||
<use xlink:href="#path-2"></use>
|
<g transform="translate(0.000000, 54.000000)" class="st0">
|
||||||
</mask>
|
<g>
|
||||||
<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>
|
<polyline id="Shape" class="st1" points="13,123.7 0,123.7 0,90 13,90 "/>
|
||||||
<mask id="mask-5" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="38.6363636" height="9.09090909" fill="white">
|
<polyline id="Shape_1_" class="st1" points="58.3,123.7 71.3,123.7 71.3,90 58.3,90 "/>
|
||||||
<use xlink:href="#path-4"></use>
|
<rect id="Rectangle-path" x="13" y="41.2" class="st1" width="45.4" height="82.5"/>
|
||||||
</mask>
|
<path id="Shape_2_" class="st1" d="M25.9,56.2h3.2"/>
|
||||||
<rect id="path-6" x="9.09090909" y="9.09090909" width="13.6363636" height="13.6363636"></rect>
|
<path id="Shape_3_" class="st1" d="M42.1,56.2h3.2"/>
|
||||||
<mask id="mask-7" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="13.6363636" height="13.6363636" fill="white">
|
<path id="Shape_4_" class="st1" d="M25.9,71.2h3.2"/>
|
||||||
<use xlink:href="#path-6"></use>
|
<path id="Shape_5_" class="st1" d="M42.1,71.2h3.2"/>
|
||||||
</mask>
|
<path id="Shape_6_" class="st1" d="M25.9,86.2h3.2"/>
|
||||||
<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>
|
<path id="Shape_7_" class="st1" d="M42.1,86.2h3.2"/>
|
||||||
<mask id="mask-9" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="31.8181818" height="31.8181818" fill="white">
|
<path id="Shape_8_" class="st1" d="M25.9,101.2h3.2"/>
|
||||||
<use xlink:href="#path-8"></use>
|
<path id="Shape_9_" class="st1" d="M42.1,101.2h3.2"/>
|
||||||
</mask>
|
<path id="Shape_10_" class="st1" d="M35.7,123.7v-7.5"/>
|
||||||
<rect id="path-10" x="9.09090909" y="77.2727273" width="13.6363636" height="13.6363636"></rect>
|
</g>
|
||||||
<mask id="mask-11" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="13.6363636" height="13.6363636" fill="white">
|
<g>
|
||||||
<use xlink:href="#path-10"></use>
|
<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
|
||||||
</mask>
|
102,84.8 "/>
|
||||||
<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>
|
<path id="Shape_12_" class="st1" d="M112.2,138h20.4"/>
|
||||||
<mask id="mask-13" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="31.8181818" height="31.8181818" fill="white">
|
<path id="Shape_13_" class="st1" d="M122.4,7.9v11.8"/>
|
||||||
<use xlink:href="#path-12"></use>
|
<rect id="Rectangle-path_1_" x="71.3" y="84.8" class="st1" width="40.9" height="53.2"/>
|
||||||
</mask>
|
<rect id="Rectangle-path_2_" x="132.6" y="67" class="st1" width="40.9" height="71"/>
|
||||||
<rect id="path-14" x="77.2727273" y="9.09090909" width="13.6363636" height="13.6363636"></rect>
|
<path id="Shape_14_" class="st1" d="M147.9,84.8h10.2"/>
|
||||||
<mask id="mask-15" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="13.6363636" height="13.6363636" fill="white">
|
<path id="Shape_15_" class="st1" d="M147.9,102.5h10.2"/>
|
||||||
<use xlink:href="#path-14"></use>
|
<path id="Shape_16_" class="st1" d="M147.9,120.2h10.2"/>
|
||||||
</mask>
|
<path id="Shape_17_" class="st1" d="M86.6,102.5h10.2"/>
|
||||||
<rect id="path-16" x="90.9090909" y="36.3636364" width="9.09090909" height="9.09090909"></rect>
|
<path id="Shape_18_" class="st1" d="M86.6,120.2h10.2"/>
|
||||||
<mask id="mask-17" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="9.09090909" height="9.09090909" fill="white">
|
</g>
|
||||||
<use xlink:href="#path-16"></use>
|
<g>
|
||||||
</mask>
|
<polyline id="Shape_19_" class="st1" points="237.5,135.4 224.5,135.4 224.5,101.6 237.5,101.6 "/>
|
||||||
<rect id="path-18" x="0" y="54.5454545" width="9.09090909" height="9.09090909"></rect>
|
<polyline id="Shape_20_" class="st1" points="282.9,135.4 295.8,135.4 295.8,101.6 282.9,101.6 "/>
|
||||||
<mask id="mask-19" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="9.09090909" height="9.09090909" fill="white">
|
<rect id="Rectangle-path_3_" x="237.5" y="52.9" class="st1" width="45.4" height="82.5"/>
|
||||||
<use xlink:href="#path-18"></use>
|
<path id="Shape_21_" class="st1" d="M250.5,67.9h3.2"/>
|
||||||
</mask>
|
<path id="Shape_22_" class="st1" d="M266.7,67.9h3.2"/>
|
||||||
<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>
|
<path id="Shape_23_" class="st1" d="M250.5,82.9h3.2"/>
|
||||||
<mask id="mask-21" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="34.0909091" height="40.9090909" fill="white">
|
<path id="Shape_24_" class="st1" d="M266.7,82.9h3.2"/>
|
||||||
<use xlink:href="#path-20"></use>
|
<path id="Shape_25_" class="st1" d="M250.5,97.9h3.2"/>
|
||||||
</mask>
|
<path id="Shape_26_" class="st1" d="M266.7,97.9h3.2"/>
|
||||||
<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>
|
<path id="Shape_27_" class="st1" d="M250.5,112.9h3.2"/>
|
||||||
<mask id="mask-23" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="40.9090909" height="27.2727273" fill="white">
|
<path id="Shape_28_" class="st1" d="M266.7,112.9h3.2"/>
|
||||||
<use xlink:href="#path-22"></use>
|
<path id="Shape_29_" class="st1" d="M260.2,135.4v-7.5"/>
|
||||||
</mask>
|
</g>
|
||||||
<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>
|
<g>
|
||||||
<mask id="mask-25" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="20.4545455" height="29.5454545" fill="white">
|
<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
|
||||||
<use xlink:href="#path-24"></use>
|
326.5,73.8 "/>
|
||||||
</mask>
|
<path id="Shape_31_" class="st1" d="M336.7,127.1h20.4"/>
|
||||||
<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>
|
<path id="Shape_32_" class="st1" d="M346.9-3.1V8.7"/>
|
||||||
<mask id="mask-27" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="25" height="15.9090909" fill="white">
|
<rect id="Rectangle-path_4_" x="295.8" y="73.8" class="st1" width="40.9" height="53.2"/>
|
||||||
<use xlink:href="#path-26"></use>
|
<rect id="Rectangle-path_5_" x="357.1" y="56" class="st1" width="40.9" height="71"/>
|
||||||
</mask>
|
<path id="Shape_33_" class="st1" d="M372.5,73.8h10.2"/>
|
||||||
<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>
|
<path id="Shape_34_" class="st1" d="M372.5,91.5h10.2"/>
|
||||||
<mask id="mask-29" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="50" height="45.4545455" fill="white">
|
<path id="Shape_35_" class="st1" d="M372.5,109.2h10.2"/>
|
||||||
<use xlink:href="#path-28"></use>
|
<path id="Shape_36_" class="st1" d="M311.2,91.5h10.2"/>
|
||||||
</mask>
|
<path id="Shape_37_" class="st1" d="M311.2,109.2h10.2"/>
|
||||||
<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>
|
</g>
|
||||||
<mask id="mask-31" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="36.3636364" height="38.6363636" fill="white">
|
</g>
|
||||||
<use xlink:href="#path-30"></use>
|
<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)">
|
||||||
</mask>
|
<stop offset="0" style="stop-color:#4054A5"/>
|
||||||
</defs>
|
<stop offset="1" style="stop-color:#24285E"/>
|
||||||
<g id="Onboarding" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
</linearGradient>
|
||||||
<g id="0.2.1---Tour-1" transform="translate(0.000000, -210.000000)">
|
<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 id="digital-money" transform="translate(0.000000, 210.000000)">
|
<g>
|
||||||
<g id="bg-1">
|
<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"/>
|
||||||
<g id="cityscape" opacity="0.15" transform="translate(0.000000, 54.000000)" stroke-width="2" stroke="#FFFFFF">
|
<path class="st4" d="M133.5,188h98.8"/>
|
||||||
<g id="travel-24px-outline_hotel" transform="translate(0.000000, 47.163934)">
|
<path class="st4" d="M177.1,202.3h18.7"/>
|
||||||
<g id="Group">
|
</g>
|
||||||
<polyline id="Shape" points="12.9658816 82.4918033 0 82.4918033 0 48.7451565 12.9658816 48.7451565"></polyline>
|
<g>
|
||||||
<polyline id="Shape" points="58.3464671 82.4918033 71.3123487 82.4918033 71.3123487 48.7451565 58.3464671 48.7451565"></polyline>
|
<path class="st5" d="M197.8,66H166v31.8h31.8V66L197.8,66z M193.3,93.3h-22.7V70.5h22.7V93.3L193.3,93.3z"/>
|
||||||
<rect id="Rectangle-path" x="12.9658816" y="0" width="45.3805855" height="82.4918033"></rect>
|
<polygon class="st5" points="231.9,156.9 227.4,156.9 227.4,166 266,166 266,161.5 231.9,161.5 "/>
|
||||||
<path d="M25.9317632,14.9985097 L29.1732335,14.9985097" id="Shape"></path>
|
<rect x="175.1" y="75.1" class="st5" width="13.6" height="13.6"/>
|
||||||
<path d="M42.1391151,14.9985097 L45.3805855,14.9985097" id="Shape"></path>
|
<path class="st5" d="M166,166h31.8v-31.8H166V166L166,166z M170.5,138.7h22.7v22.7h-22.7V138.7L170.5,138.7z"/>
|
||||||
<path d="M25.9317632,29.9970194 L29.1732335,29.9970194" id="Shape"></path>
|
<rect x="175.1" y="143.3" class="st5" width="13.6" height="13.6"/>
|
||||||
<path d="M42.1391151,29.9970194 L45.3805855,29.9970194" id="Shape"></path>
|
<path class="st5" d="M234.2,66v31.8H266V66H234.2L234.2,66z M261.5,93.3h-22.7V70.5h22.7V93.3L261.5,93.3z"/>
|
||||||
<path d="M25.9317632,44.9955291 L29.1732335,44.9955291" id="Shape"></path>
|
<rect x="243.3" y="75.1" class="st5" width="13.6" height="13.6"/>
|
||||||
<path d="M42.1391151,44.9955291 L45.3805855,44.9955291" id="Shape"></path>
|
<rect x="256.9" y="102.4" class="st5" width="9.1" height="9.1"/>
|
||||||
<path d="M25.9317632,59.9940387 L29.1732335,59.9940387" id="Shape"></path>
|
<rect x="166" y="120.5" class="st5" width="9.1" height="9.1"/>
|
||||||
<path d="M42.1391151,59.9940387 L45.3805855,59.9940387" id="Shape"></path>
|
<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
|
||||||
<path d="M35.6561743,82.4918033 L35.6561743,74.9925484" id="Shape"></path>
|
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
|
||||||
</g>
|
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 "/>
|
||||||
</g>
|
<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
|
||||||
<g id="business-24px-outline_building" transform="translate(71.312349, 0.000000)">
|
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
|
||||||
<g id="Group">
|
177.4,111.5 177.4,102.4 166,102.4 166,106.9 172.8,106.9 "/>
|
||||||
<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>
|
<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
|
||||||
<path d="M40.8600484,130.086957 L61.2900726,130.086957" id="Shape"></path>
|
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 "/>
|
||||||
<path d="M51.0750605,0 L51.0750605,11.826087" id="Shape"></path>
|
<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
|
||||||
<rect id="Rectangle-path" x="0" y="76.8695652" width="40.8600484" height="53.2173913"></rect>
|
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 "/>
|
||||||
<rect id="Rectangle-path" x="61.2900726" y="59.1304348" width="40.8600484" height="70.9565217"></rect>
|
<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
|
||||||
<path d="M76.6125908,76.8695652 L86.8276029,76.8695652" id="Shape"></path>
|
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
|
||||||
<path d="M76.6125908,94.6086957 L86.8276029,94.6086957" id="Shape"></path>
|
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
|
||||||
<path d="M76.6125908,112.347826 L86.8276029,112.347826" id="Shape"></path>
|
229.6,152.4 "/>
|
||||||
<path d="M15.3225182,94.6086957 L25.5375303,94.6086957" id="Shape"></path>
|
<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
|
||||||
<path d="M15.3225182,112.347826 L25.5375303,112.347826" id="Shape"></path>
|
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
|
||||||
</g>
|
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>
|
</g>
|
||||||
<g id="travel-24px-outline_hotel-copy" transform="translate(224.537530, 50.163934)">
|
</svg>
|
||||||
<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>
|
|
||||||
|
|
|
||||||
|
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-back-button>
|
</ion-nav-back-button>
|
||||||
</ion-nav-bar>
|
</ion-nav-bar>
|
||||||
<ion-content>
|
<ion-content scroll="false">
|
||||||
<div class="ng-hide" ng-show="deleted">
|
<div class="ng-hide" ng-show="deleted">
|
||||||
<div class="row text-center">
|
<div class="phrase-unavailable" translate>Wallet recovery phrase not available.</div>
|
||||||
<h3 translate class="col col-75 center-block">Wallet recovery phrase not available.</h3>
|
<div class="phrase-unavailable-instructions" translate>You can still export it from Advanced > Export.</div>
|
||||||
</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>
|
</div>
|
||||||
<!--
|
<!--
|
||||||
## STEP 1
|
## 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'}">
|
<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>
|
||||||
<div class="row text-center">
|
<div class="password-required" ng-show="mnemonicHasPassphrase" translate>
|
||||||
<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>
|
|
||||||
This recovery phrase was created with a password. To recover this wallet both the recovery phrase and password are needed.
|
This recovery phrase was created with a password. To recover this wallet both the recovery phrase and password are needed.
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="cta-buttons">
|
<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
|
<div class="tldr-prompt" translate>We'll confirm on the next screen.</div>
|
||||||
</button>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<!--
|
<!--
|
||||||
## STEP 2
|
## 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">
|
<div class="backup-phrase">
|
||||||
<span ng-repeat="cword in customWords track by $index" ng-show="customWords[$index]">
|
<div class="backup-phrase-content">
|
||||||
<button class="button select-word" ng-click="removeButton($index, cword)">{{cword.word}}</button>
|
<span ng-repeat="cword in customWords track by $index" ng-show="customWords[$index]">
|
||||||
</span>
|
<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>
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
<!--
|
<!--
|
||||||
## STEP 3
|
## STEP 3
|
||||||
-->
|
-->
|
||||||
<div class="ng-hide" ng-show="step == 3">
|
<div id="wallet-backup-phrase-step-3" class="ng-hide" ng-show="step == 3">
|
||||||
<h5 translate>Enter your password</h5>
|
<div class="password-prompt" translate>Enter your password</h5>
|
||||||
<label class="item item-input item-stacked-label">
|
<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>
|
<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/>
|
<input type="text" id="passphrase" ng-model="data.passphrase" autocapitalize="off" spellcheck="false" autofocus/>
|
||||||
</label>
|
</label>
|
||||||
<button ng-disabled="!data.passphrase" class="button button-block button-positive" ng-click="goToStep(4);" translate>Confirm
|
<button ng-disabled="!data.passphrase" class="button button-block button-positive" ng-click="goToStep(4);" translate>Confirm
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
</ion-view>
|
</ion-view>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<ion-view id="backup-warning" class="onboarding" ng-controller="backupWarningController">
|
<ion-view id="backup-warning" class="onboarding" ng-controller="backupWarningController">
|
||||||
<ion-nav-bar class="bar-royal">
|
<ion-nav-bar>
|
||||||
<ion-nav-buttons side="primary">
|
<ion-nav-buttons side="primary">
|
||||||
<button class="button button-back button-clear" ng-click="goBack()">
|
<button class="button button-back button-clear" ng-click="goBack()">
|
||||||
<i class="icon ion-ios-arrow-thin-left"></i>
|
<i class="icon ion-ios-arrow-thin-left"></i>
|
||||||
|
|
@ -7,26 +7,12 @@
|
||||||
</ion-nav-buttons>
|
</ion-nav-buttons>
|
||||||
</ion-nav-bar>
|
</ion-nav-bar>
|
||||||
<ion-content scroll="false">
|
<ion-content scroll="false">
|
||||||
<div class="row text-center">
|
<div class="onboarding-topic">Are you being watched?</div>
|
||||||
<h3 translate class="col col-80">
|
<div class="onboarding-description">Now is a perfect time to assess your surroundings. Nearby windows? Hidden cameras? Shoulder-spies?</div>
|
||||||
Are you being watched?
|
<div class="onboarding-illustration-backup-warning"></div>
|
||||||
</h3>
|
<div id="cta-buttons">
|
||||||
</div>
|
<div class="onboarding-tldr">Anyone with your backup phrase can access or spend your bitcoin.</div>
|
||||||
<div class="row text-center">
|
<button class="button button-standard button-primary" ng-click="openPopup()" translate>All clear, let's do this</button>
|
||||||
<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>
|
</div>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
</ion-view>
|
</ion-view>
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,10 @@
|
||||||
<div id="backup-confirm-modal" class="popup-modal">
|
<div id="backup-confirm-modal" class="popup-modal">
|
||||||
<div class="popup-modal-header">
|
<div class="popup-modal-header popup-modal-header-success">
|
||||||
<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-img-success popup-modal-header-img"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="popup-modal-content" ng-class="{'popup-modal-content-success': !backupError, 'popup-modal-content-fail': backupError}">
|
<div class="popup-modal-content popup-modal-content-success">
|
||||||
<div class="text-center" ng-show="!backupError">
|
<div class="popup-modal-heading" translate>Your bitcoin wallet is backed up!</div>
|
||||||
<h5 translate>Your bitcoin wallet is backed up!</h5>
|
<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>
|
||||||
<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" ng-click="closeBackupResultModal()" translate>Got it</button>
|
||||||
<button
|
|
||||||
class="button button-clear expand"
|
|
||||||
ng-click="closeBackupResultModal()"
|
|
||||||
translate>I Understand
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,12 @@
|
||||||
<div id="screenshot-warning-modal" class="popup-modal">
|
<div id="screenshot-warning-modal" class="popup-modal">
|
||||||
<div class="popup-modal-header-success">
|
<div class="popup-modal-header popup-modal-header-warning">
|
||||||
<div class="popup-modal-header-img"></div>
|
<div class="popup-modal-header-img-warning popup-modal-header-img"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="popup-modal-content" ng-class="{'popup-modal-content-success': !backupError, 'popup-modal-content-fail': backupError}">
|
<div class="popup-modal-content popup-modal-content-warning">
|
||||||
<div class="text-center" ng-show="!backupError">
|
<div>
|
||||||
<h5 translate>Screenshots are <br /> not secure</h5>
|
<div class="popup-modal-heading" translate>Screenshots are not secure</div>
|
||||||
<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>
|
<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
|
<button class="button button-clear" ng-click="close()" translate>I understand</button>
|
||||||
class="button button-clear expand"
|
|
||||||
ng-click="close()"
|
|
||||||
translate>I Understand
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,15 @@
|
||||||
<ion-view id="onboarding-backup-request" class="onboarding">
|
<ion-view id="onboarding-backup-request" class="onboarding">
|
||||||
<ion-content ng-controller="backupRequestController" scroll="false">
|
<ion-content ng-controller="backupRequestController" scroll="false">
|
||||||
<div class="row">
|
<div id="warning">
|
||||||
<img src="img/onboarding-warning.svg" class="col col-75 warning">
|
<img src="img/onboarding-warning.svg" id="alert-icon">
|
||||||
</div>
|
<div class="onboarding-topic" translate>No backup, no bitcoin.</div>
|
||||||
<div class="row text-center">
|
<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>
|
||||||
<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>
|
</div>
|
||||||
<div class="cta-buttons">
|
<div class="cta-buttons">
|
||||||
<div class="row">
|
<i class="ion-ios-arrow-thin-down" id="arrow-down"></i>
|
||||||
<button class="button button-block button-positive col-75 col" href
|
<div class="onboarding-tldr" id="backup-tldr" translate>Your wallet is never saved to cloud storage or standard device backups.</div>
|
||||||
ui-sref="onboarding.backupWarning({from: 'onboarding.backupRequest', walletId: walletId})" translate>Backup wallet</button>
|
<button class="button button-standard button-primary" ui-sref="onboarding.backupWarning({from: 'onboarding.backupRequest', walletId: walletId})" translate>Backup wallet</button>
|
||||||
</div>
|
<button class="button button-standard button-secondary button-clear" ng-click="openPopup()" translate>I'll backup my wallet later</button>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
</ion-view>
|
</ion-view>
|
||||||
|
|
|
||||||
|
|
@ -1,33 +1,26 @@
|
||||||
<ion-view ng-controller="collectEmailController" id="onboarding-collect-email" class="onboarding">
|
<ion-view ng-controller="collectEmailController" id="onboarding-collect-email" class="onboarding">
|
||||||
<ion-content>
|
<ion-content scroll="false">
|
||||||
<div class="row">
|
<div id="success-container">
|
||||||
<img src="img/onboarding-success.svg" class="col col-75" id="success-image" />
|
<img src="img/onboarding-success.svg" id="success-image" />
|
||||||
</div>
|
<div id="success-message" translate>Wallet Created</div>
|
||||||
<div class="row text-center">
|
|
||||||
<h3 translate class="col">Wallet Created</h3>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="collect-email">
|
<div id="collect-email">
|
||||||
<div ng-if="!confirmation">
|
<div id="collect-email-inner" ng-if="!confirmation">
|
||||||
<div class="row text-center">
|
<div translate class="heading">Email Notifications</div>
|
||||||
<p translate class="col col-75">Where would you like to receive email notifications about payments?</p>
|
<div translate class="prompt">Where would you like to receive email notifications about payments?</div>
|
||||||
</div>
|
<form id="email-form" name="emailForm" ng-submit="confirm(emailForm)" novalidate>
|
||||||
<form name="emailForm" ng-submit="confirm(emailForm)" novalidate>
|
<label class="item item-input" id="email-label">
|
||||||
<label class="item item-input col col-75">
|
<input type="email" name="email" ng-model="email" placeholder="email address" required></input>
|
||||||
<i class="icon ion-arrow-right-c"></i>
|
|
||||||
<input type="email" id="email" name="email" ng-model="email" placeholder="satoshi@example.com" required></input>
|
|
||||||
</label>
|
</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>
|
</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>
|
||||||
<div ng-if="confirmation">
|
<div ng-if="confirmation">
|
||||||
<div class="row text-center">
|
<p translate class="confirm">Is this email address correct?</p>
|
||||||
<p translate class="col col-75">Is this email address correct?</p>
|
<p class="user-email">{{email}}</p>
|
||||||
</div>
|
|
||||||
<div class="row text-center">
|
|
||||||
<p class="col col-75">{{email}}</p>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col col-50">
|
<div class="col col-50">
|
||||||
<button class="button button-block button-stable" ng-click="cancel()">
|
<button class="button button-block button-stable" ng-click="cancel()">
|
||||||
|
|
|
||||||
|
|
@ -8,23 +8,23 @@
|
||||||
</ion-nav-buttons>
|
</ion-nav-buttons>
|
||||||
</ion-nav-bar>
|
</ion-nav-bar>
|
||||||
<ion-content scroll="false" ng-class="{'has-header': backedUp == 'false'}">
|
<ion-content scroll="false" ng-class="{'has-header': backedUp == 'false'}">
|
||||||
<div class="row text-center">
|
<div id="onboarding-disclaimer-container">
|
||||||
<h3 translate class="col-75 col">Almost done! Let's review</h3>
|
<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>
|
||||||
<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" ng-if="accept1 && accept2" ng-class="{'header-present': backedUp == 'false'}">
|
||||||
<div id="agree-to-terms-content" class="center-block">
|
<div id="agree-to-terms-content" class="center-block">
|
||||||
<ion-checkbox ng-model="terms.accept3"></ion-checkbox>
|
<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>
|
<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>
|
<button ng-disabled="!accept1 || !accept2 || !terms.accept3" class="button button-block button-positive" ng-click="confirm()" translate>Confirm & Finish</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,11 @@
|
||||||
<ion-view class="onboarding" id="onboarding-push-notifications">
|
<ion-view class="onboarding" id="onboarding-push-notifications">
|
||||||
<ion-content ng-controller="notificationsController">
|
<ion-content ng-controller="notificationsController">
|
||||||
<div class="text-center row">
|
<div class="onboarding-topic" id="notifications-topic" translate>Push Notifications</div>
|
||||||
<h2 translate class="col col-80">
|
<div class="onboarding-description" translate>Would you like to receive push notifications about payments?</div>
|
||||||
Push Notifications
|
<div class="onboarding-illustration-notifications"></div>
|
||||||
</h2>
|
<div id="cta-buttons">
|
||||||
</div>
|
<button class="button button-standard button-primary" ng-click="allowNotif()" translate>Allow notifications</button>
|
||||||
<div class="row text-center">
|
<button class="button button-standard button-secondary button-clear" href ui-sref="onboarding.backupRequest({walletId: walletId})" translate>Not now</button>
|
||||||
<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>
|
</div>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
</ion-view>
|
</ion-view>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<ion-view ng-controller="tourController" ng-init="init()" class="onboarding" id="onboard-tour">
|
<ion-view ng-controller="tourController" ng-init="init()" class="onboarding" id="onboarding-tour">
|
||||||
<ion-nav-bar class="bar-stable">
|
<ion-nav-bar>
|
||||||
<ion-nav-title></ion-nav-title>
|
<ion-nav-title></ion-nav-title>
|
||||||
<ion-nav-buttons side="primary">
|
<ion-nav-buttons side="primary">
|
||||||
<button class="button back-button button-clear" ng-click="goBack()">
|
<button class="button back-button button-clear" ng-click="goBack()">
|
||||||
|
|
@ -7,79 +7,46 @@
|
||||||
</button>
|
</button>
|
||||||
</ion-nav-buttons>
|
</ion-nav-buttons>
|
||||||
<ion-nav-buttons side="secondary">
|
<ion-nav-buttons side="secondary">
|
||||||
<button class="button back-button button-clear" ng-show="data.index == 0" ng-click="createDefaultWallet()">
|
<button class="button back-button button-clear" ng-show="data.index == 0" ng-click="createDefaultWallet()">{{'Skip' | translate}}</button>
|
||||||
{{'Skip' | translate}}
|
|
||||||
</button>
|
|
||||||
</ion-nav-buttons>
|
</ion-nav-buttons>
|
||||||
</ion-nav-bar>
|
</ion-nav-bar>
|
||||||
<ion-slides class="slides" options="options" slider="data.slider">
|
<ion-slides class="slides" options="options" slider="data.slider">
|
||||||
<ion-slide-page>
|
<ion-slide-page>
|
||||||
<ion-content id="onboard-tour-secure" scroll="false">
|
<ion-content id="onboard-tour-secure" scroll="false">
|
||||||
<div class="text-center row">
|
<div class="onboarding-topic" translate>Bitcoin is secure,<br/>digital money.</div>
|
||||||
<h2 class="col col-60" translate>Bitcoin is secure, digital money</h2>
|
<div class="onboarding-description" translate>You can spend bitcoin at millions of websites and stores worldwide.</div>
|
||||||
</div>
|
<div class="onboarding-illustration-secure"></div>
|
||||||
<div class="text-center row">
|
<div class="cta-buttons">
|
||||||
<p translate class="col col-75 tagline">
|
<div class="onboarding-tldr" translate>Just scan the code to pay.</div>
|
||||||
You can spend bitcoin at millions of websites and stores worldwide
|
<button class="button button-standard button-secondary" ng-click="slideNext()">
|
||||||
</p>
|
Got it →
|
||||||
</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>
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
</ion-slide-page>
|
</ion-slide-page>
|
||||||
<ion-slide-page>
|
<ion-slide-page>
|
||||||
<ion-content id="onboard-tour-currency" scroll="false">
|
<ion-content id="onboard-tour-currency" scroll="false">
|
||||||
<div class="text-center row">
|
<div class="onboarding-topic" translate>Bitcoin is a currency.</div>
|
||||||
<h2 class="col col-75" translate>Bitcoin is a currency</h2>
|
<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>
|
||||||
<div class="text-center row">
|
<div class="cta-buttons">
|
||||||
<p translate class="col col-75 tagline">
|
<div class="onboarding-tldr" translate>The exchange rate changes with the market.</div>
|
||||||
You can trade it for other currencies like US Dollars, Euros, or Pounds
|
<button class="button button-standard button-secondary" ng-click="slideNext()">
|
||||||
</p>
|
Makes sense →
|
||||||
</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>
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
</ion-slide-page>
|
</ion-slide-page>
|
||||||
<ion-slide-page>
|
<ion-slide-page>
|
||||||
<ion-content id="onboard-tour-control" scroll="false">
|
<ion-content id="onboard-tour-control" scroll="false">
|
||||||
<div class="text-center row">
|
<div translate class="onboarding-topic">You control your bitcoin.</div>
|
||||||
<h2 translate class="col col-80">You control your bitcoin</h2>
|
<div translate class="onboarding-description">This app stores your bitcoin with cutting-edge security.</div>
|
||||||
</div>
|
<div class="onboarding-illustration-control"></div>
|
||||||
<div class="text-center row">
|
<div class="cta-buttons">
|
||||||
<p translate class="col col-75 tagline">
|
<div class="onboarding-tldr" translate>Not even BitPay can access it.</div>
|
||||||
The BitPay wallet stores your bitcoin with cutting-edge security
|
<button class="button button-standard button-primary" ng-click="createDefaultWallet()">
|
||||||
</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()">
|
|
||||||
Create bitcoin wallet
|
Create bitcoin wallet
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,13 @@
|
||||||
<ion-view id="onboard-welcome" class="onboarding">
|
<ion-view id="onboard-welcome" class="onboarding">
|
||||||
<ion-content ng-controller="welcomeController" ng-init="createProfile()" scroll="false">
|
<ion-content ng-controller="welcomeController" ng-init="createProfile()" scroll="false">
|
||||||
<!-- <qr-scanner id="shopping-24" on-scan="goImport(data)"></qr-scanner> -->
|
<!-- <qr-scanner id="qrcode" on-scan="goImport(data)"></qr-scanner> -->
|
||||||
<article id="logo-tagline">
|
<div id="logo-tagline">
|
||||||
<div class="row text-center">
|
<img src='img/bitpay-logo.svg' id="logo" />
|
||||||
<img src='img/bitpay-logo.svg' class="logo col col-50" />
|
<p id="lead" translate>Take control of your money,<br />get started with bitcoin.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="row text-center">
|
<div id="cta-buttons">
|
||||||
<p translate class="text-center col col-60">
|
<button class="button button-standard button-primary" id="get-started" href ui-sref="onboarding.tour" translate>Get started</button>
|
||||||
Take control of your money, <br /> get started with bitcoin.
|
<button class="button button-standard button-secondary button-clear" id="restore" translate href ui-sref="onboarding.import({'fromOnboarding':true})">Restore from backup</button>
|
||||||
</p>
|
</div>
|
||||||
</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>
|
|
||||||
</ion-content>
|
</ion-content>
|
||||||
</ion-view>
|
</ion-view>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue