Hugging Face's logo

Spaces:
dansmight
/
new-download-manager
Running

App Files Community
dansmight commited on
Commit
040b1d1
·
verified ·
1 Parent(s): e559be9

Great, but let's re-tool the design. It should be black and white, Helvetica font, simple, minimal - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +624 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: New Download Manager
3
- emoji: 🚀
4
- colorFrom: gray
5
  colorTo: pink
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: new-download-manager
3
+ emoji: 🐳
4
+ colorFrom: purple
5
  colorTo: pink
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,624 @@
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>Advanced Download Manager</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ body {
10
+ font-family: 'Helvetica', Arial, sans-serif;
11
+ background-color: white;
12
+ color: black;
13
+ margin: 0;
14
+ padding: 20px;
15
+ line-height: 1.4;
16
+ }
17
+ .container {
18
+ max-width: 1200px;
19
+ margin: 0 auto;
20
+ }
21
+ header {
22
+ display: flex;
23
+ justify-content: space-between;
24
+ margin-bottom: 20px;
25
+ }
26
+ h1, h2, h3, h4 {
27
+ font-weight: normal;
28
+ margin: 0 0 5px 0;
29
+ }
30
+ button {
31
+ background: none;
32
+ border: 1px solid black;
33
+ padding: 8px 12px;
34
+ cursor: pointer;
35
+ }
36
+ button:hover {
37
+ background: #f0f0f0;
38
+ }
39
+ .download-item {
40
+ padding: 15px 0;
41
+ border-bottom: 1px solid #eee;
42
+ }
43
+ .progress-bar {
44
+ height: 3px;
45
+ background: black;
46
+ margin: 5px 0;
47
+ }
48
+ .tab-active {
49
+ font-weight: bold;
50
+ }
51
+ .modal {
52
+ background: white;
53
+ border: 1px solid black;
54
+ padding: 20px;
55
+ position: fixed;
56
+ top: 50%;
57
+ left: 50%;
58
+ transform: translate(-50%, -50%);
59
+ z-index: 100;
60
+ }
61
+ .modal-overlay {
62
+ position: fixed;
63
+ top: 0;
64
+ left: 0;
65
+ right: 0;
66
+ bottom: 0;
67
+ background: rgba(0,0,0,0.5);
68
+ z-index: 99;
69
+ }
70
+ </style>
71
+ </head>
72
+ <body class="bg-gray-50 text-gray-800">
73
+ <div class="container mx-auto px-4 py-6 max-w-7xl">
74
+ <!-- Header -->
75
+ <header>
76
+ <div>
77
+ <h1>DOWNLOAD MANAGER</h1>
78
+ <p>Image and video downloads</p>
79
+ </div>
80
+ <div>
81
+ <button id="addRuleBtn"><i class="fas fa-plus"></i> Add Rule</button>
82
+ <button id="bulkActionsBtn"><i class="fas fa-tasks"></i> Bulk Actions</button>
83
+ </div>
84
+ </header>
85
+
86
+ <!-- Stats -->
87
+ <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 20px;">
88
+ <div>
89
+ <p>TOTAL</p>
90
+ <h3>1,248</h3>
91
+ <p><i class="fas fa-arrow-up"></i> 12% from last week</p>
92
+ </div>
93
+ <div>
94
+ <p>ACTIVE</p>
95
+ <h3>8</h3>
96
+ <p>4 images, 4 videos</p>
97
+ </div>
98
+ <div>
99
+ <p>COMPLETED</p>
100
+ <h3>24</h3>
101
+ <p>18 images, 6 videos</p>
102
+ </div>
103
+ <div>
104
+ <p>STORAGE</p>
105
+ <h3>4.8 GB</h3>
106
+ <p>85% of 5.6 GB limit</p>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- Main Content -->
111
+ <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
112
+ <!-- Tabs -->
113
+ <div style="border-bottom: 1px solid #eee; margin-bottom: 15px;">
114
+ <button class="tab-btn tab-active" data-tab="all"><i class="fas fa-layer-group"></i> All</button>
115
+ <button class="tab-btn" data-tab="active"><i class="fas fa-sync-alt"></i> Active</button>
116
+ <button class="tab-btn" data-tab="images"><i class="fas fa-image"></i> Images</button>
117
+ <button class="tab-btn" data-tab="videos"><i class="fas fa-video"></i> Videos</button>
118
+ <button class="tab-btn" data-tab="completed"><i class="fas fa-check-circle"></i> Completed</button>
119
+ <button class="tab-btn" data-tab="rules"><i class="fas fa-filter"></i> Rules</button>
120
+ </div>
121
+
122
+ <!-- Search and Filters -->
123
+ <div class="p-4 border-b border-gray-200 flex flex-col md:flex-row gap-4">
124
+ <div class="relative flex-grow">
125
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
126
+ <i class="fas fa-search text-gray-400"></i>
127
+ </div>
128
+ <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500" placeholder="Search downloads...">
129
+ </div>
130
+ <div class="flex gap-2">
131
+ <select class="border border-gray-300 rounded-lg px-3 py-2 bg-gray-50 focus:ring-blue-500 focus:border-blue-500">
132
+ <option>All Sources</option>
133
+ <option>Instagram</option>
134
+ <option>YouTube</option>
135
+ <option>Pinterest</option>
136
+ <option>Twitter</option>
137
+ <option>Other</option>
138
+ </select>
139
+ <select class="border border-gray-300 rounded-lg px-3 py-2 bg-gray-50 focus:ring-blue-500 focus:border-blue-500">
140
+ <option>Sort by Date</option>
141
+ <option>Sort by Size</option>
142
+ <option>Sort by Name</option>
143
+ <option>Sort by Type</option>
144
+ </select>
145
+ </div>
146
+ </div>
147
+
148
+ <!-- Active Rules Section -->
149
+ <div id="activeRules" class="p-4 border-b border-gray-200 bg-blue-50 hidden">
150
+ <div class="flex flex-wrap gap-2">
151
+ <div class="rule-chip bg-white px-3 py-1 rounded-full border border-gray-300 flex items-center gap-2 cursor-pointer">
152
+ <span>Type: Images</span>
153
+ <i class="fas fa-times text-gray-400 hover:text-gray-600"></i>
154
+ </div>
155
+ <div class="rule-chip bg-white px-3 py-1 rounded-full border border-gray-300 flex items-center gap-2 cursor-pointer">
156
+ <span>Source: Instagram</span>
157
+ <i class="fas fa-times text-gray-400 hover:text-gray-600"></i>
158
+ </div>
159
+ <div class="rule-chip bg-white px-3 py-1 rounded-full border border-gray-300 flex items-center gap-2 cursor-pointer">
160
+ <span>Status: Completed</span>
161
+ <i class="fas fa-times text-gray-400 hover:text-gray-600"></i>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- Downloads List -->
167
+ <div id="downloadsList" class="divide-y divide-gray-200">
168
+ <!-- Download Item 1 -->
169
+ <div class="download-item">
170
+ <div style="display: flex; justify-content: space-between;">
171
+ <div>
172
+ <h3>beautiful-landscape.jpg</h3>
173
+ <p>From: instagram.com • Size: 2.4 MB</p>
174
+ <div class="progress-bar" style="width: 45%"></div>
175
+ <div style="display: flex; justify-content: space-between; font-size: 12px;">
176
+ <span>45%</span>
177
+ <span>1.2 MB of 2.4 MB</span>
178
+ <span>ETA: 2 min</span>
179
+ </div>
180
+ </div>
181
+ <div>
182
+ <button><i class="fas fa-pause"></i></button>
183
+ <button><i class="fas fa-times"></i></button>
184
+ </div>
185
+ </div>
186
+ </div>
187
+
188
+ <!-- Download Item 2 -->
189
+ <div class="download-item p-4 hover:bg-gray-50 flex flex-col sm:flex-row gap-4 items-start sm:items-center">
190
+ <div class="flex-shrink-0 flex items-center">
191
+ <div class="relative">
192
+ <img src="https://via.placeholder.com/80" alt="Thumbnail" class="w-16 h-16 rounded-lg object-cover">
193
+ <span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full">VID</span>
194
+ </div>
195
+ </div>
196
+ <div class="flex-grow min-w-0">
197
+ <h3 class="text-lg font-medium truncate">tutorial-video.mp4</h3>
198
+ <p class="text-sm text-gray-500">From: youtube.com • Size: 48.7 MB</p>
199
+ <div class="mt-2 w-full bg-gray-200 rounded-full h-2">
200
+ <div class="progress-bar bg-blue-600 h-2 rounded-full" style="width: 78%"></div>
201
+ </div>
202
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
203
+ <span>78%</span>
204
+ <span>38.0 MB of 48.7 MB</span>
205
+ <span>ETA: 45 sec</span>
206
+ </div>
207
+ </div>
208
+ <div class="flex-shrink-0 flex gap-2">
209
+ <button class="p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-full">
210
+ <i class="fas fa-pause"></i>
211
+ </button>
212
+ <button class="p-2 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-full">
213
+ <i class="fas fa-times"></i>
214
+ </button>
215
+ </div>
216
+ </div>
217
+
218
+ <!-- Download Item 3 (Completed) -->
219
+ <div class="download-item p-4 hover:bg-gray-50 flex flex-col sm:flex-row gap-4 items-start sm:items-center bg-green-50">
220
+ <div class="flex-shrink-0 flex items-center">
221
+ <div class="relative">
222
+ <img src="https://via.placeholder.com/80" alt="Thumbnail" class="w-16 h-16 rounded-lg object-cover">
223
+ <span class="absolute -top-2 -right-2 bg-green-500 text-white text-xs px-2 py-1 rounded-full">IMG</span>
224
+ </div>
225
+ </div>
226
+ <div class="flex-grow min-w-0">
227
+ <h3 class="text-lg font-medium truncate">profile-picture.png</h3>
228
+ <p class="text-sm text-gray-500">From: pinterest.com • Size: 1.8 MB</p>
229
+ <div class="mt-2 w-full bg-gray-200 rounded-full h-2">
230
+ <div class="progress-bar bg-green-500 h-2 rounded-full" style="width: 100%"></div>
231
+ </div>
232
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
233
+ <span class="text-green-600 font-medium">Completed</span>
234
+ <span>1.8 MB</span>
235
+ <span>Today, 10:24 AM</span>
236
+ </div>
237
+ </div>
238
+ <div class="flex-shrink-0 flex gap-2">
239
+ <button class="p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-full">
240
+ <i class="fas fa-folder-open"></i>
241
+ </button>
242
+ <button class="p-2 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-full">
243
+ <i class="fas fa-trash"></i>
244
+ </button>
245
+ </div>
246
+ </div>
247
+
248
+ <!-- Download Item 4 (Queued) -->
249
+ <div class="download-item p-4 hover:bg-gray-50 flex flex-col sm:flex-row gap-4 items-start sm:items-center">
250
+ <div class="flex-shrink-0 flex items-center">
251
+ <div class="relative">
252
+ <img src="https://via.placeholder.com/80" alt="Thumbnail" class="w-16 h-16 rounded-lg object-cover">
253
+ <span class="absolute -top-2 -right-2 bg-purple-500 text-white text-xs px-2 py-1 rounded-full">VID</span>
254
+ </div>
255
+ </div>
256
+ <div class="flex-grow min-w-0">
257
+ <h3 class="text-lg font-medium truncate">product-demo.mp4</h3>
258
+ <p class="text-sm text-gray-500">From: vimeo.com • Size: 124.5 MB</p>
259
+ <div class="mt-2 w-full bg-gray-200 rounded-full h-2">
260
+ <div class="progress-bar bg-gray-400 h-2 rounded-full" style="width: 0%"></div>
261
+ </div>
262
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
263
+ <span class="text-purple-600 font-medium">Queued</span>
264
+ <span>0 MB of 124.5 MB</span>
265
+ <span>Waiting...</span>
266
+ </div>
267
+ </div>
268
+ <div class="flex-shrink-0 flex gap-2">
269
+ <button class="p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-full">
270
+ <i class="fas fa-play"></i>
271
+ </button>
272
+ <button class="p-2 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-full">
273
+ <i class="fas fa-times"></i>
274
+ </button>
275
+ </div>
276
+ </div>
277
+ </div>
278
+
279
+ <!-- Rules List (Hidden by default) -->
280
+ <div id="rulesList" class="hidden p-4">
281
+ <div class="flex justify-between items-center mb-4">
282
+ <h3 class="text-lg font-medium">Download Rules</h3>
283
+ <button id="addNewRuleBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors text-sm">
284
+ <i class="fas fa-plus"></i> New Rule
285
+ </button>
286
+ </div>
287
+
288
+ <!-- Rule Cards -->
289
+ <div class="space-y-4">
290
+ <!-- Rule 1 -->
291
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
292
+ <div class="flex justify-between items-start">
293
+ <div>
294
+ <h4 class="font-medium flex items-center gap-2">
295
+ <i class="fas fa-image text-blue-500"></i> Image Download Rule
296
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full ml-2">Active</span>
297
+ </h4>
298
+ <p class="text-sm text-gray-500 mt-1">Applies to all image downloads from Instagram</p>
299
+ </div>
300
+ <div class="flex gap-2">
301
+ <button class="p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-full">
302
+ <i class="fas fa-edit"></i>
303
+ </button>
304
+ <button class="p-2 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-full">
305
+ <i class="fas fa-trash"></i>
306
+ </button>
307
+ </div>
308
+ </div>
309
+ <div class="mt-3 pt-3 border-t border-gray-200">
310
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
311
+ <div>
312
+ <p class="text-xs text-gray-400">CONDITION</p>
313
+ <p class="text-sm">Type is Image AND Source contains "instagram.com"</p>
314
+ </div>
315
+ <div>
316
+ <p class="text-xs text-gray-400">ACTION</p>
317
+ <p class="text-sm">Save to: /Downloads/Instagram/</p>
318
+ </div>
319
+ <div>
320
+ <p class="text-xs text-gray-400">OTHER SETTINGS</p>
321
+ <p class="text-sm">Limit: 5 downloads/hour</p>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </div>
326
+
327
+ <!-- Rule 2 -->
328
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
329
+ <div class="flex justify-between items-start">
330
+ <div>
331
+ <h4 class="font-medium flex items-center gap-2">
332
+ <i class="fas fa-video text-red-500"></i> Video Quality Rule
333
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full ml-2">Active</span>
334
+ </h4>
335
+ <p class="text-sm text-gray-500 mt-1">Applies to all video downloads from YouTube</p>
336
+ </div>
337
+ <div class="flex gap-2">
338
+ <button class="p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-full">
339
+ <i class="fas fa-edit"></i>
340
+ </button>
341
+ <button class="p-2 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-full">
342
+ <i class="fas fa-trash"></i>
343
+ </button>
344
+ </div>
345
+ </div>
346
+ <div class="mt-3 pt-3 border-t border-gray-200">
347
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
348
+ <div>
349
+ <p class="text-xs text-gray-400">CONDITION</p>
350
+ <p class="text-sm">Type is Video AND Source contains "youtube.com"</p>
351
+ </div>
352
+ <div>
353
+ <p class="text-xs text-gray-400">ACTION</p>
354
+ <p class="text-sm">Save to: /Downloads/Videos/ • Quality: 720p</p>
355
+ </div>
356
+ <div>
357
+ <p class="text-xs text-gray-400">OTHER SETTINGS</p>
358
+ <p class="text-sm">Convert to MP4 • Limit bandwidth: 2MB/s</p>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+
364
+ <!-- Rule 3 (Inactive) -->
365
+ <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
366
+ <div class="flex justify-between items-start">
367
+ <div>
368
+ <h4 class="font-medium flex items-center gap-2">
369
+ <i class="fas fa-image text-blue-500"></i> Pinterest Board Rule
370
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full ml-2">Inactive</span>
371
+ </h4>
372
+ <p class="text-sm text-gray-500 mt-1">Applies to image downloads from specific Pinterest boards</p>
373
+ </div>
374
+ <div class="flex gap-2">
375
+ <button class="p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-full">
376
+ <i class="fas fa-edit"></i>
377
+ </button>
378
+ <button class="p-2 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-full">
379
+ <i class="fas fa-trash"></i>
380
+ </button>
381
+ </div>
382
+ </div>
383
+ <div class="mt-3 pt-3 border-t border-gray-200">
384
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
385
+ <div>
386
+ <p class="text-xs text-gray-400">CONDITION</p>
387
+ <p class="text-sm">Type is Image AND Source contains "pinterest.com/board/"</p>
388
+ </div>
389
+ <div>
390
+ <p class="text-xs text-gray-400">ACTION</p>
391
+ <p class="text-sm">Save to: /Downloads/Pinterest/{board_name}/</p>
392
+ </div>
393
+ <div>
394
+ <p class="text-xs text-gray-400">OTHER SETTINGS</p>
395
+ <p class="text-sm">Watermark: "Saved from Pinterest"</p>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ </div>
401
+ </div>
402
+ </div>
403
+
404
+ <!-- Add Rule Modal -->
405
+ <div id="addRuleModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
406
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
407
+ <div class="p-6">
408
+ <div class="flex justify-between items-center mb-4">
409
+ <h3 class="text-xl font-bold">Create New Download Rule</h3>
410
+ <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700">
411
+ <i class="fas fa-times"></i>
412
+ </button>
413
+ </div>
414
+
415
+ <div class="space-y-6">
416
+ <div>
417
+ <label class="block text-sm font-medium text-gray-700 mb-1">Rule Name</label>
418
+ <input type="text" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-blue-500 focus:border-blue-500" placeholder="e.g., Instagram Image Downloads">
419
+ </div>
420
+
421
+ <div>
422
+ <label class="block text-sm font-medium text-gray-700 mb-1">Conditions</label>
423
+ <div class="space-y-3">
424
+ <div class="flex gap-3 items-center">
425
+ <select class="border border-gray-300 rounded-lg px-3 py-2 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 flex-1">
426
+ <option>File Type</option>
427
+ <option>Source URL</option>
428
+ <option>File Size</option>
429
+ <option>File Name</option>
430
+ <option>Date Added</option>
431
+ </select>
432
+ <select class="border border-gray-300 rounded-lg px-3 py-2 bg-gray-50 focus:ring-blue-500 focus:border-blue-500">
433
+ <option>is</option>
434
+ <option>contains</option>
435
+ <option>starts with</option>
436
+ <option>ends with</option>
437
+ <option>does not contain</option>
438
+ </select>
439
+ <input type="text" class="border border-gray-300 rounded-lg px-3 py-2 focus:ring-blue-500 focus:border-blue-500 flex-1" placeholder="Value">
440
+ <button class="p-2 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-full">
441
+ <i class="fas fa-times"></i>
442
+ </button>
443
+ </div>
444
+ <button class="text-blue-600 text-sm font-medium flex items-center gap-1">
445
+ <i class="fas fa-plus"></i> Add another condition
446
+ </button>
447
+ </div>
448
+ </div>
449
+
450
+ <div>
451
+ <label class="block text-sm font-medium text-gray-700 mb-1">Actions</label>
452
+ <div class="space-y-3">
453
+ <div class="flex gap-3 items-center">
454
+ <select class="border border-gray-300 rounded-lg px-3 py-2 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 flex-1">
455
+ <option>Save to folder</option>
456
+ <option>Convert format</option>
457
+ <option>Set quality</option>
458
+ <option>Add watermark</option>
459
+ <option>Limit bandwidth</option>
460
+ </select>
461
+ <input type="text" class="border border-gray-300 rounded-lg px-3 py-2 focus:ring-blue-500 focus:border-blue-500 flex-1" placeholder="/Downloads/Instagram/">
462
+ <button class="p-2 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-full">
463
+ <i class="fas fa-times"></i>
464
+ </button>
465
+ </div>
466
+ <button class="text-blue-600 text-sm font-medium flex items-center gap-1">
467
+ <i class="fas fa-plus"></i> Add another action
468
+ </button>
469
+ </div>
470
+ </div>
471
+
472
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
473
+ <div>
474
+ <label class="block text-sm font-medium text-gray-700 mb-1">Priority</label>
475
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-blue-500 focus:border-blue-500">
476
+ <option>Normal</option>
477
+ <option>High</option>
478
+ <option>Low</option>
479
+ </select>
480
+ </div>
481
+ <div>
482
+ <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
483
+ <div class="flex items-center gap-4">
484
+ <label class="inline-flex items-center">
485
+ <input type="radio" name="status" class="h-4 w-4 text-blue-600" checked>
486
+ <span class="ml-2">Active</span>
487
+ </label>
488
+ <label class="inline-flex items-center">
489
+ <input type="radio" name="status" class="h-4 w-4 text-blue-600">
490
+ <span class="ml-2">Inactive</span>
491
+ </label>
492
+ </div>
493
+ </div>
494
+ </div>
495
+ </div>
496
+
497
+ <div class="mt-8 flex justify-end gap-3">
498
+ <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">Cancel</button>
499
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Save Rule</button>
500
+ </div>
501
+ </div>
502
+ </div>
503
+ </div>
504
+ </div>
505
+
506
+ <script>
507
+ // Tab switching functionality
508
+ document.querySelectorAll('.tab-btn').forEach(btn => {
509
+ btn.addEventListener('click', function() {
510
+ // Remove active class from all tabs
511
+ document.querySelectorAll('.tab-btn').forEach(t => t.classList.remove('tab-active'));
512
+ // Add active class to clicked tab
513
+ this.classList.add('tab-active');
514
+
515
+ const tab = this.getAttribute('data-tab');
516
+
517
+ // Show/hide content based on tab
518
+ if (tab === 'rules') {
519
+ document.getElementById('downloadsList').classList.add('hidden');
520
+ document.getElementById('rulesList').classList.remove('hidden');
521
+ document.getElementById('activeRules').classList.add('hidden');
522
+ } else {
523
+ document.getElementById('downloadsList').classList.remove('hidden');
524
+ document.getElementById('rulesList').classList.add('hidden');
525
+
526
+ // Show active rules only on certain tabs
527
+ if (tab === 'all' || tab === 'images' || tab === 'videos') {
528
+ document.getElementById('activeRules').classList.remove('hidden');
529
+ } else {
530
+ document.getElementById('activeRules').classList.add('hidden');
531
+ }
532
+
533
+ // Here you would typically filter the downloads based on the selected tab
534
+ // For this demo, we're just changing the UI
535
+ }
536
+ });
537
+ });
538
+
539
+ // Rule chip removal
540
+ document.querySelectorAll('.rule-chip i.fa-times').forEach(icon => {
541
+ icon.addEventListener('click', function(e) {
542
+ e.stopPropagation();
543
+ this.parentElement.remove();
544
+ });
545
+ });
546
+
547
+ // Modal handling
548
+ const addRuleModal = document.getElementById('addRuleModal');
549
+ const addRuleBtn = document.getElementById('addRuleBtn');
550
+ const addNewRuleBtn = document.getElementById('addNewRuleBtn');
551
+ const closeModalBtn = document.getElementById('closeModalBtn');
552
+
553
+ function openModal() {
554
+ addRuleModal.classList.remove('hidden');
555
+ document.body.style.overflow = 'hidden';
556
+ }
557
+
558
+ function closeModal() {
559
+ addRuleModal.classList.add('hidden');
560
+ document.body.style.overflow = 'auto';
561
+ }
562
+
563
+ addRuleBtn.addEventListener('click', openModal);
564
+ addNewRuleBtn.addEventListener('click', openModal);
565
+ closeModalBtn.addEventListener('click', closeModal);
566
+
567
+ // Close modal when clicking outside
568
+ addRuleModal.addEventListener('click', function(e) {
569
+ if (e.target === addRuleModal) {
570
+ closeModal();
571
+ }
572
+ });
573
+
574
+ // Simulate download progress (for demo purposes)
575
+ function simulateProgress() {
576
+ const progressBars = document.querySelectorAll('.progress-bar');
577
+
578
+ progressBars.forEach(bar => {
579
+ if (bar.style.width !== '100%') {
580
+ const currentWidth = parseFloat(bar.style.width) || 0;
581
+ const increment = Math.random() * 10;
582
+ const newWidth = Math.min(currentWidth + increment, 100);
583
+ bar.style.width = `${newWidth}%`;
584
+
585
+ // Update the percentage text
586
+ const parentItem = bar.closest('.download-item');
587
+ if (parentItem) {
588
+ const percentText = parentItem.querySelector('span:first-child');
589
+ if (percentText) {
590
+ percentText.textContent = `${Math.round(newWidth)}%`;
591
+ }
592
+
593
+ // If completed, update status
594
+ if (newWidth === 100) {
595
+ const statusText = parentItem.querySelector('span:first-child');
596
+ if (statusText) {
597
+ statusText.textContent = 'Completed';
598
+ statusText.classList.add('text-green-600', 'font-medium');
599
+ statusText.classList.remove('text-gray-500');
600
+ }
601
+
602
+ // Change progress bar color to green
603
+ bar.classList.remove('bg-blue-600');
604
+ bar.classList.add('bg-green-500');
605
+
606
+ // Update buttons
607
+ const buttons = parentItem.querySelectorAll('.flex-shrink-0 button');
608
+ if (buttons.length >= 2) {
609
+ buttons[0].innerHTML = '<i class="fas fa-folder-open"></i>';
610
+ buttons[1].innerHTML = '<i class="fas fa-trash"></i>';
611
+ }
612
+ }
613
+ }
614
+ }
615
+ });
616
+
617
+ setTimeout(simulateProgress, 2000);
618
+ }
619
+
620
+ // Start simulation
621
+ setTimeout(simulateProgress, 2000);
622
+ </script>
623
+ <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/new-download-manager" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
624
+ </html>