ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/pages/examples/pace.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 | Pace Page</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   <!-- Pace style -->
  21   <link rel="stylesheet" href="../../plugins/pace/pace.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 <!-- Site wrapper -->
  32 <div class="wrapper">
  33
  34   <header class="main-header">
  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     <!-- Header Navbar: style can be found in header.less -->
  43     <nav class="navbar navbar-static-top">
  44       <!-- Sidebar toggle button-->
  45       <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
  46         <span class="sr-only">Toggle navigation</span>
  47         <span class="icon-bar"></span>
  48         <span class="icon-bar"></span>
  49         <span class="icon-bar"></span>
  50       </a>
  51
  52       <div class="navbar-custom-menu">
  53         <ul class="nav navbar-nav">
  54           <!-- Messages: style can be found in dropdown.less-->
  55           <li class="dropdown messages-menu">
  56             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  57               <i class="fa fa-envelope-o"></i>
  58               <span class="label label-success">4</span>
  59             </a>
  60             <ul class="dropdown-menu">
  61               <li class="header">You have 4 messages</li>
  62               <li>
  63                 <!-- inner menu: contains the actual data -->
  64                 <ul class="menu">
  65                   <li><!-- start message -->
  66                     <a href="#">
  67                       <div class="pull-left">
  68                         <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  69                       </div>
  70                       <h4>
  71                         Support Team
  72                         <small><i class="fa fa-clock-o"></i> 5 mins</small>
  73                       </h4>
  74                       <p>Why not buy a new awesome theme?</p>
  75                     </a>
  76                   </li>
  77                   <!-- end message -->
  78                 </ul>
  79               </li>
  80               <li class="footer"><a href="#">See All Messages</a></li>
  81             </ul>
  82           </li>
  83           <!-- Notifications: style can be found in dropdown.less -->
  84           <li class="dropdown notifications-menu">
  85             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  86               <i class="fa fa-bell-o"></i>
  87               <span class="label label-warning">10</span>
  88             </a>
  89             <ul class="dropdown-menu">
  90               <li class="header">You have 10 notifications</li>
  91               <li>
  92                 <!-- inner menu: contains the actual data -->
  93                 <ul class="menu">
  94                   <li>
  95                     <a href="#">
  96                       <i class="fa fa-users text-aqua"></i> 5 new members joined today
  97                     </a>
  98                   </li>
  99                 </ul>
 100               </li>
 101               <li class="footer"><a href="#">View all</a></li>
 102             </ul>
 103           </li>
 104           <!-- Tasks: style can be found in dropdown.less -->
 105           <li class="dropdown tasks-menu">
 106             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 107               <i class="fa fa-flag-o"></i>
 108               <span class="label label-danger">9</span>
 109             </a>
 110             <ul class="dropdown-menu">
 111               <li class="header">You have 9 tasks</li>
 112               <li>
 113                 <!-- inner menu: contains the actual data -->
 114                 <ul class="menu">
 115                   <li><!-- Task item -->
 116                     <a href="#">
 117                       <h3>
 118                         Design some buttons
 119                         <small class="pull-right">20%</small>
 120                       </h3>
 121                       <div class="progress xs">
 122                         <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 123                           <span class="sr-only">20% Complete</span>
 124                         </div>
 125                       </div>
 126                     </a>
 127                   </li>
 128                   <!-- end task item -->
 129                 </ul>
 130               </li>
 131               <li class="footer">
 132                 <a href="#">View all tasks</a>
 133               </li>
 134             </ul>
 135           </li>
 136           <!-- User Account: style can be found in dropdown.less -->
 137           <li class="dropdown user user-menu">
 138             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 139               <img src="../../dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
 140               <span class="hidden-xs">Alexander Pierce</span>
 141             </a>
 142             <ul class="dropdown-menu">
 143               <!-- User image -->
 144               <li class="user-header">
 145                 <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 146
 147                 <p>
 148                   Alexander Pierce - Web Developer
 149                   <small>Member since Nov. 2012</small>
 150                 </p>
 151               </li>
 152               <!-- Menu Body -->
 153               <li class="user-body">
 154                 <div class="row">
 155                   <div class="col-xs-4 text-center">
 156                     <a href="#">Followers</a>
 157                   </div>
 158                   <div class="col-xs-4 text-center">
 159                     <a href="#">Sales</a>
 160                   </div>
 161                   <div class="col-xs-4 text-center">
 162                     <a href="#">Friends</a>
 163                   </div>
 164                 </div>
 165                 <!-- /.row -->
 166               </li>
 167               <!-- Menu Footer-->
 168               <li class="user-footer">
 169                 <div class="pull-left">
 170                   <a href="#" class="btn btn-default btn-flat">Profile</a>
 171                 </div>
 172                 <div class="pull-right">
 173                   <a href="#" class="btn btn-default btn-flat">Sign out</a>
 174                 </div>
 175               </li>
 176             </ul>
 177           </li>
 178           <!-- Control Sidebar Toggle Button -->
 179           <li>
 180             <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
 181           </li>
 182         </ul>
 183       </div>
 184     </nav>
 185   </header>
 186
 187   <!-- =============================================== -->
 188
 189   <!-- Left side column. contains the sidebar -->
 190   <aside class="main-sidebar">
 191     <!-- sidebar: style can be found in sidebar.less -->
 192     <section class="sidebar">
 193       <!-- Sidebar user panel -->
 194       <div class="user-panel">
 195         <div class="pull-left image">
 196           <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 197         </div>
 198         <div class="pull-left info">
 199           <p>Alexander Pierce</p>
 200           <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
 201         </div>
 202       </div>
 203       <!-- search form -->
 204       <form action="#" method="get" class="sidebar-form">
 205         <div class="input-group">
 206           <input type="text" name="q" class="form-control" placeholder="Search...">
 207               <span class="input-group-btn">
 208                 <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
 209                 </button>
 210               </span>
 211         </div>
 212       </form>
 213       <!-- /.search form -->
 214       <!-- sidebar menu: : style can be found in sidebar.less -->
 215       <ul class="sidebar-menu">
 216         <li class="header">MAIN NAVIGATION</li>
 217         <li class="treeview">
 218           <a href="#">
 219             <i class="fa fa-dashboard"></i> <span>Dashboard</span>
 220             <span class="pull-right-container">
 221               <i class="fa fa-angle-left pull-right"></i>
 222             </span>
 223           </a>
 224           <ul class="treeview-menu">
 225             <li><a href="../../index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
 226             <li><a href="../../index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
 227           </ul>
 228         </li>
 229         <li class="treeview">
 230           <a href="#">
 231             <i class="fa fa-files-o"></i>
 232             <span>Layout Options</span>
 233             <span class="pull-right-container">
 234               <span class="label label-primary pull-right">4</span>
 235             </span>
 236           </a>
 237           <ul class="treeview-menu">
 238             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
 239             <li><a href="../layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
 240             <li><a href="../layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
 241             <li><a href="../layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
 242           </ul>
 243         </li>
 244         <li>
 245           <a href="../widgets.html">
 246             <i class="fa fa-th"></i> <span>Widgets</span>
 247             <span class="pull-right-container">
 248               <small class="label pull-right bg-green">Hot</small>
 249             </span>
 250           </a>
 251         </li>
 252         <li class="treeview">
 253           <a href="#">
 254             <i class="fa fa-pie-chart"></i>
 255             <span>Charts</span>
 256             <span class="pull-right-container">
 257               <i class="fa fa-angle-left pull-right"></i>
 258             </span>
 259           </a>
 260           <ul class="treeview-menu">
 261             <li><a href="../charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
 262             <li><a href="../charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
 263             <li><a href="../charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
 264             <li><a href="../charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
 265           </ul>
 266         </li>
 267         <li class="treeview">
 268           <a href="#">
 269             <i class="fa fa-laptop"></i>
 270             <span>UI Elements</span>
 271             <span class="pull-right-container">
 272               <i class="fa fa-angle-left pull-right"></i>
 273             </span>
 274           </a>
 275           <ul class="treeview-menu">
 276             <li><a href="../UI/general.html"><i class="fa fa-circle-o"></i> General</a></li>
 277             <li><a href="../UI/icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
 278             <li><a href="../UI/buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
 279             <li><a href="../UI/sliders.html"><i class="fa fa-circle-o"></i> Sliders</a></li>
 280             <li><a href="../UI/timeline.html"><i class="fa fa-circle-o"></i> Timeline</a></li>
 281             <li><a href="../UI/modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
 282           </ul>
 283         </li>
 284         <li class="treeview">
 285           <a href="#">
 286             <i class="fa fa-edit"></i> <span>Forms</span>
 287             <span class="pull-right-container">
 288               <i class="fa fa-angle-left pull-right"></i>
 289             </span>
 290           </a>
 291           <ul class="treeview-menu">
 292             <li><a href="../forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
 293             <li><a href="../forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
 294             <li><a href="../forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
 295           </ul>
 296         </li>
 297         <li class="treeview">
 298           <a href="#">
 299             <i class="fa fa-table"></i> <span>Tables</span>
 300             <span class="pull-right-container">
 301               <i class="fa fa-angle-left pull-right"></i>
 302             </span>
 303           </a>
 304           <ul class="treeview-menu">
 305             <li><a href="../tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li>
 306             <li><a href="../tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li>
 307           </ul>
 308         </li>
 309         <li>
 310           <a href="../calendar.html">
 311             <i class="fa fa-calendar"></i> <span>Calendar</span>
 312             <span class="pull-right-container">
 313               <small class="label pull-right bg-red">3</small>
 314               <small class="label pull-right bg-blue">17</small>
 315             </span>
 316           </a>
 317         </li>
 318         <li>
 319           <a href="../mailbox/mailbox.html">
 320             <i class="fa fa-envelope"></i> <span>Mailbox</span>
 321             <span class="pull-right-container">
 322               <small class="label pull-right bg-yellow">12</small>
 323               <small class="label pull-right bg-green">16</small>
 324               <small class="label pull-right bg-red">5</small>
 325             </span>
 326           </a>
 327         </li>
 328         <li class="treeview active">
 329           <a href="#">
 330             <i class="fa fa-folder"></i> <span>Examples</span>
 331             <span class="pull-right-container">
 332               <i class="fa fa-angle-left pull-right"></i>
 333             </span>
 334           </a>
 335           <ul class="treeview-menu">
 336             <li><a href="invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
 337             <li><a href="profile.html"><i class="fa fa-circle-o"></i> Profile</a></li>
 338             <li><a href="login.html"><i class="fa fa-circle-o"></i> Login</a></li>
 339             <li><a href="register.html"><i class="fa fa-circle-o"></i> Register</a></li>
 340             <li><a href="lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
 341             <li><a href="404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
 342             <li><a href="500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
 343             <li><a href="blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
 344             <li class="active"><a href="pace.html"><i class="fa fa-circle-o"></i> Pace Page</a></li>
 345           </ul>
 346         </li>
 347         <li class="treeview">
 348           <a href="#">
 349             <i class="fa fa-share"></i> <span>Multilevel</span>
 350             <span class="pull-right-container">
 351               <i class="fa fa-angle-left pull-right"></i>
 352             </span>
 353           </a>
 354           <ul class="treeview-menu">
 355             <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
 356             <li>
 357               <a href="#"><i class="fa fa-circle-o"></i> Level One
 358                 <span class="pull-right-container">
 359                   <i class="fa fa-angle-left pull-right"></i>
 360                 </span>
 361               </a>
 362               <ul class="treeview-menu">
 363                 <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
 364                 <li>
 365                   <a href="#"><i class="fa fa-circle-o"></i> Level Two
 366                     <span class="pull-right-container">
 367                       <i class="fa fa-angle-left pull-right"></i>
 368                     </span>
 369                   </a>
 370                   <ul class="treeview-menu">
 371                     <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
 372                     <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
 373                   </ul>
 374                 </li>
 375               </ul>
 376             </li>
 377             <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
 378           </ul>
 379         </li>
 380         <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
 381         <li class="header">LABELS</li>
 382         <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
 383         <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
 384         <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
 385       </ul>
 386     </section>
 387     <!-- /.sidebar -->
 388   </aside>
 389
 390   <!-- =============================================== -->
 391
 392   <!-- Content Wrapper. Contains page content -->
 393   <div class="content-wrapper">
 394     <!-- Content Header (Page header) -->
 395     <section class="content-header">
 396       <h1>
 397         Pace page
 398         <small>Loading example</small>
 399       </h1>
 400       <ol class="breadcrumb">
 401         <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
 402         <li><a href="#">Examples</a></li>
 403         <li class="active">Pace page</li>
 404       </ol>
 405     </section>
 406
 407     <!-- Main content -->
 408     <section class="content">
 409
 410       <!-- Default box -->
 411       <div class="box">
 412         <div class="box-header with-border">
 413           <h3 class="box-title">Title</h3>
 414
 415           <div class="box-tools pull-right">
 416             <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
 417               <i class="fa fa-minus"></i></button>
 418             <button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
 419               <i class="fa fa-times"></i></button>
 420           </div>
 421         </div>
 422         <div class="box-body">
 423           Pace loading works automatically on page. You can still implement it with ajax requests by adding this js:
 424           <br /><code>$(document).ajaxStart(function() { Pace.restart(); });</code>
 425           <br />
 426           <div class="row">
 427           <div class="col-xs-12 text-center">
 428           <button type="button" class="btn btn-default btn-lrg ajax" title="Ajax Request">
 429             <i class="fa fa-spin fa-refresh"></i>&nbsp; Get External Content
 430           </button>
 431           </div>
 432           </div>
 433             <div class="ajax-content">
 434             </div>
 435         </div>
 436         <!-- /.box-body -->
 437         <div class="box-footer">
 438           Footer
 439         </div>
 440         <!-- /.box-footer-->
 441       </div>
 442       <!-- /.box -->
 443
 444     </section>
 445     <!-- /.content -->
 446   </div>
 447   <!-- /.content-wrapper -->
 448
 449   <footer class="main-footer">
 450     <div class="pull-right hidden-xs">
 451       <b>Version</b> 2.3.7
 452     </div>
 453     <strong>Copyright &copy; 2014-2016 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights
 454     reserved.
 455   </footer>
 456
 457   <!-- Control Sidebar -->
 458   <aside class="control-sidebar control-sidebar-dark">
 459     <!-- Create the tabs -->
 460     <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
 461       <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
 462
 463       <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
 464     </ul>
 465     <!-- Tab panes -->
 466     <div class="tab-content">
 467       <!-- Home tab content -->
 468       <div class="tab-pane" id="control-sidebar-home-tab">
 469         <h3 class="control-sidebar-heading">Recent Activity</h3>
 470         <ul class="control-sidebar-menu">
 471           <li>
 472             <a href="javascript:void(0)">
 473               <i class="menu-icon fa fa-birthday-cake bg-red"></i>
 474
 475               <div class="menu-info">
 476                 <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
 477
 478                 <p>Will be 23 on April 24th</p>
 479               </div>
 480             </a>
 481           </li>
 482           <li>
 483             <a href="javascript:void(0)">
 484               <i class="menu-icon fa fa-user bg-yellow"></i>
 485
 486               <div class="menu-info">
 487                 <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
 488
 489                 <p>New phone +1(800)555-1234</p>
 490               </div>
 491             </a>
 492           </li>
 493           <li>
 494             <a href="javascript:void(0)">
 495               <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
 496
 497               <div class="menu-info">
 498                 <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
 499
 500                 <p>nora@example.com</p>
 501               </div>
 502             </a>
 503           </li>
 504           <li>
 505             <a href="javascript:void(0)">
 506               <i class="menu-icon fa fa-file-code-o bg-green"></i>
 507
 508               <div class="menu-info">
 509                 <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
 510
 511                 <p>Execution time 5 seconds</p>
 512               </div>
 513             </a>
 514           </li>
 515         </ul>
 516         <!-- /.control-sidebar-menu -->
 517
 518         <h3 class="control-sidebar-heading">Tasks Progress</h3>
 519         <ul class="control-sidebar-menu">
 520           <li>
 521             <a href="javascript:void(0)">
 522               <h4 class="control-sidebar-subheading">
 523                 Custom Template Design
 524                 <span class="label label-danger pull-right">70%</span>
 525               </h4>
 526
 527               <div class="progress progress-xxs">
 528                 <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
 529               </div>
 530             </a>
 531           </li>
 532           <li>
 533             <a href="javascript:void(0)">
 534               <h4 class="control-sidebar-subheading">
 535                 Update Resume
 536                 <span class="label label-success pull-right">95%</span>
 537               </h4>
 538
 539               <div class="progress progress-xxs">
 540                 <div class="progress-bar progress-bar-success" style="width: 95%"></div>
 541               </div>
 542             </a>
 543           </li>
 544           <li>
 545             <a href="javascript:void(0)">
 546               <h4 class="control-sidebar-subheading">
 547                 Laravel Integration
 548                 <span class="label label-warning pull-right">50%</span>
 549               </h4>
 550
 551               <div class="progress progress-xxs">
 552                 <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
 553               </div>
 554             </a>
 555           </li>
 556           <li>
 557             <a href="javascript:void(0)">
 558               <h4 class="control-sidebar-subheading">
 559                 Back End Framework
 560                 <span class="label label-primary pull-right">68%</span>
 561               </h4>
 562
 563               <div class="progress progress-xxs">
 564                 <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
 565               </div>
 566             </a>
 567           </li>
 568         </ul>
 569         <!-- /.control-sidebar-menu -->
 570
 571       </div>
 572       <!-- /.tab-pane -->
 573       <!-- Stats tab content -->
 574       <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
 575       <!-- /.tab-pane -->
 576       <!-- Settings tab content -->
 577       <div class="tab-pane" id="control-sidebar-settings-tab">
 578         <form method="post">
 579           <h3 class="control-sidebar-heading">General Settings</h3>
 580
 581           <div class="form-group">
 582             <label class="control-sidebar-subheading">
 583               Report panel usage
 584               <input type="checkbox" class="pull-right" checked>
 585             </label>
 586
 587             <p>
 588               Some information about this general settings option
 589             </p>
 590           </div>
 591           <!-- /.form-group -->
 592
 593           <div class="form-group">
 594             <label class="control-sidebar-subheading">
 595               Allow mail redirect
 596               <input type="checkbox" class="pull-right" checked>
 597             </label>
 598
 599             <p>
 600               Other sets of options are available
 601             </p>
 602           </div>
 603           <!-- /.form-group -->
 604
 605           <div class="form-group">
 606             <label class="control-sidebar-subheading">
 607               Expose author name in posts
 608               <input type="checkbox" class="pull-right" checked>
 609             </label>
 610
 611             <p>
 612               Allow the user to show his name in blog posts
 613             </p>
 614           </div>
 615           <!-- /.form-group -->
 616
 617           <h3 class="control-sidebar-heading">Chat Settings</h3>
 618
 619           <div class="form-group">
 620             <label class="control-sidebar-subheading">
 621               Show me as online
 622               <input type="checkbox" class="pull-right" checked>
 623             </label>
 624           </div>
 625           <!-- /.form-group -->
 626
 627           <div class="form-group">
 628             <label class="control-sidebar-subheading">
 629               Turn off notifications
 630               <input type="checkbox" class="pull-right">
 631             </label>
 632           </div>
 633           <!-- /.form-group -->
 634
 635           <div class="form-group">
 636             <label class="control-sidebar-subheading">
 637               Delete chat history
 638               <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
 639             </label>
 640           </div>
 641           <!-- /.form-group -->
 642         </form>
 643       </div>
 644       <!-- /.tab-pane -->
 645     </div>
 646   </aside>
 647   <!-- /.control-sidebar -->
 648   <!-- Add the sidebar's background. This div must be placed
 649        immediately after the control sidebar -->
 650   <div class="control-sidebar-bg"></div>
 651 </div>
 652 <!-- ./wrapper -->
 653
 654 <!-- jQuery 2.2.3 -->
 655 <script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>
 656 <!-- Bootstrap 3.3.6 -->
 657 <script src="../../bootstrap/js/bootstrap.min.js"></script>
 658 <!-- PACE -->
 659 <script src="../../plugins/pace/pace.min.js"></script>
 660 <!-- SlimScroll -->
 661 <script src="../../plugins/slimScroll/jquery.slimscroll.min.js"></script>
 662 <!-- FastClick -->
 663 <script src="../../plugins/fastclick/fastclick.js"></script>
 664 <!-- AdminLTE App -->
 665 <script src="../../dist/js/app.min.js"></script>
 666 <!-- AdminLTE for demo purposes -->
 667 <script src="../../dist/js/demo.js"></script>
 668 <!-- page script -->
 669 <script type="text/javascript">
 670         // To make Pace works on Ajax calls
 671         $(document).ajaxStart(function() { Pace.restart(); });
 672     $('.ajax').click(function(){
 673         $.ajax({url: '#', success: function(result){
 674             $('.ajax-content').html('<hr>Ajax Request Completed !');
 675         }});
 676     });
 677 </script>
 678 </body>
 679 </html>