<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Jackthomsonn/pen/xZNKzK?limit=all&page=4&q=app" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'>
<style class="cp-pen-styles">* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
}
html, body {
background: #EDF2F4;
overflow: hidden;
}
.app {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100vh;
}
.app_inner {
background: #FFF;
width: 750px;
height: 550px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-radius: 9px;
-webkit-box-shadow: 1px 5px 15px #CCC;
box-shadow: 1px 5px 15px #CCC;
}
.app_inner aside {
background: #292C3A;
-webkit-box-flex: 1;
-ms-flex: 1 0 220px;
flex: 1 0 220px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
}
.app_inner aside .wallet {
margin: 0 auto;
}
.app_inner aside .wallet .holder {
height: 370px;
overflow-y: auto;
overflow-x: hidden;
}
.app_inner aside .wallet .card {
background: rgba(0, 0, 0, 0.1);
border-radius: 5px;
width: 180px;
height: 100px;
margin: 1em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 1em;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
cursor: pointer;
z-index: 1;
position: relative;
-webkit-transition: all ease .45s;
transition: all ease .45s;
}
.app_inner aside .wallet .card:last-of-type {
background: #EF3E5C;
}
.app_inner aside .wallet .card:before {
content: '';
background: url(http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2012/10/world_map_06.jpg);
opacity: 0.2;
-webkit-transform: translateX(-16px);
transform: translateX(-16px);
border-radius: 5px;
width: 100%;
height: 100%;
background-size: cover;
position: absolute;
z-index: 0;
}
.app_inner aside .wallet .card_number, .app_inner aside .wallet .card_holder > p {
font-size: 10px;
color: #FFF;
}
.app_inner aside .wallet .card_holder {
width: 50%;
}
.app_inner aside .wallet .card_number {
width: 100%;
}
.app_inner aside .wallet .card_icon {
width: 20%;
}
.app_inner aside .wallet .card_icon > img {
width: 35px;
height: auto;
}
.app_inner .add_a_card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #FFF;
margin: 4.5em auto;
cursor: pointer;
}
.app_inner .add_a_card > i {
font-size: 30px;
}
.app_inner .add_a_card > p {
font-size: 17px;
}
.app_inner main {
background: #252734;
-webkit-box-flex: 1;
-ms-flex: 1 1 480px;
flex: 1 1 480px;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
position: relative;
}
.app_inner main .list {
overflow-y: auto;
overflow-x: hidden;
height: 440px;
}
.app_inner main .list .card {
background-color: #EF3E5C;
border-radius: 5px;
width: 170px;
height: 100px;
margin: 3em auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 1em;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
z-index: 1;
}
.app_inner main .list .card:before {
content: '';
background: url(http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2012/10/world_map_06.jpg);
opacity: 0.225;
-webkit-transform: translateX(-16px);
transform: translateX(-16px);
border-radius: 5px;
width: 100%;
height: 100%;
background-size: cover;
position: absolute;
z-index: -1;
}
.app_inner main .list .card_number, .app_inner main .list .card_holder, .app_inner main .list .card_expiration, .app_inner main .list .card_holder > p {
font-size: 10px;
color: #FFF;
}
.app_inner main .list .card_holder {
width: 50%;
}
.app_inner main .list .card_number {
width: 100%;
}
.app_inner main .list .card_icon {
width: 20%;
}
.app_inner main .list .card_icon > img {
width: 35px;
height: auto;
}
.app_inner main .list .transactions table {
width: 100%;
text-align: left;
color: #FFF;
padding: 1em;
border-spacing: 0;
}
.app_inner main .list .transactions table thead {
border-bottom: 1px solid #232531;
}
.app_inner main .list .transactions table thead th {
padding: 0.5em 0;
color: #EB526B;
}
.app_inner main .list .transactions table td {
border-top: 1px solid rgba(255, 255, 255, 0.015);
padding: 0.75em 0;
}
.app_inner main .list .transactions h1 {
background: #F03F5D;
color: #FFF;
cursor: pointer;
text-align: center;
margin: 2em auto;
width: 80%;
position: absolute;
left: 0;
right: 0;
padding: 0.2em;
border-radius: 7px;
}
.app_inner main .create {
opacity: 0;
-webkit-transition: opacity 0.45s cubic-bezier(0.39, 0.575, 0.565, 1);
transition: opacity 0.45s cubic-bezier(0.39, 0.575, 0.565, 1);
pointer-events: none;
}
.app_inner main .create .card {
background: #EF3E5C;
border-radius: 5px;
width: 170px;
height: 100px;
margin: 2em auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 1em;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
z-index: 1;
position: relative;
}
.app_inner main .create .card:before {
content: '';
background: url(http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2012/10/world_map_06.jpg);
opacity: 0.2;
-webkit-transform: translateX(-16px);
transform: translateX(-16px);
border-radius: 5px;
width: 100%;
height: 100%;
background-size: cover;
position: absolute;
z-index: 0;
}
.app_inner main .create .card_number, .app_inner main .create .card_holder, .app_inner main .create .card_expiration, .app_inner main .create .card_holder > p {
font-size: 10px;
color: #FFF;
text-transform: capitalize;
}
.app_inner main .create .card_holder {
width: 50%;
}
.app_inner main .create .card_number {
width: 100%;
}
.app_inner main .create .card_icon {
width: 20%;
}
.app_inner main .create .card_icon > img {
width: 35px;
height: auto;
}
.app_inner main form {
background: #252734;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transform: translateY(-430px);
transform: translateY(-430px);
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
z-index: 2;
height: 525px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.app_inner main form input[type="text"] {
background: transparent;
border-bottom: 1px solid rgba(255, 255, 255, 0.015);
padding: 1em 0;
border-top: none;
border-left: none;
border-right: none;
width: 85%;
font-size: 18px;
outline: none;
color: #FFF;
}
.app_inner main form input[type="submit"] {
background: #1a1c25;
color: #FFF;
border: none;
padding: 1em;
width: 85%;
font-size: 18px;
outline: none;
border-radius: 7px;
cursor: pointer;
-webkit-transition: all ease .15s;
transition: all ease .15s;
}
.app_inner main form input[type="submit"]:hover {
background: rgba(239, 62, 92, 0.9);
}
.app_inner main form i {
color: rgba(255, 255, 255, 0.7);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
width: 85%;
margin: 1em 0;
cursor: pointer;
}
.app_inner main form i:hover {
color: white;
}
.app_inner main form .choose_a_card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.app_inner main form .choose_a_card > img {
margin: 0 1em;
width: 80px;
height: auto;
cursor: pointer;
padding: 0.6em;
border-radius: 7px;
-webkit-transition: all ease .45s;
transition: all ease .45s;
}
.app_inner main form .choose_a_card .selected {
background: #1a1c25;
}
::-webkit-input-placeholder {
color: #FFF;
}
::-webkit-scrollbar-thumb {
background: #1e212b;
border-radius: 50px;
height: 50px;
}
</style></head><body>
<div class='app' ng-app='wallet-app' ng-cloak='true'>
<div class='app_inner'>
<aside>
<div class='wallet'>
<div class='holder' ng-controller='walletController'>
<div class='card' ng-click='index(card.id)' ng-repeat='card in cards | orderBy:"id":true'>
<div class='card_number'>
<p>{{card.cardNumber}}</p>
</div>
<div class='card_holder'>
<p>{{card.cardHolder}}</p>
<p>{{card.expiryDate}}</p>
</div>
<div class='card_icon'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/{{card.type}}.png'>
</div>
</div>
</div>
<div class='add_a_card'>
<i class='fa fa-plus'></i>
<p>Add a card</p>
</div>
</div>
</aside>
<main>
<div class='list' ng-controller='walletController'>
<ul ng-repeat='card in cards' ng-show='card.id == cardIndex'>
<div class='card'>
<div class='card_number'>
<p>{{card.cardNumber}}</p>
</div>
<div class='card_holder'>
<p>{{card.cardHolder}}</p>
<p>{{card.expiryDate}}</p>
</div>
<div class='card_icon'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/{{card.type}}.png'>
</div>
</div>
<div class='transactions'>
<table>
<thead>
<th>
Date
</th>
<th>
Merchant
</th>
<th>
Spend
</th>
</thead>
<tr ng-repeat='transaction in card.transactions'>
<td>
{{transaction.date}}
</td>
<td>
{{transaction.merchant}}
</td>
<td>
{{transaction.price | currency:"£"}}
</td>
</tr>
</table>
</div>
</ul>
</div>
<div class='create'>
<form ng-controller='addCardController as card'>
<i class='fa fa-times-circle'></i>
<input class='number' ng-model='number' placeholder='Enter card number' type='text'>
<input class='name' ng-model='name' placeholder='Enter your name' type='text'>
<input class='expiry' ng-model='expiry' placeholder='MM / YY' type='text'>
<div class='choose_a_card' ng-controller='addCardController'>
<img ng-click='choose("mastercard-curved-64px")' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/mastercard-curved-64px.png'>
<img ng-click='choose("discover-curved-64px")' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/discover-curved-64px.png'>
<img class='selected' ng-click='choose("visa-curved-64px")' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/visa-curved-64px.png'>
<div class='card'>
<div class='card_number'>
<p>{{number}}</p>
</div>
<div class='card_holder'>
<p>{{name}}</p>
<p>{{expiry}}</p>
</div>
<div class='card_icon'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/{{choice}}.png'>
</div>
</div>
<input ng-click='addCard(number, name, expiry)' type='submit' value='Add card'>
</div>
</form>
</div>
</main>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >angular.module('wallet-app', []).
controller('walletController', function($scope, $rootScope, $timeout) {
$rootScope.cardIndex = 0;
$scope.index = function(id) {
$timeout(function() {
$rootScope.cardIndex = id;
}, 1000);
console.log(id);
}
$rootScope.cards = [{
id: 0,
cardNumber: '1234 5678 9876 5432',
expiryDate: '07/19',
cardHolder: 'J Thomson',
type: 'visa-curved-64px',
transactions: [{
date: '01/02/2016',
merchant: 'Apple',
price: '205.25'
}, {
date: '05/02/2016',
merchant: 'Jack & Jones',
price: '32.95'
}, {
date: '12/02/2016',
merchant: 'F&B',
price: '47.22'
}, {
date: '14/02/2016',
merchant: 'Swarovski',
price: '325'
}]
}, {
id: 1,
cardNumber: '5432 9876 5678 1234',
expiryDate: '01/22',
cardHolder: 'T Konten',
type: 'mastercard-curved-64px',
transactions: [{
date: '01/02/2016',
merchant: 'Hugo Boss',
price: '19.99'
}, {
date: '05/02/2016',
merchant: 'Amazon UK',
price: '59.95'
}]
}, {
id: 2,
cardNumber: '5678 5433 2254 3476',
expiryDate: '01/22',
cardHolder: 'C David',
type: 'discover-curved-64px',
transactions: [{
date: '01/02/2016',
merchant: 'Steam',
price: '19.99'
}, {
date: '05/02/2016',
merchant: 'Tesco',
price: '10'
}, {
date: '05/02/2016',
merchant: 'Tesco',
price: '122.50'
}, {
date: '05/02/2016',
merchant: 'Game',
price: '22.50'
}, {
date: '05/02/2016',
merchant: 'Steam',
price: '9'
}, {
date: '05/02/2016',
merchant: 'IKEA',
price: '12.17'
}, {
date: '05/02/2016',
merchant: 'Apple',
price: '1.50'
}, {
date: '05/02/2016',
merchant: 'Tesco',
price: '7.95'
}]
}]
}).
controller('addCardController', function($scope, $rootScope, $timeout) {
$scope.choice = "visa-curved-64px";
$scope.choose = function(card) {
$scope.choice = card;
}
$scope.number;
$rootScope.name;
$scope.expiry;
$scope.addCard = function(number, name, expiry) {
$timeout(function() {
$rootScope.cards.push({
id: $rootScope.cards.length + 1,
cardNumber: number,
cardHolder: name,
expiryDate: expiry,
type: $scope.choice,
transactions: [{
date: '10/02/2016',
merchant: 'Jack & Jones',
price: '79.87'
}, {
date: '12/02/2016',
merchant: 'Cadwalders',
price: '7.25'
}, {
date: '15/02/2016',
merchant: 'Bella Italia',
price: '62.70'
}, {
date: '15/02/2016',
merchant: 'Odeon',
price: '24.99'
}]
});
}, 700);
console.log($rootScope.cards);
}
});
function changeCard() {
setTimeout(function() {
$("main").find(".list").css({
'transform': 'scale(0.95)',
'transition': 'all ease-in-out .45s',
'opacity': '0',
'-webkit-filter': 'blur(10px)'
});
});
setTimeout(function() {
$("main").find(".list").css({
'transform': 'scale(1)',
'transition': 'all ease-in-out .45s',
'opacity': '1',
'-webkit-filter': 'blur(0)'
});
}, 1000);
}
function close() {
$(".create").css({
'opacity': '0',
'pointer-events': 'none'
});
}
function addCard() {
$(".create").css({
'opacity': '1',
'pointer-events': 'auto'
})
}
$(".choose_a_card").on("click", "img", function() {
$(this).addClass("selected").siblings().removeClass("selected");
});
$(".wallet").on("click", ".card", function() {
changeCard();
setTimeout(function() {
close();
}, 600);
$(this).css({
'background': '#EF3E5C',
'transition': 'all ease .45s'
}).siblings().css({
'background': 'rgba(0, 0, 0, 0.2)',
'transition': 'all ease .45s'
})
});
$(".add_a_card").click(function() {
addCard();
});
$("form").find("i").click(function() {
close();
});
$("input.number").keydown(function(e) {
if (e.keyCode === 8) {
$(this).val().length + 100;
} else if ($(this).val().length === 19) {
e.preventDefault();
} else {
var $this = $(this);
if ((($this.val().length + 1) % 5) === 0) {
$this.val($this.val() + " ");
}
}
});
$("input.expiry").keydown(function(e) {
if (e.keyCode === 8) {
$(this).val().length + 100;
} else if (e.keyCode === 32) {
return false;
} else if (e.keyCode === 191) {
return false
} else if (e.keyCode === 189) {
return false
} else if ($(this).val().length > 6) {
e.preventDefault();
} else {
var $this = $(this);
if ((($this.val().length + 1) % 3) === 0) {
$this.val($this.val() + " / ");
}
}
});
$("input[type='submit']").click(function() {
setTimeout(function() {
$(".wallet").find(".holder").css({
'opacity': '0',
'padding-top': '100px',
'transition': 'all ease .45s',
});
}, 0);
setTimeout(function() {
$(".wallet").find(".card").css({
'transform': 'scale(0)'
});
}, 700);
setTimeout(function() {
$(".wallet").find(".holder").css({
'opacity': '1',
'padding-top': '0',
'transition': 'all ease .75s',
});
}, 1000);
setTimeout(function() {
$(".wallet").find(".card").css({
'transform': 'scale(1)'
});
}, 1450);
});
//# sourceURL=pen.js
</script>
</body></html>
