Technical Specification: HELOC Payment Estimator

Overview

A high-performance, single-file browser-based calculator designed to help users project monthly payments for Home Equity Lines of Credit (HELOC). The tool provides a clear, visual breakdown of costs during the Draw Period (interest-only) and the Repayment Period (principal + interest).

Core Features

• Dual-Phase Calculation: Automatically separates the timeline into Draw and Repayment phases.
• Real-Time Amortization: Calculates payment schedules instantly as users adjust inputs.
• Interactive Visuals: Uses a lightweight charting library (Chart.js via CDN) to display the balance decline and interest-to-principal ratio.
• Responsive Design: Fluid layout that adjusts from complex dashboard views on desktop to a simplified stack on mobile devices.
• In-Memory State: Full reliance on a reactive JS object state; absolutely no persistent storage (No localStorage/cookies).

User Interface Layout

1. Header: Simple, descriptive H1 title with a clean sans-serif typography.
2. Input Section (Left/Top):
   • Sliders and numeric inputs for: Loan Amount ($), Interest Rate (%), Draw Period (Years), Repayment Period (Years).
   • A 'Calculate' button (or auto-calculate on input change).
3. Dashboard Section (Center/Right):
   • Primary Cards: Monthly payment during Draw vs. Monthly payment during Repayment.
   • Chart Section: A line chart representing the loan balance over time.
4. Amortization Table: A toggleable, clean table view showing the month-by-month breakdown of interest and principal payments.

Aesthetics & Styling

• Color Palette: High-contrast light mode. Primary action color: #2563eb (Royal Blue). Background: #f8fafc (Off-white). Text: #1e293b (Slate).
• Typography: Inter or system-ui sans-serif fonts.
• Micro-interactions: Smooth CSS transitions on all input changes (300ms ease-in-out). Inputs feature a soft focus-ring shadow to indicate activity.

Development Constraints (Strict Compliance Required)

• Sandbox Safety: The app will run in an iframe with 'null' origin. DO NOT use localStorage, sessionStorage, IndexedDB, or cookies. Use a simple JS object to manage local state.
• Build Requirement: Must be a single index.html file. CSS and JS must be embedded within <style> and <script> tags, or linked via reliable CDNs.
• No External Dependencies: No backend required. All calculations must be handled locally in the browser.
• Accessibility: Use semantic HTML5 elements (<main>, <section>, <article>) and ensure all inputs have associated <label> elements.
• Modern Aesthetics: No generic browser 'ugly' styling. Use Tailwind CSS via CDN for rapid, consistent styling of buttons, inputs, and layout grids.