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