src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/pages/examples/invoice.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 | Invoice</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">
 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="../UI/general.html"><i class="fa fa-circle-o"></i> General</a></li>
 382             <li><a href="../UI/icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
 383             <li><a href="../UI/buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
 384             <li><a href="../UI/sliders.html"><i class="fa fa-circle-o"></i> Sliders</a></li>
 385             <li><a href="../UI/modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
 386           </ul>
 387         </li>
 388         <li class="treeview">
 389           <a href="#">
 390             <i class="fa fa-edit"></i> <span>Forms</span>
 391             <span class="pull-right-container">
 392               <i class="fa fa-angle-left pull-right"></i>
 393             </span>
 394           </a>
 395           <ul class="treeview-menu">
 396             <li><a href="../forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
 397             <li><a href="../forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
 398             <li><a href="../forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
 399           </ul>
 400         </li>
 401         <li class="treeview">
 402           <a href="#">
 403             <i class="fa fa-table"></i> <span>Tables</span>
 404             <span class="pull-right-container">
 405               <i class="fa fa-angle-left pull-right"></i>
 406             </span>
 407           </a>
 408           <ul class="treeview-menu">
 409             <li><a href="../tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li>
 410             <li><a href="../tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li>
 411           </ul>
 412         </li>
 413         <li>
 414           <a href="../calendar.html">
 415             <i class="fa fa-calendar"></i> <span>Calendar</span>
 416             <span class="pull-right-container">
 417               <small class="label pull-right bg-red">3</small>
 418               <small class="label pull-right bg-blue">17</small>
 419             </span>
 420           </a>
 421         </li>
 422         <li>
 423           <a href="../mailbox/mailbox.html">
 424             <i class="fa fa-envelope"></i> <span>Mailbox</span>
 425             <span class="pull-right-container">
 426               <small class="label pull-right bg-yellow">12</small>
 427               <small class="label pull-right bg-green">16</small>
 428               <small class="label pull-right bg-red">5</small>
 429             </span>
 430           </a>
 431         </li>
 432         <li class="treeview active">
 433           <a href="#">
 434             <i class="fa fa-folder"></i> <span>Examples</span>
 435             <span class="pull-right-container">
 436               <i class="fa fa-angle-left pull-right"></i>
 437             </span>
 438           </a>
 439           <ul class="treeview-menu">
 440             <li class="active"><a href="invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
 441             <li><a href="profile.html"><i class="fa fa-circle-o"></i> Profile</a></li>
 442             <li><a href="login.html"><i class="fa fa-circle-o"></i> Login</a></li>
 443             <li><a href="register.html"><i class="fa fa-circle-o"></i> Register</a></li>
 444             <li><a href="lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
 445             <li><a href="404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
 446             <li><a href="500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
 447             <li><a href="blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
 448             <li><a href="pace.html"><i class="fa fa-circle-o"></i> Pace Page</a></li>
 449           </ul>
 450         </li>
 451         <li class="treeview">
 452           <a href="#">
 453             <i class="fa fa-share"></i> <span>Multilevel</span>
 454             <span class="pull-right-container">
 455               <i class="fa fa-angle-left pull-right"></i>
 456             </span>
 457           </a>
 458           <ul class="treeview-menu">
 459             <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
 460             <li>
 461               <a href="#"><i class="fa fa-circle-o"></i> Level One
 462                 <span class="pull-right-container">
 463                   <i class="fa fa-angle-left pull-right"></i>
 464                 </span>
 465               </a>
 466               <ul class="treeview-menu">
 467                 <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
 468                 <li>
 469                   <a href="#"><i class="fa fa-circle-o"></i> Level Two
 470                     <span class="pull-right-container">
 471                       <i class="fa fa-angle-left pull-right"></i>
 472                     </span>
 473                   </a>
 474                   <ul class="treeview-menu">
 475                     <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
 476                     <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
 477                   </ul>
 478                 </li>
 479               </ul>
 480             </li>
 481             <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
 482           </ul>
 483         </li>
 484         <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
 485         <li class="header">LABELS</li>
 486         <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
 487         <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
 488         <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
 489       </ul>
 490     </section>
 491     <!-- /.sidebar -->
 492   </aside>
 493
 494   <!-- Content Wrapper. Contains page content -->
 495   <div class="content-wrapper">
 496     <!-- Content Header (Page header) -->
 497     <section class="content-header">
 498       <h1>
 499         Invoice
 500         <small>#007612</small>
 501       </h1>
 502       <ol class="breadcrumb">
 503         <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
 504         <li><a href="#">Examples</a></li>
 505         <li class="active">Invoice</li>
 506       </ol>
 507     </section>
 508
 509     <div class="pad margin no-print">
 510       <div class="callout callout-info" style="margin-bottom: 0!important;">
 511         <h4><i class="fa fa-info"></i> Note:</h4>
 512         This page has been enhanced for printing. Click the print button at the bottom of the invoice to test.
 513       </div>
 514     </div>
 515
 516     <!-- Main content -->
 517     <section class="invoice">
 518       <!-- title row -->
 519       <div class="row">
 520         <div class="col-xs-12">
 521           <h2 class="page-header">
 522             <i class="fa fa-globe"></i> AdminLTE, Inc.
 523             <small class="pull-right">Date: 2/10/2014</small>
 524           </h2>
 525         </div>
 526         <!-- /.col -->
 527       </div>
 528       <!-- info row -->
 529       <div class="row invoice-info">
 530         <div class="col-sm-4 invoice-col">
 531           From
 532           <address>
 533             <strong>Admin, Inc.</strong><br>
 534             795 Folsom Ave, Suite 600<br>
 535             San Francisco, CA 94107<br>
 536             Phone: (804) 123-5432<br>
 537             Email: info@almasaeedstudio.com
 538           </address>
 539         </div>
 540         <!-- /.col -->
 541         <div class="col-sm-4 invoice-col">
 542           To
 543           <address>
 544             <strong>John Doe</strong><br>
 545             795 Folsom Ave, Suite 600<br>
 546             San Francisco, CA 94107<br>
 547             Phone: (555) 539-1037<br>
 548             Email: john.doe@example.com
 549           </address>
 550         </div>
 551         <!-- /.col -->
 552         <div class="col-sm-4 invoice-col">
 553           <b>Invoice #007612</b><br>
 554           <br>
 555           <b>Order ID:</b> 4F3S8J<br>
 556           <b>Payment Due:</b> 2/22/2014<br>
 557           <b>Account:</b> 968-34567
 558         </div>
 559         <!-- /.col -->
 560       </div>
 561       <!-- /.row -->
 562
 563       <!-- Table row -->
 564       <div class="row">
 565         <div class="col-xs-12 table-responsive">
 566           <table class="table table-striped">
 567             <thead>
 568             <tr>
 569               <th>Qty</th>
 570               <th>Product</th>
 571               <th>Serial #</th>
 572               <th>Description</th>
 573               <th>Subtotal</th>
 574             </tr>
 575             </thead>
 576             <tbody>
 577             <tr>
 578               <td>1</td>
 579               <td>Call of Duty</td>
 580               <td>455-981-221</td>
 581               <td>El snort testosterone trophy driving gloves handsome</td>
 582               <td>$64.50</td>
 583             </tr>
 584             <tr>
 585               <td>1</td>
 586               <td>Need for Speed IV</td>
 587               <td>247-925-726</td>
 588               <td>Wes Anderson umami biodiesel</td>
 589               <td>$50.00</td>
 590             </tr>
 591             <tr>
 592               <td>1</td>
 593               <td>Monsters DVD</td>
 594               <td>735-845-642</td>
 595               <td>Terry Richardson helvetica tousled street art master</td>
 596               <td>$10.70</td>
 597             </tr>
 598             <tr>
 599               <td>1</td>
 600               <td>Grown Ups Blue Ray</td>
 601               <td>422-568-642</td>
 602               <td>Tousled lomo letterpress</td>
 603               <td>$25.99</td>
 604             </tr>
 605             </tbody>
 606           </table>
 607         </div>
 608         <!-- /.col -->
 609       </div>
 610       <!-- /.row -->
 611
 612       <div class="row">
 613         <!-- accepted payments column -->
 614         <div class="col-xs-6">
 615           <p class="lead">Payment Methods:</p>
 616           <img src="../../dist/img/credit/visa.png" alt="Visa">
 617           <img src="../../dist/img/credit/mastercard.png" alt="Mastercard">
 618           <img src="../../dist/img/credit/american-express.png" alt="American Express">
 619           <img src="../../dist/img/credit/paypal2.png" alt="Paypal">
 620
 621           <p class="text-muted well well-sm no-shadow" style="margin-top: 10px;">
 622             Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles, weebly ning heekya handango imeem plugg
 623             dopplr jibjab, movity jajah plickers sifteo edmodo ifttt zimbra.
 624           </p>
 625         </div>
 626         <!-- /.col -->
 627         <div class="col-xs-6">
 628           <p class="lead">Amount Due 2/22/2014</p>
 629
 630           <div class="table-responsive">
 631             <table class="table">
 632               <tr>
 633                 <th style="width:50%">Subtotal:</th>
 634                 <td>$250.30</td>
 635               </tr>
 636               <tr>
 637                 <th>Tax (9.3%)</th>
 638                 <td>$10.34</td>
 639               </tr>
 640               <tr>
 641                 <th>Shipping:</th>
 642                 <td>$5.80</td>
 643               </tr>
 644               <tr>
 645                 <th>Total:</th>
 646                 <td>$265.24</td>
 647               </tr>
 648             </table>
 649           </div>
 650         </div>
 651         <!-- /.col -->
 652       </div>
 653       <!-- /.row -->
 654
 655       <!-- this row will not appear when printing -->
 656       <div class="row no-print">
 657         <div class="col-xs-12">
 658           <a href="invoice-print.html" target="_blank" class="btn btn-default"><i class="fa fa-print"></i> Print</a>
 659           <button type="button" class="btn btn-success pull-right"><i class="fa fa-credit-card"></i> Submit Payment
 660           </button>
 661           <button type="button" class="btn btn-primary pull-right" style="margin-right: 5px;">
 662             <i class="fa fa-download"></i> Generate PDF
 663           </button>
 664         </div>
 665       </div>
 666     </section>
 667     <!-- /.content -->
 668     <div class="clearfix"></div>
 669   </div>
 670   <!-- /.content-wrapper -->
 671   <footer class="main-footer no-print">
 672     <div class="pull-right hidden-xs">
 673       <b>Version</b> 2.3.7
 674     </div>
 675     <strong>Copyright &copy; 2014-2016 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights
 676     reserved.
 677   </footer>
 678
 679   <!-- Control Sidebar -->
 680   <aside class="control-sidebar control-sidebar-dark">
 681     <!-- Create the tabs -->
 682     <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
 683       <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
 684       <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
 685     </ul>
 686     <!-- Tab panes -->
 687     <div class="tab-content">
 688       <!-- Home tab content -->
 689       <div class="tab-pane" id="control-sidebar-home-tab">
 690         <h3 class="control-sidebar-heading">Recent Activity</h3>
 691         <ul class="control-sidebar-menu">
 692           <li>
 693             <a href="javascript:void(0)">
 694               <i class="menu-icon fa fa-birthday-cake bg-red"></i>
 695
 696               <div class="menu-info">
 697                 <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
 698
 699                 <p>Will be 23 on April 24th</p>
 700               </div>
 701             </a>
 702           </li>
 703           <li>
 704             <a href="javascript:void(0)">
 705               <i class="menu-icon fa fa-user bg-yellow"></i>
 706
 707               <div class="menu-info">
 708                 <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
 709
 710                 <p>New phone +1(800)555-1234</p>
 711               </div>
 712             </a>
 713           </li>
 714           <li>
 715             <a href="javascript:void(0)">
 716               <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
 717
 718               <div class="menu-info">
 719                 <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
 720
 721                 <p>nora@example.com</p>
 722               </div>
 723             </a>
 724           </li>
 725           <li>
 726             <a href="javascript:void(0)">
 727               <i class="menu-icon fa fa-file-code-o bg-green"></i>
 728
 729               <div class="menu-info">
 730                 <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
 731
 732                 <p>Execution time 5 seconds</p>
 733               </div>
 734             </a>
 735           </li>
 736         </ul>
 737         <!-- /.control-sidebar-menu -->
 738
 739         <h3 class="control-sidebar-heading">Tasks Progress</h3>
 740         <ul class="control-sidebar-menu">
 741           <li>
 742             <a href="javascript:void(0)">
 743               <h4 class="control-sidebar-subheading">
 744                 Custom Template Design
 745                 <span class="label label-danger pull-right">70%</span>
 746               </h4>
 747
 748               <div class="progress progress-xxs">
 749                 <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
 750               </div>
 751             </a>
 752           </li>
 753           <li>
 754             <a href="javascript:void(0)">
 755               <h4 class="control-sidebar-subheading">
 756                 Update Resume
 757                 <span class="label label-success pull-right">95%</span>
 758               </h4>
 759
 760               <div class="progress progress-xxs">
 761                 <div class="progress-bar progress-bar-success" style="width: 95%"></div>
 762               </div>
 763             </a>
 764           </li>
 765           <li>
 766             <a href="javascript:void(0)">
 767               <h4 class="control-sidebar-subheading">
 768                 Laravel Integration
 769                 <span class="label label-warning pull-right">50%</span>
 770               </h4>
 771
 772               <div class="progress progress-xxs">
 773                 <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
 774               </div>
 775             </a>
 776           </li>
 777           <li>
 778             <a href="javascript:void(0)">
 779               <h4 class="control-sidebar-subheading">
 780                 Back End Framework
 781                 <span class="label label-primary pull-right">68%</span>
 782               </h4>
 783
 784               <div class="progress progress-xxs">
 785                 <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
 786               </div>
 787             </a>
 788           </li>
 789         </ul>
 790         <!-- /.control-sidebar-menu -->
 791
 792       </div>
 793       <!-- /.tab-pane -->
 794       <!-- Stats tab content -->
 795       <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
 796       <!-- /.tab-pane -->
 797       <!-- Settings tab content -->
 798       <div class="tab-pane" id="control-sidebar-settings-tab">
 799         <form method="post">
 800           <h3 class="control-sidebar-heading">General Settings</h3>
 801
 802           <div class="form-group">
 803             <label class="control-sidebar-subheading">
 804               Report panel usage
 805               <input type="checkbox" class="pull-right" checked>
 806             </label>
 807
 808             <p>
 809               Some information about this general settings option
 810             </p>
 811           </div>
 812           <!-- /.form-group -->
 813
 814           <div class="form-group">
 815             <label class="control-sidebar-subheading">
 816               Allow mail redirect
 817               <input type="checkbox" class="pull-right" checked>
 818             </label>
 819
 820             <p>
 821               Other sets of options are available
 822             </p>
 823           </div>
 824           <!-- /.form-group -->
 825
 826           <div class="form-group">
 827             <label class="control-sidebar-subheading">
 828               Expose author name in posts
 829               <input type="checkbox" class="pull-right" checked>
 830             </label>
 831
 832             <p>
 833               Allow the user to show his name in blog posts
 834             </p>
 835           </div>
 836           <!-- /.form-group -->
 837
 838           <h3 class="control-sidebar-heading">Chat Settings</h3>
 839
 840           <div class="form-group">
 841             <label class="control-sidebar-subheading">
 842               Show me as online
 843               <input type="checkbox" class="pull-right" checked>
 844             </label>
 845           </div>
 846           <!-- /.form-group -->
 847
 848           <div class="form-group">
 849             <label class="control-sidebar-subheading">
 850               Turn off notifications
 851               <input type="checkbox" class="pull-right">
 852             </label>
 853           </div>
 854           <!-- /.form-group -->
 855
 856           <div class="form-group">
 857             <label class="control-sidebar-subheading">
 858               Delete chat history
 859               <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
 860             </label>
 861           </div>
 862           <!-- /.form-group -->
 863         </form>
 864       </div>
 865       <!-- /.tab-pane -->
 866     </div>
 867   </aside>
 868   <!-- /.control-sidebar -->
 869   <!-- Add the sidebar's background. This div must be placed
 870        immediately after the control sidebar -->
 871   <div class="control-sidebar-bg"></div>
 872 </div>
 873 <!-- ./wrapper -->
 874
 875 <!-- jQuery 2.2.3 -->
 876 <script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>
 877 <!-- Bootstrap 3.3.6 -->
 878 <script src="../../bootstrap/js/bootstrap.min.js"></script>
 879 <!-- FastClick -->
 880 <script src="../../plugins/fastclick/fastclick.js"></script>
 881 <!-- AdminLTE App -->
 882 <script src="../../dist/js/app.min.js"></script>
 883 <!-- AdminLTE for demo purposes -->
 884 <script src="../../dist/js/demo.js"></script>
 885 </body>
 886 </html>