Spaces:
Running
Running
kam nehi kar raha he bhai jo mang reha huwoo de hi nehi raha he youtube ka video donwload ka bat kar rha hu bhia yeh detect hi nehi kar pa rha he bhai me apna ekk youtube video ka link de rah ahu yeh lkoi dusra video dpownload kar de raha he
20b1b4a
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Video Downloader - Download Videos from Any Website</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| </head> | |
| <body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm border-b border-blue-100"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center"> | |
| <i data-feather="download-cloud" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold text-gray-800">Video Downloader</h1> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#features" class="text-gray-600 hover:text-blue-500 transition-colors">Features</a> | |
| <a href="#how-it-works" class="text-gray-600 hover:text-blue-500 transition-colors">How it Works</a> | |
| <a href="#faq" class="text-gray-600 hover:text-blue-500 transition-colors">FAQ</a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <main class="container mx-auto px-4 py-12"> | |
| <div class="text-center max-w-4xl mx-auto"> | |
| <h2 class="text-4xl md:text-6xl font-bold text-gray-800 mb-6"> | |
| Download Videos from | |
| <span class="text-blue-500">Any Website</span> | |
| </h2> | |
| <p class="text-xl text-gray-600 mb-8 leading-relaxed"> | |
| Fast, free, and easy video downloader. Support for multiple video formats and quality options. | |
| <br class="hidden md:block"> | |
| <span class="text-sm text-red-500 mt-2 block">* Please respect copyright laws and download only content you own or have permission to download.</span> | |
| </p> | |
| </div> | |
| <!-- Download Form --> | |
| <div class="bg-white rounded-2xl shadow-xl p-8 mb-12 max-w-4xl mx-auto"> | |
| <form id="downloadForm" class="space-y-6"> | |
| <div class="space-y-2"> | |
| <label for="videoUrl" class="text-lg font-medium text-gray-700">Video URL <span class="text-sm text-green-600">(YouTube supported!)</span></label> | |
| <div class="flex flex-col md:flex-row gap-4"> | |
| <input | |
| type="url" | |
| id="videoUrl" | |
| placeholder="Paste YouTube URL (e.g., https://www.youtube.com/watch?v=...)" | |
| class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors" | |
| required | |
| > | |
| <button | |
| type="submit" | |
| id="downloadBtn" | |
| class="px-8 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors flex items-center justify-center space-x-2 min-w-[140px] font-medium" | |
| > | |
| <i data-feather="youtube" class="w-5 h-5"></i> | |
| <span>Download</span> | |
| </button> | |
| </div> | |
| <!-- URL Type Indicator --> | |
| <div id="urlTypeIndicator" class="hidden mt-2 p-3 rounded-lg bg-blue-50 border border-blue-200"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="info" class="w-4 h-4 text-blue-500"></i> | |
| <span id="urlTypeText" class="text-sm text-blue-700"></span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Format Selection --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="quality" class="block text-sm font-medium text-gray-700 mb-2">Quality</label> | |
| <select id="quality" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"> | |
| <option value="best">Best Quality</option> | |
| <option value="1080p">1080p HD</option> | |
| <option value="720p">720p HD</option> | |
| <option value="480p">480p</option> | |
| <option value="360p">360p</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="format" class="block text-sm font-medium text-gray-700 mb-2">Format</label> | |
| <select id="format" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"> | |
| <option value="mp4">MP4</option> | |
| <option value="webm">WebM</option> | |
| <option value="mkv">MKV</option> | |
| <option value="avi">AVI</option> | |
| </select> | |
| </div> | |
| </div> | |
| </form> | |
| <!-- Loading State --> | |
| <div id="loadingState" class="hidden mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-500"></div> | |
| <span class="text-blue-700">Processing video...</span> | |
| </div> | |
| </div> | |
| <!-- Results --> | |
| <div id="results" class="hidden mt-6 space-y-4"></div> | |
| </div> | |
| <!-- Features Section --> | |
| <section id="features" class="mb-16"> | |
| <h3 class="text-3xl font-bold text-center text-gray-800 mb-12">Features</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-lg text-center"> | |
| <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="zap" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h4 class="text-xl font-semibold text-gray-800 mb-2">Fast Downloads</h4> | |
| <p class="text-gray-600">High-speed downloads with multiple quality options to choose from.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-lg text-center"> | |
| <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="shield" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h4 class="text-xl font-semibold text-gray-800 mb-2">Safe & Secure</h4> | |
| <p class="text-gray-600">Your data is protected. No registration required, completely anonymous.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-lg text-center"> | |
| <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="monitor" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h4 class="text-xl font-semibold text-gray-800 mb-2">Multi-Platform</h4> | |
| <p class="text-gray-600">Works on all devices - desktop, tablet, and mobile. No software installation needed.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How it Works --> | |
| <section id="how-it-works" class="mb-16"> | |
| <h3 class="text-3xl font-bold text-center text-gray-800 mb-12">How It Works</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-4 text-white text-2xl font-bold">1</div> | |
| <h4 class="text-xl font-semibold text-gray-800 mb-2">Copy URL</h4> | |
| <p class="text-gray-600">Copy the video URL from any website you want to download from.</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-4 text-white text-2xl font-bold">2</div> | |
| <h4 class="text-xl font-semibold text-gray-800 mb-2">Paste & Select</h4> | |
| <p class="text-gray-600">Paste the URL and select your preferred quality and format.</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-4 text-white text-2xl font-bold">3</div> | |
| <h4 class="text-xl font-semibold text-gray-800 mb-2">Download</h4> | |
| <p class="text-gray-600">Click download and save your video in seconds.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ --> | |
| <section id="faq" class="mb-16"> | |
| <h3 class="text-3xl font-bold text-center text-gray-800 mb-12">Frequently Asked Questions</h3> | |
| <div class="max-w-3xl mx-auto space-y-4"> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h4 class="text-lg font-semibold text-gray-800 mb-2">Is this service free to use?</h4> | |
| <p class="text-gray-600">Yes, our video downloader is completely free with no hidden charges or registration required.</p> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h4 class="text-lg font-semibold text-gray-800 mb-2">What websites are supported?</h4> | |
| <p class="text-gray-600">We support direct video links from most websites. However, please respect copyright laws and only download content you own or have permission to download.</p> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h4 class="text-lg font-semibold text-gray-800 mb-2">Are there any file size limits?</h4> | |
| <p class="text-gray-600">The service supports videos up to 2GB. For larger files, please check with your internet connection and available storage space.</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <p class="text-gray-400 mb-4"> | |
| © 2024 Video Downloader. This tool is for educational and legitimate use only. | |
| </p> | |
| <p class="text-gray-500 text-sm"> | |
| Please respect copyright laws and website terms of service. Only download content you own or have permission to download. | |
| </p> | |
| </div> | |
| </footer> | |
| <!-- Toast Notifications --> | |
| <div id="toast" class="fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg transform translate-x-full transition-transform duration-300 z-50"></div> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |