Hugging Face's logo

Spaces:
SethM9059
/
anycoder-e0642eea
Running

App Files Community
SethM9059 commited on
Commit
73eec60
·
verified ·
1 Parent(s): b1fe87b

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +313 -19
index.html CHANGED
@@ -1,19 +1,313 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Twitter Video Downloader</title>
7
+ <script src="https://cdn.jsdelivr.net/npm/react@18.0.0/umd/react.development.js"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/react-dom@18.0.0/umd/react-dom.development.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.js"></script>
10
+ <script src="https://cdn.tailwindcss.com"></script>
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
12
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
13
+ <style>
14
+ body {
15
+ font-family: 'Inter', sans-serif;
16
+ }
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
+ }
20
+ .card-shadow {
21
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
22
+ }
23
+ .hover-scale {
24
+ transition: transform 0.3s ease;
25
+ }
26
+ .hover-scale:hover {
27
+ transform: scale(1.02);
28
+ }
29
+ .pulse-animation {
30
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
31
+ }
32
+ @keyframes pulse {
33
+ 0%, 100% {
34
+ opacity: 1;
35
+ }
36
+ 50% {
37
+ opacity: .5;
38
+ }
39
+ }
40
+ .slide-in {
41
+ animation: slideIn 0.5s ease-out;
42
+ }
43
+ @keyframes slideIn {
44
+ from {
45
+ transform: translateY(-20px);
46
+ opacity: 0;
47
+ }
48
+ to {
49
+ transform: translateY(0);
50
+ opacity: 1;
51
+ }
52
+ }
53
+ .spinner {
54
+ border: 3px solid rgba(255, 255, 255, 0.3);
55
+ border-radius: 50%;
56
+ border-top: 3px solid white;
57
+ width: 40px;
58
+ height: 40px;
59
+ animation: spin 1s linear infinite;
60
+ }
61
+ @keyframes spin {
62
+ 0% { transform: rotate(0deg); }
63
+ 100% { transform: rotate(360deg); }
64
+ }
65
+ </style>
66
+ </head>
67
+ <body class="bg-gray-50 min-h-screen">
68
+ <div id="root"></div>
69
+
70
+ <script type="text/babel">
71
+ const { useState, useEffect } = React;
72
+
73
+ function App() {
74
+ const [url, setUrl] = useState('');
75
+ const [isProcessing, setIsProcessing] = useState(false);
76
+ const [downloadOptions, setDownloadOptions] = useState([]);
77
+ const [error, setError] = useState('');
78
+ const [showSuccess, setShowSuccess] = useState(false);
79
+ const [copiedLink, setCopiedLink] = useState(null);
80
+
81
+ const handleDownload = async (e) => {
82
+ e.preventDefault();
83
+ setError('');
84
+ setDownloadOptions([]);
85
+ setShowSuccess(false);
86
+
87
+ if (!url.trim()) {
88
+ setError('Please enter a Twitter URL');
89
+ return;
90
+ }
91
+
92
+ setIsProcessing(true);
93
+
94
+ // Simulate processing delay
95
+ setTimeout(() => {
96
+ setIsProcessing(false);
97
+ setDownloadOptions([
98
+ { quality: 'HD 1080p', size: '15.2 MB', url: '#' },
99
+ { quality: '720p', size: '8.7 MB', url: '#' },
100
+ { quality: '480p', size: '4.3 MB', url: '#' },
101
+ { quality: 'Audio Only', size: '3.2 MB', url: '#' }
102
+ ]);
103
+ }, 2000);
104
+ };
105
+
106
+ const handleCopyLink = (index) => {
107
+ setCopiedLink(index);
108
+ setTimeout(() => setCopiedLink(null), 2000);
109
+ };
110
+
111
+ return (
112
+ <div className="min-h-screen bg-gray-50">
113
+ {/* Header */}
114
+ <header className="bg-white shadow-sm border-b">
115
+ <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
116
+ <div className="flex justify-between items-center h-16">
117
+ <div className="flex items-center">
118
+ <i className="fab fa-twitter text-blue-400 text-2xl mr-3"></i>
119
+ <h1 className="text-xl font-bold text-gray-900">Twitter Video Downloader</h1>
120
+ </div>
121
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" className="text-blue-600 hover:text-blue-800 font-medium">
122
+ Built with anycoder
123
+ </a>
124
+ </div>
125
+ </div>
126
+ </header>
127
+
128
+ {/* Main Content */}
129
+ <main className="max-w-4xl mx-auto px-4 py-12">
130
+ <div className="text-center mb-8">
131
+ <h2 className="text-3xl font-bold text-gray-900 mb-4">Download Twitter Videos</h2>
132
+ <p className="text-gray-600 max-w-2xl mx-auto">
133
+ Enter the URL of any Twitter video and download it in multiple qualities.
134
+ Fast, simple, and completely free.
135
+ </p>
136
+ </div>
137
+
138
+ {/* Download Form */}
139
+ <div className="bg-white rounded-2xl card-shadow p-8 mb-8 slide-in">
140
+ <form onSubmit={handleDownload}>
141
+ <div className="mb-6">
142
+ <label htmlFor="url" className="block text-sm font-medium text-gray-700 mb-2">
143
+ Twitter Video URL
144
+ </label>
145
+ <div className="relative">
146
+ <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
147
+ <i className="fas fa-link text-gray-400"></i>
148
+ </div>
149
+ <input
150
+ type="url"
151
+ id="url"
152
+ value={url}
153
+ onChange={(e) => setUrl(e.target.value)}
154
+ placeholder="https://twitter.com/username/status/1234567890"
155
+ className="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
156
+ />
157
+ </div>
158
+ </div>
159
+
160
+ {error && (
161
+ <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg">
162
+ <p className="text-red-600 text-sm">{error}</p>
163
+ </div>
164
+ )}
165
+
166
+ <button
167
+ type="submit"
168
+ disabled={isProcessing}
169
+ className="w-full bg-blue-600 text-white py-3 px-6 rounded-lg font-medium hover:bg-blue-700 transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
170
+ >
171
+ {isProcessing ? (
172
+ <span className="flex items-center justify-center">
173
+ <div className="spinner mr-3"></div>
174
+ Processing...
175
+ </span>
176
+ ) : (
177
+ 'Download Video'
178
+ )}
179
+ </button>
180
+ </form>
181
+ </div>
182
+
183
+ {/* Download Options */}
184
+ {downloadOptions.length > 0 && (
185
+ <div className="bg-white rounded-2xl card-shadow p-8 slide-in">
186
+ <h3 className="text-xl font-semibold text-gray-900 mb-6">Available Downloads</h3>
187
+ <div className="space-y-4">
188
+ {downloadOptions.map((option, index) => (
189
+ <div
190
+ key={index}
191
+ className="border border-gray-200 rounded-lg p-4 hover-scale cursor-pointer"
192
+ >
193
+ <div className="flex items-center justify-between">
194
+ <div className="flex items-center">
195
+ <div className="w-12 h-12 bg-gradient-to-br from-blue-400 to-purple-600 rounded-lg flex items-center justify-center mr-4">
196
+ <i className="fas fa-video text-white"></i>
197
+ </div>
198
+ <div>
199
+ <h4 className="font-medium text-gray-900">{option.quality}</h4>
200
+ <p className="text-sm text-gray-500">{option.size}</p>
201
+ </div>
202
+ </div>
203
+ <div className="flex items-center space-x-3">
204
+ <button
205
+ onClick={() => handleCopyLink(index)}
206
+ className="text-gray-400 hover:text-gray-600 transition duration-200"
207
+ >
208
+ <i className="fas fa-copy"></i>
209
+ </button>
210
+ <a
211
+ href={option.url}
212
+ download
213
+ className="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition duration-200"
214
+ >
215
+ Download
216
+ </a>
217
+ </div>
218
+ </div>
219
+ {copiedLink === index && (
220
+ <div className="mt-2 text-sm text-green-600">
221
+ <i className="fas fa-check mr-1"></i>
222
+ Link copied to clipboard!
223
+ </div>
224
+ )}
225
+ </div>
226
+ ))}
227
+ </div>
228
+ </div>
229
+ )}
230
+
231
+ {/* Success Message */}
232
+ {showSuccess && (
233
+ <div className="mt-8 bg-green-50 border border-green-200 rounded-lg p-4">
234
+ <div className="flex items-center">
235
+ <i className="fas fa-check-circle text-green-500 mr-3"></i>
236
+ <p className="text-green-700">Video downloaded successfully!</p>
237
+ </div>
238
+ </div>
239
+ )}
240
+
241
+ {/* How to Use */}
242
+ <div className="mt-12 bg-white rounded-2xl card-shadow p-8">
243
+ <h3 className="text-xl font-semibold text-gray-900 mb-6">How to Use</h3>
244
+ <div className="grid md:grid-cols-3 gap-6">
245
+ <div className="text-center">
246
+ <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
247
+ <i className="fas fa-link text-blue-600 text-xl"></i>
248
+ </div>
249
+ <h4 className="font-medium text-gray-900 mb-2">1. Copy URL</h4>
250
+ <p className="text-sm text-gray-600">Copy the Twitter video URL you want to download</p>
251
+ </div>
252
+ <div className="text-center">
253
+ <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
254
+ <i className="fas fa-paste text-purple-600 text-xl"></i>
255
+ </div>
256
+ <h4 className="font-medium text-gray-900 mb-2">2. Paste URL</h4>
257
+ <p className="text-sm text-gray-600">Paste the URL into the input field above</p>
258
+ </div>
259
+ <div className="text-center">
260
+ <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
261
+ <i className="fas fa-download text-green-600 text-xl"></i>
262
+ </div>
263
+ <h4 className="font-medium text-gray-900 mb-2">3. Download</h4>
264
+ <p className="text-sm text-gray-600">Choose your preferred quality and download</p>
265
+ </div>
266
+ </div>
267
+ </div>
268
+
269
+ {/* Features */}
270
+ <div className="mt-12 grid md:grid-cols-3 gap-6">
271
+ <div className="bg-white rounded-xl p-6 card-shadow hover-scale">
272
+ <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
273
+ <i className="fas fa-bolt text-blue-600"></i>
274
+ </div>
275
+ <h4 className="font-semibold text-gray-900 mb-2">Fast Downloads</h4>
276
+ <p className="text-sm text-gray-600">High-speed processing for quick downloads</p>
277
+ </div>
278
+ <div className="bg-white rounded-xl p-6 card-shadow hover-scale">
279
+ <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
280
+ <i className="fas fa-shield-alt text-purple-600"></i>
281
+ </div>
282
+ <h4 className="font-semibold text-gray-900 mb-2">Secure & Private</h4>
283
+ <p className="text-sm text-gray-600">Your data is never stored or shared</p>
284
+ </div>
285
+ <div className="bg-white rounded-xl p-6 card-shadow hover-scale">
286
+ <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
287
+ <i className="fas fa-mobile-alt text-green-600"></i>
288
+ </div>
289
+ <h4 className="font-semibold text-gray-900 mb-2">Mobile Friendly</h4>
290
+ <p className="text-sm text-gray-600">Works perfectly on all devices</p>
291
+ </div>
292
+ </div>
293
+ </main>
294
+
295
+ {/* Footer */}
296
+ <footer className="bg-gray-900 text-white py-8 mt-16">
297
+ <div className="max-w-7xl mx-auto px-4 text-center">
298
+ <p className="text-sm text-gray-400">
299
+ © 2024 Twitter Video Downloader. All rights reserved.
300
+ </p>
301
+ <p className="text-xs text-gray-500 mt-2">
302
+ This tool is for educational purposes only. Please respect copyright laws.
303
+ </p>
304
+ </div>
305
+ </footer>
306
+ </div>
307
+ );
308
+ }
309
+
310
+ ReactDOM.render(<App />, document.getElementById('root'));
311
+ </script>
312
+ </body>
313
+ </html>