*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
$openSans: 'Open Sans', Helvetica, Arial, sans-serif;
body {
background: #222;
font-family: $openSans;
}
$screenW: 375px;
$screenH: 667px;
$padSide: 24px;
$padVert: 106px;
$phoneW: $screenW + $padSide*2;
$phoneH: $screenH + $padVert*2;
%smallHeading {
font-size: 10px;
text-transform: uppercase;
color: #B5B5B5;
}
.phone {
position: relative;
width: $phoneW;
height: $phoneH;
margin: 2rem auto 2rem;
padding: $padVert $padSide;
background-color: #f8f8f8;
border-radius: 56px;
@media (max-width: 480px) {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
background: transparent;
border-radius: 0;
}
&__screen {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
background-color: #525A75;
}
&__scroll-cont {
overflow-y: auto;
position: absolute;
left: 0;
top: -21px;
width: calc(100% + 15px);
height: calc(100% + 42px);
padding: 21px 0;
@media (max-width: 480px) {
width: 100%;
height: 100%;
}
}
&__content {
position: relative;
padding-top: 30px;
}
}
$cardHeight: 160px;
$cardHeaderHeight: 40px;
$cardStatsHeight: $cardHeight - $cardHeaderHeight;
$cardMapHeight: $cardHeight + 100px;
$cardSenderHeight: 90px;
$cardFromToHeight: $cardHeight - $cardSenderHeight;
$cardLastPartHeight: $cardFromToHeight + 15px;
$cardMrgBtm: 15px;
$cardStep1MrgBtm: $cardHeight + $cardMrgBtm;
$cardStep2MrgBtm: $cardStep1MrgBtm + $cardFromToHeight;
$cardStep3MrgBtm: $cardStep2MrgBtm + $cardLastPartHeight;
$cardReqStep1MrgBtm: $cardHeaderHeight + $cardSenderHeight + $cardLastPartHeight - $cardHeight;
$cardReqStep2MrgBtm: $screenH - $cardHeight - $cardMrgBtm*2;
$cardBorderRadius: 11px;
$cardAnimStep1: 0.5s;
$cardAnimStep2: 0.5s;
$cardAnimStep3: 0.5s;
$cardReqAnimStep1: 0.6s;
$cardReqAnimStep2: 0.6s;
$cardReqClosing1: 0.5s;
$cardReqClosing2: 0.5s;
$cardAnimTotal: $cardAnimStep1 + $cardAnimStep2 + $cardAnimStep3;
$purple: #BA68C8;
$green: #52A43A;
$orange: #F7AA17;
$red: #EF5350;
@mixin colorTheme($color) {
.card__face__colored-side {
background: $color;
}
.card__face__path {
background: repeating-linear-gradient($color, $color 3px, transparent 3px, transparent 6px);
border-color: $color;
}
.card__header {
background: $color;
}
.card__sender__rating__star {
color: $color;
}
.card__path-big {
background: repeating-linear-gradient($color, $color 3px, transparent 3px, transparent 6px);
border-color: $color;
}
}
.card {
z-index: 1;
position: relative;
width: 90%;
height: $cardHeight;
margin-left: 18px;
margin-bottom: $cardMrgBtm;
perspective: 2000px;
transition: margin $cardAnimStep1 * 0.8 $cardAnimStep1 * 0.2;
&.active {
transition: margin $cardAnimStep1 * 0.8;
}
&.flip-step1 {
margin-bottom: $cardStep1MrgBtm;
}
&.flip-step2 {
margin-bottom: $cardStep2MrgBtm;
}
&.flip-step3 {
margin-bottom: $cardStep3MrgBtm;
}
&.req-active1 {
transition: margin $cardReqAnimStep1 cubic-bezier(.77,.03,.83,.67);
margin-bottom: $cardReqStep1MrgBtm;
}
&.req-active2 {
transition: margin $cardReqAnimStep2 cubic-bezier(.31,.14,.48,1.52);
margin-bottom: $cardReqStep2MrgBtm;
}
&.req-closing1 {
transition: margin $cardReqClosing1;
margin-bottom: $cardHeight + $cardMrgBtm;
}
&.req-closing2 {
transition: margin $cardReqClosing2;
margin-bottom: $cardMrgBtm;
}
&.hidden-hack {
.card__part-2 > .m--front{
display: none;
}
}
&.no-transition {
transition: all 0s 0s !important;
* {
transition: all 0s 0s !important;
}
}
&.theme-purple {
@include colorTheme($purple);
}
&.theme-green {
@include colorTheme($green);
}
&.theme-orange {
@include colorTheme($orange);
}
&.theme-red {
@include colorTheme($red);
}
&__part {
z-index: 1;
position: absolute;
left: 0;
width: 100%;
border-radius: $cardBorderRadius;
transform-origin: 50% 0;
transform-style: preserve-3d;
&__side {
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: inherit;
background: #fff;
backface-visibility: hidden;
transform-style: preserve-3d;
&.m--back {
transform: rotateX(180deg);
}
&.m--front {
background: #fff;
}
}
&-1 {
top: 0;
height: 100%;
transition: all $cardAnimStep1/2;
transform: translateZ(-3px);
.card.flip-step1 & {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
transform: translateZ(0);
}
.card.req-closing2 & {
border-radius: $cardBorderRadius;
}
}
&-2 {
z-index: 6;
top: 100%;
height: 100%;
transform: rotateX(179deg) translateZ(3px);
transition: transform $cardAnimStep1 ease-out, border-radius $cardAnimStep1/2;
> .m--back {
overflow: hidden;
cursor: pointer;
}
.card.flip-step1 & {
transform: translateZ(0);
border-radius: 0;
}
.card.req-active1 & {
transition: transform $cardReqAnimStep1;
transform: translate3d(0,-$cardStatsHeight,0);
}
.card.req-active2 & {
transition: transform $cardReqAnimStep2 cubic-bezier(.61,.14,.18,1.52);
transform: translate3d(0, $cardMapHeight - $cardStatsHeight,0);
}
.card.req-closing1 & {
transition: transform $cardReqClosing1;
transform: translate3d(0,0,0);
}
.card.req-closing2 & {
transition: transform, border-radius;
transition-duration: $cardReqClosing2;
transform: rotateX(179deg) translateZ(3px);
border-radius: $cardBorderRadius;
}
}
&-3 {
top: 100%;
height: $cardFromToHeight;
transform: rotateX(179deg) translateZ(-3px);
transition: transform $cardAnimStep2, border-radius 0s $cardAnimStep3;
> .m--back {
background: #F7EFF7;
}
.card.flip-step2 & {
transition: transform $cardAnimStep2, border-radius 0s 0s;
border-radius: 0;
transform: translateZ(0);
}
.card.req-active1 & {
transition: transform, height;
transition-duration: $cardReqAnimStep1;
transform: translate3d(0,-$cardFromToHeight,0);
height: 0;
}
.card.req-active2 & {
transition: transform, height;
transition-duration: $cardReqAnimStep2;
transform: translate3d(0,0,0);
height: 75px;
}
.card.req-closing1 & {
transition: transform $cardReqClosing1;
transform: rotateX(179deg) translateZ(-3px);
}
.card.req-closing2 & {
transition: border-radius $cardReqClosing1;
border-radius: $cardBorderRadius;
}
}
&-4 {
top: 100%;
height: $cardFromToHeight;
transform: rotateX(179deg) translateZ(0);
transition: transform $cardAnimStep3, border-radius 0s 0s, height $cardAnimStep3;
> .m--back {
background: #F7EFF7;
}
> .m--front {
padding: 10px 20px;
opacity: 0;
transition: opacity 0s $cardAnimStep3;
}
.card.flip-step2 & {
transition: transform $cardAnimStep3, border-radius 0s 0s, height $cardAnimStep3*0.66 $cardAnimStep3*0.33;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.card.flip-step3 & {
transition: transform $cardAnimStep2, border-radius 0s 0s, height $cardAnimStep2*0.66;
height: $cardLastPartHeight;
transform: translateZ(0);
> .m--front {
opacity: 1;
transition: opacity 0s 0s;
}
}
.card.req-closing1 & {
transition: border-radius $cardReqClosing1;
border-radius: 0;
}
.card.req-closing2 & {
transition: border-radius $cardReqClosing2;
border-radius: $cardBorderRadius;
}
}
&__inner {
overflow: hidden;
position: relative;
height: 100%;
border-radius: inherit;
}
}
&__text {
overflow: hidden;
position: absolute;
top: 0;
width: 50%;
height: 100%;
&:after {
content: "";
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 100%;
background: linear-gradient(90deg, rgba(255,255,255,0), #fff);
}
p {
width: 200%;
}
&--left {
left: 0;
}
&--right {
left: 50%;
}
&__heading {
@extend %smallHeading;
line-height: 1;
margin-bottom: 3px;
}
&__middle {
font-size: 18px;
line-height: 1;
font-weight: bold;
color: #4B4D52;
}
&__bottom {
font-size: 14px;
color: #555A5F;
}
}
&__face {
padding: 20px 20px 15px;
&:after {
content: "";
z-index: 5;
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 100%;
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255, 1) 60%, rgba(255,255,255,1) 100%);
}
&__colored-side {
z-index: -1;
position: fixed; // THE ONLY CASE when top left corner is not bugged in Chrome/FF (it's still bugged in FF, but looks much better)
left: 0;
top: 0;
width: 7px;
height: 100%;
border-top-left-radius: $cardBorderRadius;
border-bottom-left-radius: $cardBorderRadius;
transition: width 0.3s;
.card__face:hover & {
width: 80px;
}
}
&__price {
margin-top: -3px;
font-weight: normal;
font-size: 22px;
color: #555A5F;
transition: color 0.3s;
.card__face:hover & {
color: #fff;
}
}
&__divider {
position: absolute;
left: 80px;
top: 10px;
width: 1px;
height: calc(100% - 20px);
background: #ECECEC;
}
&__path {
position: absolute;
left: 105px;
top: 36px;
width: 2px;
height: 23px;
&:before,
&:after {
content: "";
position: absolute;
left: -3px;
width: 8px;
height: 8px;
border-radius: 50%;
border: 2px solid;
border-color: inherit;
}
&:before {
top: -11px;
}
&:after {
bottom: -9px;
}
}
&__from-to {
position: absolute;
left: 120px;
top: 20px;
width: 300px;
color: #555A5F;
font-size: 13px;
&:before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
background: #ECECEC;
}
p:first-child {
margin-bottom: 15px;
}
}
&__deliv-date {
position: absolute;
left: 20px;
top: 105px;
color: #9A9E9E;
text-transform: uppercase;
font-size: 12px;
transition: color 0.3s;
p {
color: #606568;
transition: color 0.3s;
}
.card__face:hover & {
color: rgba(255,255,255,0.8);
p {
color: #fff;
}
}
}
&__stats {
position: absolute;
top: 105px;
color: #B5B5B5;
text-transform: uppercase;
font-size: 12px;
p {
font-size: 15px;
color: #ADADAD;
font-weight: bold;
}
&--req {
left: 100px;
}
&--pledge {
left: 190px;
}
&--weight {
left: 270px;
p {
text-transform: lowercase;
}
}
}
}
&__header {
position: relative;
height: $cardHeaderHeight;
color: rgba(255,255,255,0.8);
&__close-btn {
z-index: 2;
position: absolute;
left: 12px;
top: 12px;
width: 16px;
height: 16px;
transition: transform 0.3s;
cursor: pointer;
&:hover {
transform: rotate(90deg);
}
&:before,
&:after {
content: "";
position: absolute;
left: -4px;
top: 7px;
width: 23px;
height: 2px;
background: #fff;
}
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
}
&__id {
position: absolute;
left: 0;
top: 0;
width: 100%;
line-height: $cardHeaderHeight;
text-align: center;
}
&__price {
position: absolute;
right: 10px;
top: 0;
line-height: $cardHeaderHeight;
}
}
&__stats {
position: relative;
height: $cardStatsHeight;
background-size: cover;
background-position: center center;
transition: opacity $cardReqAnimStep1;
&:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}
.card.req-active1 & {
opacity: 0;
}
.card.req-active2 & {
display: none;
}
&__item {
position: absolute;
bottom: 10px;
&--req {
z-index: 2;
left: 20px;
}
&--pledge {
z-index: 1;
left: 0;
width: 100%;
text-align: center;
}
&--weight {
z-index: 2;
right: 20px;
text-align: right;
}
}
&__type {
font-size: 12px;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
}
&__value {
font-size: 19px;
font-weight: bold;
color: #fff;
}
}
&__map {
display: none;
overflow: hidden;
z-index: -1;
position: absolute;
left: 0;
top: $cardHeaderHeight;
width: 100%;
height: $cardMapHeight - 150px;
opacity: 0;
.card.map-active & {
display: block;
}
.card.req-active2 & {
transition: height $cardReqAnimStep2*0.8;
height: $cardMapHeight + 50px;
z-index: 5;
opacity: 1;
}
.card.req-closing1 & {
transition: height $cardReqClosing1;
height: $cardStatsHeight;
}
.card.req-closing2 & {
transition: opacity $cardReqClosing2;
opacity: 0;
}
&__inner {
position: absolute;
left: -5%;
top: -5%;
width: 110%;
height: ($cardMapHeight + 50px) * 1.1;
transform: scale(1);
transition: transform $cardReqAnimStep2 cubic-bezier(.8,-1.4,.8,1.4);
.card.req-active2 & {
transform: scale(1.1) !important;
}
}
}
&__sender {
position: relative;
height: $cardSenderHeight;
padding: 10px 20px 0;
.card.req-active2 & {
height: $cardHeight;
}
&:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: #ECECEC;
transition: opacity $cardReqAnimStep2/2;
opacity: 0;
.card.req-active2 & {
opacity: 1;
}
}
&__heading {
@extend %smallHeading;
margin-bottom: 5px;
.card.req-active1 & {
transition: opacity, margin;
transition-duration: $cardReqAnimStep1*0.8;
opacity: 0;
margin-top: -9px;
}
.card.req-active2 & {
pointer-events: none;
}
}
&__img-cont {
overflow: hidden;
display: inline-block;
vertical-align: top;
width: 50px;
height: 50px;
margin-right: 5px;
border-radius: 8px;
&__inner {
height: 100%;
filter: grayscale(100%);
}
}
&__img {
width: 100%;
min-height: 100%;
}
&__name-and-rating {
overflow: hidden;
display: inline-block;
vertical-align: top;
max-width: 180px;
height: 55px;
margin-top: -5px;
margin-bottom: 20px;
}
&__name {
font-size: 18px;
color: #3B424A;
}
&__rating {
font-size: 14px;
.card.req-active1 & {
transition: opacity $cardReqAnimStep1*0.8;
opacity: 0;
}
.card.req-active2 & {
display: none;
}
&__star {
opacity: 0.3;
}
@for $i from 1 through 5 {
&-#{$i} {
@for $j from 1 through $i {
.card__sender__rating__star:nth-child(#{$j}) {
opacity: 1;
}
}
}
}
&__count {
font-size: 12px;
color: #8C9093;
}
}
&__address {
font-size: 12px;
color: #8C9093;
opacity: 0;
pointer-events: none;
.card.req-active2 & {
transition: opacity $cardReqAnimStep2;
opacity: 1;
pointer-events: auto;
}
}
}
&__receiver {
overflow: hidden;
position: relative;
width: 100%;
height: 0;
.card.req-active2 & {
transition: height $cardReqAnimStep2;
height: 65px;
}
&__inner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 65px;
}
}
&__path-big {
position: absolute;
right: 26px;
top: 55px;
width: 2px;
height: 57px;
opacity: 0;
.card.req-active2 & {
transition: opacity $cardReqAnimStep2/2;
opacity: 1;
}
&:before,
&:after {
content: "";
position: absolute;
left: -4px;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid;
border-color: inherit;
}
&:before {
top: -13px;
}
&:after {
bottom: -11px;
}
}
&__from-to {
position: relative;
height: $cardFromToHeight;
padding: 10px 20px 0;
.card.req-active1 & {
transition: opacity $cardReqAnimStep1*0.8;
opacity: 0;
}
.card.req-active2 & {
display: none;
}
&__inner {
position: relative;
height: 100%;
&:before {
content: "";
position: absolute;
left: 0;
top: -10px;
width: 100%;
height: 1px;
background: #ECECEC;
}
}
}
&__timings {
position: relative;
height: 100%;
padding: 10px 20px 0;
.card.req-active1 & {
transition: opacity $cardReqAnimStep1*0.8;
opacity: 0;
}
.card.req-active2 & {
display: none;
}
&__inner {
position: relative;
height: 100%;
}
}
&__timer {
display: none;
margin-top: 22px;
font-size: 30px;
color: #A4ADAD;
text-align: center;
.card.req-active2 & {
display: block;
}
}
&__request-btn {
position: relative;
width: 100%;
height: 40px;
background-color: #FFBD18;
text-transform: uppercase;
font-size: 18px;
color: #3F2F1F;
outline: none;
border: none;
border-radius: 8px;
cursor: pointer;
letter-spacing: 0; // you need to manually set value, because FireFox can't interpolate from normal to needed value with transition
transition: letter-spacing 0.3s;
&__text-1 {
transition: opacity $cardReqAnimStep1*0.8;
.card.req-active1 & {
opacity: 0;
}
.card.req-active2 & {
display: none;
}
}
&__text-2 {
z-index: -5;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
opacity: 0;
transition: opacity $cardReqAnimStep2;
.card.req-active2 & {
z-index: 1;
opacity: 1;
}
}
&:hover {
letter-spacing: 5px;
}
}
&__counter {
position: absolute;
left: 0;
top: 57px;
width: 100%;
font-size: 14px;
color: #A2A2A5;
text-align: center;
transition: opacity $cardReqAnimStep1*0.8;
.card.req-active1 & {
opacity: 0;
}
.card.req-active2 & {
display: none;
}
}
}
View Compiled
'use strict';
$(document).ready(function() {
var animating = false;
var step1 = 500;
var step2 = 500;
var step3 = 500;
var reqStep1 = 600;
var reqStep2 = 800;
var reqClosingStep1 = 500;
var reqClosingStep2 = 500;
var $scrollCont = $(".phone__scroll-cont");
function initMap($card) {
// my first experience with google maps api, so I have no idea what I'm doing
var latLngFrom = {lat: 40.7878581, lng: -73.9671309};
var latLngTo = {lat: 40.746433, lng: -73.9503613};
var latLngCenter = {
lat: (latLngFrom.lat + latLngTo.lat)/2,
lng: (latLngFrom.lng + latLngTo.lng)/2
};
var themeColor = $card.data("color");
var map = new google.maps.Map($(".card__map__inner", $card)[0], {
zoom: 12,
center: latLngCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
});
map.set('styles', [
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{ "hue": "#00ffdd" },
{ "gamma": 1 },
{ "lightness": 100 }
]
},{
"featureType": "road",
"stylers": [
{ "lightness": 60 },
{ "hue": "#006eff" }
]
}
]);
var pinImage = new google.maps.MarkerImage(
"https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + themeColor.slice(1),
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34)
);
var marker = new google.maps.Marker({
position: latLngFrom,
map: map,
title: 'From',
icon: pinImage
});
var marker = new google.maps.Marker({
position: latLngTo,
map: map,
title: 'To',
icon: pinImage
});
var polylineOpts = new google.maps.Polyline({
strokeColor: themeColor,
strokeWeight: 3
});
var rendererOptions = {map: map, polylineOptions: polylineOpts, suppressMarkers: true};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var request = {
origin: latLngFrom,
destination: latLngTo,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
var directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
else {
console.log("wtf")
}
});
};
initMap($(".card"));
$(document).on("click", ".card:not(.active)", function() {
if (animating) return;
animating = true;
var $card = $(this);
var cardTop = $card.position().top;
var scrollTopVal = cardTop - 30;
$card.addClass("flip-step1 active");
$scrollCont.animate({scrollTop: scrollTopVal}, step1);
setTimeout(function() {
$scrollCont.animate({scrollTop: scrollTopVal}, step2);
$card.addClass("flip-step2");
setTimeout(function() {
$scrollCont.animate({scrollTop: scrollTopVal}, step3);
$card.addClass("flip-step3");
setTimeout(function() {
animating = false;
}, step3);
}, step2*0.5);
}, step1*0.65);
});
$(document).on("click", ".card:not(.req-active1) .card__header__close-btn", function() {
if (animating) return;
animating = true;
var $card = $(this).parents(".card");
$card.removeClass("flip-step3 active");
setTimeout(function() {
$card.removeClass("flip-step2");
setTimeout(function() {
$card.removeClass("flip-step1");
setTimeout(function() {
animating = false;
}, step1);
}, step2*0.65);
}, step3/2);
});
$(document).on("click", ".card:not(.req-active1) .card__request-btn", function(e) {
if (animating) return;
animating = true;
var $card = $(this).parents(".card");
var cardTop = $card.position().top;
var scrollTopVal = cardTop - 30;
$card.addClass("req-active1 map-active");
initMap($card);
setTimeout(function() {
$card.addClass("req-active2");
$scrollCont.animate({scrollTop: scrollTopVal}, reqStep2);
setTimeout(function() {
animating = false;
}, reqStep2);
}, reqStep1);
});
$(document).on("click",
".card.req-active1 .card__header__close-btn, .card.req-active1 .card__request-btn",
function() {
if (animating) return;
animating = true;
var $card = $(this).parents(".card");
$card.addClass("req-closing1");
setTimeout(function() {
$card.addClass("req-closing2");
setTimeout(function() {
$card.addClass("no-transition hidden-hack")
$card.css("top");
$card.removeClass("req-closing2 req-closing1 req-active2 req-active1 map-active flip-step3 flip-step2 flip-step1 active");
$card.css("top");
$card.removeClass("no-transition hidden-hack");
animating = false;
}, reqClosingStep2);
}, reqClosingStep1);
});
});
// angular used only for templating, I was too tired to find more lightweight solution
var delivcardDefaultData = [
{id: '2618-3157', price: 25, requests: 5, pledge: 150, weight: 50,
sender: 'Edward Norton', senderImg: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/deliv-sender.jpg',
themeColor: 'purple', themeColorHex: '#BA68C8',
bgImgUrl: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/deliv-1.jpg', rating: 5, ratingCount: 26,
fromStreet: 'W 90th St', fromCity: 'New York, NY 10025',
toStreet: '46th Ave', toCity: 'Woodside, NY 11101',
delivTime: '06:30 pm', delivDate: 'May 16, 2015', delivDateNoun: 'Today',
reqDl: '24 minutes'},
{id: '2618-3156', price: 37, requests: 7, pledge: 222, weight: 66,
sender: 'Edward Norton', senderImg: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/deliv-sender.jpg',
themeColor: 'green', themeColorHex: '#52A43A',
bgImgUrl: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/deliv-2.jpg', rating: 4, ratingCount: 21,
fromStreet: 'W 85th St', fromCity: 'New York, NY 1025',
toStreet: 'E 30th Ave', toCity: 'New York, NY 1001',
delivTime: '07:30 am', delivDate: 'May 16, 2015', delivDateNoun: 'Today',
reqDl: '33 minutes'},
{id: '2618-3155', price: 12, requests: 3, pledge: 80, weight: 20,
sender: 'Edward Norton', senderImg: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/deliv-sender.jpg',
themeColor: 'orange', themeColorHex: '#F7AA17',
bgImgUrl: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/deliv-3.jpg', rating: 5, ratingCount: 15,
fromStreet: 'W 79th St', fromCity: 'New York, NY 1024',
toStreet: 'W 139th Ave', toCity: 'New York, NY 1030',
delivTime: '09:22 pm', delivDate: 'May 16, 2015', delivDateNoun: 'Today',
reqDl: '15 minutes'},
{id: '2618-3154', price: 80, requests: 25, pledge: 550, weight: 250,
sender: 'Edward Norton', senderImg: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/deliv-sender.jpg',
themeColor: 'red', themeColorHex: '#EF5350',
bgImgUrl: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/deliv-4.jpg', rating: 5, ratingCount: 66,
fromStreet: 'W 90th St', fromCity: 'New York, NY 125',
toStreet: '46th Ave', toCity: 'Woodside, NY 11',
delivTime: '06:30 pm', delivDate: 'May 16, 2015', delivDateNoun: 'Today',
reqDl: '24 minutes'},
{id: '2618-3153', price: 49, requests: 17, pledge: 299, weight: 149,
sender: 'Edward Norton', senderImg: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/deliv-sender.jpg',
themeColor: 'purple', themeColorHex: '#BA68C8',
bgImgUrl: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/deliv-5.jpg', rating: 5, ratingCount: 26,
fromStreet: 'W 90th St', fromCity: 'New York, NY 1025',
toStreet: '46th Ave', toCity: 'Woodside, NY 11101',
delivTime: '06:30 pm', delivDate: 'May 16, 2015', delivDateNoun: 'Today',
reqDl: '24 minutes'},
{id: '2618-3152', price: 99, requests: 33, pledge: 611, weight: 432,
sender: 'Edward Norton', senderImg: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/deliv-sender.jpg',
themeColor: 'green', themeColorHex: '#52A43A',
bgImgUrl: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/deliv-6.jpg', rating: 2, ratingCount: 26,
fromStreet: 'W 90th St', fromCity: 'New York, NY 1025',
toStreet: '46th Ave', toCity: 'Woodside, NY 11101',
delivTime: '06:30 pm', delivDate: 'May 16, 2015', delivDateNoun: 'Today',
reqDl: '24 minutes'},
{id: '2618-3151', price: 61, requests: 15, pledge: 318, weight: 130,
sender: 'Edward Norton', senderImg: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/deliv-sender.jpg',
themeColor: 'orange', themeColorHex: '#F7AA17',
bgImgUrl: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/deliv-7.jpg', rating: 3, ratingCount: 26,
fromStreet: 'W 90th St', fromCity: 'New York, NY 10025',
toStreet: '46th Ave', toCity: 'Woodside, NY 11101',
delivTime: '06:30 pm', delivDate: 'May 16, 2015', delivDateNoun: 'Today',
reqDl: '24 minutes'},
{id: '2618-3150', price: 13, requests: 9, pledge: 231, weight: 55,
sender: 'Edward Norton', senderImg: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/deliv-sender.jpg',
themeColor: 'red', themeColorHex: '#EF5350',
bgImgUrl: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/deliv-8.jpg', rating: 4, ratingCount: 26,
fromStreet: 'W 90th St', fromCity: 'New York, NY 10025',
toStreet: '46th Ave', toCity: 'Woodside, NY 11101',
delivTime: '06:30 pm', delivDate: 'May 16, 2015', delivDateNoun: 'Today',
reqDl: '24 minutes'}
];
var app = angular.module("delivcard", []);
app.controller("DelivCtrl", ['$scope', function($scope) {
$scope.cards = delivcardDefaultData;
}]);