Hugging Face's logo

Spaces:
docto41
/
cin-auto
Running

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

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +564 -12
  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 - 784,574 Films avec Vraies Images</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>
@@ -40,6 +40,44 @@
40
  from { opacity: 0; }
41
  to { opacity: 1; }
42
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
43
  </style>
44
  </head>
45
  <body class="font-sans bg-gray-900 text-white">
@@ -50,7 +88,7 @@
50
  <div class="flex items-center">
51
  <div class="flex-shrink-0 flex items-center">
52
  <i class="fas fa-film text-2xl text-red-500 mr-2"></i>
53
- <span class="text-xl font-bold">CinéAuto</span>
54
  </div>
55
  </div>
56
  <div class="hidden md:block">
@@ -58,6 +96,7 @@
58
  <a href="#nouveautes" class="text-gray-300 hover:text-white px-3 py-2 font-medium">Nouveautés</a>
59
  <a href="#bibliotheque" class="text-gray-300 hover:text-white px-3 py-2 font-medium">Bibliothèque</a>
60
  <a href="#autoplay" class="text-gray-300 hover:text-white px-3 py-2 font-medium">Pilotage Auto</a>
 
61
  </div>
62
  </div>
63
  <div class="flex items-center space-x-4">
@@ -74,16 +113,16 @@
74
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
75
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
76
  <div>
77
- <h1 class="text-4xl md:text-5xl font-bold mb-6">Films avec vraies affiches</h1>
78
  <p class="text-xl text-gray-300 max-w-2xl mb-8">
79
- Découvrez notre collection de films avec les vraies images originales grâce à l'API TMDb.
80
  </p>
81
  <div class="flex flex-col sm:flex-row gap-4">
82
- <button id="load-popular" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-lg transition duration-300">
83
- Films populaires
84
  </button>
85
- <button id="load-top-rated" class="bg-transparent border-2 border-gray-300 hover:bg-gray-800 font-bold py-3 px-8 rounded-lg transition duration-300">
86
- <i class="fas fa-star mr-2"></i> Mieux notés
87
  </button>
88
  </div>
89
  </div>
@@ -94,8 +133,14 @@
94
  <div class="absolute bottom-0 left-0 right-0 p-6 z-20">
95
  <h3 id="featured-movie-title" class="text-xl font-bold mb-1">Chargement...</h3>
96
  <p id="featured-movie-info" class="text-gray-300 text-sm">Découvrez notre sélection</p>
 
 
 
 
 
 
97
  </div>
98
- <button class="bg-red-600 hover:bg-red-700 text-white rounded-full w-16 h-16 flex items-center justify-center z-20">
99
  <i class="fas fa-play text-xl"></i>
100
  </button>
101
  </div>
@@ -104,6 +149,419 @@
104
  </div>
105
  </section>
106
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
107
  <!-- Bibliothèque Section -->
108
  <section id="bibliotheque" class="py-16 bg-gray-900">
109
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -164,11 +622,22 @@
164
  <div>
165
  <div class="flex items-center mb-4">
166
  <i class="fas fa-film text-2xl text-red-500 mr-2"></i>
167
- <span class="text-xl font-bold text-white">CinéAuto</span>
168
  </div>
169
  <p class="mb-4">
170
- Collection de films avec vraies affiches via l'API TMDb.
171
  </p>
 
 
 
 
 
 
 
 
 
 
 
172
  </div>
173
 
174
  <div>
@@ -176,6 +645,8 @@
176
  <ul class="space-y-2">
177
  <li><a href="#" class="hover:text-white">Accueil</a></li>
178
  <li><a href="#bibliotheque" class="hover:text-white">Bibliothèque</a></li>
 
 
179
  </ul>
180
  </div>
181
 
@@ -184,6 +655,7 @@
184
  <ul class="space-y-2">
185
  <li><a href="#" class="hover:text-white">Conditions générales</a></li>
186
  <li><a href="#" class="hover:text-white">Confidentialité</a></li>
 
187
  </ul>
188
  </div>
189
 
@@ -192,11 +664,14 @@
192
  <p>
193
  Ce site utilise l'API TMDb mais n'est pas approuvé ou certifié par TMDb.
194
  </p>
 
 
 
195
  </div>
196
  </div>
197
 
198
  <div class="border-t border-gray-800 mt-12 pt-8 text-center text-sm">
199
- <p>© 2023 CinéAuto. Données fournies par TMDb.</p>
200
  </div>
201
  </div>
202
  </footer>
@@ -213,6 +688,8 @@
213
  let currentSort = 'popularity.desc';
214
  let currentGenre = '';
215
  let genres = [];
 
 
216
 
217
  // Éléments DOM
218
  const filmGrid = document.getElementById('film-grid');
@@ -226,6 +703,13 @@
226
  const featuredMoviePoster = document.getElementById('featured-movie-poster');
