Create a modern, responsive YouTube Thumbnail Downloader web app. The site must let users paste a YouTube video URL and instantly preview and download available thumbnails (including 4K when available). Deliver separate files: index.html, styles.css, app.js. Provide production-ready, accessible, SEO-friendly code and clear inline comments.
Design & visual style:
Clean, professional UI with a subtle gradient primary palette (eg. #fff95b to #ff930f) and smooth neumorphic / glassy cards.
Support 4K preview (high-res image display, with download button that saves original resolution if available).
Use modern typography (system stack + Google Font fallback).
Add tasteful micro-animations: header fade, input focus glow, button hover, thumbnail hover scale, download progress animation. Use CSS transitions and minimal JS for animations.
Provide both desktop and mobile layouts (responsive grid); ensure it looks great on 4K monitors and mobiles.
Header & Footer:
Header: logo (SVG), site name, navigation links: Home, About, How it works, Privacy Policy, Contact. Sticky on scroll with subtle backdrop blur.
Footer: quick links, short copyright, contact email, social icons (SVG), small note about respecting YouTube TOS.
Core features & UX:
Input area for YouTube URL with placeholder https://www.youtube.com/watch?v=XXXXXXXXXXX. Validate input and show friendly error messages.
On submit, extract video ID client-side and fetch thumbnail URLs (standard YouTube patterns + high-res heuristics). No server required for basic functionality — just create download links for known thumbnail endpoints (document logic in comments).
Preview area showing multiple sizes (default thumbnails, hqdefault, sddefault, maxresdefault for 4K). For each thumbnail: show resolution label, filesize estimate (if obtainable), a Preview (lazy-loaded), and a Download button.
If maxresdefault not available, detect 404 and disable 4K with a tooltip explaining "4K not available for this video".
Provide a Download All button that opens a zipped download (optional) or triggers individual downloads sequentially. If zipping client-side, use a small library (mention as optional dependency).
Accessibility: keyboard focus states, aria labels, visible form labels, contrast, and alt text for images.
Interaction & animations:
Input gains a glowing border on focus.
Loading state: animated progress bar or spinner while checking images.
Thumbnail cards animate in (slide + fade).
Download button shows a short success microcopy (toast) and a check animation once download starts.
Instructions / “How to download” section:
Add a short step-by-step block (3 steps): 1) Paste YouTube link, 2) Choose resolution, 3) Click Download. Provide small screenshots or icons. Include a FAQ blurb about copyright and using thumbnails properly.
Code & structure requirements:
Provide three separate files only: index.html, styles.css, app.js. No build step required; vanilla HTML/CSS/JS. Keep code modular and well commented.
index.html must contain meta tags (Open Graph, meta description), structured data snippet (JSON-LD) for a WebApplication, and semantic markup.
styles.css must use CSS variables for theme, responsive breakpoints, and include all animations. Keep styles safe for 4K displays (use max-width containers).
app.js must: validate and parse YouTube URLs robustly (support youtu.be, youtube.com/watch?v=, youtube.com/shorts/), build thumbnail URLs, test availability (via fetch head request or image onerror), update UI, and manage downloads. Add comments explaining the logic and fallback behaviour.
Performance & privacy:
Lazy-load thumbnails. Minimise external requests. Do not send user video URLs to any external server. Make everything client-side. If any external library is used (zip or tiny helper), list it and provide CDN fallback.
Extras (nice to have):
Drag & drop support for URLs.
Copy direct image link button.
Theme toggle (light/dark).
Small analytics placeholder (commented out) and a privacy note.
Deliverables:
index.html — full semantic HTML with header, main (input + preview + instructions), footer, and linked CSS/JS.
styles.css — complete style file with animations and responsive rules.
app.js — completed JS with comments and no external build.
A README block at the top of index.html or a separate readme comment describing file usage, browser support, and notes on 4K availability limitations.
Tone of UI text: friendly, concise British English (eg. “Paste a YouTube link to fetch thumbnails”).
Security & legal note (display somewhere small): remind users to respect YouTube’s Terms of Service and copyright when reusing thumbnails.