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 19:20:21 +00:00
parent baa593d919
commit e4a224cfc8
1 changed files with 41 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
1.html
View File

@ -14,10 +14,10 @@
body {
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
padding: 20px 30px; /* reduced padding for PDF */
padding: 30px 40px;
color: #1a1a1a;
line-height: 1.5; /* slightly reduced line-height */
max-width: 800px; /* reduced width for PDF */
line-height: 1.6;
max-width: 850px;
margin: 0 auto;
background-color: #fff;
}
@ -26,9 +26,9 @@
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 32px;
padding-bottom: 16px;
border-bottom: 3px solid #002366; /* navy blue */
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 3px solid #002366;
}
.company-info {
@ -39,7 +39,8 @@
font-size: 26px;
font-weight: 700;
color: #002366;
margin-bottom: 6px;
margin-bottom: 8px;
white-space: nowrap;
}
.company-details {
@ -50,15 +51,14 @@
.invoice-title {
text-align: right;
flex: 1;
font-family: 'Poppins', sans-serif;
flex-shrink: 0;
}
.invoice-title h1 {
font-size: 30px; /* smaller */
font-size: 32px;
font-weight: 700;
color: #002366;
margin-bottom: 6px;
margin-bottom: 8px;
}
.invoice-number {
@ -70,8 +70,8 @@
.invoice-meta {
display: flex;
justify-content: space-between;
margin-bottom: 24px;
gap: 16px;
margin-bottom: 30px;
gap: 20px;
}
.meta-section {
@ -83,7 +83,7 @@
text-transform: uppercase;
letter-spacing: 1px;
color: #999;
margin-bottom: 8px;
margin-bottom: 10px;
font-weight: 600;
}
@ -93,14 +93,14 @@
}
.meta-content div {
margin-bottom: 2px;
margin-bottom: 3px;
}
.customer-name {
font-weight: 600;
font-size: 15px;
color: #1a1a1a;
margin-bottom: 4px;
margin-bottom: 6px;
}
.dates-section {
@ -108,7 +108,7 @@
}
.date-item {
margin-bottom: 6px;
margin-bottom: 8px;
}
.date-label {
@ -122,13 +122,13 @@
font-size: 13px;
color: #333;
font-weight: 500;
text-transform: capitalize; /* titlecase for status */
text-transform: capitalize;
}
.items-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 24px; /* reduced margin */
margin-bottom: 30px;
}
.items-table thead {
@ -136,7 +136,7 @@
}
.items-table th {
padding: 10px 8px; /* smaller padding */
padding: 12px 10px;
text-align: left;
font-size: 11px;
text-transform: uppercase;
@ -160,7 +160,7 @@
}
.items-table td {
padding: 12px 8px; /* smaller padding */
padding: 14px 10px;
font-size: 13px;
color: #333;
}
@ -172,8 +172,8 @@
.totals-section {
margin-left: auto;
width: 300px; /* smaller width for PDF */
padding: 16px;
width: 320px;
padding: 18px;
background-color: #f9f9f9;
border-radius: 8px;
font-size: 13px;
@ -182,12 +182,13 @@
.total-row {
display: flex;
justify-content: space-between;
padding: 6px 0;
padding: 8px 0;
}
.total-row.subtotal {
color: #666;
border-bottom: 1px solid #ddd;
padding-bottom: 8px;
}
.total-row.grand-total {
@ -196,24 +197,24 @@
color: #002366;
border-top: 2px solid #002366;
padding-top: 12px;
margin-top: 4px;
margin-top: 6px;
}
.footer {
margin-top: 32px;
padding-top: 16px;
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #eee;
font-size: 12px;
color: #999;
text-align: center;
display: flex;
flex-direction: column;
gap: 2px;
gap: 4px;
}
.notes-section {
margin-top: 24px;
padding: 16px;
margin-top: 30px;
padding: 18px;
background-color: #f9f9f9;
border-left: 4px solid #002366;
border-radius: 4px;
@ -224,19 +225,19 @@
text-transform: uppercase;
letter-spacing: 1px;
color: #666;
margin-bottom: 6px;
margin-bottom: 8px;
font-weight: 600;
}
.notes-section p {
font-size: 12px;
color: #555;
line-height: 1.5;
line-height: 1.6;
}
@media print {
body {
padding: 10px;
padding: 20px;
}
.items-table tbody tr:hover {
@ -246,14 +247,8 @@
</style>
</head>
<body>
<div class="header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; padding-bottom: 16px; border-bottom: 3px solid #002366;">
<div class="company-info" style="display: flex; align-items: center; gap: 16px;">
{{#logoUrl}}
<div style="flex-shrink: 0;">
<img src="{{logoUrl}}" alt="Company Logo" style="width: 120px; height: 120px; object-fit: cover; border-radius: 8px;">
</div>
{{/logoUrl}}
<div>
<div class="header">
<div class="company-info">
<div class="company-name">{{companyName}}</div>
<div class="company-details">
{{#companyAddress}}
@ -267,14 +262,12 @@
{{/companyPhone}}
</div>
</div>
</div>
<div class="invoice-title">
<h1><strong>Invoice</strong></h1>
<div class="invoice-number">#{{invoiceNumber}}</div>
<div class="invoice-title">
<h1><strong>Invoice</strong></h1>
<div class="invoice-number">#{{invoiceNumber}}</div>
</div>
</div>
</div>
<div class="invoice-meta">
<div class="meta-section">
@ -362,4 +355,4 @@
<div>{{companyName}} Generated on {{issueDate}}</div>
</div>
</body>
</html>
</html>