diff --git a/public/img/onboarding-success.svg b/public/img/onboarding-success.svg new file mode 100644 index 000000000..665a3fd01 --- /dev/null +++ b/public/img/onboarding-success.svg @@ -0,0 +1,18 @@ + + + + Group 3 + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/img/onboarding-tour-control.svg b/public/img/onboarding-tour-control.svg new file mode 100644 index 000000000..68b1867e5 --- /dev/null +++ b/public/img/onboarding-tour-control.svg @@ -0,0 +1,43 @@ + + + + bg-3 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/img/onboarding-tour-currency-bg.svg b/public/img/onboarding-tour-currency-bg.svg new file mode 100644 index 000000000..169671aad --- /dev/null +++ b/public/img/onboarding-tour-currency-bg.svg @@ -0,0 +1,48 @@ + + + + bitcoin-currency + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 1 BTC = $650 + + + + + + + \ No newline at end of file diff --git a/public/img/onboarding-tour-phone.svg b/public/img/onboarding-tour-phone.svg new file mode 100644 index 000000000..095c78f0e --- /dev/null +++ b/public/img/onboarding-tour-phone.svg @@ -0,0 +1,167 @@ + + + + digital-money + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/img/onboarding-welcome-bg.png b/public/img/onboarding-welcome-bg.png new file mode 100644 index 000000000..64916e9d3 Binary files /dev/null and b/public/img/onboarding-welcome-bg.png differ diff --git a/public/img/onboarding-welcome-shopping24.png b/public/img/onboarding-welcome-shopping24.png new file mode 100644 index 000000000..1dab91a3d Binary files /dev/null and b/public/img/onboarding-welcome-shopping24.png differ diff --git a/public/views/includes/terms.html b/public/views/includes/terms.html index c66f1f02f..3d17e514c 100644 --- a/public/views/includes/terms.html +++ b/public/views/includes/terms.html @@ -1,14 +1,12 @@ - +

+ The software you are about to use functions as a free, open source, and multi-signature digital wallet. The software does not constitute an account where BitPay or other third parties serve as financial intermediaries or custodians of your bitcoin. +

+

+ While the software has undergone beta testing and continues to be improved by feedback from the open-source user and developer community, we cannot guarantee that there will be no bugs in the software. You acknowledge that your use of this software is at your own discretion and in compliance with all applicable laws. You are responsible for safekeeping your passwords, private key pairs, PINs and any other codes you use to access the software. +

+

+ IF YOU LOSE ACCESS TO YOUR COPAY WALLET OR YOUR ENCRYPTED PRIVATE KEYS AND YOU HAVE NOT SEPARATELY STORED A BACKUP OF YOUR WALLET AND CORRESPONDING PASSWORD, YOU ACKNOWLEDGE AND AGREE THAT ANY BITCOIN YOU HAVE ASSOCIATED WITH THAT COPAY WALLET WILL BECOME INACCESSIBLE. All transaction requests are irreversible. The authors of the software, employees and affiliates of Bitpay, copyright holders, and BitPay, Inc. cannot retrieve your private keys or passwords if you lose or forget them and cannot guarantee transaction confirmation as they do not have control over the Bitcoin network. +

+

+ To the fullest extent permitted by law, this software is provided “as is” and no representations or warranties can be made of any kind, express or implied, including but not limited to the warranties of merchantability, fitness or a particular purpose and noninfringement. You assume any and all risks associated with the use of the software. In no event shall the authors of the software, employees and affiliates of Bitpay, copyright holders, or BitPay, Inc. be held liable for any claim, damages or other liability, whether in an action of contract, tort, or otherwise, arising from, out of or in connection with the software. We reserve the right to modify this disclaimer from time to time. +

diff --git a/public/views/onboarding/terms.html b/public/views/onboarding/terms.html index 49861a15e..775c14fdb 100644 --- a/public/views/onboarding/terms.html +++ b/public/views/onboarding/terms.html @@ -1,14 +1,14 @@ - - + + {{'Terms of Use' | translate}} -

+
diff --git a/public/views/onboarding/tour.html b/public/views/onboarding/tour.html index 0261a14c1..c3185705b 100644 --- a/public/views/onboarding/tour.html +++ b/public/views/onboarding/tour.html @@ -1,9 +1,9 @@ - + - {{'Get Started' | translate}} + @@ -14,48 +14,72 @@ - -
-

Bitcoin is digital money

-

+ +

+

Bitcoin is secure, digital money

+
+
+

You can spend bitcoin at millions of websites and stores worldwide

-

+

+
+
+
+

Just scan the code to pay

-
+
+
- -
-

Bitcoin is currency

-

+ +

+

Bitcoin is a currency

+
+
+

You can trade it for other currencies like US Dollars, Euros, or Pounds

-

+

+
+
+
+

The exchange rate changes with the market

-
+
+
- -
-

You control your bitcoin

-

+ +

+

You control your bitcoin

+
+
+

The BitPay wallet stores your bitcoin with cutting-edge security

-

+

+
+
+
+

Not even BitPay can access it

-
+
+
diff --git a/public/views/onboarding/welcome.html b/public/views/onboarding/welcome.html index f58e15aa6..8e44f87aa 100644 --- a/public/views/onboarding/welcome.html +++ b/public/views/onboarding/welcome.html @@ -1,11 +1,20 @@ - + +
-

bitpay

- - Take control of your money - get started with bitcoin - - - +
+ +
+
+

+ Take control of your money - get started with bitcoin +

