Hugging Face's logo

Spaces:
docto41
/
streamflow
Running

App Files Community
docto41 commited on
Commit
a0cf0fe
·
verified ·
1 Parent(s): 5fd071c

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +200 -201
  2. prompts.txt +2 -1
index.html CHANGED
@@ -34,6 +34,13 @@
34
  .ad-container:hover {
35
  transform: scale(1.02);
36
  }
 
 
 
 
 
 
 
37
  </style>
38
  </head>
39
  <body class="bg-primary text-white">
@@ -83,7 +90,9 @@
83
  </div>
84
  </div>
85
  <div class="md:w-1/2 relative">
86
- <img src="https://via.placeholder.com/600x400" alt="Hero Banner" class="rounded-lg shadow-2xl w-full">
 
 
87
  <div class="absolute -bottom-5 -right-5 bg-highlight px-4 py-2 rounded-lg shadow-lg">
88
  <span class="font-bold">Nouveauté</span>
89
  </div>
@@ -120,122 +129,55 @@
120
  </a>
121
  </div>
122
 
123
- <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
124
- <!-- Movie Card 1 -->
125
- <div class="movie-card bg-secondary rounded-lg overflow-hidden shadow-md transition duration-300 relative group">
126
- <div class="relative pt-[150%] bg-gray-700">
127
- <img src="https://via.placeholder.com/300x450" alt="Movie Poster" class="absolute top-0 left-0 w-full h-full object-cover">
128
- <div class="absolute inset-0 bg-black bg-opacity-60 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
129
- <button class="bg-highlight hover:bg-opacity-90 w-12 h-12 rounded-full flex items-center justify-center transition">
130
- <i class="fas fa-play"></i>
131
- </button>
132
- </div>
133
- <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs font-bold">
134
- 4K
135
- </div>
136
- </div>
137
  <div class="p-3">
138
- <h3 class="font-semibold truncate">Titre du Film</h3>
139
- <div class="flex justify-between items-center mt-1 text-sm text-gray-400">
140
- <span>2023</span>
141
- <div class="flex items-center text-yellow-400">
142
- <i class="fas fa-star"></i>
143
- <span class="ml-1">8.5</span>
144
- </div>
145
  </div>
146
  </div>
147
  </div>
148
-
149
- <!-- Movie Card 2 -->
150
- <div class="movie-card bg-secondary rounded-lg overflow-hidden shadow-md transition duration-300 relative group">
151
- <div class="relative pt-[150%] bg-gray-700">
152
- <img src="https://via.placeholder.com/300x450" alt="Movie Poster" class="absolute top-0 left-0 w-full h-full object-cover">
153
- <div class="absolute inset-0 bg-black bg-opacity-60 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
154
- <button class="bg-highlight hover:bg-opacity-90 w-12 h-12 rounded-full flex items-center justify-center transition">
155
- <i class="fas fa-play"></i>
156
- </button>
157
- </div>
158
- </div>
159
  <div class="p-3">
160
- <h3 class="font-semibold truncate">Série Populaire</h3>
161
- <div class="flex justify-between items-center mt-1 text-sm text-gray-400">
162
- <span>2022</span>
163
- <div class="flex items-center text-yellow-400">
164
- <i class="fas fa-star"></i>
165
- <span class="ml-1">9.0</span>
166
- </div>
167
  </div>
168
  </div>
169
  </div>
170
-
171
- <!-- Movie Card 3 -->
172
- <div class="movie-card bg-secondary rounded-lg overflow-hidden shadow-md transition duration-300 relative group">
173
- <div class="relative pt-[150%] bg-gray-700">
174
- <img src="https://via.placeholder.com/300x450" alt="Movie Poster" class="absolute top-0 left-0 w-full h-full object-cover">
175
- <div class="absolute inset-0 bg-black bg-opacity-60 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
176
- <button class="bg-highlight hover:bg-opacity-90 w-12 h-12 rounded-full flex items-center justify-center transition">
177
- <i class="fas fa-play"></i>
178
- </button>
179
- </div>
180
- <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs font-bold">
181
- HD
182
- </div>
183
- </div>
184
  <div class="p-3">
185
- <h3 class="font-semibold truncate">Documentaire Fascinant</h3>
186
- <div class="flex justify-between items-center mt-1 text-sm text-gray-400">
187
- <span>2023</span>
188
- <div class="flex items-center text-yellow-400">
189
- <i class="fas fa-star"></i>
190
- <span class="ml-1">7.8</span>
191
- </div>
192
  </div>
