From f58eed4ff744969bc10af8ef1c4bed42c1e31eb0 Mon Sep 17 00:00:00 2001
From: Dennis Kao <ulysseskao@gmail.com>
Date: Tue, 26 Apr 2016 01:57:12 +0800
Subject: [PATCH] ui-router templates
---
grails-app/assets/templates/xdashangular/UI/sliders.html | 110
grails-app/views/login.gsp | 131
grails-app/assets/javascripts/xdashangular/xdashangular.js | 2
grails-app/assets/javascripts/xdashangular/index/controllers/mainController.js | 12
grails-app/assets/templates/xdashangular/index/calendar.html | 99
grails-app/assets/templates/xdashangular/tables/simple.html | 340 ++
grails-app/assets/templates/xdashangular/UI/general.html | 919 +++++
grails-app/assets/templates/xdashangular/index/dashboard2.html | 830 ++++
grails-app/assets/javascripts/rdash/app.js | 2
grails-app/assets/templates/xdashangular/tables/data.html | 909 +++++
grails-app/assets/templates/xdashangular/charts/flot.html | 143
grails-app/assets/javascripts/xdashangular/index/xdashangular.index.js | 122
grails-app/assets/templates/xdashangular/UI/buttons.html | 1002 +++++
grails-app/assets/templates/xdashangular/index/dashboard.gsp | 543 +++
grails-app/views/index.gsp | 615 ---
grails-app/assets/templates/xdashangular/UI/timeline.html | 197 +
grails-app/assets/templates/xdashangular/index/dashboard.html | 543 +++
src/test/javascripts/xdashangular/index/services/uiRouterConsoleLoggerServiceSpec.js | 20
grails-app/assets/templates/xdashangular/UI/icons.html | 2276 +++++++++++++
grails-app/assets/templates/xdashangular/charts/chartjs.html | 112
grails-app/conf/application.groovy | 2
grails-app/assets/templates/xdashangular/UI/modals.html | 180 +
grails-app/assets/templates/xdashangular/index/widgets.html | 1079 ++++++
23 files changed, 9,424 insertions(+), 764 deletions(-)
diff --git a/grails-app/assets/javascripts/rdash/app.js b/grails-app/assets/javascripts/rdash/app.js
index 2f07107..cd82676 100644
--- a/grails-app/assets/javascripts/rdash/app.js
+++ b/grails-app/assets/javascripts/rdash/app.js
@@ -1,7 +1,7 @@
//= wrapped
//= require /jquery/jquery
//= require /angular/angular
-//= require /bootstrap/bootstrap
+// require /bootstrap/bootstrap
//= require /angular/ui-bootstrap-tpls
//= require /angular/angular-ui-router
//= require /angular/angular-cookies
diff --git a/grails-app/assets/javascripts/xdashangular/index/controllers/mainController.js b/grails-app/assets/javascripts/xdashangular/index/controllers/mainController.js
index 7f7be80..2331fdd 100644
--- a/grails-app/assets/javascripts/xdashangular/index/controllers/mainController.js
+++ b/grails-app/assets/javascripts/xdashangular/index/controllers/mainController.js
@@ -4,7 +4,15 @@
.module("xdashangular.index")
.controller("MainController", MainController);
-function MainController($scope, contextPath) {
+function MainController($scope, contextPath, $rootScope) {
var vm = this;
- console.log(contextPath)
+
+ console.log(contextPath);
+
+ $rootScope.$on('$stateNotFound',
+ function(event, unfoundState, fromState, fromParams){
+ console.log(unfoundState.to); // "lazy.state"
+ console.log(unfoundState.toParams); // {a:1, b:2}
+ console.log(unfoundState.options); // {inherit:false} + default options
+ });
}
diff --git a/grails-app/assets/javascripts/xdashangular/index/xdashangular.index.js b/grails-app/assets/javascripts/xdashangular/index/xdashangular.index.js
index 28da9fa..67ebe2e 100644
--- a/grails-app/assets/javascripts/xdashangular/index/xdashangular.index.js
+++ b/grails-app/assets/javascripts/xdashangular/index/xdashangular.index.js
@@ -1,67 +1,99 @@
//= wrapped
-//= require_self
+// require /jquery/jquery
+// require /angular/angular
+// require /angular/ui-bootstrap-tpls
//= require /angular/angular-ui-router
+//= require /angular/angular-cookies
//= require /angular/loading-bar
-//= require /ocLazyLoad/ocLazyLoad
+// require /ocLazyLoad/ocLazyLoad
+//= require_self
//= require_tree services
//= require_tree controllers
//= require_tree directives
// require_tree templates
-//= require /angular/ui-bootstrap-tpls
// require ${grails.util.Environment.currentEnvironment == grails.util.Environment.DEVELOPMENT ? 'ember.debug.js' : 'ember.prod.js'}
angular.module('xdashangular.index', [
- 'oc.lazyLoad',
+ // 'oc.lazyLoad',
'ui.router',
'ui.bootstrap',
'ui.bootstrap.dropdown',
'ui.bootstrap.collapse',
+ 'ngCookies',
'angular-loading-bar',
])
- .config(['$stateProvider', '$urlRouterProvider', '$ocLazyLoadProvider', function ($stateProvider, $urlRouterProvider, $ocLazyLoadProvider) {
+ //.config(['$stateProvider', '$urlRouterProvider', '$ocLazyLoadProvider', function ($stateProvider, $urlRouterProvider, $ocLazyLoadProvider) {
+ .config(['$stateProvider', '$urlRouterProvider',
+ function ($stateProvider, $urlRouterProvider) {
- /*
- $ocLazyLoadProvider.config({
- debug: true,
- events: true,
- });
- */
+ /*
+ $ocLazyLoadProvider.config({
+ debug: true,
+ events: true,
+ });
+ */
- $urlRouterProvider.otherwise('/dashboard/home');
+ $urlRouterProvider.otherwise('/');
- $stateProvider
- .state('dashboard', {
- url: '/dashboard',
- templateUrl: '',
- // assets/xdashangular/dashboard/main.html
- })
- .state('dashboard.home', {
- url:'/home',
- controller: 'MainController',
- templateUrl:'',
- /*
- resolve: {
- loadMyFiles:function($ocLazyLoad) {
- return $ocLazyLoad.load({
- name:'sbAdminApp',
- files:[
- 'assets/xsbadmin/controllers/main.js',
- 'assets/xsbadmin/directives/timeline/timeline.js',
- 'assets/xsbadmin/directives/notifications/notifications.js',
- 'assets/xsbadmin/directives/chat/chat.js',
- 'assets/xsbadmin/directives/dashboard/stats/stats.js'
- ]
- })
- }
- }
- */
- })
- .state('dashboard.blank',{
- templateUrl:'assets/views/pages/blank.html',
- url:'/blank'
- })
-
- }
+ // Application routes
+ $stateProvider
+ .state('index', {
+ url: '/',
+ templateUrl: 'assets/xdashangular/index/dashboard.gsp'
+ })
+ .state('index2', {
+ url: '/index2',
+ templateUrl: 'assets/xdashangular/index/dashboard2.html'
+ })
+ .state('widgets', {
+ url: '/widgets',
+ templateUrl: 'assets/xdashangular/index/widgets.html'
+ })
+ .state('calendar', {
+ url: '/calendar',
+ templateUrl: 'assets/xdashangular/index/calendar.html'
+ })
+ .state('charts-chartjs', {
+ url: '/charts-chartjs',
+ templateUrl: 'assets/xdashangular/charts/chartjs.html'
+ })
+ .state('charts-flot', {
+ url: '/charts-flot',
+ templateUrl: 'assets/xdashangular/charts/flot.html'
+ })
+ .state('tables-data', {
+ url: '/tables-data',
+ templateUrl: 'assets/xdashangular/tables/data.html'
+ })
+ .state('tables-simple', {
+ url: '/tables-simple',
+ templateUrl: 'assets/xdashangular/tables/simple.html'
+ })
+ .state('UI-buttons', {
+ url: '/UI-buttons',
+ templateUrl: 'assets/xdashangular/UI/buttons.html'
+ })
+ .state('UI-general', {
+ url: '/UI-general',
+ templateUrl: 'assets/xdashangular/UI/general.html'
+ })
+ .state('UI-icons', {
+ url: '/UI-icons',
+ templateUrl: 'assets/xdashangular/UI/icons.html'
+ })
+ .state('UI-modals', {
+ url: '/UI-modals',
+ templateUrl: 'assets/xdashangular/UI/modals.html'
+ })
+ .state('UI-sliders', {
+ url: '/UI-sliders',
+ templateUrl: 'assets/xdashangular/UI/sliders.html'
+ })
+ .state('UI-timeline', {
+ url: '/UI-timeline',
+ templateUrl: 'assets/xdashangular/UI/timeline.html'
+ });
+ }
])
diff --git a/grails-app/assets/javascripts/xdashangular/xdashangular.js b/grails-app/assets/javascripts/xdashangular/xdashangular.js
index 2636bf3..559b804 100644
--- a/grails-app/assets/javascripts/xdashangular/xdashangular.js
+++ b/grails-app/assets/javascripts/xdashangular/xdashangular.js
@@ -20,7 +20,7 @@
//= require /fastclick/fastclick
//= require /angular/angular-toggle-switch
//= require /angular/angular-animate
-//= require /angular/angular-cookies
+// require /angular/angular-cookies
// require /angular/angular-resource
// require /angular/angular-sanitize
//= require /angular/angular-touch
diff --git a/grails-app/assets/templates/xdashangular/UI/buttons.html b/grails-app/assets/templates/xdashangular/UI/buttons.html
index de155ea..55ae139 100644
--- a/grails-app/assets/templates/xdashangular/UI/buttons.html
+++ b/grails-app/assets/templates/xdashangular/UI/buttons.html
@@ -1,10 +1,994 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <title>Title</title>
-</head>
-<body>
+<!-- Content Header (Page header) -->
+<section class="content-header">
+ <h1>
+ Buttons
+ <small>Control panel</small>
+ </h1>
+ <ol class="breadcrumb">
+ <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
+ <li><a href="#">UI</a></li>
+ <li class="active">Buttons</li>
+ </ol>
+</section>
-</body>
-</html>
\ No newline at end of file
+<!-- Main content -->
+<section class="content">
+
+ <div class="row">
+ <div class="col-md-12">
+ <div class="box box-primary">
+ <div class="box-header">
+ <i class="fa fa-edit"></i>
+
+ <h3 class="box-title">Buttons</h3>
+ </div>
+ <div class="box-body pad table-responsive">
+ <p>Various types of buttons. Using the base class <code>.btn</code></p>
+ <table class="table table-bordered text-center">
+ <tr>
+ <th>Normal</th>
+ <th>Large <code>.btn-lg</code></th>
+ <th>Small <code>.btn-sm</code></th>
+ <th>X-Small <code>.btn-xs</code></th>
+ <th>Flat <code>.btn-flat</code></th>
+ <th>Disabled <code>.disabled</code></th>
+ </tr>
+ <tr>
+ <td>
+ <button type="button" class="btn btn-block btn-default">Default</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-default btn-lg">Default</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-default btn-sm">Default</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-default btn-xs">Default</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-default btn-flat">Default</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-default disabled">Default</button>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <button type="button" class="btn btn-block btn-primary">Primary</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-primary btn-lg">Primary</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-primary btn-sm">Primary</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-primary btn-xs">Primary</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-primary btn-flat">Primary</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-primary disabled">Primary</button>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <button type="button" class="btn btn-block btn-success">Success</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-success btn-lg">Success</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-success btn-sm">Success</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-success btn-xs">Success</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-success btn-flat">Success</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-success disabled">Success</button>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <button type="button" class="btn btn-block btn-info">Info</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-info btn-lg">Info</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-info btn-sm">Info</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-info btn-xs">Info</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-info btn-flat">Info</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-info disabled">Info</button>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <button type="button" class="btn btn-block btn-danger">Danger</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-danger btn-lg">Danger</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-danger btn-sm">Danger</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-danger btn-xs">Danger</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-danger btn-flat">Danger</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-danger disabled">Danger</button>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <button type="button" class="btn btn-block btn-warning">Warning</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-warning btn-lg">Warning</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-warning btn-sm">Warning</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-warning btn-xs">Warning</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-warning btn-flat">Warning</button>
+ </td>
+ <td>
+ <button type="button" class="btn btn-block btn-warning disabled">Warning</button>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <!-- /.box -->
+ </div>
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- ./row -->
+ <div class="row">
+ <div class="col-md-6">
+ <!-- Block buttons -->
+ <div class="box">
+ <div class="box-header">
+ <h3 class="box-title">Block Buttons</h3>
+ </div>
+ <div class="box-body">
+ <button type="button" class="btn btn-default btn-block">.btn-block</button>
+ <button type="button" class="btn btn-default btn-block btn-flat">.btn-block .btn-flat</button>
+ <button type="button" class="btn btn-default btn-block btn-sm">.btn-block .btn-sm</button>
+ </div>
+ </div>
+ <!-- /.box -->
+
+ <!-- Horizontal grouping -->
+ <div class="box">
+ <div class="box-header">
+ <h3 class="box-title">Horizontal Button Group</h3>
+ </div>
+ <div class="box-body table-responsive pad">
+ <p>
+ Horizontal button groups are easy to create with bootstrap. Just add your buttons
+ inside <code><div class="btn-group"></div></code>
+ </p>
+
+ <table class="table table-bordered">
+ <tr>
+ <th>Button</th>
+ <th>Icons</th>
+ <th>Flat</th>
+ <th>Dropdown</th>
+ </tr>
+ <!-- Default -->
+ <tr>
+ <td>
+ <div class="btn-group">
+ <button type="button" class="btn btn-default">Left</button>
+ <button type="button" class="btn btn-default">Middle</button>
+ <button type="button" class="btn btn-default">Right</button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group">
+ <button type="button" class="btn btn-default"><i class="fa fa-align-left"></i></button>
+ <button type="button" class="btn btn-default"><i class="fa fa-align-center"></i></button>
+ <button type="button" class="btn btn-default"><i class="fa fa-align-right"></i></button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group">
+ <button type="button" class="btn btn-default btn-flat"><i class="fa fa-align-left"></i></button>
+ <button type="button" class="btn btn-default btn-flat"><i class="fa fa-align-center"></i></button>
+ <button type="button" class="btn btn-default btn-flat"><i class="fa fa-align-right"></i></button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group">
+ <button type="button" class="btn btn-default">1</button>
+ <button type="button" class="btn btn-default">2</button>
+
+ <div class="btn-group">
+ <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu">
+ <li><a href="#">Dropdown link</a></li>
+ <li><a href="#">Dropdown link</a></li>
+ </ul>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <!-- ./default -->
+ <!-- Info -->
+ <tr>
+ <td>
+ <div class="btn-group">
+ <button type="button" class="btn btn-info">Left</button>
+ <button type="button" class="btn btn-info">Middle</button>
+ <button type="button" class="btn btn-info">Right</button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group">
+ <button type="button" class="btn btn-info"><i class="fa fa-align-left"></i></button>
+ <button type="button" class="btn btn-info"><i class="fa fa-align-center"></i></button>
+ <button type="button" class="btn btn-info"><i class="fa fa-align-right"></i></button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group">
+ <button type="button" class="btn btn-info btn-flat"><i class="fa fa-align-left"></i></button>
+ <button type="button" class="btn btn-info btn-flat"><i class="fa fa-align-center"></i></button>
+ <button type="button" class="btn btn-info btn-flat"><i class="fa fa-align-right"></i></button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group">
+ <button type="button" class="btn btn-info">1</button>
+ <button type="button" class="btn btn-info">2</button>
+
+ <div class="btn-group">
+ <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu">
+ <li><a href="#">Dropdown link</a></li>
+ <li><a href="#">Dropdown link</a></li>
+ </ul>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <!-- /. info -->
+ <!-- /.danger -->
+ <tr>
+ <td>
+ <div class="btn-group">
+ <button type="button" class="btn btn-danger">Left</button>
+ <button type="button" class="btn btn-danger">Middle</button>
+ <button type="button" class="btn btn-danger">Right</button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group">
+ <button type="button" class="btn btn-danger"><i class="fa fa-align-left"></i></button>
+ <button type="button" class="btn btn-danger"><i class="fa fa-align-center"></i></button>
+ <button type="button" class="btn btn-danger"><i class="fa fa-align-right"></i></button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group">
+ <button type="button" class="btn btn-danger btn-flat"><i class="fa fa-align-left"></i></button>
+ <button type="button" class="btn btn-danger btn-flat"><i class="fa fa-align-center"></i></button>
+ <button type="button" class="btn btn-danger btn-flat"><i class="fa fa-align-right"></i></button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group">
+ <button type="button" class="btn btn-danger">1</button>
+ <button type="button" class="btn btn-danger">2</button>
+
+ <div class="btn-group">
+ <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu">
+ <li><a href="#">Dropdown link</a></li>
+ <li><a href="#">Dropdown link</a></li>
+ </ul>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <!-- /.danger -->
+ <!-- warning -->
+ <tr>
+ <td>
+ <div class="btn-group">
+ <button type="button" class="btn btn-warning">Left</button>
+ <button type="button" class="btn btn-warning">Middle</button>
+ <button type="button" class="btn btn-warning">Right</button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group">
+ <button type="button" class="btn btn-warning"><i class="fa fa-align-left"></i></button>
+ <button type="button" class="btn btn-warning"><i class="fa fa-align-center"></i></button>
+ <button type="button" class="btn btn-warning"><i class="fa fa-align-right"></i></button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group">
+ <button type="button" class="btn btn-warning btn-flat"><i class="fa fa-align-left"></i></button>
+ <button type="button" class="btn btn-warning btn-flat"><i class="fa fa-align-center"></i></button>
+ <button type="button" class="btn btn-warning btn-flat"><i class="fa fa-align-right"></i></button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group">
+ <button type="button" class="btn btn-warning">1</button>
+ <button type="button" class="btn btn-warning">2</button>
+
+ <div class="btn-group">
+ <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu">
+ <li><a href="#">Dropdown link</a></li>
+ <li><a href="#">Dropdown link</a></li>
+ </ul>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <!-- /.warning -->
+ <!-- success -->
+ <tr>
+ <td>
+ <div class="btn-group">
+ <button type="button" class="btn btn-success">Left</button>
+ <button type="button" class="btn btn-success">Middle</button>
+ <button type="button" class="btn btn-success">Right</button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group">
+ <button type="button" class="btn btn-success"><i class="fa fa-align-left"></i></button>
+ <button type="button" class="btn btn-success"><i class="fa fa-align-center"></i></button>
+ <button type="button" class="btn btn-success"><i class="fa fa-align-right"></i></button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group">
+ <button type="button" class="btn btn-success btn-flat"><i class="fa fa-align-left"></i></button>
+ <button type="button" class="btn btn-success btn-flat"><i class="fa fa-align-center"></i></button>
+ <button type="button" class="btn btn-success btn-flat"><i class="fa fa-align-right"></i></button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group">
+ <button type="button" class="btn btn-success">1</button>
+ <button type="button" class="btn btn-success">2</button>
+
+ <div class="btn-group">
+ <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu">
+ <li><a href="#">Dropdown link</a></li>
+ <li><a href="#">Dropdown link</a></li>
+ </ul>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <!-- /.success -->
+ </table>
+ </div>
+ </div>
+ <!-- /.box -->
+
+ <div class="box">
+ <div class="box-header">
+ <h3 class="box-title">Button Addon</h3>
+ </div>
+ <div class="box-body">
+ <p>With dropdown</p>
+
+ <div class="input-group margin">
+ <div class="input-group-btn">
+ <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action
+ <span class="fa fa-caret-down"></span></button>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div>
+ <!-- /btn-group -->
+ <input type="text" class="form-control">
+ </div>
+ <!-- /input-group -->
+ <p>Normal</p>
+
+ <div class="input-group margin">
+ <div class="input-group-btn">
+ <button type="button" class="btn btn-danger">Action</button>
+ </div>
+ <!-- /btn-group -->
+ <input type="text" class="form-control">
+ </div>
+ <!-- /input-group -->
+ <p>Flat</p>
+
+ <div class="input-group margin">
+ <input type="text" class="form-control">
+ <span class="input-group-btn">
+ <button type="button" class="btn btn-info btn-flat">Go!</button>
+ </span>
+ </div>
+ <!-- /input-group -->
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ <!-- split buttons box -->
+ <div class="box">
+ <div class="box-header">
+ <h3 class="box-title">Split buttons</h3>
+ </div>
+ <div class="box-body">
+ <!-- Split button -->
+ <p>Normal split buttons:</p>
+
+ <div class="margin">
+ <div class="btn-group">
+ <button type="button" class="btn btn-default">Action</button>
+ <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+ <span class="caret"></span>
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <ul class="dropdown-menu" role="menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div>
+ <div class="btn-group">
+ <button type="button" class="btn btn-info">Action</button>
+ <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
+ <span class="caret"></span>
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <ul class="dropdown-menu" role="menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div>
+ <div class="btn-group">
+ <button type="button" class="btn btn-danger">Action</button>
+ <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
+ <span class="caret"></span>
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <ul class="dropdown-menu" role="menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div>
+ <div class="btn-group">
+ <button type="button" class="btn btn-success">Action</button>
+ <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
+ <span class="caret"></span>
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <ul class="dropdown-menu" role="menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div>
+ <div class="btn-group">
+ <button type="button" class="btn btn-warning">Action</button>
+ <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
+ <span class="caret"></span>
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <ul class="dropdown-menu" role="menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div>
+ </div>
+ <!-- flat split buttons -->
+ <p>Flat split buttons:</p>
+
+ <div class="margin">
+ <div class="btn-group">
+ <button type="button" class="btn btn-default btn-flat">Action</button>
+ <button type="button" class="btn btn-default btn-flat dropdown-toggle" data-toggle="dropdown">
+ <span class="caret"></span>
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <ul class="dropdown-menu" role="menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div>
+ <div class="btn-group">
+ <button type="button" class="btn btn-info btn-flat">Action</button>
+ <button type="button" class="btn btn-info btn-flat dropdown-toggle" data-toggle="dropdown">
+ <span class="caret"></span>
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <ul class="dropdown-menu" role="menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div>
+ <div class="btn-group">
+ <button type="button" class="btn btn-danger btn-flat">Action</button>
+ <button type="button" class="btn btn-danger btn-flat dropdown-toggle" data-toggle="dropdown">
+ <span class="caret"></span>
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <ul class="dropdown-menu" role="menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div>
+ <div class="btn-group">
+ <button type="button" class="btn btn-success btn-flat">Action</button>
+ <button type="button" class="btn btn-success btn-flat dropdown-toggle" data-toggle="dropdown">
+ <span class="caret"></span>
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <ul class="dropdown-menu" role="menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div>
+ <div class="btn-group">
+ <button type="button" class="btn btn-warning btn-flat">Action</button>
+ <button type="button" class="btn btn-warning btn-flat dropdown-toggle" data-toggle="dropdown">
+ <span class="caret"></span>
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <ul class="dropdown-menu" role="menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- end split buttons box -->
+
+ <!-- social buttons -->
+ <div class="box">
+ <div class="box-header">
+ <h3 class="box-title">Social Buttons (By <a href="https://github.com/lipis/bootstrap-social">Lipis</a>)
+ </h3>
+ </div>
+ <div class="box-body">
+ <a class="btn btn-block btn-social btn-bitbucket">
+ <i class="fa fa-bitbucket"></i> Sign in with Bitbucket
+ </a>
+ <a class="btn btn-block btn-social btn-dropbox">
+ <i class="fa fa-dropbox"></i> Sign in with Dropbox
+ </a>
+ <a class="btn btn-block btn-social btn-facebook">
+ <i class="fa fa-facebook"></i> Sign in with Facebook
+ </a>
+ <a class="btn btn-block btn-social btn-flickr">
+ <i class="fa fa-flickr"></i> Sign in with Flickr
+ </a>
+ <a class="btn btn-block btn-social btn-foursquare">
+ <i class="fa fa-foursquare"></i> Sign in with Foursquare
+ </a>
+ <a class="btn btn-block btn-social btn-github">
+ <i class="fa fa-github"></i> Sign in with GitHub
+ </a>
+ <a class="btn btn-block btn-social btn-google">
+ <i class="fa fa-google-plus"></i> Sign in with Google
+ </a>
+ <a class="btn btn-block btn-social btn-instagram">
+ <i class="fa fa-instagram"></i> Sign in with Instagram
+ </a>
+ <a class="btn btn-block btn-social btn-linkedin">
+ <i class="fa fa-linkedin"></i> Sign in with LinkedIn
+ </a>
+ <a class="btn btn-block btn-social btn-tumblr">
+ <i class="fa fa-tumblr"></i> Sign in with Tumblr
+ </a>
+ <a class="btn btn-block btn-social btn-twitter">
+ <i class="fa fa-twitter"></i> Sign in with Twitter
+ </a>
+ <a class="btn btn-block btn-social btn-vk">
+ <i class="fa fa-vk"></i> Sign in with VK
+ </a>
+ <br>
+
+ <div class="text-center">
+ <a class="btn btn-social-icon btn-bitbucket"><i class="fa fa-bitbucket"></i></a>
+ <a class="btn btn-social-icon btn-dropbox"><i class="fa fa-dropbox"></i></a>
+ <a class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i></a>
+ <a class="btn btn-social-icon btn-flickr"><i class="fa fa-flickr"></i></a>
+ <a class="btn btn-social-icon btn-foursquare"><i class="fa fa-foursquare"></i></a>
+ <a class="btn btn-social-icon btn-github"><i class="fa fa-github"></i></a>
+ <a class="btn btn-social-icon btn-google"><i class="fa fa-google-plus"></i></a>
+ <a class="btn btn-social-icon btn-instagram"><i class="fa fa-instagram"></i></a>
+ <a class="btn btn-social-icon btn-linkedin"><i class="fa fa-linkedin"></i></a>
+ <a class="btn btn-social-icon btn-tumblr"><i class="fa fa-tumblr"></i></a>
+ <a class="btn btn-social-icon btn-twitter"><i class="fa fa-twitter"></i></a>
+ <a class="btn btn-social-icon btn-vk"><i class="fa fa-vk"></i></a>
+ </div>
+ </div>
+ </div>
+ <!-- /.box -->
+
+ </div>
+ <!-- /.col -->
+ <div class="col-md-6">
+ <!-- Application buttons -->
+ <div class="box">
+ <div class="box-header">
+ <h3 class="box-title">Application Buttons</h3>
+ </div>
+ <div class="box-body">
+ <p>Add the classes <code>.btn.btn-app</code> to an <code><a></code> tag to achieve the following:</p>
+ <a class="btn btn-app">
+ <i class="fa fa-edit"></i> Edit
+ </a>
+ <a class="btn btn-app">
+ <i class="fa fa-play"></i> Play
+ </a>
+ <a class="btn btn-app">
+ <i class="fa fa-repeat"></i> Repeat
+ </a>
+ <a class="btn btn-app">
+ <i class="fa fa-pause"></i> Pause
+ </a>
+ <a class="btn btn-app">
+ <i class="fa fa-save"></i> Save
+ </a>
+ <a class="btn btn-app">
+ <span class="badge bg-yellow">3</span>
+ <i class="fa fa-bullhorn"></i> Notifications
+ </a>
+ <a class="btn btn-app">
+ <span class="badge bg-green">300</span>
+ <i class="fa fa-barcode"></i> Products
+ </a>
+ <a class="btn btn-app">
+ <span class="badge bg-purple">891</span>
+ <i class="fa fa-users"></i> Users
+ </a>
+ <a class="btn btn-app">
+ <span class="badge bg-teal">67</span>
+ <i class="fa fa-inbox"></i> Orders
+ </a>
+ <a class="btn btn-app">
+ <span class="badge bg-aqua">12</span>
+ <i class="fa fa-envelope"></i> Inbox
+ </a>
+ <a class="btn btn-app">
+ <span class="badge bg-red">531</span>
+ <i class="fa fa-heart-o"></i> Likes
+ </a>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ <!-- Various colors -->
+ <div class="box">
+ <div class="box-header">
+ <h3 class="box-title">Different colors</h3>
+ </div>
+ <div class="box-body">
+ <p>Mix and match with various background colors. Use base class <code>.btn</code> and add any available
+ <code>.bg-*</code> class</p>
+ <!-- You may notice a .margin class added
+ here but that's only to make the content
+ display correctly without having to use a table-->
+ <p>
+ <button type="button" class="btn bg-maroon btn-flat margin">.btn.bg-maroon.btn-flat</button>
+ <button type="button" class="btn bg-purple btn-flat margin">.btn.bg-purple.btn-flat</button>
+ <button type="button" class="btn bg-navy btn-flat margin">.btn.bg-navy.btn-flat</button>
+ <button type="button" class="btn bg-orange btn-flat margin">.btn.bg-orange.btn-flat</button>
+ <button type="button" class="btn bg-olive btn-flat margin">.btn.bg-olive.btn-flat</button>
+ </p>
+
+ <p>
+ <button type="button" class="btn bg-maroon margin">.btn.bg-maroon</button>
+ <button type="button" class="btn bg-purple margin">.btn.bg-purple</button>
+ <button type="button" class="btn bg-navy margin">.btn.bg-navy</button>
+ <button type="button" class="btn bg-orange margin">.btn.bg-orange</button>
+ <button type="button" class="btn bg-olive margin">.btn.bg-olive</button>
+ </p>
+ </div>
+ </div>
+ <!-- /.box -->
+
+ <!-- Vertical grouping -->
+ <div class="box">
+ <div class="box-header">
+ <h3 class="box-title">Vertical Button Group</h3>
+ </div>
+ <div class="box-body table-responsive pad">
+
+ <p>
+ Vertical button groups are easy to create with bootstrap. Just add your buttons
+ inside <code><div class="btn-group-vertical"></div></code>
+ </p>
+
+ <table class="table table-bordered">
+ <tr>
+ <th>Button</th>
+ <th>Icons</th>
+ <th>Flat</th>
+ <th>Dropdown</th>
+ </tr>
+ <!-- Default -->
+ <tr>
+ <td>
+ <div class="btn-group-vertical">
+ <button type="button" class="btn btn-default">Top</button>
+ <button type="button" class="btn btn-default">Middle</button>
+ <button type="button" class="btn btn-default">Bottom</button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group-vertical">
+ <button type="button" class="btn btn-default"><i class="fa fa-align-left"></i></button>
+ <button type="button" class="btn btn-default"><i class="fa fa-align-center"></i></button>
+ <button type="button" class="btn btn-default"><i class="fa fa-align-right"></i></button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group-vertical">
+ <button type="button" class="btn btn-default btn-flat"><i class="fa fa-align-left"></i></button>
+ <button type="button" class="btn btn-default btn-flat"><i class="fa fa-align-center"></i></button>
+ <button type="button" class="btn btn-default btn-flat"><i class="fa fa-align-right"></i></button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group-vertical">
+ <button type="button" class="btn btn-default">1</button>
+ <button type="button" class="btn btn-default">2</button>
+
+ <div class="btn-group">
+ <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu">
+ <li><a href="#">Dropdown link</a></li>
+ <li><a href="#">Dropdown link</a></li>
+ </ul>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <!-- ./default -->
+ <!-- Info -->
+ <tr>
+ <td>
+ <div class="btn-group-vertical">
+ <button type="button" class="btn btn-info">Top</button>
+ <button type="button" class="btn btn-info">Middle</button>
+ <button type="button" class="btn btn-info">Bottom</button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group-vertical">
+ <button type="button" class="btn btn-info"><i class="fa fa-align-left"></i></button>
+ <button type="button" class="btn btn-info"><i class="fa fa-align-center"></i></button>
+ <button type="button" class="btn btn-info"><i class="fa fa-align-right"></i></button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group-vertical">
+ <button type="button" class="btn btn-info btn-flat"><i class="fa fa-align-left"></i></button>
+ <button type="button" class="btn btn-info btn-flat"><i class="fa fa-align-center"></i></button>
+ <button type="button" class="btn btn-info btn-flat"><i class="fa fa-align-right"></i></button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group-vertical">
+ <button type="button" class="btn btn-info">1</button>
+ <button type="button" class="btn btn-info">2</button>
+
+ <div class="btn-group">
+ <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu">
+ <li><a href="#">Dropdown link</a></li>
+ <li><a href="#">Dropdown link</a></li>
+ </ul>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <!-- /. info -->
+ <!-- /.danger -->
+ <tr>
+ <td>
+ <div class="btn-group-vertical">
+ <button type="button" class="btn btn-danger">Top</button>
+ <button type="button" class="btn btn-danger">Middle</button>
+ <button type="button" class="btn btn-danger">Bottom</button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group-vertical">
+ <button type="button" class="btn btn-danger"><i class="fa fa-align-left"></i></button>
+ <button type="button" class="btn btn-danger"><i class="fa fa-align-center"></i></button>
+ <button type="button" class="btn btn-danger"><i class="fa fa-align-right"></i></button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group-vertical">
+ <button type="button" class="btn btn-danger btn-flat"><i class="fa fa-align-left"></i></button>
+ <button type="button" class="btn btn-danger btn-flat"><i class="fa fa-align-center"></i></button>
+ <button type="button" class="btn btn-danger btn-flat"><i class="fa fa-align-right"></i></button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group-vertical">
+ <button type="button" class="btn btn-danger">1</button>
+ <button type="button" class="btn btn-danger">2</button>
+
+ <div class="btn-group">
+ <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu">
+ <li><a href="#">Dropdown link</a></li>
+ <li><a href="#">Dropdown link</a></li>
+ </ul>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <!-- /.danger -->
+ <!-- warning -->
+ <tr>
+ <td>
+ <div class="btn-group-vertical">
+ <button type="button" class="btn btn-warning">Top</button>
+ <button type="button" class="btn btn-warning">Middle</button>
+ <button type="button" class="btn btn-warning">Bottom</button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group-vertical">
+ <button type="button" class="btn btn-warning"><i class="fa fa-align-left"></i></button>
+ <button type="button" class="btn btn-warning"><i class="fa fa-align-center"></i></button>
+ <button type="button" class="btn btn-warning"><i class="fa fa-align-right"></i></button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group-vertical">
+ <button type="button" class="btn btn-warning btn-flat"><i class="fa fa-align-left"></i></button>
+ <button type="button" class="btn btn-warning btn-flat"><i class="fa fa-align-center"></i></button>
+ <button type="button" class="btn btn-warning btn-flat"><i class="fa fa-align-right"></i></button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group-vertical">
+ <button type="button" class="btn btn-warning">1</button>
+ <button type="button" class="btn btn-warning">2</button>
+
+ <div class="btn-group">
+ <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu">
+ <li><a href="#">Dropdown link</a></li>
+ <li><a href="#">Dropdown link</a></li>
+ </ul>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <!-- /.warning -->
+ <!-- success -->
+ <tr>
+ <td>
+ <div class="btn-group-vertical">
+ <button type="button" class="btn btn-success">Top</button>
+ <button type="button" class="btn btn-success">Middle</button>
+ <button type="button" class="btn btn-success">Bottom</button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group-vertical">
+ <button type="button" class="btn btn-success"><i class="fa fa-align-left"></i></button>
+ <button type="button" class="btn btn-success"><i class="fa fa-align-center"></i></button>
+ <button type="button" class="btn btn-success"><i class="fa fa-align-right"></i></button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group-vertical">
+ <button type="button" class="btn btn-success btn-flat"><i class="fa fa-align-left"></i></button>
+ <button type="button" class="btn btn-success btn-flat"><i class="fa fa-align-center"></i></button>
+ <button type="button" class="btn btn-success btn-flat"><i class="fa fa-align-right"></i></button>
+ </div>
+ </td>
+ <td>
+ <div class="btn-group-vertical">
+ <button type="button" class="btn btn-success">1</button>
+ <button type="button" class="btn btn-success">2</button>
+
+ <div class="btn-group">
+ <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu">
+ <li><a href="#">Dropdown link</a></li>
+ <li><a href="#">Dropdown link</a></li>
+ </ul>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <!-- /.success -->
+ </table>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /. row -->
+</section>
+<!-- /.content -->
diff --git a/grails-app/assets/templates/xdashangular/UI/general.html b/grails-app/assets/templates/xdashangular/UI/general.html
index de155ea..908d9e8 100644
--- a/grails-app/assets/templates/xdashangular/UI/general.html
+++ b/grails-app/assets/templates/xdashangular/UI/general.html
@@ -1,10 +1,911 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <title>Title</title>
-</head>
-<body>
+<!-- Content Header (Page header) -->
+<section class="content-header">
+ <h1>
+ General UI
+ <small>Preview of UI elements</small>
+ </h1>
+ <ol class="breadcrumb">
+ <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
+ <li><a href="#">UI</a></li>
+ <li class="active">General</li>
+ </ol>
+</section>
-</body>
-</html>
\ No newline at end of file
+<!-- Main content -->
+<section class="content">
+ <!-- COLOR PALETTE -->
+ <div class="box box-default color-palette-box">
+ <div class="box-header with-border">
+ <h3 class="box-title"><i class="fa fa-tag"></i> Color Palette</h3>
+ </div>
+ <div class="box-body">
+ <div class="row">
+ <div class="col-sm-4 col-md-2">
+ <h4 class="text-center">Primary</h4>
+
+ <div class="color-palette-set">
+ <div class="bg-light-blue disabled color-palette"><span>Disabled</span></div>
+ <div class="bg-light-blue color-palette"><span>#3c8dbc</span></div>
+ <div class="bg-light-blue-active color-palette"><span>Active</span></div>
+ </div>
+ </div>
+ <!-- /.col -->
+ <div class="col-sm-4 col-md-2">
+ <h4 class="text-center">Info</h4>
+
+ <div class="color-palette-set">
+ <div class="bg-aqua disabled color-palette"><span>Disabled</span></div>
+ <div class="bg-aqua color-palette"><span>#00c0ef</span></div>
+ <div class="bg-aqua-active color-palette"><span>Active</span></div>
+ </div>
+ </div>
+ <!-- /.col -->
+ <div class="col-sm-4 col-md-2">
+ <h4 class="text-center">Success</h4>
+
+ <div class="color-palette-set">
+ <div class="bg-green disabled color-palette"><span>Disabled</span></div>
+ <div class="bg-green color-palette"><span>#00a65a</span></div>
+ <div class="bg-green-active color-palette"><span>Active</span></div>
+ </div>
+ </div>
+ <!-- /.col -->
+ <div class="col-sm-4 col-md-2">
+ <h4 class="text-center">Warning</h4>
+
+ <div class="color-palette-set">
+ <div class="bg-yellow disabled color-palette"><span>Disabled</span></div>
+ <div class="bg-yellow color-palette"><span>#f39c12</span></div>
+ <div class="bg-yellow-active color-palette"><span>Active</span></div>
+ </div>
+ </div>
+ <!-- /.col -->
+ <div class="col-sm-4 col-md-2">
+ <h4 class="text-center">Danger</h4>
+
+ <div class="color-palette-set">
+ <div class="bg-red disabled color-palette"><span>Disabled</span></div>
+ <div class="bg-red color-palette"><span>#f56954</span></div>
+ <div class="bg-red-active color-palette"><span>Active</span></div>
+ </div>
+ </div>
+ <!-- /.col -->
+ <div class="col-sm-4 col-md-2">
+ <h4 class="text-center">Gray</h4>
+
+ <div class="color-palette-set">
+ <div class="bg-gray disabled color-palette"><span>Disabled</span></div>
+ <div class="bg-gray color-palette"><span>#d2d6de</span></div>
+ <div class="bg-gray-active color-palette"><span>Active</span></div>
+ </div>
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+ <div class="row">
+ <div class="col-sm-4 col-md-2">
+ <h4 class="text-center">Navy</h4>
+
+ <div class="color-palette-set">
+ <div class="bg-navy disabled color-palette"><span>Disabled</span></div>
+ <div class="bg-navy color-palette"><span>#001F3F</span></div>
+ <div class="bg-navy-active color-palette"><span>Active</span></div>
+ </div>
+ </div>
+ <!-- /.col -->
+ <div class="col-sm-4 col-md-2">
+ <h4 class="text-center">Teal</h4>
+
+ <div class="color-palette-set">
+ <div class="bg-teal disabled color-palette"><span>Disabled</span></div>
+ <div class="bg-teal color-palette"><span>#39CCCC</span></div>
+ <div class="bg-teal-active color-palette"><span>Active</span></div>
+ </div>
+ </div>
+ <!-- /.col -->
+ <div class="col-sm-4 col-md-2">
+ <h4 class="text-center">Purple</h4>
+
+ <div class="color-palette-set">
+ <div class="bg-purple disabled color-palette"><span>Disabled</span></div>
+ <div class="bg-purple color-palette"><span>#605ca8</span></div>
+ <div class="bg-purple-active color-palette"><span>Active</span></div>
+ </div>
+ </div>
+ <!-- /.col -->
+ <div class="col-sm-4 col-md-2">
+ <h4 class="text-center">Orange</h4>
+
+ <div class="color-palette-set">
+ <div class="bg-orange disabled color-palette"><span>Disabled</span></div>
+ <div class="bg-orange color-palette"><span>#ff851b</span></div>
+ <div class="bg-orange-active color-palette"><span>Active</span></div>
+ </div>
+ </div>
+ <!-- /.col -->
+ <div class="col-sm-4 col-md-2">
+ <h4 class="text-center">Maroon</h4>
+
+ <div class="color-palette-set">
+ <div class="bg-maroon disabled color-palette"><span>Disabled</span></div>
+ <div class="bg-maroon color-palette"><span>#D81B60</span></div>
+ <div class="bg-maroon-active color-palette"><span>Active</span></div>
+ </div>
+ </div>
+ <!-- /.col -->
+ <div class="col-sm-4 col-md-2">
+ <h4 class="text-center">Black</h4>
+
+ <div class="color-palette-set">
+ <div class="bg-black disabled color-palette"><span>Disabled</span></div>
+ <div class="bg-black color-palette"><span>#111111</span></div>
+ <div class="bg-black-active color-palette"><span>Active</span></div>
+ </div>
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ <!-- START ALERTS AND CALLOUTS -->
+ <h2 class="page-header">Alerts and Callouts</h2>
+
+ <div class="row">
+ <div class="col-md-6">
+ <div class="box box-default">
+ <div class="box-header with-border">
+ <i class="fa fa-warning"></i>
+
+ <h3 class="box-title">Alerts</h3>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <div class="alert alert-danger alert-dismissible">
+ <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
+ <h4><i class="icon fa fa-ban"></i> Alert!</h4>
+ Danger alert preview. This alert is dismissable. A wonderful serenity has taken possession of my entire
+ soul, like these sweet mornings of spring which I enjoy with my whole heart.
+ </div>
+ <div class="alert alert-info alert-dismissible">
+ <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
+ <h4><i class="icon fa fa-info"></i> Alert!</h4>
+ Info alert preview. This alert is dismissable.
+ </div>
+ <div class="alert alert-warning alert-dismissible">
+ <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
+ <h4><i class="icon fa fa-warning"></i> Alert!</h4>
+ Warning alert preview. This alert is dismissable.
+ </div>
+ <div class="alert alert-success alert-dismissible">
+ <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
+ <h4><i class="icon fa fa-check"></i> Alert!</h4>
+ Success alert preview. This alert is dismissable.
+ </div>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col -->
+
+ <div class="col-md-6">
+ <div class="box box-default">
+ <div class="box-header with-border">
+ <i class="fa fa-bullhorn"></i>
+
+ <h3 class="box-title">Callouts</h3>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <div class="callout callout-danger">
+ <h4>I am a danger callout!</h4>
+
+ <p>There is a problem that we need to fix. A wonderful serenity has taken possession of my entire soul,
+ like these sweet mornings of spring which I enjoy with my whole heart.</p>
+ </div>
+ <div class="callout callout-info">
+ <h4>I am an info callout!</h4>
+
+ <p>Follow the steps to continue to payment.</p>
+ </div>
+ <div class="callout callout-warning">
+ <h4>I am a warning callout!</h4>
+
+ <p>This is a yellow callout.</p>
+ </div>
+ <div class="callout callout-success">
+ <h4>I am a success callout!</h4>
+
+ <p>This is a green callout.</p>
+ </div>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+ <!-- END ALERTS AND CALLOUTS -->
+ <!-- START CUSTOM TABS -->
+ <h2 class="page-header">AdminLTE Custom Tabs</h2>
+
+ <div class="row">
+ <div class="col-md-6">
+ <!-- Custom Tabs -->
+ <div class="nav-tabs-custom">
+ <ul class="nav nav-tabs">
+ <li class="active"><a href="#tab_1" data-toggle="tab">Tab 1</a></li>
+ <li><a href="#tab_2" data-toggle="tab">Tab 2</a></li>
+ <li><a href="#tab_3" data-toggle="tab">Tab 3</a></li>
+ <li class="dropdown">
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+ Dropdown <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
+ <li role="presentation" class="divider"></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
+ </ul>
+ </li>
+ <li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-gear"></i></a></li>
+ </ul>
+ <div class="tab-content">
+ <div class="tab-pane active" id="tab_1">
+ <b>How to use:</b>
+
+ <p>Exactly like the original bootstrap tabs except you should use
+ the custom wrapper <code>.nav-tabs-custom</code> to achieve this style.</p>
+ A wonderful serenity has taken possession of my entire soul,
+ like these sweet mornings of spring which I enjoy with my whole heart.
+ I am alone, and feel the charm of existence in this spot,
+ which was created for the bliss of souls like mine. I am so happy,
+ my dear friend, so absorbed in the exquisite sense of mere tranquil existence,
+ that I neglect my talents. I should be incapable of drawing a single stroke
+ at the present moment; and yet I feel that I never was a greater artist than now.
+ </div>
+ <!-- /.tab-pane -->
+ <div class="tab-pane" id="tab_2">
+ The European languages are members of the same family. Their separate existence is a myth.
+ For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ
+ in their grammar, their pronunciation and their most common words. Everyone realizes why a
+ new common language would be desirable: one could refuse to pay expensive translators. To
+ achieve this, it would be necessary to have uniform grammar, pronunciation and more common
+ words. If several languages coalesce, the grammar of the resulting language is more simple
+ and regular than that of the individual languages.
+ </div>
+ <!-- /.tab-pane -->
+ <div class="tab-pane" id="tab_3">
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+ Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+ when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+ It has survived not only five centuries, but also the leap into electronic typesetting,
+ remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
+ sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
+ like Aldus PageMaker including versions of Lorem Ipsum.
+ </div>
+ <!-- /.tab-pane -->
+ </div>
+ <!-- /.tab-content -->
+ </div>
+ <!-- nav-tabs-custom -->
+ </div>
+ <!-- /.col -->
+
+ <div class="col-md-6">
+ <!-- Custom Tabs (Pulled to the right) -->
+ <div class="nav-tabs-custom">
+ <ul class="nav nav-tabs pull-right">
+ <li class="active"><a href="#tab_1-1" data-toggle="tab">Tab 1</a></li>
+ <li><a href="#tab_2-2" data-toggle="tab">Tab 2</a></li>
+ <li><a href="#tab_3-2" data-toggle="tab">Tab 3</a></li>
+ <li class="dropdown">
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+ Dropdown <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
+ <li role="presentation" class="divider"></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
+ </ul>
+ </li>
+ <li class="pull-left header"><i class="fa fa-th"></i> Custom Tabs</li>
+ </ul>
+ <div class="tab-content">
+ <div class="tab-pane active" id="tab_1-1">
+ <b>How to use:</b>
+
+ <p>Exactly like the original bootstrap tabs except you should use
+ the custom wrapper <code>.nav-tabs-custom</code> to achieve this style.</p>
+ A wonderful serenity has taken possession of my entire soul,
+ like these sweet mornings of spring which I enjoy with my whole heart.
+ I am alone, and feel the charm of existence in this spot,
+ which was created for the bliss of souls like mine. I am so happy,
+ my dear friend, so absorbed in the exquisite sense of mere tranquil existence,
+ that I neglect my talents. I should be incapable of drawing a single stroke
+ at the present moment; and yet I feel that I never was a greater artist than now.
+ </div>
+ <!-- /.tab-pane -->
+ <div class="tab-pane" id="tab_2-2">
+ The European languages are members of the same family. Their separate existence is a myth.
+ For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ
+ in their grammar, their pronunciation and their most common words. Everyone realizes why a
+ new common language would be desirable: one could refuse to pay expensive translators. To
+ achieve this, it would be necessary to have uniform grammar, pronunciation and more common
+ words. If several languages coalesce, the grammar of the resulting language is more simple
+ and regular than that of the individual languages.
+ </div>
+ <!-- /.tab-pane -->
+ <div class="tab-pane" id="tab_3-2">
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+ Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+ when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+ It has survived not only five centuries, but also the leap into electronic typesetting,
+ remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
+ sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
+ like Aldus PageMaker including versions of Lorem Ipsum.
+ </div>
+ <!-- /.tab-pane -->
+ </div>
+ <!-- /.tab-content -->
+ </div>
+ <!-- nav-tabs-custom -->
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+ <!-- END CUSTOM TABS -->
+ <!-- START PROGRESS BARS -->
+ <h2 class="page-header">Progress Bars</h2>
+
+ <div class="row">
+ <div class="col-md-6">
+ <div class="box box-solid">
+ <div class="box-header with-border">
+ <h3 class="box-title">Progress Bars Different Sizes</h3>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <p><code>.progress</code></p>
+
+ <div class="progress">
+ <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
+ <span class="sr-only">40% Complete (success)</span>
+ </div>
+ </div>
+ <p>Class: <code>.sm</code></p>
+
+ <div class="progress progress-sm active">
+ <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
+ <span class="sr-only">20% Complete</span>
+ </div>
+ </div>
+ <p>Class: <code>.xs</code></p>
+
+ <div class="progress progress-xs">
+ <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
+ <span class="sr-only">60% Complete (warning)</span>
+ </div>
+ </div>
+ <p>Class: <code>.xxs</code></p>
+
+ <div class="progress progress-xxs">
+ <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
+ <span class="sr-only">60% Complete (warning)</span>
+ </div>
+ </div>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col (left) -->
+ <div class="col-md-6">
+ <div class="box box-solid">
+ <div class="box-header with-border">
+ <h3 class="box-title">Progress bars</h3>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <div class="progress">
+ <div class="progress-bar progress-bar-green" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
+ <span class="sr-only">40% Complete (success)</span>
+ </div>
+ </div>
+ <div class="progress">
+ <div class="progress-bar progress-bar-aqua" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
+ <span class="sr-only">20% Complete</span>
+ </div>
+ </div>
+ <div class="progress">
+ <div class="progress-bar progress-bar-yellow" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
+ <span class="sr-only">60% Complete (warning)</span>
+ </div>
+ </div>
+ <div class="progress">
+ <div class="progress-bar progress-bar-red" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
+ <span class="sr-only">80% Complete</span>
+ </div>
+ </div>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col (right) -->
+ </div>
+ <!-- /.row -->
+ <div class="row">
+ <div class="col-md-6">
+ <div class="box box-solid">
+ <div class="box-header with-border">
+ <h3 class="box-title">Vertical Progress Bars Different Sizes</h3>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body text-center">
+ <p>By adding the class <code>.vertical</code> and <code>.progress-sm</code>, <code>.progress-xs</code> or
+ <code>.progress-xxs</code> we achieve:</p>
+
+ <div class="progress vertical active">
+ <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 40%">
+ <span class="sr-only">40%</span>
+ </div>
+ </div>
+ <div class="progress vertical progress-sm">
+ <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="height: 100%">
+ <span class="sr-only">100%</span>
+ </div>
+ </div>
+ <div class="progress vertical progress-xs">
+ <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%">
+ <span class="sr-only">60%</span>
+ </div>
+ </div>
+ <div class="progress vertical progress-xxs">
+ <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%">
+ <span class="sr-only">60%</span>
+ </div>
+ </div>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col (left) -->
+ <div class="col-md-6">
+ <div class="box box-solid">
+ <div class="box-header with-border">
+ <h3 class="box-title">Vertical Progress bars</h3>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body text-center">
+ <p>By adding the class <code>.vertical</code> we achieve:</p>
+
+ <div class="progress vertical">
+ <div class="progress-bar progress-bar-green" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 40%">
+ <span class="sr-only">40%</span>
+ </div>
+ </div>
+ <div class="progress vertical">
+ <div class="progress-bar progress-bar-aqua" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="height: 20%">
+ <span class="sr-only">20%</span>
+ </div>
+ </div>
+ <div class="progress vertical">
+ <div class="progress-bar progress-bar-yellow" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%">
+ <span class="sr-only">60%</span>
+ </div>
+ </div>
+ <div class="progress vertical">
+ <div class="progress-bar progress-bar-red" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="height: 80%">
+ <span class="sr-only">80%</span>
+ </div>
+ </div>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col (right) -->
+ </div>
+ <!-- /.row -->
+ <!-- END PROGRESS BARS -->
+
+ <!-- START ACCORDION & CAROUSEL-->
+ <h2 class="page-header">Bootstrap Accordion & Carousel</h2>
+
+ <div class="row">
+ <div class="col-md-6">
+ <div class="box box-solid">
+ <div class="box-header with-border">
+ <h3 class="box-title">Collapsible Accordion</h3>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <div class="box-group" id="accordion">
+ <!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
+ <div class="panel box box-primary">
+ <div class="box-header with-border">
+ <h4 class="box-title">
+ <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
+ Collapsible Group Item #1
+ </a>
+ </h4>
+ </div>
+ <div id="collapseOne" class="panel-collapse collapse in">
+ <div class="box-body">
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
+ wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
+ eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
+ assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
+ nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
+ farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
+ labore sustainable VHS.
+ </div>
+ </div>
+ </div>
+ <div class="panel box box-danger">
+ <div class="box-header with-border">
+ <h4 class="box-title">
+ <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
+ Collapsible Group Danger
+ </a>
+ </h4>
+ </div>
+ <div id="collapseTwo" class="panel-collapse collapse">
+ <div class="box-body">
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
+ wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
+ eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
+ assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
+ nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
+ farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
+ labore sustainable VHS.
+ </div>
+ </div>
+ </div>
+ <div class="panel box box-success">
+ <div class="box-header with-border">
+ <h4 class="box-title">
+ <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
+ Collapsible Group Success
+ </a>
+ </h4>
+ </div>
+ <div id="collapseThree" class="panel-collapse collapse">
+ <div class="box-body">
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
+ wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
+ eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
+ assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
+ nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
+ farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
+ labore sustainable VHS.
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col -->
+ <div class="col-md-6">
+ <div class="box box-solid">
+ <div class="box-header with-border">
+ <h3 class="box-title">Carousel</h3>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
+ <ol class="carousel-indicators">
+ <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
+ <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
+ <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
+ </ol>
+ <div class="carousel-inner">
+ <div class="item active">
+ <img src="http://placehold.it/900x500/39CCCC/ffffff&text=I+Love+Bootstrap" alt="First slide">
+
+ <div class="carousel-caption">
+ First Slide
+ </div>
+ </div>
+ <div class="item">
+ <img src="http://placehold.it/900x500/3c8dbc/ffffff&text=I+Love+Bootstrap" alt="Second slide">
+
+ <div class="carousel-caption">
+ Second Slide
+ </div>
+ </div>
+ <div class="item">
+ <img src="http://placehold.it/900x500/f39c12/ffffff&text=I+Love+Bootstrap" alt="Third slide">
+
+ <div class="carousel-caption">
+ Third Slide
+ </div>
+ </div>
+ </div>
+ <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
+ <span class="fa fa-angle-left"></span>
+ </a>
+ <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
+ <span class="fa fa-angle-right"></span>
+ </a>
+ </div>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+ <!-- END ACCORDION & CAROUSEL-->
+
+ <!-- START TYPOGRAPHY -->
+ <h2 class="page-header">Typography</h2>
+
+ <div class="row">
+ <div class="col-md-6">
+ <div class="box box-solid">
+ <div class="box-header with-border">
+ <i class="fa fa-text-width"></i>
+
+ <h3 class="box-title">Headlines</h3>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <h1>h1. Bootstrap heading</h1>
+
+ <h2>h2. Bootstrap heading</h2>
+
+ <h3>h3. Bootstrap heading</h3>
+ <h4>h4. Bootstrap heading</h4>
+ <h5>h5. Bootstrap heading</h5>
+ <h6>h6. Bootstrap heading</h6>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- ./col -->
+ <div class="col-md-6">
+ <div class="box box-solid">
+ <div class="box-header with-border">
+ <i class="fa fa-text-width"></i>
+
+ <h3 class="box-title">Text Emphasis</h3>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <p class="lead">Lead to emphasize importance</p>
+
+ <p class="text-green">Text green to emphasize success</p>
+
+ <p class="text-aqua">Text aqua to emphasize info</p>
+
+ <p class="text-light-blue">Text light blue to emphasize info (2)</p>
+
+ <p class="text-red">Text red to emphasize danger</p>
+
+ <p class="text-yellow">Text yellow to emphasize warning</p>
+
+ <p class="text-muted">Text muted to emphasize general</p>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- ./col -->
+ </div>
+ <!-- /.row -->
+
+ <div class="row">
+ <div class="col-md-6">
+ <div class="box box-solid">
+ <div class="box-header with-border">
+ <i class="fa fa-text-width"></i>
+
+ <h3 class="box-title">Block Quotes</h3>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <blockquote>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+ <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
+ </blockquote>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- ./col -->
+ <div class="col-md-6">
+ <div class="box box-solid">
+ <div class="box-header with-border">
+ <i class="fa fa-text-width"></i>
+
+ <h3 class="box-title">Block Quotes Pulled Right</h3>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body clearfix">
+ <blockquote class="pull-right">
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+ <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
+ </blockquote>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- ./col -->
+ </div>
+ <!-- /.row -->
+
+ <div class="row">
+ <div class="col-md-4">
+ <div class="box box-solid">
+ <div class="box-header with-border">
+ <i class="fa fa-text-width"></i>
+
+ <h3 class="box-title">Unordered List</h3>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <ul>
+ <li>Lorem ipsum dolor sit amet</li>
+ <li>Consectetur adipiscing elit</li>
+ <li>Integer molestie lorem at massa</li>
+ <li>Facilisis in pretium nisl aliquet</li>
+ <li>Nulla volutpat aliquam velit
+ <ul>
+ <li>Phasellus iaculis neque</li>
+ <li>Purus sodales ultricies</li>
+ <li>Vestibulum laoreet porttitor sem</li>
+ <li>Ac tristique libero volutpat at</li>
+ </ul>
+ </li>
+ <li>Faucibus porta lacus fringilla vel</li>
+ <li>Aenean sit amet erat nunc</li>
+ <li>Eget porttitor lorem</li>
+ </ul>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- ./col -->
+ <div class="col-md-4">
+ <div class="box box-solid">
+ <div class="box-header with-border">
+ <i class="fa fa-text-width"></i>
+
+ <h3 class="box-title">Ordered Lists</h3>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <ol>
+ <li>Lorem ipsum dolor sit amet</li>
+ <li>Consectetur adipiscing elit</li>
+ <li>Integer molestie lorem at massa</li>
+ <li>Facilisis in pretium nisl aliquet</li>
+ <li>Nulla volutpat aliquam velit
+ <ol>
+ <li>Phasellus iaculis neque</li>
+ <li>Purus sodales ultricies</li>
+ <li>Vestibulum laoreet porttitor sem</li>
+ <li>Ac tristique libero volutpat at</li>
+ </ol>
+ </li>
+ <li>Faucibus porta lacus fringilla vel</li>
+ <li>Aenean sit amet erat nunc</li>
+ <li>Eget porttitor lorem</li>
+ </ol>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- ./col -->
+ <div class="col-md-4">
+ <div class="box box-solid">
+ <div class="box-header with-border">
+ <i class="fa fa-text-width"></i>
+
+ <h3 class="box-title">Unstyled List</h3>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <ul class="list-unstyled">
+ <li>Lorem ipsum dolor sit amet</li>
+ <li>Consectetur adipiscing elit</li>
+ <li>Integer molestie lorem at massa</li>
+ <li>Facilisis in pretium nisl aliquet</li>
+ <li>Nulla volutpat aliquam velit
+ <ul>
+ <li>Phasellus iaculis neque</li>
+ <li>Purus sodales ultricies</li>
+ <li>Vestibulum laoreet porttitor sem</li>
+ <li>Ac tristique libero volutpat at</li>
+ </ul>
+ </li>
+ <li>Faucibus porta lacus fringilla vel</li>
+ <li>Aenean sit amet erat nunc</li>
+ <li>Eget porttitor lorem</li>
+ </ul>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- ./col -->
+ </div>
+ <!-- /.row -->
+
+ <div class="row">
+ <div class="col-md-6">
+ <div class="box box-solid">
+ <div class="box-header with-border">
+ <i class="fa fa-text-width"></i>
+
+ <h3 class="box-title">Description</h3>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <dl>
+ <dt>Description lists</dt>
+ <dd>A description list is perfect for defining terms.</dd>
+ <dt>Euismod</dt>
+ <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+ <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+ <dt>Malesuada porta</dt>
+ <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+ </dl>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- ./col -->
+ <div class="col-md-6">
+ <div class="box box-solid">
+ <div class="box-header with-border">
+ <i class="fa fa-text-width"></i>
+
+ <h3 class="box-title">Description Horizontal</h3>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <dl class="dl-horizontal">
+ <dt>Description lists</dt>
+ <dd>A description list is perfect for defining terms.</dd>
+ <dt>Euismod</dt>
+ <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+ <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+ <dt>Malesuada porta</dt>
+ <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+ <dt>Felis euismod semper eget lacinia</dt>
+ <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
+ sit amet risus.
+ </dd>
+ </dl>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- ./col -->
+ </div>
+ <!-- /.row -->
+ <!-- END TYPOGRAPHY -->
+
+</section>
+<!-- /.content -->
diff --git a/grails-app/assets/templates/xdashangular/UI/icons.html b/grails-app/assets/templates/xdashangular/UI/icons.html
index de155ea..b9140bb 100644
--- a/grails-app/assets/templates/xdashangular/UI/icons.html
+++ b/grails-app/assets/templates/xdashangular/UI/icons.html
@@ -1,10 +1,2268 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <title>Title</title>
-</head>
-<body>
+<!-- Content Header (Page header) -->
+<section class="content-header">
+ <h1>
+ Icons
+ <small>a set of beautiful icons</small>
+ </h1>
+ <ol class="breadcrumb">
+ <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
+ <li><a href="#/UI-buttons">UI</a></li>
+ <li class="active">Icons</li>
+ </ol>
+</section>
-</body>
-</html>
\ No newline at end of file
+<!-- Main content -->
+<section class="content">
+ <div class="row">
+ <div class="col-xs-12">
+ <div class="nav-tabs-custom">
+ <ul class="nav nav-tabs">
+ <li class="active"><a href="#fa-icons" data-toggle="tab">Font Awesome</a></li>
+ <li><a href="#glyphicons" data-toggle="tab">Glyphicons</a></li>
+ </ul>
+ <div class="tab-content">
+ <!-- Font Awesome Icons -->
+ <div class="tab-pane active" id="fa-icons">
+ <section id="new">
+ <h4 class="page-header">66 New Icons in 4.4</h4>
+
+ <div class="row fontawesome-icon-list">
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-500px"></i> fa-500px</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-amazon"></i> fa-amazon</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-balance-scale"></i> fa-balance-scale</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-battery-0"></i> fa-battery-0
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-battery-1"></i> fa-battery-1
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-battery-2"></i> fa-battery-2
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-battery-3"></i> fa-battery-3
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-battery-4"></i> fa-battery-4
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-battery-empty"></i> fa-battery-empty</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-battery-full"></i> fa-battery-full</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-battery-half"></i> fa-battery-half</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-battery-quarter"></i> fa-battery-quarter</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-battery-three-quarters"></i>
+ fa-battery-three-quarters
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-black-tie"></i> fa-black-tie</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-calendar-check-o"></i> fa-calendar-check-o
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-calendar-minus-o"></i> fa-calendar-minus-o
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-calendar-plus-o"></i> fa-calendar-plus-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-calendar-times-o"></i> fa-calendar-times-o
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cc-diners-club"></i> fa-cc-diners-club</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cc-jcb"></i> fa-cc-jcb</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-chrome"></i> fa-chrome</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-clone"></i> fa-clone</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-commenting"></i> fa-commenting</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-commenting-o"></i> fa-commenting-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-contao"></i> fa-contao</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-creative-commons"></i> fa-creative-commons
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-expeditedssl"></i> fa-expeditedssl</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-firefox"></i> fa-firefox</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-fonticons"></i> fa-fonticons</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-genderless"></i> fa-genderless</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-get-pocket"></i> fa-get-pocket</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-gg"></i> fa-gg</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-gg-circle"></i> fa-gg-circle</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-grab-o"></i> fa-hand-grab-o
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-lizard-o"></i> fa-hand-lizard-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-paper-o"></i> fa-hand-paper-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-peace-o"></i> fa-hand-peace-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-pointer-o"></i> fa-hand-pointer-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-rock-o"></i> fa-hand-rock-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-scissors-o"></i> fa-hand-scissors-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-spock-o"></i> fa-hand-spock-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-stop-o"></i> fa-hand-stop-o
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hourglass"></i> fa-hourglass</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hourglass-1"></i> fa-hourglass-1
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hourglass-2"></i> fa-hourglass-2
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hourglass-3"></i> fa-hourglass-3
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hourglass-end"></i> fa-hourglass-end</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hourglass-half"></i> fa-hourglass-half</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hourglass-o"></i> fa-hourglass-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hourglass-start"></i> fa-hourglass-start</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-houzz"></i> fa-houzz</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-i-cursor"></i> fa-i-cursor</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-industry"></i> fa-industry</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-internet-explorer"></i> fa-internet-explorer
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-map"></i> fa-map</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-map-o"></i> fa-map-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-map-pin"></i> fa-map-pin</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-map-signs"></i> fa-map-signs</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-mouse-pointer"></i> fa-mouse-pointer</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-object-group"></i> fa-object-group</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-object-ungroup"></i> fa-object-ungroup</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-odnoklassniki"></i> fa-odnoklassniki</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-odnoklassniki-square"></i>
+ fa-odnoklassniki-square
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-opencart"></i> fa-opencart</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-opera"></i> fa-opera</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-optin-monster"></i> fa-optin-monster</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-registered"></i> fa-registered</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-safari"></i> fa-safari</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-sticky-note"></i> fa-sticky-note</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-sticky-note-o"></i> fa-sticky-note-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-television"></i> fa-television</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-trademark"></i> fa-trademark</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-tripadvisor"></i> fa-tripadvisor</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-tv"></i> fa-tv
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-vimeo"></i> fa-vimeo</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-wikipedia-w"></i> fa-wikipedia-w</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-y-combinator"></i> fa-y-combinator</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-yc"></i> fa-yc
+ <span class="text-muted">(alias)</span></div>
+ </div>
+ </section>
+
+ <section id="web-application">
+ <h4 class="page-header">Web Application Icons</h4>
+
+ <div class="row fontawesome-icon-list">
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-adjust"></i> fa-adjust</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-anchor"></i> fa-anchor</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-archive"></i> fa-archive</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-area-chart"></i> fa-area-chart</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-arrows"></i> fa-arrows</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-arrows-h"></i> fa-arrows-h</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-arrows-v"></i> fa-arrows-v</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-asterisk"></i> fa-asterisk</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-at"></i> fa-at</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-automobile"></i> fa-automobile
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-balance-scale"></i> fa-balance-scale</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-ban"></i> fa-ban</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bank"></i> fa-bank <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bar-chart"></i> fa-bar-chart</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bar-chart-o"></i> fa-bar-chart-o
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-barcode"></i> fa-barcode</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bars"></i> fa-bars</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-battery-0"></i> fa-battery-0
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-battery-1"></i> fa-battery-1
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-battery-2"></i> fa-battery-2
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-battery-3"></i> fa-battery-3
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-battery-4"></i> fa-battery-4
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-battery-empty"></i> fa-battery-empty</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-battery-full"></i> fa-battery-full</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-battery-half"></i> fa-battery-half</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-battery-quarter"></i> fa-battery-quarter</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-battery-three-quarters"></i>
+ fa-battery-three-quarters
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bed"></i> fa-bed</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-beer"></i> fa-beer</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bell"></i> fa-bell</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bell-o"></i> fa-bell-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bell-slash"></i> fa-bell-slash</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bell-slash-o"></i> fa-bell-slash-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bicycle"></i> fa-bicycle</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-binoculars"></i> fa-binoculars</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-birthday-cake"></i> fa-birthday-cake</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bolt"></i> fa-bolt</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bomb"></i> fa-bomb</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-book"></i> fa-book</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bookmark"></i> fa-bookmark</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bookmark-o"></i> fa-bookmark-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-briefcase"></i> fa-briefcase</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bug"></i> fa-bug</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-building"></i> fa-building</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-building-o"></i> fa-building-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bullhorn"></i> fa-bullhorn</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bullseye"></i> fa-bullseye</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bus"></i> fa-bus</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cab"></i> fa-cab <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-calculator"></i> fa-calculator</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-calendar"></i> fa-calendar</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-calendar-check-o"></i> fa-calendar-check-o
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-calendar-minus-o"></i> fa-calendar-minus-o
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-calendar-o"></i> fa-calendar-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-calendar-plus-o"></i> fa-calendar-plus-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-calendar-times-o"></i> fa-calendar-times-o
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-camera"></i> fa-camera</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-camera-retro"></i> fa-camera-retro</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-car"></i> fa-car</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-caret-square-o-down"></i>
+ fa-caret-square-o-down
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-caret-square-o-left"></i>
+ fa-caret-square-o-left
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-caret-square-o-right"></i>
+ fa-caret-square-o-right
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-caret-square-o-up"></i> fa-caret-square-o-up
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cart-arrow-down"></i> fa-cart-arrow-down</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cart-plus"></i> fa-cart-plus</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cc"></i> fa-cc</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-certificate"></i> fa-certificate</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-check"></i> fa-check</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-check-circle"></i> fa-check-circle</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-check-circle-o"></i> fa-check-circle-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-check-square"></i> fa-check-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-check-square-o"></i> fa-check-square-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-child"></i> fa-child</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-circle"></i> fa-circle</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-circle-o"></i> fa-circle-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-circle-o-notch"></i> fa-circle-o-notch</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-circle-thin"></i> fa-circle-thin</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-clock-o"></i> fa-clock-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-clone"></i> fa-clone</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-close"></i> fa-close <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cloud"></i> fa-cloud</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cloud-download"></i> fa-cloud-download</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cloud-upload"></i> fa-cloud-upload</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-code"></i> fa-code</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-code-fork"></i> fa-code-fork</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-coffee"></i> fa-coffee</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cog"></i> fa-cog</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cogs"></i> fa-cogs</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-comment"></i> fa-comment</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-comment-o"></i> fa-comment-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-commenting"></i> fa-commenting</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-commenting-o"></i> fa-commenting-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-comments"></i> fa-comments</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-comments-o"></i> fa-comments-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-compass"></i> fa-compass</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-copyright"></i> fa-copyright</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-creative-commons"></i> fa-creative-commons
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-credit-card"></i> fa-credit-card</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-crop"></i> fa-crop</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-crosshairs"></i> fa-crosshairs</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cube"></i> fa-cube</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cubes"></i> fa-cubes</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cutlery"></i> fa-cutlery</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-dashboard"></i> fa-dashboard
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-database"></i> fa-database</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-desktop"></i> fa-desktop</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-diamond"></i> fa-diamond</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-dot-circle-o"></i> fa-dot-circle-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-download"></i> fa-download</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-edit"></i> fa-edit <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-ellipsis-h"></i> fa-ellipsis-h</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-ellipsis-v"></i> fa-ellipsis-v</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-envelope"></i> fa-envelope</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-envelope-o"></i> fa-envelope-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-envelope-square"></i> fa-envelope-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-eraser"></i> fa-eraser</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-exchange"></i> fa-exchange</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-exclamation"></i> fa-exclamation</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-exclamation-circle"></i> fa-exclamation-circle
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-exclamation-triangle"></i>
+ fa-exclamation-triangle
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-external-link"></i> fa-external-link</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-external-link-square"></i>
+ fa-external-link-square
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-eye"></i> fa-eye</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-eye-slash"></i> fa-eye-slash</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-eyedropper"></i> fa-eyedropper</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-fax"></i> fa-fax</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-feed"></i> fa-feed <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-female"></i> fa-female</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-fighter-jet"></i> fa-fighter-jet</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-archive-o"></i> fa-file-archive-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-audio-o"></i> fa-file-audio-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-code-o"></i> fa-file-code-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-excel-o"></i> fa-file-excel-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-image-o"></i> fa-file-image-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-movie-o"></i> fa-file-movie-o
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-pdf-o"></i> fa-file-pdf-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-photo-o"></i> fa-file-photo-o
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-picture-o"></i> fa-file-picture-o
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-powerpoint-o"></i> fa-file-powerpoint-o
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-sound-o"></i> fa-file-sound-o
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-video-o"></i> fa-file-video-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-word-o"></i> fa-file-word-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-zip-o"></i> fa-file-zip-o
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-film"></i> fa-film</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-filter"></i> fa-filter</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-fire"></i> fa-fire</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-fire-extinguisher"></i> fa-fire-extinguisher
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-flag"></i> fa-flag</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-flag-checkered"></i> fa-flag-checkered</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-flag-o"></i> fa-flag-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-flash"></i> fa-flash <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-flask"></i> fa-flask</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-folder"></i> fa-folder</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-folder-o"></i> fa-folder-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-folder-open"></i> fa-folder-open</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-folder-open-o"></i> fa-folder-open-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-frown-o"></i> fa-frown-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-futbol-o"></i> fa-futbol-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-gamepad"></i> fa-gamepad</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-gavel"></i> fa-gavel</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-gear"></i> fa-gear <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-gears"></i> fa-gears <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-gift"></i> fa-gift</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-glass"></i> fa-glass</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-globe"></i> fa-globe</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-graduation-cap"></i> fa-graduation-cap</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-group"></i> fa-group <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-grab-o"></i> fa-hand-grab-o
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-lizard-o"></i> fa-hand-lizard-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-paper-o"></i> fa-hand-paper-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-peace-o"></i> fa-hand-peace-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-pointer-o"></i> fa-hand-pointer-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-rock-o"></i> fa-hand-rock-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-scissors-o"></i> fa-hand-scissors-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-spock-o"></i> fa-hand-spock-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-stop-o"></i> fa-hand-stop-o
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hdd-o"></i> fa-hdd-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-headphones"></i> fa-headphones</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-heart"></i> fa-heart</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-heart-o"></i> fa-heart-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-heartbeat"></i> fa-heartbeat</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-history"></i> fa-history</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-home"></i> fa-home</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hotel"></i> fa-hotel <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hourglass"></i> fa-hourglass</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hourglass-1"></i> fa-hourglass-1
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hourglass-2"></i> fa-hourglass-2
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hourglass-3"></i> fa-hourglass-3
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hourglass-end"></i> fa-hourglass-end</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hourglass-half"></i> fa-hourglass-half</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hourglass-o"></i> fa-hourglass-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hourglass-start"></i> fa-hourglass-start</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-i-cursor"></i> fa-i-cursor</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-image"></i> fa-image <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-inbox"></i> fa-inbox</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-industry"></i> fa-industry</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-info"></i> fa-info</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-info-circle"></i> fa-info-circle</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-institution"></i> fa-institution
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-key"></i> fa-key</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-keyboard-o"></i> fa-keyboard-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-language"></i> fa-language</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-laptop"></i> fa-laptop</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-leaf"></i> fa-leaf</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-legal"></i> fa-legal <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-lemon-o"></i> fa-lemon-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-level-down"></i> fa-level-down</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-level-up"></i> fa-level-up</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-life-bouy"></i> fa-life-bouy
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-life-buoy"></i> fa-life-buoy
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-life-ring"></i> fa-life-ring</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-life-saver"></i> fa-life-saver
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-lightbulb-o"></i> fa-lightbulb-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-line-chart"></i> fa-line-chart</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-location-arrow"></i> fa-location-arrow</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-lock"></i> fa-lock</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-magic"></i> fa-magic</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-magnet"></i> fa-magnet</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-mail-forward"></i> fa-mail-forward
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-mail-reply"></i> fa-mail-reply
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-mail-reply-all"></i> fa-mail-reply-all
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-male"></i> fa-male</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-map"></i> fa-map</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-map-marker"></i> fa-map-marker</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-map-o"></i> fa-map-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-map-pin"></i> fa-map-pin</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-map-signs"></i> fa-map-signs</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-meh-o"></i> fa-meh-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-microphone"></i> fa-microphone</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-microphone-slash"></i> fa-microphone-slash
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-minus"></i> fa-minus</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-minus-circle"></i> fa-minus-circle</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-minus-square"></i> fa-minus-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-minus-square-o"></i> fa-minus-square-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-mobile"></i> fa-mobile</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-mobile-phone"></i> fa-mobile-phone
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-money"></i> fa-money</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-moon-o"></i> fa-moon-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-mortar-board"></i> fa-mortar-board
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-motorcycle"></i> fa-motorcycle</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-mouse-pointer"></i> fa-mouse-pointer</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-music"></i> fa-music</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-navicon"></i> fa-navicon
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-newspaper-o"></i> fa-newspaper-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-object-group"></i> fa-object-group</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-object-ungroup"></i> fa-object-ungroup</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-paint-brush"></i> fa-paint-brush</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-paper-plane"></i> fa-paper-plane</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-paper-plane-o"></i> fa-paper-plane-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-paw"></i> fa-paw</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-pencil"></i> fa-pencil</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-pencil-square"></i> fa-pencil-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-pencil-square-o"></i> fa-pencil-square-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-phone"></i> fa-phone</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-phone-square"></i> fa-phone-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-photo"></i> fa-photo <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-picture-o"></i> fa-picture-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-pie-chart"></i> fa-pie-chart</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-plane"></i> fa-plane</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-plug"></i> fa-plug</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-plus"></i> fa-plus</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-plus-circle"></i> fa-plus-circle</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-plus-square"></i> fa-plus-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-plus-square-o"></i> fa-plus-square-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-power-off"></i> fa-power-off</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-print"></i> fa-print</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-puzzle-piece"></i> fa-puzzle-piece</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-qrcode"></i> fa-qrcode</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-question"></i> fa-question</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-question-circle"></i> fa-question-circle</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-quote-left"></i> fa-quote-left</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-quote-right"></i> fa-quote-right</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-random"></i> fa-random</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-recycle"></i> fa-recycle</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-refresh"></i> fa-refresh</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-registered"></i> fa-registered</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-remove"></i> fa-remove
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-reorder"></i> fa-reorder
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-reply"></i> fa-reply</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-reply-all"></i> fa-reply-all</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-retweet"></i> fa-retweet</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-road"></i> fa-road</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-rocket"></i> fa-rocket</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-rss"></i> fa-rss</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-rss-square"></i> fa-rss-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-search"></i> fa-search</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-search-minus"></i> fa-search-minus</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-search-plus"></i> fa-search-plus</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-send"></i> fa-send <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-send-o"></i> fa-send-o
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-server"></i> fa-server</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-share"></i> fa-share</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-share-alt"></i> fa-share-alt</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-share-alt-square"></i> fa-share-alt-square
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-share-square"></i> fa-share-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-share-square-o"></i> fa-share-square-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-shield"></i> fa-shield</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-ship"></i> fa-ship</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-shopping-cart"></i> fa-shopping-cart</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-sign-in"></i> fa-sign-in</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-sign-out"></i> fa-sign-out</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-signal"></i> fa-signal</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-sitemap"></i> fa-sitemap</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-sliders"></i> fa-sliders</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-smile-o"></i> fa-smile-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-soccer-ball-o"></i> fa-soccer-ball-o
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-sort"></i> fa-sort</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-sort-alpha-asc"></i> fa-sort-alpha-asc</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-sort-alpha-desc"></i> fa-sort-alpha-desc</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-sort-amount-asc"></i> fa-sort-amount-asc</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-sort-amount-desc"></i> fa-sort-amount-desc
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-sort-asc"></i> fa-sort-asc</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-sort-desc"></i> fa-sort-desc</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-sort-down"></i> fa-sort-down
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-sort-numeric-asc"></i> fa-sort-numeric-asc
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-sort-numeric-desc"></i> fa-sort-numeric-desc
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-sort-up"></i> fa-sort-up
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-space-shuttle"></i> fa-space-shuttle</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-spinner"></i> fa-spinner</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-spoon"></i> fa-spoon</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-square"></i> fa-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-square-o"></i> fa-square-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-star"></i> fa-star</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-star-half"></i> fa-star-half</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-star-half-empty"></i> fa-star-half-empty
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-star-half-full"></i> fa-star-half-full
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-star-half-o"></i> fa-star-half-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-star-o"></i> fa-star-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-sticky-note"></i> fa-sticky-note</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-sticky-note-o"></i> fa-sticky-note-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-street-view"></i> fa-street-view</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-suitcase"></i> fa-suitcase</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-sun-o"></i> fa-sun-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-support"></i> fa-support
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-tablet"></i> fa-tablet</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-tachometer"></i> fa-tachometer</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-tag"></i> fa-tag</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-tags"></i> fa-tags</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-tasks"></i> fa-tasks</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-taxi"></i> fa-taxi</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-television"></i> fa-television</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-terminal"></i> fa-terminal</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-thumb-tack"></i> fa-thumb-tack</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-thumbs-down"></i> fa-thumbs-down</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-thumbs-o-down"></i> fa-thumbs-o-down</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-thumbs-o-up"></i> fa-thumbs-o-up</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-thumbs-up"></i> fa-thumbs-up</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-ticket"></i> fa-ticket</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-times"></i> fa-times</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-times-circle"></i> fa-times-circle</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-times-circle-o"></i> fa-times-circle-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-tint"></i> fa-tint</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-toggle-down"></i> fa-toggle-down
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-toggle-left"></i> fa-toggle-left
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-toggle-off"></i> fa-toggle-off</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-toggle-on"></i> fa-toggle-on</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-toggle-right"></i> fa-toggle-right
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-toggle-up"></i> fa-toggle-up
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-trademark"></i> fa-trademark</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-trash"></i> fa-trash</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-trash-o"></i> fa-trash-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-tree"></i> fa-tree</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-trophy"></i> fa-trophy</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-truck"></i> fa-truck</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-tty"></i> fa-tty</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-tv"></i> fa-tv
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-umbrella"></i> fa-umbrella</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-university"></i> fa-university</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-unlock"></i> fa-unlock</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-unlock-alt"></i> fa-unlock-alt</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-unsorted"></i> fa-unsorted
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-upload"></i> fa-upload</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-user"></i> fa-user</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-user-plus"></i> fa-user-plus</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-user-secret"></i> fa-user-secret</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-user-times"></i> fa-user-times</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-users"></i> fa-users</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-video-camera"></i> fa-video-camera</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-volume-down"></i> fa-volume-down</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-volume-off"></i> fa-volume-off</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-volume-up"></i> fa-volume-up</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-warning"></i> fa-warning
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-wheelchair"></i> fa-wheelchair</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-wifi"></i> fa-wifi</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-wrench"></i> fa-wrench</div>
+ </div>
+ </section>
+
+ <section id="hand">
+ <h4 class="page-header">Hand Icons</h4>
+
+ <div class="row fontawesome-icon-list">
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-grab-o"></i> fa-hand-grab-o
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-lizard-o"></i> fa-hand-lizard-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-o-down"></i> fa-hand-o-down</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-o-left"></i> fa-hand-o-left</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-o-right"></i> fa-hand-o-right</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-o-up"></i> fa-hand-o-up</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-paper-o"></i> fa-hand-paper-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-peace-o"></i> fa-hand-peace-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-pointer-o"></i> fa-hand-pointer-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-rock-o"></i> fa-hand-rock-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-scissors-o"></i> fa-hand-scissors-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-spock-o"></i> fa-hand-spock-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-stop-o"></i> fa-hand-stop-o
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-thumbs-down"></i> fa-thumbs-down</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-thumbs-o-down"></i> fa-thumbs-o-down</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-thumbs-o-up"></i> fa-thumbs-o-up</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-thumbs-up"></i> fa-thumbs-up</div>
+ </div>
+ </section>
+
+ <section id="transportation">
+ <h4 class="page-header">Transportation Icons</h4>
+
+ <div class="row fontawesome-icon-list">
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-ambulance"></i> fa-ambulance</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-automobile"></i> fa-automobile
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bicycle"></i> fa-bicycle</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bus"></i> fa-bus</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cab"></i> fa-cab <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-car"></i> fa-car</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-fighter-jet"></i> fa-fighter-jet</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-motorcycle"></i> fa-motorcycle</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-plane"></i> fa-plane</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-rocket"></i> fa-rocket</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-ship"></i> fa-ship</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-space-shuttle"></i> fa-space-shuttle</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-subway"></i> fa-subway</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-taxi"></i> fa-taxi</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-train"></i> fa-train</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-truck"></i> fa-truck</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-wheelchair"></i> fa-wheelchair</div>
+ </div>
+ </section>
+
+ <section id="gender">
+ <h4 class="page-header">Gender Icons</h4>
+
+ <div class="row fontawesome-icon-list">
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-genderless"></i> fa-genderless</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-intersex"></i> fa-intersex
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-mars"></i> fa-mars</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-mars-double"></i> fa-mars-double</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-mars-stroke"></i> fa-mars-stroke</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-mars-stroke-h"></i> fa-mars-stroke-h</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-mars-stroke-v"></i> fa-mars-stroke-v</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-mercury"></i> fa-mercury</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-neuter"></i> fa-neuter</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-transgender"></i> fa-transgender</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-transgender-alt"></i> fa-transgender-alt</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-venus"></i> fa-venus</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-venus-double"></i> fa-venus-double</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-venus-mars"></i> fa-venus-mars</div>
+ </div>
+ </section>
+
+ <section id="file-type">
+ <h2 class="page-header">File Type Icons</h2>
+
+ <div class="row fontawesome-icon-list">
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file"></i> fa-file</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-archive-o"></i> fa-file-archive-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-audio-o"></i> fa-file-audio-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-code-o"></i> fa-file-code-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-excel-o"></i> fa-file-excel-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-image-o"></i> fa-file-image-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-movie-o"></i> fa-file-movie-o
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-o"></i> fa-file-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-pdf-o"></i> fa-file-pdf-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-photo-o"></i> fa-file-photo-o
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-picture-o"></i> fa-file-picture-o
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-powerpoint-o"></i> fa-file-powerpoint-o
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-sound-o"></i> fa-file-sound-o
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-text"></i> fa-file-text</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-text-o"></i> fa-file-text-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-video-o"></i> fa-file-video-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-word-o"></i> fa-file-word-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-zip-o"></i> fa-file-zip-o
+ <span class="text-muted">(alias)</span></div>
+ </div>
+ </section>
+
+ <section id="spinner">
+ <h2 class="page-header">Spinner Icons</h2>
+
+ <div class="row fontawesome-icon-list">
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-circle-o-notch"></i> fa-circle-o-notch</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cog"></i> fa-cog</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-gear"></i> fa-gear <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-refresh"></i> fa-refresh</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-spinner"></i> fa-spinner</div>
+ </div>
+ </section>
+
+ <section id="form-control">
+ <h4 class="page-header">Form Control Icons</h4>
+
+ <div class="row fontawesome-icon-list">
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-check-square"></i> fa-check-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-check-square-o"></i> fa-check-square-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-circle"></i> fa-circle</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-circle-o"></i> fa-circle-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-dot-circle-o"></i> fa-dot-circle-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-minus-square"></i> fa-minus-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-minus-square-o"></i> fa-minus-square-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-plus-square"></i> fa-plus-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-plus-square-o"></i> fa-plus-square-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-square"></i> fa-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-square-o"></i> fa-square-o</div>
+ </div>
+ </section>
+
+ <section id="payment">
+ <h4 class="page-header">Payment Icons</h4>
+
+ <div class="row fontawesome-icon-list">
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cc-amex"></i> fa-cc-amex</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cc-diners-club"></i> fa-cc-diners-club</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cc-discover"></i> fa-cc-discover</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cc-jcb"></i> fa-cc-jcb</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cc-mastercard"></i> fa-cc-mastercard</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cc-paypal"></i> fa-cc-paypal</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cc-stripe"></i> fa-cc-stripe</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cc-visa"></i> fa-cc-visa</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-credit-card"></i> fa-credit-card</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-google-wallet"></i> fa-google-wallet</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-paypal"></i> fa-paypal</div>
+ </div>
+ </section>
+
+ <section id="chart">
+ <h4 class="page-header">Chart Icons</h4>
+
+ <div class="row fontawesome-icon-list">
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-area-chart"></i> fa-area-chart</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bar-chart"></i> fa-bar-chart</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bar-chart-o"></i> fa-bar-chart-o
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-line-chart"></i> fa-line-chart</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-pie-chart"></i> fa-pie-chart</div>
+ </div>
+ </section>
+
+ <section id="currency">
+ <h4 class="page-header">Currency Icons</h4>
+
+ <div class="row fontawesome-icon-list">
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bitcoin"></i> fa-bitcoin
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-btc"></i> fa-btc</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cny"></i> fa-cny <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-dollar"></i> fa-dollar
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-eur"></i> fa-eur</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-euro"></i> fa-euro <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-gbp"></i> fa-gbp</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-gg"></i> fa-gg</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-gg-circle"></i> fa-gg-circle</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-ils"></i> fa-ils</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-inr"></i> fa-inr</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-jpy"></i> fa-jpy</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-krw"></i> fa-krw</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-money"></i> fa-money</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-rmb"></i> fa-rmb <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-rouble"></i> fa-rouble
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-rub"></i> fa-rub</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-ruble"></i> fa-ruble <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-rupee"></i> fa-rupee <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-shekel"></i> fa-shekel
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-sheqel"></i> fa-sheqel
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-try"></i> fa-try</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-turkish-lira"></i> fa-turkish-lira
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-usd"></i> fa-usd</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-won"></i> fa-won <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-yen"></i> fa-yen <span class="text-muted">(alias)</span>
+ </div>
+ </div>
+ </section>
+
+ <section id="text-editor">
+ <h4 class="page-header">Text Editor Icons</h4>
+
+ <div class="row fontawesome-icon-list">
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-align-center"></i> fa-align-center</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-align-justify"></i> fa-align-justify</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-align-left"></i> fa-align-left</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-align-right"></i> fa-align-right</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bold"></i> fa-bold</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-chain"></i> fa-chain <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-chain-broken"></i> fa-chain-broken</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-clipboard"></i> fa-clipboard</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-columns"></i> fa-columns</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-copy"></i> fa-copy <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cut"></i> fa-cut <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-dedent"></i> fa-dedent
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-eraser"></i> fa-eraser</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file"></i> fa-file</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-o"></i> fa-file-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-text"></i> fa-file-text</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-file-text-o"></i> fa-file-text-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-files-o"></i> fa-files-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-floppy-o"></i> fa-floppy-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-font"></i> fa-font</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-header"></i> fa-header</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-indent"></i> fa-indent</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-italic"></i> fa-italic</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-link"></i> fa-link</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-list"></i> fa-list</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-list-alt"></i> fa-list-alt</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-list-ol"></i> fa-list-ol</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-list-ul"></i> fa-list-ul</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-outdent"></i> fa-outdent</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-paperclip"></i> fa-paperclip</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-paragraph"></i> fa-paragraph</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-paste"></i> fa-paste <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-repeat"></i> fa-repeat</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-rotate-left"></i> fa-rotate-left
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-rotate-right"></i> fa-rotate-right
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-save"></i> fa-save <span class="text-muted">(alias)</span>
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-scissors"></i> fa-scissors</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-strikethrough"></i> fa-strikethrough</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-subscript"></i> fa-subscript</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-superscript"></i> fa-superscript</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-table"></i> fa-table</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-text-height"></i> fa-text-height</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-text-width"></i> fa-text-width</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-th"></i> fa-th</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-th-large"></i> fa-th-large</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-th-list"></i> fa-th-list</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-underline"></i> fa-underline</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-undo"></i> fa-undo</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-unlink"></i> fa-unlink
+ <span class="text-muted">(alias)</span></div>
+ </div>
+ </section>
+
+ <section id="directional">
+ <h4 class="page-header">Directional Icons</h4>
+
+ <div class="row fontawesome-icon-list">
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-angle-double-down"></i> fa-angle-double-down
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-angle-double-left"></i> fa-angle-double-left
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-angle-double-right"></i> fa-angle-double-right
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-angle-double-up"></i> fa-angle-double-up</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-angle-down"></i> fa-angle-down</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-angle-left"></i> fa-angle-left</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-angle-right"></i> fa-angle-right</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-angle-up"></i> fa-angle-up</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-arrow-circle-down"></i> fa-arrow-circle-down
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-arrow-circle-left"></i> fa-arrow-circle-left
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-arrow-circle-o-down"></i>
+ fa-arrow-circle-o-down
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-arrow-circle-o-left"></i>
+ fa-arrow-circle-o-left
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-arrow-circle-o-right"></i>
+ fa-arrow-circle-o-right
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-arrow-circle-o-up"></i> fa-arrow-circle-o-up
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-arrow-circle-right"></i> fa-arrow-circle-right
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-arrow-circle-up"></i> fa-arrow-circle-up</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-arrow-down"></i> fa-arrow-down</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-arrow-left"></i> fa-arrow-left</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-arrow-right"></i> fa-arrow-right</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-arrow-up"></i> fa-arrow-up</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-arrows"></i> fa-arrows</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-arrows-alt"></i> fa-arrows-alt</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-arrows-h"></i> fa-arrows-h</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-arrows-v"></i> fa-arrows-v</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-caret-down"></i> fa-caret-down</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-caret-left"></i> fa-caret-left</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-caret-right"></i> fa-caret-right</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-caret-square-o-down"></i>
+ fa-caret-square-o-down
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-caret-square-o-left"></i>
+ fa-caret-square-o-left
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-caret-square-o-right"></i>
+ fa-caret-square-o-right
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-caret-square-o-up"></i> fa-caret-square-o-up
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-caret-up"></i> fa-caret-up</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-chevron-circle-down"></i>
+ fa-chevron-circle-down
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-chevron-circle-left"></i>
+ fa-chevron-circle-left
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-chevron-circle-right"></i>
+ fa-chevron-circle-right
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-chevron-circle-up"></i> fa-chevron-circle-up
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-chevron-down"></i> fa-chevron-down</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-chevron-left"></i> fa-chevron-left</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-chevron-right"></i> fa-chevron-right</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-chevron-up"></i> fa-chevron-up</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-exchange"></i> fa-exchange</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-o-down"></i> fa-hand-o-down</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-o-left"></i> fa-hand-o-left</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-o-right"></i> fa-hand-o-right</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hand-o-up"></i> fa-hand-o-up</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-long-arrow-down"></i> fa-long-arrow-down</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-long-arrow-left"></i> fa-long-arrow-left</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-long-arrow-right"></i> fa-long-arrow-right
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-long-arrow-up"></i> fa-long-arrow-up</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-toggle-down"></i> fa-toggle-down
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-toggle-left"></i> fa-toggle-left
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-toggle-right"></i> fa-toggle-right
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-toggle-up"></i> fa-toggle-up
+ <span class="text-muted">(alias)</span></div>
+ </div>
+ </section>
+
+ <section id="video-player">
+ <h4 class="page-header">Video Player Icons</h4>
+
+ <div class="row fontawesome-icon-list">
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-arrows-alt"></i> fa-arrows-alt</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-backward"></i> fa-backward</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-compress"></i> fa-compress</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-eject"></i> fa-eject</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-expand"></i> fa-expand</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-fast-backward"></i> fa-fast-backward</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-fast-forward"></i> fa-fast-forward</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-forward"></i> fa-forward</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-pause"></i> fa-pause</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-play"></i> fa-play</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-play-circle"></i> fa-play-circle</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-play-circle-o"></i> fa-play-circle-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-random"></i> fa-random</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-step-backward"></i> fa-step-backward</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-step-forward"></i> fa-step-forward</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-stop"></i> fa-stop</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-youtube-play"></i> fa-youtube-play</div>
+ </div>
+ </section>
+
+ <section id="brand">
+ <h4 class="page-header">Brand Icons</h4>
+
+ <div class="alert alert-info">
+ <ul class="margin-bottom-none padding-left-lg">
+ <li>All brand icons are trademarks of their respective owners.</li>
+ <li>The use of these trademarks does not indicate endorsement of the trademark holder by Font
+ Awesome, nor vice versa.
+ </li>
+ </ul>
+ </div>
+ <div class="row fontawesome-icon-list">
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-500px"></i> fa-500px</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-adn"></i> fa-adn</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-amazon"></i> fa-amazon</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-android"></i> fa-android</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-angellist"></i> fa-angellist</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-apple"></i> fa-apple</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-behance"></i> fa-behance</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-behance-square"></i> fa-behance-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bitbucket"></i> fa-bitbucket</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bitbucket-square"></i> fa-bitbucket-square
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-bitcoin"></i> fa-bitcoin
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-black-tie"></i> fa-black-tie</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-btc"></i> fa-btc</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-buysellads"></i> fa-buysellads</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cc-amex"></i> fa-cc-amex</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cc-diners-club"></i> fa-cc-diners-club</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cc-discover"></i> fa-cc-discover</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cc-jcb"></i> fa-cc-jcb</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cc-mastercard"></i> fa-cc-mastercard</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cc-paypal"></i> fa-cc-paypal</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cc-stripe"></i> fa-cc-stripe</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-cc-visa"></i> fa-cc-visa</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-chrome"></i> fa-chrome</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-codepen"></i> fa-codepen</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-connectdevelop"></i> fa-connectdevelop</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-contao"></i> fa-contao</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-css3"></i> fa-css3</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-dashcube"></i> fa-dashcube</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-delicious"></i> fa-delicious</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-deviantart"></i> fa-deviantart</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-digg"></i> fa-digg</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-dribbble"></i> fa-dribbble</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-dropbox"></i> fa-dropbox</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-drupal"></i> fa-drupal</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-empire"></i> fa-empire</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-expeditedssl"></i> fa-expeditedssl</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-facebook"></i> fa-facebook</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-facebook-f"></i> fa-facebook-f
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-facebook-official"></i> fa-facebook-official
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-facebook-square"></i> fa-facebook-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-firefox"></i> fa-firefox</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-flickr"></i> fa-flickr</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-fonticons"></i> fa-fonticons</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-forumbee"></i> fa-forumbee</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-foursquare"></i> fa-foursquare</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-ge"></i> fa-ge
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-get-pocket"></i> fa-get-pocket</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-gg"></i> fa-gg</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-gg-circle"></i> fa-gg-circle</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-git"></i> fa-git</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-git-square"></i> fa-git-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-github"></i> fa-github</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-github-alt"></i> fa-github-alt</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-github-square"></i> fa-github-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-gittip"></i> fa-gittip
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-google"></i> fa-google</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-google-plus"></i> fa-google-plus</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-google-plus-square"></i> fa-google-plus-square
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-google-wallet"></i> fa-google-wallet</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-gratipay"></i> fa-gratipay</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hacker-news"></i> fa-hacker-news</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-houzz"></i> fa-houzz</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-html5"></i> fa-html5</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-instagram"></i> fa-instagram</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-internet-explorer"></i> fa-internet-explorer
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-ioxhost"></i> fa-ioxhost</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-joomla"></i> fa-joomla</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-jsfiddle"></i> fa-jsfiddle</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-lastfm"></i> fa-lastfm</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-lastfm-square"></i> fa-lastfm-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-leanpub"></i> fa-leanpub</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-linkedin"></i> fa-linkedin</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-linkedin-square"></i> fa-linkedin-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-linux"></i> fa-linux</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-maxcdn"></i> fa-maxcdn</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-meanpath"></i> fa-meanpath</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-medium"></i> fa-medium</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-odnoklassniki"></i> fa-odnoklassniki</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-odnoklassniki-square"></i>
+ fa-odnoklassniki-square
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-opencart"></i> fa-opencart</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-openid"></i> fa-openid</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-opera"></i> fa-opera</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-optin-monster"></i> fa-optin-monster</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-pagelines"></i> fa-pagelines</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-paypal"></i> fa-paypal</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-pied-piper"></i> fa-pied-piper</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-pied-piper-alt"></i> fa-pied-piper-alt</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-pinterest"></i> fa-pinterest</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-pinterest-p"></i> fa-pinterest-p</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-pinterest-square"></i> fa-pinterest-square
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-qq"></i> fa-qq</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-ra"></i> fa-ra
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-rebel"></i> fa-rebel</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-reddit"></i> fa-reddit</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-reddit-square"></i> fa-reddit-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-renren"></i> fa-renren</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-safari"></i> fa-safari</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-sellsy"></i> fa-sellsy</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-share-alt"></i> fa-share-alt</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-share-alt-square"></i> fa-share-alt-square
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-shirtsinbulk"></i> fa-shirtsinbulk</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-simplybuilt"></i> fa-simplybuilt</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-skyatlas"></i> fa-skyatlas</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-skype"></i> fa-skype</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-slack"></i> fa-slack</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-slideshare"></i> fa-slideshare</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-soundcloud"></i> fa-soundcloud</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-spotify"></i> fa-spotify</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-stack-exchange"></i> fa-stack-exchange</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-stack-overflow"></i> fa-stack-overflow</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-steam"></i> fa-steam</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-steam-square"></i> fa-steam-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-stumbleupon"></i> fa-stumbleupon</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-stumbleupon-circle"></i> fa-stumbleupon-circle
+ </div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-tencent-weibo"></i> fa-tencent-weibo</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-trello"></i> fa-trello</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-tripadvisor"></i> fa-tripadvisor</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-tumblr"></i> fa-tumblr</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-tumblr-square"></i> fa-tumblr-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-twitch"></i> fa-twitch</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-twitter"></i> fa-twitter</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-twitter-square"></i> fa-twitter-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-viacoin"></i> fa-viacoin</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-vimeo"></i> fa-vimeo</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-vimeo-square"></i> fa-vimeo-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-vine"></i> fa-vine</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-vk"></i> fa-vk</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-wechat"></i> fa-wechat
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-weibo"></i> fa-weibo</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-weixin"></i> fa-weixin</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-whatsapp"></i> fa-whatsapp</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-wikipedia-w"></i> fa-wikipedia-w</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-windows"></i> fa-windows</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-wordpress"></i> fa-wordpress</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-xing"></i> fa-xing</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-xing-square"></i> fa-xing-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-y-combinator"></i> fa-y-combinator</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-y-combinator-square"></i>
+ fa-y-combinator-square <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-yahoo"></i> fa-yahoo</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-yc"></i> fa-yc
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-yc-square"></i> fa-yc-square
+ <span class="text-muted">(alias)</span></div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-yelp"></i> fa-yelp</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-youtube"></i> fa-youtube</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-youtube-play"></i> fa-youtube-play</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-youtube-square"></i> fa-youtube-square</div>
+ </div>
+ </section>
+
+ <section id="medical">
+ <h4 class="page-header">Medical Icons</h4>
+
+ <div class="row">
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-ambulance"></i> fa-ambulance</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-h-square"></i> fa-h-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-heart"></i> fa-heart</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-heart-o"></i> fa-heart-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-heartbeat"></i> fa-heartbeat</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-hospital-o"></i> fa-hospital-o</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-medkit"></i> fa-medkit</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-plus-square"></i> fa-plus-square</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-stethoscope"></i> fa-stethoscope</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-user-md"></i> fa-user-md</div>
+ <div class="col-md-3 col-sm-4"><i class="fa fa-fw fa-wheelchair"></i> fa-wheelchair</div>
+ </div>
+ </section>
+ </div>
+ <!-- /#fa-icons -->
+
+ <!-- glyphicons-->
+ <div class="tab-pane" id="glyphicons">
+
+ <ul class="bs-glyphicons">
+ <li>
+ <span class="glyphicon glyphicon-asterisk"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-asterisk</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-plus"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-plus</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-euro"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-euro</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-eur"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-eur</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-minus"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-minus</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-cloud"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-cloud</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-envelope"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-envelope</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-pencil"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-pencil</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-glass"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-glass</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-music"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-music</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-search"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-search</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-heart"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-heart</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-star"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-star</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-star-empty"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-star-empty</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-user"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-user</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-film"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-film</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-th-large"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-th-large</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-th"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-th</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-th-list"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-th-list</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-ok"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-ok</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-remove"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-remove</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-zoom-in"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-zoom-in</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-zoom-out"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-zoom-out</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-off"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-off</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-signal"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-signal</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-cog"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-cog</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-trash"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-trash</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-home"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-home</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-file"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-file</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-time"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-time</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-road"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-road</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-download-alt"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-download-alt</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-download"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-download</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-upload"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-upload</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-inbox"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-inbox</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-play-circle"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-play-circle</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-repeat"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-repeat</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-refresh"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-refresh</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-list-alt"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-list-alt</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-lock"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-lock</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-flag"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-flag</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-headphones"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-headphones</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-volume-off"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-volume-off</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-volume-down"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-volume-down</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-volume-up"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-volume-up</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-qrcode"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-qrcode</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-barcode"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-barcode</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-tag"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-tag</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-tags"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-tags</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-book"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-book</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-bookmark"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-bookmark</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-print"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-print</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-camera"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-camera</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-font"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-font</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-bold"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-bold</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-italic"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-italic</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-text-height"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-text-height</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-text-width"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-text-width</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-align-left"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-align-left</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-align-center"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-align-center</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-align-right"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-align-right</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-align-justify"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-align-justify</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-list"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-list</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-indent-left"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-indent-left</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-indent-right"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-indent-right</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-facetime-video"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-facetime-video</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-picture"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-picture</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-map-marker"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-map-marker</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-adjust"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-adjust</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-tint"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-tint</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-edit"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-edit</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-share"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-share</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-check"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-check</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-move"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-move</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-step-backward"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-step-backward</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-fast-backward"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-fast-backward</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-backward"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-backward</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-play"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-play</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-pause"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-pause</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-stop"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-stop</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-forward"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-forward</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-fast-forward"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-fast-forward</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-step-forward"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-step-forward</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-eject"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-eject</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-chevron-left"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-chevron-left</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-chevron-right"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-chevron-right</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-plus-sign"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-plus-sign</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-minus-sign"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-minus-sign</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-remove-sign"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-remove-sign</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-ok-sign"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-ok-sign</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-question-sign"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-question-sign</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-info-sign"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-info-sign</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-screenshot"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-screenshot</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-remove-circle"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-remove-circle</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-ok-circle"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-ok-circle</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-ban-circle"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-ban-circle</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-arrow-left"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-arrow-left</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-arrow-right"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-arrow-right</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-arrow-up"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-arrow-up</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-arrow-down"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-arrow-down</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-share-alt"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-share-alt</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-resize-full"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-resize-full</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-resize-small"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-resize-small</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-exclamation-sign"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-exclamation-sign</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-gift"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-gift</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-leaf"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-leaf</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-fire"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-fire</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-eye-open"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-eye-open</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-eye-close"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-eye-close</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-warning-sign"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-warning-sign</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-plane"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-plane</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-calendar"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-calendar</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-random"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-random</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-comment"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-comment</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-magnet"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-magnet</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-chevron-up"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-chevron-up</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-chevron-down"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-chevron-down</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-retweet"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-retweet</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-shopping-cart"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-shopping-cart</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-folder-close"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-folder-close</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-folder-open"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-folder-open</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-resize-vertical"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-resize-vertical</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-resize-horizontal"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-resize-horizontal</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-hdd"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-hdd</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-bullhorn"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-bullhorn</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-bell"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-bell</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-certificate"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-certificate</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-thumbs-up"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-thumbs-up</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-thumbs-down"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-thumbs-down</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-hand-right"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-hand-right</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-hand-left"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-hand-left</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-hand-up"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-hand-up</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-hand-down"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-hand-down</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-circle-arrow-right"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-circle-arrow-right</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-circle-arrow-left"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-circle-arrow-left</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-circle-arrow-up"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-circle-arrow-up</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-circle-arrow-down"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-circle-arrow-down</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-globe"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-globe</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-wrench"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-wrench</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-tasks"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-tasks</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-filter"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-filter</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-briefcase"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-briefcase</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-fullscreen"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-fullscreen</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-dashboard"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-dashboard</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-paperclip"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-paperclip</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-heart-empty"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-heart-empty</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-link"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-link</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-phone"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-phone</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-pushpin"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-pushpin</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-usd"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-usd</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-gbp"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-gbp</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-sort"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-sort</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-sort-by-alphabet"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-sort-by-alphabet</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-sort-by-alphabet-alt"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-sort-by-alphabet-alt</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-sort-by-order"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-sort-by-order</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-sort-by-order-alt"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-sort-by-order-alt</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-sort-by-attributes"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-sort-by-attributes</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-sort-by-attributes-alt</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-unchecked"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-unchecked</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-expand"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-expand</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-collapse-down"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-collapse-down</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-collapse-up"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-collapse-up</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-log-in"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-log-in</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-flash"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-flash</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-log-out"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-log-out</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-new-window"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-new-window</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-record"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-record</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-save"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-save</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-open"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-open</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-saved"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-saved</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-import"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-import</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-export"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-export</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-send"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-send</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-floppy-disk"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-floppy-disk</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-floppy-saved"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-floppy-saved</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-floppy-remove"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-floppy-remove</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-floppy-save"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-floppy-save</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-floppy-open"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-floppy-open</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-credit-card"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-credit-card</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-transfer"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-transfer</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-cutlery"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-cutlery</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-header"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-header</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-compressed"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-compressed</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-earphone"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-earphone</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-phone-alt"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-phone-alt</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-tower"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-tower</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-stats"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-stats</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-sd-video"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-sd-video</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-hd-video"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-hd-video</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-subtitles"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-subtitles</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-sound-stereo"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-sound-stereo</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-sound-dolby"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-sound-dolby</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-sound-5-1"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-sound-5-1</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-sound-6-1"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-sound-6-1</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-sound-7-1"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-sound-7-1</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-copyright-mark"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-copyright-mark</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-registration-mark"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-registration-mark</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-cloud-download"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-cloud-download</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-cloud-upload"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-cloud-upload</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-tree-conifer"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-tree-conifer</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-tree-deciduous"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-tree-deciduous</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-cd"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-cd</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-save-file"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-save-file</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-open-file"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-open-file</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-level-up"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-level-up</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-copy"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-copy</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-paste"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-paste</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-alert"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-alert</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-equalizer"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-equalizer</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-king"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-king</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-queen"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-queen</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-pawn"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-pawn</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-bishop"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-bishop</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-knight"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-knight</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-baby-formula"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-baby-formula</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-tent"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-tent</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-blackboard"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-blackboard</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-bed"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-bed</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-apple"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-apple</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-erase"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-erase</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-hourglass"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-hourglass</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-lamp"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-lamp</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-duplicate"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-duplicate</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-piggy-bank"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-piggy-bank</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-scissors"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-scissors</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-bitcoin"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-bitcoin</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-btc"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-btc</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-xbt"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-xbt</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-yen"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-yen</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-jpy"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-jpy</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-ruble"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-ruble</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-rub"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-rub</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-scale"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-scale</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-ice-lolly"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-ice-lolly</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-ice-lolly-tasted"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-ice-lolly-tasted</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-education"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-education</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-option-horizontal"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-option-horizontal</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-option-vertical"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-option-vertical</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-menu-hamburger"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-menu-hamburger</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-modal-window"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-modal-window</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-oil"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-oil</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-grain"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-grain</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-sunglasses"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-sunglasses</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-text-size"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-text-size</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-text-color"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-text-color</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-text-background"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-text-background</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-object-align-top"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-object-align-top</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-object-align-bottom"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-object-align-bottom</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-object-align-horizontal"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-object-align-horizontal</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-object-align-left"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-object-align-left</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-object-align-vertical"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-object-align-vertical</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-object-align-right"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-object-align-right</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-triangle-right"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-triangle-right</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-triangle-left"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-triangle-left</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-triangle-bottom"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-triangle-bottom</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-triangle-top"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-triangle-top</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-console"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-console</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-superscript"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-superscript</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-subscript"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-subscript</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-menu-left"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-menu-left</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-menu-right"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-menu-right</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-menu-down"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-menu-down</span>
+ </li>
+ <li>
+ <span class="glyphicon glyphicon-menu-up"></span>
+ <span class="glyphicon-class">glyphicon glyphicon-menu-up</span>
+ </li>
+ </ul>
+ </div>
+ <!-- /#ion-icons -->
+
+ </div>
+ <!-- /.tab-content -->
+ </div>
+ <!-- /.nav-tabs-custom -->
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+</section>
+<!-- /.content -->
diff --git a/grails-app/assets/templates/xdashangular/UI/modals.html b/grails-app/assets/templates/xdashangular/UI/modals.html
index de155ea..caf4dea 100644
--- a/grails-app/assets/templates/xdashangular/UI/modals.html
+++ b/grails-app/assets/templates/xdashangular/UI/modals.html
@@ -1,10 +1,172 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <title>Title</title>
-</head>
-<body>
+<!-- Content Header (Page header) -->
+<section class="content-header">
+ <h1>
+ Modals
+ <small>new</small>
+ </h1>
+ <ol class="breadcrumb">
+ <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
+ <li><a href="#">UI</a></li>
+ <li class="active">Modals</li>
+ </ol>
+</section>
-</body>
-</html>
\ No newline at end of file
+<!-- Main content -->
+<section class="content">
+ <div class="callout callout-info">
+ <h4>Reminder!</h4>
+ Instructions for how to use modals are available on the
+ <a href="http://getbootstrap.com/javascript/#modals">Bootstrap documentation</a>
+ </div>
+
+ <div class="example-modal">
+ <div class="modal">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span></button>
+ <h4 class="modal-title">Default Modal</h4>
+ </div>
+ <div class="modal-body">
+ <p>One fine body…</p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+ </div>
+ <!-- /.modal-content -->
+ </div>
+ <!-- /.modal-dialog -->
+ </div>
+ <!-- /.modal -->
+ </div>
+ <!-- /.example-modal -->
+
+ <div class="example-modal">
+ <div class="modal modal-primary">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span></button>
+ <h4 class="modal-title">Primary Modal</h4>
+ </div>
+ <div class="modal-body">
+ <p>One fine body…</p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-outline">Save changes</button>
+ </div>
+ </div>
+ <!-- /.modal-content -->
+ </div>
+ <!-- /.modal-dialog -->
+ </div>
+ <!-- /.modal -->
+ </div>
+ <!-- /.example-modal -->
+
+ <div class="example-modal">
+ <div class="modal modal-info">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span></button>
+ <h4 class="modal-title">Info Modal</h4>
+ </div>
+ <div class="modal-body">
+ <p>One fine body…</p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-outline">Save changes</button>
+ </div>
+ </div>
+ <!-- /.modal-content -->
+ </div>
+ <!-- /.modal-dialog -->
+ </div>
+ <!-- /.modal -->
+ </div>
+ <!-- /.example-modal -->
+
+ <div class="example-modal">
+ <div class="modal modal-warning">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span></button>
+ <h4 class="modal-title">Warning Modal</h4>
+ </div>
+ <div class="modal-body">
+ <p>One fine body…</p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-outline">Save changes</button>
+ </div>
+ </div>
+ <!-- /.modal-content -->
+ </div>
+ <!-- /.modal-dialog -->
+ </div>
+ <!-- /.modal -->
+ </div>
+ <!-- /.example-modal -->
+
+ <div class="example-modal">
+ <div class="modal modal-success">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span></button>
+ <h4 class="modal-title">Success Modal</h4>
+ </div>
+ <div class="modal-body">
+ <p>One fine body…</p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-outline">Save changes</button>
+ </div>
+ </div>
+ <!-- /.modal-content -->
+ </div>
+ <!-- /.modal-dialog -->
+ </div>
+ <!-- /.modal -->
+ </div>
+ <!-- /.example-modal -->
+
+ <div class="example-modal">
+ <div class="modal modal-danger">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span></button>
+ <h4 class="modal-title">Danger Modal</h4>
+ </div>
+ <div class="modal-body">
+ <p>One fine body…</p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-outline">Save changes</button>
+ </div>
+ </div>
+ <!-- /.modal-content -->
+ </div>
+ <!-- /.modal-dialog -->
+ </div>
+ <!-- /.modal -->
+ </div>
+ <!-- /.example-modal -->
+</section>
+<!-- /.content -->
diff --git a/grails-app/assets/templates/xdashangular/UI/sliders.html b/grails-app/assets/templates/xdashangular/UI/sliders.html
index de155ea..f5c1395 100644
--- a/grails-app/assets/templates/xdashangular/UI/sliders.html
+++ b/grails-app/assets/templates/xdashangular/UI/sliders.html
@@ -1,10 +1,102 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <title>Title</title>
-</head>
-<body>
+<!-- Content Header (Page header) -->
+<section class="content-header">
+ <h1>
+ Sliders
+ <small>range sliders</small>
+ </h1>
+ <ol class="breadcrumb">
+ <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
+ <li><a href="#">UI</a></li>
+ <li class="active">Sliders</li>
+ </ol>
+</section>
-</body>
-</html>
\ No newline at end of file
+<!-- Main content -->
+<section class="content">
+ <div class="row">
+ <div class="col-xs-12">
+ <div class="box box-primary">
+ <div class="box-header">
+ <h3 class="box-title">Ion Slider</h3>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <div class="row margin">
+ <div class="col-sm-6">
+ <input id="range_1" type="text" name="range_1" value="">
+ </div>
+
+ <div class="col-sm-6">
+ <input id="range_2" type="text" name="range_2" value="1000;100000" data-type="double" data-step="500" data-postfix=" €" data-from="30000" data-to="90000" data-hasgrid="true">
+ </div>
+ </div>
+ <div class="row margin">
+ <div class="col-sm-6">
+ <input id="range_5" type="text" name="range_5" value="">
+ </div>
+ <div class="col-sm-6">
+ <input id="range_6" type="text" name="range_6" value="">
+ </div>
+ </div>
+ <div class="row margin">
+ <div class="col-sm-12">
+ <input id="range_4" type="text" name="range_4" value="10000;100000">
+ </div>
+ </div>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+
+ <div class="row">
+ <div class="col-xs-12">
+ <div class="box box-primary">
+ <div class="box-header">
+ <h3 class="box-title">Bootstrap Slider</h3>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <div class="row margin">
+ <div class="col-sm-6">
+ <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200" data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal" data-slider-selection="before" data-slider-tooltip="show" data-slider-id="red">
+
+ <p>data-slider-id="red"</p>
+ <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200" data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal" data-slider-selection="before" data-slider-tooltip="show" data-slider-id="blue">
+
+ <p>data-slider-id="blue"</p>
+ <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200" data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal" data-slider-selection="before" data-slider-tooltip="show" data-slider-id="green">
+
+ <p>data-slider-id="green"</p>
+ <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200" data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal" data-slider-selection="before" data-slider-tooltip="show" data-slider-id="yellow">
+
+ <p>data-slider-id="yellow"</p>
+ <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200" data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal" data-slider-selection="before" data-slider-tooltip="show" data-slider-id="aqua">
+
+ <p>data-slider-id="aqua"</p>
+ <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200" data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal" data-slider-selection="before" data-slider-tooltip="show" data-slider-id="purple">
+
+ <p style="margin-top: 10px">data-slider-id="purple"</p>
+ </div>
+ <div class="col-sm-6 text-center">
+ <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200" data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical" data-slider-selection="before" data-slider-tooltip="show" data-slider-id="red">
+ <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200" data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical" data-slider-selection="before" data-slider-tooltip="show" data-slider-id="blue">
+ <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200" data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical" data-slider-selection="before" data-slider-tooltip="show" data-slider-id="green">
+ <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200" data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical" data-slider-selection="before" data-slider-tooltip="show" data-slider-id="yellow">
+ <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200" data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical" data-slider-selection="before" data-slider-tooltip="show" data-slider-id="aqua">
+ <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200" data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical" data-slider-selection="before" data-slider-tooltip="show" data-slider-id="purple">
+ </div>
+ </div>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+</section>
+<!-- /.content -->
diff --git a/grails-app/assets/templates/xdashangular/UI/timeline.html b/grails-app/assets/templates/xdashangular/UI/timeline.html
index de155ea..9a57ab4 100644
--- a/grails-app/assets/templates/xdashangular/UI/timeline.html
+++ b/grails-app/assets/templates/xdashangular/UI/timeline.html
@@ -1,10 +1,189 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <title>Title</title>
-</head>
-<body>
+<!-- Content Header (Page header) -->
+<section class="content-header">
+ <h1>
+ Timeline
+ <small>example</small>
+ </h1>
+ <ol class="breadcrumb">
+ <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
+ <li><a href="#">UI</a></li>
+ <li class="active">Timeline</li>
+ </ol>
+</section>
-</body>
-</html>
\ No newline at end of file
+<!-- Main content -->
+<section class="content">
+
+ <!-- row -->
+ <div class="row">
+ <div class="col-md-12">
+ <!-- The time line -->
+ <ul class="timeline">
+ <!-- timeline time label -->
+ <li class="time-label">
+ <span class="bg-red">
+ 10 Feb. 2014
+ </span>
+ </li>
+ <!-- /.timeline-label -->
+ <!-- timeline item -->
+ <li>
+ <i class="fa fa-envelope bg-blue"></i>
+
+ <div class="timeline-item">
+ <span class="time"><i class="fa fa-clock-o"></i> 12:05</span>
+
+ <h3 class="timeline-header"><a href="#">Support Team</a> sent you an email</h3>
+
+ <div class="timeline-body">
+ Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles,
+ weebly ning heekya handango imeem plugg dopplr jibjab, movity
+ jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle
+ quora plaxo ideeli hulu weebly balihoo...
+ </div>
+ <div class="timeline-footer">
+ <a class="btn btn-primary btn-xs">Read more</a>
+ <a class="btn btn-danger btn-xs">Delete</a>
+ </div>
+ </div>
+ </li>
+ <!-- END timeline item -->
+ <!-- timeline item -->
+ <li>
+ <i class="fa fa-user bg-aqua"></i>
+
+ <div class="timeline-item">
+ <span class="time"><i class="fa fa-clock-o"></i> 5 mins ago</span>
+
+ <h3 class="timeline-header no-border"><a href="#">Sarah Young</a> accepted your friend request</h3>
+ </div>
+ </li>
+ <!-- END timeline item -->
+ <!-- timeline item -->
+ <li>
+ <i class="fa fa-comments bg-yellow"></i>
+
+ <div class="timeline-item">
+ <span class="time"><i class="fa fa-clock-o"></i> 27 mins ago</span>
+
+ <h3 class="timeline-header"><a href="#">Jay White</a> commented on your post</h3>
+
+ <div class="timeline-body">
+ Take me to your leader!
+ Switzerland is small and neutral!
+ We are more like Germany, ambitious and misunderstood!
+ </div>
+ <div class="timeline-footer">
+ <a class="btn btn-warning btn-flat btn-xs">View comment</a>
+ </div>
+ </div>
+ </li>
+ <!-- END timeline item -->
+ <!-- timeline time label -->
+ <li class="time-label">
+ <span class="bg-green">
+ 3 Jan. 2014
+ </span>
+ </li>
+ <!-- /.timeline-label -->
+ <!-- timeline item -->
+ <li>
+ <i class="fa fa-camera bg-purple"></i>
+
+ <div class="timeline-item">
+ <span class="time"><i class="fa fa-clock-o"></i> 2 days ago</span>
+
+ <h3 class="timeline-header"><a href="#">Mina Lee</a> uploaded new photos</h3>
+
+ <div class="timeline-body">
+ <img src="http://placehold.it/150x100" alt="..." class="margin">
+ <img src="http://placehold.it/150x100" alt="..." class="margin">
+ <img src="http://placehold.it/150x100" alt="..." class="margin">
+ <img src="http://placehold.it/150x100" alt="..." class="margin">
+ </div>
+ </div>
+ </li>
+ <!-- END timeline item -->
+ <!-- timeline item -->
+ <li>
+ <i class="fa fa-video-camera bg-maroon"></i>
+
+ <div class="timeline-item">
+ <span class="time"><i class="fa fa-clock-o"></i> 5 days ago</span>
+
+ <h3 class="timeline-header"><a href="#">Mr. Doe</a> shared a video</h3>
+
+ <div class="timeline-body">
+ <div class="embed-responsive embed-responsive-16by9">
+ <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tMWkeBIohBs" frameborder="0" allowfullscreen></iframe>
+ </div>
+ </div>
+ <div class="timeline-footer">
+ <a href="#" class="btn btn-xs bg-maroon">See comments</a>
+ </div>
+ </div>
+ </li>
+ <!-- END timeline item -->
+ <li>
+ <i class="fa fa-clock-o bg-gray"></i>
+ </li>
+ </ul>
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+
+ <div class="row" style="margin-top: 10px;">
+ <div class="col-md-12">
+ <div class="box box-primary">
+ <div class="box-header">
+ <h3 class="box-title"><i class="fa fa-code"></i> Timeline Markup</h3>
+ </div>
+ <div class="box-body">
+ <pre style="font-weight: 600;">
+<ul class="timeline">
+
+ <!-- timeline time label -->
+ <li class="time-label">
+ <span class="bg-red">
+ 10 Feb. 2014
+ </span>
+ </li>
+ <!-- /.timeline-label -->
+
+ <!-- timeline item -->
+ <li>
+ <!-- timeline icon -->
+ <i class="fa fa-envelope bg-blue"></i>
+ <div class="timeline-item">
+ <span class="time"><i class="fa fa-clock-o"></i> 12:05</span>
+
+ <h3 class="timeline-header"><a href="#">Support Team</a> ...</h3>
+
+ <div class="timeline-body">
+ ...
+ Content goes here
+ </div>
+
+ <div class="timeline-footer">
+ <a class="btn btn-primary btn-xs">...</a>
+ </div>
+ </div>
+ </li>
+ <!-- END timeline item -->
+
+ ...
+
+</ul>
+ </pre>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+
+</section>
+<!-- /.content -->
diff --git a/grails-app/assets/templates/xdashangular/charts/chartjs.html b/grails-app/assets/templates/xdashangular/charts/chartjs.html
index de155ea..c362a42 100644
--- a/grails-app/assets/templates/xdashangular/charts/chartjs.html
+++ b/grails-app/assets/templates/xdashangular/charts/chartjs.html
@@ -1,10 +1,104 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <title>Title</title>
-</head>
-<body>
+<!-- Content Header (Page header) -->
+<section class="content-header">
+ <h1>
+ ChartJS
+ <small>Preview sample</small>
+ </h1>
+ <ol class="breadcrumb">
+ <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
+ <li><a href="#">Charts</a></li>
+ <li class="active">ChartJS</li>
+ </ol>
+</section>
-</body>
-</html>
\ No newline at end of file
+<!-- Main content -->
+<section class="content">
+ <div class="row">
+ <div class="col-md-6">
+ <!-- AREA CHART -->
+ <div class="box box-primary">
+ <div class="box-header with-border">
+ <h3 class="box-title">Area Chart</h3>
+
+ <div class="box-tools pull-right">
+ <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+ </div>
+ </div>
+ <div class="box-body">
+ <div class="chart">
+ <canvas id="areaChart" style="height:250px"></canvas>
+ </div>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+
+ <!-- DONUT CHART -->
+ <div class="box box-danger">
+ <div class="box-header with-border">
+ <h3 class="box-title">Donut Chart</h3>
+
+ <div class="box-tools pull-right">
+ <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+ </div>
+ </div>
+ <div class="box-body">
+ <canvas id="pieChart" style="height:250px"></canvas>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+
+ </div>
+ <!-- /.col (LEFT) -->
+ <div class="col-md-6">
+ <!-- LINE CHART -->
+ <div class="box box-info">
+ <div class="box-header with-border">
+ <h3 class="box-title">Line Chart</h3>
+
+ <div class="box-tools pull-right">
+ <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+ </div>
+ </div>
+ <div class="box-body">
+ <div class="chart">
+ <canvas id="lineChart" style="height:250px"></canvas>
+ </div>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+
+ <!-- BAR CHART -->
+ <div class="box box-success">
+ <div class="box-header with-border">
+ <h3 class="box-title">Bar Chart</h3>
+
+ <div class="box-tools pull-right">
+ <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+ </div>
+ </div>
+ <div class="box-body">
+ <div class="chart">
+ <canvas id="barChart" style="height:230px"></canvas>
+ </div>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+
+ </div>
+ <!-- /.col (RIGHT) -->
+ </div>
+ <!-- /.row -->
+
+</section>
diff --git a/grails-app/assets/templates/xdashangular/charts/flot.html b/grails-app/assets/templates/xdashangular/charts/flot.html
index de155ea..8c95ad6 100644
--- a/grails-app/assets/templates/xdashangular/charts/flot.html
+++ b/grails-app/assets/templates/xdashangular/charts/flot.html
@@ -1,10 +1,135 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <title>Title</title>
-</head>
-<body>
+<!-- Content Header (Page header) -->
+<section class="content-header">
+ <h1>
+ Flot Charts
+ <small>preview sample</small>
+ </h1>
+ <ol class="breadcrumb">
+ <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
+ <li><a href="#">Charts</a></li>
+ <li class="active">Flot</li>
+ </ol>
+</section>
-</body>
-</html>
\ No newline at end of file
+<!-- Main content -->
+<section class="content">
+ <div class="row">
+ <div class="col-xs-12">
+ <!-- interactive chart -->
+ <div class="box box-primary">
+ <div class="box-header with-border">
+ <i class="fa fa-bar-chart-o"></i>
+
+ <h3 class="box-title">Interactive Area Chart</h3>
+
+ <div class="box-tools pull-right">
+ Real time
+ <div class="btn-group" id="realtime" data-toggle="btn-toggle">
+ <button type="button" class="btn btn-default btn-xs active" data-toggle="on">On</button>
+ <button type="button" class="btn btn-default btn-xs" data-toggle="off">Off</button>
+ </div>
+ </div>
+ </div>
+ <div class="box-body">
+ <div id="interactive" style="height: 300px;"></div>
+ </div>
+ <!-- /.box-body-->
+ </div>
+ <!-- /.box -->
+
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+
+ <div class="row">
+ <div class="col-md-6">
+ <!-- Line chart -->
+ <div class="box box-primary">
+ <div class="box-header with-border">
+ <i class="fa fa-bar-chart-o"></i>
+
+ <h3 class="box-title">Line Chart</h3>
+
+ <div class="box-tools pull-right">
+ <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+ </div>
+ </div>
+ <div class="box-body">
+ <div id="line-chart" style="height: 300px;"></div>
+ </div>
+ <!-- /.box-body-->
+ </div>
+ <!-- /.box -->
+
+ <!-- Area chart -->
+ <div class="box box-primary">
+ <div class="box-header with-border">
+ <i class="fa fa-bar-chart-o"></i>
+
+ <h3 class="box-title">Full Width Area Chart</h3>
+
+ <div class="box-tools pull-right">
+ <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+ </div>
+ </div>
+ <div class="box-body">
+ <div id="area-chart" style="height: 338px;" class="full-width-chart"></div>
+ </div>
+ <!-- /.box-body-->
+ </div>
+ <!-- /.box -->
+
+ </div>
+ <!-- /.col -->
+
+ <div class="col-md-6">
+ <!-- Bar chart -->
+ <div class="box box-primary">
+ <div class="box-header with-border">
+ <i class="fa fa-bar-chart-o"></i>
+
+ <h3 class="box-title">Bar Chart</h3>
+
+ <div class="box-tools pull-right">
+ <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+ </div>
+ </div>
+ <div class="box-body">
+ <div id="bar-chart" style="height: 300px;"></div>
+ </div>
+ <!-- /.box-body-->
+ </div>
+ <!-- /.box -->
+
+ <!-- Donut chart -->
+ <div class="box box-primary">
+ <div class="box-header with-border">
+ <i class="fa fa-bar-chart-o"></i>
+
+ <h3 class="box-title">Donut Chart</h3>
+
+ <div class="box-tools pull-right">
+ <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+ </div>
+ </div>
+ <div class="box-body">
+ <div id="donut-chart" style="height: 300px;"></div>
+ </div>
+ <!-- /.box-body-->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+</section>
+<!-- /.content -->
diff --git a/grails-app/assets/templates/xdashangular/index/calendar.html b/grails-app/assets/templates/xdashangular/index/calendar.html
index de155ea..230c49a 100644
--- a/grails-app/assets/templates/xdashangular/index/calendar.html
+++ b/grails-app/assets/templates/xdashangular/index/calendar.html
@@ -1,10 +1,91 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <title>Title</title>
-</head>
-<body>
+<!-- Content Header (Page header) -->
+<section class="content-header">
+ <h1>
+ Calendar
+ <small>Control panel</small>
+ </h1>
+ <ol class="breadcrumb">
+ <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
+ <li class="active">Calendar</li>
+ </ol>
+</section>
-</body>
-</html>
\ No newline at end of file
+<!-- Main content -->
+<section class="content">
+ <div class="row">
+ <div class="col-md-3">
+ <div class="box box-solid">
+ <div class="box-header with-border">
+ <h4 class="box-title">Draggable Events</h4>
+ </div>
+ <div class="box-body">
+ <!-- the events -->
+ <div id="external-events">
+ <div class="external-event bg-green">Lunch</div>
+ <div class="external-event bg-yellow">Go home</div>
+ <div class="external-event bg-aqua">Do homework</div>
+ <div class="external-event bg-light-blue">Work on UI design</div>
+ <div class="external-event bg-red">Sleep tight</div>
+ <div class="checkbox">
+ <label for="drop-remove">
+ <input type="checkbox" id="drop-remove">
+ remove after drop
+ </label>
+ </div>
+ </div>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /. box -->
+ <div class="box box-solid">
+ <div class="box-header with-border">
+ <h3 class="box-title">Create Event</h3>
+ </div>
+ <div class="box-body">
+ <div class="btn-group" style="width: 100%; margin-bottom: 10px;">
+ <!--<button type="button" id="color-chooser-btn" class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">Color <span class="caret"></span></button>-->
+ <ul class="fc-color-picker" id="color-chooser">
+ <li><a class="text-aqua" href="#"><i class="fa fa-square"></i></a></li>
+ <li><a class="text-blue" href="#"><i class="fa fa-square"></i></a></li>
+ <li><a class="text-light-blue" href="#"><i class="fa fa-square"></i></a></li>
+ <li><a class="text-teal" href="#"><i class="fa fa-square"></i></a></li>
+ <li><a class="text-yellow" href="#"><i class="fa fa-square"></i></a></li>
+ <li><a class="text-orange" href="#"><i class="fa fa-square"></i></a></li>
+ <li><a class="text-green" href="#"><i class="fa fa-square"></i></a></li>
+ <li><a class="text-lime" href="#"><i class="fa fa-square"></i></a></li>
+ <li><a class="text-red" href="#"><i class="fa fa-square"></i></a></li>
+ <li><a class="text-purple" href="#"><i class="fa fa-square"></i></a></li>
+ <li><a class="text-fuchsia" href="#"><i class="fa fa-square"></i></a></li>
+ <li><a class="text-muted" href="#"><i class="fa fa-square"></i></a></li>
+ <li><a class="text-navy" href="#"><i class="fa fa-square"></i></a></li>
+ </ul>
+ </div>
+ <!-- /btn-group -->
+ <div class="input-group">
+ <input id="new-event" type="text" class="form-control" placeholder="Event Title">
+
+ <div class="input-group-btn">
+ <button id="add-new-event" type="button" class="btn btn-primary btn-flat">Add</button>
+ </div>
+ <!-- /btn-group -->
+ </div>
+ <!-- /input-group -->
+ </div>
+ </div>
+ </div>
+ <!-- /.col -->
+ <div class="col-md-9">
+ <div class="box box-primary">
+ <div class="box-body no-padding">
+ <!-- THE CALENDAR -->
+ <div id="calendar"></div>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /. box -->
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+</section>
+<!-- /.content -->
diff --git a/grails-app/assets/templates/xdashangular/index/dashboard.gsp b/grails-app/assets/templates/xdashangular/index/dashboard.gsp
index e69de29..572e3c2 100644
--- a/grails-app/assets/templates/xdashangular/index/dashboard.gsp
+++ b/grails-app/assets/templates/xdashangular/index/dashboard.gsp
@@ -0,0 +1,543 @@
+<div>
+ <!-- Content Header (Page header) -->
+ <section class="content-header">
+ <h1>
+ Dashboard
+ <small>Control panel</small>
+ </h1>
+ <ol class="breadcrumb">
+ <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
+ <li class="active">Dashboard</li>
+ </ol>
+ </section>
+
+ <!-- Main content -->
+ <section class="content">
+ <!-- Small boxes (Stat box) -->
+ <div class="row">
+ <div class="col-lg-3 col-xs-6">
+ <!-- small box -->
+ <div class="small-box bg-aqua">
+ <div class="inner">
+ <h3>150</h3>
+
+ <p>New Orders</p>
+ </div>
+
+ <div class="icon">
+ <i class="ion ion-bag"></i>
+ </div>
+ <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
+ </div>
+ </div>
+ <!-- ./col -->
+ <div class="col-lg-3 col-xs-6">
+ <!-- small box -->
+ <div class="small-box bg-green">
+ <div class="inner">
+ <h3>53<sup style="font-size: 20px">%</sup></h3>
+
+ <p>Bounce Rate</p>
+ </div>
+
+ <div class="icon">
+ <i class="ion ion-stats-bars"></i>
+ </div>
+ <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
+ </div>
+ </div>
+ <!-- ./col -->
+ <div class="col-lg-3 col-xs-6">
+ <!-- small box -->
+ <div class="small-box bg-yellow">
+ <div class="inner">
+ <h3>44</h3>
+
+ <p>User Registrations</p>
+ </div>
+
+ <div class="icon">
+ <i class="ion ion-person-add"></i>
+ </div>
+ <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
+ </div>
+ </div>
+ <!-- ./col -->
+ <div class="col-lg-3 col-xs-6">
+ <!-- small box -->
+ <div class="small-box bg-red">
+ <div class="inner">
+ <h3>65</h3>
+
+ <p>Unique Visitors</p>
+ </div>
+
+ <div class="icon">
+ <i class="ion ion-pie-graph"></i>
+ </div>
+ <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
+ </div>
+ </div>
+ <!-- ./col -->
+ </div>
+ <!-- /.row -->
+ <!-- Main row -->
+ <div class="row">
+ <!-- Left col -->
+ <section class="col-lg-7 connectedSortable">
+ <!-- Custom tabs (Charts with tabs)-->
+ <div class="nav-tabs-custom">
+ <!-- Tabs within a box -->
+ <ul class="nav nav-tabs pull-right">
+ <li class="active"><a href="#revenue-chart" data-toggle="tab">Area</a></li>
+ <li><a href="#sales-chart" data-toggle="tab">Donut</a></li>
+ <li class="pull-left header"><i class="fa fa-inbox"></i> Sales</li>
+ </ul>
+
+ <div class="tab-content no-padding">
+ <!-- Morris chart - Sales -->
+ <div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;"></div>
+
+ <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
+ </div>
+ </div>
+ <!-- /.nav-tabs-custom -->
+
+ <!-- Chat box -->
+ <div class="box box-success">
+ <div class="box-header">
+ <i class="fa fa-comments-o"></i>
+
+ <h3 class="box-title">Chat</h3>
+
+ <div class="box-tools pull-right" data-toggle="tooltip" title="Status">
+ <div class="btn-group" data-toggle="btn-toggle">
+ <button type="button" class="btn btn-default btn-sm active"><i class="fa fa-square text-green"></i>
+ </button>
+ <button type="button" class="btn btn-default btn-sm"><i class="fa fa-square text-red"></i></button>
+ </div>
+ </div>
+ </div>
+
+ <div class="box-body chat" id="chat-box">
+ <!-- chat item -->
+ <div class="item">
+ <asset:image src="adminlte/user4-128x128.jpg" alt="user image" class="online"/>
+
+ <p class="message">
+ <a href="#" class="name">
+ <small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 2:15</small>
+ Mike Doe
+ </a>
+ I would like to meet you to discuss the latest news about
+ the arrival of the new theme. They say it is going to be one the
+ best themes on the market
+ </p>
+
+ <div class="attachment">
+ <h4>Attachments:</h4>
+
+ <p class="filename">
+ Theme-thumbnail-image.jpg
+ </p>
+
+ <div class="pull-right">
+ <button type="button" class="btn btn-primary btn-sm btn-flat">Open</button>
+ </div>
+ </div>
+ <!-- /.attachment -->
+ </div>
+ <!-- /.item -->
+ <!-- chat item -->
+ <div class="item">
+ <asset:image src="adminlte/user3-128x128.jpg" alt="user image" class="offline"/>
+
+ <p class="message">
+ <a href="#" class="name">
+ <small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 5:15</small>
+ Alexander Pierce
+ </a>
+ I would like to meet you to discuss the latest news about
+ the arrival of the new theme. They say it is going to be one the
+ best themes on the market
+ </p>
+ </div>
+ <!-- /.item -->
+ <!-- chat item -->
+ <div class="item">
+ <asset:image src="adminlte/user2-160x160.jpg" alt="user image" class="offline"/>
+
+ <p class="message">
+ <a href="#" class="name">
+ <small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 5:30</small>
+ Susan Doe
+ </a>
+ I would like to meet you to discuss the latest news about
+ the arrival of the new theme. They say it is going to be one the
+ best themes on the market
+ </p>
+ </div>
+ <!-- /.item -->
+ </div>
+ <!-- /.chat -->
+ <div class="box-footer">
+ <div class="input-group">
+ <input class="form-control" placeholder="Type message...">
+
+ <div class="input-group-btn">
+ <button type="button" class="btn btn-success"><i class="fa fa-plus"></i></button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- /.box (chat box) -->
+
+ <!-- TO DO List -->
+ <div class="box box-primary">
+ <div class="box-header">
+ <i class="ion ion-clipboard"></i>
+
+ <h3 class="box-title">To Do List</h3>
+
+ <div class="box-tools pull-right">
+ <ul class="pagination pagination-sm inline">
+ <li><a href="#">«</a></li>
+ <li><a href="#">1</a></li>
+ <li><a href="#">2</a></li>
+ <li><a href="#">3</a></li>
+ <li><a href="#">»</a></li>
+ </ul>
+ </div>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <ul class="todo-list">
+ <li>
+ <!-- drag handle -->
+ <span class="handle">
+ <i class="fa fa-ellipsis-v"></i>
+ <i class="fa fa-ellipsis-v"></i>
+ </span>
+ <!-- checkbox -->
+ <input type="checkbox" value="">
+ <!-- todo text -->
+ <span class="text">Design a nice theme</span>
+ <!-- Emphasis label -->
+ <small class="label label-danger"><i class="fa fa-clock-o"></i> 2 mins</small>
+ <!-- General tools such as edit or delete-->
+ <div class="tools">
+ <i class="fa fa-edit"></i>
+ <i class="fa fa-trash-o"></i>
+ </div>
+ </li>
+ <li>
+ <span class="handle">
+ <i class="fa fa-ellipsis-v"></i>
+ <i class="fa fa-ellipsis-v"></i>
+ </span>
+ <input type="checkbox" value="">
+ <span class="text">Make the theme responsive</span>
+ <small class="label label-info"><i class="fa fa-clock-o"></i> 4 hours</small>
+
+ <div class="tools">
+ <i class="fa fa-edit"></i>
+ <i class="fa fa-trash-o"></i>
+ </div>
+ </li>
+ <li>
+ <span class="handle">
+ <i class="fa fa-ellipsis-v"></i>
+ <i class="fa fa-ellipsis-v"></i>
+ </span>
+ <input type="checkbox" value="">
+ <span class="text">Let theme shine like a star</span>
+ <small class="label label-warning"><i class="fa fa-clock-o"></i> 1 day</small>
+
+ <div class="tools">
+ <i class="fa fa-edit"></i>
+ <i class="fa fa-trash-o"></i>
+ </div>
+ </li>
+ <li>
+ <span class="handle">
+ <i class="fa fa-ellipsis-v"></i>
+ <i class="fa fa-ellipsis-v"></i>
+ </span>
+ <input type="checkbox" value="">
+ <span class="text">Let theme shine like a star</span>
+ <small class="label label-success"><i class="fa fa-clock-o"></i> 3 days</small>
+
+ <div class="tools">
+ <i class="fa fa-edit"></i>
+ <i class="fa fa-trash-o"></i>
+ </div>
+ </li>
+ <li>
+ <span class="handle">
+ <i class="fa fa-ellipsis-v"></i>
+ <i class="fa fa-ellipsis-v"></i>
+ </span>
+ <input type="checkbox" value="">
+ <span class="text">Check your messages and notifications</span>
+ <small class="label label-primary"><i class="fa fa-clock-o"></i> 1 week</small>
+
+ <div class="tools">
+ <i class="fa fa-edit"></i>
+ <i class="fa fa-trash-o"></i>
+ </div>
+ </li>
+ <li>
+ <span class="handle">
+ <i class="fa fa-ellipsis-v"></i>
+ <i class="fa fa-ellipsis-v"></i>
+ </span>
+ <input type="checkbox" value="">
+ <span class="text">Let theme shine like a star</span>
+ <small class="label label-default"><i class="fa fa-clock-o"></i> 1 month</small>
+
+ <div class="tools">
+ <i class="fa fa-edit"></i>
+ <i class="fa fa-trash-o"></i>
+ </div>
+ </li>
+ </ul>
+ </div>
+ <!-- /.box-body -->
+ <div class="box-footer clearfix no-border">
+ <button type="button" class="btn btn-default pull-right"><i class="fa fa-plus"></i> Add item</button>
+ </div>
+ </div>
+ <!-- /.box -->
+
+ <!-- quick email widget -->
+ <div class="box box-info">
+ <div class="box-header">
+ <i class="fa fa-envelope"></i>
+
+ <h3 class="box-title">Quick Email</h3>
+ <!-- tools box -->
+ <div class="pull-right box-tools">
+ <button type="button" class="btn btn-info btn-sm" data-widget="remove" data-toggle="tooltip"
+ title="Remove">
+ <i class="fa fa-times"></i></button>
+ </div>
+ <!-- /. tools -->
+ </div>
+
+ <div class="box-body">
+ <form action="#" method="post">
+ <div class="form-group">
+ <input type="email" class="form-control" name="emailto" placeholder="Email to:">
+ </div>
+
+ <div class="form-group">
+ <input type="text" class="form-control" name="subject" placeholder="Subject">
+ </div>
+
+ <div>
+ <textarea class="textarea" placeholder="Message"
+ style="width: 100%; height: 125px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
+ </div>
+ </form>
+ </div>
+
+ <div class="box-footer clearfix">
+ <button type="button" class="pull-right btn btn-default" id="sendEmail">Send
+ <i class="fa fa-arrow-circle-right"></i></button>
+ </div>
+ </div>
+
+ </section>
+ <!-- /.Left col -->
+ <!-- right col (We are only adding the ID to make the widgets sortable)-->
+ <section class="col-lg-5 connectedSortable">
+
+ <!-- Map box -->
+ <div class="box box-solid bg-light-blue-gradient">
+ <div class="box-header">
+ <!-- tools box -->
+ <div class="pull-right box-tools">
+ <button type="button" class="btn btn-primary btn-sm daterange pull-right" data-toggle="tooltip"
+ title="Date range">
+ <i class="fa fa-calendar"></i></button>
+ <button type="button" class="btn btn-primary btn-sm pull-right" data-widget="collapse"
+ data-toggle="tooltip" title="Collapse" style="margin-right: 5px;">
+ <i class="fa fa-minus"></i></button>
+ </div>
+ <!-- /. tools -->
+
+ <i class="fa fa-map-marker"></i>
+
+ <h3 class="box-title">
+ Visitors
+ </h3>
+ </div>
+
+ <div class="box-body">
+ <div id="world-map" style="height: 250px; width: 100%;"></div>
+ </div>
+ <!-- /.box-body-->
+ <div class="box-footer no-border">
+ <div class="row">
+ <div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
+ <div id="sparkline-1"></div>
+
+ <div class="knob-label">Visitors</div>
+ </div>
+ <!-- ./col -->
+ <div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
+ <div id="sparkline-2"></div>
+
+ <div class="knob-label">Online</div>
+ </div>
+ <!-- ./col -->
+ <div class="col-xs-4 text-center">
+ <div id="sparkline-3"></div>
+
+ <div class="knob-label">Exists</div>
+ </div>
+ <!-- ./col -->
+ </div>
+ <!-- /.row -->
+ </div>
+ </div>
+ <!-- /.box -->
+
+ <!-- solid sales graph -->
+ <div class="box box-solid bg-teal-gradient">
+ <div class="box-header">
+ <i class="fa fa-th"></i>
+
+ <h3 class="box-title">Sales Graph</h3>
+
+ <div class="box-tools pull-right">
+ <button type="button" class="btn bg-teal btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ <button type="button" class="btn bg-teal btn-sm" data-widget="remove"><i class="fa fa-times"></i>
+ </button>
+ </div>
+ </div>
+
+ <div class="box-body border-radius-none">
+ <div class="chart" id="line-chart" style="height: 250px;"></div>
+ </div>
+ <!-- /.box-body -->
+ <div class="box-footer no-border">
+ <div class="row">
+ <div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
+ <input type="text" class="knob" data-readonly="true" value="20" data-width="60" data-height="60"
+ data-fgColor="#39CCCC">
+
+ <div class="knob-label">Mail-Orders</div>
+ </div>
+ <!-- ./col -->
+ <div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
+ <input type="text" class="knob" data-readonly="true" value="50" data-width="60" data-height="60"
+ data-fgColor="#39CCCC">
+
+ <div class="knob-label">Online</div>
+ </div>
+ <!-- ./col -->
+ <div class="col-xs-4 text-center">
+ <input type="text" class="knob" data-readonly="true" value="30" data-width="60" data-height="60"
+ data-fgColor="#39CCCC">
+
+ <div class="knob-label">In-Store</div>
+ </div>
+ <!-- ./col -->
+ </div>
+ <!-- /.row -->
+ </div>
+ <!-- /.box-footer -->
+ </div>
+ <!-- /.box -->
+
+ <!-- Calendar -->
+ <div class="box box-solid bg-green-gradient">
+ <div class="box-header">
+ <i class="fa fa-calendar"></i>
+
+ <h3 class="box-title">Calendar</h3>
+ <!-- tools box -->
+ <div class="pull-right box-tools">
+ <!-- button with a dropdown -->
+ <div class="btn-group">
+ <button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown">
+ <i class="fa fa-bars"></i></button>
+ <ul class="dropdown-menu pull-right" role="menu">
+ <li><a href="#">Add new event</a></li>
+ <li><a href="#">Clear events</a></li>
+ <li class="divider"></li>
+ <li><a href="#">View calendar</a></li>
+ </ul>
+ </div>
+ <button type="button" class="btn btn-success btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ <button type="button" class="btn btn-success btn-sm" data-widget="remove"><i class="fa fa-times"></i>
+ </button>
+ </div>
+ <!-- /. tools -->
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body no-padding">
+ <!--The calendar -->
+ <div id="calendar" style="width: 100%"></div>
+ </div>
+ <!-- /.box-body -->
+ <div class="box-footer text-black">
+ <div class="row">
+ <div class="col-sm-6">
+ <!-- Progress bars -->
+ <div class="clearfix">
+ <span class="pull-left">Task #1</span>
+ <small class="pull-right">90%</small>
+ </div>
+
+ <div class="progress xs">
+ <div class="progress-bar progress-bar-green" style="width: 90%;"></div>
+ </div>
+
+ <div class="clearfix">
+ <span class="pull-left">Task #2</span>
+ <small class="pull-right">70%</small>
+ </div>
+
+ <div class="progress xs">
+ <div class="progress-bar progress-bar-green" style="width: 70%;"></div>
+ </div>
+ </div>
+ <!-- /.col -->
+ <div class="col-sm-6">
+ <div class="clearfix">
+ <span class="pull-left">Task #3</span>
+ <small class="pull-right">60%</small>
+ </div>
+
+ <div class="progress xs">
+ <div class="progress-bar progress-bar-green" style="width: 60%;"></div>
+ </div>
+
+ <div class="clearfix">
+ <span class="pull-left">Task #4</span>
+ <small class="pull-right">40%</small>
+ </div>
+
+ <div class="progress xs">
+ <div class="progress-bar progress-bar-green" style="width: 40%;"></div>
+ </div>
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+ </div>
+ </div>
+ <!-- /.box -->
+
+ </section>
+ <!-- right col -->
+ </div>
+ <!-- /.row (main row) -->
+
+ </section>
+ <!-- /.content -->
+</div>
\ No newline at end of file
diff --git a/grails-app/assets/templates/xdashangular/index/dashboard.html b/grails-app/assets/templates/xdashangular/index/dashboard.html
index e69de29..4a60d49 100644
--- a/grails-app/assets/templates/xdashangular/index/dashboard.html
+++ b/grails-app/assets/templates/xdashangular/index/dashboard.html
@@ -0,0 +1,543 @@
+<div>
+<!-- Content Header (Page header) -->
+<section class="content-header">
+ <h1>
+ Dashboard
+ <small>Control panel</small>
+ </h1>
+ <ol class="breadcrumb">
+ <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
+ <li class="active">Dashboard</li>
+ </ol>
+</section>
+
+<!-- Main content -->
+<section class="content">
+ <!-- Small boxes (Stat box) -->
+ <div class="row">
+ <div class="col-lg-3 col-xs-6">
+ <!-- small box -->
+ <div class="small-box bg-aqua">
+ <div class="inner">
+ <h3>150</h3>
+
+ <p>New Orders</p>
+ </div>
+
+ <div class="icon">
+ <i class="ion ion-bag"></i>
+ </div>
+ <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
+ </div>
+ </div>
+ <!-- ./col -->
+ <div class="col-lg-3 col-xs-6">
+ <!-- small box -->
+ <div class="small-box bg-green">
+ <div class="inner">
+ <h3>53<sup style="font-size: 20px">%</sup></h3>
+
+ <p>Bounce Rate</p>
+ </div>
+
+ <div class="icon">
+ <i class="ion ion-stats-bars"></i>
+ </div>
+ <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
+ </div>
+ </div>
+ <!-- ./col -->
+ <div class="col-lg-3 col-xs-6">
+ <!-- small box -->
+ <div class="small-box bg-yellow">
+ <div class="inner">
+ <h3>44</h3>
+
+ <p>User Registrations</p>
+ </div>
+
+ <div class="icon">
+ <i class="ion ion-person-add"></i>
+ </div>
+ <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
+ </div>
+ </div>
+ <!-- ./col -->
+ <div class="col-lg-3 col-xs-6">
+ <!-- small box -->
+ <div class="small-box bg-red">
+ <div class="inner">
+ <h3>65</h3>
+
+ <p>Unique Visitors</p>
+ </div>
+
+ <div class="icon">
+ <i class="ion ion-pie-graph"></i>
+ </div>
+ <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
+ </div>
+ </div>
+ <!-- ./col -->
+ </div>
+ <!-- /.row -->
+ <!-- Main row -->
+ <div class="row">
+ <!-- Left col -->
+ <section class="col-lg-7 connectedSortable">
+ <!-- Custom tabs (Charts with tabs)-->
+ <div class="nav-tabs-custom">
+ <!-- Tabs within a box -->
+ <ul class="nav nav-tabs pull-right">
+ <li class="active"><a href="#revenue-chart" data-toggle="tab">Area</a></li>
+ <li><a href="#sales-chart" data-toggle="tab">Donut</a></li>
+ <li class="pull-left header"><i class="fa fa-inbox"></i> Sales</li>
+ </ul>
+
+ <div class="tab-content no-padding">
+ <!-- Morris chart - Sales -->
+ <div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;"></div>
+
+ <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
+ </div>
+ </div>
+ <!-- /.nav-tabs-custom -->
+
+ <!-- Chat box -->
+ <div class="box box-success">
+ <div class="box-header">
+ <i class="fa fa-comments-o"></i>
+
+ <h3 class="box-title">Chat</h3>
+
+ <div class="box-tools pull-right" data-toggle="tooltip" title="Status">
+ <div class="btn-group" data-toggle="btn-toggle">
+ <button type="button" class="btn btn-default btn-sm active"><i class="fa fa-square text-green"></i>
+ </button>
+ <button type="button" class="btn btn-default btn-sm"><i class="fa fa-square text-red"></i></button>
+ </div>
+ </div>
+ </div>
+
+ <div class="box-body chat" id="chat-box">
+ <!-- chat item -->
+ <div class="item">
+ <asset:image src="adminlte/user4-128x128.jpg" alt="user image" class="online"/>
+
+ <p class="message">
+ <a href="#" class="name">
+ <small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 2:15</small>
+ Mike Doe
+ </a>
+ I would like to meet you to discuss the latest news about
+ the arrival of the new theme. They say it is going to be one the
+ best themes on the market
+ </p>
+
+ <div class="attachment">
+ <h4>Attachments:</h4>
+
+ <p class="filename">
+ Theme-thumbnail-image.jpg
+ </p>
+
+ <div class="pull-right">
+ <button type="button" class="btn btn-primary btn-sm btn-flat">Open</button>
+ </div>
+ </div>
+ <!-- /.attachment -->
+ </div>
+ <!-- /.item -->
+ <!-- chat item -->
+ <div class="item">
+ <asset:image src="adminlte/user3-128x128.jpg" alt="user image" class="offline"/>
+
+ <p class="message">
+ <a href="#" class="name">
+ <small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 5:15</small>
+ Alexander Pierce
+ </a>
+ I would like to meet you to discuss the latest news about
+ the arrival of the new theme. They say it is going to be one the
+ best themes on the market
+ </p>
+ </div>
+ <!-- /.item -->
+ <!-- chat item -->
+ <div class="item">
+ <asset:image src="adminlte/user2-160x160.jpg" alt="user image" class="offline"/>
+
+ <p class="message">
+ <a href="#" class="name">
+ <small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 5:30</small>
+ Susan Doe
+ </a>
+ I would like to meet you to discuss the latest news about
+ the arrival of the new theme. They say it is going to be one the
+ best themes on the market
+ </p>
+ </div>
+ <!-- /.item -->
+ </div>
+ <!-- /.chat -->
+ <div class="box-footer">
+ <div class="input-group">
+ <input class="form-control" placeholder="Type message...">
+
+ <div class="input-group-btn">
+ <button type="button" class="btn btn-success"><i class="fa fa-plus"></i></button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- /.box (chat box) -->
+
+ <!-- TO DO List -->
+ <div class="box box-primary">
+ <div class="box-header">
+ <i class="ion ion-clipboard"></i>
+
+ <h3 class="box-title">To Do List</h3>
+
+ <div class="box-tools pull-right">
+ <ul class="pagination pagination-sm inline">
+ <li><a href="#">«</a></li>
+ <li><a href="#">1</a></li>
+ <li><a href="#">2</a></li>
+ <li><a href="#">3</a></li>
+ <li><a href="#">»</a></li>
+ </ul>
+ </div>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <ul class="todo-list">
+ <li>
+ <!-- drag handle -->
+ <span class="handle">
+ <i class="fa fa-ellipsis-v"></i>
+ <i class="fa fa-ellipsis-v"></i>
+ </span>
+ <!-- checkbox -->
+ <input type="checkbox" value="">
+ <!-- todo text -->
+ <span class="text">Design a nice theme</span>
+ <!-- Emphasis label -->
+ <small class="label label-danger"><i class="fa fa-clock-o"></i> 2 mins</small>
+ <!-- General tools such as edit or delete-->
+ <div class="tools">
+ <i class="fa fa-edit"></i>
+ <i class="fa fa-trash-o"></i>
+ </div>
+ </li>
+ <li>
+ <span class="handle">
+ <i class="fa fa-ellipsis-v"></i>
+ <i class="fa fa-ellipsis-v"></i>
+ </span>
+ <input type="checkbox" value="">
+ <span class="text">Make the theme responsive</span>
+ <small class="label label-info"><i class="fa fa-clock-o"></i> 4 hours</small>
+
+ <div class="tools">
+ <i class="fa fa-edit"></i>
+ <i class="fa fa-trash-o"></i>
+ </div>
+ </li>
+ <li>
+ <span class="handle">
+ <i class="fa fa-ellipsis-v"></i>
+ <i class="fa fa-ellipsis-v"></i>
+ </span>
+ <input type="checkbox" value="">
+ <span class="text">Let theme shine like a star</span>
+ <small class="label label-warning"><i class="fa fa-clock-o"></i> 1 day</small>
+
+ <div class="tools">
+ <i class="fa fa-edit"></i>
+ <i class="fa fa-trash-o"></i>
+ </div>
+ </li>
+ <li>
+ <span class="handle">
+ <i class="fa fa-ellipsis-v"></i>
+ <i class="fa fa-ellipsis-v"></i>
+ </span>
+ <input type="checkbox" value="">
+ <span class="text">Let theme shine like a star</span>
+ <small class="label label-success"><i class="fa fa-clock-o"></i> 3 days</small>
+
+ <div class="tools">
+ <i class="fa fa-edit"></i>
+ <i class="fa fa-trash-o"></i>
+ </div>
+ </li>
+ <li>
+ <span class="handle">
+ <i class="fa fa-ellipsis-v"></i>
+ <i class="fa fa-ellipsis-v"></i>
+ </span>
+ <input type="checkbox" value="">
+ <span class="text">Check your messages and notifications</span>
+ <small class="label label-primary"><i class="fa fa-clock-o"></i> 1 week</small>
+
+ <div class="tools">
+ <i class="fa fa-edit"></i>
+ <i class="fa fa-trash-o"></i>
+ </div>
+ </li>
+ <li>
+ <span class="handle">
+ <i class="fa fa-ellipsis-v"></i>
+ <i class="fa fa-ellipsis-v"></i>
+ </span>
+ <input type="checkbox" value="">
+ <span class="text">Let theme shine like a star</span>
+ <small class="label label-default"><i class="fa fa-clock-o"></i> 1 month</small>
+
+ <div class="tools">
+ <i class="fa fa-edit"></i>
+ <i class="fa fa-trash-o"></i>
+ </div>
+ </li>
+ </ul>
+ </div>
+ <!-- /.box-body -->
+ <div class="box-footer clearfix no-border">
+ <button type="button" class="btn btn-default pull-right"><i class="fa fa-plus"></i> Add item</button>
+ </div>
+ </div>
+ <!-- /.box -->
+
+ <!-- quick email widget -->
+ <div class="box box-info">
+ <div class="box-header">
+ <i class="fa fa-envelope"></i>
+
+ <h3 class="box-title">Quick Email</h3>
+ <!-- tools box -->
+ <div class="pull-right box-tools">
+ <button type="button" class="btn btn-info btn-sm" data-widget="remove" data-toggle="tooltip"
+ title="Remove">
+ <i class="fa fa-times"></i></button>
+ </div>
+ <!-- /. tools -->
+ </div>
+
+ <div class="box-body">
+ <form action="#" method="post">
+ <div class="form-group">
+ <input type="email" class="form-control" name="emailto" placeholder="Email to:">
+ </div>
+
+ <div class="form-group">
+ <input type="text" class="form-control" name="subject" placeholder="Subject">
+ </div>
+
+ <div>
+ <textarea class="textarea" placeholder="Message"
+ style="width: 100%; height: 125px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
+ </div>
+ </form>
+ </div>
+
+ <div class="box-footer clearfix">
+ <button type="button" class="pull-right btn btn-default" id="sendEmail">Send
+ <i class="fa fa-arrow-circle-right"></i></button>
+ </div>
+ </div>
+
+ </section>
+ <!-- /.Left col -->
+ <!-- right col (We are only adding the ID to make the widgets sortable)-->
+ <section class="col-lg-5 connectedSortable">
+
+ <!-- Map box -->
+ <div class="box box-solid bg-light-blue-gradient">
+ <div class="box-header">
+ <!-- tools box -->
+ <div class="pull-right box-tools">
+ <button type="button" class="btn btn-primary btn-sm daterange pull-right" data-toggle="tooltip"
+ title="Date range">
+ <i class="fa fa-calendar"></i></button>
+ <button type="button" class="btn btn-primary btn-sm pull-right" data-widget="collapse"
+ data-toggle="tooltip" title="Collapse" style="margin-right: 5px;">
+ <i class="fa fa-minus"></i></button>
+ </div>
+ <!-- /. tools -->
+
+ <i class="fa fa-map-marker"></i>
+
+ <h3 class="box-title">
+ Visitors
+ </h3>
+ </div>
+
+ <div class="box-body">
+ <div id="world-map" style="height: 250px; width: 100%;"></div>
+ </div>
+ <!-- /.box-body-->
+ <div class="box-footer no-border">
+ <div class="row">
+ <div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
+ <div id="sparkline-1"></div>
+
+ <div class="knob-label">Visitors</div>
+ </div>
+ <!-- ./col -->
+ <div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
+ <div id="sparkline-2"></div>
+
+ <div class="knob-label">Online</div>
+ </div>
+ <!-- ./col -->
+ <div class="col-xs-4 text-center">
+ <div id="sparkline-3"></div>
+
+ <div class="knob-label">Exists</div>
+ </div>
+ <!-- ./col -->
+ </div>
+ <!-- /.row -->
+ </div>
+ </div>
+ <!-- /.box -->
+
+ <!-- solid sales graph -->
+ <div class="box box-solid bg-teal-gradient">
+ <div class="box-header">
+ <i class="fa fa-th"></i>
+
+ <h3 class="box-title">Sales Graph</h3>
+
+ <div class="box-tools pull-right">
+ <button type="button" class="btn bg-teal btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ <button type="button" class="btn bg-teal btn-sm" data-widget="remove"><i class="fa fa-times"></i>
+ </button>
+ </div>
+ </div>
+
+ <div class="box-body border-radius-none">
+ <div class="chart" id="line-chart" style="height: 250px;"></div>
+ </div>
+ <!-- /.box-body -->
+ <div class="box-footer no-border">
+ <div class="row">
+ <div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
+ <input type="text" class="knob" data-readonly="true" value="20" data-width="60" data-height="60"
+ data-fgColor="#39CCCC">
+
+ <div class="knob-label">Mail-Orders</div>
+ </div>
+ <!-- ./col -->
+ <div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
+ <input type="text" class="knob" data-readonly="true" value="50" data-width="60" data-height="60"
+ data-fgColor="#39CCCC">
+
+ <div class="knob-label">Online</div>
+ </div>
+ <!-- ./col -->
+ <div class="col-xs-4 text-center">
+ <input type="text" class="knob" data-readonly="true" value="30" data-width="60" data-height="60"
+ data-fgColor="#39CCCC">
+
+ <div class="knob-label">In-Store</div>
+ </div>
+ <!-- ./col -->
+ </div>
+ <!-- /.row -->
+ </div>
+ <!-- /.box-footer -->
+ </div>
+ <!-- /.box -->
+
+ <!-- Calendar -->
+ <div class="box box-solid bg-green-gradient">
+ <div class="box-header">
+ <i class="fa fa-calendar"></i>
+
+ <h3 class="box-title">Calendar</h3>
+ <!-- tools box -->
+ <div class="pull-right box-tools">
+ <!-- button with a dropdown -->
+ <div class="btn-group">
+ <button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown">
+ <i class="fa fa-bars"></i></button>
+ <ul class="dropdown-menu pull-right" role="menu">
+ <li><a href="#">Add new event</a></li>
+ <li><a href="#">Clear events</a></li>
+ <li class="divider"></li>
+ <li><a href="#">View calendar</a></li>
+ </ul>
+ </div>
+ <button type="button" class="btn btn-success btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ <button type="button" class="btn btn-success btn-sm" data-widget="remove"><i class="fa fa-times"></i>
+ </button>
+ </div>
+ <!-- /. tools -->
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body no-padding">
+ <!--The calendar -->
+ <div id="calendar" style="width: 100%"></div>
+ </div>
+ <!-- /.box-body -->
+ <div class="box-footer text-black">
+ <div class="row">
+ <div class="col-sm-6">
+ <!-- Progress bars -->
+ <div class="clearfix">
+ <span class="pull-left">Task #1</span>
+ <small class="pull-right">90%</small>
+ </div>
+
+ <div class="progress xs">
+ <div class="progress-bar progress-bar-green" style="width: 90%;"></div>
+ </div>
+
+ <div class="clearfix">
+ <span class="pull-left">Task #2</span>
+ <small class="pull-right">70%</small>
+ </div>
+
+ <div class="progress xs">
+ <div class="progress-bar progress-bar-green" style="width: 70%;"></div>
+ </div>
+ </div>
+ <!-- /.col -->
+ <div class="col-sm-6">
+ <div class="clearfix">
+ <span class="pull-left">Task #3</span>
+ <small class="pull-right">60%</small>
+ </div>
+
+ <div class="progress xs">
+ <div class="progress-bar progress-bar-green" style="width: 60%;"></div>
+ </div>
+
+ <div class="clearfix">
+ <span class="pull-left">Task #4</span>
+ <small class="pull-right">40%</small>
+ </div>
+
+ <div class="progress xs">
+ <div class="progress-bar progress-bar-green" style="width: 40%;"></div>
+ </div>
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+ </div>
+ </div>
+ <!-- /.box -->
+
+ </section>
+ <!-- right col -->
+ </div>
+ <!-- /.row (main row) -->
+
+</section>
+<!-- /.content -->
+</div>
\ No newline at end of file
diff --git a/grails-app/assets/templates/xdashangular/index/dashboard2.html b/grails-app/assets/templates/xdashangular/index/dashboard2.html
index e69de29..616a366 100644
--- a/grails-app/assets/templates/xdashangular/index/dashboard2.html
+++ b/grails-app/assets/templates/xdashangular/index/dashboard2.html
@@ -0,0 +1,830 @@
+<!-- Content Header (Page header) -->
+<section class="content-header">
+ <h1>
+ Dashboard
+ <small>Version 2.0</small>
+ </h1>
+ <ol class="breadcrumb">
+ <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
+ <li class="active">Dashboard</li>
+ </ol>
+</section>
+
+<!-- Main content -->
+<section class="content">
+ <!-- Info boxes -->
+ <div class="row">
+ <div class="col-md-3 col-sm-6 col-xs-12">
+ <div class="info-box">
+ <span class="info-box-icon bg-aqua"><i class="ion ion-ios-gear-outline"></i></span>
+
+ <div class="info-box-content">
+ <span class="info-box-text">CPU Traffic</span>
+ <span class="info-box-number">90<small>%</small></span>
+ </div>
+ <!-- /.info-box-content -->
+ </div>
+ <!-- /.info-box -->
+ </div>
+ <!-- /.col -->
+ <div class="col-md-3 col-sm-6 col-xs-12">
+ <div class="info-box">
+ <span class="info-box-icon bg-red"><i class="fa fa-google-plus"></i></span>
+
+ <div class="info-box-content">
+ <span class="info-box-text">Likes</span>
+ <span class="info-box-number">41,410</span>
+ </div>
+ <!-- /.info-box-content -->
+ </div>
+ <!-- /.info-box -->
+ </div>
+ <!-- /.col -->
+
+ <!-- fix for small devices only -->
+ <div class="clearfix visible-sm-block"></div>
+
+ <div class="col-md-3 col-sm-6 col-xs-12">
+ <div class="info-box">
+ <span class="info-box-icon bg-green"><i class="ion ion-ios-cart-outline"></i></span>
+
+ <div class="info-box-content">
+ <span class="info-box-text">Sales</span>
+ <span class="info-box-number">760</span>
+ </div>
+ <!-- /.info-box-content -->
+ </div>
+ <!-- /.info-box -->
+ </div>
+ <!-- /.col -->
+ <div class="col-md-3 col-sm-6 col-xs-12">
+ <div class="info-box">
+ <span class="info-box-icon bg-yellow"><i class="ion ion-ios-people-outline"></i></span>
+
+ <div class="info-box-content">
+ <span class="info-box-text">New Members</span>
+ <span class="info-box-number">2,000</span>
+ </div>
+ <!-- /.info-box-content -->
+ </div>
+ <!-- /.info-box -->
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+
+ <div class="row">
+ <div class="col-md-12">
+ <div class="box">
+ <div class="box-header with-border">
+ <h3 class="box-title">Monthly Recap Report</h3>
+
+ <div class="box-tools pull-right">
+ <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ <div class="btn-group">
+ <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
+ <i class="fa fa-wrench"></i></button>
+ <ul class="dropdown-menu" role="menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div>
+ <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+ </div>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <div class="row">
+ <div class="col-md-8">
+ <p class="text-center">
+ <strong>Sales: 1 Jan, 2014 - 30 Jul, 2014</strong>
+ </p>
+
+ <div class="chart">
+ <!-- Sales Chart Canvas -->
+ <canvas id="salesChart" style="height: 180px;"></canvas>
+ </div>
+ <!-- /.chart-responsive -->
+ </div>
+ <!-- /.col -->
+ <div class="col-md-4">
+ <p class="text-center">
+ <strong>Goal Completion</strong>
+ </p>
+
+ <div class="progress-group">
+ <span class="progress-text">Add Products to Cart</span>
+ <span class="progress-number"><b>160</b>/200</span>
+
+ <div class="progress sm">
+ <div class="progress-bar progress-bar-aqua" style="width: 80%"></div>
+ </div>
+ </div>
+ <!-- /.progress-group -->
+ <div class="progress-group">
+ <span class="progress-text">Complete Purchase</span>
+ <span class="progress-number"><b>310</b>/400</span>
+
+ <div class="progress sm">
+ <div class="progress-bar progress-bar-red" style="width: 80%"></div>
+ </div>
+ </div>
+ <!-- /.progress-group -->
+ <div class="progress-group">
+ <span class="progress-text">Visit Premium Page</span>
+ <span class="progress-number"><b>480</b>/800</span>
+
+ <div class="progress sm">
+ <div class="progress-bar progress-bar-green" style="width: 80%"></div>
+ </div>
+ </div>
+ <!-- /.progress-group -->
+ <div class="progress-group">
+ <span class="progress-text">Send Inquiries</span>
+ <span class="progress-number"><b>250</b>/500</span>
+
+ <div class="progress sm">
+ <div class="progress-bar progress-bar-yellow" style="width: 80%"></div>
+ </div>
+ </div>
+ <!-- /.progress-group -->
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+ </div>
+ <!-- ./box-body -->
+ <div class="box-footer">
+ <div class="row">
+ <div class="col-sm-3 col-xs-6">
+ <div class="description-block border-right">
+ <span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 17%</span>
+ <h5 class="description-header">$35,210.43</h5>
+ <span class="description-text">TOTAL REVENUE</span>
+ </div>
+ <!-- /.description-block -->
+ </div>
+ <!-- /.col -->
+ <div class="col-sm-3 col-xs-6">
+ <div class="description-block border-right">
+ <span class="description-percentage text-yellow"><i class="fa fa-caret-left"></i> 0%</span>
+ <h5 class="description-header">$10,390.90</h5>
+ <span class="description-text">TOTAL COST</span>
+ </div>
+ <!-- /.description-block -->
+ </div>
+ <!-- /.col -->
+ <div class="col-sm-3 col-xs-6">
+ <div class="description-block border-right">
+ <span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 20%</span>
+ <h5 class="description-header">$24,813.53</h5>
+ <span class="description-text">TOTAL PROFIT</span>
+ </div>
+ <!-- /.description-block -->
+ </div>
+ <!-- /.col -->
+ <div class="col-sm-3 col-xs-6">
+ <div class="description-block">
+ <span class="description-percentage text-red"><i class="fa fa-caret-down"></i> 18%</span>
+ <h5 class="description-header">1200</h5>
+ <span class="description-text">GOAL COMPLETIONS</span>
+ </div>
+ <!-- /.description-block -->
+ </div>
+ </div>
+ <!-- /.row -->
+ </div>
+ <!-- /.box-footer -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+
+ <!-- Main row -->
+ <div class="row">
+ <!-- Left col -->
+ <div class="col-md-8">
+ <!-- MAP & BOX PANE -->
+ <div class="box box-success">
+ <div class="box-header with-border">
+ <h3 class="box-title">Visitors Report</h3>
+
+ <div class="box-tools pull-right">
+ <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+ </div>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body no-padding">
+ <div class="row">
+ <div class="col-md-9 col-sm-8">
+ <div class="pad">
+ <!-- Map will be created here -->
+ <div id="world-map-markers" style="height: 325px;"></div>
+ </div>
+ </div>
+ <!-- /.col -->
+ <div class="col-md-3 col-sm-4">
+ <div class="pad box-pane-right bg-green" style="min-height: 280px">
+ <div class="description-block margin-bottom">
+ <div class="sparkbar pad" data-color="#fff">90,70,90,70,75,80,70</div>
+ <h5 class="description-header">8390</h5>
+ <span class="description-text">Visits</span>
+ </div>
+ <!-- /.description-block -->
+ <div class="description-block margin-bottom">
+ <div class="sparkbar pad" data-color="#fff">90,50,90,70,61,83,63</div>
+ <h5 class="description-header">30%</h5>
+ <span class="description-text">Referrals</span>
+ </div>
+ <!-- /.description-block -->
+ <div class="description-block">
+ <div class="sparkbar pad" data-color="#fff">90,50,90,70,61,83,63</div>
+ <h5 class="description-header">70%</h5>
+ <span class="description-text">Organic</span>
+ </div>
+ <!-- /.description-block -->
+ </div>
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ <div class="row">
+ <div class="col-md-6">
+ <!-- DIRECT CHAT -->
+ <div class="box box-warning direct-chat direct-chat-warning">
+ <div class="box-header with-border">
+ <h3 class="box-title">Direct Chat</h3>
+
+ <div class="box-tools pull-right">
+ <span data-toggle="tooltip" title="3 New Messages" class="badge bg-yellow">3</span>
+ <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle">
+ <i class="fa fa-comments"></i></button>
+ <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
+ </button>
+ </div>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <!-- Conversations are loaded here -->
+ <div class="direct-chat-messages">
+ <!-- Message. Default to the left -->
+ <div class="direct-chat-msg">
+ <div class="direct-chat-info clearfix">
+ <span class="direct-chat-name pull-left">Alexander Pierce</span>
+ <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
+ </div>
+ <!-- /.direct-chat-info -->
+ <!--img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image"--><!-- /.direct-chat-img -->
+ <asset:image class="direct-chat-img" src="adminlte/user1-128x128.jpg" alt="message user image"/><!-- /.direct-chat-img -->
+ <div class="direct-chat-text">
+ Is this template really for free? That's unbelievable!
+ </div>
+ <!-- /.direct-chat-text -->
+ </div>
+ <!-- /.direct-chat-msg -->
+
+ <!-- Message to the right -->
+ <div class="direct-chat-msg right">
+ <div class="direct-chat-info clearfix">
+ <span class="direct-chat-name pull-right">Sarah Bullock</span>
+ <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
+ </div>
+ <!-- /.direct-chat-info -->
+ <asset:image class="direct-chat-img" src="adminlte/user3-128x128.jpg" alt="message user image"/><!-- /.direct-chat-img -->
+ <div class="direct-chat-text">
+ You better believe it!
+ </div>
+ <!-- /.direct-chat-text -->
+ </div>
+ <!-- /.direct-chat-msg -->
+
+ <!-- Message. Default to the left -->
+ <div class="direct-chat-msg">
+ <div class="direct-chat-info clearfix">
+ <span class="direct-chat-name pull-left">Alexander Pierce</span>
+ <span class="direct-chat-timestamp pull-right">23 Jan 5:37 pm</span>
+ </div>
+ <!-- /.direct-chat-info -->
+ <asset:image class="direct-chat-img" src="adminlte/adminlte/user1-128x128.jpg" alt="message user image"/><!-- /.direct-chat-img -->
+ <div class="direct-chat-text">
+ Working with AdminLTE on a great new app! Wanna join?
+ </div>
+ <!-- /.direct-chat-text -->
+ </div>
+ <!-- /.direct-chat-msg -->
+
+ <!-- Message to the right -->
+ <div class="direct-chat-msg right">
+ <div class="direct-chat-info clearfix">
+ <span class="direct-chat-name pull-right">Sarah Bullock</span>
+ <span class="direct-chat-timestamp pull-left">23 Jan 6:10 pm</span>
+ </div>
+ <!-- /.direct-chat-info -->
+ <img class="direct-chat-img" src="assets/adminlte/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
+ <div class="direct-chat-text">
+ I would love to.
+ </div>
+ <!-- /.direct-chat-text -->
+ </div>
+ <!-- /.direct-chat-msg -->
+
+ </div>
+ <!--/.direct-chat-messages-->
+
+ <!-- Contacts are loaded here -->
+ <div class="direct-chat-contacts">
+ <ul class="contacts-list">
+ <li>
+ <a href="#">
+ <img class="contacts-list-img" src="assets/adminlte/user1-128x128.jpg" alt="User Image">
+
+ <div class="contacts-list-info">
+ <span class="contacts-list-name">
+ Count Dracula
+ <small class="contacts-list-date pull-right">2/28/2015</small>
+ </span>
+ <span class="contacts-list-msg">How have you been? I was...</span>
+ </div>
+ <!-- /.contacts-list-info -->
+ </a>
+ </li>
+ <!-- End Contact Item -->
+ <li>
+ <a href="#">
+ <img class="contacts-list-img" src="assets/adminlte/user7-128x128.jpg" alt="User Image">
+
+ <div class="contacts-list-info">
+ <span class="contacts-list-name">
+ Sarah Doe
+ <small class="contacts-list-date pull-right">2/23/2015</small>
+ </span>
+ <span class="contacts-list-msg">I will be waiting for...</span>
+ </div>
+ <!-- /.contacts-list-info -->
+ </a>
+ </li>
+ <!-- End Contact Item -->
+ <li>
+ <a href="#">
+ <img class="contacts-list-img" src="assets/adminlte/user3-128x128.jpg" alt="User Image">
+
+ <div class="contacts-list-info">
+ <span class="contacts-list-name">
+ Nadia Jolie
+ <small class="contacts-list-date pull-right">2/20/2015</small>
+ </span>
+ <span class="contacts-list-msg">I'll call you back at...</span>
+ </div>
+ <!-- /.contacts-list-info -->
+ </a>
+ </li>
+ <!-- End Contact Item -->
+ <li>
+ <a href="#">
+ <img class="contacts-list-img" src="assets/adminlte/user5-128x128.jpg" alt="User Image">
+
+ <div class="contacts-list-info">
+ <span class="contacts-list-name">
+ Nora S. Vans
+ <small class="contacts-list-date pull-right">2/10/2015</small>
+ </span>
+ <span class="contacts-list-msg">Where is your new...</span>
+ </div>
+ <!-- /.contacts-list-info -->
+ </a>
+ </li>
+ <!-- End Contact Item -->
+ <li>
+ <a href="#">
+ <img class="contacts-list-img" src="assets/adminlte/user6-128x128.jpg" alt="User Image">
+
+ <div class="contacts-list-info">
+ <span class="contacts-list-name">
+ John K.
+ <small class="contacts-list-date pull-right">1/27/2015</small>
+ </span>
+ <span class="contacts-list-msg">Can I take a look at...</span>
+ </div>
+ <!-- /.contacts-list-info -->
+ </a>
+ </li>
+ <!-- End Contact Item -->
+ <li>
+ <a href="#">
+ <img class="contacts-list-img" src="assets/adminlte/user8-128x128.jpg" alt="User Image">
+
+ <div class="contacts-list-info">
+ <span class="contacts-list-name">
+ Kenneth M.
+ <small class="contacts-list-date pull-right">1/4/2015</small>
+ </span>
+ <span class="contacts-list-msg">Never mind I found...</span>
+ </div>
+ <!-- /.contacts-list-info -->
+ </a>
+ </li>
+ <!-- End Contact Item -->
+ </ul>
+ <!-- /.contatcts-list -->
+ </div>
+ <!-- /.direct-chat-pane -->
+ </div>
+ <!-- /.box-body -->
+ <div class="box-footer">
+ <form action="#" method="post">
+ <div class="input-group">
+ <input type="text" name="message" placeholder="Type Message ..." class="form-control">
+ <span class="input-group-btn">
+ <button type="button" class="btn btn-warning btn-flat">Send</button>
+ </span>
+ </div>
+ </form>
+ </div>
+ <!-- /.box-footer-->
+ </div>
+ <!--/.direct-chat -->
+ </div>
+ <!-- /.col -->
+
+ <div class="col-md-6">
+ <!-- USERS LIST -->
+ <div class="box box-danger">
+ <div class="box-header with-border">
+ <h3 class="box-title">Latest Members</h3>
+
+ <div class="box-tools pull-right">
+ <span class="label label-danger">8 New Members</span>
+ <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
+ </button>
+ </div>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body no-padding">
+ <ul class="users-list clearfix">
+ <li>
+ <img src="assets/adminlte/user1-128x128.jpg" alt="User Image">
+ <a class="users-list-name" href="#">Alexander Pierce</a>
+ <span class="users-list-date">Today</span>
+ </li>
+ <li>
+ <img src="assets/adminlte/user8-128x128.jpg" alt="User Image">
+ <a class="users-list-name" href="#">Norman</a>
+ <span class="users-list-date">Yesterday</span>
+ </li>
+ <li>
+ <img src="assets/adminlte/user7-128x128.jpg" alt="User Image">
+ <a class="users-list-name" href="#">Jane</a>
+ <span class="users-list-date">12 Jan</span>
+ </li>
+ <li>
+ <img src="assets/adminlte/user6-128x128.jpg" alt="User Image">
+ <a class="users-list-name" href="#">John</a>
+ <span class="users-list-date">12 Jan</span>
+ </li>
+ <li>
+ <img src="assets/adminlte/user2-160x160.jpg" alt="User Image">
+ <a class="users-list-name" href="#">Alexander</a>
+ <span class="users-list-date">13 Jan</span>
+ </li>
+ <li>
+ <img src="assets/adminlte/user5-128x128.jpg" alt="User Image">
+ <a class="users-list-name" href="#">Sarah</a>
+ <span class="users-list-date">14 Jan</span>
+ </li>
+ <li>
+ <img src="assets/adminlte/user4-128x128.jpg" alt="User Image">
+ <a class="users-list-name" href="#">Nora</a>
+ <span class="users-list-date">15 Jan</span>
+ </li>
+ <li>
+ <img src="assets/adminlte/user3-128x128.jpg" alt="User Image">
+ <a class="users-list-name" href="#">Nadia</a>
+ <span class="users-list-date">15 Jan</span>
+ </li>
+ </ul>
+ <!-- /.users-list -->
+ </div>
+ <!-- /.box-body -->
+ <div class="box-footer text-center">
+ <a href="javascript:void(0)" class="uppercase">View All Users</a>
+ </div>
+ <!-- /.box-footer -->
+ </div>
+ <!--/.box -->
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+
+ <!-- TABLE: LATEST ORDERS -->
+ <div class="box box-info">
+ <div class="box-header with-border">
+ <h3 class="box-title">Latest Orders</h3>
+
+ <div class="box-tools pull-right">
+ <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+ </div>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <div class="table-responsive">
+ <table class="table no-margin">
+ <thead>
+ <tr>
+ <th>Order ID</th>
+ <th>Item</th>
+ <th>Status</th>
+ <th>Popularity</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><a href="pages/examples/invoice.html">OR9842</a></td>
+ <td>Call of Duty IV</td>
+ <td><span class="label label-success">Shipped</span></td>
+ <td>
+ <div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div>
+ </td>
+ </tr>
+ <tr>
+ <td><a href="pages/examples/invoice.html">OR1848</a></td>
+ <td>Samsung Smart TV</td>
+ <td><span class="label label-warning">Pending</span></td>
+ <td>
+ <div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div>
+ </td>
+ </tr>
+ <tr>
+ <td><a href="pages/examples/invoice.html">OR7429</a></td>
+ <td>iPhone 6 Plus</td>
+ <td><span class="label label-danger">Delivered</span></td>
+ <td>
+ <div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div>
+ </td>
+ </tr>
+ <tr>
+ <td><a href="pages/examples/invoice.html">OR7429</a></td>
+ <td>Samsung Smart TV</td>
+ <td><span class="label label-info">Processing</span></td>
+ <td>
+ <div class="sparkbar" data-color="#00c0ef" data-height="20">90,80,-90,70,-61,83,63</div>
+ </td>
+ </tr>
+ <tr>
+ <td><a href="pages/examples/invoice.html">OR1848</a></td>
+ <td>Samsung Smart TV</td>
+ <td><span class="label label-warning">Pending</span></td>
+ <td>
+ <div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div>
+ </td>
+ </tr>
+ <tr>
+ <td><a href="pages/examples/invoice.html">OR7429</a></td>
+ <td>iPhone 6 Plus</td>
+ <td><span class="label label-danger">Delivered</span></td>
+ <td>
+ <div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div>
+ </td>
+ </tr>
+ <tr>
+ <td><a href="pages/examples/invoice.html">OR9842</a></td>
+ <td>Call of Duty IV</td>
+ <td><span class="label label-success">Shipped</span></td>
+ <td>
+ <div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!-- /.table-responsive -->
+ </div>
+ <!-- /.box-body -->
+ <div class="box-footer clearfix">
+ <a href="javascript:void(0)" class="btn btn-sm btn-info btn-flat pull-left">Place New Order</a>
+ <a href="javascript:void(0)" class="btn btn-sm btn-default btn-flat pull-right">View All Orders</a>
+ </div>
+ <!-- /.box-footer -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col -->
+
+ <div class="col-md-4">
+ <!-- Info Boxes Style 2 -->
+ <div class="info-box bg-yellow">
+ <span class="info-box-icon"><i class="ion ion-ios-pricetag-outline"></i></span>
+
+ <div class="info-box-content">
+ <span class="info-box-text">Inventory</span>
+ <span class="info-box-number">5,200</span>
+
+ <div class="progress">
+ <div class="progress-bar" style="width: 50%"></div>
+ </div>
+ <span class="progress-description">
+ 50% Increase in 30 Days
+ </span>
+ </div>
+ <!-- /.info-box-content -->
+ </div>
+ <!-- /.info-box -->
+ <div class="info-box bg-green">
+ <span class="info-box-icon"><i class="ion ion-ios-heart-outline"></i></span>
+
+ <div class="info-box-content">
+ <span class="info-box-text">Mentions</span>
+ <span class="info-box-number">92,050</span>
+
+ <div class="progress">
+ <div class="progress-bar" style="width: 20%"></div>
+ </div>
+ <span class="progress-description">
+ 20% Increase in 30 Days
+ </span>
+ </div>
+ <!-- /.info-box-content -->
+ </div>
+ <!-- /.info-box -->
+ <div class="info-box bg-red">
+ <span class="info-box-icon"><i class="ion ion-ios-cloud-download-outline"></i></span>
+
+ <div class="info-box-content">
+ <span class="info-box-text">Downloads</span>
+ <span class="info-box-number">114,381</span>
+
+ <div class="progress">
+ <div class="progress-bar" style="width: 70%"></div>
+ </div>
+ <span class="progress-description">
+ 70% Increase in 30 Days
+ </span>
+ </div>
+ <!-- /.info-box-content -->
+ </div>
+ <!-- /.info-box -->
+ <div class="info-box bg-aqua">
+ <span class="info-box-icon"><i class="ion-ios-chatbubble-outline"></i></span>
+
+ <div class="info-box-content">
+ <span class="info-box-text">Direct Messages</span>
+ <span class="info-box-number">163,921</span>
+
+ <div class="progress">
+ <div class="progress-bar" style="width: 40%"></div>
+ </div>
+ <span class="progress-description">
+ 40% Increase in 30 Days
+ </span>
+ </div>
+ <!-- /.info-box-content -->
+ </div>
+ <!-- /.info-box -->
+
+ <div class="box box-default">
+ <div class="box-header with-border">
+ <h3 class="box-title">Browser Usage</h3>
+
+ <div class="box-tools pull-right">
+ <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+ </div>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <div class="row">
+ <div class="col-md-8">
+ <div class="chart-responsive">
+ <canvas id="pieChart" height="150"></canvas>
+ </div>
+ <!-- ./chart-responsive -->
+ </div>
+ <!-- /.col -->
+ <div class="col-md-4">
+ <ul class="chart-legend clearfix">
+ <li><i class="fa fa-circle-o text-red"></i> Chrome</li>
+ <li><i class="fa fa-circle-o text-green"></i> IE</li>
+ <li><i class="fa fa-circle-o text-yellow"></i> FireFox</li>
+ <li><i class="fa fa-circle-o text-aqua"></i> Safari</li>
+ <li><i class="fa fa-circle-o text-light-blue"></i> Opera</li>
+ <li><i class="fa fa-circle-o text-gray"></i> Navigator</li>
+ </ul>
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+ </div>
+ <!-- /.box-body -->
+ <div class="box-footer no-padding">
+ <ul class="nav nav-pills nav-stacked">
+ <li><a href="#">United States of America
+ <span class="pull-right text-red"><i class="fa fa-angle-down"></i> 12%</span></a></li>
+ <li><a href="#">India <span class="pull-right text-green"><i class="fa fa-angle-up"></i> 4%</span></a>
+ </li>
+ <li><a href="#">China
+ <span class="pull-right text-yellow"><i class="fa fa-angle-left"></i> 0%</span></a></li>
+ </ul>
+ </div>
+ <!-- /.footer -->
+ </div>
+ <!-- /.box -->
+
+ <!-- PRODUCT LIST -->
+ <div class="box box-primary">
+ <div class="box-header with-border">
+ <h3 class="box-title">Recently Added Products</h3>
+
+ <div class="box-tools pull-right">
+ <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+ </div>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <ul class="products-list product-list-in-box">
+ <li class="item">
+ <div class="product-img">
+ <img src="assets/adminlte/default-50x50.gif" alt="Product Image">
+ </div>
+ <div class="product-info">
+ <a href="javascript:void(0)" class="product-title">Samsung TV
+ <span class="label label-warning pull-right">$1800</span></a>
+ <span class="product-description">
+ Samsung 32" 1080p 60Hz LED Smart HDTV.
+ </span>
+ </div>
+ </li>
+ <!-- /.item -->
+ <li class="item">
+ <div class="product-img">
+ <img src="assets/adminlte/default-50x50.gif" alt="Product Image">
+ </div>
+ <div class="product-info">
+ <a href="javascript:void(0)" class="product-title">Bicycle
+ <span class="label label-info pull-right">$700</span></a>
+ <span class="product-description">
+ 26" Mongoose Dolomite Men's 7-speed, Navy Blue.
+ </span>
+ </div>
+ </li>
+ <!-- /.item -->
+ <li class="item">
+ <div class="product-img">
+ <img src="assets/adminlte/default-50x50.gif" alt="Product Image">
+ </div>
+ <div class="product-info">
+ <a href="javascript:void(0)" class="product-title">Xbox One <span class="label label-danger pull-right">$350</span></a>
+ <span class="product-description">
+ Xbox One Console Bundle with Halo Master Chief Collection.
+ </span>
+ </div>
+ </li>
+ <!-- /.item -->
+ <li class="item">
+ <div class="product-img">
+ <img src="assets/adminlte/default-50x50.gif" alt="Product Image">
+ </div>
+ <div class="product-info">
+ <a href="javascript:void(0)" class="product-title">PlayStation 4
+ <span class="label label-success pull-right">$399</span></a>
+ <span class="product-description">
+ PlayStation 4 500GB Console (PS4)
+ </span>
+ </div>
+ </li>
+ <!-- /.item -->
+ </ul>
+ </div>
+ <!-- /.box-body -->
+ <div class="box-footer text-center">
+ <a href="javascript:void(0)" class="uppercase">View All Products</a>
+ </div>
+ <!-- /.box-footer -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+</section>
+<!-- /.content -->
diff --git a/grails-app/assets/templates/xdashangular/index/widgets.html b/grails-app/assets/templates/xdashangular/index/widgets.html
index de155ea..8b9d32e 100644
--- a/grails-app/assets/templates/xdashangular/index/widgets.html
+++ b/grails-app/assets/templates/xdashangular/index/widgets.html
@@ -1,10 +1,1071 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <title>Title</title>
-</head>
-<body>
+<!-- Content Header (Page header) -->
+<section class="content-header">
+ <h1>
+ Widgets
+ <small>Preview page</small>
+ </h1>
+ <ol class="breadcrumb">
+ <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
+ <li class="active">Widgets</li>
+ </ol>
+</section>
-</body>
-</html>
\ No newline at end of file
+<!-- Main content -->
+<section class="content">
+
+ <div class="row">
+ <div class="col-md-3 col-sm-6 col-xs-12">
+ <div class="info-box">
+ <span class="info-box-icon bg-aqua"><i class="fa fa-envelope-o"></i></span>
+
+ <div class="info-box-content">
+ <span class="info-box-text">Messages</span>
+ <span class="info-box-number">1,410</span>
+ </div>
+ <!-- /.info-box-content -->
+ </div>
+ <!-- /.info-box -->
+ </div>
+ <!-- /.col -->
+ <div class="col-md-3 col-sm-6 col-xs-12">
+ <div class="info-box">
+ <span class="info-box-icon bg-green"><i class="fa fa-flag-o"></i></span>
+
+ <div class="info-box-content">
+ <span class="info-box-text">Bookmarks</span>
+ <span class="info-box-number">410</span>
+ </div>
+ <!-- /.info-box-content -->
+ </div>
+ <!-- /.info-box -->
+ </div>
+ <!-- /.col -->
+ <div class="col-md-3 col-sm-6 col-xs-12">
+ <div class="info-box">
+ <span class="info-box-icon bg-yellow"><i class="fa fa-files-o"></i></span>
+
+ <div class="info-box-content">
+ <span class="info-box-text">Uploads</span>
+ <span class="info-box-number">13,648</span>
+ </div>
+ <!-- /.info-box-content -->
+ </div>
+ <!-- /.info-box -->
+ </div>
+ <!-- /.col -->
+ <div class="col-md-3 col-sm-6 col-xs-12">
+ <div class="info-box">
+ <span class="info-box-icon bg-red"><i class="fa fa-star-o"></i></span>
+
+ <div class="info-box-content">
+ <span class="info-box-text">Likes</span>
+ <span class="info-box-number">93,139</span>
+ </div>
+ <!-- /.info-box-content -->
+ </div>
+ <!-- /.info-box -->
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+
+ <!-- =========================================================== -->
+
+ <div class="row">
+ <div class="col-md-3 col-sm-6 col-xs-12">
+ <div class="info-box bg-aqua">
+ <span class="info-box-icon"><i class="fa fa-bookmark-o"></i></span>
+
+ <div class="info-box-content">
+ <span class="info-box-text">Bookmarks</span>
+ <span class="info-box-number">41,410</span>
+
+ <div class="progress">
+ <div class="progress-bar" style="width: 70%"></div>
+ </div>
+ <span class="progress-description">
+ 70% Increase in 30 Days
+ </span>
+ </div>
+ <!-- /.info-box-content -->
+ </div>
+ <!-- /.info-box -->
+ </div>
+ <!-- /.col -->
+ <div class="col-md-3 col-sm-6 col-xs-12">
+ <div class="info-box bg-green">
+ <span class="info-box-icon"><i class="fa fa-thumbs-o-up"></i></span>
+
+ <div class="info-box-content">
+ <span class="info-box-text">Likes</span>
+ <span class="info-box-number">41,410</span>
+
+ <div class="progress">
+ <div class="progress-bar" style="width: 70%"></div>
+ </div>
+ <span class="progress-description">
+ 70% Increase in 30 Days
+ </span>
+ </div>
+ <!-- /.info-box-content -->
+ </div>
+ <!-- /.info-box -->
+ </div>
+ <!-- /.col -->
+ <div class="col-md-3 col-sm-6 col-xs-12">
+ <div class="info-box bg-yellow">
+ <span class="info-box-icon"><i class="fa fa-calendar"></i></span>
+
+ <div class="info-box-content">
+ <span class="info-box-text">Events</span>
+ <span class="info-box-number">41,410</span>
+
+ <div class="progress">
+ <div class="progress-bar" style="width: 70%"></div>
+ </div>
+ <span class="progress-description">
+ 70% Increase in 30 Days
+ </span>
+ </div>
+ <!-- /.info-box-content -->
+ </div>
+ <!-- /.info-box -->
+ </div>
+ <!-- /.col -->
+ <div class="col-md-3 col-sm-6 col-xs-12">
+ <div class="info-box bg-red">
+ <span class="info-box-icon"><i class="fa fa-comments-o"></i></span>
+
+ <div class="info-box-content">
+ <span class="info-box-text">Comments</span>
+ <span class="info-box-number">41,410</span>
+
+ <div class="progress">
+ <div class="progress-bar" style="width: 70%"></div>
+ </div>
+ <span class="progress-description">
+ 70% Increase in 30 Days
+ </span>
+ </div>
+ <!-- /.info-box-content -->
+ </div>
+ <!-- /.info-box -->
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+
+ <!-- =========================================================== -->
+
+ <!-- Small boxes (Stat box) -->
+ <div class="row">
+ <div class="col-lg-3 col-xs-6">
+ <!-- small box -->
+ <div class="small-box bg-aqua">
+ <div class="inner">
+ <h3>150</h3>
+
+ <p>New Orders</p>
+ </div>
+ <div class="icon">
+ <i class="fa fa-shopping-cart"></i>
+ </div>
+ <a href="#" class="small-box-footer">
+ More info <i class="fa fa-arrow-circle-right"></i>
+ </a>
+ </div>
+ </div>
+ <!-- ./col -->
+ <div class="col-lg-3 col-xs-6">
+ <!-- small box -->
+ <div class="small-box bg-green">
+ <div class="inner">
+ <h3>53<sup style="font-size: 20px">%</sup></h3>
+
+ <p>Bounce Rate</p>
+ </div>
+ <div class="icon">
+ <i class="ion ion-stats-bars"></i>
+ </div>
+ <a href="#" class="small-box-footer">
+ More info <i class="fa fa-arrow-circle-right"></i>
+ </a>
+ </div>
+ </div>
+ <!-- ./col -->
+ <div class="col-lg-3 col-xs-6">
+ <!-- small box -->
+ <div class="small-box bg-yellow">
+ <div class="inner">
+ <h3>44</h3>
+
+ <p>User Registrations</p>
+ </div>
+ <div class="icon">
+ <i class="ion ion-person-add"></i>
+ </div>
+ <a href="#" class="small-box-footer">
+ More info <i class="fa fa-arrow-circle-right"></i>
+ </a>
+ </div>
+ </div>
+ <!-- ./col -->
+ <div class="col-lg-3 col-xs-6">
+ <!-- small box -->
+ <div class="small-box bg-red">
+ <div class="inner">
+ <h3>65</h3>
+
+ <p>Unique Visitors</p>
+ </div>
+ <div class="icon">
+ <i class="ion ion-pie-graph"></i>
+ </div>
+ <a href="#" class="small-box-footer">
+ More info <i class="fa fa-arrow-circle-right"></i>
+ </a>
+ </div>
+ </div>
+ <!-- ./col -->
+ </div>
+ <!-- /.row -->
+
+ <!-- =========================================================== -->
+
+ <div class="row">
+ <div class="col-md-3">
+ <div class="box box-default collapsed-box">
+ <div class="box-header with-border">
+ <h3 class="box-title">Expandable</h3>
+
+ <div class="box-tools pull-right">
+ <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
+ </button>
+ </div>
+ <!-- /.box-tools -->
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ The body of the box
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col -->
+ <div class="col-md-3">
+ <div class="box box-success">
+ <div class="box-header with-border">
+ <h3 class="box-title">Removable</h3>
+
+ <div class="box-tools pull-right">
+ <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+ </div>
+ <!-- /.box-tools -->
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ The body of the box
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col -->
+ <div class="col-md-3">
+ <div class="box box-warning">
+ <div class="box-header with-border">
+ <h3 class="box-title">Collapsable</h3>
+
+ <div class="box-tools pull-right">
+ <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ </div>
+ <!-- /.box-tools -->
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ The body of the box
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col -->
+ <div class="col-md-3">
+ <div class="box box-danger">
+ <div class="box-header">
+ <h3 class="box-title">Loading state</h3>
+ </div>
+ <div class="box-body">
+ The body of the box
+ </div>
+ <!-- /.box-body -->
+ <!-- Loading (remove the following to stop the loading)-->
+ <div class="overlay">
+ <i class="fa fa-refresh fa-spin"></i>
+ </div>
+ <!-- end loading -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+
+ <!-- =========================================================== -->
+
+ <div class="row">
+ <div class="col-md-3">
+ <div class="box box-default collapsed-box box-solid">
+ <div class="box-header with-border">
+ <h3 class="box-title">Expandable</h3>
+
+ <div class="box-tools pull-right">
+ <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
+ </button>
+ </div>
+ <!-- /.box-tools -->
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ The body of the box
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col -->
+ <div class="col-md-3">
+ <div class="box box-success box-solid">
+ <div class="box-header with-border">
+ <h3 class="box-title">Removable</h3>
+
+ <div class="box-tools pull-right">
+ <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+ </div>
+ <!-- /.box-tools -->
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ The body of the box
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col -->
+ <div class="col-md-3">
+ <div class="box box-warning box-solid">
+ <div class="box-header with-border">
+ <h3 class="box-title">Collapsable</h3>
+
+ <div class="box-tools pull-right">
+ <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ </div>
+ <!-- /.box-tools -->
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ The body of the box
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col -->
+ <div class="col-md-3">
+ <div class="box box-danger box-solid">
+ <div class="box-header">
+ <h3 class="box-title">Loading state</h3>
+ </div>
+ <div class="box-body">
+ The body of the box
+ </div>
+ <!-- /.box-body -->
+ <!-- Loading (remove the following to stop the loading)-->
+ <div class="overlay">
+ <i class="fa fa-refresh fa-spin"></i>
+ </div>
+ <!-- end loading -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+
+ <!-- =========================================================== -->
+
+ <!-- Direct Chat -->
+ <div class="row">
+ <div class="col-md-3">
+ <!-- DIRECT CHAT PRIMARY -->
+ <div class="box box-primary direct-chat direct-chat-primary">
+ <div class="box-header with-border">
+ <h3 class="box-title">Direct Chat</h3>
+
+ <div class="box-tools pull-right">
+ <span data-toggle="tooltip" title="3 New Messages" class="badge bg-light-blue">3</span>
+ <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle">
+ <i class="fa fa-comments"></i></button>
+ <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+ </div>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <!-- Conversations are loaded here -->
+ <div class="direct-chat-messages">
+ <!-- Message. Default to the left -->
+ <div class="direct-chat-msg">
+ <div class="direct-chat-info clearfix">
+ <span class="direct-chat-name pull-left">Alexander Pierce</span>
+ <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
+ </div>
+ <!-- /.direct-chat-info -->
+ <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image"><!-- /.direct-chat-img -->
+ <div class="direct-chat-text">
+ Is this template really for free? That's unbelievable!
+ </div>
+ <!-- /.direct-chat-text -->
+ </div>
+ <!-- /.direct-chat-msg -->
+
+ <!-- Message to the right -->
+ <div class="direct-chat-msg right">
+ <div class="direct-chat-info clearfix">
+ <span class="direct-chat-name pull-right">Sarah Bullock</span>
+ <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
+ </div>
+ <!-- /.direct-chat-info -->
+ <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image"><!-- /.direct-chat-img -->
+ <div class="direct-chat-text">
+ You better believe it!
+ </div>
+ <!-- /.direct-chat-text -->
+ </div>
+ <!-- /.direct-chat-msg -->
+ </div>
+ <!--/.direct-chat-messages-->
+
+ <!-- Contacts are loaded here -->
+ <div class="direct-chat-contacts">
+ <ul class="contacts-list">
+ <li>
+ <a href="#">
+ <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="User Image">
+
+ <div class="contacts-list-info">
+ <span class="contacts-list-name">
+ Count Dracula
+ <small class="contacts-list-date pull-right">2/28/2015</small>
+ </span>
+ <span class="contacts-list-msg">How have you been? I was...</span>
+ </div>
+ <!-- /.contacts-list-info -->
+ </a>
+ </li>
+ <!-- End Contact Item -->
+ </ul>
+ <!-- /.contatcts-list -->
+ </div>
+ <!-- /.direct-chat-pane -->
+ </div>
+ <!-- /.box-body -->
+ <div class="box-footer">
+ <form action="#" method="post">
+ <div class="input-group">
+ <input type="text" name="message" placeholder="Type Message ..." class="form-control">
+ <span class="input-group-btn">
+ <button type="submit" class="btn btn-primary btn-flat">Send</button>
+ </span>
+ </div>
+ </form>
+ </div>
+ <!-- /.box-footer-->
+ </div>
+ <!--/.direct-chat -->
+ </div>
+ <!-- /.col -->
+
+ <div class="col-md-3">
+ <!-- DIRECT CHAT SUCCESS -->
+ <div class="box box-success direct-chat direct-chat-success">
+ <div class="box-header with-border">
+ <h3 class="box-title">Direct Chat</h3>
+
+ <div class="box-tools pull-right">
+ <span data-toggle="tooltip" title="3 New Messages" class="badge bg-green">3</span>
+ <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle">
+ <i class="fa fa-comments"></i></button>
+ <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+ </div>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <!-- Conversations are loaded here -->
+ <div class="direct-chat-messages">
+ <!-- Message. Default to the left -->
+ <div class="direct-chat-msg">
+ <div class="direct-chat-info clearfix">
+ <span class="direct-chat-name pull-left">Alexander Pierce</span>
+ <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
+ </div>
+ <!-- /.direct-chat-info -->
+ <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image"><!-- /.direct-chat-img -->
+ <div class="direct-chat-text">
+ Is this template really for free? That's unbelievable!
+ </div>
+ <!-- /.direct-chat-text -->
+ </div>
+ <!-- /.direct-chat-msg -->
+
+ <!-- Message to the right -->
+ <div class="direct-chat-msg right">
+ <div class="direct-chat-info clearfix">
+ <span class="direct-chat-name pull-right">Sarah Bullock</span>
+ <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
+ </div>
+ <!-- /.direct-chat-info -->
+ <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image"><!-- /.direct-chat-img -->
+ <div class="direct-chat-text">
+ You better believe it!
+ </div>
+ <!-- /.direct-chat-text -->
+ </div>
+ <!-- /.direct-chat-msg -->
+ </div>
+ <!--/.direct-chat-messages-->
+
+ <!-- Contacts are loaded here -->
+ <div class="direct-chat-contacts">
+ <ul class="contacts-list">
+ <li>
+ <a href="#">
+ <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="User Image">
+
+ <div class="contacts-list-info">
+ <span class="contacts-list-name">
+ Count Dracula
+ <small class="contacts-list-date pull-right">2/28/2015</small>
+ </span>
+ <span class="contacts-list-msg">How have you been? I was...</span>
+ </div>
+ <!-- /.contacts-list-info -->
+ </a>
+ </li>
+ <!-- End Contact Item -->
+ </ul>
+ <!-- /.contatcts-list -->
+ </div>
+ <!-- /.direct-chat-pane -->
+ </div>
+ <!-- /.box-body -->
+ <div class="box-footer">
+ <form action="#" method="post">
+ <div class="input-group">
+ <input type="text" name="message" placeholder="Type Message ..." class="form-control">
+ <span class="input-group-btn">
+ <button type="submit" class="btn btn-success btn-flat">Send</button>
+ </span>
+ </div>
+ </form>
+ </div>
+ <!-- /.box-footer-->
+ </div>
+ <!--/.direct-chat -->
+ </div>
+ <!-- /.col -->
+
+ <div class="col-md-3">
+ <!-- DIRECT CHAT WARNING -->
+ <div class="box box-warning direct-chat direct-chat-warning">
+ <div class="box-header with-border">
+ <h3 class="box-title">Direct Chat</h3>
+
+ <div class="box-tools pull-right">
+ <span data-toggle="tooltip" title="3 New Messages" class="badge bg-yellow">3</span>
+ <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle">
+ <i class="fa fa-comments"></i></button>
+ <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+ </div>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <!-- Conversations are loaded here -->
+ <div class="direct-chat-messages">
+ <!-- Message. Default to the left -->
+ <div class="direct-chat-msg">
+ <div class="direct-chat-info clearfix">
+ <span class="direct-chat-name pull-left">Alexander Pierce</span>
+ <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
+ </div>
+ <!-- /.direct-chat-info -->
+ <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image"><!-- /.direct-chat-img -->
+ <div class="direct-chat-text">
+ Is this template really for free? That's unbelievable!
+ </div>
+ <!-- /.direct-chat-text -->
+ </div>
+ <!-- /.direct-chat-msg -->
+
+ <!-- Message to the right -->
+ <div class="direct-chat-msg right">
+ <div class="direct-chat-info clearfix">
+ <span class="direct-chat-name pull-right">Sarah Bullock</span>
+ <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
+ </div>
+ <!-- /.direct-chat-info -->
+ <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image"><!-- /.direct-chat-img -->
+ <div class="direct-chat-text">
+ You better believe it!
+ </div>
+ <!-- /.direct-chat-text -->
+ </div>
+ <!-- /.direct-chat-msg -->
+ </div>
+ <!--/.direct-chat-messages-->
+
+ <!-- Contacts are loaded here -->
+ <div class="direct-chat-contacts">
+ <ul class="contacts-list">
+ <li>
+ <a href="#">
+ <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="User Image">
+
+ <div class="contacts-list-info">
+ <span class="contacts-list-name">
+ Count Dracula
+ <small class="contacts-list-date pull-right">2/28/2015</small>
+ </span>
+ <span class="contacts-list-msg">How have you been? I was...</span>
+ </div>
+ <!-- /.contacts-list-info -->
+ </a>
+ </li>
+ <!-- End Contact Item -->
+ </ul>
+ <!-- /.contatcts-list -->
+ </div>
+ <!-- /.direct-chat-pane -->
+ </div>
+ <!-- /.box-body -->
+ <div class="box-footer">
+ <form action="#" method="post">
+ <div class="input-group">
+ <input type="text" name="message" placeholder="Type Message ..." class="form-control">
+ <span class="input-group-btn">
+ <button type="submit" class="btn btn-warning btn-flat">Send</button>
+ </span>
+ </div>
+ </form>
+ </div>
+ <!-- /.box-footer-->
+ </div>
+ <!--/.direct-chat -->
+ </div>
+ <!-- /.col -->
+
+ <div class="col-md-3">
+ <!-- DIRECT CHAT DANGER -->
+ <div class="box box-danger direct-chat direct-chat-danger">
+ <div class="box-header with-border">
+ <h3 class="box-title">Direct Chat</h3>
+
+ <div class="box-tools pull-right">
+ <span data-toggle="tooltip" title="3 New Messages" class="badge bg-red">3</span>
+ <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle">
+ <i class="fa fa-comments"></i></button>
+ <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+ </div>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <!-- Conversations are loaded here -->
+ <div class="direct-chat-messages">
+ <!-- Message. Default to the left -->
+ <div class="direct-chat-msg">
+ <div class="direct-chat-info clearfix">
+ <span class="direct-chat-name pull-left">Alexander Pierce</span>
+ <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
+ </div>
+ <!-- /.direct-chat-info -->
+ <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image"><!-- /.direct-chat-img -->
+ <div class="direct-chat-text">
+ Is this template really for free? That's unbelievable!
+ </div>
+ <!-- /.direct-chat-text -->
+ </div>
+ <!-- /.direct-chat-msg -->
+
+ <!-- Message to the right -->
+ <div class="direct-chat-msg right">
+ <div class="direct-chat-info clearfix">
+ <span class="direct-chat-name pull-right">Sarah Bullock</span>
+ <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
+ </div>
+ <!-- /.direct-chat-info -->
+ <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image"><!-- /.direct-chat-img -->
+ <div class="direct-chat-text">
+ You better believe it!
+ </div>
+ <!-- /.direct-chat-text -->
+ </div>
+ <!-- /.direct-chat-msg -->
+ </div>
+ <!--/.direct-chat-messages-->
+
+ <!-- Contacts are loaded here -->
+ <div class="direct-chat-contacts">
+ <ul class="contacts-list">
+ <li>
+ <a href="#">
+ <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="User Image">
+
+ <div class="contacts-list-info">
+ <span class="contacts-list-name">
+ Count Dracula
+ <small class="contacts-list-date pull-right">2/28/2015</small>
+ </span>
+ <span class="contacts-list-msg">How have you been? I was...</span>
+ </div>
+ <!-- /.contacts-list-info -->
+ </a>
+ </li>
+ <!-- End Contact Item -->
+ </ul>
+ <!-- /.contatcts-list -->
+ </div>
+ <!-- /.direct-chat-pane -->
+ </div>
+ <!-- /.box-body -->
+ <div class="box-footer">
+ <form action="#" method="post">
+ <div class="input-group">
+ <input type="text" name="message" placeholder="Type Message ..." class="form-control">
+ <span class="input-group-btn">
+ <button type="submit" class="btn btn-danger btn-flat">Send</button>
+ </span>
+ </div>
+ </form>
+ </div>
+ <!-- /.box-footer-->
+ </div>
+ <!--/.direct-chat -->
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+
+ <h2 class="page-header">Social Widgets</h2>
+
+ <div class="row">
+ <div class="col-md-4">
+ <!-- Widget: user widget style 1 -->
+ <div class="box box-widget widget-user-2">
+ <!-- Add the bg color to the header using any of the bg-* classes -->
+ <div class="widget-user-header bg-yellow">
+ <div class="widget-user-image">
+ <img class="img-circle" src="../dist/img/user7-128x128.jpg" alt="User Avatar">
+ </div>
+ <!-- /.widget-user-image -->
+ <h3 class="widget-user-username">Nadia Carmichael</h3>
+ <h5 class="widget-user-desc">Lead Developer</h5>
+ </div>
+ <div class="box-footer no-padding">
+ <ul class="nav nav-stacked">
+ <li><a href="#">Projects <span class="pull-right badge bg-blue">31</span></a></li>
+ <li><a href="#">Tasks <span class="pull-right badge bg-aqua">5</span></a></li>
+ <li><a href="#">Completed Projects <span class="pull-right badge bg-green">12</span></a></li>
+ <li><a href="#">Followers <span class="pull-right badge bg-red">842</span></a></li>
+ </ul>
+ </div>
+ </div>
+ <!-- /.widget-user -->
+ </div>
+ <!-- /.col -->
+ <div class="col-md-4">
+ <!-- Widget: user widget style 1 -->
+ <div class="box box-widget widget-user">
+ <!-- Add the bg color to the header using any of the bg-* classes -->
+ <div class="widget-user-header bg-aqua-active">
+ <h3 class="widget-user-username">Alexander Pierce</h3>
+ <h5 class="widget-user-desc">Founder & CEO</h5>
+ </div>
+ <div class="widget-user-image">
+ <img class="img-circle" src="../dist/img/user1-128x128.jpg" alt="User Avatar">
+ </div>
+ <div class="box-footer">
+ <div class="row">
+ <div class="col-sm-4 border-right">
+ <div class="description-block">
+ <h5 class="description-header">3,200</h5>
+ <span class="description-text">SALES</span>
+ </div>
+ <!-- /.description-block -->
+ </div>
+ <!-- /.col -->
+ <div class="col-sm-4 border-right">
+ <div class="description-block">
+ <h5 class="description-header">13,000</h5>
+ <span class="description-text">FOLLOWERS</span>
+ </div>
+ <!-- /.description-block -->
+ </div>
+ <!-- /.col -->
+ <div class="col-sm-4">
+ <div class="description-block">
+ <h5 class="description-header">35</h5>
+ <span class="description-text">PRODUCTS</span>
+ </div>
+ <!-- /.description-block -->
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+ </div>
+ </div>
+ <!-- /.widget-user -->
+ </div>
+ <!-- /.col -->
+ <div class="col-md-4">
+ <!-- Widget: user widget style 1 -->
+ <div class="box box-widget widget-user">
+ <!-- Add the bg color to the header using any of the bg-* classes -->
+ <div class="widget-user-header bg-black" style="background: url('../dist/img/photo1.png') center center;">
+ <h3 class="widget-user-username">Elizabeth Pierce</h3>
+ <h5 class="widget-user-desc">Web Designer</h5>
+ </div>
+ <div class="widget-user-image">
+ <img class="img-circle" src="../dist/img/user3-128x128.jpg" alt="User Avatar">
+ </div>
+ <div class="box-footer">
+ <div class="row">
+ <div class="col-sm-4 border-right">
+ <div class="description-block">
+ <h5 class="description-header">3,200</h5>
+ <span class="description-text">SALES</span>
+ </div>
+ <!-- /.description-block -->
+ </div>
+ <!-- /.col -->
+ <div class="col-sm-4 border-right">
+ <div class="description-block">
+ <h5 class="description-header">13,000</h5>
+ <span class="description-text">FOLLOWERS</span>
+ </div>
+ <!-- /.description-block -->
+ </div>
+ <!-- /.col -->
+ <div class="col-sm-4">
+ <div class="description-block">
+ <h5 class="description-header">35</h5>
+ <span class="description-text">PRODUCTS</span>
+ </div>
+ <!-- /.description-block -->
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+ </div>
+ </div>
+ <!-- /.widget-user -->
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+
+ <div class="row">
+ <div class="col-md-6">
+ <!-- Box Comment -->
+ <div class="box box-widget">
+ <div class="box-header with-border">
+ <div class="user-block">
+ <img class="img-circle" src="../dist/img/user1-128x128.jpg" alt="User Image">
+ <span class="username"><a href="#">Jonathan Burke Jr.</a></span>
+ <span class="description">Shared publicly - 7:30 PM Today</span>
+ </div>
+ <!-- /.user-block -->
+ <div class="box-tools">
+ <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="Mark as read">
+ <i class="fa fa-circle-o"></i></button>
+ <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+ </div>
+ <!-- /.box-tools -->
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <img class="img-responsive pad" src="../dist/img/photo2.png" alt="Photo">
+
+ <p>I took this photo this morning. What do you guys think?</p>
+ <button type="button" class="btn btn-default btn-xs"><i class="fa fa-share"></i> Share</button>
+ <button type="button" class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button>
+ <span class="pull-right text-muted">127 likes - 3 comments</span>
+ </div>
+ <!-- /.box-body -->
+ <div class="box-footer box-comments">
+ <div class="box-comment">
+ <!-- User image -->
+ <img class="img-circle img-sm" src="../dist/img/user3-128x128.jpg" alt="User Image">
+
+ <div class="comment-text">
+ <span class="username">
+ Maria Gonzales
+ <span class="text-muted pull-right">8:03 PM Today</span>
+ </span><!-- /.username -->
+ It is a long established fact that a reader will be distracted
+ by the readable content of a page when looking at its layout.
+ </div>
+ <!-- /.comment-text -->
+ </div>
+ <!-- /.box-comment -->
+ <div class="box-comment">
+ <!-- User image -->
+ <img class="img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="User Image">
+
+ <div class="comment-text">
+ <span class="username">
+ Luna Stark
+ <span class="text-muted pull-right">8:03 PM Today</span>
+ </span><!-- /.username -->
+ It is a long established fact that a reader will be distracted
+ by the readable content of a page when looking at its layout.
+ </div>
+ <!-- /.comment-text -->
+ </div>
+ <!-- /.box-comment -->
+ </div>
+ <!-- /.box-footer -->
+ <div class="box-footer">
+ <form action="#" method="post">
+ <img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="Alt Text">
+ <!-- .img-push is used to add margin to elements next to floating images -->
+ <div class="img-push">
+ <input type="text" class="form-control input-sm" placeholder="Press enter to post comment">
+ </div>
+ </form>
+ </div>
+ <!-- /.box-footer -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col -->
+ <div class="col-md-6">
+ <!-- Box Comment -->
+ <div class="box box-widget">
+ <div class="box-header with-border">
+ <div class="user-block">
+ <img class="img-circle" src="../dist/img/user1-128x128.jpg" alt="User Image">
+ <span class="username"><a href="#">Jonathan Burke Jr.</a></span>
+ <span class="description">Shared publicly - 7:30 PM Today</span>
+ </div>
+ <!-- /.user-block -->
+ <div class="box-tools">
+ <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="Mark as read">
+ <i class="fa fa-circle-o"></i></button>
+ <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+ </button>
+ <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+ </div>
+ <!-- /.box-tools -->
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <!-- post text -->
+ <p>Far far away, behind the word mountains, far from the
+ countries Vokalia and Consonantia, there live the blind
+ texts. Separated they live in Bookmarksgrove right at</p>
+
+ <p>the coast of the Semantics, a large language ocean.
+ A small river named Duden flows by their place and supplies
+ it with the necessary regelialia. It is a paradisematic
+ country, in which roasted parts of sentences fly into
+ your mouth.</p>
+
+ <!-- Attachment -->
+ <div class="attachment-block clearfix">
+ <img class="attachment-img" src="../dist/img/photo1.png" alt="Attachment Image">
+
+ <div class="attachment-pushed">
+ <h4 class="attachment-heading"><a href="http://www.lipsum.com/">Lorem ipsum text generator</a></h4>
+
+ <div class="attachment-text">
+ Description about the attachment can be placed here.
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry... <a href="#">more</a>
+ </div>
+ <!-- /.attachment-text -->
+ </div>
+ <!-- /.attachment-pushed -->
+ </div>
+ <!-- /.attachment-block -->
+
+ <!-- Social sharing buttons -->
+ <button type="button" class="btn btn-default btn-xs"><i class="fa fa-share"></i> Share</button>
+ <button type="button" class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button>
+ <span class="pull-right text-muted">45 likes - 2 comments</span>
+ </div>
+ <!-- /.box-body -->
+ <div class="box-footer box-comments">
+ <div class="box-comment">
+ <!-- User image -->
+ <img class="img-circle img-sm" src="../dist/img/user3-128x128.jpg" alt="User Image">
+
+ <div class="comment-text">
+ <span class="username">
+ Maria Gonzales
+ <span class="text-muted pull-right">8:03 PM Today</span>
+ </span><!-- /.username -->
+ It is a long established fact that a reader will be distracted
+ by the readable content of a page when looking at its layout.
+ </div>
+ <!-- /.comment-text -->
+ </div>
+ <!-- /.box-comment -->
+ <div class="box-comment">
+ <!-- User image -->
+ <img class="img-circle img-sm" src="../dist/img/user5-128x128.jpg" alt="User Image">
+
+ <div class="comment-text">
+ <span class="username">
+ Nora Havisham
+ <span class="text-muted pull-right">8:03 PM Today</span>
+ </span><!-- /.username -->
+ The point of using Lorem Ipsum is that it has a more-or-less
+ normal distribution of letters, as opposed to using
+ 'Content here, content here', making it look like readable English.
+ </div>
+ <!-- /.comment-text -->
+ </div>
+ <!-- /.box-comment -->
+ </div>
+ <!-- /.box-footer -->
+ <div class="box-footer">
+ <form action="#" method="post">
+ <img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="Alt Text">
+ <!-- .img-push is used to add margin to elements next to floating images -->
+ <div class="img-push">
+ <input type="text" class="form-control input-sm" placeholder="Press enter to post comment">
+ </div>
+ </form>
+ </div>
+ <!-- /.box-footer -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+
+</section>
+<!-- /.content -->
diff --git a/grails-app/assets/templates/xdashangular/tables/data.html b/grails-app/assets/templates/xdashangular/tables/data.html
index de155ea..19cc35a 100644
--- a/grails-app/assets/templates/xdashangular/tables/data.html
+++ b/grails-app/assets/templates/xdashangular/tables/data.html
@@ -1,10 +1,901 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <title>Title</title>
-</head>
-<body>
+<!-- Content Header (Page header) -->
+<section class="content-header">
+ <h1>
+ Data Tables
+ <small>advanced tables</small>
+ </h1>
+ <ol class="breadcrumb">
+ <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
+ <li><a href="#">Tables</a></li>
+ <li class="active">Data tables</li>
+ </ol>
+</section>
-</body>
-</html>
\ No newline at end of file
+<!-- Main content -->
+<section class="content">
+ <div class="row">
+ <div class="col-xs-12">
+ <div class="box">
+ <div class="box-header">
+ <h3 class="box-title">Hover Data Table</h3>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <table id="example2" class="table table-bordered table-hover">
+ <thead>
+ <tr>
+ <th>Rendering engine</th>
+ <th>Browser</th>
+ <th>Platform(s)</th>
+ <th>Engine version</th>
+ <th>CSS grade</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Trident</td>
+ <td>Internet
+ Explorer 4.0
+ </td>
+ <td>Win 95+</td>
+ <td> 4</td>
+ <td>X</td>
+ </tr>
+ <tr>
+ <td>Trident</td>
+ <td>Internet
+ Explorer 5.0
+ </td>
+ <td>Win 95+</td>
+ <td>5</td>
+ <td>C</td>
+ </tr>
+ <tr>
+ <td>Trident</td>
+ <td>Internet
+ Explorer 5.5
+ </td>
+ <td>Win 95+</td>
+ <td>5.5</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Trident</td>
+ <td>Internet
+ Explorer 6
+ </td>
+ <td>Win 98+</td>
+ <td>6</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Trident</td>
+ <td>Internet Explorer 7</td>
+ <td>Win XP SP2+</td>
+ <td>7</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Trident</td>
+ <td>AOL browser (AOL desktop)</td>
+ <td>Win XP</td>
+ <td>6</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Firefox 1.0</td>
+ <td>Win 98+ / OSX.2+</td>
+ <td>1.7</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Firefox 1.5</td>
+ <td>Win 98+ / OSX.2+</td>
+ <td>1.8</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Firefox 2.0</td>
+ <td>Win 98+ / OSX.2+</td>
+ <td>1.8</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Firefox 3.0</td>
+ <td>Win 2k+ / OSX.3+</td>
+ <td>1.9</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Camino 1.0</td>
+ <td>OSX.2+</td>
+ <td>1.8</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Camino 1.5</td>
+ <td>OSX.3+</td>
+ <td>1.8</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Netscape 7.2</td>
+ <td>Win 95+ / Mac OS 8.6-9.2</td>
+ <td>1.7</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Netscape Browser 8</td>
+ <td>Win 98SE+</td>
+ <td>1.7</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Netscape Navigator 9</td>
+ <td>Win 98+ / OSX.2+</td>
+ <td>1.8</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Mozilla 1.0</td>
+ <td>Win 95+ / OSX.1+</td>
+ <td>1</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Mozilla 1.1</td>
+ <td>Win 95+ / OSX.1+</td>
+ <td>1.1</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Mozilla 1.2</td>
+ <td>Win 95+ / OSX.1+</td>
+ <td>1.2</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Mozilla 1.3</td>
+ <td>Win 95+ / OSX.1+</td>
+ <td>1.3</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Mozilla 1.4</td>
+ <td>Win 95+ / OSX.1+</td>
+ <td>1.4</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Mozilla 1.5</td>
+ <td>Win 95+ / OSX.1+</td>
+ <td>1.5</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Mozilla 1.6</td>
+ <td>Win 95+ / OSX.1+</td>
+ <td>1.6</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Mozilla 1.7</td>
+ <td>Win 98+ / OSX.1+</td>
+ <td>1.7</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Mozilla 1.8</td>
+ <td>Win 98+ / OSX.1+</td>
+ <td>1.8</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Seamonkey 1.1</td>
+ <td>Win 98+ / OSX.2+</td>
+ <td>1.8</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Epiphany 2.20</td>
+ <td>Gnome</td>
+ <td>1.8</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Webkit</td>
+ <td>Safari 1.2</td>
+ <td>OSX.3</td>
+ <td>125.5</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Webkit</td>
+ <td>Safari 1.3</td>
+ <td>OSX.3</td>
+ <td>312.8</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Webkit</td>
+ <td>Safari 2.0</td>
+ <td>OSX.4+</td>
+ <td>419.3</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Webkit</td>
+ <td>Safari 3.0</td>
+ <td>OSX.4+</td>
+ <td>522.1</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Webkit</td>
+ <td>OmniWeb 5.5</td>
+ <td>OSX.4+</td>
+ <td>420</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Webkit</td>
+ <td>iPod Touch / iPhone</td>
+ <td>iPod</td>
+ <td>420.1</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Webkit</td>
+ <td>S60</td>
+ <td>S60</td>
+ <td>413</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Presto</td>
+ <td>Opera 7.0</td>
+ <td>Win 95+ / OSX.1+</td>
+ <td>-</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Presto</td>
+ <td>Opera 7.5</td>
+ <td>Win 95+ / OSX.2+</td>
+ <td>-</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Presto</td>
+ <td>Opera 8.0</td>
+ <td>Win 95+ / OSX.2+</td>
+ <td>-</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Presto</td>
+ <td>Opera 8.5</td>
+ <td>Win 95+ / OSX.2+</td>
+ <td>-</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Presto</td>
+ <td>Opera 9.0</td>
+ <td>Win 95+ / OSX.3+</td>
+ <td>-</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Presto</td>
+ <td>Opera 9.2</td>
+ <td>Win 88+ / OSX.3+</td>
+ <td>-</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Presto</td>
+ <td>Opera 9.5</td>
+ <td>Win 88+ / OSX.3+</td>
+ <td>-</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Presto</td>
+ <td>Opera for Wii</td>
+ <td>Wii</td>
+ <td>-</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Presto</td>
+ <td>Nokia N800</td>
+ <td>N800</td>
+ <td>-</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Presto</td>
+ <td>Nintendo DS browser</td>
+ <td>Nintendo DS</td>
+ <td>8.5</td>
+ <td>C/A<sup>1</sup></td>
+ </tr>
+ <tr>
+ <td>KHTML</td>
+ <td>Konqureror 3.1</td>
+ <td>KDE 3.1</td>
+ <td>3.1</td>
+ <td>C</td>
+ </tr>
+ <tr>
+ <td>KHTML</td>
+ <td>Konqureror 3.3</td>
+ <td>KDE 3.3</td>
+ <td>3.3</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>KHTML</td>
+ <td>Konqureror 3.5</td>
+ <td>KDE 3.5</td>
+ <td>3.5</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Tasman</td>
+ <td>Internet Explorer 4.5</td>
+ <td>Mac OS 8-9</td>
+ <td>-</td>
+ <td>X</td>
+ </tr>
+ <tr>
+ <td>Tasman</td>
+ <td>Internet Explorer 5.1</td>
+ <td>Mac OS 7.6-9</td>
+ <td>1</td>
+ <td>C</td>
+ </tr>
+ <tr>
+ <td>Tasman</td>
+ <td>Internet Explorer 5.2</td>
+ <td>Mac OS 8-X</td>
+ <td>1</td>
+ <td>C</td>
+ </tr>
+ <tr>
+ <td>Misc</td>
+ <td>NetFront 3.1</td>
+ <td>Embedded devices</td>
+ <td>-</td>
+ <td>C</td>
+ </tr>
+ <tr>
+ <td>Misc</td>
+ <td>NetFront 3.4</td>
+ <td>Embedded devices</td>
+ <td>-</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Misc</td>
+ <td>Dillo 0.8</td>
+ <td>Embedded devices</td>
+ <td>-</td>
+ <td>X</td>
+ </tr>
+ <tr>
+ <td>Misc</td>
+ <td>Links</td>
+ <td>Text only</td>
+ <td>-</td>
+ <td>X</td>
+ </tr>
+ <tr>
+ <td>Misc</td>
+ <td>Lynx</td>
+ <td>Text only</td>
+ <td>-</td>
+ <td>X</td>
+ </tr>
+ <tr>
+ <td>Misc</td>
+ <td>IE Mobile</td>
+ <td>Windows Mobile 6</td>
+ <td>-</td>
+ <td>C</td>
+ </tr>
+ <tr>
+ <td>Misc</td>
+ <td>PSP browser</td>
+ <td>PSP</td>
+ <td>-</td>
+ <td>C</td>
+ </tr>
+ <tr>
+ <td>Other browsers</td>
+ <td>All others</td>
+ <td>-</td>
+ <td>-</td>
+ <td>U</td>
+ </tr>
+ </tbody>
+ <tfoot>
+ <tr>
+ <th>Rendering engine</th>
+ <th>Browser</th>
+ <th>Platform(s)</th>
+ <th>Engine version</th>
+ <th>CSS grade</th>
+ </tr>
+ </tfoot>
+ </table>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+
+ <div class="box">
+ <div class="box-header">
+ <h3 class="box-title">Data Table With Full Features</h3>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <table id="example1" class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th>Rendering engine</th>
+ <th>Browser</th>
+ <th>Platform(s)</th>
+ <th>Engine version</th>
+ <th>CSS grade</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Trident</td>
+ <td>Internet
+ Explorer 4.0
+ </td>
+ <td>Win 95+</td>
+ <td> 4</td>
+ <td>X</td>
+ </tr>
+ <tr>
+ <td>Trident</td>
+ <td>Internet
+ Explorer 5.0
+ </td>
+ <td>Win 95+</td>
+ <td>5</td>
+ <td>C</td>
+ </tr>
+ <tr>
+ <td>Trident</td>
+ <td>Internet
+ Explorer 5.5
+ </td>
+ <td>Win 95+</td>
+ <td>5.5</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Trident</td>
+ <td>Internet
+ Explorer 6
+ </td>
+ <td>Win 98+</td>
+ <td>6</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Trident</td>
+ <td>Internet Explorer 7</td>
+ <td>Win XP SP2+</td>
+ <td>7</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Trident</td>
+ <td>AOL browser (AOL desktop)</td>
+ <td>Win XP</td>
+ <td>6</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Firefox 1.0</td>
+ <td>Win 98+ / OSX.2+</td>
+ <td>1.7</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Firefox 1.5</td>
+ <td>Win 98+ / OSX.2+</td>
+ <td>1.8</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Firefox 2.0</td>
+ <td>Win 98+ / OSX.2+</td>
+ <td>1.8</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Firefox 3.0</td>
+ <td>Win 2k+ / OSX.3+</td>
+ <td>1.9</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Camino 1.0</td>
+ <td>OSX.2+</td>
+ <td>1.8</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Camino 1.5</td>
+ <td>OSX.3+</td>
+ <td>1.8</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Netscape 7.2</td>
+ <td>Win 95+ / Mac OS 8.6-9.2</td>
+ <td>1.7</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Netscape Browser 8</td>
+ <td>Win 98SE+</td>
+ <td>1.7</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Netscape Navigator 9</td>
+ <td>Win 98+ / OSX.2+</td>
+ <td>1.8</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Mozilla 1.0</td>
+ <td>Win 95+ / OSX.1+</td>
+ <td>1</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Mozilla 1.1</td>
+ <td>Win 95+ / OSX.1+</td>
+ <td>1.1</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Mozilla 1.2</td>
+ <td>Win 95+ / OSX.1+</td>
+ <td>1.2</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Mozilla 1.3</td>
+ <td>Win 95+ / OSX.1+</td>
+ <td>1.3</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Mozilla 1.4</td>
+ <td>Win 95+ / OSX.1+</td>
+ <td>1.4</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Mozilla 1.5</td>
+ <td>Win 95+ / OSX.1+</td>
+ <td>1.5</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Mozilla 1.6</td>
+ <td>Win 95+ / OSX.1+</td>
+ <td>1.6</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Mozilla 1.7</td>
+ <td>Win 98+ / OSX.1+</td>
+ <td>1.7</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Mozilla 1.8</td>
+ <td>Win 98+ / OSX.1+</td>
+ <td>1.8</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Seamonkey 1.1</td>
+ <td>Win 98+ / OSX.2+</td>
+ <td>1.8</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Gecko</td>
+ <td>Epiphany 2.20</td>
+ <td>Gnome</td>
+ <td>1.8</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Webkit</td>
+ <td>Safari 1.2</td>
+ <td>OSX.3</td>
+ <td>125.5</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Webkit</td>
+ <td>Safari 1.3</td>
+ <td>OSX.3</td>
+ <td>312.8</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Webkit</td>
+ <td>Safari 2.0</td>
+ <td>OSX.4+</td>
+ <td>419.3</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Webkit</td>
+ <td>Safari 3.0</td>
+ <td>OSX.4+</td>
+ <td>522.1</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Webkit</td>
+ <td>OmniWeb 5.5</td>
+ <td>OSX.4+</td>
+ <td>420</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Webkit</td>
+ <td>iPod Touch / iPhone</td>
+ <td>iPod</td>
+ <td>420.1</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Webkit</td>
+ <td>S60</td>
+ <td>S60</td>
+ <td>413</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Presto</td>
+ <td>Opera 7.0</td>
+ <td>Win 95+ / OSX.1+</td>
+ <td>-</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Presto</td>
+ <td>Opera 7.5</td>
+ <td>Win 95+ / OSX.2+</td>
+ <td>-</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Presto</td>
+ <td>Opera 8.0</td>
+ <td>Win 95+ / OSX.2+</td>
+ <td>-</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Presto</td>
+ <td>Opera 8.5</td>
+ <td>Win 95+ / OSX.2+</td>
+ <td>-</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Presto</td>
+ <td>Opera 9.0</td>
+ <td>Win 95+ / OSX.3+</td>
+ <td>-</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Presto</td>
+ <td>Opera 9.2</td>
+ <td>Win 88+ / OSX.3+</td>
+ <td>-</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Presto</td>
+ <td>Opera 9.5</td>
+ <td>Win 88+ / OSX.3+</td>
+ <td>-</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Presto</td>
+ <td>Opera for Wii</td>
+ <td>Wii</td>
+ <td>-</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Presto</td>
+ <td>Nokia N800</td>
+ <td>N800</td>
+ <td>-</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Presto</td>
+ <td>Nintendo DS browser</td>
+ <td>Nintendo DS</td>
+ <td>8.5</td>
+ <td>C/A<sup>1</sup></td>
+ </tr>
+ <tr>
+ <td>KHTML</td>
+ <td>Konqureror 3.1</td>
+ <td>KDE 3.1</td>
+ <td>3.1</td>
+ <td>C</td>
+ </tr>
+ <tr>
+ <td>KHTML</td>
+ <td>Konqureror 3.3</td>
+ <td>KDE 3.3</td>
+ <td>3.3</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>KHTML</td>
+ <td>Konqureror 3.5</td>
+ <td>KDE 3.5</td>
+ <td>3.5</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Tasman</td>
+ <td>Internet Explorer 4.5</td>
+ <td>Mac OS 8-9</td>
+ <td>-</td>
+ <td>X</td>
+ </tr>
+ <tr>
+ <td>Tasman</td>
+ <td>Internet Explorer 5.1</td>
+ <td>Mac OS 7.6-9</td>
+ <td>1</td>
+ <td>C</td>
+ </tr>
+ <tr>
+ <td>Tasman</td>
+ <td>Internet Explorer 5.2</td>
+ <td>Mac OS 8-X</td>
+ <td>1</td>
+ <td>C</td>
+ </tr>
+ <tr>
+ <td>Misc</td>
+ <td>NetFront 3.1</td>
+ <td>Embedded devices</td>
+ <td>-</td>
+ <td>C</td>
+ </tr>
+ <tr>
+ <td>Misc</td>
+ <td>NetFront 3.4</td>
+ <td>Embedded devices</td>
+ <td>-</td>
+ <td>A</td>
+ </tr>
+ <tr>
+ <td>Misc</td>
+ <td>Dillo 0.8</td>
+ <td>Embedded devices</td>
+ <td>-</td>
+ <td>X</td>
+ </tr>
+ <tr>
+ <td>Misc</td>
+ <td>Links</td>
+ <td>Text only</td>
+ <td>-</td>
+ <td>X</td>
+ </tr>
+ <tr>
+ <td>Misc</td>
+ <td>Lynx</td>
+ <td>Text only</td>
+ <td>-</td>
+ <td>X</td>
+ </tr>
+ <tr>
+ <td>Misc</td>
+ <td>IE Mobile</td>
+ <td>Windows Mobile 6</td>
+ <td>-</td>
+ <td>C</td>
+ </tr>
+ <tr>
+ <td>Misc</td>
+ <td>PSP browser</td>
+ <td>PSP</td>
+ <td>-</td>
+ <td>C</td>
+ </tr>
+ <tr>
+ <td>Other browsers</td>
+ <td>All others</td>
+ <td>-</td>
+ <td>-</td>
+ <td>U</td>
+ </tr>
+ </tbody>
+ <tfoot>
+ <tr>
+ <th>Rendering engine</th>
+ <th>Browser</th>
+ <th>Platform(s)</th>
+ <th>Engine version</th>
+ <th>CSS grade</th>
+ </tr>
+ </tfoot>
+ </table>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+</section>
diff --git a/grails-app/assets/templates/xdashangular/tables/simple.html b/grails-app/assets/templates/xdashangular/tables/simple.html
index e69de29..412be3f 100644
--- a/grails-app/assets/templates/xdashangular/tables/simple.html
+++ b/grails-app/assets/templates/xdashangular/tables/simple.html
@@ -0,0 +1,340 @@
+<!-- Content Header (Page header) -->
+<section class="content-header">
+ <h1>
+ Simple Tables
+ <small>preview of simple tables</small>
+ </h1>
+ <ol class="breadcrumb">
+ <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
+ <li><a href="#">Tables</a></li>
+ <li class="active">Simple</li>
+ </ol>
+</section>
+
+<!-- Main content -->
+<section class="content">
+ <div class="row">
+ <div class="col-md-6">
+ <div class="box">
+ <div class="box-header with-border">
+ <h3 class="box-title">Bordered Table</h3>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body">
+ <table class="table table-bordered">
+ <tr>
+ <th style="width: 10px">#</th>
+ <th>Task</th>
+ <th>Progress</th>
+ <th style="width: 40px">Label</th>
+ </tr>
+ <tr>
+ <td>1.</td>
+ <td>Update software</td>
+ <td>
+ <div class="progress progress-xs">
+ <div class="progress-bar progress-bar-danger" style="width: 55%"></div>
+ </div>
+ </td>
+ <td><span class="badge bg-red">55%</span></td>
+ </tr>
+ <tr>
+ <td>2.</td>
+ <td>Clean database</td>
+ <td>
+ <div class="progress progress-xs">
+ <div class="progress-bar progress-bar-yellow" style="width: 70%"></div>
+ </div>
+ </td>
+ <td><span class="badge bg-yellow">70%</span></td>
+ </tr>
+ <tr>
+ <td>3.</td>
+ <td>Cron job running</td>
+ <td>
+ <div class="progress progress-xs progress-striped active">
+ <div class="progress-bar progress-bar-primary" style="width: 30%"></div>
+ </div>
+ </td>
+ <td><span class="badge bg-light-blue">30%</span></td>
+ </tr>
+ <tr>
+ <td>4.</td>
+ <td>Fix and squish bugs</td>
+ <td>
+ <div class="progress progress-xs progress-striped active">
+ <div class="progress-bar progress-bar-success" style="width: 90%"></div>
+ </div>
+ </td>
+ <td><span class="badge bg-green">90%</span></td>
+ </tr>
+ </table>
+ </div>
+ <!-- /.box-body -->
+ <div class="box-footer clearfix">
+ <ul class="pagination pagination-sm no-margin pull-right">
+ <li><a href="#">«</a></li>
+ <li><a href="#">1</a></li>
+ <li><a href="#">2</a></li>
+ <li><a href="#">3</a></li>
+ <li><a href="#">»</a></li>
+ </ul>
+ </div>
+ </div>
+ <!-- /.box -->
+
+ <div class="box">
+ <div class="box-header">
+ <h3 class="box-title">Condensed Full Width Table</h3>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body no-padding">
+ <table class="table table-condensed">
+ <tr>
+ <th style="width: 10px">#</th>
+ <th>Task</th>
+ <th>Progress</th>
+ <th style="width: 40px">Label</th>
+ </tr>
+ <tr>
+ <td>1.</td>
+ <td>Update software</td>
+ <td>
+ <div class="progress progress-xs">
+ <div class="progress-bar progress-bar-danger" style="width: 55%"></div>
+ </div>
+ </td>
+ <td><span class="badge bg-red">55%</span></td>
+ </tr>
+ <tr>
+ <td>2.</td>
+ <td>Clean database</td>
+ <td>
+ <div class="progress progress-xs">
+ <div class="progress-bar progress-bar-yellow" style="width: 70%"></div>
+ </div>
+ </td>
+ <td><span class="badge bg-yellow">70%</span></td>
+ </tr>
+ <tr>
+ <td>3.</td>
+ <td>Cron job running</td>
+ <td>
+ <div class="progress progress-xs progress-striped active">
+ <div class="progress-bar progress-bar-primary" style="width: 30%"></div>
+ </div>
+ </td>
+ <td><span class="badge bg-light-blue">30%</span></td>
+ </tr>
+ <tr>
+ <td>4.</td>
+ <td>Fix and squish bugs</td>
+ <td>
+ <div class="progress progress-xs progress-striped active">
+ <div class="progress-bar progress-bar-success" style="width: 90%"></div>
+ </div>
+ </td>
+ <td><span class="badge bg-green">90%</span></td>
+ </tr>
+ </table>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col -->
+ <div class="col-md-6">
+ <div class="box">
+ <div class="box-header">
+ <h3 class="box-title">Simple Full Width Table</h3>
+
+ <div class="box-tools">
+ <ul class="pagination pagination-sm no-margin pull-right">
+ <li><a href="#">«</a></li>
+ <li><a href="#">1</a></li>
+ <li><a href="#">2</a></li>
+ <li><a href="#">3</a></li>
+ <li><a href="#">»</a></li>
+ </ul>
+ </div>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body no-padding">
+ <table class="table">
+ <tr>
+ <th style="width: 10px">#</th>
+ <th>Task</th>
+ <th>Progress</th>
+ <th style="width: 40px">Label</th>
+ </tr>
+ <tr>
+ <td>1.</td>
+ <td>Update software</td>
+ <td>
+ <div class="progress progress-xs">
+ <div class="progress-bar progress-bar-danger" style="width: 55%"></div>
+ </div>
+ </td>
+ <td><span class="badge bg-red">55%</span></td>
+ </tr>
+ <tr>
+ <td>2.</td>
+ <td>Clean database</td>
+ <td>
+ <div class="progress progress-xs">
+ <div class="progress-bar progress-bar-yellow" style="width: 70%"></div>
+ </div>
+ </td>
+ <td><span class="badge bg-yellow">70%</span></td>
+ </tr>
+ <tr>
+ <td>3.</td>
+ <td>Cron job running</td>
+ <td>
+ <div class="progress progress-xs progress-striped active">
+ <div class="progress-bar progress-bar-primary" style="width: 30%"></div>
+ </div>
+ </td>
+ <td><span class="badge bg-light-blue">30%</span></td>
+ </tr>
+ <tr>
+ <td>4.</td>
+ <td>Fix and squish bugs</td>
+ <td>
+ <div class="progress progress-xs progress-striped active">
+ <div class="progress-bar progress-bar-success" style="width: 90%"></div>
+ </div>
+ </td>
+ <td><span class="badge bg-green">90%</span></td>
+ </tr>
+ </table>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+
+ <div class="box">
+ <div class="box-header">
+ <h3 class="box-title">Striped Full Width Table</h3>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body no-padding">
+ <table class="table table-striped">
+ <tr>
+ <th style="width: 10px">#</th>
+ <th>Task</th>
+ <th>Progress</th>
+ <th style="width: 40px">Label</th>
+ </tr>
+ <tr>
+ <td>1.</td>
+ <td>Update software</td>
+ <td>
+ <div class="progress progress-xs">
+ <div class="progress-bar progress-bar-danger" style="width: 55%"></div>
+ </div>
+ </td>
+ <td><span class="badge bg-red">55%</span></td>
+ </tr>
+ <tr>
+ <td>2.</td>
+ <td>Clean database</td>
+ <td>
+ <div class="progress progress-xs">
+ <div class="progress-bar progress-bar-yellow" style="width: 70%"></div>
+ </div>
+ </td>
+ <td><span class="badge bg-yellow">70%</span></td>
+ </tr>
+ <tr>
+ <td>3.</td>
+ <td>Cron job running</td>
+ <td>
+ <div class="progress progress-xs progress-striped active">
+ <div class="progress-bar progress-bar-primary" style="width: 30%"></div>
+ </div>
+ </td>
+ <td><span class="badge bg-light-blue">30%</span></td>
+ </tr>
+ <tr>
+ <td>4.</td>
+ <td>Fix and squish bugs</td>
+ <td>
+ <div class="progress progress-xs progress-striped active">
+ <div class="progress-bar progress-bar-success" style="width: 90%"></div>
+ </div>
+ </td>
+ <td><span class="badge bg-green">90%</span></td>
+ </tr>
+ </table>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ <!-- /.col -->
+ </div>
+ <!-- /.row -->
+ <div class="row">
+ <div class="col-xs-12">
+ <div class="box">
+ <div class="box-header">
+ <h3 class="box-title">Responsive Hover Table</h3>
+
+ <div class="box-tools">
+ <div class="input-group input-group-sm" style="width: 150px;">
+ <input type="text" name="table_search" class="form-control pull-right" placeholder="Search">
+
+ <div class="input-group-btn">
+ <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- /.box-header -->
+ <div class="box-body table-responsive no-padding">
+ <table class="table table-hover">
+ <tr>
+ <th>ID</th>
+ <th>User</th>
+ <th>Date</th>
+ <th>Status</th>
+ <th>Reason</th>
+ </tr>
+ <tr>
+ <td>183</td>
+ <td>John Doe</td>
+ <td>11-7-2014</td>
+ <td><span class="label label-success">Approved</span></td>
+ <td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
+ </tr>
+ <tr>
+ <td>219</td>
+ <td>Alexander Pierce</td>
+ <td>11-7-2014</td>
+ <td><span class="label label-warning">Pending</span></td>
+ <td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
+ </tr>
+ <tr>
+ <td>657</td>
+ <td>Bob Doe</td>
+ <td>11-7-2014</td>
+ <td><span class="label label-primary">Approved</span></td>
+ <td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
+ </tr>
+ <tr>
+ <td>175</td>
+ <td>Mike Doe</td>
+ <td>11-7-2014</td>
+ <td><span class="label label-danger">Denied</span></td>
+ <td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
+ </tr>
+ </table>
+ </div>
+ <!-- /.box-body -->
+ </div>
+ <!-- /.box -->
+ </div>
+ </div>
+</section>
+<!-- /.content -->
diff --git a/grails-app/conf/application.groovy b/grails-app/conf/application.groovy
index ba032c9..d5e8aec 100644
--- a/grails-app/conf/application.groovy
+++ b/grails-app/conf/application.groovy
@@ -1,2 +1,2 @@
-grails.assets.bundle=true
\ No newline at end of file
+// grails.assets.bundle=true
\ No newline at end of file
diff --git a/grails-app/views/index.gsp b/grails-app/views/index.gsp
index b7f0e74..4c361d2 100644
--- a/grails-app/views/index.gsp
+++ b/grails-app/views/index.gsp
@@ -356,8 +356,8 @@
<i class="fa fa-dashboard"></i> <span>Dashboard</span> <i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
- <li class="active"><a href="index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
- <li><a href="index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
+ <li class="active"><a href="#"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
+ <li><a href="#/index2"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
</ul>
</li>
<li class="treeview">
@@ -367,14 +367,14 @@
<span class="label label-primary pull-right">4</span>
</a>
<ul class="treeview-menu">
- <li><a href="pages/layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
- <li><a href="pages/layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
- <li><a href="pages/layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
- <li><a href="pages/layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
+ <li><a href="#/layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
+ <li><a href="#/layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
+ <li><a href="#/layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
+ <li><a href="#/layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
</ul>
</li>
<li>
- <a href="pages/widgets.html">
+ <a href="#/widgets">
<i class="fa fa-th"></i> <span>Widgets</span>
<small class="label pull-right bg-green">new</small>
</a>
@@ -386,10 +386,10 @@
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
- <li><a href="pages/charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
- <li><a href="pages/charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
- <li><a href="pages/charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
- <li><a href="pages/charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
+ <li><a href="#/charts-chartjs"><i class="fa fa-circle-o"></i> ChartJS</a></li>
+ <li><a href="#/charts-morris"><i class="fa fa-circle-o"></i> Morris</a></li>
+ <li><a href="#/charts-flot"><i class="fa fa-circle-o"></i> Flot</a></li>
+ <li><a href="#/charts-inline"><i class="fa fa-circle-o"></i> Inline charts</a></li>
</ul>
</li>
<li class="treeview">
@@ -399,12 +399,12 @@
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
- <li><a href="pages/UI/general.html"><i class="fa fa-circle-o"></i> General</a></li>
- <li><a href="pages/UI/icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
- <li><a href="pages/UI/buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
- <li><a href="pages/UI/sliders.html"><i class="fa fa-circle-o"></i> Sliders</a></li>
- <li><a href="pages/UI/timeline.html"><i class="fa fa-circle-o"></i> Timeline</a></li>
- <li><a href="pages/UI/modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
+ <li><a href="#/UI-general"><i class="fa fa-circle-o"></i> General</a></li>
+ <li><a href="#/UI-icons"><i class="fa fa-circle-o"></i> Icons</a></li>
+ <li><a href="#/UI-buttons"><i class="fa fa-circle-o"></i> Buttons</a></li>
+ <li><a href="#/UI-sliders"><i class="fa fa-circle-o"></i> Sliders</a></li>
+ <li><a href="#/UI-timeline"><i class="fa fa-circle-o"></i> Timeline</a></li>
+ <li><a href="#/UI-modals"><i class="fa fa-circle-o"></i> Modals</a></li>
</ul>
</li>
<li class="treeview">
@@ -413,9 +413,9 @@
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
- <li><a href="pages/forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
- <li><a href="pages/forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
- <li><a href="pages/forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
+ <li><a href="#/forms-general"><i class="fa fa-circle-o"></i> General Elements</a></li>
+ <li><a href="#/forms-advanced"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
+ <li><a href="#/forms-editors"><i class="fa fa-circle-o"></i> Editors</a></li>
</ul>
</li>
<li class="treeview">
@@ -424,18 +424,18 @@
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
- <li><a href="pages/tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li>
- <li><a href="pages/tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li>
+ <li><a href="#/tables-simple"><i class="fa fa-circle-o"></i> Simple tables</a></li>
+ <li><a href="#/tables-data"><i class="fa fa-circle-o"></i> Data tables</a></li>
</ul>
</li>
<li>
- <a href="pages/calendar.html">
+ <a href="#/calendar">
<i class="fa fa-calendar"></i> <span>Calendar</span>
<small class="label pull-right bg-red">3</small>
</a>
</li>
<li>
- <a href="pages/mailbox/mailbox.html">
+ <a href="#/mailbox/mailbox">
<i class="fa fa-envelope"></i> <span>Mailbox</span>
<small class="label pull-right bg-yellow">12</small>
</a>
@@ -446,15 +446,15 @@
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
- <li><a href="pages/examples/invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
- <li><a href="pages/examples/profile.html"><i class="fa fa-circle-o"></i> Profile</a></li>
- <li><a href="pages/examples/login.html"><i class="fa fa-circle-o"></i> Login</a></li>
- <li><a href="pages/examples/register.html"><i class="fa fa-circle-o"></i> Register</a></li>
- <li><a href="pages/examples/lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
- <li><a href="pages/examples/404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
- <li><a href="pages/examples/500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
- <li><a href="pages/examples/blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
- <li><a href="pages/examples/pace.html"><i class="fa fa-circle-o"></i> Pace Page</a></li>
+ <li><a href="#/examples-invoice"><i class="fa fa-circle-o"></i> Invoice</a></li>
+ <li><a href="#/examples-profile"><i class="fa fa-circle-o"></i> Profile</a></li>
+ <li><a href="#/examples-login"><i class="fa fa-circle-o"></i> Login</a></li>
+ <li><a href="#/examples-register"><i class="fa fa-circle-o"></i> Register</a></li>
+ <li><a href="#/examples-lockscreen"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
+ <li><a href="#/examples-404"><i class="fa fa-circle-o"></i> 404 Error</a></li>
+ <li><a href="#/examples-500"><i class="fa fa-circle-o"></i> 500 Error</a></li>
+ <li><a href="#/examples-blank"><i class="fa fa-circle-o"></i> Blank Page</a></li>
+ <li><a href="#/examples-pace"><i class="fa fa-circle-o"></i> Pace Page</a></li>
</ul>
</li>
<li class="treeview">
@@ -480,7 +480,7 @@
<li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
</ul>
</li>
- <li><a href="documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
+ <!--li><a href="#"><i class="fa fa-book"></i> <span>Documentation</span></a></li-->
<li class="header">LABELS</li>
<li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
<li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
@@ -492,547 +492,12 @@
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
- <!-- Content Header (Page header) -->
- <section class="content-header">
- <h1>
- Dashboard
- <small>Control panel</small>
- </h1>
- <ol class="breadcrumb">
- <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
- <li class="active">Dashboard</li>
- </ol>
- </section>
-
- <!-- Main content -->
- <section class="content">
- <!-- Small boxes (Stat box) -->
- <div class="row">
- <div class="col-lg-3 col-xs-6">
- <!-- small box -->
- <div class="small-box bg-aqua">
- <div class="inner">
- <h3>150</h3>
-
- <p>New Orders</p>
- </div>
-
- <div class="icon">
- <i class="ion ion-bag"></i>
- </div>
- <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
- </div>
- </div>
- <!-- ./col -->
- <div class="col-lg-3 col-xs-6">
- <!-- small box -->
- <div class="small-box bg-green">
- <div class="inner">
- <h3>53<sup style="font-size: 20px">%</sup></h3>
-
- <p>Bounce Rate</p>
- </div>
-
- <div class="icon">
- <i class="ion ion-stats-bars"></i>
- </div>
- <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
- </div>
- </div>
- <!-- ./col -->
- <div class="col-lg-3 col-xs-6">
- <!-- small box -->
- <div class="small-box bg-yellow">
- <div class="inner">
- <h3>44</h3>
-
- <p>User Registrations</p>
- </div>
-
- <div class="icon">
- <i class="ion ion-person-add"></i>
- </div>
- <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
- </div>
- </div>
- <!-- ./col -->
- <div class="col-lg-3 col-xs-6">
- <!-- small box -->
- <div class="small-box bg-red">
- <div class="inner">
- <h3>65</h3>
-
- <p>Unique Visitors</p>
- </div>
-
- <div class="icon">
- <i class="ion ion-pie-graph"></i>
- </div>
- <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
- </div>
- </div>
- <!-- ./col -->
- </div>
- <!-- /.row -->
- <!-- Main row -->
- <div class="row">
- <!-- Left col -->
- <section class="col-lg-7 connectedSortable">
- <!-- Custom tabs (Charts with tabs)-->
- <div class="nav-tabs-custom">
- <!-- Tabs within a box -->
- <ul class="nav nav-tabs pull-right">
- <li class="active"><a href="#revenue-chart" data-toggle="tab">Area</a></li>
- <li><a href="#sales-chart" data-toggle="tab">Donut</a></li>
- <li class="pull-left header"><i class="fa fa-inbox"></i> Sales</li>
- </ul>
-
- <div class="tab-content no-padding">
- <!-- Morris chart - Sales -->
- <div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;"></div>
-
- <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
- </div>
- </div>
- <!-- /.nav-tabs-custom -->
-
- <!-- Chat box -->
- <div class="box box-success">
- <div class="box-header">
- <i class="fa fa-comments-o"></i>
-
- <h3 class="box-title">Chat</h3>
-
- <div class="box-tools pull-right" data-toggle="tooltip" title="Status">
- <div class="btn-group" data-toggle="btn-toggle">
- <button type="button" class="btn btn-default btn-sm active"><i class="fa fa-square text-green"></i>
- </button>
- <button type="button" class="btn btn-default btn-sm"><i class="fa fa-square text-red"></i></button>
- </div>
- </div>
- </div>
-
- <div class="box-body chat" id="chat-box">
- <!-- chat item -->
- <div class="item">
- <asset:image src="adminlte/user4-128x128.jpg" alt="user image" class="online"/>
-
- <p class="message">
- <a href="#" class="name">
- <small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 2:15</small>
- Mike Doe
- </a>
- I would like to meet you to discuss the latest news about
- the arrival of the new theme. They say it is going to be one the
- best themes on the market
- </p>
-
- <div class="attachment">
- <h4>Attachments:</h4>
-
- <p class="filename">
- Theme-thumbnail-image.jpg
- </p>
-
- <div class="pull-right">
- <button type="button" class="btn btn-primary btn-sm btn-flat">Open</button>
- </div>
- </div>
- <!-- /.attachment -->
- </div>
- <!-- /.item -->
- <!-- chat item -->
- <div class="item">
- <asset:image src="adminlte/user3-128x128.jpg" alt="user image" class="offline"/>
-
- <p class="message">
- <a href="#" class="name">
- <small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 5:15</small>
- Alexander Pierce
- </a>
- I would like to meet you to discuss the latest news about
- the arrival of the new theme. They say it is going to be one the
- best themes on the market
- </p>
- </div>
- <!-- /.item -->
- <!-- chat item -->
- <div class="item">
- <asset:image src="adminlte/user2-160x160.jpg" alt="user image" class="offline"/>
-
- <p class="message">
- <a href="#" class="name">
- <small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 5:30</small>
- Susan Doe
- </a>
- I would like to meet you to discuss the latest news about
- the arrival of the new theme. They say it is going to be one the
- best themes on the market
- </p>
- </div>
- <!-- /.item -->
- </div>
- <!-- /.chat -->
- <div class="box-footer">
- <div class="input-group">
- <input class="form-control" placeholder="Type message...">
-
- <div class="input-group-btn">
- <button type="button" class="btn btn-success"><i class="fa fa-plus"></i></button>
- </div>
- </div>
- </div>
- </div>
- <!-- /.box (chat box) -->
-
- <!-- TO DO List -->
- <div class="box box-primary">
- <div class="box-header">
- <i class="ion ion-clipboard"></i>
-
- <h3 class="box-title">To Do List</h3>
-
- <div class="box-tools pull-right">
- <ul class="pagination pagination-sm inline">
- <li><a href="#">«</a></li>
- <li><a href="#">1</a></li>
- <li><a href="#">2</a></li>
- <li><a href="#">3</a></li>
- <li><a href="#">»</a></li>
- </ul>
- </div>
- </div>
- <!-- /.box-header -->
- <div class="box-body">
- <ul class="todo-list">
- <li>
- <!-- drag handle -->
- <span class="handle">
- <i class="fa fa-ellipsis-v"></i>
- <i class="fa fa-ellipsis-v"></i>
- </span>
- <!-- checkbox -->
- <input type="checkbox" value="">
- <!-- todo text -->
- <span class="text">Design a nice theme</span>
- <!-- Emphasis label -->
- <small class="label label-danger"><i class="fa fa-clock-o"></i> 2 mins</small>
- <!-- General tools such as edit or delete-->
- <div class="tools">
- <i class="fa fa-edit"></i>
- <i class="fa fa-trash-o"></i>
- </div>
- </li>
- <li>
- <span class="handle">
- <i class="fa fa-ellipsis-v"></i>
- <i class="fa fa-ellipsis-v"></i>
- </span>
- <input type="checkbox" value="">
- <span class="text">Make the theme responsive</span>
- <small class="label label-info"><i class="fa fa-clock-o"></i> 4 hours</small>
-
- <div class="tools">
- <i class="fa fa-edit"></i>
- <i class="fa fa-trash-o"></i>
- </div>
- </li>
- <li>
- <span class="handle">
- <i class="fa fa-ellipsis-v"></i>
- <i class="fa fa-ellipsis-v"></i>
- </span>
- <input type="checkbox" value="">
- <span class="text">Let theme shine like a star</span>
- <small class="label label-warning"><i class="fa fa-clock-o"></i> 1 day</small>
-
- <div class="tools">
- <i class="fa fa-edit"></i>
- <i class="fa fa-trash-o"></i>
- </div>
- </li>
- <li>
- <span class="handle">
- <i class="fa fa-ellipsis-v"></i>
- <i class="fa fa-ellipsis-v"></i>
- </span>
- <input type="checkbox" value="">
- <span class="text">Let theme shine like a star</span>
- <small class="label label-success"><i class="fa fa-clock-o"></i> 3 days</small>
-
- <div class="tools">
- <i class="fa fa-edit"></i>
- <i class="fa fa-trash-o"></i>
- </div>
- </li>
- <li>
- <span class="handle">
- <i class="fa fa-ellipsis-v"></i>
- <i class="fa fa-ellipsis-v"></i>
- </span>
- <input type="checkbox" value="">
- <span class="text">Check your messages and notifications</span>
- <small class="label label-primary"><i class="fa fa-clock-o"></i> 1 week</small>
-
- <div class="tools">
- <i class="fa fa-edit"></i>
- <i class="fa fa-trash-o"></i>
- </div>
- </li>
- <li>
- <span class="handle">
- <i class="fa fa-ellipsis-v"></i>
- <i class="fa fa-ellipsis-v"></i>
- </span>
- <input type="checkbox" value="">
- <span class="text">Let theme shine like a star</span>
- <small class="label label-default"><i class="fa fa-clock-o"></i> 1 month</small>
-
- <div class="tools">
- <i class="fa fa-edit"></i>
- <i class="fa fa-trash-o"></i>
- </div>
- </li>
- </ul>
- </div>
- <!-- /.box-body -->
- <div class="box-footer clearfix no-border">
- <button type="button" class="btn btn-default pull-right"><i class="fa fa-plus"></i> Add item</button>
- </div>
- </div>
- <!-- /.box -->
-
- <!-- quick email widget -->
- <div class="box box-info">
- <div class="box-header">
- <i class="fa fa-envelope"></i>
-
- <h3 class="box-title">Quick Email</h3>
- <!-- tools box -->
- <div class="pull-right box-tools">
- <button type="button" class="btn btn-info btn-sm" data-widget="remove" data-toggle="tooltip"
- title="Remove">
- <i class="fa fa-times"></i></button>
- </div>
- <!-- /. tools -->
- </div>
-
- <div class="box-body">
- <form action="#" method="post">
- <div class="form-group">
- <input type="email" class="form-control" name="emailto" placeholder="Email to:">
- </div>
-
- <div class="form-group">
- <input type="text" class="form-control" name="subject" placeholder="Subject">
- </div>
-
- <div>
- <textarea class="textarea" placeholder="Message"
- style="width: 100%; height: 125px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
- </div>
- </form>
- </div>
-
- <div class="box-footer clearfix">
- <button type="button" class="pull-right btn btn-default" id="sendEmail">Send
- <i class="fa fa-arrow-circle-right"></i></button>
- </div>
- </div>
-
- </section>
- <!-- /.Left col -->
- <!-- right col (We are only adding the ID to make the widgets sortable)-->
- <section class="col-lg-5 connectedSortable">
-
- <!-- Map box -->
- <div class="box box-solid bg-light-blue-gradient">
- <div class="box-header">
- <!-- tools box -->
- <div class="pull-right box-tools">
- <button type="button" class="btn btn-primary btn-sm daterange pull-right" data-toggle="tooltip"
- title="Date range">
- <i class="fa fa-calendar"></i></button>
- <button type="button" class="btn btn-primary btn-sm pull-right" data-widget="collapse"
- data-toggle="tooltip" title="Collapse" style="margin-right: 5px;">
- <i class="fa fa-minus"></i></button>
- </div>
- <!-- /. tools -->
-
- <i class="fa fa-map-marker"></i>
-
- <h3 class="box-title">
- Visitors
- </h3>
- </div>
-
- <div class="box-body">
- <div id="world-map" style="height: 250px; width: 100%;"></div>
- </div>
- <!-- /.box-body-->
- <div class="box-footer no-border">
- <div class="row">
- <div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
- <div id="sparkline-1"></div>
-
- <div class="knob-label">Visitors</div>
- </div>
- <!-- ./col -->
- <div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
- <div id="sparkline-2"></div>
-
- <div class="knob-label">Online</div>
- </div>
- <!-- ./col -->
- <div class="col-xs-4 text-center">
- <div id="sparkline-3"></div>
-
- <div class="knob-label">Exists</div>
- </div>
- <!-- ./col -->
- </div>
- <!-- /.row -->
- </div>
- </div>
- <!-- /.box -->
-
- <!-- solid sales graph -->
- <div class="box box-solid bg-teal-gradient">
- <div class="box-header">
- <i class="fa fa-th"></i>
-
- <h3 class="box-title">Sales Graph</h3>
-
- <div class="box-tools pull-right">
- <button type="button" class="btn bg-teal btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
- </button>
- <button type="button" class="btn bg-teal btn-sm" data-widget="remove"><i class="fa fa-times"></i>
- </button>
- </div>
- </div>
-
- <div class="box-body border-radius-none">
- <div class="chart" id="line-chart" style="height: 250px;"></div>
- </div>
- <!-- /.box-body -->
- <div class="box-footer no-border">
- <div class="row">
- <div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
- <input type="text" class="knob" data-readonly="true" value="20" data-width="60" data-height="60"
- data-fgColor="#39CCCC">
-
- <div class="knob-label">Mail-Orders</div>
- </div>
- <!-- ./col -->
- <div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
- <input type="text" class="knob" data-readonly="true" value="50" data-width="60" data-height="60"
- data-fgColor="#39CCCC">
-
- <div class="knob-label">Online</div>
- </div>
- <!-- ./col -->
- <div class="col-xs-4 text-center">
- <input type="text" class="knob" data-readonly="true" value="30" data-width="60" data-height="60"
- data-fgColor="#39CCCC">
-
- <div class="knob-label">In-Store</div>
- </div>
- <!-- ./col -->
- </div>
- <!-- /.row -->
- </div>
- <!-- /.box-footer -->
- </div>
- <!-- /.box -->
-
- <!-- Calendar -->
- <div class="box box-solid bg-green-gradient">
- <div class="box-header">
- <i class="fa fa-calendar"></i>
-
- <h3 class="box-title">Calendar</h3>
- <!-- tools box -->
- <div class="pull-right box-tools">
- <!-- button with a dropdown -->
- <div class="btn-group">
- <button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown">
- <i class="fa fa-bars"></i></button>
- <ul class="dropdown-menu pull-right" role="menu">
- <li><a href="#">Add new event</a></li>
- <li><a href="#">Clear events</a></li>
- <li class="divider"></li>
- <li><a href="#">View calendar</a></li>
- </ul>
- </div>
- <button type="button" class="btn btn-success btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
- </button>
- <button type="button" class="btn btn-success btn-sm" data-widget="remove"><i class="fa fa-times"></i>
- </button>
- </div>
- <!-- /. tools -->
- </div>
- <!-- /.box-header -->
- <div class="box-body no-padding">
- <!--The calendar -->
- <div id="calendar" style="width: 100%"></div>
- </div>
- <!-- /.box-body -->
- <div class="box-footer text-black">
- <div class="row">
- <div class="col-sm-6">
- <!-- Progress bars -->
- <div class="clearfix">
- <span class="pull-left">Task #1</span>
- <small class="pull-right">90%</small>
- </div>
-
- <div class="progress xs">
- <div class="progress-bar progress-bar-green" style="width: 90%;"></div>
- </div>
-
- <div class="clearfix">
- <span class="pull-left">Task #2</span>
- <small class="pull-right">70%</small>
- </div>
-
- <div class="progress xs">
- <div class="progress-bar progress-bar-green" style="width: 70%;"></div>
- </div>
- </div>
- <!-- /.col -->
- <div class="col-sm-6">
- <div class="clearfix">
- <span class="pull-left">Task #3</span>
- <small class="pull-right">60%</small>
- </div>
-
- <div class="progress xs">
- <div class="progress-bar progress-bar-green" style="width: 60%;"></div>
- </div>
-
- <div class="clearfix">
- <span class="pull-left">Task #4</span>
- <small class="pull-right">40%</small>
- </div>
-
- <div class="progress xs">
- <div class="progress-bar progress-bar-green" style="width: 40%;"></div>
- </div>
- </div>
- <!-- /.col -->
- </div>
- <!-- /.row -->
- </div>
- </div>
- <!-- /.box -->
-
- </section>
- <!-- right col -->
- </div>
- <!-- /.row (main row) -->
-
- </section>
- <!-- /.content -->
+ <div class="page-content">
+ <!-- Main Content -->
+ <div ui-view></div>
+ <!-- /.content -->
+ </div>
+ <!-- /.page-content -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
diff --git a/grails-app/views/login.gsp b/grails-app/views/login.gsp
index 9062021..a3caf69 100644
--- a/grails-app/views/login.gsp
+++ b/grails-app/views/login.gsp
@@ -1,52 +1,103 @@
-<!doctype html>
-<html lang="en" class="no-js">
+<!DOCTYPE html>
+<html>
<head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <title>Ximple AdminLTE 2 | Log in</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
- <asset:stylesheet src="application.css"/>
+ <!-- Bootstrap 3.3.6 -->
+ <asset:stylesheet src="bootstrap/css/bootstrap.min.css"/>
<!-- Font Awesome -->
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
+ <asset:stylesheet src="font-awesome/css/font-awesome.min.css"/>
<!-- Ionicons -->
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
+ <asset:stylesheet src="ionicons/css/ionicons.min.css"/>
+ <!-- Theme style -->
+ <asset:stylesheet src="AdminLTE.min.css"/>
+ <!-- AdminLTE Skins. Choose a skin from the css/skins
+ folder instead of downloading all of them to reduce the load. -->
+ <asset:stylesheet src="skins/_all-skins.min.css"/>
+ <!-- iCheck -->
+ <asset:stylesheet src="jquery/icheck/skins/flat/blue.css"/>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
- <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
- <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
- <![endif]-->
-
- <style type="text/css">
- [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
- display: none !important;
- }
- </style>
-
- <title>xDashAngular : Login</title>
- <asset:link rel="icon" href="favicon.ico" type="image/x-ico" />
- <script>
- (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
- (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
- m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
- })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
- ga('create', 'UA-XXXXX-X');
- ga('send', 'pageview');
- </script>
- <!-- Custom CSS -->
-
- <!-- Custom Fonts -->
-
- <!-- Morris Charts CSS -->
- <!-- <link href="styles/morrisjs/morris.css" rel="stylesheet"> -->
-
- <script type="text/javascript">
- window.contextPath = "${request.contextPath}";
- </script>
+ <asset:javascript src="html5shiv/html5shiv.min.js"/>
+ <asset:javascript src="respond/respond.min.js"/>
+ <![endif]-->
</head>
-<body>
-login
- <asset:javascript src="/xdashangular/xdashangular.js" />
+<body class="hold-transition login-page">
+<div class="login-box">
+ <div class="login-logo">
+ <a href="/"><b>Ximple</b>LTE</a>
+ </div>
+ <!-- /.login-logo -->
+ <div class="login-box-body">
+ <p class="login-box-msg">Sign in to start your session</p>
+
+ <form action="/" method="post">
+ <div class="form-group has-feedback">
+ <input type="email" class="form-control" placeholder="Email">
+ <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
+ </div>
+ <div class="form-group has-feedback">
+ <input type="password" class="form-control" placeholder="Password">
+ <span class="glyphicon glyphicon-lock form-control-feedback"></span>
+ </div>
+ <div class="row">
+ <div class="col-xs-8">
+ <div class="checkbox icheck">
+ <label>
+ <input type="checkbox"> Remember Me
+ </label>
+ </div>
+ </div>
+ <!-- /.col -->
+ <div class="col-xs-4">
+ <button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
+ </div>
+ <!-- /.col -->
+ </div>
+ </form>
+
+ <!--div class="social-auth-links text-center">
+ <p>- OR -</p>
+ <a href="#" class="btn btn-block btn-social btn-facebook btn-flat"><i class="fa fa-facebook"></i> Sign in using
+ Facebook</a>
+ <a href="#" class="btn btn-block btn-social btn-google btn-flat"><i class="fa fa-google-plus"></i> Sign in using
+ Google+</a>
+ </div-->
+ <!-- /.social-auth-links -->
+
+ <!--a href="#">I forgot my password</a><br>
+ <a href="register.html" class="text-center">Register a new membership</a-->
+
+ </div>
+ <!-- /.login-box-body -->
+</div>
+<!-- /.login-box -->
+
+<!-- jQuery 2.2.0 -->
+<asset:javascript src="jquery/jquery.min.js"/>
+<!-- jQuery UI 1.11.4 -->
+<!--asset:javascript src="jquery/jquery-ui.min.js"/-->
+<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
+<script>
+ // $.widget.bridge('uibutton', $.ui.button);
+</script>
+<!-- Bootstrap 3.3.6 -->
+<asset:javascript src="bootstrap/bootstrap.min.js"/>
+<!-- iCheck -->
+<asset:javascript src="jquery/icheck.min.js"/>
+<script>
+ $(function () {
+ $('input').iCheck({
+ checkboxClass: 'icheckbox_square-blue',
+ radioClass: 'iradio_square-blue',
+ increaseArea: '20%' // optional
+ });
+ });
+</script>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/test/javascripts/xdashangular/index/services/uiRouterConsoleLoggerServiceSpec.js b/src/test/javascripts/xdashangular/index/services/uiRouterConsoleLoggerServiceSpec.js
new file mode 100644
index 0000000..770fcf8
--- /dev/null
+++ b/src/test/javascripts/xdashangular/index/services/uiRouterConsoleLoggerServiceSpec.js
@@ -0,0 +1,20 @@
+describe("xdashangular.index module", function() {
+
+ beforeEach(angular.mock.module("xdashangular.index", function() {
+ }));
+
+ describe("uiRouterConsoleLoggerService", function() {
+
+ var uiRouterConsoleLoggerService;
+
+ beforeEach(angular.mock.inject(function(_uiRouterConsoleLoggerService_) {
+ uiRouterConsoleLoggerService = _uiRouterConsoleLoggerService_;
+ }));
+
+ it("should be tested", function() {
+ expect(true).toEqual(false);
+ });
+
+ });
+
+});
--
Gitblit v0.0.0-SNAPSHOT