Technical Specification: Free Online Tip Calculator & Bill Splitter

Overview

A clean, modern, and high-performance browser-based utility designed to help users calculate restaurant tips and split bills among groups quickly and accurately. This tool is built for maximum accessibility and requires zero server interaction.

Core Features

• Bill Calculation Engine: Instant calculation of tip amount, total bill, and per-person share as inputs change.
• Flexible Tip Selection: Preset percentage buttons (10%, 15%, 18%, 20%, 25%) plus a custom input field for specific percentages.
• Tax Adjustment: Optional input field to add sales tax percentage, with an automatic toggle to calculate tip based on pre-tax or post-tax subtotal.
• Group Splitter: Dynamic slider and input field to adjust the number of people (1 to 50+).
• Rounding Utility: One-click round-up/round-down functionality to simplify cash payments.
• Live Results Dashboard: Real-time summary area showing: "Total Tip", "Total Bill", and "Amount Per Person".

User Interface & Layout

• Aesthetic: Premium light-mode SaaS style. Crisp typography, generous whitespace, soft rounded corners (8px-12px), and subtle box-shadows to define interaction cards.
• Layout:
  • Header: Clear H1 title with a descriptive tagline.
  • Main Area: A card-based layout featuring a primary "Input Form" on the left (desktop) and a "Result Summary" sticky card on the right.
  • Responsiveness: The design must stack vertically on mobile devices, with the summary card pinned to the bottom of the viewport for easy viewing.

Technical Directives

• Architecture: One single HTML file (CSS in <style>, JS in <script>).
• Compatibility: STRICTLY NO storage (localStorage/cookies). All data must be handled in temporary variables.
• Animations: Use CSS transitions for result updates (e.g., opacity fade or number-counting effects). Use smooth transforms for button hover states.
• Palette:
  • Primary: #2563eb (Vibrant Blue)
  • Background: #f8fafc (Soft Off-White)
  • Card: #ffffff (Pure White)
  • Text: #1e293b (Slate Dark)
  • Accent: #10b981 (Success Green for calculations)

Developer Constraints

1. No External Frameworks: Use Vanilla JavaScript only.
2. CDN Usage: Tailwind CSS via CDN is permitted for layout and styling.
3. Sandbox Security: Do not use alert(), confirm(), or prompt(). Create custom modal components for any necessary alerts.
4. No Branding: Ensure no fictional brand names or watermarks appear in the code or the UI.