Hugging Face's logo

Spaces:
NzService
/
convert-any-image-format
Running

App Files Community
NzService commited on
Commit
3cbe03e
·
verified ·
1 Parent(s): b3532f5

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +984 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Convert Any Image Format
3
- emoji: 👁
4
- colorFrom: green
5
- colorTo: yellow
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: convert-any-image-format
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,984 @@
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>PixelConvert Pro - Advanced Image Converter</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
12
+
13
+ :root {
14
+ --primary: #6366f1;
15
+ --primary-dark: #4f46e5;
16
+ --secondary: #f59e0b;
17
+ --dark: #1e293b;
18
+ --light: #f8fafc;
19
+ }
20
+
21
+ body {
22
+ font-family: 'Poppins', sans-serif;
23
+ background: #f1f5f9;
24
+ }
25
+
26
+ .dropzone {
27
+ border: 2px dashed #94a3b8;
28
+ transition: all 0.3s ease;
29
+ }
30
+
31
+ .dropzone.active {
32
+ border-color: var(--primary);
33
+ background-color: rgba(99, 102, 241, 0.05);
34
+ }
35
+
36
+ .file-card {
37
+ transition: all 0.3s ease;
38
+ }
39
+
40
+ .file-card:hover {
41
+ transform: translateY(-2px);
42
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
43
+ }
44
+
45
+ .progress-bar {
46
+ transition: width 0.5s ease;
47
+ }
48
+
49
+ #previewModal {
50
+ transition: opacity 0.3s ease, transform 0.3s ease;
51
+ opacity: 0;
52
+ transform: scale(0.9);
53
+ pointer-events: none;
54
+ }
55
+
56
+ #previewModal.active {
57
+ opacity: 1;
58
+ transform: scale(1);
59
+ pointer-events: auto;
60
+ }
61
+
62
+ .format-option {
63
+ transition: all 0.2s ease;
64
+ }
65
+
66
+ .format-option:hover {
67
+ background-color: #e2e8f0;
68
+ }
69
+
70
+ .tooltip {
71
+ position: relative;
72
+ }
73
+
74
+ .tooltip .tooltip-text {
75
+ visibility: hidden;
76
+ width: 200px;
77
+ background-color: #1e293b;
78
+ color: #fff;
79
+ text-align: center;
80
+ border-radius: 6px;
81
+ padding: 5px;
82
+ position: absolute;
83
+ z-index: 1;
84
+ bottom: 125%;
85
+ left: 50%;
86
+ transform: translateX(-50%);
87
+ opacity: 0;
88
+ transition: opacity 0.3s;
89
+ }
90
+
91
+ .tooltip:hover .tooltip-text {
92
+ visibility: visible;
93
+ opacity: 1;
94
+ }
95
+
96
+ @keyframes pulse {
97
+ 0%, 100% {
98
+ opacity: 1;
99
+ }
100
+ 50% {
101
+ opacity: 0.5;
102
+ }
103
+ }
104
+
105
+ .animate-pulse {
106
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
107
+ }
108
+ </style>
109
+ </head>
110
+ <body class="min-h-screen">
111
+ <div class="bg-indigo-600 text-white">
112
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
113
+ <div class="flex items-center space-x-2">
114
+ <i class="fas fa-image fa-lg"></i>
115
+ <h1 class="text-xl font-bold">PixelConvert Pro</h1>
116
+ </div>
117
+ <div class="flex space-x-4">
118
+ <button class="px-4 py-2 bg-white text-indigo-600 rounded-md font-medium hover:bg-gray-100 transition">Sign In</button>
119
+ <button class="px-4 py-2 bg-indigo-700 rounded-md font-medium hover:bg-indigo-800 transition">Upgrade</button>
120
+ </div>
121
+ </div>
122
+ </div>
123
+
124
+ <div class="container mx-auto px-4 py-8">
125
+ <div class="text-center mb-10">
126
+ <h2 class="text-3xl font-bold text-gray-800 mb-2">Convert Any Image Format</h2>
127
+ <p class="text-gray-600 max-w-2xl mx-auto">Supporting 50+ formats including JPEG, PNG, TIFF, GIF, WEBP, SVG, PSD, AI and more. Secure, fast and easy to use.</p>
128
+ </div>
129
+
130
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
131
+ <div class="p-6">
132
+ <div class="flex items-center mb-6 space-x-4">
133
+ <button id="uploadTab" class="px-4 py-2 bg-indigo-600 text-white rounded-md font-medium transition">Upload Files</button>
134
+ <button id="cloudTab" class="px-4 py-2 text-gray-600 rounded-md font-medium hover:bg-gray-100 transition">Cloud Services</button>
135
+ <button id="urlTab" class="px-4 py-2 text-gray-600 rounded-md font-medium hover:bg-gray-100 transition">From URL</button>
136
+ </div>
137
+
138
+ <!-- Upload Tab Content -->
139
+ <div id="uploadContent" class="block">
140
+ <div id="dropzone" class="dropzone rounded-lg p-12 text-center cursor-pointer">
141
+ <i class="fas fa-cloud-upload-alt text-4xl text-indigo-500 mb-4"></i>
142
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Drag & drop your files here</h3>
143
+ <p class="text-gray-500 mb-4">or click to browse files</p>
144
+ <input type="file" id="fileInput" class="hidden" multiple>
145
+ <button id="browseBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-md font-medium hover:bg-indigo-700 transition">Browse Files</button>
146
+ <p class="text-sm text-gray-500 mt-4">Supports: JPG, PNG, GIF, SVG, PSD, AI, TIFF, WEBP, HEIC, RAW and more</p>
147
+ <p class="text-xs text-gray-400 mt-2">Max file size: 1GB (Upgrade for larger files)</p>
148
+ </div>
149
+ </div>
150
+
151
+ <!-- Cloud Tab Content -->
152
+ <div id="cloudContent" class="hidden">
153
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 p-4">
154
+ <div class="p-4 border rounded-lg text-center cursor-pointer hover:bg-gray-50 transition">
155
+ <i class="fab fa-dropbox text-3xl text-blue-600 mb-2"></i>
156
+ <p class="font-medium">Dropbox</p>
157
+ </div>
158
+ <div class="p-4 border rounded-lg text-center cursor-pointer hover:bg-gray-50 transition">
159
+ <i class="fab fa-google-drive text-3xl text-blue-400 mb-2"></i>
160
+ <p class="font-medium">Google Drive</p>
161
+ </div>
162
+ <div class="p-4 border rounded-lg text-center cursor-pointer hover:bg-gray-50 transition">
163
+ <i class="fas fa-cloud text-3xl text-indigo-500 mb-2"></i>
164
+ <p class="font-medium">OneDrive</p>
165
+ </div>
166
+ <div class="p-4 border rounded-lg text-center cursor-pointer hover:bg-gray-50 transition">
167
+ <i class="fab fa-apple text-3xl text-gray-800 mb-2"></i>
168
+ <p class="font-medium">iCloud</p>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- URL Tab Content -->
174
+ <div id="urlContent" class="hidden">
175
+ <div class="p-4">
176
+ <div class="flex">
177
+ <input type="text" placeholder="Enter image URL (https://example.com/image.jpg)" class="flex-1 px-4 py-2 border rounded-l-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
178
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-r-md font-medium hover:bg-indigo-700 transition">Add</button>
179
+ </div>
180
+ <p class="text-sm text-gray-500 mt-2">Supports direct links to images</p>
181
+ </div>
182
+ </div>
183
+ </div>
184
+
185
+ <div id="fileList" class="border-t px-6 py-4 hidden">
186
+ <div class="flex justify-between items-center mb-4">
187
+ <h3 class="font-medium text-gray-800">Selected Files</h3>
188
+ <div class="flex space-x-2">
189
+ <button id="clearAllBtn" class="px-3 py-1 text-sm text-red-500 hover:bg-red-50 rounded-md transition">Clear All</button>
190
+ <button id="convertAllBtn" class="px-3 py-1 text-sm bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition">Convert All</button>
191
+ </div>
192
+ </div>
193
+ <div id="filesContainer" class="space-y-3">
194
+ <!-- Files will be added here dynamically -->
195
+ </div>
196
+ </div>
197
+ </div>
198
+
199
+ <!-- Conversion Options -->
200
+ <div id="conversionOptions" class="bg-white rounded-xl shadow-lg p-6 mb-8 hidden">
201
+ <h3 class="font-bold text-lg text-gray-800 mb-4">Conversion Settings</h3>
202
+
203
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
204
+ <!-- Format Selection -->
205
+ <div>
206
+ <label class="block text-sm font-medium text-gray-700 mb-1">Output Format</label>
207
+ <div class="relative">
208
+ <button id="formatDropdownBtn" class="w-full px-4 py-2 border rounded-md text-left flex justify-between items-center hover:bg-gray-50 transition">
209
+ <span>Select format</span>
210
+ <i class="fas fa-chevron-down"></i>
211
+ </button>
212
+ <div id="formatDropdown" class="absolute z-10 w-full mt-1 bg-white border rounded-md shadow-lg hidden max-h-96 overflow-y-auto">
213
+ <!-- Format groups -->
214
+ <div class="p-2">
215
+ <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider px-2 py-1">Raster Formats</h4>
216
+ <div class="space-y-1">
217
+ <div class="format-option px-4 py-2 cursor-pointer flex justify-between items-center" data-format="jpg">
218
+ <div>
219
+ <span class="font-medium">JPG</span>
220
+ <span class="text-xs text-gray-500 ml-2">Joint Photographic Experts Group</span>
221
+ </div>
222
+ <span class="text-xs bg-gray-100 px-2 py-1 rounded">Lossy</span>
223
+ </div>
224
+ <div class="format-option px-4 py-2 cursor-pointer flex justify-between items-center" data-format="png">
225
+ <div>
226
+ <span class="font-medium">PNG</span>
227
+ <span class="text-xs text-gray-500 ml-2">Portable Network Graphics</span>
228
+ </div>
229
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Lossless</span>
230
+ </div>
231
+ <div class="format-option px-4 py-2 cursor-pointer flex justify-between items-center" data-format="gif">
232
+ <div>
233
+ <span class="font-medium">GIF</span>
234
+ <span class="text-xs text-gray-500 ml-2">Graphics Interchange Format</span>
235
+ </div>
236
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Lossless</span>
237
+ </div>
238
+ <div class="format-option px-4 py-2 cursor-pointer flex justify-between items-center" data-format="webp">
239
+ <div>
240
+ <span class="font-medium">WEBP</span>
241
+ <span class="text-xs text-gray-500 ml-2">Web Picture Format</span>
242
+ </div>
243
+ <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">Both</span>
244
+ </div>
245
+ <div class="format-option px-4 py-2 cursor-pointer flex justify-between items-center" data-format="tiff">
246
+ <div>
247
+ <span class="font-medium">TIFF</span>
248
+ <span class="text-xs text-gray-500 ml-2">Tagged Image File Format</span>
249
+ </div>
250
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Lossless</span>
251
+ </div>
252
+ <div class="format-option px-4 py-2 cursor-pointer flex justify-between items-center" data-format="bmp">
253
+ <div>
254
+ <span class="font-medium">BMP</span>
255
+ <span class="text-xs text-gray-500 ml-2">Bitmap Image File</span>
256
+ </div>
257
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Lossless</span>
258
+ </div>
259
+ <div class="format-option px-4 py-2 cursor-pointer flex justify-between items-center" data-format="heic">
260
+ <div>
261
+ <span class="font-medium">HEIC</span>
262
+ <span class="text-xs text-gray-500 ml-2">High Efficiency Image Format</span>
263
+ </div>
264
+ <span class="text-xs bg-gray-100 px-2 py-1 rounded">Lossy</span>
265
+ </div>
266
+ </div>
267
+ </div>
268
+
269
+ <div class="border-t p-2">
270
+ <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider px-2 py-1">Vector Formats</h4>
271
+ <div class="space-y-1">
272
+ <div class="format-option px-4 py-2 cursor-pointer flex justify-between items-center" data-format="svg">
273
+ <div>
274
+ <span class="font-medium">SVG</span>
275
+ <span class="text-xs text-gray-500 ml-2">Scalable Vector Graphics</span>
276
+ </div>
277
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Lossless</span>
278
+ </div>
279
+ <div class="format-option px-4 py-2 cursor-pointer flex justify-between items-center" data-format="eps">
280
+ <div>
281
+ <span class="font-medium">EPS</span>
282
+ <span class="text-xs text-gray-500 ml-2">Encapsulated PostScript</span>
283
+ </div>
284
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Lossless</span>
285
+ </div>
286
+ <div class="format-option px-4 py-2 cursor-pointer flex justify-between items-center" data-format="pdf">
287
+ <div>
288
+ <span class="font-medium">PDF</span>
289
+ <span class="text-xs text-gray-500 ml-2">Portable Document Format</span>
290
+ </div>
291
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Vector/Raster</span>
292
+ </div>
293
+ </div>
294
+ </div>
295
+
296
+ <div class="border-t p-2">
297
+ <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider px-2 py-1">Project Files</h4>
298
+ <div class="space-y-1">
299
+ <div class="format-option px-4 py-2 cursor-pointer flex justify-between items-center" data-format="psd">
300
+ <div>
301
+ <span class="font-medium">PSD</span>
302
+ <span class="text-xs text-gray-500 ml-2">Photoshop Document</span>
303
+ </div>
304
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Project</span>
305
+ </div>
306
+ <div class="format-option px-4 py-2 cursor-pointer flex justify-between items-center" data-format="ai">
307
+ <div>
308
+ <span class="font-medium">AI</span>
309
+ <span class="text-xs text-gray-500 ml-2">Adobe Illustrator Artwork</span>
310
+ </div>
311
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Project</span>
312
+ </div>
313
+ <div class="format-option px-4 py-2 cursor-pointer flex justify-between items-center" data-format="xcf">
314
+ <div>
315
+ <span class="font-medium">XCF</span>
316
+ <span class="text-xs text-gray-500 ml-2">GIMP Image File</span>
317
+ </div>
318
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Project</span>
319
+ </div>
320
+ </div>
321
+ </div>
322
+
323
+ <div class="border-t p-2">
324
+ <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider px-2 py-1">Raw Formats</h4>
325
+ <div class="space-y-1">
326
+ <div class="format-option px-4 py-2 cursor-pointer flex justify-between items-center" data-format="cr2">
327
+ <div>
328
+ <span class="font-medium">CR2</span>
329
+ <span class="text-xs text-gray-500 ml-2">Canon Raw Image File</span>
330
+ </div>
331
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">RAW</span>
332
+ </div>
333
+ <div class="format-option px-4 py-2 cursor-pointer flex justify-between items-center" data-format="nef">
334
+ <div>
335
+ <span class="font-medium">NEF</span>
336
+ <span class="text-xs text-gray-500 ml-2">Nikon Electronic Format</span>
337
+ </div>
338
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">RAW</span>
339
+ </div>
340
+ <div class="format-option px-4 py-2 cursor-pointer flex justify-between items-center" data-format="arw">
341
+ <div>
342
+ <span class="font-medium">ARW</span>
343
+ <span class="text-xs text-gray-500 ml-2">Sony Alpha Raw File</span>
344
+ </div>
345
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">RAW</span>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </div>
351
+ <div id="selectedFormat" class="mt-2 text-sm font-medium text-indigo-600 hidden">
352
+ Selected: <span id="formatName"></span>
353
+ </div>
354
+ </div>
355
+
356
+ <!-- Quality Settings -->
357
+ <div class="format-dependent" data-dependent="jpg,webp,heic">
358
+ <label class="block text-sm font-medium text-gray-700 mb-1">Quality</label>
359
+ <div class="flex items-center space-x-4">
360
+ <input type="range" id="qualitySlider" min="1" max="100" value="90" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
361
+ <span id="qualityValue" class="text-sm text-gray-600 w-10 text-center">90%</span>
362
+ </div>
363
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
364
+ <span>Smaller file</span>
365
+ <span>Better quality</span>
366
+ </div>
367
+ </div>
368
+
369
+ <!-- Resize Options -->
370
+ <div>
371
+ <label class="block text-sm font-medium text-gray-700 mb-1">Resize</label>
372
+ <div class="flex space-x-4">
373
+ <div class="flex-1">
374
+ <div class="relative">
375
+ <input type="number" id="widthInput" placeholder="Width" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500">
376
+ <div class="absolute right-3 top-2.5 text-gray-400">
377
+ px
378
+ </div>
379
+ </div>
380
+ </div>
381
+ <div class="flex-1">
382
+ <div class="relative">
383
+ <input type="number" id="heightInput" placeholder="Height" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500">
384
+ <div class="absolute right-3 top-2.5 text-gray-400">
385
+ px
386
+ </div>
387
+ </div>
388
+ </div>
389
+ </div>
390
+ <div class="mt-2 text-xs text-gray-500">Leave blank to maintain aspect ratio</div>
391
+ </div>
392
+ </div>
393
+
394
+ <!-- Advanced Options -->
395
+ <div class="mt-6">
396
+ <div class="flex items-center justify-between cursor-pointer" id="advancedToggle">
397
+ <h4 class="text-sm font-medium text-gray-700">Advanced Options</h4>
398
+ <i class="fas fa-chevron-down text-gray-500 transition-transform transform" id="advancedIcon"></i>
399
+ </div>
400
+
401
+ <div id="advancedOptions" class="hidden mt-4 space-y-4">
402
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
403
+ <!-- Preserve Metadata -->
404
+ <div>
405
+ <label class="block text-sm font-medium text-gray-700 mb-1">Metadata</label>
406
+ <select class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500">
407
+ <option value="keep">Keep all metadata</option>
408
+ <option value="copyright">Keep only copyright</option>
409
+ <option value="remove">Remove all metadata</option>
410
+ </select>
411
+ </div>
412
+
413
+ <!-- Color Profile -->
414
+ <div>
415
+ <label class="block text-sm font-medium text-gray-700 mb-1">Color Profile</label>
416
+ <select class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500">
417
+ <option value="srgb">sRGB (web default)</option>
418
+ <option value="adobe-rgb">Adobe RGB</option>
419
+ <option value="cmyk">CMYK (for print)</option>
420
+ <option value="keep">Keep original</option>
421
+ </select>
422
+ </div>
423
+ </div>
424
+
425
+ <!-- DPI Setting -->
426
+ <div>
427
+ <label class="block text-sm font-medium text-gray-700 mb-1">DPI (Resolution)</label>
428
+ <select class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500">
429
+ <option value="72">72 (web/email)</option>
430
+ <option value="150">150 (medium quality print)</option>
431
+ <option value="300">300 (high quality print)</option>
432
+ <option value="keep">Keep original</option>
433
+ </select>
434
+ </div>
435
+ </div>
436
+ </div>
437
+
438
+ <div class="mt-8 text-center">
439
+ <button id="applySettingsBtn" class="px-6 py-3 bg-indigo-600 text-white rounded-md font-medium hover:bg-indigo-700 transition">Apply Settings & Convert</button>
440
+ </div>
441
+ </div>
442
+
443
+ <!-- Results Section -->
444
+ <div id="resultsSection" class="bg-white rounded-xl shadow-lg p-6 mb-8 hidden">
445
+ <div class="flex justify-between items-center mb-6">
446
+ <h3 class="font-bold text-lg text-gray-800">Conversion Results</h3>
447
+ <button id="downloadAllBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-md font-medium hover:bg-indigo-700 transition flex items-center space-x-2">
448
+ <i class="fas fa-download"></i>
449
+ <span>Download All</span>
450
+ </button>
451
+ </div>
452
+
453
+ <div id="resultsContainer" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
454
+ <!-- Results will be added here dynamically -->
455
+ </div>
456
+ </div>
457
+
458
+ <!-- Security & Features Section -->
459
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
460
+ <div class="bg-white rounded-xl shadow-lg p-6">
461
+ <div class="text-center mb-4">
462
+ <i class="fas fa-shield-alt text-3xl text-indigo-600 mb-3"></i>
463
+ <h3 class="font-bold text-lg text-gray-800 mb-2">Bank-Level Security</h3>
464
+ <p class="text-gray-600">256-bit SSL encryption protects your data during transfer. Files are automatically deleted after 1 hour.</p>
465
+ </div>
466
+ </div>
467
+
468
+ <div class="bg-white rounded-xl shadow-lg p-6">
469
+ <div class="text-center mb-4">
470
+ <i class="fas fa-tachometer-alt text-3xl text-indigo-600 mb-3"></i>
471
+ <h3 class="font-bold text-lg text-gray-800 mb-2">Super Fast Conversion</h3>
472
+ <p class="text-gray-600">Our cloud-powered servers process files in seconds, even for large batches.</p>
473
+ </div>
474
+ </div>
475
+
476
+ <div class="bg-white rounded-xl shadow-lg p-6">
477
+ <div class="text-center mb-4">
478
+ <i class="fas fa-star text-3xl text-indigo-600 mb-3"></i>
479
+ <h3 class="font-bold text-lg text-gray-800 mb-2">Quality Preservation</h3>
480
+ <p class="text-gray-600">Advanced algorithms maintain the highest possible quality during conversions.</p>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ </div>
485
+
486
+ <!-- Preview Modal -->
487
+ <div id="previewModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
488
+ <div class="bg-white rounded-xl max-w-4xl w-full max-h-[90vh] flex flex-col">
489
+ <div class="flex justify-between items-center p-4 border-b">
490
+ <h3 class="font-bold text-lg">Image Preview</h3>
491
+ <button id="closePreviewBtn" class="text-gray-500 hover:text-gray-700">
492
+ <i class="fas fa-times"></i>
493
+ </button>
494
+ </div>
495
+ <div class="flex-1 overflow-auto p-4 flex justify-center items-center">
496
+ <img id="previewImage" src="" alt="Preview" class="max-w-full max-h-[70vh]">
497
+ </div>
498
+ <div class="p-4 border-t">
499
+ <div class="flex justify-end space-x-3">
500
+ <button id="downloadPreviewBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition flex items-center space-x-2">
501
+ <i class="fas fa-download"></i>
502
+ <span>Download</span>
503
+ </button>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+
509
+ <!-- Footer -->
510
+ <footer class="bg-gray-800 text-white py-8">
511
+ <div class="container mx-auto px-4">
512
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
513
+ <div>
514
+ <h4 class="font-bold text-lg mb-4">PixelConvert Pro</h4>
515
+ <p class="text-gray-400">The most advanced online image converter supporting 50+ formats with professional quality.</p>
516
+ </div>
517
+ <div>
518
+ <h4 class="font-bold text-lg mb-4">Formats</h4>
519
+ <ul class="space-y-2 text-gray-400">
520
+ <li><a href="#" class="hover:text-white transition">Raster Formats</a></li>
521
+ <li><a href="#" class="hover:text-white transition">Vector Formats</a></li>
522
+ <li><a href="#" class="hover:text-white transition">Project Files</a></li>
523
+ <li><a href="#" class="hover:text-white transition">Raw Camera Files</a></li>
524
+ </ul>
525
+ </div>
526
+ <div>
527
+ <h4 class="font-bold text-lg mb-4">Help</h4>
528
+ <ul class="space-y-2 text-gray-400">
529
+ <li><a href="#" class="hover:text-white transition">How to Convert</a></li>
530
+ <li><a href="#" class="hover:text-white transition">Supported Formats</a></li>
531
+ <li><a href="#" class="hover:text-white transition">Quality Settings</a></li>
532
+ <li><a href="#" class="hover:text-white transition">FAQ</a></li>
533
+ </ul>
534
+ </div>
535
+ <div>
536
+ <h4 class="font-bold text-lg mb-4">Legal</h4>
537
+ <ul class="space-y-2 text-gray-400">
538
+ <li><a href="#" class="hover:text-white transition">Privacy Policy</a></li>
539
+ <li><a href="#" class="hover:text-white transition">Terms of Service</a></li>
540
+ <li><a href="#" class="hover:text-white transition">Data Security</a></li>
541
+ <li><a href="#" class="hover:text-white transition">DMCA</a></li>
542
+ </ul>
543
+ </div>
544
+ </div>
545
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
546
+ <p>© 2023 PixelConvert Pro. All rights reserved.</p>
547
+ </div>
548
+ </div>
549
+ </footer>
550
+
551
+ <script>
552
+ document.addEventListener('DOMContentLoaded', function() {
553
+ // Variables
554
+ const dropzone = document.getElementById('dropzone');
555
+ const fileInput = document.getElementById('fileInput');
556
+ const browseBtn = document.getElementById('browseBtn');
557
+ const fileList = document.getElementById('fileList');
558
+ const filesContainer = document.getElementById('filesContainer');
559
+ const clearAllBtn = document.getElementById('clearAllBtn');
560
+ const convertAllBtn = document.getElementById('convertAllBtn');
561
+ const uploadTab = document.getElementById('uploadTab');
562
+ const cloudTab = document.getElementById('cloudTab');
563
+ const urlTab = document.getElementById('urlTab');
564
+ const uploadContent = document.getElementById('uploadContent');
565
+ const cloudContent = document.getElementById('cloudContent');
566
+ const urlContent = document.getElementById('urlContent');
567
+ const formatDropdownBtn = document.getElementById('formatDropdownBtn');
568
+ const formatDropdown = document.getElementById('formatDropdown');
569
+ const formatOptions = document.querySelectorAll('.format-option');
570
+ const selectedFormat = document.getElementById('selectedFormat');
571
+ const formatName = document.getElementById('formatName');
572
+ const conversionOptions = document.getElementById('conversionOptions');
573
+ const applySettingsBtn = document.getElementById('applySettingsBtn');
574
+ const resultsSection = document.getElementById('resultsSection');
575
+ const resultsContainer = document.getElementById('resultsContainer');
576
+ const downloadAllBtn = document.getElementById('downloadAllBtn');
577
+ const qualitySlider = document.getElementById('qualitySlider');
578
+ const qualityValue = document.getElementById('qualityValue');
579
+ const previewModal = document.getElementById('previewModal');
580
+ const closePreviewBtn = document.getElementById('closePreviewBtn');
581
+ const previewImage = document.getElementById('previewImage');
582
+ const downloadPreviewBtn = document.getElementById('downloadPreviewBtn');
583
+ const advancedToggle = document.getElementById('advancedToggle');
584
+ const advancedOptions = document.getElementById('advancedOptions');
585
+ const advancedIcon = document.getElementById('advancedIcon');
586
+
587
+ let files = [];
588
+ let selectedFiles = [];
589
+ let currentFormat = null;
590
+ let currentConversionOptions = {};
591
+
592
+ // Event Listeners
593
+ dropzone.addEventListener('dragover', (e) => {
594
+ e.preventDefault();
595
+ dropzone.classList.add('active');
596
+ });
597
+
598
+ dropzone.addEventListener('dragleave', () => {
599
+ dropzone.classList.remove('active');
600
+ });
601
+
602
+ dropzone.addEventListener('drop', (e) => {
603
+ e.preventDefault();
604
+ dropzone.classList.remove('active');
605
+ handleFiles(e.dataTransfer.files);
606
+ });
607
+
608
+ browseBtn.addEventListener('click', () => {
609
+ fileInput.click();
610
+ });
611
+
612
+ fileInput.addEventListener('change', () => {
613
+ if (fileInput.files.length > 0) {
614
+ handleFiles(fileInput.files);
615
+ }
616
+ });
617
+
618
+ clearAllBtn.addEventListener('click', clearAllFiles);
619
+
620
+ uploadTab.addEventListener('click', () => {
621
+ showTab(uploadContent, uploadTab, [cloudContent, urlContent], [cloudTab, urlTab]);
622
+ });
623
+
624
+ cloudTab.addEventListener('click', () => {
625
+ showTab(cloudContent, cloudTab, [uploadContent, urlContent], [uploadTab, urlTab]);
626
+ });
627
+
628
+ urlTab.addEventListener('click', () => {
629
+ showTab(urlContent, urlTab, [uploadContent, cloudContent], [uploadTab, cloudTab]);
630
+ });
631
+
632
+ formatDropdownBtn.addEventListener('click', toggleFormatDropdown);
633
+
634
+ formatOptions.forEach(option => {
635
+ option.addEventListener('click', () => {
636
+ selectFormat(option);
637
+ });
638
+ });
639
+
640
+ document.addEventListener('click', (e) => {
641
+ if (!formatDropdownBtn.contains(e.target) && !formatDropdown.contains(e.target)) {
642
+ formatDropdown.classList.add('hidden');
643
+ }
644
+ });
645
+
646
+ applySettingsBtn.addEventListener('click', convertFiles);
647
+
648
+ qualitySlider.addEventListener('input', updateQualityValue);
649
+
650
+ closePreviewBtn.addEventListener('click', closePreview);
651
+
652
+ downloadAllBtn.addEventListener('click', simulateDownloadAll);
653
+
654
+ advancedToggle.addEventListener('click', toggleAdvancedOptions);
655
+
656
+ // Functions
657
+ function handleFiles(newFiles) {
658
+ for (let i = 0; i < newFiles.length; i++) {
659
+ const file = newFiles[i];
660
+
661
+ // Check if file is already added
662
+ if (!files.some(f => f.name === file.name && f.size === file.size)) {
663
+ files.push(file);
664
+ }
665
+ }
666
+
667
+ if (files.length > 0) {
668
+ updateFileList();
669
+ fileList.classList.remove('hidden');
670
+ }
671
+ }
672
+
673
+ function updateFileList() {
674
+ filesContainer.innerHTML = '';
675
+
676
+ const sortable = new Sortable(filesContainer, {
677
+ animation: 150,
678
+ handle: '.handle',
679
+ ghostClass: 'opacity-50'
680
+ });
681
+
682
+ files.forEach((file, index) => {
683
+ const fileName = file.name.length > 30 ?
684
+ file.name.substring(0, 15) + '...' + file.name.substring(file.name.lastIndexOf('.')) :
685
+ file.name;
686
+
687
+ const fileSize = formatFileSize(file.size);
688
+ const fileExtension = file.name.split('.').pop().toUpperCase();
689
+
690
+ const fileCard = document.createElement('div');
691
+ fileCard.className = 'file-card bg-white border rounded-md p-3 flex items-center space-x-3 hover:shadow-md transition cursor-pointer';
692
+
693
+ fileCard.innerHTML = `
694
+ <div class="handle p-2 text-gray-400 hover:text-gray-600 cursor-move">
695
+ <i class="fas fa-arrows-alt"></i>
696
+ </div>
697
+ <div class="flex-shrink-0 w-10 h-10 rounded-md bg-indigo-50 flex items-center justify-center">
698
+ <span class="text-xs font-medium text-indigo-600">${fileExtension}</span>
699
+ </div>
700
+ <div class="flex-1 min-w-0">
701
+ <div class="flex justify-between">
702
+ <p class="text-sm font-medium text-gray-900 truncate">${fileName}</p>
703
+ <button class="file-remove text-gray-400 hover:text-red-500" data-index="${index}">
704
+ <i class="fas fa-times"></i>
705
+ </button>
706
+ </div>
707
+ <p class="text-xs text-gray-500">${fileSize}</p>
708
+ <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1 hidden">
709
+ <div class="progress-bar bg-indigo-600 h-1.5 rounded-full" style="width: 0%"></div>
710
+ </div>
711
+ </div>
712
+ `;
713
+
714
+ filesContainer.appendChild(fileCard);
715
+
716
+ // Add click event to preview image
717
+ fileCard.addEventListener('click', (e) => {
718
+ if (!e.target.closest('.file-remove') && !e.target.closest('.handle')) {
719
+ previewFile(file);
720
+ }
721
+ });
722
+
723
+ // Add remove file event
724
+ const removeBtn = fileCard.querySelector('.file-remove');
725
+ removeBtn.addEventListener('click', (e) => {
726
+ e.stopPropagation();
727
+ removeFile(index);
728
+ });
729
+ });
730
+
731
+ // Update conversion options if there are files
732
+ updateConversionOptions();
733
+ }
734
+
735
+ function formatFileSize(bytes) {
736
+ if (bytes < 1024) return bytes + ' bytes';
737
+ else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
738
+ else if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + ' MB';
739
+ else return (bytes / 1073741824).toFixed(1) + ' GB';
740
+ }
741
+
742
+ function removeFile(index) {
743
+ files.splice(index, 1);
744
+ if (files.length === 0) {
745
+ fileList.classList.add('hidden');
746
+ conversionOptions.classList.add('hidden');
747
+ } else {
748
+ updateFileList();
749
+ }
750
+ }
751
+
752
+ function clearAllFiles() {
753
+ files = [];
754
+ fileList.classList.add('hidden');
755
+ conversionOptions.classList.add('hidden');
756
+ }
757
+
758
+ function showTab(activeContent, activeTab, inactiveContents, inactiveTabs) {
759
+ activeContent.classList.remove('hidden');
760
+ activeTab.classList.remove('text-gray-600', 'hover:bg-gray-100');
761
+ activeTab.classList.add('bg-indigo-600', 'text-white');
762
+
763
+ inactiveContents.forEach(content => content.classList.add('hidden'));
764
+ inactiveTabs.forEach(tab => {
765
+ tab.classList.remove('bg-indigo-600', 'text-white');
766
+ tab.classList.add('text-gray-600', 'hover:bg-gray-100');
767
+ });
768
+ }
769
+
770
+ function toggleFormatDropdown() {
771
+ formatDropdown.classList.toggle('hidden');
772
+ }
773
+
774
+ function selectFormat(option) {
775
+ currentFormat = option.getAttribute('data-format');
776
+ const displayName = option.querySelector('.font-medium').textContent;
777
+ formatName.textContent = displayName.toUpperCase();
778
+ selectedFormat.classList.remove('hidden');
779
+ formatDropdownBtn.querySelector('span').textContent = displayName.toUpperCase();
780
+ formatDropdown.classList.add('hidden');
781
+
782
+ // Show/hide format-dependent options
783
+ document.querySelectorAll('.format-dependent').forEach(el => {
784
+ const formats = el.getAttribute('data-dependent').split(',');
785
+ if (formats.includes(currentFormat)) {
786
+ el.classList.remove('hidden');
787
+ } else {
788
+ el.classList.add('hidden');
789
+ }
790
+ });
791
+ }
792
+
793
+ function updateConversionOptions() {
794
+ if (files.length > 0) {
795
+ conversionOptions.classList.remove('hidden');
796
+
797
+ // Initialize options
798
+ currentConversionOptions = {
799
+ format: null,
800
+ quality: 90,
801
+ width: null,
802
+ height: null,
803
+ metadata: 'keep',
804
+ colorProfile: 'srgb',
805
+ dpi: '72'
806
+ };
807
+ }
808
+ }
809
+
810
+ function updateQualityValue() {
811
+ qualityValue.textContent = `${qualitySlider.value}%`;
812
+ }
813
+
814
+ function toggleAdvancedOptions() {
815
+ advancedOptions.classList.toggle('hidden');
816
+ advancedIcon.classList.toggle('rotate-180');
817
+ }
818
+
819
+ function convertFiles() {
820
+ if (!currentFormat) {
821
+ alert('Please select an output format');
822
+ return;
823
+ }
824
+
825
+ // Simulate conversion - in a real app this would be an API call
826
+ convertAllBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Converting...';
827
+ convertAllBtn.disabled = true;
828
+
829
+ selectedFiles = [...files];
830
+
831
+ // Simulate conversion progress
832
+ let convertedCount = 0;
833
+ const progressBars = document.querySelectorAll('.progress-bar');
834
+ const progressContainers = document.querySelectorAll('.bg-gray-200');
835
+
836
+ progressContainers.forEach(container => container.classList.remove('hidden'));
837
+
838
+ const conversionInterval = setInterval(() => {
839
+ convertedCount++;
840
+ progressBars.forEach((bar, index) => {
841
+ const percentage = (index < convertedCount) ? 100 : 0;
842
+ bar.style.width = `${percentage}%`;
843
+ });
844
+
845
+ if (convertedCount >= files.length) {
846
+ clearInterval(conversionInterval);
847
+ setTimeout(showResults, 500);
848
+ }
849
+ }, 300);
850
+ }
851
+
852
+ function showResults() {
853
+ resultsContainer.innerHTML = '';
854
+
855
+ selectedFiles.forEach((file, index) => {
856
+ // Simulate converted file
857
+ const resultItem = document.createElement('div');
858
+ resultItem.className = 'bg-white border rounded-md overflow-hidden hover:shadow-md transition';
859
+
860
+ // Generate a fake converted file name
861
+ const originalName = file.name;
862
+ const extensionIndex = originalName.lastIndexOf('.');
863
+ const nameWithoutExtension = extensionIndex !== -1 ?
864
+ originalName.substring(0, extensionIndex) :
865
+ originalName;
866
+ const convertedName = `${nameWithoutExtension}_converted.${currentFormat.toLowerCase()}`;
867
+
868
+ resultItem.innerHTML = `
869
+ <div class="p-4">
870
+ <div class="flex items-center space-x-3">
871
+ <div class="flex-shrink-0 w-10 h-10 rounded-md bg-green-50 flex items-center justify-center">
872
+ <span class="text-xs font-medium text-green-600">${currentFormat.toUpperCase()}</span>
873
+ </div>
874
+ <div class="flex-1 min-w-0">
875
+ <p class="text-sm font-medium text-gray-900 truncate">${convertedName}</p>
876
+ <p class="text-xs text-gray-500">${formatFileSize(file.size * 0.7)}</p>
877
+ </div>
878
+ </div>
879
+ </div>
880
+ <div class="border-t px-4 py-3 bg-gray-50">
881
+ <div class="flex space-x-2 justify-between">
882
+ <button class="preview-btn px-3 py-1 text-sm bg-white border rounded-md hover:bg-gray-50 transition flex items-center space-x-1" data-index="${index}">
883
+ <i class="fas fa-eye text-indigo-600"></i>
884
+ <span>Preview</span>
885
+ </button>
886
+ <button class="download-btn px-3 py-1 text-sm bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition flex items-center space-x-1" data-index="${index}">
887
+ <i class="fas fa-download"></i>
888
+ <span>Download</span>
889
+ </button>
890
+ </div>
891
+ </div>
892
+ `;
893
+
894
+ resultsContainer.appendChild(resultItem);
895
+
896
+ // Add preview and download events
897
+ const previewBtn = resultItem.querySelector('.preview-btn');
898
+ previewBtn.addEventListener('click', () => previewFile(file, true));
899
+
900
+ const downloadBtn = resultItem.querySelector('.download-btn');
901
+ downloadBtn.addEventListener('click', simulateDownload);
902
+ });
903
+
904
+ // Show results section
905
+ resultsSection.classList.remove('hidden');
906
+
907
+ // Reset convert button
908
+ convertAllBtn.innerHTML = 'Convert All';
909
+ convertAllBtn.disabled = false;
910
+
911
+ // Scroll to results
912
+ resultsSection.scrollIntoView({ behavior: 'smooth' });
913
+ }
914
+
915
+ function previewFile(file, isConverted = false) {
916
+ if (!file.type.startsWith('image/')) {
917
+ alert('Preview is only available for image files');
918
+ return;
919
+ }
920
+
921
+ const reader = new FileReader();
922
+ reader.onload = function(e) {
923
+ previewImage.src = e.target.result;
924
+ previewModal.classList.add('active');
925
+
926
+ // Set download button for original or converted file
927
+ if (isConverted) {
928
+ downloadPreviewBtn.onclick = simulateDownload;
929
+ } else {
930
+ downloadPreviewBtn.onclick = () => {
931
+ downloadFile(file);
932
+ };
933
+ }
934
+ };
935
+ reader.readAsDataURL(file);
936
+ }
937
+
938
+ function closePreview() {
939
+ previewModal.classList.remove('active');
940
+ }
941
+
942
+ function simulateDownload() {
943
+ // In a real app, this would download the converted file
944
+ showToast('Download started - this is a simulation');
945
+ }
946
+
947
+ function simulateDownloadAll() {
948
+ showToast('Starting download of all files - this is a simulation');
949
+ }
950
+
951
+ function downloadFile(file) {
952
+ const a = document.createElement('a');
953
+ a.href = URL.createObjectURL(file);
954
+ a.download = file.name;
955
+ document.body.appendChild(a);
956
+ a.click();
957
+ document.body.removeChild(a);
958
+ }
959
+
960
+ function showToast(message) {
961
+ const toast = document.createElement('div');
962
+ toast.className = 'fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-md shadow-lg flex items-center space-x-2 z-50';
963
+ toast.innerHTML = `
964
+ <span>${message}</span>
965
+ `;
966
+
967
+ document.body.appendChild(toast);
968
+
969
+ setTimeout(() => {
970
+ toast.classList.add('opacity-0', 'transition-opacity', 'duration-300');
971
+ setTimeout(() => toast.remove(), 300);
972
+ }, 3000);
973
+ }
974
+
975
+ // Close modal when clicking outside
976
+ previewModal.addEventListener('click', (e) => {
977
+ if (e.target === previewModal) {
978
+ closePreview();
979
+ }
980
+ });
981
+ });
982
+ </script>
983
+ <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=gabrielnexby/nitripan" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p><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=NzService/convert-any-image-format" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
984
+ </html>
prompts.txt ADDED
File without changes