mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2024-11-10 05:02:36 +01:00
Tests for PDF generation
This commit is contained in:
David Bomba
parent
3f675bfd2a
commit
c0d9708659
@ -20,16 +20,127 @@ class PdfGenerationTest extends TestCase
|
||||
|
||||
}
|
||||
|
||||
private function makePdf($header, $footer, $html, $pdf)
|
||||
{
|
||||
Browsershot::html($html)
|
||||
//->showBrowserHeaderAndFooter()
|
||||
//->headerHtml($header)
|
||||
//->footerHtml($footer)
|
||||
->waitUntilNetworkIdle()
|
||||
//->margins(10,10,10,10)
|
||||
->savePdf($pdf);
|
||||
}
|
||||
|
||||
public function testPdfGeneration()
|
||||
{
|
||||
$html = file_get_contents(base_path().'/tests/Pdf/invoice.html');
|
||||
$pdf = base_path().'/tests/Pdf/invoice.pdf';
|
||||
|
||||
Browsershot::html($html)->save($pdf);
|
||||
|
||||
$header = '<div style="font-size:14px;"<header></header>';
|
||||
|
||||
$footer = ' <div style="font-size:14px;"><footer>
|
||||
<span class="pageNumber"></span> / <span class="totalPages"></span>
|
||||
</footer></div>';
|
||||
|
||||
$this->makePdf($header, $footer, $html, $pdf);
|
||||
|
||||
$this->assertTrue(file_exists($pdf));
|
||||
|
||||
|
||||
unlink($pdf);
|
||||
|
||||
}
|
||||
|
||||
public function testPdfGeneration2()
|
||||
{
|
||||
$html = file_get_contents(base_path().'/tests/Pdf/invoice2.html');
|
||||
$pdf = base_path().'/tests/Pdf/invoice2.pdf';
|
||||
|
||||
|
||||
$header = '<div style="font-size:14px;"<header></header>';
|
||||
|
||||
$footer = ' <div style="font-size:14px;"><footer>
|
||||
<span class="pageNumber"></span> / <span class="totalPages"></span>
|
||||
</footer></div>';
|
||||
|
||||
$this->makePdf($header, $footer, $html, $pdf);
|
||||
|
||||
|
||||
$this->assertTrue(file_exists($pdf));
|
||||
|
||||
|
||||
unlink($pdf);
|
||||
|
||||
}
|
||||
|
||||
public function testPdfGeneration3()
|
||||
{
|
||||
$html = file_get_contents(base_path().'/tests/Pdf/invoice3.html');
|
||||
$pdf = base_path().'/tests/Pdf/invoice3.pdf';
|
||||
|
||||
|
||||
$header = '<div style="font-size:14px;"<header></header>';
|
||||
|
||||
$footer = ' <div style="font-size:14px;"><footer>
|
||||
<span class="pageNumber"></span> / <span class="totalPages"></span>
|
||||
</footer></div>';
|
||||
|
||||
$this->makePdf($header, $footer, $html, $pdf);
|
||||
|
||||
|
||||
$this->assertTrue(file_exists($pdf));
|
||||
|
||||
|
||||
unlink($pdf);
|
||||
|
||||
}
|
||||
|
||||
public function testPdfGeneration4()
|
||||
{
|
||||
$html = file_get_contents(base_path().'/tests/Pdf/invoice4.html');
|
||||
$pdf = base_path().'/tests/Pdf/invoice4.pdf';
|
||||
|
||||
|
||||
$header = '<div style="font-size:14px;"<header></header>';
|
||||
|
||||
$footer = ' <div style="font-size:14px;"><footer>
|
||||
<span class="pageNumber"></span> / <span class="totalPages"></span>
|
||||
</footer></div>';
|
||||
|
||||
|
||||
$this->makePdf($header, $footer, $html, $pdf);
|
||||
|
||||
|
||||
|
||||
$this->assertTrue(file_exists($pdf));
|
||||
|
||||
|
||||
unlink($pdf);
|
||||
|
||||
}
|
||||
|
||||
|
||||
public function testPdfGeneration5()
|
||||
{
|
||||
$html = file_get_contents(base_path().'/tests/Pdf/invoice5.html');
|
||||
$pdf = base_path().'/tests/Pdf/invoice5.pdf';
|
||||
|
||||
|
||||
$header = '<div style="font-size:14px;"<header></header>';
|
||||
|
||||
$footer = ' <div style="font-size:14px;"><footer>
|
||||
<span class="pageNumber"></span> / <span class="totalPages"></span>
|
||||
</footer></div>';
|
||||
|
||||
|
||||
$this->makePdf($header, $footer, $html, $pdf);
|
||||
|
||||
|
||||
|
||||
$this->assertTrue(file_exists($pdf));
|
||||
|
||||
|
||||
unlink($pdf);
|
||||
|
||||
}
|
||||
|
||||
@ -5,6 +5,10 @@
|
||||
<title>A simple, clean, and responsive HTML invoice template</title>
|
||||
|
||||
<style>
|
||||
|
||||
html {
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
.invoice-box {
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
@ -139,27 +143,12 @@
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="heading">
|
||||
<td>
|
||||
Payment Method
|
||||
</td>
|
||||
|
||||
<td>
|
||||
Check #
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="details">
|
||||
<td>
|
||||
Check
|
||||
</td>
|
||||
|
||||
<td>
|
||||
1000
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
<table cellpadding="0" cellspacing="0">
|
||||
|
||||
|
||||
<thead>
|
||||
<tr class="heading">
|
||||
<td>
|
||||
Item
|
||||
@ -169,12 +158,325 @@
|
||||
Price
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</thead>
|
||||
<tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
</tr> <tr class="item">
|
||||
<td>
|
||||
Website design
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$300.00
|
||||
</td>
|
||||
|
||||
299
tests/Pdf/invoice2.html
Normal file
299
tests/Pdf/invoice2.html
Normal file
@ -0,0 +1,299 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example 2</title>
|
||||
<style>
|
||||
|
||||
html {
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
@font-face {
|
||||
font-family: SourceSansPro;
|
||||
src: url(SourceSansPro-Regular.ttf);
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0087C3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
width: 21cm;
|
||||
height: 29.7cm;
|
||||
margin: 0 auto;
|
||||
color: #555555;
|
||||
background: #FFFFFF;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-family: SourceSansPro;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 10px 0;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid #AAAAAA;
|
||||
}
|
||||
|
||||
#logo {
|
||||
float: left;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
#logo img {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
#company {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
#details {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
#client {
|
||||
padding-left: 6px;
|
||||
border-left: 6px solid #0087C3;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#client .to {
|
||||
color: #777777;
|
||||
}
|
||||
|
||||
h2.name {
|
||||
font-size: 1.4em;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#invoice {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#invoice h1 {
|
||||
color: #0087C3;
|
||||
font-size: 2.4em;
|
||||
line-height: 1em;
|
||||
font-weight: normal;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
#invoice .date {
|
||||
font-size: 1.1em;
|
||||
color: #777777;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
padding: 20px;
|
||||
background: #EEEEEE;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #FFFFFF;
|
||||
}
|
||||
|
||||
table th {
|
||||
white-space: nowrap;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
table td {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table td h3{
|
||||
color: #57B223;
|
||||
font-size: 1.2em;
|
||||
font-weight: normal;
|
||||
margin: 0 0 0.2em 0;
|
||||
}
|
||||
|
||||
table .no {
|
||||
color: #FFFFFF;
|
||||
font-size: 1.6em;
|
||||
background: #57B223;
|
||||
}
|
||||
|
||||
table .desc {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table .unit {
|
||||
background: #DDDDDD;
|
||||
}
|
||||
|
||||
table .qty {
|
||||
}
|
||||
|
||||
table .total {
|
||||
background: #57B223;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
table td.unit,
|
||||
table td.qty,
|
||||
table td.total {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
table tbody tr:last-child td {
|
||||
border: none;
|
||||
}
|
||||
|
||||
table tfoot td {
|
||||
padding: 10px 20px;
|
||||
background: #FFFFFF;
|
||||
border-bottom: none;
|
||||
font-size: 1.2em;
|
||||
white-space: nowrap;
|
||||
border-top: 1px solid #AAAAAA;
|
||||
}
|
||||
|
||||
table tfoot tr:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
table tfoot tr:last-child td {
|
||||
color: #57B223;
|
||||
font-size: 1.4em;
|
||||
border-top: 1px solid #57B223;
|
||||
|
||||
}
|
||||
|
||||
table tfoot tr td:first-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#thanks{
|
||||
font-size: 2em;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
#notices{
|
||||
padding-left: 6px;
|
||||
border-left: 6px solid #0087C3;
|
||||
}
|
||||
|
||||
#notices .notice {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
footer {
|
||||
color: #777777;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
border-top: 1px solid #AAAAAA;
|
||||
padding: 8px 0;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="clearfix">
|
||||
<div id="logo">
|
||||
<img src="logo.png">
|
||||
</div>
|
||||
<div id="company">
|
||||
<h2 class="name">Company Name</h2>
|
||||
<div>455 Foggy Heights, AZ 85004, US</div>
|
||||
<div>(602) 519-0450</div>
|
||||
<div><a href="mailto:company@example.com">company@example.com</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div id="details" class="clearfix">
|
||||
<div id="client">
|
||||
<div class="to">INVOICE TO:</div>
|
||||
<h2 class="name">John Doe</h2>
|
||||
<div class="address">796 Silver Harbour, TX 79273, US</div>
|
||||
<div class="email"><a href="mailto:john@example.com">john@example.com</a></div>
|
||||
</div>
|
||||
<div id="invoice">
|
||||
<h1>INVOICE 3-2-1</h1>
|
||||
<div class="date">Date of Invoice: 01/06/2014</div>
|
||||
<div class="date">Due Date: 30/06/2014</div>
|
||||
</div>
|
||||
</div>
|
||||
<table border="0" cellspacing="0" cellpadding="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="no">#</th>
|
||||
<th class="desc">DESCRIPTION</th>
|
||||
<th class="unit">UNIT PRICE</th>
|
||||
<th class="qty">QUANTITY</th>
|
||||
<th class="total">TOTAL</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="no">01</td>
|
||||
<td class="desc"><h3>Website Design</h3>Creating a recognizable design solution based on the company's existing visual identity</td>
|
||||
<td class="unit">$40.00</td>
|
||||
<td class="qty">30</td>
|
||||
<td class="total">$1,200.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="no">02</td>
|
||||
<td class="desc"><h3>Website Development</h3>Developing a Content Management System-based Website</td>
|
||||
<td class="unit">$40.00</td>
|
||||
<td class="qty">80</td>
|
||||
<td class="total">$3,200.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="no">03</td>
|
||||
<td class="desc"><h3>Search Engines Optimization</h3>Optimize the site for search engines (SEO)</td>
|
||||
<td class="unit">$40.00</td>
|
||||
<td class="qty">20</td>
|
||||
<td class="total">$800.00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="2"></td>
|
||||
<td colspan="2">SUBTOTAL</td>
|
||||
<td>$5,200.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"></td>
|
||||
<td colspan="2">TAX 25%</td>
|
||||
<td>$1,300.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"></td>
|
||||
<td colspan="2">GRAND TOTAL</td>
|
||||
<td>$6,500.00</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<div id="thanks">Thank you!</div>
|
||||
<div id="notices">
|
||||
<div>NOTICE:</div>
|
||||
<div class="notice">A finance charge of 1.5% will be made on unpaid balances after 30 days.</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
Invoice was created on a computer and is valid without the signature and seal.
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
530
tests/Pdf/invoice3.html
Normal file
530
tests/Pdf/invoice3.html
Normal file
@ -0,0 +1,530 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>Please pay {{ total }} due by {{ due_date }}</title>
|
||||
<!--
|
||||
The style block is collapsed on page load to save you some scrolling.
|
||||
Postmark automatically inlines all CSS properties for maximum email client
|
||||
compatibility. You can just update styles here, and Postmark does the rest.
|
||||
-->
|
||||
<style type="text/css" rel="stylesheet" media="all">
|
||||
/* Base ------------------------------ */
|
||||
|
||||
*:not(br):not(tr):not(html) {
|
||||
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100% !important;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
background-color: #F2F4F6;
|
||||
color: #74787E;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
blockquote {
|
||||
line-height: 1.4;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #3869D4;
|
||||
}
|
||||
|
||||
a img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
td {
|
||||
word-break: break-word;
|
||||
}
|
||||
/* Layout ------------------------------ */
|
||||
|
||||
.email-wrapper {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-premailer-width: 100%;
|
||||
-premailer-cellpadding: 0;
|
||||
-premailer-cellspacing: 0;
|
||||
background-color: #F2F4F6;
|
||||
}
|
||||
|
||||
.email-content {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-premailer-width: 100%;
|
||||
-premailer-cellpadding: 0;
|
||||
-premailer-cellspacing: 0;
|
||||
}
|
||||
/* Masthead ----------------------- */
|
||||
|
||||
.email-masthead {
|
||||
padding: 25px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.email-masthead_logo {
|
||||
width: 94px;
|
||||
}
|
||||
|
||||
.email-masthead_name {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #bbbfc3;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 0 white;
|
||||
}
|
||||
/* Body ------------------------------ */
|
||||
|
||||
.email-body {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-premailer-width: 100%;
|
||||
-premailer-cellpadding: 0;
|
||||
-premailer-cellspacing: 0;
|
||||
border-top: 1px solid #EDEFF2;
|
||||
border-bottom: 1px solid #EDEFF2;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.email-body_inner {
|
||||
width: 570px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
-premailer-width: 570px;
|
||||
-premailer-cellpadding: 0;
|
||||
-premailer-cellspacing: 0;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.email-footer {
|
||||
width: 570px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
-premailer-width: 570px;
|
||||
-premailer-cellpadding: 0;
|
||||
-premailer-cellspacing: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.email-footer p {
|
||||
color: #AEAEAE;
|
||||
}
|
||||
|
||||
.body-action {
|
||||
width: 100%;
|
||||
margin: 30px auto;
|
||||
padding: 0;
|
||||
-premailer-width: 100%;
|
||||
-premailer-cellpadding: 0;
|
||||
-premailer-cellspacing: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.body-sub {
|
||||
margin-top: 25px;
|
||||
padding-top: 25px;
|
||||
border-top: 1px solid #EDEFF2;
|
||||
}
|
||||
|
||||
.content-cell {
|
||||
padding: 35px;
|
||||
}
|
||||
|
||||
.preheader {
|
||||
display: none !important;
|
||||
visibility: hidden;
|
||||
mso-hide: all;
|
||||
font-size: 1px;
|
||||
line-height: 1px;
|
||||
max-height: 0;
|
||||
max-width: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Attribute list ------------------------------ */
|
||||
|
||||
.attributes {
|
||||
margin: 0 0 21px;
|
||||
}
|
||||
|
||||
.attributes_content {
|
||||
background-color: #EDEFF2;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.attributes_item {
|
||||
padding: 0;
|
||||
}
|
||||
/* Related Items ------------------------------ */
|
||||
|
||||
.related {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 25px 0 0 0;
|
||||
-premailer-width: 100%;
|
||||
-premailer-cellpadding: 0;
|
||||
-premailer-cellspacing: 0;
|
||||
}
|
||||
|
||||
.related_item {
|
||||
padding: 10px 0;
|
||||
color: #74787E;
|
||||
font-size: 15px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.related_item-title {
|
||||
display: block;
|
||||
margin: .5em 0 0;
|
||||
}
|
||||
|
||||
.related_item-thumb {
|
||||
display: block;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.related_heading {
|
||||
border-top: 1px solid #EDEFF2;
|
||||
text-align: center;
|
||||
padding: 25px 0 10px;
|
||||
}
|
||||
/* Discount Code ------------------------------ */
|
||||
|
||||
.discount {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 24px;
|
||||
-premailer-width: 100%;
|
||||
-premailer-cellpadding: 0;
|
||||
-premailer-cellspacing: 0;
|
||||
background-color: #EDEFF2;
|
||||
border: 2px dashed #9BA2AB;
|
||||
}
|
||||
|
||||
.discount_heading {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.discount_body {
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
}
|
||||
/* Social Icons ------------------------------ */
|
||||
|
||||
.social {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.social td {
|
||||
padding: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.social_icon {
|
||||
height: 20px;
|
||||
margin: 0 8px 10px 8px;
|
||||
padding: 0;
|
||||
}
|
||||
/* Data table ------------------------------ */
|
||||
|
||||
.purchase {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 35px 0;
|
||||
-premailer-width: 100%;
|
||||
-premailer-cellpadding: 0;
|
||||
-premailer-cellspacing: 0;
|
||||
}
|
||||
|
||||
.purchase_content {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 25px 0 0 0;
|
||||
-premailer-width: 100%;
|
||||
-premailer-cellpadding: 0;
|
||||
-premailer-cellspacing: 0;
|
||||
}
|
||||
|
||||
.purchase_item {
|
||||
padding: 10px 0;
|
||||
color: #74787E;
|
||||
font-size: 15px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.purchase_heading {
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #EDEFF2;
|
||||
}
|
||||
|
||||
.purchase_heading p {
|
||||
margin: 0;
|
||||
color: #9BA2AB;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.purchase_footer {
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid #EDEFF2;
|
||||
}
|
||||
|
||||
.purchase_total {
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
color: #2F3133;
|
||||
}
|
||||
|
||||
.purchase_total--label {
|
||||
padding: 0 15px 0 0;
|
||||
}
|
||||
/* Utilities ------------------------------ */
|
||||
|
||||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
text-align: center;
|
||||
}
|
||||
/*Media Queries ------------------------------ */
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.email-body_inner,
|
||||
.email-footer {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.button {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
/* Buttons ------------------------------ */
|
||||
|
||||
.button {
|
||||
background-color: #3869D4;
|
||||
border-top: 10px solid #3869D4;
|
||||
border-right: 18px solid #3869D4;
|
||||
border-bottom: 10px solid #3869D4;
|
||||
border-left: 18px solid #3869D4;
|
||||
display: inline-block;
|
||||
color: #FFF;
|
||||
text-decoration: none;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
|
||||
.button--green {
|
||||
background-color: #22BC66;
|
||||
border-top: 10px solid #22BC66;
|
||||
border-right: 18px solid #22BC66;
|
||||
border-bottom: 10px solid #22BC66;
|
||||
border-left: 18px solid #22BC66;
|
||||
}
|
||||
|
||||
.button--red {
|
||||
background-color: #FF6136;
|
||||
border-top: 10px solid #FF6136;
|
||||
border-right: 18px solid #FF6136;
|
||||
border-bottom: 10px solid #FF6136;
|
||||
border-left: 18px solid #FF6136;
|
||||
}
|
||||
/* Type ------------------------------ */
|
||||
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
color: #2F3133;
|
||||
font-size: 19px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
color: #2F3133;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
color: #2F3133;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
color: #74787E;
|
||||
font-size: 16px;
|
||||
line-height: 1.5em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
p.sub {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
p.center {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<span class="preheader">This is an invoice for your purchase on {{ purchase_date }}. Please submit payment by {{ due_date }}</span>
|
||||
<table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<table class="email-content" width="100%" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td class="email-masthead">
|
||||
<a href="https://example.com" class="email-masthead_name">
|
||||
[Product Name]
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Email Body -->
|
||||
<tr>
|
||||
<td class="email-body" width="100%" cellpadding="0" cellspacing="0">
|
||||
<table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0">
|
||||
<!-- Body content -->
|
||||
<tr>
|
||||
<td class="content-cell">
|
||||
<h1>Hi {{name}},</h1>
|
||||
<p>Thanks for using [Product Name]. This is an invoice for your recent purchase.</p>
|
||||
<table class="attributes" width="100%" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td class="attributes_content">
|
||||
<table width="100%" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td class="attributes_item"><strong>Amount Due:</strong> {{total}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="attributes_item"><strong>Due By:</strong> {{due_date}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- Action -->
|
||||
<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<!-- Border based button
|
||||
https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design -->
|
||||
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<table border="0" cellspacing="0" cellpadding="0">
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{action_url}}" class="button button--green" target="_blank">Pay this Invoice</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table class="purchase" width="100%" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td>
|
||||
<h3>{{invoice_id}}</h3></td>
|
||||
<td>
|
||||
<h3 class="align-right">{{date}}</h3></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<table class="purchase_content" width="100%" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<th class="purchase_heading">
|
||||
<p>Description</p>
|
||||
</th>
|
||||
<th class="purchase_heading">
|
||||
<p class="align-right">Amount</p>
|
||||
</th>
|
||||
</tr>
|
||||
{{#each invoice_details}}
|
||||
<tr>
|
||||
<td width="80%" class="purchase_item">{{description}}</td>
|
||||
<td class="align-right" width="20%" class="purchase_item">{{amount}}</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
<tr>
|
||||
<td width="80%" class="purchase_footer" valign="middle">
|
||||
<p class="purchase_total purchase_total--label">Total</p>
|
||||
</td>
|
||||
<td width="20%" class="purchase_footer" valign="middle">
|
||||
<p class="purchase_total">{{total}}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>If you have any questions about this invoice, simply reply to this email or reach out to our <a href="{{support_url}}">support team</a> for help.</p>
|
||||
<p>Cheers,
|
||||
<br>The [Product Name] Team</p>
|
||||
<!-- Sub copy -->
|
||||
<table class="body-sub">
|
||||
<tr>
|
||||
<td>
|
||||
<p class="sub">If you’re having trouble with the button above, copy and paste the URL below into your web browser.</p>
|
||||
<p class="sub">{{action_url}}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<table class="email-footer" align="center" width="570" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td class="content-cell" align="center">
|
||||
<p class="sub align-center">© 2019 [Product Name]. All rights reserved.</p>
|
||||
<p class="sub align-center">
|
||||
[Company Name, LLC]
|
||||
<br>1234 Street Rd.
|
||||
<br>Suite 1234
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
234
tests/Pdf/invoice4.html
Normal file
234
tests/Pdf/invoice4.html
Normal file
@ -0,0 +1,234 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example 3</title>
|
||||
<style>
|
||||
|
||||
html {
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
.clearfix:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #5D6975;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
width: 21cm;
|
||||
height: 29.7cm;
|
||||
margin: 0 auto;
|
||||
color: #001028;
|
||||
background: #FFFFFF;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
font-family: Arial;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 10px 0;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
#logo {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#logo img {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
border-top: 1px solid #5D6975;
|
||||
border-bottom: 1px solid #5D6975;
|
||||
color: #5D6975;
|
||||
font-size: 2.4em;
|
||||
line-height: 1.4em;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
margin: 0 0 20px 0;
|
||||
background: url(dimension.png);
|
||||
}
|
||||
|
||||
#project {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#project span {
|
||||
color: #5D6975;
|
||||
text-align: right;
|
||||
width: 52px;
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
#company {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#project div,
|
||||
#company div {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
table tr:nth-child(2n-1) td {
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
table th {
|
||||
padding: 5px 20px;
|
||||
color: #5D6975;
|
||||
border-bottom: 1px solid #C1CED9;
|
||||
white-space: nowrap;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
table .service,
|
||||
table .desc {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table td {
|
||||
padding: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table td.service,
|
||||
table td.desc {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
table td.unit,
|
||||
table td.qty,
|
||||
table td.total {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
table td.grand {
|
||||
border-top: 1px solid #5D6975;;
|
||||
}
|
||||
|
||||
#notices .notice {
|
||||
color: #5D6975;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
footer {
|
||||
color: #5D6975;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
border-top: 1px solid #C1CED9;
|
||||
padding: 8px 0;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="clearfix">
|
||||
<div id="logo">
|
||||
<img src="logo.png">
|
||||
</div>
|
||||
<h1>INVOICE 3-2-1</h1>
|
||||
<div id="company" class="clearfix">
|
||||
<div>Company Name</div>
|
||||
<div>455 Foggy Heights,<br /> AZ 85004, US</div>
|
||||
<div>(602) 519-0450</div>
|
||||
<div><a href="mailto:company@example.com">company@example.com</a></div>
|
||||
</div>
|
||||
<div id="project">
|
||||
<div><span>PROJECT</span> Website development</div>
|
||||
<div><span>CLIENT</span> John Doe</div>
|
||||
<div><span>ADDRESS</span> 796 Silver Harbour, TX 79273, US</div>
|
||||
<div><span>EMAIL</span> <a href="mailto:john@example.com">john@example.com</a></div>
|
||||
<div><span>DATE</span> August 17, 2015</div>
|
||||
<div><span>DUE DATE</span> September 17, 2015</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="service">SERVICE</th>
|
||||
<th class="desc">DESCRIPTION</th>
|
||||
<th>PRICE</th>
|
||||
<th>QTY</th>
|
||||
<th>TOTAL</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="service">Design</td>
|
||||
<td class="desc">Creating a recognizable design solution based on the company's existing visual identity</td>
|
||||
<td class="unit">$40.00</td>
|
||||
<td class="qty">26</td>
|
||||
<td class="total">$1,040.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="service">Development</td>
|
||||
<td class="desc">Developing a Content Management System-based Website</td>
|
||||
<td class="unit">$40.00</td>
|
||||
<td class="qty">80</td>
|
||||
<td class="total">$3,200.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="service">SEO</td>
|
||||
<td class="desc">Optimize the site for search engines (SEO)</td>
|
||||
<td class="unit">$40.00</td>
|
||||
<td class="qty">20</td>
|
||||
<td class="total">$800.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="service">Training</td>
|
||||
<td class="desc">Initial training sessions for staff responsible for uploading web content</td>
|
||||
<td class="unit">$40.00</td>
|
||||
<td class="qty">4</td>
|
||||
<td class="total">$160.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4">SUBTOTAL</td>
|
||||
<td class="total">$5,200.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4">TAX 25%</td>
|
||||
<td class="total">$1,300.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="grand total">GRAND TOTAL</td>
|
||||
<td class="grand total">$6,500.00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="notices">
|
||||
<div>NOTICE:</div>
|
||||
<div class="notice">A finance charge of 1.5% will be made on unpaid balances after 30 days.</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
Invoice was created on a computer and is valid without the signature and seal.
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
293
tests/Pdf/invoice5.html
Normal file
293
tests/Pdf/invoice5.html
Normal file
@ -0,0 +1,293 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example 3</title>
|
||||
<style>
|
||||
|
||||
html {
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Junge;
|
||||
src: url(Junge-Regular.ttf);
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #001028;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Junge;
|
||||
position: relative;
|
||||
width: 21cm;
|
||||
height: 29.7cm;
|
||||
margin: 0 auto;
|
||||
color: #001028;
|
||||
background: #FFFFFF;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.arrow.back {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.inner-arrow {
|
||||
padding-right: 10px;
|
||||
height: 30px;
|
||||
display: inline-block;
|
||||
background-color: rgb(233, 125, 49);
|
||||
text-align: center;
|
||||
|
||||
line-height: 30px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.arrow.back .inner-arrow {
|
||||
background-color: rgb(233, 217, 49);
|
||||
padding-right: 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.arrow:before,
|
||||
.arrow:after {
|
||||
content:'';
|
||||
display: inline-block;
|
||||
width: 0; height: 0;
|
||||
border: 15px solid transparent;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.arrow:before {
|
||||
border-top-color: rgb(233, 125, 49);
|
||||
border-bottom-color: rgb(233, 125, 49);
|
||||
border-right-color: rgb(233, 125, 49);
|
||||
}
|
||||
|
||||
.arrow.back:before {
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-right-color: rgb(233, 217, 49);
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
.arrow:after {
|
||||
border-left-color: rgb(233, 125, 49);
|
||||
}
|
||||
|
||||
.arrow.back:after {
|
||||
border-left-color: rgb(233, 217, 49);
|
||||
border-top-color: rgb(233, 217, 49);
|
||||
border-bottom-color: rgb(233, 217, 49);
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
.arrow span {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
margin-right: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.arrow.back span {
|
||||
margin-right: 0;
|
||||
margin-left: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #5D6975;
|
||||
font-family: Junge;
|
||||
font-size: 2.4em;
|
||||
line-height: 1.4em;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
border-top: 1px solid #5D6975;
|
||||
border-bottom: 1px solid #5D6975;
|
||||
margin: 0 0 2em 0;
|
||||
}
|
||||
|
||||
h1 small {
|
||||
font-size: 0.45em;
|
||||
line-height: 1.5em;
|
||||
float: left;
|
||||
}
|
||||
|
||||
h1 small:last-child {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#project {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#company {
|
||||
float: right;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
table th {
|
||||
padding: 5px 20px;
|
||||
color: #5D6975;
|
||||
border-bottom: 1px solid #C1CED9;
|
||||
white-space: nowrap;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
table .service,
|
||||
table .desc {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table td {
|
||||
padding: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table td.service,
|
||||
table td.desc {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
table td.unit,
|
||||
table td.qty,
|
||||
table td.total {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
table td.sub {
|
||||
border-top: 1px solid #C1CED9;
|
||||
}
|
||||
|
||||
table td.grand {
|
||||
border-top: 1px solid #5D6975;
|
||||
}
|
||||
|
||||
table tr:nth-child(2n-1) td {
|
||||
background: #EEEEEE;
|
||||
}
|
||||
|
||||
table tr:last-child td {
|
||||
background: #DDDDDD;
|
||||
}
|
||||
|
||||
#details {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
footer {
|
||||
color: #5D6975;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
border-top: 1px solid #C1CED9;
|
||||
padding: 8px 0;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1 class="clearfix"><small><span>DATE</span><br />August 17, 2015</small> INVOICE 3-2-1 <small><span>DUE DATE</span><br /> September 17, 2015</small></h1>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="service">SERVICE</th>
|
||||
<th class="desc">DESCRIPTION</th>
|
||||
<th>PRICE</th>
|
||||
<th>QTY</th>
|
||||
<th>TOTAL</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="service">Design</td>
|
||||
<td class="desc">Creating a recognizable design solution based on the company's existing visual identity</td>
|
||||
<td class="unit">$40.00</td>
|
||||
<td class="qty">26</td>
|
||||
<td class="total">$1,040.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="service">Development</td>
|
||||
<td class="desc">Developing a Content Management System-based Website</td>
|
||||
<td class="unit">$40.00</td>
|
||||
<td class="qty">80</td>
|
||||
<td class="total">$3,200.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="service">SEO</td>
|
||||
<td class="desc">Optimize the site for search engines (SEO)</td>
|
||||
<td class="unit">$40.00</td>
|
||||
<td class="qty">20</td>
|
||||
<td class="total">$800.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="service">Training</td>
|
||||
<td class="desc">Initial training sessions for staff responsible for uploading web content</td>
|
||||
<td class="unit">$40.00</td>
|
||||
<td class="qty">4</td>
|
||||
<td class="total">$160.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="sub">SUBTOTAL</td>
|
||||
<td class="sub total">$5,200.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4">TAX 25%</td>
|
||||
<td class="total">$1,300.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="grand total">GRAND TOTAL</td>
|
||||
<td class="grand total">$6,500.00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="details" class="clearfix">
|
||||
<div id="project">
|
||||
<div class="arrow"><div class="inner-arrow"><span>PROJECT</span> Website development</div></div>
|
||||
<div class="arrow"><div class="inner-arrow"><span>CLIENT</span> John Doe</div></div>
|
||||
<div class="arrow"><div class="inner-arrow"><span>ADDRESS</span> 796 Silver Harbour, TX 79273, US</div></div>
|
||||
<div class="arrow"><div class="inner-arrow"><span>EMAIL</span> <a href="mailto:john@example.com">john@example.com</a></div></div>
|
||||
</div>
|
||||
<div id="company">
|
||||
<div class="arrow back"><div class="inner-arrow">Company Name <span>COMPANY</span></div></div>
|
||||
<div class="arrow back"><div class="inner-arrow">455 Foggy Heights, AZ 85004, US <span>ADDRESS</span></div></div>
|
||||
<div class="arrow back"><div class="inner-arrow">(602) 519-0450 <span>PHONE</span></div></div>
|
||||
<div class="arrow back"><div class="inner-arrow"><a href="mailto:company@example.com">company@example.com</a> <span>EMAIL</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="notices">
|
||||
<div>NOTICE:</div>
|
||||
<div class="notice">A finance charge of 1.5% will be made on unpaid balances after 30 days.</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
Invoice was created on a computer and is valid without the signature and seal.
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user