Spaces:
Running
Running
| <!-- | |
| GST Invoice Template for SBN Mentors Private Limited | |
| Author: Nitin with Grok / Deepseek and Gemini AI | |
| Version: v5 | |
| License: MIT License | |
| Features: | |
| - Dynamic topic selection with amounts | |
| - GST calculation based on selected topic | |
| - Print-ready formatting | |
| Dependencies: None | |
| Usage: | |
| - Open this HTML file in a web browser | |
| - Select the topic and amount from the dropdown | |
| - Fill in the invoice date and number | |
| - Click "Print Invoice" to generate a print-ready invoicent(); | |
| Description: This HTML file is a template for generating GST invoices with dynamic topic selection, GST calculation, and print-ready formatting. | |
| Last Updated: 30June 2025 | |
| --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SBN Mentors - Invoice</title> | |
| <style> | |
| /* General Body and Container Styles */ | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #f4f4f4; | |
| margin: 0; | |
| padding: 20px; | |
| display: flex; | |
| justify-content: center; | |
| font-size: 13px; | |
| } | |
| .container { | |
| background-color: #ffffff; | |
| padding: 25px; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); | |
| width: 100%; | |
| max-width: 850px; | |
| box-sizing: border-box; | |
| } | |
| /* --- Main Invoice Border (for screen view) --- */ | |
| #invoiceContent { | |
| border: 2px solid #000; | |
| padding: 20px; | |
| box-sizing: border-box; | |
| } | |
| /* Header and Title Styles */ | |
| h1, h2, h3, h4 { | |
| margin-top: 0; | |
| margin-bottom: 10px; | |
| color: #333; | |
| } | |
| .company-header, .invoice-header { | |
| text-align: center; | |
| margin-bottom: 15px; | |
| border-bottom: 2px solid #eee; | |
| padding-bottom: 8px; | |
| } | |
| .company-header h2 { | |
| margin: 3px 0; | |
| font-size: 20px; | |
| color: #1e3f66; | |
| } | |
| .company-header p { | |
| margin: 3px 0; | |
| font-size: 12px; | |
| color: #666; | |
| } | |
| .invoice-title { | |
| text-align: center; | |
| font-size: 20px; | |
| font-weight: bold; | |
| color: #000; | |
| margin-bottom: 15px; | |
| padding: 8px; | |
| background-color: #e6e6e6; | |
| border-radius: 5px; | |
| } | |
| /* Invoice Grid Layout */ | |
| .invoice-details-grid, .tax-details-grid, .bank-details-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 15px; | |
| margin-bottom: 20px; | |
| border: 1px solid #ddd; | |
| padding: 12px; | |
| border-radius: 8px; | |
| } | |
| .invoice-details-grid > div, .tax-details-grid > div, .bank-details-grid > div { | |
| padding: 8px; | |
| border: 1px solid #f0f0f0; | |
| border-radius: 5px; | |
| background-color: #fafafa; | |
| } | |
| .grid-item { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 3px; | |
| } | |
| .grid-item strong { | |
| color: #555; | |
| font-size: 13px; | |
| } | |
| .grid-item p { | |
| margin: 0; | |
| font-size: 12px; | |
| color: #333; | |
| } | |
| /* Input Controls and Button Panel */ | |
| .input-panel { | |
| background-color: #f9f9f9; | |
| padding: 15px; | |
| border: 1px solid #e0e0e0; | |
| border-radius: 8px; | |
| margin-bottom: 25px; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 15px; | |
| } | |
| .input-panel label { | |
| display: block; | |
| margin-bottom: 5px; | |
| font-weight: bold; | |
| color: #333; | |
| } | |
| .input-panel input, .input-panel select { | |
| width: 100%; | |
| padding: 8px; | |
| border: 1px solid #ccc; | |
| border-radius: 5px; | |
| box-sizing: border-box; | |
| font-size: 14px; | |
| } | |
| .button-panel { | |
| text-align: center; | |
| margin-top: 25px; | |
| } | |
| .button-panel button { | |
| padding: 10px 20px; | |
| margin: 0 8px; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 15px; | |
| font-weight: bold; | |
| transition: background-color 0.3s ease, transform 0.2s ease; | |
| } | |
| #printBtn { | |
| background-color: #28a745; | |
| color: white; | |
| } | |
| #printBtn:hover { | |
| background-color: #218838; | |
| transform: translateY(-2px); | |
| } | |
| #clearBtn { | |
| background-color: #dc3545; | |
| color: white; | |
| } | |
| #clearBtn:hover { | |
| background-color: #c82333; | |
| transform: translateY(-2px); | |
| } | |
| /* Table Styles for Invoice Items */ | |
| .invoice-table, .tax-summary-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin-top: 15px; | |
| margin-bottom: 15px; | |
| border: 1px solid #000; | |
| } | |
| .invoice-table th, .invoice-table td { | |
| border: 1px solid #000; | |
| padding: 8px; | |
| text-align: left; | |
| font-size: 12px; | |
| } | |
| .invoice-table th { | |
| background-color: #f2f2f2; | |
| font-weight: bold; | |
| color: #333; | |
| } | |
| .invoice-table tfoot td { | |
| font-weight: bold; | |
| background-color: #e9e9e9; | |
| } | |
| /* Reduced Gaps in Tax Summary Table */ | |
| .tax-summary-table th, .tax-summary-table td { | |
| border: 1px solid #000; | |
| padding: 5px; | |
| text-align: left; | |
| font-size: 11px; | |
| } | |
| .tax-summary-table { | |
| margin-top: 10px; | |
| margin-bottom: 10px; | |
| } | |
| /* Flexbox for Signatures and Declaration */ | |
| .declaration-section, .signature-section { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-end; | |
| margin-top: 30px; | |
| } | |
| .declaration-section p, .signature-section p { | |
| margin: 0; | |
| font-size: 11px; | |
| color: #777; | |
| } | |
| .signature-section .left-seal { | |
| flex-grow: 1; | |
| text-align: left; | |
| padding: 8px; | |
| } | |
| .signature-section .right-signature { | |
| text-align: right; | |
| border-top: 1px solid #000; | |
| width: 250px; | |
| padding-top: 5px; | |
| } | |
| /* Amount in Words and totals */ | |
| .amount-in-words-box { | |
| background-color: #eef; | |
| padding: 12px; | |
| margin-top: 15px; | |
| border-radius: 8px; | |
| border: 1px dashed #cdd; | |
| } | |
| .amount-in-words-box p { | |
| margin: 0; | |
| font-weight: bold; | |
| color: #1e3f66; | |
| font-size: 12px; | |
| } | |
| /* Utility Classes */ | |
| .text-right { | |
| text-align: right; | |
| } | |
| .text-center { | |
| text-align: center; | |
| } | |
| .bold { | |
| font-weight: bold; | |
| } | |
| /* Hide elements for printing using a class */ | |
| .no-print { | |
| display: block; | |
| } | |
| /* --- CRITICAL PRINT STYLES FOR SINGLE PAGE --- */ | |
| @media print { | |
| .no-print { | |
| display: none ; | |
| } | |
| @page { | |
| size: A4 portrait; | |
| margin: 0; /* Remove browser margins */ | |
| } | |
| html, body { | |
| width: 210mm; | |
| height: 297mm; | |
| margin: 0; | |
| padding: 0; | |
| font-size: 9pt; | |
| line-height: 1.2; | |
| -webkit-print-color-adjust: exact; | |
| print-color-adjust: exact; | |
| } | |
| .container { | |
| width: 100%; | |
| max-width: 100%; | |
| margin: 0; | |
| padding: 10mm; /* Add padding to create a margin inside the page border */ | |
| border: 1px solid #000; /* Add a border around the entire page */ | |
| box-shadow: none; | |
| border-radius: 0; | |
| box-sizing: border-box; | |
| height: 100%; | |
| } | |
| #invoiceContent { | |
| border: none; | |
| padding: 0; | |
| } | |
| /* Make sure table rows don't break across pages */ | |
| tr, td, th { | |
| page-break-inside: avoid ; | |
| } | |
| /* Tighten up all margins and paddings in print mode */ | |
| h2, h3, h4 { | |
| margin: 2px 0; | |
| padding: 0; | |
| } | |
| p { | |
| margin: 1px 0; | |
| } | |
| .company-header { | |
| margin-bottom: 10px; | |
| padding-bottom: 5px; | |
| } | |
| .invoice-details-grid, .tax-details-grid, .bank-details-grid { | |
| gap: 10px; | |
| margin-bottom: 10px; | |
| padding: 8px; | |
| } | |
| .invoice-table, .tax-summary-table { | |
| margin-top: 10px; | |
| margin-bottom: 10px; | |
| } | |
| .invoice-table th, .invoice-table td, | |
| .tax-summary-table th, .tax-summary-table td { | |
| padding: 4px; | |
| } | |
| .amount-in-words-box { | |
| margin-top: 10px; | |
| padding: 8px; | |
| } | |
| .signature-section { | |
| margin-top: 20px; | |
| } | |
| .signature-section .right-signature { | |
| margin-top: 25px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="input-panel no-print"> | |
| <div> | |
| <label for="invoiceDate">Date:</label> | |
| <input type="date" id="invoiceDate" required> | |
| </div> | |
| <div> | |
| <label for="invoiceNumber">Invoice Number:</label> | |
| <select id="invoiceNumber" required> | |
| <option value="" disabled selected>Select Invoice Number</option> | |
| <option value="001">001</option> | |
| <option value="002">002</option> | |
| <option value="003">003</option> | |
| <option value="004">004</option> | |
| <option value="005">005</option> | |
| <option value="006">006</option> | |
| <option value="007">007</option> | |
| <option value="008">008</option> | |
| <option value="009">009</option> | |
| <option value="010">010</option> | |
| <option value="011">011</option> | |
| <option value="012">012</option> | |
| <option value="013">013</option> | |
| <option value="014">014</option> | |
| <option value="015">015</option> | |
| <option value="016">016</option> | |
| <option value="017">017</option> | |
| <option value="018">018</option> | |
| <option value="019">019</option> | |
| <option value="020">020</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="courseTopicSelect">Topic & Amount:</label> | |
| <select id="courseTopicSelect" required> | |
| <option value="" disabled selected>Select a topic</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div id="invoiceContent"> | |
| <div class="company-header"> | |
| <h2>SBN Mentors Private Limited</h2> | |
| <p>Registered Office: D-6 41/42 Chittranjan Nagar, Chintamani CHS, Rajawadi, Vidyavihar East, Mumbai – 400077</p> | |
| <p class="bold">CIN: U70200MH2024PTC420264 | Email: geetikanand@gmail.com</p> | |
| <hr> | |
| <h3 class="invoice-title">TAX INVOICE</h3> | |
| <p>Sec.23 of Rule 1(1)</p> | |
| </div> | |
| <div class="invoice-details-grid"> | |
| <div class="left-col"> | |
| <h4 style="margin-bottom: 5px;">SBN Mentors Private Limited</h4> | |
| <p>Address: D-41/42, Chittranjan Nagar,</p> | |
| <p>Address: CHS, Rajawadi, Vidyavihar East</p> | |
| <p style="margin-bottom: 10px;">Mumbai, 400077</p> | |
| <p><strong>GSTIN:</strong> 27ABMCS8731Q1ZB</p> | |
| <p><strong>CIN:</strong> U70200MH2024PTC420264</p> | |
| <p style="margin-bottom: 10px;"><strong>PAN:</strong> ABCMS8731Q</p> | |
| <p><strong>Mode/Terms of Payment:</strong> Chq/Neft,RTGS</p> | |
| <p><strong>Contact:</strong> +919594493624</p> | |
| <p><strong>E-Mail:</strong> geetikanand@gmail.com</p> | |
| </div> | |
| <div class="right-col"> | |
| <div class="grid-item" style="margin-bottom: 10px;"> | |
| <p><strong>Invoice No.:</strong> <span id="displayInvoiceNo">INV_NUMBER</span></p> | |
| <p><strong>Dated:</strong> <span id="displayInvoiceDate">INV_DATE</span></p> | |
| </div> | |
| <h4 style="margin-bottom: 5px;">Buyer: Great Learning Education Services Private Limited</h4> | |
| <p>Address: 2nd Floor, Orchid Centre, Golf Course Road</p> | |
| <p>Address: Sector 53, Gurgaon</p> | |
| <p>PIN: 122002</p> | |
| <p>State: Haryana</p> | |
| <p style="margin-bottom: 10px;">PAN: AAECB3694E</p> | |
| <p><strong>GSTIN:</strong> 06AAECB3694E1ZR</p> | |
| <p><strong>Place of Supply:</strong> Mumbai</p> | |
| </div> | |
| </div> | |
| <table class="invoice-table"> | |
| <thead> | |
| <tr> | |
| <th style="width: 5%;">Sl No.</th> | |
| <th>Particulars: Description of Services</th> | |
| <th style="width: 15%;">HSN/SAC</th> | |
| <th style="width: 10%;">GST Rate</th> | |
| <th class="text-right" style="width: 15%;">Amount</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td class="text-center">1</td> | |
| <td><span id="displayTopic">INV_TOPIC</span></td> | |
| <td class="text-center">999259</td> | |
| <td class="text-center">18 %</td> | |
| <td class="text-right"><span id="displayBaseAmount">0.00</span></td> | |
| </tr> | |
| </tbody> | |
| <tfoot> | |
| <tr> | |
| <td colspan="4" class="text-right bold">Sub Total</td> | |
| <td class="text-right bold"><span id="subTotal">0.00</span></td> | |
| </tr> | |
| <tr> | |
| <td colspan="4" class="text-right bold">CGST</td> | |
| <td class="text-right bold"><span id="cgstAmount">0.00</span></td> | |
| </tr> | |
| <tr> | |
| <td colspan="4" class="text-right bold">SGST</td> | |
| <td class="text-right bold"><span id="sgstAmount">0.00</span></td> | |
| </tr> | |
| <tr> | |
| <td colspan="4" class="text-right bold">IGST</td> | |
| <td class="text-right bold"><span id="igstAmount">0.00</span></td> | |
| </tr> | |
| <tr> | |
| <td colspan="4" class="text-right bold">Total</td> | |
| <td class="text-right bold">₹ <span id="totalAmount">0.00</span></td> | |
| </tr> | |
| <tr> | |
| <td colspan="5" style="text-align: right; font-style: italic;">E. & O.E</td> | |
| </tr> | |
| </tfoot> | |
| </table> | |
| <div class="amount-in-words-box"> | |
| <p><strong>Amount Chargeable (in words):</strong> <span id="amountInWords">Zero Rupees Only</span></p> | |
| </div> | |
| <table class="tax-summary-table"> | |
| <thead> | |
| <tr> | |
| <th>HSN/SAC</th> | |
| <th>Taxable Value</th> | |
| <th colspan="2" class="text-center">Central Tax</th> | |
| <th colspan="2" class="text-center">State Tax</th> | |
| <th colspan="2" class="text-center">Interstate Tax</th> | |
| </tr> | |
| <tr> | |
| <th></th> | |
| <th></th> | |
| <th class="text-center">Rate</th> | |
| <th class="text-center">Amount</th> | |
| <th class="text-center">Rate</th> | |
| <th class="text-center">Amount</th> | |
| <th class="text-center">Rate</th> | |
| <th class="text-center">Amount</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td class="text-center">999259</td> | |
| <td class="text-right"><span id="taxableValue">0.00</span></td> | |
| <td class="text-center">9%</td> | |
| <td class="text-right"><span id="centralTax">0.00</span></td> | |
| <td class="text-center">9%</td> | |
| <td class="text-right"><span id="stateTax">0.00</span></td> | |
| <td class="text-center">18%</td> | |
| <td class="text-right"><span id="interstateTax">0.00</span></td> | |
| </tr> | |
| </tbody> | |
| <tfoot> | |
| <tr> | |
| <td class="bold">Total</td> | |
| <td class="text-right bold"><span id="totalTaxableValue">0.00</span></td> | |
| <td class="text-center bold"></td> | |
| <td class="text-right bold"><span id="totalCentralTax">0.00</span></td> | |
| <td class="text-center bold"></td> | |
| <td class="text-right bold"><span id="totalStateTax">0.00</span></td> | |
| <td class="text-center bold">18%</td> | |
| <td class="text-right bold"><span id="totalInterstateTax">0.00</span></td> | |
| </tr> | |
| </tfoot> | |
| </table> | |
| <div class="amount-in-words-box"> | |
| <p><strong>Tax Amount (in words):</strong> <span id="taxAmountInWords">Zero Rupees Only</span></p> | |
| </div> | |
| <div class="bank-details-grid"> | |
| <div> | |
| <p class="bold">Company's Bank Details</p> | |
| <hr> | |
| <p><strong>Bank Name:</strong> HDFC</p> | |
| <p><strong>Account No.:</strong> 50200109680941</p> | |
| <p><strong>Branch & IFS Code:</strong> Kanjur West, HDFC0004272</p> | |
| </div> | |
| <div> | |
| <p class="bold">Declaration</p> | |
| <hr> | |
| <p>We declare that this invoice shows the actual price of the goods described and that all particulars are true and correct.</p> | |
| </div> | |
| </div> | |
| <div class="signature-section"> | |
| <div class="left-seal"> | |
| <p>Customer's Seal and Signature</p> | |
| </div> | |
| <div class="right-signature"> | |
| <p>For SBN Mentors Private Limited</p> | |
| <p style="margin-top: 40px; font-weight: bold;">Authorised Signatory</p> | |
| </div> | |
| </div> | |
| <div style="text-align: center; margin-top: 10px;"> | |
| <br> | |
| <p style="font-style: italic; font-size: 12px; color: #888;">This is a Computer Generated Invoice, Signature not required</p> | |
| </div> | |
| </div> | |
| <div class="button-panel no-print"> | |
| <button id="printBtn">Print Invoice</button> | |
| <button id="clearBtn">Clear</button> | |
| </div> | |
| </div> | |
| <script src="./data_for_great_learning.js"></script> | |
| <script src="./utils.js"></script> | |
| <script src="./invoice.js"></script> | |
| </body> | |
| </html> |