Hugging Face's logo

Spaces:
docto41
/
cin-auto
Running

App Files Community
docto41 commited on
Commit
d6ba7ac
·
verified ·
1 Parent(s): 9c6bfdc

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +172 -573
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>CinéAuto Pro - Pilotage Automatique Avancé</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
@@ -78,6 +78,11 @@
78
  .autoplay-settings.open {
79
  max-height: 500px;
80
  }
 
 
 
 
 
81
  </style>
82
  </head>
83
  <body class="font-sans bg-gray-900 text-white">
@@ -93,36 +98,38 @@
93
  </div>
94
  <div class="hidden md:block">
95
  <div class="ml-10 flex items-center space-x-4">
96
- <a href="#nouveautes" class="text-gray-300 hover:text-white px-3 py-2 font-medium">Nouveautés</a>
97
- <a href="#bibliotheque" class="text-gray-300 hover:text-white px-3 py-2 font-medium">Bibliothèque</a>
98
- <a href="#autoplay" class="text-gray-300 hover:text-white px-3 py-2 font-medium">Pilotage Auto</a>
99
- <a href="#statistiques" class="text-gray-300 hover:text-white px-3 py-2 font-medium">Statistiques</a>
100
  </div>
101
  </div>
102
  <div class="flex items-center space-x-4">
103
- <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300">
104
- Connexion
105
- </button>
 
 
 
106
  </div>
107
  </div>
108
  </div>
109
  </header>
110
 
111
- <!-- Hero Section -->
112
  <section class="hero-gradient">
113
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
114
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
115
  <div>
116
- <h1 class="text-4xl md:text-5xl font-bold mb-6">Pilotage Automatique Avancé</h1>
117
  <p class="text-xl text-gray-300 max-w-2xl mb-8">
118
- Automatisez votre expérience cinéma avec des outils intelligents et des paramètres personnalisables.
119
  </p>
120
- <div class="flex flex-col sm:flex-row gap-4">
121
- <button id="start-autoplay" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-lg transition duration-300 flex items-center">
122
- <i class="fas fa-play-circle mr-2"></i> Démarrer
123
  </button>
124
- <button id="configure-autoplay" class="bg-transparent border-2 border-gray-300 hover:bg-gray-800 font-bold py-3 px-8 rounded-lg transition duration-300 flex items-center">
125
- <i class="fas fa-cog mr-2"></i> Configurer
126
  </button>
127
  </div>
128
  </div>
@@ -135,12 +142,7 @@
135
  <p id="featured-movie-info" class="text-gray-300 text-sm">Découvrez notre sélection</p>
136
  <div class="progress-bar mt-2"></div>
137
  </div>
138
- <div class="absolute top-4 right-4 z-20 flex space-x-2">
139
- <button class="autoplay-indicator bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full hidden">
140
- <i class="fas fa-robot mr-1"></i> Auto
141
- </button>
142
- </div>
143
- <button id="play-button" class="bg-red-600 hover:bg-red-700 text-white rounded-full w-16 h-16 flex items-center justify-center z-20">
144
  <i class="fas fa-play text-xl"></i>
145
  </button>
146
  </div>
@@ -149,433 +151,20 @@
149
  </div>
150
  </section>
151
 
