src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/pages/widgets.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 | Widgets</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   <!-- Theme style -->
  16   <link rel="stylesheet" href="../dist/css/AdminLTE.min.css">
  17   <!-- AdminLTE Skins. Choose a skin from the css/skins
  18        folder instead of downloading all of them to reduce the load. -->
  19   <link rel="stylesheet" href="../dist/css/skins/_all-skins.min.css">
  20
  21   <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  22   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  23   <!--[if lt IE 9]>
  24   <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  25   <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  26   <![endif]-->
  27 </head>
  28 <body class="hold-transition skin-blue sidebar-mini">
  29 <div class="wrapper">
  30
  31   <header class="main-header">
  32     <!-- Logo -->
  33     <a href="../index2.html" class="logo">
  34       <!-- mini logo for sidebar mini 50x50 pixels -->
  35       <span class="logo-mini"><b>A</b>LT</span>
  36       <!-- logo for regular state and mobile devices -->
  37       <span class="logo-lg"><b>Admin</b>LTE</span>
  38     </a>
  39     <!-- Header Navbar: style can be found in header.less -->
  40     <nav class="navbar navbar-static-top">
  41       <!-- Sidebar toggle button-->
  42       <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
  43         <span class="sr-only">Toggle navigation</span>
  44         <span class="icon-bar"></span>
  45         <span class="icon-bar"></span>
  46         <span class="icon-bar"></span>
  47       </a>
  48
  49       <div class="navbar-custom-menu">
  50         <ul class="nav navbar-nav">
  51           <!-- Messages: style can be found in dropdown.less-->
  52           <li class="dropdown messages-menu">
  53             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  54               <i class="fa fa-envelope-o"></i>
  55               <span class="label label-success">4</span>
  56             </a>
  57             <ul class="dropdown-menu">
  58               <li class="header">You have 4 messages</li>
  59               <li>
  60                 <!-- inner menu: contains the actual data -->
  61                 <ul class="menu">
  62                   <li><!-- start message -->
  63                     <a href="#">
  64                       <div class="pull-left">
  65                         <img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  66                       </div>
  67                       <h4>
  68                         Support Team
  69                         <small><i class="fa fa-clock-o"></i> 5 mins</small>
  70                       </h4>
  71                       <p>Why not buy a new awesome theme?</p>
  72                     </a>
  73                   </li>
  74                   <!-- end message -->
  75                   <li>
  76                     <a href="#">
  77                       <div class="pull-left">
  78                         <img src="../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
  79                       </div>
  80                       <h4>
  81                         AdminLTE Design Team
  82                         <small><i class="fa fa-clock-o"></i> 2 hours</small>
  83                       </h4>
  84                       <p>Why not buy a new awesome theme?</p>
  85                     </a>
  86                   </li>
  87                   <li>
  88                     <a href="#">
  89                       <div class="pull-left">
  90                         <img src="../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
  91                       </div>
  92                       <h4>
  93                         Developers
  94                         <small><i class="fa fa-clock-o"></i> Today</small>
  95                       </h4>
  96                       <p>Why not buy a new awesome theme?</p>
  97                     </a>
  98                   </li>
  99                   <li>
 100                     <a href="#">
 101                       <div class="pull-left">
 102                         <img src="../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
 103                       </div>
 104                       <h4>
 105                         Sales Department
 106                         <small><i class="fa fa-clock-o"></i> Yesterday</small>
 107                       </h4>
 108                       <p>Why not buy a new awesome theme?</p>
 109                     </a>
 110                   </li>
 111                   <li>
 112                     <a href="#">
 113                       <div class="pull-left">
 114                         <img src="../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
 115                       </div>
 116                       <h4>
 117                         Reviewers
 118                         <small><i class="fa fa-clock-o"></i> 2 days</small>
 119                       </h4>
 120                       <p>Why not buy a new awesome theme?</p>
 121                     </a>
 122                   </li>
 123                 </ul>
 124               </li>
 125               <li class="footer"><a href="#">See All Messages</a></li>
 126             </ul>
 127           </li>
 128           <!-- Notifications: style can be found in dropdown.less -->
 129           <li class="dropdown notifications-menu">
 130             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 131               <i class="fa fa-bell-o"></i>
 132               <span class="label label-warning">10</span>
 133             </a>
 134             <ul class="dropdown-menu">
 135               <li class="header">You have 10 notifications</li>
 136               <li>
 137                 <!-- inner menu: contains the actual data -->
 138                 <ul class="menu">
 139                   <li>
 140                     <a href="#">
 141                       <i class="fa fa-users text-aqua"></i> 5 new members joined today
 142                     </a>
 143                   </li>
 144                   <li>
 145                     <a href="#">
 146                       <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the
 147                       page and may cause design problems
 148                     </a>
 149                   </li>
 150                   <li>
 151                     <a href="#">
 152                       <i class="fa fa-users text-red"></i> 5 new members joined
 153                     </a>
 154                   </li>
 155                   <li>
 156                     <a href="#">
 157                       <i class="fa fa-shopping-cart text-green"></i> 25 sales made
 158                     </a>
 159                   </li>
 160                   <li>
 161                     <a href="#">
 162                       <i class="fa fa-user text-light-blue"></i> You changed your username
 163                     </a>
 164                   </li>
 165                 </ul>
 166               </li>
 167               <li class="footer"><a href="#">View all</a></li>
 168             </ul>
 169           </li>
 170           <!-- Tasks: style can be found in dropdown.less -->
 171           <li class="dropdown tasks-menu">
 172             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 173               <i class="fa fa-flag-o"></i>
 174               <span class="label label-danger">9</span>
 175             </a>
 176             <ul class="dropdown-menu">
 177               <li class="header">You have 9 tasks</li>
 178               <li>
 179                 <!-- inner menu: contains the actual data -->
 180                 <ul class="menu">
 181                   <li><!-- Task item -->
 182                     <a href="#">
 183                       <h3>
 184                         Design some buttons
 185                         <small class="pull-right">20%</small>
 186                       </h3>
 187                       <div class="progress xs">
 188                         <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 189                           <span class="sr-only">20% Complete</span>
 190                         </div>
 191                       </div>
 192                     </a>
 193                   </li>
 194                   <!-- end task item -->
 195                   <li><!-- Task item -->
 196                     <a href="#">
 197                       <h3>
 198                         Create a nice theme
 199                         <small class="pull-right">40%</small>
 200                       </h3>
 201                       <div class="progress xs">
 202                         <div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 203                           <span class="sr-only">40% Complete</span>
 204                         </div>
 205                       </div>
 206                     </a>
 207                   </li>
 208                   <!-- end task item -->
 209                   <li><!-- Task item -->
 210                     <a href="#">
 211                       <h3>
 212                         Some task I need to do
 213                         <small class="pull-right">60%</small>
 214                       </h3>
 215                       <div class="progress xs">
 216                         <div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 217                           <span class="sr-only">60% Complete</span>
 218                         </div>
 219                       </div>
 220                     </a>
 221                   </li>
 222                   <!-- end task item -->
 223                   <li><!-- Task item -->
 224                     <a href="#">
 225                       <h3>
 226                         Make beautiful transitions
 227                         <small class="pull-right">80%</small>
 228                       </h3>
 229                       <div class="progress xs">
 230                         <div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 231                           <span class="sr-only">80% Complete</span>
 232                         </div>
 233                       </div>
 234                     </a>
 235                   </li>
 236                   <!-- end task item -->
 237                 </ul>
 238               </li>
 239               <li class="footer">
 240                 <a href="#">View all tasks</a>
 241               </li>
 242             </ul>
 243           </li>
 244           <!-- User Account: style can be found in dropdown.less -->
 245           <li class="dropdown user user-menu">
 246             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 247               <img src="../dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
 248               <span class="hidden-xs">Alexander Pierce</span>
 249             </a>
 250             <ul class="dropdown-menu">
 251               <!-- User image -->
 252               <li class="user-header">
 253                 <img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 254
 255                 <p>
 256                   Alexander Pierce - Web Developer
 257                   <small>Member since Nov. 2012</small>
 258                 </p>
 259               </li>
 260               <!-- Menu Body -->
 261               <li class="user-body">
 262                 <div class="row">
 263                   <div class="col-xs-4 text-center">
 264                     <a href="#">Followers</a>
 265                   </div>
 266                   <div class="col-xs-4 text-center">
 267                     <a href="#">Sales</a>
 268                   </div>
 269                   <div class="col-xs-4 text-center">
 270                     <a href="#">Friends</a>
 271                   </div>
 272                 </div>
 273                 <!-- /.row -->
 274               </li>
 275               <!-- Menu Footer-->
 276               <li class="user-footer">
 277                 <div class="pull-left">
 278                   <a href="#" class="btn btn-default btn-flat">Profile</a>
 279                 </div>
 280                 <div class="pull-right">
 281                   <a href="#" class="btn btn-default btn-flat">Sign out</a>
 282                 </div>
 283               </li>
 284             </ul>
 285           </li>
 286           <!-- Control Sidebar Toggle Button -->
 287           <li>
 288             <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
 289           </li>
 290         </ul>
 291       </div>
 292     </nav>
 293   </header>
 294   <!-- Left side column. contains the logo and sidebar -->
 295   <aside class="main-sidebar">
 296     <!-- sidebar: style can be found in sidebar.less -->
 297     <section class="sidebar">
 298       <!-- Sidebar user panel -->
 299       <div class="user-panel">
 300         <div class="pull-left image">
 301           <img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 302         </div>
 303         <div class="pull-left info">
 304           <p>Alexander Pierce</p>
 305           <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
 306         </div>
 307       </div>
 308       <!-- search form -->
 309       <form action="#" method="get" class="sidebar-form">
 310         <div class="input-group">
 311           <input type="text" name="q" class="form-control" placeholder="Search...">
 312               <span class="input-group-btn">
 313                 <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
 314                 </button>
 315               </span>
 316         </div>
 317       </form>
 318       <!-- /.search form -->
 319       <!-- sidebar menu: : style can be found in sidebar.less -->
 320       <ul class="sidebar-menu">
 321         <li class="header">MAIN NAVIGATION</li>
 322         <li class="treeview">
 323           <a href="#">
 324             <i class="fa fa-dashboard"></i> <span>Dashboard</span>
 325             <span class="pull-right-container">
 326               <i class="fa fa-angle-left pull-right"></i>
 327             </span>
 328           </a>
 329           <ul class="treeview-menu">
 330             <li><a href="../index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
 331             <li><a href="../index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
 332           </ul>
 333         </li>
 334         <li class="treeview">
 335           <a href="#">
 336             <i class="fa fa-files-o"></i>
 337             <span>Layout Options</span>
 338             <span class="pull-right-container">
 339               <span class="label label-primary pull-right">4</span>
 340             </span>
 341           </a>
 342           <ul class="treeview-menu">
 343             <li><a href="layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
 344             <li><a href="layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
 345             <li><a href="layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
 346             <li><a href="layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
 347           </ul>
 348         </li>
 349         <li class="active">
 350           <a href="widgets.html">
 351             <i class="fa fa-th"></i> <span>Widgets</span>
 352             <span class="pull-right-container">
 353               <small class="label pull-right bg-green">new</small>
 354             </span>
 355           </a>
 356         </li>
 357         <li class="treeview">
 358           <a href="#">
 359             <i class="fa fa-pie-chart"></i>
 360             <span>Charts</span>
 361             <span class="pull-right-container">
 362               <i class="fa fa-angle-left pull-right"></i>
 363             </span>
 364           </a>
 365           <ul class="treeview-menu">
 366             <li><a href="charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
 367             <li><a href="charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
 368             <li><a href="charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
 369             <li><a href="charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
 370           </ul>
 371         </li>
 372         <li class="treeview">
 373           <a href="#">
 374             <i class="fa fa-laptop"></i>
 375             <span>UI Elements</span>
 376             <span class="pull-right-container">
 377               <i class="fa fa-angle-left pull-right"></i>
 378             </span>
 379           </a>
 380           <ul class="treeview-menu">
 381             <li><a href="UI/general.html"><i class="fa fa-circle-o"></i> General</a></li>
 382             <li><a href="UI/icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
 383             <li><a href="UI/buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
 384             <li><a href="UI/sliders.html"><i class="fa fa-circle-o"></i> Sliders</a></li>
 385             <li><a href="UI/timeline.html"><i class="fa fa-circle-o"></i> Timeline</a></li>
 386             <li><a href="UI/modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
 387           </ul>
 388         </li>
 389         <li class="treeview">
 390           <a href="#">
 391             <i class="fa fa-edit"></i> <span>Forms</span>
 392             <span class="pull-right-container">
 393               <i class="fa fa-angle-left pull-right"></i>
 394             </span>
 395           </a>
 396           <ul class="treeview-menu">
 397             <li><a href="forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
 398             <li><a href="forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
 399             <li><a href="forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
 400           </ul>
 401         </li>
 402         <li class="treeview">
 403           <a href="#">
 404             <i class="fa fa-table"></i> <span>Tables</span>
 405             <span class="pull-right-container">
 406               <i class="fa fa-angle-left pull-right"></i>
 407             </span>
 408           </a>
 409           <ul class="treeview-menu">
 410             <li><a href="tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li>
 411             <li><a href="tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li>
 412           </ul>
 413         </li>
 414         <li>
 415           <a href="calendar.html">
 416             <i class="fa fa-calendar"></i> <span>Calendar</span>
 417             <span class="pull-right-container">
 418               <small class="label pull-right bg-red">3</small>
 419               <small class="label pull-right bg-blue">17</small>
 420             </span>
 421           </a>
 422         </li>
 423         <li>
 424           <a href="mailbox/mailbox.html">
 425             <i class="fa fa-envelope"></i> <span>Mailbox</span>
 426             <span class="pull-right-container">
 427               <small class="label pull-right bg-yellow">12</small>
 428               <small class="label pull-right bg-green">16</small>
 429               <small class="label pull-right bg-red">5</small>
 430             </span>
 431           </a>
 432         </li>
 433         <li class="treeview">
 434           <a href="#">
 435             <i class="fa fa-folder"></i> <span>Examples</span>
 436             <span class="pull-right-container">
 437               <i class="fa fa-angle-left pull-right"></i>
 438             </span>
 439           </a>
 440           <ul class="treeview-menu">
 441             <li><a href="examples/invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
 442             <li><a href="examples/profile.html"><i class="fa fa-circle-o"></i> Profile</a></li>
 443             <li><a href="examples/login.html"><i class="fa fa-circle-o"></i> Login</a></li>
 444             <li><a href="examples/register.html"><i class="fa fa-circle-o"></i> Register</a></li>
 445             <li><a href="examples/lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
 446             <li><a href="examples/404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
 447             <li><a href="examples/500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
 448             <li><a href="examples/blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
 449             <li><a href="examples/pace.html"><i class="fa fa-circle-o"></i> Pace Page</a></li>
 450           </ul>
 451         </li>
 452         <li class="treeview">
 453           <a href="#">
 454             <i class="fa fa-share"></i> <span>Multilevel</span>
 455             <span class="pull-right-container">
 456               <i class="fa fa-angle-left pull-right"></i>
 457             </span>
 458           </a>
 459           <ul class="treeview-menu">
 460             <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
 461             <li>
 462               <a href="#"><i class="fa fa-circle-o"></i> Level One
 463                 <span class="pull-right-container">
 464                   <i class="fa fa-angle-left pull-right"></i>
 465                 </span>
 466               </a>
 467               <ul class="treeview-menu">
 468                 <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
 469                 <li>
 470                   <a href="#"><i class="fa fa-circle-o"></i> Level Two
 471                     <span class="pull-right-container">
 472                       <i class="fa fa-angle-left pull-right"></i>
 473                     </span>
 474                   </a>
 475                   <ul class="treeview-menu">
 476                     <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
 477                     <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
 478                   </ul>
 479                 </li>
 480               </ul>
 481             </li>
 482             <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
 483           </ul>
 484         </li>
 485         <li><a href="../documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
 486         <li class="header">LABELS</li>
 487         <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
 488         <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
 489         <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
 490       </ul>
 491     </section>
 492     <!-- /.sidebar -->
 493   </aside>
 494
 495   <!-- Content Wrapper. Contains page content -->
 496   <div class="content-wrapper">
 497     <!-- Content Header (Page header) -->
 498     <section class="content-header">
 499       <h1>
 500         Widgets
 501         <small>Preview page</small>
 502       </h1>
 503       <ol class="breadcrumb">
 504         <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
 505         <li class="active">Widgets</li>
 506       </ol>
 507     </section>
 508
 509     <!-- Main content -->
 510     <section class="content">
 511
 512       <div class="row">
 513         <div class="col-md-3 col-sm-6 col-xs-12">
 514           <div class="info-box">
 515             <span class="info-box-icon bg-aqua"><i class="fa fa-envelope-o"></i></span>
 516
 517             <div class="info-box-content">
 518               <span class="info-box-text">Messages</span>
 519               <span class="info-box-number">1,410</span>
 520             </div>
 521             <!-- /.info-box-content -->
 522           </div>
 523           <!-- /.info-box -->
 524         </div>
 525         <!-- /.col -->
 526         <div class="col-md-3 col-sm-6 col-xs-12">
 527           <div class="info-box">
 528             <span class="info-box-icon bg-green"><i class="fa fa-flag-o"></i></span>
 529
 530             <div class="info-box-content">
 531               <span class="info-box-text">Bookmarks</span>
 532               <span class="info-box-number">410</span>
 533             </div>
 534             <!-- /.info-box-content -->
 535           </div>
 536           <!-- /.info-box -->
 537         </div>
 538         <!-- /.col -->
 539         <div class="col-md-3 col-sm-6 col-xs-12">
 540           <div class="info-box">
 541             <span class="info-box-icon bg-yellow"><i class="fa fa-files-o"></i></span>
 542
 543             <div class="info-box-content">
 544               <span class="info-box-text">Uploads</span>
 545               <span class="info-box-number">13,648</span>
 546             </div>
 547             <!-- /.info-box-content -->
 548           </div>
 549           <!-- /.info-box -->
 550         </div>
 551         <!-- /.col -->
 552         <div class="col-md-3 col-sm-6 col-xs-12">
 553           <div class="info-box">
 554             <span class="info-box-icon bg-red"><i class="fa fa-star-o"></i></span>
 555
 556             <div class="info-box-content">
 557               <span class="info-box-text">Likes</span>
 558               <span class="info-box-number">93,139</span>
 559             </div>
 560             <!-- /.info-box-content -->
 561           </div>
 562           <!-- /.info-box -->
 563         </div>
 564         <!-- /.col -->
 565       </div>
 566       <!-- /.row -->
 567
 568       <!-- =========================================================== -->
 569
 570       <div class="row">
 571         <div class="col-md-3 col-sm-6 col-xs-12">
 572           <div class="info-box bg-aqua">
 573             <span class="info-box-icon"><i class="fa fa-bookmark-o"></i></span>
 574
 575             <div class="info-box-content">
 576               <span class="info-box-text">Bookmarks</span>
 577               <span class="info-box-number">41,410</span>
 578
 579               <div class="progress">
 580                 <div class="progress-bar" style="width: 70%"></div>
 581               </div>
 582                   <span class="progress-description">
 583                     70% Increase in 30 Days
 584                   </span>
 585             </div>
 586             <!-- /.info-box-content -->
 587           </div>
 588           <!-- /.info-box -->
 589         </div>
 590         <!-- /.col -->
 591         <div class="col-md-3 col-sm-6 col-xs-12">
 592           <div class="info-box bg-green">
 593             <span class="info-box-icon"><i class="fa fa-thumbs-o-up"></i></span>
 594
 595             <div class="info-box-content">
 596               <span class="info-box-text">Likes</span>
 597               <span class="info-box-number">41,410</span>
 598
 599               <div class="progress">
 600                 <div class="progress-bar" style="width: 70%"></div>
 601               </div>
 602                   <span class="progress-description">
 603                     70% Increase in 30 Days
 604                   </span>
 605             </div>
 606             <!-- /.info-box-content -->
 607           </div>
 608           <!-- /.info-box -->
 609         </div>
 610         <!-- /.col -->
 611         <div class="col-md-3 col-sm-6 col-xs-12">
 612           <div class="info-box bg-yellow">
 613             <span class="info-box-icon"><i class="fa fa-calendar"></i></span>
 614
 615             <div class="info-box-content">
 616               <span class="info-box-text">Events</span>
 617               <span class="info-box-number">41,410</span>
 618
 619               <div class="progress">
 620                 <div class="progress-bar" style="width: 70%"></div>
 621               </div>
 622                   <span class="progress-description">
 623                     70% Increase in 30 Days
 624                   </span>
 625             </div>
 626             <!-- /.info-box-content -->
 627           </div>
 628           <!-- /.info-box -->
 629         </div>
 630         <!-- /.col -->
 631         <div class="col-md-3 col-sm-6 col-xs-12">
 632           <div class="info-box bg-red">
 633             <span class="info-box-icon"><i class="fa fa-comments-o"></i></span>
 634
 635             <div class="info-box-content">
 636               <span class="info-box-text">Comments</span>
 637               <span class="info-box-number">41,410</span>
 638
 639               <div class="progress">
 640                 <div class="progress-bar" style="width: 70%"></div>
 641               </div>
 642                   <span class="progress-description">
 643                     70% Increase in 30 Days
 644                   </span>
 645             </div>
 646             <!-- /.info-box-content -->
 647           </div>
 648           <!-- /.info-box -->
 649         </div>
 650         <!-- /.col -->
 651       </div>
 652       <!-- /.row -->
 653
 654       <!-- =========================================================== -->
 655
 656       <!-- Small boxes (Stat box) -->
 657       <div class="row">
 658         <div class="col-lg-3 col-xs-6">
 659           <!-- small box -->
 660           <div class="small-box bg-aqua">
 661             <div class="inner">
 662               <h3>150</h3>
 663
 664               <p>New Orders</p>
 665             </div>
 666             <div class="icon">
 667               <i class="fa fa-shopping-cart"></i>
 668             </div>
 669             <a href="#" class="small-box-footer">
 670               More info <i class="fa fa-arrow-circle-right"></i>
 671             </a>
 672           </div>
 673         </div>
 674         <!-- ./col -->
 675         <div class="col-lg-3 col-xs-6">
 676           <!-- small box -->
 677           <div class="small-box bg-green">
 678             <div class="inner">
 679               <h3>53<sup style="font-size: 20px">%</sup></h3>
 680
 681               <p>Bounce Rate</p>
 682             </div>
 683             <div class="icon">
 684               <i class="ion ion-stats-bars"></i>
 685             </div>
 686             <a href="#" class="small-box-footer">
 687               More info <i class="fa fa-arrow-circle-right"></i>
 688             </a>
 689           </div>
 690         </div>
 691         <!-- ./col -->
 692         <div class="col-lg-3 col-xs-6">
 693           <!-- small box -->
 694           <div class="small-box bg-yellow">
 695             <div class="inner">
 696               <h3>44</h3>
 697
 698               <p>User Registrations</p>
 699             </div>
 700             <div class="icon">
 701               <i class="ion ion-person-add"></i>
 702             </div>
 703             <a href="#" class="small-box-footer">
 704               More info <i class="fa fa-arrow-circle-right"></i>
 705             </a>
 706           </div>
 707         </div>
 708         <!-- ./col -->
 709         <div class="col-lg-3 col-xs-6">
 710           <!-- small box -->
 711           <div class="small-box bg-red">
 712             <div class="inner">
 713               <h3>65</h3>
 714
 715               <p>Unique Visitors</p>
 716             </div>
 717             <div class="icon">
 718               <i class="ion ion-pie-graph"></i>
 719             </div>
 720             <a href="#" class="small-box-footer">
 721               More info <i class="fa fa-arrow-circle-right"></i>
 722             </a>
 723           </div>
 724         </div>
 725         <!-- ./col -->
 726       </div>
 727       <!-- /.row -->
 728
 729       <!-- =========================================================== -->
 730
 731       <div class="row">
 732         <div class="col-md-3">
 733           <div class="box box-default collapsed-box">
 734             <div class="box-header with-border">
 735               <h3 class="box-title">Expandable</h3>
 736
 737               <div class="box-tools pull-right">
 738                 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
 739                 </button>
 740               </div>
 741               <!-- /.box-tools -->
 742             </div>
 743             <!-- /.box-header -->
 744             <div class="box-body">
 745               The body of the box
 746             </div>
 747             <!-- /.box-body -->
 748           </div>
 749           <!-- /.box -->
 750         </div>
 751         <!-- /.col -->
 752         <div class="col-md-3">
 753           <div class="box box-success">
 754             <div class="box-header with-border">
 755               <h3 class="box-title">Removable</h3>
 756
 757               <div class="box-tools pull-right">
 758                 <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
 759               </div>
 760               <!-- /.box-tools -->
 761             </div>
 762             <!-- /.box-header -->
 763             <div class="box-body">
 764               The body of the box
 765             </div>
 766             <!-- /.box-body -->
 767           </div>
 768           <!-- /.box -->
 769         </div>
 770         <!-- /.col -->
 771         <div class="col-md-3">
 772           <div class="box box-warning">
 773             <div class="box-header with-border">
 774               <h3 class="box-title">Collapsable</h3>
 775
 776               <div class="box-tools pull-right">
 777                 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
 778                 </button>
 779               </div>
 780               <!-- /.box-tools -->
 781             </div>
 782             <!-- /.box-header -->
 783             <div class="box-body">
 784               The body of the box
 785             </div>
 786             <!-- /.box-body -->
 787           </div>
 788           <!-- /.box -->
 789         </div>
 790         <!-- /.col -->
 791         <div class="col-md-3">
 792           <div class="box box-danger">
 793             <div class="box-header">
 794               <h3 class="box-title">Loading state</h3>
 795             </div>
 796             <div class="box-body">
 797               The body of the box
 798             </div>
 799             <!-- /.box-body -->
 800             <!-- Loading (remove the following to stop the loading)-->
 801             <div class="overlay">
 802               <i class="fa fa-refresh fa-spin"></i>
 803             </div>
 804             <!-- end loading -->
 805           </div>
 806           <!-- /.box -->
 807         </div>
 808         <!-- /.col -->
 809       </div>
 810       <!-- /.row -->
 811
 812       <!-- =========================================================== -->
 813
 814       <div class="row">
 815         <div class="col-md-3">
 816           <div class="box box-default collapsed-box box-solid">
 817             <div class="box-header with-border">
 818               <h3 class="box-title">Expandable</h3>
 819
 820               <div class="box-tools pull-right">
 821                 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
 822                 </button>
 823               </div>
 824               <!-- /.box-tools -->
 825             </div>
 826             <!-- /.box-header -->
 827             <div class="box-body">
 828               The body of the box
 829             </div>
 830             <!-- /.box-body -->
 831           </div>
 832           <!-- /.box -->
 833         </div>
 834         <!-- /.col -->
 835         <div class="col-md-3">
 836           <div class="box box-success box-solid">
 837             <div class="box-header with-border">
 838               <h3 class="box-title">Removable</h3>
 839
 840               <div class="box-tools pull-right">
 841                 <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
 842               </div>
 843               <!-- /.box-tools -->
 844             </div>
 845             <!-- /.box-header -->
 846             <div class="box-body">
 847               The body of the box
 848             </div>
 849             <!-- /.box-body -->
 850           </div>
 851           <!-- /.box -->
 852         </div>
 853         <!-- /.col -->
 854         <div class="col-md-3">
 855           <div class="box box-warning box-solid">
 856             <div class="box-header with-border">
 857               <h3 class="box-title">Collapsable</h3>
 858
 859               <div class="box-tools pull-right">
 860                 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
 861                 </button>
 862               </div>
 863               <!-- /.box-tools -->
 864             </div>
 865             <!-- /.box-header -->
 866             <div class="box-body">
 867               The body of the box
 868             </div>
 869             <!-- /.box-body -->
 870           </div>
 871           <!-- /.box -->
 872         </div>
 873         <!-- /.col -->
 874         <div class="col-md-3">
 875           <div class="box box-danger box-solid">
 876             <div class="box-header">
 877               <h3 class="box-title">Loading state</h3>
 878             </div>
 879             <div class="box-body">
 880               The body of the box
 881             </div>
 882             <!-- /.box-body -->
 883             <!-- Loading (remove the following to stop the loading)-->
 884             <div class="overlay">
 885               <i class="fa fa-refresh fa-spin"></i>
 886             </div>
 887             <!-- end loading -->
 888           </div>
 889           <!-- /.box -->
 890         </div>
 891         <!-- /.col -->
 892       </div>
 893       <!-- /.row -->
 894
 895       <!-- =========================================================== -->
 896
 897       <!-- Direct Chat -->
 898       <div class="row">
 899         <div class="col-md-3">
 900           <!-- DIRECT CHAT PRIMARY -->
 901           <div class="box box-primary direct-chat direct-chat-primary">
 902             <div class="box-header with-border">
 903               <h3 class="box-title">Direct Chat</h3>
 904
 905               <div class="box-tools pull-right">
 906                 <span data-toggle="tooltip" title="3 New Messages" class="badge bg-light-blue">3</span>
 907                 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
 908                 </button>
 909                 <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle">
 910                   <i class="fa fa-comments"></i></button>
 911                 <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
 912               </div>
 913             </div>
 914             <!-- /.box-header -->
 915             <div class="box-body">
 916               <!-- Conversations are loaded here -->
 917               <div class="direct-chat-messages">
 918                 <!-- Message. Default to the left -->
 919                 <div class="direct-chat-msg">
 920                   <div class="direct-chat-info clearfix">
 921                     <span class="direct-chat-name pull-left">Alexander Pierce</span>
 922                     <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
 923                   </div>
 924                   <!-- /.direct-chat-info -->
 925                   <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image"><!-- /.direct-chat-img -->
 926                   <div class="direct-chat-text">
 927                     Is this template really for free? That's unbelievable!
 928                   </div>
 929                   <!-- /.direct-chat-text -->
 930                 </div>
 931                 <!-- /.direct-chat-msg -->
 932
 933                 <!-- Message to the right -->
 934                 <div class="direct-chat-msg right">
 935                   <div class="direct-chat-info clearfix">
 936                     <span class="direct-chat-name pull-right">Sarah Bullock</span>
 937                     <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
 938                   </div>
 939                   <!-- /.direct-chat-info -->
 940                   <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image"><!-- /.direct-chat-img -->
 941                   <div class="direct-chat-text">
 942                     You better believe it!
 943                   </div>
 944                   <!-- /.direct-chat-text -->
 945                 </div>
 946                 <!-- /.direct-chat-msg -->
 947               </div>
 948               <!--/.direct-chat-messages-->
 949
 950               <!-- Contacts are loaded here -->
 951               <div class="direct-chat-contacts">
 952                 <ul class="contacts-list">
 953                   <li>
 954                     <a href="#">
 955                       <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="User Image">
 956
 957                       <div class="contacts-list-info">
 958                             <span class="contacts-list-name">
 959                               Count Dracula
 960                               <small class="contacts-list-date pull-right">2/28/2015</small>
 961                             </span>
 962                         <span class="contacts-list-msg">How have you been? I was...</span>
 963                       </div>
 964                       <!-- /.contacts-list-info -->
 965                     </a>
 966                   </li>
 967                   <!-- End Contact Item -->
 968                 </ul>
 969                 <!-- /.contatcts-list -->
 970               </div>
 971               <!-- /.direct-chat-pane -->
 972             </div>
 973             <!-- /.box-body -->
 974             <div class="box-footer">
 975               <form action="#" method="post">
 976                 <div class="input-group">
 977                   <input type="text" name="message" placeholder="Type Message ..." class="form-control">
 978                       <span class="input-group-btn">
 979                         <button type="submit" class="btn btn-primary btn-flat">Send</button>
 980                       </span>
 981                 </div>
 982               </form>
 983             </div>
 984             <!-- /.box-footer-->
 985           </div>
 986           <!--/.direct-chat -->
 987         </div>
 988         <!-- /.col -->
 989
 990         <div class="col-md-3">
 991           <!-- DIRECT CHAT SUCCESS -->
 992           <div class="box box-success direct-chat direct-chat-success">
 993             <div class="box-header with-border">
 994               <h3 class="box-title">Direct Chat</h3>
 995
 996               <div class="box-tools pull-right">
 997                 <span data-toggle="tooltip" title="3 New Messages" class="badge bg-green">3</span>
 998                 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
 999                 </button>
