Create a modern, responsive Instagram Video Downloader web app. The site must allow users to paste an Instagram post / Reel / Story / IGTV link, preview the media, and download in the highest quality available (HD or 4K). Deliver three separate files: index.html, styles.css, app.js. The design must be elegant, professional, and optimised for all devices.
Design & visual style:
Colour scheme: Deep blue #0d1b2a, accent purple #7209b7, and soft neon cyan #00f5d4. White text on dark backgrounds for contrast.
UI style: Clean, minimal, with glowing accents on interactive elements. Use soft shadows and rounded corners (border-radius: 12px).
Fonts: Sans-serif modern font such as "Poppins" or "Inter".
Smooth hover effects: glowing borders, scaling buttons, fade-in content.
Works beautifully on both desktop and mobile — responsive layout with grid and flex.
Header & Footer:
Header: Sticky at the top, with logo on the left and navigation links (Home, About, How it Works, Privacy Policy, Contact). Subtle shadow and backdrop blur when scrolling.
Footer: Quick links, small legal note, contact email, and social icons in matching theme colours. Slight glow on hover.
Core features & UX:
Input bar for Instagram link (placeholder example: https://www.instagram.com/reel/XXXXXXXXX/).
Validate the URL format and show a friendly error message if it’s invalid.
On submit, fetch and display media preview (video player or image).
Provide multiple quality options when available (HD, Original, 4K). Show resolution labels clearly.
Download button for each quality option — big, glowing, animated on hover.
If multiple videos/images in one post (carousel), show all with a Download All option.
Clear loading animation while fetching data.
Accessibility: aria labels, keyboard navigation, readable contrast.
How to Download section:
Title: “How to Download Videos” with three illustrated steps:
Paste Instagram link
Preview the video in high resolution
Choose resolution & download
Add a small FAQ about HD/4K availability and respecting copyright.
Animations & effects:
Input field glow on focus.
Buttons have ripple animation on click.
Media cards slide up with fade-in when loaded.
Progress spinner or progress bar while loading.
Code structure requirements:
index.html — fully semantic with meta tags, structured data (JSON-LD), and linked CSS/JS files.
styles.css — all theme colours as CSS variables, responsive breakpoints, animations, and hover effects.
app.js — logic for URL validation, fetching media info, rendering previews, handling download actions, and error handling.
Use vanilla JS — no build tools, everything runs client-side.
Include comments explaining logic and CORS limitations for Instagram.
Performance & privacy:
Lazy-load previews.
Do not store or log URLs.
If CORS blocks media fetching, include commented code for a simple Node.js/Express backend solution.
Legal note:
Add a small disclaimer: “This tool supports only public content. Please respect Instagram’s Terms of Service and copyright laws.”
Extras (optional):
Dark/Light mode toggle.
Copy direct link button.
Drag & drop link input.
Download captions if available.
Deliverables:
index.html — main page with header, tool interface, How-to section, and footer.
styles.css — theme styling, responsive layout, and animations.
app.js — functional script for fetching, previewing, and downloading videos.