<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Muli", sans-serif;
}

html, body {
  background: #EDF2F4;
  overflow: hidden;
}

.app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.app_inner {
  background: #FFF;
  width: 750px;
  height: 550px;
  display: flex;
  border-radius: 9px;
  box-shadow: 1px 5px 15px #CCC;
}
.app_inner aside {
  background: #292C3A;
  flex: 1 0 220px;
  display: flex;
  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: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1em;
  flex-flow: row wrap;
  cursor: pointer;
  z-index: 1;
  position: relative;
  transition: all ease 0.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;
  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: flex;
  flex-flow: column wrap;
  justify-content: 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;
  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: flex;
  transform: scale(1.5);
  justify-content: space-between;
  align-items: center;
  padding: 0 1em;
  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;
  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;
  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: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1em;
  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;
  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: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-430px);
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  z-index: 2;
  height: 525px;
  flex-flow: column wrap;
  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;
  transition: all ease 0.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: flex;
  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: flex;
  flex-flow: row wrap;
  justify-content: 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;
  transition: all ease 0.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 translate="no">
  <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>
 </body>
</html>
