docto41 commited on
Commit
97f213d
·
verified ·
1 Parent(s): fc87229

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +315 -405
  2. prompts.txt +7 -1
index.html CHANGED
@@ -3,45 +3,27 @@
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 {
@@ -52,452 +34,380 @@
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>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CinéFutur - Lecteur de Films</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;700&display=swap');
11
 
12
  :root {
13
+ --primary: #ff6b00;
14
+ --secondary: #8a2be2;
15
  --dark: #0a0a1a;
 
16
  }
17
 
18
  body {
19
+ font-family: 'Orbitron', sans-serif;
20
  background-color: var(--dark);
21
+ color: white;
22
  overflow-x: hidden;
23
  }
24
 
 
 
 
 
 
 
 
 
25
  .glow {
26
+ text-shadow: 0 0 10px rgba(255, 107, 0, 0.7);
 
 
 
 
 
 
 
 
 
27
  }
28
 
29
  .cyber-button {
 
34
 
35
  .cyber-button:hover {
36
  transform: translateY(-2px);
37
+ box-shadow: 0 5px 15px rgba(255, 107, 0, 0.4);
 
 
 
 
 
 
 
 
 
 
 
38
  }
39
 
40
+ .film-card {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
41
  transition: all 0.3s;
42
+ background: rgba(30, 30, 60, 0.5);
43
+ border-radius: 10px;
44
+ overflow: hidden;
45
  }
46
 
47
+ .film-card:hover {
48
+ transform: scale(1.03);
49
+ box-shadow: 0 0 20px rgba(138, 43, 226, 0.5);
 
 
 
 
 
 
 
50
  }
51
 
52
+ .video-container {
53
+ position: relative;
54
+ padding-bottom: 56.25%; /* 16:9 */
55
+ height: 0;
56
  overflow: hidden;
57
  }
58
 
59
+ .video-container iframe {
60
+ position: absolute;
61
+ top: 0;
62
+ left: 0;
63
+ width: 100%;
64
  height: 100%;
65
+ border: none;
 
66
  }
67
 
68
+ .progress-bar {
69
+ height: 4px;
70
+ background: rgba(255,255,255,0.2);
71
+ margin-top: 10px;
72
  }
73
 
74
+ .progress-fill {
75
+ height: 100%;
76
+ background: linear-gradient(90deg, var(--secondary), var(--primary));
77
+ width: 0%;
78
  }
79
  </style>
80
  </head>
81
+ <body class="min-h-screen bg-gradient-to-br from-gray-900 to-gray-800">
82
+ <div class="container mx-auto px-4 py-8">
83
+ <!-- Header -->
84
+ <header class="flex justify-between items-center mb-8">
85
+ <div class="flex items-center">
86
+ <i class="fas fa-film text-3xl text-orange-500 mr-3"></i>
87
+ <h1 class="text-2xl font-bold glow">CinéFutur <span class="text-sm text-gray-400">Lecteur Premium</span></h1>
88
+ </div>
89
+ <div class="flex items-center space-x-4">
90
+ <button id="autoPlayBtn" class="cyber-button bg-gradient-to-r from-purple-600 to-orange-500 text-white py-2 px-4 rounded-lg flex items-center">
91
+ <i class="fas fa-play mr-2"></i> Auto
92
+ </button>
93
+ <div class="relative">
94
+ <input type="text" placeholder="Rechercher..." class="bg-gray-800 border border-gray-700 rounded-lg py-2 px-4 text-white focus:outline-none focus:border-orange-500">
95
+ <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
96
+ </div>
97
  </div>
 
 
 
 
 
 
98
  </header>
99
 
100
+ <!-- Main Content -->
101
+ <main>
102
+ <!-- Current Video Player -->
103
+ <div class="mb-8 bg-gray-900 rounded-xl overflow-hidden shadow-2xl">
104
+ <div class="video-container" id="mainVideoContainer">
105
+ <iframe id="mainVideo" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
106
+ </div>
107
+ <div class="p-4">
108
+ <h2 id="currentFilmTitle" class="text-xl font-bold mb-2">Sélectionnez un film</h2>
109
+ <div class="flex justify-between items-center">
110
+ <div class="flex space-x-2">
111
+ <span class="text-sm text-gray-400"><i class="fas fa-clock mr-1"></i> <span id="currentFilmDuration">--:--</span></span>
112
+ <span class="text-sm text-gray-400"><i class="fas fa-star mr-1 text-yellow-400"></i> <span id="currentFilmRating">--</span>/10</span>
113
+ </div>
114
+ <div class="flex space-x-2">
115
+ <button id="fullscreenBtn" class="cyber-button bg-gray-800 text-white py-1 px-3 rounded-lg text-sm">
116
+ <i class="fas fa-expand mr-1"></i> Plein écran
117
+ </button>
118
+ <button id="nextFilmBtn" class="cyber-button bg-gradient-to-r from-purple-600 to-orange-500 text-white py-1 px-3 rounded-lg text-sm">
119
+ <i class="fas fa-step-forward mr-1"></i> Suivant
120
+ </button>
121
+ </div>
122
  </div>
123
+ <div class="progress-bar">
124
+ <div class="progress-fill" id="progressFill"></div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Film Library -->
130
+ <section>
131
+ <h2 class="text-xl font-bold mb-4 flex items-center">
132
+ <i class="fas fa-film text-orange-500 mr-2"></i>
133
+ <span>Bibliothèque de Films</span>
134
+ </h2>
135
+
136
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
137
+ <!-- Film 1 - Dune -->
138
+ <div class="film-card" data-video="https://www.youtube.com/embed/w0HgHet0sxg" data-title="Dune (2021)" data-duration="2h35m" data-rating="8.0">
139
+ <div class="h-40 bg-cover bg-center" style="background-image: url('https://m.media-amazon.com/images/M/MV5BN2FjNmEyNWMtYzM0ZS00NjIyLTg5YzYtYThlMGVjNzE1OGViXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_.jpg')">
140
+ <div class="bg-black bg-opacity-60 h-full flex items-end p-3">
141
+ <div>
142
+ <h3 class="font-bold">Dune</h3>
143
+ <p class="text-xs text-gray-300">2021 • Sci-Fi</p>
144
  </div>
145
  </div>
146
  </div>
147
+ </div>
148
+
149
+ <!-- Film 2 - Interstellar -->
150
+ <div class="film-card" data-video="https://www.youtube.com/embed/zSWdZVtXT7E" data-title="Interstellar (2014)" data-duration="2h49m" data-rating="8.6">
151
+ <div class="h-40 bg-cover bg-center" style="background-image: url('https://m.media-amazon.com/images/M/MV5BZjdkOTU5MDktM2IxOS00OGEyLWFmMjktY2FiMmZkNWIyODZiXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg')">
152
+ <div class="bg-black bg-opacity-60 h-full flex items-end p-3">
153
+ <div>
154
+ <h3 class="font-bold">Interstellar</h3>
155
+ <p class="text-xs text-gray-300">2014 • Sci-Fi</p>
156
+ </div>
 
 
157
  </div>
158
  </div>
 
 
 
 
159
  </div>
160
 
161
+ <!-- Film 3 - Blade Runner 2049 -->
162
+ <div class="film-card" data-video="https://www.youtube.com/embed/gCcx85zbxz4" data-title="Blade Runner 2049 (2017)" data-duration="2h44m" data-rating="8.0">
163
+ <div class="h-40 bg-cover bg-center" style="background-image: url('https://m.media-amazon.com/images/M/MV5BNzA1Njg4NzYxOV5BMl5BanBnXkFtZTgwODk5NjU3MzI@._V1_FMjpg_UX1000_.jpg')">
164
+ <div class="bg-black bg-opacity-60 h-full flex items-end p-3">
165
+ <div>
166
+ <h3 class="font-bold">Blade Runner 2049</h3>
167
+ <p class="text-xs text-gray-300">2017 • Cyberpunk</p>
168
+ </div>
169
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
170
  </div>
171
  </div>
172
 
173
+ <!-- Film 4 - The Matrix -->
174
+ <div class="film-card" data-video="https://www.youtube.com/embed/vKQi3bBA1y8" data-title="The Matrix (1999)" data-duration="2h16m" data-rating="8.7">
175
+ <div class="h-40 bg-cover bg-center" style="background-image: url('https://m.media-amazon.com/images/M/MV5BNzQzOTk3OTAtNDQ0Zi00ZTVkLWI0MTEtMDllZjNkYzNjNTc4L2ltYWdlXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_.jpg')">
176
+ <div class="bg-black bg-opacity-60 h-full flex items-end p-3">
177
+ <div>
178
+ <h3 class="font-bold">The Matrix</h3>
179
+ <p class="text-xs text-gray-300">1999 • Sci-Fi</p>
180
+ </div>
 
 
 
 
 
 
 
 
181
  </div>
182
  </div>
 
 
 
 
 
 
183
  </div>
 
 
 
 
 
 
 
 
184
 
185
+ <!-- Film 5 - Inception -->
186
+ <div class="film-card" data-video="https://www.youtube.com/embed/YoHD9XEInc0" data-title="Inception (2010)" data-duration="2h28m" data-rating="8.8">
187
+ <div class="h-40 bg-cover bg-center" style="background-image: url('https://m.media-amazon.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_FMjpg_UX1000_.jpg')">
188
+ <div class="bg-black bg-opacity-60 h-full flex items-end p-3">
189
+ <div>
190
+ <h3 class="font-bold">Inception</h3>
191
+ <p class="text-xs text-gray-300">2010 • Sci-Fi</p>
192
+ </div>
193
  </div>
194
  </div>
195
+ </div>
196
+
197
+ <!-- Film 6 - Tenet -->
198
+ <div class="film-card" data-video="https://www.youtube.com/embed/LdOM0x0XDMo" data-title="Tenet (2020)" data-duration="2h30m" data-rating="7.5">
199
+ <div class="h-40 bg-cover bg-center" style="background-image: url('https://m.media-amazon.com/images/M/MV5BYzg0NGM2NjAtNmIxOC00MDJmLTg5ZmItMjE3M2JkMTYyOTQzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_.jpg')">
200
+ <div class="bg-black bg-opacity-60 h-full flex items-end p-3">
201
+ <div>
202
+ <h3 class="font-bold">Tenet</h3>
203
+ <p class="text-xs text-gray-300">2020 • Sci-Fi</p>
204
  </div>
 
205
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
206
  </div>
207
+ </div>
208
+
209
+ <!-- Film 7 - Arrival -->
210
+ <div class="film-card" data-video="https://www.youtube.com/embed/tFMo3UJ4B4g" data-title="Arrival (2016)" data-duration="1h56m" data-rating="7.9">
211
+ <div class="h-40 bg-cover bg-center" style="background-image: url('https://m.media-amazon.com/images/M/MV5BNGU0NTA2YjctYWNlYy00ZDg1LTg5ZTItZWM3MWZiMDI5OGYzL2ltYWdlXkEyXkFqcGdeQXVyNDM3ODU2NDM@._V1_FMjpg_UX1000_.jpg')">
212
+ <div class="bg-black bg-opacity-60 h-full flex items-end p-3">
213
+ <div>
214
+ <h3 class="font-bold">Arrival</h3>
215
+ <p class="text-xs text-gray-300">2016 • Sci-Fi</p>
 
 
 
 
 
 
 
 
 
216
  </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+
221
+ <!-- Film 8 - Ex Machina -->
222
+ <div class="film-card" data-video="https://www.youtube.com/embed/EoQuVnKhxaM" data-title="Ex Machina (2014)" data-duration="1h48m" data-rating="7.7">
223
+ <div class="h-40 bg-cover bg-center" style="background-image: url('https://m.media-amazon.com/images/M/MV5BMTUxNzc0OTIxMV5BMl5BanBnXkFtZTgwNDI3NzU2NDE@._V1_.jpg')">
224
+ <div class="bg-black bg-opacity-60 h-full flex items-end p-3">
225
+ <div>
226
+ <h3 class="font-bold">Ex Machina</h3>
227
+ <p class="text-xs text-gray-300">2014 • Sci-Fi</p>
 
228
  </div>
229
  </div>
230
  </div>
231
  </div>
232
  </div>
233
+ </section>
234
  </main>
235
 
236
+ <!-- Footer -->
237
+ <footer class="mt-12 pt-6 border-t border-gray-800 text-center text-gray-400 text-sm">
238
+ <p>© 2024 CinéFutur - Tous droits réservés</p>
239
+ <p class="mt-1">Films intégrés depuis YouTube - À des fins éducatives uniquement</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
240
  </footer>
241
  </div>
242
+
243
  <script>
244
+ // Configuration des films
245
+ const films = [
246
+ {
247
+ title: "Dune (2021)",
248
+ video: "https://www.youtube.com/embed/w0HgHet0sxg",
249
+ duration: "2h35m",
250
+ rating: "8.0"
251
+ },
252
+ {
253
+ title: "Interstellar (2014)",
254
+ video: "https://www.youtube.com/embed/zSWdZVtXT7E",
255
+ duration: "2h49m",
256
+ rating: "8.6"
257
+ },
258
+ {
259
+ title: "Blade Runner 2049 (2017)",
260
+ video: "https://www.youtube.com/embed/gCcx85zbxz4",
261
+ duration: "2h44m",
262
+ rating: "8.0"
263
+ },
264
+ {
265
+ title: "The Matrix (1999)",
266
+ video: "https://www.youtube.com/embed/vKQi3bBA1y8",
267
+ duration: "2h16m",
268
+ rating: "8.7"
269
+ },
270
+ {
271
+ title: "Inception (2010)",
272
+ video: "https://www.youtube.com/embed/YoHD9XEInc0",
273
+ duration: "2h28m",
274
+ rating: "8.8"
275
+ },
276
+ {
277
+ title: "Tenet (2020)",
278
+ video: "https://www.youtube.com/embed/LdOM0x0XDMo",
279
+ duration: "2h30m",
280
+ rating: "7.5"
281
+ },
282
+ {
283
+ title: "Arrival (2016)",
284
+ video: "https://www.youtube.com/embed/tFMo3UJ4B4g",
285
+ duration: "1h56m",
286
+ rating: "7.9"
287
+ },
288
+ {
289
+ title: "Ex Machina (2014)",
290
+ video: "https://www.youtube.com/embed/EoQuVnKhxaM",
291
+ duration: "1h48m",
292
+ rating: "7.7"
293
+ }
294
+ ];
295
+
296
+ // Éléments DOM
297
+ const mainVideo = document.getElementById('mainVideo');
298
+ const currentFilmTitle = document.getElementById('currentFilmTitle');
299
+ const currentFilmDuration = document.getElementById('currentFilmDuration');
300
+ const currentFilmRating = document.getElementById('currentFilmRating');
301
+ const progressFill = document.getElementById('progressFill');
302
+ const autoPlayBtn = document.getElementById('autoPlayBtn');
303
+ const nextFilmBtn = document.getElementById('nextFilmBtn');
304
+ const fullscreenBtn = document.getElementById('fullscreenBtn');
305
+ const filmCards = document.querySelectorAll('.film-card');
306
+ const mainVideoContainer = document.getElementById('mainVideoContainer');
307
+
308
+ // Variables d'état
309
+ let currentFilmIndex = 0;
310
+ let isAutoPlaying = false;
311
+ let autoPlayInterval;
312
+ let progressInterval;
313
+
314
+ // Charger un film
315
+ function loadFilm(index) {
316
+ if (index >= 0 && index < films.length) {
317
+ currentFilmIndex = index;
318
+ const film = films[index];
319
 
320
+ mainVideo.src = film.video;
321
+ currentFilmTitle.textContent = film.title;
322
+ currentFilmDuration.textContent = film.duration;
323
+ currentFilmRating.textContent = film.rating;
324
 
325
+ // Réinitialiser la barre de progression
326
+ progressFill.style.width = '0%';
 
 
 
 
 
 
 
 
 
 
 
 
 
327
 
328
+ // Démarrer la mise à jour de la progression
329
+ if (progressInterval) clearInterval(progressInterval);
330
+ progressInterval = setInterval(updateProgress, 1000);
331
 
332
+ // Si en mode auto, passer au film suivant après la durée estimée
333
+ if (isAutoPlaying) {
334
+ if (autoPlayInterval) clearInterval(autoPlayInterval);
335
+ const durationInMs = convertDurationToMs(film.duration);
336
+ autoPlayInterval = setTimeout(playNextFilm, durationInMs);
337
  }
338
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
339
  }
340
+
341
+ // Convertir la durée en millisecondes (approximatif)
342
+ function convertDurationToMs(duration) {
343
+ const [hours, minutes] = duration.split('h');
344
+ const mins = minutes ? minutes.replace('m', '') : '0';
345
+ return (parseInt(hours) * 3600 + parseInt(mins) * 60) * 1000;
 
 
 
 
 
346
  }
347
+
348
+ // Mettre à jour la barre de progression
349
+ function updateProgress() {
350
+ const duration = convertDurationToMs(films[currentFilmIndex].duration);
351
+ const elapsed = parseInt(progressFill.style.width || '0');
352
+
353
+ if (elapsed < 100) {
354
+ progressFill.style.width = (elapsed + (100 / (duration / 1000))) + '%';
355
+ } else {
356
+ clearInterval(progressInterval);
357
+ if (isAutoPlaying) playNextFilm();
358
+ }
359
  }
360
+
361
+ // Jouer le film suivant
362
+ function playNextFilm() {
363
+ const nextIndex = (currentFilmIndex + 1) % films.length;
364
+ loadFilm(nextIndex);
 
 
365
  }
366
+
367
+ // Basculer le mode auto
368
+ function toggleAutoPlay() {
369
+ isAutoPlaying = !isAutoPlaying;
370
+
371
+ if (isAutoPlaying) {
372
+ autoPlayBtn.innerHTML = '<i class="fas fa-pause mr-2"></i> Auto';
373
+ const durationInMs = convertDurationToMs(films[currentFilmIndex].duration);
374
+ autoPlayInterval = setTimeout(playNextFilm, durationInMs);
375
+ } else {
376
+ autoPlayBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Auto';
377
+ if (autoPlayInterval) clearInterval(autoPlayInterval);
378
+ }
379
  }
380
+
381
+ // Plein écran
382
+ function toggleFullscreen() {
383
+ if (!document.fullscreenElement) {
384
+ mainVideoContainer.requestFullscreen().catch(err => {
385
+ alert(`Erreur plein écran: ${err.message}`);
386
  });
387
+ } else {
388
+ document.exitFullscreen();
389
+ }
390
+ }
391
+
392
+ // Événements
393
+ autoPlayBtn.addEventListener('click', toggleAutoPlay);
394
+ nextFilmBtn.addEventListener('click', playNextFilm);
395
+ fullscreenBtn.addEventListener('click', toggleFullscreen);
396
+
397
+ filmCards.forEach((card, index) => {
398
+ card.addEventListener('click', () => {
399
+ // Arrêter le mode auto si actif
400
+ if (isAutoPlaying) {
401
+ toggleAutoPlay();
402
+ }
403
+
404
+ // Charger le film sélectionné
405
+ loadFilm(index);
406
  });
407
  });
408
+
409
+ // Charger le premier film au démarrage
410
+ loadFilm(0);
411
  </script>
412
  <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>
413
  </html>
prompts.txt CHANGED
@@ -1 +1,7 @@
1
- importer un site à partir d'un url , image , zip etc.. en version futuriste
 
 
 
 
 
 
 
1
+ importer un site à partir d'un url , image , zip etc.. en version futuriste
2
+ CORRIGER LES ERREUR ET JE VEUX EXPORTER APRES
3
+ je peux pas exporter
4
+ https://huggingface.co/spaces/docto41/cinefutur
5
+ ajouter 7894 nouveau film 2025 et a regarder en auto
6
+ CHARGER TOUTES LES FONCTION EN AUTOMATIQUE
7
+ je veux pas de site d'exemple je veux de vrais film a regarder