1000                 <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle">
1001                   <i class="fa fa-comments"></i></button>
1002                 <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
1003               </div>
1004             </div>
1005             <!-- /.box-header -->
1006             <div class="box-body">
1007               <!-- Conversations are loaded here -->
1008               <div class="direct-chat-messages">
1009                 <!-- Message. Default to the left -->
1010                 <div class="direct-chat-msg">
1011                   <div class="direct-chat-info clearfix">
1012                     <span class="direct-chat-name pull-left">Alexander Pierce</span>
1013                     <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
1014                   </div>
1015                   <!-- /.direct-chat-info -->
1016                   <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image"><!-- /.direct-chat-img -->
1017                   <div class="direct-chat-text">
1018                     Is this template really for free? That's unbelievable!
1019                   </div>
1020                   <!-- /.direct-chat-text -->
1021                 </div>
1022                 <!-- /.direct-chat-msg -->
1023
1024                 <!-- Message to the right -->
1025                 <div class="direct-chat-msg right">
1026                   <div class="direct-chat-info clearfix">
1027                     <span class="direct-chat-name pull-right">Sarah Bullock</span>
1028                     <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
1029                   </div>
1030                   <!-- /.direct-chat-info -->
1031                   <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image"><!-- /.direct-chat-img -->
1032                   <div class="direct-chat-text">
1033                     You better believe it!
1034                   </div>
1035                   <!-- /.direct-chat-text -->
1036                 </div>
1037                 <!-- /.direct-chat-msg -->
1038               </div>
1039               <!--/.direct-chat-messages-->
1040
1041               <!-- Contacts are loaded here -->
1042               <div class="direct-chat-contacts">
1043                 <ul class="contacts-list">
1044                   <li>
1045                     <a href="#">
1046                       <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="User Image">
1047
1048                       <div class="contacts-list-info">
1049                             <span class="contacts-list-name">
1050                               Count Dracula
1051                               <small class="contacts-list-date pull-right">2/28/2015</small>
1052                             </span>
1053                         <span class="contacts-list-msg">How have you been? I was...</span>
1054                       </div>
1055                       <!-- /.contacts-list-info -->
1056                     </a>
1057                   </li>
1058                   <!-- End Contact Item -->
1059                 </ul>
1060                 <!-- /.contatcts-list -->
1061               </div>
1062               <!-- /.direct-chat-pane -->
1063             </div>
1064             <!-- /.box-body -->
1065             <div class="box-footer">
1066               <form action="#" method="post">
1067                 <div class="input-group">
1068                   <input type="text" name="message" placeholder="Type Message ..." class="form-control">
1069                       <span class="input-group-btn">
1070                         <button type="submit" class="btn btn-success btn-flat">Send</button>
1071                       </span>
1072                 </div>
1073               </form>
1074             </div>
1075             <!-- /.box-footer-->
1076           </div>
1077           <!--/.direct-chat -->
1078         </div>
1079         <!-- /.col -->
1080
1081         <div class="col-md-3">
1082           <!-- DIRECT CHAT WARNING -->
1083           <div class="box box-warning direct-chat direct-chat-warning">
1084             <div class="box-header with-border">
1085               <h3 class="box-title">Direct Chat</h3>
1086
1087               <div class="box-tools pull-right">
1088                 <span data-toggle="tooltip" title="3 New Messages" class="badge bg-yellow">3</span>
1089                 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
1090                 </button>
1091                 <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle">
1092                   <i class="fa fa-comments"></i></button>
1093                 <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
1094               </div>
1095             </div>
1096             <!-- /.box-header -->
1097             <div class="box-body">
1098               <!-- Conversations are loaded here -->
1099               <div class="direct-chat-messages">
1100                 <!-- Message. Default to the left -->
1101                 <div class="direct-chat-msg">
1102                   <div class="direct-chat-info clearfix">
1103                     <span class="direct-chat-name pull-left">Alexander Pierce</span>
1104                     <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
1105                   </div>
1106                   <!-- /.direct-chat-info -->
1107                   <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image"><!-- /.direct-chat-img -->
1108                   <div class="direct-chat-text">
1109                     Is this template really for free? That's unbelievable!
1110                   </div>
1111                   <!-- /.direct-chat-text -->
1112                 </div>
1113                 <!-- /.direct-chat-msg -->
1114
1115                 <!-- Message to the right -->
1116                 <div class="direct-chat-msg right">
1117                   <div class="direct-chat-info clearfix">
1118                     <span class="direct-chat-name pull-right">Sarah Bullock</span>
1119                     <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
1120                   </div>
1121                   <!-- /.direct-chat-info -->
1122                   <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image"><!-- /.direct-chat-img -->
1123                   <div class="direct-chat-text">
1124                     You better believe it!
1125                   </div>
1126                   <!-- /.direct-chat-text -->
1127                 </div>
1128                 <!-- /.direct-chat-msg -->
1129               </div>
1130               <!--/.direct-chat-messages-->
1131
1132               <!-- Contacts are loaded here -->
1133               <div class="direct-chat-contacts">
1134                 <ul class="contacts-list">
1135                   <li>
1136                     <a href="#">
1137                       <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="User Image">
1138
1139                       <div class="contacts-list-info">
1140                             <span class="contacts-list-name">
1141                               Count Dracula
1142                               <small class="contacts-list-date pull-right">2/28/2015</small>
1143                             </span>
1144                         <span class="contacts-list-msg">How have you been? I was...</span>
1145                       </div>
1146                       <!-- /.contacts-list-info -->
1147                     </a>
1148                   </li>
1149                   <!-- End Contact Item -->
1150                 </ul>
1151                 <!-- /.contatcts-list -->
1152               </div>
1153               <!-- /.direct-chat-pane -->
1154             </div>
1155             <!-- /.box-body -->
1156             <div class="box-footer">
1157               <form action="#" method="post">
1158                 <div class="input-group">
1159                   <input type="text" name="message" placeholder="Type Message ..." class="form-control">
1160                       <span class="input-group-btn">
1161                         <button type="submit" class="btn btn-warning btn-flat">Send</button>
1162                       </span>
1163                 </div>
1164               </form>
1165             </div>
1166             <!-- /.box-footer-->
1167           </div>
1168           <!--/.direct-chat -->
1169         </div>
1170         <!-- /.col -->
1171
1172         <div class="col-md-3">
1173           <!-- DIRECT CHAT DANGER -->
1174           <div class="box box-danger direct-chat direct-chat-danger">
1175             <div class="box-header with-border">
1176               <h3 class="box-title">Direct Chat</h3>
1177
1178               <div class="box-tools pull-right">
1179                 <span data-toggle="tooltip" title="3 New Messages" class="badge bg-red">3</span>
1180                 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
1181                 </button>
1182                 <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle">
1183                   <i class="fa fa-comments"></i></button>
1184                 <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
1185               </div>
1186             </div>
1187             <!-- /.box-header -->
1188             <div class="box-body">
1189               <!-- Conversations are loaded here -->
1190               <div class="direct-chat-messages">
1191                 <!-- Message. Default to the left -->
1192                 <div class="direct-chat-msg">
1193                   <div class="direct-chat-info clearfix">
1194                     <span class="direct-chat-name pull-left">Alexander Pierce</span>
1195                     <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
1196                   </div>
1197                   <!-- /.direct-chat-info -->
1198                   <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image"><!-- /.direct-chat-img -->
1199                   <div class="direct-chat-text">
1200                     Is this template really for free? That's unbelievable!
1201                   </div>
1202                   <!-- /.direct-chat-text -->
1203                 </div>
1204                 <!-- /.direct-chat-msg -->
1205
1206                 <!-- Message to the right -->
1207                 <div class="direct-chat-msg right">
1208                   <div class="direct-chat-info clearfix">
1209                     <span class="direct-chat-name pull-right">Sarah Bullock</span>
1210                     <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
1211                   </div>
1212                   <!-- /.direct-chat-info -->
1213                   <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image"><!-- /.direct-chat-img -->
1214                   <div class="direct-chat-text">
1215                     You better believe it!
1216                   </div>
1217                   <!-- /.direct-chat-text -->
1218                 </div>
1219                 <!-- /.direct-chat-msg -->
1220               </div>
1221               <!--/.direct-chat-messages-->
1222
1223               <!-- Contacts are loaded here -->
1224               <div class="direct-chat-contacts">
1225                 <ul class="contacts-list">
1226                   <li>
1227                     <a href="#">
1228                       <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="User Image">
1229
1230                       <div class="contacts-list-info">
1231                             <span class="contacts-list-name">
1232                               Count Dracula
1233                               <small class="contacts-list-date pull-right">2/28/2015</small>
1234                             </span>
1235                         <span class="contacts-list-msg">How have you been? I was...</span>
1236                       </div>
1237                       <!-- /.contacts-list-info -->
1238                     </a>
1239                   </li>
1240                   <!-- End Contact Item -->
1241                 </ul>
1242                 <!-- /.contatcts-list -->
1243               </div>
1244               <!-- /.direct-chat-pane -->
1245             </div>
1246             <!-- /.box-body -->
1247             <div class="box-footer">
1248               <form action="#" method="post">
1249                 <div class="input-group">
1250                   <input type="text" name="message" placeholder="Type Message ..." class="form-control">
1251                       <span class="input-group-btn">
1252                         <button type="submit" class="btn btn-danger btn-flat">Send</button>
1253                       </span>
1254                 </div>
1255               </form>
1256             </div>
1257             <!-- /.box-footer-->
1258           </div>
1259           <!--/.direct-chat -->
1260         </div>
1261         <!-- /.col -->
1262       </div>
1263       <!-- /.row -->
1264
1265       <h2 class="page-header">Social Widgets</h2>
1266
1267       <div class="row">
1268         <div class="col-md-4">
1269           <!-- Widget: user widget style 1 -->
1270           <div class="box box-widget widget-user-2">
1271             <!-- Add the bg color to the header using any of the bg-* classes -->
1272             <div class="widget-user-header bg-yellow">
1273               <div class="widget-user-image">
1274                 <img class="img-circle" src="../dist/img/user7-128x128.jpg" alt="User Avatar">
1275               </div>
1276               <!-- /.widget-user-image -->
1277               <h3 class="widget-user-username">Nadia Carmichael</h3>
1278               <h5 class="widget-user-desc">Lead Developer</h5>
1279             </div>
1280             <div class="box-footer no-padding">
1281               <ul class="nav nav-stacked">
1282                 <li><a href="#">Projects <span class="pull-right badge bg-blue">31</span></a></li>
1283                 <li><a href="#">Tasks <span class="pull-right badge bg-aqua">5</span></a></li>
1284                 <li><a href="#">Completed Projects <span class="pull-right badge bg-green">12</span></a></li>
1285                 <li><a href="#">Followers <span class="pull-right badge bg-red">842</span></a></li>
1286               </ul>
1287             </div>
1288           </div>
1289           <!-- /.widget-user -->
1290         </div>
1291         <!-- /.col -->
1292         <div class="col-md-4">
1293           <!-- Widget: user widget style 1 -->
1294           <div class="box box-widget widget-user">
1295             <!-- Add the bg color to the header using any of the bg-* classes -->
1296             <div class="widget-user-header bg-aqua-active">
1297               <h3 class="widget-user-username">Alexander Pierce</h3>
1298               <h5 class="widget-user-desc">Founder &amp; CEO</h5>
1299             </div>
1300             <div class="widget-user-image">
1301               <img class="img-circle" src="../dist/img/user1-128x128.jpg" alt="User Avatar">
1302             </div>
1303             <div class="box-footer">
1304               <div class="row">
1305                 <div class="col-sm-4 border-right">
1306                   <div class="description-block">
1307                     <h5 class="description-header">3,200</h5>
1308                     <span class="description-text">SALES</span>
1309                   </div>
1310                   <!-- /.description-block -->
1311                 </div>
1312                 <!-- /.col -->
1313                 <div class="col-sm-4 border-right">
1314                   <div class="description-block">
1315                     <h5 class="description-header">13,000</h5>
1316                     <span class="description-text">FOLLOWERS</span>
1317                   </div>
1318                   <!-- /.description-block -->
1319                 </div>
1320                 <!-- /.col -->
1321                 <div class="col-sm-4">
1322                   <div class="description-block">
1323                     <h5 class="description-header">35</h5>
1324                     <span class="description-text">PRODUCTS</span>
1325                   </div>
1326                   <!-- /.description-block -->
1327                 </div>
1328                 <!-- /.col -->
1329               </div>
1330               <!-- /.row -->
1331             </div>
1332           </div>
1333           <!-- /.widget-user -->
1334         </div>
1335         <!-- /.col -->
1336         <div class="col-md-4">
1337           <!-- Widget: user widget style 1 -->
1338           <div class="box box-widget widget-user">
1339             <!-- Add the bg color to the header using any of the bg-* classes -->
1340             <div class="widget-user-header bg-black" style="background: url('../dist/img/photo1.png') center center;">
1341               <h3 class="widget-user-username">Elizabeth Pierce</h3>
1342               <h5 class="widget-user-desc">Web Designer</h5>
1343             </div>
1344             <div class="widget-user-image">
1345               <img class="img-circle" src="../dist/img/user3-128x128.jpg" alt="User Avatar">
1346             </div>
1347             <div class="box-footer">
1348               <div class="row">
1349                 <div class="col-sm-4 border-right">
1350                   <div class="description-block">
1351                     <h5 class="description-header">3,200</h5>
1352                     <span class="description-text">SALES</span>
1353                   </div>
1354                   <!-- /.description-block -->
1355                 </div>
1356                 <!-- /.col -->
1357                 <div class="col-sm-4 border-right">
1358                   <div class="description-block">
1359                     <h5 class="description-header">13,000</h5>
1360                     <span class="description-text">FOLLOWERS</span>
1361                   </div>
1362                   <!-- /.description-block -->
1363                 </div>
1364                 <!-- /.col -->
1365                 <div class="col-sm-4">
1366                   <div class="description-block">
1367                     <h5 class="description-header">35</h5>
1368                     <span class="description-text">PRODUCTS</span>
1369                   </div>
1370                   <!-- /.description-block -->
1371                 </div>
1372                 <!-- /.col -->
1373               </div>
1374               <!-- /.row -->
1375             </div>
1376           </div>
1377           <!-- /.widget-user -->
1378         </div>
1379         <!-- /.col -->
1380       </div>
1381       <!-- /.row -->
1382
1383       <div class="row">
1384         <div class="col-md-6">
1385           <!-- Box Comment -->
1386           <div class="box box-widget">
1387             <div class="box-header with-border">
1388               <div class="user-block">
1389                 <img class="img-circle" src="../dist/img/user1-128x128.jpg" alt="User Image">
1390                 <span class="username"><a href="#">Jonathan Burke Jr.</a></span>
1391                 <span class="description">Shared publicly - 7:30 PM Today</span>
1392               </div>
1393               <!-- /.user-block -->
1394               <div class="box-tools">
1395                 <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="Mark as read">
1396                   <i class="fa fa-circle-o"></i></button>
1397                 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
1398                 </button>
1399                 <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
1400               </div>
1401               <!-- /.box-tools -->
1402             </div>
1403             <!-- /.box-header -->
1404             <div class="box-body">
1405               <img class="img-responsive pad" src="../dist/img/photo2.png" alt="Photo">
1406
1407               <p>I took this photo this morning. What do you guys think?</p>
1408               <button type="button" class="btn btn-default btn-xs"><i class="fa fa-share"></i> Share</button>
1409               <button type="button" class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button>
1410               <span class="pull-right text-muted">127 likes - 3 comments</span>
1411             </div>
1412             <!-- /.box-body -->
1413             <div class="box-footer box-comments">
1414               <div class="box-comment">
1415                 <!-- User image -->
1416                 <img class="img-circle img-sm" src="../dist/img/user3-128x128.jpg" alt="User Image">
1417
1418                 <div class="comment-text">
1419                       <span class="username">
1420                         Maria Gonzales
1421                         <span class="text-muted pull-right">8:03 PM Today</span>
1422                       </span><!-- /.username -->
1423                   It is a long established fact that a reader will be distracted
1424                   by the readable content of a page when looking at its layout.
1425                 </div>
1426                 <!-- /.comment-text -->
1427               </div>
1428               <!-- /.box-comment -->
1429               <div class="box-comment">
1430                 <!-- User image -->
1431                 <img class="img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="User Image">
1432
1433                 <div class="comment-text">
1434                       <span class="username">
1435                         Luna Stark
1436                         <span class="text-muted pull-right">8:03 PM Today</span>
1437                       </span><!-- /.username -->
1438                   It is a long established fact that a reader will be distracted
1439                   by the readable content of a page when looking at its layout.
1440                 </div>
1441                 <!-- /.comment-text -->
1442               </div>
1443               <!-- /.box-comment -->
1444             </div>
1445             <!-- /.box-footer -->
1446             <div class="box-footer">
1447               <form action="#" method="post">
1448                 <img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="Alt Text">
1449                 <!-- .img-push is used to add margin to elements next to floating images -->
1450                 <div class="img-push">
1451                   <input type="text" class="form-control input-sm" placeholder="Press enter to post comment">
1452                 </div>
1453               </form>
1454             </div>
1455             <!-- /.box-footer -->
1456           </div>
1457           <!-- /.box -->
1458         </div>
1459         <!-- /.col -->
1460         <div class="col-md-6">
1461           <!-- Box Comment -->
1462           <div class="box box-widget">
1463             <div class="box-header with-border">
1464               <div class="user-block">
1465                 <img class="img-circle" src="../dist/img/user1-128x128.jpg" alt="User Image">
1466                 <span class="username"><a href="#">Jonathan Burke Jr.</a></span>
1467                 <span class="description">Shared publicly - 7:30 PM Today</span>
1468               </div>
1469               <!-- /.user-block -->
1470               <div class="box-tools">
1471                 <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="Mark as read">
1472                   <i class="fa fa-circle-o"></i></button>
1473                 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
1474                 </button>
1475                 <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
1476               </div>
1477               <!-- /.box-tools -->
1478             </div>
1479             <!-- /.box-header -->
1480             <div class="box-body">
1481               <!-- post text -->
1482               <p>Far far away, behind the word mountains, far from the
1483                 countries Vokalia and Consonantia, there live the blind
1484                 texts. Separated they live in Bookmarksgrove right at</p>
1485
1486               <p>the coast of the Semantics, a large language ocean.
1487                 A small river named Duden flows by their place and supplies
1488                 it with the necessary regelialia. It is a paradisematic
1489                 country, in which roasted parts of sentences fly into
1490                 your mouth.</p>
1491
1492               <!-- Attachment -->
1493               <div class="attachment-block clearfix">
1494                 <img class="attachment-img" src="../dist/img/photo1.png" alt="Attachment Image">
1495
1496                 <div class="attachment-pushed">
1497                   <h4 class="attachment-heading"><a href="http://www.lipsum.com/">Lorem ipsum text generator</a></h4>
1498
1499                   <div class="attachment-text">
1500                     Description about the attachment can be placed here.
1501                     Lorem Ipsum is simply dummy text of the printing and typesetting industry... <a href="#">more</a>
1502                   </div>
1503                   <!-- /.attachment-text -->
1504                 </div>
1505                 <!-- /.attachment-pushed -->
1506               </div>
1507               <!-- /.attachment-block -->
1508
1509               <!-- Social sharing buttons -->
1510               <button type="button" class="btn btn-default btn-xs"><i class="fa fa-share"></i> Share</button>
1511               <button type="button" class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button>
1512               <span class="pull-right text-muted">45 likes - 2 comments</span>
1513             </div>
1514             <!-- /.box-body -->
1515             <div class="box-footer box-comments">
1516               <div class="box-comment">
1517                 <!-- User image -->
1518                 <img class="img-circle img-sm" src="../dist/img/user3-128x128.jpg" alt="User Image">
1519
1520                 <div class="comment-text">
1521                       <span class="username">
1522                         Maria Gonzales
1523                         <span class="text-muted pull-right">8:03 PM Today</span>
1524                       </span><!-- /.username -->
1525                   It is a long established fact that a reader will be distracted
1526                   by the readable content of a page when looking at its layout.
1527                 </div>
1528                 <!-- /.comment-text -->
1529               </div>
1530               <!-- /.box-comment -->
1531               <div class="box-comment">
1532                 <!-- User image -->
1533                 <img class="img-circle img-sm" src="../dist/img/user5-128x128.jpg" alt="User Image">
1534
1535                 <div class="comment-text">
1536                       <span class="username">
1537                         Nora Havisham
1538                         <span class="text-muted pull-right">8:03 PM Today</span>
1539                       </span><!-- /.username -->
1540                   The point of using Lorem Ipsum is that it has a more-or-less
1541                   normal distribution of letters, as opposed to using
1542                   'Content here, content here', making it look like readable English.
1543                 </div>
1544                 <!-- /.comment-text -->
1545               </div>
1546               <!-- /.box-comment -->
1547             </div>
1548             <!-- /.box-footer -->
1549             <div class="box-footer">
1550               <form action="#" method="post">
1551                 <img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="Alt Text">
1552                 <!-- .img-push is used to add margin to elements next to floating images -->
1553                 <div class="img-push">
1554                   <input type="text" class="form-control input-sm" placeholder="Press enter to post comment">
1555                 </div>
1556               </form>
1557             </div>
1558             <!-- /.box-footer -->
1559           </div>
1560           <!-- /.box -->
1561         </div>
1562         <!-- /.col -->
1563       </div>
1564       <!-- /.row -->
1565
1566     </section>
1567     <!-- /.content -->
1568   </div>
1569   <!-- /.content-wrapper -->
1570
1571   <footer class="main-footer">
1572     <div class="pull-right hidden-xs">
1573       <b>Version</b> 2.3.7
1574     </div>
1575     <strong>Copyright &copy; 2014-2016 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights
1576     reserved.
1577   </footer>
1578
1579   <!-- Control Sidebar -->
1580   <aside class="control-sidebar control-sidebar-dark">
1581     <!-- Create the tabs -->
1582     <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
1583       <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
1584       <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
1585     </ul>
1586     <!-- Tab panes -->
1587     <div class="tab-content">
1588       <!-- Home tab content -->
1589       <div class="tab-pane" id="control-sidebar-home-tab">
1590         <h3 class="control-sidebar-heading">Recent Activity</h3>
1591         <ul class="control-sidebar-menu">
1592           <li>
1593             <a href="javascript:void(0)">
1594               <i class="menu-icon fa fa-birthday-cake bg-red"></i>
1595
1596               <div class="menu-info">
1597                 <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
1598
1599                 <p>Will be 23 on April 24th</p>
1600               </div>
1601             </a>
1602           </li>
1603           <li>
1604             <a href="javascript:void(0)">
1605               <i class="menu-icon fa fa-user bg-yellow"></i>
1606
1607               <div class="menu-info">
1608                 <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
1609
1610                 <p>New phone +1(800)555-1234</p>
1611               </div>
1612             </a>
1613           </li>
1614           <li>
1615             <a href="javascript:void(0)">
1616               <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
1617
1618               <div class="menu-info">
1619                 <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
1620
1621                 <p>nora@example.com</p>
1622               </div>
1623             </a>
1624           </li>
1625           <li>
1626             <a href="javascript:void(0)">
1627               <i class="menu-icon fa fa-file-code-o bg-green"></i>
1628
1629               <div class="menu-info">
1630                 <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
1631
1632                 <p>Execution time 5 seconds</p>
1633               </div>
1634             </a>
1635           </li>
1636         </ul>
1637         <!-- /.control-sidebar-menu -->
1638
1639         <h3 class="control-sidebar-heading">Tasks Progress</h3>
1640         <ul class="control-sidebar-menu">
1641           <li>
1642             <a href="javascript:void(0)">
1643               <h4 class="control-sidebar-subheading">
1644                 Custom Template Design
1645                 <span class="label label-danger pull-right">70%</span>
1646               </h4>
1647
1648               <div class="progress progress-xxs">
1649                 <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
1650               </div>
1651             </a>
1652           </li>
1653           <li>
1654             <a href="javascript:void(0)">
1655               <h4 class="control-sidebar-subheading">
1656                 Update Resume
1657                 <span class="label label-success pull-right">95%</span>
1658               </h4>
1659
1660               <div class="progress progress-xxs">
1661                 <div class="progress-bar progress-bar-success" style="width: 95%"></div>
1662               </div>
1663             </a>
1664           </li>
1665           <li>
1666             <a href="javascript:void(0)">
1667               <h4 class="control-sidebar-subheading">
1668                 Laravel Integration
1669                 <span class="label label-warning pull-right">50%</span>
1670               </h4>
1671
1672               <div class="progress progress-xxs">
1673                 <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
1674               </div>
1675             </a>
1676           </li>
1677           <li>
1678             <a href="javascript:void(0)">
1679               <h4 class="control-sidebar-subheading">
1680                 Back End Framework
1681                 <span class="label label-primary pull-right">68%</span>
1682               </h4>
1683
1684               <div class="progress progress-xxs">
1685                 <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
1686               </div>
1687             </a>
1688           </li>
1689         </ul>
1690         <!-- /.control-sidebar-menu -->
1691
1692       </div>
1693       <!-- /.tab-pane -->
1694       <!-- Stats tab content -->
1695       <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
1696       <!-- /.tab-pane -->
1697       <!-- Settings tab content -->
1698       <div class="tab-pane" id="control-sidebar-settings-tab">
1699         <form method="post">
1700           <h3 class="control-sidebar-heading">General Settings</h3>
1701
1702           <div class="form-group">
1703             <label class="control-sidebar-subheading">
1704               Report panel usage
1705               <input type="checkbox" class="pull-right" checked>
1706             </label>
1707
1708             <p>
1709               Some information about this general settings option
1710             </p>
1711           </div>
1712           <!-- /.form-group -->
1713
1714           <div class="form-group">
1715             <label class="control-sidebar-subheading">
1716               Allow mail redirect
1717               <input type="checkbox" class="pull-right" checked>
1718             </label>
1719
1720             <p>
1721               Other sets of options are available
1722             </p>
1723           </div>
1724           <!-- /.form-group -->
1725
1726           <div class="form-group">
1727             <label class="control-sidebar-subheading">
1728               Expose author name in posts
1729               <input type="checkbox" class="pull-right" checked>
1730             </label>
1731
1732             <p>
1733               Allow the user to show his name in blog posts
1734             </p>
1735           </div>
1736           <!-- /.form-group -->
1737
1738           <h3 class="control-sidebar-heading">Chat Settings</h3>
1739
1740           <div class="form-group">
1741             <label class="control-sidebar-subheading">
1742               Show me as online
1743               <input type="checkbox" class="pull-right" checked>
1744             </label>
1745           </div>
1746           <!-- /.form-group -->
1747
1748           <div class="form-group">
1749             <label class="control-sidebar-subheading">
1750               Turn off notifications
1751               <input type="checkbox" class="pull-right">
1752             </label>
1753           </div>
1754           <!-- /.form-group -->
1755
1756           <div class="form-group">
1757             <label class="control-sidebar-subheading">
1758               Delete chat history
1759               <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
1760             </label>
1761           </div>
1762           <!-- /.form-group -->
1763         </form>
1764       </div>
1765       <!-- /.tab-pane -->
1766     </div>
1767   </aside>
1768   <!-- /.control-sidebar -->
1769   <!-- Add the sidebar's background. This div must be placed
1770        immediately after the control sidebar -->
1771   <div class="control-sidebar-bg"></div>
1772 </div>
1773 <!-- ./wrapper -->
1774
1775 <!-- jQuery 2.2.3 -->
1776 <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
1777 <!-- Bootstrap 3.3.6 -->
1778 <script src="../bootstrap/js/bootstrap.min.js"></script>
1779 <!-- Slimscroll -->
1780 <script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
1781 <!-- FastClick -->
1782 <script src="../plugins/fastclick/fastclick.js"></script>
1783 <!-- AdminLTE App -->
1784 <script src="../dist/js/app.min.js"></script>
1785 <!-- AdminLTE for demo purposes -->
1786 <script src="../dist/js/demo.js"></script>
1787 </body>
1788 </html>