Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Instagram Downloader - YouTube Automation</title> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| </head> | |
| <body> | |
| <div class="background-animation"> | |
| <div class="gradient-orb orb-1"></div> | |
| <div class="gradient-orb orb-2"></div> | |
| <div class="gradient-orb orb-3"></div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="navbar glass-card"> | |
| <div class="nav-container"> | |
| <a href="/" class="nav-brand"> | |
| <i class="fab fa-youtube"></i> | |
| <span>YouTube Automation</span> | |
| </a> | |
| <div class="nav-menu"> | |
| <a href="/" class="nav-link"><i class="fas fa-home"></i> Home</a> | |
| <a href="/downloader" class="nav-link active"><i class="fas fa-download"></i> Downloader</a> | |
| <a href="/metadata-generator" class="nav-link"><i class="fas fa-brain"></i> Metadata</a> | |
| <a href="/uploader" class="nav-link"><i class="fas fa-upload"></i> Uploader</a> | |
| </div> | |
| <button class="mobile-menu-toggle" id="mobileMenuToggle"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Mobile Menu --> | |
| <div class="mobile-menu glass-card" id="mobileMenu"> | |
| <a href="/" class="mobile-menu-link"><i class="fas fa-home"></i> Home</a> | |
| <a href="/downloader" class="mobile-menu-link"><i class="fas fa-download"></i> Downloader</a> | |
| <a href="/metadata-generator" class="mobile-menu-link"><i class="fas fa-brain"></i> Metadata Generator</a> | |
| <a href="/uploader" class="mobile-menu-link"><i class="fas fa-upload"></i> Uploader</a> | |
| </div> | |
| <div class="container"> | |
| <!-- Hero Section --> | |
| <section class="page-hero fade-in"> | |
| <div class="hero-badge"> | |
| <i class="fas fa-download"></i> | |
| <span>High Quality Downloads</span> | |
| </div> | |
| <h1>Instagram Reel Downloader</h1> | |
| <p class="hero-subtitle">Download Instagram Reels in HD quality with original audio preserved. Fast, reliable, and easy to use.</p> | |
| </section> | |
| <!-- Downloader Section --> | |
| <section class="upload-section glass-card fade-in-delay"> | |
| <div class="section-header"> | |
| <i class="fas fa-download"></i> | |
| <h2>Download Your Reel</h2> | |
| <p>Paste the Instagram Reel URL below and click download</p> | |
| </div> | |
| <div class="input-group"> | |
| <i class="fab fa-instagram"></i> | |
| <input type="text" id="downloadUrl" class="glass-input" | |
| placeholder="Paste Instagram Reel URL here... (e.g., https://www.instagram.com/reel/...)"> | |
| </div> | |
| <div class="button-group"> | |
| <button id="downloadBtn" class="btn btn-primary"> | |
| <i class="fas fa-download"></i> Download Reel | |
| </button> | |
| </div> | |
| <!-- Progress Section --> | |
| <div id="progressSection" class="progress-section" style="display: none;"> | |
| <div class="progress-header"> | |
| <h3 id="progressTitle">Downloading...</h3> | |
| <span id="progressPercent" class="progress-percent">0%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div id="progressFill" class="progress-fill" style="width: 0%"></div> | |
| </div> | |
| <p id="progressMessage" class="progress-message">Starting download...</p> | |
| </div> | |
| <!-- Success Result --> | |
| <div id="successResult" class="result-section success glass-card" style="display: none;"> | |
| <div class="result-icon">✅</div> | |
| <h3>Download Complete!</h3> | |
| <p>Your video has been downloaded successfully</p> | |
| <button id="downloadAgainBtn" class="btn btn-retry"> | |
| <i class="fas fa-redo"></i> Download Another | |
| </button> | |
| </div> | |
| <!-- Error Result --> | |
| <div id="errorResult" class="result-section error glass-card" style="display: none;"> | |
| <div class="result-icon">❌</div> | |
| <h3>Download Failed</h3> | |
| <p id="errorMessage">An error occurred</p> | |
| <button id="retryBtn" class="btn btn-retry"> | |
| <i class="fas fa-redo"></i> Try Again | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="features-section fade-in-delay-1"> | |
| <div class="section-header"> | |
| <h2>Why Use Our Downloader?</h2> | |
| <p>Powerful features designed for content creators</p> | |
| </div> | |
| <div class="features-grid-small"> | |
| <div class="feature-card glass-card"> | |
| <i class="fas fa-hd-video feature-icon-small"></i> | |
| <h3>HD Quality</h3> | |
| <p>Download videos in the highest quality available, preserving every detail of the original content.</p> | |
| </div> | |
| <div class="feature-card glass-card"> | |
| <i class="fas fa-volume-up feature-icon-small"></i> | |
| <h3>Audio Preservation</h3> | |
| <p>Original audio is preserved perfectly, including music, voice-overs, and sound effects.</p> | |
| </div> | |
| <div class="feature-card glass-card"> | |
| <i class="fas fa-bolt feature-icon-small"></i> | |
| <h3>Lightning Fast</h3> | |
| <p>High-speed download servers ensure your videos are downloaded quickly and efficiently.</p> | |
| </div> | |
| <div class="feature-card glass-card"> | |
| <i class="fas fa-shield-alt feature-icon-small"></i> | |
| <h3>Secure & Private</h3> | |
| <p>Your downloads are secure and private. We don't store any of your downloaded content.</p> | |
| </div> | |
| <div class="feature-card glass-card"> | |
| <i class="fas fa-mobile-alt feature-icon-small"></i> | |
| <h3>Mobile Friendly</h3> | |
| <p>Works perfectly on all devices - desktop, tablet, and mobile phones.</p> | |
| </div> | |
| <div class="feature-card glass-card"> | |
| <i class="fas fa-infinity feature-icon-small"></i> | |
| <h3>Unlimited Downloads</h3> | |
| <p>No limits on how many reels you can download. Use it as much as you need.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How to Use Section --> | |
| <section class="how-to-use glass-card fade-in-delay-2"> | |
| <div class="section-header"> | |
| <h2>How to Download Instagram Reels</h2> | |
| <p>Simple 3-step process</p> | |
| </div> | |
| <div class="steps-list"> | |
| <div class="step-card"> | |
| <div class="step-number-badge">1</div> | |
| <div class="step-info"> | |
| <h3>Find the Reel on Instagram</h3> | |
| <p>Open Instagram and navigate to the Reel you want to download. Click the three dots menu and select "Copy Link".</p> | |
| <div class="step-tip"> | |
| <i class="fas fa-lightbulb"></i> | |
| <span>Tip: Works with both public and accessible Reels</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="step-card"> | |
| <div class="step-number-badge">2</div> | |
| <div class="step-info"> | |
| <h3>Paste the URL</h3> | |
| <p>Paste the copied link into the input field above. Make sure the URL is complete and valid.</p> | |
| <div class="step-tip"> | |
| <i class="fas fa-lightbulb"></i> | |
| <span>Tip: URL should start with https://www.instagram.com/reel/</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="step-card"> | |
| <div class="step-number-badge">3</div> | |
| <div class="step-info"> | |
| <h3>Click Download</h3> | |
| <p>Click the "Download Reel" button and wait a few seconds. Your video will be downloaded automatically.</p> | |
| <div class="step-tip"> | |
| <i class="fas fa-lightbulb"></i> | |
| <span>Tip: Check your downloads folder for the video file</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Benefits Section --> | |
| <section class="benefits-section fade-in-delay-3"> | |
| <div class="section-header"> | |
| <h2>Perfect For</h2> | |
| <p>Who can benefit from our downloader</p> | |
| </div> | |
| <div class="use-cases-grid"> | |
| <div class="use-case-item"> | |
| <i class="fas fa-video"></i> | |
| <h4>Content Creators</h4> | |
| <p>Save inspiration and create compilation videos</p> | |
| </div> | |
| <div class="use-case-item"> | |
| <i class="fas fa-bullhorn"></i> | |
| <h4>Marketers</h4> | |
| <p>Download content for analysis and research</p> | |
| </div> | |
| <div class="use-case-item"> | |
| <i class="fas fa-graduation-cap"></i> | |
| <h4>Educators</h4> | |
| <p>Save educational content for offline viewing</p> | |
| </div> | |
| <div class="use-case-item"> | |
| <i class="fas fa-users"></i> | |
| <h4>Social Media Managers</h4> | |
| <p>Backup and archive important content</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="faq-section fade-in-delay-3"> | |
| <div class="section-header"> | |
| <h2>Frequently Asked Questions</h2> | |
| <p>Common questions about the downloader</p> | |
| </div> | |
| <div class="faq-container"> | |
| <div class="faq-item glass-card"> | |
| <div class="faq-question"> | |
| <i class="fas fa-question-circle"></i> | |
| <h3>Is it free to use?</h3> | |
| <i class="fas fa-chevron-down faq-toggle"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| <p>Yes! Our Instagram Reel downloader is completely free to use with unlimited downloads.</p> | |
| </div> | |
| </div> | |
| <div class="faq-item glass-card"> | |
| <div class="faq-question"> | |
| <i class="fas fa-question-circle"></i> | |
| <h3>What quality will my video be?</h3> | |
| <i class="fas fa-chevron-down faq-toggle"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| <p>We download videos in the highest quality available from Instagram, typically HD quality with original audio preserved.</p> | |
| </div> | |
| </div> | |
| <div class="faq-item glass-card"> | |
| <div class="faq-question"> | |
| <i class="fas fa-question-circle"></i> | |
| <h3>Do I need to log in to Instagram?</h3> | |
| <i class="fas fa-chevron-down faq-toggle"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| <p>You need to configure your Instagram session ID in the .env file for the downloader to work. This is a one-time setup and doesn't require sharing your password.</p> | |
| </div> | |
| </div> | |
| <div class="faq-item glass-card"> | |
| <div class="faq-question"> | |
| <i class="fas fa-question-circle"></i> | |
| <h3>Can I download private Reels?</h3> | |
| <i class="fas fa-chevron-down faq-toggle"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| <p>You can download Reels that are accessible to your Instagram account. Make sure you have permission to view the content.</p> | |
| </div> | |
| </div> | |
| <div class="faq-item glass-card"> | |
| <div class="faq-question"> | |
| <i class="fas fa-question-circle"></i> | |
| <h3>Where are downloaded videos saved?</h3> | |
| <i class="fas fa-chevron-down faq-toggle"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| <p>Videos are saved to your default downloads folder. The browser will typically show a download notification at the bottom of the screen.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="cta-section glass-card fade-in-delay-3 text-center"> | |
| <i class="fas fa-rocket cta-icon"></i> | |
| <h2>Need More Features?</h2> | |
| <p>Try our other tools for a complete automation experience</p> | |
| <div class="cta-buttons"> | |
| <a href="/metadata-generator" class="btn btn-preview btn-large"> | |
| <i class="fas fa-brain"></i> Try Metadata Generator | |
| </a> | |
| <a href="/uploader" class="btn btn-primary btn-large"> | |
| <i class="fas fa-upload"></i> Upload to YouTube | |
| </a> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Loading Overlay --> | |
| <div id="loadingOverlay" class="loading-overlay" style="display: none;"> | |
| <div class="loading-spinner"></div> | |
| <p>Processing...</p> | |
| </div> | |
| <!-- Toast Notification --> | |
| <div id="toast" class="toast"></div> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuToggle = document.getElementById('mobileMenuToggle'); | |
| const mobileMenu = document.getElementById('mobileMenu'); | |
| if (mobileMenuToggle) { | |
| mobileMenuToggle.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('active'); | |
| }); | |
| } | |
| // Close mobile menu when clicking outside | |
| document.addEventListener('click', (e) => { | |
| if (mobileMenu && | |
| mobileMenu.classList.contains('active') && | |
| !mobileMenu.contains(e.target) && | |
| !mobileMenuToggle.contains(e.target)) { | |
| mobileMenu.classList.remove('active'); | |
| } | |
| }); | |
| // FAQ Accordion | |
| document.querySelectorAll('.faq-question').forEach(question => { | |
| question.addEventListener('click', () => { | |
| const faqItem = question.parentElement; | |
| const isActive = faqItem.classList.contains('active'); | |
| document.querySelectorAll('.faq-item').forEach(item => { | |
| item.classList.remove('active'); | |
| }); | |
| if (!isActive) { | |
| faqItem.classList.add('active'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <script src="{{ url_for('static', filename='js/downloader.js') }}"></script> | |
| </body> | |
| </html> | |