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