src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/index2.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   6   <title>AdminLTE 2 | Dashboard</title>
   7   <!-- Tell the browser to be responsive to screen width -->
   8   <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
   9   <!-- Bootstrap 3.3.6 -->
  10   <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  11   <!-- Font Awesome -->
  12   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  13   <!-- Ionicons -->
  14   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
  15   <!-- jvectormap -->
  16   <link rel="stylesheet" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">
  17   <!-- Theme style -->
  18   <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
  19   <!-- AdminLTE Skins. Choose a skin from the css/skins
  20        folder instead of downloading all of them to reduce the load. -->
  21   <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
  22
  23   <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  24   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  25   <!--[if lt IE 9]>
  26   <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  27   <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  28   <![endif]-->
  29 </head>
  30 <body class="hold-transition skin-blue sidebar-mini">
  31 <div class="wrapper">
  32
  33   <header class="main-header">
  34
  35     <!-- Logo -->
  36     <a href="index2.html" class="logo">
  37       <!-- mini logo for sidebar mini 50x50 pixels -->
  38       <span class="logo-mini"><b>A</b>LT</span>
  39       <!-- logo for regular state and mobile devices -->
  40       <span class="logo-lg"><b>Admin</b>LTE</span>
  41     </a>
  42
  43     <!-- Header Navbar: style can be found in header.less -->
  44     <nav class="navbar navbar-static-top">
  45       <!-- Sidebar toggle button-->
  46       <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
  47         <span class="sr-only">Toggle navigation</span>
  48       </a>
  49       <!-- Navbar Right Menu -->
  50       <div class="navbar-custom-menu">
  51         <ul class="nav navbar-nav">
  52           <!-- Messages: style can be found in dropdown.less-->
  53           <li class="dropdown messages-menu">
  54             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  55               <i class="fa fa-envelope-o"></i>
  56               <span class="label label-success">4</span>
  57             </a>
  58             <ul class="dropdown-menu">
  59               <li class="header">You have 4 messages</li>
  60               <li>
  61                 <!-- inner menu: contains the actual data -->
  62                 <ul class="menu">
  63                   <li><!-- start message -->
  64                     <a href="#">
  65                       <div class="pull-left">
  66                         <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  67                       </div>
  68                       <h4>
  69                         Support Team
  70                         <small><i class="fa fa-clock-o"></i> 5 mins</small>
  71                       </h4>
  72                       <p>Why not buy a new awesome theme?</p>
  73                     </a>
  74                   </li>
  75                   <!-- end message -->
  76                   <li>
  77                     <a href="#">
  78                       <div class="pull-left">
  79                         <img src="dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
  80                       </div>
  81                       <h4>
  82                         AdminLTE Design Team
  83                         <small><i class="fa fa-clock-o"></i> 2 hours</small>
  84                       </h4>
  85                       <p>Why not buy a new awesome theme?</p>
  86                     </a>
  87                   </li>
  88                   <li>
  89                     <a href="#">
  90                       <div class="pull-left">
  91                         <img src="dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
  92                       </div>
  93                       <h4>
  94                         Developers
  95                         <small><i class="fa fa-clock-o"></i> Today</small>
  96                       </h4>
  97                       <p>Why not buy a new awesome theme?</p>
  98                     </a>
  99                   </li>
 100                   <li>
 101                     <a href="#">
 102                       <div class="pull-left">
 103                         <img src="dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
 104                       </div>
 105                       <h4>
 106                         Sales Department
 107                         <small><i class="fa fa-clock-o"></i> Yesterday</small>
 108                       </h4>
 109                       <p>Why not buy a new awesome theme?</p>
 110                     </a>
 111                   </li>
 112                   <li>
 113                     <a href="#">
 114                       <div class="pull-left">
 115                         <img src="dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
 116                       </div>
 117                       <h4>
 118                         Reviewers
 119                         <small><i class="fa fa-clock-o"></i> 2 days</small>
 120                       </h4>
 121                       <p>Why not buy a new awesome theme?</p>
 122                     </a>
 123                   </li>
 124                 </ul>
 125               </li>
 126               <li class="footer"><a href="#">See All Messages</a></li>
 127             </ul>
 128           </li>
 129           <!-- Notifications: style can be found in dropdown.less -->
 130           <li class="dropdown notifications-menu">
 131             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 132               <i class="fa fa-bell-o"></i>
 133               <span class="label label-warning">10</span>
 134             </a>
 135             <ul class="dropdown-menu">
 136               <li class="header">You have 10 notifications</li>
 137               <li>
 138                 <!-- inner menu: contains the actual data -->
 139                 <ul class="menu">
 140                   <li>
 141                     <a href="#">
 142                       <i class="fa fa-users text-aqua"></i> 5 new members joined today
 143                     </a>
 144                   </li>
 145                   <li>
 146                     <a href="#">
 147                       <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the
 148                       page and may cause design problems
 149                     </a>
 150                   </li>
 151                   <li>
 152                     <a href="#">
 153                       <i class="fa fa-users text-red"></i> 5 new members joined
 154                     </a>
 155                   </li>
 156                   <li>
 157                     <a href="#">
 158                       <i class="fa fa-shopping-cart text-green"></i> 25 sales made
 159                     </a>
 160                   </li>
 161                   <li>
 162                     <a href="#">
 163                       <i class="fa fa-user text-red"></i> You changed your username
 164                     </a>
 165                   </li>
 166                 </ul>
 167               </li>
 168               <li class="footer"><a href="#">View all</a></li>
 169             </ul>
 170           </li>
 171           <!-- Tasks: style can be found in dropdown.less -->
 172           <li class="dropdown tasks-menu">
 173             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 174               <i class="fa fa-flag-o"></i>
 175               <span class="label label-danger">9</span>
 176             </a>
 177             <ul class="dropdown-menu">
 178               <li class="header">You have 9 tasks</li>
 179               <li>
 180                 <!-- inner menu: contains the actual data -->
 181                 <ul class="menu">
 182                   <li><!-- Task item -->
 183                     <a href="#">
 184                       <h3>
 185                         Design some buttons
 186                         <small class="pull-right">20%</small>
 187                       </h3>
 188                       <div class="progress xs">
 189                         <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 190                           <span class="sr-only">20% Complete</span>
 191                         </div>
 192                       </div>
 193                     </a>
 194                   </li>
 195                   <!-- end task item -->
 196                   <li><!-- Task item -->
 197                     <a href="#">
 198                       <h3>
 199                         Create a nice theme
 200                         <small class="pull-right">40%</small>
 201                       </h3>
 202                       <div class="progress xs">
 203                         <div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 204                           <span class="sr-only">40% Complete</span>
 205                         </div>
 206                       </div>
 207                     </a>
 208                   </li>
 209                   <!-- end task item -->
 210                   <li><!-- Task item -->
 211                     <a href="#">
 212                       <h3>
 213                         Some task I need to do
 214                         <small class="pull-right">60%</small>
 215                       </h3>
 216                       <div class="progress xs">
 217                         <div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 218                           <span class="sr-only">60% Complete</span>
 219                         </div>
 220                       </div>
 221                     </a>
 222                   </li>
 223                   <!-- end task item -->
 224                   <li><!-- Task item -->
 225                     <a href="#">
 226                       <h3>
 227                         Make beautiful transitions
 228                         <small class="pull-right">80%</small>
 229                       </h3>
 230                       <div class="progress xs">
 231                         <div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 232                           <span class="sr-only">80% Complete</span>
 233                         </div>
 234                       </div>
 235                     </a>
 236                   </li>
 237                   <!-- end task item -->
 238                 </ul>
 239               </li>
 240               <li class="footer">
 241                 <a href="#">View all tasks</a>
 242               </li>
 243             </ul>
 244           </li>
 245           <!-- User Account: style can be found in dropdown.less -->
 246           <li class="dropdown user user-menu">
 247             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 248               <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
 249               <span class="hidden-xs">Alexander Pierce</span>
 250             </a>
 251             <ul class="dropdown-menu">
 252               <!-- User image -->
 253               <li class="user-header">
 254                 <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 255
 256                 <p>
 257                   Alexander Pierce - Web Developer
 258                   <small>Member since Nov. 2012</small>
 259                 </p>
 260               </li>
 261               <!-- Menu Body -->
 262               <li class="user-body">
 263                 <div class="row">
 264                   <div class="col-xs-4 text-center">
 265                     <a href="#">Followers</a>
 266                   </div>
 267                   <div class="col-xs-4 text-center">
 268                     <a href="#">Sales</a>
 269                   </div>
 270                   <div class="col-xs-4 text-center">
 271                     <a href="#">Friends</a>
 272                   </div>
 273                 </div>
 274                 <!-- /.row -->
 275               </li>
 276               <!-- Menu Footer-->
 277               <li class="user-footer">
 278                 <div class="pull-left">
 279                   <a href="#" class="btn btn-default btn-flat">Profile</a>
 280                 </div>
 281                 <div class="pull-right">
 282                   <a href="#" class="btn btn-default btn-flat">Sign out</a>
 283                 </div>
 284               </li>
 285             </ul>
 286           </li>
 287           <!-- Control Sidebar Toggle Button -->
 288           <li>
 289             <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
 290           </li>
 291         </ul>
 292       </div>
 293
 294     </nav>
 295   </header>
 296   <!-- Left side column. contains the logo and sidebar -->
 297   <aside class="main-sidebar">
 298     <!-- sidebar: style can be found in sidebar.less -->
 299     <section class="sidebar">
 300       <!-- Sidebar user panel -->
 301       <div class="user-panel">
 302         <div class="pull-left image">
 303           <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 304         </div>
 305         <div class="pull-left info">
 306           <p>Alexander Pierce</p>
 307           <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
 308         </div>
 309       </div>
 310       <!-- search form -->
 311       <form action="#" method="get" class="sidebar-form">
 312         <div class="input-group">
 313           <input type="text" name="q" class="form-control" placeholder="Search...">
 314               <span class="input-group-btn">
 315                 <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
 316                 </button>
 317               </span>
 318         </div>
 319       </form>
 320       <!-- /.search form -->
 321       <!-- sidebar menu: : style can be found in sidebar.less -->
 322       <ul class="sidebar-menu">
 323         <li class="header">MAIN NAVIGATION</li>
 324         <li class="active treeview">
 325           <a href="#">
 326             <i class="fa fa-dashboard"></i> <span>Dashboard</span>
 327             <span class="pull-right-container">
 328               <i class="fa fa-angle-left pull-right"></i>
 329             </span>
 330           </a>
 331           <ul class="treeview-menu">
 332             <li><a href="index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
 333             <li class="active"><a href="index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
 334           </ul>
 335         </li>
 336         <li class="treeview">
 337           <a href="#">
 338             <i class="fa fa-files-o"></i>
 339             <span>Layout Options</span>
 340             <span class="pull-right-container">
 341               <span class="label label-primary pull-right">4</span>
 342             </span>
 343           </a>
 344           <ul class="treeview-menu">
 345             <li><a href="pages/layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
 346             <li><a href="pages/layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
 347             <li><a href="pages/layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
 348             <li><a href="pages/layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
 349           </ul>
 350         </li>
 351         <li>
 352           <a href="pages/widgets.html">
 353             <i class="fa fa-th"></i> <span>Widgets</span>
 354             <span class="pull-right-container">
 355               <small class="label pull-right bg-green">new</small>
 356             </span>
 357           </a>
 358         </li>
 359         <li class="treeview">
 360           <a href="#">
 361             <i class="fa fa-pie-chart"></i>
 362             <span>Charts</span>
 363             <span class="pull-right-container">
 364               <i class="fa fa-angle-left pull-right"></i>
 365             </span>
 366           </a>
 367           <ul class="treeview-menu">
 368             <li><a href="pages/charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
 369             <li><a href="pages/charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
 370             <li><a href="pages/charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
 371             <li><a href="pages/charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
 372           </ul>
 373         </li>
 374         <li class="treeview">
 375           <a href="#">
 376             <i class="fa fa-laptop"></i>
 377             <span>UI Elements</span>
 378             <span class="pull-right-container">
 379               <i class="fa fa-angle-left pull-right"></i>
 380             </span>
 381           </a>
 382           <ul class="treeview-menu">
 383             <li><a href="pages/UI/general.html"><i class="fa fa-circle-o"></i> General</a></li>
 384             <li><a href="pages/UI/icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
 385             <li><a href="pages/UI/buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
 386             <li><a href="pages/UI/sliders.html"><i class="fa fa-circle-o"></i> Sliders</a></li>
 387             <li><a href="pages/UI/timeline.html"><i class="fa fa-circle-o"></i> Timeline</a></li>
 388             <li><a href="pages/UI/modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
 389           </ul>
 390         </li>
 391         <li class="treeview">
 392           <a href="#">
 393             <i class="fa fa-edit"></i> <span>Forms</span>
 394             <span class="pull-right-container">
 395               <i class="fa fa-angle-left pull-right"></i>
 396             </span>
 397           </a>
 398           <ul class="treeview-menu">
 399             <li><a href="pages/forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
 400             <li><a href="pages/forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
 401             <li><a href="pages/forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
 402           </ul>
 403         </li>
 404         <li class="treeview">
 405           <a href="#">
 406             <i class="fa fa-table"></i> <span>Tables</span>
 407             <span class="pull-right-container">
 408               <i class="fa fa-angle-left pull-right"></i>
 409             </span>
 410           </a>
 411           <ul class="treeview-menu">
 412             <li><a href="pages/tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li>
 413             <li><a href="pages/tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li>
 414           </ul>
 415         </li>
 416         <li>
 417           <a href="pages/calendar.html">
 418             <i class="fa fa-calendar"></i> <span>Calendar</span>
 419             <span class="pull-right-container">
 420               <small class="label pull-right bg-red">3</small>
 421               <small class="label pull-right bg-blue">17</small>
 422             </span>
 423           </a>
 424         </li>
 425         <li>
 426           <a href="pages/mailbox/mailbox.html">
 427             <i class="fa fa-envelope"></i> <span>Mailbox</span>
 428             <span class="pull-right-container">
 429               <small class="label pull-right bg-yellow">12</small>
 430               <small class="label pull-right bg-green">16</small>
 431               <small class="label pull-right bg-red">5</small>
 432             </span>
 433           </a>
 434         </li>
 435         <li class="treeview">
 436           <a href="#">
 437             <i class="fa fa-folder"></i> <span>Examples</span>
 438             <span class="pull-right-container">
 439               <i class="fa fa-angle-left pull-right"></i>
 440             </span>
 441           </a>
 442           <ul class="treeview-menu">
 443             <li><a href="pages/examples/invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
 444             <li><a href="pages/examples/profile.html"><i class="fa fa-circle-o"></i> Profile</a></li>
 445             <li><a href="pages/examples/login.html"><i class="fa fa-circle-o"></i> Login</a></li>
 446             <li><a href="pages/examples/register.html"><i class="fa fa-circle-o"></i> Register</a></li>
 447             <li><a href="pages/examples/lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
 448             <li><a href="pages/examples/404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
 449             <li><a href="pages/examples/500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
 450             <li><a href="pages/examples/blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
 451             <li><a href="pages/examples/pace.html"><i class="fa fa-circle-o"></i> Pace Page</a></li>
 452           </ul>
 453         </li>
 454         <li class="treeview">
 455           <a href="#">
 456             <i class="fa fa-share"></i> <span>Multilevel</span>
 457             <span class="pull-right-container">
 458               <i class="fa fa-angle-left pull-right"></i>
 459             </span>
 460           </a>
 461           <ul class="treeview-menu">
 462             <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
 463             <li>
 464               <a href="#"><i class="fa fa-circle-o"></i> Level One
 465                 <span class="pull-right-container">
 466                   <i class="fa fa-angle-left pull-right"></i>
 467                 </span>
 468               </a>
 469               <ul class="treeview-menu">
 470                 <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
 471                 <li>
 472                   <a href="#"><i class="fa fa-circle-o"></i> Level Two
 473                     <span class="pull-right-container">
 474                       <i class="fa fa-angle-left pull-right"></i>
 475                     </span>
 476                   </a>
 477                   <ul class="treeview-menu">
 478                     <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
 479                     <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
 480                   </ul>
 481                 </li>
 482               </ul>
 483             </li>
 484             <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
 485           </ul>
 486         </li>
 487         <li><a href="documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
 488         <li class="header">LABELS</li>
 489         <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
 490         <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
 491         <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
 492       </ul>
 493     </section>
 494     <!-- /.sidebar -->
 495   </aside>
 496
 497   <!-- Content Wrapper. Contains page content -->
 498   <div class="content-wrapper">
 499     <!-- Content Header (Page header) -->
 500     <section class="content-header">
 501       <h1>
 502         Dashboard
 503         <small>Version 2.0</small>
 504       </h1>
 505       <ol class="breadcrumb">
 506         <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
 507         <li class="active">Dashboard</li>
 508       </ol>
 509     </section>
 510
 511     <!-- Main content -->
 512     <section class="content">
 513       <!-- Info boxes -->
 514       <div class="row">
 515         <div class="col-md-3 col-sm-6 col-xs-12">
 516           <div class="info-box">
 517             <span class="info-box-icon bg-aqua"><i class="ion ion-ios-gear-outline"></i></span>
 518
 519             <div class="info-box-content">
 520               <span class="info-box-text">CPU Traffic</span>
 521               <span class="info-box-number">90<small>%</small></span>
 522             </div>
 523             <!-- /.info-box-content -->
 524           </div>
 525           <!-- /.info-box -->
 526         </div>
 527         <!-- /.col -->
 528         <div class="col-md-3 col-sm-6 col-xs-12">
 529           <div class="info-box">
 530             <span class="info-box-icon bg-red"><i class="fa fa-google-plus"></i></span>
 531
 532             <div class="info-box-content">
 533               <span class="info-box-text">Likes</span>
 534               <span class="info-box-number">41,410</span>
 535             </div>
 536             <!-- /.info-box-content -->
 537           </div>
 538           <!-- /.info-box -->
 539         </div>
 540         <!-- /.col -->
 541
 542         <!-- fix for small devices only -->
 543         <div class="clearfix visible-sm-block"></div>
 544
 545         <div class="col-md-3 col-sm-6 col-xs-12">
 546           <div class="info-box">
 547             <span class="info-box-icon bg-green"><i class="ion ion-ios-cart-outline"></i></span>
 548
 549             <div class="info-box-content">
 550               <span class="info-box-text">Sales</span>
 551               <span class="info-box-number">760</span>
 552             </div>
 553             <!-- /.info-box-content -->
 554           </div>
 555           <!-- /.info-box -->
 556         </div>
 557         <!-- /.col -->
 558         <div class="col-md-3 col-sm-6 col-xs-12">
 559           <div class="info-box">
 560             <span class="info-box-icon bg-yellow"><i class="ion ion-ios-people-outline"></i></span>
 561
 562             <div class="info-box-content">
 563               <span class="info-box-text">New Members</span>
 564               <span class="info-box-number">2,000</span>
 565             </div>
 566             <!-- /.info-box-content -->
 567           </div>
 568           <!-- /.info-box -->
 569         </div>
 570         <!-- /.col -->
 571       </div>
 572       <!-- /.row -->
 573
 574       <div class="row">
 575         <div class="col-md-12">
 576           <div class="box">
 577             <div class="box-header with-border">
 578               <h3 class="box-title">Monthly Recap Report</h3>
 579
 580               <div class="box-tools pull-right">
 581                 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
 582                 </button>
 583                 <div class="btn-group">
 584                   <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
 585                     <i class="fa fa-wrench"></i></button>
 586                   <ul class="dropdown-menu" role="menu">
 587                     <li><a href="#">Action</a></li>
 588                     <li><a href="#">Another action</a></li>
 589                     <li><a href="#">Something else here</a></li>
 590                     <li class="divider"></li>
 591                     <li><a href="#">Separated link</a></li>
 592                   </ul>
 593                 </div>
 594                 <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
 595               </div>
 596             </div>
 597             <!-- /.box-header -->
 598             <div class="box-body">
 599               <div class="row">
 600                 <div class="col-md-8">
 601                   <p class="text-center">
 602                     <strong>Sales: 1 Jan, 2014 - 30 Jul, 2014</strong>
 603                   </p>
 604
 605                   <div class="chart">
 606                     <!-- Sales Chart Canvas -->
 607                     <canvas id="salesChart" style="height: 180px;"></canvas>
 608                   </div>
 609                   <!-- /.chart-responsive -->
 610                 </div>
 611                 <!-- /.col -->
 612                 <div class="col-md-4">
 613                   <p class="text-center">
 614                     <strong>Goal Completion</strong>
 615                   </p>
 616
 617                   <div class="progress-group">
 618                     <span class="progress-text">Add Products to Cart</span>
 619                     <span class="progress-number"><b>160</b>/200</span>
 620
 621                     <div class="progress sm">
 622                       <div class="progress-bar progress-bar-aqua" style="width: 80%"></div>
 623                     </div>
 624                   </div>
 625                   <!-- /.progress-group -->
 626                   <div class="progress-group">
 627                     <span class="progress-text">Complete Purchase</span>
 628                     <span class="progress-number"><b>310</b>/400</span>
 629
 630                     <div class="progress sm">
 631                       <div class="progress-bar progress-bar-red" style="width: 80%"></div>
 632                     </div>
 633                   </div>
 634                   <!-- /.progress-group -->
 635                   <div class="progress-group">
 636                     <span class="progress-text">Visit Premium Page</span>
 637                     <span class="progress-number"><b>480</b>/800</span>
 638
 639                     <div class="progress sm">
 640                       <div class="progress-bar progress-bar-green" style="width: 80%"></div>
 641                     </div>
 642                   </div>
 643                   <!-- /.progress-group -->
 644                   <div class="progress-group">
 645                     <span class="progress-text">Send Inquiries</span>
 646                     <span class="progress-number"><b>250</b>/500</span>
 647
 648                     <div class="progress sm">
 649                       <div class="progress-bar progress-bar-yellow" style="width: 80%"></div>
 650                     </div>
 651                   </div>
 652                   <!-- /.progress-group -->
 653                 </div>
 654                 <!-- /.col -->
 655               </div>
 656               <!-- /.row -->
 657             </div>
 658             <!-- ./box-body -->
 659             <div class="box-footer">
 660               <div class="row">
 661                 <div class="col-sm-3 col-xs-6">
 662                   <div class="description-block border-right">
 663                     <span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 17%</span>
 664                     <h5 class="description-header">$35,210.43</h5>
 665                     <span class="description-text">TOTAL REVENUE</span>
 666                   </div>
 667                   <!-- /.description-block -->
 668                 </div>
 669                 <!-- /.col -->
 670                 <div class="col-sm-3 col-xs-6">
 671                   <div class="description-block border-right">
 672                     <span class="description-percentage text-yellow"><i class="fa fa-caret-left"></i> 0%</span>
 673                     <h5 class="description-header">$10,390.90</h5>
 674                     <span class="description-text">TOTAL COST</span>
 675                   </div>
 676                   <!-- /.description-block -->
 677                 </div>
 678                 <!-- /.col -->
 679                 <div class="col-sm-3 col-xs-6">
 680                   <div class="description-block border-right">
 681                     <span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 20%</span>
 682                     <h5 class="description-header">$24,813.53</h5>
 683                     <span class="description-text">TOTAL PROFIT</span>
 684                   </div>
 685                   <!-- /.description-block -->
 686                 </div>
 687                 <!-- /.col -->
 688                 <div class="col-sm-3 col-xs-6">
 689                   <div class="description-block">
 690                     <span class="description-percentage text-red"><i class="fa fa-caret-down"></i> 18%</span>
 691                     <h5 class="description-header">1200</h5>
 692                     <span class="description-text">GOAL COMPLETIONS</span>
 693                   </div>
 694                   <!-- /.description-block -->
 695                 </div>
 696               </div>
 697               <!-- /.row -->
 698             </div>
 699             <!-- /.box-footer -->
 700           </div>
 701           <!-- /.box -->
 702         </div>
 703         <!-- /.col -->
 704       </div>
 705       <!-- /.row -->
 706
 707       <!-- Main row -->
 708       <div class="row">
 709         <!-- Left col -->
 710         <div class="col-md-8">
 711           <!-- MAP & BOX PANE -->
 712           <div class="box box-success">
 713             <div class="box-header with-border">
 714               <h3 class="box-title">Visitors Report</h3>
 715
 716               <div class="box-tools pull-right">
 717                 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
 718                 </button>
 719                 <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
 720               </div>
 721             </div>
 722             <!-- /.box-header -->
 723             <div class="box-body no-padding">
 724               <div class="row">
 725                 <div class="col-md-9 col-sm-8">
 726                   <div class="pad">
 727                     <!-- Map will be created here -->
 728                     <div id="world-map-markers" style="height: 325px;"></div>
 729                   </div>
 730                 </div>
 731                 <!-- /.col -->
 732                 <div class="col-md-3 col-sm-4">
 733                   <div class="pad box-pane-right bg-green" style="min-height: 280px">
 734                     <div class="description-block margin-bottom">
 735                       <div class="sparkbar pad" data-color="#fff">90,70,90,70,75,80,70</div>
 736                       <h5 class="description-header">8390</h5>
 737                       <span class="description-text">Visits</span>
 738                     </div>
 739                     <!-- /.description-block -->
 740                     <div class="description-block margin-bottom">
 741                       <div class="sparkbar pad" data-color="#fff">90,50,90,70,61,83,63</div>
 742                       <h5 class="description-header">30%</h5>
 743                       <span class="description-text">Referrals</span>
 744                     </div>
 745                     <!-- /.description-block -->
 746                     <div class="description-block">
 747                       <div class="sparkbar pad" data-color="#fff">90,50,90,70,61,83,63</div>
 748                       <h5 class="description-header">70%</h5>
 749                       <span class="description-text">Organic</span>
 750                     </div>
 751                     <!-- /.description-block -->
 752                   </div>
 753                 </div>
 754                 <!-- /.col -->
 755               </div>
 756               <!-- /.row -->
 757             </div>
 758             <!-- /.box-body -->
 759           </div>
 760           <!-- /.box -->
 761           <div class="row">
 762             <div class="col-md-6">
 763               <!-- DIRECT CHAT -->
 764               <div class="box box-warning direct-chat direct-chat-warning">
 765                 <div class="box-header with-border">
 766                   <h3 class="box-title">Direct Chat</h3>
 767
 768                   <div class="box-tools pull-right">
 769                     <span data-toggle="tooltip" title="3 New Messages" class="badge bg-yellow">3</span>
 770                     <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
 771                     </button>
 772                     <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle">
 773                       <i class="fa fa-comments"></i></button>
 774                     <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
 775                     </button>
 776                   </div>
 777                 </div>
 778                 <!-- /.box-header -->
 779                 <div class="box-body">
 780                   <!-- Conversations are loaded here -->
 781                   <div class="direct-chat-messages">
 782                     <!-- Message. Default to the left -->
 783                     <div class="direct-chat-msg">
 784                       <div class="direct-chat-info clearfix">
 785                         <span class="direct-chat-name pull-left">Alexander Pierce</span>
 786                         <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
 787                       </div>
 788                       <!-- /.direct-chat-info -->
 789                       <img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
 790                       <div class="direct-chat-text">
 791                         Is this template really for free? That's unbelievable!
 792                       </div>
 793                       <!-- /.direct-chat-text -->
 794                     </div>
 795                     <!-- /.direct-chat-msg -->
 796
 797                     <!-- Message to the right -->
 798                     <div class="direct-chat-msg right">
 799                       <div class="direct-chat-info clearfix">
 800                         <span class="direct-chat-name pull-right">Sarah Bullock</span>
 801                         <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
 802                       </div>
 803                       <!-- /.direct-chat-info -->
 804                       <img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
 805                       <div class="direct-chat-text">
 806                         You better believe it!
 807                       </div>
 808                       <!-- /.direct-chat-text -->
 809                     </div>
 810                     <!-- /.direct-chat-msg -->
 811
 812                     <!-- Message. Default to the left -->
 813                     <div class="direct-chat-msg">
 814                       <div class="direct-chat-info clearfix">
 815                         <span class="direct-chat-name pull-left">Alexander Pierce</span>
 816                         <span class="direct-chat-timestamp pull-right">23 Jan 5:37 pm</span>
 817                       </div>
 818                       <!-- /.direct-chat-info -->
 819                       <img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
 820                       <div class="direct-chat-text">
 821                         Working with AdminLTE on a great new app! Wanna join?
 822                       </div>
 823                       <!-- /.direct-chat-text -->
 824                     </div>
 825                     <!-- /.direct-chat-msg -->
 826
 827                     <!-- Message to the right -->
 828                     <div class="direct-chat-msg right">
 829                       <div class="direct-chat-info clearfix">
 830                         <span class="direct-chat-name pull-right">Sarah Bullock</span>
 831                         <span class="direct-chat-timestamp pull-left">23 Jan 6:10 pm</span>
 832                       </div>
 833                       <!-- /.direct-chat-info -->
 834                       <img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
 835                       <div class="direct-chat-text">
 836                         I would love to.
 837                       </div>
 838                       <!-- /.direct-chat-text -->
 839                     </div>
 840                     <!-- /.direct-chat-msg -->
 841
 842                   </div>
 843                   <!--/.direct-chat-messages-->
 844
 845                   <!-- Contacts are loaded here -->
 846                   <div class="direct-chat-contacts">
 847                     <ul class="contacts-list">
 848                       <li>
 849                         <a href="#">
 850                           <img class="contacts-list-img" src="dist/img/user1-128x128.jpg" alt="User Image">
 851
 852                           <div class="contacts-list-info">
 853                                 <span class="contacts-list-name">
 854                                   Count Dracula
 855                                   <small class="contacts-list-date pull-right">2/28/2015</small>
 856                                 </span>
 857                             <span class="contacts-list-msg">How have you been? I was...</span>
 858                           </div>
 859                           <!-- /.contacts-list-info -->
 860                         </a>
 861                       </li>
 862                       <!-- End Contact Item -->
 863                       <li>
 864                         <a href="#">
 865                           <img class="contacts-list-img" src="dist/img/user7-128x128.jpg" alt="User Image">
 866
 867                           <div class="contacts-list-info">
 868                                 <span class="contacts-list-name">
 869                                   Sarah Doe
 870                                   <small class="contacts-list-date pull-right">2/23/2015</small>
 871                                 </span>
 872                             <span class="contacts-list-msg">I will be waiting for...</span>
 873                           </div>
 874                           <!-- /.contacts-list-info -->
 875                         </a>
 876                       </li>
 877                       <!-- End Contact Item -->
 878                       <li>
 879                         <a href="#">
 880                           <img class="contacts-list-img" src="dist/img/user3-128x128.jpg" alt="User Image">
 881
 882                           <div class="contacts-list-info">
 883                                 <span class="contacts-list-name">
 884                                   Nadia Jolie
 885                                   <small class="contacts-list-date pull-right">2/20/2015</small>
 886                                 </span>
 887                             <span class="contacts-list-msg">I'll call you back at...</span>
 888                           </div>
 889                           <!-- /.contacts-list-info -->
 890                         </a>
 891                       </li>
 892                       <!-- End Contact Item -->
 893                       <li>
 894                         <a href="#">
 895                           <img class="contacts-list-img" src="dist/img/user5-128x128.jpg" alt="User Image">
 896
 897                           <div class="contacts-list-info">
 898                                 <span class="contacts-list-name">
 899                                   Nora S. Vans
 900                                   <small class="contacts-list-date pull-right">2/10/2015</small>
 901                                 </span>
 902                             <span class="contacts-list-msg">Where is your new...</span>
 903                           </div>
 904                           <!-- /.contacts-list-info -->
 905                         </a>
 906                       </li>
 907                       <!-- End Contact Item -->
 908                       <li>
 909                         <a href="#">
 910                           <img class="contacts-list-img" src="dist/img/user6-128x128.jpg" alt="User Image">
 911
 912                           <div class="contacts-list-info">
 913                                 <span class="contacts-list-name">
 914                                   John K.
 915                                   <small class="contacts-list-date pull-right">1/27/2015</small>
 916                                 </span>
 917                             <span class="contacts-list-msg">Can I take a look at...</span>
 918                           </div>
 919                           <!-- /.contacts-list-info -->
 920                         </a>
 921                       </li>
 922                       <!-- End Contact Item -->
 923                       <li>
 924                         <a href="#">
 925                           <img class="contacts-list-img" src="dist/img/user8-128x128.jpg" alt="User Image">
 926
 927                           <div class="contacts-list-info">
 928                                 <span class="contacts-list-name">
 929                                   Kenneth M.
 930                                   <small class="contacts-list-date pull-right">1/4/2015</small>
 931                                 </span>
 932                             <span class="contacts-list-msg">Never mind I found...</span>
 933                           </div>
 934                           <!-- /.contacts-list-info -->
 935                         </a>
 936                       </li>
 937                       <!-- End Contact Item -->
 938                     </ul>
 939                     <!-- /.contatcts-list -->
 940                   </div>
 941                   <!-- /.direct-chat-pane -->
 942                 </div>
 943                 <!-- /.box-body -->
 944                 <div class="box-footer">
 945                   <form action="#" method="post">
 946                     <div class="input-group">
 947                       <input type="text" name="message" placeholder="Type Message ..." class="form-control">
 948                           <span class="input-group-btn">
 949                             <button type="button" class="btn btn-warning btn-flat">Send</button>
 950                           </span>
 951                     </div>
 952                   </form>
 953                 </div>
 954                 <!-- /.box-footer-->
 955               </div>
 956               <!--/.direct-chat -->
 957             </div>
 958             <!-- /.col -->
 959
 960             <div class="col-md-6">
 961               <!-- USERS LIST -->
 962               <div class="box box-danger">
 963                 <div class="box-header with-border">
 964                   <h3 class="box-title">Latest Members</h3>
 965
 966                   <div class="box-tools pull-right">
 967                     <span class="label label-danger">8 New Members</span>
 968                     <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
 969                     </button>
 970                     <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
 971                     </button>
 972                   </div>
 973                 </div>
 974                 <!-- /.box-header -->
 975                 <div class="box-body no-padding">
 976                   <ul class="users-list clearfix">
 977                     <li>
 978                       <img src="dist/img/user1-128x128.jpg" alt="User Image">
 979                       <a class="users-list-name" href="#">Alexander Pierce</a>
 980                       <span class="users-list-date">Today</span>
 981                     </li>
 982                     <li>
 983                       <img src="dist/img/user8-128x128.jpg" alt="User Image">
 984                       <a class="users-list-name" href="#">Norman</a>
 985                       <span class="users-list-date">Yesterday</span>
 986                     </li>
 987                     <li>
 988                       <img src="dist/img/user7-128x128.jpg" alt="User Image">
 989                       <a class="users-list-name" href="#">Jane</a>
 990                       <span class="users-list-date">12 Jan</span>
 991                     </li>
 992                     <li>
 993                       <img src="dist/img/user6-128x128.jpg" alt="User Image">
 994                       <a class="users-list-name" href="#">John</a>
 995                       <span class="users-list-date">12 Jan</span>
 996                     </li>
 997                     <li>
 998                       <img src="dist/img/user2-160x160.jpg" alt="User Image">
 999                       <a class="users-list-name" href="#">Alexander</a>
