anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

finished on boarding tour ui improvements, started on wallet create

Browse source
This commit is contained in:
Jamal Jackson 2016-09-01 08:51:48 -04:00
commit e3634f63d1
3 changed files with 125 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

72
public/views/onboarding/tour.html
View file

@ -1,9 +1,9 @@
<ion-view ng-controller="tourController" ng-init="init()">
<ion-nav-bar class="bar-stable">
<ion-nav-title>Get Started</ion-nav-title>
<ion-view ng-controller="tourController" ng-init="init()" class="onboarding" id="onboard-tour">
<ion-nav-bar>
<ion-nav-title></ion-nav-title>
<ion-nav-buttons side="primary">
<button class="button no-border" ng-click="goBack()">
<i class="icon ion-chevron-left"></i> Back
<i class="icon ion-arrow-left-c"></i>
</button>
</ion-nav-buttons>
<ion-nav-buttons side="secondary">
@ -14,48 +14,72 @@
</ion-nav-bar>
<ion-slides class="slides" options="options" slider="data.slider">
<ion-slide-page>
<ion-content >
<div class="text-center">
<h2 translate>Bitcoin is digital money</h2>
<p translate>
<ion-content id="onboard-tour-secure">
<div class="text-center row">
<h2 class="col col-60" translate>Bitcoin is secure, digital money</h2>
</div>
<div class="text-center row">
<p translate class="col col-75 tagline">
You can spend bitcoin at millions of websites and stores worldwide
</p>
<p translate>
</div>
<div id="cta">
</div>
<div class="row text-center">
<p translate class="col">
Just scan the code to pay
</p>
<button class="button icon-right ion-chevron-right button-positive" ng-click="slideNext()">
Got it
</div>
<div class="row">
<button class="button button-positive col col-75 next-slide" ng-click="slideNext()">
Got it <i class="icon ion-arrow-right-c"></i>
</button>
</div>
</ion-content>
</ion-slide-page>
<ion-slide-page>
<ion-content >
<div class="text-center">
<h2 translate>Bitcoin is currency</h2>
<p translate>
<ion-content id="onboard-tour-currency">
<div class="text-center row">
<h2 class="col col-75" translate>Bitcoin is a currency</h2>
</div>
<div class="text-center row">
<p translate class="col col-75 tagline">
You can trade it for other currencies like US Dollars, Euros, or Pounds
</p>
<p translate>
</div>
<div id="cta">
</div>
<div class="row text-center">
<p translate class="col">
The exchange rate changes with the market
</p>
<button class="button icon-right ion-chevron-right button-positive" ng-click="slideNext()">
Makes sense
</div>
<div class="row">
<button class="button button-positive col col-75 next-slide" ng-click="slideNext()">
Makes sense <i class="icon ion-arrow-right-c"></i>
</button>
</div>
</ion-content>
</ion-slide-page>
<ion-slide-page>
<ion-content >
<div class="text-center">
<h2 translate>You control your bitcoin</h2>
<p translate>
<ion-content id="onboard-tour-control">
<div class="text-center row">
<h2 translate class="col col-75">You control your bitcoin</h2>
</div>
<div class="text-center row">
<p translate class="col col-75 tagline">
The BitPay wallet stores your bitcoin with cutting-edge security
</p>
<p translate>
</div>
<div id="cta">
</div>
<div class="row text-center">
<p translate class="col">
Not even BitPay can access it
</p>
<button class="button icon-right button-positive" ng-click="createProfile()">
</div>
<div class="row">
<button class="button button-positive col col-75 get-started" ng-click="createProfile()">
Create bitcoin wallet
</button>
</div>

22
src/sass/views/onboarding/onboard-tour.scss Normal file
View file

@ -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;
}
}
}

56
src/sass/views/onboarding/onboarding.scss
View file

@ -6,8 +6,62 @@
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;
ion-header-bar {
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";