Hugging Face's logo

Spaces:
docto41
/
nexus-streaming
Running

App Files Community
docto41 commited on
Commit
f3961fe
·
verified ·
1 Parent(s): 84144f0

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +5 -3
  2. index.html +807 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Nexus Streaming
3
- emoji: 📉
4
  colorFrom: red
5
  colorTo: gray
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: nexus-streaming
3
+ emoji: 🐳
4
  colorFrom: red
5
  colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,807 @@
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>NexusFlix - Portail Cinématographique Quantique</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;900&family=Rajdhani:wght@300;500;700&display=swap');
11
+
12
+ :root {
13
+ --primary: #00f0ff;
14
+ --secondary: #ff00f0;
15
+ --dark: #0a0a20;
16
+ --darker: #050510;
17
+ }
18
+
19
+ body {
20
+ font-family: 'Rajdhani', sans-serif;
21
+ background-color: var(--darker);
22
+ color: white;
23
+ overflow-x: hidden;
24
+ }
25
+
26
+ h1, h2, h3, .font-orbitron {
27
+ font-family: 'Orbitron', sans-serif;
28
+ }
29
+
30
+ .neon-text {
31
+ text-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary), 0 0 20px var(--primary);
32
+ }
33
+
34
+ .neon-box {
35
+ box-shadow: 0 0 10px var(--primary), 0 0 20px rgba(0, 240, 255, 0.3);
36
+ border: 1px solid var(--primary);
37
+ }
38
+
39
+ .pulse {
40
+ animation: pulse 2s infinite;
41
+ }
42
+
43
+ @keyframes pulse {
44
+ 0% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.7); }
45
+ 70% { box-shadow: 0 0 0 10px rgba(0, 240, 255, 0); }
46
+ 100% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0); }
47
+ }
48
+
49
+ .glow {
50
+ animation: glow 3s ease-in-out infinite alternate;
51
+ }
52
+
53
+ @keyframes glow {
54
+ from { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px var(--primary), 0 0 20px var(--primary); }
55
+ to { text-shadow: 0 0 10px #fff, 0 0 15px var(--secondary), 0 0 20px var(--secondary), 0 0 25px var(--secondary); }
56
+ }
57
+
58
+ .scanline {
59
+ position: relative;
60
+ overflow: hidden;
61
+ }
62
+
63
+ .scanline::after {
64
+ content: '';
65
+ position: absolute;
66
+ top: 0;
67
+ left: 0;
68
+ right: 0;
69
+ height: 2px;
70
+ background: rgba(0, 240, 255, 0.5);
71
+ box-shadow: 0 2px 10px rgba(0, 240, 255, 0.7);
72
+ animation: scan 8s linear infinite;
73
+ }
74
+
75
+ @keyframes scan {
76
+ 0% { top: -2px; }
77
+ 100% { top: 100%; }
78
+ }
79
+
80
+ .holographic-card {
81
+ background: linear-gradient(135deg, rgba(10, 10, 40, 0.8) 0%, rgba(5, 5, 20, 0.9) 100%);
82
+ backdrop-filter: blur(10px);
83
+ transform-style: preserve-3d;
84
+ transition: all 0.5s ease;
85
+ }
86
+
87
+ .holographic-card:hover {
88
+ transform: translateY(-10px) scale(1.02);
89
+ box-shadow: 0 20px 30px rgba(0, 240, 255, 0.3);
90
+ }
91
+
92
+ .matrix-bg {
93
+ position: fixed;
94
+ top: 0;
95
+ left: 0;
96
+ width: 100%;
97
+ height: 100%;
98
+ z-index: -1;
99
+ opacity: 0.1;
100
+ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="none" stroke="%2300f0ff" stroke-width="0.5" stroke-dasharray="2 2"/></svg>');
101
+ }
102
+
103
+ .loading-bar {
104
+ position: relative;
105
+ height: 4px;
106
+ background: rgba(255, 255, 255, 0.1);
107
+ overflow: hidden;
108
+ }
109
+
110
+ .loading-bar::after {
111
+ content: '';
112
+ position: absolute;
113
+ left: 0;
114
+ top: 0;
115
+ height: 100%;
116
+ width: 50%;
117
+ background: linear-gradient(90deg, transparent, var(--primary), transparent);
118
+ animation: loading 2s infinite;
119
+ }
120
+
121
+ @keyframes loading {
122
+ 0% { left: -50%; }
123
+ 100% { left: 150%; }
124
+ }
125
+ </style>
126
+ </head>
127
+ <body>
128
+ <!-- Matrix Background -->
129
+ <div class="matrix-bg"></div>
130
+
131
+ <!-- Main Container -->
132
+ <div class="min-h-screen flex flex-col">
133
+ <!-- Header -->
134
+ <header class="bg-black bg-opacity-80 border-b border-gray-800 sticky top-0 z-50 backdrop-blur-md">
135
+ <div class="container mx-auto px-4 py-3">
136
+ <div class="flex justify-between items-center">
137
+ <div class="flex items-center space-x-4">
138
+ <div class="neon-box rounded-full p-2 bg-black">
139
+ <i class="fas fa-film text-2xl text-cyan-400"></i>
140
+ </div>
141
+ <h1 class="text-3xl font-bold font-orbitron neon-text">Nexus<span class="text-purple-400">Flix</span></h1>
142
+ </div>
143
+
144
+ <div class="flex items-center space-x-6">
145
+ <div class="relative group">
146
+ <button class="px-4 py-2 bg-gradient-to-r from-cyan-500 to-purple-600 rounded-full font-bold hover:opacity-90 transition-all duration-300 group-hover:scale-105">
147
+ <i class="fas fa-user-astronaut mr-2"></i> Mon Portail
148
+ </button>
149
+ <div class="absolute right-0 mt-2 w-64 bg-gray-900 bg-opacity-90 border border-cyan-400 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50">
150
+ <div class="p-4">
151
+ <div class="flex items-center mb-4">
152
+ <div class="h-10 w-10 rounded-full bg-purple-500 flex items-center justify-center mr-3">
153
+ <i class="fas fa-user-secret"></i>
154
+ </div>
155
+ <div>
156
+ <p class="font-bold">Admin Quantique</p>
157
+ <p class="text-xs text-gray-400">Niveau d'accès: Omega</p>
158
+ </div>
159
+ </div>
160
+ <hr class="border-gray-700 my-2">
161
+ <a href="#" class="block py-2 px-2 hover:bg-gray-800 rounded"><i class="fas fa-cog mr-2 text-cyan-400"></i> Paramètres</a>
162
+ <a href="#" class="block py-2 px-2 hover:bg-gray-800 rounded"><i class="fas fa-robot mr-2 text-purple-400"></i> Robots d'indexation</a>
163
+ <a href="#" class="block py-2 px-2 hover:bg-gray-800 rounded"><i class="fas fa-sign-out-alt mr-2 text-red-400"></i> Déconnexion</a>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </div>
170
+
171
+ <div class="loading-bar"></div>
172
+ </header>
173
+
174
+ <!-- Main Content -->
175
+ <main class="flex-grow container mx-auto px-4 py-8">
176
+ <!-- Stats Overview -->
177
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
178
+ <div class="holographic-card rounded-xl p-6 scanline">
179
+ <div class="flex items-center justify-between">
180
+ <div>
181
+ <p class="text-gray-400 uppercase text-sm">Films Indexés</p>
182
+ <p class="text-4xl font-bold font-orbitron text-cyan-400">978,978,574</p>
183
+ </div>
184
+ <div class="text-4xl text-purple-400">
185
+ <i class="fas fa-database"></i>
186
+ </div>
187
+ </div>
188
+ <div class="mt-4 pt-2 border-t border-gray-700">
189
+ <p class="text-xs text-gray-400"><span class="text-green-400"><i class="fas fa-arrow-up"></i> 12,457</span> nouveaux aujourd'hui</p>
190
+ </div>
191
+ </div>
192
+
193
+ <div class="holographic-card rounded-xl p-6 scanline">
194
+ <div class="flex items-center justify-between">
195
+ <div>
196
+ <p class="text-gray-400 uppercase text-sm">Qualités Disponibles</p>
197
+ <p class="text-4xl font-bold font-orbitron text-purple-400">27</p>
198
+ </div>
199
+ <div class="text-4xl text-cyan-400">
200
+ <i class="fas fa-layer-group"></i>
201
+ </div>
202
+ </div>
203
+ <div class="mt-4 pt-2 border-t border-gray-700">
204
+ <p class="text-xs text-gray-400">PM4, EMB, HD, UHD, 8K, etc.</p>
205
+ </div>
206
+ </div>
207
+
208
+ <div class="holographic-card rounded-xl p-6 scanline">
209
+ <div class="flex items-center justify-between">
210
+ <div>
211
+ <p class="text-gray-400 uppercase text-sm">Langues</p>
212
+ <p class="text-4xl font-bold font-orbitron text-green-400">48</p>
213
+ </div>
214
+ <div class="text-4xl text-yellow-400">
215
+ <i class="fas fa-language"></i>
216
+ </div>
217
+ </div>
218
+ <div class="mt-4 pt-2 border-t border-gray-700">
219
+ <p class="text-xs text-gray-400"><span class="text-cyan-400">Français</span> disponible sur 89%</p>
220
+ </div>
221
+ </div>
222
+
223
+ <div class="holographic-card rounded-xl p-6 scanline">
224
+ <div class="flex items-center justify-between">
225
+ <div>
226
+ <p class="text-gray-400 uppercase text-sm">Robots Actifs</p>
227
+ <p class="text-4xl font-bold font-orbitron text-yellow-400">1,248</p>
228
+ </div>
229
+ <div class="text-4xl text-red-400">
230
+ <i class="fas fa-robot"></i>
231
+ </div>
232
+ </div>
233
+ <div class="mt-4 pt-2 border-t border-gray-700">
234
+ <p class="text-xs text-gray-400">Indexation en temps réel</p>
235
+ </div>
236
+ </div>
237
+ </div>
238
+
239
+ <!-- Search and Filters -->
240
+ <div class="mb-8">
241
+ <div class="holographic-card rounded-xl p-6 mb-6 scanline">
242
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
243
+ <div class="relative flex-grow md:mr-4">
244
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
245
+ <i class="fas fa-search text-cyan-400"></i>
246
+ </div>
247
+ <input type="text" class="w-full bg-gray-900 bg-opacity-70 border border-cyan-400 rounded-lg pl-10 pr-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent" placeholder="Recherche quantique parmi 978,978,574 films...">
248
+ </div>
249
+
250
+ <div class="flex space-x-2">
251
+ <div class="relative group">
252
+ <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 border border-gray-700 rounded-lg flex items-center transition-all duration-300 group-hover:border-cyan-400">
253
+ <i class="fas fa-filter mr-2 text-purple-400"></i>
254
+ <span>Filtres</span>
255
+ <i class="fas fa-chevron-down ml-2 text-xs"></i>
256
+ </button>
257
+ <div class="absolute right-0 mt-2 w-64 bg-gray-900 bg-opacity-90 border border-cyan-400 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50">
258
+ <div class="p-4">
259
+ <div class="mb-4">
260
+ <label class="block text-sm text-gray-400 mb-1">Qualité</label>
261
+ <select class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-white">
262
+ <option>Toutes</option>
263
+ <option>8K UHD</option>
264
+ <option>4K UHD</option>
265
+ <option>HD 1080p</option>
266
+ <option>HD 720p</option>
267
+ <option>PM4</option>
268
+ <option>EMB</option>
269
+ </select>
270
+ </div>
271
+ <div class="mb-4">
272
+ <label class="block text-sm text-gray-400 mb-1">Langue</label>
273
+ <select class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-white">
274
+ <option>Français</option>
275
+ <option>Anglais</option>
276
+ <option>Multilingue</option>
277
+ <option>Toutes</option>
278
+ </select>
279
+ </div>
280
+ <div class="mb-4">
281
+ <label class="block text-sm text-gray-400 mb-1">Année</label>
282
+ <input type="range" min="1900" max="2023" class="w-full">
283
+ </div>
284
+ <button class="w-full bg-cyan-500 hover:bg-cyan-600 text-white py-2 rounded-lg text-sm font-bold transition-colors duration-300">
285
+ Appliquer
286
+ </button>
287
+ </div>
288
+ </div>
289
+ </div>
290
+
291
+ <button class="px-4 py-2 bg-gradient-to-r from-purple-600 to-cyan-500 rounded-lg flex items-center hover:opacity-90 transition-all duration-300">
292
+ <i class="fas fa-bolt mr-2"></i>
293
+ <span>Recherche IA</span>
294
+ </button>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+
300
+ <!-- Content Sections -->
301
+ <div class="mb-12">
302
+ <div class="flex items-center justify-between mb-6">
303
+ <h2 class="text-2xl font-bold font-orbitron neon-text flex items-center">
304
+ <span class="w-3 h-3 rounded-full bg-cyan-400 mr-3 pulse"></span>
305
+ Films Récemment Indexés
306
+ </h2>
307
+ <a href="#" class="text-sm text-cyan-400 hover:text-purple-400 flex items-center transition-colors duration-300">
308
+ Voir tout <i class="fas fa-arrow-right ml-1"></i>
309
+ </a>
310
+ </div>
311
+
312
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
313
+ <!-- Movie Card 1 -->
314
+ <div class="holographic-card rounded-lg overflow-hidden relative group">
315
+ <div class="relative pt-[150%] bg-gray-800">
316
+ <img src="https://image.tmdb.org/t/p/w500/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg" alt="Movie Poster" class="absolute top-0 left-0 w-full h-full object-cover">
317
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
318
+ <div class="absolute bottom-0 left-0 right-0 p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
319
+ <div class="flex justify-between items-center">
320
+ <span class="text-xs bg-cyan-500 text-black px-2 py-1 rounded font-bold">HD 1080p</span>
321
+ <span class="text-xs bg-purple-500 text-white px-2 py-1 rounded font-bold">FR</span>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ <div class="p-3">
326
+ <h3 class="font-bold text-sm truncate">Interstellar</h3>
327
+ <div class="flex justify-between items-center mt-1">
328
+ <span class="text-xs text-gray-400">2014</span>
329
+ <div class="flex items-center">
330
+ <i class="fas fa-star text-yellow-400 text-xs mr-1"></i>
331
+ <span class="text-xs">8.6</span>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-black bg-opacity-70">
336
+ <button class="bg-cyan-500 hover:bg-cyan-600 text-white rounded-full p-3 transition-colors duration-300 transform group-hover:scale-110">
337
+ <i class="fas fa-play"></i>
338
+ </button>
339
+ </div>
340
+ </div>
341
+
342
+ <!-- Movie Card 2 -->
343
+ <div class="holographic-card rounded-lg overflow-hidden relative group">
344
+ <div class="relative pt-[150%] bg-gray-800">
345
+ <img src="https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQHlyCZ8O7C.jpg" alt="Movie Poster" class="absolute top-0 left-0 w-full h-full object-cover">
346
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
347
+ <div class="absolute bottom-0 left-0 right-0 p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
348
+ <div class="flex justify-between items-center">
349
+ <span class="text-xs bg-green-500 text-black px-2 py-1 rounded font-bold">4K UHD</span>
350
+ <span class="text-xs bg-purple-500 text-white px-2 py-1 rounded font-bold">FR</span>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ <div class="p-3">
355
+ <h3 class="font-bold text-sm truncate">Inception</h3>
356
+ <div class="flex justify-between items-center mt-1">
357
+ <span class="text-xs text-gray-400">2010</span>
358
+ <div class="flex items-center">
359
+ <i class="fas fa-star text-yellow-400 text-xs mr-1"></i>
360
+ <span class="text-xs">8.8</span>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-black bg-opacity-70">
365
+ <button class="bg-cyan-500 hover:bg-cyan-600 text-white rounded-full p-3 transition-colors duration-300 transform group-hover:scale-110">
366
+ <i class="fas fa-play"></i>
367
+ </button>
368
+ </div>
369
+ </div>
370
+
371
+ <!-- Movie Card 3 -->
372
+ <div class="holographic-card rounded-lg overflow-hidden relative group">
373
+ <div class="relative pt-[150%] bg-gray-800">
374
+ <img src="https://image.tmdb.org/t/p/w500/vZloFAK7NmvMHKSs1hH3RB33vH4.jpg" alt="Movie Poster" class="absolute top-0 left-0 w-full h-full object-cover">
375
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
376
+ <div class="absolute bottom-0 left-0 right-0 p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
377
+ <div class="flex justify-between items-center">
378
+ <span class="text-xs bg-red-500 text-white px-2 py-1 rounded font-bold">8K UHD</span>
379
+ <span class="text-xs bg-purple-500 text-white px-2 py-1 rounded font-bold">FR</span>
380
+ </div>
381
+ </div>
382
+ </div>
383
+ <div class="p-3">
384
+ <h3 class="font-bold text-sm truncate">The Dark Knight</h3>
385
+ <div class="flex justify-between items-center mt-1">
386
+ <span class="text-xs text-gray-400">2008</span>
387
+ <div class="flex items-center">
388
+ <i class="fas fa-star text-yellow-400 text-xs mr-1"></i>
389
+ <span class="text-xs">9.0</span>
390
+ </div>
391
+ </div>
392
+ </div>
393
+ <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-black bg-opacity-70">
394
+ <button class="bg-cyan-500 hover:bg-cyan-600 text-white rounded-full p-3 transition-colors duration-300 transform group-hover:scale-110">
395
+ <i class="fas fa-play"></i>
396
+ </button>
397
+ </div>
398
+ </div>
399
+
400
+ <!-- Movie Card 4 -->
401
+ <div class="holographic-card rounded-lg overflow-hidden relative group">
402
+ <div class="relative pt-[150%] bg-gray-800">
403
+ <img src="https://image.tmdb.org/t/p/w500/7WsyChQLEftFiDOVTGkv3hFpyyt.jpg" alt="Movie Poster" class="absolute top-0 left-0 w-full h-full object-cover">
404
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
405
+ <div class="absolute bottom-0 left-0 right-0 p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
406
+ <div class="flex justify-between items-center">
407
+ <span class="text-xs bg-cyan-500 text-black px-2 py-1 rounded font-bold">HD 1080p</span>
408
+ <span class="text-xs bg-purple-500 text-white px-2 py-1 rounded font-bold">FR</span>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ <div class="p-3">
413
+ <h3 class="font-bold text-sm truncate">Avengers: Endgame</h3>
414
+ <div class="flex justify-between items-center mt-1">
415
+ <span class="text-xs text-gray-400">2019</span>
416
+ <div class="flex items-center">
417
+ <i class="fas fa-star text-yellow-400 text-xs mr-1"></i>
418
+ <span class="text-xs">8.4</span>
419
+ </div>
420
+ </div>
421
+ </div>
422
+ <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-black bg-opacity-70">
423
+ <button class="bg-cyan-500 hover:bg-cyan-600 text-white rounded-full p-3 transition-colors duration-300 transform group-hover:scale-110">
424
+ <i class="fas fa-play"></i>
425
+ </button>
426
+ </div>
427
+ </div>
428
+
429
+ <!-- Movie Card 5 -->
430
+ <div class="holographic-card rounded-lg overflow-hidden relative group">
431
+ <div class="relative pt-[150%] bg-gray-800">
432
+ <img src="https://image.tmdb.org/t/p/w500/6FfCtAuVAW8XJjZ7eWeLibRLWTw.jpg" alt="Movie Poster" class="absolute top-0 left-0 w-full h-full object-cover">
433
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
434
+ <div class="absolute bottom-0 left-0 right-0 p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
435
+ <div class="flex justify-between items-center">
436
+ <span class="text-xs bg-green-500 text-black px-2 py-1 rounded font-bold">4K UHD</span>
437
+ <span class="text-xs bg-purple-500 text-white px-2 py-1 rounded font-bold">FR</span>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ <div class="p-3">
442
+ <h3 class="font-bold text-sm truncate">Joker</h3>
443
+ <div class="flex justify-between items-center mt-1">
444
+ <span class="text-xs text-gray-400">2019</span>
445
+ <div class="flex items-center">
446
+ <i class="fas fa-star text-yellow-400 text-xs mr-1"></i>
447
+ <span class="text-xs">8.4</span>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-black bg-opacity-70">
452
+ <button class="bg-cyan-500 hover:bg-cyan-600 text-white rounded-full p-3 transition-colors duration-300 transform group-hover:scale-110">
453
+ <i class="fas fa-play"></i>
454
+ </button>
455
+ </div>
456
+ </div>
457
+
458
+ <!-- Movie Card 6 -->
459
+ <div class="holographic-card rounded-lg overflow-hidden relative group">
460
+ <div class="relative pt-[150%] bg-gray-800">
461
+ <img src="https://image.tmdb.org/t/p/w500/1Lh9LER4xRQ3INFFi2dfS2hpRwV.jpg" alt="Movie Poster" class="absolute top-0 left-0 w-full h-full object-cover">
462
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
463
+ <div class="absolute bottom-0 left-0 right-0 p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
464
+ <div class="flex justify-between items-center">
465
+ <span class="text-xs bg-gray-500 text-white px-2 py-1 rounded font-bold">EMB</span>
466
+ <span class="text-xs bg-purple-500 text-white px-2 py-1 rounded font-bold">FR</span>
467
+ </div>
468
+ </div>
469
+ </div>
470
+ <div class="p-3">
471
+ <h3 class="font-bold text-sm truncate">The Shawshank Redemption</h3>
472
+ <div class="flex justify-between items-center mt-1">
473
+ <span class="text-xs text-gray-400">1994</span>
474
+ <div class="flex items-center">
475
+ <i class="fas fa-star text-yellow-400 text-xs mr-1"></i>
476
+ <span class="text-xs">9.3</span>
477
+ </div>
478
+ </div>
479
+ </div>
480
+ <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-black bg-opacity-70">
481
+ <button class="bg-cyan-500 hover:bg-cyan-600 text-white rounded-full p-3 transition-colors duration-300 transform group-hover:scale-110">
482
+ <i class="fas fa-play"></i>
483
+ </button>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </div>
488
+
489
+ <!-- Player Section -->
490
+ <div class="mb-12">
491
+ <div class="flex items-center justify-between mb-6">
492
+ <h2 class="text-2xl font-bold font-orbitron neon-text flex items-center">
493
+ <span class="w-3 h-3 rounded-full bg-purple-400 mr-3 pulse"></span>
494
+ Lecteur Quantique Nexus
495
+ </h2>
496
+ <div class="flex items-center space-x-2">
497
+ <span class="text-xs bg-cyan-500 text-black px-2 py-1 rounded-full font-bold">HD 1080p</span>
498
+ <span class="text-xs bg-purple-500 text-white px-2 py-1 rounded-full font-bold">FR</span>
499
+ <span class="text-xs bg-green-500 text-black px-2 py-1 rounded-full font-bold">4K</span>
500
+ <span class="text-xs bg-red-500 text-white px-2 py-1 rounded-full font-bold">8K</span>
501
+ </div>
502
+ </div>
503
+
504
+ <div class="holographic-card rounded-xl overflow-hidden scanline">
505
+ <div class="relative pt-[56.25%] bg-black">
506
+ <div class="absolute inset-0 flex items-center justify-center">
507
+ <div class="text-center">
508
+ <div class="text-6xl mb-4 text-cyan-400">
509
+ <i class="fas fa-play-circle"></i>
510
+ </div>
511
+ <h3 class="text-xl font-bold font-orbitron mb-2">Prêt pour l'expérience Nexus</h3>
512
+ <p class="text-gray-400 max-w-md mx-auto">Sélectionnez un film pour activer le lecteur quantique avec intégration robotisée des flux</p>
513
+ <div class="mt-6 flex justify-center space-x-4">
514
+ <button class="px-6 py-2 bg-cyan-500 hover:bg-cyan-600 text-black rounded-full font-bold flex items-center transition-colors duration-300">
515
+ <i class="fas fa-random mr-2"></i> Aléatoire
516
+ </button>
517
+ <button class="px-6 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded-full font-bold flex items-center transition-colors duration-300">
518
+ <i class="fas fa-robot mr-2"></i> IA Suggest
519
+ </button>
520
+ </div>
521
+ </div>
522
+ </div>
523
+ </div>
524
+
525
+ <div class="p-4 bg-gray-900 bg-opacity-70">
526
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between">
527
+ <div class="mb-4 md:mb-0">
528
+ <h3 class="font-bold text-lg">Système de Lecture Nexus</h3>
529
+ <p class="text-sm text-gray-400">Technologie quantique avec intégration PM4/EMB/HD</p>
530
+ </div>
531
+ <div class="flex space-x-2">
532
+ <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg text-sm flex items-center">
533
+ <i class="fas fa-cog mr-2 text-cyan-400"></i> Paramètres
534
+ </button>
535
+ <button class="px-4 py-2 bg-gradient-to-r from-cyan-500 to-purple-600 hover:opacity-90 rounded-lg text-sm font-bold flex items-center">
536
+ <i class="fas fa-bolt mr-2"></i> Activer Nexus
537
+ </button>
538
+ </div>
539
+ </div>
540
+ </div>
541
+ </div>
542
+ </div>
543
+
544
+ <!-- Categories -->
545
+ <div class="mb-12">
546
+ <div class="flex items-center justify-between mb-6">
547
+ <h2 class="text-2xl font-bold font-orbitron neon-text flex items-center">
548
+ <span class="w-3 h-3 rounded-full bg-green-400 mr-3 pulse"></span>
549
+ Catégories Quantiques
550
+ </h2>
551
+ <a href="#" class="text-sm text-cyan-400 hover:text-purple-400 flex items-center transition-colors duration-300">
552
+ Explorer toutes <i class="fas fa-arrow-right ml-1"></i>
553
+ </a>
554
+ </div>
555
+
556
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
557
+ <a href="#" class="holographic-card rounded-lg p-6 text-center hover:bg-gradient-to-br from-cyan-500 to-purple-600 transition-all duration-300 group">
558
+ <div class="text-4xl mb-3 text-cyan-400 group-hover:text-white">
559
+ <i class="fas fa-space-shuttle"></i>
560
+ </div>
561
+ <h3 class="font-bold group-hover:text-white">Science-Fiction</h3>
562
+ <p class="text-xs text-gray-400 group-hover:text-white">12,457 films</p>
563
+ </a>
564
+
565
+ <a href="#" class="holographic-card rounded-lg p-6 text-center hover:bg-gradient-to-br from-purple-500 to-cyan-600 transition-all duration-300 group">
566
+ <div class="text-4xl mb-3 text-purple-400 group-hover:text-white">
567
+ <i class="fas fa-user-astronaut"></i>
568
+ </div>
569
+ <h3 class="font-bold group-hover:text-white">Action</h3>
570
+ <p class="text-xs text-gray-400 group-hover:text-white">8,742 films</p>
571
+ </a>
572
+
573
+ <a href="#" class="holographic-card rounded-lg p-6 text-center hover:bg-gradient-to-br from-green-500 to-cyan-600 transition-all duration-300 group">
574
+ <div class="text-4xl mb-3 text-green-400 group-hover:text-white">
575
+ <i class="fas fa-laugh-beam"></i>
576
+ </div>
577
+ <h3 class="font-bold group-hover:text-white">Comédie</h3>
578
+ <p class="text-xs text-gray-400 group-hover:text-white">6,521 films</p>
579
+ </a>
580
+
581
+ <a href="#" class="holographic-card rounded-lg p-6 text-center hover:bg-gradient-to-br from-red-500 to-purple-600 transition-all duration-300 group">
582
+ <div class="text-4xl mb-3 text-red-400 group-hover:text-white">
583
+ <i class="fas fa-heart-broken"></i>
584
+ </div>
585
+ <h3 class="font-bold group-hover:text-white">Drame</h3>
586
+ <p class="text-xs text-gray-400 group-hover:text-white">5,987 films</p>
587
+ </a>
588
+
589
+ <a href="#" class="holographic-card rounded-lg p-6 text-center hover:bg-gradient-to-br from-yellow-500 to-red-600 transition-all duration-300 group">
590
+ <div class="text-4xl mb-3 text-yellow-400 group-hover:text-white">
591
+ <i class="fas fa-ghost"></i>
592
+ </div>
593
+ <h3 class="font-bold group-hover:text-white">Horreur</h3>
594
+ <p class="text-xs text-gray-400 group-hover:text-white">4,215 films</p>
595
+ </a>
596
+
597
+ <a href="#" class="holographic-card rounded-lg p-6 text-center hover:bg-gradient-to-br from-blue-500 to-cyan-600 transition-all duration-300 group">
598
+ <div class="text-4xl mb-3 text-blue-400 group-hover:text-white">
599
+ <i class="fas fa-atom"></i>
600
+ </div>
601
+ <h3 class="font-bold group-hover:text-white">Documentaire</h3>
602
+ <p class="text-xs text-gray-400 group-hover:text-white">3,784 films</p>
603
+ </a>
604
+ </div>
605
+ </div>
606
+
607
+ <!-- Robot Status -->
608
+ <div class="mb-12">
609
+ <div class="flex items-center justify-between mb-6">
610
+ <h2 class="text-2xl font-bold font-orbitron neon-text flex items-center">
611
+ <span class="w-3 h-3 rounded-full bg-red-400 mr-3 pulse"></span>
612
+ Statut des Robots d'Indexation
613
+ </h2>
614
+ <div class="flex items-center">
615
+ <span class="text-xs bg-green-500 text-black px-2 py-1 rounded-full font-bold mr-2">1,248 ACTIFS</span>
616
+ <a href="#" class="text-sm text-cyan-400 hover:text-purple-400 flex items-center transition-colors duration-300">
617
+ Contrôle <i class="fas fa-terminal ml-1"></i>
618
+ </a>
619
+ </div>
620
+ </div>
621
+
622
+ <div class="holographic-card rounded-xl p-6 scanline">
623
+ <div class="overflow-x-auto">
624
+ <table class="min-w-full divide-y divide-gray-700">
625
+ <thead>
626
+ <tr>
627
+ <th class="px-4 py-3 text-left text-xs font-bold text-cyan-400 uppercase tracking-wider">Robot ID</th>
628
+ <th class="px-4 py-3 text-left text-xs font-bold text-purple-400 uppercase tracking-wider">Type</th>
629
+ <th class="px-4 py-3 text-left text-xs font-bold text-green-400 uppercase tracking-wider">Statut</th>
630
+ <th class="px-4 py-3 text-left text-xs font-bold text-yellow-400 uppercase tracking-wider">Films Indexés</th>
631
+ <th class="px-4 py-3 text-left text-xs font-bold text-red-400 uppercase tracking-wider">Vitesse</th>
632
+ <th class="px-4 py-3 text-left text-xs font-bold text-blue-400 uppercase tracking-wider">Dernière Activité</th>
633
+ </tr>
634
+ </thead>
635
+ <tbody class="divide-y divide-gray-800">
636
+ <tr>
637
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-mono">NX-4875</td>
638
+ <td class="px-4 py-3 whitespace-nowrap text-sm">PM4 Scanner</td>
639
+ <td class="px-4 py-3 whitespace-nowrap">
640
+ <span class="px-2 py-1 text-xs rounded-full bg-green-500 text-black font-bold">ACTIF</span>
641
+ </td>
642
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-mono">12,457</td>
643
+ <td class="px-4 py-3 whitespace-nowrap text-sm">4.7GHz</td>
644
+ <td class="px-4 py-3 whitespace-nowrap text-sm">2 secondes</td>
645
+ </tr>
646
+ <tr>
647
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-mono">NX-9123</td>
648
+ <td class="px-4 py-3 whitespace-nowrap text-sm">HD Miner</td>
649
+ <td class="px-4 py-3 whitespace-nowrap">
650
+ <span class="px-2 py-1 text-xs rounded-full bg-green-500 text-black font-bold">ACTIF</span>
651
+ </td>
652
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-mono">8,742</td>
653
+ <td class="px-4 py-3 whitespace-nowrap text-sm">5.2GHz</td>
654
+ <td class="px-4 py-3 whitespace-nowrap text-sm">5 secondes</td>
655
+ </tr>
656
+ <tr>
657
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-mono">NX-3467</td>
658
+ <td class="px-4 py-3 whitespace-nowrap text-sm">8K Hunter</td>
659
+ <td class="px-4 py-3 whitespace-nowrap">
660
+ <span class="px-2 py-1 text-xs rounded-full bg-yellow-500 text-black font-bold">SCAN</span>
661
+ </td>
662
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-mono">6,521</td>
663
+ <td class="px-4 py-3 whitespace-nowrap text-sm">6.1GHz</td>
664
+ <td class="px-4 py-3 whitespace-nowrap text-sm">12 secondes</td>
665
+ </tr>
666
+ <tr>
667
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-mono">NX-7890</td>
668
+ <td class="px-4 py-3 whitespace-nowrap text-sm">EMB Locator</td>
669
+ <td class="px-4 py-3 whitespace-nowrap">
670
+ <span class="px-2 py-1 text-xs rounded-full bg-green-500 text-black font-bold">ACTIF</span>
671
+ </td>
672
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-mono">5,987</td>
673
+ <td class="px-4 py-3 whitespace-nowrap text-sm">4.3GHz</td>
674
+ <td class="px-4 py-3 whitespace-nowrap text-sm">3 secondes</td>
675
+ </tr>
676
+ <tr>
677
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-mono">NX-2345</td>
678
+ <td class="px-4 py-3 whitespace-nowrap text-sm">FR Translator</td>
679
+ <td class="px-4 py-3 whitespace-nowrap">
680
+ <span class="px-2 py-1 text-xs rounded-full bg-red-500 text-white font-bold">PAUSE</span>
681
+ </td>
682
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-mono">4,215</td>
683
+ <td class="px-4 py-3 whitespace-nowrap text-sm">3.8GHz</td>
684
+ <td class="px-4 py-3 whitespace-nowrap text-sm">2 minutes</td>
685
+ </tr>
686
+ </tbody>
687
+ </table>
688
+ </div>
689
+
690
+ <div class="mt-6 flex justify-between items-center">
691
+ <div class="text-sm text-gray-400">
692
+ <span class="font-bold text-cyan-400">1,243</span> robots actifs sur <span class="font-bold text-purple-400">1,248</span>
693
+ </div>
694
+ <button class="px-4 py-2 bg-gradient-to-r from-purple-600 to-cyan-500 rounded-lg text-sm font-bold hover:opacity-90 transition-all duration-300">
695
+ <i class="fas fa-rocket mr-2"></i> Lancer tous les robots
696
+ </button>
697
+ </div>
698
+ </div>
699
+ </div>
700
+ </main>
701
+
702
+ <!-- Footer -->
703
+ <footer class="bg-black bg-opacity-80 border-t border-gray-800 py-8">
704
+ <div class="container mx-auto px-4">
705
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
706
+ <div>
707
+ <h3 class="text-lg font-bold font-orbitron text-cyan-400 mb-4">NexusFlix</h3>
708
+ <p class="text-sm text-gray-400">Portail cinématographique quantique avec 978,978,574 films indexés et systèmes robotisés avancés.</p>
709
+ </div>
710
+ <div>
711
+ <h3 class="text-lg font-bold font-orbitron text-purple-400 mb-4">Navigation</h3>
712
+ <ul class="space-y-2">
713
+ <li><a href="#" class="text-sm text-gray-400 hover:text-cyan-400 transition-colors duration-300">Accueil</a></li>
714
+ <li><a href="#" class="text-sm text-gray-400 hover:text-cyan-400 transition-colors duration-300">Films</a></li>
715
+ <li><a href="#" class="text-sm text-gray-400 hover:text-cyan-400 transition-colors duration-300">Catégories</a></li>
716
+ <li><a href="#" class="text-sm text-gray-400 hover:text-cyan-400 transition-colors duration-300">Statistiques</a></li>
717
+ </ul>
718
+ </div>
719
+ <div>
720
+ <h3 class="text-lg font-bold font-orbitron text-green-400 mb-4">Technologies</h3>
721
+ <ul class="space-y-2">
722
+ <li><a href="#" class="text-sm text-gray-400 hover:text-cyan-400 transition-colors duration-300">PM4 Scanner</a></li>
723
+ <li><a href="#" class="text-sm text-gray-400 hover:text-cyan-400 transition-colors duration-300">EMB Locator</a></li>
724
+ <li><a href="#" class="text-sm text-gray-400 hover:text-cyan-400 transition-colors duration-300">HD Miner</a></li>
725
+ <li><a href="#" class="text-sm text-gray-400 hover:text-cyan-400 transition-colors duration-300">8K Hunter</a></li>
726
+ </ul>
727
+ </div>
728
+ <div>
729
+ <h3 class="text-lg font-bold font-orbitron text-yellow-400 mb-4">Sécurité</h3>
730
+ <p class="text-sm text-gray-400 mb-4">Accès protégé par cryptographie quantique.</p>
731
+ <div class="flex space-x-4">
732
+ <a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors duration-300">
733
+ <i class="fab fa-github"></i>
734
+ </a>
735
+ <a href="#" class="text-gray-400 hover:text-purple-400 transition-colors duration-300">
736
+ <i class="fab fa-discord"></i>
737
+ </a>
738
+ <a href="#" class="text-gray-400 hover:text-red-400 transition-colors duration-300">
739
+ <i class="fab fa-reddit"></i>
740
+ </a>
741
+ </div>
742
+ </div>
743
+ </div>
744
+
745
+ <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
746
+ <p class="text-sm text-gray-500 mb-4 md:mb-0">© 2023 NexusFlix Quantum. Tous droits réservés.</p>
747
+ <div class="flex space-x-6">
748
+ <a href="#" class="text-sm text-gray-500 hover:text-cyan-400 transition-colors duration-300">Confidentialité</a>
749
+ <a href="#" class="text-sm text-gray-500 hover:text-cyan-400 transition-colors duration-300">Conditions</a>
750
+ <a href="#" class="text-sm text-gray-500 hover:text-cyan-400 transition-colors duration-300">API</a>
751
+ </div>
752
+ </div>
753
+ </div>
754
+ </footer>
755
+ </div>
756
+
757
+ <!-- Floating Action Button -->
758
+ <div class="fixed bottom-6 right-6 z-50">
759
+ <button class="w-14 h-14 rounded-full bg-gradient-to-br from-purple-600 to-cyan-500 text-white flex items-center justify-center shadow-lg hover:scale-110 transition-transform duration-300 pulse">
760
+ <i class="fas fa-robot text-xl"></i>
761
+ </button>
762
+ </div>
763
+
764
+ <!-- Scripts -->
765
+ <script>
766
+ // Animation for holographic cards on scroll
767
+ document.addEventListener('DOMContentLoaded', function() {
768
+ const cards = document.querySelectorAll('.holographic-card');
769
+
770
+ const observer = new IntersectionObserver((entries) => {
771
+ entries.forEach(entry => {
772
+ if (entry.isIntersecting) {
773
+ entry.target.style.opacity = '1';
774
+ entry.target.style.transform = 'translateY(0)';
775
+ }
776
+ });
777
+ }, { threshold: 0.1 });
778
+
779
+ cards.forEach(card => {
780
+ card.style.opacity = '0';
781
+ card.style.transform = 'translateY(20px)';
782
+ card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
783
+ observer.observe(card);
784
+ });
785
+
786
+ // Matrix background animation
787
+ const matrixBg = document.querySelector('.matrix-bg');
788
+ let position = 0;
789
+ setInterval(() => {
790
+ position = (position + 1) % 100;
791
+ matrixBg.style.backgroundPosition = `0 ${position}px`;
792
+ }, 100);
793
+
794
+ // Terminal effect for robot status
795
+ const robotRows = document.querySelectorAll('tbody tr');
796
+ robotRows.forEach(row => {
797
+ row.addEventListener('mouseenter', () => {
798
+ row.style.backgroundColor = 'rgba(0, 240, 255, 0.05)';
799
+ });
800
+ row.addEventListener('mouseleave', () => {
801
+ row.style.backgroundColor = '';
802
+ });
803
+ });
804
+ });
805
+ </script>
806
+ <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/nexus-streaming" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
807
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ creer un tableaux de bord immense avec 978978574 films :Jeton d'accès en lecture à l'API eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmYjQzN2IxMDcyN2E1YTRlYjhkOTEzNGUyOWM4MmFlMCIsIm5iZiI6MTY4MDYzNzkxMC44NjUsInN1YiI6IjY0MmM3ZmQ2OGI5NTllMDBmNDRkNzNhMCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.Nhl261Ha3z0Ujg5vM1PpFoZBiTGjlXQ1g9VFPh6dVvs Clé d'API fb437b10727a5a4eb8d9134e29c82ae0 , avec les plus puissant des lecteur de films avec intégration des liens url part système robotisé le plus sophistiqué avec PM4 .EMB .HD ECT... avec version Français interfaces tres futuriste et tres animéé je veux pas de site d'exemple , je veux pas de site etc...