|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Universal Video Downloader | Download Videos from Any Link</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6e8efb, #a777e3); |
|
|
} |
|
|
.download-btn { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.download-btn:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
.input-field { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.input-field:focus { |
|
|
box-shadow: 0 0 0 3px rgba(110, 142, 251, 0.3); |
|
|
} |
|
|
.platform-icon { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.platform-icon:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { |
|
|
transform: scale(1); |
|
|
} |
|
|
50% { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
100% { |
|
|
transform: scale(1); |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
|
|
|
<header class="gradient-bg text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-video text-3xl"></i> |
|
|
<h1 class="text-2xl font-bold">Universal Video Downloader</h1> |
|
|
</div> |
|
|
<nav> |
|
|
<ul class="flex space-x-6"> |
|
|
<li><a href="#" class="hover:text-gray-200 transition">Home</a></li> |
|
|
<li><a href="#features" class="hover:text-gray-200 transition">Features</a></li> |
|
|
<li><a href="#how-it-works" class="hover:text-gray-200 transition">How It Works</a></li> |
|
|
<li><a href="#faq" class="hover:text-gray-200 transition">FAQ</a></li> |
|
|
</ul> |
|
|
</nav> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="gradient-bg text-white py-16"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0"> |
|
|
<h2 class="text-4xl font-bold mb-4">Download Videos from Any Website</h2> |
|
|
<p class="text-xl mb-6">Fast, secure and free video downloads from YouTube, Facebook, Instagram, TikTok and many more platforms.</p> |
|
|
<div class="bg-white rounded-lg p-4 shadow-lg"> |
|
|
<div class="flex"> |
|
|
<input type="text" id="videoUrl" placeholder="Paste video link here..." class="input-field flex-grow px-4 py-3 rounded-l-lg border-2 border-gray-300 focus:outline-none focus:border-blue-500 text-gray-800"> |
|
|
<button id="downloadBtn" class="download-btn bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-r-lg font-semibold transition"> |
|
|
<i class="fas fa-download mr-2"></i> Download |
|
|
</button> |
|
|
</div> |
|
|
<div id="errorMsg" class="text-red-500 mt-2 hidden"></div> |
|
|
</div> |
|
|
<div id="downloadOptions" class="mt-4 hidden"> |
|
|
<div class="bg-white rounded-lg p-4 shadow-lg text-gray-800"> |
|
|
<h3 class="font-bold mb-2">Available Formats</h3> |
|
|
<div id="formatOptions" class="grid grid-cols-2 gap-2"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/3342/3342137.png" alt="Video Download Illustration" class="w-3/4 pulse"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Supported Platforms</h2> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6"> |
|
|
<div class="platform-icon flex flex-col items-center p-4 rounded-lg hover:bg-gray-100 cursor-pointer"> |
|
|
<i class="fab fa-youtube text-4xl text-red-600 mb-2"></i> |
|
|
<span class="font-medium">YouTube</span> |
|
|
</div> |
|
|
<div class="platform-icon flex flex-col items-center p-4 rounded-lg hover:bg-gray-100 cursor-pointer"> |
|
|
<i class="fab fa-facebook text-4xl text-blue-600 mb-2"></i> |
|
|
<span class="font-medium">Facebook</span> |
|
|
</div> |
|
|
<div class="platform-icon flex flex-col items-center p-4 rounded-lg hover:bg-gray-100 cursor-pointer"> |
|
|
<i class="fab fa-instagram text-4xl text-pink-600 mb-2"></i> |
|
|
<span class="font-medium">Instagram</span> |
|
|
</div> |
|
|
<div class="platform-icon flex flex-col items-center p-4 rounded-lg hover:bg-gray-100 cursor-pointer"> |
|
|
<i class="fab fa-tiktok text-4xl text-black mb-2"></i> |
|
|
<span class="font-medium">TikTok</span> |
|
|
</div> |
|
|
<div class="platform-icon flex flex-col items-center p-4 rounded-lg hover:bg-gray-100 cursor-pointer"> |
|
|
<i class="fab fa-twitter text-4xl text-blue-400 mb-2"></i> |
|
|
<span class="font-medium">Twitter</span> |
|
|
</div> |
|
|
<div class="platform-icon flex flex-col items-center p-4 rounded-lg hover:bg-gray-100 cursor-pointer"> |
|
|
<i class="fas fa-globe text-4xl text-green-600 mb-2"></i> |
|
|
<span class="font-medium">Other Sites</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="features" class="py-12 bg-gray-100"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Why Choose Our Downloader</h2> |
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="text-blue-500 mb-4"> |
|
|
<i class="fas fa-bolt text-4xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Fast Downloads</h3> |
|
|
<p class="text-gray-600">Our optimized servers ensure your videos download at the highest possible speed.</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="text-green-500 mb-4"> |
|
|
<i class="fas fa-shield-alt text-4xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Safe & Secure</h3> |
|
|
<p class="text-gray-600">No registration required. We don't store your data or downloaded videos.</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="text-purple-500 mb-4"> |
|
|
<i class="fas fa-mobile-alt text-4xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">All Devices</h3> |
|
|
<p class="text-gray-600">Works perfectly on smartphones, tablets, and computers. No app installation needed.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="how-it-works" class="py-12 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">How It Works</h2> |
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="flex flex-col items-center text-center"> |
|
|
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-4"> |
|
|
<span class="text-blue-600 font-bold text-xl">1</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Paste the URL</h3> |
|
|
<p class="text-gray-600">Copy and paste the video link from any supported platform into the input field.</p> |
|
|
</div> |
|
|
<div class="flex flex-col items-center text-center"> |
|
|
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-4"> |
|
|
<span class="text-blue-600 font-bold text-xl">2</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Choose Format</h3> |
|
|
<p class="text-gray-600">Select your preferred video quality and format from the available options.</p> |
|
|
</div> |
|
|
<div class="flex flex-col items-center text-center"> |
|
|
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-4"> |
|
|
<span class="text-blue-600 font-bold text-xl">3</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Download</h3> |
|
|
<p class="text-gray-600">Click the download button and save the video directly to your device.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="faq" class="py-12 bg-gray-100"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Frequently Asked Questions</h2> |
|
|
<div class="max-w-3xl mx-auto"> |
|
|
<div class="bg-white rounded-lg shadow-md mb-4 overflow-hidden"> |
|
|
<button class="faq-question w-full text-left p-4 font-medium hover:bg-gray-50 transition flex justify-between items-center"> |
|
|
<span>Is this service free to use?</span> |
|
|
<i class="fas fa-chevron-down transition-transform"></i> |
|
|
</button> |
|
|
<div class="faq-answer p-4 border-t hidden"> |
|
|
<p class="text-gray-600">Yes, our video downloader is completely free to use with no hidden charges. We may display ads to support the service, but downloading videos will always remain free.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow-md mb-4 overflow-hidden"> |
|
|
<button class="faq-question w-full text-left p-4 font-medium hover:bg-gray-50 transition flex justify-between items-center"> |
|
|
<span>What video formats are supported?</span> |
|
|
<i class="fas fa-chevron-down transition-transform"></i> |
|
|
</button> |
|
|
<div class="faq-answer p-4 border-t hidden"> |
|
|
<p class="text-gray-600">We support MP4, WEBM, 3GP and other popular video formats. The available formats depend on the source video and platform. You can choose from different quality options during download.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow-md mb-4 overflow-hidden"> |
|
|
<button class="faq-question w-full text-left p-4 font-medium hover:bg-gray-50 transition flex justify-between items-center"> |
|
|
<span>Is it legal to download videos?</span> |
|
|
<i class="fas fa-chevron-down transition-transform"></i> |
|
|
</button> |
|
|
<div class="faq-answer p-4 border-t hidden"> |
|
|
<p class="text-gray-600">The legality depends on copyright laws in your country and how you intend to use the downloaded videos. We recommend only downloading videos you have permission to use or for personal viewing.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow-md mb-4 overflow-hidden"> |
|
|
<button class="faq-question w-full text-left p-4 font-medium hover:bg-gray-50 transition flex justify-between items-center"> |
|
|
<span>Why isn't my video link working?</span> |
|
|
<i class="fas fa-chevron-down transition-transform"></i> |
|
|
</button> |
|
|
<div class="faq-answer p-4 border-t hidden"> |
|
|
<p class="text-gray-600">Some platforms may block downloading for certain videos. Make sure you've copied the correct URL and that the video isn't private or age-restricted. If problems persist, try another video.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-8"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">Universal Video Downloader</h3> |
|
|
<p class="text-gray-400">The easiest way to download videos from any website directly to your device.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Quick Links</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li> |
|
|
<li><a href="#features" class="text-gray-400 hover:text-white transition">Features</a></li> |
|
|
<li><a href="#how-it-works" class="text-gray-400 hover:text-white transition">How It Works</a></li> |
|
|
<li><a href="#faq" class="text-gray-400 hover:text-white transition">FAQ</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Legal</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">DMCA</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Connect With Us</h3> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f text-xl"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram text-xl"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube text-xl"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> |
|
|
<p>© 2023 Universal Video Downloader. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelectorAll('.faq-question').forEach(question => { |
|
|
question.addEventListener('click', () => { |
|
|
const answer = question.nextElementSibling; |
|
|
const icon = question.querySelector('i'); |
|
|
|
|
|
answer.classList.toggle('hidden'); |
|
|
icon.classList.toggle('rotate-180'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('downloadBtn').addEventListener('click', () => { |
|
|
const videoUrl = document.getElementById('videoUrl').value.trim(); |
|
|
const errorMsg = document.getElementById('errorMsg'); |
|
|
const downloadOptions = document.getElementById('downloadOptions'); |
|
|
|
|
|
|
|
|
if (!videoUrl) { |
|
|
errorMsg.textContent = 'Please enter a video URL'; |
|
|
errorMsg.classList.remove('hidden'); |
|
|
downloadOptions.classList.add('hidden'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
try { |
|
|
new URL(videoUrl); |
|
|
} catch (e) { |
|
|
errorMsg.textContent = 'Please enter a valid URL'; |
|
|
errorMsg.classList.remove('hidden'); |
|
|
downloadOptions.classList.add('hidden'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
errorMsg.classList.add('hidden'); |
|
|
|
|
|
|
|
|
simulateFetchOptions(videoUrl); |
|
|
}); |
|
|
|
|
|
function simulateFetchOptions(url) { |
|
|
const downloadOptions = document.getElementById('downloadOptions'); |
|
|
const formatOptions = document.getElementById('formatOptions'); |
|
|
|
|
|
|
|
|
formatOptions.innerHTML = '<div class="col-span-2 text-center py-4"><i class="fas fa-spinner fa-spin text-blue-500 text-2xl"></i><p class="mt-2">Fetching download options...</p></div>'; |
|
|
downloadOptions.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
const mockFormats = [ |
|
|
{ quality: '1080p', format: 'MP4', size: '45MB' }, |
|
|
{ quality: '720p', format: 'MP4', size: '25MB' }, |
|
|
{ quality: '480p', format: 'MP4', size: '15MB' }, |
|
|
{ quality: '360p', format: 'MP4', size: '8MB' }, |
|
|
{ quality: 'Audio Only', format: 'MP3', size: '5MB' }, |
|
|
{ quality: 'Audio Only', format: 'M4A', size: '4MB' } |
|
|
]; |
|
|
|
|
|
|
|
|
formatOptions.innerHTML = ''; |
|
|
|
|
|
|
|
|
mockFormats.forEach(format => { |
|
|
const option = document.createElement('div'); |
|
|
option.className = 'border rounded-lg p-3 hover:bg-gray-50 cursor-pointer'; |
|
|
option.innerHTML = ` |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<span class="font-bold">${format.quality}</span> |
|
|
<span class="text-gray-500 text-sm ml-2">${format.format}</span> |
|
|
</div> |
|
|
<div class="text-gray-500 text-sm">${format.size}</div> |
|
|
</div> |
|
|
<button class="download-format-btn mt-2 w-full bg-blue-500 hover:bg-blue-600 text-white py-1 px-3 rounded text-sm transition"> |
|
|
Download ${format.quality} |
|
|
</button> |
|
|
`; |
|
|
|
|
|
|
|
|
option.querySelector('.download-format-btn').addEventListener('click', () => { |
|
|
alert(`Downloading ${format.quality} ${format.format} version...\n\nNote: This is a demo. In a real application, this would initiate the download.`); |
|
|
}); |
|
|
|
|
|
formatOptions.appendChild(option); |
|
|
}); |
|
|
}, 1500); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('.platform-icon').forEach(icon => { |
|
|
icon.addEventListener('click', () => { |
|
|
const platform = icon.querySelector('span').textContent; |
|
|
let exampleUrl = ''; |
|
|
|
|
|
switch(platform) { |
|
|
case 'YouTube': |
|
|
exampleUrl = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'; |
|
|
break; |
|
|
case 'Facebook': |
|
|
exampleUrl = 'https://www.facebook.com/facebook/videos/10153231379946729/'; |
|
|
break; |
|
|
case 'Instagram': |
|
|
exampleUrl = 'https://www.instagram.com/p/Cg0vC4QJ1uP/'; |
|
|
break; |
|
|
case 'TikTok': |
|
|
exampleUrl = 'https://www.tiktok.com/@tiktok/video/7106684311892454662'; |
|
|
break; |
|
|
case 'Twitter': |
|
|
exampleUrl = 'https://twitter.com/Twitter/status/1384879083399770113'; |
|
|
break; |
|
|
default: |
|
|
exampleUrl = 'https://example.com/video.mp4'; |
|
|
} |
|
|
|
|
|
document.getElementById('videoUrl').value = exampleUrl; |
|
|
document.getElementById('errorMsg').classList.add('hidden'); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=saadhi786/video" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
