Hugging Face's logo

Spaces:
docto41
/
streamit
Running

App Files Community
docto41 commited on
Commit
c323b82
·
verified ·
1 Parent(s): 464baa7

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +716 -1
  2. prompts.txt +2 -1
index.html CHANGED
@@ -116,6 +116,18 @@
116
  font-size: 12px;
117
  font-weight: bold;
118
  }
 
 
 
 
 
 
 
 
 
 
 
 
119
  </style>
120
  </head>
121
  <body>
@@ -193,6 +205,7 @@
193
  <div class="relative rounded-xl overflow-hidden shadow-2xl">
194
  <img src="https://image.tmdb.org/t/p/original/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg" alt="Dune: Part Two" class="w-full h-auto">
195
  <div class="quality-badge">4K ULTRA HD</div>
 
196
  <div class="absolute bottom-0 left-0 right-0 p-6">
197
  <h3 class="text-xl font-bold mb-2">Dune: Part Two</h3>
198
  <div class="flex space-x-2 mb-3">
@@ -234,6 +247,7 @@
234
  <div class="relative rounded-lg overflow-hidden video-thumbnail">
235
  <img src="https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQH2CZjjYVvJ.jpg" alt="Oppenheimer" class="w-full h-72 object-cover">
236
  <div class="quality-badge">HD</div>
 
237
  <div class="absolute bottom-0 left-0 right-0 p-4">
238
  <h3 class="font-semibold">Oppenheimer</h3>
239
  <div class="flex items-center text-sm text-gray-300 mt-1">
@@ -250,6 +264,7 @@
250
  <div class="relative rounded-lg overflow-hidden video-thumbnail">
251
  <img src="https://image.tmdb.org/t/p/w500/kDp1vUBnMpe8ak4rjgl3cLELqjU.jpg" alt="Killers of the Flower Moon" class="w-full h-72 object-cover">
252
  <div class="quality-badge">HD</div>
 
253
  <div class="absolute bottom-0 left-0 right-0 p-4">
254
  <h3 class="font-semibold">Killers of the Flower Moon</h3>
255
  <div class="flex items-center text-sm text-gray-300 mt-1">
@@ -266,6 +281,7 @@
266
  <div class="relative rounded-lg overflow-hidden video-thumbnail">
267
  <img src="https://image.tmdb.org/t/p/w500/4m1Au3YkjqsxF8iwQy0fPYSxE0h.jpg" alt="The Batman" class="w-full h-72 object-cover">
268
  <div class="quality-badge">4K</div>
 
269
  <div class="absolute bottom-0 left-0 right-0 p-4">
270
  <h3 class="font-semibold">The Batman</h3>
271
  <div class="flex items-center text-sm text-gray-300 mt-1">
@@ -282,9 +298,708 @@
282
  <div class="relative rounded-lg overflow-hidden video-thumbnail">
283
  <img src="https://image.tmdb.org/t/p/w500/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg" alt="Dune: Part Two" class="w-full h-72 object-cover">
284
  <div class="quality-badge">4K</div>
 
285
  <div class="absolute bottom-0 left-0 right-0 p-4">
286
  <h3 class="font-semibold">Dune: Part Two</h3>
287
  <div class="flex items-center text-sm text-gray-300 mt-1">
288
  <span>2024</span>
289
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
290
  </html>
 
116
  font-size: 12px;
117
  font-weight: bold;
118
  }
119
+
120
+ .full-version-badge {
121
+ position: absolute;
122
+ top: 10px;
123
+ right: 10px;
124
+ background-color: rgba(94, 234, 212, 0.9);
125
+ color: #0f172a;
126
+ padding: 2px 6px;
127
+ border-radius: 4px;
128
+ font-size: 12px;
129
+ font-weight: bold;
130
+ }
131
  </style>
132
  </head>
133
  <body>
 
205
  <div class="relative rounded-xl overflow-hidden shadow-2xl">
206
  <img src="https://image.tmdb.org/t/p/original/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg" alt="Dune: Part Two" class="w-full h-auto">
207
  <div class="quality-badge">4K ULTRA HD</div>
208
+ <div class="full-version-badge">VERSION INTÉGRALE</div>
209
  <div class="absolute bottom-0 left-0 right-0 p-6">
210
  <h3 class="text-xl font-bold mb-2">Dune: Part Two</h3>
211
  <div class="flex space-x-2 mb-3">
 
247
  <div class="relative rounded-lg overflow-hidden video-thumbnail">
248
  <img src="https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQH2CZjjYVvJ.jpg" alt="Oppenheimer" class="w-full h-72 object-cover">
249
  <div class="quality-badge">HD</div>
250
+ <div class="full-version-badge">INTÉGRALE</div>
251
  <div class="absolute bottom-0 left-0 right-0 p-4">
252
  <h3 class="font-semibold">Oppenheimer</h3>
253
  <div class="flex items-center text-sm text-gray-300 mt-1">
 
264
  <div class="relative rounded-lg overflow-hidden video-thumbnail">
265
  <img src="https://image.tmdb.org/t/p/w500/kDp1vUBnMpe8ak4rjgl3cLELqjU.jpg" alt="Killers of the Flower Moon" class="w-full h-72 object-cover">
266
  <div class="quality-badge">HD</div>
267
+ <div class="full-version-badge">INTÉGRALE</div>
268
  <div class="absolute bottom-0 left-0 right-0 p-4">
269
  <h3 class="font-semibold">Killers of the Flower Moon</h3>
270
  <div class="flex items-center text-sm text-gray-300 mt-1">
 
281
  <div class="relative rounded-lg overflow-hidden video-thumbnail">
282
  <img src="https://image.tmdb.org/t/p/w500/4m1Au3YkjqsxF8iwQy0fPYSxE0h.jpg" alt="The Batman" class="w-full h-72 object-cover">
283
  <div class="quality-badge">4K</div>
