IOS7 like login screen

by alexsuch

HTML

<script src="http://www.quasimondo.com/BoxBlurForCanvas/FastBlur.js"></script>
<div ng-controller="srcManager">
    <h2>Click on theme</h2>
    <div class="loginScreen">
        <blurred-image src="{{ srcFile }}" width="640" height="480" css-class="blurredImg"></blurred-image>
        <h1>Log in</h1>
        <form ng-controller="loginCtrl" ng-submit="doLogin()">
            <div class="clearfix">
                <label>User name:</label><input type="text" />
            </div>
            <div class="clearfix">
                <label>Password:</label><input type="password" />
            </div>
            <div class="clearfix">
                <button type="submit">Submit</button>
            </div>
        </form>
    </div>
</div>

CSS

@font-face{font-family:"HelveticaNeueW02-UltLt";src:url("http://fast.fonts.net/dv2/2/787ee748-9cce-45a0-910b-6b5c6e87e327.eot?d44f19a684109620e484147fa790e81859e92aaaea3d337f84586d5df8888fe5455f55e0f83ed0be044ddfaa95e824a4b1318d5b552aaa24a44025e9&projectid=74f39a9d-a5dc-405f-9690-1c1fd4590ae4");src:url("http://fast.fonts.net/dv2/2/787ee748-9cce-45a0-910b-6b5c6e87e327.eot?d44f19a684109620e484147fa790e81859e92aaaea3d337f84586d5df8888fe5455f55e0f83ed0be044ddfaa95e824a4b1318d5b552aaa24a44025e9&projectid=74f39a9d-a5dc-405f-9690-1c1fd4590ae4#iefix") format("embedded-opentype"),url("http://fast.fonts.net/dv2/3/84558c76-9f1b-44d2-ac62-d7937f43809b.woff?d44f19a684109620e484147fa790e81859e92aaaea3d337f84586d5df8888fe5455f55e0f83ed0be044ddfaa95e824a4b1318d5b552aaa24a44025e9&projectid=74f39a9d-a5dc-405f-9690-1c1fd4590ae4") format("woff"),url("http://fast.fonts.net/dv2/1/411a88fe-e483-4fb8-af42-8369ebb1138d.ttf?d44f19a684109620e484147fa790e81859e92aaaea3d337f84586d5df8888fe5455f55e0f83ed0be044ddfaa95e824a4b1318d5b552aaa24a44025e9&projectid=74f39a9d-a5dc-405f-9690-1c1fd4590ae4") format("truetype"),url("http://fast.fonts.net/dv2/11/6dfe33a4-0ad5-4c85-8e01-f48ecfe3c167.svg?d44f19a684109620e484147fa790e81859e92aaaea3d337f84586d5df8888fe5455f55e0f83ed0be044ddfaa95e824a4b1318d5b552aaa24a44025e9&projectid=74f39a9d-a5dc-405f-9690-1c1fd4590ae4#6dfe33a4-0ad5-4c85-8e01-f48ecfe3c167") format("svg");}


.bold {
    font-weight:bolder;
}

.loginScreen {
    position: relative;
    width: 640px;
    height: 480px:
}

.loginScreen h1 {
    position: absolute;
    text-align: center;
    font-family:"HelveticaNeueW02-UltLt";
    font-weight: bolder;
    top: 90px;
    width: 640px;
    color: #fff
}

.loginScreen form {
    position: absolute;
    border: 2px solid black;
    background: rgba(255,255,255,0.8);
    -moz-border-radius: 15px;
    border-radius: 15px;
    padding: 20px 15px 8px 15px;
    width: 300px;
    top:186px;
    left: 170px;
   ...

JavaScript

var ios7login = angular.module('ios7login', []);

ios7login.controller('srcManager', ['$scope', function($scope){
    $scope.srcFile = 'https://lh5.googleusercontent.com/-DZuQUmQwd3M/UcnwHwPdc3I/AAAAAAAAUiE/WiJMLAihQaU/w638-h425-no/IMG_3376.jpg';
    $scope.setSrc = function(src){
        $scope.srcFile = src;
    };
}]);

ios7login.controller('loginCtrl', ['$scope', function($scope){
    $scope.doLogin = function(){
        alert('login success!');
    };
}]);

ios7login.directive('blurredImage', function(){
    return {
        restrict: 'E',
        replace:true,
        scope: {
            src:'@',
            width:'=',
            height:'=',
            cssClass:'='
        },
        link: function(scope, element, attrs){
            scope.itemId = "canvas_" + parseInt(Math.random()*1000000000)
            var fillCanvas = function(){
                if(!scope.src)
                    return;
                
                var context = element[0].getContext("2d"); // get the 2d context object
                var img     = new Image() //create a new image
               
                img.onload = function(){
                    context.drawImage(img, 0, 0, scope.width, scope.height); // draw the image at the given location
                    boxBlurCanvasRGBA( scope.itemId, 0, 0, scope.width, scope.height, 2, 20);
                };
                
                img.crossOrigin = '';
                img.src = scope.src
                
            }

            scope.$watch('src', function(){
                fillCanvas();
            });
        },
        template: '<canvas id="{{ itemId }}" class="{{ cssClass }}" style="width:{{width}}px; height:{{height}}px"></canvas>'
    };
});