<div class="wrapper wrapper-content">
<div class="animated fadeInRight">
<div class="row">
<div class="col-lg-2">
<div class="ibox float-e-margins">
<div class="ibox-title">
<span class="label label-success pull-right">Monthly</span>
<h5>Income</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">386,200</h1>
<div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i></div>
<small>Total income</small>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="ibox float-e-margins">
<div class="ibox-title">
<span class="label label-info pull-right">Annual</span>
<h5>Orders</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">80,800</h1>
<div class="stat-percent font-bold text-info">20% <i class="fa fa-level-up"></i></div>
<small>New orders</small>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="ibox float-e-margins">
<div class="ibox-title">
<span class="label label-primary pull-right">Today</span>
<h5>Vistits</h5>
</div>
<div class="ibox-content">
<div class="row">
<div class="col-md-6">
<h1 class="no-margins">$ 406,42</h1>
<div class="font-bold text-navy">44% <i class="fa fa-level-up"></i> <small>Rapid pace</small></div>
</div>
<div class="col-md-6">
<h1 class="no-margins">206,12</h1>
<div class="font-bold text-navy">22% <i class="fa fa-level-up"></i> <small>Slow pace</small></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Monthly income</h5>
<div class="ibox-tools">
<span class="label label-primary">Updated 12.2015</span>
</div>
</div>
<div class="ibox-content no-padding" ng-controller="widgetFlotChart as chart">
<div class="flot-chart m-t-lg" style="height: 55px;">
<div flot class="flot-chart-content" dataset="chart.flotChartData1" options="chart.flotChartOptions1"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<div class="ibox float-e-margins">
<div class="ibox-content">
<div>
<span class="pull-right text-right">
<small>Average value of sales in the past month in: <strong>United states</strong></small>
<br/>
All sales: 162,862
</span>
<h3 class="font-bold no-margins">
Half-year revenue margin
</h3>
<small>Sales marketing.</small>
</div>
<div class="m-t-sm">
<div class="row">
<div class="col-md-8" ng-controller="chartJsCtrl as chart">
<div>
<canvas linechart options="chart.lineOptions" data="chart.lineDataDashboard4" height="114" responsive="true"></canvas>
</div>
</div>
<div class="col-md-4">
<ul class="stat-list m-t-lg">
<li>
<h2 class="no-margins">2,346</h2>
<small>Total orders in period</small>
<div class="progress progress-mini">
<div class="progress-bar" style="width: 48%;"></div>
</div>
</li>
<li>
<h2 class="no-margins ">4,422</h2>
<small>Orders in last month</small>
<div class="progress progress-mini">
<div class="progress-bar" style="width: 60%;"></div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="m-t-md">
<small class="pull-right">
<i class="fa fa-clock-o"> </i>
Update on 16.07.2015
</small>
<small>
<strong>Analysis of sales:</strong> The value has been changed over time, and last month reached a level over $50,000.
</small>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="ibox float-e-margins">
<div class="ibox-title">
<span class="label label-warning pull-right">Data has changed</span>
<h5>User activity</h5>
</div>
<div class="ibox-content">
<div class="row">
<div class="col-xs-4">
<small class="stats-label">Pages / Visit</small>
<h4>236 321.80</h4>
</div>
<div class="col-xs-4">
<small class="stats-label">% New Visits</small>
<h4>46.11%</h4>
</div>
<div class="col-xs-4">
<small class="stats-label">Last week</small>
<h4>432.021</h4>
</div>
</div>
</div>
<div class="ibox-content">
<div class="row">
<div class="col-xs-4">
<small class="stats-label">Pages / Visit</small>
<h4>643 321.10</h4>
</div>
<div class="col-xs-4">
<small class="stats-label">% New Visits</small>
<h4>92.43%</h4>
</div>
<div class="col-xs-4">
<small class="stats-label">Last week</small>
<h4>564.554</h4>
</div>
</div>
</div>
<div class="ibox-content">
<div class="row">
<div class="col-xs-4">
<small class="stats-label">Pages / Visit</small>
<h4>436 547.20</h4>
</div>
<div class="col-xs-4">
<small class="stats-label">% New Visits</small>
<h4>150.23%</h4>
</div>
<div class="col-xs-4">
<small class="stats-label">Last week</small>
<h4>124.990</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Custom responsive table </h5>
<div ibox-tools></div>
</div>
<div class="ibox-content">
<div class="row">
<div class="col-sm-9 m-b-xs">
<div data-toggle="buttons" class="btn-group">
<label class="btn btn-sm btn-white"> <input type="radio" id="option1" name="options"> Day </label>
<label class="btn btn-sm btn-white active"> <input type="radio" id="option2" name="options"> Week </label>
<label class="btn btn-sm btn-white"> <input type="radio" id="option3" name="options"> Month </label>
</div>
</div>
<div class="col-sm-3">
<div class="input-group"><input type="text" placeholder="Search" class="input-sm form-control"> <span class="input-group-btn">
<button type="button" class="btn btn-sm btn-primary"> Go!</button> </span></div>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Project </th>
<th>Name </th>
<th>Phone </th>
<th>Company </th>
<th>Completed </th>
<th>Task</th>
<th>Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Project <small>This is example of project</small></td>
<td>Patrick Smith</td>
<td>0800 051213</td>
<td>Inceptos Hymenaeos Ltd</td>
<td><pie-chart data="main.PieChart5.data" options="main.PieChart5.options"></pie-chart></td>
<td>20%</td>
<td>Jul 14, 2013</td>
<td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
</tr>
<tr>
<td>2</td>
<td>Alpha project</td>
<td>Alice Jackson</td>
<td>0500 780909</td>
<td>Nec Euismod In Company</td>
<td><pie-chart data="main.PieChart4.data" options="main.PieChart4.options"></pie-chart></td>
<td>40%</td>
<td>Jul 16, 2013</td>
<td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
</tr>
<tr>
<td>3</td>
<td>Betha project</td>
<td>John Smith</td>
<td>0800 1111</td>
<td>Erat Volutpat</td>
<td><pie-chart data="main.PieChart3.data" options="main.PieChart3.options"></pie-chart></td>
<td>75%</td>
<td>Jul 18, 2013</td>
<td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
</tr>
<tr>
<td>4</td>
<td>Gamma project</td>
<td>Anna Jordan</td>
<td>(016977) 0648</td>
<td>Tellus Ltd</td>
<td><pie-chart data="main.PieChart6.data" options="main.PieChart6.options"></pie-chart></td>
<td>18%</td>
<td>Jul 22, 2013</td>
<td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
</tr>
<tr>
<td>2</td>
<td>Alpha project</td>
<td>Alice Jackson</td>
<td>0500 780909</td>
<td>Nec Euismod In Company</td>
<td><pie-chart data="main.PieChart.data" options="main.PieChart.options"></pie-chart></td>
<td>40%</td>
<td>Jul 16, 2013</td>
<td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
</tr>
<tr>
<td>1</td>
<td>Project <small>This is example of project</small></td>
<td>Patrick Smith</td>
<td>0800 051213</td>
<td>Inceptos Hymenaeos Ltd</td>
<td><pie-chart data="main.PieChart4.data" options="main.PieChart4.options"></pie-chart></td>
<td>20%</td>
<td>Jul 14, 2013</td>
<td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
</tr>
<tr>
<td>4</td>
<td>Gamma project</td>
<td>Anna Jordan</td>
<td>(016977) 0648</td>
<td>Tellus Ltd</td>
<td><pie-chart data="main.PieChart3.data" options="main.PieChart3.options"></pie-chart></td>
<td>18%</td>
<td>Jul 22, 2013</td>
<td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
</tr>
<tr>
<td>1</td>
<td>Project <small>This is example of project</small></td>
<td>Patrick Smith</td>
<td>0800 051213</td>
<td>Inceptos Hymenaeos Ltd</td>
<td><pie-chart data="main.PieChart2.data" options="main.PieChart2.options"></pie-chart></td>
<td>20%</td>
<td>Jul 14, 2013</td>
<td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
</tr>
<tr>
<td>2</td>
<td>Alpha project</td>
<td>Alice Jackson</td>
<td>0500 780909</td>
<td>Nec Euismod In Company</td>
<td><pie-chart data="main.PieChart6.data" options="main.PieChart6.options"></pie-chart></td>
<td>40%</td>
<td>Jul 16, 2013</td>
<td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
</tr>
<tr>
<td>3</td>
<td>Betha project</td>
<td>John Smith</td>
<td>0800 1111</td>
<td>Erat Volutpat</td>
<td><pie-chart data="main.PieChart5.data" options="main.PieChart5.options"></pie-chart></td>
<td>75%</td>
<td>Jul 18, 2013</td>
<td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
</tr>
<tr>
<td>4</td>
<td>Gamma project</td>
<td>Anna Jordan</td>
<td>(016977) 0648</td>
<td>Tellus Ltd</td>
<td><pie-chart data="main.PieChart4.data" options="main.PieChart4.options"></pie-chart></td>
<td>18%</td>
<td>Jul 22, 2013</td>
<td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
</tr>
<tr>
<td>2</td>
<td>Alpha project</td>
<td>Alice Jackson</td>
<td>0500 780909</td>
<td>Nec Euismod In Company</td>
<td><pie-chart data="main.PieChart.data" options="main.PieChart.options"></pie-chart></td>
<td>40%</td>
<td>Jul 16, 2013</td>
<td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
</tr>
<tr>
<td>1</td>
<td>Project <small>This is example of project</small></td>
<td>Patrick Smith</td>
<td>0800 051213</td>
<td>Inceptos Hymenaeos Ltd</td>
<td><pie-chart data="main.PieChart3.data" options="main.PieChart3.options"></pie-chart></td>
<td>20%</td>
<td>Jul 14, 2013</td>
<td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
</tr>
<tr>
<td>4</td>
<td>Gamma project</td>
<td>Anna Jordan</td>
<td>(016977) 0648</td>
<td>Tellus Ltd</td>
<td><pie-chart data="main.PieChart2.data" options="main.PieChart2.options"></pie-chart></td>
<td>18%</td>
<td>Jul 22, 2013</td>
<td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="small-chat-box ng-small-chat fadeInRight animated" ng-show="openChat">
<div class="heading" draggable="true">
<small class="chat-date pull-right">
02.19.2015
</small>
Small chat
</div>
<div class="content" chat-slim-scroll>
<div class="left">
<div class="author-name">
Monica Jackson <small class="chat-date">
10:02 am
</small>
</div>
<div class="chat-message active">
Lorem Ipsum is simply dummy text input.
</div>
</div>
<div class="right">
<div class="author-name">
Mick Smith
<small class="chat-date">
11:24 am
</small>
</div>
<div class="chat-message">
Lorem Ipsum is simpl.
</div>
</div>
<div class="left">
<div class="author-name">
Alice Novak
<small class="chat-date">
08:45 pm
</small>
</div>
<div class="chat-message active">
Check this stock char.
</div>
</div>
<div class="right">
<div class="author-name">
Anna Lamson
<small class="chat-date">
11:24 am
</small>
</div>
<div class="chat-message">
The standard chunk of Lorem Ipsum
</div>
</div>
<div class="left">
<div class="author-name">
Mick Lane
<small class="chat-date">
08:45 pm
</small>
</div>
<div class="chat-message active">
I belive that. Lorem Ipsum is simply dummy text.
</div>
</div>
</div>
<div class="form-chat">
<div class="input-group input-group-sm"><input type="text" class="form-control"> <span class="input-group-btn"> <button
class="btn btn-primary" type="button">Send
</button> </span></div>
</div>
</div>
<div id="small-chat" ng-click="openChat = !openChat">
<span class="badge badge-warning pull-right">5</span>
<a class="open-small-chat">
<i class="fa fa-comments"></i>
</a>
</div>
Christopher W. Olsen