1000                       <span class="users-list-date">13 Jan</span>
1001                     </li>
1002                     <li>
1003                       <img src="dist/img/user5-128x128.jpg" alt="User Image">
1004                       <a class="users-list-name" href="#">Sarah</a>
1005                       <span class="users-list-date">14 Jan</span>
1006                     </li>
1007                     <li>
1008                       <img src="dist/img/user4-128x128.jpg" alt="User Image">
1009                       <a class="users-list-name" href="#">Nora</a>
1010                       <span class="users-list-date">15 Jan</span>
1011                     </li>
1012                     <li>
1013                       <img src="dist/img/user3-128x128.jpg" alt="User Image">
1014                       <a class="users-list-name" href="#">Nadia</a>
1015                       <span class="users-list-date">15 Jan</span>
1016                     </li>
1017                   </ul>
1018                   <!-- /.users-list -->
1019                 </div>
1020                 <!-- /.box-body -->
1021                 <div class="box-footer text-center">
1022                   <a href="javascript:void(0)" class="uppercase">View All Users</a>
1023                 </div>
1024                 <!-- /.box-footer -->
1025               </div>
1026               <!--/.box -->
1027             </div>
1028             <!-- /.col -->
1029           </div>
1030           <!-- /.row -->
1031
1032           <!-- TABLE: LATEST ORDERS -->
1033           <div class="box box-info">
1034             <div class="box-header with-border">
1035               <h3 class="box-title">Latest Orders</h3>
1036
1037               <div class="box-tools pull-right">
1038                 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
1039                 </button>
1040                 <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
1041               </div>
1042             </div>
1043             <!-- /.box-header -->
1044             <div class="box-body">
1045               <div class="table-responsive">
1046                 <table class="table no-margin">
1047                   <thead>
1048                   <tr>
1049                     <th>Order ID</th>
1050                     <th>Item</th>
1051                     <th>Status</th>
1052                     <th>Popularity</th>
1053                   </tr>
1054                   </thead>
1055                   <tbody>
1056                   <tr>
1057                     <td><a href="pages/examples/invoice.html">OR9842</a></td>
1058                     <td>Call of Duty IV</td>
1059                     <td><span class="label label-success">Shipped</span></td>
1060                     <td>
1061                       <div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div>
1062                     </td>
1063                   </tr>
1064                   <tr>
1065                     <td><a href="pages/examples/invoice.html">OR1848</a></td>
1066                     <td>Samsung Smart TV</td>
1067                     <td><span class="label label-warning">Pending</span></td>
1068                     <td>
1069                       <div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div>
1070                     </td>
1071                   </tr>
1072                   <tr>
1073                     <td><a href="pages/examples/invoice.html">OR7429</a></td>
1074                     <td>iPhone 6 Plus</td>
1075                     <td><span class="label label-danger">Delivered</span></td>
1076                     <td>
1077                       <div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div>
1078                     </td>
1079                   </tr>
1080                   <tr>
1081                     <td><a href="pages/examples/invoice.html">OR7429</a></td>
1082                     <td>Samsung Smart TV</td>
1083                     <td><span class="label label-info">Processing</span></td>
1084                     <td>
1085                       <div class="sparkbar" data-color="#00c0ef" data-height="20">90,80,-90,70,-61,83,63</div>
1086                     </td>
1087                   </tr>
1088                   <tr>
1089                     <td><a href="pages/examples/invoice.html">OR1848</a></td>
1090                     <td>Samsung Smart TV</td>
1091                     <td><span class="label label-warning">Pending</span></td>
1092                     <td>
1093                       <div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div>
1094                     </td>
1095                   </tr>
1096                   <tr>
1097                     <td><a href="pages/examples/invoice.html">OR7429</a></td>
1098                     <td>iPhone 6 Plus</td>
1099                     <td><span class="label label-danger">Delivered</span></td>
1100                     <td>
1101                       <div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div>
1102                     </td>
1103                   </tr>
1104                   <tr>
1105                     <td><a href="pages/examples/invoice.html">OR9842</a></td>
1106                     <td>Call of Duty IV</td>
1107                     <td><span class="label label-success">Shipped</span></td>
1108                     <td>
1109                       <div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div>
1110                     </td>
1111                   </tr>
1112                   </tbody>
1113                 </table>
1114               </div>
1115               <!-- /.table-responsive -->
1116             </div>
1117             <!-- /.box-body -->
1118             <div class="box-footer clearfix">
1119               <a href="javascript:void(0)" class="btn btn-sm btn-info btn-flat pull-left">Place New Order</a>
1120               <a href="javascript:void(0)" class="btn btn-sm btn-default btn-flat pull-right">View All Orders</a>
1121             </div>
1122             <!-- /.box-footer -->
1123           </div>
1124           <!-- /.box -->
1125         </div>
1126         <!-- /.col -->
1127
1128         <div class="col-md-4">
1129           <!-- Info Boxes Style 2 -->
1130           <div class="info-box bg-yellow">
1131             <span class="info-box-icon"><i class="ion ion-ios-pricetag-outline"></i></span>
1132
1133             <div class="info-box-content">
1134               <span class="info-box-text">Inventory</span>
1135               <span class="info-box-number">5,200</span>
1136
1137               <div class="progress">
1138                 <div class="progress-bar" style="width: 50%"></div>
1139               </div>
1140                   <span class="progress-description">
1141                     50% Increase in 30 Days
1142                   </span>
1143             </div>
1144             <!-- /.info-box-content -->
1145           </div>
1146           <!-- /.info-box -->
1147           <div class="info-box bg-green">
1148             <span class="info-box-icon"><i class="ion ion-ios-heart-outline"></i></span>
1149
1150             <div class="info-box-content">
1151               <span class="info-box-text">Mentions</span>
1152               <span class="info-box-number">92,050</span>
1153
1154               <div class="progress">
1155                 <div class="progress-bar" style="width: 20%"></div>
1156               </div>
1157                   <span class="progress-description">
1158                     20% Increase in 30 Days
1159                   </span>
1160             </div>
1161             <!-- /.info-box-content -->
1162           </div>
1163           <!-- /.info-box -->
1164           <div class="info-box bg-red">
1165             <span class="info-box-icon"><i class="ion ion-ios-cloud-download-outline"></i></span>
1166
1167             <div class="info-box-content">
1168               <span class="info-box-text">Downloads</span>
1169               <span class="info-box-number">114,381</span>
1170
1171               <div class="progress">
1172                 <div class="progress-bar" style="width: 70%"></div>
1173               </div>
1174                   <span class="progress-description">
1175                     70% Increase in 30 Days
1176                   </span>
1177             </div>
1178             <!-- /.info-box-content -->
1179           </div>
1180           <!-- /.info-box -->
1181           <div class="info-box bg-aqua">
1182             <span class="info-box-icon"><i class="ion-ios-chatbubble-outline"></i></span>
1183
1184             <div class="info-box-content">
1185               <span class="info-box-text">Direct Messages</span>
1186               <span class="info-box-number">163,921</span>
1187
1188               <div class="progress">
1189                 <div class="progress-bar" style="width: 40%"></div>
1190               </div>
1191                   <span class="progress-description">
1192                     40% Increase in 30 Days
1193                   </span>
1194             </div>
1195             <!-- /.info-box-content -->
1196           </div>
1197           <!-- /.info-box -->
1198
1199           <div class="box box-default">
1200             <div class="box-header with-border">
1201               <h3 class="box-title">Browser Usage</h3>
1202
1203               <div class="box-tools pull-right">
1204                 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
1205                 </button>
1206                 <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
1207               </div>
1208             </div>
1209             <!-- /.box-header -->
1210             <div class="box-body">
1211               <div class="row">
1212                 <div class="col-md-8">
1213                   <div class="chart-responsive">
1214                     <canvas id="pieChart" height="150"></canvas>
1215                   </div>
1216                   <!-- ./chart-responsive -->
1217                 </div>
1218                 <!-- /.col -->
1219                 <div class="col-md-4">
1220                   <ul class="chart-legend clearfix">
1221                     <li><i class="fa fa-circle-o text-red"></i> Chrome</li>
1222                     <li><i class="fa fa-circle-o text-green"></i> IE</li>
1223                     <li><i class="fa fa-circle-o text-yellow"></i> FireFox</li>
1224                     <li><i class="fa fa-circle-o text-aqua"></i> Safari</li>
1225                     <li><i class="fa fa-circle-o text-light-blue"></i> Opera</li>
1226                     <li><i class="fa fa-circle-o text-gray"></i> Navigator</li>
1227                   </ul>
1228                 </div>
1229                 <!-- /.col -->
1230               </div>
1231               <!-- /.row -->
1232             </div>
1233             <!-- /.box-body -->
1234             <div class="box-footer no-padding">
1235               <ul class="nav nav-pills nav-stacked">
1236                 <li><a href="#">United States of America
1237                   <span class="pull-right text-red"><i class="fa fa-angle-down"></i> 12%</span></a></li>
1238                 <li><a href="#">India <span class="pull-right text-green"><i class="fa fa-angle-up"></i> 4%</span></a>
1239                 </li>
1240                 <li><a href="#">China
1241                   <span class="pull-right text-yellow"><i class="fa fa-angle-left"></i> 0%</span></a></li>
1242               </ul>
1243             </div>
1244             <!-- /.footer -->
1245           </div>
1246           <!-- /.box -->
1247
1248           <!-- PRODUCT LIST -->
1249           <div class="box box-primary">
1250             <div class="box-header with-border">
1251               <h3 class="box-title">Recently Added Products</h3>
1252
1253               <div class="box-tools pull-right">
1254                 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
1255                 </button>
1256                 <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
1257               </div>
1258             </div>
1259             <!-- /.box-header -->
1260             <div class="box-body">
1261               <ul class="products-list product-list-in-box">
1262                 <li class="item">
1263                   <div class="product-img">
1264                     <img src="dist/img/default-50x50.gif" alt="Product Image">
1265                   </div>
1266                   <div class="product-info">
1267                     <a href="javascript:void(0)" class="product-title">Samsung TV
1268                       <span class="label label-warning pull-right">$1800</span></a>
1269                         <span class="product-description">
1270                           Samsung 32" 1080p 60Hz LED Smart HDTV.
1271                         </span>
1272                   </div>
1273                 </li>
1274                 <!-- /.item -->
1275                 <li class="item">
1276                   <div class="product-img">
1277                     <img src="dist/img/default-50x50.gif" alt="Product Image">
1278                   </div>
1279                   <div class="product-info">
1280                     <a href="javascript:void(0)" class="product-title">Bicycle
1281                       <span class="label label-info pull-right">$700</span></a>
1282                         <span class="product-description">
1283                           26" Mongoose Dolomite Men's 7-speed, Navy Blue.
1284                         </span>
1285                   </div>
1286                 </li>
1287                 <!-- /.item -->
1288                 <li class="item">
1289                   <div class="product-img">
1290                     <img src="dist/img/default-50x50.gif" alt="Product Image">
1291                   </div>
1292                   <div class="product-info">
1293                     <a href="javascript:void(0)" class="product-title">Xbox One <span class="label label-danger pull-right">$350</span></a>
1294                         <span class="product-description">
1295                           Xbox One Console Bundle with Halo Master Chief Collection.
1296                         </span>
1297                   </div>
1298                 </li>
1299                 <!-- /.item -->
1300                 <li class="item">
1301                   <div class="product-img">
1302                     <img src="dist/img/default-50x50.gif" alt="Product Image">
1303                   </div>
1304                   <div class="product-info">
1305                     <a href="javascript:void(0)" class="product-title">PlayStation 4
1306                       <span class="label label-success pull-right">$399</span></a>
1307                         <span class="product-description">
1308                           PlayStation 4 500GB Console (PS4)
1309                         </span>
1310                   </div>
1311                 </li>
1312                 <!-- /.item -->
1313               </ul>
1314             </div>
1315             <!-- /.box-body -->
1316             <div class="box-footer text-center">
1317               <a href="javascript:void(0)" class="uppercase">View All Products</a>
1318             </div>
1319             <!-- /.box-footer -->
1320           </div>
1321           <!-- /.box -->
1322         </div>
1323         <!-- /.col -->
1324       </div>
1325       <!-- /.row -->
1326     </section>
1327     <!-- /.content -->
1328   </div>
1329   <!-- /.content-wrapper -->
1330
1331   <footer class="main-footer">
1332     <div class="pull-right hidden-xs">
1333       <b>Version</b> 2.3.7
1334     </div>
1335     <strong>Copyright &copy; 2014-2016 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights
1336     reserved.
1337   </footer>
1338
1339   <!-- Control Sidebar -->
1340   <aside class="control-sidebar control-sidebar-dark">
1341     <!-- Create the tabs -->
1342     <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
1343       <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
1344       <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
1345     </ul>
1346     <!-- Tab panes -->
1347     <div class="tab-content">
1348       <!-- Home tab content -->
1349       <div class="tab-pane" id="control-sidebar-home-tab">
1350         <h3 class="control-sidebar-heading">Recent Activity</h3>
1351         <ul class="control-sidebar-menu">
1352           <li>
1353             <a href="javascript:void(0)">
1354               <i class="menu-icon fa fa-birthday-cake bg-red"></i>
1355
1356               <div class="menu-info">
1357                 <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
1358
1359                 <p>Will be 23 on April 24th</p>
1360               </div>
1361             </a>
1362           </li>
1363           <li>
1364             <a href="javascript:void(0)">
1365               <i class="menu-icon fa fa-user bg-yellow"></i>
1366
1367               <div class="menu-info">
1368                 <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
1369
1370                 <p>New phone +1(800)555-1234</p>
1371               </div>
1372             </a>
1373           </li>
1374           <li>
1375             <a href="javascript:void(0)">
1376               <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
1377
1378               <div class="menu-info">
1379                 <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
1380
1381                 <p>nora@example.com</p>
1382               </div>
1383             </a>
1384           </li>
1385           <li>
1386             <a href="javascript:void(0)">
1387               <i class="menu-icon fa fa-file-code-o bg-green"></i>
1388
1389               <div class="menu-info">
1390                 <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
1391
1392                 <p>Execution time 5 seconds</p>
1393               </div>
1394             </a>
1395           </li>
1396         </ul>
1397         <!-- /.control-sidebar-menu -->
1398
1399         <h3 class="control-sidebar-heading">Tasks Progress</h3>
1400         <ul class="control-sidebar-menu">
1401           <li>
1402             <a href="javascript:void(0)">
1403               <h4 class="control-sidebar-subheading">
1404                 Custom Template Design
1405                 <span class="label label-danger pull-right">70%</span>
1406               </h4>
1407
1408               <div class="progress progress-xxs">
1409                 <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
1410               </div>
1411             </a>
1412           </li>
1413           <li>
1414             <a href="javascript:void(0)">
1415               <h4 class="control-sidebar-subheading">
1416                 Update Resume
1417                 <span class="label label-success pull-right">95%</span>
1418               </h4>
1419
1420               <div class="progress progress-xxs">
1421                 <div class="progress-bar progress-bar-success" style="width: 95%"></div>
1422               </div>
1423             </a>
1424           </li>
1425           <li>
1426             <a href="javascript:void(0)">
1427               <h4 class="control-sidebar-subheading">
1428                 Laravel Integration
1429                 <span class="label label-warning pull-right">50%</span>
1430               </h4>
1431
1432               <div class="progress progress-xxs">
1433                 <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
1434               </div>
1435             </a>
1436           </li>
1437           <li>
1438             <a href="javascript:void(0)">
1439               <h4 class="control-sidebar-subheading">
1440                 Back End Framework
1441                 <span class="label label-primary pull-right">68%</span>
1442               </h4>
1443
1444               <div class="progress progress-xxs">
1445                 <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
1446               </div>
1447             </a>
1448           </li>
1449         </ul>
1450         <!-- /.control-sidebar-menu -->
1451
1452       </div>
1453       <!-- /.tab-pane -->
1454
1455       <!-- Settings tab content -->
1456       <div class="tab-pane" id="control-sidebar-settings-tab">
1457         <form method="post">
1458           <h3 class="control-sidebar-heading">General Settings</h3>
1459
1460           <div class="form-group">
1461             <label class="control-sidebar-subheading">
1462               Report panel usage
1463               <input type="checkbox" class="pull-right" checked>
1464             </label>
1465
1466             <p>
1467               Some information about this general settings option
1468             </p>
1469           </div>
1470           <!-- /.form-group -->
1471
1472           <div class="form-group">
1473             <label class="control-sidebar-subheading">
1474               Allow mail redirect
1475               <input type="checkbox" class="pull-right" checked>
1476             </label>
1477
1478             <p>
1479               Other sets of options are available
1480             </p>
1481           </div>
1482           <!-- /.form-group -->
1483
1484           <div class="form-group">
1485             <label class="control-sidebar-subheading">
1486               Expose author name in posts
1487               <input type="checkbox" class="pull-right" checked>
1488             </label>
1489
1490             <p>
1491               Allow the user to show his name in blog posts
1492             </p>
1493           </div>
1494           <!-- /.form-group -->
1495
1496           <h3 class="control-sidebar-heading">Chat Settings</h3>
1497
1498           <div class="form-group">
1499             <label class="control-sidebar-subheading">
1500               Show me as online
1501               <input type="checkbox" class="pull-right" checked>
1502             </label>
1503           </div>
1504           <!-- /.form-group -->
1505
1506           <div class="form-group">
1507             <label class="control-sidebar-subheading">
1508               Turn off notifications
1509               <input type="checkbox" class="pull-right">
1510             </label>
1511           </div>
1512           <!-- /.form-group -->
1513
1514           <div class="form-group">
1515             <label class="control-sidebar-subheading">
1516               Delete chat history
1517               <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
1518             </label>
1519           </div>
1520           <!-- /.form-group -->
1521         </form>
1522       </div>
1523       <!-- /.tab-pane -->
1524     </div>
1525   </aside>
1526   <!-- /.control-sidebar -->
1527   <!-- Add the sidebar's background. This div must be placed
1528        immediately after the control sidebar -->
1529   <div class="control-sidebar-bg"></div>
1530
1531 </div>
1532 <!-- ./wrapper -->
1533
1534 <!-- jQuery 2.2.3 -->
1535 <script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
1536 <!-- Bootstrap 3.3.6 -->
1537 <script src="bootstrap/js/bootstrap.min.js"></script>
1538 <!-- FastClick -->
1539 <script src="plugins/fastclick/fastclick.js"></script>
1540 <!-- AdminLTE App -->
1541 <script src="dist/js/app.min.js"></script>
1542 <!-- Sparkline -->
1543 <script src="plugins/sparkline/jquery.sparkline.min.js"></script>
1544 <!-- jvectormap -->
1545 <script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
1546 <script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
1547 <!-- SlimScroll 1.3.0 -->
1548 <script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
1549 <!-- ChartJS 1.0.1 -->
1550 <script src="plugins/chartjs/Chart.min.js"></script>
1551 <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
1552 <script src="dist/js/pages/dashboard2.js"></script>
1553 <!-- AdminLTE for demo purposes -->
1554 <script src="dist/js/demo.js"></script>
1555 </body>
1556 </html>