Letter Lens

Prompt

Build a complete, production-ready single-file HTML web application called "LetterLens".

## PURPOSE
A free public tool that decodes confusing official letters (tax notices, medical bills, benefits letters, rental notices, permit denials, school forms, legal notices, utility bills, insurance letters, immigration documents, employment letters). Users paste text and instantly get a plain-language explanation, deadlines, action checklist, scam warnings, jargon glossary, PII detection, and a draft reply. Everything runs 100% client-side — no server, no API, no account, no data leaves the browser.

## DELIVERABLE
One self-contained .html file with embedded CSS and JavaScript. No external libraries, no CDN, no build step. It must work by simply opening the file in a browser. Vanilla JS only.

## LAYOUT & STRUCTURE
- Full-screen fixed `<canvas>` background behind everything (z-index 0)
- App container above it (z-index 1) using flexbox column layout
- Header bar: brand mark (gradient square with "LL"), title "LetterLens", subtitle "Decode any official letter", and a "Sample" button on the right (loads demo letter). NO motion toggle. NO privacy tagline.
- Main area: two-column grid (input on left, results on right). Collapses to single column below 900px.
- Left column: input panel with textarea, character counter, "Clear" button, "Analyze (Ctrl+Enter)" primary button
- Right column: results panel showing analysis cards stacked vertically
- Fixed state bar at bottom of screen (3px gradient line)
- Toast notification element for feedback

## MOTION WALLPAPER (the signature UI element)
Canvas-based "Paper Currents" animated background that always runs (no toggle, no reduced-motion bypass):
- Dark background tinted by current hue
- Radial gradient glow at top center
- 4 horizontal sine-wave "flow lines" animating slowly
- ~70 floating particles drifting upward with sine-wave horizontal wobble and twinkle
- Three urgency states that smoothly transition hue and speed:
  - calm → hue 210 (blue), speed 1.0
  - warning → hue 38 (amber), speed 1.5
  - urgent → hue 350 (red), speed 2.4
- Expose `window.LetterLensMotion.setState('calm'|'warning'|'urgent')` that:
  - Interpolates hue and speed (ease ~0.015 and ~0.03)
  - Updates CSS var `--state`
  - Updates the bottom state bar gradient
- Handle DPR scaling up to 2x for sharp rendering
- Handle window resize

## ANALYSIS ENGINE (all client-side, no ML libraries)

### 1. Document classification
Score text against 11 document types by counting keyword matches (word-boundary regex, case-insensitive). Types with their label + emoji icon + keyword lists:
- tax (🧾): tax, irs, hmrc, revenue, income tax, tax return, assessment, deduction, audit, filing
- medical (🏥): hospital, medical, patient, insurance claim, doctor, clinic, diagnosis, prescription, medicare, medicaid, copay, deductible, provider
- benefits (🤝): benefits, welfare, social security, allowance, universal credit, housing benefit, snap, food stamps, disability, unemployment
- rental (🏠): lease, rent, tenant, landlord, eviction, tenancy, deposit, property manager, notice to vacate, dwelling
- permit (📜): permit, license, licence, zoning, planning, building code, application, variance, inspection
- school (🎓): school, enrollment, tuition, student, academic, university, college, scholarship, financial aid, fees, registrar
- legal (⚖️): court, summons, hearing, plaintiff, defendant, attorney, lawsuit, subpoena, judgment, litigation, complaint
- utility (💡): utility, electric, electricity, water bill, gas bill, power, meter, service charge, disconnection
- insurance (🛡️): insurance, policy, premium, coverage, claim, deductible, beneficiary, renewal
- immigration (🛂): immigration, visa, passport, residency, asylum, citizenship, uscis, biometrics, green card
- employment (💼): employment, employer, termination, wage, salary, hr, human resources, contract, payslip, redundancy
- unknown (📄): fallback "Official letter"

### 2. Deadline extraction
Support ALL these formats and mark a match as a deadline ONLY if within ±100 chars of one of: due|by|before|deadline|no later than|expires|expiration|submit|respond|response|appeal|remit|payment|hearing|file|must|required|pay|date
- `DD/MM/YYYY`, `MM/DD/YYYY`, `DD-MM-YY`, `DD.MM.YYYY` (disambiguate a>12 as day)
- `Month DD, YYYY` (e.g. "Jan 15, 2025")
- `DD Month YYYY` (e.g. "15 January 2025")
- `YYYY-MM-DD` ISO
- Relative: `within N days/weeks/months`
Compute daysUntil from today. Ignore dates more than 1 year past or 2 years future. Dedupe by ISO date.

### 3. Amount extraction
- Currency-prefixed: `$1,284.50`, `€100`, `£50`, `¥1000`
- Currency-suffixed: `1000 dollars`, `50 euros`, `20 pounds`, `100 USD`

### 4. Scam signal detection
Return list of matched warning messages:
- /wire transfer/i → "Requests wire transfer"
- /gift card/i → "Requests gift card payment"
- /bitcoin|cryptocurrency|usdt/i → "Requests cryptocurrency"
- /urgent(ly)?\s+(pay|payment|action|respond|response)/i → "Manufactured urgency"
- /click\s+(here|this link)/i → "Suspicious link language"
- /verify\s+your\s+account/i → "Phishing-style verification"
- /social\s+security\s+number/i → "Asks for SSN"
- /arrest|jail|police\s+action|warrant/i → "Threats of arrest"
- /final\s+notice/i → "Says 'final notice' — verify legitimacy"
- /you\s+have\s+won|lottery|prize/i → "Prize/lottery language"
- /western\s+union|moneygram/i → "Money transfer service"
- /whatsapp|telegram/i → "Contact via messaging app (unusual for officials)"