227
  const featuredMovieTitle = document.getElementById('featured-movie-title');
228
  const featuredMovieInfo = document.getElementById('featured-movie-info');
 
 
 
 
 
 
 
229
 
230
  // Charger les genres
231
  async function loadGenres() {
@@ -358,6 +842,44 @@
358
  nextPageBtn.disabled = currentPage === totalPages;
359
  }
360
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
361
  // Gestionnaires d'événements
362
  prevPageBtn.addEventListener('click', () => {
363
  if (currentPage > 1) {
@@ -399,6 +921,22 @@
399
  loadMovies(currentPage, currentSort, currentGenre);
400
  });
401
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
402
  // Initialisation
403
  document.addEventListener('DOMContentLoaded', () => {
404
  loadGenres();
@@ -414,6 +952,20 @@
414
  });
415
  });
416
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
417
  });
418
  </script>
419
  <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 - 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>
 
40
  from { opacity: 0; }
41
  to { opacity: 1; }
42
  }
43
+ .progress-bar {
44
+ height: 4px;
45
+ background-color: #4f46e5;
46
+ width: 0%;
47
+ transition: width 0.3s ease;
48
+ }
49
+ .tooltip {
50
+ position: relative;
51
+ display: inline-block;
52
+ }
53
+ .tooltip .tooltip-text {
54
+ visibility: hidden;
55
+ width: 200px;
56
+ background-color: #1e293b;
57
+ color: #fff;
58
+ text-align: center;
59
+ border-radius: 6px;
60
+ padding: 5px;
61
+ position: absolute;
62
+ z-index: 1;
63
+ bottom: 125%;
64
+ left: 50%;
65
+ transform: translateX(-50%);
66
+ opacity: 0;
67
+ transition: opacity 0.3s;
68
+ }
69
+ .tooltip:hover .tooltip-text {
70
+ visibility: visible;
71
+ opacity: 1;
72
+ }
73
+ .autoplay-settings {
74
+ max-height: 0;
75
+ overflow: hidden;
76
+ transition: max-height 0.5s ease-out;
77
+ }
78
+ .autoplay-settings.open {
79
+ max-height: 500px;
80
+ }
81
  </style>
82
  </head>
83
  <body class="font-sans bg-gray-900 text-white">
 
88
  <div class="flex items-center">
89
  <div class="flex-shrink-0 flex items-center">
90
  <i class="fas fa-film text-2xl text-red-500 mr-2"></i>
91
+ <span class="text-xl font-bold">CinéAuto Pro</span>
92
  </div>
93
  </div>
94
  <div class="hidden md:block">
 
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">
 
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>
 
133
  <div class="absolute bottom-0 left-0 right-0 p-6 z-20">
134
  <h3 id="featured-movie-title" class="text-xl font-bold mb-1">Chargement...</h3>
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
  </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">
 
622
  <div>
623
  <div class="flex items-center mb-4">
624
  <i class="fas fa-film text-2xl text-red-500 mr-2"></i>
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">
632
+ <i class="fab fa-facebook-f"></i>
633
+ </a>
634
+ <a href="#" class="text-gray-400 hover:text-white">
635
+ <i class="fab fa-twitter"></i>
636
+ </a>
637
+ <a href="#" class="text-gray-400 hover:text-white">
638
+ <i class="fab fa-instagram"></i>
639
+ </a>
640
+ </div>
641
  </div>
642
 
643
  <div>
 
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
 
 
655
  <ul class="space-y-2">
656
  <li><a href="#" class="hover:text-white">Conditions générales</a></li>
657
  <li><a href="#" class="hover:text-white">Confidentialité</a></li>
658
+ <li><a href="#" class="hover:text-white">Cookies</a></li>
659
  </ul>
660
  </div>
661
 
 
664
  <p>
665
  Ce site utilise l'API TMDb mais n'est pas approuvé ou certifié par TMDb.
666
  </p>
667
+ <button class="mt-4 text-blue-400 hover:text-blue-300 flex items-center">
668
+ <i class="fas fa-envelope mr-2"></i> Nous contacter
669
+ </button>
670
  </div>
671
  </div>
672
 
673
  <div class="border-t border-gray-800 mt-12 pt-8 text-center text-sm">
674
+ <p>© 2023 CinéAuto Pro. Données fournies par TMDb.</p>
675
  </div>
676
  </div>
677
  </footer>
 
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');
 
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() {
 
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) {
 
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
941
  document.addEventListener('DOMContentLoaded', () => {
942
  loadGenres();
 
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>
prompts.txt CHANGED
@@ -5,4 +5,5 @@ je veux un crerateur de site a partir d image et de titre du site uniquement
5
  https://darkslategrey-lark-981722.hostingersite.com/ : crrer moi se site 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
 
 
5
  https://darkslategrey-lark-981722.hostingersite.com/ : crrer moi se site 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