Hugging Face's logo

Spaces:
docto41
/
cin-futur
Running

App Files Community
docto41 commited on
Commit
6b0ee00
·
verified ·
1 Parent(s): da9fdc7

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +861 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cin Futur
3
- emoji: 🌖
4
  colorFrom: yellow
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: cin-futur
3
+ emoji: 🐳
4
  colorFrom: yellow
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,861 @@
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>CinéFutur - Plateforme Cinématographique du Futur</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ neon: {
15
+ blue: '#00f0ff',
16
+ pink: '#ff00f0',
17
+ purple: '#b400ff',
18
+ green: '#00ff7b'
19
+ },
20
+ dark: {
21
+ 900: '#0a0a0a',
22
+ 800: '#1a1a1a',
23
+ 700: '#2a2a2a'
24
+ }
25
+ },
26
+ animation: {
27
+ 'float': 'float 6s ease-in-out infinite',
28
+ 'float-reverse': 'float-reverse 5s ease-in-out infinite',
29
+ 'pulse-slow': 'pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
30
+ 'text-gradient': 'text-gradient 8s linear infinite',
31
+ },
32
+ keyframes: {
33
+ float: {
34
+ '0%, 100%': { transform: 'translateY(0)' },
35
+ '50%': { transform: 'translateY(-20px)' },
36
+ },
37
+ 'float-reverse': {
38
+ '0%, 100%': { transform: 'translateY(0)' },
39
+ '50%': { transform: 'translateY(20px)' },
40
+ },
41
+ 'text-gradient': {
42
+ '0%, 100%': { 'background-position': '0% 50%' },
43
+ '50%': { 'background-position': '100% 50%' },
44
+ }
45
+ }
46
+ }
47
+ }
48
+ }
49
+ </script>
50
+ <style>
51
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Roboto:wght@300;400;500;700&display=swap');
52
+
53
+ body {
54
+ font-family: 'Roboto', sans-serif;
55
+ background-color: #0a0a0a;
56
+ color: white;
57
+ overflow-x: hidden;
58
+ }
59
+
60
+ .futuriste {
61
+ font-family: 'Orbitron', sans-serif;
62
+ }
63
+
64
+ .glow {
65
+ text-shadow: 0 0 10px rgba(0, 240, 255, 0.7);
66
+ }
67
+
68
+ .glow-pink {
69
+ text-shadow: 0 0 10px rgba(255, 0, 240, 0.7);
70
+ }
71
+
72
+ .gradient-text {
73
+ background: linear-gradient(90deg, #00f0ff, #b400ff, #ff00f0, #00f0ff);
74
+ background-size: 300% 300%;
75
+ -webkit-background-clip: text;
76
+ background-clip: text;
77
+ color: transparent;
78
+ animation: text-gradient 8s linear infinite;
79
+ }
80
+
81
+ .film-card:hover {
82
+ transform: translateY(-10px) scale(1.03);
83
+ box-shadow: 0 20px 25px -5px rgba(0, 240, 255, 0.25), 0 10px 10px -5px rgba(0, 240, 255, 0.1);
84
+ }
85
+
86
+ .neon-border {
87
+ position: relative;
88
+ }
89
+
90
+ .neon-border::after {
91
+ content: '';
92
+ position: absolute;
93
+ top: -2px;
94
+ left: -2px;
95
+ right: -2px;
96
+ bottom: -2px;
97
+ background: linear-gradient(45deg, #00f0ff, #b400ff, #ff00f0);
98
+ z-index: -1;
99
+ border-radius: inherit;
100
+ background-size: 200% 200%;
101
+ animation: gradient 3s ease infinite;
102
+ }
103
+
104
+ @keyframes gradient {
105
+ 0% { background-position: 0% 50%; }
106
+ 50% { background-position: 100% 50%; }
107
+ 100% { background-position: 0% 50%; }
108
+ }
109
+
110
+ .parallax {
111
+ background-attachment: fixed;
112
+ background-position: center;
113
+ background-repeat: no-repeat;
114
+ background-size: cover;
115
+ }
116
+
117
+ .scroll-container {
118
+ scroll-snap-type: y mandatory;
119
+ overflow-y: scroll;
120
+ height: 100vh;
121
+ }
122
+
123
+ .scroll-section {
124
+ scroll-snap-align: start;
125
+ height: 100vh;
126
+ }
127
+
128
+ .holographic {
129
+ background: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(180, 0, 255, 0.1) 50%, rgba(255, 0, 240, 0.1) 100%);
130
+ backdrop-filter: blur(10px);
131
+ border: 1px solid rgba(255, 255, 255, 0.1);
132
+ box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.36);
133
+ }
134
+
135
+ /* Animation pour les sections */
136
+ @keyframes fadeIn {
137
+ from { opacity: 0; transform: translateY(20px); }
138
+ to { opacity: 1; transform: translateY(0); }
139
+ }
140
+
141
+ .animate-fadeIn {
142
+ animation: fadeIn 1s ease-out forwards;
143
+ }
144
+ </style>
145
+ </head>
146
+ <body class="scroll-smooth">
147
+ <!-- Navigation Futuriste -->
148
+ <nav class="fixed w-full z-50 bg-black bg-opacity-90 backdrop-filter backdrop-blur-lg border-b border-gray-800">
149
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
150
+ <div class="flex items-center justify-between h-16">
151
+ <div class="flex items-center">
152
+ <div class="flex-shrink-0">
153
+ <span class="text-2xl font-bold gradient-text futuriste">CINÉFUTUR</span>
154
+ </div>
155
+ <div class="hidden md:block">
156
+ <div class="ml-10 flex items-baseline space-x-4">
157
+ <a href="#accueil" class="text-white hover:text-neon-blue px-3 py-2 rounded-md text-sm font-medium transition-all duration-300">Accueil</a>
158
+ <a href="#films" class="text-white hover:text-neon-pink px-3 py-2 rounded-md text-sm font-medium transition-all duration-300">Films</a>
159
+ <a href="#nouveautes" class="text-white hover:text-neon-green px-3 py-2 rounded-md text-sm font-medium transition-all duration-300">Nouveautés</a>
160
+ <a href="#abonnement" class="text-white hover:text-neon-purple px-3 py-2 rounded-md text-sm font-medium transition-all duration-300">Abonnement</a>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ <div class="hidden md:block">
165
+ <div class="ml-4 flex items-center md:ml-6">
166
+ <div class="relative">
167
+ <input type="text" placeholder="Rechercher un film..." class="bg-gray-900 text-white px-4 py-1 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-neon-blue w-64">
168
+ <button class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-neon-blue">
169
+ <i class="fas fa-search"></i>
170
+ </button>
171
+ </div>
172
+ <button class="ml-4 bg-gradient-to-r from-neon-blue to-neon-purple text-white px-4 py-1 rounded-full text-sm font-medium hover:opacity-90 transition-all duration-300">
173
+ Connexion
174
+ </button>
175
+ </div>
176
+ </div>
177
+ <div class="-mr-2 flex md:hidden">
178
+ <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
179
+ <span class="sr-only">Ouvrir menu</span>
180
+ <i class="fas fa-bars"></i>
181
+ </button>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Menu Mobile -->
187
+ <div id="mobile-menu" class="hidden md:hidden bg-gray-900">
188
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
189
+ <a href="#accueil" class="text-white block px-3 py-2 rounded-md text-base font-medium">Accueil</a>
190
+ <a href="#films" class="text-white block px-3 py-2 rounded-md text-base font-medium">Films</a>
191
+ <a href="#nouveautes" class="text-white block px-3 py-2 rounded-md text-base font-medium">Nouveautés</a>
192
+ <a href="#abonnement" class="text-white block px-3 py-2 rounded-md text-base font-medium">Abonnement</a>
193
+ </div>
194
+ <div class="pt-4 pb-3 border-t border-gray-700 px-4">
195
+ <div class="relative mb-4">
196
+ <input type="text" placeholder="Rechercher un film..." class="bg-gray-800 text-white px-4 py-1 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-neon-blue w-full">
197
+ <button class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-neon-blue">
198
+ <i class="fas fa-search"></i>
199
+ </button>
200
+ </div>
201
+ <button class="w-full bg-gradient-to-r from-neon-blue to-neon-purple text-white px-4 py-1 rounded-full text-sm font-medium hover:opacity-90 transition-all duration-300">
202
+ Connexion
203
+ </button>
204
+ </div>
205
+ </div>
206
+ </nav>
207
+
208
+ <!-- Section Hero -->
209
+ <section id="accueil" class="scroll-section relative h-screen flex items-center justify-center overflow-hidden bg-black">
210
+ <div class="absolute inset-0 z-0">
211
+ <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-black via-black/80 to-black/20 z-10"></div>
212
+ <video autoplay muted loop class="w-full h-full object-cover opacity-40">
213
+ <source src="https://assets.mixkit.co/videos/preview/mixkit-futuristic-interface-with-holographic-dashboard-46606-large.mp4" type="video/mp4">
214
+ </video>
215
+ </div>
216
+
217
+ <div class="relative z-10 text-center px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto">
218
+ <h1 class="text-5xl md:text-7xl font-bold mb-6 futuriste glow">
219
+ <span class="gradient-text">L'AVENIR DU CINÉMA</span>
220
+ </h1>
221
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto text-gray-300">
222
+ Découvrez <span class="text-neon-blue">7,878,987 films</span> dans notre collection futuriste.
223
+ Des dernières sorties aux classiques intemporels, tout en haute définition quantique.
224
+ </p>
225
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
226
+ <button class="bg-gradient-to-r from-neon-blue to-neon-purple text-white px-8 py-3 rounded-full text-lg font-bold hover:opacity-90 transition-all duration-300 transform hover:scale-105">
227
+ Commencer l'essai gratuit
228
+ </button>
229
+ <button class="border-2 border-neon-pink text-white px-8 py-3 rounded-full text-lg font-bold hover:bg-neon-pink hover:bg-opacity-10 transition-all duration-300 transform hover:scale-105">
230
+ Explorer les films
231
+ </button>
232
+ </div>
233
+ </div>
234
+
235
+ <div class="absolute bottom-10 left-0 right-0 flex justify-center z-10">
236
+ <a href="#films" class="text-white animate-bounce">
237
+ <i class="fas fa-chevron-down text-2xl"></i>
238
+ </a>
239
+ </div>
240
+
241
+ <!-- Effets futuristes -->
242
+ <div class="absolute top-20 left-20 w-20 h-20 rounded-full bg-neon-blue opacity-20 filter blur-3xl animate-pulse-slow"></div>
243
+ <div class="absolute bottom-20 right-20 w-32 h-32 rounded-full bg-neon-pink opacity-20 filter blur-3xl animate-pulse-slow"></div>
244
+ </section>
245
+
246
+ <!-- Section Films -->
247
+ <section id="films" class="scroll-section min-h-screen py-20 bg-gradient-to-b from-black to-gray-900 relative overflow-hidden">
248
+ <div class="absolute top-0 left-0 w-full h-full opacity-5">
249
+ <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-neon-blue filter blur-3xl"></div>
250
+ <div class="absolute top-3/4 left-3/4 w-64 h-64 rounded-full bg-neon-purple filter blur-3xl"></div>
251
+ </div>
252
+
253
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
254
+ <div class="text-center mb-16">
255
+ <h2 class="text-4xl md:text-5xl font-bold mb-4 futuriste gradient-text">NOTRE COLLECTION</h2>
256
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">
257
+ Parcourez notre vaste bibliothèque de <span class="text-neon-green">7,878,987 films</span> en streaming quantique.
258
+ Des blockbusters aux films d'art et essai, tout est disponible en un clic.
259
+ </p>
260
+ </div>
261
+
262
+ <!-- Filtres -->
263
+ <div class="flex flex-wrap justify-center gap-4 mb-12">
264
+ <button class="px-4 py-2 rounded-full bg-neon-blue text-black font-medium">Tous</button>
265
+ <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">Action</button>
266
+ <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">Science-fiction</button>
267
+ <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">Drame</button>
268
+ <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">Comédie</button>
269
+ <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">Horreur</button>
270
+ <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">Animation</button>
271
+ </div>
272
+
273
+ <!-- Grille de films (générée automatiquement) -->
274
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="films-grid">
275
+ <!-- Les films seront générés par JavaScript -->
276
+ </div>
277
+
278
+ <div class="text-center mt-12">
279
+ <button id="load-more" class="border-2 border-neon-purple text-white px-8 py-3 rounded-full text-lg font-bold hover:bg-neon-purple hover:bg-opacity-10 transition-all duration-300">
280
+ Charger plus de films
281
+ </button>
282
+ </div>
283
+ </div>
284
+ </section>
285
+
286
+ <!-- Section Nouveautés -->
287
+ <section id="nouveautes" class="scroll-section min-h-screen py-20 bg-gray-900 relative overflow-hidden">
288
+ <div class="absolute inset-0 z-0">
289
+ <div class="absolute inset-0 bg-[url('https://image.tmdb.org/t/p/original/8YFL5QQVPy3AgrEQxNYVSgiPEbe.jpg')] opacity-10 bg-cover bg-center"></div>
290
+ <div class="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-black/30"></div>
291
+ </div>
292
+
293
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
294
+ <div class="text-center mb-16">
295
+ <h2 class="text-4xl md:text-5xl font-bold mb-4 futuriste gradient-text">NOUVELLES SORTIES</h2>
296
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">
297
+ Découvrez les dernières sorties cinéma disponibles en exclusivité sur notre plateforme.
298
+ Des films qui repoussent les limites de la technologie et du storytelling.
299
+ </p>
300
+ </div>
301
+
302
+ <!-- Carrousel de nouveautés -->
303
+ <div class="relative">
304
+ <div class="flex overflow-x-auto pb-10 scrollbar-hide space-x-6" id="nouveautes-carousel">
305
+ <!-- Les nouveautés seront générées par JavaScript -->
306
+ </div>
307
+
308
+ <button class="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 bg-black bg-opacity-70 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-neon-blue transition-all duration-300 z-20" id="prev-btn">
309
+ <i class="fas fa-chevron-left"></i>
310
+ </button>
311
+ <button class="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 bg-black bg-opacity-70 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-neon-blue transition-all duration-300 z-20" id="next-btn">
312
+ <i class="fas fa-chevron-right"></i>
313
+ </button>
314
+ </div>
315
+ </div>
316
+ </section>
317
+
318
+ <!-- Section Abonnement -->
319
+ <section id="abonnement" class="scroll-section min-h-screen py-20 bg-black relative overflow-hidden">
320
+ <div class="absolute inset-0 z-0">
321
+ <div class="absolute inset-0 bg-[url('https://image.tmdb.org/t/p/original/9yBVqNruk6Ykrwc32qrK2TIE5xw.jpg')] opacity-10 bg-cover bg-center"></div>
322
+ <div class="absolute inset-0 bg-gradient-to-b from-black via-black/70 to-black/30"></div>
323
+ </div>
324
+
325
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
326
+ <div class="text-center mb-16">
327
+ <h2 class="text-4xl md:text-5xl font-bold mb-4 futuriste gradient-text">ABONNEMENT FUTURISTE</h2>
328
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">
329
+ Choisissez l'abonnement qui correspond à votre expérience cinématographique.
330
+ Accès illimité à notre collection de 7,878,987 films en qualité quantique.
331
+ </p>
332
+ </div>
333
+
334
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
335
+ <!-- Forfait Standard -->
336
+ <div class="holographic rounded-2xl p-6 transform transition-all duration-500 hover:scale-105">
337
+ <div class="text-center mb-6">
338
+ <h3 class="text-2xl font-bold text-neon-blue mb-2">Standard</h3>
339
+ <p class="text-gray-400">Parfait pour les cinéphiles occasionnels</p>
340
+ </div>
341
+ <div class="text-center mb-8">
342
+ <span class="text-5xl font-bold">9,99€</span>
343
+ <span class="text-gray-400">/mois</span>
344
+ </div>
345
+ <ul class="space-y-3 mb-8">
346
+ <li class="flex items-center">
347
+ <i class="fas fa-check text-neon-green mr-2"></i>
348
+ <span>Accès à 5,000,000 films</span>
349
+ </li>
350
+ <li class="flex items-center">
351
+ <i class="fas fa-check text-neon-green mr-2"></i>
352
+ <span>Qualité Full HD</span>
353
+ </li>
354
+ <li class="flex items-center">
355
+ <i class="fas fa-check text-neon-green mr-2"></i>
356
+ <span>2 appareils simultanés</span>
357
+ </li>
358
+ <li class="flex items-center text-gray-500">
359
+ <i class="fas fa-times text-red-500 mr-2"></i>
360
+ <span>Pas de réalité virtuelle</span>
361
+ </li>
362
+ </ul>
363
+ <button class="w-full bg-gray-800 text-white py-3 rounded-full font-medium hover:bg-gray-700 transition-all duration-300">
364
+ Choisir ce forfait
365
+ </button>
366
+ </div>
367
+
368
+ <!-- Forfait Premium -->
369
+ <div class="holographic rounded-2xl p-6 border-2 border-neon-purple transform transition-all duration-500 hover:scale-105 relative">
370
+ <div class="absolute top-0 right-0 bg-neon-purple text-black px-3 py-1 text-xs font-bold rounded-bl-lg rounded-tr-lg">
371
+ POPULAIRE
372
+ </div>
373
+ <div class="text-center mb-6">
374
+ <h3 class="text-2xl font-bold text-neon-purple mb-2">Premium</h3>
375
+ <p class="text-gray-400">Pour les vrais passionnés de cinéma</p>
376
+ </div>
377
+ <div class="text-center mb-8">
378
+ <span class="text-5xl font-bold">14,99€</span>
379
+ <span class="text-gray-400">/mois</span>
380
+ </div>
381
+ <ul class="space-y-3 mb-8">
382
+ <li class="flex items-center">
383
+ <i class="fas fa-check text-neon-green mr-2"></i>
384
+ <span>Accès à 7,878,987 films</span>
385
+ </li>
386
+ <li class="flex items-center">
387
+ <i class="fas fa-check text-neon-green mr-2"></i>
388
+ <span>Qualité 4K HDR</span>
389
+ </li>
390
+ <li class="flex items-center">
391
+ <i class="fas fa-check text-neon-green mr-2"></i>
392
+ <span>4 appareils simultanés</span>
393
+ </li>
394
+ <li class="flex items-center">
395
+ <i class="fas fa-check text-neon-green mr-2"></i>
396
+ <span>Expérience VR basique</span>
397
+ </li>
398
+ </ul>
399
+ <button class="w-full bg-gradient-to-r from-neon-purple to-neon-blue text-black py-3 rounded-full font-bold hover:opacity-90 transition-all duration-300">
400
+ Choisir ce forfait
401
+ </button>
402
+ </div>
403
+
404
+ <!-- Forfait Quantique -->
405
+ <div class="holographic rounded-2xl p-6 transform transition-all duration-500 hover:scale-105">
406
+ <div class="text-center mb-6">
407
+ <h3 class="text-2xl font-bold text-neon-pink mb-2">Quantique</h3>
408
+ <p class="text-gray-400">L'expérience ultime pour cinéphiles</p>
409
+ </div>
410
+ <div class="text-center mb-8">
411
+ <span class="text-5xl font-bold">29,99€</span>
412
+ <span class="text-gray-400">/mois</span>
413
+ </div>
414
+ <ul class="space-y-3 mb-8">
415
+ <li class="flex items-center">
416
+ <i class="fas fa-check text-neon-green mr-2"></i>
417
+ <span>Accès illimité à tous les films</span>
418
+ </li>
419
+ <li class="flex items-center">
420
+ <i class="fas fa-check text-neon-green mr-2"></i>
421
+ <span>Qualité 8K HDR+</span>
422
+ </li>
423
+ <li class="flex items-center">
424
+ <i class="fas fa-check text-neon-green mr-2"></i>
425
+ <span>Appareils illimités</span>
426
+ </li>
427
+ <li class="flex items-center">
428
+ <i class="fas fa-check text-neon-green mr-2"></i>
429
+ <span>Expérience VR complète</span>
430
+ </li>
431
+ </ul>
432
+ <button class="w-full bg-gray-800 text-white py-3 rounded-full font-medium hover:bg-gray-700 transition-all duration-300">
433
+ Choisir ce forfait
434
+ </button>
435
+ </div>
436
+ </div>
437
+
438
+ <div class="text-center mt-16 max-w-3xl mx-auto">
439
+ <h3 class="text-2xl font-bold mb-4">Essai gratuit de 30 jours</h3>
440
+ <p class="text-gray-400 mb-6">
441
+ Profitez d'un essai gratuit de 30 jours sans engagement. Annulez à tout moment.
442
+ Accès complet à toute notre bibliothèque pendant la période d'essai.
443
+ </p>
444
+ <button class="bg-gradient-to-r from-neon-blue to-neon-green text-black px-8 py-3 rounded-full text-lg font-bold hover:opacity-90 transition-all duration-300">
445
+ Commencer l'essai gratuit
446
+ </button>
447
+ </div>
448
+ </div>
449
+ </section>
450
+
451
+ <!-- Footer -->
452
+ <footer class="bg-gray-900 py-12 relative overflow-hidden">
453
+ <div class="absolute inset-0 z-0">
454
+ <div class="absolute inset-0 bg-[url('https://image.tmdb.org/t/p/original/5aUX5xqvOkGC3a4iW5WEMOVJwNP.jpg')] opacity-10 bg-cover bg-center"></div>
455
+ <div class="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-black/30"></div>
456
+ </div>
457
+
458
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
459
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
460
+ <div>
461
+ <h3 class="text-xl font-bold mb-4 gradient-text futuriste">CINÉFUTUR</h3>
462
+ <p class="text-gray-400">
463
+ La plateforme cinématographique du futur. Accès à 7,878,987 films en qualité quantique.
464
+ </p>
465
+ <div class="flex space-x-4 mt-4">
466
+ <a href="#" class="text-gray-400 hover:text-neon-blue transition-all duration-300">
467
+ <i class="fab fa-facebook-f"></i>
468
+ </a>
469
+ <a href="#" class="text-gray-400 hover:text-neon-pink transition-all duration-300">
470
+ <i class="fab fa-twitter"></i>
471
+ </a>
472
+ <a href="#" class="text-gray-400 hover:text-neon-purple transition-all duration-300">
473
+ <i class="fab fa-instagram"></i>
474
+ </a>
475
+ <a href="#" class="text-gray-400 hover:text-neon-green transition-all duration-300">
476
+ <i class="fab fa-tiktok"></i>
477
+ </a>
478
+ </div>
479
+ </div>
480
+
481
+ <div>
482
+ <h4 class="text-lg font-bold mb-4 text-white">Navigation</h4>
483
+ <ul class="space-y-2">
484
+ <li><a href="#accueil" class="text-gray-400 hover:text-neon-blue transition-all duration-300">Accueil</a></li>
485
+ <li><a href="#films" class="text-gray-400 hover:text-neon-pink transition-all duration-300">Films</a></li>
486
+ <li><a href="#nouveautes" class="text-gray-400 hover:text-neon-purple transition-all duration-300">Nouveautés</a></li>
487
+ <li><a href="#abonnement" class="text-gray-400 hover:text-neon-green transition-all duration-300">Abonnement</a></li>
488
+ </ul>
489
+ </div>
490
+
491
+ <div>
492
+ <h4 class="text-lg font-bold mb-4 text-white">Informations</h4>
493
+ <ul class="space-y-2">
494
+ <li><a href="#" class="text-gray-400 hover:text-neon-blue transition-all duration-300">À propos</a></li>
495
+ <li><a href="#" class="text-gray-400 hover:text-neon-pink transition-all duration-300">Contact</a></li>
496
+ <li><a href="#" class="text-gray-400 hover:text-neon-purple transition-all duration-300">Presse</a></li>
497
+ <li><a href="#" class="text-gray-400 hover:text-neon-green transition-all duration-300">Carrières</a></li>
498
+ </ul>
499
+ </div>
500
+
501
+ <div>
502
+ <h4 class="text-lg font-bold mb-4 text-white">Légal</h4>
503
+ <ul class="space-y-2">
504
+ <li><a href="#" class="text-gray-400 hover:text-neon-blue transition-all duration-300">Conditions d'utilisation</a></li>
505
+ <li><a href="#" class="text-gray-400 hover:text-neon-pink transition-all duration-300">Politique de confidentialité</a></li>
506
+ <li><a href="#" class="text-gray-400 hover:text-neon-purple transition-all duration-300">Cookies</a></li>
507
+ <li><a href="#" class="text-gray-400 hover:text-neon-green transitionall duration-300">Mentions légales</a></li>
508
+ </ul>
509
+ </div>
510
+ </div>
511
+
512
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
513
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">
514
+ © 2023 CinéFutur. Tous droits réservés.
515
+ </p>
516
+ <div class="flex space-x-6">
517
+ <a href="#" class="text-gray-500 hover:text-white text-sm transition-all duration-300">Paramètres des cookies</a>
518
+ <a href="#" class="text-gray-500 hover:text-white text-sm transition-all duration-300">Préférences de confidentialité</a>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ </footer>
523
+
524
+ <script>
525
+ // Menu mobile
526
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
527
+ const mobileMenu = document.getElementById('mobile-menu');
528
+
529
+ mobileMenuButton.addEventListener('click', () => {
530
+ mobileMenu.classList.toggle('hidden');
531
+ });
532
+
533
+ // Données des films réels avec images de TMDB
534
+ const filmsReels = [
535
+ {
536
+ titre: "Dune",
537
+ annee: 2021,
538
+ duree: "2h35min",
539
+ genre1: "Science-fiction",
540
+ genre2: "Aventure",
541
+ description: "Paul Atréides se rend sur la planète désertique Arrakis, la seule source de l'épice, la substance la plus précieuse de l'univers.",
542
+ note: "8.0",
543
+ image: "https://image.tmdb.org/t/p/w500/8L7LQv5R0qd8WxQz4O2xGH5T2kQ.jpg"
544
+ },
545
+ {
546
+ titre: "Spider-Man: No Way Home",
547
+ annee: 2021,
548
+ duree: "2h28min",
549
+ genre1: "Action",
550
+ genre2: "Aventure",
551
+ description: "Peter Parker demande de l'aide au docteur Strange pour que le monde oublie qu'il est Spider-Man.",
552
+ note: "8.3",
553
+ image: "https://image.tmdb.org/t/p/w500/1g0dhYtq4irTY1GPXvft6k4YLjm.jpg"
554
+ },
555
+ {
556
+ titre: "The Batman",
557
+ annee: 2022,
558
+ duree: "2h56min",
559
+ genre1: "Action",
560
+ genre2: "Crime",
561
+ description: "Batman enquête sur la corruption à Gotham City et affronte le Riddler, un tueur en série ciblant l'élite de Gotham.",
562
+ note: "7.9",
563
+ image: "https://image.tmdb.org/t/p/w500/seyWFgGInaLqW7nOZvu0CPU95Rx.jpg"
564
+ },
565
+ {
566
+ titre: "Top Gun: Maverick",
567
+ annee: 2022,
568
+ duree: "2h11min",
569
+ genre1: "Action",
570
+ genre2: "Drame",
571
+ description: "Trente ans après son service en tant que l'un des meilleurs pilotes de la Navy, Maverick est de retour pour former une nouvelle génération.",
572
+ note: "8.3",
573
+ image: "https://image.tmdb.org/t/p/w500/62HCnUTziyWcpDaBO2i1DX17ljH.jpg"
574
+ },
575
+ {
576
+ titre: "Avatar: The Way of Water",
577
+ annee: 2022,
578
+ duree: "3h12min",
579
+ genre1: "Science-fiction",
580
+ genre2: "Aventure",
581
+ description: "Jake Sully et Ney'tiri forment une famille sur Pandora mais doivent quitter leur maison et explorer les régions de Pandora.",
582
+ note: "7.7",
583
+ image: "https://image.tmdb.org/t/p/w500/t6HIqrRAclMCA60NsSmeqe9RmNV.jpg"
584
+ },
585
+ {
586
+ titre: "Black Panther: Wakanda Forever",
587
+ annee: 2022,
588
+ duree: "2h41min",
589
+ genre1: "Action",
590
+ genre2: "Aventure",
591
+ description: "Le peuple de Wakanda se bat pour protéger leur nation après la mort du roi T'Challa.",
592
+ note: "7.3",
593
+ image: "https://image.tmdb.org/t/p/w500/sv1xJUazXeYqALzczSZ3O6nkH75.jpg"
594
+ },
595
+ {
596
+ titre: "Everything Everywhere All at Once",
597
+ annee: 2022,
598
+ duree: "2h19min",
599
+ genre1: "Science-fiction",
600
+ genre2: "Comédie",
601
+ description: "Une femme âgée est emportée dans une aventure folle où seule elle peut sauver le monde en explorant d'autres univers.",
602
+ note: "8.0",
603
+ image: "https://image.tmdb.org/t/p/w500/w3LxiVYdWWRvEVdn5RYq6jIqkb1.jpg"
604
+ },
605
+ {
606
+ titre: "Jurassic World: Dominion",
607
+ annee: 2022,
608
+ duree: "2h27min",
609
+ genre1: "Action",
610
+ genre2: "Aventure",
611
+ description: "Quatre ans après la destruction d'Isla Nublar, les dinosaures vivent maintenant parmi les humains partout dans le monde.",
612
+ note: "6.5",
613
+ image: "https://image.tmdb.org/t/p/w500/kAVRgw7GgK1CdYENEqXrwy2qbqs.jpg"
614
+ },
615
+ {
616
+ titre: "Doctor Strange in the Multiverse of Madness",
617
+ annee: 2022,
618
+ duree: "2h06min",
619
+ genre1: "Action",
620
+ genre2: "Fantastique",
621
+ description: "Le Docteur Strange voyage dans le multivers avec l'aide d'América Chávez pour affronter une nouvelle menace mystique.",
622
+ note: "7.0",
623
+ image: "https://image.tmdb.org/t/p/w500/9Gtg2DzBhmYamXBS1hKAhiwbBKS.jpg"
624
+ },
625
+ {
626
+ titre: "The Northman",
627
+ annee: 2022,
628
+ duree: "2h17min",
629
+ genre1: "Action",
630
+ genre2: "Drame",
631
+ description: "Un prince viking part en quête de vengeance pour le meurtre de son père.",
632
+ note: "7.4",
633
+ image: "https://image.tmdb.org/t/p/w500/zhLKlUaF1SEpO58ppHIAyENkwgw.jpg"
634
+ },
635
+ {
636
+ titre: "Nope",
637
+ annee: 2022,
638
+ duree: "2h10min",
639
+ genre1: "Horreur",
640
+ genre2: "Science-fiction",
641
+ description: "Les habitants d'une vallée isolée en Californie assistent à une découverte étrange et terrifiante.",
642
+ note: "7.0",
643
+ image: "https://image.tmdb.org/t/p/w500/AcKVlWiNdgHUQoB8JTV3P3NTwva.jpg"
644
+ },
645
+ {
646
+ titre: "Elvis",
647
+ annee: 2022,
648
+ duree: "2h39min",
649
+ genre1: "Drame",
650
+ genre2: "Musique",
651
+ description: "La vie du roi du rock 'n' roll Elvis Presley, des débuts à sa montée en tant que star mondiale.",
652
+ note: "7.5",
653
+ image: "https://image.tmdb.org/t/p/w500/qBOKWqAFbxtoECVb0g7j6EkXQpO.jpg"
654
+ },
655
+ {
656
+ titre: "The Menu",
657
+ annee: 2022,
658
+ duree: "1h47min",
659
+ genre1: "Comédie",
660
+ genre2: "Horreur",
661
+ description: "Un couple se rend dans un restaurant exclusif sur une île isolée où le chef a préparé un menu luxueux avec des surprises choquantes.",
662
+ note: "7.3",
663
+ image: "https://image.tmdb.org/t/p/w500/3A7JqF2xIsQAdVQfkwOxe3dQxvw.jpg"
664
+ },
665
+ {
666
+ titre: "Bullet Train",
667
+ annee: 2022,
668
+ duree: "2h07min",
669
+ genre1: "Action",
670
+ genre2: "Comédie",
671
+ description: "Cinq assassins se retrouvent à bord d'un train à grande vitesse allant de Tokyo à Morioka avec des destinations finales communes.",
672
+ note: "7.4",
673
+ image: "https://image.tmdb.org/t/p/w500/tVxDe01Zy3kZqaZRNiXFGDICdZk.jpg"
674
+ },
675
+ {
676
+ titre: "Black Adam",
677
+ annee: 2022,
678
+ duree: "2h05min",
679
+ genre1: "Action",
680
+ genre2: "Fantastique",
681
+ description: "Près de 5000 ans après avoir été doté des pouvoirs des dieux égyptiens, Black Adam est libéré de sa tombe terrestre.",
682
+ note: "7.1",
683
+ image: "https://image.tmdb.org/t/p/w500/pFlaoHTZeyNkG83vxsAJiGzfSsa.jpg"
684
+ },
685
+ {
686
+ titre: "Thor: Love and Thunder",
687
+ annee: 2022,
688
+ duree: "1h59min",
689
+ genre1: "Action",
690
+ genre2: "Aventure",
691
+ description: "Thor tente de retrouver la paix intérieure, mais doit revenir au combat pour affronter Gorr le Dieu Boucher.",
692
+ note: "6.6",
693
+ image: "https://image.tmdb.org/t/p/w500/pIkRyD18kl4FhoCNQuWxWu5cBLM.jpg"
694
+ },
695
+ {
696
+ titre: "Smile",
697
+ annee: 2022,
698
+ duree: "1h55min",
699
+ genre1: "Horreur",
700
+ genre2: "Thriller",
701
+ description: "Après avoir été témoin d'un incident traumatisant, une médecin commence à faire l'expérience d'événements effrayants.",
702
+ note: "6.8",
703
+ image: "https://image.tmdb.org/t/p/w500/aPqcQwu4VGEewLiagUq1HIR9K3d.jpg"
704
+ },
705
+ {
706
+ titre: "Tár",
707
+ annee: 2022,
708
+ duree: "2h38min",
709
+ genre1: "Drame",
710
+ genre2: "Musique",
711
+ description: "L'histoire de la légendaire chef d'orchestre Lydia Tár.",
712
+ note: "7.5",
713
+ image: "https://image.tmdb.org/t/p/w500/ms5J3BQdfiqLHdQwjQYxGLqxR6o.jpg"
714
+ },
715
+ {
716
+ titre: "The Whale",
717
+ annee: 2022,
718
+ duree: "1h57min",
719
+ genre1: "Drame",
720
+ genre2: "Thriller",
721
+ description: "Un professeur d'anglais solitaire et obèse tente de renouer avec sa fille adolescente.",
722
+ note: "8.0",
723
+ image: "https://image.tmdb.org/t/p/w500/jQ0gylJMxWSL490sy0RrPj1Lj7e.jpg"
724
+ },
725
+ {
726
+ titre: "Babylon",
727
+ annee: 2022,
728
+ duree: "3h09min",
729
+ genre1: "Drame",
730
+ genre2: "Comédie",
731
+ description: "Une histoire d'ambition et d'excès retraçant la montée et la chute de multiples personnages à Hollywood dans les années 1920.",
732
+ note: "7.4",
733
+ image: "https://image.tmdb.org/t/p/w500/wjOHjWCUE0YPPDiA9QHv4kXmq1Q.jpg"
734
+ }
735
+ ];
736
+
737
+ // Générer les films dans la grille
738
+ function genererFilmsGrid(films) {
739
+ filmsGrid.innerHTML = '';
740
+ films.forEach(film => {
741
+ const filmElement = document.createElement('div');
742
+ filmElement.className = 'film-card group relative rounded-xl overflow-hidden transition-all duration-500 hover:z-10';
743
+ filmElement.innerHTML = `
744
+ <div class="relative aspect-[2/3] rounded-xl overflow-hidden">
745
+ <img src="${film.image}" alt="${film.titre}" class="w-full h-full object-cover group-hover:opacity-70 transition-all duration-500">
746
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
747
+ <div class="absolute bottom-0 left-0 right-0 p-4 translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500">
748
+ <h3 class="text-white font-bold text-lg mb-1">${film.titre}</h3>
749
+ <div class="flex items-center text-sm text-gray-300 mb-2">
750
+ <span>${film.annee}</span>
751
+ <span class="mx-2">•</span>
752
+ <span>${film.duree}</span>
753
+ </div>
754
+ <div class="flex flex-wrap gap-2 mb-3">
755
+ <span class="px-2 py-1 bg-gray-800 text-white text-xs rounded-full">${film.genre1}</span>
756
+ <span class="px-2 py-1 bg-gray-800 text-white text-xs rounded-full">${film.genre2}</span>
757
+ </div>
758
+ <p class="text-gray-300 text-sm line-clamp-2">${film.description}</p>
759
+ </div>
760
+ <div class="absolute top-3 left-3 px-2 py-1 bg-black bg-opacity-70 text-neon-green text-sm font-bold rounded-full flex items-center">
761
+ <i class="fas fa-star mr-1"></i>
762
+ ${film.note}
763
+ </div>
764
+ </div>
765
+ <div class="mt-3">
766
+ <h3 class="text-white font-medium truncate">${film.titre}</h3>
767
+ <div class="flex items-center text-sm text-gray-400">
768
+ <span>${film.annee}</span>
769
+ </div>
770
+ </div>
771
+ `;
772
+ filmsGrid.appendChild(filmElement);
773
+ });
774
+ }
775
+
776
+ // Générer les films dans le carrousel de nouveautés
777
+ function genererNouveautesCarousel(films) {
778
+ nouveautesCarousel.innerHTML = '';
779
+ films.slice(0, 10).forEach(film => {
780
+ const filmElement = document.createElement('div');
781
+ filmElement.className = 'flex-shrink-0 w-64 sm:w-72 md:w-80';
782
+ filmElement.innerHTML = `
783
+ <div class="relative group rounded-xl overflow-hidden">
784
+ <div class="relative aspect-[3/4] rounded-xl overflow-hidden">
785
+ <img src="${film.image}" alt="${film.titre}" class="w-full h-full object-cover group-hover:opacity-70 transition-all duration-500">
786
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
787
+ <div class="absolute bottom-0 left-0 right-0 p-4 translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500">
788
+ <h3 class="text-white font-bold text-lg mb-1">${film.titre}</h3>
789
+ <div class="flex items-center text-sm text-gray-300 mb-2">
790
+ <span>${film.annee}</span>
791
+ <span class="mx-2">•</span>
792
+ <span>${film.duree}</span>
793
+ </div>
794
+ <div class="flex flex-wrap gap-2 mb-3">
795
+ <span class="px-2 py-1 bg-gray-800 text-white text-xs rounded-full">${film.genre1}</span>
796
+ <span class="px-2 py-1 bg-gray-800 text-white text-xs rounded-full">${film.genre2}</span>
797
+ </div>
798
+ <p class="text-gray-300 text-sm line-clamp-2">${film.description}</p>
799
+ </div>
800
+ <div class="absolute top-3 left-3 px-2 py-1 bg-black bg-opacity-70 text-neon-green text-sm font-bold rounded-full flex items-center">
801
+ <i class="fas fa-star mr-1"></i>
802
+ ${film.note}
803
+ </div>
804
+ <div class="absolute top-3 right-3 px-2 py-1 bg-neon-pink text-black text-xs font-bold rounded-full">
805
+ NOUVEAU
806
+ </div>
807
+ </div>
808
+ </div>
809
+ `;
810
+ nouveautesCarousel.appendChild(filmElement);
811
+ });
812
+ }
813
+
814
+ // Navigation du carrousel
815
+ const prevBtn = document.getElementById('prev-btn');
816
+ const nextBtn = document.getElementById('next-btn');
817
+
818
+ prevBtn.addEventListener('click', () => {
819
+ nouveautesCarousel.scrollBy({ left: -300, behavior: 'smooth' });
820
+ });
821
+
822
+ nextBtn.addEventListener('click', () => {
823
+ nouveautesCarousel.scrollBy({ left: 300, behavior: 'smooth' });
824
+ });
825
+
826
+ // Charger plus de films
827
+ let filmsCharges = 12;
828
+ loadMoreButton.addEventListener('click', () => {
829
+ const nouveauxFilms = filmsReels.slice(filmsCharges, filmsCharges + 8);
830
+ genererFilmsGrid([...document.querySelectorAll('#films-grid .film-card'), ...nouveauxFilms]);
831
+ filmsCharges += 8;
832
+ if (filmsCharges >= filmsReels.length) {
833
+ loadMoreButton.classList.add('hidden');
834
+ }
835
+ });
836
+
837
+ // Initialisation
838
+ document.addEventListener('DOMContentLoaded', () => {
839
+ genererFilmsGrid(filmsReels.slice(0, 12));
840
+ genererNouveautesCarousel(filmsReels);
841
+
842
+ // Animation au scroll
843
+ const observerOptions = {
844
+ threshold: 0.1
845
+ };
846
+
847
+ const observer = new IntersectionObserver((entries) => {
848
+ entries.forEach(entry => {
849
+ if (entry.isIntersecting) {
850
+ entry.target.classList.add('animate-fadeIn');
851
+ }
852
+ });
853
+ }, observerOptions);
854
+
855
+ document.querySelectorAll('.scroll-section').forEach(section => {
856
+ observer.observe(section);
857
+ });
858
+ });
859
+ </script>
860
+ <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/cin-futur" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
861
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ https://plateformecinema.com/: je veux le site en francais et sile futuriste animé avec toutes les derniere sortie et ajouter 7878987 film en automatique
2
+ AFFICHER LES VRAIS IMAGES DES SITE ET DES VRAIS FILMS JE VEUX PAS DE SITE D EXEMPLE JE VEUX TOUT EN PILOTAGE AUTOMATIQUE