### 5. Jargon glossary
Match ~30 legal/financial terms and show definitions. Include: remittance, statutory, hereby, pursuant to, commencement, termination, liable, indemnify, covenant, arrears, deductible, adjudication, affidavit, disbursement, encumbrance, escrow, lien, principal, forbearance, statute, waiver, contingent, abatement, codicil, garnishment, novation, pecuniary, rescission, tort, usury. Cap at 12 displayed.

### 6. PII detection + redaction
Detect and count:
- SSN: `\b\d{3}-\d{2}-\d{4}\b`
- Phone: `\b\d{3}[-.\s]?\d{3}[-.\s]?\d{4}\b`
- Email
- Street address
- 16-digit card number
- IBAN
Provide a "Show redacted preview" toggle that replaces matches with `[SSN]`, `[PHONE]`, etc.

### 7. Extractive summary
Split into sentences (>25 chars). Score each by: average word frequency, +35% if in first 3 sentences, +15% if contains a number, +35% if contains action words (due|must|shall|require|submit|pay|respond|appeal|deadline|notice|action). Take top 4, reorder by original position, join.

### 8. Action checklist generator
Per document type, provide 3 base actions. Then add conditional actions:
- Contains appeal/dispute/contest → "File an appeal..." (high priority)
- Contains payment/pay/remit/amount due/balance → "Verify the amount..." (high)
- Contains form → "Locate and complete forms" (medium)
- Contains evidence/documentation/proof/attach/enclosed/upload → "Gather supporting documents" (medium)
- Contains hearing/appearance/court/interview → "Confirm date/time/location" (high)
- Contains deadline/no later than/before/due by → "Mark the deadline in calendar" (high)
- For each extracted deadline → "Act before [date] (N days away)" with priority high/medium/low based on <7/<21/else
- Always append: "Keep a copy" (low), "If unclear, contact sender" (low)
Dedupe case-insensitively.

### 9. Urgency level
Based on earliest future deadline: 0 future deadlines → calm; ≤3 days → urgent; ≤14 days → warning; else calm.

### 10. Reference number extraction
Try patterns like "Ref: ABC-1234", "Account No: MC-88421-7", "Case #12345", or fallback generic `[A-Z]{2,5}[-/]?\d{4,}`.

### 11. Draft reply generator
Produce a full letter template:
- Greeting with detected sender name (search first 12 lines for "from|sincerely|regards|department of|office of|agency|bureau|ministry|service")
- Reference number if found
- Acknowledge receipt
- Placeholder bullets for position/action
- Mention earliest deadline if any
- Closing with [Your name/address/phone/email]

## RESULTS UI (rendered as stacked cards)

1. **Detected document card** — icon + label, urgency badge (calm/warning/urgent with color + pulse for urgent)
2. **Plain-language summary card**
3. **Deadlines card** (only if any) — list each deadline with big number (days) + unit, date, context snippet, color-coded left border; "Add to calendar (.ics)" button
4. **Action checklist card** — checkboxes with priority tags (high/medium/low) and strike-through on check
5. **Amounts card** (if any) — pill tags
6. **Scam signals card** (if any) — red-tinted pills + disclaimer
7. **Jargon decoded card** (if any) — term + definition rows
8. **Sensitive info card** (if any) — count pills + redaction toggle
9. **Draft reply card** — editable contenteditable box + copy/download buttons
10. **Global actions card** — Print action pack, Copy summary, Copy full report (this card should NOT print)

## EXPORTS & UTILITIES
- **.ics calendar export** — generate a valid VCALENDAR with one VEVENT per deadline (DTSTART;VALUE=DATE) and download it
- **Print stylesheet** — hide canvas, header, input, state bar, toast, card-actions, and `.no-print`. Convert everything to black-on-white, remove backdrop filters
- **Copy to clipboard** — with `navigator.clipboard` fallback to hidden textarea + execCommand
- **Download .txt** — draft reply as `letterlens-draft-reply.txt`
- **Full report builder** — plain-text version combining all sections for clipboard

## SAMPLE LETTER
"Sample" button loads a realistic medical past-due letter that includes: sender block, date, patient name, account number, SSN, phone, balance amount, "within 30 days" relative deadline, absolute dates ~6 and ~10 days in the future, "pursuant to" jargon, "wire" not present but "collections agency", "financial assistance", closing signature. Use dynamic dates computed from `Date.now()` so deadlines always land in the near future.

## DESIGN LANGUAGE
- Dark theme: bg `#070b16`, panels `rgba(18,26,46,0.72)` with `backdrop-filter: blur(24px)`, border `rgba(120,160,255,0.14)`
- Text `#e8eefc`, muted `#8a96b8`, accent `#4a9eff`, warning `#ffb340`, urgent `#ff4d6a`, success `#4ade80`
- Border radius 14px for cards, 9–10px for buttons/inputs
- Font stack: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif` — mono for textarea and draft reply
- Cards fade-in from bottom (slideIn keyframe)
- Urgency badge pulses for urgent
- All buttons have hover and focus-visible states
- Fully responsive; below 900px single-column
- Character counter and Ctrl+Enter shortcut
- Toast messages for feedback

## CODE QUALITY REQUIREMENTS
- Use semantic HTML
- All user-provided text passed through an `escapeHtml()` helper before injection — no XSS
- Use const/let, arrow functions, template literals
- No global namespace pollution except `window.LetterLensMotion`
- Comment each major section: "Motion wallpaper", "Analysis engine", "UI", "Init"
- Escape regex special characters when building keyword regexes
- Handle null checks before addEventListener on dynamically-created buttons

## OUTPUT
Return ONLY the complete single-file HTML. No explanation, no markdown code fence commentary. Just the code, ready to save as `letterlens.html` and open in a browser.