src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/pages/forms/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 Form Elements</title>
   7   <!-- Tell the browser to be responsive to screen width -->
   8   <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
   9   <!-- Bootstrap 3.3.6 -->
  10   <link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
  11   <!-- Font Awesome -->
  12   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  13   <!-- Ionicons -->
  14   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
  15   <!-- Theme style -->
  16   <link rel="stylesheet" href="../../dist/css/AdminLTE.min.css">
  17   <!-- AdminLTE Skins. Choose a skin from the css/skins
  18        folder instead of downloading all of them to reduce the load. -->
  19   <link rel="stylesheet" href="../../dist/css/skins/_all-skins.min.css">
  20
  21   <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  22   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  23   <!--[if lt IE 9]>
  24   <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  25   <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  26   <![endif]-->
  27 </head>
  28 <body class="hold-transition skin-blue sidebar-mini">
  29 <div class="wrapper">
  30
  31   <header class="main-header">
  32     <!-- Logo -->
  33     <a href="../../index2.html" class="logo">
  34       <!-- mini logo for sidebar mini 50x50 pixels -->
  35       <span class="logo-mini"><b>A</b>LT</span>
  36       <!-- logo for regular state and mobile devices -->
  37       <span class="logo-lg"><b>Admin</b>LTE</span>
  38     </a>
  39     <!-- Header Navbar: style can be found in header.less -->
  40     <nav class="navbar navbar-static-top">
  41       <!-- Sidebar toggle button-->
  42       <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
  43         <span class="sr-only">Toggle navigation</span>
  44         <span class="icon-bar"></span>
  45         <span class="icon-bar"></span>
  46         <span class="icon-bar"></span>
  47       </a>
  48
  49       <div class="navbar-custom-menu">
  50         <ul class="nav navbar-nav">
  51           <!-- Messages: style can be found in dropdown.less-->
  52           <li class="dropdown messages-menu">
  53             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  54               <i class="fa fa-envelope-o"></i>
  55               <span class="label label-success">4</span>
  56             </a>
  57             <ul class="dropdown-menu">
  58               <li class="header">You have 4 messages</li>
  59               <li>
  60                 <!-- inner menu: contains the actual data -->
  61                 <ul class="menu">
  62                   <li><!-- start message -->
  63                     <a href="#">
  64                       <div class="pull-left">
  65                         <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  66                       </div>
  67                       <h4>
  68                         Support Team
  69                         <small><i class="fa fa-clock-o"></i> 5 mins</small>
  70                       </h4>
  71                       <p>Why not buy a new awesome theme?</p>
  72                     </a>
  73                   </li>
  74                   <!-- end message -->
  75                   <li>
  76                     <a href="#">
  77                       <div class="pull-left">
  78                         <img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
  79                       </div>
  80                       <h4>
  81                         AdminLTE Design Team
  82                         <small><i class="fa fa-clock-o"></i> 2 hours</small>
  83                       </h4>
  84                       <p>Why not buy a new awesome theme?</p>
  85                     </a>
  86                   </li>
  87                   <li>
  88                     <a href="#">
  89                       <div class="pull-left">
  90                         <img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
  91                       </div>
  92                       <h4>
  93                         Developers
  94                         <small><i class="fa fa-clock-o"></i> Today</small>
  95                       </h4>
  96                       <p>Why not buy a new awesome theme?</p>
  97                     </a>
  98                   </li>
  99                   <li>
 100                     <a href="#">
 101                       <div class="pull-left">
 102                         <img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
 103                       </div>
 104                       <h4>
 105                         Sales Department
 106                         <small><i class="fa fa-clock-o"></i> Yesterday</small>
 107                       </h4>
 108                       <p>Why not buy a new awesome theme?</p>
 109                     </a>
 110                   </li>
 111                   <li>
 112                     <a href="#">
 113                       <div class="pull-left">
 114                         <img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
 115                       </div>
 116                       <h4>
 117                         Reviewers
 118                         <small><i class="fa fa-clock-o"></i> 2 days</small>
 119                       </h4>
 120                       <p>Why not buy a new awesome theme?</p>
 121                     </a>
 122                   </li>
 123                 </ul>
 124               </li>
 125               <li class="footer"><a href="#">See All Messages</a></li>
 126             </ul>
 127           </li>
 128           <!-- Notifications: style can be found in dropdown.less -->
 129           <li class="dropdown notifications-menu">
 130             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 131               <i class="fa fa-bell-o"></i>
 132               <span class="label label-warning">10</span>
 133             </a>
 134             <ul class="dropdown-menu">
 135               <li class="header">You have 10 notifications</li>
 136               <li>
 137                 <!-- inner menu: contains the actual data -->
 138                 <ul class="menu">
 139                   <li>
 140                     <a href="#">
 141                       <i class="fa fa-users text-aqua"></i> 5 new members joined today
 142                     </a>
 143                   </li>
 144                   <li>
 145                     <a href="#">
 146                       <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the
 147                       page and may cause design problems
 148                     </a>
 149                   </li>
 150                   <li>
 151                     <a href="#">
 152                       <i class="fa fa-users text-red"></i> 5 new members joined
 153                     </a>
 154                   </li>
 155
 156                   <li>
 157                     <a href="#">
 158                       <i class="fa fa-shopping-cart text-green"></i> 25 sales made
 159                     </a>
 160                   </li>
 161                   <li>
 162                     <a href="#">
 163                       <i class="fa fa-user text-red"></i> You changed your username
 164                     </a>
 165                   </li>
 166                 </ul>
 167               </li>
 168               <li class="footer"><a href="#">View all</a></li>
 169             </ul>
 170           </li>
 171           <!-- Tasks: style can be found in dropdown.less -->
 172           <li class="dropdown tasks-menu">
 173             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 174               <i class="fa fa-flag-o"></i>
 175               <span class="label label-danger">9</span>
 176             </a>
 177             <ul class="dropdown-menu">
 178               <li class="header">You have 9 tasks</li>
 179               <li>
 180                 <!-- inner menu: contains the actual data -->
 181                 <ul class="menu">
 182                   <li><!-- Task item -->
 183                     <a href="#">
 184                       <h3>
 185                         Design some buttons
 186                         <small class="pull-right">20%</small>
 187                       </h3>
 188                       <div class="progress xs">
 189                         <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 190                           <span class="sr-only">20% Complete</span>
 191                         </div>
 192                       </div>
 193                     </a>
 194                   </li>
 195                   <!-- end task item -->
 196                   <li><!-- Task item -->
 197                     <a href="#">
 198                       <h3>
 199                         Create a nice theme
 200                         <small class="pull-right">40%</small>
 201                       </h3>
 202                       <div class="progress xs">
 203                         <div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 204                           <span class="sr-only">40% Complete</span>
 205                         </div>
 206                       </div>
 207                     </a>
 208                   </li>
 209                   <!-- end task item -->
 210                   <li><!-- Task item -->
 211                     <a href="#">
 212                       <h3>
 213                         Some task I need to do
 214                         <small class="pull-right">60%</small>
 215                       </h3>
 216                       <div class="progress xs">
 217                         <div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 218                           <span class="sr-only">60% Complete</span>
 219                         </div>
 220                       </div>
 221                     </a>
 222                   </li>
 223                   <!-- end task item -->
 224                   <li><!-- Task item -->
 225                     <a href="#">
 226                       <h3>
 227                         Make beautiful transitions
 228                         <small class="pull-right">80%</small>
 229                       </h3>
 230                       <div class="progress xs">
 231                         <div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 232                           <span class="sr-only">80% Complete</span>
 233                         </div>
 234                       </div>
 235                     </a>
 236                   </li>
 237                   <!-- end task item -->
 238                 </ul>
 239               </li>
 240               <li class="footer">
 241                 <a href="#">View all tasks</a>
 242               </li>
 243             </ul>
 244           </li>
 245           <!-- User Account: style can be found in dropdown.less -->
 246           <li class="dropdown user user-menu">
 247             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 248               <img src="../../dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
 249               <span class="hidden-xs">Alexander Pierce</span>
 250             </a>
 251             <ul class="dropdown-menu">
 252               <!-- User image -->
 253               <li class="user-header">
 254                 <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 255
 256                 <p>
 257                   Alexander Pierce - Web Developer
 258                   <small>Member since Nov. 2012</small>
 259                 </p>
 260               </li>
 261               <!-- Menu Body -->
 262               <li class="user-body">
 263                 <div class="row">
 264                   <div class="col-xs-4 text-center">
 265                     <a href="#">Followers</a>
 266                   </div>
 267                   <div class="col-xs-4 text-center">
 268                     <a href="#">Sales</a>
 269                   </div>
 270                   <div class="col-xs-4 text-center">
 271                     <a href="#">Friends</a>
 272                   </div>
 273                 </div>
 274                 <!-- /.row -->
 275               </li>
 276               <!-- Menu Footer-->
 277               <li class="user-footer">
 278                 <div class="pull-left">
 279                   <a href="#" class="btn btn-default btn-flat">Profile</a>
 280                 </div>
 281                 <div class="pull-right">
 282                   <a href="#" class="btn btn-default btn-flat">Sign out</a>
 283                 </div>
 284               </li>
 285             </ul>
 286           </li>
 287           <!-- Control Sidebar Toggle Button -->
 288           <li>
 289             <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
 290           </li>
 291         </ul>
 292       </div>
 293     </nav>
 294   </header>
 295   <!-- Left side column. contains the logo and sidebar -->
 296   <aside class="main-sidebar">
 297     <!-- sidebar: style can be found in sidebar.less -->
 298     <section class="sidebar">
 299       <!-- Sidebar user panel -->
 300       <div class="user-panel">
 301         <div class="pull-left image">
 302           <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 303         </div>
 304         <div class="pull-left info">
 305           <p>Alexander Pierce</p>
 306           <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
 307         </div>
 308       </div>
 309       <!-- search form -->
 310       <form action="#" method="get" class="sidebar-form">
 311         <div class="input-group">
 312           <input type="text" name="q" class="form-control" placeholder="Search...">
 313               <span class="input-group-btn">
 314                 <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
 315                 </button>
 316               </span>
 317         </div>
 318       </form>
 319       <!-- /.search form -->
 320       <!-- sidebar menu: : style can be found in sidebar.less -->
 321       <ul class="sidebar-menu">
 322         <li class="header">MAIN NAVIGATION</li>
 323         <li class="treeview">
 324           <a href="#">
 325             <i class="fa fa-dashboard"></i> <span>Dashboard</span>
 326             <span class="pull-right-container">
 327               <i class="fa fa-angle-left pull-right"></i>
 328             </span>
 329           </a>
 330           <ul class="treeview-menu">
 331             <li><a href="../../index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
 332             <li><a href="../../index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
 333           </ul>
 334         </li>
 335         <li class="treeview">
 336           <a href="#">
 337             <i class="fa fa-files-o"></i>
 338             <span>Layout Options</span>
 339             <span class="pull-right-container">
 340               <span class="label label-primary pull-right">4</span>
 341             </span>
 342           </a>
 343           <ul class="treeview-menu">
 344             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
 345             <li><a href="../layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
 346             <li><a href="../layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
 347             <li><a href="../layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
 348           </ul>
 349         </li>
 350         <li>
 351           <a href="../widgets.html">
 352             <i class="fa fa-th"></i> <span>Widgets</span>
 353             <span class="pull-right-container">
 354               <small class="label pull-right bg-green">new</small>
 355             </span>
 356           </a>
 357         </li>
 358         <li class="treeview">
 359           <a href="#">
 360             <i class="fa fa-pie-chart"></i>
 361             <span>Charts</span>
 362             <span class="pull-right-container">
 363               <i class="fa fa-angle-left pull-right"></i>
 364             </span>
 365           </a>
 366           <ul class="treeview-menu">
 367             <li><a href="../charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
 368             <li><a href="../charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
 369             <li><a href="../charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
 370             <li><a href="../charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
 371           </ul>
 372         </li>
 373         <li class="treeview">
 374           <a href="#">
 375             <i class="fa fa-laptop"></i>
 376             <span>UI Elements</span>
 377             <span class="pull-right-container">
 378               <i class="fa fa-angle-left pull-right"></i>
 379             </span>
 380           </a>
 381           <ul class="treeview-menu">
 382             <li><a href="../UI/general.html"><i class="fa fa-circle-o"></i> General</a></li>
 383             <li><a href="../UI/icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
 384             <li><a href="../UI/buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
 385             <li><a href="../UI/sliders.html"><i class="fa fa-circle-o"></i> Sliders</a></li>
 386             <li><a href="../UI/timeline.html"><i class="fa fa-circle-o"></i> Timeline</a></li>
 387             <li><a href="../UI/modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
 388           </ul>
 389         </li>
 390         <li class="treeview active">
 391           <a href="#">
 392             <i class="fa fa-edit"></i> <span>Forms</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 class="active"><a href="general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
 399             <li><a href="advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
 400             <li><a href="editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
 401           </ul>
 402         </li>
 403         <li class="treeview">
 404           <a href="#">
 405             <i class="fa fa-table"></i> <span>Tables</span>
 406             <span class="pull-right-container">
 407               <i class="fa fa-angle-left pull-right"></i>
 408             </span>
 409           </a>
 410           <ul class="treeview-menu">
 411             <li><a href="../tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li>
 412             <li><a href="../tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li>
 413           </ul>
 414         </li>
 415         <li>
 416           <a href="../calendar.html">
 417             <i class="fa fa-calendar"></i> <span>Calendar</span>
 418             <span class="pull-right-container">
 419               <small class="label pull-right bg-red">3</small>
 420               <small class="label pull-right bg-blue">17</small>
 421             </span>
 422           </a>
 423         </li>
 424         <li>
 425           <a href="../mailbox/mailbox.html">
 426             <i class="fa fa-envelope"></i> <span>Mailbox</span>
 427             <span class="pull-right-container">
 428               <small class="label pull-right bg-yellow">12</small>
 429               <small class="label pull-right bg-green">16</small>
 430               <small class="label pull-right bg-red">5</small>
 431             </span>
 432           </a>
 433         </li>
 434         <li class="treeview">
 435           <a href="#">
 436             <i class="fa fa-folder"></i> <span>Examples</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="../examples/invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
 443             <li><a href="../examples/profile.html"><i class="fa fa-circle-o"></i> Profile</a></li>
 444             <li><a href="../examples/login.html"><i class="fa fa-circle-o"></i> Login</a></li>
 445             <li><a href="../examples/register.html"><i class="fa fa-circle-o"></i> Register</a></li>
 446             <li><a href="../examples/lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
 447             <li><a href="../examples/404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
 448             <li><a href="../examples/500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
 449             <li><a href="../examples/blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
 450             <li><a href="../examples/pace.html"><i class="fa fa-circle-o"></i> Pace Page</a></li>
 451           </ul>
 452         </li>
 453         <li class="treeview">
 454           <a href="#">
 455             <i class="fa fa-share"></i> <span>Multilevel</span>
 456             <span class="pull-right-container">
 457               <i class="fa fa-angle-left pull-right"></i>
 458             </span>
 459           </a>
 460           <ul class="treeview-menu">
 461             <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
 462             <li>
 463               <a href="#"><i class="fa fa-circle-o"></i> Level One
 464                 <span class="pull-right-container">
 465                   <i class="fa fa-angle-left pull-right"></i>
 466                 </span>
 467               </a>
 468               <ul class="treeview-menu">
 469                 <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
 470                 <li>
 471                   <a href="#"><i class="fa fa-circle-o"></i> Level Two
 472                     <span class="pull-right-container">
 473                       <i class="fa fa-angle-left pull-right"></i>
 474                     </span>
 475                   </a>
 476                   <ul class="treeview-menu">
 477                     <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
 478                     <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
 479                   </ul>
 480                 </li>
 481               </ul>
 482             </li>
 483             <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
 484           </ul>
 485         </li>
 486         <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
 487         <li class="header">LABELS</li>
 488         <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
 489         <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
 490         <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
 491       </ul>
 492     </section>
 493     <!-- /.sidebar -->
 494   </aside>
 495
 496   <!-- Content Wrapper. Contains page content -->
 497   <div class="content-wrapper">
 498     <!-- Content Header (Page header) -->
 499     <section class="content-header">
 500       <h1>
 501         General Form Elements
 502         <small>Preview</small>
 503       </h1>
 504       <ol class="breadcrumb">
 505         <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
 506         <li><a href="#">Forms</a></li>
 507         <li class="active">General Elements</li>
 508       </ol>
 509     </section>
 510
 511     <!-- Main content -->
 512     <section class="content">
 513       <div class="row">
 514         <!-- left column -->
 515         <div class="col-md-6">
 516           <!-- general form elements -->
 517           <div class="box box-primary">
 518             <div class="box-header with-border">
 519               <h3 class="box-title">Quick Example</h3>
 520             </div>
 521             <!-- /.box-header -->
 522             <!-- form start -->
 523             <form role="form">
 524               <div class="box-body">
 525                 <div class="form-group">
 526                   <label for="exampleInputEmail1">Email address</label>
 527                   <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
 528                 </div>
 529                 <div class="form-group">
 530                   <label for="exampleInputPassword1">Password</label>
 531                   <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
 532                 </div>
 533                 <div class="form-group">
 534                   <label for="exampleInputFile">File input</label>
 535                   <input type="file" id="exampleInputFile">
 536
 537                   <p class="help-block">Example block-level help text here.</p>
 538                 </div>
 539                 <div class="checkbox">
 540                   <label>
 541                     <input type="checkbox"> Check me out
 542                   </label>
 543                 </div>
 544               </div>
 545               <!-- /.box-body -->
 546
 547               <div class="box-footer">
 548                 <button type="submit" class="btn btn-primary">Submit</button>
 549               </div>
 550             </form>
 551           </div>
 552           <!-- /.box -->
 553
 554           <!-- Form Element sizes -->
 555           <div class="box box-success">
 556             <div class="box-header with-border">
 557               <h3 class="box-title">Different Height</h3>
 558             </div>
 559             <div class="box-body">
 560               <input class="form-control input-lg" type="text" placeholder=".input-lg">
 561               <br>
 562               <input class="form-control" type="text" placeholder="Default input">
 563               <br>
 564               <input class="form-control input-sm" type="text" placeholder=".input-sm">
 565             </div>
 566             <!-- /.box-body -->
 567           </div>
 568           <!-- /.box -->
 569
 570           <div class="box box-danger">
 571             <div class="box-header with-border">
 572               <h3 class="box-title">Different Width</h3>
 573             </div>
 574             <div class="box-body">
 575               <div class="row">
 576                 <div class="col-xs-3">
 577                   <input type="text" class="form-control" placeholder=".col-xs-3">
 578                 </div>
 579                 <div class="col-xs-4">
 580                   <input type="text" class="form-control" placeholder=".col-xs-4">
 581                 </div>
 582                 <div class="col-xs-5">
 583                   <input type="text" class="form-control" placeholder=".col-xs-5">
 584                 </div>
 585               </div>
 586             </div>
 587             <!-- /.box-body -->
 588           </div>
 589           <!-- /.box -->
 590
 591           <!-- Input addon -->
 592           <div class="box box-info">
 593             <div class="box-header with-border">
 594               <h3 class="box-title">Input Addon</h3>
 595             </div>
 596             <div class="box-body">
 597               <div class="input-group">
 598                 <span class="input-group-addon">@</span>
 599                 <input type="text" class="form-control" placeholder="Username">
 600               </div>
 601               <br>
 602
 603               <div class="input-group">
 604                 <input type="text" class="form-control">
 605                 <span class="input-group-addon">.00</span>
 606               </div>
 607               <br>
 608
 609               <div class="input-group">
 610                 <span class="input-group-addon">$</span>
 611                 <input type="text" class="form-control">
 612                 <span class="input-group-addon">.00</span>
 613               </div>
 614
 615               <h4>With icons</h4>
 616
 617               <div class="input-group">
 618                 <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
 619                 <input type="email" class="form-control" placeholder="Email">
 620               </div>
 621               <br>
 622
 623               <div class="input-group">
 624                 <input type="text" class="form-control">
 625                 <span class="input-group-addon"><i class="fa fa-check"></i></span>
 626               </div>
 627               <br>
 628
 629               <div class="input-group">
 630                 <span class="input-group-addon"><i class="fa fa-dollar"></i></span>
 631                 <input type="text" class="form-control">
 632                 <span class="input-group-addon"><i class="fa fa-ambulance"></i></span>
 633               </div>
 634
 635               <h4>With checkbox and radio inputs</h4>
 636
 637               <div class="row">
 638                 <div class="col-lg-6">
 639                   <div class="input-group">
 640                         <span class="input-group-addon">
 641                           <input type="checkbox">
 642                         </span>
 643                     <input type="text" class="form-control">
 644                   </div>
 645                   <!-- /input-group -->
 646                 </div>
 647                 <!-- /.col-lg-6 -->
 648                 <div class="col-lg-6">
 649                   <div class="input-group">
 650                         <span class="input-group-addon">
 651                           <input type="radio">
 652                         </span>
 653                     <input type="text" class="form-control">
 654                   </div>
 655                   <!-- /input-group -->
 656                 </div>
 657                 <!-- /.col-lg-6 -->
 658               </div>
 659               <!-- /.row -->
 660
 661               <h4>With buttons</h4>
 662
 663               <p class="margin">Large: <code>.input-group.input-group-lg</code></p>
 664
 665               <div class="input-group input-group-lg">
 666                 <div class="input-group-btn">
 667                   <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Action
 668                     <span class="fa fa-caret-down"></span></button>
 669                   <ul class="dropdown-menu">
 670                     <li><a href="#">Action</a></li>
 671                     <li><a href="#">Another action</a></li>
 672                     <li><a href="#">Something else here</a></li>
 673                     <li class="divider"></li>
 674                     <li><a href="#">Separated link</a></li>
 675                   </ul>
 676                 </div>
 677                 <!-- /btn-group -->
 678                 <input type="text" class="form-control">
 679               </div>
 680               <!-- /input-group -->
 681               <p class="margin">Normal</p>
 682
 683               <div class="input-group">
 684                 <div class="input-group-btn">
 685                   <button type="button" class="btn btn-danger">Action</button>
 686                 </div>
 687                 <!-- /btn-group -->
 688                 <input type="text" class="form-control">
 689               </div>
 690               <!-- /input-group -->
 691               <p class="margin">Small <code>.input-group.input-group-sm</code></p>
 692
 693               <div class="input-group input-group-sm">
 694                 <input type="text" class="form-control">
 695                     <span class="input-group-btn">
 696                       <button type="button" class="btn btn-info btn-flat">Go!</button>
 697                     </span>
 698               </div>
 699               <!-- /input-group -->
 700             </div>
 701             <!-- /.box-body -->
 702           </div>
 703           <!-- /.box -->
 704
 705         </div>
 706         <!--/.col (left) -->
 707         <!-- right column -->
 708         <div class="col-md-6">
 709           <!-- Horizontal Form -->
 710           <div class="box box-info">
 711             <div class="box-header with-border">
 712               <h3 class="box-title">Horizontal Form</h3>
 713             </div>
 714             <!-- /.box-header -->
 715             <!-- form start -->
 716             <form class="form-horizontal">
 717               <div class="box-body">
 718                 <div class="form-group">
 719                   <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
 720
 721                   <div class="col-sm-10">
 722                     <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
 723                   </div>
 724                 </div>
 725                 <div class="form-group">
 726                   <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
 727
 728                   <div class="col-sm-10">
 729                     <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
 730                   </div>
 731                 </div>
 732                 <div class="form-group">
 733                   <div class="col-sm-offset-2 col-sm-10">
 734                     <div class="checkbox">
 735                       <label>
 736                         <input type="checkbox"> Remember me
 737                       </label>
 738                     </div>
 739                   </div>
 740                 </div>
 741               </div>
 742               <!-- /.box-body -->
 743               <div class="box-footer">
 744                 <button type="submit" class="btn btn-default">Cancel</button>
 745                 <button type="submit" class="btn btn-info pull-right">Sign in</button>
 746               </div>
 747               <!-- /.box-footer -->
 748             </form>
 749           </div>
 750           <!-- /.box -->
 751           <!-- general form elements disabled -->
 752           <div class="box box-warning">
 753             <div class="box-header with-border">
 754               <h3 class="box-title">General Elements</h3>
 755             </div>
 756             <!-- /.box-header -->
 757             <div class="box-body">
 758               <form role="form">
 759                 <!-- text input -->
 760                 <div class="form-group">
 761                   <label>Text</label>
 762                   <input type="text" class="form-control" placeholder="Enter ...">
 763                 </div>
 764                 <div class="form-group">
 765                   <label>Text Disabled</label>
 766                   <input type="text" class="form-control" placeholder="Enter ..." disabled>
 767                 </div>
 768
 769                 <!-- textarea -->
 770                 <div class="form-group">
 771                   <label>Textarea</label>
 772                   <textarea class="form-control" rows="3" placeholder="Enter ..."></textarea>
 773                 </div>
 774                 <div class="form-group">
 775                   <label>Textarea Disabled</label>
 776                   <textarea class="form-control" rows="3" placeholder="Enter ..." disabled></textarea>
 777                 </div>
 778
 779                 <!-- input states -->
 780                 <div class="form-group has-success">
 781                   <label class="control-label" for="inputSuccess"><i class="fa fa-check"></i> Input with success</label>
 782                   <input type="text" class="form-control" id="inputSuccess" placeholder="Enter ...">
 783                   <span class="help-block">Help block with success</span>
 784                 </div>
 785                 <div class="form-group has-warning">
 786                   <label class="control-label" for="inputWarning"><i class="fa fa-bell-o"></i> Input with
 787                     warning</label>
 788                   <input type="text" class="form-control" id="inputWarning" placeholder="Enter ...">
 789                   <span class="help-block">Help block with warning</span>
 790                 </div>
 791                 <div class="form-group has-error">
 792                   <label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i> Input with
 793                     error</label>
 794                   <input type="text" class="form-control" id="inputError" placeholder="Enter ...">
 795                   <span class="help-block">Help block with error</span>
 796                 </div>
 797
 798                 <!-- checkbox -->
 799                 <div class="form-group">
 800                   <div class="checkbox">
 801                     <label>
 802                       <input type="checkbox">
 803                       Checkbox 1
 804                     </label>
 805                   </div>
 806
 807                   <div class="checkbox">
 808                     <label>
 809                       <input type="checkbox">
 810                       Checkbox 2
 811                     </label>
 812                   </div>
 813
 814                   <div class="checkbox">
 815                     <label>
 816                       <input type="checkbox" disabled>
 817                       Checkbox disabled
 818                     </label>
 819                   </div>
 820                 </div>
 821
 822                 <!-- radio -->
 823                 <div class="form-group">
 824                   <div class="radio">
 825                     <label>
 826                       <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
 827                       Option one is this and that&mdash;be sure to include why it's great
 828                     </label>
 829                   </div>
 830                   <div class="radio">
 831                     <label>
 832                       <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
 833                       Option two can be something else and selecting it will deselect option one
 834                     </label>
 835                   </div>
 836                   <div class="radio">
 837                     <label>
 838                       <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
 839                       Option three is disabled
 840                     </label>
 841                   </div>
 842                 </div>
 843
 844                 <!-- select -->
 845                 <div class="form-group">
 846                   <label>Select</label>
 847                   <select class="form-control">
 848                     <option>option 1</option>
 849                     <option>option 2</option>
 850                     <option>option 3</option>
 851                     <option>option 4</option>
 852                     <option>option 5</option>
 853                   </select>
 854                 </div>
 855                 <div class="form-group">
 856                   <label>Select Disabled</label>
 857                   <select class="form-control" disabled>
 858                     <option>option 1</option>
 859                     <option>option 2</option>
 860                     <option>option 3</option>
 861                     <option>option 4</option>
 862                     <option>option 5</option>
 863                   </select>
 864                 </div>
 865
 866                 <!-- Select multiple-->
 867                 <div class="form-group">
 868                   <label>Select Multiple</label>
 869                   <select multiple class="form-control">
 870                     <option>option 1</option>
 871                     <option>option 2</option>
 872                     <option>option 3</option>
 873                     <option>option 4</option>
 874                     <option>option 5</option>
 875                   </select>
 876                 </div>
 877                 <div class="form-group">
 878                   <label>Select Multiple Disabled</label>
 879                   <select multiple class="form-control" disabled>
 880                     <option>option 1</option>
 881                     <option>option 2</option>
 882                     <option>option 3</option>
 883                     <option>option 4</option>
 884                     <option>option 5</option>
 885                   </select>
 886                 </div>
 887
 888               </form>
 889             </div>
 890             <!-- /.box-body -->
 891           </div>
 892           <!-- /.box -->
 893         </div>
 894         <!--/.col (right) -->
 895       </div>
 896       <!-- /.row -->
 897     </section>
 898     <!-- /.content -->
 899   </div>
 900   <!-- /.content-wrapper -->
 901   <footer class="main-footer">
 902     <div class="pull-right hidden-xs">
 903       <b>Version</b> 2.3.7
 904     </div>
 905     <strong>Copyright &copy; 2014-2016 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights
 906     reserved.
 907   </footer>
 908
 909   <!-- Control Sidebar -->
 910   <aside class="control-sidebar control-sidebar-dark">
 911     <!-- Create the tabs -->
 912     <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
 913       <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
 914       <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
 915     </ul>
 916     <!-- Tab panes -->
 917     <div class="tab-content">
 918       <!-- Home tab content -->
 919       <div class="tab-pane" id="control-sidebar-home-tab">
 920         <h3 class="control-sidebar-heading">Recent Activity</h3>
 921         <ul class="control-sidebar-menu">
 922           <li>
 923             <a href="javascript:void(0)">
 924               <i class="menu-icon fa fa-birthday-cake bg-red"></i>
 925
 926               <div class="menu-info">
 927                 <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
 928
 929                 <p>Will be 23 on April 24th</p>
 930               </div>
 931             </a>
 932           </li>
 933           <li>
 934             <a href="javascript:void(0)">
 935               <i class="menu-icon fa fa-user bg-yellow"></i>
 936
 937               <div class="menu-info">
 938                 <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
 939
 940                 <p>New phone +1(800)555-1234</p>
 941               </div>
 942             </a>
 943           </li>
 944           <li>
 945             <a href="javascript:void(0)">
 946               <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
 947
 948               <div class="menu-info">
 949                 <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
 950
 951                 <p>nora@example.com</p>
 952               </div>
 953             </a>
 954           </li>
 955           <li>
 956             <a href="javascript:void(0)">
 957               <i class="menu-icon fa fa-file-code-o bg-green"></i>
 958
 959               <div class="menu-info">
 960                 <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
 961
 962                 <p>Execution time 5 seconds</p>
 963               </div>
 964             </a>
 965           </li>
 966         </ul>
 967         <!-- /.control-sidebar-menu -->
 968
 969         <h3 class="control-sidebar-heading">Tasks Progress</h3>
 970         <ul class="control-sidebar-menu">
 971           <li>
 972             <a href="javascript:void(0)">
 973               <h4 class="control-sidebar-subheading">
 974                 Custom Template Design
 975                 <span class="label label-danger pull-right">70%</span>
 976               </h4>
 977
 978               <div class="progress progress-xxs">
 979                 <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
 980               </div>
 981             </a>
 982           </li>
 983           <li>
 984             <a href="javascript:void(0)">
 985               <h4 class="control-sidebar-subheading">
 986                 Update Resume
 987                 <span class="label label-success pull-right">95%</span>
 988               </h4>
 989
 990               <div class="progress progress-xxs">
 991                 <div class="progress-bar progress-bar-success" style="width: 95%"></div>
 992               </div>
 993             </a>
 994           </li>
 995           <li>
 996             <a href="javascript:void(0)">
 997               <h4 class="control-sidebar-subheading">
 998                 Laravel Integration
 999                 <span class="label label-warning pull-right">50%</span>
