src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/pages/UI/general.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 | General UI</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   <style>
  28     .color-palette {
  29       height: 35px;
  30       line-height: 35px;
  31       text-align: center;
  32     }
  33
  34     .color-palette-set {
  35       margin-bottom: 15px;
  36     }
  37
  38     .color-palette span {
  39       display: none;
  40       font-size: 12px;
  41     }
  42
  43     .color-palette:hover span {
  44       display: block;
  45     }
  46
  47     .color-palette-box h4 {
  48       position: absolute;
  49       top: 100%;
  50       left: 25px;
  51       margin-top: -40px;
  52       color: rgba(255, 255, 255, 0.8);
  53       font-size: 12px;
  54       display: block;
  55       z-index: 7;
  56     }
  57   </style>
  58 </head>
  59 <body class="hold-transition skin-blue sidebar-mini">
  60 <div class="wrapper">
  61
  62   <header class="main-header">
  63     <!-- Logo -->
  64     <a href="../../index2.html" class="logo">
  65       <!-- mini logo for sidebar mini 50x50 pixels -->
  66       <span class="logo-mini"><b>A</b>LT</span>
  67       <!-- logo for regular state and mobile devices -->
  68       <span class="logo-lg"><b>Admin</b>LTE</span>
  69     </a>
  70     <!-- Header Navbar: style can be found in header.less -->
  71     <nav class="navbar navbar-static-top">
  72       <!-- Sidebar toggle button-->
  73       <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
  74         <span class="sr-only">Toggle navigation</span>
  75         <span class="icon-bar"></span>
  76         <span class="icon-bar"></span>
  77         <span class="icon-bar"></span>
  78       </a>
  79
  80       <div class="navbar-custom-menu">
  81         <ul class="nav navbar-nav">
  82           <!-- Messages: style can be found in dropdown.less-->
  83           <li class="dropdown messages-menu">
  84             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  85               <i class="fa fa-envelope-o"></i>
  86               <span class="label label-success">4</span>
  87             </a>
  88             <ul class="dropdown-menu">
  89               <li class="header">You have 4 messages</li>
  90               <li>
  91                 <!-- inner menu: contains the actual data -->
  92                 <ul class="menu">
  93                   <li><!-- start message -->
  94                     <a href="#">
  95                       <div class="pull-left">
  96                         <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  97                       </div>
  98                       <h4>
  99                         Support Team
 100                         <small><i class="fa fa-clock-o"></i> 5 mins</small>
 101                       </h4>
 102                       <p>Why not buy a new awesome theme?</p>
 103                     </a>
 104                   </li>
 105                   <!-- end message -->
 106                   <li>
 107                     <a href="#">
 108                       <div class="pull-left">
 109                         <img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
 110                       </div>
 111                       <h4>
 112                         AdminLTE Design Team
 113                         <small><i class="fa fa-clock-o"></i> 2 hours</small>
 114                       </h4>
 115                       <p>Why not buy a new awesome theme?</p>
 116                     </a>
 117                   </li>
 118                   <li>
 119                     <a href="#">
 120                       <div class="pull-left">
 121                         <img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
 122                       </div>
 123                       <h4>
 124                         Developers
 125                         <small><i class="fa fa-clock-o"></i> Today</small>
 126                       </h4>
 127                       <p>Why not buy a new awesome theme?</p>
 128                     </a>
 129                   </li>
 130                   <li>
 131                     <a href="#">
 132                       <div class="pull-left">
 133                         <img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
 134                       </div>
 135                       <h4>
 136                         Sales Department
 137                         <small><i class="fa fa-clock-o"></i> Yesterday</small>
 138                       </h4>
 139                       <p>Why not buy a new awesome theme?</p>
 140                     </a>
 141                   </li>
 142                   <li>
 143                     <a href="#">
 144                       <div class="pull-left">
 145                         <img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
 146                       </div>
 147                       <h4>
 148                         Reviewers
 149                         <small><i class="fa fa-clock-o"></i> 2 days</small>
 150                       </h4>
 151                       <p>Why not buy a new awesome theme?</p>
 152                     </a>
 153                   </li>
 154                 </ul>
 155               </li>
 156               <li class="footer"><a href="#">See All Messages</a></li>
 157             </ul>
 158           </li>
 159           <!-- Notifications: style can be found in dropdown.less -->
 160           <li class="dropdown notifications-menu">
 161             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 162               <i class="fa fa-bell-o"></i>
 163               <span class="label label-warning">10</span>
 164             </a>
 165             <ul class="dropdown-menu">
 166               <li class="header">You have 10 notifications</li>
 167               <li>
 168                 <!-- inner menu: contains the actual data -->
 169                 <ul class="menu">
 170                   <li>
 171                     <a href="#">
 172                       <i class="fa fa-users text-aqua"></i> 5 new members joined today
 173                     </a>
 174                   </li>
 175                   <li>
 176                     <a href="#">
 177                       <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the
 178                       page and may cause design problems
 179                     </a>
 180                   </li>
 181                   <li>
 182                     <a href="#">
 183                       <i class="fa fa-users text-red"></i> 5 new members joined
 184                     </a>
 185                   </li>
 186
 187                   <li>
 188                     <a href="#">
 189                       <i class="fa fa-shopping-cart text-green"></i> 25 sales made
 190                     </a>
 191                   </li>
 192                   <li>
 193                     <a href="#">
 194                       <i class="fa fa-user text-red"></i> You changed your username
 195                     </a>
 196                   </li>
 197                 </ul>
 198               </li>
 199               <li class="footer"><a href="#">View all</a></li>
 200             </ul>
 201           </li>
 202           <!-- Tasks: style can be found in dropdown.less -->
 203           <li class="dropdown tasks-menu">
 204             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 205               <i class="fa fa-flag-o"></i>
 206               <span class="label label-danger">9</span>
 207             </a>
 208             <ul class="dropdown-menu">
 209               <li class="header">You have 9 tasks</li>
 210               <li>
 211                 <!-- inner menu: contains the actual data -->
 212                 <ul class="menu">
 213                   <li><!-- Task item -->
 214                     <a href="#">
 215                       <h3>
 216                         Design some buttons
 217                         <small class="pull-right">20%</small>
 218                       </h3>
 219                       <div class="progress progress-xs">
 220                         <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 221                           <span class="sr-only">20% Complete</span>
 222                         </div>
 223                       </div>
 224                     </a>
 225                   </li>
 226                   <!-- end task item -->
 227                   <li><!-- Task item -->
 228                     <a href="#">
 229                       <h3>
 230                         Create a nice theme
 231                         <small class="pull-right">40%</small>
 232                       </h3>
 233                       <div class="progress progress-xs">
 234                         <div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 235                           <span class="sr-only">40% Complete</span>
 236                         </div>
 237                       </div>
 238                     </a>
 239                   </li>
 240                   <!-- end task item -->
 241                   <li><!-- Task item -->
 242                     <a href="#">
 243                       <h3>
 244                         Some task I need to do
 245                         <small class="pull-right">60%</small>
 246                       </h3>
 247                       <div class="progress progress-xs">
 248                         <div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 249                           <span class="sr-only">60% Complete</span>
 250                         </div>
 251                       </div>
 252                     </a>
 253                   </li>
 254                   <!-- end task item -->
 255                   <li><!-- Task item -->
 256                     <a href="#">
 257                       <h3>
 258                         Make beautiful transitions
 259                         <small class="pull-right">80%</small>
 260                       </h3>
 261                       <div class="progress progress-xs">
 262                         <div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 263                           <span class="sr-only">80% Complete</span>
 264                         </div>
 265                       </div>
 266                     </a>
 267                   </li>
 268                   <!-- end task item -->
 269                 </ul>
 270               </li>
 271               <li class="footer">
 272                 <a href="#">View all tasks</a>
 273               </li>
 274             </ul>
 275           </li>
 276           <!-- User Account: style can be found in dropdown.less -->
 277           <li class="dropdown user user-menu">
 278             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 279               <img src="../../dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
 280               <span class="hidden-xs">Alexander Pierce</span>
 281             </a>
 282             <ul class="dropdown-menu">
 283               <!-- User image -->
 284               <li class="user-header">
 285                 <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 286
 287                 <p>
 288                   Alexander Pierce - Web Developer
 289                   <small>Member since Nov. 2012</small>
 290                 </p>
 291               </li>
 292               <!-- Menu Body -->
 293               <li class="user-body">
 294                 <div class="row">
 295                   <div class="col-xs-4 text-center">
 296                     <a href="#">Followers</a>
 297                   </div>
 298                   <div class="col-xs-4 text-center">
 299                     <a href="#">Sales</a>
 300                   </div>
 301                   <div class="col-xs-4 text-center">
 302                     <a href="#">Friends</a>
 303                   </div>
 304                 </div>
 305                 <!-- /.row -->
 306               </li>
 307               <!-- Menu Footer-->
 308               <li class="user-footer">
 309                 <div class="pull-left">
 310                   <a href="#" class="btn btn-default btn-flat">Profile</a>
 311                 </div>
 312                 <div class="pull-right">
 313                   <a href="#" class="btn btn-default btn-flat">Sign out</a>
 314                 </div>
 315               </li>
 316             </ul>
 317           </li>
 318           <!-- Control Sidebar Toggle Button -->
 319           <li>
 320             <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
 321           </li>
 322         </ul>
 323       </div>
 324     </nav>
 325   </header>
 326   <!-- Left side column. contains the logo and sidebar -->
 327   <aside class="main-sidebar">
 328     <!-- sidebar: style can be found in sidebar.less -->
 329     <section class="sidebar">
 330       <!-- Sidebar user panel -->
 331       <div class="user-panel">
 332         <div class="pull-left image">
 333           <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 334         </div>
 335         <div class="pull-left info">
 336           <p>Alexander Pierce</p>
 337           <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
 338         </div>
 339       </div>
 340       <!-- search form -->
 341       <form action="#" method="get" class="sidebar-form">
 342         <div class="input-group">
 343           <input type="text" name="q" class="form-control" placeholder="Search...">
 344               <span class="input-group-btn">
 345                 <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
 346                 </button>
 347               </span>
 348         </div>
 349       </form>
 350       <!-- /.search form -->
 351       <!-- sidebar menu: : style can be found in sidebar.less -->
 352       <ul class="sidebar-menu">
 353         <li class="header">MAIN NAVIGATION</li>
 354         <li class="treeview">
 355           <a href="#">
 356             <i class="fa fa-dashboard"></i> <span>Dashboard</span>
 357             <span class="pull-right-container">
 358               <i class="fa fa-angle-left pull-right"></i>
 359             </span>
 360           </a>
 361           <ul class="treeview-menu">
 362             <li><a href="../../index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
 363             <li><a href="../../index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
 364           </ul>
 365         </li>
 366         <li class="treeview">
 367           <a href="#">
 368             <i class="fa fa-files-o"></i>
 369             <span>Layout Options</span>
 370             <span class="pull-right-container">
 371               <span class="label label-primary pull-right">4</span>
 372             </span>
 373           </a>
 374           <ul class="treeview-menu">
 375             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
 376             <li><a href="../layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
 377             <li><a href="../layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
 378             <li><a href="../layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
 379           </ul>
 380         </li>
 381         <li>
 382           <a href="../widgets.html">
 383             <i class="fa fa-th"></i> <span>Widgets</span>
 384             <span class="pull-right-container">
 385               <small class="label pull-right bg-green">new</small>
 386             </span>
 387           </a>
 388         </li>
 389         <li class="treeview">
 390           <a href="#">
 391             <i class="fa fa-pie-chart"></i>
 392             <span>Charts</span>
 393             <span class="pull-right-container">
 394               <i class="fa fa-angle-left pull-right"></i>
 395             </span>
 396           </a>
 397           <ul class="treeview-menu">
 398             <li><a href="../charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
 399             <li><a href="../charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
 400             <li><a href="../charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
 401             <li><a href="../charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
 402           </ul>
 403         </li>
 404         <li class="treeview active">
 405           <a href="#">
 406             <i class="fa fa-laptop"></i>
 407             <span>UI Elements</span>
 408             <span class="pull-right-container">
 409               <i class="fa fa-angle-left pull-right"></i>
 410             </span>
 411           </a>
 412           <ul class="treeview-menu">
 413             <li class="active"><a href="general.html"><i class="fa fa-circle-o"></i> General</a></li>
 414             <li><a href="icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
 415             <li><a href="buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
 416             <li><a href="sliders.html"><i class="fa fa-circle-o"></i> Sliders</a></li>
 417             <li><a href="timeline.html"><i class="fa fa-circle-o"></i> Timeline</a></li>
 418             <li><a href="modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
 419           </ul>
 420         </li>
 421         <li class="treeview">
 422           <a href="#">
 423             <i class="fa fa-edit"></i> <span>Forms</span>
 424             <span class="pull-right-container">
 425               <i class="fa fa-angle-left pull-right"></i>
 426             </span>
 427           </a>
 428           <ul class="treeview-menu">
 429             <li><a href="../forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
 430             <li><a href="../forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
 431             <li><a href="../forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
 432           </ul>
 433         </li>
 434         <li class="treeview">
 435           <a href="#">
 436             <i class="fa fa-table"></i> <span>Tables</span>
 437             <span class="pull-right-container">
 438               <i class="fa fa-angle-left pull-right"></i>
 439             </span>
 440           </a>
 441           <ul class="treeview-menu">
 442             <li><a href="../tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li>
 443             <li><a href="../tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li>
 444           </ul>
 445         </li>
 446         <li>
 447           <a href="../calendar.html">
 448             <i class="fa fa-calendar"></i> <span>Calendar</span>
 449             <span class="pull-right-container">
 450               <small class="label pull-right bg-red">3</small>
 451               <small class="label pull-right bg-blue">17</small>
 452             </span>
 453           </a>
 454         </li>
 455         <li>
 456           <a href="../mailbox/mailbox.html">
 457             <i class="fa fa-envelope"></i> <span>Mailbox</span>
 458             <span class="pull-right-container">
 459               <small class="label pull-right bg-yellow">12</small>
 460               <small class="label pull-right bg-green">16</small>
 461               <small class="label pull-right bg-red">5</small>
 462             </span>
 463           </a>
 464         </li>
 465         <li class="treeview">
 466           <a href="#">
 467             <i class="fa fa-folder"></i> <span>Examples</span>
 468             <span class="pull-right-container">
 469               <i class="fa fa-angle-left pull-right"></i>
 470             </span>
 471           </a>
 472           <ul class="treeview-menu">
 473             <li><a href="../examples/invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
 474             <li><a href="../examples/profile.html"><i class="fa fa-circle-o"></i> Profile</a></li>
 475             <li><a href="../examples/login.html"><i class="fa fa-circle-o"></i> Login</a></li>
 476             <li><a href="../examples/register.html"><i class="fa fa-circle-o"></i> Register</a></li>
 477             <li><a href="../examples/lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
 478             <li><a href="../examples/404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
 479             <li><a href="../examples/500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
 480             <li><a href="../examples/blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
 481             <li><a href="../examples/pace.html"><i class="fa fa-circle-o"></i> Pace Page</a></li>
 482           </ul>
 483         </li>
 484         <li class="treeview">
 485           <a href="#">
 486             <i class="fa fa-share"></i> <span>Multilevel</span>
 487             <span class="pull-right-container">
 488               <i class="fa fa-angle-left pull-right"></i>
 489             </span>
 490           </a>
 491           <ul class="treeview-menu">
 492             <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
 493             <li>
 494               <a href="#"><i class="fa fa-circle-o"></i> Level One
 495                 <span class="pull-right-container">
 496                   <i class="fa fa-angle-left pull-right"></i>
 497                 </span>
 498               </a>
 499               <ul class="treeview-menu">
 500                 <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
 501                 <li>
 502                   <a href="#"><i class="fa fa-circle-o"></i> Level Two
 503                     <span class="pull-right-container">
 504                       <i class="fa fa-angle-left pull-right"></i>
 505                     </span>
 506                   </a>
 507                   <ul class="treeview-menu">
 508                     <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
 509                     <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
 510                   </ul>
 511                 </li>
 512               </ul>
 513             </li>
 514             <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
 515           </ul>
 516         </li>
 517         <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
 518         <li class="header">LABELS</li>
 519         <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
 520         <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
 521         <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
 522       </ul>
 523     </section>
 524     <!-- /.sidebar -->
 525   </aside>
 526
 527   <!-- Content Wrapper. Contains page content -->
 528   <div class="content-wrapper">
 529     <!-- Content Header (Page header) -->
 530     <section class="content-header">
 531       <h1>
 532         General UI
 533         <small>Preview of UI elements</small>
 534       </h1>
 535       <ol class="breadcrumb">
 536         <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
 537         <li><a href="#">UI</a></li>
 538         <li class="active">General</li>
 539       </ol>
 540     </section>
 541
 542     <!-- Main content -->
 543     <section class="content">
 544       <!-- COLOR PALETTE -->
 545       <div class="box box-default color-palette-box">
 546         <div class="box-header with-border">
 547           <h3 class="box-title"><i class="fa fa-tag"></i> Color Palette</h3>
 548         </div>
 549         <div class="box-body">
 550           <div class="row">
 551             <div class="col-sm-4 col-md-2">
 552               <h4 class="text-center">Primary</h4>
 553
 554               <div class="color-palette-set">
 555                 <div class="bg-light-blue disabled color-palette"><span>Disabled</span></div>
 556                 <div class="bg-light-blue color-palette"><span>#3c8dbc</span></div>
 557                 <div class="bg-light-blue-active color-palette"><span>Active</span></div>
 558               </div>
 559             </div>
 560             <!-- /.col -->
 561             <div class="col-sm-4 col-md-2">
 562               <h4 class="text-center">Info</h4>
 563
 564               <div class="color-palette-set">
 565                 <div class="bg-aqua disabled color-palette"><span>Disabled</span></div>
 566                 <div class="bg-aqua color-palette"><span>#00c0ef</span></div>
 567                 <div class="bg-aqua-active color-palette"><span>Active</span></div>
 568               </div>
 569             </div>
 570             <!-- /.col -->
 571             <div class="col-sm-4 col-md-2">
 572               <h4 class="text-center">Success</h4>
 573
 574               <div class="color-palette-set">
 575                 <div class="bg-green disabled color-palette"><span>Disabled</span></div>
 576                 <div class="bg-green color-palette"><span>#00a65a</span></div>
 577                 <div class="bg-green-active color-palette"><span>Active</span></div>
 578               </div>
 579             </div>
 580             <!-- /.col -->
 581             <div class="col-sm-4 col-md-2">
 582               <h4 class="text-center">Warning</h4>
 583
 584               <div class="color-palette-set">
 585                 <div class="bg-yellow disabled color-palette"><span>Disabled</span></div>
 586                 <div class="bg-yellow color-palette"><span>#f39c12</span></div>
 587                 <div class="bg-yellow-active color-palette"><span>Active</span></div>
 588               </div>
 589             </div>
 590             <!-- /.col -->
 591             <div class="col-sm-4 col-md-2">
 592               <h4 class="text-center">Danger</h4>
 593
 594               <div class="color-palette-set">
 595                 <div class="bg-red disabled color-palette"><span>Disabled</span></div>
 596                 <div class="bg-red color-palette"><span>#f56954</span></div>
 597                 <div class="bg-red-active color-palette"><span>Active</span></div>
 598               </div>
 599             </div>
 600             <!-- /.col -->
 601             <div class="col-sm-4 col-md-2">
 602               <h4 class="text-center">Gray</h4>
 603
 604               <div class="color-palette-set">
 605                 <div class="bg-gray disabled color-palette"><span>Disabled</span></div>
 606                 <div class="bg-gray color-palette"><span>#d2d6de</span></div>
 607                 <div class="bg-gray-active color-palette"><span>Active</span></div>
 608               </div>
 609             </div>
 610             <!-- /.col -->
 611           </div>
 612           <!-- /.row -->
 613           <div class="row">
 614             <div class="col-sm-4 col-md-2">
 615               <h4 class="text-center">Navy</h4>
 616
 617               <div class="color-palette-set">
 618                 <div class="bg-navy disabled color-palette"><span>Disabled</span></div>
 619                 <div class="bg-navy color-palette"><span>#001F3F</span></div>
 620                 <div class="bg-navy-active color-palette"><span>Active</span></div>
 621               </div>
 622             </div>
 623             <!-- /.col -->
 624             <div class="col-sm-4 col-md-2">
 625               <h4 class="text-center">Teal</h4>
 626
 627               <div class="color-palette-set">
 628                 <div class="bg-teal disabled color-palette"><span>Disabled</span></div>
 629                 <div class="bg-teal color-palette"><span>#39CCCC</span></div>
 630                 <div class="bg-teal-active color-palette"><span>Active</span></div>
 631               </div>
 632             </div>
 633             <!-- /.col -->
 634             <div class="col-sm-4 col-md-2">
 635               <h4 class="text-center">Purple</h4>
 636
 637               <div class="color-palette-set">
 638                 <div class="bg-purple disabled color-palette"><span>Disabled</span></div>
 639                 <div class="bg-purple color-palette"><span>#605ca8</span></div>
 640                 <div class="bg-purple-active color-palette"><span>Active</span></div>
 641               </div>
 642             </div>
 643             <!-- /.col -->
 644             <div class="col-sm-4 col-md-2">
 645               <h4 class="text-center">Orange</h4>
 646
 647               <div class="color-palette-set">
 648                 <div class="bg-orange disabled color-palette"><span>Disabled</span></div>
 649                 <div class="bg-orange color-palette"><span>#ff851b</span></div>
 650                 <div class="bg-orange-active color-palette"><span>Active</span></div>
 651               </div>
 652             </div>
 653             <!-- /.col -->
 654             <div class="col-sm-4 col-md-2">
 655               <h4 class="text-center">Maroon</h4>
 656
 657               <div class="color-palette-set">
 658                 <div class="bg-maroon disabled color-palette"><span>Disabled</span></div>
 659                 <div class="bg-maroon color-palette"><span>#D81B60</span></div>
 660                 <div class="bg-maroon-active color-palette"><span>Active</span></div>
 661               </div>
 662             </div>
 663             <!-- /.col -->
 664             <div class="col-sm-4 col-md-2">
 665               <h4 class="text-center">Black</h4>
 666
 667               <div class="color-palette-set">
 668                 <div class="bg-black disabled color-palette"><span>Disabled</span></div>
 669                 <div class="bg-black color-palette"><span>#111111</span></div>
 670                 <div class="bg-black-active color-palette"><span>Active</span></div>
 671               </div>
 672             </div>
 673             <!-- /.col -->
 674           </div>
 675           <!-- /.row -->
 676         </div>
 677         <!-- /.box-body -->
 678       </div>
 679       <!-- /.box -->
 680       <!-- START ALERTS AND CALLOUTS -->
 681       <h2 class="page-header">Alerts and Callouts</h2>
 682
 683       <div class="row">
 684         <div class="col-md-6">
 685           <div class="box box-default">
 686             <div class="box-header with-border">
 687               <i class="fa fa-warning"></i>
 688
 689               <h3 class="box-title">Alerts</h3>
 690             </div>
 691             <!-- /.box-header -->
 692             <div class="box-body">
 693               <div class="alert alert-danger alert-dismissible">
 694                 <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
 695                 <h4><i class="icon fa fa-ban"></i> Alert!</h4>
 696                 Danger alert preview. This alert is dismissable. A wonderful serenity has taken possession of my entire
 697                 soul, like these sweet mornings of spring which I enjoy with my whole heart.
 698               </div>
 699               <div class="alert alert-info alert-dismissible">
 700                 <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
 701                 <h4><i class="icon fa fa-info"></i> Alert!</h4>
 702                 Info alert preview. This alert is dismissable.
 703               </div>
 704               <div class="alert alert-warning alert-dismissible">
 705                 <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
 706                 <h4><i class="icon fa fa-warning"></i> Alert!</h4>
 707                 Warning alert preview. This alert is dismissable.
 708               </div>
 709               <div class="alert alert-success alert-dismissible">
 710                 <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
 711                 <h4><i class="icon fa fa-check"></i> Alert!</h4>
 712                 Success alert preview. This alert is dismissable.
 713               </div>
 714             </div>
 715             <!-- /.box-body -->
 716           </div>
 717           <!-- /.box -->
 718         </div>
 719         <!-- /.col -->
 720
 721         <div class="col-md-6">
 722           <div class="box box-default">
 723             <div class="box-header with-border">
 724               <i class="fa fa-bullhorn"></i>
 725
 726               <h3 class="box-title">Callouts</h3>
 727             </div>
 728             <!-- /.box-header -->
 729             <div class="box-body">
 730               <div class="callout callout-danger">
 731                 <h4>I am a danger callout!</h4>
 732
 733                 <p>There is a problem that we need to fix. A wonderful serenity has taken possession of my entire soul,
 734                   like these sweet mornings of spring which I enjoy with my whole heart.</p>
 735               </div>
 736               <div class="callout callout-info">
 737                 <h4>I am an info callout!</h4>
 738
 739                 <p>Follow the steps to continue to payment.</p>
 740               </div>
 741               <div class="callout callout-warning">
 742                 <h4>I am a warning callout!</h4>
 743
 744                 <p>This is a yellow callout.</p>
 745               </div>
 746               <div class="callout callout-success">
 747                 <h4>I am a success callout!</h4>
 748
 749                 <p>This is a green callout.</p>
 750               </div>
 751             </div>
 752             <!-- /.box-body -->
 753           </div>
 754           <!-- /.box -->
 755         </div>
 756         <!-- /.col -->
 757       </div>
 758       <!-- /.row -->
 759       <!-- END ALERTS AND CALLOUTS -->
 760       <!-- START CUSTOM TABS -->
 761       <h2 class="page-header">AdminLTE Custom Tabs</h2>
 762
 763       <div class="row">
 764         <div class="col-md-6">
 765           <!-- Custom Tabs -->
 766           <div class="nav-tabs-custom">
 767             <ul class="nav nav-tabs">
 768               <li class="active"><a href="#tab_1" data-toggle="tab">Tab 1</a></li>
 769               <li><a href="#tab_2" data-toggle="tab">Tab 2</a></li>
 770               <li><a href="#tab_3" data-toggle="tab">Tab 3</a></li>
 771               <li class="dropdown">
 772                 <a class="dropdown-toggle" data-toggle="dropdown" href="#">
 773                   Dropdown <span class="caret"></span>
 774                 </a>
 775                 <ul class="dropdown-menu">
 776                   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
 777                   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
 778                   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
 779                   <li role="presentation" class="divider"></li>
 780                   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
 781                 </ul>
 782               </li>
 783               <li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-gear"></i></a></li>
 784             </ul>
 785             <div class="tab-content">
 786               <div class="tab-pane active" id="tab_1">
 787                 <b>How to use:</b>
 788
 789                 <p>Exactly like the original bootstrap tabs except you should use
 790                   the custom wrapper <code>.nav-tabs-custom</code> to achieve this style.</p>
 791                 A wonderful serenity has taken possession of my entire soul,
 792                 like these sweet mornings of spring which I enjoy with my whole heart.
 793                 I am alone, and feel the charm of existence in this spot,
 794                 which was created for the bliss of souls like mine. I am so happy,
 795                 my dear friend, so absorbed in the exquisite sense of mere tranquil existence,
 796                 that I neglect my talents. I should be incapable of drawing a single stroke
 797                 at the present moment; and yet I feel that I never was a greater artist than now.
 798               </div>
 799               <!-- /.tab-pane -->
 800               <div class="tab-pane" id="tab_2">
 801                 The European languages are members of the same family. Their separate existence is a myth.
 802                 For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ
 803                 in their grammar, their pronunciation and their most common words. Everyone realizes why a
 804                 new common language would be desirable: one could refuse to pay expensive translators. To
 805                 achieve this, it would be necessary to have uniform grammar, pronunciation and more common
 806                 words. If several languages coalesce, the grammar of the resulting language is more simple
 807                 and regular than that of the individual languages.
 808               </div>
 809               <!-- /.tab-pane -->
 810               <div class="tab-pane" id="tab_3">
 811                 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 812                 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
 813                 when an unknown printer took a galley of type and scrambled it to make a type specimen book.
 814                 It has survived not only five centuries, but also the leap into electronic typesetting,
 815                 remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
 816                 sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
 817                 like Aldus PageMaker including versions of Lorem Ipsum.
 818               </div>
 819               <!-- /.tab-pane -->
 820             </div>
 821             <!-- /.tab-content -->
 822           </div>
 823           <!-- nav-tabs-custom -->
 824         </div>
 825         <!-- /.col -->
 826
 827         <div class="col-md-6">
 828           <!-- Custom Tabs (Pulled to the right) -->
 829           <div class="nav-tabs-custom">
 830             <ul class="nav nav-tabs pull-right">
 831               <li class="active"><a href="#tab_1-1" data-toggle="tab">Tab 1</a></li>
 832               <li><a href="#tab_2-2" data-toggle="tab">Tab 2</a></li>
 833               <li><a href="#tab_3-2" data-toggle="tab">Tab 3</a></li>
 834               <li class="dropdown">
 835                 <a class="dropdown-toggle" data-toggle="dropdown" href="#">
 836                   Dropdown <span class="caret"></span>
 837                 </a>
 838                 <ul class="dropdown-menu">
 839                   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
 840                   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
 841                   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
 842                   <li role="presentation" class="divider"></li>
 843                   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
 844                 </ul>
 845               </li>
 846               <li class="pull-left header"><i class="fa fa-th"></i> Custom Tabs</li>
 847             </ul>
 848             <div class="tab-content">
 849               <div class="tab-pane active" id="tab_1-1">
 850                 <b>How to use:</b>
 851
 852                 <p>Exactly like the original bootstrap tabs except you should use
 853                   the custom wrapper <code>.nav-tabs-custom</code> to achieve this style.</p>
 854                 A wonderful serenity has taken possession of my entire soul,
 855                 like these sweet mornings of spring which I enjoy with my whole heart.
 856                 I am alone, and feel the charm of existence in this spot,
 857                 which was created for the bliss of souls like mine. I am so happy,
 858                 my dear friend, so absorbed in the exquisite sense of mere tranquil existence,
 859                 that I neglect my talents. I should be incapable of drawing a single stroke
 860                 at the present moment; and yet I feel that I never was a greater artist than now.
 861               </div>
 862               <!-- /.tab-pane -->
 863               <div class="tab-pane" id="tab_2-2">
 864                 The European languages are members of the same family. Their separate existence is a myth.
 865                 For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ
 866                 in their grammar, their pronunciation and their most common words. Everyone realizes why a
 867                 new common language would be desirable: one could refuse to pay expensive translators. To
 868                 achieve this, it would be necessary to have uniform grammar, pronunciation and more common
 869                 words. If several languages coalesce, the grammar of the resulting language is more simple
 870                 and regular than that of the individual languages.
 871               </div>
 872               <!-- /.tab-pane -->
 873               <div class="tab-pane" id="tab_3-2">
 874                 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 875                 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
 876                 when an unknown printer took a galley of type and scrambled it to make a type specimen book.
 877                 It has survived not only five centuries, but also the leap into electronic typesetting,
 878                 remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
 879                 sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
 880                 like Aldus PageMaker including versions of Lorem Ipsum.
 881               </div>
 882               <!-- /.tab-pane -->
 883             </div>
 884             <!-- /.tab-content -->
 885           </div>
 886           <!-- nav-tabs-custom -->
 887         </div>
 888         <!-- /.col -->
 889       </div>
 890       <!-- /.row -->
 891       <!-- END CUSTOM TABS -->
 892       <!-- START PROGRESS BARS -->
 893       <h2 class="page-header">Progress Bars</h2>
 894
 895       <div class="row">
 896         <div class="col-md-6">
 897           <div class="box box-solid">
 898             <div class="box-header with-border">
 899               <h3 class="box-title">Progress Bars Different Sizes</h3>
 900             </div>
 901             <!-- /.box-header -->
 902             <div class="box-body">
 903               <p><code>.progress</code></p>
 904
 905               <div class="progress">
 906                 <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
 907                   <span class="sr-only">40% Complete (success)</span>
 908                 </div>
 909               </div>
 910               <p>Class: <code>.sm</code></p>
 911
 912               <div class="progress progress-sm active">
 913                 <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
 914                   <span class="sr-only">20% Complete</span>
 915                 </div>
 916               </div>
 917               <p>Class: <code>.xs</code></p>
 918
 919               <div class="progress progress-xs">
 920                 <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
 921                   <span class="sr-only">60% Complete (warning)</span>
 922                 </div>
 923               </div>
 924               <p>Class: <code>.xxs</code></p>
 925
 926               <div class="progress progress-xxs">
 927                 <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
 928                   <span class="sr-only">60% Complete (warning)</span>
 929                 </div>
 930               </div>
 931             </div>
 932             <!-- /.box-body -->
 933           </div>
 934           <!-- /.box -->
 935         </div>
 936         <!-- /.col (left) -->
 937         <div class="col-md-6">
 938           <div class="box box-solid">
 939             <div class="box-header with-border">
 940               <h3 class="box-title">Progress bars</h3>
 941             </div>
 942             <!-- /.box-header -->
 943             <div class="box-body">
 944               <div class="progress">
 945                 <div class="progress-bar progress-bar-green" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
 946                   <span class="sr-only">40% Complete (success)</span>
 947                 </div>
 948               </div>
 949               <div class="progress">
 950                 <div class="progress-bar progress-bar-aqua" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
 951                   <span class="sr-only">20% Complete</span>
 952                 </div>
 953               </div>
 954               <div class="progress">
 955                 <div class="progress-bar progress-bar-yellow" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
 956                   <span class="sr-only">60% Complete (warning)</span>
 957                 </div>
 958               </div>
 959               <div class="progress">
 960                 <div class="progress-bar progress-bar-red" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
 961                   <span class="sr-only">80% Complete</span>
 962                 </div>
 963               </div>
 964             </div>
 965             <!-- /.box-body -->
 966           </div>
 967           <!-- /.box -->
 968         </div>
 969         <!-- /.col (right) -->
 970       </div>
 971       <!-- /.row -->
 972       <div class="row">
 973         <div class="col-md-6">
 974           <div class="box box-solid">
 975             <div class="box-header with-border">
 976               <h3 class="box-title">Vertical Progress Bars Different Sizes</h3>
 977             </div>
 978             <!-- /.box-header -->
 979             <div class="box-body text-center">
 980               <p>By adding the class <code>.vertical</code> and <code>.progress-sm</code>, <code>.progress-xs</code> or
 981                 <code>.progress-xxs</code> we achieve:</p>
 982
 983               <div class="progress vertical active">
 984                 <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 40%">
 985                   <span class="sr-only">40%</span>
 986                 </div>
 987               </div>
 988               <div class="progress vertical progress-sm">
 989                 <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="height: 100%">
 990                   <span class="sr-only">100%</span>
 991                 </div>
 992               </div>
 993               <div class="progress vertical progress-xs">
 994                 <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%">
 995                   <span class="sr-only">60%</span>
 996                 </div>
 997               </div>
 998               <div class="progress vertical progress-xxs">
 999                 <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%">
