jagrit007/invio-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update 1.html

Browse Source
This commit is contained in:
jagrit007 2025-10-11 18:32:05 +00:00
parent fca2cf151e
commit 95525db987
1 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
1.html
View File

@ -4,6 +4,8 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Invoice {{invoiceNumber}}</title> <title>Invoice {{invoiceNumber}}</title>
<style> <style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -11,12 +13,13 @@
} }
body { body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
padding: 40px; padding: 40px;
color: #1a1a1a; color: #1a1a1a;
line-height: 1.6; line-height: 1.6;
max-width: 900px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
background-color: #fff;
} }
.header { .header {
@ -25,7 +28,7 @@
align-items: flex-start; align-items: flex-start;
margin-bottom: 48px; margin-bottom: 48px;
padding-bottom: 24px; padding-bottom: 24px;
border-bottom: 3px solid {{highlightColor}}; border-bottom: 3px solid #002366; /* navy blue */
} }
.company-info { .company-info {
@ -35,7 +38,7 @@
.company-name { .company-name {
font-size: 28px; font-size: 28px;
font-weight: 700; font-weight: 700;
color: {{highlightColor}}; color: #002366;
margin-bottom: 8px; margin-bottom: 8px;
} }
@ -48,12 +51,13 @@
.invoice-title { .invoice-title {
text-align: right; text-align: right;
flex: 1; flex: 1;
font-family: 'Poppins', sans-serif;
} }
.invoice-title h1 { .invoice-title h1 {
font-size: 36px; font-size: 32px; /* slightly smaller than before */
font-weight: 700; font-weight: 700;
color: #1a1a1a; color: #002366;
margin-bottom: 8px; margin-bottom: 8px;
} }
@ -118,6 +122,7 @@
font-size: 14px; font-size: 14px;
color: #333; color: #333;
font-weight: 500; font-weight: 500;
text-transform: capitalize; /* titlecase for status */
} }
.items-table { .items-table {
@ -127,7 +132,7 @@
} }
.items-table thead { .items-table thead {
background-color: {{highlightColorLight}}; background-color: #e6f0ff; /* lighter navy */
} }
.items-table th { .items-table th {
@ -138,7 +143,7 @@
letter-spacing: 1px; letter-spacing: 1px;
color: #666; color: #666;
font-weight: 600; font-weight: 600;
border-bottom: 2px solid {{highlightColor}}; border-bottom: 2px solid #002366;
} }
.items-table th:last-child, .items-table th:last-child,
@ -188,8 +193,8 @@
.total-row.grand-total { .total-row.grand-total {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
color: {{highlightColor}}; color: #002366;
border-top: 2px solid {{highlightColor}}; border-top: 2px solid #002366;
padding-top: 16px; padding-top: 16px;
margin-top: 8px; margin-top: 8px;
} }
@ -207,7 +212,7 @@
margin-top: 32px; margin-top: 32px;
padding: 20px; padding: 20px;
background-color: #f9f9f9; background-color: #f9f9f9;
border-left: 4px solid {{highlightColor}}; border-left: 4px solid #002366;
border-radius: 4px; border-radius: 4px;
} }
@ -254,7 +259,7 @@
</div> </div>
</div> </div>
<div class="invoice-title"> <div class="invoice-title">
<h1>INVOICE</h1> <h1><strong>Invoice</strong></h1>
<div class="invoice-number">#{{invoiceNumber}}</div> <div class="invoice-number">#{{invoiceNumber}}</div>
</div> </div>
</div> </div>
@ -342,7 +347,7 @@
<div class="footer"> <div class="footer">
<p>Thank you for your business!</p> <p>Thank you for your business!</p>
<p>{{companyName}} • Generated on {{issueDate}}</p> <p>{{companyName}} Generated on {{issueDate}}</p>
</div> </div>
</body> </body>
</html> </html>