<!DOCTYPE html>
<html lang="en" ng-app="BlankApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="style.css?fafd" rel="stylesheet">
</head>
<body ng-cloak ng-controller="MainCtrl">
<md-toolbar>
<h2 class="md-toolbar-tools"><span>Payment</span></h2>
</md-toolbar>
<md-content class="md-padding">
<md-input-container class="md-block">
<label>Name</label>
<md-icon aria-label="person">person</md-icon>
<input ng-model="user.name" type="text" />
</md-input-container>
<div layout="row" layout-xs="column">
<div flex="30" flex-xs="100">
<md-input-container class="md-block">
<label>Card Number</label>
<md-icon aria-label="credit_card">credit_card</md-icon>
<input ng-model="user.name" type="text" />
</md-input-container>
</div>
<div flex="30" flex-xs="100">
<md-input-container class="md-block">
<label>CVC/CVV</label>
<md-icon aria-label="lock">lock</md-icon>
<input ng-model="user.name" type="number" />
</md-input-container>
</div>
<div flex="40" flex-xs="100">
<div layout="row">
<div flex="50">
<md-input-container class="md-block">
<label>Exp. Month</label>
<md-icon aria-label="date_range">date_range</md-icon>
<input ng-model="user.name" type="number" />
</md-input-container>
</div>
<div flex="50">
<md-input-container class="md-block">
<label>Exp. Year</label>
<md-icon aria-label="date_range">date_range</md-icon>
<input ng-model="user.name" type="number" />
</md-input-container>
</div>
</div>
</div>
</div>
<md-button class="md-raised md-primary">Pay</md-button>
</md-content>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<script src="https://kamilkp.github.io/angular-sortable-view/src/angular-sortable-view.js"></script>
<script src="app.js"></script>
</body>
</html>
# Angular Material Payment UI
[jQuery2DotNet](http://www.jquery2dotnet.com/)
var app = angular.module('BlankApp', ['ngMaterial', 'ngMessages']);
app.controller('MainCtrl', function($scope, $timeout) {
$scope.loginModel = {
username: '',
password: ''
};
$scope.people = [{
name: 'Janet Perkins',
img: 'https://randomuser.me/api/portraits/men/1.jpg',
newMessage: true
}, {
name: 'Mary Johnson',
img: 'https://randomuser.me/api/portraits/men/2.jpg',
newMessage: false
}, {
name: 'Peter Carlsson',
img: 'https://randomuser.me/api/portraits/men/3.jpg',
newMessage: false
}];
$scope.openMenu = function($mdOpenMenu, ev) {
$mdOpenMenu(ev);
};
$scope.notificationsEnabled = true;
$scope.toggleNotifications = function() {
$scope.notificationsEnabled = !$scope.notificationsEnabled;
};
});