1000                   <span class="sr-only">60%</span>
1001                 </div>
1002               </div>
1003             </div>
1004             <!-- /.box-body -->
1005           </div>
1006           <!-- /.box -->
1007         </div>
1008         <!-- /.col (left) -->
1009         <div class="col-md-6">
1010           <div class="box box-solid">
1011             <div class="box-header with-border">
1012               <h3 class="box-title">Vertical Progress bars</h3>
1013             </div>
1014             <!-- /.box-header -->
1015             <div class="box-body text-center">
1016               <p>By adding the class <code>.vertical</code> we achieve:</p>
1017
1018               <div class="progress vertical">
1019                 <div class="progress-bar progress-bar-green" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 40%">
1020                   <span class="sr-only">40%</span>
1021                 </div>
1022               </div>
1023               <div class="progress vertical">
1024                 <div class="progress-bar progress-bar-aqua" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="height: 20%">
1025                   <span class="sr-only">20%</span>
1026                 </div>
1027               </div>
1028               <div class="progress vertical">
1029                 <div class="progress-bar progress-bar-yellow" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%">
1030                   <span class="sr-only">60%</span>
1031                 </div>
1032               </div>
1033               <div class="progress vertical">
1034                 <div class="progress-bar progress-bar-red" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="height: 80%">
1035                   <span class="sr-only">80%</span>
1036                 </div>
1037               </div>
1038             </div>
1039             <!-- /.box-body -->
1040           </div>
1041           <!-- /.box -->
1042         </div>
1043         <!-- /.col (right) -->
1044       </div>
1045       <!-- /.row -->
1046       <!-- END PROGRESS BARS -->
1047
1048       <!-- START ACCORDION & CAROUSEL-->
1049       <h2 class="page-header">Bootstrap Accordion & Carousel</h2>
1050
1051       <div class="row">
1052         <div class="col-md-6">
1053           <div class="box box-solid">
1054             <div class="box-header with-border">
1055               <h3 class="box-title">Collapsible Accordion</h3>
1056             </div>
1057             <!-- /.box-header -->
1058             <div class="box-body">
1059               <div class="box-group" id="accordion">
1060                 <!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
1061                 <div class="panel box box-primary">
1062                   <div class="box-header with-border">
1063                     <h4 class="box-title">
1064                       <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
1065                         Collapsible Group Item #1
1066                       </a>
1067                     </h4>
1068                   </div>
1069                   <div id="collapseOne" class="panel-collapse collapse in">
1070                     <div class="box-body">
1071                       Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
1072                       wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
1073                       eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
1074                       assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
1075                       nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
1076                       farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
1077                       labore sustainable VHS.
1078                     </div>
1079                   </div>
1080                 </div>
1081                 <div class="panel box box-danger">
1082                   <div class="box-header with-border">
1083                     <h4 class="box-title">
1084                       <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
1085                         Collapsible Group Danger
1086                       </a>
1087                     </h4>
1088                   </div>
1089                   <div id="collapseTwo" class="panel-collapse collapse">
1090                     <div class="box-body">
1091                       Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
1092                       wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
1093                       eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
1094                       assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
1095                       nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
1096                       farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
1097                       labore sustainable VHS.
1098                     </div>
1099                   </div>
1100                 </div>
1101                 <div class="panel box box-success">
1102                   <div class="box-header with-border">
1103                     <h4 class="box-title">
1104                       <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
1105                         Collapsible Group Success
1106                       </a>
1107                     </h4>
1108                   </div>
1109                   <div id="collapseThree" class="panel-collapse collapse">
1110                     <div class="box-body">
1111                       Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
1112                       wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
1113                       eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
1114                       assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
1115                       nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
1116                       farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
1117                       labore sustainable VHS.
1118                     </div>
1119                   </div>
1120                 </div>
1121               </div>
1122             </div>
1123             <!-- /.box-body -->
1124           </div>
1125           <!-- /.box -->
1126         </div>
1127         <!-- /.col -->
1128         <div class="col-md-6">
1129           <div class="box box-solid">
1130             <div class="box-header with-border">
1131               <h3 class="box-title">Carousel</h3>
1132             </div>
1133             <!-- /.box-header -->
1134             <div class="box-body">
1135               <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
1136                 <ol class="carousel-indicators">
1137                   <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
1138                   <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
1139                   <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
1140                 </ol>
1141                 <div class="carousel-inner">
1142                   <div class="item active">
1143                     <img src="http://placehold.it/900x500/39CCCC/ffffff&text=I+Love+Bootstrap" alt="First slide">
1144
1145                     <div class="carousel-caption">
1146                       First Slide
1147                     </div>
1148                   </div>
1149                   <div class="item">
1150                     <img src="http://placehold.it/900x500/3c8dbc/ffffff&text=I+Love+Bootstrap" alt="Second slide">
1151
1152                     <div class="carousel-caption">
1153                       Second Slide
1154                     </div>
1155                   </div>
1156                   <div class="item">
1157                     <img src="http://placehold.it/900x500/f39c12/ffffff&text=I+Love+Bootstrap" alt="Third slide">
1158
1159                     <div class="carousel-caption">
1160                       Third Slide
1161                     </div>
1162                   </div>
1163                 </div>
1164                 <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
1165                   <span class="fa fa-angle-left"></span>
1166                 </a>
1167                 <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
1168                   <span class="fa fa-angle-right"></span>
1169                 </a>
1170               </div>
1171             </div>
1172             <!-- /.box-body -->
1173           </div>
1174           <!-- /.box -->
1175         </div>
1176         <!-- /.col -->
1177       </div>
1178       <!-- /.row -->
1179       <!-- END ACCORDION & CAROUSEL-->
1180
1181       <!-- START TYPOGRAPHY -->
1182       <h2 class="page-header">Typography</h2>
1183
1184       <div class="row">
1185         <div class="col-md-6">
1186           <div class="box box-solid">
1187             <div class="box-header with-border">
1188               <i class="fa fa-text-width"></i>
1189
1190               <h3 class="box-title">Headlines</h3>
1191             </div>
1192             <!-- /.box-header -->
1193             <div class="box-body">
1194               <h1>h1. Bootstrap heading</h1>
1195
1196               <h2>h2. Bootstrap heading</h2>
1197
1198               <h3>h3. Bootstrap heading</h3>
1199               <h4>h4. Bootstrap heading</h4>
1200               <h5>h5. Bootstrap heading</h5>
1201               <h6>h6. Bootstrap heading</h6>
1202             </div>
1203             <!-- /.box-body -->
1204           </div>
1205           <!-- /.box -->
1206         </div>
1207         <!-- ./col -->
1208         <div class="col-md-6">
1209           <div class="box box-solid">
1210             <div class="box-header with-border">
1211               <i class="fa fa-text-width"></i>
1212
1213               <h3 class="box-title">Text Emphasis</h3>
1214             </div>
1215             <!-- /.box-header -->
1216             <div class="box-body">
1217               <p class="lead">Lead to emphasize importance</p>
1218
1219               <p class="text-green">Text green to emphasize success</p>
1220
1221               <p class="text-aqua">Text aqua to emphasize info</p>
1222
1223               <p class="text-light-blue">Text light blue to emphasize info (2)</p>
1224
1225               <p class="text-red">Text red to emphasize danger</p>
1226
1227               <p class="text-yellow">Text yellow to emphasize warning</p>
1228
1229               <p class="text-muted">Text muted to emphasize general</p>
1230             </div>
1231             <!-- /.box-body -->
1232           </div>
1233           <!-- /.box -->
1234         </div>
1235         <!-- ./col -->
1236       </div>
1237       <!-- /.row -->
1238
1239       <div class="row">
1240         <div class="col-md-6">
1241           <div class="box box-solid">
1242             <div class="box-header with-border">
1243               <i class="fa fa-text-width"></i>
1244
1245               <h3 class="box-title">Block Quotes</h3>
1246             </div>
1247             <!-- /.box-header -->
1248             <div class="box-body">
1249               <blockquote>
1250                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
1251                 <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
1252               </blockquote>
1253             </div>
1254             <!-- /.box-body -->
1255           </div>
1256           <!-- /.box -->
1257         </div>
1258         <!-- ./col -->
1259         <div class="col-md-6">
1260           <div class="box box-solid">
1261             <div class="box-header with-border">
1262               <i class="fa fa-text-width"></i>
1263
1264               <h3 class="box-title">Block Quotes Pulled Right</h3>
1265             </div>
1266             <!-- /.box-header -->
1267             <div class="box-body clearfix">
1268               <blockquote class="pull-right">
1269                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
1270                 <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
1271               </blockquote>
1272             </div>
1273             <!-- /.box-body -->
1274           </div>
1275           <!-- /.box -->
1276         </div>
1277         <!-- ./col -->
1278       </div>
1279       <!-- /.row -->
1280
1281       <div class="row">
1282         <div class="col-md-4">
1283           <div class="box box-solid">
1284             <div class="box-header with-border">
1285               <i class="fa fa-text-width"></i>
1286
1287               <h3 class="box-title">Unordered List</h3>
1288             </div>
1289             <!-- /.box-header -->
1290             <div class="box-body">
1291               <ul>
1292                 <li>Lorem ipsum dolor sit amet</li>
1293                 <li>Consectetur adipiscing elit</li>
1294                 <li>Integer molestie lorem at massa</li>
1295                 <li>Facilisis in pretium nisl aliquet</li>
1296                 <li>Nulla volutpat aliquam velit
1297                   <ul>
1298                     <li>Phasellus iaculis neque</li>
1299                     <li>Purus sodales ultricies</li>
1300                     <li>Vestibulum laoreet porttitor sem</li>
1301                     <li>Ac tristique libero volutpat at</li>
1302                   </ul>
1303                 </li>
1304                 <li>Faucibus porta lacus fringilla vel</li>
1305                 <li>Aenean sit amet erat nunc</li>
1306                 <li>Eget porttitor lorem</li>
1307               </ul>
1308             </div>
1309             <!-- /.box-body -->
1310           </div>
1311           <!-- /.box -->
1312         </div>
1313         <!-- ./col -->
1314         <div class="col-md-4">
1315           <div class="box box-solid">
1316             <div class="box-header with-border">
1317               <i class="fa fa-text-width"></i>
1318
1319               <h3 class="box-title">Ordered Lists</h3>
1320             </div>
1321             <!-- /.box-header -->
1322             <div class="box-body">
1323               <ol>
1324                 <li>Lorem ipsum dolor sit amet</li>
1325                 <li>Consectetur adipiscing elit</li>
1326                 <li>Integer molestie lorem at massa</li>
1327                 <li>Facilisis in pretium nisl aliquet</li>
1328                 <li>Nulla volutpat aliquam velit
1329                   <ol>
1330                     <li>Phasellus iaculis neque</li>
1331                     <li>Purus sodales ultricies</li>
1332                     <li>Vestibulum laoreet porttitor sem</li>
1333                     <li>Ac tristique libero volutpat at</li>
1334                   </ol>
1335                 </li>
1336                 <li>Faucibus porta lacus fringilla vel</li>
1337                 <li>Aenean sit amet erat nunc</li>
1338                 <li>Eget porttitor lorem</li>
1339               </ol>
1340             </div>
1341             <!-- /.box-body -->
1342           </div>
1343           <!-- /.box -->
1344         </div>
1345         <!-- ./col -->
1346         <div class="col-md-4">
1347           <div class="box box-solid">
1348             <div class="box-header with-border">
1349               <i class="fa fa-text-width"></i>
1350
1351               <h3 class="box-title">Unstyled List</h3>
1352             </div>
1353             <!-- /.box-header -->
1354             <div class="box-body">
1355               <ul class="list-unstyled">
1356                 <li>Lorem ipsum dolor sit amet</li>
1357                 <li>Consectetur adipiscing elit</li>
1358                 <li>Integer molestie lorem at massa</li>
1359                 <li>Facilisis in pretium nisl aliquet</li>
1360                 <li>Nulla volutpat aliquam velit
1361                   <ul>
1362                     <li>Phasellus iaculis neque</li>
1363                     <li>Purus sodales ultricies</li>
1364                     <li>Vestibulum laoreet porttitor sem</li>
1365                     <li>Ac tristique libero volutpat at</li>
1366                   </ul>
1367                 </li>
1368                 <li>Faucibus porta lacus fringilla vel</li>
1369                 <li>Aenean sit amet erat nunc</li>
1370                 <li>Eget porttitor lorem</li>
1371               </ul>
1372             </div>
1373             <!-- /.box-body -->
1374           </div>
1375           <!-- /.box -->
1376         </div>
1377         <!-- ./col -->
1378       </div>
1379       <!-- /.row -->
1380
1381       <div class="row">
1382         <div class="col-md-6">
1383           <div class="box box-solid">
1384             <div class="box-header with-border">
1385               <i class="fa fa-text-width"></i>
1386
1387               <h3 class="box-title">Description</h3>
1388             </div>
1389             <!-- /.box-header -->
1390             <div class="box-body">
1391               <dl>
1392                 <dt>Description lists</dt>
1393                 <dd>A description list is perfect for defining terms.</dd>
1394                 <dt>Euismod</dt>
1395                 <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
1396                 <dd>Donec id elit non mi porta gravida at eget metus.</dd>
1397                 <dt>Malesuada porta</dt>
1398                 <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
1399               </dl>
1400             </div>
1401             <!-- /.box-body -->
1402           </div>
1403           <!-- /.box -->
1404         </div>
1405         <!-- ./col -->
1406         <div class="col-md-6">
1407           <div class="box box-solid">
1408             <div class="box-header with-border">
1409               <i class="fa fa-text-width"></i>
1410
1411               <h3 class="box-title">Description Horizontal</h3>
1412             </div>
1413             <!-- /.box-header -->
1414             <div class="box-body">
1415               <dl class="dl-horizontal">
1416                 <dt>Description lists</dt>
1417                 <dd>A description list is perfect for defining terms.</dd>
1418                 <dt>Euismod</dt>
1419                 <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
1420                 <dd>Donec id elit non mi porta gravida at eget metus.</dd>
1421                 <dt>Malesuada porta</dt>
1422                 <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
1423                 <dt>Felis euismod semper eget lacinia</dt>
1424                 <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
1425                   sit amet risus.
1426                 </dd>
1427               </dl>
1428             </div>
1429             <!-- /.box-body -->
1430           </div>
1431           <!-- /.box -->
1432         </div>
1433         <!-- ./col -->
1434       </div>
1435       <!-- /.row -->
1436       <!-- END TYPOGRAPHY -->
1437
1438     </section>
1439     <!-- /.content -->
1440   </div>
1441   <!-- /.content-wrapper -->
1442   <footer class="main-footer">
1443     <div class="pull-right hidden-xs">
1444       <b>Version</b> 2.3.7
1445     </div>
1446     <strong>Copyright &copy; 2014-2016 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights
1447     reserved.
1448   </footer>
1449
1450   <!-- Control Sidebar -->
1451   <aside class="control-sidebar control-sidebar-dark">
1452     <!-- Create the tabs -->
1453     <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
1454       <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
1455
1456       <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
1457     </ul>
1458     <!-- Tab panes -->
1459     <div class="tab-content">
1460       <!-- Home tab content -->
1461       <div class="tab-pane" id="control-sidebar-home-tab">
1462         <h3 class="control-sidebar-heading">Recent Activity</h3>
1463         <ul class="control-sidebar-menu">
1464           <li>
1465             <a href="javascript:void(0)">
1466               <i class="menu-icon fa fa-birthday-cake bg-red"></i>
1467
1468               <div class="menu-info">
1469                 <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
1470
1471                 <p>Will be 23 on April 24th</p>
1472               </div>
1473             </a>
1474           </li>
1475           <li>
1476             <a href="javascript:void(0)">
1477               <i class="menu-icon fa fa-user bg-yellow"></i>
1478
1479               <div class="menu-info">
1480                 <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
1481
1482                 <p>New phone +1(800)555-1234</p>
1483               </div>
1484             </a>
1485           </li>
1486           <li>
1487             <a href="javascript:void(0)">
1488               <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
1489
1490               <div class="menu-info">
1491                 <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
1492
1493                 <p>nora@example.com</p>
1494               </div>
1495             </a>
1496           </li>
1497           <li>
1498             <a href="javascript:void(0)">
1499               <i class="menu-icon fa fa-file-code-o bg-green"></i>
1500
1501               <div class="menu-info">
1502                 <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
1503
1504                 <p>Execution time 5 seconds</p>
1505               </div>
1506             </a>
1507           </li>
1508         </ul>
1509         <!-- /.control-sidebar-menu -->
1510
1511         <h3 class="control-sidebar-heading">Tasks Progress</h3>
1512         <ul class="control-sidebar-menu">
1513           <li>
1514             <a href="javascript:void(0)">
1515               <h4 class="control-sidebar-subheading">
1516                 Custom Template Design
1517                 <span class="label label-danger pull-right">70%</span>
1518               </h4>
1519
1520               <div class="progress progress-xxs">
1521                 <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
1522               </div>
1523             </a>
1524           </li>
1525           <li>
1526             <a href="javascript:void(0)">
1527               <h4 class="control-sidebar-subheading">
1528                 Update Resume
1529                 <span class="label label-success pull-right">95%</span>
1530               </h4>
1531
1532               <div class="progress progress-xxs">
1533                 <div class="progress-bar progress-bar-success" style="width: 95%"></div>
1534               </div>
1535             </a>
1536           </li>
1537           <li>
1538             <a href="javascript:void(0)">
1539               <h4 class="control-sidebar-subheading">
1540                 Laravel Integration
1541                 <span class="label label-warning pull-right">50%</span>
1542               </h4>
1543
1544               <div class="progress progress-xxs">
1545                 <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
1546               </div>
1547             </a>
1548           </li>
1549           <li>
1550             <a href="javascript:void(0)">
1551               <h4 class="control-sidebar-subheading">
1552                 Back End Framework
1553                 <span class="label label-primary pull-right">68%</span>
1554               </h4>
1555
1556               <div class="progress progress-xxs">
1557                 <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
1558               </div>
1559             </a>
1560           </li>
1561         </ul>
1562         <!-- /.control-sidebar-menu -->
1563
1564       </div>
1565       <!-- /.tab-pane -->
1566       <!-- Stats tab content -->
1567       <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
1568       <!-- /.tab-pane -->
1569       <!-- Settings tab content -->
1570       <div class="tab-pane" id="control-sidebar-settings-tab">
1571         <form method="post">
1572           <h3 class="control-sidebar-heading">General Settings</h3>
1573
1574           <div class="form-group">
1575             <label class="control-sidebar-subheading">
1576               Report panel usage
1577               <input type="checkbox" class="pull-right" checked>
1578             </label>
1579
1580             <p>
1581               Some information about this general settings option
1582             </p>
1583           </div>
1584           <!-- /.form-group -->
1585
1586           <div class="form-group">
1587             <label class="control-sidebar-subheading">
1588               Allow mail redirect
1589               <input type="checkbox" class="pull-right" checked>
1590             </label>
1591
1592             <p>
1593               Other sets of options are available
1594             </p>
1595           </div>
1596           <!-- /.form-group -->
1597
1598           <div class="form-group">
1599             <label class="control-sidebar-subheading">
1600               Expose author name in posts
1601               <input type="checkbox" class="pull-right" checked>
1602             </label>
1603
1604             <p>
1605               Allow the user to show his name in blog posts
1606             </p>
1607           </div>
1608           <!-- /.form-group -->
1609
1610           <h3 class="control-sidebar-heading">Chat Settings</h3>
1611
1612           <div class="form-group">
1613             <label class="control-sidebar-subheading">
1614               Show me as online
1615               <input type="checkbox" class="pull-right" checked>
1616             </label>
1617           </div>
1618           <!-- /.form-group -->
1619
1620           <div class="form-group">
1621             <label class="control-sidebar-subheading">
1622               Turn off notifications
1623               <input type="checkbox" class="pull-right">
1624             </label>
1625           </div>
1626           <!-- /.form-group -->
1627
1628           <div class="form-group">
1629             <label class="control-sidebar-subheading">
1630               Delete chat history
1631               <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
1632             </label>
1633           </div>
1634           <!-- /.form-group -->
1635         </form>
1636       </div>
1637       <!-- /.tab-pane -->
1638     </div>
1639   </aside>
1640   <!-- /.control-sidebar -->
1641   <!-- Add the sidebar's background. This div must be placed
1642        immediately after the control sidebar -->
1643   <div class="control-sidebar-bg"></div>
1644 </div>
1645 <!-- ./wrapper -->
1646
1647 <!-- jQuery 2.2.3 -->
1648 <script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>
1649 <!-- Bootstrap 3.3.6 -->
1650 <script src="../../bootstrap/js/bootstrap.min.js"></script>
1651 <!-- FastClick -->
1652 <script src="../../plugins/fastclick/fastclick.js"></script>
1653 <!-- AdminLTE App -->
1654 <script src="../../dist/js/app.min.js"></script>
1655 <!-- AdminLTE for demo purposes -->
1656 <script src="../../dist/js/demo.js"></script>
1657 </body>
1658 </html>