+
+
+ +
+
+ +
diff --git a/src/js/routes.js b/src/js/routes.js index 3c6e3b263..d580f3f4d 100644 --- a/src/js/routes.js +++ b/src/js/routes.js @@ -30,7 +30,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr $ionicConfigProvider.navBar.positionSecondaryButtons('right'); // NAV BACK-BUTTON TEXT/ICON - $ionicConfigProvider.backButton.icon('ion-chevron-left'); + $ionicConfigProvider.backButton.icon('ion-arrow-left-c').text(''); $ionicConfigProvider.backButton.previousTitleText(false); $logProvider.debugEnabled(true); diff --git a/src/sass/main.scss b/src/sass/main.scss index 6871a60de..6fda65687 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -1003,6 +1003,8 @@ input[type=number] { } } +@import 'mixins/mixins'; +@import 'views/onboarding/onboarding'; @import "views/common"; @import "views/tab-home"; -@import "views/includes/walletActivity"; +@import "views/includes/walletActivity"; \ No newline at end of file diff --git a/src/sass/mixins/layout.scss b/src/sass/mixins/layout.scss new file mode 100644 index 000000000..71affb4b8 --- /dev/null +++ b/src/sass/mixins/layout.scss @@ -0,0 +1,4 @@ +@mixin center-block($topBottom: 0) { + float:none; + margin: $topBottom auto; +} \ No newline at end of file diff --git a/src/sass/mixins/mixins.scss b/src/sass/mixins/mixins.scss new file mode 100644 index 000000000..933fea1f7 --- /dev/null +++ b/src/sass/mixins/mixins.scss @@ -0,0 +1 @@ +@import "layout"; \ No newline at end of file diff --git a/src/sass/views/onboarding/onboard-tour.scss b/src/sass/views/onboarding/onboard-tour.scss new file mode 100644 index 000000000..1123a511a --- /dev/null +++ b/src/sass/views/onboarding/onboard-tour.scss @@ -0,0 +1,22 @@ +#onboard-tour { + &-secure { + #cta { + background-image: url(../img/onboarding-tour-phone.svg); + } + } + &-currency { + #cta { + background-image: url(../img/onboarding-tour-currency-bg.svg); + } + .next-slide { + margin-top: 3rem; + } + } + &-control { + #cta { + background-image: url(../img/onboarding-tour-control.svg); + background-size: 70%; + background-position: top; + } + } +} diff --git a/src/sass/views/onboarding/onboard-welcome.scss b/src/sass/views/onboarding/onboard-welcome.scss new file mode 100644 index 000000000..2e9c19e01 --- /dev/null +++ b/src/sass/views/onboarding/onboard-welcome.scss @@ -0,0 +1,33 @@ +#onboard-welcome { + ion-content { + background: url(../img/onboarding-welcome-bg.png); + background-position: top center; + background-size: contain; + background-repeat-y: no-repeat; + #shopping-24 { + position: absolute; + top: 2%; + right: 5%; + width: 35px; + height: auto; + } + .logo, + p { + @include center-block(); + } + .logo { + margin-top: 15rem; + } + button { + @include center-block(1rem); + color: #fff; + &.get-started { + background: rgb(100, 124, 232); + margin-top: 4rem; + } + &.restore { + background: none; + } + } + } +} diff --git a/src/sass/views/onboarding/onboarding.scss b/src/sass/views/onboarding/onboarding.scss new file mode 100644 index 000000000..6e94dabe4 --- /dev/null +++ b/src/sass/views/onboarding/onboarding.scss @@ -0,0 +1,67 @@ +.onboarding { + background: rgba(30, 49, 134, 1); + background: -moz-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%); + background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(30, 49, 134, 1)), color-stop(100%, rgba(17, 27, 73, 1))); + background: -webkit-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%); + background: -o-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%); + background: -ms-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%); + background: linear-gradient(to bottom, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%); + color: #fff; + .bar.bar-header { + background: rgb(30, 49, 134); + color: #fff; + button { + color: #fff; + } + .secondary-buttons { + button { + color: rgba(255, 255, 255, .5); + } + } + } + ion-content { + color: #fff; + .scroll {} + h2 { + color: #fff; + font-size: 1.8rem; + } + p { + &.tagline { + color: rgba(255, 255, 255, .5); + } + } + .col { + @include center-block(.5rem); + } + #cta { + background-size: contain; + width: 100%; + clear: both; + height: 20rem; + margin-bottom: -3rem; + background-position: center; + background-repeat: no-repeat; + img { + height: 16rem; + } + } + button { + &.next-slide { + background: rgba(215, 215, 215, 0.10); + } + } + } + .swiper-pagination { + &-bullet { + background: rgb(100, 124, 232); + &-active { + background: rgb(100, 124, 232); + } + } + } +} + +@import "terms-of-use"; +@import "onboard-welcome"; +@import "onboard-tour"; diff --git a/src/sass/views/onboarding/terms-of-use.scss b/src/sass/views/onboarding/terms-of-use.scss new file mode 100644 index 000000000..981408c7d --- /dev/null +++ b/src/sass/views/onboarding/terms-of-use.scss @@ -0,0 +1,17 @@ +#terms-of-use{ + ion-header-bar{ + background: #fff; + box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.2); + } + ion-content{ + margin-top:1.5rem; + color: rgba(86, 86, 86, 0.77); + p{ + padding:0 2.5%; + margin:2rem auto; + &:first-child{ + margin-top:0; + } + } + } +} \ No newline at end of file