You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
AdminLTE/pages/examples/invoice-print.html

155 lines
5.7 KiB

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AdminLTE 2 | Invoice</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- Bootstrap 3.3.4 -->
<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- Font Awesome Icons -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="../../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body onload="window.print();">
<div class="wrapper">
<!-- Main content -->
<section class="invoice">
<!-- title row -->
<div class="row">
<div class="col-xs-12">
<h2 class="page-header">
<i class="fa fa-globe"></i> AdminLTE, Inc.
<small class="pull-right">Date: 2/10/2014</small>
</h2>
</div><!-- /.col -->
</div>
<!-- info row -->
<div class="row invoice-info">
<div class="col-sm-4 invoice-col">
From
<address>
<strong>Admin, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
Phone: (804) 123-5432<br/>
Email: info@almasaeedstudio.com
</address>
</div><!-- /.col -->
<div class="col-sm-4 invoice-col">
To
<address>
<strong>John Doe</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
Phone: (555) 539-1037<br/>
Email: john.doe@example.com
</address>
</div><!-- /.col -->
<div class="col-sm-4 invoice-col">
<b>Invoice #007612</b><br/>
<br/>
<b>Order ID:</b> 4F3S8J<br/>
<b>Payment Due:</b> 2/22/2014<br/>
<b>Account:</b> 968-34567
</div><!-- /.col -->
</div><!-- /.row -->
<!-- Table row -->
<div class="row">
<div class="col-xs-12 table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Qty</th>
<th>Product</th>
<th>Serial #</th>
<th>Description</th>
<th>Subtotal</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Call of Duty</td>
<td>455-981-221</td>
<td>El snort testosterone trophy driving gloves handsome</td>
<td>$64.50</td>
</tr>
<tr>
<td>1</td>
<td>Need for Speed IV</td>
<td>247-925-726</td>
<td>Wes Anderson umami biodiesel</td>
<td>$50.00</td>
</tr>
<tr>
<td>1</td>
<td>Monsters DVD</td>
<td>735-845-642</td>
<td>Terry Richardson helvetica tousled street art master</td>
<td>$10.70</td>
</tr>
<tr>
<td>1</td>
<td>Grown Ups Blue Ray</td>
<td>422-568-642</td>
<td>Tousled lomo letterpress</td>
<td>$25.99</td>
</tr>
</tbody>
</table>
</div><!-- /.col -->
</div><!-- /.row -->
<div class="row">
<!-- accepted payments column -->
<div class="col-xs-6">
<p class="lead">Payment Methods:</p>
<img src="../../dist/img/credit/visa.png" alt="Visa"/>
<img src="../../dist/img/credit/mastercard.png" alt="Mastercard"/>
<img src="../../dist/img/credit/american-express.png" alt="American Express"/>
<img src="../../dist/img/credit/paypal2.png" alt="Paypal"/>
<p class="text-muted well well-sm no-shadow" style="margin-top: 10px;">
Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles, weebly ning heekya handango imeem plugg dopplr jibjab, movity jajah plickers sifteo edmodo ifttt zimbra.
</p>
</div><!-- /.col -->
<div class="col-xs-6">
<p class="lead">Amount Due 2/22/2014</p>
<div class="table-responsive">
<table class="table">
<tr>
<th style="width:50%">Subtotal:</th>
<td>$250.30</td>
</tr>
<tr>
<th>Tax (9.3%)</th>
<td>$10.34</td>
</tr>
<tr>
<th>Shipping:</th>
<td>$5.80</td>
</tr>
<tr>
<th>Total:</th>
<td>$265.24</td>
</tr>
</table>
</div>
</div><!-- /.col -->
</div><!-- /.row -->
</section><!-- /.content -->
</div><!-- ./wrapper -->
<!-- AdminLTE App -->
<script src="../../dist/js/app.min.js" type="text/javascript"></script>
</body>
</html>