Frontend rewrite: Tailwind, polished home + endpoint, copy/highlight/send-test, JS extracted

[botre]

Summary

Rewrites the frontend for clarity and adds a focused UX-improvement set, while keeping the backend untouched.

Styling

• Drop simple.css and the hand-rolled utility CSS in public/index.css (deleted). Switch to Tailwind v4 via Play CDN, light theme only.
• Focus rings dialled back from ring-2 to ring-1 ring-indigo-400 everywhere; native <select> arrows replaced with a custom SVG chevron anchored next to the value (.app-select class); buttons and <summary> get cursor: pointer globally (Tailwind v4 doesn't set it by default).

JavaScript

• All inline <script> blocks lifted out of endpoint.html into static files:
  • public/index.js — shared helpers (formatTimeAgo, renderBody, copyToClipboard, parseHeaderLines, loading-dots + cursor + select-chevron CSS injection).
  • public/endpoint.js — Alpine store, WebSocket subscriber, custom request submit, favicon/title indicator. Registers via Alpine.data / Alpine.store inside an alpine:init listener; app scripts load before Alpine so listeners attach before Alpine's first dispatch.
• setInterval loading-dots replaced with a CSS keyframe.
• WS/Alpine race workaround in the template removed.

Home page

• Tighter hero with stronger headline and a single-line subtitle. Larger CTA with arrow icon.
• New Common use cases section: six cards (test webhooks, inspect form payloads, debug API integrations, mobile & IoT traffic, verify cron jobs, share captures with teammates). Icons unified in indigo (brand colour).
• Em-dashes replaced with regular punctuation.

Endpoint page

• Mobile fix: dropped hidden sm:flex from the URL row and send-test panel; everything stays visible at small widths.
• Copy-to-clipboard buttons on URL, request body, request headers JSON. URL button flashes "Copied!" via reactive label.
• Tab title + favicon dot indicator while the tab is hidden — increments unread counter on each WS message; resets on visibilitychange.
• Send-test-request panel (collapsed <details>): pick method, write headers (Key: Value lines), write body, submit. Method and Headers stack vertically.
• Method-based filter dropdown above search.
• Syntax highlighting for JSON and XML bodies via highlight.js (browser bundle, CDN-pinned with SRI). JSON pretty-printed.
• Details and Headers columns aligned: both sections use grid-cols-[10rem_1fr] so values line up vertically across the card.
• Removed the Google-search-WHOIS link on captured IPs and the search-by-header-key link — privacy + simplification.

Contact page

• Wrapped in a card with placeholders, autocomplete hints, and a divider row of helper text + submit button.

Server

• CSP tightened: dropped script-src 'unsafe-inline' (no inline scripts left), added https://cdn.jsdelivr.net for the CDN-pinned Tailwind + highlight.js. 'unsafe-eval' still required by Alpine and the Tailwind Play CDN.

Tests

• Playwright suite: 26 specs, all passing. Covers copy buttons (URL/body/headers writing the right data to the clipboard), method filter, send-test panel submit, JSON/XML highlighter token presence, tab-title indicator under simulated visibilitychange, common use cases section. Clipboard permissions granted in playwright.config.ts.

Test plan

• CI test workflow green (go test, Playwright)
• CI release workflow republishes ghcr.io/formspark/httphq:<tag> after merge
• Spot-check at 375px width: URL row, send panel, request cards all render correctly

Note on Tailwind Play CDN

The Play CDN is dev-grade (compiles utilities at runtime, prints a console warning). Fine for shipping; for a production-hardening pass we'd swap to the standalone Tailwind CLI in the Dockerfile builder stage and ship a precompiled CSS file. Out of scope here.