JIT
create a polished loading screen for evalink with sound and redirect
You are a senior front-end engineer. Build a polished HTML/CSS/JS loading screen branded **EVALINK** that finishes by playing a short success sound, then redirects to another page. GOAL - A full-screen loader for “EVALINK” that feels like a product intro: sleek, minimal, responsive, fast. - When loading completes: play a success chime once, then redirect. REQUIREMENTS 1) Branding & Layout - Centered EVALINK wordmark with subtle letter-spacing and a thin underline “signal” animation. - Below it: a progress bar with numeric percent (00%→100%). - Dark theme, high contrast, modern type (system font stack). - Works from 320px to 4K. 2) Motion & Polish - Smooth progress animation (2.8–3.5s total) with easing. - Underline “signal” animates left→right in a loop while loading. - Respect `prefers-reduced-motion`: disable non-essential animation and only update the percent text. 3) Sound on Completion - On reaching 100%, play a short success sound at ~30% volume. - Autoplay-safe: unlock audio via a user gesture. Show an initial “Tap to Start” veil if needed; once tapped, hide veil and start the loader. - Do not loop the sound; ensure it doesn’t double-play on fast devices. 4) Redirect - After the sound starts, wait 600ms, then `window.location.href = REDIRECT_URL`. - Make `REDIRECT_URL` a single configurable constant near the top of `app.js`. 5) Accessibility - Semantic structure (`main`, `h1`, `progress` with `aria-valuenow`). - Sufficient color contrast (WCAG AA). - Visible focus states for the Start button/veil. - Screen-reader only text announcing percent changes. 6) No external dependencies - Single self-contained component; no libraries, no CDNs. - Include a tiny success “ding” as a Base64-embedded audio (Data URI) in JS. 7) Files & Structure - `index.html` — minimal markup. - `styles.css` — variables for colors, spacing, timing; uses CSS only for visuals. - `app.js` — progress simulation, audio unlock, completion flow, redirect. - Keep total CSS < 200 lines, JS < 200 lines. 8) Edge Cases - If audio can’t play, continue to redirect after the same delay. - If `prefers-reduced-motion`, skip bar animation; increment percent text with `requestAnimationFrame`. - Never hang at 99%—always resolve. DELIVERABLE - Provide the three files in separate code blocks. - In `app.js`, include: - `const REDIRECT_URL = "https://example.com/dashboard";` - `const LOAD_DURATION_MS = 3200;` - `const REDIRECT_DELAY_MS = 600;` - A small Base64 WAV/MP3 `SUCCESS_CHIME_DATA_URI` string. - Brief instructions (3 lines max) on how to change the redirect URL and duration. VISUAL STYLE HINT - Background: near-black. - Wordmark: light gray/white; slight tracking; underlined signal bar animates. - Progress bar: thin, rounded, subtle glow at the leading edge.

To change redirect or duration: edit REDIRECT_URL and LOAD_DURATION_MS at the top of app.js.
Open index.html in a browser (or serve with a static server) to run the loader._

Updated files
v1