Folio
Quotes, proposals and invoices in Sri Lankan rupees, ready to print or save as a PDF.
Works today in the browser: three document types, live preview, discount and tax lines, your logo and accent colour, and print or save as PDF. It has no server, no sending by email and no payment collection, and numbering is manual. The sample business and client in the screenshots are fictional placeholders. Check tax rates and legal wording yourself, because this is a layout tool and not tax or legal advice. The only outside request is Google Fonts.
01Project overview
Fill in your business, your client and your services and get a clean quote, proposal or invoice with discount, tax, amount in words and bank details. Print it or save it as a PDF from the browser.
Key features
- Quote, proposal and invoice from one form
- Amounts in LKR with a percentage or fixed discount and any number of tax lines
- Amount in words, bank details, notes and terms
- Upload your logo and pick an accent colour
- Live preview, with Edit and Preview tabs on a phone
- Print or save as a PDF from the browser, with a signature block on quotes and proposals
02Problem being solved
Freelancers and small studios often send quotes from a blank document and rebuild the layout each time. A form that lays out the document the same way every time saves time and looks more professional.
03Technical architecture
- A single self-contained HTML file with plain JavaScript and no framework.
- The document is kept in the browser's local storage, including an uploaded logo. Nothing is uploaded anywhere.
- Totals, discount and tax are calculated in the page, and the amount in words is generated by a small function.
- A print stylesheet hides the form and prints the A4 document, so the browser's own Save as PDF produces the file.
- Text typed by the user is escaped before it is shown.
Technical documentation
Saving a PDF
Choose Print or save PDF, then pick Save as PDF in the browser's print dialog.
04Technologies used
- HTML
- CSS
- JavaScript
- Google Fonts
05Development process
- Started with the invoice layout and the totals logic.
- Reused the same layout for quotes and proposals, and added the scope and timeline sections for proposals.
- Added a phone layout and a print stylesheet so the document can be saved as a PDF.
06Interactive demonstration
This is the real app, running in your browser. The business and client shown are fictional samples. A logo you upload stays on this device.
07Screenshots
08Challenges and solutions
Challenge
The same data has to read correctly as a quote, a proposal and an invoice.
Solution
One data model drives all three. The labels, the due or valid-until date, the paid amount and the signature block change with the type.
Challenge
A form and a full A4 preview do not fit side by side on a phone.
Solution
On narrow screens an Edit and Preview switch shows one at a time.
09Future improvements
- Several saved clients
- Automatic numbering
- Other currencies
10Source code
Source code is not public yet
This project has no public repository. When one exists, add its URL as repo in data/projects.ts and the link appears here.