Skip to content

Instantly share code, notes, and snippets.

@evanleck

evanleck/business-profile.html

Last active December 23, 2015 16:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save evanleck/6666059 to your computer and use it in GitHub Desktop.
Save evanleck/6666059 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
business-profile.html
<!DOCTYPE html>
<html>
<head>
<title>Busines Profile</title>
<link rel='stylesheet' type='text/css' href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css'>
</head>
<body>
<div class='container' ng-app='business-profile' ng-controller='main'>
<div class='row'>
<div class='col-sm-1'></div>
<div class='col-sm-10'>
<div class='page-header'>
<h1>Business Profile</h1>
</div>
<div class='row'>
<div class='col-sm-8'>
<div class='panel panel-default'>
<div class='panel-heading'>
<h4>About {{ business.name || 'Your Company' }}</h4>
</div>
<form class='panel-body' action='/' accept-charset='utf-8'>
<fieldset class='form-group'>
<label for='business.name'>Company:</label>
<input id='business.name' type='text' ng-model='business.name' class='form-control' required>
</fieldset>
<fieldset class='form-group'>
<label for='business.ein'>EIN:</label> <small class='text-muted'>(optional)</small>
<input id='business.ein' type='number' ng-model='business.ein' class='form-control'>
</fieldset>
<fieldset class='form-group'>
<label for='business.owners'>
<ng-pluralize count='business.owners.length' when="{ 'one': 'Owner', 'other': 'Owners' }"></ng-pluralize>:
</label>
<ul class='list-unstyled'>
<li ng-repeat='owner in business.owners'>
{{ owner }}
</li>
</ul>
</fieldset>
<fieldset class='form-group'>
<label for='business.revenue'>Annual Revenue:</label><br>
{{ business.revenue | currency }}
</fieldset>
</form>
</div>
<p class='text-muted'>An exercise in <a href='http://angularjs.org/'>Angular.js</a></p>
</div>
<div class='col-sm-4'>
<div class='panel panel-default'>
<div class='panel-heading'>
<h4>Setup Process</h4>
</div>
<ul class='list-group'>
<li ng-repeat='step in steps' ng-class="{ false: 'text-danger', true: 'text-success' }[step.complete]" class='list-group-item'>
<span ng-class="{ false: 'glyphicon-ban-circle', true: 'glyphicon-ok' }[step.complete]" class='glyphicon'></span> {{ step.name }}
</li>
</ul>
</div>
</div>
</div>
</div>
<div class='col-sm-1'></div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js'></script>
<script>
angular
.module('business-profile', [])
.controller('main', function($scope) {
$scope.business = {
name: 'Doh! Nuts Bakery',
revenue: 250000,
owners: [
'Homer Simpson',
'Grandpa Simpson'
]
};
$scope.steps = [
{ complete: true, name: 'Basic Company Information' },
{ complete: false, name: 'About the Owners' },
{ complete: true, name: 'Goals for this Loan' },
{ complete: false, name: 'Business Financials' }
];
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment