add: new styles

script.js

@@ -111,26 +111,121 @@ if (typeof document !== 'undefined') {
       const paisePart = Math.round((total - rupeePart) * 100);
       const rupeeWords = numberToWords(rupeePart);
       const paiseWords = paisePart > 0 ? numberToWords(paisePart) : '';
-      let html = '<div class="quotation-print">';
-      html += `<div class="section"><strong>From:</strong><br>${company.name}<br>${company.address.replace(/\n/g, '<br>')}<br>Phone: ${company.phone}<br>Email: ${company.email}</div>`;
-      html += `<div class="section"><strong>To:</strong><br>${customer.name}<br>${customer.address.replace(/\n/g, '<br>')}<br>Phone: ${customer.phone}<br>Email: ${customer.email}</div>`;
-      html += `<div class="section quote-meta">Quotation No: ${quotationNumber}<br>Date: ${quotationDate}</div>`;
-      html += '<table class="quotation-table"><thead><tr><th>S.No</th><th>Description</th><th>HSN</th><th>Qty</th><th>Unit Price</th><th>Discount (%)</th><th>Amount</th></tr></thead><tbody>';
+      const rOff = 0; // Or get from a form field if you add one
+      const finalTotal = total - rOff;
+
+      let html = `
+        <div class="quotation-print">
+          <div class="header">
+            <div class="company-details">
+              <strong>${company.name}</strong><br>
+              {{address}}<br>
+              GST NO. : <br>
+              CONTACT NO : ${company.phone}
+            </div>
+            <div class="quotation-title">
+              <h1>QUOTATION</h1>
+              <table class="quote-meta">
+                <tr>
+                  <td>QUO. NO</td>
+                  <td>${quotationNumber}</td>
+                </tr>
+                <tr>
+                  <td>DATE</td>
+                  <td>${quotationDate}</td>
+                </tr>
+              </table>
+            </div>
+          </div>
+
+          <div class="customer-info">
+            <strong>CUSTOMER INFO</strong><br>
+            ${customer.name}
+          </div>
+
+          <table class="items-table-print">
+            <thead>
+              <tr>
+                <th>SL NO</th>
+                <th>DESCRIPTION</th>
+                <th>HSN CODE</th>
+                <th>QTY</th>
+                <th>UNIT PRICE</th>
+                <th>DISCOUNT</th>
+                <th>AMOUNT</th>
+              </tr>
+            </thead>
+            <tbody>
+      `;
       items.forEach((item, idx) => {
-        html += `<tr><td>${idx + 1}</td><td>${item.description}</td><td>${item.hsn}</td><td>${item.qty}</td><td>${item.price.toFixed(2)}</td><td>${item.discount.toFixed(2)}%</td><td>${item.amount.toFixed(2)}</td></tr>`;
+        html += `
+              <tr>
+                <td>${idx + 1}</td>
+                <td>${item.description}</td>
+                <td>${item.hsn}</td>
+                <td>${item.qty}</td>
+                <td>${item.price.toFixed(2)}</td>
+                <td>${item.discount.toFixed(2)}%</td>
+                <td>${item.amount.toFixed(2)}</td>
+              </tr>
+        `;
       });
-      html += '</tbody></table>';
-      html += `<div class="section amount-words"><strong>Amount in Words:</strong> Rupees ${rupeeWords}${paiseWords ? ' and ' + paiseWords + ' Paise' : ''} only</div>`;
-      html += '<div class="totals"><table>';
-      html += `<tr><td>Subtotal:</td><td>${subtotal.toFixed(2)}</td></tr>`;
-      html += `<tr><td>IGST (${igstRate}%):</td><td>${igstAmount.toFixed(2)}</td></tr>`;
-      html += `<tr><td>Freight:</td><td>${freightCharges.toFixed(2)}</td></tr>`;
-      html += `<tr><td><strong>Total:</strong></td><td><strong>${total.toFixed(2)}</strong></td></tr>`;
-      html += '</table></div>';
-      html += `<div class="section"><strong>Bank Details:</strong><br>Bank: ${bank.name}<br>Account: ${bank.account}<br>IFSC: ${bank.ifsc}<br>Branch: ${bank.branch}</div>`;
-      html += '<p class="disclaimer">This quotation is not a contract or a bill. It is our best guess at the total price for the service and goods described above. The customer will be billed after indicating acceptance of this quote. Payment will be due prior to the delivery of service and goods. Please fax or mail the signed quote to the address listed above.</p>';
-      html += '<button onclick="window.print()">Print / Save as PDF</button>';
-      html += '</div>';
+      // Add empty rows to fill the page
+      for (let i = items.length; i < 10; i++) {
+        html += '<tr><td>&nbsp;</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>';
+      }
+
+      html += `
+            </tbody>
+          </table>
+
+          <div class="footer">
+            <div class="notes-and-total">
+              <div class="notes">
+                SPECIAL NOTES:<br><br>
+                AMOUNT IN WORDS:<br>
+                <strong>${rupeeWords}${paiseWords ? ' and ' + paiseWords + ' Paise' : ''} only</strong><br><br>
+                Delivery : 7 To 10 working days after receiving PO<br><br>
+                BANK DETAILS FOR RTGS/ NEFT ${bank.name}, BRANCH: ${bank.branch}<br>
+                A/C NO: ${bank.account}<br>
+                IFSC CODE: ${bank.ifsc}
+              </div>
+              <div class="totals">
+                <table>
+                  <tr>
+                    <td>SUB TOTAL</td>
+                    <td>${subtotal.toFixed(2)}</td>
+                  </tr>
+                  <tr>
+                    <td>FREIGHT CHARGES</td>
+                    <td>${freightCharges.toFixed(2)}</td>
+                  </tr>
+                  <tr>
+                    <td>IGST</td>
+                    <td>${igstAmount.toFixed(2)}</td>
+                  </tr>
+                  <tr>
+                    <td>R/OFF</td>
+                    <td>${rOff.toFixed(2)}</td>
+                  </tr>
+                  <tr>
+                    <td><strong>TOTAL</strong></td>
+                    <td><strong>${finalTotal.toFixed(2)}</strong></td>
+                  </tr>
+                </table>
+              </div>
+            </div>
+            <div class="disclaimer">
+              This quotation is not a contract or a bill. It is our best guess at the total price for the service and goods described above. The customer will be billed after indicating acceptance of this quote. Payment will be due prior to the delivery of service and goods. Please fax or mail the signed quote to the address listed above.
+            </div>
+            <div class="thank-you">
+              Thank you for your business!
+            </div>
+          </div>
+          <button onclick="window.print()">Print / Save as PDF</button>
+        </div>
+      `;
+      html = html.replace('{{address}}', company.address.replace(/\n/g, '<br>'));
       output.innerHTML = html;
       output.style.display = 'block';
       document.getElementById('form-container').style.display = 'none';

style.css

@@ -45,6 +45,8 @@ button {
 .quotation-print {
   max-width: 800px;
   margin: auto;
+  border: 1px solid #000;
+  padding: 20px;
 }
 
 .quotation-print h2 {
@@ -59,23 +61,107 @@ button {
 .totals table {
   float: right;
   border: none;
+  width: 100%;
+  border-collapse: collapse;
 }
 
 .totals td {
-  padding: 4px 8px;
-  border: none;
+  border: 1px solid #000;
+  padding: 8px;
 }
 
 .disclaimer {
-  font-size: 0.9em;
   color: #555;
   margin-top: 20px;
+  font-size: 10px;
+  text-align: justify;
+  border-top: 1px solid #000;
+  padding-top: 10px;
 }
 
 .quote-meta {
   text-align: right;
 }
 
+.header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.company-details {
+  font-size: 14px;
+}
+
+.quotation-title h1 {
+  margin: 0;
+  font-size: 24px;
+  color: #036;
+  text-align: right;
+}
+
+.quote-meta table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.quote-meta td {
+  border: 1px solid #000;
+  padding: 5px;
+}
+
+.customer-info {
+  border: 1px solid #000;
+  padding: 10px;
+  margin-bottom: 20px;
+}
+
+.items-table-print {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 20px;
+}
+
+.items-table-print th,
+.items-table-print td {
+  border: 1px solid #000;
+  padding: 8px;
+  text-align: left;
+}
+
+.items-table-print thead th {
+  background-color: #e0f2f7;
+}
+
+.footer {
+  margin-top: 20px;
+}
+
+.notes-and-total {
+  display: flex;
+  justify-content: space-between;
+}
+
+.notes {
+  width: 60%;
+  font-size: 12px;
+}
+
+.totals {
+  width: 35%;
+}
+
+.totals td:first-child {
+  text-align: right;
+}
+
+.thank-you {
+  text-align: center;
+  margin-top: 20px;
+  font-weight: bold;
+}
+
+
 @media screen and (width <=768px) {
   #items-table thead {
     display: none;