Spaces:

AnonyMouZe88
/

tubesnatch-pro

Running

App Files Files Community

AnonyMouZe88 commited on Oct 16, 2025

Commit

c27a2bb

verified ·

1 Parent(s): 0e2cab7

erstelle mir einen Youtube Downloader wo ich sämtliche formate runterladen kann

Browse files

Files changed (2) hide show

README.md +7 -4
index.html +247 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Tubesnatch Pro
-emoji: 🌍
-colorFrom: indigo
 colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: TubeSnatch Pro 🎬
+colorFrom: blue
 colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,248 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TubeSnatch Pro - YouTube 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>
+        .gradient-bg {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        .glass-effect {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .download-btn {
+            background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
+            transition: all 0.3s ease;
+        }
+        .download-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+        }
+        .format-card {
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+        .format-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 15px 30px rgba(0,0,0,0.15);
+        }
+        .pulse-animation {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+    </style>
+</head>
+<body class="min-h-screen gradient-bg text-white">
+    <div id="vanta-bg" class="fixed inset-0 z-0"></div>
+    <!-- Navigation -->
+    <nav class="relative z-10 glass-effect py-4 px-6">
+        <div class="container mx-auto flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <i data-feather="download-cloud" class="text-2xl"></i>
+                <h1 class="text-2xl font-bold">TubeSnatch Pro</h1>
+            </div>
+            <div class="flex space-x-4">
+                <a href="#" class="hover:text-blue-200 transition">Home</a>
+                <a href="#" class="hover:text-blue-200 transition">About</a>
+                <a href="#" class="hover:text-blue-200 transition">Contact</a>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="relative z-10 py-20 px-4">
+        <div class="container mx-auto max-w-4xl text-center">
+            <h2 class="text-5xl md:text-6xl font-bold mb-6">
+                Download YouTube Videos
+                <span class="block text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-pink-500">
+                    In Any Format
+                </span>
+            </h2>
+            <p class="text-xl mb-12 text-blue-100 max-w-2xl mx-auto">
+                The ultimate YouTube downloader supporting MP4, WebM, MP3, and many more formats. Fast, secure, and completely free!
+            </p>
+            <!-- URL Input -->
+            <div class="glass-effect rounded-2xl p-8 mb-12">
+                <div class="flex flex-col md:flex-row gap-4">
+                    <input
+                        type="text"
+                        id="videoUrl"
+                        placeholder="Paste YouTube URL here..."
+                        class="flex-1 px-6 py-4 rounded-xl bg-white/10 border border-white/20 text-white placeholder-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-400"
+                    >
+                    <button
+                        id="fetchBtn"
+                        class="download-btn px-8 py-4 rounded-xl font-semibold text-white flex items-center justify-center space-x-2"
+                    >
+                        <i data-feather="search" class="w-5 h-5"></i>
+                        <span>Fetch Video</span>
+                    </button>
+                </div>
+            </div>
+            <!-- Video Preview -->
+            <div id="videoPreview" class="hidden glass-effect rounded-2xl p-6 mb-8">
+                <div class="flex flex-col md:flex-row gap-6 items-center">
+                    <div class="flex-shrink-0">
+                        <img id="thumbnail" src="" alt="Video Thumbnail" class="w-48 h-36 rounded-xl object-cover">
+                    </div>
+                    <div class="flex-1 text-left">
+                        <h3 id="videoTitle" class="text-2xl font-bold mb-2"></h3>
+                        <p id="videoChannel" class="text-blue-200 mb-1"></p>
+                        <p id="videoDuration" class="text-blue-200"></p>
+                    </div>
+                </div>
+            </div>
+            <!-- Format Selection -->
+            <div id="formatSection" class="hidden">
+                <h3 class="text-3xl font-bold mb-8">Available Formats</h3>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    <!-- MP4 Formats -->
+                    <div class="format-card glass-effect rounded-xl p-6 text-center">
+                        <i data-feather="video" class="w-12 h-12 mx-auto mb-4 text-red-400"></i>
+                        <h4 class="text-xl font-bold mb-2">MP4 1080p</h4>
+                        <p class="text-blue-200 mb-4">High Quality Video</p>
+                        <button class="download-btn w-full py-3 rounded-lg font-semibold">Download</button>
+                    </div>
+                    <div class="format-card glass-effect rounded-xl p-6 text-center">
+                        <i data-feather="video" class="w-12 h-12 mx-auto mb-4 text-green-400"></i>
+                        <h4 class="text-xl font-bold mb-2">MP4 720p</h4>
+                        <p class="text-blue-200 mb-4">Medium Quality</p>
+                        <button class="download-btn w-full py-3 rounded-lg font-semibold">Download</button>
+                    </div>
+                    <!-- Audio Formats -->
+                    <div class="format-card glass-effect rounded-xl p-6 text-center">
+                        <i data-feather="music" class="w-12 h-12 mx-auto mb-4 text-purple-400"></i>
+                        <h4 class="text-xl font-bold mb-2">MP3 320kbps</h4>
+                        <p class="text-blue-200 mb-4">High Quality Audio</p>
+                        <button class="download-btn w-full py-3 rounded-lg font-semibold">Download</button>
+                    </div>
+                    <div class="format-card glass-effect rounded-xl p-6 text-center">
+                        <i data-feather="music" class="w-12 h-12 mx-auto mb-4 text-yellow-400"></i>
+                        <h4 class="text-xl font-bold mb-2">WebM Audio</h4>
+                        <p class="text-blue-200 mb-4">Original Quality</p>
+                        <button class="download-btn w-full py-3 rounded-lg font-semibold">Download</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Features Section -->
+    <section class="relative z-10 py-16 px-4 bg-black/20">
+        <div class="container mx-auto max-w-6xl">
+            <h3 class="text-4xl font-bold text-center mb-12">Why Choose TubeSnatch Pro?</h3>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="text-center">
+                    <div class="glass-effect rounded-full w-20 h-20 mx-auto mb-6 flex items-center justify-center">
+                        <i data-feather="zap" class="w-10 h-10 text-yellow-400"></i>
+                    </div>
+                    <h4 class="text-xl font-bold mb-4">Lightning Fast</h4>
+                    <p class="text-blue-200">Download videos at incredible speeds with our optimized servers.</p>
+                </div>
+                <div class="text-center">
+                    <div class="glass-effect rounded-full w-20 h-20 mx-auto mb-6 flex items-center justify-center">
+                        <i data-feather="shield" class="w-10 h-10 text-green-400"></i>
+                    </div>
+                    <h4 class="text-xl font-bold mb-4">100% Secure</h4>
+                    <p class="text-blue-200">Your privacy is our priority. No data stored, no tracking.</p>
+                </div>
+                <div class="text-center">
+                    <div class="glass-effect rounded-full w-20 h-20 mx-auto mb-6 flex items-center justify-center">
+                        <i data-feather="download" class="w-10 h-10 text-blue-400"></i>
+                    </div>
+                    <h4 class="text-xl font-bold mb-4">All Formats</h4>
+                    <p class="text-blue-200">MP4, WebM, MP3, M4A - we support all popular formats.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="relative z-10 py-8 px-4 glass-effect">
+        <div class="container mx-auto text-center">
+            <p class="text-blue-200">&copy; 2024 TubeSnatch Pro. Made with ❤️ for content lovers.</p>
+        </div>
+    </footer>
+    <script>
+        // Initialize 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: 0x3b82f6,
+            backgroundColor: 0x667eea,
+            points: 12.00,
+            maxDistance: 22.00,
+            spacing: 18.00
+        });
+        // Initialize Feather Icons
+        feather.replace();
+        // Mock functionality for demo
+        document.getElementById('fetchBtn').addEventListener('click', function() {
+            const url = document.getElementById('videoUrl').value;
+            if (url.includes('youtube.com') || url.includes('youtu.be')) {
+                // Show loading state
+                this.innerHTML = '<i data-feather="loader" class="animate-spin w-5 h-5"></i><span>Fetching...</span>';
+                feather.replace();
+                setTimeout(() => {
+                    // Mock video data
+                    document.getElementById('thumbnail').src = 'http://static.photos/technology/320x240/42';
+                    document.getElementById('videoTitle').textContent = 'Amazing Tech Review - The Future is Here!';
+                    document.getElementById('videoChannel').textContent = 'Tech Explorers';
+                    document.getElementById('videoDuration').textContent = '15:30';
+                    // Show sections
+                    document.getElementById('videoPreview').classList.remove('hidden');
+                    document.getElementById('formatSection').classList.remove('hidden');
+                    // Reset button
+                    this.innerHTML = '<i data-feather="search" class="w-5 h-5"></i><span>Fetch Video</span>';
+                    feather.replace();
+                }, 1500);
+            } else {
+                alert('Please enter a valid YouTube URL');
+            }
+        });
+        // Add pulse animation to download buttons
+        document.querySelectorAll('.download-btn').forEach(btn => {
+            btn.addEventListener('mouseenter', function() {
+                this.classList.add('pulse-animation');
+            });
+            btn.addEventListener('mouseleave', function() {
+                this.classList.remove('pulse-animation');
+            });
+        });
+    </script>
+</body>
 </html>