Hugging Face's logo

Spaces:
docto41
/
importateur-multisource
Running

App Files Community
docto41 commited on
Commit
17578ae
·
verified ·
1 Parent(s): da2f8b1

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +708 -19
  3. prompts.txt +3 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Importateur Multisource
3
- emoji: 👀
4
- colorFrom: gray
5
- colorTo: red
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: importateur-multisource
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,708 @@
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="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Importateur Multisource</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 #cbd5e0;
12
+ transition: all 0.3s ease;
13
+ }
14
+ .dropzone.active {
15
+ border-color: #4f46e5;
16
+ background-color: #f0f7ff;
17
+ }
18
+ .progress-bar {
19
+ transition: width 0.3s ease;
20
+ }
21
+ .file-card:hover {
22
+ transform: translateY(-2px);
23
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
24
+ }
25
+ .tab-content {
26
+ display: none;
27
+ }
28
+ .tab-content.active {
29
+ display: block;
30
+ animation: fadeIn 0.3s ease;
31
+ }
32
+ @keyframes fadeIn {
33
+ from { opacity: 0; }
34
+ to { opacity: 1; }
35
+ }
36
+ .toast {
37
+ position: fixed;
38
+ bottom: 20px;
39
+ right: 20px;
40
+ z-index: 1000;
41
+ animation: slideIn 0.3s ease-out;
42
+ }
43
+ @keyframes slideIn {
44
+ from { transform: translateX(100%); }
45
+ to { transform: translateX(0); }
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="bg-gray-50 min-h-screen">
50
+ <div class="container mx-auto px-4 py-8 max-w-4xl">
51
+ <header class="mb-10 text-center">
52
+ <h1 class="text-4xl font-bold text-indigo-700 mb-2">Importateur Multisource</h1>
53
+ <p class="text-gray-600">Importez facilement vos fichiers depuis différentes sources</p>
54
+ </header>
55
+
56
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
57
+ <!-- Tabs Navigation -->
58
+ <div class="flex border-b border-gray-200 overflow-x-auto">
59
+ <button class="tab-btn py-4 px-6 font-medium text-gray-500 hover:text-indigo-600 flex items-center justify-center gap-2 transition-all duration-300 border-b-2 border-transparent hover:border-indigo-300 active whitespace-nowrap" data-tab="url">
60
+ <i class="fas fa-link"></i> Depuis URL
61
+ </button>
62
+ <button class="tab-btn py-4 px-6 font-medium text-gray-500 hover:text-indigo-600 flex items-center justify-center gap-2 transition-all duration-300 border-b-2 border-transparent hover:border-indigo-300 whitespace-nowrap" data-tab="upload">
63
+ <i class="fas fa-upload"></i> Fichier Local
64
+ </button>
65
+ <button class="tab-btn py-4 px-6 font-medium text-gray-500 hover:text-indigo-600 flex items-center justify-center gap-2 transition-all duration-300 border-b-2 border-transparent hover:border-indigo-300 whitespace-nowrap" data-tab="cloud">
66
+ <i class="fas fa-cloud"></i> Cloud
67
+ </button>
68
+ <button class="tab-btn py-4 px-6 font-medium text-gray-500 hover:text-indigo-600 flex items-center justify-center gap-2 transition-all duration-300 border-b-2 border-transparent hover:border-indigo-300 whitespace-nowrap" data-tab="zip">
69
+ <i class="fas fa-file-archive"></i> Archive ZIP
70
+ </button>
71
+ </div>
72
+
73
+ <!-- Tab Contents -->
74
+ <div class="p-6">
75
+ <!-- URL Import Tab -->
76
+ <div id="url-tab" class="tab-content active">
77
+ <div class="mb-6">
78
+ <label for="url-input" class="block text-sm font-medium text-gray-700 mb-2">URL du site ou de l'image</label>
79
+ <div class="flex gap-2">
80
+ <input type="url" id="url-input" placeholder="https://exemple.com" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
81
+ <button id="fetch-url" class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition flex items-center gap-2">
82
+ <i class="fas fa-download"></i> Importer
83
+ </button>
84
+ </div>
85
+ </div>
86
+ <div class="bg-gray-50 p-4 rounded-lg">
87
+ <h3 class="font-medium text-gray-700 mb-2 flex items-center gap-2">
88
+ <i class="fas fa-lightbulb text-yellow-500"></i> Astuce
89
+ </h3>
90
+ <p class="text-sm text-gray-600">Vous pouvez importer des sites web, des images ou des fichiers directement depuis leur URL. Assurez-vous d'avoir les droits nécessaires pour accéder à la ressource.</p>
91
+ </div>
92
+ </div>
93
+
94
+ <!-- File Upload Tab -->
95
+ <div id="upload-tab" class="tab-content">
96
+ <div class="dropzone p-10 rounded-lg text-center cursor-pointer mb-4" id="dropzone">
97
+ <div class="flex flex-col items-center justify-center gap-4">
98
+ <i class="fas fa-cloud-upload-alt text-5xl text-indigo-500"></i>
99
+ <div>
100
+ <p class="font-medium text-gray-700">Glissez-déposez vos fichiers ici</p>
101
+ <p class="text-sm text-gray-500">ou cliquez pour sélectionner</p>
102
+ </div>
103
+ </div>
104
+ <input type="file" id="file-input" class="hidden" multiple>
105
+ </div>
106
+ <div class="flex justify-center">
107
+ <button id="select-files" class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition flex items-center gap-2">
108
+ <i class="fas fa-folder-open"></i> Parcourir les fichiers
109
+ </button>
110
+ </div>
111
+ </div>
112
+
113
+ <!-- Cloud Import Tab -->
114
+ <div id="cloud-tab" class="tab-content">
115
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
116
+ <button class="cloud-provider bg-white border border-gray-200 rounded-lg p-4 flex flex-col items-center gap-2 hover:bg-indigo-50 hover:border-indigo-200 transition" data-provider="google-drive">
117
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Google_Drive_icon.svg/512px-Google_Drive_icon.svg.png" alt="Google Drive" class="h-12 w-12 object-contain">
118
+ <span>Google Drive</span>
119
+ </button>
120
+ <button class="cloud-provider bg-white border border-gray-200 rounded-lg p-4 flex flex-col items-center gap-2 hover:bg-indigo-50 hover:border-indigo-200 transition" data-provider="dropbox">
121
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Dropbox_Icon.svg/512px-Dropbox_Icon.svg.png" alt="Dropbox" class="h-12 w-12 object-contain">
122
+ <span>Dropbox</span>
123
+ </button>
124
+ <button class="cloud-provider bg-white border border-gray-200 rounded-lg p-4 flex flex-col items-center gap-2 hover:bg-indigo-50 hover:border-indigo-200 transition" data-provider="onedrive">
125
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Microsoft_OneDrive_icon.svg/512px-Microsoft_OneDrive_icon.svg.png" alt="OneDrive" class="h-12 w-12 object-contain">
126
+ <span>OneDrive</span>
127
+ </button>
128
+ <button class="cloud-provider bg-white border border-gray-200 rounded-lg p-4 flex flex-col items-center gap-2 hover:bg-indigo-50 hover:border-indigo-200 transition" data-provider="google-photos">
129
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Google_Photos_icon.png/512px-Google_Photos_icon.png" alt="Google Photos" class="h-12 w-12 object-contain">
130
+ <span>Google Photos</span>
131
+ </button>
132
+ </div>
133
+ <div class="bg-gray-50 p-4 rounded-lg">
134
+ <h3 class="font-medium text-gray-700 mb-2 flex items-center gap-2">
135
+ <i class="fas fa-lock text-green-500"></i> Sécurité
136
+ </h3>
137
+ <p class="text-sm text-gray-600">Nous utilisons une connexion sécurisée OAuth 2.0 pour accéder à vos fichiers cloud. Vos identifiants ne sont jamais stockés sur nos serveurs.</p>
138
+ </div>
139
+ </div>
140
+
141
+ <!-- ZIP Import Tab -->
142
+ <div id="zip-tab" class="tab-content">
143
+ <div class="mb-6">
144
+ <label class="block text-sm font-medium text-gray-700 mb-2">Importation d'archive ZIP</label>
145
+ <div class="dropzone p-10 rounded-lg text-center cursor-pointer mb-4" id="zip-dropzone">
146
+ <div class="flex flex-col items-center justify-center gap-4">
147
+ <i class="fas fa-file-archive text-5xl text-indigo-500"></i>
148
+ <div>
149
+ <p class="font-medium text-gray-700">Glissez-déposez votre archive ZIP ici</p>
150
+ <p class="text-sm text-gray-500">ou cliquez pour sélectionner</p>
151
+ </div>
152
+ </div>
153
+ <input type="file" id="zip-input" class="hidden" accept=".zip,.rar,.7z">
154
+ </div>
155
+ <div class="flex justify-center">
156
+ <button id="select-zip" class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition flex items-center gap-2">
157
+ <i class="fas fa-file-archive"></i> Sélectionner un ZIP
158
+ </button>
159
+ </div>
160
+ </div>
161
+ <div class="flex items-start gap-4 bg-blue-50 p-4 rounded-lg">
162
+ <i class="fas fa-info-circle text-blue-500 mt-1"></i>
163
+ <div>
164
+ <h4 class="font-medium text-blue-800 mb-1">Extraction automatique</h4>
165
+ <p class="text-sm text-blue-600">Les fichiers contenus dans l'archive seront automatiquement extraits et disponibles pour consultation après importation.</p>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Imported Files Section -->
173
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
174
+ <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
175
+ <h2 class="text-lg font-medium text-gray-800 flex items-center gap-2">
176
+ <i class="fas fa-file-alt"></i> Fichiers importés
177
+ </h2>
178
+ <div class="flex gap-2">
179
+ <button id="export-all" class="text-sm text-green-600 hover:text-green-800 flex items-center gap-1">
180
+ <i class="fas fa-file-export"></i> Exporter
181
+ </button>
182
+ <button id="clear-all" class="text-sm text-red-500 hover:text-red-700 flex items-center gap-1">
183
+ <i class="fas fa-trash-alt"></i> Tout supprimer
184
+ </button>
185
+ </div>
186
+ </div>
187
+ <div class="p-6" id="imported-files">
188
+ <div class="text-center py-10 text-gray-500" id="empty-state">
189
+ <i class="fas fa-folder-open text-4xl mb-3"></i>
190
+ <p>Aucun fichier importé pour le moment</p>
191
+ </div>
192
+ <!-- Files will be added here dynamically -->
193
+ </div>
194
+ </div>
195
+
196
+ <!-- Progress Modal -->
197
+ <div id="progress-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
198
+ <div class="bg-white rounded-xl p-6 w-full max-w-md">
199
+ <h3 class="text-lg font-medium text-gray-800 mb-4 flex items-center gap-2">
200
+ <i class="fas fa-spinner fa-spin text-indigo-600"></i> Importation en cours
201
+ </h3>
202
+ <div class="mb-4">
203
+ <div class="flex justify-between text-sm text-gray-600 mb-1">
204
+ <span id="progress-filename">fichier.zip</span>
205
+ <span id="progress-percentage">0%</span>
206
+ </div>
207
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
208
+ <div id="progress-bar" class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
209
+ </div>
210
+ </div>
211
+ <button id="cancel-import" class="text-sm text-gray-500 hover:text-gray-700 flex items-center gap-1">
212
+ <i class="fas fa-times"></i> Annuler
213
+ </button>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- Export Modal -->
218
+ <div id="export-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
219
+ <div class="bg-white rounded-xl p-6 w-full max-w-md">
220
+ <h3 class="text-lg font-medium text-gray-800 mb-4 flex items-center gap-2">
221
+ <i class="fas fa-file-export text-green-600"></i> Options d'exportation
222
+ </h3>
223
+ <div class="space-y-4 mb-6">
224
+ <div>
225
+ <label class="block text-sm font-medium text-gray-700 mb-2">Format d'exportation</label>
226
+ <select id="export-format" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
227
+ <option value="zip">Archive ZIP</option>
228
+ <option value="pdf">PDF unique</option>
229
+ <option value="folder">Dossier de fichiers</option>
230
+ </select>
231
+ </div>
232
+ <div>
233
+ <label class="flex items-center">
234
+ <input type="checkbox" id="include-metadata" class="rounded text-green-600 focus:ring-green-500">
235
+ <span class="ml-2 text-sm text-gray-700">Inclure les métadonnées</span>
236
+ </label>
237
+ </div>
238
+ </div>
239
+ <div class="flex justify-end gap-3">
240
+ <button id="cancel-export" class="px-4 py-2 text-gray-600 hover:text-gray-800">
241
+ Annuler
242
+ </button>
243
+ <button id="confirm-export" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:bg-green-700 transition flex items-center gap-2">
244
+ <i class="fas fa-download"></i> Exporter
245
+ </button>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+
251
+ <!-- Toast Notification -->
252
+ <div id="toast" class="toast hidden">
253
+ <div class="bg-green-500 text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-3">
254
+ <i class="fas fa-check-circle"></i>
255
+ <span id="toast-message">Opération réussie</span>
256
+ </div>
257
+ </div>
258
+
259
+ <script>
260
+ // Tab switching functionality
261
+ document.querySelectorAll('.tab-btn').forEach(btn => {
262
+ btn.addEventListener('click', () => {
263
+ // Remove active class from all tabs and buttons
264
+ document.querySelectorAll('.tab-btn').forEach(b => {
265
+ b.classList.remove('active', 'border-indigo-600', 'text-indigo-600');
266
+ });
267
+ document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
268
+
269
+ // Add active class to clicked button
270
+ btn.classList.add('active', 'border-indigo-600', 'text-indigo-600');
271
+
272
+ // Show corresponding tab
273
+ const tabId = btn.getAttribute('data-tab') + '-tab';
274
+ document.getElementById(tabId).classList.add('active');
275
+ });
276
+ });
277
+
278
+ // URL Import
279
+ document.getElementById('fetch-url').addEventListener('click', () => {
280
+ const url = document.getElementById('url-input').value.trim();
281
+ if (!url) {
282
+ showToast('Veuillez entrer une URL valide', 'red');
283
+ return;
284
+ }
285
+
286
+ showProgress('Importation depuis URL...');
287
+ simulateProgress(() => {
288
+ addImportedFile({
289
+ name: url.split('/').pop() || 'site-web',
290
+ type: url.match(/\.(jpeg|jpg|gif|png)$/) ? 'image' : 'website',
291
+ size: 'URL',
292
+ source: 'url',
293
+ url: url
294
+ });
295
+ hideProgress();
296
+ showToast('URL importée avec succès');
297
+ });
298
+ });
299
+
300
+ // File Upload
301
+ const dropzone = document.getElementById('dropzone');
302
+ const fileInput = document.getElementById('file-input');
303
+ const selectFilesBtn = document.getElementById('select-files');
304
+
305
+ selectFilesBtn.addEventListener('click', () => fileInput.click());
306
+
307
+ fileInput.addEventListener('change', handleFiles);
308
+
309
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
310
+ dropzone.addEventListener(eventName, preventDefaults, false);
311
+ });
312
+
313
+ function preventDefaults(e) {
314
+ e.preventDefault();
315
+ e.stopPropagation();
316
+ }
317
+
318
+ ['dragenter', 'dragover'].forEach(eventName => {
319
+ dropzone.addEventListener(eventName, highlight, false);
320
+ });
321
+
322
+ ['dragleave', 'drop'].forEach(eventName => {
323
+ dropzone.addEventListener(eventName, unhighlight, false);
324
+ });
325
+
326
+ function highlight() {
327
+ dropzone.classList.add('active');
328
+ }
329
+
330
+ function unhighlight() {
331
+ dropzone.classList.remove('active');
332
+ }
333
+
334
+ dropzone.addEventListener('drop', (e) => {
335
+ const dt = e.dataTransfer;
336
+ const files = dt.files;
337
+ handleFiles({ target: { files } });
338
+ });
339
+
340
+ function handleFiles(e) {
341
+ const files = e.target.files;
342
+ if (!files.length) return;
343
+
344
+ showProgress(`Importation de ${files.length} fichier(s)...`);
345
+
346
+ let processed = 0;
347
+ Array.from(files).forEach((file, index) => {
348
+ // Simulate upload progress for each file
349
+ setTimeout(() => {
350
+ simulateFileUpload(file, (progress) => {
351
+ updateProgress(file.name, progress);
352
+
353
+ if (progress === 100) {
354
+ processed++;
355
+ if (processed === files.length) {
356
+ hideProgress();
357
+ showToast(`${files.length} fichier(s) importé(s) avec succès`);
358
+ }
359
+
360
+ addImportedFile({
361
+ name: file.name,
362
+ type: file.type.split('/')[0] || 'file',
363
+ size: formatFileSize(file.size),
364
+ source: 'upload',
365
+ file: file
366
+ });
367
+ }
368
+ });
369
+ }, index * 300); // Stagger the uploads slightly
370
+ });
371
+ }
372
+
373
+ // ZIP Import
374
+ const zipDropzone = document.getElementById('zip-dropzone');
375
+ const zipInput = document.getElementById('zip-input');
376
+ const selectZipBtn = document.getElementById('select-zip');
377
+
378
+ selectZipBtn.addEventListener('click', () => zipInput.click());
379
+
380
+ zipInput.addEventListener('change', handleZip);
381
+
382
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
383
+ zipDropzone.addEventListener(eventName, preventDefaults, false);
384
+ });
385
+
386
+ ['dragenter', 'dragover'].forEach(eventName => {
387
+ zipDropzone.addEventListener(eventName, () => zipDropzone.classList.add('active'), false);
388
+ });
389
+
390
+ ['dragleave', 'drop'].forEach(eventName => {
391
+ zipDropzone.addEventListener(eventName, () => zipDropzone.classList.remove('active'), false);
392
+ });
393
+
394
+ zipDropzone.addEventListener('drop', (e) => {
395
+ const dt = e.dataTransfer;
396
+ const files = dt.files;
397
+ handleZip({ target: { files } });
398
+ });
399
+
400
+ function handleZip(e) {
401
+ const file = e.target.files[0];
402
+ if (!file) return;
403
+
404
+ if (!file.name.match(/\.(zip|rar|7z)$/i)) {
405
+ showToast('Veuillez sélectionner un fichier d\'archive valide (ZIP, RAR, 7Z)', 'red');
406
+ return;
407
+ }
408
+
409
+ showProgress(`Extraction de ${file.name}...`);
410
+ simulateProgress(() => {
411
+ // Simulate extracting files from archive
412
+ const fakeFiles = [
413
+ { name: 'document.pdf', type: 'application/pdf', size: 2456789 },
414
+ { name: 'image.jpg', type: 'image/jpeg', size: 1234567 },
415
+ { name: 'data.csv', type: 'text/csv', size: 34567 },
416
+ { name: 'presentation.pptx', type: 'application/vnd.ms-powerpoint', size: 4567890 }
417
+ ];
418
+
419
+ fakeFiles.forEach(fakeFile => {
420
+ addImportedFile({
421
+ name: fakeFile.name,
422
+ type: fakeFile.type.split('/')[0] || 'file',
423
+ size: formatFileSize(fakeFile.size),
424
+ source: 'zip',
425
+ file: fakeFile
426
+ });
427
+ });
428
+
429
+ hideProgress();
430
+ showToast('Archive extraite avec succès');
431
+ });
432
+ }
433
+
434
+ // Cloud Providers
435
+ document.querySelectorAll('.cloud-provider').forEach(btn => {
436
+ btn.addEventListener('click', () => {
437
+ const provider = btn.getAttribute('data-provider');
438
+ let providerName = '';
439
+
440
+ switch(provider) {
441
+ case 'google-drive': providerName = 'Google Drive'; break;
442
+ case 'dropbox': providerName = 'Dropbox'; break;
443
+ case 'onedrive': providerName = 'OneDrive'; break;
444
+ case 'google-photos': providerName = 'Google Photos'; break;
445
+ }
446
+
447
+ showProgress(`Connexion à ${providerName}...`);
448
+
449
+ setTimeout(() => {
450
+ // Simulate successful connection
451
+ hideProgress();
452
+ showToast(`Connecté à ${providerName} avec succès`);
453
+
454
+ // Simulate importing some files from cloud
455
+ setTimeout(() => {
456
+ showProgress(`Importation depuis ${providerName}...`);
457
+
458
+ const cloudFiles = [
459
+ { name: 'photo-vacances.jpg', type: 'image/jpeg', size: 2345678 },
460
+ { name: 'rapport-annuel.pdf', type: 'application/pdf', size: 4567890 },
461
+ { name: 'contacts.vcf', type: 'text/vcard', size: 12345 }
462
+ ];
463
+
464
+ simulateProgress(() => {
465
+ cloudFiles.forEach(file => {
466
+ addImportedFile({
467
+ name: file.name,
468
+ type: file.type.split('/')[0] || 'file',
469
+ size: formatFileSize(file.size),
470
+ source: 'cloud',
471
+ provider: providerName,
472
+ file: file
473
+ });
474
+ });
475
+ hideProgress();
476
+ showToast(`3 fichiers importés depuis ${providerName}`);
477
+ });
478
+ }, 1000);
479
+ }, 1500);
480
+ });
481
+ });
482
+
483
+ // Clear all files
484
+ document.getElementById('clear-all').addEventListener('click', () => {
485
+ const filesContainer = document.getElementById('imported-files');
486
+ if (filesContainer.querySelector('.file-card')) {
487
+ filesContainer.innerHTML = `
488
+ <div class="text-center py-10 text-gray-500" id="empty-state">
489
+ <i class="fas fa-folder-open text-4xl mb-3"></i>
490
+ <p>Aucun fichier importé pour le moment</p>
491
+ </div>
492
+ `;
493
+ showToast('Tous les fichiers ont été supprimés');
494
+ } else {
495
+ showToast('Aucun fichier à supprimer', 'blue');
496
+ }
497
+ });
498
+
499
+ // Export functionality
500
+ document.getElementById('export-all').addEventListener('click', () => {
501
+ const filesContainer = document.getElementById('imported-files');
502
+ if (!filesContainer.querySelector('.file-card')) {
503
+ showToast('Aucun fichier à exporter', 'blue');
504
+ return;
505
+ }
506
+
507
+ // Show export modal
508
+ document.getElementById('export-modal').classList.remove('hidden');
509
+ });
510
+
511
+ document.getElementById('cancel-export').addEventListener('click', () => {
512
+ document.getElementById('export-modal').classList.add('hidden');
513
+ });
514
+
515
+ document.getElementById('confirm-export').addEventListener('click', () => {
516
+ const format = document.getElementById('export-format').value;
517
+ const includeMetadata = document.getElementById('include-metadata').checked;
518
+
519
+ document.getElementById('export-modal').classList.add('hidden');
520
+ showProgress('Préparation de l\'export...');
521
+
522
+ // Simulate export process
523
+ setTimeout(() => {
524
+ // Get all imported files
525
+ const files = Array.from(document.querySelectorAll('.file-card')).map(card => {
526
+ return {
527
+ name: card.querySelector('h3').textContent,
528
+ type: card.querySelector('.file-icon i').className.includes('image') ? 'image' :
529
+ card.querySelector('.file-icon i').className.includes('globe') ? 'website' : 'file',
530
+ size: card.querySelector('.file-info span:first-child').textContent.split(' ')[1]
531
+ };
532
+ });
533
+
534
+ // Simulate creating export file
535
+ simulateProgress(() => {
536
+ hideProgress();
537
+
538
+ // Create a fake download (in a real app, this would be a real ZIP file)
539
+ const exportName = `export-${new Date().toISOString().slice(0,10)}.${format}`;
540
+
541
+ // Create a dummy link to simulate download
542
+ const link = document.createElement('a');
543
+ link.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(
544
+ `Fichiers exportés (${format.toUpperCase()})\n\n` +
545
+ files.map(f => `- ${f.name} (${f.type}, ${f.size})`).join('\n') +
546
+ (includeMetadata ? `\n\nMétadonnées incluses\nExporté le ${new Date().toLocaleString()}` : '')
547
+ );
548
+ link.download = exportName;
549
+ link.style.display = 'none';
550
+ document.body.appendChild(link);
551
+ link.click();
552
+ document.body.removeChild(link);
553
+
554
+ showToast(`Export ${format} terminé avec ${files.length} fichier(s)`);
555
+ });
556
+ }, 1000);
557
+ });
558
+
559
+ // File actions (view, download, delete)
560
+ document.addEventListener('click', (e) => {
561
+ if (e.target.closest('.action-btn')) {
562
+ const btn = e.target.closest('.action-btn');
563
+ const fileCard = btn.closest('.file-card');
564
+ const fileName = fileCard.querySelector('h3').textContent;
565
+
566
+ if (btn.querySelector('.fa-eye')) {
567
+ // View action
568
+ showToast(`Visualisation du fichier: ${fileName}`, 'blue');
569
+ } else if (btn.querySelector('.fa-download')) {
570
+ // Download action
571
+ showToast(`Téléchargement du fichier: ${fileName}`, 'green');
572
+ } else if (btn.querySelector('.fa-trash')) {
573
+ // Delete action
574
+ fileCard.remove();
575
+
576
+ // Check if no files left
577
+ if (!document.querySelector('.file-card')) {
578
+ document.getElementById('imported-files').innerHTML = `
579
+ <div class="text-center py-10 text-gray-500" id="empty-state">
580
+ <i class="fas fa-folder-open text-4xl mb-3"></i>
581
+ <p>Aucun fichier importé pour le moment</p>
582
+ </div>
583
+ `;
584
+ }
585
+
586
+ showToast(`Fichier supprimé: ${fileName}`, 'red');
587
+ }
588
+ }
589
+ });
590
+
591
+ // Progress functions
592
+ function showProgress(filename) {
593
+ document.getElementById('progress-filename').textContent = filename;
594
+ document.getElementById('progress-percentage').textContent = '0%';
595
+ document.getElementById('progress-bar').style.width = '0%';
596
+ document.getElementById('progress-modal').classList.remove('hidden');
597
+ }
598
+
599
+ function updateProgress(filename, percent) {
600
+ document.getElementById('progress-filename').textContent = filename;
601
+ document.getElementById('progress-percentage').textContent = percent + '%';
602
+ document.getElementById('progress-bar').style.width = percent + '%';
603
+ }
604
+
605
+ function hideProgress() {
606
+ document.getElementById('progress-modal').classList.add('hidden');
607
+ }
608
+
609
+ document.getElementById('cancel-import').addEventListener('click', () => {
610
+ hideProgress();
611
+ showToast('Importation annulée', 'orange');
612
+ });
613
+
614
+ // Simulate progress for demo purposes
615
+ function simulateProgress(callback) {
616
+ let progress = 0;
617
+ const interval = setInterval(() => {
618
+ progress += Math.random() * 10;
619
+ if (progress >= 100) {
620
+ progress = 100;
621
+ clearInterval(interval);
622
+ callback();
623
+ }
624
+ updateProgress(document.getElementById('progress-filename').textContent, Math.floor(progress));
625
+ }, 200);
626
+ }
627
+
628
+ function simulateFileUpload(file, progressCallback) {
629
+ let progress = 0;
630
+ const interval = setInterval(() => {
631
+ progress += Math.random() * 15;
632
+ if (progress >= 100) {
633
+ progress = 100;
634
+ clearInterval(interval);
635
+ }
636
+ progressCallback(Math.floor(progress));
637
+ }, 200);
638
+ }
639
+
640
+ // Add imported files to the list
641
+ function addImportedFile(file) {
642
+ const emptyState = document.getElementById('empty-state');
643
+ if (emptyState) emptyState.remove();
644
+
645
+ const fileCard = document.createElement('div');
646
+ fileCard.className = 'file-card bg-white border border-gray-200 rounded-lg p-4 mb-3 transition-all hover:shadow-md flex items-start gap-4';
647
+
648
+ let icon;
649
+ if (file.type === 'image') icon = '<i class="fas fa-image text-blue-500 text-xl"></i>';
650
+ else if (file.type === 'website') icon = '<i class="fas fa-globe text-green-500 text-xl"></i>';
651
+ else if (file.type === 'application') icon = '<i class="fas fa-cog text-purple-500 text-xl"></i>';
652
+ else if (file.type === 'text') icon = '<i class="fas fa-file-alt text-gray-500 text-xl"></i>';
653
+ else icon = '<i class="fas fa-file text-indigo-500 text-xl"></i>';
654
+
655
+ fileCard.innerHTML = `
656
+ <div class="file-icon flex-shrink-0">
657
+ ${icon}
658
+ </div>
659
+ <div class="file-info flex-grow">
660
+ <h3 class="font-medium text-gray-800 truncate">${file.name}</h3>
661
+ <div class="text-sm text-gray-500 flex flex-wrap gap-x-4 gap-y-1 mt-1">
662
+ <span><i class="fas fa-database mr-1"></i> ${file.size}</span>
663
+ <span><i class="fas fa-${file.source === 'url' ? 'link' : file.source === 'cloud' ? 'cloud' : 'hdd'} mr-1"></i> ${file.source === 'url' ? 'URL' : file.source === 'cloud' ? file.provider : 'Local'}</span>
664
+ <span><i class="fas fa-calendar-alt mr-1"></i> ${new Date().toLocaleDateString()}</span>
665
+ </div>
666
+ </div>
667
+ <div class="file-actions flex-shrink-0 flex gap-2">
668
+ <button class="action-btn p-2 text-gray-400 hover:text-indigo-600 rounded-full hover:bg-indigo-50">
669
+ <i class="fas fa-eye"></i>
670
+ </button>
671
+ <button class="action-btn p-2 text-gray-400 hover:text-green-600 rounded-full hover:bg-green-50">
672
+ <i class="fas fa-download"></i>
673
+ </button>
674
+ <button class="action-btn p-2 text-gray-400 hover:text-red-600 rounded-full hover:bg-red-50">
675
+ <i class="fas fa-trash"></i>
676
+ </button>
677
+ </div>
678
+ `;
679
+
680
+ document.getElementById('imported-files').prepend(fileCard);
681
+ }
682
+
683
+ // Helper function to format file size
684
+ function formatFileSize(bytes) {
685
+ if (typeof bytes === 'string') return bytes;
686
+ if (bytes === 0) return '0 Bytes';
687
+ const k = 1024;
688
+ const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
689
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
690
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
691
+ }
692
+
693
+ // Toast notification
694
+ function showToast(message, color = 'green') {
695
+ const toast = document.getElementById('toast');
696
+ const toastMessage = document.getElementById('toast-message');
697
+
698
+ toast.className = `toast bg-${color}-500 text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-3`;
699
+ toastMessage.textContent = message;
700
+ toast.classList.remove('hidden');
701
+
702
+ setTimeout(() => {
703
+ toast.classList.add('hidden');
704
+ }, 3000);
705
+ }
706
+ </script>
707
+ <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=docto41/importateur-multisource" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
708
+ </html>
prompts.txt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ importer un site à partir d'un url , image , zip etc..
2
+ TOUTES LES BOUTON NE FONCTIONNE PAS
3
+ je veux exporter une fois terminer