152
- <!-- Section Pilotage Automatique -->
153
- <section id="autoplay" class="py-16 bg-gray-800">
154
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
155
- <h2 class="text-3xl font-bold mb-8">Pilotage Automatique</h2>
156
-
157
- <div class="bg-gray-900 rounded-xl p-6 mb-8">
158
- <div class="flex justify-between items-center mb-4">
159
- <h3 class="text-xl font-semibold">Paramètres Avancés</h3>
160
- <button id="toggle-settings" class="text-gray-400 hover:text-white">
161
- <i class="fas fa-chevron-down"></i>
162
- </button>
163
- </div>
164
-
165
- <div id="autoplay-settings" class="autoplay-settings">
166
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
167
- <!-- Critères de sélection -->
168
- <div class="bg-gray-800 p-4 rounded-lg">
169
- <h4 class="font-bold mb-3 flex items-center">
170
- <i class="fas fa-filter mr-2 text-blue-400"></i> Critères
171
- </h4>
172
- <div class="space-y-4">
173
- <div>
174
- <label class="block text-sm text-gray-400 mb-1">Genre préféré</label>
175
- <select class="w-full bg-gray-700 text-white px-3 py-2 rounded">
176
- <option>Tous genres</option>
177
- <option>Action</option>
178
- <option>Comédie</option>
179
- <option>Drame</option>
180
- <option>Science-fiction</option>
181
- </select>
182
- </div>
183
- <div>
184
- <label class="block text-sm text-gray-400 mb-1">Note minimale</label>
185
- <input type="range" min="0" max="10" value="6" step="0.5" class="w-full">
186
- <div class="flex justify-between text-xs text-gray-400 mt-1">
187
- <span>0</span>
188
- <span>6.0</span>
189
- <span>10</span>
190
- </div>
191
- </div>
192
- <div>
193
- <label class="block text-sm text-gray-400 mb-1">Année de sortie</label>
194
- <div class="flex space-x-2">
195
- <input type="number" placeholder="De" class="w-1/2 bg-gray-700 text-white px-3 py-2 rounded">
196
- <input type="number" placeholder="À" class="w-1/2 bg-gray-700 text-white px-3 py-2 rounded">
197
- </div>
198
- </div>
199
- </div>
200
- </div>
201
-
202
- <!-- Comportement de lecture -->
203
- <div class="bg-gray-800 p-4 rounded-lg">
204
- <h4 class="font-bold mb-3 flex items-center">
205
- <i class="fas fa-play-circle mr-2 text-purple-400"></i> Lecture
206
- </h4>
207
- <div class="space-y-4">
208
- <div>
209
- <label class="flex items-center space-x-2">
210
- <input type="checkbox" class="form-checkbox text-blue-500" checked>
211
- <span class="text-sm">Lecture automatique</span>
212
- </label>
213
- </div>
214
- <div>
215
- <label class="block text-sm text-gray-400 mb-1">Durée entre films</label>
216
- <select class="w-full bg-gray-700 text-white px-3 py-2 rounded">
217
- <option>Pas de pause</option>
218
- <option>5 minutes</option>
219
- <option>15 minutes</option>
220
- <option>30 minutes</option>
221
- <option selected>1 heure</option>
222
- </select>
223
- </div>
224
- <div>
225
- <label class="flex items-center space-x-2">
226
- <input type="checkbox" class="form-checkbox text-blue-500">
227
- <span class="text-sm">Ignorer les crédits</span>
228
- </label>
229
- </div>
230
- <div>
231
- <label class="flex items-center space-x-2">
232
- <input type="checkbox" class="form-checkbox text-blue-500" checked>
233
- <span class="text-sm">Suggestions similaires</span>
234
- </label>
235
- </div>
236
- </div>
237
- </div>
238
-
239
- <!-- Intelligence artificielle -->
240
- <div class="bg-gray-800 p-4 rounded-lg">
241
- <h4 class="font-bold mb-3 flex items-center">
242
- <i class="fas fa-brain mr-2 text-green-400"></i> Intelligence
243
- </h4>
244
- <div class="space-y-4">
245
- <div>
246
- <label class="block text-sm text-gray-400 mb-1">Apprentissage</label>
247
- <select class="w-full bg-gray-700 text-white px-3 py-2 rounded">
248
- <option>Désactivé</option>
249
- <option selected>Basique</option>
250
- <option>Avancé</option>
251
- <option>Personnalisé</option>
252
- </select>
253
- </div>
254
- <div>
255
- <label class="flex items-center space-x-2">
256
- <input type="checkbox" class="form-checkbox text-blue-500" checked>
257
- <span class="text-sm">Adapter à mes goûts</span>
258
- </label>
259
- </div>
260
- <div>
261
- <label class="flex items-center space-x-2">
262
- <input type="checkbox" class="form-checkbox text-blue-500">
263
- <span class="text-sm">Éviter les répétitions</span>
264
- </label>
265
- </div>
266
- <div>
267
- <label class="block text-sm text-gray-400 mb-1">Niveau de surprise</label>
268
- <input type="range" min="0" max="100" value="30" class="w-full">
269
- </div>
270
- </div>
271
- </div>
272
- </div>
273
-
274
- <div class="mt-6 flex justify-end space-x-4">
275
- <button class="px-4 py-2 border border-gray-600 rounded-lg hover:bg-gray-700">
276
- Réinitialiser
277
- </button>
278
- <button class="px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-700">
279
- Enregistrer
280
- </button>
281
- </div>
282
- </div>
283
- </div>
284
-
285
- <!-- Contrôles de pilotage -->
286
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
287
- <div class="bg-gray-900 p-6 rounded-xl">
288
- <div class="flex items-center mb-4">
289
- <div class="bg-blue-600 p-3 rounded-full mr-4">
290
- <i class="fas fa-bolt text-white"></i>
291
- </div>
292
- <div>
293
- <h3 class="font-bold">Mode Rapide</h3>
294
- <p class="text-sm text-gray-400">Sélection aléatoire basique</p>
295
- </div>
296
- </div>
297
- <button class="w-full bg-blue-600 hover:bg-blue-700 py-2 rounded-lg">
298
- Activer
299
- </button>
300
- </div>
301
-
302
- <div class="bg-gray-900 p-6 rounded-xl">
303
- <div class="flex items-center mb-4">
304
- <div class="bg-purple-600 p-3 rounded-full mr-4">
305
- <i class="fas fa-robot text-white"></i>
306
- </div>
307
- <div>
308
- <h3 class="font-bold">Mode Intelligent</h3>
309
- <p class="text-sm text-gray-400">Apprentissage automatique</p>
310
- </div>
311
- </div>
312
- <button class="w-full bg-purple-600 hover:bg-purple-700 py-2 rounded-lg">
313
- Activer
314
- </button>
315
- </div>
316
-
317
- <div class="bg-gray-900 p-6 rounded-xl">
318
- <div class="flex items-center mb-4">
319
- <div class="bg-green-600 p-3 rounded-full mr-4">
320
- <i class="fas fa-magic text-white"></i>
321
- </div>
322
- <div>
323
- <h3 class="font-bold">Mode Découverte</h3>
324
- <p class="text-sm text-gray-400">Trouvez des pépites méconnues</p>
325
- </div>
326
- </div>
327
- <button class="w-full bg-green-600 hover:bg-green-700 py-2 rounded-lg">
328
- Activer
329
- </button>
330
- </div>
331
- </div>
332
-
333
- <!-- Programmation -->
334
- <div class="bg-gray-900 rounded-xl p-6">
335
- <h3 class="text-xl font-semibold mb-4 flex items-center">
336
- <i class="fas fa-calendar-alt mr-2 text-yellow-400"></i> Programmation
337
- </h3>
338
-
339
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
340
- <div>
341
- <h4 class="font-bold mb-3">Planification</h4>
342
- <div class="space-y-4">
343
- <div class="flex items-center space-x-4">
344
- <div class="flex-1">
345
- <label class="block text-sm text-gray-400 mb-1">Heure de début</label>
346
- <input type="time" class="w-full bg-gray-700 text-white px-3 py-2 rounded" value="20:00">
347
- </div>
348
- <div class="flex-1">
349
- <label class="block text-sm text-gray-400 mb-1">Heure de fin</label>
350
- <input type="time" class="w-full bg-gray-700 text-white px-3 py-2 rounded" value="23:00">
351
- </div>
352
- </div>
353
- <div>
354
- <label class="block text-sm text-gray-400 mb-1">Jours</label>
355
- <div class="flex flex-wrap gap-2">
356
- <label class="flex items-center space-x-1">
357
- <input type="checkbox" class="form-checkbox text-blue-500" checked>
358
- <span class="text-sm">Lun</span>
359
- </label>
360
- <label class="flex items-center space-x-1">
361
- <input type="checkbox" class="form-checkbox text-blue-500" checked>
362
- <span class="text-sm">Mar</span>
363
- </label>
364
- <label class="flex items-center space-x-1">
365
- <input type="checkbox" class="form-checkbox text-blue-500" checked>
366
- <span class="text-sm">Mer</span>
367
- </label>
368
- <label class="flex items-center space-x-1">
369
- <input type="checkbox" class="form-checkbox text-blue-500" checked>
370
- <span class="text-sm">Jeu</span>
371
- </label>
372
- <label class="flex items-center space-x-1">
373
- <input type="checkbox" class="form-checkbox text-blue-500" checked>
374
- <span class="text-sm">Ven</span>
375
- </label>
376
- <label class="flex items-center space-x-1">
377
- <input type="checkbox" class="form-checkbox text-blue-500" checked>
378
- <span class="text-sm">Sam</span>
379
- </label>
380
- <label class="flex items-center space-x-1">
381
- <input type="checkbox" class="form-checkbox text-blue-500" checked>
382
- <span class="text-sm">Dim</span>
383
- </label>
384
- </div>
385
- </div>
386
- </div>
387
- </div>
388
-
389
- <div>
390
- <h4 class="font-bold mb-3">Thèmes programmés</h4>
391
- <div class="space-y-3">
392
- <div class="flex items-center justify-between bg-gray-800 p-3 rounded-lg">
393
- <div>
394
- <div class="font-medium">Soirée Comédie</div>
395
- <div class="text-xs text-gray-400">Tous les vendredis</div>
396
- </div>
397
- <button class="text-red-400 hover:text-red-300">
398
- <i class="fas fa-times"></i>
399
- </button>
400
- </div>
401
- <div class="flex items-center justify-between bg-gray-800 p-3 rounded-lg">
402
- <div>
403
- <div class="font-medium">Classiques du Cinéma</div>
404
- <div class="text-xs text-gray-400">1er dimanche du mois</div>
405
- </div>
406
- <button class="text-red-400 hover:text-red-300">
407
- <i class="fas fa-times"></i>
408
- </button>
409
- </div>
410
- <button class="flex items-center text-blue-400 hover:text-blue-300 mt-2">
411
- <i class="fas fa-plus-circle mr-2"></i> Ajouter un thème
412
- </button>
413
- </div>
414
- </div>
415
- </div>
416
- </div>
417
- </div>
418
- </section>
419
-
420
- <!-- Section Statistiques -->
421
- <section id="statistiques" class="py-16 bg-gray-900">
422
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
423
- <h2 class="text-3xl font-bold mb-8">Statistiques de Visionnage</h2>
424
-
425
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
426
- <!-- Statistiques principales -->
427
- <div class="bg-gray-800 p-6 rounded-xl">
428
- <h3 class="font-bold mb-6 text-lg flex items-center">
429
- <i class="fas fa-chart-line mr-2 text-blue-400"></i> Activité
430
- </h3>
431
- <div class="space-y-6">
432
- <div>
433
- <div class="flex justify-between mb-1">
434
- <span class="text-sm text-gray-400">Films visionnés</span>
435
- <span class="text-sm font-bold">247</span>
436
- </div>
437
- <div class="w-full bg-gray-700 rounded-full h-2">
438
- <div class="bg-blue-500 h-2 rounded-full" style="width: 75%"></div>
439
- </div>
440
- </div>
441
- <div>
442
- <div class="flex justify-between mb-1">
443
- <span class="text-sm text-gray-400">Heures de visionnage</span>
444
- <span class="text-sm font-bold">543h</span>
445
- </div>
446
- <div class="w-full bg-gray-700 rounded-full h-2">
447
- <div class="bg-purple-500 h-2 rounded-full" style="width: 62%"></div>
448
- </div>
449
- </div>
450
- <div>
451
- <div class="flex justify-between mb-1">
452
- <span class="text-sm text-gray-400">Genres préférés</span>
453
- <span class="text-sm font-bold">Action, SF</span>
454
- </div>
455
- <div class="w-full bg-gray-700 rounded-full h-2">
456
- <div class="bg-green-500 h-2 rounded-full" style="width: 88%"></div>
457
- </div>
458
- </div>
459
- </div>
460
- </div>
461
-
462
- <!-- Graphique -->
463
- <div class="bg-gray-800 p-6 rounded-xl lg:col-span-2">
464
- <div class="flex justify-between items-center mb-6">
465
- <h3 class="font-bold text-lg flex items-center">
466
- <i class="fas fa-calendar-alt mr-2 text-purple-400"></i> Historique
467
- </h3>
468
- <select class="bg-gray-700 text-white px-3 py-1 rounded text-sm">
469
- <option>7 derniers jours</option>
470
- <option selected>30 derniers jours</option>
471
- <option>6 derniers mois</option>
472
- <option>12 derniers mois</option>
473
- </select>
474
- </div>
475
- <div class="h-64 bg-gray-900 rounded-lg p-4 flex items-end space-x-1">
476
- <!-- Barres du graphique (simulées) -->
477
- <div class="flex-1 h-1/4 bg-blue-500 rounded-t-sm tooltip" data-tooltip="Lun: 2 films">
478
- <div class="tooltip-text">Lun: 2 films</div>
479
- </div>
480
- <div class="flex-1 h-1/2 bg-blue-500 rounded-t-sm tooltip" data-tooltip="Mar: 4 films">
481
- <div class="tooltip-text">Mar: 4 films</div>
482
- </div>
483
- <div class="flex-1 h-3/4 bg-blue-500 rounded-t-sm tooltip" data-tooltip="Mer: 6 films">
484
- <div class="tooltip-text">Mer: 6 films</div>
485
- </div>
486
- <div class="flex-1 h-full bg-blue-500 rounded-t-sm tooltip" data-tooltip="Jeu: 8 films">
487
- <div class="tooltip-text">Jeu: 8 films</div>
488
- </div>
489
- <div class="flex-1 h-5/6 bg-blue-500 rounded-t-sm tooltip" data-tooltip="Ven: 7 films">
490
- <div class="tooltip-text">Ven: 7 films</div>
491
- </div>
492
- <div class="flex-1 h-3/4 bg-blue-500 rounded-t-sm tooltip" data-tooltip="Sam: 6 films">
493
- <div class="tooltip-text">Sam: 6 films</div>
494
- </div>
495
- <div class="flex-1 h-1/2 bg-blue-500 rounded-t-sm tooltip" data-tooltip="Dim: 4 films">
496
- <div class="tooltip-text">Dim: 4 films</div>
497
- </div>
498
- </div>
499
- </div>
500
- </div>
501
-
502
- <!-- Recommandations IA -->
503
- <div class="bg-gray-800 p-6 rounded-xl">
504
- <h3 class="font-bold mb-6 text-lg flex items-center">
505
- <i class="fas fa-lightbulb mr-2 text-yellow-400"></i> Recommandations Intelligentes
506
- </h3>
507
-
508
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
509
- <div class="bg-gray-900 p-4 rounded-lg">
510
- <div class="flex items-center mb-3">
511
- <div class="bg-green-500 text-white p-2 rounded-full mr-3">
512
- <i class="fas fa-thumbs-up text-xs"></i>
513
- </div>
514
- <div>
515
- <h4 class="font-bold">Basé sur vos goûts</h4>
516
- <p class="text-xs text-gray-400">92% de correspondance</p>
517
- </div>
518
- </div>
519
- <p class="text-sm">"Inception" et autres films de Christopher Nolan</p>
520
- </div>
521
-
522
- <div class="bg-gray-900 p-4 rounded-lg">
523
- <div class="flex items-center mb-3">
524
- <div class="bg-blue-500 text-white p-2 rounded-full mr-3">
525
- <i class="fas fa-random text-xs"></i>
526
- </div>
527
- <div>
528
- <h4 class="font-bold">Diversité</h4>
529
- <p class="text-xs text-gray-400">Élargir vos horizons</p>
530
- </div>
531
- </div>
532
- <p class="text-sm">Films primés internationaux</p>
533
- </div>
534
-
535
- <div class="bg-gray-900 p-4 rounded-lg">
536
- <div class="flex items-center mb-3">
537
- <div class="bg-purple-500 text-white p-2 rounded-full mr-3">
538
- <i class="fas fa-history text-xs"></i>
539
- </div>
540
- <div>
541
- <h4 class="font-bold">Classiques manqués</h4>
542
- <p class="text-xs text-gray-400">À voir absolument</p>
543
- </div>
544
- </div>
545
- <p class="text-sm">"Le Parrain", "Les Affranchis"</p>
546
- </div>
547
-
548
- <div class="bg-gray-900 p-4 rounded-lg">
549
- <div class="flex items-center mb-3">
550
- <div class="bg-red-500 text-white p-2 rounded-full mr-3">
551
- <i class="fas fa-fire text-xs"></i>
552
- </div>
553
- <div>
554
- <h4 class="font-bold">Tendances</h4>
555
- <p class="text-xs text-gray-400">Populaire cette semaine</p>
556
- </div>
557
- </div>
558
- <p class="text-sm">Derniers blockbusters au cinéma</p>
559
- </div>
560
- </div>
561
- </div>
562
- </div>
563
- </section>
564
-
565
- <!-- Bibliothèque Section -->
566
- <section id="bibliotheque" class="py-16 bg-gray-900">
567
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
568
  <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
