Hugging Face's logo

Spaces:
dansmight
/
download-manager
Running

App Files Community
dansmight commited on
Commit
7bf1c65
·
verified ·
1 Parent(s): a9ba3c9

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +410 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Download Manager
3
- emoji: 🚀
4
- colorFrom: indigo
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: download-manager
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: blue
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,410 @@
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>Download Manager Pro</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
+ <style>
10
+ .drag-area {
11
+ border: 2px dashed #ccc;
12
+ transition: all 0.3s;
13
+ }
14
+ .drag-area.active {
15
+ border-color: #4f46e5;
16
+ background-color: #eef2ff;
17
+ }
18
+ .folder-card:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
21
+ }
22
+ .progress-bar {
23
+ transition: width 0.3s ease;
24
+ }
25
+ /* Custom scrollbar */
26
+ ::-webkit-scrollbar {
27
+ width: 8px;
28
+ }
29
+ ::-webkit-scrollbar-track {
30
+ background: #f1f1f1;
31
+ }
32
+ ::-webkit-scrollbar-thumb {
33
+ background: #c7d2fe;
34
+ border-radius: 4px;
35
+ }
36
+ ::-webkit-scrollbar-thumb:hover {
37
+ background: #a5b4fc;
38
+ }
39
+ </style>
40
+ </head>
41
+ <body class="bg-gray-50 text-gray-800">
42
+ <div class="min-h-screen flex flex-col">
43
+ <!-- Header -->
44
+ <header class="bg-indigo-600 text-white shadow-md">
45
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
46
+ <div class="flex items-center space-x-2">
47
+ <i class="fas fa-download text-2xl"></i>
48
+ <h1 class="text-2xl font-bold">Download Manager Pro</h1>
49
+ </div>
50
+ <div class="flex items-center space-x-4">
51
+ <button class="px-4 py-2 bg-indigo-700 rounded-lg hover:bg-indigo-800 transition">
52
+ <i class="fas fa-cog mr-2"></i>Settings
53
+ </button>
54
+ <div class="relative">
55
+ <button id="notif-btn" class="p-2 rounded-full hover:bg-indigo-700 transition">
56
+ <i class="fas fa-bell"></i>
57
+ <span class="absolute top-0 right-0 h-3 w-3 bg-red-500 rounded-full"></span>
58
+ </button>
59
+ </div>
60
+ </div>
61
+ </div>
62
+ </header>
63
+
64
+ <!-- Main Content -->
65
+ <main class="flex-grow container mx-auto px-4 py-6">
66
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
67
+ <!-- Sidebar -->
68
+ <div class="lg:col-span-1 space-y-6">
69
+ <!-- Quick Stats -->
70
+ <div class="bg-white rounded-xl shadow p-4">
71
+ <h2 class="font-semibold text-lg mb-3 text-indigo-700">Quick Stats</h2>
72
+ <div class="space-y-3">
73
+ <div class="flex justify-between items-center">
74
+ <span class="text-gray-600">Total Downloads:</span>
75
+ <span class="font-medium">1,248</span>
76
+ </div>
77
+ <div class="flex justify-between items-center">
78
+ <span class="text-gray-600">Sorted Today:</span>
79
+ <span class="font-medium">24</span>
80
+ </div>
81
+ <div class="flex justify-between items-center">
82
+ <span class="text-gray-600">Storage Used:</span>
83
+ <span class="font-medium">78.5 GB</span>
84
+ </div>
85
+ </div>
86
+ </div>
87
+
88
+ <!-- Quick Actions -->
89
+ <div class="bg-white rounded-xl shadow p-4">
90
+ <h2 class="font-semibold text-lg mb-3 text-indigo-700">Quick Actions</h2>
91
+ <div class="space-y-2">
92
+ <button class="w-full flex items-center space-x-2 px-3 py-2 bg-indigo-50 text-indigo-700 rounded-lg hover:bg-indigo-100 transition">
93
+ <i class="fas fa-plus"></i>
94
+ <span>New Sorting Rule</span>
95
+ </button>
96
+ <button class="w-full flex items-center space-x-2 px-3 py-2 bg-indigo-50 text-indigo-700 rounded-lg hover:bg-indigo-100 transition">
97
+ <i class="fas fa-folder-plus"></i>
98
+ <span>Create New Folder</span>
99
+ </button>
100
+ <button class="w-full flex items-center space-x-2 px-3 py-2 bg-indigo-50 text-indigo-700 rounded-lg hover:bg-indigo-100 transition">
101
+ <i class="fas fa-search"></i>
102
+ <span>Find Duplicates</span>
103
+ </button>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Folder List -->
108
+ <div class="bg-white rounded-xl shadow p-4">
109
+ <div class="flex justify-between items-center mb-3">
110
+ <h2 class="font-semibold text-lg text-indigo-700">Folders</h2>
111
+ <button class="text-indigo-600 hover:text-indigo-800">
112
+ <i class="fas fa-ellipsis-h"></i>
113
+ </button>
114
+ </div>
115
+ <div class="space-y-2 max-h-64 overflow-y-auto">
116
+ <div class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 cursor-pointer">
117
+ <i class="fas fa-folder text-yellow-400"></i>
118
+ <span>Downloads</span>
119
+ <span class="ml-auto text-sm text-gray-500">128</span>
120
+ </div>
121
+ <div class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 cursor-pointer">
122
+ <i class="fas fa-folder text-blue-400"></i>
123
+ <span>Documents</span>
124
+ <span class="ml-auto text-sm text-gray-500">42</span>
125
+ </div>
126
+ <div class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 cursor-pointer">
127
+ <i class="fas fa-folder text-green-400"></i>
128
+ <span>Images</span>
129
+ <span class="ml-auto text-sm text-gray-500">356</span>
130
+ </div>
131
+ <div class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 cursor-pointer">
132
+ <i class="fas fa-folder text-red-400"></i>
133
+ <span>Videos</span>
134
+ <span class="ml-auto text-sm text-gray-500">87</span>
135
+ </div>
136
+ <div class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 cursor-pointer">
137
+ <i class="fas fa-folder text-purple-400"></i>
138
+ <span>Music</span>
139
+ <span class="ml-auto text-sm text-gray-500">63</span>
140
+ </div>
141
+ <div class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 cursor-pointer">
142
+ <i class="fas fa-folder text-pink-400"></i>
143
+ <span>Archives</span>
144
+ <span class="ml-auto text-sm text-gray-500">29</span>
145
+ </div>
146
+ <div class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 cursor-pointer">
147
+ <i class="fas fa-folder text-indigo-400"></i>
148
+ <span>AI_Projects</span>
149
+ <span class="ml-auto text-sm text-gray-500">5</span>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </div>
154
+
155
+ <!-- Main Panel -->
156
+ <div class="lg:col-span-3 space-y-6">
157
+ <!-- Current Downloads -->
158
+ <div class="bg-white rounded-xl shadow p-6">
159
+ <div class="flex justify-between items-center mb-4">
160
+ <h2 class="font-semibold text-xl text-indigo-700">Current Downloads</h2>
161
+ <div class="flex space-x-2">
162
+ <button class="p-2 text-indigo-600 hover:bg-indigo-50 rounded-lg">
163
+ <i class="fas fa-sync-alt"></i>
164
+ </button>
165
+ <button class="p-2 text-indigo-600 hover:bg-indigo-50 rounded-lg">
166
+ <i class="fas fa-filter"></i>
167
+ </button>
168
+ </div>
169
+ </div>
170
+
171
+ <div class="space-y-4">
172
+ <!-- Download Item -->
173
+ <div class="border rounded-lg p-3 hover:bg-gray-50 transition">
174
+ <div class="flex items-center space-x-3">
175
+ <div class="w-10 h-10 flex items-center justify-center bg-indigo-100 text-indigo-600 rounded-lg">
176
+ <i class="fas fa-file-pdf"></i>
177
+ </div>
178
+ <div class="flex-grow">
179
+ <div class="flex justify-between items-center">
180
+ <h3 class="font-medium">Project_Proposal.pdf</h3>
181
+ <span class="text-sm text-gray-500">12.5 MB</span>
182
+ </div>
183
+ <div class="text-sm text-gray-500">From: drive.google.com</div>
184
+ <div class="mt-2">
185
+ <div class="w-full bg-gray-200 rounded-full h-2">
186
+ <div class="bg-indigo-600 h-2 rounded-full progress-bar" style="width: 65%"></div>
187
+ </div>
188
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
189
+ <span>65%</span>
190
+ <span>ETA: 2 min</span>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ <div class="flex space-x-2">
195
+ <button class="p-2 text-indigo-600 hover:bg-indigo-50 rounded-lg">
196
+ <i class="fas fa-pause"></i>
197
+ </button>
198
+ <button class="p-2 text-red-600 hover:bg-red-50 rounded-lg">
199
+ <i class="fas fa-times"></i>
200
+ </button>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Download Item -->
206
+ <div class="border rounded-lg p-3 hover:bg-gray-50 transition">
207
+ <div class="flex items-center space-x-3">
208
+ <div class="w-10 h-10 flex items-center justify-center bg-blue-100 text-blue-600 rounded-lg">
209
+ <i class="fas fa-file-archive"></i>
210
+ </div>
211
+ <div class="flex-grow">
212
+ <div class="flex justify-between items-center">
213
+ <h3 class="font-medium">dataset_v2.zip</h3>
214
+ <span class="text-sm text-gray-500">1.2 GB</span>
215
+ </div>
216
+ <div class="text-sm text-gray-500">From: github.com</div>
217
+ <div class="mt-2">
218
+ <div class="w-full bg-gray-200 rounded-full h-2">
219
+ <div class="bg-blue-600 h-2 rounded-full progress-bar" style="width: 32%"></div>
220
+ </div>
221
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
222
+ <span>32%</span>
223
+ <span>ETA: 8 min</span>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ <div class="flex space-x-2">
228
+ <button class="p-2 text-indigo-600 hover:bg-indigo-50 rounded-lg">
229
+ <i class="fas fa-pause"></i>
230
+ </button>
231
+ <button class="p-2 text-red-600 hover:bg-red-50 rounded-lg">
232
+ <i class="fas fa-times"></i>
233
+ </button>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+
240
+ <!-- Sorting Rules -->
241
+ <div class="bg-white rounded-xl shadow p-6">
242
+ <div class="flex justify-between items-center mb-4">
243
+ <h2 class="font-semibold text-xl text-indigo-700">Sorting Rules</h2>
244
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
245
+ <i class="fas fa-plus mr-2"></i>Add Rule
246
+ </button>
247
+ </div>
248
+
249
+ <div class="overflow-x-auto">
250
+ <table class="min-w-full divide-y divide-gray-200">
251
+ <thead class="bg-gray-50">
252
+ <tr>
253
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rule Name</th>
254
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Condition</th>
255
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Destination</th>
256
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
257
+ </tr>
258
+ </thead>
259
+ <tbody class="bg-white divide-y divide-gray-200">
260
+ <tr>
261
+ <td class="px-6 py-4 whitespace-nowrap">Midjourney AI</td>
262
+ <td class="px-6 py-4 whitespace-nowrap">Source contains: midjourney.com</td>
263
+ <td class="px-6 py-4 whitespace-nowrap">AI_Projects/Midjourney</td>
264
+ <td class="px-6 py-4 whitespace-nowrap">
265
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">
266
+ <i class="fas fa-edit"></i>
267
+ </button>
268
+ <button class="text-red-600 hover:text-red-900">
269
+ <i class="fas fa-trash"></i>
270
+ </button>
271
+ </td>
272
+ </tr>
273
+ <tr>
274
+ <td class="px-6 py-4 whitespace-nowrap">Runway ML</td>
275
+ <td class="px-6 py-4 whitespace-nowrap">Source contains: runwayml.com</td>
276
+ <td class="px-6 py-4 whitespace-nowrap">AI_Projects/Runway</td>
277
+ <td class="px-6 py-4 whitespace-nowrap">
278
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">
279
+ <i class="fas fa-edit"></i>
280
+ </button>
281
+ <button class="text-red-600 hover:text-red-900">
282
+ <i class="fas fa-trash"></i>
283
+ </button>
284
+ </td>
285
+ </tr>
286
+ <tr>
287
+ <td class="px-6 py-4 whitespace-nowrap">VEO AI</td>
288
+ <td class="px-6 py-4 whitespace-nowrap">Source contains: veo.ai</td>
289
+ <td class="px-6 py-4 whitespace-nowrap">AI_Projects/VEO</td>
290
+ <td class="px-6 py-4 whitespace-nowrap">
291
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">
292
+ <i class="fas fa-edit"></i>
293
+ </button>
294
+ <button class="text-red-600 hover:text-red-900">
295
+ <i class="fas fa-trash"></i>
296
+ </button>
297
+ </td>
298
+ </tr>
299
+ <tr>
300
+ <td class="px-6 py-4 whitespace-nowrap">Kling AI</td>
301
+ <td class="px-6 py-4 whitespace-nowrap">Source contains: kling.com</td>
302
+ <td class="px-6 py-4 whitespace-nowrap">AI_Projects/Kling</td>
303
+ <td class="px-6 py-4 whitespace-nowrap">
304
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">
305
+ <i class="fas fa-edit"></i>
306
+ </button>
307
+ <button class="text-red-600 hover:text-red-900">
308
+ <i class="fas fa-trash"></i>
309
+ </button>
310
+ </td>
311
+ </tr>
312
+ <tr>
313
+ <td class="px-6 py-4 whitespace-nowrap">Luma AI</td>
314
+ <td class="px-6 py-4 whitespace-nowrap">Source contains: luma.ai</td>
315
+ <td class="px-6 py-4 whitespace-nowrap">AI_Projects/Luma</td>
316
+ <td class="px-6 py-4 whitespace-nowrap">
317
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">
318
+ <i class="fas fa-edit"></i>
319
+ </button>
320
+ <button class="text-red-600 hover:text-red-900">
321
+ <i class="fas fa-trash"></i>
322
+ </button>
323
+ </td>
324
+ </tr>
325
+ </tbody>
326
+ </table>
327
+ </div>
328
+ </div>
329
+
330
+ <!-- Quick Sort -->
331
+ <div class="bg-white rounded-xl shadow p-6">
332
+ <h2 class="font-semibold text-xl text-indigo-700 mb-4">Quick Sort</h2>
333
+ <div class="drag-area p-8 text-center rounded-lg cursor-pointer transition" id="dragArea">
334
+ <i class="fas fa-cloud-upload-alt text-4xl text-indigo-500 mb-3"></i>
335
+ <h3 class="text-lg font-medium mb-1">Drag & Drop Files to Sort</h3>
336
+ <p class="text-gray-500 mb-4">or click to browse your files</p>
337
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
338
+ Select Files
339
+ </button>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ </div>
344
+ </main>
345
+
346
+ <!-- Footer -->
347
+ <footer class="bg-white border-t py-4">
348
+ <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
349
+ <p>Download Manager Pro v1.0.0 | © 2023 All Rights Reserved</p>
350
+ </div>
351
+ </footer>
352
+ </div>
353
+
354
+ <script>
355
+ // Drag and drop functionality
356
+ const dragArea = document.getElementById('dragArea');
357
+
358
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
359
+ dragArea.addEventListener(eventName, preventDefaults, false);
360
+ });
361
+
362
+ function preventDefaults(e) {
363
+ e.preventDefault();
364
+ e.stopPropagation();
365
+ }
366
+
367
+ ['dragenter', 'dragover'].forEach(eventName => {
368
+ dragArea.addEventListener(eventName, highlight, false);
369
+ });
370
+
371
+ ['dragleave', 'drop'].forEach(eventName => {
372
+ dragArea.addEventListener(eventName, unhighlight, false);
373
+ });
374
+
375
+ function highlight() {
376
+ dragArea.classList.add('active');
377
+ }
378
+
379
+ function unhighlight() {
380
+ dragArea.classList.remove('active');
381
+ }
382
+
383
+ dragArea.addEventListener('drop', handleDrop, false);
384
+
385
+ function handleDrop(e) {
386
+ const dt = e.dataTransfer;
387
+ const files = dt.files;
388
+ handleFiles(files);
389
+ }
390
+
391
+ function handleFiles(files) {
392
+ alert(`Processing ${files.length} file(s) for sorting...`);
393
+ // Here you would normally process the files
394
+ }
395
+
396
+ // Simulate download progress
397
+ setInterval(() => {
398
+ const progressBars = document.querySelectorAll('.progress-bar');
399
+ progressBars.forEach(bar => {
400
+ const currentWidth = parseInt(bar.style.width);
401
+ if (currentWidth < 100) {
402
+ const newWidth = Math.min(currentWidth + Math.random() * 5, 100);
403
+ bar.style.width = `${newWidth}%`;
404
+ bar.previousElementSibling.textContent = `${Math.floor(newWidth)}%`;
405
+ }
406
+ });
407
+ }, 1000);
408
+ </script>
409
+ <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=dansmight/download-manager" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
410
+ </html>