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