Hugging Face's logo

Spaces:
docto41
/
importation
Running

App Files Community
docto41 commited on
Commit
fc87229
·
verified ·
1 Parent(s): 0e518b7

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +503 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Importation
3
- emoji: 📈
4
  colorFrom: purple
5
- colorTo: green
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: importation
3
+ emoji: 🐳
4
  colorFrom: purple
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,503 @@
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>Nexus Importer - Transfert de fichiers futuriste</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
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap');
11
+
12
+ :root {
13
+ --primary: #00f7ff;
14
+ --secondary: #7b2dff;
15
+ --dark: #0a0a1a;
16
+ --light: #e0e0ff;
17
+ }
18
+
19
+ body {
20
+ font-family: 'Roboto', sans-serif;
21
+ background-color: var(--dark);
22
+ color: var(--light);
23
+ overflow-x: hidden;
24
+ }
25
+
26
+ h1, h2, h3, .font-futuristic {
27
+ font-family: 'Orbitron', sans-serif;
28
+ }
29
+
30
+ .gradient-bg {
31
+ background: linear-gradient(135deg, var(--dark) 0%, #1a1a3a 100%);
32
+ }
33
+
34
+ .glow {
35
+ text-shadow: 0 0 10px rgba(0, 247, 255, 0.7);
36
+ }
37
+
38
+ .glow-box {
39
+ box-shadow: 0 0 15px rgba(0, 247, 255, 0.5);
40
+ }
41
+
42
+ .input-glow:focus {
43
+ box-shadow: 0 0 10px rgba(0, 247, 255, 0.5);
44
+ border-color: var(--primary);
45
+ }
46
+
47
+ .cyber-button {
48
+ position: relative;
49
+ overflow: hidden;
50
+ transition: all 0.3s;
51
+ }
52
+
53
+ .cyber-button:hover {
54
+ transform: translateY(-2px);
55
+ box-shadow: 0 5px 15px rgba(0, 247, 255, 0.4);
56
+ }
57
+
58
+ .cyber-button::before {
59
+ content: '';
60
+ position: absolute;
61
+ top: 0;
62
+ left: -100%;
63
+ width: 100%;
64
+ height: 100%;
65
+ background: linear-gradient(90deg, transparent, rgba(0, 247, 255, 0.4), transparent);
66
+ transition: all 0.6s;
67
+ }
68
+
69
+ .cyber-button:hover::before {
70
+ left: 100%;
71
+ }
72
+
73
+ .hexagon {
74
+ clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
75
+ }
76
+
77
+ .pulse {
78
+ animation: pulse 2s infinite;
79
+ }
80
+
81
+ @keyframes pulse {
82
+ 0% { opacity: 0.6; }
83
+ 50% { opacity: 1; }
84
+ 100% { opacity: 0.6; }
85
+ }
86
+
87
+ .upload-area {
88
+ border: 2px dashed rgba(0, 247, 255, 0.3);
89
+ transition: all 0.3s;
90
+ }
91
+
92
+ .upload-area:hover {
93
+ border-color: var(--primary);
94
+ background: rgba(0, 247, 255, 0.05);
95
+ }
96
+
97
+ .tech-grid {
98
+ background-image:
99
+ linear-gradient(rgba(0, 247, 255, 0.1) 1px, transparent 1px),
100
+ linear-gradient(90deg, rgba(0, 247, 255, 0.1) 1px, transparent 1px);
101
+ background-size: 30px 30px;
102
+ }
103
+
104
+ .progress-bar {
105
+ height: 6px;
106
+ background: rgba(0, 247, 255, 0.2);
107
+ overflow: hidden;
108
+ }
109
+
110
+ .progress-bar-fill {
111
+ height: 100%;
112
+ background: linear-gradient(90deg, var(--secondary), var(--primary));
113
+ transition: width 0.3s;
114
+ }
115
+
116
+ .floating {
117
+ animation: floating 6s ease-in-out infinite;
118
+ }
119
+
120
+ @keyframes floating {
121
+ 0% { transform: translateY(0px); }
122
+ 50% { transform: translateY(-15px); }
123
+ 100% { transform: translateY(0px); }
124
+ }
125
+ </style>
126
+ </head>
127
+ <body class="gradient-bg min-h-screen">
128
+ <!-- Particules de fond -->
129
+ <div class="fixed inset-0 overflow-hidden opacity-20">
130
+ <div class="absolute top-1/4 left-1/4 w-2 h-2 rounded-full bg-white pulse" style="animation-delay: 0s;"></div>
131
+ <div class="absolute top-1/3 left-2/3 w-1 h-1 rounded-full bg-cyan-400 pulse" style="animation-delay: 0.5s;"></div>
132
+ <div class="absolute top-2/3 left-1/5 w-3 h-3 rounded-full bg-purple-500 pulse" style="animation-delay: 1s;"></div>
133
+ <div class="absolute top-3/4 left-3/4 w-2 h-2 rounded-full bg-white pulse" style="animation-delay: 1.5s;"></div>
134
+ </div>
135
+
136
+ <div class="container mx-auto px-4 py-12 relative z-10">
137
+ <!-- En-tête -->
138
+ <header class="flex flex-col items-center mb-16">
139
+ <div class="hexagon bg-gradient-to-br from-cyan-500 to-purple-600 w-24 h-24 flex items-center justify-center mb-6 glow-box">
140
+ <i class="fas fa-cloud-upload-alt text-4xl text-white"></i>
141
+ </div>
142
+ <h1 class="text-5xl font-bold text-center mb-4 glow">
143
+ <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500">NEXUS</span> IMPORTER
144
+ </h1>
145
+ <p class="text-xl text-gray-300 max-w-2xl text-center">
146
+ Transférez vos fichiers vers le futur. Importez depuis n'importe quelle source en quelques secondes.
147
+ </p>
148
+ </header>
149
+
150
+ <!-- Zone principale -->
151
+ <main class="tech-grid rounded-xl p-8 backdrop-blur-sm bg-opacity-20 bg-gray-900 border border-gray-800 glow-box">
152
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
153
+ <!-- Section d'importation -->
154
+ <div class="flex flex-col">
155
+ <h2 class="text-2xl font-futuristic mb-6 flex items-center">
156
+ <i class="fas fa-rocket mr-3 text-cyan-400"></i>
157
+ <span>Sources d'importation</span>
158
+ </h2>
159
+
160
+ <!-- Onglets -->
161
+ <div class="flex mb-6 border-b border-gray-800">
162
+ <button class="tab-button active px-4 py-2 font-medium text-cyan-400 border-b-2 border-cyan-400" data-tab="url">
163
+ <i class="fas fa-link mr-2"></i> URL
164
+ </button>
165
+ <button class="tab-button px-4 py-2 font-medium text-gray-400 hover:text-cyan-400" data-tab="file">
166
+ <i class="fas fa-file-archive mr-2"></i> Fichier
167
+ </button>
168
+ <button class="tab-button px-4 py-2 font-medium text-gray-400 hover:text-cyan-400" data-tab="cloud">
169
+ <i class="fas fa-cloud mr-2"></i> Cloud
170
+ </button>
171
+ </div>
172
+
173
+ <!-- Contenu des onglets -->
174
+ <div class="tab-content" id="url-tab">
175
+ <div class="mb-6">
176
+ <label class="block text-gray-300 mb-2">URL du site/fichier</label>
177
+ <div class="relative">
178
+ <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-3 px-4 text-white focus:outline-none input-glow" placeholder="https://example.com/file.zip">
179
+ <div class="absolute right-3 top-3 text-gray-400">
180
+ <i class="fas fa-globe"></i>
181
+ </div>
182
+ </div>
183
+ </div>
184
+
185
+ <div class="mb-6">
186
+ <label class="block text-gray-300 mb-2">Options avancées</label>
187
+ <div class="space-y-3">
188
+ <label class="flex items-center">
189
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-cyan-400 bg-gray-800 border-gray-700 rounded focus:ring-cyan-400">
190
+ <span class="ml-2 text-gray-300">Extraire automatiquement les archives</span>
191
+ </label>
192
+ <label class="flex items-center">
193
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-cyan-400 bg-gray-800 border-gray-700 rounded focus:ring-cyan-400">
194
+ <span class="ml-2 text-gray-300">Scanner les fichiers avec Nexus Shield</span>
195
+ </label>
196
+ </div>
197
+ </div>
198
+
199
+ <button class="w-full cyber-button bg-gradient-to-r from-purple-600 to-cyan-500 text-white py-3 px-6 rounded-lg font-medium flex items-center justify-center">
200
+ <i class="fas fa-bolt mr-2"></i> Lancer l'importation quantique
201
+ </button>
202
+ </div>
203
+
204
+ <div class="tab-content hidden" id="file-tab">
205
+ <div class="upload-area rounded-xl border-2 border-dashed p-8 text-center cursor-pointer mb-6 hover:border-cyan-400 transition-colors">
206
+ <div class="floating mx-auto w-16 h-16 bg-cyan-900 bg-opacity-30 rounded-full flex items-center justify-center mb-4">
207
+ <i class="fas fa-file-upload text-3xl text-cyan-400"></i>
208
+ </div>
209
+ <h3 class="text-xl font-medium mb-2">Glissez-déposez vos fichiers ici</h3>
210
+ <p class="text-gray-400 mb-4">ou cliquez pour parcourir</p>
211
+ <div class="text-sm text-gray-500">ZIP, RAR, Images, PDF, etc.</div>
212
+ <input type="file" class="hidden" id="file-upload" multiple>
213
+ </div>
214
+
215
+ <div class="grid grid-cols-2 gap-4 mb-6">
216
+ <button class="cyber-button bg-gray-800 hover:bg-gray-700 text-white py-2 px-4 rounded-lg font-medium flex items-center justify-center">
217
+ <i class="fas fa-folder-open mr-2"></i> Parcourir
218
+ </button>
219
+ <button class="cyber-button bg-gray-800 hover:bg-gray-700 text-white py-2 px-4 rounded-lg font-medium flex items-center justify-center">
220
+ <i class="fas fa-camera mr-2"></i> Prendre une photo
221
+ </button>
222
+ </div>
223
+ </div>
224
+
225
+ <div class="tab-content hidden" id="cloud-tab">
226
+ <div class="mb-6">
227
+ <label class="block text-gray-300 mb-2">Service Cloud</label>
228
+ <div class="grid grid-cols-3 gap-3">
229
+ <button class="cloud-service bg-gray-800 hover:bg-gray-700 py-3 rounded-lg flex flex-col items-center justify-center">
230
+ <i class="fab fa-google-drive text-2xl text-blue-400 mb-1"></i>
231
+ <span class="text-xs">Google Drive</span>
232
+ </button>
233
+ <button class="cloud-service bg-gray-800 hover:bg-gray-700 py-3 rounded-lg flex flex-col items-center justify-center">
234
+ <i class="fab fa-dropbox text-2xl text-blue-500 mb-1"></i>
235
+ <span class="text-xs">Dropbox</span>
236
+ </button>
237
+ <button class="cloud-service bg-gray-800 hover:bg-gray-700 py-3 rounded-lg flex flex-col items-center justify-center">
238
+ <i class="fas fa-cloud text-2xl text-white mb-1"></i>
239
+ <span class="text-xs">OneDrive</span>
240
+ </button>
241
+ </div>
242
+ </div>
243
+
244
+ <div class="mb-6">
245
+ <label class="block text-gray-300 mb-2">Identifiants</label>
246
+ <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-3 px-4 text-white focus:outline-none input-glow mb-3" placeholder="Email/Nom d'utilisateur">
247
+ <input type="password" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-3 px-4 text-white focus:outline-none input-glow" placeholder="Mot de passe">
248
+ </div>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Aperçu et progression -->
253
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 border border-gray-800">
254
+ <h2 class="text-2xl font-futuristic mb-6 flex items-center">
255
+ <i class="fas fa-chart-line mr-3 text-purple-400"></i>
256
+ <span>Statut d'importation</span>
257
+ </h2>
258
+
259
+ <div class="space-y-6">
260
+ <div>
261
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
262
+ <span>Préparation du transfert quantique</span>
263
+ <span>0%</span>
264
+ </div>
265
+ <div class="progress-bar rounded-full">
266
+ <div class="progress-bar-fill rounded-full" style="width: 0%"></div>
267
+ </div>
268
+ </div>
269
+
270
+ <div class="bg-gray-800 bg-opacity-70 rounded-lg p-4">
271
+ <div class="flex items-center mb-3">
272
+ <div class="w-8 h-8 rounded-full bg-cyan-900 bg-opacity-30 flex items-center justify-center mr-3">
273
+ <i class="fas fa-info-circle text-cyan-400"></i>
274
+ </div>
275
+ <h3 class="font-medium">Conseils pour un transfert optimal</h3>
276
+ </div>
277
+ <ul class="text-sm text-gray-400 space-y-2 pl-11">
278
+ <li class="flex items-start">
279
+ <i class="fas fa-chevron-right text-xs text-cyan-400 mt-1 mr-2"></i>
280
+ <span>Utilisez une connexion stable pour éviter les perturbations quantiques</span>
281
+ </li>
282
+ <li class="flex items-start">
283
+ <i class="fas fa-chevron-right text-xs text-cyan-400 mt-1 mr-2"></i>
284
+ <span>Les fichiers chiffrés bénéficient d'une vitesse de transfert accrue</span>
285
+ </li>
286
+ <li class="flex items-start">
287
+ <i class="fas fa-chevron-right text-xs text-cyan-400 mt-1 mr-2"></i>
288
+ <span>Activez Nexus Shield pour une protection maximale</span>
289
+ </li>
290
+ </ul>
291
+ </div>
292
+
293
+ <div>
294
+ <h3 class="font-medium mb-3 flex items-center">
295
+ <i class="fas fa-history mr-2 text-purple-400"></i>
296
+ Historique récent
297
+ </h3>
298
+ <div class="space-y-2">
299
+ <div class="flex items-center justify-between bg-gray-800 bg-opacity-50 hover:bg-gray-700 rounded-lg p-3 cursor-pointer transition-colors">
300
+ <div class="flex items-center">
301
+ <div class="w-8 h-8 rounded-full bg-purple-900 bg-opacity-30 flex items-center justify-center mr-3">
302
+ <i class="fas fa-file-archive text-purple-400"></i>
303
+ </div>
304
+ <div>
305
+ <div class="text-sm">archive_project.zip</div>
306
+ <div class="text-xs text-gray-500">12.5 MB - Hier</div>
307
+ </div>
308
+ </div>
309
+ <i class="fas fa-chevron-right text-gray-400"></i>
310
+ </div>
311
+
312
+ <div class="flex items-center justify-between bg-gray-800 bg-opacity-50 hover:bg-gray-700 rounded-lg p-3 cursor-pointer transition-colors">
313
+ <div class="flex items-center">
314
+ <div class="w-8 h-8 rounded-full bg-cyan-900 bg-opacity-30 flex items-center justify-center mr-3">
315
+ <i class="fas fa-image text-cyan-400"></i>
316
+ </div>
317
+ <div>
318
+ <div class="text-sm">screenshot.png</div>
319
+ <div class="text-xs text-gray-500">2.1 MB - 2 jours</div>
320
+ </div>
321
+ </div>
322
+ <i class="fas fa-chevron-right text-gray-400"></i>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </main>
330
+
331
+ <!-- Section IA -->
332
+ <section class="mt-16 tech-grid rounded-xl p-8 backdrop-blur-sm bg-opacity-20 bg-gray-900 border border-gray-800 glow-box">
333
+ <h2 class="text-2xl font-futuristic mb-6 flex items-center">
334
+ <i class="fas fa-robot mr-3 text-purple-400"></i>
335
+ <span>Assistant IA Nexus</span>
336
+ </h2>
337
+
338
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
339
+ <div class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-lg p-6 border border-gray-700 hover:border-cyan-400 transition-colors cursor-pointer">
340
+ <div class="w-12 h-12 rounded-full bg-cyan-900 bg-opacity-30 flex items-center justify-center mb-4">
341
+ <i class="fas fa-magic text-2xl text-cyan-400"></i>
342
+ </div>
343
+ <h3 class="text-lg font-medium mb-2">Optimisation automatique</h3>
344
+ <p class="text-sm text-gray-400">Notre IA analyse et optimise vos fichiers pour un transfert plus rapide.</p>
345
+ </div>
346
+
347
+ <div class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-lg p-6 border border-gray-700 hover:border-purple-400 transition-colors cursor-pointer">
348
+ <div class="w-12 h-12 rounded-full bg-purple-900 bg-opacity-30 flex items-center justify-center mb-4">
349
+ <i class="fas fa-shield-alt text-2xl text-purple-400"></i>
350
+ </div>
351
+ <h3 class="text-lg font-medium mb-2">Sécurité quantique</h3>
352
+ <p class="text-sm text-gray-400">Protection avancée contre les menaces avec chiffrement de niveau militaire.</p>
353
+ </div>
354
+
355
+ <div class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-lg p-6 border border-gray-700 hover:border-pink-400 transition-colors cursor-pointer">
356
+ <div class="w-12 h-12 rounded-full bg-pink-900 bg-opacity-30 flex items-center justify-center mb-4">
357
+ <i class="fas fa-bolt text-2xl text-pink-400"></i>
358
+ </div>
359
+ <h3 class="text-lg font-medium mb-2">Conversion instantanée</h3>
360
+ <p class="text-sm text-gray-400">Transformez vos fichiers dans n'importe quel format pendant le transfert.</p>
361
+ </div>
362
+ </div>
363
+ </section>
364
+
365
+ <!-- Pied de page -->
366
+ <footer class="mt-16 pt-8 border-t border-gray-800">
367
+ <div class="flex flex-col md:flex-row justify-between items-center">
368
+ <div class="flex items-center mb-4 md:mb-0">
369
+ <div class="hexagon bg-gradient-to-br from-cyan-500 to-purple-600 w-10 h-10 flex items-center justify-center mr-3">
370
+ <i class="fas fa-infinity text-white"></i>
371
+ </div>
372
+ <span class="text-xl font-futuristic">NEXUS TECHNOLOGIES</span>
373
+ </div>
374
+
375
+ <div class="flex space-x-6">
376
+ <a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors">
377
+ <i class="fab fa-github text-xl"></i>
378
+ </a>
379
+ <a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors">
380
+ <i class="fab fa-twitter text-xl"></i>
381
+ </a>
382
+ <a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors">
383
+ <i class="fab fa-discord text-xl"></i>
384
+ </a>
385
+ <a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors">
386
+ <i class="fab fa-linkedin text-xl"></i>
387
+ </a>
388
+ </div>
389
+ </div>
390
+
391
+ <div class="mt-8 text-center text-gray-500 text-sm">
392
+ <p>© 2023 Nexus Importer. Tous droits réservés. | Version quantique 2.5.7</p>
393
+ <p class="mt-1">Ce service utilise la technologie de téléportation quantique brevetée Nexus™</p>
394
+ </div>
395
+ </footer>
396
+ </div>
397
+
398
+ <script>
399
+ // Gestion des onglets
400
+ document.querySelectorAll('.tab-button').forEach(button => {
401
+ button.addEventListener('click', () => {
402
+ // Retirer la classe active de tous les boutons
403
+ document.querySelectorAll('.tab-button').forEach(btn => {
404
+ btn.classList.remove('active', 'text-cyan-400', 'border-cyan-400');
405
+ btn.classList.add('text-gray-400');
406
+ });
407
+
408
+ // Ajouter la classe active au bouton cliqué
409
+ button.classList.add('active', 'text-cyan-400', 'border-cyan-400');
410
+ button.classList.remove('text-gray-400');
411
+
412
+ // Masquer tous les contenus d'onglets
413
+ document.querySelectorAll('.tab-content').forEach(content => {
414
+ content.classList.add('hidden');
415
+ });
416
+
417
+ // Afficher le contenu correspondant
418
+ const tabId = button.getAttribute('data-tab') + '-tab';
419
+ document.getElementById(tabId).classList.remove('hidden');
420
+ });
421
+ });
422
+
423
+ // Animation de la barre de progression (simulation)
424
+ function simulateProgress() {
425
+ let progress = 0;
426
+ const progressBar = document.querySelector('.progress-bar-fill');
427
+ const progressText = document.querySelector('.progress-bar + .flex span:last-child');
428
+
429
+ const interval = setInterval(() => {
430
+ progress += Math.random() * 10;
431
+ if (progress > 100) progress = 100;
432
+
433
+ progressBar.style.width = `${progress}%`;
434
+ progressText.textContent = `${Math.round(progress)}%`;
435
+
436
+ if (progress === 100) {
437
+ clearInterval(interval);
438
+ progressText.textContent = "Transfert quantique terminé!";
439
+ }
440
+ }, 500);
441
+ }
442
+
443
+ // Démarrer la simulation lors du clic sur le bouton d'importation
444
+ document.querySelector('.cyber-button').addEventListener('click', simulateProgress);
445
+
446
+ // Gestion du glisser-déposer
447
+ const uploadArea = document.querySelector('.upload-area');
448
+ const fileInput = document.getElementById('file-upload');
449
+
450
+ uploadArea.addEventListener('click', () => {
451
+ fileInput.click();
452
+ });
453
+
454
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
455
+ uploadArea.addEventListener(eventName, preventDefaults, false);
456
+ });
457
+
458
+ function preventDefaults(e) {
459
+ e.preventDefault();
460
+ e.stopPropagation();
461
+ }
462
+
463
+ ['dragenter', 'dragover'].forEach(eventName => {
464
+ uploadArea.addEventListener(eventName, highlight, false);
465
+ });
466
+
467
+ ['dragleave', 'drop'].forEach(eventName => {
468
+ uploadArea.addEventListener(eventName, unhighlight, false);
469
+ });
470
+
471
+ function highlight() {
472
+ uploadArea.classList.add('bg-cyan-900', 'bg-opacity-20');
473
+ }
474
+
475
+ function unhighlight() {
476
+ uploadArea.classList.remove('bg-cyan-900', 'bg-opacity-20');
477
+ }
478
+
479
+ uploadArea.addEventListener('drop', handleDrop, false);
480
+
481
+ function handleDrop(e) {
482
+ const dt = e.dataTransfer;
483
+ const files = dt.files;
484
+ handleFiles(files);
485
+ }
486
+
487
+ function handleFiles(files) {
488
+ alert(`${files.length} fichier(s) sélectionné(s) pour l'importation quantique!`);
489
+ // Ici, vous ajouteriez le code pour traiter les fichiers
490
+ }
491
+
492
+ // Effet de saisie pour les services cloud
493
+ document.querySelectorAll('.cloud-service').forEach(service => {
494
+ service.addEventListener('click', () => {
495
+ document.querySelectorAll('.cloud-service').forEach(s => {
496
+ s.classList.remove('border-cyan-400', 'bg-gray-700');
497
+ });
498
+ service.classList.add('border-cyan-400', 'bg-gray-700');
499
+ });
500
+ });
501
+ </script>
502
+ <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/importation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
503
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ importer un site à partir d'un url , image , zip etc.. en version futuriste