Bill\/Cash Memo Generator<\/title>\n <style>\n :root {\n --fwt-primary: #1a1a2e;\n --fwt-primary-light: #16213e;\n --fwt-accent: #e94560;\n --fwt-accent-hover: #c73e54;\n --fwt-bg: #f8f9fa;\n --fwt-card-bg: #ffffff;\n --fwt-text: #2d3436;\n --fwt-text-light: #636e72;\n --fwt-border: #dfe6e9;\n --fwt-shadow: 0 4px 20px rgba(0,0,0,0.08);\n --fwt-shadow-hover: 0 8px 30px rgba(0,0,0,0.12);\n --fwt-radius: 16px;\n --fwt-radius-sm: 10px;\n --fwt-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n --fwt-memo-bg: #fffef0;\n --fwt-memo-border: #1a1a2e;\n }\n\n *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\n\n body {\n font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n background: var(--fwt-bg);\n color: var(--fwt-text);\n min-height: 100vh;\n line-height: 1.6;\n }\n\n \/* Header *\/\n .fwt-header {\n background: linear-gradient(135deg, var(--fwt-primary), var(--fwt-primary-light));\n color: white;\n padding: 20px 0;\n box-shadow: var(--fwt-shadow);\n position: sticky;\n top: 0;\n z-index: 100;\n }\n .fwt-header-inner {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 24px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 12px;\n }\n .fwt-logo { display: flex; align-items: center; gap: 12px; }\n .fwt-logo-icon {\n width: 44px; height: 44px; background: var(--fwt-accent);\n border-radius: 12px; display: flex; align-items: center; justify-content: center;\n font-size: 22px;\n }\n .fwt-logo-text h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.5px; }\n .fwt-logo-text span { font-size: 12px; opacity: 0.8; }\n .fwt-header-actions { display: flex; gap: 10px; flex-wrap: wrap; }\n\n \/* Buttons *\/\n .fwt-btn {\n display: inline-flex; align-items: center; justify-content: center; gap: 8px;\n padding: 10px 20px; border-radius: var(--fwt-radius-sm); border: none;\n font-size: 14px; font-weight: 600; cursor: pointer;\n transition: var(--fwt-transition); text-decoration: none;\n position: relative; overflow: hidden;\n }\n .fwt-btn-primary {\n background: var(--fwt-accent); color: white;\n box-shadow: 0 4px 15px rgba(233, 69, 96, 0.3);\n }\n .fwt-btn-primary:hover { background: var(--fwt-accent-hover); transform: translateY(-2px); }\n .fwt-btn-secondary {\n background: rgba(255,255,255,0.1); color: white;\n border: 1px solid rgba(255,255,255,0.2);\n }\n .fwt-btn-secondary:hover { background: rgba(255,255,255,0.2); }\n .fwt-btn-outline {\n background: transparent; color: var(--fwt-primary); border: 2px solid var(--fwt-border);\n }\n .fwt-btn-outline:hover { border-color: var(--fwt-accent); color: var(--fwt-accent); }\n .fwt-btn-danger { background: #ff6b6b; color: white; }\n .fwt-btn-danger:hover { background: #ee5a5a; }\n .fwt-btn-sm { padding: 6px 14px; font-size: 13px; }\n .fwt-btn:active { transform: scale(0.97); }\n\n \/* Main Layout *\/\n .fwt-main {\n max-width: 1400px; margin: 0 auto; padding: 30px 24px;\n display: grid; grid-template-columns: 1fr 1fr; gap: 30px;\n }\n @media (max-width: 1024px) { .fwt-main { grid-template-columns: 1fr; } }\n\n \/* Panels *\/\n .fwt-panel {\n background: var(--fwt-card-bg); border-radius: var(--fwt-radius);\n box-shadow: var(--fwt-shadow); overflow: hidden; margin-bottom: 20px;\n }\n .fwt-panel-header {\n padding: 20px 24px; border-bottom: 1px solid var(--fwt-border);\n display: flex; justify-content: space-between; align-items: center;\n }\n .fwt-panel-header h2 { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; }\n .fwt-panel-body { padding: 24px; }\n\n \/* Form Elements *\/\n .fwt-form-group { margin-bottom: 20px; }\n .fwt-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n @media (max-width: 600px) { .fwt-form-row { grid-template-columns: 1fr; } }\n .fwt-label {\n display: block; font-size: 13px; font-weight: 600;\n color: var(--fwt-text-light); margin-bottom: 6px;\n text-transform: uppercase; letter-spacing: 0.5px;\n }\n .fwt-input, .fwt-select, .fwt-textarea {\n width: 100%; padding: 12px 16px; border: 2px solid var(--fwt-border);\n border-radius: var(--fwt-radius-sm); font-size: 15px; font-family: inherit;\n transition: var(--fwt-transition); background: white;\n }\n .fwt-input:focus, .fwt-select:focus, .fwt-textarea:focus {\n outline: none; border-color: var(--fwt-accent);\n box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.1);\n }\n .fwt-textarea { min-height: 60px; resize: vertical; }\n\n \/* Items Table *\/\n .fwt-items-table-wrap { overflow-x: auto; border-radius: var(--fwt-radius-sm); border: 1px solid var(--fwt-border); }\n .fwt-items-table { width: 100%; border-collapse: collapse; min-width: 500px; }\n .fwt-items-table th {\n background: var(--fwt-primary); color: white; padding: 12px 10px;\n font-size: 13px; font-weight: 600; text-transform: uppercase;\n letter-spacing: 0.5px; text-align: left;\n }\n .fwt-items-table th:last-child, .fwt-items-table td:last-child { text-align: center; width: 50px; }\n .fwt-items-table td { padding: 10px; border-bottom: 1px solid var(--fwt-border); vertical-align: middle; }\n .fwt-items-table tr:hover td { background: #f8f9fa; }\n .fwt-items-table .fwt-input { padding: 8px 10px; font-size: 14px; }\n .fwt-items-table input[type=\"number\"] { text-align: right; }\n .fwt-remove-btn {\n width: 32px; height: 32px; border-radius: 8px; border: none;\n background: #ffebee; color: #e53935; cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n transition: var(--fwt-transition); font-size: 16px;\n }\n .fwt-remove-btn:hover { background: #e53935; color: white; }\n .fwt-total-row { background: #f8f9fa !important; font-weight: 700; }\n .fwt-total-row td { font-size: 16px; color: var(--fwt-primary); }\n\n \/* Preview Panel *\/\n .fwt-preview-panel { position: sticky; top: 90px; height: fit-content; }\n .fwt-preview-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }\n\n \/* Memo *\/\n .fwt-memo-wrap {\n background: var(--fwt-memo-bg); border: 2px solid var(--fwt-memo-border);\n border-radius: 4px; padding: 30px 25px;\n font-family: 'Georgia', 'Times New Roman', serif;\n color: #1a1a2e; position: relative; box-shadow: 0 2px 10px rgba(0,0,0,0.05);\n }\n .fwt-memo-header { text-align: center; border-bottom: 2px solid var(--fwt-memo-border); padding-bottom: 16px; margin-bottom: 16px; }\n .fwt-memo-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; }\n .fwt-memo-title { font-size: 32px; font-weight: 900; letter-spacing: 2px; margin: 8px 0; text-transform: uppercase; }\n .fwt-memo-prop {\n display: inline-block; background: var(--fwt-memo-border); color: white;\n padding: 4px 20px; border-radius: 20px; font-size: 14px;\n font-style: italic; font-family: 'Georgia', serif; margin: 4px 0;\n }\n .fwt-memo-subtitle { font-size: 15px; margin: 6px 0; }\n .fwt-memo-address { font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }\n .fwt-memo-customer { margin: 16px 0; font-size: 14px; }\n .fwt-memo-field { display: flex; align-items: baseline; margin: 6px 0; gap: 4px; }\n .fwt-memo-field label { font-weight: 600; white-space: nowrap; }\n .fwt-memo-field .fwt-dots { flex: 1; border-bottom: 1px dotted var(--fwt-memo-border); min-width: 60px; height: 14px; }\n .fwt-memo-field .fwt-value { font-weight: 600; padding-left: 4px; }\n .fwt-memo-meta { display: flex; justify-content: space-between; gap: 20px; }\n .fwt-memo-meta .fwt-memo-field { flex: 1; }\n\n .fwt-memo-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }\n .fwt-memo-table th { border: 1.5px solid var(--fwt-memo-border); padding: 8px 6px; font-weight: 700; text-align: center; background: transparent; }\n .fwt-memo-table th.amount-header { padding: 0; }\n .fwt-memo-table th.amount-header div { border-bottom: 1px solid var(--fwt-memo-border); padding: 4px; }\n .fwt-memo-table th.amount-header span { display: inline-block; width: 50%; padding: 4px; }\n .fwt-memo-table th.amount-header span:first-child { border-right: 1px solid var(--fwt-memo-border); }\n .fwt-memo-table td { border: 1.5px solid var(--fwt-memo-border); padding: 8px 6px; text-align: center; height: 36px; vertical-align: middle; }\n .fwt-memo-table td:first-child { width: 45px; }\n .fwt-memo-table td:nth-child(2) { text-align: left; min-width: 140px; }\n .fwt-memo-table td:nth-child(3), .fwt-memo-table td:nth-child(4) { width: 70px; }\n .fwt-memo-table td:nth-child(5), .fwt-memo-table td:nth-child(6) { width: 55px; }\n .fwt-memo-empty-row td { height: 36px; }\n\n .fwt-memo-bottom { display: grid; grid-template-columns: 1fr auto auto auto; border: 1.5px solid var(--fwt-memo-border); border-top: none; font-size: 13px; }\n .fwt-memo-words { padding: 10px; border-right: 1.5px solid var(--fwt-memo-border); display: flex; flex-direction: column; justify-content: center; }\n .fwt-memo-words label { font-weight: 600; margin-bottom: 4px; }\n .fwt-memo-words .fwt-dots { border-bottom: 1px dotted var(--fwt-memo-border); height: 18px; margin: 2px 0; }\n .fwt-memo-total-label { padding: 10px; font-weight: 900; font-size: 18px; display: flex; align-items: center; justify-content: center; border-right: 1.5px solid var(--fwt-memo-border); }\n .fwt-memo-total-rs, .fwt-memo-total-p { min-width: 55px; padding: 10px; text-align: center; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; }\n .fwt-memo-total-rs { border-right: 1.5px solid var(--fwt-memo-border); }\n\n .fwt-memo-signatures { display: flex; justify-content: space-between; margin-top: 30px; padding-top: 10px; }\n .fwt-memo-sign { text-align: center; font-style: italic; font-size: 13px; }\n .fwt-memo-sign .fwt-sign-line { border-bottom: 1px dotted var(--fwt-memo-border); width: 160px; height: 30px; margin-bottom: 6px; }\n\n \/* Settings *\/\n .fwt-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n @media (max-width: 600px) { .fwt-settings-grid { grid-template-columns: 1fr; } }\n .fwt-color-picker { display: flex; align-items: center; gap: 10px; }\n .fwt-color-picker input[type=\"color\"] { width: 44px; height: 44px; border: 2px solid var(--fwt-border); border-radius: var(--fwt-radius-sm); cursor: pointer; padding: 2px; }\n\n \/* Toast *\/\n .fwt-toast-container { position: fixed; top: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; }\n .fwt-toast {\n background: white; border-radius: var(--fwt-radius-sm); padding: 14px 20px;\n box-shadow: 0 10px 40px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 12px;\n min-width: 280px; animation: fwtToastIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n border-left: 4px solid var(--fwt-accent);\n }\n .fwt-toast.fwt-toast-success { border-left-color: #2ecc71; }\n .fwt-toast.fwt-toast-error { border-left-color: #e74c3c; }\n .fwt-toast.fwt-toast-info { border-left-color: #3498db; }\n @keyframes fwtToastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }\n @keyframes fwtToastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(30px); } }\n .fwt-toast-exit { animation: fwtToastOut 0.3s ease forwards; }\n\n \/* Print *\/\n @media print {\n .fwt-header, .fwt-form-panel, .fwt-preview-actions, .fwt-toast-container { display: none !important; }\n .fwt-main { grid-template-columns: 1fr; padding: 0; }\n .fwt-preview-panel { position: static; box-shadow: none; }\n .fwt-memo-wrap { box-shadow: none; border: 2px solid #1a1a2e; page-break-inside: avoid; }\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .fwt-header-inner { flex-direction: column; text-align: center; }\n .fwt-memo-title { font-size: 22px; }\n .fwt-memo-wrap { padding: 20px 15px; }\n .fwt-memo-sign .fwt-sign-line { width: 120px; }\n }\n\n .fwt-section-divider { height: 1px; background: var(--fwt-border); margin: 24px 0; }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"fwt-toast-container\" id=\"fwtToastContainer\"><\/div>\n\n <header class=\"fwt-header\">\n <div class=\"fwt-header-inner\">\n <div class=\"fwt-logo\">\n <div class=\"fwt-logo-icon\">\ud83d\udccb<\/div>\n <div class=\"fwt-logo-text\">\n <h1>Bill Memo Generator<\/h1>\n <span>Professional Cash Memo & Invoice Tool<\/span>\n <\/div>\n <\/div>\n <div class=\"fwt-header-actions\">\n <button class=\"fwt-btn fwt-btn-secondary\" id=\"fwtBtnResetAll\"><span>\u21ba<\/span> Reset All<\/button>\n <button class=\"fwt-btn fwt-btn-primary\" id=\"fwtBtnPrint\"><span>\ud83d\udda8\ufe0f<\/span> Print<\/button>\n <button class=\"fwt-btn fwt-btn-primary\" id=\"fwtBtnDownload\"><span>\ud83d\udcbe<\/span> Save as PDF<\/button>\n <\/div>\n <\/div>\n <\/header>\n\n <main class=\"fwt-main\">\n <div class=\"fwt-form-panel\">\n \n <div class=\"fwt-panel\">\n <div class=\"fwt-panel-header\">\n <h2><span>\ud83c\udfe2<\/span> Business Details<\/h2>\n <\/div>\n <div class=\"fwt-panel-body\">\n <div class=\"fwt-form-row\">\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Business Name<\/label>\n <input type=\"text\" class=\"fwt-input\" id=\"fwtBizName\" value=\"MAA ILA ENTERPRISE\">\n <\/div>\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Proprietor Name<\/label>\n <input type=\"text\" class=\"fwt-input\" id=\"fwtPropName\" value=\"Dilip Kumar De\">\n <\/div>\n <\/div>\n <div class=\"fwt-form-row\">\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Business Type<\/label>\n <input type=\"text\" class=\"fwt-input\" id=\"fwtBizType\" value=\"Distributor of all type of Rice\">\n <\/div>\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Mobile Number<\/label>\n <input type=\"text\" class=\"fwt-input\" id=\"fwtMobile\" value=\"7076361566\">\n <\/div>\n <\/div>\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Address<\/label>\n <input type=\"text\" class=\"fwt-input\" id=\"fwtAddress\" value=\"Rampurchak \u2605 Shyamchak \u2605 Paschim Medinipur\">\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"fwt-section-divider\"><\/div>\n\n \n <div class=\"fwt-panel\">\n <div class=\"fwt-panel-header\">\n <h2><span>\ud83d\udc64<\/span> Customer & Bill Info<\/h2>\n <\/div>\n <div class=\"fwt-panel-body\">\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Customer’s Name<\/label>\n <input type=\"text\" class=\"fwt-input\" id=\"fwtCustomerName\" placeholder=\"Enter customer name\">\n <\/div>\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Address<\/label>\n <textarea class=\"fwt-textarea\" id=\"fwtCustomerAddress\" placeholder=\"Enter customer address\"><\/textarea>\n <\/div>\n <div class=\"fwt-form-row\">\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Bill Number<\/label>\n <input type=\"text\" class=\"fwt-input\" id=\"fwtBillNo\" placeholder=\"Auto-generated\">\n <\/div>\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Lorry Number<\/label>\n <input type=\"text\" class=\"fwt-input\" id=\"fwtLorryNo\" placeholder=\"Enter lorry number\">\n <\/div>\n <\/div>\n <div class=\"fwt-form-row\">\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Date<\/label>\n <input type=\"date\" class=\"fwt-input\" id=\"fwtDate\">\n <\/div>\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Currency Symbol<\/label>\n <select class=\"fwt-select\" id=\"fwtCurrency\">\n <option value=\"\u20b9\">\u20b9 (Indian Rupee)<\/option>\n <option value=\"$\">$ (US Dollar)<\/option>\n <option value=\"\u20ac\">\u20ac (Euro)<\/option>\n <option value=\"\u00a3\">\u00a3 (British Pound)<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"fwt-section-divider\"><\/div>\n\n \n <div class=\"fwt-panel\">\n <div class=\"fwt-panel-header\">\n <h2><span>\ud83d\udce6<\/span> Items<\/h2>\n <button class=\"fwt-btn fwt-btn-primary fwt-btn-sm\" id=\"fwtBtnAddItem\"><span>+<\/span> Add Item<\/button>\n <\/div>\n <div class=\"fwt-panel-body\">\n <div class=\"fwt-items-table-wrap\">\n <table class=\"fwt-items-table\">\n <thead>\n <tr>\n <th>SL.No<\/th>\n <th>Particulars<\/th>\n <th>Quantity<\/th>\n <th>Rate<\/th>\n <th>Amount<\/th>\n <th><\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"fwtItemsBody\"><\/tbody>\n <tfoot>\n <tr class=\"fwt-total-row\">\n <td colspan=\"4\" style=\"text-align:right; padding-right:16px;\">Grand Total:<\/td>\n <td id=\"fwtGrandTotal\" style=\"text-align:right; padding-right:10px;\">0.00<\/td>\n <td><\/td>\n <\/tr>\n <\/tfoot>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"fwt-section-divider\"><\/div>\n\n \n <div class=\"fwt-panel\">\n <div class=\"fwt-panel-header\">\n <h2><span>\ud83c\udfa8<\/span> Appearance<\/h2>\n <\/div>\n <div class=\"fwt-panel-body\">\n <div class=\"fwt-settings-grid\">\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Memo Background<\/label>\n <div class=\"fwt-color-picker\">\n <input type=\"color\" id=\"fwtMemoBg\" value=\"#fffef0\">\n <span id=\"fwtMemoBgLabel\">#fffef0<\/span>\n <\/div>\n <\/div>\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Border Color<\/label>\n <div class=\"fwt-color-picker\">\n <input type=\"color\" id=\"fwtBorderColor\" value=\"#1a1a2e\">\n <span id=\"fwtBorderColorLabel\">#1a1a2e<\/span>\n <\/div>\n <\/div>\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Text Color<\/label>\n <div class=\"fwt-color-picker\">\n <input type=\"color\" id=\"fwtTextColor\" value=\"#1a1a2e\">\n <span id=\"fwtTextColorLabel\">#1a1a2e<\/span>\n <\/div>\n <\/div>\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Memo Paper Size<\/label>\n <select class=\"fwt-select\" id=\"fwtPaperSize\">\n <option value=\"A4\">A4<\/option>\n <option value=\"A5\">A5<\/option>\n <option value=\"Letter\">Letter<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"fwt-preview-panel\">\n <div class=\"fwt-preview-actions\">\n <button class=\"fwt-btn fwt-btn-primary\" id=\"fwtBtnPrintMemo\"><span>\ud83d\udda8\ufe0f<\/span> Print Memo<\/button>\n <button class=\"fwt-btn fwt-btn-outline\" id=\"fwtBtnDownloadMemo\"><span>\ud83d\udcc4<\/span> Download PDF<\/button>\n <\/div>\n\n <div class=\"fwt-memo-wrap\" id=\"fwtMemoWrap\">\n <div class=\"fwt-memo-header\">\n <div class=\"fwt-memo-top\">\n <span>No – <strong id=\"fwtMemoBillNo\"><\/strong><\/span>\n <span>Bill\/Cash Memo<\/span>\n <span>Mob – <strong id=\"fwtMemoMobile\">7076361566<\/strong><\/span>\n <\/div>\n <div class=\"fwt-memo-title\" id=\"fwtMemoBizName\">MAA ILA ENTERPRISE<\/div>\n <div class=\"fwt-memo-prop\" id=\"fwtMemoPropName\">Prop – Dilip Kumar De<\/div>\n <div class=\"fwt-memo-subtitle\" id=\"fwtMemoBizType\">Distributor of all type of Rice<\/div>\n <div class=\"fwt-memo-address\" id=\"fwtMemoAddress\">Rampurchak \u2605 Shyamchak \u2605 Paschim Medinipur<\/div>\n <\/div>\n\n <div class=\"fwt-memo-customer\">\n <div class=\"fwt-memo-field\">\n <label>Customer’s Name<\/label>\n <div class=\"fwt-dots\"><\/div>\n <span class=\"fwt-value\" id=\"fwtMemoCustomerName\"><\/span>\n <\/div>\n <div class=\"fwt-memo-field\">\n <label>Address<\/label>\n <div class=\"fwt-dots\"><\/div>\n <span class=\"fwt-value\" id=\"fwtMemoCustomerAddress\"><\/span>\n <\/div>\n <div class=\"fwt-memo-meta\">\n <div class=\"fwt-memo-field\">\n <label>Lorry No.<\/label>\n <div class=\"fwt-dots\"><\/div>\n <span class=\"fwt-value\" id=\"fwtMemoLorryNo\"><\/span>\n <\/div>\n <div class=\"fwt-memo-field\">\n <label>Date<\/label>\n <div class=\"fwt-dots\"><\/div>\n <span class=\"fwt-value\" id=\"fwtMemoDate\"><\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <table class=\"fwt-memo-table\">\n <thead>\n <tr>\n <th>SL.No<\/th>\n <th>Particulars<\/th>\n <th>Quantity<\/th>\n <th>Rate<\/th>\n <th class=\"amount-header\">\n <div>Amount<\/div>\n <span>Rs.<\/span><span>P<\/span>\n <\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"fwtMemoItemsBody\"><\/tbody>\n <\/table>\n\n <div class=\"fwt-memo-bottom\">\n <div class=\"fwt-memo-words\">\n <label>Amount in Word<\/label>\n <div class=\"fwt-dots\" id=\"fwtMemoWords1\"><\/div>\n <div class=\"fwt-dots\" id=\"fwtMemoWords2\"><\/div>\n <\/div>\n <div class=\"fwt-memo-total-label\">Total<\/div>\n <div class=\"fwt-memo-total-rs\" id=\"fwtMemoTotalRs\">0<\/div>\n <div class=\"fwt-memo-total-p\" id=\"fwtMemoTotalP\">00<\/div>\n <\/div>\n\n <div class=\"fwt-memo-signatures\">\n <div class=\"fwt-memo-sign\">\n <div class=\"fwt-sign-line\"><\/div>\n <div>Signature of Customer’s<\/div>\n <\/div>\n <div class=\"fwt-memo-sign\">\n <div class=\"fwt-sign-line\"><\/div>\n <div>Signature of Proprietor<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n\n <script>\n (function() {\n 'use strict';\n\n var fwtItems = [];\n var fwtItemCounter = 0;\n\n var fwtEls = {\n toastContainer: document.getElementById('fwtToastContainer'),\n itemsBody: document.getElementById('fwtItemsBody'),\n grandTotal: document.getElementById('fwtGrandTotal'),\n memoWrap: document.getElementById('fwtMemoWrap'),\n memoItemsBody: document.getElementById('fwtMemoItemsBody'),\n memoTotalRs: document.getElementById('fwtMemoTotalRs'),\n memoTotalP: document.getElementById('fwtMemoTotalP'),\n memoWords1: document.getElementById('fwtMemoWords1'),\n memoWords2: document.getElementById('fwtMemoWords2'),\n bizName: document.getElementById('fwtBizName'),\n propName: document.getElementById('fwtPropName'),\n bizType: document.getElementById('fwtBizType'),\n mobile: document.getElementById('fwtMobile'),\n address: document.getElementById('fwtAddress'),\n customerName: document.getElementById('fwtCustomerName'),\n customerAddress: document.getElementById('fwtCustomerAddress'),\n billNo: document.getElementById('fwtBillNo'),\n lorryNo: document.getElementById('fwtLorryNo'),\n date: document.getElementById('fwtDate'),\n currency: document.getElementById('fwtCurrency'),\n memoBg: document.getElementById('fwtMemoBg'),\n borderColor: document.getElementById('fwtBorderColor'),\n textColor: document.getElementById('fwtTextColor'),\n paperSize: document.getElementById('fwtPaperSize'),\n memoBizName: document.getElementById('fwtMemoBizName'),\n memoPropName: document.getElementById('fwtMemoPropName'),\n memoBizType: document.getElementById('fwtMemoBizType'),\n memoAddress: document.getElementById('fwtMemoAddress'),\n memoMobile: document.getElementById('fwtMemoMobile'),\n memoBillNo: document.getElementById('fwtMemoBillNo'),\n memoCustomerName: document.getElementById('fwtMemoCustomerName'),\n memoCustomerAddress: document.getElementById('fwtMemoCustomerAddress'),\n memoLorryNo: document.getElementById('fwtMemoLorryNo'),\n memoDate: document.getElementById('fwtMemoDate'),\n memoBgLabel: document.getElementById('fwtMemoBgLabel'),\n borderColorLabel: document.getElementById('fwtBorderColorLabel'),\n textColorLabel: document.getElementById('fwtTextColorLabel'),\n btnAddItem: document.getElementById('fwtBtnAddItem'),\n btnResetAll: document.getElementById('fwtBtnResetAll'),\n btnPrint: document.getElementById('fwtBtnPrint'),\n btnPrintMemo: document.getElementById('fwtBtnPrintMemo'),\n btnDownload: document.getElementById('fwtBtnDownload'),\n btnDownloadMemo: document.getElementById('fwtBtnDownloadMemo')\n };\n\n function fwtShowToast(message, type) {\n type = type || 'success';\n var toast = document.createElement('div');\n toast.className = 'fwt-toast fwt-toast-' + type;\n toast.innerHTML = '<span>' + (type === 'success' ? '\u2705' : type === 'error' ? '\u274c' : '\u2139\ufe0f') + '<\/span><div>' + message + '<\/div>';\n fwtEls.toastContainer.appendChild(toast);\n setTimeout(function() {\n toast.classList.add('fwt-toast-exit');\n setTimeout(function() { toast.remove(); }, 300);\n }, 3000);\n }\n\n function fwtGenerateBillNo() {\n var rand = Math.floor(1000 + Math.random() * 9000);\n fwtEls.billNo.value = 'MIE-' + new Date().getFullYear() + '-' + rand;\n }\n\n function fwtNumberToWords(num) {\n if (num === 0) return 'Zero';\n var a = ['', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve', 'Thirteen', 'Fourteen', 'Fifteen', 'Sixteen', 'Seventeen', 'Eighteen', 'Nineteen'];\n var b = ['', '', 'Twenty', 'Thirty', 'Forty', 'Fifty', 'Sixty', 'Seventy', 'Eighty', 'Ninety'];\n\n function inWords(n) {\n if ((n = n.toString()).length > 9) return 'Overflow';\n var nStr = ('000000000' + n).substr(-9, 9);\n var crores = parseInt(nStr.substr(0, 2), 10);\n var lakhs = parseInt(nStr.substr(2, 2), 10);\n var thousands = parseInt(nStr.substr(4, 2), 10);\n var hundreds = parseInt(nStr.substr(6, 1), 10);\n var rest = parseInt(nStr.substr(7, 2), 10);\n\n var str = '';\n if (crores) str += (a[crores] || (b[crores[0]] + ' ' + a[crores[1]])) + ' Crore ';\n if (lakhs) str += (a[lakhs] || (b[lakhs[0]] + ' ' + a[lakhs[1]])) + ' Lakh ';\n if (thousands) str += (a[thousands] || (b[thousands[0]] + ' ' + a[thousands[1]])) + ' Thousand ';\n if (hundreds) str += a[hundreds] + ' Hundred ';\n if (rest) {\n if (str !== '') str += 'and ';\n str += (a[rest] || (b[rest[0]] + ' ' + a[rest[1]]));\n }\n return str.trim();\n }\n\n var parts = num.toFixed(2).split('.');\n var whole = parseInt(parts[0], 10);\n var paisa = parseInt(parts[1], 10);\n var res = inWords(whole) + ' Only';\n return res;\n }\n\n function fwtAddItem(particular, qty, rate) {\n fwtItemCounter++;\n var item = {\n id: fwtItemCounter,\n particular: particular || '',\n qty: qty !== undefined ? qty : 1,\n rate: rate !== undefined ? rate : 0\n };\n fwtItems.push(item);\n fwtRenderItems();\n fwtUpdatePreview();\n }\n\n function fwtRemoveItem(id) {\n fwtItems = fwtItems.filter(function(i) { return i.id !== id; });\n fwtRenderItems();\n fwtUpdatePreview();\n }\n\n function fwtRenderItems() {\n fwtEls.itemsBody.innerHTML = '';\n fwtItems.forEach(function(item, index) {\n var tr = document.createElement('tr');\n tr.innerHTML = `\n <td style=\"text-align:center;\">${index + 1}<\/td>\n <td><input type=\"text\" class=\"fwt-input fwt-part-input\" data-id=\"${item.id}\" value=\"${item.particular}\" placeholder=\"Item description\"><\/td>\n <td><input type=\"number\" class=\"fwt-input fwt-qty-input\" data-id=\"${item.id}\" value=\"${item.qty}\" min=\"0\" step=\"any\"><\/td>\n <td><input type=\"number\" class=\"fwt-input fwt-rate-input\" data-id=\"${item.id}\" value=\"${item.rate}\" min=\"0\" step=\"any\"><\/td>\n <td class=\"fwt-item-amount\" style=\"text-align:right; font-weight:600; padding-right:10px;\">${(item.qty * item.rate).toFixed(2)}<\/td>\n <td><button type=\"button\" class=\"fwt-remove-btn\" data-id=\"${item.id}\">\u00d7<\/button><\/td>\n `;\n fwtEls.itemsBody.appendChild(tr);\n });\n\n \/\/ Bind table inputs\n var partInputs = fwtEls.itemsBody.querySelectorAll('.fwt-part-input');\n partInputs.forEach(function(input) {\n input.addEventListener('input', function(e) {\n var id = parseInt(e.target.dataset.id, 10);\n var found = fwtItems.find(function(i) { return i.id === id; });\n if (found) { found.particular = e.target.value; fwtUpdatePreview(); }\n });\n });\n\n var qtyInputs = fwtEls.itemsBody.querySelectorAll('.fwt-qty-input');\n qtyInputs.forEach(function(input) {\n input.addEventListener('input', function(e) {\n var id = parseInt(e.target.dataset.id, 10);\n var found = fwtItems.find(function(i) { return i.id === id; });\n if (found) {\n found.qty = parseFloat(e.target.value) || 0;\n e.target.closest('tr').querySelector('.fwt-item-amount').textContent = (found.qty * found.rate).toFixed(2);\n fwtUpdatePreview();\n }\n });\n });\n\n var rateInputs = fwtEls.itemsBody.querySelectorAll('.fwt-rate-input');\n rateInputs.forEach(function(input) {\n input.addEventListener('input', function(e) {\n var id = parseInt(e.target.dataset.id, 10);\n var found = fwtItems.find(function(i) { return i.id === id; });\n if (found) {\n found.rate = parseFloat(e.target.value) || 0;\n e.target.closest('tr').querySelector('.fwt-item-amount').textContent = (found.qty * found.rate).toFixed(2);\n fwtUpdatePreview();\n }\n });\n });\n\n var removeBtns = fwtEls.itemsBody.querySelectorAll('.fwt-remove-btn');\n removeBtns.forEach(function(btn) {\n btn.addEventListener('click', function(e) {\n var id = parseInt(e.currentTarget.dataset.id, 10);\n fwtRemoveItem(id);\n });\n });\n }\n\n function fwtUpdatePreview() {\n \/\/ Business Details\n fwtEls.memoBizName.textContent = fwtEls.bizName.value || 'BUSINESS NAME';\n fwtEls.memoPropName.textContent = 'Prop - ' + (fwtEls.propName.value || '');\n fwtEls.memoBizType.textContent = fwtEls.bizType.value || '';\n fwtEls.memoAddress.textContent = fwtEls.address.value || '';\n fwtEls.memoMobile.textContent = fwtEls.mobile.value || '';\n fwtEls.memoBillNo.textContent = fwtEls.billNo.value || '';\n\n \/\/ Customer & Bill Info\n fwtEls.memoCustomerName.textContent = fwtEls.customerName.value || '';\n fwtEls.memoCustomerAddress.textContent = fwtEls.customerAddress.value || '';\n fwtEls.memoLorryNo.textContent = fwtEls.lorryNo.value || '';\n fwtEls.memoDate.textContent = fwtEls.date.value ? new Date(fwtEls.date.value).toLocaleDateString() : '';\n\n \/\/ Items table in preview\n fwtEls.memoItemsBody.innerHTML = '';\n var grandTotal = 0;\n\n fwtItems.forEach(function(item, index) {\n var amt = item.qty * item.rate;\n grandTotal += amt;\n var tr = document.createElement('tr');\n tr.innerHTML = `\n <td>${index + 1}<\/td>\n <td>${item.particular}<\/td>\n <td>${item.qty}<\/td>\n <td>${item.rate.toFixed(2)}<\/td>\n <td>${Math.floor(amt)}<\/td>\n <td>${Math.round((amt % 1) * 100).toString().padStart(2, '0')}<\/td>\n `;\n fwtEls.memoItemsBody.appendChild(tr);\n });\n\n \/\/ Fill empty rows to maintain memo look (at least 5 rows)\n var minRows = 5;\n for (var i = fwtItems.length; i < minRows; i++) {\n var emptyTr = document.createElement('tr');\n emptyTr.className = 'fwt-memo-empty-row';\n emptyTr.innerHTML = `\n <td>${i + 1}<\/td>\n <td><\/td>\n <td><\/td>\n <td><\/td>\n <td><\/td>\n <td><\/td>\n `;\n fwtEls.memoItemsBody.appendChild(emptyTr);\n }\n\n fwtEls.grandTotal.textContent = grandTotal.toFixed(2);\n var totalRs = Math.floor(grandTotal);\n var totalP = Math.round((grandTotal % 1) * 100);\n\n fwtEls.memoTotalRs.textContent = totalRs;\n fwtEls.memoTotalP.textContent = totalP.toString().padStart(2, '0');\n\n var words = fwtNumberToWords(grandTotal);\n fwtEls.memoWords1.textContent = words;\n fwtEls.memoWords2.textContent = '';\n\n \/\/ Apply Appearance Settings\n var bg = fwtEls.memoBg.value;\n var border = fwtEls.borderColor.value;\n var text = fwtEls.textColor.value;\n\n fwtEls.memoBgLabel.textContent = bg;\n fwtEls.borderColorLabel.textContent = border;\n fwtEls.textColorLabel.textContent = text;\n\n fwtEls.memoWrap.style.backgroundColor = bg;\n fwtEls.memoWrap.style.borderColor = border;\n fwtEls.memoWrap.style.color = text;\n }\n\n function fwtResetAll() {\n if (confirm('Are you sure you want to reset all fields and items?')) {\n fwtEls.bizName.value = 'MAA ILA ENTERPRISE';\n fwtEls.propName.value = 'Dilip Kumar De';\n fwtEls.bizType.value = 'Distributor of all type of Rice';\n fwtEls.mobile.value = '7076361566';\n fwtEls.address.value = 'Rampurchak \u2605 Shyamchak \u2605 Paschim Medinipur';\n fwtEls.customerName.value = '';\n fwtEls.customerAddress.value = '';\n fwtEls.lorryNo.value = '';\n fwtGenerateBillNo();\n fwtEls.date.value = new Date().toISOString().split('T')[0];\n fwtEls.currency.value = '\u20b9';\n fwtEls.memoBg.value = '#fffef0';\n fwtEls.borderColor.value = '#1a1a2e';\n fwtEls.textColor.value = '#1a1a2e';\n fwtEls.paperSize.value = 'A4';\n\n fwtItems = [];\n fwtAddItem('Basmati Rice', 10, 85);\n fwtAddItem('Miniket Rice', 25, 48);\n fwtAddItem('Gobindobhog Rice', 5, 110);\n\n fwtUpdatePreview();\n fwtShowToast('All fields reset successfully!', 'info');\n }\n }\n\n function fwtInitEvents() {\n var allInputs = document.querySelectorAll('input, select, textarea');\n allInputs.forEach(function(el) {\n el.addEventListener('input', fwtUpdatePreview);\n el.addEventListener('change', fwtUpdatePreview);\n });\n\n fwtEls.btnAddItem.addEventListener('click', function() {\n fwtAddItem('', 1, 0);\n fwtShowToast('New item added', 'success');\n });\n\n fwtEls.btnResetAll.addEventListener('click', fwtResetAll);\n\n var handlePrint = function() {\n window.print();\n };\n\n fwtEls.btnPrint.addEventListener('click', handlePrint);\n fwtEls.btnPrintMemo.addEventListener('click', handlePrint);\n\n var handleDownload = function() {\n window.print();\n fwtShowToast('Use \"Save as PDF\" from your print dialog', 'info');\n };\n\n fwtEls.btnDownload.addEventListener('click', handleDownload);\n fwtEls.btnDownloadMemo.addEventListener('click', handleDownload);\n }\n\n \/\/ Initialize App\n fwtGenerateBillNo();\n fwtEls.date.value = new Date().toISOString().split('T')[0];\n fwtAddItem('Basmati Rice', 10, 85);\n fwtAddItem('Miniket Rice', 25, 48);\n fwtAddItem('Gobindobhog Rice', 5, 110);\n fwtInitEvents();\n fwtUpdatePreview();\n\n })();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Bill\/Cash Memo Generator \ud83d\udccb Bill Memo Generator Professional Cash Memo & Invoice Tool \u21ba Reset All \ud83d\udda8\ufe0f Print \ud83d\udcbe Save as PDF \ud83c\udfe2 Business Details Business Name Proprietor Name Business Type Mobile Number Address \ud83d\udc64 Customer & Bill Info Customer’s Name Address Bill Number Lorry Number Date Currency Symbol \u20b9 (Indian Rupee)$ (US Dollar)\u20ac (Euro)\u00a3 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-273","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/273","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=273"}],"version-history":[{"count":21,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/273\/revisions"}],"predecessor-version":[{"id":755,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/273\/revisions\/755"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":273,"date":"2026-07-10T12:02:42","date_gmt":"2026-07-10T12:02:42","guid":{"rendered":"https:\/\/freewebtools.co.in\/?page_id=273"},"modified":"2026-07-28T16:26:47","modified_gmt":"2026-07-28T16:26:47","slug":"simple-bill-generator","status":"publish","type":"page","link":"https:\/\/freewebtools.co.in\/index.php\/simple-bill-generator\/","title":{"rendered":"Simple Bill Generator"},"content":{"rendered":"\n\n\n\n \n \n Bill\/Cash Memo Generator<\/title>\n <style>\n :root {\n --fwt-primary: #1a1a2e;\n --fwt-primary-light: #16213e;\n --fwt-accent: #e94560;\n --fwt-accent-hover: #c73e54;\n --fwt-bg: #f8f9fa;\n --fwt-card-bg: #ffffff;\n --fwt-text: #2d3436;\n --fwt-text-light: #636e72;\n --fwt-border: #dfe6e9;\n --fwt-shadow: 0 4px 20px rgba(0,0,0,0.08);\n --fwt-shadow-hover: 0 8px 30px rgba(0,0,0,0.12);\n --fwt-radius: 16px;\n --fwt-radius-sm: 10px;\n --fwt-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n --fwt-memo-bg: #fffef0;\n --fwt-memo-border: #1a1a2e;\n }\n\n *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\n\n body {\n font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n background: var(--fwt-bg);\n color: var(--fwt-text);\n min-height: 100vh;\n line-height: 1.6;\n }\n\n \/* Header *\/\n .fwt-header {\n background: linear-gradient(135deg, var(--fwt-primary), var(--fwt-primary-light));\n color: white;\n padding: 20px 0;\n box-shadow: var(--fwt-shadow);\n position: sticky;\n top: 0;\n z-index: 100;\n }\n .fwt-header-inner {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 24px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 12px;\n }\n .fwt-logo { display: flex; align-items: center; gap: 12px; }\n .fwt-logo-icon {\n width: 44px; height: 44px; background: var(--fwt-accent);\n border-radius: 12px; display: flex; align-items: center; justify-content: center;\n font-size: 22px;\n }\n .fwt-logo-text h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.5px; }\n .fwt-logo-text span { font-size: 12px; opacity: 0.8; }\n .fwt-header-actions { display: flex; gap: 10px; flex-wrap: wrap; }\n\n \/* Buttons *\/\n .fwt-btn {\n display: inline-flex; align-items: center; justify-content: center; gap: 8px;\n padding: 10px 20px; border-radius: var(--fwt-radius-sm); border: none;\n font-size: 14px; font-weight: 600; cursor: pointer;\n transition: var(--fwt-transition); text-decoration: none;\n position: relative; overflow: hidden;\n }\n .fwt-btn-primary {\n background: var(--fwt-accent); color: white;\n box-shadow: 0 4px 15px rgba(233, 69, 96, 0.3);\n }\n .fwt-btn-primary:hover { background: var(--fwt-accent-hover); transform: translateY(-2px); }\n .fwt-btn-secondary {\n background: rgba(255,255,255,0.1); color: white;\n border: 1px solid rgba(255,255,255,0.2);\n }\n .fwt-btn-secondary:hover { background: rgba(255,255,255,0.2); }\n .fwt-btn-outline {\n background: transparent; color: var(--fwt-primary); border: 2px solid var(--fwt-border);\n }\n .fwt-btn-outline:hover { border-color: var(--fwt-accent); color: var(--fwt-accent); }\n .fwt-btn-danger { background: #ff6b6b; color: white; }\n .fwt-btn-danger:hover { background: #ee5a5a; }\n .fwt-btn-sm { padding: 6px 14px; font-size: 13px; }\n .fwt-btn:active { transform: scale(0.97); }\n\n \/* Main Layout *\/\n .fwt-main {\n max-width: 1400px; margin: 0 auto; padding: 30px 24px;\n display: grid; grid-template-columns: 1fr 1fr; gap: 30px;\n }\n @media (max-width: 1024px) { .fwt-main { grid-template-columns: 1fr; } }\n\n \/* Panels *\/\n .fwt-panel {\n background: var(--fwt-card-bg); border-radius: var(--fwt-radius);\n box-shadow: var(--fwt-shadow); overflow: hidden; margin-bottom: 20px;\n }\n .fwt-panel-header {\n padding: 20px 24px; border-bottom: 1px solid var(--fwt-border);\n display: flex; justify-content: space-between; align-items: center;\n }\n .fwt-panel-header h2 { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; }\n .fwt-panel-body { padding: 24px; }\n\n \/* Form Elements *\/\n .fwt-form-group { margin-bottom: 20px; }\n .fwt-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n @media (max-width: 600px) { .fwt-form-row { grid-template-columns: 1fr; } }\n .fwt-label {\n display: block; font-size: 13px; font-weight: 600;\n color: var(--fwt-text-light); margin-bottom: 6px;\n text-transform: uppercase; letter-spacing: 0.5px;\n }\n .fwt-input, .fwt-select, .fwt-textarea {\n width: 100%; padding: 12px 16px; border: 2px solid var(--fwt-border);\n border-radius: var(--fwt-radius-sm); font-size: 15px; font-family: inherit;\n transition: var(--fwt-transition); background: white;\n }\n .fwt-input:focus, .fwt-select:focus, .fwt-textarea:focus {\n outline: none; border-color: var(--fwt-accent);\n box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.1);\n }\n .fwt-textarea { min-height: 60px; resize: vertical; }\n\n \/* Items Table *\/\n .fwt-items-table-wrap { overflow-x: auto; border-radius: var(--fwt-radius-sm); border: 1px solid var(--fwt-border); }\n .fwt-items-table { width: 100%; border-collapse: collapse; min-width: 500px; }\n .fwt-items-table th {\n background: var(--fwt-primary); color: white; padding: 12px 10px;\n font-size: 13px; font-weight: 600; text-transform: uppercase;\n letter-spacing: 0.5px; text-align: left;\n }\n .fwt-items-table th:last-child, .fwt-items-table td:last-child { text-align: center; width: 50px; }\n .fwt-items-table td { padding: 10px; border-bottom: 1px solid var(--fwt-border); vertical-align: middle; }\n .fwt-items-table tr:hover td { background: #f8f9fa; }\n .fwt-items-table .fwt-input { padding: 8px 10px; font-size: 14px; }\n .fwt-items-table input[type=\"number\"] { text-align: right; }\n .fwt-remove-btn {\n width: 32px; height: 32px; border-radius: 8px; border: none;\n background: #ffebee; color: #e53935; cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n transition: var(--fwt-transition); font-size: 16px;\n }\n .fwt-remove-btn:hover { background: #e53935; color: white; }\n .fwt-total-row { background: #f8f9fa !important; font-weight: 700; }\n .fwt-total-row td { font-size: 16px; color: var(--fwt-primary); }\n\n \/* Preview Panel *\/\n .fwt-preview-panel { position: sticky; top: 90px; height: fit-content; }\n .fwt-preview-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }\n\n \/* Memo *\/\n .fwt-memo-wrap {\n background: var(--fwt-memo-bg); border: 2px solid var(--fwt-memo-border);\n border-radius: 4px; padding: 30px 25px;\n font-family: 'Georgia', 'Times New Roman', serif;\n color: #1a1a2e; position: relative; box-shadow: 0 2px 10px rgba(0,0,0,0.05);\n }\n .fwt-memo-header { text-align: center; border-bottom: 2px solid var(--fwt-memo-border); padding-bottom: 16px; margin-bottom: 16px; }\n .fwt-memo-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; }\n .fwt-memo-title { font-size: 32px; font-weight: 900; letter-spacing: 2px; margin: 8px 0; text-transform: uppercase; }\n .fwt-memo-prop {\n display: inline-block; background: var(--fwt-memo-border); color: white;\n padding: 4px 20px; border-radius: 20px; font-size: 14px;\n font-style: italic; font-family: 'Georgia', serif; margin: 4px 0;\n }\n .fwt-memo-subtitle { font-size: 15px; margin: 6px 0; }\n .fwt-memo-address { font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }\n .fwt-memo-customer { margin: 16px 0; font-size: 14px; }\n .fwt-memo-field { display: flex; align-items: baseline; margin: 6px 0; gap: 4px; }\n .fwt-memo-field label { font-weight: 600; white-space: nowrap; }\n .fwt-memo-field .fwt-dots { flex: 1; border-bottom: 1px dotted var(--fwt-memo-border); min-width: 60px; height: 14px; }\n .fwt-memo-field .fwt-value { font-weight: 600; padding-left: 4px; }\n .fwt-memo-meta { display: flex; justify-content: space-between; gap: 20px; }\n .fwt-memo-meta .fwt-memo-field { flex: 1; }\n\n .fwt-memo-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }\n .fwt-memo-table th { border: 1.5px solid var(--fwt-memo-border); padding: 8px 6px; font-weight: 700; text-align: center; background: transparent; }\n .fwt-memo-table th.amount-header { padding: 0; }\n .fwt-memo-table th.amount-header div { border-bottom: 1px solid var(--fwt-memo-border); padding: 4px; }\n .fwt-memo-table th.amount-header span { display: inline-block; width: 50%; padding: 4px; }\n .fwt-memo-table th.amount-header span:first-child { border-right: 1px solid var(--fwt-memo-border); }\n .fwt-memo-table td { border: 1.5px solid var(--fwt-memo-border); padding: 8px 6px; text-align: center; height: 36px; vertical-align: middle; }\n .fwt-memo-table td:first-child { width: 45px; }\n .fwt-memo-table td:nth-child(2) { text-align: left; min-width: 140px; }\n .fwt-memo-table td:nth-child(3), .fwt-memo-table td:nth-child(4) { width: 70px; }\n .fwt-memo-table td:nth-child(5), .fwt-memo-table td:nth-child(6) { width: 55px; }\n .fwt-memo-empty-row td { height: 36px; }\n\n .fwt-memo-bottom { display: grid; grid-template-columns: 1fr auto auto auto; border: 1.5px solid var(--fwt-memo-border); border-top: none; font-size: 13px; }\n .fwt-memo-words { padding: 10px; border-right: 1.5px solid var(--fwt-memo-border); display: flex; flex-direction: column; justify-content: center; }\n .fwt-memo-words label { font-weight: 600; margin-bottom: 4px; }\n .fwt-memo-words .fwt-dots { border-bottom: 1px dotted var(--fwt-memo-border); height: 18px; margin: 2px 0; }\n .fwt-memo-total-label { padding: 10px; font-weight: 900; font-size: 18px; display: flex; align-items: center; justify-content: center; border-right: 1.5px solid var(--fwt-memo-border); }\n .fwt-memo-total-rs, .fwt-memo-total-p { min-width: 55px; padding: 10px; text-align: center; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; }\n .fwt-memo-total-rs { border-right: 1.5px solid var(--fwt-memo-border); }\n\n .fwt-memo-signatures { display: flex; justify-content: space-between; margin-top: 30px; padding-top: 10px; }\n .fwt-memo-sign { text-align: center; font-style: italic; font-size: 13px; }\n .fwt-memo-sign .fwt-sign-line { border-bottom: 1px dotted var(--fwt-memo-border); width: 160px; height: 30px; margin-bottom: 6px; }\n\n \/* Settings *\/\n .fwt-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n @media (max-width: 600px) { .fwt-settings-grid { grid-template-columns: 1fr; } }\n .fwt-color-picker { display: flex; align-items: center; gap: 10px; }\n .fwt-color-picker input[type=\"color\"] { width: 44px; height: 44px; border: 2px solid var(--fwt-border); border-radius: var(--fwt-radius-sm); cursor: pointer; padding: 2px; }\n\n \/* Toast *\/\n .fwt-toast-container { position: fixed; top: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; }\n .fwt-toast {\n background: white; border-radius: var(--fwt-radius-sm); padding: 14px 20px;\n box-shadow: 0 10px 40px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 12px;\n min-width: 280px; animation: fwtToastIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n border-left: 4px solid var(--fwt-accent);\n }\n .fwt-toast.fwt-toast-success { border-left-color: #2ecc71; }\n .fwt-toast.fwt-toast-error { border-left-color: #e74c3c; }\n .fwt-toast.fwt-toast-info { border-left-color: #3498db; }\n @keyframes fwtToastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }\n @keyframes fwtToastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(30px); } }\n .fwt-toast-exit { animation: fwtToastOut 0.3s ease forwards; }\n\n \/* Print *\/\n @media print {\n .fwt-header, .fwt-form-panel, .fwt-preview-actions, .fwt-toast-container { display: none !important; }\n .fwt-main { grid-template-columns: 1fr; padding: 0; }\n .fwt-preview-panel { position: static; box-shadow: none; }\n .fwt-memo-wrap { box-shadow: none; border: 2px solid #1a1a2e; page-break-inside: avoid; }\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .fwt-header-inner { flex-direction: column; text-align: center; }\n .fwt-memo-title { font-size: 22px; }\n .fwt-memo-wrap { padding: 20px 15px; }\n .fwt-memo-sign .fwt-sign-line { width: 120px; }\n }\n\n .fwt-section-divider { height: 1px; background: var(--fwt-border); margin: 24px 0; }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"fwt-toast-container\" id=\"fwtToastContainer\"><\/div>\n\n <header class=\"fwt-header\">\n <div class=\"fwt-header-inner\">\n <div class=\"fwt-logo\">\n <div class=\"fwt-logo-icon\">\ud83d\udccb<\/div>\n <div class=\"fwt-logo-text\">\n <h1>Bill Memo Generator<\/h1>\n <span>Professional Cash Memo & Invoice Tool<\/span>\n <\/div>\n <\/div>\n <div class=\"fwt-header-actions\">\n <button class=\"fwt-btn fwt-btn-secondary\" id=\"fwtBtnResetAll\"><span>\u21ba<\/span> Reset All<\/button>\n <button class=\"fwt-btn fwt-btn-primary\" id=\"fwtBtnPrint\"><span>\ud83d\udda8\ufe0f<\/span> Print<\/button>\n <button class=\"fwt-btn fwt-btn-primary\" id=\"fwtBtnDownload\"><span>\ud83d\udcbe<\/span> Save as PDF<\/button>\n <\/div>\n <\/div>\n <\/header>\n\n <main class=\"fwt-main\">\n <div class=\"fwt-form-panel\">\n \n <div class=\"fwt-panel\">\n <div class=\"fwt-panel-header\">\n <h2><span>\ud83c\udfe2<\/span> Business Details<\/h2>\n <\/div>\n <div class=\"fwt-panel-body\">\n <div class=\"fwt-form-row\">\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Business Name<\/label>\n <input type=\"text\" class=\"fwt-input\" id=\"fwtBizName\" value=\"MAA ILA ENTERPRISE\">\n <\/div>\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Proprietor Name<\/label>\n <input type=\"text\" class=\"fwt-input\" id=\"fwtPropName\" value=\"Dilip Kumar De\">\n <\/div>\n <\/div>\n <div class=\"fwt-form-row\">\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Business Type<\/label>\n <input type=\"text\" class=\"fwt-input\" id=\"fwtBizType\" value=\"Distributor of all type of Rice\">\n <\/div>\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Mobile Number<\/label>\n <input type=\"text\" class=\"fwt-input\" id=\"fwtMobile\" value=\"7076361566\">\n <\/div>\n <\/div>\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Address<\/label>\n <input type=\"text\" class=\"fwt-input\" id=\"fwtAddress\" value=\"Rampurchak \u2605 Shyamchak \u2605 Paschim Medinipur\">\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"fwt-section-divider\"><\/div>\n\n \n <div class=\"fwt-panel\">\n <div class=\"fwt-panel-header\">\n <h2><span>\ud83d\udc64<\/span> Customer & Bill Info<\/h2>\n <\/div>\n <div class=\"fwt-panel-body\">\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Customer’s Name<\/label>\n <input type=\"text\" class=\"fwt-input\" id=\"fwtCustomerName\" placeholder=\"Enter customer name\">\n <\/div>\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Address<\/label>\n <textarea class=\"fwt-textarea\" id=\"fwtCustomerAddress\" placeholder=\"Enter customer address\"><\/textarea>\n <\/div>\n <div class=\"fwt-form-row\">\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Bill Number<\/label>\n <input type=\"text\" class=\"fwt-input\" id=\"fwtBillNo\" placeholder=\"Auto-generated\">\n <\/div>\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Lorry Number<\/label>\n <input type=\"text\" class=\"fwt-input\" id=\"fwtLorryNo\" placeholder=\"Enter lorry number\">\n <\/div>\n <\/div>\n <div class=\"fwt-form-row\">\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Date<\/label>\n <input type=\"date\" class=\"fwt-input\" id=\"fwtDate\">\n <\/div>\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Currency Symbol<\/label>\n <select class=\"fwt-select\" id=\"fwtCurrency\">\n <option value=\"\u20b9\">\u20b9 (Indian Rupee)<\/option>\n <option value=\"$\">$ (US Dollar)<\/option>\n <option value=\"\u20ac\">\u20ac (Euro)<\/option>\n <option value=\"\u00a3\">\u00a3 (British Pound)<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"fwt-section-divider\"><\/div>\n\n \n <div class=\"fwt-panel\">\n <div class=\"fwt-panel-header\">\n <h2><span>\ud83d\udce6<\/span> Items<\/h2>\n <button class=\"fwt-btn fwt-btn-primary fwt-btn-sm\" id=\"fwtBtnAddItem\"><span>+<\/span> Add Item<\/button>\n <\/div>\n <div class=\"fwt-panel-body\">\n <div class=\"fwt-items-table-wrap\">\n <table class=\"fwt-items-table\">\n <thead>\n <tr>\n <th>SL.No<\/th>\n <th>Particulars<\/th>\n <th>Quantity<\/th>\n <th>Rate<\/th>\n <th>Amount<\/th>\n <th><\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"fwtItemsBody\"><\/tbody>\n <tfoot>\n <tr class=\"fwt-total-row\">\n <td colspan=\"4\" style=\"text-align:right; padding-right:16px;\">Grand Total:<\/td>\n <td id=\"fwtGrandTotal\" style=\"text-align:right; padding-right:10px;\">0.00<\/td>\n <td><\/td>\n <\/tr>\n <\/tfoot>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"fwt-section-divider\"><\/div>\n\n \n <div class=\"fwt-panel\">\n <div class=\"fwt-panel-header\">\n <h2><span>\ud83c\udfa8<\/span> Appearance<\/h2>\n <\/div>\n <div class=\"fwt-panel-body\">\n <div class=\"fwt-settings-grid\">\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Memo Background<\/label>\n <div class=\"fwt-color-picker\">\n <input type=\"color\" id=\"fwtMemoBg\" value=\"#fffef0\">\n <span id=\"fwtMemoBgLabel\">#fffef0<\/span>\n <\/div>\n <\/div>\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Border Color<\/label>\n <div class=\"fwt-color-picker\">\n <input type=\"color\" id=\"fwtBorderColor\" value=\"#1a1a2e\">\n <span id=\"fwtBorderColorLabel\">#1a1a2e<\/span>\n <\/div>\n <\/div>\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Text Color<\/label>\n <div class=\"fwt-color-picker\">\n <input type=\"color\" id=\"fwtTextColor\" value=\"#1a1a2e\">\n <span id=\"fwtTextColorLabel\">#1a1a2e<\/span>\n <\/div>\n <\/div>\n <div class=\"fwt-form-group\">\n <label class=\"fwt-label\">Memo Paper Size<\/label>\n <select class=\"fwt-select\" id=\"fwtPaperSize\">\n <option value=\"A4\">A4<\/option>\n <option value=\"A5\">A5<\/option>\n <option value=\"Letter\">Letter<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"fwt-preview-panel\">\n <div class=\"fwt-preview-actions\">\n <button class=\"fwt-btn fwt-btn-primary\" id=\"fwtBtnPrintMemo\"><span>\ud83d\udda8\ufe0f<\/span> Print Memo<\/button>\n <button class=\"fwt-btn fwt-btn-outline\" id=\"fwtBtnDownloadMemo\"><span>\ud83d\udcc4<\/span> Download PDF<\/button>\n <\/div>\n\n <div class=\"fwt-memo-wrap\" id=\"fwtMemoWrap\">\n <div class=\"fwt-memo-header\">\n <div class=\"fwt-memo-top\">\n <span>No – <strong id=\"fwtMemoBillNo\"><\/strong><\/span>\n <span>Bill\/Cash Memo<\/span>\n <span>Mob – <strong id=\"fwtMemoMobile\">7076361566<\/strong><\/span>\n <\/div>\n <div class=\"fwt-memo-title\" id=\"fwtMemoBizName\">MAA ILA ENTERPRISE<\/div>\n <div class=\"fwt-memo-prop\" id=\"fwtMemoPropName\">Prop – Dilip Kumar De<\/div>\n <div class=\"fwt-memo-subtitle\" id=\"fwtMemoBizType\">Distributor of all type of Rice<\/div>\n <div class=\"fwt-memo-address\" id=\"fwtMemoAddress\">Rampurchak \u2605 Shyamchak \u2605 Paschim Medinipur<\/div>\n <\/div>\n\n <div class=\"fwt-memo-customer\">\n <div class=\"fwt-memo-field\">\n <label>Customer’s Name<\/label>\n <div class=\"fwt-dots\"><\/div>\n <span class=\"fwt-value\" id=\"fwtMemoCustomerName\"><\/span>\n <\/div>\n <div class=\"fwt-memo-field\">\n <label>Address<\/label>\n <div class=\"fwt-dots\"><\/div>\n <span class=\"fwt-value\" id=\"fwtMemoCustomerAddress\"><\/span>\n <\/div>\n <div class=\"fwt-memo-meta\">\n <div class=\"fwt-memo-field\">\n <label>Lorry No.<\/label>\n <div class=\"fwt-dots\"><\/div>\n <span class=\"fwt-value\" id=\"fwtMemoLorryNo\"><\/span>\n <\/div>\n <div class=\"fwt-memo-field\">\n <label>Date<\/label>\n <div class=\"fwt-dots\"><\/div>\n <span class=\"fwt-value\" id=\"fwtMemoDate\"><\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <table class=\"fwt-memo-table\">\n <thead>\n <tr>\n <th>SL.No<\/th>\n <th>Particulars<\/th>\n <th>Quantity<\/th>\n <th>Rate<\/th>\n <th class=\"amount-header\">\n <div>Amount<\/div>\n <span>Rs.<\/span><span>P<\/span>\n <\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"fwtMemoItemsBody\"><\/tbody>\n <\/table>\n\n <div class=\"fwt-memo-bottom\">\n <div class=\"fwt-memo-words\">\n <label>Amount in Word<\/label>\n <div class=\"fwt-dots\" id=\"fwtMemoWords1\"><\/div>\n <div class=\"fwt-dots\" id=\"fwtMemoWords2\"><\/div>\n <\/div>\n <div class=\"fwt-memo-total-label\">Total<\/div>\n <div class=\"fwt-memo-total-rs\" id=\"fwtMemoTotalRs\">0<\/div>\n <div class=\"fwt-memo-total-p\" id=\"fwtMemoTotalP\">00<\/div>\n <\/div>\n\n <div class=\"fwt-memo-signatures\">\n <div class=\"fwt-memo-sign\">\n <div class=\"fwt-sign-line\"><\/div>\n <div>Signature of Customer’s<\/div>\n <\/div>\n <div class=\"fwt-memo-sign\">\n <div class=\"fwt-sign-line\"><\/div>\n <div>Signature of Proprietor<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n\n <script>\n (function() {\n 'use strict';\n\n var fwtItems = [];\n var fwtItemCounter = 0;\n\n var fwtEls = {\n toastContainer: document.getElementById('fwtToastContainer'),\n itemsBody: document.getElementById('fwtItemsBody'),\n grandTotal: document.getElementById('fwtGrandTotal'),\n memoWrap: document.getElementById('fwtMemoWrap'),\n memoItemsBody: document.getElementById('fwtMemoItemsBody'),\n memoTotalRs: document.getElementById('fwtMemoTotalRs'),\n memoTotalP: document.getElementById('fwtMemoTotalP'),\n memoWords1: document.getElementById('fwtMemoWords1'),\n memoWords2: document.getElementById('fwtMemoWords2'),\n bizName: document.getElementById('fwtBizName'),\n propName: document.getElementById('fwtPropName'),\n bizType: document.getElementById('fwtBizType'),\n mobile: document.getElementById('fwtMobile'),\n address: document.getElementById('fwtAddress'),\n customerName: document.getElementById('fwtCustomerName'),\n customerAddress: document.getElementById('fwtCustomerAddress'),\n billNo: document.getElementById('fwtBillNo'),\n lorryNo: document.getElementById('fwtLorryNo'),\n date: document.getElementById('fwtDate'),\n currency: document.getElementById('fwtCurrency'),\n memoBg: document.getElementById('fwtMemoBg'),\n borderColor: document.getElementById('fwtBorderColor'),\n textColor: document.getElementById('fwtTextColor'),\n paperSize: document.getElementById('fwtPaperSize'),\n memoBizName: document.getElementById('fwtMemoBizName'),\n memoPropName: document.getElementById('fwtMemoPropName'),\n memoBizType: document.getElementById('fwtMemoBizType'),\n memoAddress: document.getElementById('fwtMemoAddress'),\n memoMobile: document.getElementById('fwtMemoMobile'),\n memoBillNo: document.getElementById('fwtMemoBillNo'),\n memoCustomerName: document.getElementById('fwtMemoCustomerName'),\n memoCustomerAddress: document.getElementById('fwtMemoCustomerAddress'),\n memoLorryNo: document.getElementById('fwtMemoLorryNo'),\n memoDate: document.getElementById('fwtMemoDate'),\n memoBgLabel: document.getElementById('fwtMemoBgLabel'),\n borderColorLabel: document.getElementById('fwtBorderColorLabel'),\n textColorLabel: document.getElementById('fwtTextColorLabel'),\n btnAddItem: document.getElementById('fwtBtnAddItem'),\n btnResetAll: document.getElementById('fwtBtnResetAll'),\n btnPrint: document.getElementById('fwtBtnPrint'),\n btnPrintMemo: document.getElementById('fwtBtnPrintMemo'),\n btnDownload: document.getElementById('fwtBtnDownload'),\n btnDownloadMemo: document.getElementById('fwtBtnDownloadMemo')\n };\n\n function fwtShowToast(message, type) {\n type = type || 'success';\n var toast = document.createElement('div');\n toast.className = 'fwt-toast fwt-toast-' + type;\n toast.innerHTML = '<span>' + (type === 'success' ? '\u2705' : type === 'error' ? '\u274c' : '\u2139\ufe0f') + '<\/span><div>' + message + '<\/div>';\n fwtEls.toastContainer.appendChild(toast);\n setTimeout(function() {\n toast.classList.add('fwt-toast-exit');\n setTimeout(function() { toast.remove(); }, 300);\n }, 3000);\n }\n\n function fwtGenerateBillNo() {\n var rand = Math.floor(1000 + Math.random() * 9000);\n fwtEls.billNo.value = 'MIE-' + new Date().getFullYear() + '-' + rand;\n }\n\n function fwtNumberToWords(num) {\n if (num === 0) return 'Zero';\n var a = ['', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve', 'Thirteen', 'Fourteen', 'Fifteen', 'Sixteen', 'Seventeen', 'Eighteen', 'Nineteen'];\n var b = ['', '', 'Twenty', 'Thirty', 'Forty', 'Fifty', 'Sixty', 'Seventy', 'Eighty', 'Ninety'];\n\n function inWords(n) {\n if ((n = n.toString()).length > 9) return 'Overflow';\n var nStr = ('000000000' + n).substr(-9, 9);\n var crores = parseInt(nStr.substr(0, 2), 10);\n var lakhs = parseInt(nStr.substr(2, 2), 10);\n var thousands = parseInt(nStr.substr(4, 2), 10);\n var hundreds = parseInt(nStr.substr(6, 1), 10);\n var rest = parseInt(nStr.substr(7, 2), 10);\n\n var str = '';\n if (crores) str += (a[crores] || (b[crores[0]] + ' ' + a[crores[1]])) + ' Crore ';\n if (lakhs) str += (a[lakhs] || (b[lakhs[0]] + ' ' + a[lakhs[1]])) + ' Lakh ';\n if (thousands) str += (a[thousands] || (b[thousands[0]] + ' ' + a[thousands[1]])) + ' Thousand ';\n if (hundreds) str += a[hundreds] + ' Hundred ';\n if (rest) {\n if (str !== '') str += 'and ';\n str += (a[rest] || (b[rest[0]] + ' ' + a[rest[1]]));\n }\n return str.trim();\n }\n\n var parts = num.toFixed(2).split('.');\n var whole = parseInt(parts[0], 10);\n var paisa = parseInt(parts[1], 10);\n var res = inWords(whole) + ' Only';\n return res;\n }\n\n function fwtAddItem(particular, qty, rate) {\n fwtItemCounter++;\n var item = {\n id: fwtItemCounter,\n particular: particular || '',\n qty: qty !== undefined ? qty : 1,\n rate: rate !== undefined ? rate : 0\n };\n fwtItems.push(item);\n fwtRenderItems();\n fwtUpdatePreview();\n }\n\n function fwtRemoveItem(id) {\n fwtItems = fwtItems.filter(function(i) { return i.id !== id; });\n fwtRenderItems();\n fwtUpdatePreview();\n }\n\n function fwtRenderItems() {\n fwtEls.itemsBody.innerHTML = '';\n fwtItems.forEach(function(item, index) {\n var tr = document.createElement('tr');\n tr.innerHTML = `\n <td style=\"text-align:center;\">${index + 1}<\/td>\n <td><input type=\"text\" class=\"fwt-input fwt-part-input\" data-id=\"${item.id}\" value=\"${item.particular}\" placeholder=\"Item description\"><\/td>\n <td><input type=\"number\" class=\"fwt-input fwt-qty-input\" data-id=\"${item.id}\" value=\"${item.qty}\" min=\"0\" step=\"any\"><\/td>\n <td><input type=\"number\" class=\"fwt-input fwt-rate-input\" data-id=\"${item.id}\" value=\"${item.rate}\" min=\"0\" step=\"any\"><\/td>\n <td class=\"fwt-item-amount\" style=\"text-align:right; font-weight:600; padding-right:10px;\">${(item.qty * item.rate).toFixed(2)}<\/td>\n <td><button type=\"button\" class=\"fwt-remove-btn\" data-id=\"${item.id}\">\u00d7<\/button><\/td>\n `;\n fwtEls.itemsBody.appendChild(tr);\n });\n\n \/\/ Bind table inputs\n var partInputs = fwtEls.itemsBody.querySelectorAll('.fwt-part-input');\n partInputs.forEach(function(input) {\n input.addEventListener('input', function(e) {\n var id = parseInt(e.target.dataset.id, 10);\n var found = fwtItems.find(function(i) { return i.id === id; });\n if (found) { found.particular = e.target.value; fwtUpdatePreview(); }\n });\n });\n\n var qtyInputs = fwtEls.itemsBody.querySelectorAll('.fwt-qty-input');\n qtyInputs.forEach(function(input) {\n input.addEventListener('input', function(e) {\n var id = parseInt(e.target.dataset.id, 10);\n var found = fwtItems.find(function(i) { return i.id === id; });\n if (found) {\n found.qty = parseFloat(e.target.value) || 0;\n e.target.closest('tr').querySelector('.fwt-item-amount').textContent = (found.qty * found.rate).toFixed(2);\n fwtUpdatePreview();\n }\n });\n });\n\n var rateInputs = fwtEls.itemsBody.querySelectorAll('.fwt-rate-input');\n rateInputs.forEach(function(input) {\n input.addEventListener('input', function(e) {\n var id = parseInt(e.target.dataset.id, 10);\n var found = fwtItems.find(function(i) { return i.id === id; });\n if (found) {\n found.rate = parseFloat(e.target.value) || 0;\n e.target.closest('tr').querySelector('.fwt-item-amount').textContent = (found.qty * found.rate).toFixed(2);\n fwtUpdatePreview();\n }\n });\n });\n\n var removeBtns = fwtEls.itemsBody.querySelectorAll('.fwt-remove-btn');\n removeBtns.forEach(function(btn) {\n btn.addEventListener('click', function(e) {\n var id = parseInt(e.currentTarget.dataset.id, 10);\n fwtRemoveItem(id);\n });\n });\n }\n\n function fwtUpdatePreview() {\n \/\/ Business Details\n fwtEls.memoBizName.textContent = fwtEls.bizName.value || 'BUSINESS NAME';\n fwtEls.memoPropName.textContent = 'Prop - ' + (fwtEls.propName.value || '');\n fwtEls.memoBizType.textContent = fwtEls.bizType.value || '';\n fwtEls.memoAddress.textContent = fwtEls.address.value || '';\n fwtEls.memoMobile.textContent = fwtEls.mobile.value || '';\n fwtEls.memoBillNo.textContent = fwtEls.billNo.value || '';\n\n \/\/ Customer & Bill Info\n fwtEls.memoCustomerName.textContent = fwtEls.customerName.value || '';\n fwtEls.memoCustomerAddress.textContent = fwtEls.customerAddress.value || '';\n fwtEls.memoLorryNo.textContent = fwtEls.lorryNo.value || '';\n fwtEls.memoDate.textContent = fwtEls.date.value ? new Date(fwtEls.date.value).toLocaleDateString() : '';\n\n \/\/ Items table in preview\n fwtEls.memoItemsBody.innerHTML = '';\n var grandTotal = 0;\n\n fwtItems.forEach(function(item, index) {\n var amt = item.qty * item.rate;\n grandTotal += amt;\n var tr = document.createElement('tr');\n tr.innerHTML = `\n <td>${index + 1}<\/td>\n <td>${item.particular}<\/td>\n <td>${item.qty}<\/td>\n <td>${item.rate.toFixed(2)}<\/td>\n <td>${Math.floor(amt)}<\/td>\n <td>${Math.round((amt % 1) * 100).toString().padStart(2, '0')}<\/td>\n `;\n fwtEls.memoItemsBody.appendChild(tr);\n });\n\n \/\/ Fill empty rows to maintain memo look (at least 5 rows)\n var minRows = 5;\n for (var i = fwtItems.length; i < minRows; i++) {\n var emptyTr = document.createElement('tr');\n emptyTr.className = 'fwt-memo-empty-row';\n emptyTr.innerHTML = `\n <td>${i + 1}<\/td>\n <td><\/td>\n <td><\/td>\n <td><\/td>\n <td><\/td>\n <td><\/td>\n `;\n fwtEls.memoItemsBody.appendChild(emptyTr);\n }\n\n fwtEls.grandTotal.textContent = grandTotal.toFixed(2);\n var totalRs = Math.floor(grandTotal);\n var totalP = Math.round((grandTotal % 1) * 100);\n\n fwtEls.memoTotalRs.textContent = totalRs;\n fwtEls.memoTotalP.textContent = totalP.toString().padStart(2, '0');\n\n var words = fwtNumberToWords(grandTotal);\n fwtEls.memoWords1.textContent = words;\n fwtEls.memoWords2.textContent = '';\n\n \/\/ Apply Appearance Settings\n var bg = fwtEls.memoBg.value;\n var border = fwtEls.borderColor.value;\n var text = fwtEls.textColor.value;\n\n fwtEls.memoBgLabel.textContent = bg;\n fwtEls.borderColorLabel.textContent = border;\n fwtEls.textColorLabel.textContent = text;\n\n fwtEls.memoWrap.style.backgroundColor = bg;\n fwtEls.memoWrap.style.borderColor = border;\n fwtEls.memoWrap.style.color = text;\n }\n\n function fwtResetAll() {\n if (confirm('Are you sure you want to reset all fields and items?')) {\n fwtEls.bizName.value = 'MAA ILA ENTERPRISE';\n fwtEls.propName.value = 'Dilip Kumar De';\n fwtEls.bizType.value = 'Distributor of all type of Rice';\n fwtEls.mobile.value = '7076361566';\n fwtEls.address.value = 'Rampurchak \u2605 Shyamchak \u2605 Paschim Medinipur';\n fwtEls.customerName.value = '';\n fwtEls.customerAddress.value = '';\n fwtEls.lorryNo.value = '';\n fwtGenerateBillNo();\n fwtEls.date.value = new Date().toISOString().split('T')[0];\n fwtEls.currency.value = '\u20b9';\n fwtEls.memoBg.value = '#fffef0';\n fwtEls.borderColor.value = '#1a1a2e';\n fwtEls.textColor.value = '#1a1a2e';\n fwtEls.paperSize.value = 'A4';\n\n fwtItems = [];\n fwtAddItem('Basmati Rice', 10, 85);\n fwtAddItem('Miniket Rice', 25, 48);\n fwtAddItem('Gobindobhog Rice', 5, 110);\n\n fwtUpdatePreview();\n fwtShowToast('All fields reset successfully!', 'info');\n }\n }\n\n function fwtInitEvents() {\n var allInputs = document.querySelectorAll('input, select, textarea');\n allInputs.forEach(function(el) {\n el.addEventListener('input', fwtUpdatePreview);\n el.addEventListener('change', fwtUpdatePreview);\n });\n\n fwtEls.btnAddItem.addEventListener('click', function() {\n fwtAddItem('', 1, 0);\n fwtShowToast('New item added', 'success');\n });\n\n fwtEls.btnResetAll.addEventListener('click', fwtResetAll);\n\n var handlePrint = function() {\n window.print();\n };\n\n fwtEls.btnPrint.addEventListener('click', handlePrint);\n fwtEls.btnPrintMemo.addEventListener('click', handlePrint);\n\n var handleDownload = function() {\n window.print();\n fwtShowToast('Use \"Save as PDF\" from your print dialog', 'info');\n };\n\n fwtEls.btnDownload.addEventListener('click', handleDownload);\n fwtEls.btnDownloadMemo.addEventListener('click', handleDownload);\n }\n\n \/\/ Initialize App\n fwtGenerateBillNo();\n fwtEls.date.value = new Date().toISOString().split('T')[0];\n fwtAddItem('Basmati Rice', 10, 85);\n fwtAddItem('Miniket Rice', 25, 48);\n fwtAddItem('Gobindobhog Rice', 5, 110);\n fwtInitEvents();\n fwtUpdatePreview();\n\n })();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Bill\/Cash Memo Generator \ud83d\udccb Bill Memo Generator Professional Cash Memo & Invoice Tool \u21ba Reset All \ud83d\udda8\ufe0f Print \ud83d\udcbe Save as PDF \ud83c\udfe2 Business Details Business Name Proprietor Name Business Type Mobile Number Address \ud83d\udc64 Customer & Bill Info Customer’s Name Address Bill Number Lorry Number Date Currency Symbol \u20b9 (Indian Rupee)$ (US Dollar)\u20ac (Euro)\u00a3 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-273","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/273","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=273"}],"version-history":[{"count":21,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/273\/revisions"}],"predecessor-version":[{"id":755,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/273\/revisions\/755"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}