JIT
build a responsive instagram video downloader web app
Create a modern, responsive Instagram Video Downloader web app. The site must let users paste an Instagram post / Reel / Story / IGTV URL and preview and download the highest quality video available (HD / 4K when the source provides it). 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 using a soft gradient primary palette (suggested: #fff95b → #ff930f) or a palette that complements Instagram’s aesthetic. Use glassy / card UI with subtle shadows. Support high-resolution preview (best-available resolution display, with a download button that saves original resolution when accessible). Ensure layout looks great on 4K screens and mobile. Modern typography (system stack with a Google Font fallback). Micro-animations: header fade, input focus glow, button hover ripple, thumbnail/video hover scale, and toast notifications. Use CSS transitions and minimal JS. Responsive grid and breakpoints for mobile/tablet/desktop. Header & Footer: Header: SVG logo, site name, nav: Home, About, How it works, Privacy Policy, Contact. Sticky with subtle backdrop blur on scroll. Footer: quick links, contact email, social icons (SVG), short legal note about respecting Instagram’s terms and copyright. Core features & UX: Input field for Instagram URL with placeholder examples (https://www.instagram.com/p/XXXXXXXXX/, https://www.instagram.com/reel/XXXXXXXXX/). Robust validation and friendly error messages. Client-side attempt to extract the direct video URL(s) using safe heuristics. Because Instagram serves media behind CORS / private endpoints, include two operation modes: Client-only mode (best-effort): Attempt to fetch open public resources and provide download links for media endpoints that allow direct download (document the CORS limitations). Server-assisted mode (recommended for reliability): Provide optional documented instructions (commented) for a tiny backend endpoint (Node/Express or serverless) that fetches Instagram pages and returns direct media URLs to the client (explain CORS and security considerations). Support multiple media types: single video post, carousel (show all), Reels, Stories (if public), IGTV. Detect media type and show appropriate UI. Preview area: show video player (lazy-loaded) with resolution labels and size estimate (if obtainable). Provide Download (HD/Original) button for each available quality and a Copy direct link button. If multiple variants (adaptive/ABR) exist, show the best available quality and allow user to choose lower/resampled versions. If 4K isn’t available, explain “Original full quality not available” in a tooltip. Download All for carousel posts: optionally zip media client-side using a small library (e.g. JSZip via CDN) or trigger sequential downloads. Make this optional and commented in the code. Accessibility: keyboard focus states, aria labels, visible labels, and readable contrast. Interactions & animations: Input focus glow and subtle animated placeholder. Loading state: animated progress bar or spinner while fetching and analysing the URL. Media cards animate in with slide + fade. Download button shows brief toast and success check animation when download starts. How to download / Instructions section: Short step-by-step (3 steps): 1) Paste Instagram link, 2) Click Fetch / Preview, 3) Choose resolution and press Download. Provide icons/screenshots and a small FAQ about copyright and public vs private posts. Explain that private account content cannot be downloaded unless the user has legal access and provide a short legal disclaimer. Code & structure requirements: Provide three separate files only: index.html, styles.css, app.js. No build step; vanilla HTML/CSS/JS. Keep code modular and well commented. index.html must include meta tags (Open Graph, meta description), semantic markup, and a small JSON-LD WebApplication snippet. styles.css must use CSS variables for theme, responsive breakpoints, and include animations. Ensure styles work well on 4K displays (max-width containers, scalable assets). app.js must: validate and parse Instagram URLs robustly (support instagram.com/p/..., instagram.com/reel/..., instagram.com/tv/..., instagr.am short URLs), attempt to build or fetch direct media endpoints, gracefully handle CORS failures and switch to server-assisted instructions. Include comments explaining limitations and fallback behaviour. Use fetch with proper error handling, onerror handlers for images/videos, and progressive enhancement. Avoid logging sensitive user data. Performance & privacy: Lazy-load previews and minimise third-party requests. Do not persist or log user-submitted URLs in the client. If using a backend option, document that the server must be stateless and must not store URLs or media (or clearly disclose storage in the README). Provide a short privacy note in the footer. Security & legal: Add an explicit small legal notice reminding users to respect Instagram’s Terms of Service and copyright law. State that the tool only supports public posts and cannot access private content. Extras (nice to have): Drag & drop URL support. Theme toggle (light/dark). Copy direct link button. Small analytics placeholder (commented) and privacy-first defaults. Option to download captions (if available) as .srt or .txt. Dependencies & optional libraries (CDN only): Optional: JSZip (for zipping multiple files) — include CDN snippet and fallback comment. Optional tiny toast library or implement a minimal custom toast. Keep external dependencies minimal and optional. Deliverables: index.html — full semantic HTML with header, main (input + preview + instructions), and footer. Link CSS/JS files. styles.css — full styling with CSS variables and animations. app.js — robust JS with comments, error handling, and a clear section explaining server-assisted mode (with example Node/Express snippet commented). README comment at top of index.html explaining capabilities, CORS/4K limitations, and how to enable server-assisted mode. Tone of UI text: friendly, concise British English (eg. “Paste an Instagram link to fetch available videos”). Final note for the developer: highlight in the code where Instagram’s CORS or private endpoints may block client-only downloads; suggest the small server snippet if reliable success is needed. Always include a short legal/copyright reminder in the footer.
Updated files
v1