Expand|Select|Wrap|Line Numbers
- <!DOCTYPE html>
- <html dir="ltr" lang="en-GB">
- <head><meta charset="UTF-8">
- <title>AETP Quotation</title>
- <!--CSS for the theme-->
- <style type="text/css">body {
- font-family:Sans-serif, "Helvetica", Verdana, sans-serif;
- }
- tr, td, th, thead, tfoot, span, p {
- page-break-inside: avoid !important;
- }
- /* The title of the page */
- .page_title {
- text-decoration:underline;
- text-transform:capitalize;
- margin-top:0;
- }
- /* The logo contained */
- .logo img {
- max-width:350px;
- max-height:150px;
- width:auto;
- height:auto;
- }
- /* The logo img element */
- .img_logo {
- max-width:350px;
- max-height:150px;
- width:auto;
- height:auto;
- }
- /* The details about the invoice */
- .invoice_details {
- font-size:0.9em;
- }
- /* The details about the purchase order */
- .po_details {
- font-size:0.9em;
- }
- /* The rounded box for client and delivery details */
- .details_box {
- padding-left:6px;
- border:0px solid #AAA;
- border-radius:3px;
- background-color:#e6e6e6;
- font-size:0.9em;
- }
- /* A label for a field */
- .label {
- font-weight:bold;
- white-space: nowrap;
- }
- /* The grid we are using to show items */
- .item_grid {
- border-radius:6px;
- margin-left: auto;
- margin-right: auto;
- counter-reset: row;
- empty-cells: hide;
- }
- /* The blank line between items and totals in the grid */
- .item_grid_break {
- border-bottom:0px solid #777;
- }
- /* Set the left border on certain item cells */
- .item_grid td, .item_grid th {
- padding:3px;
- border-top:0 solid #777;
- border-right:0px solid #777;
- border-bottom:0 solid #777;
- border-left:0px solid #777;
- }
- /* The header row in the item grid */
- .item_grid th {
- background:#bc7100;
- border-top:0px solid #777;
- }
- /* Set the stripes in the item grid
- .item_grid tr.item_row:nth-child(odd) {
- background-color:rgba(0,0,0, 0.05); */
- }
- /* Make sure last item has a bottom border
- .item_grid tr:last-child td {
- border-bottom:0px solid #777;
- }
- */
- /* The grid we are using to show totals */
- .totals_grid {
- margin-left: auto;
- margin-right: auto;
- counter-reset: row;
- empty-cells: show;
- }
- .totals_grid tr .totals_grid td {
- border-left:none;
- border-right:none;
- }
- /* The header row in the totals grid */
- .totals_grid th {
- background:#e6e6e6;
- border-top:2px solid #d1d1d1;
- border-collapse:collapse;
- border-left:0px;
- border-right:0px;
- }
- /* Make sure last item has a bottom border */
- .totals_grid tr:last-child td {
- border-bottom:2px solid #d1d1d1;
- }
- /* The row counter */
- .counter:before {
- counter-increment: row;
- content: counter(row);
- }
- .counter {
- font-weight:normal;
- color:#999;
- }
- hr {
- height:2px;
- color:#d1d1d1;
- background:#d1d1d1;
- border:none;
- width:100%;
- }
- /* THE FOLLOWING ARE GENERATED CLASSES */
- /* How a heading name will be displayed */
- .heading_name {
- font-weight:bold;
- margin-top:4px;
- font-size:1.1em;
- white-space: nowrap;
- }
- /* How a heading technical description will be displayed */
- .heading_technical {
- font-style:italic;
- color:grey;
- }
- /* How a heading total price will be displayed */
- .heading_price {
- display:none;
- white-space:nowrap;
- }
- .consumable_price,.stock_price, .custom_price, .labour_price {
- white-space:nowrap;
- }
- /* How an inline heading will be displayed */
- .inline_name {
- font-weight:bold;
- font-style:italic;
- white-space: nowrap;
- }
- /* How items quantity will be displayed */
- .consumable_qty, .stock_qty, .custom_qty, .labour_qty {
- display:inline-block;
- width:70px;
- }
- /* How items name will be displayed */
- .consumable_name, .stock_name, .custom_name, .labour_name {
- display: inline-block;
- white-space: nowrap;
- }
- .heading_name {
- display: block;
- white-space: nowrap;
- }
- /* How autopull items will be displayed */
- .autopull.consumable_name, .autopull.stock_name, .autopull.custom_name, .autopull.labour_name, .autopull.stock_qty, .autopull.stock_price, .autopull.stock_discount, .autopull.stock_unit_price {
- font-style:italic;
- color:grey;
- font-size:0.8em;
- }
- /* How additional item text will be diaplyed */
- .consumable_additional, .stock_additional, .custom_additional, .labour_additional {
- display: inline;
- font-style:italic;
- color:#777;
- white-space:normal;
- }
- .heading_additional {
- display:block;
- white-space:normal;
- }
- .stock_unit_price, .stock_price, .custom_unit_price, .custom_price, .consumable_unit_price, .consumable_price, .labour_unit_price, .labour_price {
- white-space: nowrap !important;
- }
- /* What to show when showing on screen */
- @media screen {
- body {
- min-width:950px;
- }
- .pagebreak hr {
- border-top: 5px double #8c8b8b;
- }
- }
- @media print {
- html, body {
- width:950px; /* Sets the page to a nice width (same as used in MyHireHop webpage) */
- -webkit-print-color-adjust:exact;
- color-adjust:exact;
- }
- .pagebreak {
- display: none !important;
- border-top: 5px double #8c8b8b;
- }
- }
- .text_right { text-align: right; }
- .text_left { text-align: left; }
- </style>
- <script>
- // Change the document name and add the invoice number once the document has finished loading
- window.onload = function(){
- document.title = document.getElementById("doc_type").textContent + " (" + document.getElementById("number").textContent + ")";
- }
- </script>
- </head>
- <body><!--Make the whole page a table so the <thead> acts as the header-->
- <table align="center" style="width:100%;"><!--This is our page header section-->
- <thead>
- <tr>
- <td colspan="1" rowspan="2">
- <h1 class="page title" id="doc_type"><span style="color:#666666;"><span style="font-size:48px;">Quotation</span></span></h1>
- <p><span style="color:#666666;"><strong><span name="job:company">{{job.company}}</span></strong><span name="job:address" style="display:block;overflow:auto">{{job.address}}</span><span name="job:telephone" style="display:block;overflow:auto">{{job.telephone}}</span></span></p>
- </td>
- <td><span style="color:#666666;"><img class="img_logo" name="user:logo_url" src="/images/logo.jpg" style="float: right;" /></span></td>
- </tr>
- <tr>
- <td>
- <p name="depot:address" style="text-align: right;"><span name="depot:address" style="color:#666666;"><span name="user:company" style="font-weight:bold">{{user.company}}</span><br />
- {{depot.address}}</span></p>
- </td>
- </tr>
- <tr>
- <td colspan="2">
- <table cellpadding="0" cellspacing="0" width="100%">
- <tbody>
- <tr>
- <td class="text_right" style="font-size: 1.2em; text-align: left;" valign="bottom"><span style="color:#666666;"><span name="job:job_name">{{job.job_name}}</span></span></td>
- </tr>
- </tbody>
- </table>
- </td>
- </tr>
- </thead>
- <!--The <tbody> is the rest of the page-->
- <tbody>
- <tr>
- <td colspan="2">
- <table cellpadding="0" cellspacing="0" width="100%">
- <tbody>
- <tr>
- <td class="details_box" valign="top" width="50%">
- <table width="100%">
- <tbody>
- <tr>
- <td class="label" style="min-width:95px;width:95px"><span style="color:#666666;">Quotation</span></td>
- <td><span style="color:#666666;">JR - <span id="number" name="job:reference">{{job.reference}}</span></span></td>
- </tr>
- <tr>
- <td class="label"><span style="color:#666666;">Date</span></td>
- <td><span style="color:#666666;"><span name="general:date">{{general.date}}</span></span></td>
- </tr>
- <tr>
- <td class="label" valign="top"><span style="color:#666666;">Valid Until</span></td>
- <td> </td>
- </tr>
- <tr>
- <td class="label" valign="top"><span style="color:#666666;">Your Reference </span></td>
- <td><span style="color:#666666;"><span name="job:client_ref" style="display:block;overflow:auto">{{job.client_ref}} </span></span></td>
- </tr>
- <tr>
- <td class="label" valign="top"><span style="color:#666666;">Job Manager </span></td>
- <td><span name="job:user" style="color:#666666;">{{job.user}}</span></td>
- </tr>
- <tr>
- <td class="label" valign="top"><font color="#666666">Job Type</font></td>
- <td><span name="job:job_type" style="color:#666666;">{{job.job_type}}</span></td>
- </tr>
- </tbody>
- </table>
- </td>
- <td><span style="color:#666666;"> </span></td>
- <td class="details_box" valign="top" width="50%">
- <table width="100%">
- <tbody>
- <tr>
- <td class="label" style="min-width:165px;width:165px"><span style="color:#666666;">Deliver to</span></td>
- <td><span style="color:#666666;"><span name="job:venue">{{job.venue}}</span></span></td>
- </tr>
- <tr>
- <td class="label" valign="top"><span style="color:#666666;">Delivery Address</span></td>
- <td><span style="color:#666666;"><span name="job:venue_address" style="display:block;overflow:auto">{{job.venue_address}}</span></span></td>
- </tr>
- <tr>
- <td class="label"><span style="color:#666666;">Telephone</span></td>
- <td><span style="color:#666666;"><span name="job:venue_telephone">{{job.venue_telephone}}</span></span></td>
- </tr>
- <tr>
- <td class="label"><font color="#666666">Delivery</font></td>
- <td name="job:deliver"><span style="color:#666666;"><span name="job:deliver">{{job.deliver}}</span></span></td>
- </tr>
- <tr>
- <td class="label"><font color="#666666">Collection</font></td>
- <td name="job:collect"><span style="color:#666666;"><span name="job:collect">{{job.collect}}</span></span></td>
- </tr>
- </tbody>
- </table>
- </td>
- </tr>
- </tbody>
- </table>
- <span style="color:#666666;"><!--Job dates--></span>
- <table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
- <tbody>
- <tr>
- <td>
- <table border="0" cellpadding="5" cellspacing="0" style="width:100%;">
- <tbody>
- <tr>
- <td><font color="#666666"><span style="white-space: nowrap;"><b>Outgoing</b></span></font></td>
- <td><span style="color:#666666;"><span name="job:out_date">{{job.out_date}}</span> - <span name="job:out_time">{{job.out_time}}</span></span></td>
- </tr>
- <tr>
- <td><span style="color:#666666;"><span class="label">Job Start</span></span></td>
- <td><span style="color:#666666;"><span name="job:job_start">{{job.job_start}}</span> - <span name="job:job_start_time">{{job.job_start_time}}</span></span></td>
- </tr>
- <tr>
- <td><span style="color:#666666;"><span class="label">Job Finish</span></span></td>
- <td><span style="color:#666666;"><span name="job:job_end">{{job.job_end}}</span> - <span name="job:job_end_time">{{job.job_end_time}}</span></span></td>
- </tr>
- <tr>
- <td><span style="color:#666666;"><span class="label">Returning</span></span></td>
- <td><span style="color:#666666;"><span name="job:return_date">{{job.return_date}}</span> - <span name="job:return_time">{{job.return_time}}</span></span></td>
- </tr>
- </tbody>
- </table>
- </td>
- <td style="width: 50%; text-align: left; vertical-align: top;" width:100="">
- <table border="0" cellpadding="5" cellspacing="0" style="width:100%;">
- <tbody>
- <tr>
- <td><font color="#666666"><span style="white-space: nowrap;"><b>Job Notes</b></span></font></td>
- </tr>
- <tr>
- <td><span style="color:#666666;"><span name="job:details">{{job.details}}</span></span></td>
- </tr>
- </tbody>
- </table>
- </td>
- </tr>
- </tbody>
- </table>
- <div align="center" style="width: 100%; align:center">
- <table align="center" cellpadding="6" cellspacing="0" class="item_grid" style="table-layout:fixed;width:100%;">
- <thead>
- <tr>
- <th class="item_grid_break" style="width:100%;"><span style="color:#666666;"><span style="color:#FFFFFF;">Description</span></span></th>
- <th class="item_grid_break" style="min-width:50px;width:50px;"><span style="color:#666666;"><span style="color:#FFFFFF;">Qty.</span></span></th>
- <th class="item_grid_break" style="min-width:80px;width:80px;"><span style="color:#666666;"><span style="color:#FFFFFF;">Unit Price</span></span></th>
- <th class="item_grid_break" style="min-width:70px;width:80px;"><span style="color:#666666;"><span style="color:#FFFFFF;">Discount</span></span></th>
- <th class="item_grid_break" style="min-width:95px;width:95px;"><span style="color:#666666;"><span style="color:#FFFFFF;">Price</span></span></th>
- </tr>
- </thead>
- <tbody>
- <tr class="item_row" name="items:">
- <td class="indent"><span style="color:#666666;"><span name="items:name">{{items.name}}</span> <span name="items:additional">{{items.additional}}</span></span></td>
- <td align="center"><span style="color:#666666;"><span name="items:qty">{{items.qty}}</span></span></td>
- <td style="text-align:right;"><span style="color:#666666;"><span name="items:unit_price">{{items.unit_price}}</span></span></td>
- <td style="text-align:right;"><span style="color:#666666;"><span name="items:discount">{{items.discount}}</span></span></td>
- <td style="text-align:right;"><span style="color:#666666;"><span name="items:price">{{items.price}}</span></span></td>
- </tr>
- </tbody>
- </table>
- </div>
- <hr /></div>
- <iv align="center" style="width: 100%; align:center">
- <table align="center" cellpadding="8" cellspacing="0" class="totals_grid" width="100%">
- <tbody>
- <tr>
- <td style="text-align: center;"><strong><span style="color:#666666;"><span name="totals:value">{{totals.weight}}</span></span></strong></td>
- <td style="text-align: center;"><strong><span style="color:#666666;"><span name="total:qty"><span id="sum">0</span>
- <script>
- $(document).ready(function(){
- $({{items.qty}}).each(function() {
- $(this).keyup(function(){
- calculateSum();
- });
- });
- });
- function calculateSum() {
- var sum = 0;
- $({{items.qty}}).each(function() {
- if(!isNaN(this.value) && this.value.length!=0) {
- sum += parseFloat(this.value);
- }
- });
- $("#sum").html(sum.toFixed(0));
- }
- </script></span></span></strong></td>
- <td style="text-align: center;"><strong><span style="color:#666666;"><span name="totals:weight">{{totals.value}}</span></span></strong></td>
- </tr>
- </tbody>
- <thead class="totals_grid">
- <tr>
- <th scope="col" style="text-align: center;" width="25%"><span style="color:#666666;"><span class="label">Total Weight</span></span></th>
- <th scope="col" style="text-align: center;" width="25%"><span style="color:#666666;"><span class="label">Total Items</span></span></th>
- <th scope="col" style="text-align: center;" width="25%"><span style="color:#666666;"><span class="label">Replacement Value</span></span></th>
- </tr>
- </thead>
- </table>
- </div>
- <div>
- <hr />
- <table align="center" border="0" cellpadding="10" cellspacing="0" style="width:100%">
- <tbody>
- <tr>
- <td width="22.5%"><span style="color:#666666;"><strong>Rental Charges</strong></span></td>
- <td style="text-align: right;" width="22.5%"><span style="color:#666666;"><strong><span name="totals:net" width="25%">{{totals.net}}</span></strong></span></td>
- <td style="text-align: right;" width="10%"> </td>
- <td width="22.5%"><span style="color:#666666;"><strong>Total</strong></span></td>
- <td style="text-align: right;"><span style="color:#666666;"><strong><span name="totals:net" width="22.5%">{{totals.net}}</span></strong></span></td>
- </tr>
- <tr>
- <td><span style="color:#666666;"><strong>Sale Charges</strong></span></td>
- <td style="text-align: right;"><span style="color:#666666;"><strong><span name="totals:net" width="25%">{{totals.net}}</span></strong></span></td>
- <td style="text-align: right;"> </td>
- <td><span style="color:#666666;"><strong>Discount</strong></span></td>
- <td name="totals:discount" style="text-align: right;"><span style="color:#666666;"><strong><span name="totals:discount">{{totals.discount}}</span></strong></span></td>
- </tr>
- <tr>
- <td><span style="color:#666666;"><strong>Service Charges</strong></span></td>
- <td style="text-align: right;"><span style="color:#666666;"><strong><span name="totals:net" width="25%">{{totals.net}}</span></strong></span></td>
- <td style="text-align: right;"> </td>
- <td><span style="color:#666666;"><strong>VAT</strong></span></td>
- <td style="text-align: right;"><span style="color:#666666;"><strong><span name="totals:vat">{{totals.vat}}</span></strong></span></td>
- </tr>
- <tr>
- <td> </td>
- <td style="text-align: right;"> </td>
- <td style="text-align: right;"> </td>
- <td><span style="color:#666666;"><strong>Total inc VAT</strong></span></td>
- <td style="text-align: right;"><span style="color:#666666;"><strong><span name="totals:total">{{totals.total}}</span></strong></span></td>
- </tr>
- </tbody>
- </table>
- <div>
- <table align="center" cellpadding="5" cellspacing="0" class="totals_grid" width="100%">
- <tbody>
- <tr>
- <td style="text-align: center;"> </td>
- </tr>
- </tbody>
- </table>
- </div>
- </td>
- </tr>
- </tbody>
- </table>
- <!--End of the page table--><!--</div>--></body>
- </html>
Any Help Would be greatly appreciated