569
  <div>
570
- <h2 class="text-2xl font-bold">Collection de Films</h2>
571
- <p class="text-gray-400">Affiches originales via API TMDb</p>
572
  </div>
573
  <div class="mt-4 md:mt-0 flex space-x-4">
574
  <div class="relative">
575
  <select id="sort-by" class="bg-gray-800 text-white px-4 py-2 rounded-lg appearance-none pr-8 focus:outline-none">
576
- <option value="popularity.desc">Popularité</option>
577
- <option value="vote_average.desc">Note</option>
578
- <option value="release_date.desc">Date de sortie</option>
579
  <option value="revenue.desc">Box-office</option>
580
  </select>
581
  <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
@@ -594,23 +183,46 @@
594
  </div>
595
  </div>
596
 
597
- <div id="film-grid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
 
598
  <!-- Films will be loaded here by JavaScript -->
599
  <div class="col-span-full flex justify-center py-12">
600
  <div class="loading-spinner"></div>
601
  </div>
602
  </div>
603
 
604
- <div class="mt-12 flex justify-center">
605
- <nav class="flex items-center space-x-2">
606
- <button id="prev-page" class="px-4 py-2 border border-gray-700 rounded-lg text-gray-400 hover:bg-gray-800 disabled:opacity-50" disabled>
607
- <i class="fas fa-chevron-left"></i>
608
- </button>
609
- <span id="current-page" class="px-4 py-2">1</span>
610
- <button id="next-page" class="px-4 py-2 border border-gray-700 rounded-lg text-gray-400 hover:bg-gray-800">
611
- <i class="fas fa-chevron-right"></i>
612
- </button>
613
- </nav>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
614
  </div>
