Cyrra Calculator

by paulftw

HTML

<div ng-app='calcapp' class=calc ng-controller="CalcTroller">
    
    <div ng-if="page==1">  
    
        <h3>How much does managing insurance cost you?</h3>
    
        <p>Your project managers already spend considerable amount of time checking insurance of the subcontractors. Since there's no dedicated line in the P&L, <em>do you know how much it is actually costing you?</em></p>
        
        <h4>See the industry average numbers for</h4>
        <div class=buttons>
            <div ng-click="choose('prov')">
                <h6>Subcontractor / Provider</h6>
                <p>Subcontractor has to supply each of their clients with up-to-date insurance details</p>
            </div>

            <div ng-click="choose('sm')">
                <h6>Coffee shop</h6>
                <p>A company with less than 50 employees and projects of up to $5 mil</p>
            </div>

            <div ng-click="choose('med')">
                <h6>A pub in Bondi</h6>
                <p>Medium civil engineering designer - less than 200 employees and turnover under $100 mil per year</p>
            </div>

            <div ng-click="choose('lg')">
                <h6>Fastfood Chain</h6>
                <p>Global company running dozens of multimillion-dollar projects</p>
            </div>


        </div>
    </div>
    <div ng-if="page==2">  
    
        <h3>On average, a {{comp}}-sized company spends on managing insurance:</h3>
        
        <div class=grid>
            <div>
                <p class=help>
                    Number of contractors
                </p>
                <input type=text ng-model="manage" size=3 />
                <p>(contracts per year)</p>
            </div>
            <div><h2>&times;</h2></div>
            <div>
                <p class=help>
                    Project manager's hourly rate
                </p>
                <input type=text ng-model="hourly" size=3 />
                <p>($AUD per hour)</p>
            </div>
     ...

CSS

body {
    background: url(http://subtlepatterns.com/patterns/texturetastic_gray.png);
}

.calc {
    margin:100px auto;
    width: 70%;
    height: 380px;
    background-color: #fff;
    padding: 10px;
}

.calc .buttons > div {
    float: left;
    height: 190px;
    width: 20%;
    margin: 0 2.5%;
    background-color: #eee;
    cursor: pointer;
}

.calc .buttons > div > * {
    padding: 0 4px;
}

.calc .buttons p {
    font-size: 12px;
}

.calc .grid {
    margin: auto;
    height: 170px;
}

.calc .grid > div {
    float: left;
    max-width: 15%;
    font-size: 12px;
    height: 100px;
    margin: 0 10px
}

.calc .grid > div input {
    font-size: 24px;
    text-align: center;
}
.calc .grid .help {
    height: 45px;
}

.calc .grid h2 {
    margin-top: 72px;
}

button {
    float: right;
}

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
@import url(http://fonts.googleapis.com/css?family=Oxygen);

body {
    font-family: 'Source Sans Pro', sans-serif;
}
h1,h2,h3 {
    font-family: 'Oxygen', sans-serif;
}

JavaScript

console.log('made ctl');
angular.module('calcapp', []).controller('CalcTroller', function($scope) {
    $scope.page = 1;
    
    $scope.comps = {
        prov: {
            hourly: 100,
            manage: 2,
            cost: 0,
        },
        sm: {
            hourly: 100,
            manage: 10,
            cost: 300,
        },
        med: {
            hourly: 150,
            manage: 40,
            cost: 1200,
        },
        lg: {
            hourly: 200,
            manage: 100,
            cost: 6000,
        },
    };
    
    $scope.choose = function(s) {
        $scope.comp = s;
        $scope.page = 2;
        $scope.manage = $scope.comps[s].manage;
        $scope.hourly = $scope.comps[s].hourly;
        $scope.cost = $scope.comps[s].cost;
    };
});