Hugging Face's logo

Spaces:
jebin2
/
Tools
Sleeping

App Files Community
jebin2 commited on
Commit
7c78840
·
1 Parent(s): 6f686cf

ui

Browse files
Files changed (4) hide show
  1. image/convert.html +218 -280
  2. image/remove_background.html +182 -374
  3. image/remove_metadata.html +200 -342
  4. index.html +89 -131
image/convert.html CHANGED
@@ -14,148 +14,149 @@
14
  }
15
 
16
  body {
17
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
18
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
  min-height: 100vh;
20
- padding: 20px;
21
  }
22
 
23
  .container {
24
  max-width: 1000px;
25
  margin: 0 auto;
26
- background: white;
27
- border-radius: 20px;
28
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
29
- overflow: hidden;
30
  }
31
 
32
  .header {
33
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
34
- color: white;
35
- padding: 40px 30px;
36
  text-align: center;
37
- position: relative;
38
  }
39
 
40
  .back-button {
41
  position: absolute;
42
- left: 30px;
43
- top: 50%;
44
- transform: translateY(-50%);
45
- background: rgba(255, 255, 255, 0.2);
46
- color: white;
47
- border: none;
48
- padding: 12px 20px;
49
- border-radius: 50px;
50
- cursor: pointer;
51
- font-size: 1rem;
52
- transition: all 0.3s ease;
53
- text-decoration: none;
54
- display: flex;
55
  align-items: center;
56
  gap: 8px;
 
 
 
 
 
 
 
 
57
  }
58
 
59
  .back-button:hover {
60
- background: rgba(255, 255, 255, 0.3);
61
- transform: translateY(-50%) translateX(-2px);
62
  }
63
 
64
- .header-content {
65
- display: flex;
66
- align-items: center;
67
- justify-content: center;
68
- gap: 20px;
69
- margin-bottom: 20px;
70
  }
71
 
72
- .header-text h1 {
 
 
 
 
 
73
  font-size: 2.5rem;
 
 
 
 
74
  margin-bottom: 10px;
75
- font-weight: 300;
76
  }
77
 
78
- .header-text p {
 
79
  font-size: 1.1rem;
80
- opacity: 0.9;
81
  }
82
 
83
- .content {
 
 
84
  padding: 40px;
 
 
85
  }
86
 
87
  .upload-section {
88
- background: #f8f9fa;
89
  border-radius: 15px;
90
- padding: 40px;
91
  text-align: center;
92
- margin-bottom: 30px;
93
- border: 2px dashed #dee2e6;
94
- transition: all 0.3s ease;
95
  cursor: pointer;
 
 
96
  }
97
 
98
  .upload-section:hover {
99
- border-color: #667eea;
100
- background: #f0f4ff;
101
  }
102
 
103
  .upload-section.dragover {
104
- border-color: #667eea;
105
- background: #e8f2ff;
106
  transform: scale(1.02);
107
  }
108
 
109
  .upload-icon {
110
- font-size: 4rem;
111
- color: #667eea;
112
- margin-bottom: 20px;
113
- display: block;
114
  }
115
 
116
- .upload-text h3 {
117
- color: #495057;
118
  margin-bottom: 10px;
119
- font-size: 1.5rem;
120
  }
121
 
122
- .upload-text p {
123
- color: #6c757d;
124
- margin-bottom: 20px;
125
  }
126
 