615
  </div>
616
  </section>
@@ -625,7 +237,7 @@
625
  <span class="text-xl font-bold text-white">CinéAuto Pro</span>
626
  </div>
627
  <p class="mb-4">
628
- L'expérience cinéma automatisée la plus avancée.
629
  </p>
630
  <div class="flex space-x-4">
631
  <a href="#" class="text-gray-400 hover:text-white">
@@ -644,9 +256,9 @@
644
  <h4 class="text-lg font-semibold text-white mb-4">Navigation</h4>
645
  <ul class="space-y-2">
646
  <li><a href="#" class="hover:text-white">Accueil</a></li>
647
- <li><a href="#bibliotheque" class="hover:text-white">Bibliothèque</a></li>
648
- <li><a href="#autoplay" class="hover:text-white">Pilotage Auto</a></li>
649
- <li><a href="#statistiques" class="hover:text-white">Statistiques</a></li>
650
  </ul>
651
  </div>
652
 
@@ -688,28 +300,21 @@
688
  let currentSort = 'popularity.desc';
689
  let currentGenre = '';
690
  let genres = [];
691
- let autoplayInterval;
692
- let autoplayActive = false;
693
 
694
  // Éléments DOM
695
  const filmGrid = document.getElementById('film-grid');
696
- const prevPageBtn = document.getElementById('prev-page');
697
- const nextPageBtn = document.getElementById('next-page');
698
- const currentPageSpan = document.getElementById('current-page');
699
  const sortSelect = document.getElementById('sort-by');