284
+ <div class="full-version-badge">INTÉGRALE</div>
285
  <div class="absolute bottom-0 left-0 right-0 p-4">
286
  <h3 class="font-semibold">The Batman</h3>
287
  <div class="flex items-center text-sm text-gray-300 mt-1">
 
298
  <div class="relative rounded-lg overflow-hidden video-thumbnail">
299
  <img src="https://image.tmdb.org/t/p/w500/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg" alt="Dune: Part Two" class="w-full h-72 object-cover">
300
  <div class="quality-badge">4K</div>
301
+ <div class="full-version-badge">INTÉGRALE</div>
302
  <div class="absolute bottom-0 left-0 right-0 p-4">
303
  <h3 class="font-semibold">Dune: Part Two</h3>
304
  <div class="flex items-center text-sm text-gray-300 mt-1">
305
  <span>2024</span>
306
+ <span class="mx-2">•</span>
307
+ <span class="text-yellow-400"><i class="fas fa-star mr-1"></i> 8.5</span>
308
+ </div>
309
+ <button class="play-button mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded text-sm" data-id="693134">Regarder</button>
310
+ </div>
311
+ </div>
312
+ </div>
313
+
314
+ <div class="flex-shrink-0 w-64 card-hover">
315
+ <div class="relative rounded-lg overflow-hidden video-thumbnail">
316
+ <img src="https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1n2ua.jpg" alt="Poor Things" class="w-full h-72 object-cover">
317
+ <div class="quality-badge">HD</div>
318
+ <div class="full-version-badge">INTÉGRALE</div>
319
+ <div class="absolute bottom-0 left-0 right-0 p-4">
320
+ <h3 class="font-semibold">Poor Things</h3>
321
+ <div class="flex items-center text-sm text-gray-300 mt-1">
322
+ <span>2023</span>
323
+ <span class="mx-2">•</span>
324
+ <span class="text-yellow-400"><i class="fas fa-star mr-1"></i> 8.1</span>
325
+ </div>
326
+ <button class="play-button mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded text-sm" data-id="792774">Regarder</button>
327
+ </div>
328
+ </div>
329
+ </div>
330
+
331
+ <div class="flex-shrink-0 w-64 card-hover">
332
+ <div class="relative rounded-lg overflow-hidden video-thumbnail">
333
+ <img src="https://image.tmdb.org/t/p/w500/9dHFRTHP7OAhDTKsmYeDUNAx7Bf.jpg" alt="The Holdovers" class="w-full h-72 object-cover">
334
+ <div class="quality-badge">HD</div>
335
+ <div class="full-version-badge">INTÉGRALE</div>
336
+ <div class="absolute bottom-0 left-0 right-0 p-4">
337
+ <h3 class="font-semibold">The Holdovers</h3>
338
+ <div class="flex items-center text-sm text-gray-300 mt-1">
339
+ <span>2023</span>
340
+ <span class="mx-2">•</span>
341
+ <span class="text-yellow-400"><i class="fas fa-star mr-1"></i> 8.0</span>
342
+ </div>
343
+ <button class="play-button mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded text-sm" data-id="786892">Regarder</button>
344
+ </div>
345
+ </div>
346
+ </div>
347
+
348
+ <div class="flex-shrink-0 w-64 card-hover">
349
+ <div class="relative rounded-lg overflow-hidden video-thumbnail">
350
+ <img src="https://image.tmdb.org/t/p/w500/1X7OF6bF8ZgBVxUxk4O1LJ5kYhZ.jpg" alt="The Zone of Interest" class="w-full h-72 object-cover">
351
+ <div class="quality-badge">HD</div>
352
+ <div class="full-version-badge">INTÉGRALE</div>
353
+ <div class="absolute bottom-0 left-0 right-0 p-4">
354
+ <h3 class="font-semibold">The Zone of Interest</h3>
355
+ <div class="flex items-center text-sm text-gray-300 mt-1">
356
+ <span>2023</span>
357
+ <span class="mx-2">•</span>
358
+ <span class="text-yellow-400"><i class="fas fa-star mr-1"></i> 7.9</span>
359
+ </div>
360
+ <button class="play-button mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded text-sm" data-id="840326">Regarder</button>
361
+ </div>
362
+ </div>
363
+ </div>
364
+
365
+ <div class="flex-shrink-0 w-64 card-hover">
366
+ <div class="relative rounded-lg overflow-hidden video-thumbnail">
367
+ <img src="https://image.tmdb.org/t/p/w500/1jXxl7XDoYl2Lf453MNphQy2xBH.jpg" alt="Anatomy of a Fall" class="w-full h-72 object-cover">
368
+ <div class="quality-badge">HD</div>
369
+ <div class="full-version-badge">INTÉGRALE</div>
370
+ <div class="absolute bottom-0 left-0 right-0 p-4">
371
+ <h3 class="font-semibold">Anatomy of a Fall</h3>
372
+ <div class="flex items-center text-sm text-gray-300 mt-1">
373
+ <span>2023</span>
374
+ <span class="mx-2">•</span>
375
+ <span class="text-yellow-400"><i class="fas fa-star mr-1"></i> 7.9</span>
376
+ </div>
377
+ <button class="play-button mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded text-sm" data-id="930564">Regarder</button>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ </div>
382
+ </div>
383
+ </div>
384
+ </section>
385
+
386
+ <!-- Popular Films Section -->
387
+ <section class="py-12 px-6 md:px-12 lg:px-24 bg-slate-900 bg-opacity-50">
388
+ <div class="container mx-auto">
389
+ <div class="flex justify-between items-center mb-8">
390
+ <h2 class="text-2xl md:text-3xl font-bold">Films Populaires en Version Intégrale</h2>
391
+ <a href="#" class="text-blue-400 hover:text-blue-300 flex items-center">
392
+ Voir plus <i class="fas fa-chevron-right ml-2 text-sm"></i>
393
+ </a>
394
+ </div>
395
+
396
+ <div class="film-grid">
397
+ <!-- Grid of popular movies -->
398
+ <div class="card-hover">
399
+ <div class="relative rounded-lg overflow-hidden video-thumbnail">
400
+ <img src="https://image.tmdb.org/t/p/w500/3bhkrj58Vtu7enYsRolD1fZdja1.jpg" alt="The Godfather" class="w-full h-80 object-cover">
401
+ <div class="quality-badge">4K</div>
402
+ <div class="full-version-badge">INTÉGRALE</div>
403
+ <div class="absolute bottom-0 left-0 right-0 p-4">
404
+ <h3 class="font-semibold">The Godfather</h3>
405
+ <div class="flex items-center text-sm text-gray-300 mt-1">
406
+ <span>1972</span>
407
+ <span class="mx-2">•</span>
408
+ <span class="text-yellow-400"><i class="fas fa-star mr-1"></i> 8.7</span>
409
+ </div>
410
+ <button class="play-button mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded text-sm" data-id="238">Regarder</button>
411
+ </div>
412
+ </div>
413
+ </div>
414
+
415
+ <div class="card-hover">
416
+ <div class="relative rounded-lg overflow-hidden video-thumbnail">
417
+ <img src="https://image.tmdb.org/t/p/w500/q6y0Go1tsGEsmtFryDOJo3dEmqu.jpg" alt="The Shawshank Redemption" class="w-full h-80 object-cover">
418
+ <div class="quality-badge">4K</div>
419
+ <div class="full-version-badge">INTÉGRALE</div>
420
+ <div class="absolute bottom-0 left-0 right-0 p-4">
421
+ <h3 class="font-semibold">The Shawshank Redemption</h3>
422
+ <div class="flex items-center text-sm text-gray-300 mt-1">
423
+ <span>1994</span>
424
+ <span class="mx-2">•</span>
425
+ <span class="text-yellow-400"><i class="fas fa-star mr-1"></i> 8.7</span>
426
+ </div>
427
+ <button class="play-button mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded text-sm" data-id="278">Regarder</button>
428
+ </div>
429
+ </div>
430
+ </div>
431
+
432
+ <div class="card-hover">
433
+ <div class="relative rounded-lg overflow-hidden video-thumbnail">
434
+ <img src="https://image.tmdb.org/t/p/w500/vQX8Z3acOLBpQNvEfHiG27X2iIU.jpg" alt="Pulp Fiction" class="w-full h-80 object-cover">
435
+ <div class="quality-badge">4K</div>
436
+ <div class="full-version-badge">INTÉGRALE</div>
437
+ <div class="absolute bottom-0 left-0 right-0 p-4">
438
+ <h3 class="font-semibold">Pulp Fiction</h3>
439
+ <div class="flex items-center text-sm text-gray-300 mt-1">
440
+ <span>1994</span>
441
+ <span class="mx-2">•</span>
442
+ <span class="text-yellow-400"><i class="fas fa-star mr-1"></i> 8.5</span>
443
+ </div>
444
+ <button class="play-button mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded text-sm" data-id="680">Regarder</button>
445
+ </div>
446
+ </div>
447
+ </div>
448
+
449
+ <div class="card-hover">
450
+ <div class="relative rounded-lg overflow-hidden video-thumbnail">
451
+ <img src="https://image.tmdb.org/t/p/w500/3f92DMBTFqr3wgXpfxzrb0qv8nG.jpg" alt="The Dark Knight" class="w-full h-80 object-cover">
452
+ <div class="quality-badge">4K</div>
453
+ <div class="full-version-badge">INTÉGRALE</div>
454
+ <div class="absolute bottom-0 left-0 right-0 p-4">
455
+ <h3 class="font-semibold">The Dark Knight</h3>
456
+ <div class="flex items-center text-sm text-gray-300 mt-1">
457
+ <span>2008</span>
458
+ <span class="mx-2">•</span>
459
+ <span class="text-yellow-400"><i class="fas fa-star mr-1"></i> 8.5</span>
460
+ </div>
461
+ <button class="play-button mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded text-sm" data-id="155">Regarder</button>
462
+ </div>
463
+ </div>
464
+ </div>
465
+
466
+ <div class="card-hover">
467
+ <div class="relative rounded-lg overflow-hidden video-thumbnail">
468
+ <img src="https://image.tmdb.org/t/p/w500/lyQBXzOQSuE59IsHyhrp0qIiPAz.jpg" alt="Parasite" class="w-full h-80 object-cover">
469
+ <div class="quality-badge">4K</div>
470
+ <div class="full-version-badge">INTÉGRALE</div>
471
+ <div class="absolute bottom-0 left-0 right-0 p-4">
472
+ <h3 class="font-semibold">Parasite</h3>
473
+ <div class="flex items-center text-sm text-gray-300 mt-1">
474
+ <span>2019</span>
475
+ <span class="mx-2">•</span>
476
+ <span class="text-yellow-400"><i class="fas fa-star mr-1"></i> 8.5</span>
477
+ </div>
478
+ <button class="play-button mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded text-sm" data-id="496243">Regarder</button>
479
+ </div>
480
+ </div>
481
+ </div>
482
+
483
+ <div class="card-hover">
484
+ <div class="relative rounded-lg overflow-hidden video-thumbnail">
485
+ <img src="https://image.tmdb.org/t/p/w500/1E5baAaEse26fej7uHcjOgEE2t2.jpg" alt="Spirited Away" class="w-full h-80 object-cover">
486
+ <div class="quality-badge">4K</div>
487
+ <div class="full-version-badge">INTÉGRALE</div>
488
+ <div class="absolute bottom-0 left-0 right-0 p-4">
489
+ <h3 class="font-semibold">Spirited Away</h3>
490
+ <div class="flex items-center text-sm text-gray-300 mt-1">
491
+ <span>2001</span>
492
+ <span class="mx-2">•</span>
493
+ <span class="text-yellow-400"><i class="fas fa-star mr-1"></i> 8.5</span>
494
+ </div>
495
+ <button class="play-button mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded text-sm" data-id="129">Regarder</button>
496
+ </div>
497
+ </div>
498
+ </div>
499
+
500
+ <div class="card-hover">
501
+ <div class="relative rounded-lg overflow-hidden video-thumbnail">
502
+ <img src="https://image.tmdb.org/t/p/w500/7IiTTgloJzvGI1TAYymCfbfl3vT.jpg" alt="Interstellar" class="w-full h-80 object-cover">
503
+ <div class="quality-badge">4K</div>
504
+ <div class="full-version-badge">INTÉGRALE</div>
505
+ <div class="absolute bottom-0 left-0 right-0 p-4">
506
+ <h3 class="font-semibold">Interstellar</h3>
507
+ <div class="flex items-center text-sm text-gray-300 mt-1">
508
+ <span>2014</span>
509
+ <span class="mx-2">•</span>
510
+ <span class="text-yellow-400"><i class="fas fa-star mr-1"></i> 8.4</span>
511
+ </div>
512
+ <button class="play-button mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded text-sm" data-id="157336">Regarder</button>
513
+ </div>
514
+ </div>
515
+ </div>
516
+
517
+ <div class="card-hover">
518
+ <div class="relative rounded-lg overflow-hidden video-thumbnail">
519
+ <img src="https://image.tmdb.org/t/p/w500/6mJrgv7N0JdDETFFZgDYnFbx5hZ.jpg" alt="The Lord of the Rings: The Fellowship of the Ring" class="w-full h-80 object-cover">
520
+ <div class="quality-badge">4K</div>
521
+ <div class="full-version-badge">INTÉGRALE</div>
522
+ <div class="absolute bottom-0 left-0 right-0 p-4">
523
+ <h3 class="font-semibold">The Lord of the Rings: The Fellowship of the Ring</h3>
524
+ <div class="flex items-center text-sm text-gray-300 mt-1">
525
+ <span>2001</span>
526
+ <span class="mx-2">•</span>
527
+ <span class="text-yellow-400"><i class="fas fa-star mr-1"></i> 8.4</span>
528
+ </div>
529
+ <button class="play-button mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded text-sm" data-id="120">Regarder</button>
530
+ </div>
531
+ </div>
532
+ </div>
533
+ </div>
534
+ </div>
535
+ </section>
536
+
537
+ <!-- Action Films Section -->
538
+ <section class="py-12 px-6 md:px-12 lg:px-24">
539
+ <div class="container mx-auto">
540
+ <div class="flex justify-between items-center mb-8">
541
+ <h2 class="text-2xl md:text-3xl font-bold">Films d'Action en Version Intégrale</h2>
542
+ <a href="#" class="text-blue-400 hover:text-blue-300 flex items-center">
543
+ Voir plus <i class="fas fa-chevron-right ml-2 text-sm"></i>
544
+ </a>
545
+ </div>
546
+
547
+ <div class="relative">
548
+ <div class="flex overflow-x-auto scrollbar-hide space-x-6 pb-6">
549
+ <!-- Action Movie Cards -->
550
+ <div class="flex-shrink-0 w-64 card-hover">
551
+ <div class="relative rounded-lg overflow-hidden video-thumbnail">
552
+ <img src="https://image.tmdb.org/t/p/w500/vZloFAK7NmvMGKE7VkF5UHaz0I.jpg" alt="John Wick: Chapter 4" class="w-full h-72 object-cover">
553
+ <div class="quality-badge">4K</div>
554
+ <div class="full-version-badge">INTÉGRALE</div>
555
+ <div class="absolute bottom-0 left-0 right-0 p-4">
556
+ <h3 class="font-semibold">John Wick: Chapter 4</h3>
557
+ <div class="flex items-center text-sm text-gray-300 mt-1">
558
+ <span>2023</span>
559
+ <span class="mx-2">•</span>
560
+ <span class="text-yellow-400"><i class="fas fa-star mr-1"></i> 7.8</span>
561
+ </div>
562
+ <button class="play-button mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded text-sm" data-id="603692">Regarder</button>
563
+ </div>
564
+ </div>
565
+ </div>
566
+
567
+ <div class="flex-shrink-0 w-64 card-hover">
568
+ <div class="relative rounded-lg overflow-hidden video-thumbnail">
569
+ <img src="https://image.tmdb.org/t/p/w500/628Dep6AxEtDxjZoGP78TsOxYbK.jpg" alt="Mission: Impossible - Dead Reckoning Part One" class="w-full h-72 object-cover">
570
+ <div class="quality-badge">4K</div>
571
+ <div class="full-version-badge">INTÉGRALE</div>
572
+ <div class="absolute bottom-0 left-0 right-0 p-4">
573
+ <h3 class="font-semibold">Mission: Impossible 7</h3>
574
+ <div class="flex items-center text-sm text-gray-300 mt-1">
575
+ <span>2023</span>
576
+ <span class="mx-2">•</span>
577
+ <span class="text-yellow-400"><i class="fas fa-star mr-1"></i> 7.6</span>
578
+ </div>
579
+ <button class="play-button mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded text-sm" data-id="575264">Regarder</button>
580
+ </div>
581
+ </div>
582
+ </div>
583
+
584
+ <div class="flex-shrink-0 w-64 card-hover">
585
+ <div class="relative rounded-lg overflow-hidden video-thumbnail">
586
+ <img src="https://image.tmdb.org/t/p/w500/4XM8DUTQb3lhLemJC51Jx4a2EuA.jpg" alt="Fast X" class="w-full h-72 object-cover">
587
+ <div class="quality-badge">4K</div>
588
+ <div class="full-version-badge">INTÉGRALE</div>
589
+ <div class="absolute bottom-0 left-0 right-0 p-4">
590
+ <h3 class="font-semibold">Fast X</h3>
591
+ <div class="flex items-center text-sm text-gray-300 mt-1">
592
+ <span>2023</span>
593
+ <span class="mx-2">•</span>
594
+ <span class="text-yellow-400"><i class="fas fa-star mr-1"></i> 7.2</span>
595
+ </div>
596
+ <button class="play-button mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded text-sm" data-id="385687">Regarder</button>
597
+ </div>
598
+ </div>
599
+ </div>
600
+
601
+ <div class="flex-shrink-0 w-64 card-hover">
602
+ <div class="relative rounded-lg overflow-hidden video-thumbnail">
603
+ <img src="https://image.tmdb.org/t/p/w500/5i6SjyDbDWqyun8klUuCxrlFbyw.jpg" alt="Extraction 2" class="w-full h-72 object-cover">
604
+ <div class="quality-badge">4K</div>
605
+ <div class="full-version-badge">INTÉGRALE</div>
606
+ <div class="absolute bottom-0 left-0 right-0 p-4">
607
+ <h3 class="font-semibold">Extraction 2</h3>
608
+ <div class="flex items-center text-sm text-gray-300 mt-1">
609
+ <span>2023</span>
610
+ <span class="mx-2">•</span>
611
+ <span class="text-yellow-400"><i class="fas fa-star mr-1"></i> 7.5</span>
612
+ </div>
613
+ <button class="play-button mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded text-sm" data-id="1035806">Regarder</button>
614
+ </div>
615
+ </div>
616
+ </div>
617
+
618
+ <div class="flex-shrink-0 w-64 card-hover">
619
+ <div class="relative rounded-lg overflow-hidden video-thumbnail">
620
+ <img src="https://image.tmdb.org/t/p/w500/7gKI9hpEMcZUQpNgKrkDzJpbnNS.jpg" alt="The Equalizer 3" class="w-full h-72 object-cover">
621
+ <div class="quality-badge">4K</div>
622
+ <div class="full-version-badge">INTÉGRALE</div>
623
+ <div class="absolute bottom-0 left-0 right-0 p-4">
624
+ <h3 class="font-semibold">The Equalizer 3</h3>
625
+ <div class="flex items-center text-sm text-gray-300 mt-1">
626
+ <span>2023</span>
627
+ <span class="mx-2">•</span>
628
+ <span class="text-yellow-400"><i class="fas fa-star mr-1"></i> 7.3</span>
629
+ </div>
630
+ <button class="play-button mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded text-sm" data-id="926393">Regarder</button>
631
+ </div>
632
+ </div>
633
+ </div>
634
+
635
+ <div class="flex-shrink-0 w-64 card-hover">
636
+ <div class="relative rounded-lg overflow-hidden video-thumbnail">
637
+ <img src="https://image.tmdb.org/t/p/w500/8YFL5QQVPy3AgrEQxNYVSgiPEbe.jpg" alt="Bullet Train" class="w-full h-72 object-cover">
638
+ <div class="quality-badge">4K</div>
639
+ <div class="full-version-badge">INTÉGRALE</div>
640
+ <div class="absolute bottom-0 left-0 right-0 p-4">
641
+ <h3 class="font-semibold">Bullet Train</h3>
642
+ <div class="flex items-center text-sm text-gray-300 mt-1">
643
+ <span>2022</span>
644
+ <span class="mx-2">•</span>
645
+ <span class="text-yellow-400"><i class="fas fa-star mr-1"></i> 7.5</span>
646
+ </div>
647
+ <button class="play-button mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded text-sm" data-id="718930">Regarder</button>
648
+ </div>
649
+ </div>
650
+ </div>
651
+
652
+ <div class="flex-shrink-0 w-64 card-hover">
653
+ <div class="relative rounded-lg overflow-hidden video-thumbnail">
654
+ <img src="https://image.tmdb.org/t/p/w500/1UkbPQezu4P8BwQ9k7EVYqIGxCT.jpg" alt="Top Gun: Maverick" class="w-full h-72 object-cover">
655
+ <div class="quality-badge">4K</div>
656
+ <div class="full-version-badge">INTÉGRALE</div>
657
+ <div class="absolute bottom-0 left-0 right-0 p-4">
658
+ <h3 class="font-semibold">Top Gun: Maverick</h3>
659
+ <div class="flex items-center text-sm text-gray-300 mt-1">
660
+ <span>2022</span>
661
+ <span class="mx-2">•</span>
662
+ <span class="text-yellow-400"><i class="fas fa-star mr-1"></i> 8.3</span>
663
+ </div>
664
+ <button class="play-button mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded text-sm" data-id="361743">Regarder</button>
665
+ </div>
666
+ </div>
667
+ </div>
668
+
669
+ <div class="flex-shrink-0 w-64 card-hover">
670
+ <div class="relative rounded-lg overflow-hidden video-thumbnail">
671
+ <img src="https://image.tmdb.org/t/p/w500/6DrHO1jr3qVrViUO6s6kFiAGM7.jpg" alt="No Time to Die" class="w-full h-72 object-cover">
672
+ <div class="quality-badge">4K</div>
673
+ <div class="full-version-badge">INTÉGRALE</div>
674
+ <div class="absolute bottom-0 left-0 right-0 p-4">
675
+ <h3 class="font-semibold">No Time to Die</h3>
676
+ <div class="flex items-center text-sm text-gray-300 mt-1">
677
+ <span>2021</span>
678
+ <span class="mx-2">•</span>
679
+ <span class="text-yellow-400"><i class="fas fa-star mr-1"></i> 7.4</span>
680
+ </div>
681
+ <button class="play-button mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded text-sm" data-id="370172">Regarder</button>
682
+ </div>
683
+ </div>
684
+ </div>
685
+ </div>
686
+ </div>
687
+ </div>
688
+ </section>
689
+
690
+ <!-- Genres Section -->
691
+ <section id="genres" class="py-12 px-6 md:px-12 lg:px-24 bg-slate-900 bg-opacity-50">
692
+ <div class="container mx-auto">
693
+ <h2 class="text-2xl md:text-3xl font-bold mb-8">Parcourir par Genres</h2>
694
+
695
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
696
+ <a href="#" class="genre-tag bg-slate-800 hover:bg-blue-600 text-white py-3 px-4 rounded-lg text-center font-medium">
697
+ <i class="fas fa-explosion mr-2"></i> Action
698
+ </a>
699
+ <a href="#" class="genre-tag bg-slate-800 hover:bg-blue-600 text-white py-3 px-4 rounded-lg text-center font-medium">
700
+ <i class="fas fa-laugh-squint mr-2"></i> Comédie
701
+ </a>
702
+ <a href="#" class="genre-tag bg-slate-800 hover:bg-blue-600 text-white py-3 px-4 rounded-lg text-center font-medium">
703
+ <i class="fas fa-dragon mr-2"></i> Fantastique
704
+ </a>
705
+ <a href="#" class="genre-tag bg-slate-800 hover:bg-blue-600 text-white py-3 px-4 rounded-lg text-center font-medium">
706
+ <i class="fas fa-robot mr-2"></i> Science-Fiction
707
+ </a>
708
+ <a href="#" class="genre-tag bg-slate-800 hover:bg-blue-600 text-white py-3 px-4 rounded-lg text-center font-medium">
709
+ <i class="fas fa-heart-broken mr-2"></i> Romance
710
+ </a>
711
+ <a href="#" class="genre-tag bg-slate-800 hover:bg-blue-600 text-white py-3 px-4 rounded-lg text-center font-medium">
712
+ <i class="fas fa-ghost mr-2"></i> Horreur
713
+ </a>
714
+ <a href="#" class="genre-tag bg-slate-800 hover:bg-blue-600 text-white py-3 px-4 rounded-lg text-center font-medium">
715
+ <i class="fas fa-user-secret mr-2"></i> Thriller
716
+ </a>
717
+ <a href="#" class="genre-tag bg-slate-800 hover:bg-blue-600 text-white py-3 px-4 rounded-lg text-center font-medium">
718
+ <i class="fas fa-theater-masks mr-2"></i> Drame
719
+ </a>
720
+ <a href="#" class="genre-tag bg-slate-800 hover:bg-blue-600 text-white py-3 px-4 rounded-lg text-center font-medium">
721
+ <i class="fas fa-music mr-2"></i> Musical
722
+ </a>
723
+ <a href="#" class="genre-tag bg-slate-800 hover:bg-blue-600 text-white py-3 px-4 rounded-lg text-center font-medium">
724
+ <i class="fas fa-child mr-2"></i> Animation
725
+ </a>
726
+ <a href="#" class="genre-tag bg-slate-800 hover:bg-blue-600 text-white py-3 px-4 rounded-lg text-center font-medium">
727
+ <i class="fas fa-user-ninja mr-2"></i> Arts Martiaux
728
+ </a>
729
+ <a href="#" class="genre-tag bg-slate-800 hover:bg-blue-600 text-white py-3 px-4 rounded-lg text-center font-medium">
730
+ <i class="fas fa-question mr-2"></i> Mystère
731
+ </a>
732
+ </div>
733
+ </div>
734
+ </section>
735
+
736
+ <!-- My List Section -->
737
+ <section id="my-list" class="py-12 px-6 md:px-12 lg:px-24">
738
+ <div class="container mx-auto">
739
+ <div class="flex justify-between items-center mb-8">
740
+ <h2 class="text-2xl md:text-3xl font-bold">Ma Liste</h2>
741
+ <a href="#" class="text-blue-400 hover:text-blue-300 flex items-center">
742
+ Voir tout <i class="fas fa-chevron-right ml-2 text-sm"></i>
743
+ </a>
744
+ </div>
745
+
746
+ <div class="film-grid">
747
+ <!-- User's list of movies -->
748
+ <div class="card-hover">
749
+ <div class="relative rounded-lg overflow-hidden video-thumbnail">
750
+ <img src="https://image.tmdb.org/t/p/w500/7gKI9hpEMcZUQpNgKrkDzJpbnNS.jpg" alt="The Equalizer 3" class="w-full h-80 object-cover">
751
+ <div class="quality-badge">4K</div>
752
+ <div class="full-version-badge">INTÉGRALE</div>
753
+ <div class="absolute bottom-0 left-0 right-0 p-4">
754
+ <h3 class="font-semibold">The Equalizer 3</h3>
755
+ <button class="play-button mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded text-sm" data-id="926393">Regarder</button>
756
+ </div>
757
+ </div>
758
+ </div>
759
+
760
+ <div class="card-hover">
761
+ <div class="relative rounded-lg overflow-hidden video-thumbnail">
762
+ <img src="https://image.tmdb.org/t/p/w500/628Dep6AxEtDxjZoGP78TsOxYbK.jpg" alt="Mission: Impossible 7" class="w-full h-80 object-cover">
763
+ <div class="quality-badge">4K</div>
764
+ <div class="full-version-badge">INTÉGRALE</div>
765
+ <div class="absolute bottom-0 left-0 right-0 p-4">
766
+ <h3 class="font-semibold">Mission: Impossible 7</h3>
767
+ <button class="play-button mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded text-sm" data-id="575264">Regarder</button>
768
+ </div>
769
+ </div>
770
+ </div>
771
+
772
+ <div class="card-hover">
773
+ <div class="relative rounded-lg overflow-hidden video-thumbnail">
774
+ <img src="https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQH2CZjjYVvJ.jpg" alt="Oppenheimer" class="w-full h-80 object-cover">
775
+ <div class="quality-badge">4K</div>
776
+ <div class="full-version-badge">INTÉGRALE</div>
777
+ <div class="absolute bottom-0 left-0 right-0 p-4">
778
+ <h3 class="font-semibold">Oppenheimer</h3>
779
+ <button class="play-button mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded text-sm" data-id="872585">Regarder</button>
780
+ </div>
781
+ </div>
782
+ </div>
783
+
784
+ <div class="card-hover">
785
+ <div class="relative rounded-lg overflow-hidden video-thumbnail">
786
+ <img src="https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1n2ua.jpg" alt="Poor Things" class="w-full h-80 object-cover">
787
+ <div class="quality-badge">4K</div>
788
+ <div class="full-version-badge">INTÉGRALE</div>
789
+ <div class="absolute bottom-0 left-0 right-0 p-4">
790
+ <h3 class="font-semibold">Poor Things</h3>
791
+ <button class="play-button mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded text-sm" data-id="792774">Regarder</button>
792
+ </div>
793
+ </div>
794
+ </div>
795
+ </div>
796
+ </div>
797
+ </section>
798
+
799
+ <!-- Video Player Modal -->
800
+ <div id="video-modal" class="modal">
801
+ <div class="modal-content">
802
+ <div class="p-4 flex justify-between items-center border-b border-slate-700">
803
+ <h3 class="text-xl font-bold">Lecture en cours</h3>
804
+ <button id="close-modal" class="text-gray-400 hover:text-white">
805
+ <i class="fas fa-times"></i>
806
+ </button>
807
+ </div>
808
+ <div class="p-6">
809
+ <div class="aspect-w-16 aspect-h-9 mb-6">
810
+ <iframe id="video-player" class="w-full h-96" src="" frameborder="0" allowfullscreen></iframe>
811
+ </div>
812
+ <div class="flex justify-between items-center">
813
+ <div>
814
+ <h4 id="video-title" class="text-lg font-semibold">Titre du film</h4>
815
+ <div class="flex items-center text-sm text-gray-400 mt-1">
816
+ <span id="video-year">2023</span>
817
+ <span class="mx-2">•</span>
818
+ <span id="video-rating" class="text-yellow-400"><i class="fas fa-star mr-1"></i> 8.5</span>
819
+ </div>
820
+ </div>
821
+ <div class="flex space-x-2">
822
+ <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded">
823
+ <i class="fas fa-plus mr-2"></i> Ma liste
824
+ </button>
825
+ <button class="bg-slate-700 hover:bg-slate-600 text-white py-2 px-4 rounded">
826
+ <i class="fas fa-share mr-2"></i> Partager
827
+ </button>
828
+ </div>
829
+ </div>
830
+ <p id="video-description" class="mt-4 text-gray-300">
831
+ Description du film...
832
+ </p>
833
+ </div>
834
+ </div>
835
+ </div>
836
+
837
+ <!-- Footer -->
838
+ <footer class="bg-slate-900 py-12 px-6 md:px-12 lg:px-24">
839
+ <div class="container mx-auto">
840
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
841
+ <div>
842
+ <div class="flex items-center space-x-2 mb-4">
843
+ <i class="fas fa-play-circle text-blue-500 text-2xl"></i>
844
+ <span class="text-xl font-bold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">StreamIt Premium</span>
845
+ </div>
846
+ <p class="text-gray-400">
847
+ La meilleure plateforme pour regarder des films complets en version intégrale en HD/4K.
848
+ </p>
849
+ <div class="flex space-x-4 mt-6">
850
+ <a href="#" class="text-gray-400 hover:text-white">
851
+ <i class="fab fa-facebook-f"></i>
852
+ </a>
853
+ <a href="#" class="text-gray-400 hover:text-white">
854
+ <i class="fab fa-twitter"></i>
855
+ </a>
856
+ <a href="#" class="text-gray-400 hover:text-white">
857
+ <i class="fab fa-instagram"></i>
858
+ </a>
859
+ <a href="#" class="text-gray-400 hover:text-white">
860
+ <i class="fab fa-youtube"></i>
861
+ </a>
862
+ </div>
863
+ </div>
864
+
865
+ <div>
866
+ <h4 class="text-lg font-semibold mb-4">Navigation</h4>
867
+ <ul class="space-y-2">
868
+ <li><a href="#" class="text-gray-400 hover:text-blue-400">Accueil</a></li>
869
+ <li><a href="#movies" class="text-gray-400 hover:text-blue-400">Films Complets</a></li>
870
+ <li><a href="#tv-shows" class="text-gray-400 hover:text-blue-400">Séries</a></li>
871
+ <li><a href="#genres" class="text-gray-400 hover:text-blue-400">Genres</a></li>
872
+ <li><a href="#my-list" class="text-gray-400 hover:text-blue-400">Ma liste</a></li>
873
+ </ul>
874
+ </div>
875
+
876
+ <div>
877
+ <h4 class="text-lg font-semibold mb-4">Informations</h4>
878
+ <ul class="space-y-2">
879
+ <li><a href="#" class="text-gray-400 hover:text-blue-400">À propos</a></li>
880
+ <li><a href="#" class="text-gray-400 hover:text-blue-400">Contact</a></li>
881
+ <li><a href="#" class="text-gray-400 hover:text-blue-400">Politique de confidentialité</a></li>
882
+ <li><a href="#" class="text-gray-400 hover:text-blue-400">Conditions d'utilisation</a></li>
883
+ <li><a href="#" class="text-gray-400 hover:text-blue-400">FAQ</a></li>
884
+ </ul>
885
+ </div>
886
+
887
+ <div>
888
+ <h4 class="text-lg font-semibold mb-4">Newsletter</h4>
889
+ <p class="text-gray-400 mb-4">
890
+ Abonnez-vous pour recevoir les dernières nouveautés et offres spéciales.
891
+ </p>
892
+ <div class="flex">
893
+ <input type="email" placeholder="Votre email" class="bg-slate-800 text-white py-2 px-4 rounded-l focus:outline-none w-full">
894
+ <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-r">
895
+ <i class="fas fa-paper-plane"></i>
896
+ </button>
897
+ </div>
898
+ </div>
899
+ </div>
900
+
901
+ <div class="border-t border-slate-800 mt-12 pt-8 text-center text-gray-500">
902
+ <p>© 2023 StreamIt Premium. Tous droits réservés.</p>
903
+ </div>
904
+ </div>
905
+ </footer>
906
+
907
+ <script>
908
+ // Mobile menu toggle
909
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
910
+ const mobileMenu = document.getElementById('mobile-menu');
911
+ const closeMenuButton = document.getElementById('close-menu');
912
+
913
+ mobileMenuButton.addEventListener('click', () => {
914
+ mobileMenu.classList.remove('hidden');
915
+ });
916
+
917
+ closeMenuButton.addEventListener('click', () => {
918
+ mobileMenu.classList.add('hidden');
919
+ });
920
+
921
+ // Video modal functionality
922
+ const videoModal = document.getElementById('video-modal');
923
+ const closeModal = document.getElementById('close-modal');
924
+ const videoPlayer = document.getElementById('video-player');
925
+ const videoTitle = document.getElementById('video-title');
926
+ const videoYear = document.getElementById('video-year');
927
+ const videoRating = document.getElementById('video-rating');
928
+ const videoDescription = document.getElementById('video-description');
929
+
930
+ const playButtons = document.querySelectorAll('.play-button');
931
+
932
+ playButtons.forEach(button => {
933
+ button.addEventListener('click', () => {
934
+ const movieId = button.getAttribute('data-id');
935
+ // In a real app, you would fetch movie details based on ID
936
+ // Here we're just simulating with placeholder data
937
+
938
+ // Set movie details
939
+ const movieCard = button.closest('.card-hover');
940
+ const movieName = movieCard.querySelector('h3').textContent;
941
+ const movieYearRating = movieCard.querySelectorAll('span');
942
+ const year = movieYearRating[0].textContent;
943
+ const rating = movieYearRating[2].textContent;
944
+
945
+ videoTitle.textContent = movieName;
946
+ videoYear.textContent = year;
947
+ videoRating.innerHTML = `<i class="fas fa-star mr-1"></i> ${rating.split(' ')[1]}`;
948
+ videoDescription.textContent = `Regardez maintenant "${movieName}" en version intégrale sans coupures. Profitez de la meilleure qualité HD/4K disponible.`;
949
+
950
+ // In a real app, you would set the actual video source
951
+ // videoPlayer.src = `https://example.com/player?movie=${movieId}`;
952
+
953
+ videoModal.style.display = 'flex';
954
+ });
955
+ });
956
+
957
+ closeModal.addEventListener('click', () => {
958
+ videoModal.style.display = 'none';
959
+ videoPlayer.src = '';
960
+ });
961
+
962
+ // Close modal when clicking outside
963
+ window.addEventListener('click', (e) => {
964
+ if (e.target === videoModal) {
965
+ videoModal.style.display = 'none';
966
+ videoPlayer.src = '';
967
+ }
968
+ });
969
+
970
+ // Add to list functionality
971
+ const addToListButtons = document.querySelectorAll('.add-to-list');
972
+
973
+ addToListButtons.forEach(button => {
974
+ button.addEventListener('click', () => {
975
+ const movieCard = button.closest('.card-hover');
976
+ const movieName = movieCard.querySelector('h3').textContent;
977
+
978
+ alert(`${movieName} a été ajouté à votre liste !`);
979
+ });
980
+ });
981
+
982
+ // Share button functionality
983
+ const shareButtons = document.querySelectorAll('.share-button');
984
+
985
+ shareButtons.forEach(button => {
986
+ button.addEventListener('click', () => {
987
+ const movieCard = button.closest('.card-hover');
988
+ const movieName = movieCard.querySelector('h3').textContent;
989
+
990
+ if (navigator.share) {
991
+ navigator.share({
992
+ title: `Regardez ${movieName} sur StreamIt Premium`,
993
+ text: `Découvrez ${movieName} en version intégrale sur StreamIt Premium`,
994
+ url: 'https://streamit-premium.com'
995
+ }).catch(err => {
996
+ console.log('Error sharing:', err);
997
+ });
998
+ } else {
999
+ alert(`Partagez ${movieName} avec vos amis !`);
1000
+ }
1001
+ });
1002
+ });
1003
+ </script>
1004
+ <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/streamit" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1005
  </html>
prompts.txt CHANGED
@@ -2,4 +2,5 @@ https://streamit.top/
2
  activer toutes les film reelement afficher toutes les image dees films et activé toutes les bouton
3
  avtiver les film a regarder complet , a rearger les film en entier pas que les extrai active plus de 4521 film a regarder
4
  je jeux voir les film en complet en entier , certain film sont pas disponible activé toutes les film en lecture complet , et rajouter plus de film avec leur vrai affiche
5
- charger plus de film
 
 
2
  activer toutes les film reelement afficher toutes les image dees films et activé toutes les bouton
3
  avtiver les film a regarder complet , a rearger les film en entier pas que les extrai active plus de 4521 film a regarder
4
  je jeux voir les film en complet en entier , certain film sont pas disponible activé toutes les film en lecture complet , et rajouter plus de film avec leur vrai affiche
5
+ charger plus de film
6
+ ACTIVER TOUTE LES FILM A REGARDER COMPLET EN ENTIER ET MONTRER PLUS DES FILM