193
  </div>
194
  </div>
195
-
196
- <!-- Movie Card 4 -->
197
- <div class="movie-card bg-secondary rounded-lg overflow-hidden shadow-md transition duration-300 relative group">
198
- <div class="relative pt-[150%] bg-gray-700">
199
- <img src="https://via.placeholder.com/300x450" alt="Movie Poster" class="absolute top-0 left-0 w-full h-full object-cover">
200
- <div class="absolute inset-0 bg-black bg-opacity-60 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
201
- <button class="bg-highlight hover:bg-opacity-90 w-12 h-12 rounded-full flex items-center justify-center transition">
202
- <i class="fas fa-play"></i>
203
- </button>
204
- </div>
205
- </div>
206
  <div class="p-3">
207
- <h3 class="font-semibold truncate">Animation Familiale</h3>
208
- <div class="flex justify-between items-center mt-1 text-sm text-gray-400">
209
- <span>2021</span>
210
- <div class="flex items-center text-yellow-400">
211
- <i class="fas fa-star"></i>
212
- <span class="ml-1">8.2</span>
213
- </div>
214
  </div>
215
  </div>
216
  </div>
217
-
218
- <!-- Movie Card 5 -->
219
- <div class="movie-card bg-secondary rounded-lg overflow-hidden shadow-md transition duration-300 relative group">
220
- <div class="relative pt-[150%] bg-gray-700">
221
- <img src="https://via.placeholder.com/300x450" alt="Movie Poster" class="absolute top-0 left-0 w-full h-full object-cover">
222
- <div class="absolute inset-0 bg-black bg-opacity-60 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
223
- <button class="bg-highlight hover:bg-opacity-90 w-12 h-12 rounded-full flex items-center justify-center transition">
224
- <i class="fas fa-play"></i>
225
- </button>
226
- </div>
227
- <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs font-bold">
228
- 4K
229
- </div>
230
- </div>
231
  <div class="p-3">
232
- <h3 class="font-semibold truncate">Thriller Intense</h3>
233
- <div class="flex justify-between items-center mt-1 text-sm text-gray-400">
234
- <span>2023</span>
235
- <div class="flex items-center text-yellow-400">
236
- <i class="fas fa-star"></i>
237
- <span class="ml-1">8.9</span>
238
- </div>
239
  </div>
240
  </div>
241
  </div>
@@ -303,122 +245,55 @@
303
  </a>
304
  </div>
305
 
306
- <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
307
- <!-- Movie Card 6 -->
308
- <div class="movie-card bg-primary rounded-lg overflow-hidden shadow-md transition duration-300 relative group">
309
- <div class="relative pt-[150%] bg-gray-700">
310
- <img src="https://via.placeholder.com/300x450" alt="Movie Poster" class="absolute top-0 left-0 w-full h-full object-cover">
311
- <div class="absolute inset-0 bg-black bg-opacity-60 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
312
- <button class="bg-highlight hover:bg-opacity-90 w-12 h-12 rounded-full flex items-center justify-center transition">
313
- <i class="fas fa-play"></i>
314
- </button>
315
- </div>
316
- <div class="absolute top-2 left-2 bg-highlight px-2 py-1 rounded text-xs font-bold">
317
- Nouveau
318
- </div>
319
- </div>
320
  <div class="p-3">
321
- <h3 class="font-semibold truncate">Dernier Blockbuster</h3>
322
- <div class="flex justify-between items-center mt-1 text-sm text-gray-400">
323
- <span>2023</span>
324
- <div class="flex items-center text-yellow-400">
325
- <i class="fas fa-star"></i>
326
- <span class="ml-1">8.7</span>
327
- </div>
328
  </div>
329
  </div>
330
  </div>
331
-
332
- <!-- Movie Card 7 -->
333
- <div class="movie-card bg-primary rounded-lg overflow-hidden shadow-md transition duration-300 relative group">
334
- <div class="relative pt-[150%] bg-gray-700">
335
- <img src="https://via.placeholder.com/300x450" alt="Movie Poster" class="absolute top-0 left-0 w-full h-full object-cover">
336
- <div class="absolute inset-0 bg-black bg-opacity-60 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
337
- <button class="bg-highlight hover:bg-opacity-90 w-12 h-12 rounded-full flex items-center justify-center transition">
338
- <i class="fas fa-play"></i>
339
- </button>
340
- </div>
341
- </div>
342
  <div class="p-3">
343
- <h3 class="font-semibold truncate">Série Originale</h3>
344
- <div class="flex justify-between items-center mt-1 text-sm text-gray-400">
345
- <span>2023</span>
346
- <div class="flex items-center text-yellow-400">
347
- <i class="fas fa-star"></i>
348
- <span class="ml-1">9.1</span>
349
- </div>
350
  </div>
351
  </div>
352
  </div>
353
-
354
- <!-- Movie Card 8 -->
355
- <div class="movie-card bg-primary rounded-lg overflow-hidden shadow-md transition duration-300 relative group">
356
- <div class="relative pt-[150%] bg-gray-700">
357
- <img src="https://via.placeholder.com/300x450" alt="Movie Poster" class="absolute top-0 left-0 w-full h-full object-cover">
358
- <div class="absolute inset-0 bg-black bg-opacity-60 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
359
- <button class="bg-highlight hover:bg-opacity-90 w-12 h-12 rounded-full flex items-center justify-center transition">
360
- <i class="fas fa-play"></i>
361
- </button>
362
- </div>
363
- <div class="absolute top-2 left-2 bg-highlight px-2 py-1 rounded text-xs font-bold">
364
- Nouveau
365
- </div>
366
- </div>
367
  <div class="p-3">
368
- <h3 class="font-semibold truncate">Drame Puissant</h3>
369
- <div class="flex justify-between items-center mt-1 text-sm text-gray-400">
370
- <span>2023</span>
371
- <div class="flex items-center text-yellow-400">
372
- <i class="fas fa-star"></i>
373
- <span class="ml-1">8.4</span>
374
- </div>
375
  </div>
376
  </div>
377
  </div>
378
-
379
- <!-- Movie Card 9 -->
380
- <div class="movie-card bg-primary rounded-lg overflow-hidden shadow-md transition duration-300 relative group">
381
- <div class="relative pt-[150%] bg-gray-700">
382
- <img src="https://via.placeholder.com/300x450" alt="Movie Poster" class="absolute top-0 left-0 w-full h-full object-cover">
383
- <div class="absolute inset-0 bg-black bg-opacity-60 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
384
- <button class="bg-highlight hover:bg-opacity-90 w-12 h-12 rounded-full flex items-center justify-center transition">
385
- <i class="fas fa-play"></i>
386
- </button>
387
- </div>
388
- </div>
389
  <div class="p-3">
390
- <h3 class="font-semibold truncate">Comédie Romantique</h3>
391
- <div class="flex justify-between items-center mt-1 text-sm text-gray-400">
392
- <span>2023</span>
393
- <div class="flex items-center text-yellow-400">
394
- <i class="fas fa-star"></i>
395
- <span class="ml-1">7.9</span>
396
- </div>
397
  </div>
398
  </div>
399
  </div>
400
-
401
- <!-- Movie Card 10 -->
402
- <div class="movie-card bg-primary rounded-lg overflow-hidden shadow-md transition duration-300 relative group">
403
- <div class="relative pt-[150%] bg-gray-700">
404
- <img src="https://via.placeholder.com/300x450" alt="Movie Poster" class="absolute top-0 left-0 w-full h-full object-cover">
405
- <div class="absolute inset-0 bg-black bg-opacity-60 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
406
- <button class="bg-highlight hover:bg-opacity-90 w-12 h-12 rounded-full flex items-center justify-center transition">
407
- <i class="fas fa-play"></i>
408
- </button>
409
- </div>
410
- <div class="absolute top-2 left-2 bg-highlight px-2 py-1 rounded text-xs font-bold">
411
- Nouveau
412
- </div>
413
- </div>
414
  <div class="p-3">
415
- <h3 class="font-semibold truncate">Documentaire Choc</h3>
416
- <div class="flex justify-between items-center mt-1 text-sm text-gray-400">
417
- <span>2023</span>
418
- <div class="flex items-center text-yellow-400">
419
- <i class="fas fa-star"></i>
420
- <span class="ml-1">8.6</span>
421
- </div>
422
  </div>
423
  </div>
424
  </div>
@@ -517,8 +392,132 @@
517
  </div>
518
 
519
  <script>
