Hugging Face's logo

Spaces:
xandyzap
/
teste
Running

App Files Community
teste / index.html
xandyzap's picture
xandyzap
Add 2 files
0fd892f verified
Raw
History Blame Contribute Delete
17.3 kB
<!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 -->
 <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 Content -->
 <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>
<!-- Download Form -->
 <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>
<!-- Video Preview -->
 <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>
<!-- Download Options -->
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-6">
 <!-- MP4 720p -->
 <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>
<!-- MP4 480p -->
 <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>
<!-- MP3 -->
 <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>
<!-- Features -->
 <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>
<!-- How to Use -->
 <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 -->
 <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');
// Mock data for demonstration
 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"
 };
// Validate YouTube URL
 function isValidYouTubeUrl(url) {
 const pattern = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.?be)\/.+$/;
 return pattern.test(url);
 }
// Fetch video info (mock for this example)
 function fetchVideoInfo(url) {
 return new Promise((resolve, reject) => {
 // In a real app, you would make an API call here
 setTimeout(() => {
 if (isValidYouTubeUrl(url)) {
 resolve(mockVideoData);
 } else {
 reject(new Error("URL do YouTube inválida"));
 }
 }, 1000);
 });
 }
// Handle fetch button click
 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);
// Display video info
 videoTitle.textContent = videoInfo.title;
 videoDuration.textContent = `Duração: ${videoInfo.duration}`;
 videoThumbnail.style.backgroundImage = `url(${videoInfo.thumbnail})`;
 videoThumbnail.innerHTML = '';
// Set download links (in a real app, these would point to your backend)
 downloadOptions.forEach(option => {
 const quality = option.getAttribute('data-quality');
 option.onclick = function() {
 // This is just for demonstration
 alert(`Iniciando download do vídeo em ${quality}p...\n\nEm uma aplicação real, isso enviaria para um backend que processaria o download.`);
// Simulate download (would be replaced with actual download logic)
 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');
 }
 });
// Allow pressing Enter in the input field
 videoUrlInput.addEventListener('keypress', function(e) {
 if (e.key === 'Enter') {
 fetchBtn.click();
 }
 });
// Pulse animation for the download button
 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>