Skip to content

Instantly share code, notes, and snippets.

@jbagaresgaray

jbagaresgaray/attachmentsample.html

Created August 25, 2016 08:16
Show Gist options
  • Save jbagaresgaray/e5af9b94157dbc0ac22539bc3a1e1df9 to your computer and use it in GitHub Desktop.
Save jbagaresgaray/e5af9b94157dbc0ac22539bc3a1e1df9 to your computer and use it in GitHub Desktop.
Download ZIP
attachmentsample
Raw
attachmentsample.html
<!doctype html>
<html ng-app="tessaApp">
<head>
<meta charset="UTF-8" class="ng-scope">
<title class="ng-scope">Title</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,400italic,900,300,300italic" rel="stylesheet" type="text/css" class="ng-scope">
<style type="text/css">
body {
font-family: Roboto, sans-serif;
font-weight: 400;
line-height: 1.45;
color: #616161;
}
p {
margin: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
</head>
<body>
<div style="font-size:12px;" class="ng-scope">
<div style="display: table; width: 100%; table-layout: fixed;">
<div style="display: table-cell;">
<div>
<a href="http://engagis.com.au/" title="Engagis Home"><img src="http://engagis.com/wp-content/uploads/2014/05/Logo_400x96.png" width="268" height="62"></a>
</div>
<br>
<div style="padding: 0 10px;">
<p>Engagis Pty Ltd</p>
<br>
<p>ABN 98 098 945 469</p>
<p>Level 12, 213 Miller Street</p>
<p>North Sydney NSW 2060</p>
<br>
<p style="font-family: 'Roboto Black'; font-size:10px">
Bill To
</p>
<p class="ng-binding">Vcuie</p>
<p class="ng-binding">National Australia Bank Limited Level 1 800 Bourke Street, Docklands</p>
<p class="ng-binding">Melbourne VIC</p>
<p{{selected.bill_to_country}} {{selected.bill_to_zipcode}}<="" p="">
<br>
<p style="font-family: 'Roboto Black'; font-size:10px">
Ship To
</p>
<p class="ng-binding">Vcuie</p>
<p class="ng-binding">National Australia Bank Limited Level 1 800 Bourke Street, Docklands</p>
<p class="ng-binding">Melbourne VIC</p>
<p class="ng-binding">Australia 3008</p>
</p{{selected.bill_to_country}}>
</div>
</div>
<div style="display: table-cell;text-align: right">
<div style="font-size:18px; font-family: 'Roboto Black';">
Quotation
</div>
<br>
<table style="margin-top:10px;">
<tbody>
<tr style="font-family: 'Roboto Black'; font-size: 14px">
<th style="text-align: right">Quote No</th>
<!-- ngIf: selected.type == 'Capex' -->
<td style="padding-left:10px;text-align: left" ng-if="selected.type == 'Capex'" class="ng-binding ng-scope">CPX-1000537</td>
<!-- end ngIf: selected.type == 'Capex' -->
<!-- ngIf: selected.type == 'Opex' -->
</tr>
<tr style="font-family: 'Roboto Medium'">
<th style="font-weight: normal;text-align: right">Date</th>
<td style="padding-left:10px;text-align: left" class="ng-binding">2016-08-19</td>
</tr>
<tr style="font-family: 'Roboto Medium'">
<th style="font-weight: normal;text-align: right">Customer</th>
<td style="padding-left:10px;text-align: left" class="ng-binding"></td>
</tr>
<tr style="font-family: 'Roboto Medium'">
<th style="font-weight: normal;text-align: right">Sales Rep</th>
<td style="padding-left:10px;text-align: left">TESSA</td>
</tr>
<tr style="font-family: 'Roboto Medium'">
<th style="font-weight: normal;text-align: right">Currency</th>
<td style="padding-left:10px;text-align: left">Australian Dollar</td>
</tr>
<tr style="font-family: 'Roboto Medium'">
<th style="font-weight: normal;text-align: right">Subsidiary</th>
<td style="padding-left:10px;text-align: left">Engagis</td>
</tr>
<tr style="font-family: 'Roboto Medium'">
<th style="font-weight: normal;text-align: right">Payment Terms</th>
<td style="padding-left:10px;text-align: left">50% w order, bal on completion</td>
</tr>
<tr style="font-family: 'Roboto Medium'">
<th style="font-weight: normal;text-align: right">Start Date</th>
<td style="padding-left:10px;text-align: left" class="ng-binding">2016-08-19</td>
</tr>
<tr style="font-family: 'Roboto Medium'">
<th style="font-weight: normal;text-align: right">End Date</th>
<td style="padding-left:10px;text-align: left" class="ng-binding">2016-09-18</td>
</tr>
<tr style="font-family: 'Roboto Medium'">
<th style="font-weight: normal;text-align: right">Memo</th>
<td style="padding-left:10px;text-align: left">Zup</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div style="padding:20px 10px; font-size:10px;" class="ng-scope">
<table style="width:100%; table-layout: auto;">
<thead style="background: dimgrey; color:white;">
<tr>
<th style="padding:7px ;width:auto; text-align: center;white-space: nowrap;">Item</th>
<!-- ngIf: selected.type == 'Capex' -->
<th style="padding:7px ;width:auto; text-align: center;white-space: nowrap;" ng-if="selected.type == 'Capex'" class="ng-scope">Upfront Cost
</th>
<!-- end ngIf: selected.type == 'Capex' -->
<!-- ngIf: selected.type == 'Opex' -->
<th style="padding:7px ;width:auto; text-align: center;white-space: nowrap;">Monthly Cost</th>
<th style="padding:7px ;width:auto; text-align: center;white-space: nowrap;">Qty</th>
<th style="padding:7px ;width:auto; text-align: center;white-space: nowrap;">Subtotal</th>
</tr>
</thead>
<tbody>
<!-- ngRepeat: items in selected.quote_item_list -->
<tr ng-repeat="items in selected.quote_item_list" class="ng-scope">
<!-- ngIf: items.bundle_id != null -->
<td style="border-bottom:solid thin black; padding: 5px 0;" ng-if="items.bundle_id != null" class="ng-scope">
<div class="ng-binding">
Eze Impress 32" with Enhanced Media Player
<!-- ngRepeat: item in items.products -->
<ul style="margin:0;" ng-repeat="item in items.products" class="ng-scope">
<li class="ng-binding">ALOGIC 2M DisplayPort to HDMI Cable</li>
</ul>
<!-- end ngRepeat: item in items.products -->
<ul style="margin:0;" ng-repeat="item in items.products" class="ng-scope">
<li class="ng-binding">Enterprise Support</li>
</ul>
<!-- end ngRepeat: item in items.products -->
<ul style="margin:0;" ng-repeat="item in items.products" class="ng-scope">
<li class="ng-binding">Engagis Eze Impress Essential CMS - Rolled Up Parts (Monthly)</li>
</ul>
<!-- end ngRepeat: item in items.products -->
<ul style="margin:0;" ng-repeat="item in items.products" class="ng-scope">
<li class="ng-binding">Enterprise Support for Additional Screens</li>
</ul>
<!-- end ngRepeat: item in items.products -->
<ul style="margin:0;" ng-repeat="item in items.products" class="ng-scope">
<li class="ng-binding">Eze Impress Enhanced CMS</li>
</ul>
<!-- end ngRepeat: item in items.products -->
<ul style="margin:0;" ng-repeat="item in items.products" class="ng-scope">
<li class="ng-binding">Eze Impress Enhanced CMS (Monthly)</li>
</ul>
<!-- end ngRepeat: item in items.products -->
<ul style="margin:0;" ng-repeat="item in items.products" class="ng-scope">
<li class="ng-binding">Hosting in AWS (or similar) per media player</li>
</ul>
<!-- end ngRepeat: item in items.products -->
<ul style="margin:0;" ng-repeat="item in items.products" class="ng-scope">
<li class="ng-binding">Project Management/ Co-ordination of Site Readiness</li>
</ul>
<!-- end ngRepeat: item in items.products -->
<ul style="margin:0;" ng-repeat="item in items.products" class="ng-scope">
<li class="ng-binding">Project Management/ Co-ordination of Solution Readiness: Small</li>
</ul>
<!-- end ngRepeat: item in items.products -->
<ul style="margin:0;" ng-repeat="item in items.products" class="ng-scope">
<li class="ng-binding">STANDARD WALL INSTALL (32"-40" Screens)</li>
</ul>
<!-- end ngRepeat: item in items.products -->
<ul style="margin:0;" ng-repeat="item in items.products" class="ng-scope">
<li class="ng-binding">Engagis Eze Impress Essential CMS - Rolled Up Parts (Monthly)</li>
</ul>
<!-- end ngRepeat: item in items.products -->
<ul style="margin:0;" ng-repeat="item in items.products" class="ng-scope">
<li class="ng-binding">Enhanced Media Player - External for Digital Signage or WiFi App</li>
</ul>
<!-- end ngRepeat: item in items.products -->
<ul style="margin:0;" ng-repeat="item in items.products" class="ng-scope">
<li class="ng-binding">Samsung DB32E Commercial Grade LED Screen</li>
</ul>
<!-- end ngRepeat: item in items.products -->
</div>
</td>
<!-- end ngIf: items.bundle_id != null -->
<!-- ngIf: items.product_id !=null -->
<!-- ngIf: selected.type == 'Capex' -->
<td style="vertical-align: top;border-bottom:solid thin black;padding: 5px 0;text-align: center;" ng-if="selected.type == 'Capex'" class="ng-binding ng-scope">
2946.98
</td>
<!-- end ngIf: selected.type == 'Capex' -->
<!-- ngIf: selected.type == 'Opex' -->
<!-- ngIf: items.spprices -->
<td style="vertical-align: top;border-bottom:solid thin black;padding: 5px 0;text-align: center;" ng-if="items.spprices" class="ng-binding ng-scope">
186.65
</td>
<!-- end ngIf: items.spprices -->
<!-- ngIf: items.product_id !=null -->
<td style="vertical-align: top;border-bottom:solid thin black;padding: 5px 0;text-align: center;" class="ng-binding">1</td>
<!-- ngIf: selected.type == 'Capex' -->
<td style="vertical-align: top;border-bottom:solid thin black;padding: 5px 0;text-align: center;" ng-if="selected.type == 'Capex'" class="ng-binding ng-scope">
3,133.63
</td>
<!-- end ngIf: selected.type == 'Capex' -->
<!-- ngIf: selected.type == 'Opex' -->
</tr>
<!-- end ngRepeat: items in selected.quote_item_list -->
<tr ng-repeat="items in selected.quote_item_list" class="ng-scope">
<!-- ngIf: items.bundle_id != null -->
<td style="border-bottom:solid thin black; padding: 5px 0;" ng-if="items.bundle_id != null" class="ng-scope">
<div class="ng-binding">
Eze Impress 32" Floor Landscape x1
<!-- ngRepeat: item in items.products -->
<ul style="margin:0;" ng-repeat="item in items.products" class="ng-scope">
<li class="ng-binding">ALOGIC 2M DisplayPort to HDMI Cable</li>
</ul>
<!-- end ngRepeat: item in items.products -->
<ul style="margin:0;" ng-repeat="item in items.products" class="ng-scope">
<li class="ng-binding">Engagis Eze Impress Essential CMS</li>
</ul>
<!-- end ngRepeat: item in items.products -->
<ul style="margin:0;" ng-repeat="item in items.products" class="ng-scope">
<li class="ng-binding">Engagis Standard Media Player EMP12S</li>
</ul>
<!-- end ngRepeat: item in items.products -->
<ul style="margin:0;" ng-repeat="item in items.products" class="ng-scope">
<li class="ng-binding">Project Management</li>
</ul>
<!-- end ngRepeat: item in items.products -->
<ul style="margin:0;" ng-repeat="item in items.products" class="ng-scope">
<li class="ng-binding">SAmple TEssa</li>
</ul>
<!-- end ngRepeat: item in items.products -->
</div>
</td>
<!-- end ngIf: items.bundle_id != null -->
<!-- ngIf: items.product_id !=null -->
<!-- ngIf: selected.type == 'Capex' -->
<td style="vertical-align: top;border-bottom:solid thin black;padding: 5px 0;text-align: center;" ng-if="selected.type == 'Capex'" class="ng-binding ng-scope">
1936.43
</td>
<!-- end ngIf: selected.type == 'Capex' -->
<!-- ngIf: selected.type == 'Opex' -->
<!-- ngIf: items.spprices -->
<td style="vertical-align: top;border-bottom:solid thin black;padding: 5px 0;text-align: center;" ng-if="items.spprices" class="ng-binding ng-scope">
186.65
</td>
<!-- end ngIf: items.spprices -->
<!-- ngIf: items.product_id !=null -->
<td style="vertical-align: top;border-bottom:solid thin black;padding: 5px 0;text-align: center;" class="ng-binding">1</td>
<!-- ngIf: selected.type == 'Capex' -->
<td style="vertical-align: top;border-bottom:solid thin black;padding: 5px 0;text-align: center;" ng-if="selected.type == 'Capex'" class="ng-binding ng-scope">
2,123.08
</td>
<!-- end ngIf: selected.type == 'Capex' -->
<!-- ngIf: selected.type == 'Opex' -->
</tr>
<!-- end ngRepeat: items in selected.quote_item_list -->
<tr ng-repeat="items in selected.quote_item_list" class="ng-scope">
<!-- ngIf: items.bundle_id != null -->
<!-- ngIf: items.product_id !=null -->
<td style="border-bottom:solid thin black; padding: 5px 0;" ng-if="items.product_id !=null" class="ng-scope">
<div class="ng-binding">
3 X 46" LED screen for videowalls with associated cables and wall mounting hardware
<ul style="margin:0;">
<li ng-bind-html="items.product_details.item_description" class="ng-binding">
<p><span><b>3 X 46" Digital Signage Hardware Package Including:</b><br>- 3 x Samsung 46" Commercial Grade Videowall LCD Screen (UD46E-C.or similar) with entry level internal media player<br>- 3 X Commercial Grade Wall Mount for Videowalls<br>- 3 X Displayport Cables<br>- 3 X Serial Cables<br>- Stage and Testing Per Screen<br>- Shipping and Handling<br><br><b>Application: 3-Screen Matrix (1x3, 3x1)</b></span>
<br>
<br>
<br>
</p>
</li>
</ul>
</div>
</td>
<!-- end ngIf: items.product_id !=null -->
<!-- ngIf: selected.type == 'Capex' -->
<td style="vertical-align: top;border-bottom:solid thin black;padding: 5px 0;text-align: center;" ng-if="selected.type == 'Capex'" class="ng-binding ng-scope">
9032.45
</td>
<!-- end ngIf: selected.type == 'Capex' -->
<!-- ngIf: selected.type == 'Opex' -->
<!-- ngIf: items.spprices -->
<!-- ngIf: items.product_id !=null -->
<td style="vertical-align: top;border-bottom:solid thin black;padding: 5px 0;text-align: center;" ng-if="items.product_id !=null" class="ng-scope">
0
</td>
<!-- end ngIf: items.product_id !=null -->
<td style="vertical-align: top;border-bottom:solid thin black;padding: 5px 0;text-align: center;" class="ng-binding">1</td>
<!-- ngIf: selected.type == 'Capex' -->
<td style="vertical-align: top;border-bottom:solid thin black;padding: 5px 0;text-align: center;" ng-if="selected.type == 'Capex'" class="ng-binding ng-scope">
9,032.45
</td>
<!-- end ngIf: selected.type == 'Capex' -->
<!-- ngIf: selected.type == 'Opex' -->
</tr>
<!-- end ngRepeat: items in selected.quote_item_list -->
<tr ng-repeat="items in selected.quote_item_list" class="ng-scope">
<!-- ngIf: items.bundle_id != null -->
<!-- ngIf: items.product_id !=null -->
<td style="border-bottom:solid thin black; padding: 5px 0;" ng-if="items.product_id !=null" class="ng-scope">
<div class="ng-binding">
4 X 46" LED screen for videowalls with associated cables and wall mounting hardware
<ul style="margin:0;">
<li ng-bind-html="items.product_details.item_description" class="ng-binding">
<p><span><b>4 X 46" Digital Signage Hardware Package Including:</b><br>- 4 x Samsung 46" Commercial Grade Videowall LCD Screen (UD46E-C.or similar) with entry level internal media player<br>- 4 X Commercial Grade Wall Mount for Videowalls<br>- 4 X Displayport Cables<br>- 4 X Serial Cables<br>- Stage and Testing Per Screen<br>- Shipping and Handling<br><b><br>Application: 2x2 Screen Matrix</b></span>
<br>
<br>
<br>
</p>
</li>
</ul>
</div>
</td>
<!-- end ngIf: items.product_id !=null -->
<!-- ngIf: selected.type == 'Capex' -->
<td style="vertical-align: top;border-bottom:solid thin black;padding: 5px 0;text-align: center;" ng-if="selected.type == 'Capex'" class="ng-binding ng-scope">
12890.07
</td>
<!-- end ngIf: selected.type == 'Capex' -->
<!-- ngIf: selected.type == 'Opex' -->
<!-- ngIf: items.spprices -->
<!-- ngIf: items.product_id !=null -->
<td style="vertical-align: top;border-bottom:solid thin black;padding: 5px 0;text-align: center;" ng-if="items.product_id !=null" class="ng-scope">
0
</td>
<!-- end ngIf: items.product_id !=null -->
<td style="vertical-align: top;border-bottom:solid thin black;padding: 5px 0;text-align: center;" class="ng-binding">1</td>
<!-- ngIf: selected.type == 'Capex' -->
<td style="vertical-align: top;border-bottom:solid thin black;padding: 5px 0;text-align: center;" ng-if="selected.type == 'Capex'" class="ng-binding ng-scope">
12,890.07
</td>
<!-- end ngIf: selected.type == 'Capex' -->
<!-- ngIf: selected.type == 'Opex' -->
</tr>
<!-- end ngRepeat: items in selected.quote_item_list -->
</tbody>
</table>
</div>
<div style="padding: 10px; width:100%; text-align: right" class="ng-scope">
<!-- ngIf: selected.type == 'Capex' -->
<table style="margin-left:auto;" ng-if="selected.type == 'Capex'" class="ng-scope">
<tbody>
<tr>
<th style="padding: 0 10px;">Subtotal</th>
<td class="ng-binding">26,805.93</td>
</tr>
<tr>
<th style="padding: 0 10px;">Tax Total (10%)</th>
<td class="ng-binding">2,680.59</td>
</tr>
<tr>
<th style="padding: 0 10px;">Total</th>
<td class="ng-binding">$29,486.52</td>
</tr>
</tbody>
</table>
<!-- end ngIf: selected.type == 'Capex' -->
<!-- ngIf: selected.type == 'Opex' -->
</div>
<div style="padding: 10px 0; width:100%;" class="ng-scope">
<table>
<tbody>
<tr>
<th style="padding: 0 10px;">Signed</th>
<td style="vertical-align: bottom;">
<div style="border-bottom: solid thin black; width:300px;"></div>
</td>
</tr>
<tr>
<th style="padding: 0 10px;">Name</th>
<td style="vertical-align: bottom;">
<div style="border-bottom: solid thin black; width:300px;"></div>
</td>
<th style="padding: 0 10px;">Position</th>
<td style="vertical-align: bottom;">
<div style="border-bottom: solid thin black; width:150px;"></div>
</td>
<th style="padding: 0 10px;">Date</th>
<td style="vertical-align: bottom;">
<div style="border-bottom: solid thin black; width:150px;"></div>
</td>
</tr>
</tbody>
</table>
<div style="padding: 10px">
<i>Quote is valid for 30 days only and is subject to our terms and conditions.</i>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment