src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/pages/forms/advanced.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 | Advanced 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   <!-- daterange picker -->
  16   <link rel="stylesheet" href="../../plugins/daterangepicker/daterangepicker.css">
  17   <!-- bootstrap datepicker -->
  18   <link rel="stylesheet" href="../../plugins/datepicker/datepicker3.css">
  19   <!-- iCheck for checkboxes and radio inputs -->
  20   <link rel="stylesheet" href="../../plugins/iCheck/all.css">
  21   <!-- Bootstrap Color Picker -->
  22   <link rel="stylesheet" href="../../plugins/colorpicker/bootstrap-colorpicker.min.css">
  23   <!-- Bootstrap time Picker -->
  24   <link rel="stylesheet" href="../../plugins/timepicker/bootstrap-timepicker.min.css">
  25   <!-- Select2 -->
  26   <link rel="stylesheet" href="../../plugins/select2/select2.min.css">
  27   <!-- Theme style -->
  28   <link rel="stylesheet" href="../../dist/css/AdminLTE.min.css">
  29   <!-- AdminLTE Skins. Choose a skin from the css/skins
  30        folder instead of downloading all of them to reduce the load. -->
  31   <link rel="stylesheet" href="../../dist/css/skins/_all-skins.min.css">
  32
  33   <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  34   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  35   <!--[if lt IE 9]>
  36   <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  37   <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  38   <![endif]-->
  39 </head>
  40 <body class="hold-transition skin-blue sidebar-mini">
  41 <div class="wrapper">
  42
  43   <header class="main-header">
  44     <!-- Logo -->
  45     <a href="../../index2.html" class="logo">
  46       <!-- mini logo for sidebar mini 50x50 pixels -->
  47       <span class="logo-mini"><b>A</b>LT</span>
  48       <!-- logo for regular state and mobile devices -->
  49       <span class="logo-lg"><b>Admin</b>LTE</span>
  50     </a>
  51     <!-- Header Navbar: style can be found in header.less -->
  52     <nav class="navbar navbar-static-top">
  53       <!-- Sidebar toggle button-->
  54       <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
  55         <span class="sr-only">Toggle navigation</span>
  56         <span class="icon-bar"></span>
  57         <span class="icon-bar"></span>
  58         <span class="icon-bar"></span>
  59       </a>
  60
  61       <div class="navbar-custom-menu">
  62         <ul class="nav navbar-nav">
  63           <!-- Messages: style can be found in dropdown.less-->
  64           <li class="dropdown messages-menu">
  65             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  66               <i class="fa fa-envelope-o"></i>
  67               <span class="label label-success">4</span>
  68             </a>
  69             <ul class="dropdown-menu">
  70               <li class="header">You have 4 messages</li>
  71               <li>
  72                 <!-- inner menu: contains the actual data -->
  73                 <ul class="menu">
  74                   <li><!-- start message -->
  75                     <a href="#">
  76                       <div class="pull-left">
  77                         <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  78                       </div>
  79                       <h4>
  80                         Support Team
  81                         <small><i class="fa fa-clock-o"></i> 5 mins</small>
  82                       </h4>
  83                       <p>Why not buy a new awesome theme?</p>
  84                     </a>
  85                   </li>
  86                   <!-- end message -->
  87                   <li>
  88                     <a href="#">
  89                       <div class="pull-left">
  90                         <img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
  91                       </div>
  92                       <h4>
  93                         AdminLTE Design Team
  94                         <small><i class="fa fa-clock-o"></i> 2 hours</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/user4-128x128.jpg" class="img-circle" alt="User Image">
 103                       </div>
 104                       <h4>
 105                         Developers
 106                         <small><i class="fa fa-clock-o"></i> Today</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/user3-128x128.jpg" class="img-circle" alt="User Image">
 115                       </div>
 116                       <h4>
 117                         Sales Department
 118                         <small><i class="fa fa-clock-o"></i> Yesterday</small>
 119                       </h4>
 120                       <p>Why not buy a new awesome theme?</p>
 121                     </a>
 122                   </li>
 123                   <li>
 124                     <a href="#">
 125                       <div class="pull-left">
 126                         <img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
 127                       </div>
 128                       <h4>
 129                         Reviewers
 130                         <small><i class="fa fa-clock-o"></i> 2 days</small>
 131                       </h4>
 132                       <p>Why not buy a new awesome theme?</p>
 133                     </a>
 134                   </li>
 135                 </ul>
 136               </li>
 137               <li class="footer"><a href="#">See All Messages</a></li>
 138             </ul>
 139           </li>
 140           <!-- Notifications: style can be found in dropdown.less -->
 141           <li class="dropdown notifications-menu">
 142             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 143               <i class="fa fa-bell-o"></i>
 144               <span class="label label-warning">10</span>
 145             </a>
 146             <ul class="dropdown-menu">
 147               <li class="header">You have 10 notifications</li>
 148               <li>
 149                 <!-- inner menu: contains the actual data -->
 150                 <ul class="menu">
 151                   <li>
 152                     <a href="#">
 153                       <i class="fa fa-users text-aqua"></i> 5 new members joined today
 154                     </a>
 155                   </li>
 156                   <li>
 157                     <a href="#">
 158                       <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the
 159                       page and may cause design problems
 160                     </a>
 161                   </li>
 162                   <li>
 163                     <a href="#">
 164                       <i class="fa fa-users text-red"></i> 5 new members joined
 165                     </a>
 166                   </li>
 167
 168                   <li>
 169                     <a href="#">
 170                       <i class="fa fa-shopping-cart text-green"></i> 25 sales made
 171                     </a>
 172                   </li>
 173                   <li>
 174                     <a href="#">
 175                       <i class="fa fa-user text-red"></i> You changed your username
 176                     </a>
 177                   </li>
 178                 </ul>
 179               </li>
 180               <li class="footer"><a href="#">View all</a></li>
 181             </ul>
 182           </li>
 183           <!-- Tasks: style can be found in dropdown.less -->
 184           <li class="dropdown tasks-menu">
 185             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 186               <i class="fa fa-flag-o"></i>
 187               <span class="label label-danger">9</span>
 188             </a>
 189             <ul class="dropdown-menu">
 190               <li class="header">You have 9 tasks</li>
 191               <li>
 192                 <!-- inner menu: contains the actual data -->
 193                 <ul class="menu">
 194                   <li><!-- Task item -->
 195                     <a href="#">
 196                       <h3>
 197                         Design some buttons
 198                         <small class="pull-right">20%</small>
 199                       </h3>
 200                       <div class="progress xs">
 201                         <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 202                           <span class="sr-only">20% Complete</span>
 203                         </div>
 204                       </div>
 205                     </a>
 206                   </li>
 207                   <!-- end task item -->
 208                   <li><!-- Task item -->
 209                     <a href="#">
 210                       <h3>
 211                         Create a nice theme
 212                         <small class="pull-right">40%</small>
 213                       </h3>
 214                       <div class="progress xs">
 215                         <div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 216                           <span class="sr-only">40% Complete</span>
 217                         </div>
 218                       </div>
 219                     </a>
 220                   </li>
 221                   <!-- end task item -->
 222                   <li><!-- Task item -->
 223                     <a href="#">
 224                       <h3>
 225                         Some task I need to do
 226                         <small class="pull-right">60%</small>
 227                       </h3>
 228                       <div class="progress xs">
 229                         <div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 230                           <span class="sr-only">60% Complete</span>
 231                         </div>
 232                       </div>
 233                     </a>
 234                   </li>
 235                   <!-- end task item -->
 236                   <li><!-- Task item -->
 237                     <a href="#">
 238                       <h3>
 239                         Make beautiful transitions
 240                         <small class="pull-right">80%</small>
 241                       </h3>
 242                       <div class="progress xs">
 243                         <div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 244                           <span class="sr-only">80% Complete</span>
 245                         </div>
 246                       </div>
 247                     </a>
 248                   </li>
 249                   <!-- end task item -->
 250                 </ul>
 251               </li>
 252               <li class="footer">
 253                 <a href="#">View all tasks</a>
 254               </li>
 255             </ul>
 256           </li>
 257           <!-- User Account: style can be found in dropdown.less -->
 258           <li class="dropdown user user-menu">
 259             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 260               <img src="../../dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
 261               <span class="hidden-xs">Alexander Pierce</span>
 262             </a>
 263             <ul class="dropdown-menu">
 264               <!-- User image -->
 265               <li class="user-header">
 266                 <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 267
 268                 <p>
 269                   Alexander Pierce - Web Developer
 270                   <small>Member since Nov. 2012</small>
 271                 </p>
 272               </li>
 273               <!-- Menu Body -->
 274               <li class="user-body">
 275                 <div class="row">
 276                   <div class="col-xs-4 text-center">
 277                     <a href="#">Followers</a>
 278                   </div>
 279                   <div class="col-xs-4 text-center">
 280                     <a href="#">Sales</a>
 281                   </div>
 282                   <div class="col-xs-4 text-center">
 283                     <a href="#">Friends</a>
 284                   </div>
 285                 </div>
 286                 <!-- /.row -->
 287               </li>
 288               <!-- Menu Footer-->
 289               <li class="user-footer">
 290                 <div class="pull-left">
 291                   <a href="#" class="btn btn-default btn-flat">Profile</a>
 292                 </div>
 293                 <div class="pull-right">
 294                   <a href="#" class="btn btn-default btn-flat">Sign out</a>
 295                 </div>
 296               </li>
 297             </ul>
 298           </li>
 299           <!-- Control Sidebar Toggle Button -->
 300           <li>
 301             <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
 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">
 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="../UI/general.html"><i class="fa fa-circle-o"></i> General</a></li>
 395             <li><a href="../UI/icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
 396             <li><a href="../UI/buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
 397             <li><a href="../UI/sliders.html"><i class="fa fa-circle-o"></i> Sliders</a></li>
 398             <li><a href="../UI/timeline.html"><i class="fa fa-circle-o"></i> Timeline</a></li>
 399             <li><a href="../UI/modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
 400           </ul>
 401         </li>
 402         <li class="treeview active">
 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="general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
 411             <li class="active"><a href="advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
 412             <li><a href="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         Advanced Form Elements
 514         <small>Preview</small>
 515       </h1>
 516       <ol class="breadcrumb">
 517         <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
 518         <li><a href="#">Forms</a></li>
 519         <li class="active">Advanced Elements</li>
 520       </ol>
 521     </section>
 522
 523     <!-- Main content -->
 524     <section class="content">
 525
 526       <!-- SELECT2 EXAMPLE -->
 527       <div class="box box-default">
 528         <div class="box-header with-border">
 529           <h3 class="box-title">Select2</h3>
 530
 531           <div class="box-tools pull-right">
 532             <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
 533             <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i></button>
 534           </div>
 535         </div>
 536         <!-- /.box-header -->
 537         <div class="box-body">
 538           <div class="row">
 539             <div class="col-md-6">
 540               <div class="form-group">
 541                 <label>Minimal</label>
 542                 <select class="form-control select2" style="width: 100%;">
 543                   <option selected="selected">Alabama</option>
 544                   <option>Alaska</option>
 545                   <option>California</option>
 546                   <option>Delaware</option>
 547                   <option>Tennessee</option>
 548                   <option>Texas</option>
 549                   <option>Washington</option>
 550                 </select>
 551               </div>
 552               <!-- /.form-group -->
 553               <div class="form-group">
 554                 <label>Disabled</label>
 555                 <select class="form-control select2" disabled="disabled" style="width: 100%;">
 556                   <option selected="selected">Alabama</option>
 557                   <option>Alaska</option>
 558                   <option>California</option>
 559                   <option>Delaware</option>
 560                   <option>Tennessee</option>
 561                   <option>Texas</option>
 562                   <option>Washington</option>
 563                 </select>
 564               </div>
 565               <!-- /.form-group -->
 566             </div>
 567             <!-- /.col -->
 568             <div class="col-md-6">
 569               <div class="form-group">
 570                 <label>Multiple</label>
 571                 <select class="form-control select2" multiple="multiple" data-placeholder="Select a State" style="width: 100%;">
 572                   <option>Alabama</option>
 573                   <option>Alaska</option>
 574                   <option>California</option>
 575                   <option>Delaware</option>
 576                   <option>Tennessee</option>
 577                   <option>Texas</option>
 578                   <option>Washington</option>
 579                 </select>
 580               </div>
 581               <!-- /.form-group -->
 582               <div class="form-group">
 583                 <label>Disabled Result</label>
 584                 <select class="form-control select2" style="width: 100%;">
 585                   <option selected="selected">Alabama</option>
 586                   <option>Alaska</option>
 587                   <option disabled="disabled">California (disabled)</option>
 588                   <option>Delaware</option>
 589                   <option>Tennessee</option>
 590                   <option>Texas</option>
 591                   <option>Washington</option>
 592                 </select>
 593               </div>
 594               <!-- /.form-group -->
 595             </div>
 596             <!-- /.col -->
 597           </div>
 598           <!-- /.row -->
 599         </div>
 600         <!-- /.box-body -->
 601         <div class="box-footer">
 602           Visit <a href="https://select2.github.io/">Select2 documentation</a> for more examples and information about
 603           the plugin.
 604         </div>
 605       </div>
 606       <!-- /.box -->
 607
 608       <div class="row">
 609         <div class="col-md-6">
 610
 611           <div class="box box-danger">
 612             <div class="box-header">
 613               <h3 class="box-title">Input masks</h3>
 614             </div>
 615             <div class="box-body">
 616               <!-- Date dd/mm/yyyy -->
 617               <div class="form-group">
 618                 <label>Date masks:</label>
 619
 620                 <div class="input-group">
 621                   <div class="input-group-addon">
 622                     <i class="fa fa-calendar"></i>
 623                   </div>
 624                   <input type="text" class="form-control" data-inputmask="'alias': 'dd/mm/yyyy'" data-mask>
 625                 </div>
 626                 <!-- /.input group -->
 627               </div>
 628               <!-- /.form group -->
 629
 630               <!-- Date mm/dd/yyyy -->
 631               <div class="form-group">
 632                 <div class="input-group">
 633                   <div class="input-group-addon">
 634                     <i class="fa fa-calendar"></i>
 635                   </div>
 636                   <input type="text" class="form-control" data-inputmask="'alias': 'mm/dd/yyyy'" data-mask>
 637                 </div>
 638                 <!-- /.input group -->
 639               </div>
 640               <!-- /.form group -->
 641
 642               <!-- phone mask -->
 643               <div class="form-group">
 644                 <label>US phone mask:</label>
 645
 646                 <div class="input-group">
 647                   <div class="input-group-addon">
 648                     <i class="fa fa-phone"></i>
 649                   </div>
 650                   <input type="text" class="form-control" data-inputmask='"mask": "(999) 999-9999"' data-mask>
 651                 </div>
 652                 <!-- /.input group -->
 653               </div>
 654               <!-- /.form group -->
 655
 656               <!-- phone mask -->
 657               <div class="form-group">
 658                 <label>Intl US phone mask:</label>
 659
 660                 <div class="input-group">
 661                   <div class="input-group-addon">
 662                     <i class="fa fa-phone"></i>
 663                   </div>
 664                   <input type="text" class="form-control" data-inputmask="'mask': ['999-999-9999 [x99999]', '+099 99 99 9999[9]-9999']" data-mask>
 665                 </div>
 666                 <!-- /.input group -->
 667               </div>
 668               <!-- /.form group -->
 669
 670               <!-- IP mask -->
 671               <div class="form-group">
 672                 <label>IP mask:</label>
 673
 674                 <div class="input-group">
 675                   <div class="input-group-addon">
 676                     <i class="fa fa-laptop"></i>
 677                   </div>
 678                   <input type="text" class="form-control" data-inputmask="'alias': 'ip'" data-mask>
 679                 </div>
 680                 <!-- /.input group -->
 681               </div>
 682               <!-- /.form group -->
 683
 684             </div>
 685             <!-- /.box-body -->
 686           </div>
 687           <!-- /.box -->
 688
 689           <div class="box box-info">
 690             <div class="box-header">
 691               <h3 class="box-title">Color & Time Picker</h3>
 692             </div>
 693             <div class="box-body">
 694               <!-- Color Picker -->
 695               <div class="form-group">
 696                 <label>Color picker:</label>
 697                 <input type="text" class="form-control my-colorpicker1">
 698               </div>
 699               <!-- /.form group -->
 700
 701               <!-- Color Picker -->
 702               <div class="form-group">
 703                 <label>Color picker with addon:</label>
 704
 705                 <div class="input-group my-colorpicker2">
 706                   <input type="text" class="form-control">
 707
 708                   <div class="input-group-addon">
 709                     <i></i>
 710                   </div>
 711                 </div>
 712                 <!-- /.input group -->
 713               </div>
 714               <!-- /.form group -->
 715
 716               <!-- time Picker -->
 717               <div class="bootstrap-timepicker">
 718                 <div class="form-group">
 719                   <label>Time picker:</label>
 720
 721                   <div class="input-group">
 722                     <input type="text" class="form-control timepicker">
 723
 724                     <div class="input-group-addon">
 725                       <i class="fa fa-clock-o"></i>
 726                     </div>
 727                   </div>
 728                   <!-- /.input group -->
 729                 </div>
 730                 <!-- /.form group -->
 731               </div>
 732             </div>
 733             <!-- /.box-body -->
 734           </div>
 735           <!-- /.box -->
 736
 737         </div>
 738         <!-- /.col (left) -->
 739         <div class="col-md-6">
 740           <div class="box box-primary">
 741             <div class="box-header">
 742               <h3 class="box-title">Date picker</h3>
 743             </div>
 744             <div class="box-body">
 745               <!-- Date -->
 746               <div class="form-group">
 747                 <label>Date:</label>
 748
 749                 <div class="input-group date">
 750                   <div class="input-group-addon">
 751                     <i class="fa fa-calendar"></i>
 752                   </div>
 753                   <input type="text" class="form-control pull-right" id="datepicker">
 754                 </div>
 755                 <!-- /.input group -->
 756               </div>
 757               <!-- /.form group -->
 758
 759               <!-- Date range -->
 760               <div class="form-group">
 761                 <label>Date range:</label>
 762
 763                 <div class="input-group">
 764                   <div class="input-group-addon">
 765                     <i class="fa fa-calendar"></i>
 766                   </div>
 767                   <input type="text" class="form-control pull-right" id="reservation">
 768                 </div>
 769                 <!-- /.input group -->
 770               </div>
 771               <!-- /.form group -->
 772
 773               <!-- Date and time range -->
 774               <div class="form-group">
 775                 <label>Date and time range:</label>
 776
 777                 <div class="input-group">
 778                   <div class="input-group-addon">
 779                     <i class="fa fa-clock-o"></i>
 780                   </div>
 781                   <input type="text" class="form-control pull-right" id="reservationtime">
 782                 </div>
 783                 <!-- /.input group -->
 784               </div>
 785               <!-- /.form group -->
 786
 787               <!-- Date and time range -->
 788               <div class="form-group">
 789                 <label>Date range button:</label>
 790
 791                 <div class="input-group">
 792                   <button type="button" class="btn btn-default pull-right" id="daterange-btn">
 793                     <span>
 794                       <i class="fa fa-calendar"></i> Date range picker
 795                     </span>
 796                     <i class="fa fa-caret-down"></i>
 797                   </button>
 798                 </div>
 799               </div>
 800               <!-- /.form group -->
 801
 802             </div>
 803             <!-- /.box-body -->
 804           </div>
 805           <!-- /.box -->
 806
 807           <!-- iCheck -->
 808           <div class="box box-success">
 809             <div class="box-header">
 810               <h3 class="box-title">iCheck - Checkbox &amp; Radio Inputs</h3>
 811             </div>
 812             <div class="box-body">
 813               <!-- Minimal style -->
 814
 815               <!-- checkbox -->
 816               <div class="form-group">
 817                 <label>
 818                   <input type="checkbox" class="minimal" checked>
 819                 </label>
 820                 <label>
 821                   <input type="checkbox" class="minimal">
 822                 </label>
 823                 <label>
 824                   <input type="checkbox" class="minimal" disabled>
 825                   Minimal skin checkbox
 826                 </label>
 827               </div>
 828
 829               <!-- radio -->
 830               <div class="form-group">
 831                 <label>
 832                   <input type="radio" name="r1" class="minimal" checked>
 833                 </label>
 834                 <label>
 835                   <input type="radio" name="r1" class="minimal">
 836                 </label>
 837                 <label>
 838                   <input type="radio" name="r1" class="minimal" disabled>
 839                   Minimal skin radio
 840                 </label>
 841               </div>
 842
 843               <!-- Minimal red style -->
 844
 845               <!-- checkbox -->
 846               <div class="form-group">
 847                 <label>
 848                   <input type="checkbox" class="minimal-red" checked>
 849                 </label>
 850                 <label>
 851                   <input type="checkbox" class="minimal-red">
 852                 </label>
 853                 <label>
 854                   <input type="checkbox" class="minimal-red" disabled>
 855                   Minimal red skin checkbox
 856                 </label>
 857               </div>
 858
 859               <!-- radio -->
 860               <div class="form-group">
 861                 <label>
 862                   <input type="radio" name="r2" class="minimal-red" checked>
 863                 </label>
 864                 <label>
 865                   <input type="radio" name="r2" class="minimal-red">
 866                 </label>
 867                 <label>
 868                   <input type="radio" name="r2" class="minimal-red" disabled>
 869                   Minimal red skin radio
 870                 </label>
 871               </div>
 872
 873               <!-- Minimal red style -->
 874
 875               <!-- checkbox -->
 876               <div class="form-group">
 877                 <label>
 878                   <input type="checkbox" class="flat-red" checked>
 879                 </label>
 880                 <label>
 881                   <input type="checkbox" class="flat-red">
 882                 </label>
 883                 <label>
 884                   <input type="checkbox" class="flat-red" disabled>
 885                   Flat green skin checkbox
 886                 </label>
 887               </div>
 888
 889               <!-- radio -->
 890               <div class="form-group">
 891                 <label>
 892                   <input type="radio" name="r3" class="flat-red" checked>
 893                 </label>
 894                 <label>
 895                   <input type="radio" name="r3" class="flat-red">
 896                 </label>
 897                 <label>
 898                   <input type="radio" name="r3" class="flat-red" disabled>
 899                   Flat green skin radio
 900                 </label>
 901               </div>
 902             </div>
 903             <!-- /.box-body -->
 904             <div class="box-footer">
 905               Many more skins available. <a href="http://fronteed.com/iCheck/">Documentation</a>
 906             </div>
 907           </div>
 908           <!-- /.box -->
 909         </div>
 910         <!-- /.col (right) -->
 911       </div>
 912       <!-- /.row -->
 913
 914     </section>
 915     <!-- /.content -->
 916   </div>
 917   <!-- /.content-wrapper -->
 918   <footer class="main-footer">
 919     <div class="pull-right hidden-xs">
 920       <b>Version</b> 2.3.7
 921     </div>
 922     <strong>Copyright &copy; 2014-2016 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights
 923     reserved.
 924   </footer>
 925
 926   <!-- Control Sidebar -->
 927   <aside class="control-sidebar control-sidebar-dark">
 928     <!-- Create the tabs -->
 929     <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
 930       <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
 931       <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
 932     </ul>
 933     <!-- Tab panes -->
 934     <div class="tab-content">
 935       <!-- Home tab content -->
 936       <div class="tab-pane" id="control-sidebar-home-tab">
 937         <h3 class="control-sidebar-heading">Recent Activity</h3>
 938         <ul class="control-sidebar-menu">
 939           <li>
 940             <a href="javascript:void(0)">
 941               <i class="menu-icon fa fa-birthday-cake bg-red"></i>
 942
 943               <div class="menu-info">
 944                 <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
 945
 946                 <p>Will be 23 on April 24th</p>
 947               </div>
 948             </a>
 949           </li>
 950           <li>
 951             <a href="javascript:void(0)">
 952               <i class="menu-icon fa fa-user bg-yellow"></i>
 953
 954               <div class="menu-info">
 955                 <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
 956
 957                 <p>New phone +1(800)555-1234</p>
 958               </div>
 959             </a>
 960           </li>
 961           <li>
 962             <a href="javascript:void(0)">
 963               <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
 964
 965               <div class="menu-info">
 966                 <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
 967
 968                 <p>nora@example.com</p>
 969               </div>
 970             </a>
 971           </li>
 972           <li>
 973             <a href="javascript:void(0)">
 974               <i class="menu-icon fa fa-file-code-o bg-green"></i>
 975
 976               <div class="menu-info">
 977                 <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
 978
 979                 <p>Execution time 5 seconds</p>
 980               </div>
 981             </a>
 982           </li>
 983         </ul>
 984         <!-- /.control-sidebar-menu -->
 985
 986         <h3 class="control-sidebar-heading">Tasks Progress</h3>
 987         <ul class="control-sidebar-menu">
 988           <li>
 989             <a href="javascript:void(0)">
 990               <h4 class="control-sidebar-subheading">
 991                 Custom Template Design
 992                 <span class="label label-danger pull-right">70%</span>
 993               </h4>
 994
 995               <div class="progress progress-xxs">
 996                 <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
 997               </div>
 998             </a>
 999           </li>