520
- // Simulate ad display after 5 seconds
521
- document.addEventListener('DOMContentLoaded', function() {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
522
  // Show modal ad after delay
523
  setTimeout(function() {
524
  document.getElementById('adModal').classList.remove('hidden');
 
34
  .ad-container:hover {
35
  transform: scale(1.02);
36
  }
37
+ .skeleton {
38
+ animation: pulse 2s infinite ease-in-out;
39
+ }
40
+ @keyframes pulse {
41
+ 0%, 100% { opacity: 1; }
42
+ 50% { opacity: 0.5; }
43
+ }
44
  </style>
45
  </head>
46
  <body class="bg-primary text-white">
 
90
  </div>
91
  </div>
92
  <div class="md:w-1/2 relative">
93
+ <div id="heroBanner" class="rounded-lg shadow-2xl w-full h-64 md:h-96 bg-gray-700 flex items-center justify-center">
94
+ <i class="fas fa-spinner fa-spin text-4xl text-gray-500"></i>
95
+ </div>
96
  <div class="absolute -bottom-5 -right-5 bg-highlight px-4 py-2 rounded-lg shadow-lg">
97
  <span class="font-bold">Nouveauté</span>
98
  </div>
 
129
  </a>
130
  </div>
131
 
132
+ <div id="trendingMovies" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
133
+ <!-- Skeleton loading -->
134
+ <div class="bg-secondary rounded-lg overflow-hidden shadow-md">
135
+ <div class="relative pt-[150%] bg-gray-700 skeleton"></div>
 
 
 
 
 
 
 
 
 
 
136
  <div class="p-3">
137
+ <div class="h-5 bg-gray-700 rounded skeleton mb-2"></div>
138
+ <div class="flex justify-between">
139
+ <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div>
140
+ <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div>
 
 
 
141
  </div>
142
  </div>
143
  </div>
144
+ <div class="bg-secondary rounded-lg overflow-hidden shadow-md">
145
+ <div class="relative pt-[150%] bg-gray-700 skeleton"></div>
 
 
 
 
 
 
 
 
 
146
  <div class="p-3">
147
+ <div class="h-5 bg-gray-700 rounded skeleton mb-2"></div>
148
+ <div class="flex justify-between">
149
+ <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div>
150
+ <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div>
 
 
 
151
  </div>
152
  </div>
153
  </div>
154
+ <div class="bg-secondary rounded-lg overflow-hidden shadow-md">
155
+ <div class="relative pt-[150%] bg-gray-700 skeleton"></div>
 
 
 
 
 
 
 
 
 
 
 
 
156
  <div class="p-3">
157
+ <div class="h-5 bg-gray-700 rounded skeleton mb-2"></div>
158
+ <div class="flex justify-between">
159
+ <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div>
160
+ <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div>
 
 
 
161
  </div>
162
  </div>
163
  </div>
164
+ <div class="bg-secondary rounded-lg overflow-hidden shadow-md">
165
+ <div class="relative pt-[150%] bg-gray-700 skeleton"></div>
 
 
 
 
 
 
 
 
 
166
  <div class="p-3">
167
+ <div class="h-5 bg-gray-700 rounded skeleton mb-2"></div>
168
+ <div class="flex justify-between">
169
+ <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div>
170
+ <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div>
 
 
 
171
  </div>
172
  </div>
173
  </div>
174
+ <div class="bg-secondary rounded-lg overflow-hidden shadow-md">
175
+ <div class="relative pt-[150%] bg-gray-700 skeleton"></div>
 
 
 
 
 
 
 
 
 
 
 
 
176
  <div class="p-3">
177
+ <div class="h-5 bg-gray-700 rounded skeleton mb-2"></div>
178
+ <div class="flex justify-between">
179
+ <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div>
180
+ <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div>
 
 
 
181
  </div>
182
  </div>
183
  </div>
 
245
  </a>
246
  </div>
247
 
248
+ <div id="newReleases" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
249
+ <!-- Skeleton loading -->
250
+ <div class="bg-primary rounded-lg overflow-hidden shadow-md">
251
+ <div class="relative pt-[150%] bg-gray-700 skeleton"></div>
 
 
 
 
 
 
 
 
 
 
252
  <div class="p-3">
253
+ <div class="h-5 bg-gray-700 rounded skeleton mb-2"></div>
254
+ <div class="flex justify-between">
255
+ <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div>
256
+ <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div>
 
 
 
257
  </div>
258
  </div>
259
  </div>
260
+ <div class="bg-primary rounded-lg overflow-hidden shadow-md">
261
+ <div class="relative pt-[150%] bg-gray-700 skeleton"></div>
 
 
 
 
 
 
 
 
 
262
  <div class="p-3">
263
+ <div class="h-5 bg-gray-700 rounded skeleton mb-2"></div>
264
+ <div class="flex justify-between">
265
+ <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div>
266
+ <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div>
 
 
 
267
  </div>
268
  </div>
269
  </div>
270
+ <div class="bg-primary rounded-lg overflow-hidden shadow-md">
271
+ <div class="relative pt-[150%] bg-gray-700 skeleton"></div>
 
 
 
 
 
 
 
 
 
 
 
 
272
  <div class="p-3">
273
+ <div class="h-5 bg-gray-700 rounded skeleton mb-2"></div>
274
+ <div class="flex justify-between">
275
+ <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div>
276
+ <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div>
 
 
 
277
  </div>
278
  </div>
279
  </div>
280
+ <div class="bg-primary rounded-lg overflow-hidden shadow-md">
281
+ <div class="relative pt-[150%] bg-gray-700 skeleton"></div>
 
 
 
 
 
 
 
 
 
282
  <div class="p-3">
283
+ <div class="h-5 bg-gray-700 rounded skeleton mb-2"></div>
284
+ <div class="flex justify-between">
285
+ <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div>
286
+ <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div>
 
 
 
287
  </div>
288
  </div>
289
  </div>
290
+ <div class="bg-primary rounded-lg overflow-hidden shadow-md">
291
+ <div class="relative pt-[150%] bg-gray-700 skeleton"></div>
 
 
 
 
 
 
 
 
 
 
 
 
292
  <div class="p-3">
293
+ <div class="h-5 bg-gray-700 rounded skeleton mb-2"></div>
294
+ <div class="flex justify-between">
295
+ <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div>
296
+ <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div>
 
 
 
297
  </div>
298
  </div>
299
  </div>
 
392
  </div>
393
 
394
  <script>
395
+ // TMDB API configuration
396
+ const API_KEY = '3fd2be6f0c70a2a598f084ddfb75487c';
397
+ const BASE_URL = 'https://api.themoviedb.org/3';
398
+ const IMG_URL = 'https://image.tmdb.org/t/p/w500';
399
+ const BACKDROP_URL = 'https://image.tmdb.org/t/p/original';
400
+
401
+ // Fetch trending movies
402
+ async function getTrendingMovies() {
403
+ try {
404
+ const response = await fetch(`${BASE_URL}/trending/movie/week?api_key=${API_KEY}&language=fr-FR`);
405
+ const data = await response.json();
406
+ return data.results.slice(0, 10); // Get first 10 movies
407
+ } catch (error) {
408
+ console.error('Error fetching trending movies:', error);
409
+ return [];
410
+ }
411
+ }
412
+
413
+ // Fetch new releases
414
+ async function getNewReleases() {
415
+ try {
416
+ const response = await fetch(`${BASE_URL}/movie/now_playing?api_key=${API_KEY}&language=fr-FR&region=FR`);
417
+ const data = await response.json();
418
+ return data.results.slice(0, 10); // Get first 10 movies
419
+ } catch (error) {
420
+ console.error('Error fetching new releases:', error);
421
+ return [];
422
+ }
423
+ }
424
+
425
+ // Fetch random popular movie for hero banner
426
+ async function getRandomPopularMovie() {
427
+ try {
428
+ const response = await fetch(`${BASE_URL}/movie/popular?api_key=${API_KEY}&language=fr-FR`);
429
+ const data = await response.json();
430
+ const randomIndex = Math.floor(Math.random() * data.results.length);
431
+ return data.results[randomIndex];
432
+ } catch (error) {
433
+ console.error('Error fetching random popular movie:', error);
434
+ return null;
435
+ }
436
+ }
437
+
438
+ // Display movies in a section
439
+ function displayMovies(movies, containerId) {
440
+ const container = document.getElementById(containerId);
441
+ container.innerHTML = ''; // Clear loading skeletons
442
+
443
+ movies.forEach(movie => {
444
+ const movieCard = document.createElement('div');
445
+ movieCard.className = 'movie-card bg-secondary rounded-lg overflow-hidden shadow-md transition duration-300 relative group';
446
+ movieCard.innerHTML = `
447
+ <div class="relative pt-[150%] bg-gray-700">
448
+ <img src="${IMG_URL}${movie.poster_path}" alt="${movie.title}"
449
+ class="absolute top-0 left-0 w-full h-full object-cover"
450
+ onerror="this.src='https://via.placeholder.com/300x450?text=Image+non+disponible'">
451
+ <div class="absolute inset-0 bg-black bg-opacity-60 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
452
+ <button class="bg-highlight hover:bg-opacity-90 w-12 h-12 rounded-full flex items-center justify-center transition">
453
+ <i class="fas fa-play"></i>
454
+ </button>
455
+ </div>
456
+ ${movie.vote_average > 7.5 ?
457
+ `<div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs font-bold">
458
+ ${movie.vote_average.toFixed(1)}
459
+ </div>` : ''}
460
+ </div>
461
+ <div class="p-3">
462
+ <h3 class="font-semibold truncate">${movie.title}</h3>
463
+ <div class="flex justify-between items-center mt-1 text-sm text-gray-400">
464
+ <span>${movie.release_date ? movie.release_date.substring(0, 4) : 'N/A'}</span>
465
+ <div class="flex items-center text-yellow-400">
466
+ <i class="fas fa-star"></i>
467
+ <span class="ml-1">${movie.vote_average ? movie.vote_average.toFixed(1) : 'N/A'}</span>
468
+ </div>
469
+ </div>
470
+ </div>
471
+ `;
472
+ container.appendChild(movieCard);
473
+ });
474
+ }
475
+
476
+ // Display hero banner
477
+ async function displayHeroBanner() {
478
+ const heroBanner = document.getElementById('heroBanner');
479
+ const movie = await getRandomPopularMovie();
480
+
481
+ if (movie) {
482
+ heroBanner.innerHTML = '';
483
+ heroBanner.style.backgroundImage = `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url(${BACKDROP_URL}${movie.backdrop_path})`;
484
+ heroBanner.style.backgroundSize = 'cover';
485
+ heroBanner.style.backgroundPosition = 'center';
486
+
487
+ const bannerContent = document.createElement('div');
488
+ bannerContent.className = 'text-center p-6 max-w-2xl mx-auto';
489
+ bannerContent.innerHTML = `
490
+ <h2 class="text-3xl md:text-4xl font-bold mb-3">${movie.title}</h2>
491
+ <p class="text-gray-300 mb-4 line-clamp-3">${movie.overview || 'Description non disponible'}</p>
492
+ <div class="flex justify-center space-x-4">
493
+ <button class="bg-highlight hover:bg-opacity-90 px-6 py-2 rounded-full font-bold transition">
494
+ <i class="fas fa-play mr-2"></i> Regarder
495
+ </button>
496
+ <button class="bg-white bg-opacity-10 hover:bg-opacity-20 px-6 py-2 rounded-full font-bold transition">
497
+ <i class="fas fa-info-circle mr-2"></i> Détails
498
+ </button>
499
+ </div>
500
+ `;
501
+ heroBanner.appendChild(bannerContent);
502
+ } else {
503
+ heroBanner.innerHTML = '<p class="text-gray-400">Impossible de charger le film vedette</p>';
504
+ }
505
+ }
506
+
507
+ // Initialize the page
508
+ document.addEventListener('DOMContentLoaded', async function() {
509
+ // Load all content
510
+ await displayHeroBanner();
511
+
512
+ const trendingMovies = await getTrendingMovies();
513
+ displayMovies(trendingMovies, 'trendingMovies');
514
+
515
+ const newReleases = await getNewReleases();
516
+ displayMovies(newReleases, 'newReleases');
517
+
518
+ // Rotate hero banner every 10 seconds
519
+ setInterval(displayHeroBanner, 10000);
520
+
521
  // Show modal ad after delay
522
  setTimeout(function() {
523
  document.getElementById('adModal').classList.remove('hidden');
prompts.txt CHANGED
@@ -1,2 +1,3 @@
1
  je veux un hacker de code d'achat et de envao et codecanyon je veux avoir les code d'achat apartir de l'image du produit , et a partir du non du produit etc..
2
- https://flixflow.xyz/ : creer se site en pilote automatique avec des publicité pour monetisé mon site
 
 
1
  je veux un hacker de code d'achat et de envao et codecanyon je veux avoir les code d'achat apartir de l'image du produit , et a partir du non du produit etc..
2
+ https://flixflow.xyz/ : creer se site en pilote automatique avec des publicité pour monetisé mon site
3
+ afficher toutes les images d'origines des films en pilote automatiqe