GST Tax Invoice Generator<\/title>\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/qrcodejs\/1.0.0\/qrcode.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n\n<style>\n\n*{\n box-sizing:border-box;\n margin:0;\n padding:0;\n}\n\nbody{\n font-family:\"Inter\",Arial,sans-serif;\n background:#eef2f7;\n color:#172033;\n}\n\nbutton,\ninput,\nselect,\ntextarea{\n font-family:inherit;\n}\n\n\/* =========================\n APP HEADER\n========================= *\/\n\n.topbar{\n background:linear-gradient(135deg,#0f172a,#172554,#1d4ed8);\n color:#fff;\n padding:24px 20px;\n text-align:center;\n}\n\n.topbar h1{\n font-family:\"Poppins\",sans-serif;\n font-size:30px;\n font-weight:800;\n}\n\n.topbar p{\n margin-top:5px;\n color:#dbeafe;\n}\n\n\/* =========================\n LAYOUT\n========================= *\/\n\n.wrapper{\n max-width:1400px;\n margin:30px auto;\n padding:0 16px;\n}\n\n.grid{\n display:grid;\n grid-template-columns:390px 1fr;\n gap:25px;\n align-items:start;\n}\n\n\/* =========================\n CONTROL PANEL\n========================= *\/\n\n.panel{\n background:#fff;\n border-radius:18px;\n padding:22px;\n box-shadow:0 8px 30px rgba(15,23,42,.10);\n}\n\n.panel h2{\n font-family:\"Poppins\",sans-serif;\n font-size:20px;\n margin-bottom:18px;\n color:#172554;\n}\n\n.section{\n border:1px solid #e2e8f0;\n border-radius:13px;\n padding:16px;\n margin-bottom:15px;\n}\n\n.section-title{\n font-size:14px;\n font-weight:800;\n color:#1d4ed8;\n margin-bottom:13px;\n text-transform:uppercase;\n letter-spacing:.4px;\n}\n\n.field{\n margin-bottom:11px;\n}\n\n.field label{\n display:block;\n font-size:12px;\n font-weight:700;\n color:#475569;\n margin-bottom:5px;\n}\n\n.field input,\n.field select,\n.field textarea{\n width:100%;\n border:1px solid #cbd5e1;\n border-radius:8px;\n padding:10px 11px;\n outline:none;\n font-size:13px;\n background:#fff;\n color:#172033;\n}\n\n.field input:focus,\n.field select:focus,\n.field textarea:focus{\n border-color:#2563eb;\n box-shadow:0 0 0 3px rgba(37,99,235,.10);\n}\n\n.field textarea{\n min-height:70px;\n resize:vertical;\n}\n\n.two{\n display:grid;\n grid-template-columns:1fr 1fr;\n gap:9px;\n}\n\n.upload{\n border:2px dashed #93c5fd;\n background:#eff6ff;\n padding:13px;\n text-align:center;\n border-radius:10px;\n}\n\n.upload label{\n display:block;\n cursor:pointer;\n color:#1d4ed8;\n font-size:13px;\n font-weight:800;\n}\n\n.upload input{\n display:none;\n}\n\n.preview-img{\n max-width:120px;\n max-height:70px;\n margin:10px auto 0;\n display:none;\n object-fit:contain;\n}\n\n\/* =========================\n BUTTONS\n========================= *\/\n\n.btn{\n border:0;\n border-radius:9px;\n padding:11px 14px;\n cursor:pointer;\n font-size:13px;\n font-weight:800;\n transition:.2s;\n}\n\n.btn:hover{\n transform:translateY(-1px);\n}\n\n.btn-primary{\n background:#2563eb;\n color:#fff;\n}\n\n.btn-green{\n background:#059669;\n color:#fff;\n}\n\n.btn-red{\n background:#dc2626;\n color:#fff;\n}\n\n.btn-dark{\n background:#172033;\n color:#fff;\n}\n\n.btn-light{\n background:#e2e8f0;\n color:#172033;\n}\n\n.action-row{\n display:flex;\n flex-wrap:wrap;\n gap:9px;\n margin-top:15px;\n}\n\n\/* =========================\n PRODUCT INPUT\n========================= *\/\n\n.product-row{\n border:1px solid #dbeafe;\n background:#f8fbff;\n border-radius:10px;\n padding:12px;\n margin-bottom:10px;\n}\n\n.product-grid{\n display:grid;\n grid-template-columns:1.7fr .8fr .7fr .8fr;\n gap:7px;\n}\n\n.product-grid input,\n.product-grid select{\n width:100%;\n padding:8px;\n border:1px solid #cbd5e1;\n border-radius:7px;\n font-size:12px;\n}\n\n.product-total{\n margin-top:7px;\n font-size:12px;\n font-weight:800;\n color:#1d4ed8;\n}\n\n\/* =========================\n INVOICE AREA\n========================= *\/\n\n.invoice-area{\n overflow:auto;\n}\n\n.invoice{\n width:794px;\n min-height:1123px;\n margin:auto;\n background:#fff;\n box-shadow:0 8px 35px rgba(15,23,42,.12);\n padding:35px;\n color:#111827;\n}\n\n\/* INVOICE HEADER *\/\n\n.invoice-head{\n display:flex;\n justify-content:space-between;\n gap:20px;\n border-bottom:3px solid #1d4ed8;\n padding-bottom:18px;\n}\n\n.seller{\n flex:1;\n}\n\n.logo{\n width:100px;\n max-height:70px;\n object-fit:contain;\n display:none;\n margin-bottom:8px;\n}\n\n.seller-name{\n font-family:\"Poppins\",sans-serif;\n font-size:25px;\n font-weight:800;\n color:#172554;\n}\n\n.seller-details{\n margin-top:5px;\n font-size:11px;\n color:#475569;\n white-space:pre-line;\n}\n\n.invoice-title{\n text-align:right;\n}\n\n.invoice-title h2{\n font-family:\"Poppins\",sans-serif;\n font-size:29px;\n color:#1d4ed8;\n letter-spacing:.5px;\n}\n\n.invoice-title p{\n font-size:11px;\n margin-top:4px;\n}\n\n\/* CUSTOMER *\/\n\n.customer-grid{\n display:grid;\n grid-template-columns:1fr 1fr;\n gap:15px;\n margin:22px 0;\n}\n\n.customer-box{\n border:1px solid #dbe3ef;\n border-radius:8px;\n padding:13px;\n}\n\n.customer-box h3{\n background:#eff6ff;\n color:#1d4ed8;\n font-size:11px;\n padding:6px 8px;\n border-radius:5px;\n margin-bottom:8px;\n text-transform:uppercase;\n}\n\n.customer-content{\n font-size:11px;\n white-space:pre-line;\n color:#374151;\n}\n\n\/* TABLE *\/\n\n.invoice-table{\n width:100%;\n border-collapse:collapse;\n margin-top:10px;\n}\n\n.invoice-table th{\n background:#172554;\n color:#fff;\n font-size:10px;\n padding:9px 5px;\n text-align:center;\n}\n\n.invoice-table td{\n border:1px solid #dbe3ef;\n padding:8px 5px;\n font-size:10px;\n text-align:center;\n}\n\n.invoice-table td:nth-child(2){\n text-align:left;\n}\n\n.invoice-table tr:nth-child(even){\n background:#f8fafc;\n}\n\n\/* SUMMARY *\/\n\n.summary-area{\n display:grid;\n grid-template-columns:1fr 270px;\n gap:20px;\n margin-top:20px;\n}\n\n.bank-box{\n border:1px solid #dbe3ef;\n border-radius:9px;\n padding:13px;\n}\n\n.bank-box h3{\n color:#047857;\n font-size:12px;\n margin-bottom:8px;\n}\n\n.bank-info{\n font-size:10px;\n line-height:1.7;\n white-space:pre-line;\n}\n\n.qr-wrap{\n text-align:center;\n margin-top:12px;\n}\n\n#qrcode{\n display:inline-block;\n}\n\n.totals{\n border:1px solid #dbe3ef;\n border-radius:9px;\n overflow:hidden;\n}\n\n.total-line{\n display:flex;\n justify-content:space-between;\n padding:8px 11px;\n font-size:11px;\n border-bottom:1px solid #e5e7eb;\n}\n\n.grand{\n background:#1d4ed8;\n color:#fff;\n font-size:14px;\n font-weight:800;\n}\n\n\/* SIGNATURE *\/\n\n.bottom{\n display:flex;\n justify-content:space-between;\n gap:20px;\n margin-top:35px;\n}\n\n.words{\n font-size:11px;\n color:#374151;\n flex:1;\n}\n\n.signature{\n width:170px;\n text-align:center;\n}\n\n.signature img{\n max-width:150px;\n max-height:65px;\n display:none;\n margin:auto;\n}\n\n.signature-line{\n border-top:1px solid #334155;\n margin-top:12px;\n padding-top:5px;\n font-size:10px;\n}\n\n\/* FOOT *\/\n\n.invoice-footer{\n margin-top:30px;\n padding-top:12px;\n border-top:1px solid #dbe3ef;\n text-align:center;\n font-size:9px;\n color:#64748b;\n}\n\n\/* STATUS *\/\n\n.status{\n display:inline-block;\n padding:5px 10px;\n border-radius:20px;\n font-size:10px;\n font-weight:800;\n margin-top:8px;\n}\n\n.paid{\n background:#dcfce7;\n color:#166534;\n}\n\n.unpaid{\n background:#fee2e2;\n color:#991b1b;\n}\n\n\/* =========================\n PRINT\n========================= *\/\n\n@media print{\n\n body{\n background:#fff;\n }\n\n .topbar,\n .panel{\n display:none !important;\n }\n\n .wrapper{\n margin:0;\n padding:0;\n }\n\n .grid{\n display:block;\n }\n\n .invoice-area{\n overflow:visible;\n }\n\n .invoice{\n width:794px;\n min-height:1123px;\n box-shadow:none;\n margin:0;\n }\n\n @page{\n size:A4;\n margin:0;\n }\n}\n\n\/* =========================\n RESPONSIVE\n========================= *\/\n\n@media(max-width:1000px){\n\n .grid{\n grid-template-columns:1fr;\n }\n\n .invoice-area{\n padding-bottom:30px;\n }\n\n}\n\n@media(max-width:820px){\n\n .invoice{\n transform-origin:top left;\n }\n\n .invoice-area{\n overflow-x:auto;\n }\n\n}\n\n@media(max-width:600px){\n\n .topbar h1{\n font-size:24px;\n }\n\n .two{\n grid-template-columns:1fr;\n }\n\n .product-grid{\n grid-template-columns:1fr 1fr;\n }\n\n .customer-grid,\n .summary-area{\n grid-template-columns:1fr;\n }\n\n}\n\n<\/style>\n<\/head>\n\n<body>\n\n<header class=\"topbar\">\n <h1>GST Tax Invoice Generator<\/h1>\n <p>Create professional GST invoices quickly<\/p>\n<\/header>\n\n\n<div class=\"wrapper\">\n\n<div class=\"grid\">\n\n\n\n<div class=\"panel\">\n\n<h2>Invoice Settings<\/h2>\n\n\n\n<div class=\"section\">\n\n<div class=\"section-title\">Seller Details<\/div>\n\n<div class=\"field\">\n<label>Business \/ Seller Name<\/label>\n<input id=\"sellerName\" value=\"Your Business Name\">\n<\/div>\n\n<div class=\"field\">\n<label>Address<\/label>\n<textarea id=\"sellerAddress\">Your Business Address<\/textarea>\n<\/div>\n\n<div class=\"two\">\n\n<div class=\"field\">\n<label>GSTIN<\/label>\n<input id=\"sellerGSTIN\" placeholder=\"22AAAAA0000A1Z5\">\n<\/div>\n\n<div class=\"field\">\n<label>Phone<\/label>\n<input id=\"sellerPhone\" placeholder=\"9876543210\">\n<\/div>\n\n<\/div>\n\n<div class=\"field\">\n<label>Email<\/label>\n<input id=\"sellerEmail\" placeholder=\"business@example.com\">\n<\/div>\n\n<div class=\"upload\">\n\n<label for=\"logoUpload\">\n\ud83d\udcf7 Upload Seller Logo\n<\/label>\n\n<input type=\"file\" id=\"logoUpload\" accept=\"image\/*\">\n\n<img id=\"logoPreview\" class=\"preview-img\">\n\n<\/div>\n\n<\/div>\n\n\n\n\n<div class=\"section\">\n\n<div class=\"section-title\">Invoice Details<\/div>\n\n<div class=\"two\">\n\n<div class=\"field\">\n<label>Invoice Number<\/label>\n<input id=\"invoiceNo\" value=\"INV-001\">\n<\/div>\n\n<div class=\"field\">\n<label>Invoice Date<\/label>\n<input type=\"date\" id=\"invoiceDate\">\n<\/div>\n\n<\/div>\n\n<div class=\"two\">\n\n<div class=\"field\">\n<label>Place of Supply<\/label>\n<input id=\"placeSupply\" placeholder=\"Uttar Pradesh\">\n<\/div>\n\n<div class=\"field\">\n<label>Payment Status<\/label>\n\n<select id=\"paymentStatus\">\n<option value=\"Paid\">Paid<\/option>\n<option value=\"Unpaid\">Unpaid<\/option>\n<\/select>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n\n<div class=\"section\">\n\n<div class=\"section-title\">Buyer Details<\/div>\n\n<div class=\"field\">\n<label>Buyer \/ Customer Name<\/label>\n<input id=\"buyerName\" placeholder=\"Customer Name\">\n<\/div>\n\n<div class=\"field\">\n<label>Buyer Address<\/label>\n<textarea id=\"buyerAddress\" placeholder=\"Customer Address\"><\/textarea>\n<\/div>\n\n<div class=\"two\">\n\n<div class=\"field\">\n<label>Buyer GSTIN<\/label>\n<input id=\"buyerGSTIN\" placeholder=\"Optional\">\n<\/div>\n\n<div class=\"field\">\n<label>Buyer Phone<\/label>\n<input id=\"buyerPhone\" placeholder=\"Optional\">\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n\n<div class=\"section\">\n\n<div class=\"section-title\">Products \/ Services<\/div>\n\n<div id=\"products\"><\/div>\n\n<button class=\"btn btn-primary\" onclick=\"addProduct()\">\n+ Add Product \/ Service\n<\/button>\n\n<\/div>\n\n\n\n\n<div class=\"section\">\n\n<div class=\"section-title\">Tax Settings<\/div>\n\n<div class=\"two\">\n\n<div class=\"field\">\n<label>GST Rate<\/label>\n\n<select id=\"gstRate\">\n<option value=\"0\">0%<\/option>\n<option value=\"5\">5%<\/option>\n<option value=\"12\">12%<\/option>\n<option value=\"18\" selected>18%<\/option>\n<option value=\"28\">28%<\/option>\n<\/select>\n\n<\/div>\n\n<div class=\"field\">\n<label>Tax Type<\/label>\n\n<select id=\"taxType\">\n<option value=\"CGST_SGST\">CGST + SGST<\/option>\n<option value=\"IGST\">IGST<\/option>\n<\/select>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n\n<div class=\"section\">\n\n<div class=\"section-title\">Bank & UPI Details<\/div>\n\n<div class=\"field\">\n<label>Bank Name<\/label>\n<input id=\"bankName\" placeholder=\"Bank Name\">\n<\/div>\n\n<div class=\"two\">\n\n<div class=\"field\">\n<label>Account Number<\/label>\n<input id=\"accountNo\" placeholder=\"XXXXXXXXXXXX\">\n<\/div>\n\n<div class=\"field\">\n<label>IFSC Code<\/label>\n<input id=\"ifsc\" placeholder=\"SBIN0000000\">\n<\/div>\n\n<\/div>\n\n<div class=\"field\">\n<label>UPI ID<\/label>\n<input id=\"upi\" placeholder=\"yourname@upi\">\n<\/div>\n\n<\/div>\n\n\n\n\n<div class=\"section\">\n\n<div class=\"section-title\">Seller Signature<\/div>\n\n<div class=\"upload\">\n\n<label for=\"signatureUpload\">\n\u270d\ufe0f Upload Signature\n<\/label>\n\n<input type=\"file\" id=\"signatureUpload\" accept=\"image\/*\">\n\n<img id=\"signaturePreview\" class=\"preview-img\">\n\n<\/div>\n\n<\/div>\n\n\n\n\n<div class=\"action-row\">\n\n<button class=\"btn btn-green\" onclick=\"window.print()\">\n\ud83d\udda8 Print \/ Save PDF\n<\/button>\n\n<button class=\"btn btn-primary\" onclick=\"downloadJPG()\">\n\ud83d\uddbc Download JPG\n<\/button>\n\n<button class=\"btn btn-dark\" onclick=\"shareWhatsApp()\">\n\ud83d\udcac WhatsApp\n<\/button>\n\n<button class=\"btn btn-light\" onclick=\"resetInvoice()\">\n\u21bb Reset\n<\/button>\n\n<\/div>\n\n<\/div>\n\n\n\n\n<div class=\"invoice-area\">\n\n<div class=\"invoice\" id=\"invoice\">\n\n<div class=\"invoice-head\">\n\n<div class=\"seller\">\n\n<img id=\"invoiceLogo\" class=\"logo\">\n\n<div class=\"seller-name\" id=\"outSellerName\">\nYour Business Name\n<\/div>\n\n<div class=\"seller-details\" id=\"outSellerDetails\">\nYour Business Address\n<\/div>\n\n<\/div>\n\n<div class=\"invoice-title\">\n\n<h2>TAX INVOICE<\/h2>\n\n<p>\nInvoice No: <strong id=\"outInvoiceNo\">INV-001<\/strong>\n<\/p>\n\n<p>\nDate: <strong id=\"outDate\">—<\/strong>\n<\/p>\n\n<div id=\"outStatus\" class=\"status paid\">\nPAID\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n\n<div class=\"customer-grid\">\n\n<div class=\"customer-box\">\n\n<h3>Bill From<\/h3>\n\n<div class=\"customer-content\" id=\"outFrom\">\n<\/div>\n\n<\/div>\n\n\n<div class=\"customer-box\">\n\n<h3>Bill To<\/h3>\n\n<div class=\"customer-content\" id=\"outBuyer\">\nCustomer information\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n<table class=\"invoice-table\">\n\n<thead>\n\n<tr>\n<th>#<\/th>\n<th>Product \/ Service<\/th>\n<th>HSN\/SAC<\/th>\n<th>Qty<\/th>\n<th>Rate<\/th>\n<th>GST<\/th>\n<th>Amount<\/th>\n<\/tr>\n\n<\/thead>\n\n<tbody id=\"invoiceProducts\">\n<\/tbody>\n\n<\/table>\n\n\n\n\n<div class=\"summary-area\">\n\n<div class=\"bank-box\">\n\n<h3>Bank \/ Payment Details<\/h3>\n\n<div class=\"bank-info\" id=\"outBank\">\nBank details\n<\/div>\n\n<div class=\"qr-wrap\">\n\n<div id=\"qrcode\"><\/div>\n\n<div style=\"font-size:9px;margin-top:5px;\">\nScan to Pay via UPI\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"totals\">\n\n<div class=\"total-line\">\n<span>Subtotal<\/span>\n<strong id=\"subtotal\">\u20b90.00<\/strong>\n<\/div>\n\n<div class=\"total-line\" id=\"cgstLine\">\n<span>CGST<\/span>\n<strong id=\"cgst\">\u20b90.00<\/strong>\n<\/div>\n\n<div class=\"total-line\" id=\"sgstLine\">\n<span>SGST<\/span>\n<strong id=\"sgst\">\u20b90.00<\/strong>\n<\/div>\n\n<div class=\"total-line\" id=\"igstLine\" style=\"display:none;\">\n<span>IGST<\/span>\n<strong id=\"igst\">\u20b90.00<\/strong>\n<\/div>\n\n<div class=\"total-line grand\">\n<span>Grand Total<\/span>\n<strong id=\"grandTotal\">\u20b90.00<\/strong>\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n\n<div class=\"bottom\">\n\n<div class=\"words\">\n\n<strong>Amount in Words:<\/strong>\n\n<div id=\"amountWords\">\nRupees Zero Only\n<\/div>\n\n<\/div>\n\n\n<div class=\"signature\">\n\n<img id=\"invoiceSignature\">\n\n<div class=\"signature-line\">\nAuthorized Signatory\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"invoice-footer\">\n\nThank you for your business!\n\n<br>\n\nThis is a computer generated invoice.\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n<script>\n\n\/* =========================================\n INITIAL DATE\n========================================= *\/\n\ndocument.getElementById(\"invoiceDate\").value =\nnew Date().toISOString().split(\"T\")[0];\n\n\n\/* =========================================\n HSN \/ SAC DATABASE\n Common examples only\n========================================= *\/\n\nconst hsnDatabase = {\n\n\"rice\":\"1006\",\n\"wheat\":\"1001\",\n\"flour\":\"1101\",\n\"atta\":\"1101\",\n\"maida\":\"1101\",\n\"suji\":\"1103\",\n\n\"milk\":\"0401\",\n\"butter\":\"0405\",\n\"cheese\":\"0406\",\n\n\"bread\":\"1905\",\n\"biscuits\":\"1905\",\n\"biscuit\":\"1905\",\n\"cake\":\"1905\",\n\n\"shoes\":\"6404\",\n\"footwear\":\"6404\",\n\"slippers\":\"6402\",\n\n\"shirt\":\"6205\",\n\"shirts\":\"6205\",\n\"t shirt\":\"6109\",\n\"t-shirt\":\"6109\",\n\"trouser\":\"6203\",\n\n\"soap\":\"3401\",\n\"shampoo\":\"3305\",\n\"cosmetics\":\"3304\",\n\n\"paper\":\"4802\",\n\"paper plate\":\"4823\",\n\"notebook\":\"4820\",\n\n\"computer\":\"8471\",\n\"laptop\":\"8471\",\n\"keyboard\":\"8471\",\n\"mouse\":\"8471\",\n\n\"mobile\":\"8517\",\n\"mobile phone\":\"8517\",\n\n\"printer\":\"8443\",\n\n\"chair\":\"9401\",\n\"table\":\"9403\",\n\"furniture\":\"9403\",\n\n\"cement\":\"2523\",\n\"steel\":\"7214\",\n\"iron\":\"7214\",\n\n\"brick\":\"6904\",\n\n\"pen\":\"9608\",\n\"pencil\":\"9609\"\n\n};\n\n\n\/* =========================================\n FIND HSN\n========================================= *\/\n\nfunction findHSN(name){\n\n name = name.toLowerCase().trim();\n\n for(let key in hsnDatabase){\n\n if(name.includes(key)){\n return hsnDatabase[key];\n }\n\n }\n\n return \"\";\n}\n\n\n\/* =========================================\n ADD PRODUCT\n========================================= *\/\n\nlet productCount = 0;\n\nfunction addProduct(){\n\n productCount++;\n\n const div = document.createElement(\"div\");\n\n div.className = \"product-row\";\n\n div.innerHTML = `\n\n <div class=\"product-grid\">\n\n <input\n class=\"p-name\"\n placeholder=\"Product \/ Service\"\n oninput=\"autoHSN(this)\"\n >\n\n <input\n class=\"p-hsn\"\n placeholder=\"Auto HSN\"\n >\n\n <input\n class=\"p-qty\"\n type=\"number\"\n value=\"1\"\n min=\"0\"\n oninput=\"updateInvoice()\"\n >\n\n <input\n class=\"p-rate\"\n type=\"number\"\n value=\"0\"\n min=\"0\"\n oninput=\"updateInvoice()\"\n >\n\n <\/div>\n\n <div class=\"product-total\">\n Amount: \u20b9<span class=\"p-total\">0.00<\/span>\n <button\n class=\"btn btn-red\"\n style=\"float:right;padding:5px 8px;font-size:10px\"\n onclick=\"this.closest('.product-row').remove();updateInvoice();\"\n >\n Remove\n <\/button>\n <\/div>\n `;\n\n document.getElementById(\"products\").appendChild(div);\n\n updateInvoice();\n}\n\n\n\/* =========================================\n AUTO HSN\n========================================= *\/\n\nfunction autoHSN(input){\n\n const row = input.closest(\".product-row\");\n\n const hsn = row.querySelector(\".p-hsn\");\n\n if(!hsn.value){\n hsn.value = findHSN(input.value);\n }\n\n updateInvoice();\n}\n\n\n\/* =========================================\n RUPEES FORMAT\n========================================= *\/\n\nfunction money(num){\n\n return \"\u20b9\" + Number(num).toLocaleString(\"en-IN\",{\n minimumFractionDigits:2,\n maximumFractionDigits:2\n });\n\n}\n\n\n\/* =========================================\n NUMBER TO WORDS\n========================================= *\/\n\nfunction numberToWords(num){\n\n num = Math.floor(num);\n\n if(num === 0)\n return \"Rupees Zero Only\";\n\n const ones = [\n \"\",\"One\",\"Two\",\"Three\",\"Four\",\"Five\",\"Six\",\"Seven\",\n \"Eight\",\"Nine\",\"Ten\",\"Eleven\",\"Twelve\",\"Thirteen\",\n \"Fourteen\",\"Fifteen\",\"Sixteen\",\"Seventeen\",\"Eighteen\",\n \"Nineteen\"\n ];\n\n const tens = [\n \"\",\"\",\"Twenty\",\"Thirty\",\"Forty\",\"Fifty\",\"Sixty\",\n \"Seventy\",\"Eighty\",\"Ninety\"\n ];\n\n function two(n){\n\n if(n < 20)\n return ones[n];\n\n return tens[Math.floor(n\/10)] +\n (n%10 ? \" \" + ones[n%10] : \"\");\n\n }\n\n function convert(n){\n\n if(n < 100)\n return two(n);\n\n if(n < 1000)\n return ones[Math.floor(n\/100)] +\n \" Hundred \" + (n%100 ? two(n%100) : \"\");\n\n if(n < 100000)\n return convert(Math.floor(n\/1000)) +\n \" Thousand \" + (n%1000 ? convert(n%1000) : \"\");\n\n if(n < 10000000)\n return convert(Math.floor(n\/100000)) +\n \" Lakh \" + (n%100000 ? convert(n%100000) : \"\");\n\n return convert(Math.floor(n\/10000000)) +\n \" Crore \" + (n%10000000 ? convert(n%10000000) : \"\");\n\n }\n\n return \"Rupees \" + convert(num).trim() + \" Only\";\n\n}\n\n\n\/* =========================================\n UPDATE INVOICE\n========================================= *\/\n\nfunction updateInvoice(){\n\n const sellerName =\n document.getElementById(\"sellerName\").value;\n\n const sellerAddress =\n document.getElementById(\"sellerAddress\").value;\n\n const gstin =\n document.getElementById(\"sellerGSTIN\").value;\n\n const phone =\n document.getElementById(\"sellerPhone\").value;\n\n const email =\n document.getElementById(\"sellerEmail\").value;\n\n const invoiceNo =\n document.getElementById(\"invoiceNo\").value;\n\n const date =\n document.getElementById(\"invoiceDate\").value;\n\n const buyerName =\n document.getElementById(\"buyerName\").value;\n\n const buyerAddress =\n document.getElementById(\"buyerAddress\").value;\n\n const buyerGSTIN =\n document.getElementById(\"buyerGSTIN\").value;\n\n const buyerPhone =\n document.getElementById(\"buyerPhone\").value;\n\n const place =\n document.getElementById(\"placeSupply\").value;\n\n const status =\n document.getElementById(\"paymentStatus\").value;\n\n document.getElementById(\"outSellerName\").textContent =\n sellerName || \"Your Business Name\";\n\n document.getElementById(\"outSellerDetails\").textContent =\n sellerAddress;\n\n document.getElementById(\"outInvoiceNo\").textContent =\n invoiceNo;\n\n document.getElementById(\"outDate\").textContent =\n date ? formatDate(date) : \"--\";\n\n document.getElementById(\"outFrom\").textContent =\n sellerAddress +\n \"\\nGSTIN: \" + (gstin || \"Not Provided\") +\n \"\\nPhone: \" + (phone || \"-\") +\n \"\\nEmail: \" + (email || \"-\");\n\n document.getElementById(\"outBuyer\").textContent =\n (buyerName || \"Customer\") +\n \"\\n\" +\n (buyerAddress || \"\") +\n \"\\nGSTIN: \" + (buyerGSTIN || \"Unregistered\") +\n \"\\nPhone: \" + (buyerPhone || \"-\") +\n \"\\nPlace of Supply: \" + (place || \"-\");\n\n const statusBox =\n document.getElementById(\"outStatus\");\n\n statusBox.textContent =\n status.toUpperCase();\n\n statusBox.className =\n \"status \" +\n (status === \"Paid\" ? \"paid\" : \"unpaid\");\n\n\n \/* PRODUCTS *\/\n\n const rows =\n document.querySelectorAll(\".product-row\");\n\n const tbody =\n document.getElementById(\"invoiceProducts\");\n\n tbody.innerHTML = \"\";\n\n let subtotal = 0;\n\n rows.forEach((row,index)=>{\n\n const name =\n row.querySelector(\".p-name\").value ||\n \"Product \/ Service\";\n\n const hsn =\n row.querySelector(\".p-hsn\").value || \"-\";\n\n const qty =\n Number(row.querySelector(\".p-qty\").value) || 0;\n\n const rate =\n Number(row.querySelector(\".p-rate\").value) || 0;\n\n const amount =\n qty * rate;\n\n subtotal += amount;\n\n row.querySelector(\".p-total\").textContent =\n amount.toFixed(2);\n\n const tr =\n document.createElement(\"tr\");\n\n tr.innerHTML = `\n <td>${index+1}<\/td>\n <td>${escapeHTML(name)}<\/td>\n <td>${escapeHTML(hsn)}<\/td>\n <td>${qty}<\/td>\n <td>${money(rate)}<\/td>\n <td>${document.getElementById(\"gstRate\").value}%<\/td>\n <td>${money(amount)}<\/td>\n `;\n\n tbody.appendChild(tr);\n\n });\n\n\n \/* TAX *\/\n\n const gst =\n Number(document.getElementById(\"gstRate\").value);\n\n const tax =\n subtotal * gst \/ 100;\n\n const taxType =\n document.getElementById(\"taxType\").value;\n\n let cgst = 0;\n let sgst = 0;\n let igst = 0;\n\n if(taxType === \"CGST_SGST\"){\n\n cgst = tax \/ 2;\n sgst = tax \/ 2;\n\n document.getElementById(\"cgstLine\").style.display = \"flex\";\n document.getElementById(\"sgstLine\").style.display = \"flex\";\n document.getElementById(\"igstLine\").style.display = \"none\";\n\n }else{\n\n igst = tax;\n\n document.getElementById(\"cgstLine\").style.display = \"none\";\n document.getElementById(\"sgstLine\").style.display = \"none\";\n document.getElementById(\"igstLine\").style.display = \"flex\";\n\n }\n\n const total =\n subtotal + tax;\n\n document.getElementById(\"subtotal\").textContent =\n money(subtotal);\n\n document.getElementById(\"cgst\").textContent =\n money(cgst);\n\n document.getElementById(\"sgst\").textContent =\n money(sgst);\n\n document.getElementById(\"igst\").textContent =\n money(igst);\n\n document.getElementById(\"grandTotal\").textContent =\n money(total);\n\n document.getElementById(\"amountWords\").textContent =\n numberToWords(total);\n\n\n \/* BANK *\/\n\n const bankName =\n document.getElementById(\"bankName\").value;\n\n const accountNo =\n document.getElementById(\"accountNo\").value;\n\n const ifsc =\n document.getElementById(\"ifsc\").value;\n\n const upi =\n document.getElementById(\"upi\").value;\n\n document.getElementById(\"outBank\").textContent =\n \"Bank: \" + (bankName || \"-\") +\n \"\\nAccount No: \" + (accountNo || \"-\") +\n \"\\nIFSC: \" + (ifsc || \"-\") +\n \"\\nUPI: \" + (upi || \"-\");\n\n\n generateQR(total);\n\n}\n\n\n\/* =========================================\n DATE FORMAT\n========================================= *\/\n\nfunction formatDate(date){\n\n const d = new Date(date);\n\n return d.toLocaleDateString(\"en-IN\",{\n day:\"2-digit\",\n month:\"2-digit\",\n year:\"numeric\"\n });\n\n}\n\n\n\/* =========================================\n ESCAPE HTML\n========================================= *\/\n\nfunction escapeHTML(str){\n\n return String(str)\n .replace(\/&\/g,\"&\")\n .replace(\/<\/g,\"<\")\n .replace(\/>\/g,\">\")\n .replace(\/\"\/g,\""\")\n .replace(\/'\/g,\"'\");\n\n}\n\n\n\/* =========================================\n QR CODE\n========================================= *\/\n\nfunction generateQR(amount){\n\n const qr =\n document.getElementById(\"qrcode\");\n\n qr.innerHTML = \"\";\n\n const upi =\n document.getElementById(\"upi\").value.trim();\n\n const seller =\n document.getElementById(\"sellerName\").value.trim();\n\n if(!upi)\n return;\n\n const url =\n \"upi:\/\/pay?pa=\" +\n encodeURIComponent(upi) +\n \"&pn=\" +\n encodeURIComponent(seller || \"Merchant\") +\n \"&am=\" +\n Number(amount).toFixed(2) +\n \"&cu=INR\";\n\n new QRCode(qr,{\n text:url,\n width:105,\n height:105,\n correctLevel:QRCode.CorrectLevel.M\n });\n\n}\n\n\n\/* =========================================\n LOGO UPLOAD\n========================================= *\/\n\ndocument.getElementById(\"logoUpload\")\n.addEventListener(\"change\",function(){\n\n const file = this.files[0];\n\n if(!file) return;\n\n const reader =\n new FileReader();\n\n reader.onload = function(e){\n\n const preview =\n document.getElementById(\"logoPreview\");\n\n const invoiceLogo =\n document.getElementById(\"invoiceLogo\");\n\n preview.src = e.target.result;\n preview.style.display = \"block\";\n\n invoiceLogo.src = e.target.result;\n invoiceLogo.style.display = \"block\";\n\n };\n\n reader.readAsDataURL(file);\n\n});\n\n\n\/* =========================================\n SIGNATURE UPLOAD\n========================================= *\/\n\ndocument.getElementById(\"signatureUpload\")\n.addEventListener(\"change\",function(){\n\n const file = this.files[0];\n\n if(!file) return;\n\n const reader =\n new FileReader();\n\n reader.onload = function(e){\n\n const preview =\n document.getElementById(\"signaturePreview\");\n\n const invoiceSignature =\n document.getElementById(\"invoiceSignature\");\n\n preview.src = e.target.result;\n preview.style.display = \"block\";\n\n invoiceSignature.src = e.target.result;\n invoiceSignature.style.display = \"block\";\n\n };\n\n reader.readAsDataURL(file);\n\n});\n\n\n\/* =========================================\n INPUT LISTENERS\n========================================= *\/\n\ndocument.querySelectorAll(\n \"input, textarea, select\"\n).forEach(el=>{\n\n el.addEventListener(\"input\",updateInvoice);\n el.addEventListener(\"change\",updateInvoice);\n\n});\n\n\n\/* =========================================\n JPG DOWNLOAD\n========================================= *\/\n\nasync function downloadJPG(){\n\n const invoice =\n document.getElementById(\"invoice\");\n\n const canvas =\n await html2canvas(invoice,{\n scale:2,\n backgroundColor:\"#ffffff\",\n useCORS:true\n });\n\n const link =\n document.createElement(\"a\");\n\n link.download =\n \"GST-Invoice-\" +\n document.getElementById(\"invoiceNo\").value +\n \".jpg\";\n\n link.href =\n canvas.toDataURL(\"image\/jpeg\",0.95);\n\n link.click();\n\n}\n\n\n\/* =========================================\n WHATSAPP SHARE\n========================================= *\/\n\nfunction shareWhatsApp(){\n\n const invoiceNo =\n document.getElementById(\"invoiceNo\").value;\n\n const total =\n document.getElementById(\"grandTotal\").textContent;\n\n const seller =\n document.getElementById(\"sellerName\").value;\n\n const message =\n \"GST Tax Invoice\\n\\n\" +\n \"Seller: \" + seller +\n \"\\nInvoice No: \" + invoiceNo +\n \"\\nTotal Amount: \" + total +\n \"\\n\\nPlease find the invoice details.\";\n\n const url =\n \"https:\/\/wa.me\/?text=\" +\n encodeURIComponent(message);\n\n window.open(url,\"_blank\");\n\n}\n\n\n\/* =========================================\n RESET\n========================================= *\/\n\nfunction resetInvoice(){\n\n if(!confirm(\"Reset invoice?\"))\n return;\n\n location.reload();\n\n}\n\n\n\/* =========================================\n START WITH ONE PRODUCT\n========================================= *\/\n\naddProduct();\n\nupdateInvoice();\n\n<\/script>\n\n<\/body>\n<\/html>\n“`\n\n\n\n\n<div class=\"wp-block-file alignfull\"><a id=\"wp-block-file--media-4de215d4-3d67-4977-a1cc-f428109af706\" href=\"https:\/\/paisakamaen.in\/wp-content\/uploads\/2026\/09\/gst_tax_invoice_generator_v2-2-2.html\"><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-accent-color\">gst_tax_invoice_generator_v2-2 (2<\/mark><\/strong>)<\/a><a href=\"https:\/\/paisakamaen.in\/wp-content\/uploads\/2026\/09\/gst_tax_invoice_generator_v2-2-2.html\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-4de215d4-3d67-4977-a1cc-f428109af706\">gst<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>“`html GST Tax Invoice Generator GST Tax Invoice Generator Create professional GST invoices quickly Invoice Settings Seller Details Business \/ Seller Name Address Your Business Address GSTIN Phone Email \ud83d\udcf7 Upload Seller Logo Invoice Details Invoice Number Invoice Date Place of Supply Payment Status PaidUnpaid Buyer Details Buyer \/ Customer Name Buyer Address Buyer GSTIN … <\/p>\n<p class=\"read-more-container\"><a title=\"GST Tax Invoice Generate\" class=\"read-more button\" href=\"https:\/\/paisakamaen.in\/?p=104#more-104\" aria-label=\"Read more about GST Tax Invoice Generate\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,11],"tags":[],"class_list":["post-104","post","type-post","status-publish","format-standard","hentry","category-uncategorized","category-gst-tax-invoice-generate-free","infinite-scroll-item","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50"],"_links":{"self":[{"href":"https:\/\/paisakamaen.in\/index.php?rest_route=\/wp\/v2\/posts\/104","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/paisakamaen.in\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/paisakamaen.in\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/paisakamaen.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/paisakamaen.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=104"}],"version-history":[{"count":3,"href":"https:\/\/paisakamaen.in\/index.php?rest_route=\/wp\/v2\/posts\/104\/revisions"}],"predecessor-version":[{"id":110,"href":"https:\/\/paisakamaen.in\/index.php?rest_route=\/wp\/v2\/posts\/104\/revisions\/110"}],"wp:attachment":[{"href":"https:\/\/paisakamaen.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/paisakamaen.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/paisakamaen.in\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":104,"date":"2026-09-06T17:23:26","date_gmt":"2026-09-06T17:23:26","guid":{"rendered":"https:\/\/paisakamaen.in\/?p=104"},"modified":"2026-09-06T17:50:46","modified_gmt":"2026-09-06T17:50:46","slug":"gst-tax-invoice-generate","status":"publish","type":"post","link":"https:\/\/paisakamaen.in\/?p=104","title":{"rendered":"GST Tax Invoice Generate"},"content":{"rendered":"\n\n“`html\n\n\n\n\n\n\nGST Tax Invoice Generator<\/title>\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/qrcodejs\/1.0.0\/qrcode.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n\n<style>\n\n*{\n box-sizing:border-box;\n margin:0;\n padding:0;\n}\n\nbody{\n font-family:\"Inter\",Arial,sans-serif;\n background:#eef2f7;\n color:#172033;\n}\n\nbutton,\ninput,\nselect,\ntextarea{\n font-family:inherit;\n}\n\n\/* =========================\n APP HEADER\n========================= *\/\n\n.topbar{\n background:linear-gradient(135deg,#0f172a,#172554,#1d4ed8);\n color:#fff;\n padding:24px 20px;\n text-align:center;\n}\n\n.topbar h1{\n font-family:\"Poppins\",sans-serif;\n font-size:30px;\n font-weight:800;\n}\n\n.topbar p{\n margin-top:5px;\n color:#dbeafe;\n}\n\n\/* =========================\n LAYOUT\n========================= *\/\n\n.wrapper{\n max-width:1400px;\n margin:30px auto;\n padding:0 16px;\n}\n\n.grid{\n display:grid;\n grid-template-columns:390px 1fr;\n gap:25px;\n align-items:start;\n}\n\n\/* =========================\n CONTROL PANEL\n========================= *\/\n\n.panel{\n background:#fff;\n border-radius:18px;\n padding:22px;\n box-shadow:0 8px 30px rgba(15,23,42,.10);\n}\n\n.panel h2{\n font-family:\"Poppins\",sans-serif;\n font-size:20px;\n margin-bottom:18px;\n color:#172554;\n}\n\n.section{\n border:1px solid #e2e8f0;\n border-radius:13px;\n padding:16px;\n margin-bottom:15px;\n}\n\n.section-title{\n font-size:14px;\n font-weight:800;\n color:#1d4ed8;\n margin-bottom:13px;\n text-transform:uppercase;\n letter-spacing:.4px;\n}\n\n.field{\n margin-bottom:11px;\n}\n\n.field label{\n display:block;\n font-size:12px;\n font-weight:700;\n color:#475569;\n margin-bottom:5px;\n}\n\n.field input,\n.field select,\n.field textarea{\n width:100%;\n border:1px solid #cbd5e1;\n border-radius:8px;\n padding:10px 11px;\n outline:none;\n font-size:13px;\n background:#fff;\n color:#172033;\n}\n\n.field input:focus,\n.field select:focus,\n.field textarea:focus{\n border-color:#2563eb;\n box-shadow:0 0 0 3px rgba(37,99,235,.10);\n}\n\n.field textarea{\n min-height:70px;\n resize:vertical;\n}\n\n.two{\n display:grid;\n grid-template-columns:1fr 1fr;\n gap:9px;\n}\n\n.upload{\n border:2px dashed #93c5fd;\n background:#eff6ff;\n padding:13px;\n text-align:center;\n border-radius:10px;\n}\n\n.upload label{\n display:block;\n cursor:pointer;\n color:#1d4ed8;\n font-size:13px;\n font-weight:800;\n}\n\n.upload input{\n display:none;\n}\n\n.preview-img{\n max-width:120px;\n max-height:70px;\n margin:10px auto 0;\n display:none;\n object-fit:contain;\n}\n\n\/* =========================\n BUTTONS\n========================= *\/\n\n.btn{\n border:0;\n border-radius:9px;\n padding:11px 14px;\n cursor:pointer;\n font-size:13px;\n font-weight:800;\n transition:.2s;\n}\n\n.btn:hover{\n transform:translateY(-1px);\n}\n\n.btn-primary{\n background:#2563eb;\n color:#fff;\n}\n\n.btn-green{\n background:#059669;\n color:#fff;\n}\n\n.btn-red{\n background:#dc2626;\n color:#fff;\n}\n\n.btn-dark{\n background:#172033;\n color:#fff;\n}\n\n.btn-light{\n background:#e2e8f0;\n color:#172033;\n}\n\n.action-row{\n display:flex;\n flex-wrap:wrap;\n gap:9px;\n margin-top:15px;\n}\n\n\/* =========================\n PRODUCT INPUT\n========================= *\/\n\n.product-row{\n border:1px solid #dbeafe;\n background:#f8fbff;\n border-radius:10px;\n padding:12px;\n margin-bottom:10px;\n}\n\n.product-grid{\n display:grid;\n grid-template-columns:1.7fr .8fr .7fr .8fr;\n gap:7px;\n}\n\n.product-grid input,\n.product-grid select{\n width:100%;\n padding:8px;\n border:1px solid #cbd5e1;\n border-radius:7px;\n font-size:12px;\n}\n\n.product-total{\n margin-top:7px;\n font-size:12px;\n font-weight:800;\n color:#1d4ed8;\n}\n\n\/* =========================\n INVOICE AREA\n========================= *\/\n\n.invoice-area{\n overflow:auto;\n}\n\n.invoice{\n width:794px;\n min-height:1123px;\n margin:auto;\n background:#fff;\n box-shadow:0 8px 35px rgba(15,23,42,.12);\n padding:35px;\n color:#111827;\n}\n\n\/* INVOICE HEADER *\/\n\n.invoice-head{\n display:flex;\n justify-content:space-between;\n gap:20px;\n border-bottom:3px solid #1d4ed8;\n padding-bottom:18px;\n}\n\n.seller{\n flex:1;\n}\n\n.logo{\n width:100px;\n max-height:70px;\n object-fit:contain;\n display:none;\n margin-bottom:8px;\n}\n\n.seller-name{\n font-family:\"Poppins\",sans-serif;\n font-size:25px;\n font-weight:800;\n color:#172554;\n}\n\n.seller-details{\n margin-top:5px;\n font-size:11px;\n color:#475569;\n white-space:pre-line;\n}\n\n.invoice-title{\n text-align:right;\n}\n\n.invoice-title h2{\n font-family:\"Poppins\",sans-serif;\n font-size:29px;\n color:#1d4ed8;\n letter-spacing:.5px;\n}\n\n.invoice-title p{\n font-size:11px;\n margin-top:4px;\n}\n\n\/* CUSTOMER *\/\n\n.customer-grid{\n display:grid;\n grid-template-columns:1fr 1fr;\n gap:15px;\n margin:22px 0;\n}\n\n.customer-box{\n border:1px solid #dbe3ef;\n border-radius:8px;\n padding:13px;\n}\n\n.customer-box h3{\n background:#eff6ff;\n color:#1d4ed8;\n font-size:11px;\n padding:6px 8px;\n border-radius:5px;\n margin-bottom:8px;\n text-transform:uppercase;\n}\n\n.customer-content{\n font-size:11px;\n white-space:pre-line;\n color:#374151;\n}\n\n\/* TABLE *\/\n\n.invoice-table{\n width:100%;\n border-collapse:collapse;\n margin-top:10px;\n}\n\n.invoice-table th{\n background:#172554;\n color:#fff;\n font-size:10px;\n padding:9px 5px;\n text-align:center;\n}\n\n.invoice-table td{\n border:1px solid #dbe3ef;\n padding:8px 5px;\n font-size:10px;\n text-align:center;\n}\n\n.invoice-table td:nth-child(2){\n text-align:left;\n}\n\n.invoice-table tr:nth-child(even){\n background:#f8fafc;\n}\n\n\/* SUMMARY *\/\n\n.summary-area{\n display:grid;\n grid-template-columns:1fr 270px;\n gap:20px;\n margin-top:20px;\n}\n\n.bank-box{\n border:1px solid #dbe3ef;\n border-radius:9px;\n padding:13px;\n}\n\n.bank-box h3{\n color:#047857;\n font-size:12px;\n margin-bottom:8px;\n}\n\n.bank-info{\n font-size:10px;\n line-height:1.7;\n white-space:pre-line;\n}\n\n.qr-wrap{\n text-align:center;\n margin-top:12px;\n}\n\n#qrcode{\n display:inline-block;\n}\n\n.totals{\n border:1px solid #dbe3ef;\n border-radius:9px;\n overflow:hidden;\n}\n\n.total-line{\n display:flex;\n justify-content:space-between;\n padding:8px 11px;\n font-size:11px;\n border-bottom:1px solid #e5e7eb;\n}\n\n.grand{\n background:#1d4ed8;\n color:#fff;\n font-size:14px;\n font-weight:800;\n}\n\n\/* SIGNATURE *\/\n\n.bottom{\n display:flex;\n justify-content:space-between;\n gap:20px;\n margin-top:35px;\n}\n\n.words{\n font-size:11px;\n color:#374151;\n flex:1;\n}\n\n.signature{\n width:170px;\n text-align:center;\n}\n\n.signature img{\n max-width:150px;\n max-height:65px;\n display:none;\n margin:auto;\n}\n\n.signature-line{\n border-top:1px solid #334155;\n margin-top:12px;\n padding-top:5px;\n font-size:10px;\n}\n\n\/* FOOT *\/\n\n.invoice-footer{\n margin-top:30px;\n padding-top:12px;\n border-top:1px solid #dbe3ef;\n text-align:center;\n font-size:9px;\n color:#64748b;\n}\n\n\/* STATUS *\/\n\n.status{\n display:inline-block;\n padding:5px 10px;\n border-radius:20px;\n font-size:10px;\n font-weight:800;\n margin-top:8px;\n}\n\n.paid{\n background:#dcfce7;\n color:#166534;\n}\n\n.unpaid{\n background:#fee2e2;\n color:#991b1b;\n}\n\n\/* =========================\n PRINT\n========================= *\/\n\n@media print{\n\n body{\n background:#fff;\n }\n\n .topbar,\n .panel{\n display:none !important;\n }\n\n .wrapper{\n margin:0;\n padding:0;\n }\n\n .grid{\n display:block;\n }\n\n .invoice-area{\n overflow:visible;\n }\n\n .invoice{\n width:794px;\n min-height:1123px;\n box-shadow:none;\n margin:0;\n }\n\n @page{\n size:A4;\n margin:0;\n }\n}\n\n\/* =========================\n RESPONSIVE\n========================= *\/\n\n@media(max-width:1000px){\n\n .grid{\n grid-template-columns:1fr;\n }\n\n .invoice-area{\n padding-bottom:30px;\n }\n\n}\n\n@media(max-width:820px){\n\n .invoice{\n transform-origin:top left;\n }\n\n .invoice-area{\n overflow-x:auto;\n }\n\n}\n\n@media(max-width:600px){\n\n .topbar h1{\n font-size:24px;\n }\n\n .two{\n grid-template-columns:1fr;\n }\n\n .product-grid{\n grid-template-columns:1fr 1fr;\n }\n\n .customer-grid,\n .summary-area{\n grid-template-columns:1fr;\n }\n\n}\n\n<\/style>\n<\/head>\n\n<body>\n\n<header class=\"topbar\">\n <h1>GST Tax Invoice Generator<\/h1>\n <p>Create professional GST invoices quickly<\/p>\n<\/header>\n\n\n<div class=\"wrapper\">\n\n<div class=\"grid\">\n\n\n\n<div class=\"panel\">\n\n<h2>Invoice Settings<\/h2>\n\n\n\n<div class=\"section\">\n\n<div class=\"section-title\">Seller Details<\/div>\n\n<div class=\"field\">\n<label>Business \/ Seller Name<\/label>\n<input id=\"sellerName\" value=\"Your Business Name\">\n<\/div>\n\n<div class=\"field\">\n<label>Address<\/label>\n<textarea id=\"sellerAddress\">Your Business Address<\/textarea>\n<\/div>\n\n<div class=\"two\">\n\n<div class=\"field\">\n<label>GSTIN<\/label>\n<input id=\"sellerGSTIN\" placeholder=\"22AAAAA0000A1Z5\">\n<\/div>\n\n<div class=\"field\">\n<label>Phone<\/label>\n<input id=\"sellerPhone\" placeholder=\"9876543210\">\n<\/div>\n\n<\/div>\n\n<div class=\"field\">\n<label>Email<\/label>\n<input id=\"sellerEmail\" placeholder=\"business@example.com\">\n<\/div>\n\n<div class=\"upload\">\n\n<label for=\"logoUpload\">\n\ud83d\udcf7 Upload Seller Logo\n<\/label>\n\n<input type=\"file\" id=\"logoUpload\" accept=\"image\/*\">\n\n<img id=\"logoPreview\" class=\"preview-img\">\n\n<\/div>\n\n<\/div>\n\n\n\n\n<div class=\"section\">\n\n<div class=\"section-title\">Invoice Details<\/div>\n\n<div class=\"two\">\n\n<div class=\"field\">\n<label>Invoice Number<\/label>\n<input id=\"invoiceNo\" value=\"INV-001\">\n<\/div>\n\n<div class=\"field\">\n<label>Invoice Date<\/label>\n<input type=\"date\" id=\"invoiceDate\">\n<\/div>\n\n<\/div>\n\n<div class=\"two\">\n\n<div class=\"field\">\n<label>Place of Supply<\/label>\n<input id=\"placeSupply\" placeholder=\"Uttar Pradesh\">\n<\/div>\n\n<div class=\"field\">\n<label>Payment Status<\/label>\n\n<select id=\"paymentStatus\">\n<option value=\"Paid\">Paid<\/option>\n<option value=\"Unpaid\">Unpaid<\/option>\n<\/select>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n\n<div class=\"section\">\n\n<div class=\"section-title\">Buyer Details<\/div>\n\n<div class=\"field\">\n<label>Buyer \/ Customer Name<\/label>\n<input id=\"buyerName\" placeholder=\"Customer Name\">\n<\/div>\n\n<div class=\"field\">\n<label>Buyer Address<\/label>\n<textarea id=\"buyerAddress\" placeholder=\"Customer Address\"><\/textarea>\n<\/div>\n\n<div class=\"two\">\n\n<div class=\"field\">\n<label>Buyer GSTIN<\/label>\n<input id=\"buyerGSTIN\" placeholder=\"Optional\">\n<\/div>\n\n<div class=\"field\">\n<label>Buyer Phone<\/label>\n<input id=\"buyerPhone\" placeholder=\"Optional\">\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n\n<div class=\"section\">\n\n<div class=\"section-title\">Products \/ Services<\/div>\n\n<div id=\"products\"><\/div>\n\n<button class=\"btn btn-primary\" onclick=\"addProduct()\">\n+ Add Product \/ Service\n<\/button>\n\n<\/div>\n\n\n\n\n<div class=\"section\">\n\n<div class=\"section-title\">Tax Settings<\/div>\n\n<div class=\"two\">\n\n<div class=\"field\">\n<label>GST Rate<\/label>\n\n<select id=\"gstRate\">\n<option value=\"0\">0%<\/option>\n<option value=\"5\">5%<\/option>\n<option value=\"12\">12%<\/option>\n<option value=\"18\" selected>18%<\/option>\n<option value=\"28\">28%<\/option>\n<\/select>\n\n<\/div>\n\n<div class=\"field\">\n<label>Tax Type<\/label>\n\n<select id=\"taxType\">\n<option value=\"CGST_SGST\">CGST + SGST<\/option>\n<option value=\"IGST\">IGST<\/option>\n<\/select>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n\n<div class=\"section\">\n\n<div class=\"section-title\">Bank & UPI Details<\/div>\n\n<div class=\"field\">\n<label>Bank Name<\/label>\n<input id=\"bankName\" placeholder=\"Bank Name\">\n<\/div>\n\n<div class=\"two\">\n\n<div class=\"field\">\n<label>Account Number<\/label>\n<input id=\"accountNo\" placeholder=\"XXXXXXXXXXXX\">\n<\/div>\n\n<div class=\"field\">\n<label>IFSC Code<\/label>\n<input id=\"ifsc\" placeholder=\"SBIN0000000\">\n<\/div>\n\n<\/div>\n\n<div class=\"field\">\n<label>UPI ID<\/label>\n<input id=\"upi\" placeholder=\"yourname@upi\">\n<\/div>\n\n<\/div>\n\n\n\n\n<div class=\"section\">\n\n<div class=\"section-title\">Seller Signature<\/div>\n\n<div class=\"upload\">\n\n<label for=\"signatureUpload\">\n\u270d\ufe0f Upload Signature\n<\/label>\n\n<input type=\"file\" id=\"signatureUpload\" accept=\"image\/*\">\n\n<img id=\"signaturePreview\" class=\"preview-img\">\n\n<\/div>\n\n<\/div>\n\n\n\n\n<div class=\"action-row\">\n\n<button class=\"btn btn-green\" onclick=\"window.print()\">\n\ud83d\udda8 Print \/ Save PDF\n<\/button>\n\n<button class=\"btn btn-primary\" onclick=\"downloadJPG()\">\n\ud83d\uddbc Download JPG\n<\/button>\n\n<button class=\"btn btn-dark\" onclick=\"shareWhatsApp()\">\n\ud83d\udcac WhatsApp\n<\/button>\n\n<button class=\"btn btn-light\" onclick=\"resetInvoice()\">\n\u21bb Reset\n<\/button>\n\n<\/div>\n\n<\/div>\n\n\n\n\n<div class=\"invoice-area\">\n\n<div class=\"invoice\" id=\"invoice\">\n\n<div class=\"invoice-head\">\n\n<div class=\"seller\">\n\n<img id=\"invoiceLogo\" class=\"logo\">\n\n<div class=\"seller-name\" id=\"outSellerName\">\nYour Business Name\n<\/div>\n\n<div class=\"seller-details\" id=\"outSellerDetails\">\nYour Business Address\n<\/div>\n\n<\/div>\n\n<div class=\"invoice-title\">\n\n<h2>TAX INVOICE<\/h2>\n\n<p>\nInvoice No: <strong id=\"outInvoiceNo\">INV-001<\/strong>\n<\/p>\n\n<p>\nDate: <strong id=\"outDate\">—<\/strong>\n<\/p>\n\n<div id=\"outStatus\" class=\"status paid\">\nPAID\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n\n<div class=\"customer-grid\">\n\n<div class=\"customer-box\">\n\n<h3>Bill From<\/h3>\n\n<div class=\"customer-content\" id=\"outFrom\">\n<\/div>\n\n<\/div>\n\n\n<div class=\"customer-box\">\n\n<h3>Bill To<\/h3>\n\n<div class=\"customer-content\" id=\"outBuyer\">\nCustomer information\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n<table class=\"invoice-table\">\n\n<thead>\n\n<tr>\n<th>#<\/th>\n<th>Product \/ Service<\/th>\n<th>HSN\/SAC<\/th>\n<th>Qty<\/th>\n<th>Rate<\/th>\n<th>GST<\/th>\n<th>Amount<\/th>\n<\/tr>\n\n<\/thead>\n\n<tbody id=\"invoiceProducts\">\n<\/tbody>\n\n<\/table>\n\n\n\n\n<div class=\"summary-area\">\n\n<div class=\"bank-box\">\n\n<h3>Bank \/ Payment Details<\/h3>\n\n<div class=\"bank-info\" id=\"outBank\">\nBank details\n<\/div>\n\n<div class=\"qr-wrap\">\n\n<div id=\"qrcode\"><\/div>\n\n<div style=\"font-size:9px;margin-top:5px;\">\nScan to Pay via UPI\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"totals\">\n\n<div class=\"total-line\">\n<span>Subtotal<\/span>\n<strong id=\"subtotal\">\u20b90.00<\/strong>\n<\/div>\n\n<div class=\"total-line\" id=\"cgstLine\">\n<span>CGST<\/span>\n<strong id=\"cgst\">\u20b90.00<\/strong>\n<\/div>\n\n<div class=\"total-line\" id=\"sgstLine\">\n<span>SGST<\/span>\n<strong id=\"sgst\">\u20b90.00<\/strong>\n<\/div>\n\n<div class=\"total-line\" id=\"igstLine\" style=\"display:none;\">\n<span>IGST<\/span>\n<strong id=\"igst\">\u20b90.00<\/strong>\n<\/div>\n\n<div class=\"total-line grand\">\n<span>Grand Total<\/span>\n<strong id=\"grandTotal\">\u20b90.00<\/strong>\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n\n<div class=\"bottom\">\n\n<div class=\"words\">\n\n<strong>Amount in Words:<\/strong>\n\n<div id=\"amountWords\">\nRupees Zero Only\n<\/div>\n\n<\/div>\n\n\n<div class=\"signature\">\n\n<img id=\"invoiceSignature\">\n\n<div class=\"signature-line\">\nAuthorized Signatory\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"invoice-footer\">\n\nThank you for your business!\n\n<br>\n\nThis is a computer generated invoice.\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n<script>\n\n\/* =========================================\n INITIAL DATE\n========================================= *\/\n\ndocument.getElementById(\"invoiceDate\").value =\nnew Date().toISOString().split(\"T\")[0];\n\n\n\/* =========================================\n HSN \/ SAC DATABASE\n Common examples only\n========================================= *\/\n\nconst hsnDatabase = {\n\n\"rice\":\"1006\",\n\"wheat\":\"1001\",\n\"flour\":\"1101\",\n\"atta\":\"1101\",\n\"maida\":\"1101\",\n\"suji\":\"1103\",\n\n\"milk\":\"0401\",\n\"butter\":\"0405\",\n\"cheese\":\"0406\",\n\n\"bread\":\"1905\",\n\"biscuits\":\"1905\",\n\"biscuit\":\"1905\",\n\"cake\":\"1905\",\n\n\"shoes\":\"6404\",\n\"footwear\":\"6404\",\n\"slippers\":\"6402\",\n\n\"shirt\":\"6205\",\n\"shirts\":\"6205\",\n\"t shirt\":\"6109\",\n\"t-shirt\":\"6109\",\n\"trouser\":\"6203\",\n\n\"soap\":\"3401\",\n\"shampoo\":\"3305\",\n\"cosmetics\":\"3304\",\n\n\"paper\":\"4802\",\n\"paper plate\":\"4823\",\n\"notebook\":\"4820\",\n\n\"computer\":\"8471\",\n\"laptop\":\"8471\",\n\"keyboard\":\"8471\",\n\"mouse\":\"8471\",\n\n\"mobile\":\"8517\",\n\"mobile phone\":\"8517\",\n\n\"printer\":\"8443\",\n\n\"chair\":\"9401\",\n\"table\":\"9403\",\n\"furniture\":\"9403\",\n\n\"cement\":\"2523\",\n\"steel\":\"7214\",\n\"iron\":\"7214\",\n\n\"brick\":\"6904\",\n\n\"pen\":\"9608\",\n\"pencil\":\"9609\"\n\n};\n\n\n\/* =========================================\n FIND HSN\n========================================= *\/\n\nfunction findHSN(name){\n\n name = name.toLowerCase().trim();\n\n for(let key in hsnDatabase){\n\n if(name.includes(key)){\n return hsnDatabase[key];\n }\n\n }\n\n return \"\";\n}\n\n\n\/* =========================================\n ADD PRODUCT\n========================================= *\/\n\nlet productCount = 0;\n\nfunction addProduct(){\n\n productCount++;\n\n const div = document.createElement(\"div\");\n\n div.className = \"product-row\";\n\n div.innerHTML = `\n\n <div class=\"product-grid\">\n\n <input\n class=\"p-name\"\n placeholder=\"Product \/ Service\"\n oninput=\"autoHSN(this)\"\n >\n\n <input\n class=\"p-hsn\"\n placeholder=\"Auto HSN\"\n >\n\n <input\n class=\"p-qty\"\n type=\"number\"\n value=\"1\"\n min=\"0\"\n oninput=\"updateInvoice()\"\n >\n\n <input\n class=\"p-rate\"\n type=\"number\"\n value=\"0\"\n min=\"0\"\n oninput=\"updateInvoice()\"\n >\n\n <\/div>\n\n <div class=\"product-total\">\n Amount: \u20b9<span class=\"p-total\">0.00<\/span>\n <button\n class=\"btn btn-red\"\n style=\"float:right;padding:5px 8px;font-size:10px\"\n onclick=\"this.closest('.product-row').remove();updateInvoice();\"\n >\n Remove\n <\/button>\n <\/div>\n `;\n\n document.getElementById(\"products\").appendChild(div);\n\n updateInvoice();\n}\n\n\n\/* =========================================\n AUTO HSN\n========================================= *\/\n\nfunction autoHSN(input){\n\n const row = input.closest(\".product-row\");\n\n const hsn = row.querySelector(\".p-hsn\");\n\n if(!hsn.value){\n hsn.value = findHSN(input.value);\n }\n\n updateInvoice();\n}\n\n\n\/* =========================================\n RUPEES FORMAT\n========================================= *\/\n\nfunction money(num){\n\n return \"\u20b9\" + Number(num).toLocaleString(\"en-IN\",{\n minimumFractionDigits:2,\n maximumFractionDigits:2\n });\n\n}\n\n\n\/* =========================================\n NUMBER TO WORDS\n========================================= *\/\n\nfunction numberToWords(num){\n\n num = Math.floor(num);\n\n if(num === 0)\n return \"Rupees Zero Only\";\n\n const ones = [\n \"\",\"One\",\"Two\",\"Three\",\"Four\",\"Five\",\"Six\",\"Seven\",\n \"Eight\",\"Nine\",\"Ten\",\"Eleven\",\"Twelve\",\"Thirteen\",\n \"Fourteen\",\"Fifteen\",\"Sixteen\",\"Seventeen\",\"Eighteen\",\n \"Nineteen\"\n ];\n\n const tens = [\n \"\",\"\",\"Twenty\",\"Thirty\",\"Forty\",\"Fifty\",\"Sixty\",\n \"Seventy\",\"Eighty\",\"Ninety\"\n ];\n\n function two(n){\n\n if(n < 20)\n return ones[n];\n\n return tens[Math.floor(n\/10)] +\n (n%10 ? \" \" + ones[n%10] : \"\");\n\n }\n\n function convert(n){\n\n if(n < 100)\n return two(n);\n\n if(n < 1000)\n return ones[Math.floor(n\/100)] +\n \" Hundred \" + (n%100 ? two(n%100) : \"\");\n\n if(n < 100000)\n return convert(Math.floor(n\/1000)) +\n \" Thousand \" + (n%1000 ? convert(n%1000) : \"\");\n\n if(n < 10000000)\n return convert(Math.floor(n\/100000)) +\n \" Lakh \" + (n%100000 ? convert(n%100000) : \"\");\n\n return convert(Math.floor(n\/10000000)) +\n \" Crore \" + (n%10000000 ? convert(n%10000000) : \"\");\n\n }\n\n return \"Rupees \" + convert(num).trim() + \" Only\";\n\n}\n\n\n\/* =========================================\n UPDATE INVOICE\n========================================= *\/\n\nfunction updateInvoice(){\n\n const sellerName =\n document.getElementById(\"sellerName\").value;\n\n const sellerAddress =\n document.getElementById(\"sellerAddress\").value;\n\n const gstin =\n document.getElementById(\"sellerGSTIN\").value;\n\n const phone =\n document.getElementById(\"sellerPhone\").value;\n\n const email =\n document.getElementById(\"sellerEmail\").value;\n\n const invoiceNo =\n document.getElementById(\"invoiceNo\").value;\n\n const date =\n document.getElementById(\"invoiceDate\").value;\n\n const buyerName =\n document.getElementById(\"buyerName\").value;\n\n const buyerAddress =\n document.getElementById(\"buyerAddress\").value;\n\n const buyerGSTIN =\n document.getElementById(\"buyerGSTIN\").value;\n\n const buyerPhone =\n document.getElementById(\"buyerPhone\").value;\n\n const place =\n document.getElementById(\"placeSupply\").value;\n\n const status =\n document.getElementById(\"paymentStatus\").value;\n\n document.getElementById(\"outSellerName\").textContent =\n sellerName || \"Your Business Name\";\n\n document.getElementById(\"outSellerDetails\").textContent =\n sellerAddress;\n\n document.getElementById(\"outInvoiceNo\").textContent =\n invoiceNo;\n\n document.getElementById(\"outDate\").textContent =\n date ? formatDate(date) : \"--\";\n\n document.getElementById(\"outFrom\").textContent =\n sellerAddress +\n \"\\nGSTIN: \" + (gstin || \"Not Provided\") +\n \"\\nPhone: \" + (phone || \"-\") +\n \"\\nEmail: \" + (email || \"-\");\n\n document.getElementById(\"outBuyer\").textContent =\n (buyerName || \"Customer\") +\n \"\\n\" +\n (buyerAddress || \"\") +\n \"\\nGSTIN: \" + (buyerGSTIN || \"Unregistered\") +\n \"\\nPhone: \" + (buyerPhone || \"-\") +\n \"\\nPlace of Supply: \" + (place || \"-\");\n\n const statusBox =\n document.getElementById(\"outStatus\");\n\n statusBox.textContent =\n status.toUpperCase();\n\n statusBox.className =\n \"status \" +\n (status === \"Paid\" ? \"paid\" : \"unpaid\");\n\n\n \/* PRODUCTS *\/\n\n const rows =\n document.querySelectorAll(\".product-row\");\n\n const tbody =\n document.getElementById(\"invoiceProducts\");\n\n tbody.innerHTML = \"\";\n\n let subtotal = 0;\n\n rows.forEach((row,index)=>{\n\n const name =\n row.querySelector(\".p-name\").value ||\n \"Product \/ Service\";\n\n const hsn =\n row.querySelector(\".p-hsn\").value || \"-\";\n\n const qty =\n Number(row.querySelector(\".p-qty\").value) || 0;\n\n const rate =\n Number(row.querySelector(\".p-rate\").value) || 0;\n\n const amount =\n qty * rate;\n\n subtotal += amount;\n\n row.querySelector(\".p-total\").textContent =\n amount.toFixed(2);\n\n const tr =\n document.createElement(\"tr\");\n\n tr.innerHTML = `\n <td>${index+1}<\/td>\n <td>${escapeHTML(name)}<\/td>\n <td>${escapeHTML(hsn)}<\/td>\n <td>${qty}<\/td>\n <td>${money(rate)}<\/td>\n <td>${document.getElementById(\"gstRate\").value}%<\/td>\n <td>${money(amount)}<\/td>\n `;\n\n tbody.appendChild(tr);\n\n });\n\n\n \/* TAX *\/\n\n const gst =\n Number(document.getElementById(\"gstRate\").value);\n\n const tax =\n subtotal * gst \/ 100;\n\n const taxType =\n document.getElementById(\"taxType\").value;\n\n let cgst = 0;\n let sgst = 0;\n let igst = 0;\n\n if(taxType === \"CGST_SGST\"){\n\n cgst = tax \/ 2;\n sgst = tax \/ 2;\n\n document.getElementById(\"cgstLine\").style.display = \"flex\";\n document.getElementById(\"sgstLine\").style.display = \"flex\";\n document.getElementById(\"igstLine\").style.display = \"none\";\n\n }else{\n\n igst = tax;\n\n document.getElementById(\"cgstLine\").style.display = \"none\";\n document.getElementById(\"sgstLine\").style.display = \"none\";\n document.getElementById(\"igstLine\").style.display = \"flex\";\n\n }\n\n const total =\n subtotal + tax;\n\n document.getElementById(\"subtotal\").textContent =\n money(subtotal);\n\n document.getElementById(\"cgst\").textContent =\n money(cgst);\n\n document.getElementById(\"sgst\").textContent =\n money(sgst);\n\n document.getElementById(\"igst\").textContent =\n money(igst);\n\n document.getElementById(\"grandTotal\").textContent =\n money(total);\n\n document.getElementById(\"amountWords\").textContent =\n numberToWords(total);\n\n\n \/* BANK *\/\n\n const bankName =\n document.getElementById(\"bankName\").value;\n\n const accountNo =\n document.getElementById(\"accountNo\").value;\n\n const ifsc =\n document.getElementById(\"ifsc\").value;\n\n const upi =\n document.getElementById(\"upi\").value;\n\n document.getElementById(\"outBank\").textContent =\n \"Bank: \" + (bankName || \"-\") +\n \"\\nAccount No: \" + (accountNo || \"-\") +\n \"\\nIFSC: \" + (ifsc || \"-\") +\n \"\\nUPI: \" + (upi || \"-\");\n\n\n generateQR(total);\n\n}\n\n\n\/* =========================================\n DATE FORMAT\n========================================= *\/\n\nfunction formatDate(date){\n\n const d = new Date(date);\n\n return d.toLocaleDateString(\"en-IN\",{\n day:\"2-digit\",\n month:\"2-digit\",\n year:\"numeric\"\n });\n\n}\n\n\n\/* =========================================\n ESCAPE HTML\n========================================= *\/\n\nfunction escapeHTML(str){\n\n return String(str)\n .replace(\/&\/g,\"&\")\n .replace(\/<\/g,\"<\")\n .replace(\/>\/g,\">\")\n .replace(\/\"\/g,\""\")\n .replace(\/'\/g,\"'\");\n\n}\n\n\n\/* =========================================\n QR CODE\n========================================= *\/\n\nfunction generateQR(amount){\n\n const qr =\n document.getElementById(\"qrcode\");\n\n qr.innerHTML = \"\";\n\n const upi =\n document.getElementById(\"upi\").value.trim();\n\n const seller =\n document.getElementById(\"sellerName\").value.trim();\n\n if(!upi)\n return;\n\n const url =\n \"upi:\/\/pay?pa=\" +\n encodeURIComponent(upi) +\n \"&pn=\" +\n encodeURIComponent(seller || \"Merchant\") +\n \"&am=\" +\n Number(amount).toFixed(2) +\n \"&cu=INR\";\n\n new QRCode(qr,{\n text:url,\n width:105,\n height:105,\n correctLevel:QRCode.CorrectLevel.M\n });\n\n}\n\n\n\/* =========================================\n LOGO UPLOAD\n========================================= *\/\n\ndocument.getElementById(\"logoUpload\")\n.addEventListener(\"change\",function(){\n\n const file = this.files[0];\n\n if(!file) return;\n\n const reader =\n new FileReader();\n\n reader.onload = function(e){\n\n const preview =\n document.getElementById(\"logoPreview\");\n\n const invoiceLogo =\n document.getElementById(\"invoiceLogo\");\n\n preview.src = e.target.result;\n preview.style.display = \"block\";\n\n invoiceLogo.src = e.target.result;\n invoiceLogo.style.display = \"block\";\n\n };\n\n reader.readAsDataURL(file);\n\n});\n\n\n\/* =========================================\n SIGNATURE UPLOAD\n========================================= *\/\n\ndocument.getElementById(\"signatureUpload\")\n.addEventListener(\"change\",function(){\n\n const file = this.files[0];\n\n if(!file) return;\n\n const reader =\n new FileReader();\n\n reader.onload = function(e){\n\n const preview =\n document.getElementById(\"signaturePreview\");\n\n const invoiceSignature =\n document.getElementById(\"invoiceSignature\");\n\n preview.src = e.target.result;\n preview.style.display = \"block\";\n\n invoiceSignature.src = e.target.result;\n invoiceSignature.style.display = \"block\";\n\n };\n\n reader.readAsDataURL(file);\n\n});\n\n\n\/* =========================================\n INPUT LISTENERS\n========================================= *\/\n\ndocument.querySelectorAll(\n \"input, textarea, select\"\n).forEach(el=>{\n\n el.addEventListener(\"input\",updateInvoice);\n el.addEventListener(\"change\",updateInvoice);\n\n});\n\n\n\/* =========================================\n JPG DOWNLOAD\n========================================= *\/\n\nasync function downloadJPG(){\n\n const invoice =\n document.getElementById(\"invoice\");\n\n const canvas =\n await html2canvas(invoice,{\n scale:2,\n backgroundColor:\"#ffffff\",\n useCORS:true\n });\n\n const link =\n document.createElement(\"a\");\n\n link.download =\n \"GST-Invoice-\" +\n document.getElementById(\"invoiceNo\").value +\n \".jpg\";\n\n link.href =\n canvas.toDataURL(\"image\/jpeg\",0.95);\n\n link.click();\n\n}\n\n\n\/* =========================================\n WHATSAPP SHARE\n========================================= *\/\n\nfunction shareWhatsApp(){\n\n const invoiceNo =\n document.getElementById(\"invoiceNo\").value;\n\n const total =\n document.getElementById(\"grandTotal\").textContent;\n\n const seller =\n document.getElementById(\"sellerName\").value;\n\n const message =\n \"GST Tax Invoice\\n\\n\" +\n \"Seller: \" + seller +\n \"\\nInvoice No: \" + invoiceNo +\n \"\\nTotal Amount: \" + total +\n \"\\n\\nPlease find the invoice details.\";\n\n const url =\n \"https:\/\/wa.me\/?text=\" +\n encodeURIComponent(message);\n\n window.open(url,\"_blank\");\n\n}\n\n\n\/* =========================================\n RESET\n========================================= *\/\n\nfunction resetInvoice(){\n\n if(!confirm(\"Reset invoice?\"))\n return;\n\n location.reload();\n\n}\n\n\n\/* =========================================\n START WITH ONE PRODUCT\n========================================= *\/\n\naddProduct();\n\nupdateInvoice();\n\n<\/script>\n\n<\/body>\n<\/html>\n“`\n\n\n\n\n<div class=\"wp-block-file alignfull\"><a id=\"wp-block-file--media-4de215d4-3d67-4977-a1cc-f428109af706\" href=\"https:\/\/paisakamaen.in\/wp-content\/uploads\/2026\/09\/gst_tax_invoice_generator_v2-2-2.html\"><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-accent-color\">gst_tax_invoice_generator_v2-2 (2<\/mark><\/strong>)<\/a><a href=\"https:\/\/paisakamaen.in\/wp-content\/uploads\/2026\/09\/gst_tax_invoice_generator_v2-2-2.html\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-4de215d4-3d67-4977-a1cc-f428109af706\">gst<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>“`html GST Tax Invoice Generator GST Tax Invoice Generator Create professional GST invoices quickly Invoice Settings Seller Details Business \/ Seller Name Address Your Business Address GSTIN Phone Email \ud83d\udcf7 Upload Seller Logo Invoice Details Invoice Number Invoice Date Place of Supply Payment Status PaidUnpaid Buyer Details Buyer \/ Customer Name Buyer Address Buyer GSTIN … <\/p>\n<p class=\"read-more-container\"><a title=\"GST Tax Invoice Generate\" class=\"read-more button\" href=\"https:\/\/paisakamaen.in\/?p=104#more-104\" aria-label=\"Read more about GST Tax Invoice Generate\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,11],"tags":[],"class_list":["post-104","post","type-post","status-publish","format-standard","hentry","category-uncategorized","category-gst-tax-invoice-generate-free","infinite-scroll-item","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50"],"_links":{"self":[{"href":"https:\/\/paisakamaen.in\/index.php?rest_route=\/wp\/v2\/posts\/104","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/paisakamaen.in\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/paisakamaen.in\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/paisakamaen.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/paisakamaen.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=104"}],"version-history":[{"count":3,"href":"https:\/\/paisakamaen.in\/index.php?rest_route=\/wp\/v2\/posts\/104\/revisions"}],"predecessor-version":[{"id":110,"href":"https:\/\/paisakamaen.in\/index.php?rest_route=\/wp\/v2\/posts\/104\/revisions\/110"}],"wp:attachment":[{"href":"https:\/\/paisakamaen.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/paisakamaen.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/paisakamaen.in\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}