forked from ~ulysseskao/xdashangular
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 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 }); } 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' }); } ])
@@ -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 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> <!-- 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 --> 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> <!-- 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 --> 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> <!-- 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 --> 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> <!-- 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 --> 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> <!-- 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 --> 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> <!-- 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 --> 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> <!-- 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> 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> <!-- 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 --> 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> <!-- 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 --> 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> 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> 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 --> 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> <!-- 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 --> 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> <!-- 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> 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 --> grails-app/conf/application.groovy
@@ -1,2 +1,2 @@ grails.assets.bundle=true // grails.assets.bundle=true 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"> 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> </html> src/test/javascripts/xdashangular/index/services/uiRouterConsoleLoggerServiceSpec.js
New file @@ -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); }); }); });
