Promt
Create a complete single-file HTML bill maker website for Pakistani shopkeepers with these features:
LANGUAGES: Mix of Urdu and English labels (bilingual)
DESIGN:
- Clean, modern UI with green color theme (#007a4d)
- Mobile responsive
- Professional look with card-based layout
- Two column layout on desktop (form left, preview right)
SECTIONS:
- Header with logo “BillMaker Pro” and “نیا بل” button
- Shop Info card: shop name, phone, address
- Customer Info card: customer name, phone, bill number (auto increment saved in localStorage), date, payment method (Cash/Easypaisa/JazzCash/Bank/Udhaar)
- Add Items section: item name, quantity, price input with “شامل” button (Enter key also works)
- Items table showing: #, name, qty, price, total, delete button
- Totals section: subtotal, discount (flat Rs. or %), tax (%), grand total
- Notes/message textarea
- Three action buttons: Preview, Print, PDF Download, New Bill
BILL PREVIEW (right side):
- Live updating as user types
- Shows all shop/customer info
- Items table
- Totals with discount and tax rows (hidden if zero)
- Footer with thank you message
PDF DOWNLOAD:
- Use jsPDF (cdnjs) + jsPDF AutoTable plugin
- A5 size paper
- Green header with shop name/address/phone in white
- Light green meta box with customer info
- Professional items table with autoTable
- Totals section on right side
- Grand total in green filled box
- Footer with thank you message
- Auto filename: Bill_[number]_[shopname].pdf
PRINT:
- Clean print styles, hides all UI except bill preview
- Colors preserved in print
NEW BILL:
- Confirmation dialog
- Clears all fields except shop info
- Auto-increments bill number
LIBRARIES (from cdnjs):
- jsPDF 2.5.1
- jsPDF AutoTable 3.8.2
- Google Fonts: Poppins
All in ONE single HTML file, no external dependencies except CDN libraries.