1000           <li>
1001             <a href="javascript:void(0)">
1002               <h4 class="control-sidebar-subheading">
1003                 Update Resume
1004                 <span class="label label-success pull-right">95%</span>
1005               </h4>
1006
1007               <div class="progress progress-xxs">
1008                 <div class="progress-bar progress-bar-success" style="width: 95%"></div>
1009               </div>
1010             </a>
1011           </li>
1012           <li>
1013             <a href="javascript:void(0)">
1014               <h4 class="control-sidebar-subheading">
1015                 Laravel Integration
1016                 <span class="label label-warning pull-right">50%</span>
1017               </h4>
1018
1019               <div class="progress progress-xxs">
1020                 <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
1021               </div>
1022             </a>
1023           </li>
1024           <li>
1025             <a href="javascript:void(0)">
1026               <h4 class="control-sidebar-subheading">
1027                 Back End Framework
1028                 <span class="label label-primary pull-right">68%</span>
1029               </h4>
1030
1031               <div class="progress progress-xxs">
1032                 <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
1033               </div>
1034             </a>
1035           </li>
1036         </ul>
1037         <!-- /.control-sidebar-menu -->
1038
1039       </div>
1040       <!-- /.tab-pane -->
1041       <!-- Stats tab content -->
1042       <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
1043       <!-- /.tab-pane -->
1044       <!-- Settings tab content -->
1045       <div class="tab-pane" id="control-sidebar-settings-tab">
1046         <form method="post">
1047           <h3 class="control-sidebar-heading">General Settings</h3>
1048
1049           <div class="form-group">
1050             <label class="control-sidebar-subheading">
1051               Report panel usage
1052               <input type="checkbox" class="pull-right" checked>
1053             </label>
1054
1055             <p>
1056               Some information about this general settings option
1057             </p>
1058           </div>
1059           <!-- /.form-group -->
1060
1061           <div class="form-group">
1062             <label class="control-sidebar-subheading">
1063               Allow mail redirect
1064               <input type="checkbox" class="pull-right" checked>
1065             </label>
1066
1067             <p>
1068               Other sets of options are available
1069             </p>
1070           </div>
1071           <!-- /.form-group -->
1072
1073           <div class="form-group">
1074             <label class="control-sidebar-subheading">
1075               Expose author name in posts
1076               <input type="checkbox" class="pull-right" checked>
1077             </label>
1078
1079             <p>
1080               Allow the user to show his name in blog posts
1081             </p>
1082           </div>
1083           <!-- /.form-group -->
1084
1085           <h3 class="control-sidebar-heading">Chat Settings</h3>
1086
1087           <div class="form-group">
1088             <label class="control-sidebar-subheading">
1089               Show me as online
1090               <input type="checkbox" class="pull-right" checked>
1091             </label>
1092           </div>
1093           <!-- /.form-group -->
1094
1095           <div class="form-group">
1096             <label class="control-sidebar-subheading">
1097               Turn off notifications
1098               <input type="checkbox" class="pull-right">
1099             </label>
1100           </div>
1101           <!-- /.form-group -->
1102
1103           <div class="form-group">
1104             <label class="control-sidebar-subheading">
1105               Delete chat history
1106               <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
1107             </label>
1108           </div>
1109           <!-- /.form-group -->
1110         </form>
1111       </div>
1112       <!-- /.tab-pane -->
1113     </div>
1114   </aside>
1115   <!-- /.control-sidebar -->
1116   <!-- Add the sidebar's background. This div must be placed
1117        immediately after the control sidebar -->
1118   <div class="control-sidebar-bg"></div>
1119 </div>
1120 <!-- ./wrapper -->
1121
1122 <!-- jQuery 2.2.3 -->
1123 <script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>
1124 <!-- Bootstrap 3.3.6 -->
1125 <script src="../../bootstrap/js/bootstrap.min.js"></script>
1126 <!-- Select2 -->
1127 <script src="../../plugins/select2/select2.full.min.js"></script>
1128 <!-- InputMask -->
1129 <script src="../../plugins/input-mask/jquery.inputmask.js"></script>
1130 <script src="../../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
1131 <script src="../../plugins/input-mask/jquery.inputmask.extensions.js"></script>
1132 <!-- date-range-picker -->
1133 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
1134 <script src="../../plugins/daterangepicker/daterangepicker.js"></script>
1135 <!-- bootstrap datepicker -->
1136 <script src="../../plugins/datepicker/bootstrap-datepicker.js"></script>
1137 <!-- bootstrap color picker -->
1138 <script src="../../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
1139 <!-- bootstrap time picker -->
1140 <script src="../../plugins/timepicker/bootstrap-timepicker.min.js"></script>
1141 <!-- SlimScroll 1.3.0 -->
1142 <script src="../../plugins/slimScroll/jquery.slimscroll.min.js"></script>
1143 <!-- iCheck 1.0.1 -->
1144 <script src="../../plugins/iCheck/icheck.min.js"></script>
1145 <!-- FastClick -->
1146 <script src="../../plugins/fastclick/fastclick.js"></script>
1147 <!-- AdminLTE App -->
1148 <script src="../../dist/js/app.min.js"></script>
1149 <!-- AdminLTE for demo purposes -->
1150 <script src="../../dist/js/demo.js"></script>
1151 <!-- Page script -->
1152 <script>
1153   $(function () {
1154     //Initialize Select2 Elements
1155     $(".select2").select2();
1156
1157     //Datemask dd/mm/yyyy
1158     $("#datemask").inputmask("dd/mm/yyyy", {"placeholder": "dd/mm/yyyy"});
1159     //Datemask2 mm/dd/yyyy
1160     $("#datemask2").inputmask("mm/dd/yyyy", {"placeholder": "mm/dd/yyyy"});
1161     //Money Euro
1162     $("[data-mask]").inputmask();
1163
1164     //Date range picker
1165     $('#reservation').daterangepicker();
1166     //Date range picker with time picker
1167     $('#reservationtime').daterangepicker({timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A'});
1168     //Date range as a button
1169     $('#daterange-btn').daterangepicker(
1170         {
1171           ranges: {
1172             'Today': [moment(), moment()],
1173             'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
1174             'Last 7 Days': [moment().subtract(6, 'days'), moment()],
1175             'Last 30 Days': [moment().subtract(29, 'days'), moment()],
1176             'This Month': [moment().startOf('month'), moment().endOf('month')],
1177             'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
1178           },
1179           startDate: moment().subtract(29, 'days'),
1180           endDate: moment()
1181         },
1182         function (start, end) {
1183           $('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
1184         }
1185     );
1186
1187     //Date picker
1188     $('#datepicker').datepicker({
1189       autoclose: true
1190     });
1191
1192     //iCheck for checkbox and radio inputs
1193     $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
1194       checkboxClass: 'icheckbox_minimal-blue',
1195       radioClass: 'iradio_minimal-blue'
1196     });
1197     //Red color scheme for iCheck
1198     $('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
1199       checkboxClass: 'icheckbox_minimal-red',
1200       radioClass: 'iradio_minimal-red'
1201     });
1202     //Flat red color scheme for iCheck
1203     $('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
1204       checkboxClass: 'icheckbox_flat-green',
1205       radioClass: 'iradio_flat-green'
1206     });
1207
1208     //Colorpicker
1209     $(".my-colorpicker1").colorpicker();
1210     //color picker with addon
1211     $(".my-colorpicker2").colorpicker();
1212
1213     //Timepicker
1214     $(".timepicker").timepicker({
1215       showInputs: false
1216     });
1217   });
1218 </script>
1219 </body>
1220 </html>