700
  const genreSelect = document.getElementById('genre-filter');
701
- const loadPopularBtn = document.getElementById('load-popular');
702
- const loadTopRatedBtn = document.getElementById('load-top-rated');
703
  const featuredMoviePoster = document.getElementById('featured-movie-poster');
704
  const featuredMovieTitle = document.getElementById('featured-movie-title');
705
  const featuredMovieInfo = document.getElementById('featured-movie-info');
706
- const startAutoplayBtn = document.getElementById('start-autoplay');
707
- const configureAutoplayBtn = document.getElementById('configure-autoplay');
708
- const toggleSettingsBtn = document.getElementById('toggle-settings');
709
- const autoplaySettings = document.getElementById('autoplay-settings');
710
- const playButton = document.getElementById('play-button');
711
- const progressBar = document.querySelector('.progress-bar');
712
- const autoplayIndicator = document.querySelector('.autoplay-indicator');
713
 
714
  // Charger les genres
715
  async function loadGenres() {
@@ -724,13 +329,40 @@
724
  `<option value="${genre.id}">${genre.name}</option>`
725
  ).join('');
726
 
 
 
 
727
  // Charger un film vedette aléatoire
728
  loadRandomFeaturedMovie();
 
 
 
729
  } catch (error) {
730
  console.error('Erreur lors du chargement des genres:', error);
731
  }
732
  }
733
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
734
  // Charger un film vedette aléatoire
735
  async function loadRandomFeaturedMovie() {
736
  try {
@@ -757,9 +389,17 @@
757
 
758
  // Charger les films
759
  async function loadMovies(page = 1, sortBy = 'popularity.desc', genre = '') {
 
 
 
 
760
  try {
761
- // Afficher le spinner de chargement
762
- filmGrid.innerHTML = '<div class="col-span-full flex justify-center py-12"><div class="loading-spinner"></div></div>';
 
 
 
 
763
 
764
  // Construire l'URL
765
  let url = `${BASE_URL}/discover/movie?api_key=${TMDB_API_KEY}&language=fr-FR&sort_by=${sortBy}&page=${page}`;
@@ -776,24 +416,32 @@
776
  currentPage = data.page;
777
  totalPages = data.total_pages > 500 ? 500 : data.total_pages; // L'API limite à 500 pages
778
 
779
- updatePaginationUI();
780
-
781
  // Afficher les films
782
- displayMovies(data.results);
 
 
 
 
 
 
 
 
 
783
  } catch (error) {
784
  console.error('Erreur lors du chargement des films:', error);
785
  filmGrid.innerHTML = '<div class="col-span-full text-center py-12 text-red-400">Erreur lors du chargement des films. Veuillez réessayer.</div>';
 
 
786
  }
787
  }
788
 
789
- // Afficher les films dans la grille
790
- function displayMovies(movies) {
791
  if (!movies || movies.length === 0) {
792
- filmGrid.innerHTML = '<div class="col-span-full text-center py-12">Aucun film trouvé avec ces critères.</div>';
793
- return;
794
  }
795
 
796
- filmGrid.innerHTML = movies.map(movie => `
797
  <div class="film-card bg-gray-800 rounded-lg overflow-hidden shadow-md transition duration-300 fade-in">
798
  <div class="relative pb-[150%]">
799
  ${movie.poster_path ?
@@ -835,66 +483,40 @@
835
  `).join('');
836
  }
837
 
838
- // Mettre à jour l'interface de pagination
839
- function updatePaginationUI() {
840
- currentPageSpan.textContent = currentPage;
841
- prevPageBtn.disabled = currentPage === 1;
842
- nextPageBtn.disabled = currentPage === totalPages;
843
  }
844
 
845
- // Fonctionnalités de pilotage automatique
846
- function startAutoplay() {
847
- if (autoplayActive) {
848
- stopAutoplay();
849
- return;
850
- }
851
-
852
- autoplayActive = true;
853
- startAutoplayBtn.innerHTML = '<i class="fas fa-stop mr-2"></i> Arrêter';
854
- startAutoplayBtn.classList.remove('bg-red-600');
855
- startAutoplayBtn.classList.add('bg-gray-600');
856
- autoplayIndicator.classList.remove('hidden');
857
-
858
- // Simuler la progression
859
- let progress = 0;
860
- progressBar.style.width = '0%';
861
-
862
- autoplayInterval = setInterval(() => {
863
- progress += Math.random() * 5;
864
- if (progress >= 100) {
865
- progress = 100;
866
- loadRandomFeaturedMovie();
867
- progress = 0;
868
  }
869
- progressBar.style.width = `${progress}%`;
870
- }, 1000);
871
- }
872
-
873
- function stopAutoplay() {
874
- autoplayActive = false;
875
- clearInterval(autoplayInterval);
876
- startAutoplayBtn.innerHTML = '<i class="fas fa-play-circle mr-2"></i> Démarrer';
877
- startAutoplayBtn.classList.remove('bg-gray-600');
878
- startAutoplayBtn.classList.add('bg-red-600');
879
- autoplayIndicator.classList.add('hidden');
880
- progressBar.style.width = '0%';
881
- }
882
-
883
- // Gestionnaires d'événements
884
- prevPageBtn.addEventListener('click', () => {
885
- if (currentPage > 1) {
886
- currentPage--;
887
- loadMovies(currentPage, currentSort, currentGenre);
888
  }
889
- });
890
 
891
- nextPageBtn.addEventListener('click', () => {
892
- if (currentPage < totalPages) {
 
 
 
 
893
  currentPage++;
894
  loadMovies(currentPage, currentSort, currentGenre);
895
  }
896
- });
897
 
 
898
  sortSelect.addEventListener('change', () => {
899
  currentSort = sortSelect.value;
900
  currentPage = 1;
@@ -907,34 +529,22 @@
907
  loadMovies(currentPage, currentSort, currentGenre);
908
  });
909
 
910
- loadPopularBtn.addEventListener('click', () => {
911
- currentSort = 'popularity.desc';
912
- currentPage = 1;
913
- sortSelect.value = currentSort;
914
- loadMovies(currentPage, currentSort, currentGenre);
915
- });
916
-
917
- loadTopRatedBtn.addEventListener('click', () => {
918
- currentSort = 'vote_average.desc';
919
- currentPage = 1;
920
- sortSelect.value = currentSort;
921
- loadMovies(currentPage, currentSort, currentGenre);
922
- });
923
-
924
- startAutoplayBtn.addEventListener('click', startAutoplay);
925
-
926
- toggleSettingsBtn.addEventListener('click', () => {
927
- autoplaySettings.classList.toggle('open');
928
- toggleSettingsBtn.innerHTML = autoplaySettings.classList.contains('open') ?
929
- '<i class="fas fa-chevron-up"></i>' : '<i class="fas fa-chevron-down"></i>';
930
  });
931
 
932
- playButton.addEventListener('click', () => {
933
- if (autoplayActive) {
934
- stopAutoplay();
935
- } else {
936
- startAutoplay();
937
- }
 
938
  });
939
 
940
  // Initialisation
@@ -942,6 +552,9 @@
942
  loadGenres();
943
  loadMovies();
944
 
 
 
 
945
  // Smooth scrolling for anchor links
946
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
947
  anchor.addEventListener('click', function (e) {
@@ -952,20 +565,6 @@
952
  });
953
  });
