mirror of https://github.com/BTCPrivate/copay.git
BitPay Card Intro (slides)
This commit is contained in:
Gustavo Maximiliano Cortez
parent
68d3195f7f
commit
6d97ef57d5
|
|
@ -0,0 +1,74 @@
|
|||
<ion-view id="bitpayCard-intro">
|
||||
<ion-nav-bar class="bar-stable">
|
||||
<ion-nav-title></ion-nav-title>
|
||||
<ion-nav-buttons side="primary">
|
||||
<button class="button back-button button-clear" ng-click="goBack()">
|
||||
<i class="icon ion-ios-arrow-thin-left"></i>
|
||||
</button>
|
||||
</ion-nav-buttons>
|
||||
<ion-nav-buttons side="secondary">
|
||||
<button class="button back-button button-clear" ng-click="openExternalInfo()">
|
||||
<i class="icon ion-ios-information-outline"></i>
|
||||
</button>
|
||||
</ion-nav-buttons>
|
||||
</ion-nav-bar>
|
||||
<ion-slides class="slides" options="options" slider="data.slider">
|
||||
<ion-slide-page>
|
||||
<ion-content scroll="false">
|
||||
<div class="text-center">
|
||||
<img src="img/bitpay-card-visa.svg" width="200">
|
||||
</div>
|
||||
<p translate>
|
||||
Turn bitcoin into dollars, swipe anywhere Visa® is accepted.
|
||||
</p>
|
||||
<div class="cta-button">
|
||||
<button class="button button-block button-primary" ng-click="orderBitPayCard()" translate>
|
||||
Order the BitPay Card
|
||||
</button>
|
||||
<button class="button button-block button-transparent text-white m10t" ng-click="connectBitPayCard()" translate>
|
||||
Connect my BitPay Card
|
||||
</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-slide-page>
|
||||
<ion-slide-page>
|
||||
<ion-content scroll="false">
|
||||
<div class="text-center">
|
||||
<img src="img/bitpay-card-visa.svg" width="200">
|
||||
</div>
|
||||
<p translate>
|
||||
<span translate>Get local cash anywhere you go, from any Visa®-compatible ATM.</span>
|
||||
<div translate class="size-10 m20t text-center">
|
||||
*ATM bank fees may apply
|
||||
</div>
|
||||
</p>
|
||||
<div class="cta-button">
|
||||
<button class="button button-block button-primary" ng-click="orderBitPayCard()" translate>
|
||||
Order the BitPay Card
|
||||
</button>
|
||||
<button class="button button-block button-transparent text-white m10t" ng-click="connectBitPayCard()" translate>
|
||||
Connect my BitPay Card
|
||||
</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-slide-page>
|
||||
<ion-slide-page>
|
||||
<ion-content scroll="false">
|
||||
<div class="text-center">
|
||||
<img src="img/bitpay-card-visa.svg" width="200">
|
||||
</div>
|
||||
<p translate>
|
||||
Pay 0% fees to turn bitcoin into dollars.
|
||||
</p>
|
||||
<div class="cta-button">
|
||||
<button class="button button-block button-primary" ng-click="orderBitPayCard()" translate>
|
||||
Order the BitPay Card
|
||||
</button>
|
||||
<button class="button button-block button-transparent text-white m10t" ng-click="connectBitPayCard()" translate>
|
||||
Connect my BitPay Card
|
||||
</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-slide-page>
|
||||
</ion-slides>
|
||||
</ion-view>
|
||||
|
|
@ -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) {});
|
||||
});
|
||||
|
||||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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': {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -12,6 +12,7 @@
|
|||
@import "walletDetails";
|
||||
@import "advancedSettings";
|
||||
@import "bitpayCard";
|
||||
@import "bitpayCardIntro";
|
||||
@import "address-book";
|
||||
@import "wallet-backup-phrase";
|
||||
@import "zero-state";
|
||||
|
|
|
|||
|
|
@ -138,7 +138,7 @@
|
|||
<i class="icon bp-arrow-down" ng-show="hideNextSteps"></i>
|
||||
</div>
|
||||
<div ng-show="!hideNextSteps">
|
||||
<a ui-sref="tabs.bitpayCard" ng-if="!externalServices.BitpayCard && bitpayCardEnabled" class="item item-sub item-icon-left item-big-icon-left item-icon-right next-step">
|
||||
<a ui-sref="tabs.bitpayCardIntro" ng-if="!externalServices.BitpayCard && bitpayCardEnabled" class="item item-icon-left item-big-icon-left item-icon-right next-step">
|
||||
<i class="icon big-icon-svg">
|
||||
<div class="bg icon-bitpay-card"></div>
|
||||
</i>
|
||||
|
|
|
|||
Loading…
Reference in New Issue