nkp commited on
Commit
65063f7
·
verified ·
1 Parent(s): cbc58b8

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +590 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Universefile
3
- emoji: 📈
4
- colorFrom: blue
5
- colorTo: indigo
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: universefile
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: gray
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,590 @@
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>Universal File Converter</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .dropzone {
11
+ border: 2px dashed #3b82f6;
12
+ transition: all 0.3s ease;
13
+ }
14
+ .dropzone.active {
15
+ border-color: #10b981;
16
+ background-color: #f0f9ff;
17
+ }
18
+ .progress-bar {
19
+ transition: width 0.3s ease;
20
+ }
21
+ .file-icon {
22
+ font-size: 2rem;
23
+ }
24
+ .file-card:hover {
25
+ transform: translateY(-2px);
26
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
27
+ }
28
+ .tooltip {
29
+ visibility: hidden;
30
+ opacity: 0;
31
+ transition: opacity 0.3s;
32
+ }
33
+ .has-tooltip:hover .tooltip {
34
+ visibility: visible;
35
+ opacity: 1;
36
+ }
37
+ .download-options {
38
+ max-height: 0;
39
+ overflow: hidden;
40
+ transition: max-height 0.3s ease-out;
41
+ }
42
+ .download-options.active {
43
+ max-height: 300px;
44
+ }
45
+ </style>
46
+ </head>
47
+ <body class="bg-gray-50 min-h-screen">
48
+ <div class="container mx-auto px-4 py-8">
49
+ <header class="text-center mb-10">
50
+ <h1 class="text-4xl font-bold text-blue-600 mb-2">Universal File Converter</h1>
51
+ <p class="text-gray-600">Auto-detect file types and convert to your desired format</p>
52
+ </header>
53
+
54
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6 mb-8">
55
+ <div id="dropzone" class="dropzone rounded-lg p-10 text-center cursor-pointer">
56
+ <div class="flex flex-col items-center justify-center">
57
+ <i class="fas fa-cloud-upload-alt text-blue-500 text-5xl mb-4"></i>
58
+ <h3 class="text-xl font-semibold text-gray-700 mb-2">Drag & Drop files here</h3>
59
+ <p class="text-gray-500 mb-4">or click to browse your files</p>
60
+ <input type="file" id="fileInput" class="hidden" multiple>
61
+ <button id="browseBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300">
62
+ Select Files
63
+ </button>
64
+ </div>
65
+ </div>
66
+ </div>
67
+
68
+ <div id="fileList" class="max-w-4xl mx-auto mb-8 hidden">
69
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4">Selected Files</h2>
70
+ <div id="filesContainer" class="space-y-3"></div>
71
+ </div>
72
+
73
+ <div id="conversionOptions" class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6 mb-8 hidden">
74
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6">Conversion Options</h2>
75
+
76
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
77
+ <div>
78
+ <label class="block text-gray-700 font-medium mb-2">Output Format</label>
79
+ <div class="grid grid-cols-2 gap-3">
80
+ <button data-format="pdf" class="format-btn flex items-center justify-center bg-gray-100 hover:bg-blue-100 border border-gray-200 rounded-lg p-3 transition">
81
+ <i class="fas fa-file-pdf text-red-500 mr-2"></i> PDF
82
+ </button>
83
+ <button data-format="excel" class="format-btn flex items-center justify-center bg-gray-100 hover:bg-green-100 border border-gray-200 rounded-lg p-3 transition">
84
+ <i class="fas fa-file-excel text-green-600 mr-2"></i> Excel
85
+ </button>
86
+ <button data-format="word" class="format-btn flex items-center justify-center bg-gray-100 hover:bg-blue-100 border border-gray-200 rounded-lg p-3 transition">
87
+ <i class="fas fa-file-word text-blue-600 mr-2"></i> Word
88
+ </button>
89
+ <button data-format="xml" class="format-btn flex items-center justify-center bg-gray-100 hover:bg-orange-100 border border-gray-200 rounded-lg p-3 transition">
90
+ <i class="fas fa-file-code text-orange-500 mr-2"></i> XML
91
+ </button>
92
+ <button data-format="text" class="format-btn flex items-center justify-center bg-gray-100 hover:bg-gray-200 border border-gray-200 rounded-lg p-3 transition">
93
+ <i class="fas fa-file-alt text-gray-600 mr-2"></i> Text
94
+ </button>
95
+ <button data-format="csv" class="format-btn flex items-center justify-center bg-gray-100 hover:bg-green-100 border border-gray-200 rounded-lg p-3 transition">
96
+ <i class="fas fa-file-csv text-green-700 mr-2"></i> CSV
97
+ </button>
98
+ </div>
99
+ </div>
100
+
101
+ <div>
102
+ <label class="block text-gray-700 font-medium mb-2">Options</label>
103
+ <div class="space-y-3">
104
+ <div class="flex items-center">
105
+ <input type="checkbox" id="preserveLayout" class="rounded text-blue-600 mr-2">
106
+ <label for="preserveLayout">Preserve original layout</label>
107
+ </div>
108
+ <div class="flex items-center">
109
+ <input type="checkbox" id="mergeFiles" class="rounded text-blue-600 mr-2">
110
+ <label for="mergeFiles">Merge all files into one</label>
111
+ </div>
112
+ <div class="flex items-center">
113
+ <input type="checkbox" id="compressOutput" class="rounded text-blue-600 mr-2">
114
+ <label for="compressOutput">Compress output files</label>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </div>
119
+
120
+ <div class="flex justify-center">
121
+ <button id="convertBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-8 rounded-lg transition duration-300 flex items-center">
122
+ <i class="fas fa-exchange-alt mr-2"></i> Convert Files
123
+ </button>
124
+ </div>
125
+ </div>
126
+
127
+ <div id="progressSection" class="max-w-4xl mx-auto mb-8 hidden">
128
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4">Conversion Progress</h2>
129
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
130
+ <div id="progressContainer" class="space-y-4"></div>
131
+ </div>
132
+ </div>
133
+
134
+ <div id="downloadSection" class="max-w-4xl mx-auto hidden">
135
+ <div class="flex justify-between items-center mb-4">
136
+ <h2 class="text-2xl font-semibold text-gray-800">Download Converted Files</h2>
137
+ <button id="toggleDownloadOptions" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">
138
+ <i class="fas fa-cog mr-2"></i> Download Options
139
+ </button>
140
+ </div>
141
+
142
+ <div id="downloadOptions" class="download-options bg-white rounded-lg p-4 mb-4">
143
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
144
+ <div>
145
+ <label class="block text-gray-700 font-medium mb-2">Download Quality</label>
146
+ <select id="downloadQuality" class="w-full border border-gray-300 rounded-lg p-2">
147
+ <option value="high">High Quality (Recommended)</option>
148
+ <option value="medium">Medium Quality</option>
149
+ <option value="low">Low Quality (Smaller Size)</option>
150
+ </select>
151
+ </div>
152
+ <div>
153
+ <label class="block text-gray-700 font-medium mb-2">Download Method</label>
154
+ <select id="downloadMethod" class="w-full border border-gray-300 rounded-lg p-2">
155
+ <option value="individual">Individual Files</option>
156
+ <option value="zip">ZIP Archive</option>
157
+ </select>
158
+ </div>
159
+ </div>
160
+ <div class="mt-4 flex justify-end">
161
+ <button id="applyDownloadOptions" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg">
162
+ Apply Options
163
+ </button>
164
+ </div>
165
+ </div>
166
+
167
+ <div id="downloadContainer" class="grid grid-cols-1 md:grid-cols-2 gap-4"></div>
168
+
169
+ <div class="mt-6 flex justify-center">
170
+ <button id="downloadAllBtn" class="bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-6 rounded-lg flex items-center">
171
+ <i class="fas fa-download mr-2"></i> Download All Files
172
+ </button>
173
+ </div>
174
+ </div>
175
+ </div>
176
+
177
+ <script>
178
+ document.addEventListener('DOMContentLoaded', function() {
179
+ // DOM elements
180
+ const dropzone = document.getElementById('dropzone');
181
+ const fileInput = document.getElementById('fileInput');
182
+ const browseBtn = document.getElementById('browseBtn');
183
+ const fileList = document.getElementById('fileList');
184
+ const filesContainer = document.getElementById('filesContainer');
185
+ const conversionOptions = document.getElementById('conversionOptions');
186
+ const convertBtn = document.getElementById('convertBtn');
187
+ const progressSection = document.getElementById('progressSection');
188
+ const progressContainer = document.getElementById('progressContainer');
189
+ const downloadSection = document.getElementById('downloadSection');
190
+ const downloadContainer = document.getElementById('downloadContainer');
191
+ const formatBtns = document.querySelectorAll('.format-btn');
192
+ const toggleDownloadOptions = document.getElementById('toggleDownloadOptions');
193
+ const downloadOptions = document.getElementById('downloadOptions');
194
+ const downloadAllBtn = document.getElementById('downloadAllBtn');
195
+ const applyDownloadOptions = document.getElementById('applyDownloadOptions');
196
+
197
+ let selectedFiles = [];
198
+ let selectedFormat = null;
199
+ let convertedFiles = [];
200
+ let downloadQuality = 'high';
201
+ let downloadMethod = 'individual';
202
+
203
+ // Event listeners
204
+ browseBtn.addEventListener('click', () => fileInput.click());
205
+ fileInput.addEventListener('change', handleFileSelect);
206
+
207
+ // Drag and drop events
208
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
209
+ dropzone.addEventListener(eventName, preventDefaults, false);
210
+ });
211
+
212
+ function preventDefaults(e) {
213
+ e.preventDefault();
214
+ e.stopPropagation();
215
+ }
216
+
217
+ ['dragenter', 'dragover'].forEach(eventName => {
218
+ dropzone.addEventListener(eventName, highlight, false);
219
+ });
220
+
221
+ ['dragleave', 'drop'].forEach(eventName => {
222
+ dropzone.addEventListener(eventName, unhighlight, false);
223
+ });
224
+
225
+ function highlight() {
226
+ dropzone.classList.add('active');
227
+ }
228
+
229
+ function unhighlight() {
230
+ dropzone.classList.remove('active');
231
+ }
232
+
233
+ dropzone.addEventListener('drop', handleDrop, false);
234
+
235
+ // Format selection
236
+ formatBtns.forEach(btn => {
237
+ btn.addEventListener('click', function() {
238
+ formatBtns.forEach(b => b.classList.remove('border-blue-500', 'bg-blue-50'));
239
+ this.classList.add('border-blue-500', 'bg-blue-50');
240
+ selectedFormat = this.getAttribute('data-format');
241
+ });
242
+ });
243
+
244
+ // Convert button
245
+ convertBtn.addEventListener('click', startConversion);
246
+
247
+ // Download options toggle
248
+ toggleDownloadOptions.addEventListener('click', function() {
249
+ downloadOptions.classList.toggle('active');
250
+ });
251
+
252
+ // Apply download options
253
+ applyDownloadOptions.addEventListener('click', function() {
254
+ downloadQuality = document.getElementById('downloadQuality').value;
255
+ downloadMethod = document.getElementById('downloadMethod').value;
256
+ showAlert('Download options updated successfully', 'success');
257
+ downloadOptions.classList.remove('active');
258
+ });
259
+
260
+ // Download all files
261
+ downloadAllBtn.addEventListener('click', function() {
262
+ if (downloadMethod === 'zip') {
263
+ // Simulate downloading a ZIP archive
264
+ const zipName = `converted_files_${new Date().getTime()}.zip`;
265
+ showAlert(`Preparing ZIP archive: ${zipName}`, 'success');
266
+
267
+ // In a real app, this would trigger the actual ZIP download
268
+ setTimeout(() => {
269
+ showAlert(`Downloading ${zipName}`, 'success');
270
+ }, 1500);
271
+ } else {
272
+ // Simulate downloading all files individually
273
+ showAlert('Starting download of all files', 'success');
274
+
275
+ // In a real app, this would trigger all individual downloads
276
+ document.querySelectorAll('.download-btn').forEach(btn => {
277
+ setTimeout(() => {
278
+ btn.click();
279
+ }, 300);
280
+ });
281
+ }
282
+ });
283
+
284
+ // File handling functions
285
+ function handleFileSelect(e) {
286
+ const files = e.target.files || e.dataTransfer.files;
287
+ processFiles(files);
288
+ }
289
+
290
+ function handleDrop(e) {
291
+ const dt = e.dataTransfer;
292
+ const files = dt.files;
293
+ processFiles(files);
294
+ }
295
+
296
+ function processFiles(files) {
297
+ selectedFiles = Array.from(files);
298
+
299
+ if (selectedFiles.length > 0) {
300
+ fileList.classList.remove('hidden');
301
+ conversionOptions.classList.remove('hidden');
302
+ filesContainer.innerHTML = '';
303
+
304
+ selectedFiles.forEach((file, index) => {
305
+ const fileCard = createFileCard(file, index);
306
+ filesContainer.appendChild(fileCard);
307
+ });
308
+ }
309
+ }
310
+
311
+ function createFileCard(file, index) {
312
+ const fileType = getFileType(file.name);
313
+ const icon = getFileIcon(fileType);
314
+ const fileSize = formatFileSize(file.size);
315
+
316
+ const card = document.createElement('div');
317
+ card.className = 'file-card bg-white rounded-lg border border-gray-200 p-4 flex items-center justify-between transition duration-300';
318
+
319
+ card.innerHTML = `
320
+ <div class="flex items-center">
321
+ <div class="file-icon text-3xl mr-4 ${getFileIconColor(fileType)}">
322
+ ${icon}
323
+ </div>
324
+ <div>
325
+ <h3 class="font-medium text-gray-800 truncate max-w-xs">${file.name}</h3>
326
+ <p class="text-sm text-gray-500">${fileType.toUpperCase()} • ${fileSize}</p>
327
+ </div>
328
+ </div>
329
+ <div class="flex items-center">
330
+ <button class="remove-file-btn text-red-500 hover:text-red-700 p-2 rounded-full" data-index="${index}">
331
+ <i class="fas fa-times"></i>
332
+ </button>
333
+ </div>
334
+ `;
335
+
336
+ // Add remove file functionality
337
+ card.querySelector('.remove-file-btn').addEventListener('click', function() {
338
+ const index = parseInt(this.getAttribute('data-index'));
339
+ selectedFiles.splice(index, 1);
340
+
341
+ if (selectedFiles.length === 0) {
342
+ fileList.classList.add('hidden');
343
+ conversionOptions.classList.add('hidden');
344
+ } else {
345
+ // Re-render file list
346
+ filesContainer.innerHTML = '';
347
+ selectedFiles.forEach((file, idx) => {
348
+ filesContainer.appendChild(createFileCard(file, idx));
349
+ });
350
+ }
351
+ });
352
+
353
+ return card;
354
+ }
355
+
356
+ function getFileType(filename) {
357
+ const extension = filename.split('.').pop().toLowerCase();
358
+ const fileTypes = {
359
+ // Documents
360
+ 'pdf': 'pdf',
361
+ 'doc': 'word',
362
+ 'docx': 'word',
363
+ 'txt': 'text',
364
+ 'rtf': 'text',
365
+ 'odt': 'word',
366
+
367
+ // Spreadsheets
368
+ 'xls': 'excel',
369
+ 'xlsx': 'excel',
370
+ 'csv': 'csv',
371
+ 'ods': 'excel',
372
+
373
+ // Data
374
+ 'xml': 'xml',
375
+ 'json': 'json',
376
+
377
+ // Images
378
+ 'jpg': 'image',
379
+ 'jpeg': 'image',
380
+ 'png': 'image',
381
+ 'gif': 'image',
382
+ 'svg': 'image',
383
+ 'webp': 'image',
384
+
385
+ // Archives
386
+ 'zip': 'archive',
387
+ 'rar': 'archive',
388
+ '7z': 'archive',
389
+ 'tar': 'archive',
390
+ 'gz': 'archive'
391
+ };
392
+
393
+ return fileTypes[extension] || 'file';
394
+ }
395
+
396
+ function getFileIcon(fileType) {
397
+ const icons = {
398
+ 'pdf': '<i class="fas fa-file-pdf"></i>',
399
+ 'word': '<i class="fas fa-file-word"></i>',
400
+ 'excel': '<i class="fas fa-file-excel"></i>',
401
+ 'csv': '<i class="fas fa-file-csv"></i>',
402
+ 'text': '<i class="fas fa-file-alt"></i>',
403
+ 'xml': '<i class="fas fa-file-code"></i>',
404
+ 'json': '<i class="fas fa-file-code"></i>',
405
+ 'image': '<i class="fas fa-file-image"></i>',
406
+ 'archive': '<i class="fas fa-file-archive"></i>',
407
+ 'file': '<i class="fas fa-file"></i>'
408
+ };
409
+
410
+ return icons[fileType] || icons['file'];
411
+ }
412
+
413
+ function getFileIconColor(fileType) {
414
+ const colors = {
415
+ 'pdf': 'text-red-500',
416
+ 'word': 'text-blue-600',
417
+ 'excel': 'text-green-600',
418
+ 'csv': 'text-green-700',
419
+ 'text': 'text-gray-600',
420
+ 'xml': 'text-orange-500',
421
+ 'json': 'text-yellow-500',
422
+ 'image': 'text-purple-500',
423
+ 'archive': 'text-yellow-600',
424
+ 'file': 'text-gray-500'
425
+ };
426
+
427
+ return colors[fileType] || colors['file'];
428
+ }
429
+
430
+ function formatFileSize(bytes) {
431
+ if (bytes === 0) return '0 Bytes';
432
+
433
+ const k = 1024;
434
+ const sizes = ['Bytes', 'KB', 'MB', 'GB'];
435
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
436
+
437
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
438
+ }
439
+
440
+ // Conversion functions
441
+ function startConversion() {
442
+ if (!selectedFormat) {
443
+ showAlert('Please select an output format', 'error');
444
+ return;
445
+ }
446
+
447
+ if (selectedFiles.length === 0) {
448
+ showAlert('No files selected for conversion', 'error');
449
+ return;
450
+ }
451
+
452
+ // Show progress section
453
+ progressSection.classList.remove('hidden');
454
+ progressContainer.innerHTML = '';
455
+
456
+ // Hide download section if shown
457
+ downloadSection.classList.add('hidden');
458
+
459
+ // Reset converted files array
460
+ convertedFiles = [];
461
+
462
+ // Simulate conversion process
463
+ selectedFiles.forEach((file, index) => {
464
+ const progressItem = document.createElement('div');
465
+ progressItem.className = 'bg-gray-50 rounded-lg p-4';
466
+ progressItem.innerHTML = `
467
+ <div class="flex justify-between items-center mb-2">
468
+ <div class="flex items-center truncate">
469
+ <span class="font-medium text-gray-700 truncate max-w-xs">${file.name}</span>
470
+ <div class="has-tooltip relative ml-2">
471
+ <i class="fas fa-info-circle text-blue-500"></i>
472
+ <div class="tooltip absolute z-10 w-48 bg-gray-800 text-white text-xs rounded p-2 -left-24 -top-10">
473
+ Converting to ${selectedFormat.toUpperCase()}
474
+ </div>
475
+ </div>
476
+ </div>
477
+ <span class="text-sm font-medium text-gray-500" id="progressPercent-${index}">0%</span>
478
+ </div>
479
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
480
+ <div id="progressBar-${index}" class="progress-bar h-2.5 rounded-full bg-blue-600" style="width: 0%"></div>
481
+ </div>
482
+ `;
483
+
484
+ progressContainer.appendChild(progressItem);
485
+
486
+ // Simulate progress
487
+ simulateConversionProgress(index, file);
488
+ });
489
+ }
490
+
491
+ function simulateConversionProgress(index, file) {
492
+ let progress = 0;
493
+ const interval = setInterval(() => {
494
+ progress += Math.floor(Math.random() * 10) + 5;
495
+ if (progress >= 100) {
496
+ progress = 100;
497
+ clearInterval(interval);
498
+
499
+ // Store converted file info
500
+ const originalName = file.name;
501
+ const newName = originalName.substring(0, originalName.lastIndexOf('.')) + '.' + selectedFormat;
502
+ convertedFiles.push({
503
+ originalName,
504
+ newName,
505
+ format: selectedFormat,
506
+ size: Math.floor(file.size * (0.7 + Math.random() * 0.3)) // Random size for demo
507
+ });
508
+
509
+ // When all files are converted
510
+ if (convertedFiles.length === selectedFiles.length) {
511
+ setTimeout(showDownloadOptions, 1000);
512
+ }
513
+ }
514
+
515
+ document.getElementById(`progressBar-${index}`).style.width = `${progress}%`;
516
+ document.getElementById(`progressPercent-${index}`).textContent = `${progress}%`;
517
+ }, 200);
518
+ }
519
+
520
+ function showDownloadOptions() {
521
+ downloadSection.classList.remove('hidden');
522
+ downloadContainer.innerHTML = '';
523
+
524
+ convertedFiles.forEach((file, index) => {
525
+ const downloadCard = document.createElement('div');
526
+ downloadCard.className = 'bg-white rounded-lg border border-gray-200 p-4 flex items-center justify-between';
527
+
528
+ downloadCard.innerHTML = `
529
+ <div class="flex items-center truncate">
530
+ <div class="mr-3 text-2xl ${getFileIconColor(file.format)}">
531
+ ${getFileIcon(file.format)}
532
+ </div>
533
+ <div class="truncate">
534
+ <h3 class="font-medium text-gray-800 truncate">${file.newName}</h3>
535
+ <p class="text-sm text-gray-500">${formatFileSize(file.size)} • From ${file.originalName}</p>
536
+ </div>
537
+ </div>
538
+ <div class="flex space-x-2">
539
+ <button class="preview-btn text-blue-600 hover:text-blue-800 p-2 rounded-full" data-index="${index}">
540
+ <i class="fas fa-eye"></i>
541
+ </button>
542
+ <button class="download-btn bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300" data-index="${index}">
543
+ <i class="fas fa-download mr-2"></i> Download
544
+ </button>
545
+ </div>
546
+ `;
547
+
548
+ downloadContainer.appendChild(downloadCard);
549
+ });
550
+
551
+ // Add preview functionality
552
+ document.querySelectorAll('.preview-btn').forEach(btn => {
553
+ btn.addEventListener('click', function() {
554
+ const index = parseInt(this.getAttribute('data-index'));
555
+ const file = convertedFiles[index];
556
+ showAlert(`Previewing ${file.newName} (simulated)`, 'success');
557
+ });
558
+ });
559
+
560
+ // Add download functionality
561
+ document.querySelectorAll('.download-btn').forEach(btn => {
562
+ btn.addEventListener('click', function() {
563
+ const index = parseInt(this.getAttribute('data-index'));
564
+ const file = convertedFiles[index];
565
+
566
+ // In a real app, this would download the actual converted file
567
+ // Here we're just simulating the download
568
+ showAlert(`Downloading ${file.newName} (${downloadQuality} quality)`, 'success');
569
+ });
570
+ });
571
+ }
572
+
573
+ function showAlert(message, type) {
574
+ const alert = document.createElement('div');
575
+ alert.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg text-white font-medium ${
576
+ type === 'error' ? 'bg-red-500' : 'bg-green-500'
577
+ }`;
578
+ alert.textContent = message;
579
+
580
+ document.body.appendChild(alert);
581
+
582
+ setTimeout(() => {
583
+ alert.classList.add('opacity-0', 'transition-opacity', 'duration-500');
584
+ setTimeout(() => alert.remove(), 500);
585
+ }, 3000);
586
+ }
587
+ });
588
+ </script>
589
+ <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=nkp/universefile" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
590
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ Build app that auto detect file type and convert in choosed option like excel or pdf or word or xml or text
2
+ After converted please add options to download file