954
  });
955
-
956
- // Initialiser les tooltips
957
- document.querySelectorAll('.tooltip').forEach(el => {
958
- el.addEventListener('mouseenter', function() {
959
- const tooltipText = this.querySelector('.tooltip-text');
960
- tooltipText.style.visibility = 'visible';
961
- tooltipText.style.opacity = '1';
962
- });
963
- el.addEventListener('mouseleave', function() {
964
- const tooltipText = this.querySelector('.tooltip-text');
965
- tooltipText.style.visibility = 'hidden';
966
- tooltipText.style.opacity = '0';
967
- });
968
- });
969
  });
970
  </script>
971
  <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-auto" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CinéAuto Pro - Tous les films</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
 
78
  .autoplay-settings.open {
79
  max-height: 500px;
80
  }
81
+ .infinite-scroll-loader {
82
+ display: none;
83
+ padding: 20px 0;
84
+ text-align: center;
85
+ }
86
  </style>
87
  </head>
88
  <body class="font-sans bg-gray-900 text-white">
 
98
  </div>
99
  <div class="hidden md:block">
100
  <div class="ml-10 flex items-center space-x-4">
101
+ <a href="#films" class="text-gray-300 hover:text-white px-3 py-2 font-medium">Tous les films</a>
102
+ <a href="#genres" class="text-gray-300 hover:text-white px-3 py-2 font-medium">Genres</a>
103
+ <a href="#tendances" class="text-gray-300 hover:text-white px-3 py-2 font-medium">Tendances</a>
 
104
  </div>
105
  </div>
106
  <div class="flex items-center space-x-4">
107
+ <div class="relative">
108
+ <input type="text" placeholder="Rechercher..." class="bg-gray-800 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 w-48 md:w-64">
109
+ <button class="absolute right-3 top-2 text-gray-400 hover:text-white">
110
+ <i class="fas fa-search"></i>
111
+ </button>
112
+ </div>
113
  </div>
114
  </div>
115
  </div>
116
  </header>
117
 
118
+ <!-- Hero Section with Featured Movie -->
119
  <section class="hero-gradient">
120
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
121
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
122
  <div>
123
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Découvrez notre collection complète</h1>
124
  <p class="text-xl text-gray-300 max-w-2xl mb-8">
125
+ Plus de 10 000 films disponibles instantanément. Parcourez, découvrez et regardez vos films préférés.
126
  </p>
127
+ <div class="flex flex-wrap gap-4">
128
+ <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 flex items-center">
129
+ <i class="fas fa-play mr-2"></i> Film aléatoire
130
  </button>
131
+ <button class="bg-transparent border-2 border-gray-300 hover:bg-gray-800 font-bold py-3 px-6 rounded-lg transition duration-300 flex items-center">
132
+ <i class="fas fa-filter mr-2"></i> Filtrer
133
  </button>
134
  </div>
135
  </div>
 
142
  <p id="featured-movie-info" class="text-gray-300 text-sm">Découvrez notre sélection</p>
143
  <div class="progress-bar mt-2"></div>
144
  </div>
145
+ <button class="bg-red-600 hover:bg-red-700 text-white rounded-full w-16 h-16 flex items-center justify-center z-20">
 
 
 
 
 
146
  <i class="fas fa-play text-xl"></i>
147
  </button>
148
  </div>
 
151
  </div>
152
  </section>
153
 
154
+ <!-- Main Films Section -->
155
+ <section id="films" class="py-12 bg-gray-900">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
156
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
157
  <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
158
  <div>
159
+ <h2 class="text-3xl font-bold">Tous les films</h2>
160
+ <p class="text-gray-400">Parcourez notre collection complète</p>
161
  </div>
162
  <div class="mt-4 md:mt-0 flex space-x-4">
163
  <div class="relative">
164
  <select id="sort-by" class="bg-gray-800 text-white px-4 py-2 rounded-lg appearance-none pr-8 focus:outline-none">
165
+ <option value="popularity.desc">Populaires</option>
166
+ <option value="vote_average.desc">Mieux notés</option>
167
+ <option value="release_date.desc">Récents</option>
168
  <option value="revenue.desc">Box-office</option>
