You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ignite.apache.org by an...@apache.org on 2015/05/14 06:49:26 UTC
[43/90] [abbrv] [partial] incubator-ignite git commit: # ignite-843
WIP.
http://git-wip-us.apache.org/repos/asf/incubator-ignite/blob/f6922c96/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/include/components.html
----------------------------------------------------------------------
diff --git a/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/include/components.html b/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/include/components.html
new file mode 100644
index 0000000..aa52d18
--- /dev/null
+++ b/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/include/components.html
@@ -0,0 +1,1512 @@
+<section id='components' data-spy="scroll" data-target="#scrollspy-components">
+ <h2 class='page-header'><a href="#components">Components</a></h2>
+ <div class='callout callout-info lead'>
+ <h4>Reminder!</h4>
+ <p>
+ AdminLTE uses all of Bootstrap 3 components. It's a good start to review
+ the <a href="http://getbootstrap.com">Bootstrap documentation</a> to get an idea of the various components
+ that this documentation <b>does not</b> cover.
+ </p>
+ </div>
+ <div class='callout callout-danger lead'>
+ <h4>Tip!</h4>
+ <p>
+ If you go through the example pages and would like to copy a component, right-click on
+ the component and choose "inspect element" to get to the HTML quicker than scanning
+ the HTML page.
+ </p>
+ </div>
+ <h3 id='component-main-header'>Main Header</h3>
+ <p class='lead'>The main header contains the logo and navbar. Construction of the
+ navbar differs slightly from Bootstrap because it has components that Bootstrap doesn't provide.
+ The navbar can be constructed in two way. This an example for the normal navbar and next we will provide an example for
+ the top nav layout.</p>
+ <div class="box box-solid">
+ <div class="box-body" style="position: relative;">
+ <span class="eg">Main Header Example</span>
+ <header class="main-header" style="position: relative;">
+ <!-- Logo -->
+ <a href="index2.html" class="logo" style='position: relative;'><b>Admin</b>LTE</a>
+ <!-- Header Navbar: style can be found in header.less -->
+ <nav class="navbar" role="navigation" style="border: 0;">
+ <!-- Sidebar toggle button-->
+ <a href="#" class="sidebar-toggle" role="button">
+ <span class="sr-only">Toggle navigation</span>
+ </a>
+ <!-- Navbar Right Menu -->
+ <div class="navbar-custom-menu">
+ <ul class="nav navbar-nav">
+ <!-- Messages: style can be found in dropdown.less-->
+ <li class="dropdown messages-menu">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+ <i class="fa fa-envelope-o"></i>
+ <span class="label label-success">4</span>
+ </a>
+ <ul class="dropdown-menu">
+ <li class="header">You have 4 messages</li>
+ <li>
+ <!-- inner menu: contains the actual data -->
+ <ul class="menu">
+ <li><!-- start message -->
+ <a href="#">
+ <div class="pull-left">
+ <img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"/>
+ </div>
+ <h4>
+ Support Team
+ <small><i class="fa fa-clock-o"></i> 5 mins</small>
+ </h4>
+ <p>Why not buy a new awesome theme?</p>
+ </a>
+ </li><!-- end message -->
+ </ul>
+ </li>
+ <li class="footer"><a href="#">See All Messages</a></li>
+ </ul>
+ </li>
+ <!-- Notifications: style can be found in dropdown.less -->
+ <li class="dropdown notifications-menu">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+ <i class="fa fa-bell-o"></i>
+ <span class="label label-warning">10</span>
+ </a>
+ <ul class="dropdown-menu">
+ <li class="header">You have 10 notifications</li>
+ <li>
+ <!-- inner menu: contains the actual data -->
+ <ul class="menu">
+ <li>
+ <a href="#">
+ <i class="fa fa-users text-aqua"></i> 5 new members joined today
+ </a>
+ </li>
+ </ul>
+ </li>
+ <li class="footer"><a href="#">View all</a></li>
+ </ul>
+ </li>
+ <!-- Tasks: style can be found in dropdown.less -->
+ <li class="dropdown tasks-menu">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+ <i class="fa fa-flag-o"></i>
+ <span class="label label-danger">9</span>
+ </a>
+ <ul class="dropdown-menu">
+ <li class="header">You have 9 tasks</li>
+ <li>
+ <!-- inner menu: contains the actual data -->
+ <ul class="menu">
+ <li><!-- Task item -->
+ <a href="#">
+ <h3>
+ Design some buttons
+ <small class="pull-right">20%</small>
+ </h3>
+ <div class="progress xs">
+ <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
+ <span class="sr-only">20% Complete</span>
+ </div>
+ </div>
+ </a>
+ </li><!-- end task item -->
+ </ul>
+ </li>
+ <li class="footer">
+ <a href="#">View all tasks</a>
+ </li>
+ </ul>
+ </li>
+ <!-- User Account: style can be found in dropdown.less -->
+ <li class="dropdown user user-menu">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+ <img src="../dist/img/user2-160x160.jpg" class="user-image" alt="User Image"/>
+ <span class="hidden-xs">Alexander Pierce</span>
+ </a>
+ <ul class="dropdown-menu">
+ <!-- User image -->
+ <li class="user-header">
+ <img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
+ <p>
+ Alexander Pierce - Web Developer
+ <small>Member since Nov. 2012</small>
+ </p>
+ </li>
+ <!-- Menu Body -->
+ <li class="user-body">
+ <div class="col-xs-4 text-center">
+ <a href="#">Followers</a>
+ </div>
+ <div class="col-xs-4 text-center">
+ <a href="#">Sales</a>
+ </div>
+ <div class="col-xs-4 text-center">
+ <a href="#">Friends</a>
+ </div>
+ </li>
+ <!-- Menu Footer-->
+ <li class="user-footer">
+ <div class="pull-left">
+ <a href="#" class="btn btn-default btn-flat">Profile</a>
+ </div>
+ <div class="pull-right">
+ <a href="#" class="btn btn-default btn-flat">Sign out</a>
+ </div>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ </nav>
+ </header>
+ </div>
+ </div>
+ <pre class='prettyprint'>
+<header class="main-header">
+ <a href="../../index2.html" class="logo">
+ <!-- LOGO -->
+ AdminLTE
+ </a>
+ <!-- Header Navbar: style can be found in header.less -->
+ <nav class="navbar navbar-static-top" role="navigation">
+ <!-- Navbar Right Menu -->
+ <div class="navbar-custom-menu">
+ <ul class="nav navbar-nav">
+ <!-- Messages: style can be found in dropdown.less-->
+ <li class="dropdown messages-menu">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+ <i class="fa fa-envelope-o"></i>
+ <span class="label label-success">4</span>
+ </a>
+ <ul class="dropdown-menu">
+ <li class="header">You have 4 messages</li>
+ <li>
+ <!-- inner menu: contains the actual data -->
+ <ul class="menu">
+ <li><!-- start message -->
+ <a href="#">
+ <div class="pull-left">
+ <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"/>
+ </div>
+ <h4>
+ Sender Name
+ <small><i class="fa fa-clock-o"></i> 5 mins</small>
+ </h4>
+ <p>Message Excerpt</p>
+ </a>
+ </li><!-- end message -->
+ ...
+ </ul>
+ </li>
+ <li class="footer"><a href="#">See All Messages</a></li>
+ </ul>
+ </li>
+ <!-- Notifications: style can be found in dropdown.less -->
+ <li class="dropdown notifications-menu">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+ <i class="fa fa-bell-o"></i>
+ <span class="label label-warning">10</span>
+ </a>
+ <ul class="dropdown-menu">
+ <li class="header">You have 10 notifications</li>
+ <li>
+ <!-- inner menu: contains the actual data -->
+ <ul class="menu">
+ <li>
+ <a href="#">
+ <i class="ion ion-ios-people info"></i> Notification title
+ </a>
+ </li>
+ ...
+ </ul>
+ </li>
+ <li class="footer"><a href="#">View all</a></li>
+ </ul>
+ </li>
+ <!-- Tasks: style can be found in dropdown.less -->
+ <li class="dropdown tasks-menu">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+ <i class="fa fa-flag-o"></i>
+ <span class="label label-danger">9</span>
+ </a>
+ <ul class="dropdown-menu">
+ <li class="header">You have 9 tasks</li>
+ <li>
+ <!-- inner menu: contains the actual data -->
+ <ul class="menu">
+ <li><!-- Task item -->
+ <a href="#">
+ <h3>
+ Design some buttons
+ <small class="pull-right">20%</small>
+ </h3>
+ <div class="progress xs">
+ <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
+ <span class="sr-only">20% Complete</span>
+ </div>
+ </div>
+ </a>
+ </li><!-- end task item -->
+ ...
+ </ul>
+ </li>
+ <li class="footer">
+ <a href="#">View all tasks</a>
+ </li>
+ </ul>
+ </li>
+ <!-- User Account: style can be found in dropdown.less -->
+ <li class="dropdown user user-menu">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+ <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"/>
+ <span class="hidden-xs">Alexander Pierce</span>
+ </a>
+ <ul class="dropdown-menu">
+ <!-- User image -->
+ <li class="user-header">
+ <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
+ <p>
+ Alexander Pierce - Web Developer
+ <small>Member since Nov. 2012</small>
+ </p>
+ </li>
+ <!-- Menu Body -->
+ <li class="user-body">
+ <div class="col-xs-4 text-center">
+ <a href="#">Followers</a>
+ </div>
+ <div class="col-xs-4 text-center">
+ <a href="#">Sales</a>
+ </div>
+ <div class="col-xs-4 text-center">
+ <a href="#">Friends</a>
+ </div>
+ </li>
+ <!-- Menu Footer-->
+ <li class="user-footer">
+ <div class="pull-left">
+ <a href="#" class="btn btn-default btn-flat">Profile</a>
+ </div>
+ <div class="pull-right">
+ <a href="#" class="btn btn-default btn-flat">Sign out</a>
+ </div>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ </nav>
+</header></pre>
+ <h4>Top Nav Layout. Main Header Example.</h4>
+ <div class="callout callout-info lead">
+ <h4>Reminder!</h4>
+ <p>To use this main header instead of the regular one, you must add the <code>layout-top-nav</code> class to the body tag.</p>
+ </div>
+ <div class="box box-solid">
+ <div class="box-body layout-top-nav">
+ <span class="eg">Top Nav Example</span>
+ <header class="main-header">
+ <nav class="navbar navbar-static-top">
+ <div class="container-fluid">
+ <div class="navbar-header">
+ <a href="../../index2.html" class="navbar-brand"><b>Admin</b>LTE</a>
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
+ <i class="fa fa-bars"></i>
+ </button>
+ </div>
+
+ <!-- Collect the nav links, forms, and other content for toggling -->
+ <div class="collapse navbar-collapse" id="navbar-collapse">
+ <ul class="nav navbar-nav">
+ <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
+ <li><a href="#">Link</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+ <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>
+ <li class="divider"></li>
+ <li><a href="#">One more separated link</a></li>
+ </ul>
+ </li>
+ </ul>
+ <form class="navbar-form navbar-left" role="search">
+ <div class="form-group">
+ <input type="text" class="form-control" id="navbar-search-input" placeholder="Search">
+ </div>
+ </form>
+ <ul class="nav navbar-nav navbar-right">
+ <li><a href="#">Link</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+ <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>
+ </li>
+ </ul>
+ </div><!-- /.navbar-collapse -->
+ </div><!-- /.container-fluid -->
+ </nav>
+ </header>
+ </div>
+ </div>
+ <pre class='prettyprint'>
+<header class="main-header">
+ <nav class="navbar navbar-static-top">
+ <div class="container-fluid">
+ <div class="navbar-header">
+ <a href="../../index2.html" class="navbar-brand"><b>Admin</b>LTE</a>
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
+ <i class="fa fa-bars"></i>
+ </button>
+ </div>
+
+ <!-- Collect the nav links, forms, and other content for toggling -->
+ <div class="collapse navbar-collapse" id="navbar-collapse">
+ <ul class="nav navbar-nav">
+ <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
+ <li><a href="#">Link</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+ <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>
+ <li class="divider"></li>
+ <li><a href="#">One more separated link</a></li>
+ </ul>
+ </li>
+ </ul>
+ <form class="navbar-form navbar-left" role="search">
+ <div class="form-group">
+ <input type="text" class="form-control" id="navbar-search-input" placeholder="Search">
+ </div>
+ </form>
+ <ul class="nav navbar-nav navbar-right">
+ <li><a href="#">Link</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+ <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>
+ </li>
+ </ul>
+ </div><!-- /.navbar-collapse -->
+ </div><!-- /.container-fluid -->
+ </nav>
+</header></pre>
+
+ <!-- ===================================================================== -->
+
+ <h3 id='component-sidebar'>Sidebar</h3>
+ <p class="lead">
+ The sidebar used in this page to the left provides an example of what your sidebar should like.
+ Construction of a sidebar:
+ </p>
+ <pre class="prettyprint">
+<div class="main-sidebar">
+ <!-- Inner sidebar -->
+ <div class="sidebar">
+ <!-- user panel (Optional) -->
+ <div class="user-panel">
+ <div class="pull-left image">
+ <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
+ </div>
+ <div class="pull-left info">
+ <p>User Name</p>
+
+ <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
+ </div>
+ </div><!-- /.user-panel -->
+
+ <!-- Search Form (Optional) -->
+ <form action="#" method="get" class="sidebar-form">
+ <div class="input-group">
+ <input type="text" name="q" class="form-control" placeholder="Search..."/>
+ <span class="input-group-btn">
+ <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+ </span>
+ </div>
+ </form><!-- /.sidebar-form -->
+
+ <!-- Sidebar Menu -->
+ <ul class="sidebar-menu">
+ <li class="header">HEADER</li>
+ <!-- Optionally, you can add icons to the links -->
+ <li class="active"><a href="#"><span>Link</span></a><</li>
+ <li><a href="#"><span>Another Link</span></a></li>
+ <li class="treeview">
+ <a href="#"><span>Multilevel</span> <i class="fa fa-angle-left pull-right"></i></a>
+ <ul class="treeview-menu">
+ <li><a href="#">Link in level 2</a></li>
+ <li><a href="#">Link in level 2</a></li>
+ </ul>
+ </li>
+ </ul><!-- /.sidebar-menu -->
+
+ </div><!-- /.sidebar -->
+</div><!-- /.main-sidebar -->
+ </pre>
+
+ <!-- ===================================================================== -->
+
+ <h3 id="component-info-box">Info Box</h3>
+ <p class="lead">Info boxes are used to display statistical snippets. There are two types of info boxes.</p>
+ <h4>First Type of Info Boxes</h4>
+ <!-- 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="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 -->
+ <p class="lead">Markup</p>
+ <pre class="prettyprint"><code class="html">
+<div class="info-box">
+ <-- Apply any bg-* class to to the icon to color it -->
+ <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 -->
+</code></pre>
+
+ <h4>Second Type of Info Boxes</h4>
+ <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 -->
+ <p class="lead">Markup</p>
+ <pre class="prettyprint"><code class="html">
+<-- Apply any bg-* class to to the info-box to color it -->
+<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">Likes</span>
+ <span class="info-box-number">41,410</span>
+ <-- The progress section is optional -->
+ <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 -->
+</code></pre>
+ <p class="lead">The only thing you need to change to alternate between these style is change the placement of the bg-* class. For the
+ first style apply any bg-* class to the icon itself. For the other style, apply the bg-* class to the info-box div.</p>
+ <!-- ===================================================================== -->
+
+ <h3 id='component-box'>Box</h3>
+ <p class="lead">The box component is the most widely used component through out this template. You can
+ use it for anything from displaying charts to just blocks of text. It comes in many different
+ styles that we will explore below.</p>
+ <h4>Default Box Markup</h4>
+ <div class="box">
+ <div class="box-header with-border">
+ <h3 class="box-title">Default Box Example</h3>
+ <div class="box-tools pull-right">
+ <!-- Buttons, labels, and many other things can be placed here! -->
+ <!-- Here is a label for example -->
+ <span class="label label-primary">Label</span>
+ </div><!-- /.box-tools -->
+ </div><!-- /.box-header -->
+ <div class="box-body">
+ The body of the box
+ </div><!-- /.box-body -->
+ <div class="box-footer">
+ The footer of the box
+ </div><!-- box-footer -->
+ </div><!-- /.box -->
+ <pre class="prettyprint">
+<div class="box">
+ <div class="box-header with-border">
+ <h3 class="box-title">Default Box Example</h3>
+ <div class="box-tools pull-right">
+ <!-- Buttons, labels, and many other things can be placed here! -->
+ <!-- Here is a label for example -->
+ <span class="label label-primary">Label</span>
+ </div><!-- /.box-tools -->
+ </div><!-- /.box-header -->
+ <div class="box-body">
+ The body of the box
+ </div><!-- /.box-body -->
+ <div class="box-footer">
+ The footer of the box
+ </div><!-- box-footer -->
+</div><!-- /.box --></pre>
+ <h4>Box Variants</h4>
+ <p class="lead">You can change the style of the box by adding any of the contextual classes.</p>
+ <div class="row">
+ <div class="col-md-4">
+ <div class="box">
+ <div class="box-header with-border">
+ <h3 class="box-title">Default Box Example</h3>
+ </div><!-- /.box-header -->
+ <div class="box-body">
+ The body of the box
+ </div><!-- /.box-body -->
+ </div><!-- /.box -->
+ </div>
+ <div class="col-md-4">
+ <div class="box box-primary">
+ <div class="box-header with-border">
+ <h3 class="box-title">Primary Box Example</h3>
+ </div><!-- /.box-header -->
+ <div class="box-body">
+ The body of the box
+ </div><!-- /.box-body -->
+ </div><!-- /.box -->
+ </div>
+ <div class="col-md-4">
+ <div class="box box-info">
+ <div class="box-header with-border">
+ <h3 class="box-title">Info Box Example</h3>
+ </div><!-- /.box-header -->
+ <div class="box-body">
+ The body of the box
+ </div><!-- /.box-body -->
+ </div><!-- /.box -->
+ </div>
+ <div class="clearfix"></div>
+ <div class="col-md-4">
+ <div class="box box-warning">
+ <div class="box-header with-border">
+ <h3 class="box-title">Warning Box Example</h3>
+ </div><!-- /.box-header -->
+ <div class="box-body">
+ The body of the box
+ </div><!-- /.box-body -->
+ </div><!-- /.box -->
+ </div>
+ <div class="col-md-4">
+ <div class="box box-success">
+ <div class="box-header with-border">
+ <h3 class="box-title">Success Box Example</h3>
+ </div><!-- /.box-header -->
+ <div class="box-body">
+ The body of the box
+ </div><!-- /.box-body -->
+ </div><!-- /.box -->
+ </div>
+ <div class="col-md-4">
+ <div class="box box-danger">
+ <div class="box-header with-border">
+ <h3 class="box-title">Danger Box Example</h3>
+ </div><!-- /.box-header -->
+ <div class="box-body">
+ The body of the box
+ </div><!-- /.box-body -->
+ </div><!-- /.box -->
+ </div>
+ </div><!-- /.row -->
+ <pre class="prettyprint">
+<div class="box box-default">...</div>
+<div class="box box-primary">...</div>
+<div class="box box-info">...</div>
+<div class="box box-warning">...</div>
+<div class="box box-success">...</div>
+<div class="box box-danger">...</div></pre>
+
+ <h4>Solid Box</h4>
+ <p class="lead">Solid Boxes are alternative ways to display boxes.
+ They can be created by simply adding the box-solid class to the box component.
+ You may also use contextual classes with you solid boxes.</p>
+ <div class="row">
+ <div class="col-md-4">
+ <div class="box box-solid box-default">
+ <div class="box-header">
+ <h3 class="box-title">Default Solid Box Example</h3>
+ </div><!-- /.box-header -->
+ <div class="box-body">
+ The body of the box
+ </div><!-- /.box-body -->
+ </div><!-- /.box -->
+ </div>
+ <div class="col-md-4">
+ <div class="box box-solid box-primary">
+ <div class="box-header">
+ <h3 class="box-title">Primary Solid Box Example</h3>
+ </div><!-- /.box-header -->
+ <div class="box-body">
+ The body of the box
+ </div><!-- /.box-body -->
+ </div><!-- /.box -->
+ </div>
+ <div class="col-md-4">
+ <div class="box box-solid box-info">
+ <div class="box-header">
+ <h3 class="box-title">Info Solid Box Example</h3>
+ </div><!-- /.box-header -->
+ <div class="box-body">
+ The body of the box
+ </div><!-- /.box-body -->
+ </div><!-- /.box -->
+ </div>
+ <div class="clearfix"></div>
+ <div class="col-md-4">
+ <div class="box box-solid box-warning">
+ <div class="box-header">
+ <h3 class="box-title">Warning Solid Box Example</h3>
+ </div><!-- /.box-header -->
+ <div class="box-body">
+ The body of the box
+ </div><!-- /.box-body -->
+ </div><!-- /.box -->
+ </div>
+ <div class="col-md-4">
+ <div class="box box-solid box-success">
+ <div class="box-header">
+ <h3 class="box-title">Success Solid Box Example</h3>
+ </div><!-- /.box-header -->
+ <div class="box-body">
+ The body of the box
+ </div><!-- /.box-body -->
+ </div><!-- /.box -->
+ </div>
+ <div class="col-md-4">
+ <div class="box box-solid box-danger">
+ <div class="box-header">
+ <h3 class="box-title">Danger Solid Box Example</h3>
+ </div><!-- /.box-header -->
+ <div class="box-body">
+ The body of the box
+ </div><!-- /.box-body -->
+ </div><!-- /.box -->
+ </div>
+ </div><!-- /.row -->
+ <pre class="prettyprint">
+<div class="box box-solid box-default">...</div>
+<div class="box box-solid box-primary">...</div>
+<div class="box box-solid box-info">...</div>
+<div class="box box-solid box-warning">...</div>
+<div class="box box-solid box-success">...</div>
+<div class="box box-solid box-danger">...</div></pre>
+ <h4>Box Tools</h4>
+ <p class="lead">Boxes can contain tools to deploy a specific event or provide simple info. The following examples makes use
+ of multiple AdminLTE components within the header of the box.</p>
+ <p>AdminLTE data-widget attribute provides boxes with the ability to collapse or be removed. The buttons
+ are placed in the box-tools which is placed in the box-header.</p>
+ <pre class="prettyprint">
+<-- This will cause the box to be removed when clicked -->
+<button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
+<-- This will cause the box to collapse when clicked -->
+<button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button></pre>
+ <div class="row">
+ <div class="col-md-4">
+ <div class="box box-default">
+ <div class="box-header with-border">
+ <h3 class="box-title">Collapsable</h3>
+ <div class="box-tools pull-right">
+ <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 -->
+ <pre class="prettyprint">
+<div class="box box-default">
+ <div class="box-header with-border">
+ <h3 class="box-title">Collapsable</h3>
+ <div class="box-tools pull-right">
+ <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 --></pre>
+ </div>
+ <div class="col-md-4">
+ <div class="box box-default">
+ <div class="box-header with-border">
+ <h3 class="box-title">Removable</h3>
+ <div class="box-tools pull-right">
+ <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 -->
+ <pre class="prettyprint">
+<div class="box box-default">
+ <div class="box-header with-border">
+ <h3 class="box-title">Removable</h3>
+ <div class="box-tools pull-right">
+ <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 --></pre>
+ </div>
+ <div class="col-md-4">
+ <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 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 -->
+ <pre class="prettyprint">
+<div class="box box-default">
+ <div class="box-header with-border">
+ <h3 class="box-title">Expandable</h3>
+ <div class="box-tools pull-right">
+ <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 --></pre>
+ </div>
+ </div><!-- /.row -->
+ <p>We can also add labels, badges, pagination, tooltips, inputs and many more in the box tools. A few examples:</p>
+ <div class="row">
+ <div class="col-md-4">
+ <div class="box box-default">
+ <div class="box-header with-border">
+ <h3 class="box-title">Labels</h3>
+ <div class="box-tools pull-right">
+ <span class="label label-default">Some Label</span>
+ </div><!-- /.box-tools -->
+ </div><!-- /.box-header -->
+ <div class="box-body">
+ The body of the box
+ </div><!-- /.box-body -->
+ </div><!-- /.box -->
+ <pre class="prettyprint">
+<div class="box box-default">
+ <div class="box-header with-border">
+ <h3 class="box-title">Labels</h3>
+ <div class="box-tools pull-right">
+ <span class="label label-default">8 New Messages</span>
+ </div><!-- /.box-tools -->
+ </div><!-- /.box-header -->
+ <div class="box-body">
+ The body of the box
+ </div><!-- /.box-body -->
+</div><!-- /.box --></pre>
+ </div>
+ <div class="col-md-4">
+ <div class="box box-default">
+ <div class="box-header with-border">
+ <h3 class="box-title">Input</h3>
+ <div class="box-tools pull-right">
+ <div class="has-feedback">
+ <input type="text" class="form-control input-sm" placeholder="Search..."/>
+ <span class="glyphicon glyphicon-search form-control-feedback text-muted"></span>
+ </div>
+ </div><!-- /.box-tools -->
+ </div><!-- /.box-header -->
+ <div class="box-body">
+ The body of the box
+ </div><!-- /.box-body -->
+ </div><!-- /.box -->
+ <pre class="prettyprint">
+<div class="box box-default">
+ <div class="box-header with-border">
+ <h3 class="box-title">Input</h3>
+ <div class="box-tools pull-right">
+ <div class="has-feedback">
+ <input type="text" class="form-control input-sm" placeholder="Search..."/>
+ <span class="glyphicon glyphicon-search form-control-feedback"></span>
+ </div>
+ </div><!-- /.box-tools -->
+ </div><!-- /.box-header -->
+ <div class="box-body">
+ The body of the box
+ </div><!-- /.box-body -->
+</div><!-- /.box --></pre>
+ </div>
+ <div class="col-md-4">
+ <div class="box box-default">
+ <div class="box-header with-border">
+ <h3 class="box-title">Tootips on buttons</h3>
+ <div class="box-tools pull-right">
+ <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
+ <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="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 -->
+ <pre class="prettyprint">
+<div class="box box-default">
+ <div class="box-header with-border">
+ <h3 class="box-title">Tooltips on buttons</h3>
+ <div class="box-tools pull-right">
+ <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
+ <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="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 --></pre>
+ </div><!-- /.col -->
+ </div><!-- /.row -->
+
+ <h4>Loading States</h4>
+ <div class="row">
+ <div class="col-md-6">
+ <div class="box box-default">
+ <div class="box-header with-border">
+ <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 class="col-md-6">
+ <div class="box box-default box-solid">
+ <div class="box-header with-border">
+ <h3 class="box-title">Loading state (.box-solid)</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 -->
+ <p class="lead">
+ To simulate a loading state, simply place this code before the <code>.box</code> closing tag.
+ </p>
+ <pre class="prettyprint"><code class="html"><div class="overlay">
+ <i class="fa fa-refresh fa-spin"></i>
+</div>
+</code></pre>
+ <h3 id="component-direct-chat">Direct Chat</h3>
+ <p class="lead">The direct chat widget extends the box component to create a beautiful chat interface. This widget
+ consists of a required messages pane and an <b>optional</b> contacts pane. Examples:</p>
+ <!-- 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 class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+ <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
+ <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="Contact Avatar"/>
+ <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="button" 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 class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+ <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
+ <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="Contact Avatar"/>
+ <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="button" 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 class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+ <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
+ <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="Contact Avatar"/>
+ <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="button" 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 class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+ <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
+ <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="Contact Avatar"/>
+ <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="button" class="btn btn-danger btn-flat">Send</button>
+ </span>
+ </div>
+ </form>
+ </div><!-- /.box-footer-->
+ </div><!--/.direct-chat -->
+ </div><!-- /.col -->
+ </div><!-- /.row -->
+ <p class="lead">Direct Chat Markup</p>
+ <pre class="prettyprint"><code class="html">
+<-- Construct the box with style you want. Here we are using box-danger -->
+<-- Then add the class direct-chat and choose the direct-chat-* contexual class -->
+<-- The contextual class should match the box, so we are using 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 class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+ <-- In box-tools add this button if you intend to use the contacts pane -->
+ <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
+ <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="Contact Avatar"/>
+ <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">
+ <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-danger btn-flat">Send</button>
+ </span>
+ </div>
+ </div><!-- /.box-footer-->
+</div><!--/.direct-chat -->
+</code></pre>
+
+ <p>Of course you can use direct chat with a solid box by adding the class <code>solid-box</code> to the box. Here are a couple of examples:</p>
+
+ <!-- Direct Chat With Solid Boxes -->
+ <div class="row">
+ <div class="col-md-6">
+ <!-- DIRECT CHAT WARNING -->
+ <div class="box box-primary box-solid direct-chat direct-chat-primary">
+ <div class="box-header">
+ <h3 class="box-title">Direct Chat in a Solid Box</h3>
+ <div class="box-tools pull-right">
+ <span data-toggle="tooltip" title="3 New Messages" class='badge bg-light-blue'>3</span>
+ <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+ <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
+ <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="Contact Avatar"/>
+ <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="button" class="btn btn-primary btn-flat">Send</button>
+ </span>
+ </div>
+ </form>
+ </div><!-- /.box-footer-->
+ </div><!--/.direct-chat -->
+ </div><!-- /.col -->
+
+ <div class="col-md-6">
+ <!-- DIRECT CHAT DANGER -->
+ <div class="box box-info box-solid direct-chat direct-chat-info">
+ <div class="box-header">
+ <h3 class="box-title">Direct Chat in a Solid Box</h3>
+ <div class="box-tools pull-right">
+ <span data-toggle="tooltip" title="3 New Messages" class='badge bg-aqua'>3</span>
+ <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+ <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
+ <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="Contact Avatar"/>
+ <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="button" class="btn btn-info btn-flat">Send</button>
+ </span>
+ </div>
+ </form>
+ </div><!-- /.box-footer-->
+ </div><!--/.direct-chat -->
+ </div><!-- /.col -->
+ </div><!-- /.row -->
+</section>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-ignite/blob/f6922c96/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/index.html
----------------------------------------------------------------------
diff --git a/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/index.html b/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/index.html
new file mode 100644
index 0000000..262872c
--- /dev/null
+++ b/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/index.html
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <title>AdminLTE 2 | Documentation</title>
+ <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
+ <!-- Bootstrap 3.3.2 -->
+ <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
+ <!-- Font Awesome Icons -->
+ <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
+ <!-- Ionicons -->
+ <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
+ <!-- Theme style -->
+ <link href="../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
+ <link href="../dist/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css" />
+ <link href="style.css" rel="stylesheet" type="text/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/libs/html5shiv/3.7.0/html5shiv.js"></script>
+ <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
+ <![endif]-->
+ </head>
+ <body class="skin-blue fixed" data-spy="scroll" data-target="#scrollspy">
+ <div class="wrapper">
+
+ <header class="main-header">
+ <!-- Logo -->
+ <!-- Logo -->
+ <a href="../index2.html" class="logo">
+ <!-- mini logo for sidebar mini 50x50 pixels -->
+ <span class="logo-mini"><b>A</b>LT</span>
+ <!-- logo for regular state and mobile devices -->
+ <span class="logo-lg"><b>Admin</b>LTE</span>
+ </a>
+ <!-- Header Navbar: style can be found in header.less -->
+ <nav class="navbar navbar-static-top" role="navigation">
+ <!-- Sidebar toggle button-->
+ <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
+ <span class="sr-only">Toggle navigation</span>
+ </a>
+ <!-- Navbar Right Menu -->
+ <div class="navbar-custom-menu">
+ <ul class="nav navbar-nav">
+ <li><a href="http://almsaeedstudio.com">Almsaeed Studio</a></li>
+ <li><a href="http://almsaeedstudio.com/premium">Premium Templates</a></li>
+ </ul>
+ </div>
+ </nav>
+ </header>
+ <!-- Left side column. contains the logo and sidebar -->
+ <aside class="main-sidebar">
+ <!-- sidebar: style can be found in sidebar.less -->
+ <div class="sidebar" id="scrollspy">
+
+ <!-- sidebar menu: : style can be found in sidebar.less -->
+ <ul class="nav sidebar-menu">
+ <li class="header">TABLE OF CONTENTS</li>
+ <li><a href="#introduction"><i class='fa fa-circle-o'></i> Introduction</a></li>
+ <li><a href="#download"><i class='fa fa-circle-o'></i> Download</a></li>
+ <li><a href="#dependencies"><i class='fa fa-circle-o'></i> Dependencies</a></li>
+ <li><a href="#advice"><i class='fa fa-circle-o'></i> Advice</a></li>
+ <li><a href="#layout"><i class='fa fa-circle-o'></i> Layout</a></li>
+ <li class='treeview' id='scrollspy-components'>
+ <a href="#components"><i class='fa fa-circle-o'></i> Components</a>
+ <ul class='nav treeview-menu'>
+ <li><a href='#component-main-header'>Main Header</a></li>
+ <li><a href='#component-sidebar'>Sidebar</a></li>
+ <li><a href='#component-info-box'>Info Box</a></li>
+ <li><a href='#component-box'>Boxes</a></li>
+ <li><a href='#component-direct-chat'>Direct Chat</a></li>
+ </ul>
+ </li>
+ <li><a href="#plugins"><i class='fa fa-circle-o'></i> Plugins</a></li>
+ <li><a href="#browsers"><i class='fa fa-circle-o'></i> Browser Support</a></li>
+ <li><a href="#upgrade"><i class='fa fa-circle-o'></i> Upgrade Guide</a></li>
+ <li><a href="#faq"><i class='fa fa-circle-o'></i> FAQ</a></li>
+ <li><a href="#license"><i class='fa fa-circle-o'></i> License</a></li>
+ </ul>
+ </div>
+ <!-- /.sidebar -->
+ </aside>
+
+ <!-- Content Wrapper. Contains page content -->
+ <div class="content-wrapper">
+ <!-- Content Header (Page header) -->
+ <div class="content-header">
+ <h1>
+ AdminLTE Documentation
+ <small>Current version 2.0.2</small>
+ </h1>
+ <ol class="breadcrumb">
+ <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
+ <li class="active">Documentation</li>
+ </ol>
+ </div>
+
+ <!-- Main content -->
+ <div class="content body">
+ <div class="callout callout-warning no-margin bring-up">
+ <h4>Warning!</h4>
+ This documentation is under development. Some information may change as the progress of creating the documentation continues.
+ </div>
+include "introduction.html"
+
+ <!-- ============================================================= -->
+
+include "download.html"
+
+ <!-- ============================================================= -->
+
+include "dependencies.html"
+
+ <!-- ============================================================= -->
+
+include "advice.html"
+
+ <!-- ============================================================= -->
+
+include "layout.html"
+
+ <!-- ============================================================= -->
+
+include "components.html"
+
+ <!-- ============================================================= -->
+
+include "plugins.html"
+
+ <!-- ============================================================= -->
+
+include "browsers.html"
+
+ <!-- ============================================================= -->
+
+include "upgrade.html"
+
+ <!-- ============================================================= -->
+
+include "faq.html"
+
+ <!-- ============================================================= -->
+
+include "license.html"
+
+ </div><!-- /.content -->
+ </div><!-- /.content-wrapper -->
+
+ <footer class="main-footer">
+ <div class="pull-right hidden-xs">
+ <b>Version</b> 2.0
+ </div>
+ <strong>Copyright © 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
+ </footer>
+
+ </div><!-- ./wrapper -->
+
+ <!-- jQuery 2.1.3 -->
+ <script src="../plugins/jQuery/jQuery-2.1.3.min.js"></script>
+ <!-- Bootstrap 3.3.2 JS -->
+ <script src="../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
+ <!-- FastClick -->
+ <script src='../plugins/fastclick/fastclick.min.js'></script>
+ <!-- AdminLTE App -->
+ <script src="../dist/js/app.min.js" type="text/javascript"></script>
+ <!-- SlimScroll 1.3.0 -->
+ <script src="../plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
+ <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
+ <script src="docs.js"></script>
+ </body>
+</html>