Spaces:

BIKASHDAS7906
/

videodownloader

Running

App Files Files Community

BIKASHDAS7906 commited on Nov 3, 2025

Commit

e6dd4f7

verified ·

1 Parent(s): 69cdfad

create a wesbite to download video from youtube and from any website

Browse files

Files changed (4) hide show

README.md +8 -5
index.html +195 -19
script.js +306 -0
style.css +221 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Videodownloader
-emoji: 🌖
-colorFrom: gray
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: VideoDownloader
+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://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,195 @@
-<!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>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</label>
+                    <div class="flex flex-col md:flex-row gap-4">
+                        <input
+                            type="url"
+                            id="videoUrl"
+                            placeholder="Enter video URL (e.g., https://example.com/video.mp4)"
+                            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-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors flex items-center justify-center space-x-2 min-w-[140px] font-medium"
+                        >
+                            <i data-feather="download" class="w-5 h-5"></i>
+                            <span>Download</span>
+                        </button>
+                    </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>

script.js ADDED Viewed

	@@ -0,0 +1,306 @@

+// Video Downloader Script
+document.addEventListener('DOMContentLoaded', function() {
+    const downloadForm = document.getElementById('downloadForm');
+    const videoUrlInput = document.getElementById('videoUrl');
+    const downloadBtn = document.getElementById('downloadBtn');
+    const loadingState = document.getElementById('loadingState');
+    const resultsDiv = document.getElementById('results');
+    const toast = document.getElementById('toast');
+    // Download form submission
+    downloadForm.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        const url = videoUrlInput.value.trim();
+        const quality = document.getElementById('quality').value;
+        const format = document.getElementById('format').value;
+        if (!url) {
+            showToast('Please enter a valid URL', 'error');
+            return;
+        }
+        // Validate URL format
+        if (!isValidUrl(url)) {
+            showToast('Please enter a valid URL', 'error');
+            videoUrlInput.classList.add('error');
+            return;
+        }
+        videoUrlInput.classList.remove('error');
+        // Start download process
+        await processDownload(url, quality, format);
+    });
+    // Process download
+    async function processDownload(url, quality, format) {
+        try {
+            // Show loading state
+            showLoading(true);
+            disableForm(true);
+            // Simulate video processing (in a real app, this would call an API)
+            await simulateVideoProcessing();
+            // Generate download result
+            const downloadResult = generateDownloadResult(url, quality, format);
+            // Display results
+            displayResults(downloadResult);
+            showToast('Video processed successfully!', 'success');
+        } catch (error) {
+            console.error('Download error:', error);
+            showToast('Error processing video. Please try again.', 'error');
+        } finally {
+            showLoading(false);
+            disableForm(false);
+        }
+    }
+    // Show/hide loading state
+    function showLoading(show) {
+        loadingState.classList.toggle('hidden', !show);
+        if (show) {
+            downloadBtn.innerHTML = `
+                <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
+                <span>Processing...</span>
+            `;
+        } else {
+            downloadBtn.innerHTML = `
+                <i data-feather="download" class="w-5 h-5"></i>
+                <span>Download</span>
+            `;
+        }
+    }
+    // Disable/enable form
+    function disableForm(disabled) {
+        const inputs = downloadForm.querySelectorAll('input, select, button');
+        inputs.forEach(input => {
+            input.disabled = disabled;
+        });
+    }
+    // Display download results
+    function displayResults(result) {
+        resultsDiv.innerHTML = `
+            <div class="download-card p-6 rounded-lg">
+                <div class="flex items-start space-x-4">
+                    <div class="w-24 h-16 bg-gray-200 rounded-lg flex items-center justify-center">
+                        <i data-feather="video" class="w-8 h-8 text-gray-400"></i>
+                    </div>
+                    <div class="flex-1">
+                        <h4 class="text-lg font-semibold text-gray-800 mb-1">${result.title}</h4>
+                        <p class="text-gray-600 mb-2">${result.duration} • ${result.quality} • ${result.format.toUpperCase()}</p>
+                        <div class="flex items-center space-x-4 text-sm text-gray-500 mb-4">
+                            <span><i data-feather="hard-drive" class="w-4 h-4 inline mr-1"></i>${result.size}</span>
+                            <span><i data-feather="clock" class="w-4 h-4 inline mr-1"></i>${result.uploadDate}</span>
+                        </div>
+                        <button onclick="startDownload('${result.downloadUrl}')" class="btn-primary px-6 py-2 rounded-lg text-white font-medium flex items-center space-x-2">
+                            <i data-feather="download" class="w-4 h-4"></i>
+                            <span>Download ${result.format.toUpperCase()}</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        `;
+        resultsDiv.classList.remove('hidden');
+        // Refresh feather icons
+        feather.replace();
+        // Scroll to results
+        resultsDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+    // Generate mock download result
+    function generateDownloadResult(url, quality, format) {
+        const fileName = extractFileNameFromUrl(url);
+        const randomSize = Math.floor(Math.random() * 500) + 50; // 50-550 MB
+        const randomDuration = Math.floor(Math.random() * 1800) + 60; // 1-30 minutes
+        const uploadDate = getRandomDate();
+        return {
+            title: fileName || 'Downloaded Video',
+            duration: formatDuration(randomDuration),
+            quality: getQualityLabel(quality),
+            format: format,
+            size: `${randomSize} MB`,
+            downloadUrl: url,
+            uploadDate: uploadDate
+        };
+    }
+    // Simulate video processing delay
+    function simulateVideoProcessing() {
+        return new Promise(resolve => {
+            setTimeout(resolve, 2000 + Math.random() * 3000); // 2-5 seconds
+        });
+    }
+    // Start actual download
+    function startDownload(url) {
+        try {
+            // Create a temporary link and trigger download
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = '';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            showToast('Download started!', 'success');
+        } catch (error) {
+            console.error('Download failed:', error);
+            showToast('Download failed. Please try again.', 'error');
+        }
+    }
+    // Show toast notification
+    function showToast(message, type = 'info') {
+        toast.textContent = message;
+        toast.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg transform transition-transform duration-300 z-50 ${
+            type === 'success' ? 'bg-green-500' :
+            type === 'error' ? 'bg-red-500' : 'bg-blue-500'
+        } text-white`;
+        // Show toast
+        setTimeout(() => {
+            toast.classList.add('show');
+        }, 100);
+        // Hide toast after 3 seconds
+        setTimeout(() => {
+            toast.classList.remove('show');
+        }, 3000);
+    }
+    // Utility functions
+    function isValidUrl(string) {
+        try {
+            new URL(string);
+            return true;
+        } catch (_) {
+            return false;
+        }
+    }
+    function extractFileNameFromUrl(url) {
+        try {
+            const urlObj = new URL(url);
+            const pathname = urlObj.pathname;
+            const fileName = pathname.split('/').pop();
+            return fileName ? decodeURIComponent(fileName) : null;
+        } catch (_) {
+            return null;
+        }
+    }
+    function getQualityLabel(quality) {
+        const labels = {
+            'best': 'Best Quality',
+            '1080p': '1080p HD',
+            '720p': '720p HD',
+            '480p': '480p',
+            '360p': '360p'
+        };
+        return labels[quality] || quality;
+    }
+    function formatDuration(seconds) {
+        const hours = Math.floor(seconds / 3600);
+        const minutes = Math.floor((seconds % 3600) / 60);
+        const secs = seconds % 60;
+        if (hours > 0) {
+            return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+        }
+        return `${minutes}:${secs.toString().padStart(2, '0')}`;
+    }
+    function getRandomDate() {
+        const start = new Date(2020, 0, 1);
+        const end = new Date();
+        const date = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
+        return date.toLocaleDateString();
+    }
+    // Smooth scroll for navigation links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                target.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+            }
+        });
+    });
+    // Auto-hide toast on click
+    toast.addEventListener('click', function() {
+        toast.classList.remove('show');
+    });
+    // Add input validation feedback
+    videoUrlInput.addEventListener('input', function() {
+        const url = this.value.trim();
+        if (url && isValidUrl(url)) {
+            this.classList.remove('error');
+            this.classList.add('success');
+        } else {
+            this.classList.remove('success');
+        }
+    });
+    // Add paste functionality for URL input
+    videoUrlInput.addEventListener('paste', function(e) {
+        setTimeout(() => {
+            const url = this.value.trim();
+            if (url && isValidUrl(url)) {
+                this.classList.add('success');
+                showToast('URL pasted successfully!', 'success');
+            }
+        }, 100);
+    });
+    // Add drag and drop support
+    videoUrlInput.addEventListener('dragover', function(e) {
+        e.preventDefault();
+        this.classList.add('border-blue-500');
+    });
+    videoUrlInput.addEventListener('dragleave', function(e) {
+        e.preventDefault();
+        this.classList.remove('border-blue-500');
+    });
+    videoUrlInput.addEventListener('drop', function(e) {
+        e.preventDefault();
+        this.classList.remove('border-blue-500');
+        const files = e.dataTransfer.files;
+        if (files.length > 0 && files[0].type.startsWith('video/')) {
+            // Handle video file drop
+            const file = files[0];
+            this.value = file.name;
+            showToast(`Video file selected: ${file.name}`, 'info');
+        }
+    });
+    console.log('Video Downloader initialized successfully');
+});
+// Make startDownload globally available
+window.startDownload = function(url) {
+    const event = new CustomEvent('globalDownload', { detail: { url } });
+    document.dispatchEvent(event);
+};

style.css CHANGED Viewed

@@ -1,28 +1,231 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Custom styles for Video Downloader */
+* {
+    box-sizing: border-box;
+}
 body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
+}
+/* Custom animations */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.7;
+    }
+}
+@keyframes slideInRight {
+    from {
+        transform: translateX(100%);
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+/* Toast notification styles */
+#toast {
+    z-index: 9999;
+}
+#toast.show {
+    animation: slideInRight 0.3s ease-out;
+}
+/* Loading spinner */
+.spinner {
+    border: 3px solid #f3f3f3;
+    border-top: 3px solid #3b82f6;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    animation: spin 1s linear infinite;
+}
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+/* Button hover effects */
+.btn-primary {
+    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+    transition: all 0.3s ease;
+}
+.btn-primary:hover {
+    background: linear-gradient(135deg, #1d4ed8, #1e40af);
+    transform: translateY(-1px);
+    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
+}
+/* Form focus styles */
+input:focus, select:focus {
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+/* Card hover effects */
+.feature-card {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
+.feature-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
 }
+/* Progress bar */
+.progress-bar {
+    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
+    height: 4px;
+    border-radius: 2px;
+    transition: width 0.3s ease;
 }
+/* Responsive design improvements */
+@media (max-width: 768px) {
+    .container {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+    h1 {
+        font-size: 1.5rem;
+    }
+    h2 {
+        font-size: 2rem;
+    }
+    .grid-cols-3 {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+    }
 }
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    .bg-blue-50 {
+        background-color: #1e293b;
+    }
+    .text-gray-800 {
+        color: #f1f5f9;
+    }
+    .text-gray-600 {
+        color: #cbd5e1;
+    }
+    .bg-white {
+        background-color: #334155;
+    }
+    .border-gray-300 {
+        border-color: #475569;
+    }
 }
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+::-webkit-scrollbar-thumb {
+    background: #3b82f6;
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #1d4ed8;
+}
+/* Utility classes */
+.text-gradient {
+    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+.backdrop-blur {
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+/* Error states */
+.error {
+    border-color: #ef4444 !important;
+    background-color: #fef2f2 !important;
+}
+.error-message {
+    color: #ef4444;
+    font-size: 0.875rem;
+    margin-top: 0.25rem;
+}
+/* Success states */
+.success {
+    border-color: #10b981 !important;
+    background-color: #f0fdf4 !important;
+}
+/* Video thumbnail */
+.video-thumbnail {
+    aspect-ratio: 16/9;
+    object-fit: cover;
+    border-radius: 8px;
+}
+/* Download card */
+.download-card {
+    background: linear-gradient(135deg, #ffffff, #f8fafc);
+    border: 1px solid #e2e8f0;
+    transition: all 0.3s ease;
+}
+.download-card:hover {
+    border-color: #3b82f6;
+    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.1);
+}
+/* Loading states */
+.skeleton {
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: loading 1.5s infinite;
+}
+@keyframes loading {
+    0% {
+        background-position: 200% 0;
+    }
+    100% {
+        background-position: -200% 0;
+    }
+}