169
  </select>
170
  <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
 
183
  </div>
184
  </div>
185
 
186
+ <!-- Films Grid -->
187
+ <div id="film-grid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6">
188
  <!-- Films will be loaded here by JavaScript -->
189
  <div class="col-span-full flex justify-center py-12">
190
  <div class="loading-spinner"></div>
191
  </div>
192
  </div>
193
 
194
+ <!-- Infinite Scroll Loader -->
195
+ <div id="infinite-scroll-loader" class="infinite-scroll-loader">
196
+ <div class="loading-spinner"></div>
197
+ <p class="mt-2 text-gray-400">Chargement des films...</p>
198
+ </div>
199
+ </div>
200
+ </section>
201
+
202
+ <!-- Genres Section -->
203
+ <section id="genres" class="py-16 bg-gray-800">
204
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
205
+ <h2 class="text-3xl font-bold mb-8">Explorer par genres</h2>
206
+
207
+ <div id="genres-grid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
208
+ <!-- Genres will be loaded here by JavaScript -->
209
+ </div>
210
+ </div>
211
+ </section>
212
+
213
+ <!-- Trending Section -->
214
+ <section id="tendances" class="py-16 bg-gray-900">
215
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
216
+ <div class="flex justify-between items-center mb-8">
217
+ <h2 class="text-3xl font-bold">Tendances du moment</h2>
218
+ <div class="flex space-x-2">
219
+ <button id="trending-day" class="px-4 py-2 bg-red-600 rounded-lg font-medium">Aujourd'hui</button>
220
+ <button id="trending-week" class="px-4 py-2 bg-gray-800 rounded-lg hover:bg-gray-700">Cette semaine</button>
221
+ </div>
222
+ </div>
223
+
224
+ <div id="trending-movies" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
225
+ <!-- Trending movies will be loaded here by JavaScript -->
226
  </div>
227
  </div>
228
  </section>
 
237
  <span class="text-xl font-bold text-white">CinéAuto Pro</span>
238
  </div>
239
  <p class="mb-4">
240
+ La plus grande collection de films en ligne.
241
  </p>
242
  <div class="flex space-x-4">
243
  <a href="#" class="text-gray-400 hover:text-white">
 
256
  <h4 class="text-lg font-semibold text-white mb-4">Navigation</h4>
257
  <ul class="space-y-2">
258
  <li><a href="#" class="hover:text-white">Accueil</a></li>
259
+ <li><a href="#films" class="hover:text-white">Tous les films</a></li>
260
+ <li><a href="#genres" class="hover:text-white">Genres</a></li>
261
+ <li><a href="#tendances" class="hover:text-white">Tendances</a></li>
262
  </ul>
263
  </div>
264
 
 
300
  let currentSort = 'popularity.desc';
301
  let currentGenre = '';
302
  let genres = [];
303
+ let isLoading = false;
304
+ let trendingTimeWindow = 'day';
305
 
306
  // Éléments DOM
307
  const filmGrid = document.getElementById('film-grid');
 
 
 
308
  const sortSelect = document.getElementById('sort-by');
309
  const genreSelect = document.getElementById('genre-filter');
 
 
310
  const featuredMoviePoster = document.getElementById('featured-movie-poster');
311
  const featuredMovieTitle = document.getElementById('featured-movie-title');
312
  const featuredMovieInfo = document.getElementById('featured-movie-info');
313
+ const infiniteScrollLoader = document.getElementById('infinite-scroll-loader');
314
+ const genresGrid = document.getElementById('genres-grid');
315
+ const trendingMovies = document.getElementById('trending-movies');
316
+ const trendingDayBtn = document.getElementById('trending-day');
317
+ const trendingWeekBtn = document.getElementById('trending-week');
 
 
318
 
319
  // Charger les genres
320
  async function loadGenres() {
 
329
  `<option value="${genre.id}">${genre.name}</option>`
330
  ).join('');
331
 
332
+ // Afficher les genres dans la section dédiée
333
+ displayGenres();
334
+
335
  // Charger un film vedette aléatoire
336
  loadRandomFeaturedMovie();
337
+
338
+ // Charger les films tendance
339
+ loadTrendingMovies();
340
  } catch (error) {
341
  console.error('Erreur lors du chargement des genres:', error);
342
  }
343
  }
344
 
345
+ // Afficher les genres dans la section dédiée
346
+ function displayGenres() {
347
+ genresGrid.innerHTML = genres.map(genre => `
348
+ <a href="#films" class="genre-card bg-gray-700 hover:bg-gray-600 rounded-lg p-6 text-center transition duration-300 cursor-pointer" data-genre-id="${genre.id}">
349
+ <i class="fas fa-film text-3xl mb-2 text-red-500"></i>
350
+ <h3 class="font-bold">${genre.name}</h3>
351
+ </a>
352
+ `).join('');
353
+
354
+ // Ajouter des écouteurs d'événements aux cartes de genre
355
+ document.querySelectorAll('.genre-card').forEach(card => {
356
+ card.addEventListener('click', function() {
357
+ currentGenre = this.getAttribute('data-genre-id');
358
+ genreSelect.value = currentGenre;
359
+ currentPage = 1;
360
+ filmGrid.innerHTML = '<div class="col-span-full flex justify-center py-12"><div class="loading-spinner"></div></div>';
361
+ loadMovies(currentPage, currentSort, currentGenre);
362
+ });
363
+ });
364
+ }
365
+
366
  // Charger un film vedette aléatoire
