Hugging Face's logo

Spaces:
docto41
/
neoflix
Running

App Files Community
docto41 commited on
Commit
268e545
·
verified ·
1 Parent(s): a23a1dc

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +653 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Neoflix
3
- emoji: 🐠
4
- colorFrom: blue
5
- colorTo: blue
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: neoflix
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: purple
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,653 @@
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>NEOFLIX - Futur du Cinéma</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
11
+
12
+ :root {
13
+ --neon-blue: #0ff0fc;
14
+ --neon-pink: #ff00ff;
15
+ --dark-space: #0a0a1a;
16
+ }
17
+
18
+ body {
19
+ font-family: 'Orbitron', sans-serif;
20
+ background-color: var(--dark-space);
21
+ color: white;
22
+ overflow-x: hidden;
23
+ }
24
+
25
+ .neon-text {
26
+ text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue);
27
+ }
28
+
29
+ .neon-border {
30
+ box-shadow: 0 0 10px var(--neon-blue), inset 0 0 10px var(--neon-blue);
31
+ border: 1px solid var(--neon-blue);
32
+ }
33
+
34
+ .neon-button {
35
+ transition: all 0.3s;
36
+ }
37
+
38
+ .neon-button:hover {
39
+ box-shadow: 0 0 15px var(--neon-blue), 0 0 25px var(--neon-pink);
40
+ transform: scale(1.05);
41
+ }
42
+
43
+ .glow {
44
+ animation: glow 2s infinite alternate;
45
+ }
46
+
47
+ @keyframes glow {
48
+ from {
49
+ box-shadow: 0 0 5px var(--neon-blue);
50
+ }
51
+ to {
52
+ box-shadow: 0 0 20px var(--neon-blue), 0 0 30px var(--neon-pink);
53
+ }
54
+ }
55
+
56
+ .holographic-card {
57
+ background: rgba(10, 10, 26, 0.7);
58
+ backdrop-filter: blur(10px);
59
+ border-radius: 15px;
60
+ transition: all 0.3s;
61
+ }
62
+
63
+ .holographic-card:hover {
64
+ transform: translateY(-10px) scale(1.03);
65
+ box-shadow: 0 0 20px var(--neon-pink), 0 0 40px rgba(255, 0, 255, 0.3);
66
+ }
67
+
68
+ .scanline {
69
+ position: absolute;
70
+ top: 0;
71
+ left: 0;
72
+ width: 100%;
73
+ height: 100%;
74
+ background: linear-gradient(
75
+ to bottom,
76
+ rgba(255, 255, 255, 0) 0%,
77
+ rgba(255, 255, 255, 0.1) 50%,
78
+ rgba(255, 255, 255, 0) 100%
79
+ );
80
+ background-size: 100% 4px;
81
+ animation: scanline 8s linear infinite;
82
+ pointer-events: none;
83
+ }
84
+
85
+ @keyframes scanline {
86
+ 0% {
87
+ background-position: 0 0;
88
+ }
89
+ 100% {
90
+ background-position: 0 100%;
91
+ }
92
+ }
93
+
94
+ .matrix-fall {
95
+ position: absolute;
96
+ top: 0;
97
+ left: 0;
98
+ width: 100%;
99
+ height: 100%;
100
+ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><text x="10" y="20" font-family="monospace" font-size="16" fill="rgba(0,255,255,0.1)">0</text><text x="30" y="40" font-family="monospace" font-size="16" fill="rgba(0,255,255,0.1)">1</text><text x="50" y="60" font-family="monospace" font-size="16" fill="rgba(0,255,255,0.1)">0</text><text x="70" y="80" font-family="monospace" font-size="16" fill="rgba(0,255,255,0.1)">1</text></svg>');
101
+ opacity: 0.1;
102
+ animation: matrixFall 50s linear infinite;
103
+ pointer-events: none;
104
+ }
105
+
106
+ @keyframes matrixFall {
107
+ 0% {
108
+ background-position: 0 0;
109
+ }
110
+ 100% {
111
+ background-position: 0 1000px;
112
+ }
113
+ }
114
+
115
+ .robot-voice {
116
+ position: relative;
117
+ background: rgba(0, 0, 0, 0.7);
118
+ border-left: 3px solid var(--neon-blue);
119
+ padding: 1rem;
120
+ margin: 1rem 0;
121
+ }
122
+
123
+ .robot-voice::before {
124
+ content: "🤖";
125
+ position: absolute;
126
+ left: -30px;
127
+ top: 0;
128
+ }
129
+
130
+ .pulse {
131
+ animation: pulse 2s infinite;
132
+ }
133
+
134
+ @keyframes pulse {
135
+ 0% {
136
+ opacity: 0.5;
137
+ }
138
+ 50% {
139
+ opacity: 1;
140
+ }
141
+ 100% {
142
+ opacity: 0.5;
143
+ }
144
+ }
145
+
146
+ .loading-bar {
147
+ height: 4px;
148
+ background: linear-gradient(90deg, #0ff0fc, #ff00ff);
149
+ animation: loading 2s infinite;
150
+ }
151
+
152
+ @keyframes loading {
153
+ 0% { width: 0%; left: 0; }
154
+ 50% { width: 100%; left: 0; }
155
+ 100% { width: 0%; left: 100%; }
156
+ }
157
+ </style>
158
+ </head>
159
+ <body class="relative overflow-hidden">
160
+ <div class="scanline"></div>
161
+ <div class="matrix-fall"></div>
162
+
163
+ <!-- Navigation Futuriste -->
164
+ <nav class="bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg z-50 fixed w-full">
165
+ <div class="container mx-auto px-6 py-3 flex justify-between items-center">
166
+ <div class="flex items-center space-x-4">
167
+ <div class="neon-border rounded-full w-12 h-12 flex items-center justify-center">
168
+ <i class="fas fa-robot text-xl text-cyan-400"></i>
169
+ </div>
170
+ <h1 class="text-2xl font-bold neon-text">NEO<span class="text-pink-500">FLIX</span></h1>
171
+ </div>
172
+
173
+ <div class="hidden md:flex items-center space-x-8">
174
+ <a href="#" class="text-white hover:text-cyan-400 transition">Accueil</a>
175
+ <a href="#" class="text-white hover:text-cyan-400 transition">Films</a>
176
+ <a href="#" class="text-white hover:text-cyan-400 transition">Séries</a>
177
+ <a href="#" class="text-white hover:text-cyan-400 transition">Nouveautés</a>
178
+ <a href="#" class="text-white hover:text-cyan-400 transition">Ma Liste</a>
179
+ </div>
180
+
181
+ <div class="flex items-center space-x-4">
182
+ <div class="relative">
183
+ <input type="text" placeholder="Recherche vocale..." class="bg-gray-900 text-white px-4 py-2 rounded-full focus:outline-none focus:ring-2 focus:ring-cyan-400 w-48 md:w-64">
184
+ <i class="fas fa-microphone absolute right-3 top-2.5 text-cyan-400"></i>
185
+ </div>
186
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-cyan-400 to-pink-500 flex items-center justify-center">
187
+ <i class="fas fa-user-astronaut"></i>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </nav>
192
+
193
+ <!-- Hero Section avec Lecteur Auto -->
194
+ <section class="relative pt-32 pb-20 px-6">
195
+ <div class="absolute inset-0 bg-gradient-to-b from-cyan-900 to-transparent opacity-20"></div>
196
+ <div class="container mx-auto flex flex-col md:flex-row items-center">
197
+ <div class="md:w-1/2 mb-10 md:mb-0">
198
+ <div class="robot-voice mb-6">
199
+ <p class="text-cyan-300">SYSTÈME: Chargement de la vidéo sélectionnée... Lecture automatique activée.</p>
200
+ </div>
201
+
202
+ <h2 class="text-4xl md:text-6xl font-bold mb-6 neon-text">
203
+ <span class="text-cyan-400">DÉCOUVREZ</span> <span class="text-pink-500" id="movieCount">Chargement...</span> FILMS
204
+ </h2>
205
+
206
+ <p class="text-gray-300 mb-8 text-lg">
207
+ Plongez dans notre bibliothèque quantique de films en français. Technologie de lecture automatique IA activée pour une expérience sans interruption.
208
+ </p>
209
+
210
+ <div class="flex space-x-4">
211
+ <button class="neon-button bg-cyan-500 text-black px-6 py-3 rounded-full font-bold flex items-center">
212
+ <i class="fas fa-play mr-2"></i> Regarder
213
+ </button>
214
+ <button class="neon-button neon-border text-white px-6 py-3 rounded-full font-bold flex items-center">
215
+ <i class="fas fa-info-circle mr-2"></i> Plus d'infos
216
+ </button>
217
+ </div>
218
+
219
+ <div class="mt-8 flex items-center space-x-4">
220
+ <div class="flex items-center text-cyan-400">
221
+ <i class="fas fa-star mr-2"></i>
222
+ <span>4.8/5</span>
223
+ </div>
224
+ <div class="flex items-center text-pink-400">
225
+ <i class="fas fa-eye mr-2"></i>
226
+ <span>12.4M vues</span>
227
+ </div>
228
+ <div class="flex items-center text-green-400">
229
+ <i class="fas fa-robot mr-2"></i>
230
+ <span>IA Recommandé</span>
231
+ </div>
232
+ </div>
233
+ </div>
234
+
235
+ <div class="md:w-1/2 relative">
236
+ <div class="neon-border rounded-xl overflow-hidden relative glow" style="aspect-ratio: 16/9;">
237
+ <div id="featuredVideo" class="w-full h-full bg-gray-900 flex items-center justify-center">
238
+ <div class="text-center">
239
+ <div class="loading-bar mb-2"></div>
240
+ <p class="text-cyan-400">Chargement du film vedette...</p>
241
+ </div>
242
+ </div>
243
+ </div>
244
+
245
+ <div class="absolute -bottom-6 -right-6 bg-gray-900 bg-opacity-80 rounded-full p-4 neon-border">
246
+ <i class="fas fa-brain text-2xl text-pink-500"></i>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </section>
251
+
252
+ <!-- Section IA Recommandations -->
253
+ <section class="py-12 px-6 bg-black bg-opacity-50 relative">
254
+ <div class="container mx-auto">
255
+ <div class="flex justify-between items-center mb-8">
256
+ <h3 class="text-2xl md:text-3xl font-bold neon-text">
257
+ <i class="fas fa-robot text-cyan-400 mr-2"></i>
258
+ <span>RECOMMANDATIONS</span> <span class="text-pink-500">IA</span>
259
+ </h3>
260
+ <div class="flex items-center text-cyan-400">
261
+ <span class="mr-2">En direct</span>
262
+ <div class="w-3 h-3 rounded-full bg-green-500 pulse"></div>
263
+ </div>
264
+ </div>
265
+
266
+ <div class="robot-voice mb-8">
267
+ <p class="text-cyan-300">SYSTÈME IA: Analyse de vos préférences terminée. Chargement des recommandations personnalisées basées sur notre base de données.</p>
268
+ </div>
269
+
270
+ <div id="moviesContainer" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
271
+ <!-- Les films seront chargés ici par JavaScript -->
272
+ <div class="text-center py-10">
273
+ <div class="loading-bar mb-2"></div>
274
+ <p class="text-cyan-400">Chargement des films...</p>
275
+ </div>
276
+ </div>
277
+
278
+ <div class="mt-10 text-center">
279
+ <button id="loadMoreBtn" class="neon-button neon-border text-white px-8 py-3 rounded-full font-bold flex items-center mx-auto">
280
+ <i class="fas fa-chevron-circle-down mr-2"></i> Charger plus de films
281
+ </button>
282
+ </div>
283
+ </div>
284
+ </section>
285
+
286
+ <!-- Section Catégories Quantiques -->
287
+ <section class="py-12 px-6 relative">
288
+ <div class="container mx-auto">
289
+ <h3 class="text-2xl md:text-3xl font-bold neon-text mb-8 text-center">
290
+ <i class="fas fa-atom text-pink-500 mr-2"></i>
291
+ <span>CATÉGORIES</span> <span class="text-cyan-400">QUANTIQUES</span>
292
+ </h3>
293
+
294
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
295
+ <!-- Catégorie 1 -->
296
+ <div class="holographic-card group text-center p-6">
297
+ <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-r from-cyan-400 to-pink-500 flex items-center justify-center neon-border">
298
+ <i class="fas fa-space-shuttle text-xl"></i>
299
+ </div>
300
+ <h4 class="text-xl font-bold mb-2">Science-Fiction</h4>
301
+ <p class="text-gray-400 text-sm">12,456,789 films</p>
302
+ <div class="mt-4">
303
+ <button class="text-cyan-400 text-sm flex items-center justify-center mx-auto">
304
+ Explorer <i class="fas fa-arrow-right ml-2"></i>
305
+ </button>
306
+ </div>
307
+ </div>
308
+
309
+ <!-- Catégorie 2 -->
310
+ <div class="holographic-card group text-center p-6">
311
+ <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-r from-pink-500 to-purple-500 flex items-center justify-center neon-border">
312
+ <i class="fas fa-robot text-xl"></i>
313
+ </div>
314
+ <h4 class="text-xl font-bold mb-2">Cyberpunk</h4>
315
+ <p class="text-gray-400 text-sm">8,765,432 films</p>
316
+ <div class="mt-4">
317
+ <button class="text-cyan-400 text-sm flex items-center justify-center mx-auto">
318
+ Explorer <i class="fas fa-arrow-right ml-2"></i>
319
+ </button>
320
+ </div>
321
+ </div>
322
+
323
+ <!-- Catégorie 3 -->
324
+ <div class="holographic-card group text-center p-6">
325
+ <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center neon-border">
326
+ <i class="fas fa-brain text-xl"></i>
327
+ </div>
328
+ <h4 class="text-xl font-bold mb-2">IA & Robots</h4>
329
+ <p class="text-gray-400 text-sm">6,543,210 films</p>
330
+ <div class="mt-4">
331
+ <button class="text-cyan-400 text-sm flex items-center justify-center mx-auto">
332
+ Explorer <i class="fas fa-arrow-right ml-2"></i>
333
+ </button>
334
+ </div>
335
+ </div>
336
+
337
+ <!-- Catégorie 4 -->
338
+ <div class="holographic-card group text-center p-6">
339
+ <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-r from-blue-500 to-green-500 flex items-center justify-center neon-border">
340
+ <i class="fas fa-vr-cardboard text-xl"></i>
341
+ </div>
342
+ <h4 class="text-xl font-bold mb-2">Réalité Virtuelle</h4>
343
+ <p class="text-gray-400 text-sm">5,678,901 films</p>
344
+ <div class="mt-4">
345
+ <button class="text-cyan-400 text-sm flex items-center justify-center mx-auto">
346
+ Explorer <i class="fas fa-arrow-right ml-2"></i>
347
+ </button>
348
+ </div>
349
+ </div>
350
+
351
+ <!-- Catégorie 5 -->
352
+ <div class="holographic-card group text-center p-6">
353
+ <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-r from-green-500 to-yellow-500 flex items-center justify-center neon-border">
354
+ <i class="fas fa-dna text-xl"></i>
355
+ </div>
356
+ <h4 class="text-xl font-bold mb-2">Bio-Tech</h4>
357
+ <p class="text-gray-400 text-sm">4,321,098 films</p>
358
+ <div class="mt-4">
359
+ <button class="text-cyan-400 text-sm flex items-center justify-center mx-auto">
360
+ Explorer <i class="fas fa-arrow-right ml-2"></i>
361
+ </button>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </section>
367
+
368
+ <!-- Footer Futuriste -->
369
+ <footer class="bg-black bg-opacity-90 py-12 px-6 relative">
370
+ <div class="container mx-auto">
371
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
372
+ <div>
373
+ <h4 class="text-xl font-bold neon-text mb-4">NEOFLIX</h4>
374
+ <p class="text-gray-400 mb-4">Le futur du cinéma en français. Des millions de films disponibles en streaming automatique.</p>
375
+ <div class="flex space-x-4">
376
+ <a href="#" class="text-gray-400 hover:text-cyan-400 transition">
377
+ <i class="fab fa-facebook-f"></i>
378
+ </a>
379
+ <a href="#" class="text-gray-400 hover:text-cyan-400 transition">
380
+ <i class="fab fa-twitter"></i>
381
+ </a>
382
+ <a href="#" class="text-gray-400 hover:text-cyan-400 transition">
383
+ <i class="fab fa-instagram"></i>
384
+ </a>
385
+ <a href="#" class="text-gray-400 hover:text-cyan-400 transition">
386
+ <i class="fab fa-youtube"></i>
387
+ </a>
388
+ </div>
389
+ </div>
390
+
391
+ <div>
392
+ <h5 class="text-lg font-bold text-cyan-400 mb-4">Navigation</h5>
393
+ <ul class="space-y-2">
394
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Accueil</a></li>
395
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Films</a></li>
396
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Séries</a></li>
397
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Nouveautés</a></li>
398
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Ma Liste</a></li>
399
+ </ul>
400
+ </div>
401
+
402
+ <div>
403
+ <h5 class="text-lg font-bold text-pink-500 mb-4">Technologie</h5>
404
+ <ul class="space-y-2">
405
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Lecteur Auto</a></li>
406
+ <li><a href="#" class="text-gray-400 hover:text-white transition">IA Recommandations</a></li>
407
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Holographie</a></li>
408
+ <li><a href="#" class="text-gray-400 hover:text-white transition">16K Quantique</a></li>
409
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Audio Spatial</a></li>
410
+ </ul>
411
+ </div>
412
+
413
+ <div>
414
+ <h5 class="text-lg font-bold text-cyan-400 mb-4">Assistance IA</h5>
415
+ <div class="flex items-start mb-4">
416
+ <div class="bg-cyan-500 bg-opacity-20 rounded-full p-2 mr-3">
417
+ <i class="fas fa-robot text-cyan-400"></i>
418
+ </div>
419
+ <div>
420
+ <p class="text-gray-300">Notre assistant IA est disponible 24/7 pour vous aider.</p>
421
+ <button class="text-cyan-400 text-sm mt-2 flex items-center">
422
+ Parler à l'IA <i class="fas fa-comment-dots ml-2"></i>
423
+ </button>
424
+ </div>
425
+ </div>
426
+
427
+ <div class="flex items-start">
428
+ <div class="bg-pink-500 bg-opacity-20 rounded-full p-2 mr-3">
429
+ <i class="fas fa-bell text-pink-400"></i>
430
+ </div>
431
+ <div>
432
+ <p class="text-gray-300">Activez les notifications pour les nouveaux films.</p>
433
+ <button class="text-pink-400 text-sm mt-2 flex items-center">
434
+ Activer <i class="fas fa-toggle-on ml-2"></i>
435
+ </button>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </div>
440
+
441
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
442
+ <p class="text-gray-500 mb-4 md:mb-0">© 2024 NEOFLIX - Tous droits réservés</p>
443
+ <div class="flex space-x-6">
444
+ <a href="#" class="text-gray-500 hover:text-cyan-400 transition">Confidentialité</a>
445
+ <a href="#" class="text-gray-500 hover:text-cyan-400 transition">Conditions</a>
446
+ <a href="#" class="text-gray-500 hover:text-cyan-400 transition">Cookies</a>
447
+ <a href="#" class="text-gray-500 hover:text-cyan-400 transition">Mentions légales</a>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ </footer>
452
+
453
+ <!-- Console IA Flottante -->
454
+ <div class="fixed bottom-6 right-6 z-50">
455
+ <div class="relative">
456
+ <div class="w-16 h-16 rounded-full bg-gradient-to-r from-cyan-400 to-pink-500 flex items-center justify-center shadow-lg cursor-pointer neon-border glow" id="iaButton">
457
+ <i class="fas fa-robot text-2xl"></i>
458
+ </div>
459
+ <div class="absolute -top-2 -right-2 bg-red-500 rounded-full w-5 h-5 flex items-center justify-center text-xs">
460
+ 3
461
+ </div>
462
+ </div>
463
+
464
+ <div class="absolute bottom-20 right-0 w-80 bg-gray-900 rounded-lg shadow-xl neon-border hidden" id="iaConsole">
465
+ <div class="p-4 border-b border-gray-800 flex justify-between items-center">
466
+ <h6 class="font-bold text-cyan-400">CONSOLE IA</h6>
467
+ <button class="text-gray-400 hover:text-white">
468
+ <i class="fas fa-times"></i>
469
+ </button>
470
+ </div>
471
+ <div class="p-4 max-h-60 overflow-y-auto">
472
+ <div class="text-cyan-300 text-sm mb-2">SYSTÈME: Bonjour! Je suis votre assistant IA. Comment puis-je vous aider?</div>
473
+ <div class="text-gray-400 text-xs italic mb-4">Tapez votre question...</div>
474
+
475
+ <div class="bg-gray-800 rounded p-3 mb-3">
476
+ <div class="flex">
477
+ <div class="mr-2 text-cyan-400">></div>
478
+ <div>Rechercher des films cyberpunk</div>
479
+ </div>
480
+ </div>
481
+
482
+ <div class="bg-gray-800 rounded p-3 mb-3">
483
+ <div class="flex">
484
+ <div class="mr-2 text-pink-400">IA:</div>
485
+ <div>J'ai trouvé 8,765,432 films cyberpunk. <a href="#" class="text-cyan-400">Voir résultats</a></div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ <div class="p-3 border-t border-gray-800 flex">
490
+ <input type="text" placeholder="Parlez à l'IA..." class="flex-grow bg-gray-800 text-white px-3 py-2 rounded-l focus:outline-none">
491
+ <button class="bg-cyan-500 text-black px-3 py-2 rounded-r">
492
+ <i class="fas fa-paper-plane"></i>
493
+ </button>
494
+ </div>
495
+ </div>
496
+ </div>
497
+
498
+ <script>
499
+ // Configuration TMDB
500
+ const TMDB_API_KEY = 'fb437b10727a5a4eb8d9134e29c82ae0';
501
+ const TMDB_BASE_URL = 'https://api.themoviedb.org/3';
502
+ const TMDB_IMAGE_BASE = 'https://image.tmdb.org/t/p/w500';
503
+
504
+ // Variables d'état
505
+ let currentPage = 1;
506
+ let totalMovies = 0;
507
+
508
+ // Toggle IA Console
509
+ document.getElementById('iaButton').addEventListener('click', function() {
510
+ const console = document.getElementById('iaConsole');
511
+ console.classList.toggle('hidden');
512
+ });
513
+
514
+ // Fonction pour formater les nombres
515
+ function formatNumber(num) {
516
+ return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
517
+ }
518
+
519
+ // Fonction pour charger les films populaires
520
+ async function fetchPopularMovies(page = 1) {
521
+ try {
522
+ const response = await fetch(`${TMDB_BASE_URL}/movie/popular?api_key=${TMDB_API_KEY}&language=fr-FR&page=${page}`);
523
+ const data = await response.json();
524
+
525
+ if (page === 1) {
526
+ totalMovies = data.total_results;
527
+ document.getElementById('movieCount').textContent = formatNumber(totalMovies);
528
+
529
+ // Charger le film vedette (premier film de la liste)
530
+ if (data.results.length > 0) {
531
+ loadFeaturedMovie(data.results[0]);
532
+ }
533
+ }
534
+
535
+ return data.results;
536
+ } catch (error) {
537
+ console.error('Erreur lors du chargement des films:', error);
538
+ return [];
539
+ }
540
+ }
541
+
542
+ // Fonction pour charger le film vedette
543
+ function loadFeaturedMovie(movie) {
544
+ const featuredVideo = document.getElementById('featuredVideo');
545
+
546
+ if (movie.backdrop_path) {
547
+ featuredVideo.innerHTML = `
548
+ <img src="${TMDB_IMAGE_BASE}${movie.backdrop_path}" alt="${movie.title}" class="w-full h-full object-cover">
549
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent flex flex-col justify-end p-4">
550
+ <h3 class="text-2xl font-bold">${movie.title}</h3>
551
+ <p class="text-gray-300 text-sm mt-2">${movie.overview.substring(0, 150)}...</p>
552
+ </div>
553
+ `;
554
+ } else {
555
+ featuredVideo.innerHTML = `
556
+ <div class="w-full h-full bg-gray-800 flex items-center justify-center">
557
+ <div class="text-center">
558
+ <i class="fas fa-film text-4xl text-cyan-400 mb-2"></i>
559
+ <p class="text-cyan-400">${movie.title}</p>
560
+ </div>
561
+ </div>
562
+ `;
563
+ }
564
+ }
565
+
566
+ // Fonction pour afficher les films
567
+ function displayMovies(movies) {
568
+ const moviesContainer = document.getElementById('moviesContainer');
569
+
570
+ movies.forEach(movie => {
571
+ const movieCard = document.createElement('div');
572
+ movieCard.className = 'holographic-card group';
573
+ movieCard.innerHTML = `
574
+ <div class="relative overflow-hidden rounded-lg" style="aspect-ratio: 2/3;">
575
+ ${movie.poster_path ?
576
+ `<img src="${TMDB_IMAGE_BASE}${movie.poster_path}" alt="${movie.title}" class="w-full h-full object-cover group-hover:opacity-70 transition">` :
577
+ `<div class="w-full h-full bg-gray-800 flex items-center justify-center">
578
+ <i class="fas fa-film text-4xl text-cyan-400"></i>
579
+ </div>`
580
+ }
581
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex flex-col justify-end p-4">
582
+ <h4 class="text-white font-bold mb-2">${movie.title}</h4>
583
+ <div class="flex justify-between text-xs text-gray-300">
584
+ <span>${movie.release_date ? movie.release_date.substring(0, 4) : 'N/A'}</span>
585
+ <span class="text-cyan-400"><i class="fas fa-star"></i> ${movie.vote_average.toFixed(1)}</span>
586
+ </div>
587
+ </div>
588
+ <div class="absolute top-2 right-2 bg-black bg-opacity-70 rounded-full p-1.5 text-xs text-cyan-400">
589
+ <i class="fas fa-play"></i>
590
+ </div>
591
+ </div>
592
+ `;
593
+
594
+ moviesContainer.appendChild(movieCard);
595
+ });
596
+ }
597
+
598
+ // Fonction pour charger plus de films
599
+ document.getElementById('loadMoreBtn').addEventListener('click', async function() {
600
+ currentPage++;
601
+ const movies = await fetchPopularMovies(currentPage);
602
+ displayMovies(movies);
603
+
604
+ // Animation de chargement
605
+ const robotVoice = document.createElement('div');
606
+ robotVoice.className = 'robot-voice mb-8';
607
+ robotVoice.innerHTML = `<p class="text-cyan-300">SYSTÈME IA: Chargement de ${movies.length} films supplémentaires...</p>`;
608
+ this.parentNode.insertBefore(robotVoice, this);
609
+
610
+ setTimeout(() => {
611
+ robotVoice.innerHTML = `<p class="text-green-400">SYSTÈME IA: Chargement terminé. ${movies.length} films ajoutés.</p>`;
612
+ }, 1500);
613
+ });
614
+
615
+ // Initialisation
616
+ document.addEventListener('DOMContentLoaded', async () => {
617
+ // Simuler un chargement IA
618
+ const loadingMessages = [
619
+ "Connexion au serveur quantique...",
620
+ "Analyse des préférences utilisateur...",
621
+ "Optimisation de l'expérience de visionnage...",
622
+ "Chargement des données cinématographiques..."
623
+ ];
624
+
625
+ let currentMessage = 0;
626
+ const robotVoice = document.querySelector('.robot-voice');
627
+
628
+ const loadingInterval = setInterval(() => {
629
+ robotVoice.innerHTML = `<p class="text-cyan-300">SYSTÈME IA: ${loadingMessages[currentMessage]}</p>`;
630
+ currentMessage = (currentMessage + 1) % loadingMessages.length;
631
+ }, 2000);
632
+
633
+ // Charger les films
634
+ const movies = await fetchPopularMovies();
635
+ displayMovies(movies);
636
+
637
+ // Arrêter les messages de chargement
638
+ clearInterval(loadingInterval);
639
+ robotVoice.innerHTML = `<p class="text-green-400">SYSTÈME IA: Chargement terminé. ${movies.length} films chargés avec succès.</p>`;
640
+
641
+ // Auto-scroll des films
642
+ setInterval(() => {
643
+ const container = document.getElementById('moviesContainer');
644
+ container.scrollBy({ left: 10, behavior: 'smooth' });
645
+
646
+ if (container.scrollLeft + container.clientWidth >= container.scrollWidth - 100) {
647
+ container.scrollTo({ left: 0, behavior: 'smooth' });
648
+ }
649
+ }, 50);
650
+ });
651
+ </script>
652
+ <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/neoflix" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
653
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ je veux pas des site d'exemple je veux un vrais site avec plus de 975623123 films version Français en auto Play robotisé ,, en mode futuriste
2
+ voici les cléé api tmdb ::: Jeton d'accès en lecture à l'API eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmYjQzN2IxMDcyN2E1YTRlYjhkOTEzNGUyOWM4MmFlMCIsIm5iZiI6MTY4MDYzNzkxMC44NjUsInN1YiI6IjY0MmM3ZmQ2OGI5NTllMDBmNDRkNzNhMCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.Nhl261Ha3z0Ujg5vM1PpFoZBiTGjlXQ1g9VFPh6dVvs Clé d'API fb437b10727a5a4eb8d9134e29c82ae0