| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>YT Downloader - Baixe vídeos do YouTube</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, #667eea 0%, #764ba2 100%); |
| } |
| .download-btn { |
| transition: all 0.3s ease; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| .download-btn:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); |
| } |
| .pulse { |
| animation: pulse 2s infinite; |
| } |
| @keyframes pulse { |
| 0% { |
| transform: scale(1); |
| } |
| 50% { |
| transform: scale(1.05); |
| } |
| 100% { |
| transform: scale(1); |
| } |
| } |
| .video-preview { |
| aspect-ratio: 16/9; |
| background-color: #f3f4f6; |
| } |
| </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="fab fa-youtube text-3xl"></i> |
| <h1 class="text-2xl font-bold">YT Downloader</h1> |
| </div> |
| <nav> |
| <ul class="flex space-x-6"> |
| <li><a href="#" class="hover:text-gray-200 transition">Início</a></li> |
| <li><a href="#" class="hover:text-gray-200 transition">Como usar</a></li> |
| <li><a href="#" class="hover:text-gray-200 transition">Sobre</a></li> |
| </ul> |
| </nav> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="container mx-auto px-4 py-12"> |
| <section class="max-w-4xl mx-auto text-center mb-16"> |
| <h2 class="text-4xl font-bold text-gray-800 mb-4">Baixe vídeos do YouTube gratuitamente</h2> |
| <p class="text-xl text-gray-600 mb-8">Cole o link do vídeo abaixo e baixe em diversos formatos e qualidades</p> |
| |
| |
| <div class="bg-white rounded-xl shadow-xl p-6 mb-12"> |
| <div class="flex flex-col md:flex-row gap-4"> |
| <input |
| type="text" |
| id="videoUrl" |
| placeholder="https://www.youtube.com/watch?v=..." |
| class="flex-grow px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" |
| > |
| <button |
| id="fetchBtn" |
| class="download-btn text-white px-6 py-3 rounded-lg font-semibold flex items-center justify-center space-x-2" |
| > |
| <i class="fas fa-search"></i> |
| <span>Buscar</span> |
| </button> |
| </div> |
| <div id="errorMsg" class="text-red-500 mt-2 text-left hidden"></div> |
| </div> |
|
|
| |
| <div id="videoContainer" class="hidden"> |
| <div class="bg-white rounded-xl shadow-xl overflow-hidden mb-8"> |
| <div class="video-preview flex items-center justify-center" id="videoThumbnail"> |
| <i class="fas fa-play-circle text-5xl text-gray-400"></i> |
| </div> |
| <div class="p-6"> |
| <h3 id="videoTitle" class="text-2xl font-bold text-gray-800 mb-2"></h3> |
| <p id="videoDuration" class="text-gray-600 mb-4"></p> |
| |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-6"> |
| |
| <div class="bg-gray-100 p-4 rounded-lg"> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="font-semibold">MP4 (720p)</span> |
| <i class="fas fa-video text-purple-600"></i> |
| </div> |
| <button class="download-option download-btn text-white w-full py-2 rounded-lg font-medium" data-quality="720"> |
| <i class="fas fa-download mr-2"></i> Baixar |
| </button> |
| </div> |
| |
| |
| <div class="bg-gray-100 p-4 rounded-lg"> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="font-semibold">MP4 (480p)</span> |
| <i class="fas fa-video text-purple-600"></i> |
| </div> |
| <button class="download-option download-btn text-white w-full py-2 rounded-lg font-medium" data-quality="480"> |
| <i class="fas fa-download mr-2"></i> Baixar |
| </button> |
| </div> |
| |
| |
| <div class="bg-gray-100 p-4 rounded-lg"> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="font-semibold">MP3 (Áudio)</span> |
| <i class="fas fa-music text-purple-600"></i> |
| </div> |
| <button class="download-option download-btn text-white w-full py-2 rounded-lg font-medium" data-quality="mp3"> |
| <i class="fas fa-download mr-2"></i> Baixar |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="max-w-6xl mx-auto mb-16"> |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Por que usar nosso downloader?</h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition"> |
| <div class="text-purple-600 mb-4"> |
| <i class="fas fa-bolt text-4xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Rápido e fácil</h3> |
| <p class="text-gray-600">Baixe vídeos em poucos segundos com nossa interface simples e intuitiva.</p> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition"> |
| <div class="text-purple-600 mb-4"> |
| <i class="fas fa-shield-alt text-4xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Seguro</h3> |
| <p class="text-gray-600">Não armazenamos seus vídeos ou dados pessoais. Totalmente seguro.</p> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition"> |
| <div class="text-purple-600 mb-4"> |
| <i class="fas fa-mobile-alt text-4xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Multiplataforma</h3> |
| <p class="text-gray-600">Funciona em qualquer dispositivo: computador, tablet ou smartphone.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="max-w-4xl mx-auto bg-white rounded-xl shadow-md p-8"> |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-8">Como baixar vídeos?</h2> |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="bg-purple-100 text-purple-800 rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0"> |
| <span class="font-bold">1</span> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-1">Copie o link do vídeo</h3> |
| <p class="text-gray-600">Vá até o YouTube, encontre o vídeo que deseja baixar e copie o link da barra de endereços.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-purple-100 text-purple-800 rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0"> |
| <span class="font-bold">2</span> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-1">Cole o link acima</h3> |
| <p class="text-gray-600">Volte para esta página e cole o link do vídeo no campo indicado.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-purple-100 text-purple-800 rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0"> |
| <span class="font-bold">3</span> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-1">Escolha o formato</h3> |
| <p class="text-gray-600">Selecione a qualidade desejada (MP4 720p, 480p ou MP3) e clique em baixar.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <footer class="bg-gray-800 text-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-6 md:mb-0"> |
| <div class="flex items-center space-x-2"> |
| <i class="fab fa-youtube text-2xl"></i> |
| <span class="text-xl font-bold">YT Downloader</span> |
| </div> |
| <p class="mt-2 text-gray-400">O melhor downloader de vídeos do YouTube</p> |
| </div> |
| <div class="flex space-x-6"> |
| <a href="#" class="hover:text-purple-400 transition"><i class="fab fa-facebook-f"></i></a> |
| <a href="#" class="hover:text-purple-400 transition"><i class="fab fa-twitter"></i></a> |
| <a href="#" class="hover:text-purple-400 transition"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="hover:text-purple-400 transition"><i class="fab fa-github"></i></a> |
| </div> |
| </div> |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> |
| <p>© 2023 YT Downloader. Todos os direitos reservados.</p> |
| <p class="mt-2 text-sm">Este site não hospeda nenhum vídeo em seus servidores. Todos os vídeos pertencem a seus respectivos proprietários.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const videoUrlInput = document.getElementById('videoUrl'); |
| const fetchBtn = document.getElementById('fetchBtn'); |
| const videoContainer = document.getElementById('videoContainer'); |
| const errorMsg = document.getElementById('errorMsg'); |
| const videoTitle = document.getElementById('videoTitle'); |
| const videoDuration = document.getElementById('videoDuration'); |
| const videoThumbnail = document.getElementById('videoThumbnail'); |
| const downloadOptions = document.querySelectorAll('.download-option'); |
| |
| |
| const mockVideoData = { |
| title: "Como criar um site incrível com HTML e CSS", |
| duration: "12:34", |
| thumbnail: "https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg", |
| videoId: "dQw4w9WgXcQ" |
| }; |
| |
| |
| function isValidYouTubeUrl(url) { |
| const pattern = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.?be)\/.+$/; |
| return pattern.test(url); |
| } |
| |
| |
| function fetchVideoInfo(url) { |
| return new Promise((resolve, reject) => { |
| |
| setTimeout(() => { |
| if (isValidYouTubeUrl(url)) { |
| resolve(mockVideoData); |
| } else { |
| reject(new Error("URL do YouTube inválida")); |
| } |
| }, 1000); |
| }); |
| } |
| |
| |
| fetchBtn.addEventListener('click', async function() { |
| const url = videoUrlInput.value.trim(); |
| |
| if (!url) { |
| errorMsg.textContent = "Por favor, insira um URL do YouTube"; |
| errorMsg.classList.remove('hidden'); |
| return; |
| } |
| |
| if (!isValidYouTubeUrl(url)) { |
| errorMsg.textContent = "URL do YouTube inválida. Use um link como: https://www.youtube.com/watch?v=..."; |
| errorMsg.classList.remove('hidden'); |
| return; |
| } |
| |
| errorMsg.classList.add('hidden'); |
| fetchBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> <span>Processando...</span>'; |
| fetchBtn.classList.add('opacity-75'); |
| |
| try { |
| const videoInfo = await fetchVideoInfo(url); |
| |
| |
| videoTitle.textContent = videoInfo.title; |
| videoDuration.textContent = `Duração: ${videoInfo.duration}`; |
| videoThumbnail.style.backgroundImage = `url(${videoInfo.thumbnail})`; |
| videoThumbnail.innerHTML = ''; |
| |
| |
| downloadOptions.forEach(option => { |
| const quality = option.getAttribute('data-quality'); |
| option.onclick = function() { |
| |
| alert(`Iniciando download do vídeo em ${quality}p...\n\nEm uma aplicação real, isso enviaria para um backend que processaria o download.`); |
| |
| |
| setTimeout(() => { |
| alert("Download concluído com sucesso!"); |
| }, 2000); |
| }; |
| }); |
| |
| videoContainer.classList.remove('hidden'); |
| } catch (error) { |
| errorMsg.textContent = error.message; |
| errorMsg.classList.remove('hidden'); |
| } finally { |
| fetchBtn.innerHTML = '<i class="fas fa-search"></i> <span>Buscar</span>'; |
| fetchBtn.classList.remove('opacity-75'); |
| } |
| }); |
| |
| |
| videoUrlInput.addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') { |
| fetchBtn.click(); |
| } |
| }); |
| |
| |
| setInterval(() => { |
| fetchBtn.classList.toggle('pulse'); |
| }, 5000); |
| }); |
| </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=xandyzap/teste" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
