Free Online Thermal-Style Receipt Generator

A professional, browser-based utility designed for individuals and small businesses to generate clean, readable, thermal-style receipts for expense reporting.

Core Features

• Dynamic Receipt Builder: Add unlimited line items with customizable names, quantities, and prices.
• Real-Time Calculation: Automatic subtotal, tax calculation (percentage-based), and grand total summation.
• Thermal Formatting: A dedicated preview pane that mimics a classic thermal printer roll (narrow column width, monospaced font aesthetic, bold headers).
• Printer-Friendly CSS: Optimized print styles that strip away the website interface and output only the receipt area.
• Customizable Meta: Fields for Merchant Name, Date, Receipt Number, and Footer Message (e.g., "Thank you for your business").
• Live Preview: Immediate visual feedback as you type into the input fields.

UI/UX Design Specification

• Aesthetic: Modern SaaS light-mode. Backgrounds in cool white (#ffffff) and soft grey (#f9fafb). High-contrast typography (#111827) for readability.
• Layout:
  • Two-Column Responsive Layout: Left column contains the input form (fields for Merchant, Date, Items, Tax settings). Right column acts as the "Virtual Receipt" canvas.
  • Mobile Flow: On smaller screens, the input form stacks above the preview pane.
• Typography: Clean, sans-serif UI font (Inter/System UI) with a specific monospaced font family for the receipt text (Courier/monospace) to emphasize the thermal printer aesthetic.
• Transitions: Micro-interactions on button hover, and smooth slide-in animations when adding/removing line items.

Color Palette

• Primary: Soft Indigo (#4f46e5) for primary action buttons (Add Item, Print).
• Danger: Soft Red (#ef4444) for delete actions.
• Background: Pure white (#ffffff) for the card containers; light slate (#f3f4f6) for the page body.
• Border: Subtle grey (#e5e7eb) for input fields.

Technical Directives (Developer Requirements)

1. Environment: Single HTML file containing HTML5, CSS3, and Vanilla JavaScript.
2. Storage Restriction: STRICTLY NO localStorage, sessionStorage, or cookies. State must be managed via a single JavaScript object (e.g., const receiptData = { ... }) and rendered to the DOM dynamically.
3. Print Implementation: Use @media print CSS rules to hide the form elements and navigation when printing, ensuring only the .receipt-preview container is visible on the printed page.
4. Sandbox Compatibility:
   • Do not use alert() or confirm(). Create a custom Modal Component for confirmations.
   • Ensure all assets are referenced via secure, public CDN links.
5. Input Handling: Use standard HTML forms with input event listeners to trigger live re-rendering of the receipt preview pane.
6. No Build Step: Ensure the code runs immediately upon opening the HTML file in any modern web browser.