Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>StreamSnatcher Pro - OTT Video Downloader</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .dark .glass-effect { | |
| background: rgba(0, 0, 0, 0.2); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .dark .gradient-bg { | |
| background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen gradient-bg transition-colors duration-300"> | |
| <div id="vanta-bg" class="fixed inset-0 z-0"></div> | |
| <!-- Header --> | |
| <header class="relative z-10"> | |
| <nav class="glass-effect rounded-lg mx-4 mt-4 p-4 shadow-lg"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="download" class="text-white"></i> | |
| <h1 class="text-2xl font-bold text-white">StreamSnatcher Pro</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <a href="settings.html" class="p-2 rounded-full glass-effect text-white"> | |
| <i data-feather="settings"></i> | |
| </a> | |
| <button id="theme-toggle" class="p-2 rounded-full glass-effect text-white"> | |
| <i data-feather="moon"></i> | |
| </button> | |
| <a href="auth.html" class="flex items-center space-x-2 glass-effect px-4 py-2 rounded-lg text-white"> | |
| <i data-feather="user"></i> | |
| <span>Login</span> | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="relative z-10 container mx-auto px-4 py-8"> | |
| <div class="max-w-4xl mx-auto"> | |
| <!-- Hero Section --> | |
| <section class="text-center mb-12"> | |
| <h2 class="text-5xl font-bold text-white mb-4">Download Your Favorite OTT Content</h2> | |
| <p class="text-xl text-white/80 mb-8">Supporting JioCinema, Hotstar, MX Player, Zee5 and more</p> | |
| </section> | |
| <!-- Download Form --> | |
| <section class="glass-effect rounded-2xl p-8 mb-8 shadow-2xl"> | |
| <div class="mb-6"> | |
| <label class="block text-white text-sm font-medium mb-2">Enter Watch URL</label> | |
| <div class="flex space-x-4"> | |
| <input type="text" | |
| placeholder="https://www.hotstar.com/watch/..." | |
| class="flex-1 px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-white/50"> | |
| <button id="download-btn" class="px-6 py-3 bg-white/20 hover:bg-white/30 text-white rounded-lg transition-colors duration-200 flex items-center space-x-2"> | |
| <i data-feather="download" class="w-5 h-5"></i> | |
| <span>Download</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Platform Selection --> | |
| <div class="mb-6"> | |
| <label class="block text-white text-sm font-medium mb-3">Select Platform</label> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <button class="platform-btn p-4 rounded-lg bg-white/10 hover:bg-white/20 border border-white/20 text-white transition-all duration-200"> | |
| <i data-feather="tv" class="w-6 h-6 mb-2"></i> | |
| <span>JioCinema</span> | |
| </button> | |
| <button class="platform-btn p-4 rounded-lg bg-white/10 hover:bg-white/20 border border-white/20 text-white transition-all duration-200"> | |
| <i data-feather="tv" class="w-6 h-6 mb-2"></i> | |
| <span>Hotstar</span> | |
| </button> | |
| <button class="platform-btn p-4 rounded-lg bg-white/10 hover:bg-white/20 border border-white/20 text-white transition-all duration-200"> | |
| <i data-feather="tv" class="w-6 h-6 mb-2"></i> | |
| <span>MX Player</span> | |
| </button> | |
| <button class="platform-btn p-4 rounded-lg bg-white/10 hover:bg-white/20 border border-white/20 text-white transition-all duration-200"> | |
| <i data-feather="tv" class="w-6 h-6 mb-2"></i> | |
| <span>Zee5</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Quality Selection --> | |
| <div class="mb-6"> | |
| <label class="block text-white text-sm font-medium mb-3">Video Quality</label> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="quality-btn px-4 py-2 rounded-full bg-white/20 hover:bg-white/30 text-white border border-white/30 transition-colors duration-200">360p</button> | |
| <button class="quality-btn px-4 py-2 rounded-full bg-white/20 hover:bg-white/30 text-white border border-white/30 transition-colors duration-200">480p</button> | |
| <button class="quality-btn px-4 py-2 rounded-full bg-white/30 text-white border-2 border-white transition-colors duration-200">720p</button> | |
| <button class="quality-btn px-4 py-2 rounded-full bg-white/20 hover:bg-white/30 text-white border border-white/30 transition-colors duration-200">1080p</button> | |
| <button class="quality-btn px-4 py-2 rounded-full bg-white/20 hover:bg-white/30 text-white border border-white/30 transition-colors duration-200">4K</button> | |
| </div> | |
| </div> | |
| <!-- Progress Indicator --> | |
| <div class="progress-section hidden"> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-white text-sm mb-2"> | |
| <span>Download Progress</span> | |
| <span class="progress-percentage">0%</span> | |
| </div> | |
| <div class="w-full bg-white/20 rounded-full h-2"> | |
| <div class="progress-bar bg-white h-2 rounded-full transition-all duration-300" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div class="text-center text-white/80 text-sm"> | |
| <i data-feather="shield" class="w-4 h-4 inline mr-1"></i> | |
| <span>DRM-Free content detected</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Download History --> | |
| <section class="glass-effect rounded-2xl p-8 shadow-2xl"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-2xl font-bold text-white">Download History</h3> | |
| <button class="text-white/70 hover:text-white transition-colors duration-200"> | |
| <i data-feather="trash-2" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- History Item --> | |
| <div class="flex items-center justify-between p-4 rounded-lg bg-white/10 hover:bg-white/20 transition-colors duration-200"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center"> | |
| <i data-feather="film" class="text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-medium">Movie Title - 720p</h4> | |
| <p class="text-white/70 text-sm">Hotstar • Downloaded 2 hours ago</p> | |
| </div> | |
| </div> | |
| <button class="text-white/70 hover:text-white transition-colors duration-200"> | |
| <i data-feather="play" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <!-- More history items would go here --> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="relative z-10 text-center py-8 text-white/60"> | |
| <p>© 2024 StreamSnatcher Pro. For educational purposes only.</p> | |
| <p class="text-sm mt-2">Respect content creators and follow platform terms of service.</p> | |
| </footer> | |
| <script> | |
| // Vanta.js Background | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0xffffff, | |
| backgroundColor: 0x0 | |
| }); | |
| // Theme Toggle | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| themeToggle.addEventListener('click', () => { | |
| document.documentElement.classList.toggle('dark'); | |
| const icon = themeToggle.querySelector('i'); | |
| if (document.documentElement.classList.contains('dark')) { | |
| icon.setAttribute('data-feather', 'sun'); | |
| } else { | |
| icon.setAttribute('data-feather', 'moon'); | |
| } | |
| feather.replace(); | |
| }); | |
| // Platform Selection | |
| document.querySelectorAll('.platform-btn').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| document.querySelectorAll('.platform-btn').forEach(b => b.classList.remove('bg-white/30', 'border-2')); | |
| btn.classList.add('bg-white/30', 'border-2', 'border-white'); | |
| }); | |
| }); | |
| // Quality Selection | |
| document.querySelectorAll('.quality-btn').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| document.querySelectorAll('.quality-btn').forEach(b => b.classList.remove('bg-white/30', 'border-2')); | |
| btn.classList.add('bg-white/30', 'border-2', 'border-white'); | |
| }); | |
| }); | |
| // Download Functionality | |
| document.getElementById('download-btn').addEventListener('click', startDownload); | |
| document.querySelector('input[type="text"]').addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') startDownload(); | |
| }); | |
| function startDownload() { | |
| const urlInput = document.querySelector('input[type="text"]'); | |
| const url = urlInput.value.trim(); | |
| if (!url) { | |
| alert('Please enter a valid URL'); | |
| return; | |
| } | |
| // Validate URL format | |
| if (!url.startsWith('http')) { | |
| alert('Please enter a valid URL starting with http or https'); | |
| return; | |
| } | |
| const progressSection = document.querySelector('.progress-section'); | |
| const progressBar = document.querySelector('.progress-bar'); | |
| const progressPercentage = document.querySelector('.progress-percentage'); | |
| progressSection.classList.remove('hidden'); | |
| // Reset progress | |
| progressBar.style.width = '0%'; | |
| progressPercentage.textContent = '0%'; | |
| // Show processing message | |
| progressPercentage.textContent = 'Processing...'; | |
| // Simulate download progress with realistic steps | |
| let progress = 0; | |
| const interval = setInterval(() => { | |
| if (progress < 20) { | |
| // Initial processing phase | |
| progress += Math.random() * 5; | |
| progressPercentage.textContent = 'Processing video... ' + Math.round(progress) + '%'; | |
| } else if (progress < 40) { | |
| // Fetching video data | |
| progress += Math.random() * 3; | |
| progressPercentage.textContent = 'Fetching video data... ' + Math.round(progress) + '%'; | |
| } else if (progress < 80) { | |
| // Downloading content | |
| progress += Math.random() * 8; | |
| progressPercentage.textContent = 'Downloading... ' + Math.round(progress) + '%'; | |
| } else if (progress < 95) { | |
| // Final processing | |
| progress += Math.random() * 2; | |
| progressPercentage.textContent = 'Finalizing... ' + Math.round(progress) + '%'; | |
| } else { | |
| // Complete | |
| progress = 100; | |
| clearInterval(interval); | |
| progressPercentage.textContent = 'Download Complete!'; | |
| // Add to download history | |
| addToDownloadHistory(url); | |
| } | |
| progressBar.style.width = progress + '%'; | |
| }, 300); | |
| } | |
| function addToDownloadHistory(url) { | |
| const historySection = document.querySelector('.space-y-4'); | |
| const emptyState = historySection.querySelector('.text-center'); | |
| if (emptyState) { | |
| emptyState.remove(); | |
| } | |
| // Create history item | |
| const historyItem = document.createElement('div'); | |
| historyItem.className = 'flex items-center justify-between p-4 rounded-lg bg-white/10 hover:bg-white/20 transition-colors duration-200'; | |
| historyItem.innerHTML = ` | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center"> | |
| <i data-feather="film" class="text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-medium">${getVideoTitleFromUrl(url)}</h4> | |
| <p class="text-white/70 text-sm">${getPlatformFromUrl(url)} • Downloaded just now</p> | |
| </div> | |
| </div> | |
| <button class="text-white/70 hover:text-white transition-colors duration-200"> | |
| <i data-feather="play" class="w-5 h-5"></i> | |
| </button> | |
| `; | |
| historySection.prepend(historyItem); | |
| feather.replace(); | |
| } | |
| function getPlatformFromUrl(url) { | |
| if (url.includes('hotstar')) return 'Hotstar'; | |
| if (url.includes('jiocinema')) return 'JioCinema'; | |
| if (url.includes('mxplayer')) return 'MX Player'; | |
| if (url.includes('zee5')) return 'Zee5'; | |
| return 'Unknown Platform'; | |
| } | |
| function getVideoTitleFromUrl(url) { | |
| // Extract title from URL or use a generic title | |
| const platform = getPlatformFromUrl(url); | |
| return `${platform} Video - ${new Date().toLocaleDateString()}`; | |
| } | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |