invoice.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>AdminLTE - Invoice Example</title>
  5. <meta charset="UTF-8">
  6. <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
  7. <!-- bootstrap 3.0.2 -->
  8. <link href="../css/bootstrap.min.css" rel="stylesheet" />
  9. <!-- font Awesome -->
  10. <link href="../css/font-awesome.min.css" rel="stylesheet" />
  11. <!-- Theme style -->
  12. <link href="../theme/theme.css" rel="stylesheet" />
  13. <!-- Google font Signika -->
  14. <link href='http://fonts.googleapis.com/css?family=Signika+Negative' rel='stylesheet' type='text/css'>
  15. </head>
  16. <body>
  17. <nav class="navbar navbar-theme bg-green navbar-static-top" role="navigation">
  18. <!-- Brand and toggle get grouped for better mobile display -->
  19. <div class="navbar-header">
  20. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  21. <span class="sr-only">Toggle navigation</span>
  22. <span class="icon-bar"></span>
  23. <span class="icon-bar"></span>
  24. <span class="icon-bar"></span>
  25. </button>
  26. <a class="navbar-brand" href="index.html"><span class="fa fa-shield"></span> AdminLTE</a>
  27. <a href="#" class='lte-menu-sm visible-xs navbar-brand'>
  28. <span class="fa fa-list"></span>
  29. </a>
  30. </div>
  31. <!-- Collect the nav links, forms, and other content for toggling -->
  32. <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  33. <ul class="nav navbar-nav navbar-right">
  34. <li class="dropdown">
  35. <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-gears"></i></a>
  36. <ul class="dropdown-menu navbar-selector">
  37. <li role="presentation" class="dropdown-header font-primary noClick">Navbar Color</li>
  38. <li class="font-primary" data-color="bg-primary"><a href="#"><i class="fa fa-gear"></i> Primary</a></li>
  39. <li class="font-blue" data-color="bg-blue"><a href="#"><i class="fa fa-gear"></i> Blue <small class="text-muted">(default)</small></a></li>
  40. <li class="font-light-blue" data-color="bg-light-blue"><a href="#"><i class="fa fa-gear"></i> Light Blue</a></li>
  41. <li class="font-green" data-color="bg-green"><a href="#"><i class="fa fa-gear"></i> Green</a></li>
  42. <li class="font-yellow" data-color="bg-yellow"><a href="#"><i class="fa fa-gear"></i> Yellow</a></li>
  43. <li class="font-purple" data-color="bg-purple"><a href="#"><i class="fa fa-gear"></i> Purple</a></li>
  44. <li class="font-red" data-color="bg-red"><a href="#"><i class="fa fa-gear"></i> Red</a></li>
  45. </ul>
  46. </li>
  47. <li><a href="#"><i class="fa fa-bullhorn"></i></a></li>
  48. <li><a href="#"><i class="fa fa-envelope"></i></a></li>
  49. <li class="dropdown">
  50. <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i></a>
  51. <ul class="dropdown-menu">
  52. <li><a href="#">Profile</a></li>
  53. <li><a href="#">Friends</a></li>
  54. <li><a href="#">Settings</a></li>
  55. <li class="divider"></li>
  56. <li><a href="#">Privacy</a></li>
  57. </ul>
  58. </li>
  59. </ul>
  60. <form class="navbar-form navbar-right">
  61. <div class="form-group">
  62. <input type="text" name="search" class="form-control" placeholder="..."/>
  63. </div>
  64. </form>
  65. </div><!-- /.navbar-collapse -->
  66. </nav>
  67. <div class="lte-main-content">
  68. <!-- side bar -->
  69. <div class="lte-sidebar col-md-2 col-sm-3 hidden-xs">
  70. <ul class="lte-sidebar-menu">
  71. <li><a href="../index.html"><i class="fa fa-dashboard"></i> Dashboard</a></li>
  72. <li class="lte-tree">
  73. <a href="#"><i class="fa fa-bar-chart-o"></i> Charts<i class="pull-right fa fa-angle-right"></i></a>
  74. <ul class="lte-tree-menu">
  75. <li><a href="../charts/flot.html"><i class="fa fa-bar-chart-o"></i> Flot</a></li>
  76. <li><a href="../charts/jqplot.html"><i class="fa fa-bar-chart-o"></i> JQplot</a></li>
  77. <li><a href="../charts/xcharts.html"><i class="fa fa-bar-chart-o"></i> xCharts</a></li>
  78. </ul>
  79. </li>
  80. <li><a href="../ui.html"><i class="fa fa-tint"></i> User Interface </a></li>
  81. <!--<li><a href="../widgets.html"><i class="fa fa-gear"></i> Widgets</a></li>-->
  82. <li class="lte-tree active">
  83. <a href="#"><i class="fa fa-pagelines"></i> Example Pages <i class="pull-right fa fa-angle-right"></i></a>
  84. <ul class="lte-tree-menu">
  85. <li class="active"><a href="invoice.html"><i class="fa fa-money"></i> Invoice</a></li>
  86. <li><a href="login.html"><i class="fa fa-sign-in"></i> Login</a></li>
  87. <li><a href="register.html"><i class="fa fa-lock"></i> Register</a></li>
  88. <li><a href="blank_page.html"><i class="fa fa-paperclip"></i> Blank Page</a></li>
  89. <li><a href="404.html"><i class="fa fa-unlink"></i> 404 Error Page</a></li>
  90. <li><a href="500.html"><i class="fa fa-unlink"></i> 500 Error Page</a></li>
  91. </ul>
  92. </li>
  93. <li><a href="../forms.html"><i class="fa fa-edit"></i> Forms</a></li>
  94. <li><a href="../typography.html"><i class="fa fa-text-width"></i> Typography</a></li>
  95. <li><a href="../calendar.html"><i class="fa fa-calendar"></i> Calendar</a></li>
  96. <li class="lte-tree">
  97. <a href="#"><i class="fa fa-pagelines"></i> Multilevel Dropdown<i class="pull-right fa fa-angle-right"></i></a>
  98. <ul class="lte-tree-menu">
  99. <li class="lte-tree">
  100. <a href="#"><i class="fa fa-pagelines"></i> Level 1<i class="pull-right fa fa-angle-right"></i></a>
  101. <ul class="lte-tree-menu">
  102. <li class="lte-tree">
  103. <a href="#"><i class="fa fa-pagelines"></i> Level 2<i class="pull-right fa fa-angle-right"></i></a>
  104. <ul class="lte-tree-menu">
  105. <li><a href="#"><i class="fa fa-pagelines"></i> Level 3</a></li>
  106. </ul>
  107. </li>
  108. </ul>
  109. </li>
  110. </ul>
  111. </li>
  112. </ul>
  113. </div>
  114. <!-- /.side-bar-->
  115. <div class="lte-main-container col-md-10 col-sm-9">
  116. <!-- main content -->
  117. <div class="page-header">
  118. <i class="fa fa-money"></i> Invoice <small>#001300</small>
  119. <div class="pull-right">
  120. <button class="btn btn-default noPrint" id="print-btn"><i class="fa fa-print"></i> Print</button>
  121. </div>
  122. </div>
  123. <!-- /.page-header -->
  124. <div class="lte-dashboard">
  125. <div class="row">
  126. <div class="col-sm-4">
  127. <div class="box box-default box-fixed-height">
  128. <div class="box-header">
  129. <h3 class="box-title"><i class="fa fa-globe text-muted"></i> FROM</h3>
  130. </div>
  131. <div class="box-body">
  132. <strong>John Doe</strong><br />
  133. 123 Jump St.<br />
  134. Silicon Valley, CA<br />
  135. United States of America<br />
  136. Email: johndoe@email.com<br />
  137. Phone: (555)321-1234
  138. </div>
  139. </div>
  140. </div>
  141. <div class="col-sm-4">
  142. <div class="box box-default box-fixed-height">
  143. <div class="box-header">
  144. <h3 class="box-title"><i class="fa fa-globe text-muted"></i> TO</h3>
  145. </div>
  146. <div class="box-body">
  147. <strong>John Doe</strong><br />
  148. 123 Jump St.<br />
  149. Silicon Valley, CA<br />
  150. United States of America<br />
  151. Email: johndoe@email.com<br />
  152. Phone: (555)321-1234
  153. </div>
  154. </div>
  155. </div>
  156. <div class="col-sm-4">
  157. <div class="box box-default box-fixed-height">
  158. <div class="box-header">
  159. <h3 class="box-title">INVOICE</h3>
  160. </div>
  161. <div class="box-body">
  162. <h3>#001300</h3>
  163. <strong>Date:</strong> 12-12-2013<br/>
  164. <strong>Account:</strong> 6678-1194-3449-0998
  165. </div>
  166. </div>
  167. </div>
  168. </div><!-- row -->
  169. <div class="row">
  170. <div class="col-xs-12 table-responsive">
  171. <table class="table table-striped">
  172. <tr>
  173. <th>ID</th>
  174. <th>Item</th>
  175. <th>Quantity</th>
  176. <th>Unit Price</th>
  177. <th>Total</th>
  178. </tr>
  179. <tr>
  180. <td>1</td>
  181. <td>Glasses</td>
  182. <td>3</td>
  183. <td>$100</td>
  184. <td>$300</td>
  185. </tr>
  186. <tr>
  187. <td>2</td>
  188. <td>Mirror</td>
  189. <td>2</td>
  190. <td>$10</td>
  191. <td>$20</td>
  192. </tr>
  193. <tr>
  194. <td>3</td>
  195. <td>Laptop</td>
  196. <td>3</td>
  197. <td>$2,000</td>
  198. <td>$6,000</td>
  199. </tr>
  200. <tr>
  201. <td>4</td>
  202. <td>Cups</td>
  203. <td>13</td>
  204. <td>$10.50</td>
  205. <td>$136.50</td>
  206. </tr>
  207. </table>
  208. </div><!-- /.col -->
  209. <div class="col-xs-12">
  210. <div class="line"></div>
  211. </div>
  212. <div class="col-xs-12">
  213. <h3 class="text-right">Total: $6,456.50</h3>
  214. </div>
  215. </div>
  216. </div><!-- /.lte-dashboard -->
  217. </div>
  218. </div>
  219. <!-- ./.lte-main-content -->
  220. <footer>
  221. Copyright &copy; 2013 - <a>Preview</a> - <a>Purchase</a> - Built with <a target="blank" href="http://getbootstrap.com">Bootstrap 3</a>
  222. </footer>
  223. <!-- JQuery 1.10.2 -->
  224. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  225. <!-- Bootstrap -->
  226. <script src="../js/bootstrap.min.js" type="text/javascript"></script>
  227. <!-- LTE Tree -->
  228. <script src="../js/lteTree.js" type="text/javascript"></script>
  229. <!-- LTE App -->
  230. <script src="../js/lteApp.js" type="text/javascript"></script>
  231. <script type="text/javascript">
  232. $(function() {
  233. $("#print-btn").click(function(e) {
  234. e.preventDefault();
  235. window.print();
  236. });
  237. });
  238. current_nav_color = "bg-green";
  239. </script>
  240. </body>
  241. </html>