From 6d97ef57d57bcfcbed1f888fcc83d59fcbdf4588 Mon Sep 17 00:00:00 2001 From: Gustavo Maximiliano Cortez Date: Tue, 4 Oct 2016 12:06:06 -0300 Subject: [PATCH] BitPay Card Intro (slides) --- public/views/bitpayCardIntro.html | 74 +++++++++++++++++++++++++ src/js/controllers/bitpayCardIntro.js | 57 ++++++++++++++++++++ src/js/controllers/tabsController.js | 1 + src/js/routes.js | 11 +++- src/sass/views/bitpayCardIntro.scss | 78 +++++++++++++++++++++++++++ src/sass/views/views.scss | 1 + www/views/tab-home.html | 2 +- 7 files changed, 222 insertions(+), 2 deletions(-) create mode 100644 public/views/bitpayCardIntro.html create mode 100644 src/js/controllers/bitpayCardIntro.js create mode 100644 src/sass/views/bitpayCardIntro.scss diff --git a/public/views/bitpayCardIntro.html b/public/views/bitpayCardIntro.html new file mode 100644 index 000000000..d272f3639 --- /dev/null +++ b/public/views/bitpayCardIntro.html @@ -0,0 +1,74 @@ + + + + + + + + + + + + + +
+ +
+

+ Turn bitcoin into dollars, swipe anywhere Visa® is accepted. +

+
+ + +
+ + + + +
+ +
+

+ Get local cash anywhere you go, from any Visa®-compatible ATM. +

+ *ATM bank fees may apply +
+

+
+ + +
+ + + + +
+ +
+

+ Pay 0% fees to turn bitcoin into dollars. +

+
+ + +
+ + + + diff --git a/src/js/controllers/bitpayCardIntro.js b/src/js/controllers/bitpayCardIntro.js new file mode 100644 index 000000000..943a1c0fd --- /dev/null +++ b/src/js/controllers/bitpayCardIntro.js @@ -0,0 +1,57 @@ +'use strict'; +angular.module('copayApp.controllers').controller('bitpayCardIntroController', function($scope, $state, $timeout, $ionicHistory, storageService, externalLinkService, bitpayCardService) { + + $scope.$on("$ionicView.beforeEnter", function(event, data) { + $scope.data = { + index: 0 + }; + + $scope.options = { + loop: false, + effect: 'flip', + speed: 500, + spaceBetween: 100 + }; + + storageService.getNextStep('BitpayCard', function(err, value) { + if (value) { + $ionicHistory.nextViewOptions({ + disableAnimate: true + }); + $state.go('tabs.home'); + $timeout(function() { + $state.transitionTo('tabs.bitpayCard'); + }, 100); + } + }); + }); + + $scope.orderBitPayCard = function() { + var url = 'https://bitpay.com/visa/'; + var target = '_system'; + externalLinkService.open(url, target); + }; + + $scope.connectBitPayCard = function() {}; + + $scope.goBack = function() { + if ($scope.data.index != 0) $scope.slider.slidePrev(); + else $state.go('tabs.home'); + }; + + $scope.slideNext = function() { + if ($scope.data.index != 2) $scope.slider.slideNext(); + else $state.go('tabs.home'); + }; + + $scope.$on("$ionicSlides.sliderInitialized", function(event, data) { + $scope.slider = data.slider; + }); + + $scope.$on("$ionicSlides.slideChangeStart", function(event, data) { + $scope.data.index = data.slider.activeIndex; + }); + + $scope.$on("$ionicSlides.slideChangeEnd", function(event, data) {}); +}); + diff --git a/src/js/controllers/tabsController.js b/src/js/controllers/tabsController.js index 3e93df45d..642948ab6 100644 --- a/src/js/controllers/tabsController.js +++ b/src/js/controllers/tabsController.js @@ -35,6 +35,7 @@ angular.module('copayApp.controllers').controller('tabsController', function($ro 'tabs.receive.backup', 'tabs.bitpayCard.amount', 'tabs.bitpayCard.confirm', + 'tabs.bitpayCardIntro' ]; $rootScope.$on('$ionicView.beforeEnter', function() { diff --git a/src/js/routes.js b/src/js/routes.js index 8e9a6729c..0782c14f2 100644 --- a/src/js/routes.js +++ b/src/js/routes.js @@ -846,7 +846,16 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr * */ - .state('tabs.bitpayCard', { + .state('tabs.bitpayCardIntro', { + url: '/bitpay-card-intro', + views: { + 'tab-home@tabs': { + controller: 'bitpayCardIntroController', + templateUrl: 'views/bitpayCardIntro.html' + } + } + }) + .state('tabs.bitpayCard', { url: '/bitpay-card', views: { 'tab-home@tabs': { diff --git a/src/sass/views/bitpayCardIntro.scss b/src/sass/views/bitpayCardIntro.scss new file mode 100644 index 000000000..1405a2f7d --- /dev/null +++ b/src/sass/views/bitpayCardIntro.scss @@ -0,0 +1,78 @@ +#bitpayCard-intro { + .swiper-container-horizontal > .swiper-pagination { + bottom: 150px; + } + .cta-button{ + text-align: center; + position: absolute; + bottom: 45px; + padding: 0 1.5rem; + width: 100%; + } + 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; + height: 100%; + .bar.bar-header { + background: rgb(30, 49, 134); + color: #fff; + button { + color: #fff; + } + .secondary-buttons { + button { + color: rgba(255, 255, 255, .5); + } + } + } + .bar.bar-stable{ + border-color: transparent; + border:none; + } + .swiper-pagination { + &-bullet { + background: rgb(100, 124, 232); + &-active { + background: rgb(100, 124, 232); + } + } + } + .button-transparent{ + background: none !important; + } + .button-translucent{ + background: rgba(215, 215, 215, 0.1) + } + .button-primary{ + background: rgb(100, 124, 232) !important; + color:#fff; + } + .light-blue{ + color:rgb(100, 124, 232); + } + .text-white{ + color: #ffffff; + } + ion-content { + background: url(../img/onboarding-welcome-bg.png); + background-position: top center; + background-size: contain; + background-repeat: repeat-x; + height: 100%; + .scroll{ + height: 100%; + } + color: #fff; + p { + text-align: center; + margin: 40px 20px; + font-size: 1.2rem; + color: rgba(255, 255, 255, .5); + } + } +} diff --git a/src/sass/views/views.scss b/src/sass/views/views.scss index 0112476f3..de6ee8d30 100644 --- a/src/sass/views/views.scss +++ b/src/sass/views/views.scss @@ -12,6 +12,7 @@ @import "walletDetails"; @import "advancedSettings"; @import "bitpayCard"; +@import "bitpayCardIntro"; @import "address-book"; @import "wallet-backup-phrase"; @import "zero-state"; diff --git a/www/views/tab-home.html b/www/views/tab-home.html index 9b9cbdb14..531cc72eb 100644 --- a/www/views/tab-home.html +++ b/www/views/tab-home.html @@ -138,7 +138,7 @@
- +