src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/pages/UI/modals.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 | Modals</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
  28   <style>
  29     .example-modal .modal {
  30       position: relative;
  31       top: auto;
  32       bottom: auto;
  33       right: auto;
  34       left: auto;
  35       display: block;
  36       z-index: 1;
  37     }
  38
  39     .example-modal .modal {
  40       background: transparent !important;
  41     }
  42   </style>
  43 </head>
  44 <body class="hold-transition skin-blue sidebar-mini">
  45 <div class="wrapper">
  46
  47   <header class="main-header">
  48     <!-- Logo -->
  49     <a href="../../index2.html" class="logo">
  50       <!-- mini logo for sidebar mini 50x50 pixels -->
  51       <span class="logo-mini"><b>A</b>LT</span>
  52       <!-- logo for regular state and mobile devices -->
  53       <span class="logo-lg"><b>Admin</b>LTE</span>
  54     </a>
  55     <!-- Header Navbar: style can be found in header.less -->
  56     <nav class="navbar navbar-static-top">
  57       <!-- Sidebar toggle button-->
  58       <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
  59         <span class="sr-only">Toggle navigation</span>
  60         <span class="icon-bar"></span>
  61         <span class="icon-bar"></span>
  62         <span class="icon-bar"></span>
  63       </a>
  64
  65       <div class="navbar-custom-menu">
  66         <ul class="nav navbar-nav">
  67           <!-- Messages: style can be found in dropdown.less-->
  68           <li class="dropdown messages-menu">
  69             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  70               <i class="fa fa-envelope-o"></i>
  71               <span class="label label-success">4</span>
  72             </a>
  73             <ul class="dropdown-menu">
  74               <li class="header">You have 4 messages</li>
  75               <li>
  76                 <!-- inner menu: contains the actual data -->
  77                 <ul class="menu">
  78                   <li><!-- start message -->
  79                     <a href="#">
  80                       <div class="pull-left">
  81                         <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  82                       </div>
  83                       <h4>
  84                         Support Team
  85                         <small><i class="fa fa-clock-o"></i> 5 mins</small>
  86                       </h4>
  87                       <p>Why not buy a new awesome theme?</p>
  88                     </a>
  89                   </li>
  90                   <!-- end message -->
  91                   <li>
  92                     <a href="#">
  93                       <div class="pull-left">
  94                         <img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
  95                       </div>
  96                       <h4>
  97                         AdminLTE Design Team
  98                         <small><i class="fa fa-clock-o"></i> 2 hours</small>
  99                       </h4>
 100                       <p>Why not buy a new awesome theme?</p>
 101                     </a>
 102                   </li>
 103                   <li>
 104                     <a href="#">
 105                       <div class="pull-left">
 106                         <img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
 107                       </div>
 108                       <h4>
 109                         Developers
 110                         <small><i class="fa fa-clock-o"></i> Today</small>
 111                       </h4>
 112                       <p>Why not buy a new awesome theme?</p>
 113                     </a>
 114                   </li>
 115                   <li>
 116                     <a href="#">
 117                       <div class="pull-left">
 118                         <img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
 119                       </div>
 120                       <h4>
 121                         Sales Department
 122                         <small><i class="fa fa-clock-o"></i> Yesterday</small>
 123                       </h4>
 124                       <p>Why not buy a new awesome theme?</p>
 125                     </a>
 126                   </li>
 127                   <li>
 128                     <a href="#">
 129                       <div class="pull-left">
 130                         <img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
 131                       </div>
 132                       <h4>
 133                         Reviewers
 134                         <small><i class="fa fa-clock-o"></i> 2 days</small>
 135                       </h4>
 136                       <p>Why not buy a new awesome theme?</p>
 137                     </a>
 138                   </li>
 139                 </ul>
 140               </li>
 141               <li class="footer"><a href="#">See All Messages</a></li>
 142             </ul>
 143           </li>
 144           <!-- Notifications: style can be found in dropdown.less -->
 145           <li class="dropdown notifications-menu">
 146             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 147               <i class="fa fa-bell-o"></i>
 148               <span class="label label-warning">10</span>
 149             </a>
 150             <ul class="dropdown-menu">
 151               <li class="header">You have 10 notifications</li>
 152               <li>
 153                 <!-- inner menu: contains the actual data -->
 154                 <ul class="menu">
 155                   <li>
 156                     <a href="#">
 157                       <i class="fa fa-users text-aqua"></i> 5 new members joined today
 158                     </a>
 159                   </li>
 160                   <li>
 161                     <a href="#">
 162                       <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the
 163                       page and may cause design problems
 164                     </a>
 165                   </li>
 166                   <li>
 167                     <a href="#">
 168                       <i class="fa fa-users text-red"></i> 5 new members joined
 169                     </a>
 170                   </li>
 171
 172                   <li>
 173                     <a href="#">
 174                       <i class="fa fa-shopping-cart text-green"></i> 25 sales made
 175                     </a>
 176                   </li>
 177                   <li>
 178                     <a href="#">
 179                       <i class="fa fa-user text-red"></i> You changed your username
 180                     </a>
 181                   </li>
 182                 </ul>
 183               </li>
 184               <li class="footer"><a href="#">View all</a></li>
 185             </ul>
 186           </li>
 187           <!-- Tasks: style can be found in dropdown.less -->
 188           <li class="dropdown tasks-menu">
 189             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 190               <i class="fa fa-flag-o"></i>
 191               <span class="label label-danger">9</span>
 192             </a>
 193             <ul class="dropdown-menu">
 194               <li class="header">You have 9 tasks</li>
 195               <li>
 196                 <!-- inner menu: contains the actual data -->
 197                 <ul class="menu">
 198                   <li><!-- Task item -->
 199                     <a href="#">
 200                       <h3>
 201                         Design some buttons
 202                         <small class="pull-right">20%</small>
 203                       </h3>
 204                       <div class="progress xs">
 205                         <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 206                           <span class="sr-only">20% Complete</span>
 207                         </div>
 208                       </div>
 209                     </a>
 210                   </li>
 211                   <!-- end task item -->
 212                   <li><!-- Task item -->
 213                     <a href="#">
 214                       <h3>
 215                         Create a nice theme
 216                         <small class="pull-right">40%</small>
 217                       </h3>
 218                       <div class="progress xs">
 219                         <div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 220                           <span class="sr-only">40% Complete</span>
 221                         </div>
 222                       </div>
 223                     </a>
 224                   </li>
 225                   <!-- end task item -->
 226                   <li><!-- Task item -->
 227                     <a href="#">
 228                       <h3>
 229                         Some task I need to do
 230                         <small class="pull-right">60%</small>
 231                       </h3>
 232                       <div class="progress xs">
 233                         <div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 234                           <span class="sr-only">60% Complete</span>
 235                         </div>
 236                       </div>
 237                     </a>
 238                   </li>
 239                   <!-- end task item -->
 240                   <li><!-- Task item -->
 241                     <a href="#">
 242                       <h3>
 243                         Make beautiful transitions
 244                         <small class="pull-right">80%</small>
 245                       </h3>
 246                       <div class="progress xs">
 247                         <div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 248                           <span class="sr-only">80% Complete</span>
 249                         </div>
 250                       </div>
 251                     </a>
 252                   </li>
 253                   <!-- end task item -->
 254                 </ul>
 255               </li>
 256               <li class="footer">
 257                 <a href="#">View all tasks</a>
 258               </li>
 259             </ul>
 260           </li>
 261           <!-- User Account: style can be found in dropdown.less -->
 262           <li class="dropdown user user-menu">
 263             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 264               <img src="../../dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
 265               <span class="hidden-xs">Alexander Pierce</span>
 266             </a>
 267             <ul class="dropdown-menu">
 268               <!-- User image -->
 269               <li class="user-header">
 270                 <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 271
 272                 <p>
 273                   Alexander Pierce - Web Developer
 274                   <small>Member since Nov. 2012</small>
 275                 </p>
 276               </li>
 277               <!-- Menu Body -->
 278               <li class="user-body">
 279                 <div class="row">
 280                   <div class="col-xs-4 text-center">
 281                     <a href="#">Followers</a>
 282                   </div>
 283                   <div class="col-xs-4 text-center">
 284                     <a href="#">Sales</a>
 285                   </div>
 286                   <div class="col-xs-4 text-center">
 287                     <a href="#">Friends</a>
 288                   </div>
 289                 </div>
 290                 <!-- /.row -->
 291               </li>
 292               <!-- Menu Footer-->
 293               <li class="user-footer">
 294                 <div class="pull-left">
 295                   <a href="#" class="btn btn-default btn-flat">Profile</a>
 296                 </div>
 297                 <div class="pull-right">
 298                   <a href="#" class="btn btn-default btn-flat">Sign out</a>
 299                 </div>
 300               </li>
 301             </ul>
 302           </li>
 303         </ul>
 304       </div>
 305     </nav>
 306   </header>
 307   <!-- Left side column. contains the logo and sidebar -->
 308   <aside class="main-sidebar">
 309     <!-- sidebar: style can be found in sidebar.less -->
 310     <section class="sidebar">
 311       <!-- Sidebar user panel -->
 312       <div class="user-panel">
 313         <div class="pull-left image">
 314           <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 315         </div>
 316         <div class="pull-left info">
 317           <p>Alexander Pierce</p>
 318           <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
 319         </div>
 320       </div>
 321       <!-- search form -->
 322       <form action="#" method="get" class="sidebar-form">
 323         <div class="input-group">
 324           <input type="text" name="q" class="form-control" placeholder="Search...">
 325               <span class="input-group-btn">
 326                 <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
 327                 </button>
 328               </span>
 329         </div>
 330       </form>
 331       <!-- /.search form -->
 332       <!-- sidebar menu: : style can be found in sidebar.less -->
 333       <ul class="sidebar-menu">
 334         <li class="header">MAIN NAVIGATION</li>
 335         <li class="treeview">
 336           <a href="#">
 337             <i class="fa fa-dashboard"></i> <span>Dashboard</span>
 338             <span class="pull-right-container">
 339               <i class="fa fa-angle-left pull-right"></i>
 340             </span>
 341           </a>
 342           <ul class="treeview-menu">
 343             <li><a href="../../index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
 344             <li><a href="../../index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
 345           </ul>
 346         </li>
 347         <li class="treeview">
 348           <a href="#">
 349             <i class="fa fa-files-o"></i>
 350             <span>Layout Options</span>
 351             <span class="pull-right-container">
 352               <span class="label label-primary pull-right">4</span>
 353             </span>
 354           </a>
 355           <ul class="treeview-menu">
 356             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
 357             <li><a href="../layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
 358             <li><a href="../layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
 359             <li><a href="../layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
 360           </ul>
 361         </li>
 362         <li>
 363           <a href="../widgets.html">
 364             <i class="fa fa-th"></i> <span>Widgets</span>
 365             <span class="pull-right-container">
 366               <small class="label pull-right bg-green">new</small>
 367             </span>
 368           </a>
 369         </li>
 370         <li class="treeview">
 371           <a href="#">
 372             <i class="fa fa-pie-chart"></i>
 373             <span>Charts</span>
 374             <span class="pull-right-container">
 375               <i class="fa fa-angle-left pull-right"></i>
 376             </span>
 377           </a>
 378           <ul class="treeview-menu">
 379             <li><a href="../charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
 380             <li><a href="../charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
 381             <li><a href="../charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
 382             <li><a href="../charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
 383           </ul>
 384         </li>
 385         <li class="treeview active">
 386           <a href="#">
 387             <i class="fa fa-laptop"></i>
 388             <span>UI Elements</span>
 389             <span class="pull-right-container">
 390               <i class="fa fa-angle-left pull-right"></i>
 391             </span>
 392           </a>
 393           <ul class="treeview-menu">
 394             <li><a href="general.html"><i class="fa fa-circle-o"></i> General</a></li>
 395             <li><a href="icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
 396             <li><a href="buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
 397             <li><a href="sliders.html"><i class="fa fa-circle-o"></i> Sliders</a></li>
 398             <li><a href="timeline.html"><i class="fa fa-circle-o"></i> Timeline</a></li>
 399             <li class="active"><a href="modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
 400           </ul>
 401         </li>
 402         <li class="treeview">
 403           <a href="#">
 404             <i class="fa fa-edit"></i> <span>Forms</span>
 405             <span class="pull-right-container">
 406               <i class="fa fa-angle-left pull-right"></i>
 407             </span>
 408           </a>
 409           <ul class="treeview-menu">
 410             <li><a href="../forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
 411             <li><a href="../forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
 412             <li><a href="../forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
 413           </ul>
 414         </li>
 415         <li class="treeview">
 416           <a href="#">
 417             <i class="fa fa-table"></i> <span>Tables</span>
 418             <span class="pull-right-container">
 419               <i class="fa fa-angle-left pull-right"></i>
 420             </span>
 421           </a>
 422           <ul class="treeview-menu">
 423             <li><a href="../tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li>
 424             <li><a href="../tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li>
 425           </ul>
 426         </li>
 427         <li>
 428           <a href="../calendar.html">
 429             <i class="fa fa-calendar"></i> <span>Calendar</span>
 430             <span class="pull-right-container">
 431               <small class="label pull-right bg-red">3</small>
 432               <small class="label pull-right bg-blue">17</small>
 433             </span>
 434           </a>
 435         </li>
 436         <li>
 437           <a href="../mailbox/mailbox.html">
 438             <i class="fa fa-envelope"></i> <span>Mailbox</span>
 439             <span class="pull-right-container">
 440               <small class="label pull-right bg-yellow">12</small>
 441               <small class="label pull-right bg-green">16</small>
 442               <small class="label pull-right bg-red">5</small>
 443             </span>
 444           </a>
 445         </li>
 446         <li class="treeview">
 447           <a href="#">
 448             <i class="fa fa-folder"></i> <span>Examples</span>
 449             <span class="pull-right-container">
 450               <i class="fa fa-angle-left pull-right"></i>
 451             </span>
 452           </a>
 453           <ul class="treeview-menu">
 454             <li><a href="../examples/invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
 455             <li><a href="../examples/profile.html"><i class="fa fa-circle-o"></i> Profile</a></li>
 456             <li><a href="../examples/login.html"><i class="fa fa-circle-o"></i> Login</a></li>
 457             <li><a href="../examples/register.html"><i class="fa fa-circle-o"></i> Register</a></li>
 458             <li><a href="../examples/lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
 459             <li><a href="../examples/404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
 460             <li><a href="../examples/500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
 461             <li><a href="../examples/blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
 462             <li><a href="../examples/pace.html"><i class="fa fa-circle-o"></i> Pace Page</a></li>
 463           </ul>
 464         </li>
 465         <li class="treeview">
 466           <a href="#">
 467             <i class="fa fa-share"></i> <span>Multilevel</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="#"><i class="fa fa-circle-o"></i> Level One</a></li>
 474             <li>
 475               <a href="#"><i class="fa fa-circle-o"></i> Level One
 476                 <span class="pull-right-container">
 477                   <i class="fa fa-angle-left pull-right"></i>
 478                 </span>
 479               </a>
 480               <ul class="treeview-menu">
 481                 <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
 482                 <li>
 483                   <a href="#"><i class="fa fa-circle-o"></i> Level Two
 484                     <span class="pull-right-container">
 485                       <i class="fa fa-angle-left pull-right"></i>
 486                     </span>
 487                   </a>
 488                   <ul class="treeview-menu">
 489                     <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
 490                     <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
 491                   </ul>
 492                 </li>
 493               </ul>
 494             </li>
 495             <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
 496           </ul>
 497         </li>
 498         <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
 499         <li class="header">LABELS</li>
 500         <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
 501         <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
 502         <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
 503       </ul>
 504     </section>
 505     <!-- /.sidebar -->
 506   </aside>
 507
 508   <!-- Content Wrapper. Contains page content -->
 509   <div class="content-wrapper">
 510     <!-- Content Header (Page header) -->
 511     <section class="content-header">
 512       <h1>
 513         Modals
 514         <small>new</small>
 515       </h1>
 516       <ol class="breadcrumb">
 517         <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
 518         <li><a href="#">UI</a></li>
 519         <li class="active">Modals</li>
 520       </ol>
 521     </section>
 522
 523     <!-- Main content -->
 524     <section class="content">
 525       <div class="callout callout-info">
 526         <h4>Reminder!</h4>
 527         Instructions for how to use modals are available on the
 528         <a href="http://getbootstrap.com/javascript/#modals">Bootstrap documentation</a>
 529       </div>
 530
 531       <div class="example-modal">
 532         <div class="modal">
 533           <div class="modal-dialog">
 534             <div class="modal-content">
 535               <div class="modal-header">
 536                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 537                   <span aria-hidden="true">&times;</span></button>
 538                 <h4 class="modal-title">Default Modal</h4>
 539               </div>
 540               <div class="modal-body">
 541                 <p>One fine body&hellip;</p>
 542               </div>
 543               <div class="modal-footer">
 544                 <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
 545                 <button type="button" class="btn btn-primary">Save changes</button>
 546               </div>
 547             </div>
 548             <!-- /.modal-content -->
 549           </div>
 550           <!-- /.modal-dialog -->
 551         </div>
 552         <!-- /.modal -->
 553       </div>
 554       <!-- /.example-modal -->
 555
 556       <div class="example-modal">
 557         <div class="modal modal-primary">
 558           <div class="modal-dialog">
 559             <div class="modal-content">
 560               <div class="modal-header">
 561                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 562                   <span aria-hidden="true">&times;</span></button>
 563                 <h4 class="modal-title">Primary Modal</h4>
 564               </div>
 565               <div class="modal-body">
 566                 <p>One fine body&hellip;</p>
 567               </div>
 568               <div class="modal-footer">
 569                 <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button>
 570                 <button type="button" class="btn btn-outline">Save changes</button>
 571               </div>
 572             </div>
 573             <!-- /.modal-content -->
 574           </div>
 575           <!-- /.modal-dialog -->
 576         </div>
 577         <!-- /.modal -->
 578       </div>
 579       <!-- /.example-modal -->
 580
 581       <div class="example-modal">
 582         <div class="modal modal-info">
 583           <div class="modal-dialog">
 584             <div class="modal-content">
 585               <div class="modal-header">
 586                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 587                   <span aria-hidden="true">&times;</span></button>
 588                 <h4 class="modal-title">Info Modal</h4>
 589               </div>
 590               <div class="modal-body">
 591                 <p>One fine body&hellip;</p>
 592               </div>
 593               <div class="modal-footer">
 594                 <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button>
 595                 <button type="button" class="btn btn-outline">Save changes</button>
 596               </div>
 597             </div>
 598             <!-- /.modal-content -->
 599           </div>
 600           <!-- /.modal-dialog -->
 601         </div>
 602         <!-- /.modal -->
 603       </div>
 604       <!-- /.example-modal -->
 605
 606       <div class="example-modal">
 607         <div class="modal modal-warning">
 608           <div class="modal-dialog">
 609             <div class="modal-content">
 610               <div class="modal-header">
 611                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 612                   <span aria-hidden="true">&times;</span></button>
 613                 <h4 class="modal-title">Warning Modal</h4>
 614               </div>
 615               <div class="modal-body">
 616                 <p>One fine body&hellip;</p>
 617               </div>
 618               <div class="modal-footer">
 619                 <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button>
 620                 <button type="button" class="btn btn-outline">Save changes</button>
 621               </div>
 622             </div>
 623             <!-- /.modal-content -->
 624           </div>
 625           <!-- /.modal-dialog -->
 626         </div>
 627         <!-- /.modal -->
 628       </div>
 629       <!-- /.example-modal -->
 630
 631       <div class="example-modal">
 632         <div class="modal modal-success">
 633           <div class="modal-dialog">
 634             <div class="modal-content">
 635               <div class="modal-header">
 636                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 637                   <span aria-hidden="true">&times;</span></button>
 638                 <h4 class="modal-title">Success Modal</h4>
 639               </div>
 640               <div class="modal-body">
 641                 <p>One fine body&hellip;</p>
 642               </div>
 643               <div class="modal-footer">
 644                 <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button>
 645                 <button type="button" class="btn btn-outline">Save changes</button>
 646               </div>
 647             </div>
 648             <!-- /.modal-content -->
 649           </div>
 650           <!-- /.modal-dialog -->
 651         </div>
 652         <!-- /.modal -->
 653       </div>
 654       <!-- /.example-modal -->
 655
 656       <div class="example-modal">
 657         <div class="modal modal-danger">
 658           <div class="modal-dialog">
 659             <div class="modal-content">
 660               <div class="modal-header">
 661                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 662                   <span aria-hidden="true">&times;</span></button>
 663                 <h4 class="modal-title">Danger Modal</h4>
 664               </div>
 665               <div class="modal-body">
 666                 <p>One fine body&hellip;</p>
 667               </div>
 668               <div class="modal-footer">
 669                 <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button>
 670                 <button type="button" class="btn btn-outline">Save changes</button>
 671               </div>
 672             </div>
 673             <!-- /.modal-content -->
 674           </div>
 675           <!-- /.modal-dialog -->
 676         </div>
 677         <!-- /.modal -->
 678       </div>
 679       <!-- /.example-modal -->
 680     </section>
 681     <!-- /.content -->
 682   </div>
 683   <!-- /.content-wrapper -->
 684
 685   <footer class="main-footer">
 686     <div class="pull-right hidden-xs">
 687       <b>Version</b> 2.3.7
 688     </div>
 689     <strong>Copyright &copy; 2014-2016 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights
 690     reserved.
 691   </footer>
 692
 693   <!-- Control Sidebar -->
 694   <aside class="control-sidebar control-sidebar-dark">
 695     <!-- Create the tabs -->
 696     <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
 697       <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
 698
 699       <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
 700     </ul>
 701     <!-- Tab panes -->
 702     <div class="tab-content">
 703       <!-- Home tab content -->
 704       <div class="tab-pane" id="control-sidebar-home-tab">
 705         <h3 class="control-sidebar-heading">Recent Activity</h3>
 706         <ul class="control-sidebar-menu">
 707           <li>
 708             <a href="javascript:void(0)">
 709               <i class="menu-icon fa fa-birthday-cake bg-red"></i>
 710
 711               <div class="menu-info">
 712                 <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
 713
 714                 <p>Will be 23 on April 24th</p>
 715               </div>
 716             </a>
 717           </li>
 718           <li>
 719             <a href="javascript:void(0)">
 720               <i class="menu-icon fa fa-user bg-yellow"></i>
 721
 722               <div class="menu-info">
 723                 <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
 724
 725                 <p>New phone +1(800)555-1234</p>
 726               </div>
 727             </a>
 728           </li>
 729           <li>
 730             <a href="javascript:void(0)">
 731               <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
 732
 733               <div class="menu-info">
 734                 <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
 735
 736                 <p>nora@example.com</p>
 737               </div>
 738             </a>
 739           </li>
 740           <li>
 741             <a href="javascript:void(0)">
 742               <i class="menu-icon fa fa-file-code-o bg-green"></i>
 743
 744               <div class="menu-info">
 745                 <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
 746
 747                 <p>Execution time 5 seconds</p>
 748               </div>
 749             </a>
 750           </li>
 751         </ul>
 752         <!-- /.control-sidebar-menu -->
 753
 754         <h3 class="control-sidebar-heading">Tasks Progress</h3>
 755         <ul class="control-sidebar-menu">
 756           <li>
 757             <a href="javascript:void(0)">
 758               <h4 class="control-sidebar-subheading">
 759                 Custom Template Design
 760                 <span class="label label-danger pull-right">70%</span>
 761               </h4>
 762
 763               <div class="progress progress-xxs">
 764                 <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
 765               </div>
 766             </a>
 767           </li>
 768           <li>
 769             <a href="javascript:void(0)">
 770               <h4 class="control-sidebar-subheading">
 771                 Update Resume
 772                 <span class="label label-success pull-right">95%</span>
 773               </h4>
 774
 775               <div class="progress progress-xxs">
 776                 <div class="progress-bar progress-bar-success" style="width: 95%"></div>
 777               </div>
 778             </a>
 779           </li>
 780           <li>
 781             <a href="javascript:void(0)">
 782               <h4 class="control-sidebar-subheading">
 783                 Laravel Integration
 784                 <span class="label label-warning pull-right">50%</span>
 785               </h4>
 786
 787               <div class="progress progress-xxs">
 788                 <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
 789               </div>
 790             </a>
 791           </li>
 792           <li>
 793             <a href="javascript:void(0)">
 794               <h4 class="control-sidebar-subheading">
 795                 Back End Framework
 796                 <span class="label label-primary pull-right">68%</span>
 797               </h4>
 798
 799               <div class="progress progress-xxs">
 800                 <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
 801               </div>
 802             </a>
 803           </li>
 804         </ul>
 805         <!-- /.control-sidebar-menu -->
 806
 807       </div>
 808       <!-- /.tab-pane -->
 809       <!-- Stats tab content -->
 810       <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
 811       <!-- /.tab-pane -->
 812       <!-- Settings tab content -->
 813       <div class="tab-pane" id="control-sidebar-settings-tab">
 814         <form method="post">
 815           <h3 class="control-sidebar-heading">General Settings</h3>
 816
 817           <div class="form-group">
 818             <label class="control-sidebar-subheading">
 819               Report panel usage
 820               <input type="checkbox" class="pull-right" checked>
 821             </label>
 822
 823             <p>
 824               Some information about this general settings option
 825             </p>
 826           </div>
 827           <!-- /.form-group -->
 828
 829           <div class="form-group">
 830             <label class="control-sidebar-subheading">
 831               Allow mail redirect
 832               <input type="checkbox" class="pull-right" checked>
 833             </label>
 834
 835             <p>
 836               Other sets of options are available
 837             </p>
 838           </div>
 839           <!-- /.form-group -->
 840
 841           <div class="form-group">
 842             <label class="control-sidebar-subheading">
 843               Expose author name in posts
 844               <input type="checkbox" class="pull-right" checked>
 845             </label>
 846
 847             <p>
 848               Allow the user to show his name in blog posts
 849             </p>
 850           </div>
 851           <!-- /.form-group -->
 852
 853           <h3 class="control-sidebar-heading">Chat Settings</h3>
 854
 855           <div class="form-group">
 856             <label class="control-sidebar-subheading">
 857               Show me as online
 858               <input type="checkbox" class="pull-right" checked>
 859             </label>
 860           </div>
 861           <!-- /.form-group -->
 862
 863           <div class="form-group">
 864             <label class="control-sidebar-subheading">
 865               Turn off notifications
 866               <input type="checkbox" class="pull-right">
 867             </label>
 868           </div>
 869           <!-- /.form-group -->
 870
 871           <div class="form-group">
 872             <label class="control-sidebar-subheading">
 873               Delete chat history
 874               <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
 875             </label>
 876           </div>
 877           <!-- /.form-group -->
 878         </form>
 879       </div>
 880       <!-- /.tab-pane -->
 881     </div>
 882   </aside>
 883   <!-- /.control-sidebar -->
 884   <!-- Add the sidebar's background. This div must be placed
 885        immediately after the control sidebar -->
 886   <div class="control-sidebar-bg"></div>
 887 </div>
 888 <!-- ./wrapper -->
 889
 890 <!-- jQuery 2.2.3 -->
 891 <script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>
 892 <!-- Bootstrap 3.3.6 -->
 893 <script src="../../bootstrap/js/bootstrap.min.js"></script>
 894 <!-- FastClick -->
 895 <script src="../../plugins/fastclick/fastclick.js"></script>
 896 <!-- AdminLTE App -->
 897 <script src="../../dist/js/app.min.js"></script>
 898 <!-- AdminLTE for demo purposes -->
 899 <script src="../../dist/js/demo.js"></script>
 900 </body>
 901 </html>