367
  async function loadRandomFeaturedMovie() {
368
  try {
 
389
 
390
  // Charger les films
391
  async function loadMovies(page = 1, sortBy = 'popularity.desc', genre = '') {
392
+ if (isLoading) return;
393
+
394
+ isLoading = true;
395
+
396
  try {
397
+ // Afficher le loader uniquement pour la première page
398
+ if (page === 1) {
399
+ filmGrid.innerHTML = '<div class="col-span-full flex justify-center py-12"><div class="loading-spinner"></div></div>';
400
+ } else {
401
+ infiniteScrollLoader.style.display = 'block';
402
+ }
403
 
404
  // Construire l'URL
405
  let url = `${BASE_URL}/discover/movie?api_key=${TMDB_API_KEY}&language=fr-FR&sort_by=${sortBy}&page=${page}`;
 
416
  currentPage = data.page;
417
  totalPages = data.total_pages > 500 ? 500 : data.total_pages; // L'API limite à 500 pages
418
 
 
 
419
  // Afficher les films
420
+ if (page === 1) {
421
+ displayMovies(data.results);
422
+ } else {
423
+ // Ajouter les nouveaux films à la fin
424
+ const newMovies = createMovieCards(data.results);
425
+ filmGrid.innerHTML += newMovies;
426
+
427
+ // Masquer le loader
428
+ infiniteScrollLoader.style.display = 'none';
429
+ }
430
  } catch (error) {
431
  console.error('Erreur lors du chargement des films:', error);
432
  filmGrid.innerHTML = '<div class="col-span-full text-center py-12 text-red-400">Erreur lors du chargement des films. Veuillez réessayer.</div>';
433
+ } finally {
434
+ isLoading = false;
435
  }
436
  }
437
 
438
+ // Créer des cartes de films
439
+ function createMovieCards(movies) {
440
  if (!movies || movies.length === 0) {
441
+ return '<div class="col-span-full text-center py-12">Aucun film trouvé avec ces critères.</div>';
 
442
  }
443
 
444
+ return movies.map(movie => `
445
  <div class="film-card bg-gray-800 rounded-lg overflow-hidden shadow-md transition duration-300 fade-in">
446
  <div class="relative pb-[150%]">
447
  ${movie.poster_path ?
 
483
  `).join('');
484
  }
485
 
486
+ // Afficher les films dans la grille
487
+ function displayMovies(movies) {
488
+ filmGrid.innerHTML = createMovieCards(movies);
 
 
489
  }
490
 
491
+ // Charger les films tendance
492
+ async function loadTrendingMovies() {
493
+ try {
494
+ trendingMovies.innerHTML = '<div class="col-span-full flex justify-center py-12"><div class="loading-spinner"></div></div>';
495
+
496
+ const response = await fetch(`${BASE_URL}/trending/movie/${trendingTimeWindow}?api_key=${TMDB_API_KEY}&language=fr-FR`);
497
+ const data = await response.json();
498
+
499
+ if (data.results && data.results.length > 0) {
500
+ trendingMovies.innerHTML = createMovieCards(data.results.slice(0, 10)); // Afficher les 10 premiers
 
 
 
 
 
 
 
 
 
 
 
 
 
501
  }
502
+ } catch (error) {
503
+ console.error('Erreur lors du chargement des films tendance:', error);
504
+ trendingMovies.innerHTML = '<div class="col-span-full text-center py-12 text-red-400">Erreur lors du chargement des tendances.</div>';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
505
  }
506
+ }
507
 
508
+ // Gestionnaire de défilement infini
509
+ function handleInfiniteScroll() {
510
+ const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
511
+
512
+ // Vérifier si l'utilisateur est proche du bas de la page
513
+ if (scrollTop + clientHeight >= scrollHeight - 500 && !isLoading && currentPage < totalPages) {
514
  currentPage++;
515
  loadMovies(currentPage, currentSort, currentGenre);
516
  }
517
+ }
518
 
519
+ // Gestionnaires d'événements
520
  sortSelect.addEventListener('change', () => {
521
  currentSort = sortSelect.value;
522
  currentPage = 1;
 
529
  loadMovies(currentPage, currentSort, currentGenre);
530
  });
531
 
532
+ trendingDayBtn.addEventListener('click', () => {
533
+ trendingTimeWindow = 'day';
534
+ trendingDayBtn.classList.add('bg-red-600');
535
+ trendingDayBtn.classList.remove('bg-gray-800');
536
+ trendingWeekBtn.classList.add('bg-gray-800');
537
+ trendingWeekBtn.classList.remove('bg-red-600');
538
+ loadTrendingMovies();
 
 
 
 
 
 
 
 
 
 
 
 
 
539
  });
540
 
541
+ trendingWeekBtn.addEventListener('click', () => {
542
+ trendingTimeWindow = 'week';
543
+ trendingWeekBtn.classList.add('bg-red-600');
544
+ trendingWeekBtn.classList.remove('bg-gray-800');
545
+ trendingDayBtn.classList.add('bg-gray-800');
546
+ trendingDayBtn.classList.remove('bg-red-600');
547
+ loadTrendingMovies();
548
  });
549
 
550
  // Initialisation
 
552
  loadGenres();
553
  loadMovies();
554
 
555
+ // Configurer le défilement infini
556
+ window.addEventListener('scroll', handleInfiniteScroll);
557
+
558
  // Smooth scrolling for anchor links
559
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
560
  anchor.addEventListener('click', function (e) {
 
565
  });
566
  });
567
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
568
  });
569
  </script>
570
  <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-auto" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
prompts.txt CHANGED
@@ -6,4 +6,5 @@ https://darkslategrey-lark-981722.hostingersite.com/ : crrer moi se site en pilo
6
  https://plateformecinema.com ? ACTIVER LES FILMS EN PILOTE AUTOMATIQUE AVEC UNE GROSSE BASE DE FILMS DE 78954 FILM NOUVEAUTE
7
  ajouter 784574 film complet avec leur images des film d'origine en pilotage automatique
8
  afficher toutes les images des film reelement
9
- ajouté plus de fonction plus d'outils en pilotage automatique
 
 
6
  https://plateformecinema.com ? ACTIVER LES FILMS EN PILOTE AUTOMATIQUE AVEC UNE GROSSE BASE DE FILMS DE 78954 FILM NOUVEAUTE
7
  ajouter 784574 film complet avec leur images des film d'origine en pilotage automatique
8
  afficher toutes les images des film reelement
9
+ ajouté plus de fonction plus d'outils en pilotage automatique
10
+ afficher toutes les films directement sur la page d'accueil