Hugging Face's logo

Spaces:
rvce
/
cosmo-dl
Running

App Files Community
rvce commited on
Commit
5864416
·
verified ·
1 Parent(s): 4cdb2eb

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +675 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cosmo Dl
3
- emoji: 🌖
4
- colorFrom: yellow
5
  colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: cosmo-dl
3
+ emoji: 🐳
4
+ colorFrom: gray
5
  colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,675 @@
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>Cosmo DL - Space Themed yt-dlp UI</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ cosmic: {
15
+ 100: '#e0e7ff',
16
+ 200: '#c7d2fe',
17
+ 300: '#a5b4fc',
18
+ 400: '#818cf8',
19
+ 500: '#6366f1',
20
+ 600: '#4f46e5',
21
+ 700: '#4338ca',
22
+ 800: '#3730a3',
23
+ 900: '#312e81',
24
+ },
25
+ nebula: {
26
+ 100: '#f0f9ff',
27
+ 200: '#e0f2fe',
28
+ 300: '#bae6fd',
29
+ 400: '#7dd3fc',
30
+ 500: '#38bdf8',
31
+ 600: '#0284c7',
32
+ 700: '#0369a1',
33
+ 800: '#075985',
34
+ 900: '#0c4a6e',
35
+ },
36
+ galaxy: {
37
+ 100: '#f5f3ff',
38
+ 200: '#ede9fe',
39
+ 300: '#ddd6fe',
40
+ 400: '#c4b5fd',
41
+ 500: '#a78bfa',
42
+ 600: '#8b5cf6',
43
+ 700: '#7c3aed',
44
+ 800: '#6d28d9',
45
+ 900: '#5b21b6',
46
+ }
47
+ },
48
+ animation: {
49
+ 'pulse-slow': 'pulse 6s infinite cubic-bezier(0.4, 0, 0.6, 1)',
50
+ 'float': 'float 6s ease-in-out infinite',
51
+ 'star-pulse': 'starPulse 4s ease-in-out infinite',
52
+ },
53
+ keyframes: {
54
+ float: {
55
+ '0%, 100%': { transform: 'translateY(0)' },
56
+ '50%': { transform: 'translateY(-10px)' },
57
+ },
58
+ starPulse: {
59
+ '0%, 100%': { opacity: '0.2' },
60
+ '50%': { opacity: '1' },
61
+ }
62
+ }
63
+ }
64
+ }
65
+ }
66
+ </script>
67
+ <style>
68
+ body {
69
+ background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
70
+ min-height: 100vh;
71
+ overflow-x: hidden;
72
+ color: white;
73
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
74
+ }
75
+
76
+ .stars {
77
+ position: fixed;
78
+ top: 0;
79
+ left: 0;
80
+ width: 100%;
81
+ height: 100%;
82
+ z-index: -1;
83
+ }
84
+
85
+ .star {
86
+ position: absolute;
87
+ background: white;
88
+ border-radius: 50%;
89
+ animation: starPulse var(--duration) ease-in-out infinite;
90
+ }
91
+
92
+ @keyframes twinkle {
93
+ 0%, 100% { opacity: 0.2; }
94
+ 50% { opacity: 1; }
95
+ }
96
+
97
+ .comet {
98
+ position: absolute;
99
+ width: 6px;
100
+ height: 6px;
101
+ background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
102
+ border-radius: 50%;
103
+ transform: rotate(45deg) translateX(-100px);
104
+ animation: cometFly 15s linear infinite;
105
+ opacity: 0;
106
+ }
107
+
108
+ @keyframes cometFly {
109
+ 0% {
110
+ transform: translateX(-100px) translateY(-100px) rotate(45deg);
111
+ opacity: 1;
112
+ }
113
+ 70% {
114
+ opacity: 1;
115
+ }
116
+ 100% {
117
+ transform: translateX(calc(100vw + 100px)) translateY(calc(100vh + 100px)) rotate(45deg);
118
+ opacity: 0;
119
+ }
120
+ }
121
+
122
+ .gradient-border {
123
+ position: relative;
124
+ border-radius: 1rem;
125
+ }
126
+
127
+ .gradient-border::before {
128
+ content: '';
129
+ position: absolute;
130
+ top: -2px;
131
+ left: -2px;
132
+ right: -2px;
133
+ bottom: -2px;
134
+ border-radius: 1rem;
135
+ background: linear-gradient(45deg, #6366f1, #8b5cf6, #38bdf8);
136
+ background-size: 200% 200%;
137
+ z-index: -1;
138
+ animation: gradient 8s ease infinite;
139
+ }
140
+
141
+ @keyframes gradient {
142
+ 0% { background-position: 0% 50%; }
143
+ 50% { background-position: 100% 50%; }
144
+ 100% { background-position: 0% 50%; }
145
+ }
146
+
147
+ .progress-bar {
148
+ height: 6px;
149
+ background: linear-gradient(90deg, #6366f1, #8b5cf6);
150
+ border-radius: 3px;
151
+ transition: width 0.3s ease;
152
+ }
153
+
154
+ .download-card {
155
+ backdrop-filter: blur(10px);
156
+ background: rgba(15, 23, 42, 0.7);
157
+ border: 1px solid rgba(255, 255, 255, 0.1);
158
+ }
159
+
160
+ .format-option:hover {
161
+ transform: translateY(-2px);
162
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
163
+ }
164
+
165
+ .format-option.selected {
166
+ border-color: #6366f1;
167
+ background: rgba(99, 102, 241, 0.1);
168
+ }
169
+
170
+ .tab-button.active {
171
+ border-bottom: 2px solid #6366f1;
172
+ color: #6366f1;
173
+ }
174
+ </style>
175
+ </head>
176
+ <body>
177
+ <div class="stars" id="stars"></div>
178
+ <div class="comet" id="comet"></div>
179
+
180
+ <div class="container mx-auto px-4 py-12 max-w-6xl">
181
+ <header class="flex flex-col items-center mb-12 animate-float">
182
+ <div class="flex items-center space-x-4 mb-4">
183
+ <div class="w-16 h-16 rounded-full bg-gradient-to-br from-nebula-500 to-cosmic-600 flex items-center justify-center shadow-lg">
184
+ <i class="fas fa-satellite text-3xl text-white"></i>
185
+ </div>
186
+ <h1 class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-nebula-400 to-cosmic-400">
187
+ Cosmo<span class="text-white"> DL</span>
188
+ </h1>
189
+ </div>
190
+ <p class="text-nebula-300 text-center max-w-lg">
191
+ The interstellar media downloader powered by yt-dlp. Download videos from across the galaxy!
192
+ </p>
193
+ </header>
194
+
195
+ <main class="gradient-border p-1 rounded-xl mb-12">
196
+ <div class="bg-gray-900 rounded-xl p-6">
197
+ <div class="flex space-x-4 mb-6 border-b border-gray-800 pb-2">
198
+ <button class="tab-button active px-4 py-2 font-medium text-nebula-300 hover:text-white transition" data-tab="download">
199
+ <i class="fas fa-download mr-2"></i> Download
200
+ </button>
201
+ <button class="tab-button px-4 py-2 font-medium text-nebula-300 hover:text-white transition" data-tab="settings">
202
+ <i class="fas fa-cog mr-2"></i> Settings
203
+ </button>
204
+ <button class="tab-button px-4 py-2 font-medium text-nebula-300 hover:text-white transition" data-tab="queue">
205
+ <i class="fas fa-list mr-2"></i> Queue
206
+ </button>
207
+ </div>
208
+
209
+ <!-- Download Tab -->
210
+ <div id="download-tab" class="tab-content">
211
+ <div class="mb-6">
212
+ <label for="url" class="block text-nebula-300 mb-2 font-medium">Enter Video URL</label>
213
+ <div class="flex space-x-2">
214
+ <input type="text" id="url" placeholder="https://www.youtube.com/watch?v=..."
215
+ class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-cosmic-500 transition">
216
+ <button id="fetch-btn" class="bg-cosmic-600 hover:bg-cosmic-700 text-white px-6 py-3 rounded-lg font-medium transition flex items-center">
217
+ <i class="fas fa-search mr-2"></i> Fetch
218
+ </button>
219
+ </div>
220
+ </div>
221
+
222
+ <div id="video-info" class="hidden download-card rounded-xl p-4 mb-6 transition-all duration-300">
223
+ <div class="flex flex-col md:flex-row gap-6">
224
+ <div class="flex-shrink-0">
225
+ <img id="thumbnail" src="" alt="Video thumbnail" class="w-full md:w-64 rounded-lg shadow-lg">
226
+ </div>
227
+ <div class="flex-1">
228
+ <h2 id="video-title" class="text-xl font-bold mb-2 text-white"></h2>
229
+ <p id="video-author" class="text-nebula-300 mb-4"></p>
230
+ <div class="flex flex-wrap gap-2 mb-4">
231
+ <span id="video-duration" class="bg-gray-800 text-nebula-300 px-3 py-1 rounded-full text-sm"></span>
232
+ <span id="video-views" class="bg-gray-800 text-nebula-300 px-3 py-1 rounded-full text-sm"></span>
233
+ <span id="video-date" class="bg-gray-800 text-nebula-300 px-3 py-1 rounded-full text-sm"></span>
234
+ </div>
235
+ <div class="progress-container hidden mb-4">
236
+ <div class="flex justify-between text-sm text-nebula-300 mb-1">
237
+ <span>Fetching formats...</span>
238
+ <span id="progress-text">0%</span>
239
+ </div>
240
+ <div class="w-full bg-gray-800 rounded-full h-2">
241
+ <div id="progress-bar" class="progress-bar h-2 rounded-full" style="width: 0%"></div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </div>
247
+
248
+ <div id="format-options" class="hidden">
249
+ <h3 class="text-lg font-medium text-white mb-4">Available Formats</h3>
250
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6" id="format-container">
251
+ <!-- Format options will be inserted here -->
252
+ </div>
253
+
254
+ <div class="flex flex-wrap gap-4 mb-6">
255
+ <div class="flex-1 min-w-[200px]">
256
+ <label for="output-path" class="block text-nebula-300 mb-2 font-medium">Output Path</label>
257
+ <div class="flex">
258
+ <input type="text" id="output-path" value="~/Downloads"
259
+ class="flex-1 bg-gray-800 border border-gray-700 rounded-l-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-cosmic-500 transition">
260
+ <button id="browse-btn" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-r-lg transition">
261
+ <i class="fas fa-folder-open"></i>
262
+ </button>
263
+ </div>
264
+ </div>
265
+
266
+ <div class="flex-1 min-w-[200px]">
267
+ <label for="filename" class="block text-nebula-300 mb-2 font-medium">Filename Template</label>
268
+ <input type="text" id="filename" value="%(title)s.%(ext)s"
269
+ class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-cosmic-500 transition">
270
+ </div>
271
+ </div>
272
+
273
+ <div class="flex justify-end space-x-3">
274
+ <button id="download-btn" class="bg-cosmic-600 hover:bg-cosmic-700 text-white px-6 py-3 rounded-lg font-medium transition flex items-center">
275
+ <i class="fas fa-rocket mr-2"></i> Launch Download
276
+ </button>
277
+ </div>
278
+ </div>
279
+ </div>
280
+
281
+ <!-- Settings Tab -->
282
+ <div id="settings-tab" class="tab-content hidden">
283
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
284
+ <div class="download-card p-4 rounded-lg">
285
+ <h3 class="text-lg font-medium text-white mb-4 flex items-center">
286
+ <i class="fas fa-download mr-2 text-nebula-400"></i> Download Settings
287
+ </h3>
288
+ <div class="space-y-4">
289
+ <div>
290
+ <label class="flex items-center space-x-2">
291
+ <input type="checkbox" class="rounded text-cosmic-600" checked>
292
+ <span class="text-nebula-300">Embed metadata</span>
293
+ </label>
294
+ </div>
295
+ <div>
296
+ <label class="flex items-center space-x-2">
297
+ <input type="checkbox" class="rounded text-cosmic-600" checked>
298
+ <span class="text-nebula-300">Embed thumbnails</span>
299
+ </label>
300
+ </div>
301
+ <div>
302
+ <label class="flex items-center space-x-2">
303
+ <input type="checkbox" class="rounded text-cosmic-600">
304
+ <span class="text-nebula-300">Download subtitles</span>
305
+ </label>
306
+ </div>
307
+ <div>
308
+ <label class="flex items-center space-x-2">
309
+ <input type="checkbox" class="rounded text-cosmic-600">
310
+ <span class="text-nebula-300">Convert to MP3</span>
311
+ </label>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <div class="download-card p-4 rounded-lg">
317
+ <h3 class="text-lg font-medium text-white mb-4 flex items-center">
318
+ <i class="fas fa-network-wired mr-2 text-nebula-400"></i> Network Settings
319
+ </h3>
320
+ <div class="space-y-4">
321
+ <div>
322
+ <label class="block text-nebula-300 mb-1">Retries</label>
323
+ <input type="number" value="3" min="0" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-cosmic-500 transition">
324
+ </div>
325
+ <div>
326
+ <label class="block text-nebula-300 mb-1">Timeout (seconds)</label>
327
+ <input type="number" value="30" min="1" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-cosmic-500 transition">
328
+ </div>
329
+ <div>
330
+ <label class="block text-nebula-300 mb-1">Rate Limit (KB/s)</label>
331
+ <input type="number" placeholder="Unlimited" min="1" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-cosmic-500 transition">
332
+ </div>
333
+ </div>
334
+ </div>
335
+
336
+ <div class="download-card p-4 rounded-lg">
337
+ <h3 class="text-lg font-medium text-white mb-4 flex items-center">
338
+ <i class="fas fa-paint-brush mr-2 text-nebula-400"></i> Appearance
339
+ </h3>
340
+ <div class="space-y-4">
341
+ <div>
342
+ <label class="block text-nebula-300 mb-1">Theme</label>
343
+ <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-cosmic-500 transition">
344
+ <option>Cosmic (Default)</option>
345
+ <option>Nebula</option>
346
+ <option>Galaxy</option>
347
+ <option>Dark Matter</option>
348
+ </select>
349
+ </div>
350
+ <div>
351
+ <label class="flex items-center space-x-2">
352
+ <input type="checkbox" class="rounded text-cosmic-600" checked>
353
+ <span class="text-nebula-300">Enable animations</span>
354
+ </label>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <div class="download-card p-4 rounded-lg">
360
+ <h3 class="text-lg font-medium text-white mb-4 flex items-center">
361
+ <i class="fas fa-terminal mr-2 text-nebula-400"></i> Advanced
362
+ </h3>
363
+ <div class="space-y-4">
364
+ <div>
365
+ <label class="block text-nebula-300 mb-1">Custom Arguments</label>
366
+ <textarea class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-cosmic-500 transition h-24" placeholder="--add-metadata --embed-thumbnail"></textarea>
367
+ </div>
368
+ <div>
369
+ <label class="block text-nebula-300 mb-1">Executable Path</label>
370
+ <div class="flex">
371
+ <input type="text" value="yt-dlp"
372
+ class="flex-1 bg-gray-800 border border-gray-700 rounded-l-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-cosmic-500 transition">
373
+ <button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-r-lg transition">
374
+ <i class="fas fa-search"></i>
375
+ </button>
376
+ </div>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ </div>
381
+
382
+ <div class="flex justify-end mt-6">
383
+ <button class="bg-gray-700 hover:bg-gray-600 text-white px-6 py-2 rounded-lg font-medium transition mr-3">
384
+ Reset Defaults
385
+ </button>
386
+ <button class="bg-cosmic-600 hover:bg-cosmic-700 text-white px-6 py-2 rounded-lg font-medium transition">
387
+ Save Settings
388
+ </button>
389
+ </div>
390
+ </div>
391
+
392
+ <!-- Queue Tab -->
393
+ <div id="queue-tab" class="tab-content hidden">
394
+ <div class="flex justify-between items-center mb-6">
395
+ <h3 class="text-lg font-medium text-white flex items-center">
396
+ <i class="fas fa-list-ol mr-2 text-nebula-400"></i> Download Queue
397
+ </h3>
398
+ <div class="flex space-x-2">
399
+ <button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg text-sm transition">
400
+ <i class="fas fa-play mr-1"></i> Start All
401
+ </button>
402
+ <button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg text-sm transition">
403
+ <i class="fas fa-trash-alt mr-1"></i> Clear
404
+ </button>
405
+ </div>
406
+ </div>
407
+
408
+ <div class="space-y-3">
409
+ <div class="download-card p-4 rounded-lg flex items-center">
410
+ <div class="flex-1">
411
+ <div class="flex items-center space-x-3">
412
+ <div class="w-10 h-10 rounded bg-gray-800 flex items-center justify-center">
413
+ <i class="fas fa-music text-nebula-400"></i>
414
+ </div>
415
+ <div>
416
+ <h4 class="font-medium text-white">Interstellar Soundtrack - No Time for Caution</h4>
417
+ <p class="text-sm text-nebula-300">YouTube • MP3 • 320kbps</p>
418
+ </div>
419
+ </div>
420
+ </div>
421
+ <div class="flex items-center space-x-2">
422
+ <div class="w-24 bg-gray-800 rounded-full h-2">
423
+ <div class="bg-cosmic-600 h-2 rounded-full" style="width: 65%"></div>
424
+ </div>
425
+ <span class="text-sm text-nebula-300">65%</span>
426
+ <button class="text-nebula-300 hover:text-white transition">
427
+ <i class="fas fa-pause"></i>
428
+ </button>
429
+ </div>
430
+ </div>
431
+
432
+ <div class="download-card p-4 rounded-lg flex items-center">
433
+ <div class="flex-1">
434
+ <div class="flex items-center space-x-3">
435
+ <div class="w-10 h-10 rounded bg-gray-800 flex items-center justify-center">
436
+ <i class="fas fa-film text-nebula-400"></i>
437
+ </div>
438
+ <div>
439
+ <h4 class="font-medium text-white">The Beauty of Space in 4K</h4>
440
+ <p class="text-sm text-nebula-300">YouTube • MP4 • 2160p</p>
441
+ </div>
442
+ </div>
443
+ </div>
444
+ <div class="flex items-center space-x-2">
445
+ <div class="w-24 bg-gray-800 rounded-full h-2">
446
+ <div class="bg-cosmic-600 h-2 rounded-full" style="width: 12%"></div>
447
+ </div>
448
+ <span class="text-sm text-nebula-300">12%</span>
449
+ <button class="text-nebula-300 hover:text-white transition">
450
+ <i class="fas fa-pause"></i>
451
+ </button>
452
+ </div>
453
+ </div>
454
+
455
+ <div class="download-card p-4 rounded-lg flex items-center opacity-70">
456
+ <div class="flex-1">
457
+ <div class="flex items-center space-x-3">
458
+ <div class="w-10 h-10 rounded bg-gray-800 flex items-center justify-center">
459
+ <i class="fas fa-film text-nebula-400"></i>
460
+ </div>
461
+ <div>
462
+ <h4 class="font-medium text-white">NASA Live: Earth From Space</h4>
463
+ <p class="text-sm text-nebula-300">YouTube • MP4 • 1080p</p>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ <div class="flex items-center space-x-2">
468
+ <span class="text-sm text-nebula-300">Queued</span>
469
+ <button class="text-nebula-300 hover:text-white transition">
470
+ <i class="fas fa-play"></i>
471
+ </button>
472
+ </div>
473
+ </div>
474
+
475
+ <div class="download-card p-4 rounded-lg flex items-center opacity-70">
476
+ <div class="flex-1">
477
+ <div class="flex items-center space-x-3">
478
+ <div class="w-10 h-10 rounded bg-gray-800 flex items-center justify-center">
479
+ <i class="fas fa-headphones text-nebula-400"></i>
480
+ </div>
481
+ <div>
482
+ <h4 class="font-medium text-white">Space Ambient Music</h4>
483
+ <p class="text-sm text-nebula-300">SoundCloud • MP3 • 256kbps</p>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ <div class="flex items-center space-x-2">
488
+ <span class="text-sm text-nebula-300">Queued</span>
489
+ <button class="text-nebula-300 hover:text-white transition">
490
+ <i class="fas fa-play"></i>
491
+ </button>
492
+ </div>
493
+ </div>
494
+ </div>
495
+ </div>
496
+ </div>
497
+ </main>
498
+
499
+ <footer class="text-center text-nebula-400 text-sm">
500
+ <p>Cosmo DL v1.0.0 - Powered by yt-dlp</p>
501
+ <p class="mt-1">Made with <i class="fas fa-heart text-red-400"></i> somewhere in the universe</p>
502
+ </footer>
503
+ </div>
504
+
505
+ <script>
506
+ // Create stars
507
+ function createStars() {
508
+ const starsContainer = document.getElementById('stars');
509
+ const starCount = 200;
510
+
511
+ for (let i = 0; i < starCount; i++) {
512
+ const star = document.createElement('div');
513
+ star.className = 'star';
514
+
515
+ // Random properties
516
+ const size = Math.random() * 3;
517
+ const posX = Math.random() * 100;
518
+ const posY = Math.random() * 100;
519
+ const opacity = Math.random() * 0.8 + 0.2;
520
+ const duration = Math.random() * 5 + 3;
521
+
522
+ star.style.width = `${size}px`;
523
+ star.style.height = `${size}px`;
524
+ star.style.left = `${posX}%`;
525
+ star.style.top = `${posY}%`;
526
+ star.style.opacity = opacity;
527
+ star.style.setProperty('--duration', `${duration}s`);
528
+
529
+ starsContainer.appendChild(star);
530
+ }
531
+ }
532
+
533
+ // Animate comet
534
+ function animateComet() {
535
+ const comet = document.getElementById('comet');
536
+ const delay = Math.random() * 30;
537
+
538
+ setTimeout(() => {
539
+ comet.style.animation = 'cometFly 15s linear infinite';
540
+ setInterval(animateComet, 45000); // Repeat every 45 seconds
541
+ }, delay * 1000);
542
+ }
543
+
544
+ // Tab switching
545
+ document.querySelectorAll('.tab-button').forEach(button => {
546
+ button.addEventListener('click', () => {
547
+ // Remove active class from all buttons
548
+ document.querySelectorAll('.tab-button').forEach(btn => {
549
+ btn.classList.remove('active');
550
+ });
551
+
552
+ // Add active class to clicked button
553
+ button.classList.add('active');
554
+
555
+ // Hide all tab contents
556
+ document.querySelectorAll('.tab-content').forEach(content => {
557
+ content.classList.add('hidden');
558
+ });
559
+
560
+ // Show selected tab content
561
+ const tabId = button.getAttribute('data-tab') + '-tab';
562
+ document.getElementById(tabId).classList.remove('hidden');
563
+ });
564
+ });
565
+
566
+ // Mock video info fetch
567
+ document.getElementById('fetch-btn').addEventListener('click', () => {
568
+ const urlInput = document.getElementById('url');
569
+ if (!urlInput.value) {
570
+ alert('Please enter a video URL');
571
+ return;
572
+ }
573
+
574
+ // Show loading state
575
+ const videoInfo = document.getElementById('video-info');
576
+ const progressContainer = document.querySelector('.progress-container');
577
+ const progressBar = document.getElementById('progress-bar');
578
+ const progressText = document.getElementById('progress-text');
579
+
580
+ videoInfo.classList.remove('hidden');
581
+ progressContainer.classList.remove('hidden');
582
+
583
+ // Simulate progress
584
+ let progress = 0;
585
+ const interval = setInterval(() => {
586
+ progress += Math.random() * 10;
587
+ if (progress > 100) progress = 100;
588
+
589
+ progressBar.style.width = `${progress}%`;
590
+ progressText.textContent = `${Math.round(progress)}%`;
591
+
592
+ if (progress === 100) {
593
+ clearInterval(interval);
594
+ setTimeout(() => {
595
+ progressContainer.classList.add('hidden');
596
+ showVideoInfo();
597
+ showFormatOptions();
598
+ }, 500);
599
+ }
600
+ }, 200);
601
+ });
602
+
603
+ // Mock video info display
604
+ function showVideoInfo() {
605
+ document.getElementById('thumbnail').src = 'https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg';
606
+ document.getElementById('video-title').textContent = 'Interstellar - Official Trailer';
607
+ document.getElementById('video-author').textContent = 'by Warner Bros. Pictures';
608
+ document.getElementById('video-duration').textContent = '2:49';
609
+ document.getElementById('video-views').textContent = '45M views';
610
+ document.getElementById('video-date').textContent = 'Jul 30, 2014';
611
+ }
612
+
613
+ // Mock format options
614
+ function showFormatOptions() {
615
+ const formatContainer = document.getElementById('format-container');
616
+ formatContainer.innerHTML = '';
617
+
618
+ const formats = [
619
+ { id: '1', quality: '2160p', type: 'MP4', size: '1.2GB', codec: 'avc1.640033' },
620
+ { id: '2', quality: '1440p', type: 'MP4', size: '850MB', codec: 'avc1.640033' },
621
+ { id: '3', quality: '1080p', type: 'MP4', size: '520MB', codec: 'avc1.640028' },
622
+ { id: '4', quality: '720p', type: 'MP4', size: '280MB', codec: 'avc1.64001F' },
623
+ { id: '5', quality: '480p', type: 'MP4', size: '150MB', codec: 'avc1.64001E' },
624
+ { id: '6', quality: '360p', type: 'MP4', size: '80MB', codec: 'avc1.64001E' },
625
+ { id: '7', quality: 'Audio Only', type: 'MP3', size: '12MB', bitrate: '320kbps' },
626
+ { id: '8', quality: 'Audio Only', type: 'MP3', size: '8MB', bitrate: '256kbps' },
627
+ { id: '9', quality: 'Audio Only', type: 'MP3', size: '5MB', bitrate: '128kbps' },
628
+ ];
629
+
630
+ formats.forEach(format => {
631
+ const formatElement = document.createElement('div');
632
+ formatElement.className = 'format-option download-card p-4 rounded-lg cursor-pointer transition hover:shadow-lg';
633
+ formatElement.innerHTML = `
634
+ <div class="flex justify-between items-start mb-2">
635
+ <h4 class="font-medium text-white">${format.quality}</h4>
636
+ <span class="text-sm text-nebula-400">${format.size}</span>
637
+ </div>
638
+ <div class="text-sm text-nebula-300">
639
+ <p>${format.type}</p>
640
+ <p>${format.codec || format.bitrate || ''}</p>
641
+ </div>
642
+ `;
643
+
644
+ formatElement.addEventListener('click', () => {
645
+ document.querySelectorAll('.format-option').forEach(el => {
646
+ el.classList.remove('selected');
647
+ });
648
+ formatElement.classList.add('selected');
649
+ });
650
+
651
+ formatContainer.appendChild(formatElement);
652
+ });
653
+
654
+ document.getElementById('format-options').classList.remove('hidden');
655
+ }
656
+
657
+ // Mock download
658
+ document.getElementById('download-btn').addEventListener('click', () => {
659
+ const selectedFormat = document.querySelector('.format-option.selected');
660
+ if (!selectedFormat) {
661
+ alert('Please select a format');
662
+ return;
663
+ }
664
+
665
+ alert('Download started! (This is a demo)');
666
+ });
667
+
668
+ // Initialize
669
+ document.addEventListener('DOMContentLoaded', () => {
670
+ createStars();
671
+ animateComet();
672
+ });
673
+ </script>
674
+ <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=rvce/cosmo-dl" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
675
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ build a space theme UI for yt-dlp