Hugging Face's logo

Spaces:
BIKASHDAS7906
/
videodownloader
Running

App Files Community
videodownloader
File size: 11,891 Bytes 
e6dd4f7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20b1b4a
e6dd4f7
 
 
 
20b1b4a
e6dd4f7
 
 
 
 
 
20b1b4a
e6dd4f7
20b1b4a
e6dd4f7
 
 
20b1b4a
 
 
 
 
 
 
e6dd4f7
20b1b4a
e6dd4f7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
 
<!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 <span class="text-sm text-green-600">(YouTube supported!)</span></label>
                    <div class="flex flex-col md:flex-row gap-4">
                        <input 
                            type="url" 
                            id="videoUrl" 
                            placeholder="Paste YouTube URL (e.g., https://www.youtube.com/watch?v=...)"
                            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-red-500 text-white rounded-lg hover:bg-red-600 transition-colors flex items-center justify-center space-x-2 min-w-[140px] font-medium"
                        >
                            <i data-feather="youtube" class="w-5 h-5"></i>
                            <span>Download</span>
                        </button>
                    </div>
                    <!-- URL Type Indicator -->
                    <div id="urlTypeIndicator" class="hidden mt-2 p-3 rounded-lg bg-blue-50 border border-blue-200">
                        <div class="flex items-center space-x-2">
                            <i data-feather="info" class="w-4 h-4 text-blue-500"></i>
                            <span id="urlTypeText" class="text-sm text-blue-700"></span>
                        </div>
                    </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>