127
- .upload-button {
128
- background: linear-gradient(135deg, #667eea, #764ba2);
129
- color: white;
130
- border: none;
131
- padding: 15px 30px;
132
- border-radius: 50px;
133
- font-size: 1.1rem;
134
- cursor: pointer;
135
- transition: all 0.3s ease;
136
- box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
137
  }
138
 
139
- .upload-button:hover {
140
- transform: translateY(-2px);
141
- box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
 
 
 
 
 
 
142
  }
143
 
144
- .file-input {
145
- display: none;
 
 
 
 
 
146
  }
147
 
148
  .settings-section {
149
- background: white;
150
  border-radius: 15px;
151
- padding: 30px;
152
  margin-bottom: 30px;
153
- border: 1px solid #e9ecef;
154
  }
155
 
156
  .settings-title {
157
- color: #495057;
158
- font-size: 1.3rem;
159
  margin-bottom: 20px;
160
  display: flex;
161
  align-items: center;
@@ -175,22 +176,26 @@
175
  }
176
 
177
  .setting-label {
178
- color: #495057;
179
  font-weight: 500;
180
- font-size: 0.95rem;
181
  }
182
 
183
  .setting-input {
184
  padding: 12px 15px;
185
- border: 2px solid #e9ecef;
186
- border-radius: 10px;
 
187
  font-size: 1rem;
 
188
  transition: all 0.3s ease;
189
  }
190
 
191
  select.setting-input {
192
  padding-right: 40px;
193
- background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667eea' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 15px center;
 
 
194
  -webkit-appearance: none;
195
  -moz-appearance: none;
196
  appearance: none;
@@ -199,85 +204,94 @@
199
 
200
  .setting-input:focus {
201
  outline: none;
202
- border-color: #667eea;
203
- box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 
 
 
 
 
204
  }
205
 
206
  .files-preview {
207
- margin-top: 30px;
208
  }
209
 
210
  .preview-title {
211
- color: #495057;
212
- font-size: 1.3rem;
213
- margin-bottom: 20px;
214
- display: flex;
215
- align-items: center;
216
- gap: 10px;
217
  }
218
 
219
  .files-grid {
220
  display: grid;
221
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
222
- gap: 20px;
223
  }
224
 
225
  .file-card {
226
- background: white;
227
- border-radius: 12px;
228
- padding: 20px;
229
- border: 1px solid #e9ecef;
230
- transition: all 0.3s ease;
231
  position: relative;
232
  }
233
 
234
- .file-card:hover {
235
- transform: translateY(-2px);
236
- box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
 
 
 
 
 
 
 
 
 
 
 
 
 
237
  }
238
 
239
  .file-preview {
240
  width: 100%;
241
- height: 120px;
242
- background: #f8f9fa;
243
  border-radius: 8px;
 
 
 
244
  display: flex;
245
  align-items: center;
246
  justify-content: center;
247
- margin-bottom: 15px;
248
- overflow: hidden;
249
  }
250
 
251
  .file-preview img {
252
  max-width: 100%;
253
  max-height: 100%;
254
- object-fit: cover;
255
- border-radius: 8px;
256
- }
257
-
258
- .file-icon {
259
- font-size: 2rem;
260
- color: #667eea;
261
  }
262
 
263
  .file-info h4 {
264
- color: #495057;
265
- font-size: 0.9rem;
 
 
266
  margin-bottom: 5px;
267
- word-break: break-all;
268
  }
269
 
270
  .file-info p {
271
- color: #6c757d;
272
- font-size: 0.8rem;
273
- margin-bottom: 10px;
274
  }
275
 
276
  .file-status {
277
  display: flex;
278
  align-items: center;
279
- gap: 8px;
280
- margin-bottom: 10px;
 
281
  }
282
 
283
  .status-indicator {
@@ -289,148 +303,107 @@
289
 
290
  .status-indicator.processing {
291
  background: #ffc107;
292
- animation: pulse 2s infinite;
293
  }
294
 
295
  .status-indicator.error {
296
  background: #dc3545;
297
  }
298
 
299
- .remove-button {
300
- position: absolute;
301
- top: 10px;
302
- right: 10px;
303
- background: #dc3545;
304
- color: white;
305
- border: none;
306
- width: 24px;
307
- height: 24px;
308
- border-radius: 50%;
309
- cursor: pointer;
310
- font-size: 0.8rem;
311
- display: flex;
312
- align-items: center;
313
- justify-content: center;
314
- transition: all 0.3s ease;
315
- }
316
-
317
- .remove-button:hover {
318
- background: #c82333;
319
- transform: scale(1.1);
320
- }
321
-
322
- .progress-section {
323
- margin-top: 30px;
324
- display: none;
325
- }
326
-
327
- .progress-title {
328
- color: #495057;
329
- font-size: 1.2rem;
330
- margin-bottom: 15px;
331
- display: flex;
332
- align-items: center;
333
- gap: 10px;
334
- }
335
-
336
- .progress-bar-container {
337
- background: #e9ecef;
338
- border-radius: 10px;
339
- height: 12px;
340
- overflow: hidden;
341
- margin-bottom: 10px;
342
- }
343
-
344
- .progress-bar {
345
- background: linear-gradient(135deg, #28a745, #20c997);
346
- height: 100%;
347
- width: 0%;
348
- transition: width 0.3s ease;
349
- border-radius: 10px;
350
- }
351
-
352
- .progress-text {
353
- color: #6c757d;
354
- font-size: 0.9rem;
355
- text-align: center;
356
- }
357
-
358
  .action-buttons {
359
  display: flex;
360
  gap: 15px;
 
361
  justify-content: center;
362
- margin-top: 30px;
363
  }
364
 
365
- .action-button {
366
  padding: 15px 30px;
 
367
  border: none;
368
- border-radius: 50px;
369
- font-size: 1.1rem;
370
  cursor: pointer;
371
  transition: all 0.3s ease;
372
- display: flex;
373
  align-items: center;
374
- gap: 10px;
375
- min-width: 150px;
376
- justify-content: center;
377
  }
378
 
379
- .process-button {
380
- background: linear-gradient(135deg, #28a745, #20c997);
381
  color: white;
382
- box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
383
  }
384
 
385
- .process-button:hover:not(:disabled) {
386
  transform: translateY(-2px);
387
- box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
388
  }
389
 
390
- .process-button:disabled {
391
- opacity: 0.6;
392
  cursor: not-allowed;
393
  }
394
 
395
- .clear-button {
396
- background: #6c757d;
397
- color: white;
 
398
  }
399
 
400
- .clear-button:hover {
401
- background: #5a6268;
402
- transform: translateY(-2px);
403
  }
404
 
405
- .download-button {
406
- background: linear-gradient(135deg, #007bff, #0056b3);
407
  color: white;
408
- box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
409
  }
410
 
411
- .download-button:hover {
412
- transform: translateY(-2px);
413
- box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
414
  }
415
 
416
  .error-message {
417
- background: #f8d7da;
418
- color: #721c24;
419
- padding: 15px;
420
  border-radius: 10px;
 
421
  margin-bottom: 20px;
422
- border: 1px solid #f5c6cb;
423
- display: none;
424
  }
425
 
426
  .success-message {
427
- background: #d4edda;
428
- color: #155724;
429
- padding: 15px;
430
  border-radius: 10px;
 
431
  margin-bottom: 20px;
432
- border: 1px solid #c3e6cb;
433
- display: none;
434
  }
435
 
436
  @keyframes pulse {
@@ -449,70 +422,42 @@
449
  opacity: 1;
450
  }
451
  }
452
-
453
- @media (max-width: 768px) {
454
- .header-content {
455
- flex-direction: column;
456
- gap: 15px;
457
- }
458
-
459
- .header-text h1 {
460
- font-size: 2rem;
461
- }
462
-
463
- .back-button {
464
- position: static;
465
- transform: none;
466
- margin-bottom: 20px;
467
- align-self: flex-start;
468
- }
469
-
470
- .content {
471
- padding: 20px;
472
- }
473
-
474
- .action-buttons {
475
- flex-direction: column;
476
- align-items: center;
477
- }
478
- }
479
  </style>
480
  </head>
481
 
482
  <body>
 
 
 
 
 
 
 
483
  <div class="container">
484
  <div class="header">
485
- <a href="/" class="back-button">
486
- <span style="line-height: 1;">←</span>
487
- </a>
488
-
489
- <div class="header-content">
490
- <div class="header-text">
491
- <h1>Image Convert</h1>
492
- <p>Convert HEIC images to PNG/JPG format with ease</p>
493
- </div>
494
- </div>
495
  </div>
496
 
497
- <div class="content">
498
- <div class="error-message" id="error-message"></div>
499
- <div class="success-message" id="success-message"></div>
 
 
 
 
 
500
 
501
  <div class="upload-section" id="upload-section">
502
- <span class="upload-icon">📁</span>
503
- <div class="upload-text">
504
- <h3>Drop your images here</h3>
505
- <button class="upload-button">
506
- Choose Files
507
- </button>
508
- </div>
509
- <input type="file" id="file-input" class="file-input" multiple accept="image/*">
510
  </div>
511
 
512
  <div class="settings-section">
513
- <h3 class="settings-title">
514
- ⚙️ Conversion Settings
515
- </h3>
516
  <div class="settings-grid">
517
  <div class="setting-group">
518
  <label class="setting-label">Output Format</label>
@@ -531,32 +476,25 @@
531
  </div>
532
 
533
  <div class="files-preview" id="files-preview" style="display: none;">
534
- <h3 class="preview-title">
535
- 📋 Selected Files
536
- </h3>
537
- <div class="files-grid" id="files-grid">
538
- <!-- File cards will be inserted here -->
539
- </div>
540
  </div>
541
 
542
  <div class="progress-section" id="progress-section">
543
- <h3 class="progress-title">
544
- 🔄 Processing Images...
545
- </h3>
546
  <div class="progress-bar-container">
547
  <div class="progress-bar" id="progress-bar"></div>
548
  </div>
549
- <div class="progress-text" id="progress-text">0% complete</div>
550
  </div>
551
 
552
  <div class="action-buttons">
553
- <button class="action-button process-button" id="process-button" disabled>
554
  🔄 Convert Images
555
  </button>
556
- <button class="action-button clear-button" id="clear-button">
557
  🗑️ Clear All
558
  </button>
559
- <button class="action-button download-button" id="download-button" style="display: none;">
560
  💾 Download All
561
  </button>
562
  </div>
 
14
  }
15
 
16
  body {
17
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
18
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
19
  min-height: 100vh;
20
+ color: #e4e4e4;
21
  }
22
 
23
  .container {
24
  max-width: 1000px;
25
  margin: 0 auto;
26
+ padding: 40px 20px;
 
 
 
27
  }
28
 
29
  .header {
 
 
 
30
  text-align: center;
31
+ margin-bottom: 40px;
32
  }
33
 
34
  .back-button {
35
  position: absolute;
36
+ left: 20px;
37
+ top: 20px;
38
+ display: inline-flex;
 
 
 
 
 
 
 
 
 
 
39
  align-items: center;
40
  gap: 8px;
41
+ padding: 12px 20px;
42
+ background: rgba(255, 255, 255, 0.1);
43
+ border: 1px solid rgba(255, 255, 255, 0.2);
44
+ border-radius: 8px;
45
+ color: #e4e4e4;
46
+ text-decoration: none;
47
+ font-size: 0.9rem;
48
+ transition: all 0.3s ease;
49
  }
50
 
51
  .back-button:hover {
52
+ background: rgba(255, 255, 255, 0.2);
53
+ transform: translateX(-5px);
54
  }
55
 
56
+ .back-button svg {
57
+ width: 16px;
58
+ height: 16px;
59
+ flex-shrink: 0;
 
 
60
  }
61
 
62
+ .logo {
63
+ font-size: 4rem;
64
+ margin-bottom: 15px;
65
+ }
66
+
67
+ h1 {
68
  font-size: 2.5rem;
69
+ background: linear-gradient(135deg, #e94560, #f39c12);
70
+ -webkit-background-clip: text;
71
+ -webkit-text-fill-color: transparent;
72
+ background-clip: text;
73
  margin-bottom: 10px;
 
74
  }
75
 
76
+ .subtitle {
77
+ color: #8892b0;
78
  font-size: 1.1rem;
 
79
  }
80
 
81
+ .tool-card {
82
+ background: rgba(255, 255, 255, 0.05);
83
+ border-radius: 20px;
84
  padding: 40px;
85
+ backdrop-filter: blur(10px);
86
+ border: 1px solid rgba(255, 255, 255, 0.1);
87
  }
88
 
89
  .upload-section {
90
+ border: 2px dashed rgba(233, 69, 96, 0.5);
91
  border-radius: 15px;
92
+ padding: 60px 40px;
93
  text-align: center;
 
 
 
94
  cursor: pointer;
95
+ transition: all 0.3s ease;
96
+ margin-bottom: 30px;
97
  }
98
 
99
  .upload-section:hover {
100
+ border-color: #e94560;
101
+ background: rgba(233, 69, 96, 0.1);
102
  }
103
 
104
  .upload-section.dragover {
105
+ border-color: #e94560;
106
+ background: rgba(233, 69, 96, 0.15);
107
  transform: scale(1.02);
108
  }
109
 
110
  .upload-icon {
111
+ font-size: 3rem;
112
+ margin-bottom: 15px;
 
 
113
  }
114
 
115
+ .upload-text {
116
+ font-size: 1.2rem;
117
  margin-bottom: 10px;
 
118
  }
119
 
120
+ .upload-hint {
121
+ color: #8892b0;
122
+ font-size: 0.9rem;
123
  }
124
 
125
+ #file-input {
126
+ display: none;
 
 
 
 
 
 
 
 
127
  }
128
 
129
+ .info-box {
130
+ background: rgba(23, 162, 184, 0.1);
131
+ border: 1px solid rgba(23, 162, 184, 0.3);
132
+ border-radius: 10px;
133
+ padding: 15px 20px;
134
+ margin-bottom: 30px;
135
+ display: flex;
136
+ align-items: center;
137
+ gap: 12px;
138
  }
139
 
140
+ .info-box span {
141
+ font-size: 1.3rem;
142
+ }
143
+
144
+ .info-box p {
145
+ font-size: 0.9rem;
146
+ margin: 0;
147
  }
148
 
149
  .settings-section {
150
+ background: rgba(255, 255, 255, 0.05);
151
  border-radius: 15px;
152
+ padding: 25px;
153
  margin-bottom: 30px;
154
+ border: 1px solid rgba(255, 255, 255, 0.1);
155
  }
156
 
157
  .settings-title {
158
+ color: #e4e4e4;
159
+ font-size: 1.1rem;
160
  margin-bottom: 20px;
161
  display: flex;
162
  align-items: center;
 
176
  }
177
 
178
  .setting-label {
179
+ color: #8892b0;
180
  font-weight: 500;
181
+ font-size: 0.9rem;
182
  }
183
 
184
  .setting-input {
185
  padding: 12px 15px;
186
+ background: rgba(0, 0, 0, 0.2);
187
+ border: 1px solid rgba(255, 255, 255, 0.1);
188
+ border-radius: 8px;
189
  font-size: 1rem;
190
+ color: #e4e4e4;
191
  transition: all 0.3s ease;
192
  }
193
 
194
  select.setting-input {
195
  padding-right: 40px;
196
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e4e4e4' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
197
+ background-repeat: no-repeat;
198
+ background-position: right 15px center;
199
  -webkit-appearance: none;
200
  -moz-appearance: none;
201
  appearance: none;
 
204
 
205
  .setting-input:focus {
206
  outline: none;
207
+ border-color: #e94560;
208
+ background-color: rgba(0, 0, 0, 0.3);
209
+ }
210
+
211
+ .setting-input option {
212
+ background: #16213e;
213
+ color: #e4e4e4;
214
  }
215
 
216
  .files-preview {
217
+ margin-bottom: 30px;
218
  }
219
 
220
  .preview-title {
221
+ font-size: 1.1rem;
222
+ margin-bottom: 15px;
223
+ color: #e4e4e4;
 
 
 
224
  }
225
 
226
  .files-grid {
227
  display: grid;
228
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
229
+ gap: 15px;
230
  }
231
 
232
  .file-card {
233
+ background: rgba(255, 255, 255, 0.05);
234
+ border-radius: 10px;
235
+ padding: 15px;
236
+ text-align: center;
 
237
  position: relative;
238
  }
239
 
240
+ .file-card .remove-button {
241
+ position: absolute;
242
+ top: 5px;
243
+ right: 5px;
244
+ width: 24px;
245
+ height: 24px;
246
+ border-radius: 50%;
247
+ border: none;
248
+ background: #dc3545;
249
+ color: white;
250
+ cursor: pointer;
251
+ font-size: 14px;
252
+ display: flex;
253
+ align-items: center;
254
+ justify-content: center;
255
+ z-index: 10;
256
  }
257
 
258
  .file-preview {
259
  width: 100%;
260
+ height: 100px;
 
261
  border-radius: 8px;
262
+ overflow: hidden;
263
+ margin-bottom: 10px;
264
+ background: rgba(0, 0, 0, 0.2);
265
  display: flex;
266
  align-items: center;
267
  justify-content: center;
 
 
268
  }
269
 
270
  .file-preview img {
271
  max-width: 100%;
272
  max-height: 100%;
273
+ object-fit: contain;
 
 
 
 
 
 
274
  }
275
 
276
  .file-info h4 {
277
+ font-size: 0.8rem;
278
+ white-space: nowrap;
279
+ overflow: hidden;
280
+ text-overflow: ellipsis;
281
  margin-bottom: 5px;
 
282
  }
283
 
284
  .file-info p {
285
+ font-size: 0.7rem;
286
+ color: #8892b0;
 
287
  }
288
 
289
  .file-status {
290
  display: flex;
291
  align-items: center;
292
+ justify-content: center;
293
+ gap: 5px;
294
+ margin-top: 8px;
295
  }
296
 
297
  .status-indicator {
 
303
 
304
  .status-indicator.processing {
305
  background: #ffc107;
306
+ animation: pulse 1s infinite;
307
  }
308
 
309
  .status-indicator.error {
310
  background: #dc3545;
311
  }
312
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
313
  .action-buttons {
314
  display: flex;
315
  gap: 15px;
316
+ flex-wrap: wrap;
317
  justify-content: center;
 
318
  }
319
 
320
+ .btn {
321
  padding: 15px 30px;
322
+ border-radius: 10px;
323
  border: none;
324
+ font-size: 1rem;
325
+ font-weight: 600;
326
  cursor: pointer;
327
  transition: all 0.3s ease;
328
+ display: inline-flex;
329
  align-items: center;
330
+ gap: 8px;
 
 
331
  }
332
 
333
+ .btn-primary {
334
+ background: linear-gradient(135deg, #e94560, #f39c12);
335
  color: white;
 
336
  }
337
 
338
+ .btn-primary:hover:not(:disabled) {
339
  transform: translateY(-2px);
340
+ box-shadow: 0 5px 20px rgba(233, 69, 96, 0.4);
341
  }
342
 
343
+ .btn-primary:disabled {
344
+ opacity: 0.5;
345
  cursor: not-allowed;
346
  }
347
 
348
+ .btn-secondary {
349
+ background: rgba(255, 255, 255, 0.1);
350
+ color: #e4e4e4;
351
+ border: 1px solid rgba(255, 255, 255, 0.2);
352
  }
353
 
354
+ .btn-secondary:hover {
355
+ background: rgba(255, 255, 255, 0.2);
 
356
  }
357
 
358
+ .btn-success {
359
+ background: linear-gradient(135deg, #28a745, #20c997);
360
  color: white;
361
+ display: none;
362
  }
363
 
364
+ .progress-section {
365
+ display: none;
366
+ margin-bottom: 20px;
367
+ }
368
+
369
+ .progress-bar-container {
370
+ height: 8px;
371
+ background: rgba(255, 255, 255, 0.1);
372
+ border-radius: 4px;
373
+ overflow: hidden;
374
+ margin-bottom: 10px;
375
+ }
376
+
377
+ .progress-bar {
378
+ height: 100%;
379
+ background: linear-gradient(135deg, #e94560, #f39c12);
380
+ width: 0%;
381
+ transition: width 0.3s ease;
382
+ }
383
+
384
+ .progress-text {
385
+ font-size: 0.9rem;
386
+ color: #8892b0;
387
  }
388
 
389
  .error-message {
390
+ display: none;
391
+ background: rgba(220, 53, 69, 0.1);
392
+ border: 1px solid rgba(220, 53, 69, 0.3);
393
  border-radius: 10px;
394
+ padding: 15px 20px;
395
  margin-bottom: 20px;
396
+ color: #dc3545;
 
397
  }
398
 
399
  .success-message {
400
+ display: none;
401
+ background: rgba(40, 167, 69, 0.1);
402
+ border: 1px solid rgba(40, 167, 69, 0.3);
403
  border-radius: 10px;
404
+ padding: 15px 20px;
405
  margin-bottom: 20px;
406
+ color: #28a745;
 
407
  }
408
 
409
  @keyframes pulse {
 
422
  opacity: 1;
423
  }
424
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
425
  </style>
426
  </head>
427
 
428
  <body>
429
+ <a href="/" class="back-button">
430
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
431
+ <path d="M19 12H5M12 19l-7-7 7-7" />
432
+ </svg>
433
+ Back to Tools
434
+ </a>
435
+
436
  <div class="container">
437
  <div class="header">
438
+ <div class="logo">🖼️</div>
439
+ <h1>Image Convert</h1>
440
+ <p class="subtitle">Convert HEIC images to PNG/JPG format with ease</p>
 
 
 
 
 
 
 
441
  </div>
442
 
443
+ <div class="tool-card">
444
+ <div class="info-box">
445
+ <span>ℹ️</span>
446
+ <p>Upload images and convert them to your desired format. Supports batch conversion.</p>
447
+ </div>
448
+
449
+ <div id="error-message" class="error-message"></div>
450
+ <div id="success-message" class="success-message"></div>
451
 
452
  <div class="upload-section" id="upload-section">
453
+ <div class="upload-icon">📤</div>
454
+ <p class="upload-text">Drop images here or click to browse</p>
455
+ <p class="upload-hint">Supports HEIC, JPG, PNG, WebP, TIFF, BMP</p>
456
+ <input type="file" id="file-input" accept="image/*,.heic" multiple>
 
 
 
 
457
  </div>
458
 
459
  <div class="settings-section">
460
+ <h3 class="settings-title">⚙️ Conversion Settings</h3>
 
 
461
  <div class="settings-grid">
462
  <div class="setting-group">
463
  <label class="setting-label">Output Format</label>
 
476
  </div>
477
 
478
  <div class="files-preview" id="files-preview" style="display: none;">
479
+ <h3 class="preview-title">📋 Selected Files</h3>
480
+ <div class="files-grid" id="files-grid"></div>
 
 
 
 
481
  </div>
482
 
483
  <div class="progress-section" id="progress-section">
 
 
 
484
  <div class="progress-bar-container">
485
  <div class="progress-bar" id="progress-bar"></div>
486
  </div>
487
+ <p class="progress-text" id="progress-text">0% complete</p>
488
  </div>
489
 
490
  <div class="action-buttons">
491
+ <button class="btn btn-primary" id="process-button" disabled>
492
  🔄 Convert Images
493
  </button>
494
+ <button class="btn btn-secondary" id="clear-button">
495
  🗑️ Clear All
496
  </button>
497
+ <button class="btn btn-success" id="download-button">
498
  💾 Download All
499
  </button>
500
  </div>
image/remove_background.html CHANGED
@@ -14,270 +14,217 @@
14
  }
15
 
16
  body {
17
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
18
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
  min-height: 100vh;
20
- padding: 20px;
21
  }
22
 
23
  .container {
24
  max-width: 1000px;
25
  margin: 0 auto;
26
- background: white;
27
- border-radius: 20px;
28
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
29
- overflow: hidden;
30
  }
31
 
32
  .header {
33
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
34
- color: white;
35
- padding: 40px 30px;
36
  text-align: center;
37
- position: relative;
38
  }
39
 
40
  .back-button {
41
  position: absolute;
42
- left: 30px;
43
- top: 50%;
44
- transform: translateY(-50%);
45
- background: rgba(255, 255, 255, 0.2);
46
- color: white;
47
- border: none;
48
- padding: 12px 20px;
49
- border-radius: 50px;
50
- cursor: pointer;
51
- font-size: 1rem;
52
- transition: all 0.3s ease;
53
- text-decoration: none;
54
- display: flex;
55
  align-items: center;
56
  gap: 8px;
 
 
 
 
 
 
 
 
57
  }
58
 
59
  .back-button:hover {
60
- background: rgba(255, 255, 255, 0.3);
61
- transform: translateY(-50%) translateX(-2px);
62
  }
63
 
64
- .header-content {
65
- display: flex;
66
- align-items: center;
67
- justify-content: center;
68
- gap: 20px;
69
- margin-bottom: 20px;
70
  }
71
 
72
- .header-text h1 {
 
 
 
 
 
73
  font-size: 2.5rem;
 
 
 
 
74
  margin-bottom: 10px;
75
- font-weight: 300;
76
  }
77
 
78
- .header-text p {
 
79
  font-size: 1.1rem;
80
- opacity: 0.9;
81
  }
82
 
83
- .content {
 
 
84
  padding: 40px;
 
 
85
  }
86
 
87
  .upload-section {
88
- background: #f8f9fa;
89
  border-radius: 15px;
90
- padding: 40px;
91
  text-align: center;
92
- margin-bottom: 30px;
93
- border: 2px dashed #dee2e6;
94
- transition: all 0.3s ease;
95
  cursor: pointer;
 
 
96
  }
97
 
98
  .upload-section:hover {
99
- border-color: #667eea;
100
- background: #f0f4ff;
101
  }
102
 
103
  .upload-section.dragover {
104
- border-color: #667eea;
105
- background: #e8f2ff;
106
  transform: scale(1.02);
107
  }
108
 
109
  .upload-icon {
110
- font-size: 4rem;
111
- color: #667eea;
112
- margin-bottom: 20px;
113
- display: block;
114
  }
115
 
116
- .upload-text h3 {
117
- color: #495057;
118
  margin-bottom: 10px;
119
- font-size: 1.5rem;
120
  }
121
 
122
- .upload-text p {
123
- color: #6c757d;
124
- margin-bottom: 20px;
125
- }
126
-
127
- .upload-button {
128
- background: linear-gradient(135deg, #667eea, #764ba2);
129
- color: white;
130
- border: none;
131
- padding: 15px 30px;
132
- border-radius: 50px;
133
- font-size: 1.1rem;
134
- cursor: pointer;
135
- transition: all 0.3s ease;
136
- box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
137
- }
138
-
139
- .upload-button:hover {
140
- transform: translateY(-2px);
141
- box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
142
  }
143
 
144
- .file-input {
145
  display: none;
146
  }
147
 
148
- .settings-section {
149
- background: white;
150
- border-radius: 15px;
151
- padding: 30px;
 
152
  margin-bottom: 30px;
153
- border: 1px solid #e9ecef;
154
- }
155
-
156
- .settings-title {
157
- color: #495057;
158
- font-size: 1.3rem;
159
- margin-bottom: 20px;
160
  display: flex;
161
  align-items: center;
162
- gap: 10px;
163
- }
164
-
165
- .settings-grid {
166
- display: grid;
167
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
168
- gap: 20px;
169
- }
170
-
171
- .setting-group {
172
- display: flex;
173
- flex-direction: column;
174
- gap: 8px;
175
- }
176
-
177
- .setting-label {
178
- color: #495057;
179
- font-weight: 500;
180
- font-size: 0.95rem;
181
  }
182
 
183
- .setting-input {
184
- padding: 12px 15px;
185
- border: 2px solid #e9ecef;
186
- border-radius: 10px;
187
- font-size: 1rem;
188
- transition: all 0.3s ease;
189
- }
190
-
191
- select.setting-input {
192
- padding-right: 40px;
193
- background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667eea' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 15px center;
194
- -webkit-appearance: none;
195
- -moz-appearance: none;
196
- appearance: none;
197
- cursor: pointer;
198
  }
199
 
200
- .setting-input:focus {
201
- outline: none;
202
- border-color: #667eea;
203
- box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
204
  }
205
 
206
  .files-preview {
207
- margin-top: 30px;
208
  }
209
 
210
  .preview-title {
211
- color: #495057;
212
- font-size: 1.3rem;
213
- margin-bottom: 20px;
214
- display: flex;
215
- align-items: center;
216
- gap: 10px;
217
  }
218
 
219
  .files-grid {
220
  display: grid;
221
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
222
- gap: 20px;
223
  }
224
 
225
  .file-card {
226
- background: white;
227
- border-radius: 12px;
228
- padding: 20px;
229
- border: 1px solid #e9ecef;
230
- transition: all 0.3s ease;
231
  position: relative;
232
  }
233
 
234
- .file-card:hover {
235
- transform: translateY(-2px);
236
- box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
 
 
 
 
 
 
 
 
 
 
 
 
 
237
  }
238
 
239
  .file-preview {
240
  width: 100%;
241
- height: 120px;
242
- background: #f8f9fa;
243
  border-radius: 8px;
 
 
 
244
  display: flex;
245
  align-items: center;
246
  justify-content: center;
247
- margin-bottom: 15px;
248
- overflow: hidden;
249
  }
250
 
251
  .file-preview img {
252
  max-width: 100%;
253
  max-height: 100%;
254
- object-fit: cover;
255
- border-radius: 8px;
256
- }
257
-
258
- .file-icon {
259
- font-size: 2rem;
260
- color: #667eea;
261
  }
262
 
263
  .file-info h4 {
264
- color: #495057;
265
- font-size: 0.9rem;
 
 
266
  margin-bottom: 5px;
267
- word-break: break-all;
268
  }
269
 
270
  .file-info p {
271
- color: #6c757d;
272
- font-size: 0.8rem;
273
- margin-bottom: 10px;
274
  }
275
 
276
  .file-status {
277
  display: flex;
278
  align-items: center;
279
- gap: 8px;
280
- margin-bottom: 10px;
 
281
  }
282
 
283
  .status-indicator {
@@ -289,200 +236,107 @@
289
 
290
  .status-indicator.processing {
291
  background: #ffc107;
292
- animation: pulse 2s infinite;
293
  }
294
 
295
  .status-indicator.error {
296
  background: #dc3545;
297
  }
298
 
299
- .remove-button {
300
- position: absolute;
301
- top: 10px;
302
- right: 10px;
303
- background: #dc3545;
304
- color: white;
305
- border: none;
306
- width: 24px;
307
- height: 24px;
308
- border-radius: 50%;
309
- cursor: pointer;
310
- font-size: 0.8rem;
311
- display: flex;
312
- align-items: center;
313
- justify-content: center;
314
- transition: all 0.3s ease;
315
- }
316
-
317
- .remove-button:hover {
318
- background: #c82333;
319
- transform: scale(1.1);
320
- }
321
-
322
- .progress-section {
323
- margin-top: 30px;
324
- display: none;
325
- }
326
-
327
- .progress-title {
328
- color: #495057;
329
- font-size: 1.2rem;
330
- margin-bottom: 15px;
331
- display: flex;
332
- align-items: center;
333
- gap: 10px;
334
- }
335
-
336
- .progress-bar-container {
337
- background: #e9ecef;
338
- border-radius: 10px;
339
- height: 12px;
340
- overflow: hidden;
341
- margin-bottom: 10px;
342
- }
343
-
344
- .progress-bar {
345
- background: linear-gradient(135deg, #28a745, #20c997);
346
- height: 100%;
347
- width: 0%;
348
- transition: width 0.3s ease;
349
- border-radius: 10px;
350
- }
351
-
352
- .progress-text {
353
- color: #6c757d;
354
- font-size: 0.9rem;
355
- text-align: center;
356
- }
357
-
358
  .action-buttons {
359
  display: flex;
360
  gap: 15px;
 
361
  justify-content: center;
362
- margin-top: 30px;
363
  }
364
 
365
- .action-button {
366
  padding: 15px 30px;
 
367
  border: none;
368
- border-radius: 50px;
369
- font-size: 1.1rem;
370
  cursor: pointer;
371
  transition: all 0.3s ease;
372
- display: flex;
373
  align-items: center;
374
- gap: 10px;
375
- min-width: 150px;
376
- justify-content: center;
377
  }
378
 
379
- .process-button {
380
- background: linear-gradient(135deg, #dc3545, #c82333);
381
  color: white;
382
- box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
383
  }
384
 
385
- .process-button:hover:not(:disabled) {
386
  transform: translateY(-2px);
387
- box-shadow: 0 8px 25px rgba(220, 53, 69, 0.4);
388
  }
389
 
390
- .process-button:disabled {
391
- opacity: 0.6;
392
  cursor: not-allowed;
393
  }
394
 
395
- .clear-button {
396
- background: #6c757d;
397
- color: white;
 
398
  }
399
 
400
- .clear-button:hover {
401
- background: #5a6268;
402
- transform: translateY(-2px);
403
  }
404
 
405
- .download-button {
406
- background: linear-gradient(135deg, #007bff, #0056b3);
407
  color: white;
408
- box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
409
- }
410
-
411
- .download-button:hover {
412
- transform: translateY(-2px);
413
- box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
414
- }
415
-
416
- .error-message {
417
- background: #f8d7da;
418
- color: #721c24;
419
- padding: 15px;
420
- border-radius: 10px;
421
- margin-bottom: 20px;
422
- border: 1px solid #f5c6cb;
423
  display: none;
424
  }
425
 
426
- .success-message {
427
- background: #d4edda;
428
- color: #155724;
429
- padding: 15px;
430
- border-radius: 10px;
431
- margin-bottom: 20px;
432
- border: 1px solid #c3e6cb;
433
  display: none;
 
434
  }
435
 
436
- .info-box {
437
- background: #d1ecf1;
438
- color: #0c5460;
439
- padding: 15px;
440
- border-radius: 10px;
441
- margin-bottom: 20px;
442
- border: 1px solid #bee5eb;
443
  }
444
 
445
- .info-box h4 {
446
- margin-bottom: 8px;
447
- font-size: 1rem;
 
 
448
  }
449
 
450
- .info-box p {
451
  font-size: 0.9rem;
452
- margin: 0;
453
  }
454
 
455
- .metadata-modal {
456
  display: none;
457
- position: fixed;
458
- top: 50%;
459
- left: 50%;
460
- transform: translate(-50%, -50%);
461
- background: white;
462
- padding: 30px;
463
  border-radius: 10px;
464
- box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
465
- z-index: 9999;
466
- max-width: 90%;
467
- max-height: 80%;
468
- overflow: auto;
469
- word-wrap: break-word
470
- }
471
-
472
- .metadata-content {
473
- white-space: pre-wrap;
474
- margin-top: 15px;
475
  }
476
 
477
- .modal-backdrop {
478
  display: none;
479
- position: fixed;
480
- top: 0;
481
- left: 0;
482
- width: 100%;
483
- height: 100%;
484
- background: rgba(0, 0, 0, 0.5);
485
- z-index: 9998;
486
  }
487
 
488
  @keyframes pulse {
@@ -501,99 +355,60 @@
501
  opacity: 1;
502
  }
503
  }
504
-
505
- @media (max-width: 768px) {
506
- .header-content {
507
- flex-direction: column;
508
- gap: 15px;
509
- }
510
-
511
- .header-text h1 {
512
- font-size: 2rem;
513
- }
514
-
515
- .back-button {
516
- position: static;
517
- transform: none;
518
- margin-bottom: 20px;
519
- align-self: flex-start;
520
- }
521
-
522
- .content {
523
- padding: 20px;
524
- }
525
-
526
- .action-buttons {
527
- flex-direction: column;
528
- align-items: center;
529
- }
530
- }
531
  </style>
532
  </head>
533
 
534
  <body>
 
 
 
 
 
 
 
535
  <div class="container">
536
  <div class="header">
537
- <a href="/" class="back-button">
538
- <span style="line-height: 1;">←</span>
539
- </a>
540
-
541
- <div class="header-content">
542
- <div class="header-text">
543
- <h1>Remove Background</h1>
544
- <p>Automatically remove backgrounds from your images using AI</p>
545
- </div>
546
- </div>
547
  </div>
548
 
549
- <div class="content">
550
- <div class="error-message" id="error-message"></div>
551
- <div class="success-message" id="success-message"></div>
552
-
553
  <div class="info-box">
554
- <h4>🎯 Background Removal Tool</h4>
555
- <p>Upload your images and our AI will automatically detect and remove the background, leaving you with a
556
- transparent PNG perfect for design work, presentations, or e-commerce.</p>
557
  </div>
558
 
 
 
 
559
  <div class="upload-section" id="upload-section">
560
- <span class="upload-icon">🖼️</span>
561
- <div class="upload-text">
562
- <h3>Drop your images here</h3>
563
- <button class="upload-button">
564
- Choose Files
565
- </button>
566
- </div>
567
- <input type="file" id="file-input" class="file-input" multiple accept="image/*">
568
  </div>
569
 
570
  <div class="files-preview" id="files-preview" style="display: none;">
571
- <h3 class="preview-title">
572
- 📋 Selected Files
573
- </h3>
574
- <div class="files-grid" id="files-grid">
575
- <!-- File cards will be inserted here -->
576
- </div>
577
  </div>
578
 
579
  <div class="progress-section" id="progress-section">
580
- <h3 class="progress-title">
581
- 🔄 Processing Images...
582
- </h3>
583
  <div class="progress-bar-container">
584
  <div class="progress-bar" id="progress-bar"></div>
585
  </div>
586
- <div class="progress-text" id="progress-text">0% complete</div>
587
  </div>
588
 
589
  <div class="action-buttons">
590
- <button class="action-button process-button" id="process-button" disabled>
591
  ✂️ Remove Background
592
  </button>
593
- <button class="action-button clear-button" id="clear-button">
594
  🗑️ Clear All
595
  </button>
596
- <button class="action-button download-button" id="download-button" style="display: none;">
597
  💾 Download All
598
  </button>
599
  </div>
@@ -605,13 +420,6 @@
605
  return '/image/remove_background';
606
  }
607
  </script>
608
- <div id="metadata-modal" class="metadata-modal">
609
- <button onclick="closeMetadataModal()" class="remove-button">×</button>
610
- <h3>Removed Metadata</h3>
611
- <pre id="metadata-content" class="metadata-content"></pre>
612
- </div>
613
- <div id="modal-backdrop" class="modal-backdrop" onclick="closeMetadataModal()"></div>
614
-
615
  </body>
616
 
617
  </html>
 
14
  }
15
 
16
  body {
17
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
18
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
19
  min-height: 100vh;
20
+ color: #e4e4e4;
21
  }
22
 
23
  .container {
24
  max-width: 1000px;
25
  margin: 0 auto;
26
+ padding: 40px 20px;
 
 
 
27
  }
28
 
29
  .header {
 
 
 
30
  text-align: center;
31
+ margin-bottom: 40px;
32
  }
33
 
34
  .back-button {
35
  position: absolute;
36
+ left: 20px;
37
+ top: 20px;
38
+ display: inline-flex;
 
 
 
 
 
 
 
 
 
 
39
  align-items: center;
40
  gap: 8px;
41
+ padding: 12px 20px;
42
+ background: rgba(255, 255, 255, 0.1);
43
+ border: 1px solid rgba(255, 255, 255, 0.2);
44
+ border-radius: 8px;
45
+ color: #e4e4e4;
46
+ text-decoration: none;
47
+ font-size: 0.9rem;
48
+ transition: all 0.3s ease;
49
  }
50
 
51
  .back-button:hover {
52
+ background: rgba(255, 255, 255, 0.2);
53
+ transform: translateX(-5px);
54
  }
55
 
56
+ .back-button svg {
57
+ width: 16px;
58
+ height: 16px;
59
+ flex-shrink: 0;
 
 
60
  }
61
 
62
+ .logo {
63
+ font-size: 4rem;
64
+ margin-bottom: 15px;
65
+ }
66
+
67
+ h1 {
68
  font-size: 2.5rem;
69
+ background: linear-gradient(135deg, #e94560, #f39c12);
70
+ -webkit-background-clip: text;
71
+ -webkit-text-fill-color: transparent;
72
+ background-clip: text;
73
  margin-bottom: 10px;
 
74
  }
75
 
76
+ .subtitle {
77
+ color: #8892b0;
78
  font-size: 1.1rem;
 
79
  }
80
 
81
+ .tool-card {
82
+ background: rgba(255, 255, 255, 0.05);
83
+ border-radius: 20px;
84
  padding: 40px;
85
+ backdrop-filter: blur(10px);
86
+ border: 1px solid rgba(255, 255, 255, 0.1);
87
  }
88
 
89
  .upload-section {
90
+ border: 2px dashed rgba(233, 69, 96, 0.5);
91
  border-radius: 15px;
92
+ padding: 60px 40px;
93
  text-align: center;
 
 
 
94
  cursor: pointer;
95
+ transition: all 0.3s ease;
96
+ margin-bottom: 30px;
97
  }
98
 
99
  .upload-section:hover {
100
+ border-color: #e94560;
101
+ background: rgba(233, 69, 96, 0.1);
102
  }
103
 
104
  .upload-section.dragover {
105
+ border-color: #e94560;
106
+ background: rgba(233, 69, 96, 0.15);
107
  transform: scale(1.02);
108
  }
109
 
110
  .upload-icon {
111
+ font-size: 3rem;
112
+ margin-bottom: 15px;
 
 
113
  }
114
 
115
+ .upload-text {
116
+ font-size: 1.2rem;
117
  margin-bottom: 10px;
 
118
  }
119
 
120
+ .upload-hint {
121
+ color: #8892b0;
122
+ font-size: 0.9rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
123
  }
124
 
125
+ #file-input {
126
  display: none;
127
  }
128
 
129
+ .info-box {
130
+ background: rgba(23, 162, 184, 0.1);
131
+ border: 1px solid rgba(23, 162, 184, 0.3);
132
+ border-radius: 10px;
133
+ padding: 15px 20px;
134
  margin-bottom: 30px;
 
 
 
 
 
 
 
135
  display: flex;
136
  align-items: center;
137
+ gap: 12px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
138
  }
139
 
140
+ .info-box span {
141
+ font-size: 1.3rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
142
  }
143
 
144
+ .info-box p {
145
+ font-size: 0.9rem;
146
+ margin: 0;
 
147
  }
148
 
149
  .files-preview {
150
+ margin-bottom: 30px;
151
  }
152
 
153
  .preview-title {
154
+ font-size: 1.1rem;
155
+ margin-bottom: 15px;
156
+ color: #e4e4e4;
 
 
 
157
  }
158
 
159
  .files-grid {
160
  display: grid;
161
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
162
+ gap: 15px;
163
  }
164
 
165
  .file-card {
166
+ background: rgba(255, 255, 255, 0.05);
167
+ border-radius: 10px;
168
+ padding: 15px;
169
+ text-align: center;
 
170
  position: relative;
171
  }
172
 
173
+ .file-card .remove-button {
174
+ position: absolute;
175
+ top: 5px;
176
+ right: 5px;
177
+ width: 24px;
178
+ height: 24px;
179
+ border-radius: 50%;
180
+ border: none;
181
+ background: #dc3545;
182
+ color: white;
183
+ cursor: pointer;
184
+ font-size: 14px;
185
+ display: flex;
186
+ align-items: center;
187
+ justify-content: center;
188
+ z-index: 10;
189
  }
190
 
191
  .file-preview {
192
  width: 100%;
193
+ height: 100px;
 
194
  border-radius: 8px;
195
+ overflow: hidden;
196
+ margin-bottom: 10px;
197
+ background: rgba(0, 0, 0, 0.2);
198
  display: flex;
199
  align-items: center;
200
  justify-content: center;
 
 
201
  }
202
 
203
  .file-preview img {
204
  max-width: 100%;
205
  max-height: 100%;
206
+ object-fit: contain;
 
 
 
 
 
 
207
  }
208
 
209
  .file-info h4 {
210
+ font-size: 0.8rem;
211
+ white-space: nowrap;
212
+ overflow: hidden;
213
+ text-overflow: ellipsis;
214
  margin-bottom: 5px;
 
215
  }
216
 
217
  .file-info p {
218
+ font-size: 0.7rem;
219
+ color: #8892b0;
 
220
  }
221
 
222
  .file-status {
223
  display: flex;
224
  align-items: center;
225
+ justify-content: center;
226
+ gap: 5px;
227
+ margin-top: 8px;
228
  }
229
 
230
  .status-indicator {
 
236
 
237
  .status-indicator.processing {
238
  background: #ffc107;
239
+ animation: pulse 1s infinite;
240
  }
241
 
242
  .status-indicator.error {
243
  background: #dc3545;
244
  }
245
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
246
  .action-buttons {
247
  display: flex;
248
  gap: 15px;
249
+ flex-wrap: wrap;
250
  justify-content: center;
 
251
  }
252
 
253
+ .btn {
254
  padding: 15px 30px;
255
+ border-radius: 10px;
256
  border: none;
257
+ font-size: 1rem;
258
+ font-weight: 600;
259
  cursor: pointer;
260
  transition: all 0.3s ease;
261
+ display: inline-flex;
262
  align-items: center;
263
+ gap: 8px;
 
 
264
  }
265
 
266
+ .btn-primary {
267
+ background: linear-gradient(135deg, #e94560, #f39c12);
268
  color: white;
 
269
  }
270
 
271
+ .btn-primary:hover:not(:disabled) {
272
  transform: translateY(-2px);
273
+ box-shadow: 0 5px 20px rgba(233, 69, 96, 0.4);
274
  }
275
 
276
+ .btn-primary:disabled {
277
+ opacity: 0.5;
278
  cursor: not-allowed;
279
  }
280
 
281
+ .btn-secondary {
282
+ background: rgba(255, 255, 255, 0.1);
283
+ color: #e4e4e4;
284
+ border: 1px solid rgba(255, 255, 255, 0.2);
285
  }
286
 
287
+ .btn-secondary:hover {
288
+ background: rgba(255, 255, 255, 0.2);
 
289
  }
290
 
291
+ .btn-success {
292
+ background: linear-gradient(135deg, #28a745, #20c997);
293
  color: white;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
294
  display: none;
295
  }
296
 
297
+ .progress-section {
 
 
 
 
 
 
298
  display: none;
299
+ margin-bottom: 20px;
300
  }
301
 
302
+ .progress-bar-container {
303
+ height: 8px;
304
+ background: rgba(255, 255, 255, 0.1);
305
+ border-radius: 4px;
306
+ overflow: hidden;
307
+ margin-bottom: 10px;
 
308
  }
309
 
310
+ .progress-bar {
311
+ height: 100%;
312
+ background: linear-gradient(135deg, #e94560, #f39c12);
313
+ width: 0%;
314
+ transition: width 0.3s ease;
315
  }
316
 
317
+ .progress-text {
318
  font-size: 0.9rem;
319
+ color: #8892b0;
320
  }
321
 
322
+ .error-message {
323
  display: none;
324
+ background: rgba(220, 53, 69, 0.1);
325
+ border: 1px solid rgba(220, 53, 69, 0.3);
 
 
 
 
326
  border-radius: 10px;
327
+ padding: 15px 20px;
328
+ margin-bottom: 20px;
329
+ color: #dc3545;
 
 
 
 
 
 
 
 
330
  }
331
 
332
+ .success-message {
333
  display: none;
334
+ background: rgba(40, 167, 69, 0.1);
335
+ border: 1px solid rgba(40, 167, 69, 0.3);
336
+ border-radius: 10px;
337
+ padding: 15px 20px;
338
+ margin-bottom: 20px;
339
+ color: #28a745;
 
340
  }
341
 
342
  @keyframes pulse {
 
355
  opacity: 1;
356
  }
357
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
358
  </style>
359
  </head>
360
 
361
  <body>
362
+ <a href="/" class="back-button">
363
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
364
+ <path d="M19 12H5M12 19l-7-7 7-7" />
365
+ </svg>
366
+ Back to Tools
367
+ </a>
368
+
369
  <div class="container">
370
  <div class="header">
371
+ <div class="logo">✂️</div>
372
+ <h1>Remove Background</h1>
373
+ <p class="subtitle">Remove image backgrounds automatically with AI</p>
 
 
 
 
 
 
 
374
  </div>
375
 
376
+ <div class="tool-card">
 
 
 
377
  <div class="info-box">
378
+ <span>ℹ️</span>
379
+ <p>Upload images to automatically remove their backgrounds. Output will be transparent PNG.</p>
 
380
  </div>
381
 
382
+ <div id="error-message" class="error-message"></div>
383
+ <div id="success-message" class="success-message"></div>
384
+
385
  <div class="upload-section" id="upload-section">
386
+ <div class="upload-icon">📤</div>
387
+ <p class="upload-text">Drop images here or click to browse</p>
388
+ <p class="upload-hint">Supports JPG, PNG, WebP, BMP, TIFF</p>
389
+ <input type="file" id="file-input" accept="image/*" multiple>
 
 
 
 
390
  </div>
391
 
392
  <div class="files-preview" id="files-preview" style="display: none;">
393
+ <h3 class="preview-title">📋 Selected Files</h3>
394
+ <div class="files-grid" id="files-grid"></div>
 
 
 
 
395
  </div>
396
 
397
  <div class="progress-section" id="progress-section">
 
 
 
398
  <div class="progress-bar-container">
399
  <div class="progress-bar" id="progress-bar"></div>
400
  </div>
401
+ <p class="progress-text" id="progress-text">0% complete</p>
402
  </div>
403
 
404
  <div class="action-buttons">
405
+ <button class="btn btn-primary" id="process-button" disabled>
406
  ✂️ Remove Background
407
  </button>
408
+ <button class="btn btn-secondary" id="clear-button">
409
  🗑️ Clear All
410
  </button>
411
+ <button class="btn btn-success" id="download-button">
412
  💾 Download All
413
  </button>
414
  </div>
 
420
  return '/image/remove_background';
421
  }
422
  </script>
 
 
 
 
 
 
 
423
  </body>
424
 
425
  </html>
image/remove_metadata.html CHANGED
@@ -14,270 +14,217 @@
14
  }
15
 
16
  body {
17
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
18
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
  min-height: 100vh;
20
- padding: 20px;
21
  }
22
 
23
  .container {
24
  max-width: 1000px;
25
  margin: 0 auto;
26
- background: white;
27
- border-radius: 20px;
28
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
29
- overflow: hidden;
30
  }
31
 
32
  .header {
33
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
34
- color: white;
35
- padding: 40px 30px;
36
  text-align: center;
37
- position: relative;
38
  }
39
 
40
  .back-button {
41
  position: absolute;
42
- left: 30px;
43
- top: 50%;
44
- transform: translateY(-50%);
45
- background: rgba(255, 255, 255, 0.2);
46
- color: white;
47
- border: none;
48
- padding: 12px 20px;
49
- border-radius: 50px;
50
- cursor: pointer;
51
- font-size: 1rem;
52
- transition: all 0.3s ease;
53
- text-decoration: none;
54
- display: flex;
55
  align-items: center;
56
  gap: 8px;
 
 
 
 
 
 
 
 
57
  }
58
 
59
  .back-button:hover {
60
- background: rgba(255, 255, 255, 0.3);
61
- transform: translateY(-50%) translateX(-2px);
62
  }
63
 
64
- .header-content {
65
- display: flex;
66
- align-items: center;
67
- justify-content: center;
68
- gap: 20px;
69
- margin-bottom: 20px;
70
  }
71
 
72
- .header-text h1 {
 
 
 
 
 
73
  font-size: 2.5rem;
 
 
 
 
74
  margin-bottom: 10px;
75
- font-weight: 300;
76
  }
77
 
78
- .header-text p {
 
79
  font-size: 1.1rem;
80
- opacity: 0.9;
81
  }
82
 
83
- .content {
 
 
84
  padding: 40px;
 
 
85
  }
86
 
87
  .upload-section {
88
- background: #f8f9fa;
89
  border-radius: 15px;
90
- padding: 40px;
91
  text-align: center;
92
- margin-bottom: 30px;
93
- border: 2px dashed #dee2e6;
94
- transition: all 0.3s ease;
95
  cursor: pointer;
 
 
96
  }
97
 
98
  .upload-section:hover {
99
- border-color: #667eea;
100
- background: #f0f4ff;
101
  }
102
 
103
  .upload-section.dragover {
104
- border-color: #667eea;
105
- background: #e8f2ff;
106
  transform: scale(1.02);
107
  }
108
 
109
  .upload-icon {
110
- font-size: 4rem;
111
- color: #667eea;
112
- margin-bottom: 20px;
113
- display: block;
114
  }
115
 
116
- .upload-text h3 {
117
- color: #495057;
118
  margin-bottom: 10px;
119
- font-size: 1.5rem;
120
- }
121
-
122
- .upload-text p {
123
- color: #6c757d;
124
- margin-bottom: 20px;
125
  }
126
 
127
- .upload-button {
128
- background: linear-gradient(135deg, #667eea, #764ba2);
129
- color: white;
130
- border: none;
131
- padding: 15px 30px;
132
- border-radius: 50px;
133
- font-size: 1.1rem;
134
- cursor: pointer;
135
- transition: all 0.3s ease;
136
- box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
137
- }
138
-
139
- .upload-button:hover {
140
- transform: translateY(-2px);
141
- box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
142
  }
143
 
144
- .file-input {
145
  display: none;
146
  }
147
 
148
- .settings-section {
149
- background: white;
150
- border-radius: 15px;
151
- padding: 30px;
 
152
  margin-bottom: 30px;
153
- border: 1px solid #e9ecef;
154
- }
155
-
156
- .settings-title {
157
- color: #495057;
158
- font-size: 1.3rem;
159
- margin-bottom: 20px;
160
  display: flex;
161
  align-items: center;
162
- gap: 10px;
163
- }
164
-
165
- .settings-grid {
166
- display: grid;
167
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
168
- gap: 20px;
169
- }
170
-
171
- .setting-group {
172
- display: flex;
173
- flex-direction: column;
174
- gap: 8px;
175
- }
176
-
177
- .setting-label {
178
- color: #495057;
179
- font-weight: 500;
180
- font-size: 0.95rem;
181
- }
182
-
183
- .setting-input {
184
- padding: 12px 15px;
185
- border: 2px solid #e9ecef;
186
- border-radius: 10px;
187
- font-size: 1rem;
188
- transition: all 0.3s ease;
189
  }
190
 
191
- select.setting-input {
192
- padding-right: 40px;
193
- background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667eea' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 15px center;
194
- -webkit-appearance: none;
195
- -moz-appearance: none;
196
- appearance: none;
197
- cursor: pointer;
198
  }
199
 
200
- .setting-input:focus {
201
- outline: none;
202
- border-color: #667eea;
203
- box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
204
  }
205
 
206
  .files-preview {
207
- margin-top: 30px;
208
  }
209
 
210
  .preview-title {
211
- color: #495057;
212
- font-size: 1.3rem;
213
- margin-bottom: 20px;
214
- display: flex;
215
- align-items: center;
216
- gap: 10px;
217
  }
218
 
219
  .files-grid {
220
  display: grid;
221
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
222
- gap: 20px;
223
  }
224
 
225
  .file-card {
226
- background: white;
227
- border-radius: 12px;
228
- padding: 20px;
229
- border: 1px solid #e9ecef;
230
- transition: all 0.3s ease;
231
  position: relative;
232
  }
233
 
234
- .file-card:hover {
235
- transform: translateY(-2px);
236
- box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
 
 
 
 
 
 
 
 
 
 
 
 
 
237
  }
238
 
239
  .file-preview {
240
  width: 100%;
241
- height: 120px;
242
- background: #f8f9fa;
243
  border-radius: 8px;
 
 
 
244
  display: flex;
245
  align-items: center;
246
  justify-content: center;
247
- margin-bottom: 15px;
248
- overflow: hidden;
249
  }
250
 
251
  .file-preview img {
252
  max-width: 100%;
253
  max-height: 100%;
254
- object-fit: cover;
255
- border-radius: 8px;
256
- }
257
-
258
- .file-icon {
259
- font-size: 2rem;
260
- color: #667eea;
261
  }
262
 
263
  .file-info h4 {
264
- color: #495057;
265
- font-size: 0.9rem;
 
 
266
  margin-bottom: 5px;
267
- word-break: break-all;
268
  }
269
 
270
  .file-info p {
271
- color: #6c757d;
272
- font-size: 0.8rem;
273
- margin-bottom: 10px;
274
  }
275
 
276
  .file-status {
277
  display: flex;
278
  align-items: center;
279
- gap: 8px;
280
- margin-bottom: 10px;
 
281
  }
282
 
283
  .status-indicator {
@@ -289,189 +236,136 @@
289
 
290
  .status-indicator.processing {
291
  background: #ffc107;
292
- animation: pulse 2s infinite;
293
  }
294
 
295
  .status-indicator.error {
296
  background: #dc3545;
297
  }
298
 
299
- .remove-button {
300
- position: absolute;
301
- top: 10px;
302
- right: 10px;
303
- background: #dc3545;
304
- color: white;
305
- border: none;
306
- width: 24px;
307
- height: 24px;
308
- border-radius: 50%;
309
- cursor: pointer;
310
- font-size: 0.8rem;
311
- display: flex;
312
- align-items: center;
313
- justify-content: center;
314
- transition: all 0.3s ease;
315
- }
316
-
317
- .remove-button:hover {
318
- background: #c82333;
319
- transform: scale(1.1);
320
- }
321
-
322
- .progress-section {
323
- margin-top: 30px;
324
- display: none;
325
- }
326
-
327
- .progress-title {
328
- color: #495057;
329
- font-size: 1.2rem;
330
- margin-bottom: 15px;
331
- display: flex;
332
- align-items: center;
333
- gap: 10px;
334
- }
335
-
336
- .progress-bar-container {
337
- background: #e9ecef;
338
- border-radius: 10px;
339
- height: 12px;
340
- overflow: hidden;
341
- margin-bottom: 10px;
342
- }
343
-
344
- .progress-bar {
345
- background: linear-gradient(135deg, #28a745, #20c997);
346
- height: 100%;
347
- width: 0%;
348
- transition: width 0.3s ease;
349
- border-radius: 10px;
350
- }
351
-
352
- .progress-text {
353
- color: #6c757d;
354
- font-size: 0.9rem;
355
- text-align: center;
356
- }
357
-
358
  .action-buttons {
359
  display: flex;
360
  gap: 15px;
 
361
  justify-content: center;
362
- margin-top: 30px;
363
  }
364
 
365
- .action-button {
366
  padding: 15px 30px;
 
367
  border: none;
368
- border-radius: 50px;
369
- font-size: 1.1rem;
370
  cursor: pointer;
371
  transition: all 0.3s ease;
372
- display: flex;
373
  align-items: center;
374
- gap: 10px;
375
- min-width: 150px;
376
- justify-content: center;
377
  }
378
 
379
- .process-button {
380
- background: linear-gradient(135deg, #dc3545, #c82333);
381
  color: white;
382
- box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
383
  }
384
 
385
- .process-button:hover:not(:disabled) {
386
  transform: translateY(-2px);
387
- box-shadow: 0 8px 25px rgba(220, 53, 69, 0.4);
388
  }
389
 
390
- .process-button:disabled {
391
- opacity: 0.6;
392
  cursor: not-allowed;
393
  }
394
 
395
- .clear-button {
396
- background: #6c757d;
397
- color: white;
 
398
  }
399
 
400
- .clear-button:hover {
401
- background: #5a6268;
402
- transform: translateY(-2px);
403
  }
404
 
405
- .download-button {
406
- background: linear-gradient(135deg, #007bff, #0056b3);
407
  color: white;
408
- box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
409
  }
410
 
411
- .download-button:hover {
412
- transform: translateY(-2px);
413
- box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
414
  }
415
 
416
  .error-message {
417
- background: #f8d7da;
418
- color: #721c24;
419
- padding: 15px;
420
  border-radius: 10px;
 
421
  margin-bottom: 20px;
422
- border: 1px solid #f5c6cb;
423
- display: none;
424
  }
425
 
426
  .success-message {
427
- background: #d4edda;
428
- color: #155724;
429
- padding: 15px;
430
- border-radius: 10px;
431
- margin-bottom: 20px;
432
- border: 1px solid #c3e6cb;
433
  display: none;
434
- }
435
-
436
- .info-box {
437
- background: #d1ecf1;
438
- color: #0c5460;
439
- padding: 15px;
440
  border-radius: 10px;
 
441
  margin-bottom: 20px;
442
- border: 1px solid #bee5eb;
443
- }
444
-
445
- .info-box h4 {
446
- margin-bottom: 8px;
447
- font-size: 1rem;
448
- }
449
-
450
- .info-box p {
451
- font-size: 0.9rem;
452
- margin: 0;
453
  }
454
 
 
455
  .metadata-modal {
456
  display: none;
457
  position: fixed;
458
  top: 50%;
459
  left: 50%;
460
  transform: translate(-50%, -50%);
461
- background: white;
462
  padding: 30px;
463
  border-radius: 10px;
464
- box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
465
  z-index: 9999;
466
  max-width: 90%;
467
  max-height: 80%;
468
  overflow: auto;
469
- word-wrap: break-word
 
 
470
  }
471
 
472
  .metadata-content {
473
  white-space: pre-wrap;
474
  margin-top: 15px;
 
 
 
 
475
  }
476
 
477
  .modal-backdrop {
@@ -481,7 +375,7 @@
481
  left: 0;
482
  width: 100%;
483
  height: 100%;
484
- background: rgba(0, 0, 0, 0.5);
485
  z-index: 9998;
486
  }
487
 
@@ -501,99 +395,61 @@
501
  opacity: 1;
502
  }
503
  }
504
-
505
- @media (max-width: 768px) {
506
- .header-content {
507
- flex-direction: column;
508
- gap: 15px;
509
- }
510
-
511
- .header-text h1 {
512
- font-size: 2rem;
513
- }
514
-
515
- .back-button {
516
- position: static;
517
- transform: none;
518
- margin-bottom: 20px;
519
- align-self: flex-start;
520
- }
521
-
522
- .content {
523
- padding: 20px;
524
- }
525
-
526
- .action-buttons {
527
- flex-direction: column;
528
- align-items: center;
529
- }
530
- }
531
  </style>
532
  </head>
533
 
534
  <body>
 
 
 
 
 
 
 
535
  <div class="container">
536
  <div class="header">
537
- <a href="/" class="back-button">
538
- <span style="line-height: 1;">←</span>
539
- </a>
540
-
541
- <div class="header-content">
542
- <div class="header-text">
543
- <h1>Remove Metadata</h1>
544
- <p>Strip EXIF data and metadata from your images for privacy</p>
545
- </div>
546
- </div>
547
  </div>
548
 
549
- <div class="content">
550
- <div class="error-message" id="error-message"></div>
551
- <div class="success-message" id="success-message"></div>
552
-
553
  <div class="info-box">
554
- <h4>🔒 Privacy Protection</h4>
555
  <p>This tool removes metadata including GPS location, camera settings, timestamps, and other sensitive
556
  information from your images while preserving image quality.</p>
557
  </div>
558
 
 
 
 
559
  <div class="upload-section" id="upload-section">
560
- <span class="upload-icon">🔒</span>
561
- <div class="upload-text">
562
- <h3>Drop your images here</h3>
563
- <button class="upload-button">
564
- Choose Files
565
- </button>
566
- </div>
567
- <input type="file" id="file-input" class="file-input" multiple accept="image/*">
568
  </div>
569
 
570
  <div class="files-preview" id="files-preview" style="display: none;">
571
- <h3 class="preview-title">
572
- 📋 Selected Files
573
- </h3>
574
- <div class="files-grid" id="files-grid">
575
- <!-- File cards will be inserted here -->
576
- </div>
577
  </div>
578
 
579
  <div class="progress-section" id="progress-section">
580
- <h3 class="progress-title">
581
- 🔄 Processing Images...
582
- </h3>
583
  <div class="progress-bar-container">
584
  <div class="progress-bar" id="progress-bar"></div>
585
  </div>
586
- <div class="progress-text" id="progress-text">0% complete</div>
587
  </div>
588
 
589
  <div class="action-buttons">
590
- <button class="action-button process-button" id="process-button" disabled>
591
  🔒 Remove Metadata
592
  </button>
593
- <button class="action-button clear-button" id="clear-button">
594
  🗑️ Clear All
595
  </button>
596
- <button class="action-button download-button" id="download-button" style="display: none;">
597
  💾 Download All
598
  </button>
599
  </div>
@@ -605,8 +461,10 @@
605
  return '/image/remove_metadata';
606
  }
607
  </script>
 
608
  <div id="metadata-modal" class="metadata-modal">
609
- <button onclick="closeMetadataModal()" class="remove-button">×</button>
 
610
  <h3>Removed Metadata</h3>
611
  <pre id="metadata-content" class="metadata-content"></pre>
612
  </div>
 
14
  }
15
 
16
  body {
17
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
18
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
19
  min-height: 100vh;
20
+ color: #e4e4e4;
21
  }
22
 
23
  .container {
24
  max-width: 1000px;
25
  margin: 0 auto;
26
+ padding: 40px 20px;
 
 
 
27
  }
28
 
29
  .header {
 
 
 
30
  text-align: center;
31
+ margin-bottom: 40px;
32
  }
33
 
34
  .back-button {
35
  position: absolute;
36
+ left: 20px;
37
+ top: 20px;
38
+ display: inline-flex;
 
 
 
 
 
 
 
 
 
 
39
  align-items: center;
40
  gap: 8px;
41
+ padding: 12px 20px;
42
+ background: rgba(255, 255, 255, 0.1);
43
+ border: 1px solid rgba(255, 255, 255, 0.2);
44
+ border-radius: 8px;
45
+ color: #e4e4e4;
46
+ text-decoration: none;
47
+ font-size: 0.9rem;
48
+ transition: all 0.3s ease;
49
  }
50
 
51
  .back-button:hover {
52
+ background: rgba(255, 255, 255, 0.2);
53
+ transform: translateX(-5px);
54
  }
55
 
56
+ .back-button svg {
57
+ width: 16px;
58
+ height: 16px;
59
+ flex-shrink: 0;
 
 
60
  }
61
 
62
+ .logo {
63
+ font-size: 4rem;
64
+ margin-bottom: 15px;
65
+ }
66
+
67
+ h1 {
68
  font-size: 2.5rem;
69
+ background: linear-gradient(135deg, #e94560, #f39c12);
70
+ -webkit-background-clip: text;
71
+ -webkit-text-fill-color: transparent;
72
+ background-clip: text;
73
  margin-bottom: 10px;
 
74
  }
75
 
76
+ .subtitle {
77
+ color: #8892b0;
78
  font-size: 1.1rem;
 
79
  }
80
 
81
+ .tool-card {
82
+ background: rgba(255, 255, 255, 0.05);
83
+ border-radius: 20px;
84
  padding: 40px;
85
+ backdrop-filter: blur(10px);
86
+ border: 1px solid rgba(255, 255, 255, 0.1);
87
  }
88
 
89
  .upload-section {
90
+ border: 2px dashed rgba(233, 69, 96, 0.5);
91
  border-radius: 15px;
92
+ padding: 60px 40px;
93
  text-align: center;
 
 
 
94
  cursor: pointer;
95
+ transition: all 0.3s ease;
96
+ margin-bottom: 30px;
97
  }
98
 
99
  .upload-section:hover {
100
+ border-color: #e94560;
101
+ background: rgba(233, 69, 96, 0.1);
102
  }
103
 
104
  .upload-section.dragover {
105
+ border-color: #e94560;
106
+ background: rgba(233, 69, 96, 0.15);
107
  transform: scale(1.02);
108
  }
109
 
110
  .upload-icon {
111
+ font-size: 3rem;
112
+ margin-bottom: 15px;
 
 
113
  }
114
 
115
+ .upload-text {
116
+ font-size: 1.2rem;
117
  margin-bottom: 10px;
 
 
 
 
 
 
118
  }
119
 
120
+ .upload-hint {
121
+ color: #8892b0;
122
+ font-size: 0.9rem;
 
 
 
 
 
 
 
 
 
 
 
 
123
  }
124
 
125
+ #file-input {
126
  display: none;
127
  }
128
 
129
+ .info-box {
130
+ background: rgba(23, 162, 184, 0.1);
131
+ border: 1px solid rgba(23, 162, 184, 0.3);
132
+ border-radius: 10px;
133
+ padding: 15px 20px;
134
  margin-bottom: 30px;
 
 
 
 
 
 
 
135
  display: flex;
136
  align-items: center;
137
+ gap: 12px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
138
  }
139
 
140
+ .info-box span {
141
+ font-size: 1.3rem;
 
 
 
 
 
142
  }
143
 
144
+ .info-box p {
145
+ font-size: 0.9rem;
146
+ margin: 0;
 
147
  }
148
 
149
  .files-preview {
150
+ margin-bottom: 30px;
151
  }
152
 
153
  .preview-title {
154
+ font-size: 1.1rem;
155
+ margin-bottom: 15px;
156
+ color: #e4e4e4;
 
 
 
157
  }
158
 
159
  .files-grid {
160
  display: grid;
161
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
162
+ gap: 15px;
163
  }
164
 
165
  .file-card {
166
+ background: rgba(255, 255, 255, 0.05);
167
+ border-radius: 10px;
168
+ padding: 15px;
169
+ text-align: center;
 
170
  position: relative;
171
  }
172
 
173
+ .file-card .remove-button {
174
+ position: absolute;
175
+ top: 5px;
176
+ right: 5px;
177
+ width: 24px;
178
+ height: 24px;
179
+ border-radius: 50%;
180
+ border: none;
181
+ background: #dc3545;
182
+ color: white;
183
+ cursor: pointer;
184
+ font-size: 14px;
185
+ display: flex;
186
+ align-items: center;
187
+ justify-content: center;
188
+ z-index: 10;
189
  }
190
 
191
  .file-preview {
192
  width: 100%;
193
+ height: 100px;
 
194
  border-radius: 8px;
195
+ overflow: hidden;
196
+ margin-bottom: 10px;
197
+ background: rgba(0, 0, 0, 0.2);
198
  display: flex;
199
  align-items: center;
200
  justify-content: center;
 
 
201
  }
202
 
203
  .file-preview img {
204
  max-width: 100%;
205
  max-height: 100%;
206
+ object-fit: contain;
 
 
 
 
 
 
207
  }
208
 
209
  .file-info h4 {
210
+ font-size: 0.8rem;
211
+ white-space: nowrap;
212
+ overflow: hidden;
213
+ text-overflow: ellipsis;
214
  margin-bottom: 5px;
 
215
  }
216
 
217
  .file-info p {
218
+ font-size: 0.7rem;
219
+ color: #8892b0;
 
220
  }
221
 
222
  .file-status {
223
  display: flex;
224
  align-items: center;
225
+ justify-content: center;
226
+ gap: 5px;
227
+ margin-top: 8px;
228
  }
229
 
230
  .status-indicator {
 
236
 
237
  .status-indicator.processing {
238
  background: #ffc107;
239
+ animation: pulse 1s infinite;
240
  }
241
 
242
  .status-indicator.error {
243
  background: #dc3545;
244
  }
245
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
246
  .action-buttons {
247
  display: flex;
248
  gap: 15px;
249
+ flex-wrap: wrap;
250
  justify-content: center;
 
251
  }
252
 
253
+ .btn {
254
  padding: 15px 30px;
255
+ border-radius: 10px;
256
  border: none;
257
+ font-size: 1rem;
258
+ font-weight: 600;
259
  cursor: pointer;
260
  transition: all 0.3s ease;
261
+ display: inline-flex;
262
  align-items: center;
263
+ gap: 8px;
 
 
264
  }
265
 
266
+ .btn-primary {
267
+ background: linear-gradient(135deg, #e94560, #f39c12);
268
  color: white;
 
269
  }
270
 
271
+ .btn-primary:hover:not(:disabled) {
272
  transform: translateY(-2px);
273
+ box-shadow: 0 5px 20px rgba(233, 69, 96, 0.4);
274
  }
275
 
276
+ .btn-primary:disabled {
277
+ opacity: 0.5;
278
  cursor: not-allowed;
279
  }
280
 
281
+ .btn-secondary {
282
+ background: rgba(255, 255, 255, 0.1);
283
+ color: #e4e4e4;
284
+ border: 1px solid rgba(255, 255, 255, 0.2);
285
  }
286
 
287
+ .btn-secondary:hover {
288
+ background: rgba(255, 255, 255, 0.2);
 
289
  }
290
 
291
+ .btn-success {
292
+ background: linear-gradient(135deg, #28a745, #20c997);
293
  color: white;
294
+ display: none;
295
  }
296
 
297
+ .progress-section {
298
+ display: none;
299
+ margin-bottom: 20px;
300
+ }
301
+
302
+ .progress-bar-container {
303
+ height: 8px;
304
+ background: rgba(255, 255, 255, 0.1);
305
+ border-radius: 4px;
306
+ overflow: hidden;
307
+ margin-bottom: 10px;
308
+ }
309
+
310
+ .progress-bar {
311
+ height: 100%;
312
+ background: linear-gradient(135deg, #e94560, #f39c12);
313
+ width: 0%;
314
+ transition: width 0.3s ease;
315
+ }
316
+
317
+ .progress-text {
318
+ font-size: 0.9rem;
319
+ color: #8892b0;
320
  }
321
 
322
  .error-message {
323
+ display: none;
324
+ background: rgba(220, 53, 69, 0.1);
325
+ border: 1px solid rgba(220, 53, 69, 0.3);
326
  border-radius: 10px;
327
+ padding: 15px 20px;
328
  margin-bottom: 20px;
329
+ color: #dc3545;
 
330
  }
331
 
332
  .success-message {
 
 
 
 
 
 
333
  display: none;
334
+ background: rgba(40, 167, 69, 0.1);
335
+ border: 1px solid rgba(40, 167, 69, 0.3);
 
 
 
 
336
  border-radius: 10px;
337
+ padding: 15px 20px;
338
  margin-bottom: 20px;
339
+ color: #28a745;
 
 
 
 
 
 
 
 
 
 
340
  }
341
 
342
+ /* Modal Styles */
343
  .metadata-modal {
344
  display: none;
345
  position: fixed;
346
  top: 50%;
347
  left: 50%;
348
  transform: translate(-50%, -50%);
349
+ background: #16213e;
350
  padding: 30px;
351
  border-radius: 10px;
352
+ box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
353
  z-index: 9999;
354
  max-width: 90%;
355
  max-height: 80%;
356
  overflow: auto;
357
+ word-wrap: break-word;
358
+ border: 1px solid rgba(255, 255, 255, 0.1);
359
+ color: #e4e4e4;
360
  }
361
 
362
  .metadata-content {
363
  white-space: pre-wrap;
364
  margin-top: 15px;
365
+ font-family: monospace;
366
+ background: rgba(0, 0, 0, 0.2);
367
+ padding: 15px;
368
+ border-radius: 5px;
369
  }
370
 
371
  .modal-backdrop {
 
375
  left: 0;
376
  width: 100%;
377
  height: 100%;
378
+ background: rgba(0, 0, 0, 0.8);
379
  z-index: 9998;
380
  }
381
 
 
395
  opacity: 1;
396
  }
397
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
398
  </style>
399
  </head>
400
 
401
  <body>
402
+ <a href="/" class="back-button">
403
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
404
+ <path d="M19 12H5M12 19l-7-7 7-7" />
405
+ </svg>
406
+ Back to Tools
407
+ </a>
408
+
409
  <div class="container">
410
  <div class="header">
411
+ <div class="logo">🔒</div>
412
+ <h1>Remove Metadata</h1>
413
+ <p class="subtitle">Strip EXIF data and metadata from your images for privacy</p>
 
 
 
 
 
 
 
414
  </div>
415
 
416
+ <div class="tool-card">
 
 
 
417
  <div class="info-box">
418
+ <span>ℹ️</span>
419
  <p>This tool removes metadata including GPS location, camera settings, timestamps, and other sensitive
420
  information from your images while preserving image quality.</p>
421
  </div>
422
 
423
+ <div id="error-message" class="error-message"></div>
424
+ <div id="success-message" class="success-message"></div>
425
+
426
  <div class="upload-section" id="upload-section">
427
+ <div class="upload-icon">📤</div>
428
+ <p class="upload-text">Drop images here or click to browse</p>
429
+ <p class="upload-hint">Supports JPG, PNG, WebP, HEIC, TIFF</p>
430
+ <input type="file" id="file-input" accept="image/*,.heic" multiple>
 
 
 
 
431
  </div>
432
 
433
  <div class="files-preview" id="files-preview" style="display: none;">
434
+ <h3 class="preview-title">📋 Selected Files</h3>
435
+ <div class="files-grid" id="files-grid"></div>
 
 
 
 
436
  </div>
437
 
438
  <div class="progress-section" id="progress-section">
 
 
 
439
  <div class="progress-bar-container">
440
  <div class="progress-bar" id="progress-bar"></div>
441
  </div>
442
+ <p class="progress-text" id="progress-text">0% complete</p>
443
  </div>
444
 
445
  <div class="action-buttons">
446
+ <button class="btn btn-primary" id="process-button" disabled>
447
  🔒 Remove Metadata
448
  </button>
449
+ <button class="btn btn-secondary" id="clear-button">
450
  🗑️ Clear All
451
  </button>
452
+ <button class="btn btn-success" id="download-button">
453
  💾 Download All
454
  </button>
455
  </div>
 
461
  return '/image/remove_metadata';
462
  }
463
  </script>
464
+
465
  <div id="metadata-modal" class="metadata-modal">
466
+ <button onclick="closeMetadataModal()" class="remove-button"
467
+ style="position: absolute; top: 10px; right: 10px;">×</button>
468
  <h3>Removed Metadata</h3>
469
  <pre id="metadata-content" class="metadata-content"></pre>
470
  </div>
index.html CHANGED
@@ -13,42 +13,42 @@
13
  }
14
 
15
  body {
16
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
17
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
18
  min-height: 100vh;
 
19
  padding: 20px;
20
  }
21
 
22
  .container {
23
  max-width: 1200px;
24
  margin: 0 auto;
25
- background: white;
26
- border-radius: 20px;
27
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
28
- overflow: hidden;
29
  }
30
 
31
  .header {
32
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
33
- color: white;
34
- padding: 40px 30px;
35
  text-align: center;
 
 
36
  }
37
 
38
  .header h1 {
39
- font-size: 3rem;
40
  margin-bottom: 15px;
41
- font-weight: 300;
 
 
 
 
42
  }
43
 
44
  .header p {
45
  font-size: 1.2rem;
46
- opacity: 0.9;
47
- margin-bottom: 30px;
48
  }
49
 
50
  .search-container {
51
- max-width: 500px;
52
  margin: 0 auto;
53
  position: relative;
54
  margin-bottom: 20px;
@@ -56,28 +56,34 @@
56
 
57
  .search-box {
58
  width: 100%;
59
- padding: 15px 50px 15px 20px;
60
- border: none;
61
  border-radius: 50px;
62
  font-size: 1.1rem;
63
- background: rgba(255, 255, 255, 0.9);
64
  backdrop-filter: blur(10px);
 
65
  transition: all 0.3s ease;
66
  }
67
 
 
 
 
 
68
  .search-box:focus {
69
  outline: none;
70
- background: white;
71
- box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
 
72
  }
73
 
74
  .search-icon {
75
  position: absolute;
76
- right: 20px;
77
  top: 50%;
78
  transform: translateY(-50%);
79
  font-size: 1.2rem;
80
- color: #667eea;
81
  }
82
 
83
  .filter-container {
@@ -88,12 +94,12 @@
88
  .category-dropdown {
89
  width: 100%;
90
  padding: 12px 40px 12px 20px;
91
- border: none;
92
  border-radius: 50px;
93
  font-size: 1rem;
94
- background: rgba(255, 255, 255, 0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667eea' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 16px center;
95
  backdrop-filter: blur(10px);
96
- color: #495057;
97
  cursor: pointer;
98
  transition: all 0.3s ease;
99
  -webkit-appearance: none;
@@ -103,38 +109,27 @@
103
 
104
  .category-dropdown:focus {
105
  outline: none;
106
- background-color: white;
107
- box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
108
- }
109
-
110
- .external-link-icon {
111
- position: absolute;
112
- top: 15px;
113
- right: 15px;
114
- font-size: 1rem;
115
- opacity: 0.6;
116
- }
117
-
118
- .feature-card.external:hover .external-link-icon {
119
- opacity: 1;
120
  }
121
 
122
- .content {
123
- padding: 40px;
 
124
  }
125
 
126
  .features-grid {
127
  display: grid;
128
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
129
  gap: 25px;
130
- margin-top: 30px;
131
  }
132
 
133
  .feature-card {
134
- background: white;
135
- border-radius: 15px;
136
  padding: 30px;
137
- border: 1px solid #e9ecef;
138
  transition: all 0.3s ease;
139
  cursor: pointer;
140
  text-decoration: none;
@@ -142,6 +137,7 @@
142
  display: block;
143
  position: relative;
144
  overflow: hidden;
 
145
  }
146
 
147
  .feature-card::before {
@@ -150,15 +146,18 @@
150
  top: 0;
151
  left: 0;
152
  right: 0;
153
- height: 4px;
154
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
155
  transform: scaleX(0);
156
  transition: transform 0.3s ease;
 
157
  }
158
 
159
  .feature-card:hover {
160
  transform: translateY(-5px);
161
- box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
 
 
162
  }
163
 
164
  .feature-card:hover::before {
@@ -170,11 +169,6 @@
170
  cursor: not-allowed;
171
  }
172
 
173
- .feature-card.coming-soon:hover {
174
- transform: none;
175
- box-shadow: none;
176
- }
177
-
178
  .feature-header {
179
  display: flex;
180
  align-items: center;
@@ -189,20 +183,31 @@
189
  display: flex;
190
  align-items: center;
191
  justify-content: center;
192
- background: linear-gradient(135deg, #667eea15, #764ba215);
193
- border-radius: 12px;
 
194
  }
195
 
196
  .feature-card h3 {
197
- color: #495057;
198
- font-size: 1.4rem;
199
  font-weight: 600;
200
  }
201
 
 
 
 
 
 
 
 
 
 
202
  .feature-card p {
203
- color: #6c757d;
204
  margin-bottom: 20px;
205
  line-height: 1.6;
 
206
  }
207
 
208
  .feature-status {
@@ -210,84 +215,64 @@
210
  align-items: center;
211
  gap: 10px;
212
  margin-bottom: 15px;
 
 
213
  }
214
 
215
  .status-indicator {
216
- width: 12px;
217
- height: 12px;
218
  border-radius: 50%;
219
  background: #28a745;
220
- }
221
-
222
- .status-indicator.busy {
223
- background: #ffc107;
224
- animation: pulse 2s infinite;
225
  }
226
 
227
  .status-indicator.coming-soon {
228
  background: #6c757d;
229
- }
230
-
231
- @keyframes pulse {
232
- 0% {
233
- transform: scale(1);
234
- opacity: 1;
235
- }
236
-
237
- 50% {
238
- transform: scale(1.2);
239
- opacity: 0.7;
240
- }
241
-
242
- 100% {
243
- transform: scale(1);
244
- opacity: 1;
245
- }
246
  }
247
 
248
  .feature-tags {
249
  display: flex;
250
  flex-wrap: wrap;
251
  gap: 8px;
252
- margin-top: 15px;
253
  }
254
 
255
  .tag {
256
- background: #f8f9fa;
257
- color: #495057;
258
  padding: 4px 12px;
259
  border-radius: 20px;
260
- font-size: 0.8rem;
261
- border: 1px solid #e9ecef;
262
  }
263
 
264
  .coming-soon-badge {
265
  position: absolute;
266
  top: 15px;
267
  right: 15px;
268
- background: #6c757d;
269
- color: white;
270
  padding: 4px 12px;
271
  border-radius: 20px;
272
- font-size: 0.8rem;
273
- font-weight: 500;
274
  }
275
 
276
- .stat-item h4 {
277
- color: #667eea;
278
- font-size: 1.5rem;
279
- margin-bottom: 5px;
280
- }
281
-
282
- .stat-item p {
283
- color: #6c757d;
284
- font-size: 0.9rem;
285
  }
286
 
287
  .no-results {
288
  text-align: center;
289
  padding: 60px 20px;
290
- color: #6c757d;
291
  }
292
 
293
  .no-results .icon {
@@ -296,24 +281,9 @@
296
  opacity: 0.5;
297
  }
298
 
299
- .feature-path {
300
- color: #667eea;
301
- font-size: 0.9rem;
302
- font-weight: 500;
303
- margin-bottom: 5px;
304
- }
305
-
306
  @media (max-width: 768px) {
307
  .header h1 {
308
- font-size: 2rem;
309
- }
310
-
311
- .header p {
312
- font-size: 1rem;
313
- }
314
-
315
- .content {
316
- padding: 20px;
317
  }
318
 
319
  .features-grid {
@@ -423,19 +393,6 @@
423
  expandedFeatures = [];
424
 
425
  Object.entries(allFeatures).forEach(([categoryKey, categoryData]) => {
426
- // Add the main category
427
- // expandedFeatures.push({
428
- // id: categoryKey,
429
- // path: categoryKey,
430
- // name: categoryData.name,
431
- // description: categoryData.description,
432
- // icon: categoryData.icon,
433
- // tags: categoryData.tags || [],
434
- // coming_soon: categoryData.coming_soon || false,
435
- // category: categoryKey,
436
- // type: 'category'
437
- // });
438
-
439
  // Add individual features
440
  if (categoryData.features && categoryData.features.length > 0) {
441
  categoryData.features.forEach(feature => {
@@ -465,7 +422,8 @@
465
  const descriptions = {
466
  'image': {
467
  'convert': 'Convert HEIC images to PNG/JPG format',
468
- 'remove_metadata': 'Remove metadata from image files'
 
469
  },
470
  'pdf': {
471
  'images_to_pdf': 'Convert multiple images into a single PDF'
 
13
  }
14
 
15
  body {
16
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
17
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
18
  min-height: 100vh;
19
+ color: #e4e4e4;
20
  padding: 20px;
21
  }
22
 
23
  .container {
24
  max-width: 1200px;
25
  margin: 0 auto;
 
 
 
 
26
  }
27
 
28
  .header {
 
 
 
29
  text-align: center;
30
+ margin-bottom: 50px;
31
+ padding: 40px 20px;
32
  }
33
 
34
  .header h1 {
35
+ font-size: 3.5rem;
36
  margin-bottom: 15px;
37
+ background: linear-gradient(135deg, #e94560, #f39c12);
38
+ -webkit-background-clip: text;
39
+ -webkit-text-fill-color: transparent;
40
+ background-clip: text;
41
+ font-weight: 700;
42
  }
43
 
44
  .header p {
45
  font-size: 1.2rem;
46
+ color: #8892b0;
47
+ margin-bottom: 40px;
48
  }
49
 
50
  .search-container {
51
+ max-width: 600px;
52
  margin: 0 auto;
53
  position: relative;
54
  margin-bottom: 20px;
 
56
 
57
  .search-box {
58
  width: 100%;
59
+ padding: 18px 50px 18px 25px;
60
+ border: 1px solid rgba(255, 255, 255, 0.1);
61
  border-radius: 50px;
62
  font-size: 1.1rem;
63
+ background: rgba(255, 255, 255, 0.05);
64
  backdrop-filter: blur(10px);
65
+ color: #e4e4e4;
66
  transition: all 0.3s ease;
67
  }
68
 
69
+ .search-box::placeholder {
70
+ color: #8892b0;
71
+ }
72
+
73
  .search-box:focus {
74
  outline: none;
75
+ background: rgba(255, 255, 255, 0.1);
76
+ border-color: #e94560;
77
+ box-shadow: 0 0 20px rgba(233, 69, 96, 0.2);
78
  }
79
 
80
  .search-icon {
81
  position: absolute;
82
+ right: 25px;
83
  top: 50%;
84
  transform: translateY(-50%);
85
  font-size: 1.2rem;
86
+ color: #8892b0;
87
  }
88
 
89
  .filter-container {
 
94
  .category-dropdown {
95
  width: 100%;
96
  padding: 12px 40px 12px 20px;
97
+ border: 1px solid rgba(255, 255, 255, 0.1);
98
  border-radius: 50px;
99
  font-size: 1rem;
100
+ background: rgba(255, 255, 255, 0.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e4e4e4' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 20px center;
101
  backdrop-filter: blur(10px);
102
+ color: #e4e4e4;
103
  cursor: pointer;
104
  transition: all 0.3s ease;
105
  -webkit-appearance: none;
 
109
 
110
  .category-dropdown:focus {
111
  outline: none;
112
+ background-color: rgba(255, 255, 255, 0.1);
113
+ border-color: #e94560;
 
 
 
 
 
 
 
 
 
 
 
 
114
  }
115
 
116
+ .category-dropdown option {
117
+ background: #16213e;
118
+ color: #e4e4e4;
119
  }
120
 
121
  .features-grid {
122
  display: grid;
123
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
124
  gap: 25px;
125
+ padding: 0 20px;
126
  }
127
 
128
  .feature-card {
129
+ background: rgba(255, 255, 255, 0.05);
130
+ border-radius: 20px;
131
  padding: 30px;
132
+ border: 1px solid rgba(255, 255, 255, 0.1);
133
  transition: all 0.3s ease;
134
  cursor: pointer;
135
  text-decoration: none;
 
137
  display: block;
138
  position: relative;
139
  overflow: hidden;
140
+ backdrop-filter: blur(5px);
141
  }
142
 
143
  .feature-card::before {
 
146
  top: 0;
147
  left: 0;
148
  right: 0;
149
+ height: 2px;
150
+ background: linear-gradient(90deg, #e94560, #f39c12);
151
  transform: scaleX(0);
152
  transition: transform 0.3s ease;
153
+ transform-origin: left;
154
  }
155
 
156
  .feature-card:hover {
157
  transform: translateY(-5px);
158
+ background: rgba(255, 255, 255, 0.08);
159
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
160
+ border-color: rgba(255, 255, 255, 0.2);
161
  }
162
 
163
  .feature-card:hover::before {
 
169
  cursor: not-allowed;
170
  }
171
 
 
 
 
 
 
172
  .feature-header {
173
  display: flex;
174
  align-items: center;
 
183
  display: flex;
184
  align-items: center;
185
  justify-content: center;
186
+ background: rgba(255, 255, 255, 0.05);
187
+ border-radius: 15px;
188
+ border: 1px solid rgba(255, 255, 255, 0.1);
189
  }
190
 
191
  .feature-card h3 {
192
+ color: #e4e4e4;
193
+ font-size: 1.3rem;
194
  font-weight: 600;
195
  }
196
 
197
+ .feature-path {
198
+ color: #e94560;
199
+ font-size: 0.8rem;
200
+ font-weight: 500;
201
+ margin-bottom: 10px;
202
+ text-transform: uppercase;
203
+ letter-spacing: 1px;
204
+ }
205
+
206
  .feature-card p {
207
+ color: #8892b0;
208
  margin-bottom: 20px;
209
  line-height: 1.6;
210
+ font-size: 0.95rem;
211
  }
212
 
213
  .feature-status {
 
215
  align-items: center;
216
  gap: 10px;
217
  margin-bottom: 15px;
218
+ font-size: 0.85rem;
219
+ color: #8892b0;
220
  }
221
 
222
  .status-indicator {
223
+ width: 8px;
224
+ height: 8px;
225
  border-radius: 50%;
226
  background: #28a745;
227
+ box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 
 
 
 
228
  }
229
 
230
  .status-indicator.coming-soon {
231
  background: #6c757d;
232
+ box-shadow: none;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
233
  }
234
 
235
  .feature-tags {
236
  display: flex;
237
  flex-wrap: wrap;
238
  gap: 8px;
239
+ margin-top: auto;
240
  }
241
 
242
  .tag {
243
+ background: rgba(255, 255, 255, 0.05);
244
+ color: #8892b0;
245
  padding: 4px 12px;
246
  border-radius: 20px;
247
+ font-size: 0.75rem;
248
+ border: 1px solid rgba(255, 255, 255, 0.1);
249
  }
250
 
251
  .coming-soon-badge {
252
  position: absolute;
253
  top: 15px;
254
  right: 15px;
255
+ background: rgba(255, 255, 255, 0.1);
256
+ color: #e4e4e4;
257
  padding: 4px 12px;
258
  border-radius: 20px;
259
+ font-size: 0.75rem;
260
+ border: 1px solid rgba(255, 255, 255, 0.1);
261
  }
262
 
263
+ .external-link-icon {
264
+ position: absolute;
265
+ top: 15px;
266
+ right: 15px;
267
+ font-size: 1rem;
268
+ opacity: 0.6;
269
+ color: #e4e4e4;
 
 
270
  }
271
 
272
  .no-results {
273
  text-align: center;
274
  padding: 60px 20px;
275
+ color: #8892b0;
276
  }
277
 
278
  .no-results .icon {
 
281
  opacity: 0.5;
282
  }
283
 
 
 
 
 
 
 
 
284
  @media (max-width: 768px) {
285
  .header h1 {
286
+ font-size: 2.5rem;
 
 
 
 
 
 
 
 
287
  }
288
 
289
  .features-grid {
 
393
  expandedFeatures = [];
394
 
395
  Object.entries(allFeatures).forEach(([categoryKey, categoryData]) => {
 
 
 
 
 
 
 
 
 
 
 
 
 
396
  // Add individual features
397
  if (categoryData.features && categoryData.features.length > 0) {
398
  categoryData.features.forEach(feature => {
 
422
  const descriptions = {
423
  'image': {
424
  'convert': 'Convert HEIC images to PNG/JPG format',
425
+ 'remove_metadata': 'Remove metadata from image files',
426
+ 'remove_background': 'Remove background from images'
427
  },
428
  'pdf': {
429
  'images_to_pdf': 'Convert multiple images into a single PDF'