1000               </h4>
1001
1002               <div class="progress progress-xxs">
1003                 <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
1004               </div>
1005             </a>
1006           </li>
1007           <li>
1008             <a href="javascript:void(0)">
1009               <h4 class="control-sidebar-subheading">
1010                 Back End Framework
1011                 <span class="label label-primary pull-right">68%</span>
1012               </h4>
1013
1014               <div class="progress progress-xxs">
1015                 <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
1016               </div>
1017             </a>
1018           </li>
1019         </ul>
1020         <!-- /.control-sidebar-menu -->
1021
1022       </div>
1023       <!-- /.tab-pane -->
1024       <!-- Stats tab content -->
1025       <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
1026       <!-- /.tab-pane -->
1027       <!-- Settings tab content -->
1028       <div class="tab-pane" id="control-sidebar-settings-tab">
1029         <form method="post">
1030           <h3 class="control-sidebar-heading">General Settings</h3>
1031
1032           <div class="form-group">
1033             <label class="control-sidebar-subheading">
1034               Report panel usage
1035               <input type="checkbox" class="pull-right" checked>
1036             </label>
1037
1038             <p>
1039               Some information about this general settings option
1040             </p>
1041           </div>
1042           <!-- /.form-group -->
1043
1044           <div class="form-group">
1045             <label class="control-sidebar-subheading">
1046               Allow mail redirect
1047               <input type="checkbox" class="pull-right" checked>
1048             </label>
1049
1050             <p>
1051               Other sets of options are available
1052             </p>
1053           </div>
1054           <!-- /.form-group -->
1055
1056           <div class="form-group">
1057             <label class="control-sidebar-subheading">
1058               Expose author name in posts
1059               <input type="checkbox" class="pull-right" checked>
1060             </label>
1061
1062             <p>
1063               Allow the user to show his name in blog posts
1064             </p>
1065           </div>
1066           <!-- /.form-group -->
1067
1068           <h3 class="control-sidebar-heading">Chat Settings</h3>
1069
1070           <div class="form-group">
1071             <label class="control-sidebar-subheading">
1072               Show me as online
1073               <input type="checkbox" class="pull-right" checked>
1074             </label>
1075           </div>
1076           <!-- /.form-group -->
1077
1078           <div class="form-group">
1079             <label class="control-sidebar-subheading">
1080               Turn off notifications
1081               <input type="checkbox" class="pull-right">
1082             </label>
1083           </div>
1084           <!-- /.form-group -->
1085
1086           <div class="form-group">
1087             <label class="control-sidebar-subheading">
1088               Delete chat history
1089               <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
1090             </label>
1091           </div>
1092           <!-- /.form-group -->
1093         </form>
1094       </div>
1095       <!-- /.tab-pane -->
1096     </div>
1097   </aside>
1098   <!-- /.control-sidebar -->
1099   <!-- Add the sidebar's background. This div must be placed
1100        immediately after the control sidebar -->
1101   <div class="control-sidebar-bg"></div>
1102 </div>
1103 <!-- ./wrapper -->
1104
1105 <!-- jQuery 2.2.3 -->
1106 <script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>
1107 <!-- Bootstrap 3.3.6 -->
1108 <script src="../../bootstrap/js/bootstrap.min.js"></script>
1109 <!-- FastClick -->
1110 <script src="../../plugins/fastclick/fastclick.js"></script>
1111 <!-- AdminLTE App -->
1112 <script src="../../dist/js/app.min.js"></script>
1113 <!-- AdminLTE for demo purposes -->
1114 <script src="../../dist/js/demo.js"></script>
1115 </body>
1116 </html>