Hugging Face's logo

Spaces:
docto41
/
cinestream
Running

App Files Community
docto41 commited on
Commit
b1bb4c7
·
verified ·
1 Parent(s): 3e1794c

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +565 -19
  3. prompts.txt +6 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cinestream
3
- emoji: 👀
4
  colorFrom: purple
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: cinestream
3
+ emoji: 🐳
4
  colorFrom: purple
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,565 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CineStream - Films avec images originales</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#6d28d9',
15
+ secondary: '#8b5cf6',
16
+ dark: '#1e1b4b',
17
+ light: '#f5f3ff',
18
+ },
19
+ fontFamily: {
20
+ sans: ['Inter', 'sans-serif'],
21
+ },
22
+ }
23
+ }
24
+ }
25
+ </script>
26
+ <style>
27
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
28
+
29
+ body {
30
+ font-family: 'Inter', sans-serif;
31
+ background-color: #0f172a;
32
+ color: white;
33
+ }
34
+
35
+ .movie-card {
36
+ transition: all 0.3s ease;
37
+ }
38
+
39
+ .movie-card:hover {
40
+ transform: translateY(-10px);
41
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
42
+ }
43
+
44
+ .movie-poster {
45
+ height: 450px;
46
+ object-fit: cover;
47
+ }
48
+
49
+ .loading-spinner {
50
+ animation: spin 1s linear infinite;
51
+ }
52
+
53
+ @keyframes spin {
54
+ 0% { transform: rotate(0deg); }
55
+ 100% { transform: rotate(360deg); }
56
+ }
57
+
58
+ .gradient-text {
59
+ background: linear-gradient(90deg, #8b5cf6, #ec4899);
60
+ -webkit-background-clip: text;
61
+ background-clip: text;
62
+ color: transparent;
63
+ }
64
+
65
+ .search-input:focus {
66
+ box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.5);
67
+ }
68
+
69
+ .error-message {
70
+ background-color: rgba(239, 68, 68, 0.2);
71
+ border-left: 4px solid #ef4444;
72
+ }
73
+
74
+ .placeholder-poster {
75
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
76
+ display: flex;
77
+ align-items: center;
78
+ justify-content: center;
79
+ }
80
+ </style>
81
+ </head>
82
+ <body class="min-h-screen">
83
+ <!-- Navigation -->
84
+ <nav class="bg-gray-900 bg-opacity-90 backdrop-blur-md fixed w-full z-50 shadow-lg">
85
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
86
+ <div class="flex items-center justify-between h-16">
87
+ <div class="flex items-center">
88
+ <div class="flex-shrink-0">
89
+ <span class="text-2xl font-bold gradient-text">CineStream</span>
90
+ </div>
91
+ <div class="hidden md:block ml-10">
92
+ <div class="flex space-x-4">
93
+ <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium bg-primary">Accueil</a>
94
+ <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Films</a>
95
+ <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Séries</a>
96
+ <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Tendances</a>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ <div class="hidden md:block">
101
+ <div class="ml-4 flex items-center md:ml-6">
102
+ <div class="relative mx-4">
103
+ <input type="text" id="search-input" placeholder="Rechercher un film..."
104
+ class="search-input bg-gray-800 text-white px-4 py-2 rounded-full w-64 focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-200">
105
+ <button onclick="searchMovies()" class="absolute right-3 top-2 text-gray-400 hover:text-white">
106
+ <i class="fas fa-search"></i>
107
+ </button>
108
+ </div>
109
+ <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
110
+ <i class="fas fa-user-circle text-xl"></i>
111
+ </button>
112
+ </div>
113
+ </div>
114
+ <div class="-mr-2 flex md:hidden">
115
+ <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
116
+ <i class="fas fa-bars"></i>
117
+ </button>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </nav>
122
+
123
+ <!-- Main Content -->
124
+ <main class="pt-24 pb-12">
125
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
126
+ <!-- Featured Section -->
127
+ <section class="mb-12">
128
+ <div class="flex justify-between items-center mb-6">
129
+ <h2 class="text-2xl font-bold text-white">Films populaires</h2>
130
+ <div class="flex space-x-2">
131
+ <button onclick="filterMovies('popular')" class="px-4 py-1 rounded-full text-sm bg-primary text-white">Populaires</button>
132
+ <button onclick="filterMovies('top_rated')" class="px-4 py-1 rounded-full text-sm bg-gray-700 text-white">Mieux notés</button>
133
+ <button onclick="filterMovies('upcoming')" class="px-4 py-1 rounded-full text-sm bg-gray-700 text-white">Prochainement</button>
134
+ </div>
135
+ </div>
136
+
137
+ <div id="movies-container" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
138
+ <!-- Movies will be loaded here -->
139
+ <div class="flex justify-center items-center py-12 col-span-full">
140
+ <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary loading-spinner"></div>
141
+ </div>
142
+ </div>
143
+
144
+ <div id="load-more-container" class="mt-8 flex justify-center">
145
+ <button onclick="loadMoreMovies()" class="px-6 py-2 bg-primary text-white rounded-full hover:bg-secondary transition flex items-center">
146
+ <span>Voir plus</span>
147
+ <i class="fas fa-chevron-down ml-2"></i>
148
+ </button>
149
+ </div>
150
+ </section>
151
+
152
+ <!-- Genres Section -->
153
+ <section class="mb-12">
154
+ <h2 class="text-2xl font-bold text-white mb-6">Par genres</h2>
155
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
156
+ <button onclick="filterByGenre(28)" class="genre-btn px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-full text-sm">Action</button>
157
+ <button onclick="filterByGenre(12)" class="genre-btn px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-full text-sm">Aventure</button>
158
+ <button onclick="filterByGenre(16)" class="genre-btn px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-full text-sm">Animation</button>
159
+ <button onclick="filterByGenre(35)" class="genre-btn px-4 py-2 bg-yellow-600 hover:bg-yellow-700 text-white rounded-full text-sm">Comédie</button>
160
+ <button onclick="filterByGenre(80)" class="genre-btn px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-full text-sm">Crime</button>
161
+ <button onclick="filterByGenre(18)" class="genre-btn px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-full text-sm">Drame</button>
162
+ </div>
163
+ </section>
164
+ </div>
165
+ </main>
166
+
167
+ <!-- Footer -->
168
+ <footer class="bg-gray-900 text-gray-400 py-8">
169
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
170
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
171
+ <div>
172
+ <h3 class="text-white text-lg font-semibold mb-4">CineStream</h3>
173
+ <p class="text-sm">La meilleure plateforme pour regarder des films avec des images originales de haute qualité.</p>
174
+ </div>
175
+ <div>
176
+ <h3 class="text-white text-lg font-semibold mb-4">Navigation</h3>
177
+ <ul class="space-y-2 text-sm">
178
+ <li><a href="#" class="hover:text-white">Accueil</a></li>
179
+ <li><a href="#" class="hover:text-white">Films</a></li>
180
+ <li><a href="#" class="hover:text-white">Séries</a></li>
181
+ <li><a href="#" class="hover:text-white">Nouveautés</a></li>
182
+ </ul>
183
+ </div>
184
+ <div>
185
+ <h3 class="text-white text-lg font-semibold mb-4">Légal</h3>
186
+ <ul class="space-y-2 text-sm">
187
+ <li><a href="#" class="hover:text-white">Conditions d'utilisation</a></li>
188
+ <li><a href="#" class="hover:text-white">Politique de confidentialité</a></li>
189
+ <li><a href="#" class="hover:text-white">DMCA</a></li>
190
+ </ul>
191
+ </div>
192
+ <div>
193
+ <h3 class="text-white text-lg font-semibold mb-4">Contact</h3>
194
+ <div class="flex space-x-4">
195
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
196
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
197
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
198
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-discord"></i></a>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ <div class="border-t border-gray-800 mt-8 pt-8 text-sm text-center">
203
+ <p>© 2023 CineStream. Tous droits réservés.</p>
204
+ </div>
205
+ </div>
206
+ </footer>
207
+
208
+ <!-- Movie Details Modal -->
209
+ <div id="movie-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
210
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
211
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
212
+ <div class="absolute inset-0 bg-gray-900 opacity-75"></div>
213
+ </div>
214
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
215
+ <div class="inline-block align-bottom bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
216
+ <div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
217
+ <div class="sm:flex sm:items-start">
218
+ <div id="modal-poster" class="flex-shrink-0 w-full sm:w-1/3 mb-4 sm:mb-0 sm:mr-6">
219
+ <img class="w-full rounded-lg shadow-lg" src="" alt="Movie Poster">
220
+ </div>
221
+ <div class="mt-3 text-center sm:mt-0 sm:text-left w-full sm:w-2/3">
222
+ <h3 id="modal-title" class="text-2xl leading-6 font-bold text-white mb-2"></h3>
223
+ <div class="flex items-center mb-4">
224
+ <span id="modal-rating" class="bg-yellow-500 text-white text-xs font-semibold px-2 py-1 rounded mr-3"></span>
225
+ <span id="modal-year" class="text-gray-300 text-sm"></span>
226
+ <span id="modal-runtime" class="ml-3 text-gray-300 text-sm"></span>
227
+ </div>
228
+ <p id="modal-overview" class="text-gray-300 mb-4"></p>
229
+ <div id="modal-genres" class="flex flex-wrap gap-2 mb-4"></div>
230
+ <div class="mt-4">
231
+ <button type="button" onclick="closeModal()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-secondary focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
232
+ Fermer
233
+ </button>
234
+ <a id="watch-now-btn" href="#" target="_blank" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
235
+ <i class="fas fa-play mr-2"></i> Regarder
236
+ </a>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+
245
+ <script>
246
+ // Configuration
247
+ const API_KEY = 'c45a857c193f6302f2b5061c3b85e743'; // Clé API TMDB valide
248
+ const BASE_URL = 'https://api.themoviedb.org/3';
249
+ let currentPage = 1;
250
+ let currentFilter = 'popular';
251
+ let currentGenre = null;
252
+ let currentSearch = '';
253
+ let totalPages = 1;
254
+ let isLoading = false;
255
+
256
+ // Fonction utilitaire pour faire les requêtes API
257
+ async function fetchAPI(endpoint, params = {}) {
258
+ const url = new URL(`${BASE_URL}${endpoint}`);
259
+
260
+ // Ajouter les paramètres par défaut
261
+ const defaultParams = {
262
+ language: 'fr-FR',
263
+ page: currentPage,
264
+ api_key: API_KEY
265
+ };
266
+
267
+ // Fusionner les paramètres
268
+ const queryParams = {...defaultParams, ...params};
269
+
270
+ // Ajouter les paramètres à l'URL
271
+ Object.keys(queryParams).forEach(key => {
272
+ if (queryParams[key] !== undefined && queryParams[key] !== null) {
273
+ url.searchParams.append(key, queryParams[key]);
274
+ }
275
+ });
276
+
277
+ try {
278
+ const response = await fetch(url);
279
+
280
+ if (!response.ok) {
281
+ throw new Error(`Erreur HTTP: ${response.status}`);
282
+ }
283
+
284
+ return await response.json();
285
+ } catch (error) {
286
+ console.error('Erreur API:', error);
287
+ throw error;
288
+ }
289
+ }
290
+
291
+ // Charger les films au démarrage
292
+ document.addEventListener('DOMContentLoaded', function() {
293
+ loadMovies();
294
+
295
+ // Écouter la touche Entrée dans la recherche
296
+ document.getElementById('search-input').addEventListener('keypress', function(e) {
297
+ if (e.key === 'Enter') {
298
+ searchMovies();
299
+ }
300
+ });
301
+ });
302
+
303
+ // Charger les films
304
+ async function loadMovies() {
305
+ if (isLoading) return;
306
+
307
+ isLoading = true;
308
+ showLoadingState();
309
+
310
+ try {
311
+ let data;
312
+
313
+ if (currentSearch) {
314
+ data = await fetchAPI('/search/movie', {
315
+ query: currentSearch,
316
+ include_adult: false,
317
+ page: currentPage
318
+ });
319
+ } else if (currentGenre) {
320
+ data = await fetchAPI('/discover/movie', {
321
+ include_adult: false,
322
+ include_video: false,
323
+ sort_by: 'popularity.desc',
324
+ with_genres: currentGenre,
325
+ page: currentPage
326
+ });
327
+ } else {
328
+ data = await fetchAPI(`/movie/${currentFilter}`, {
329
+ page: currentPage
330
+ });
331
+ }
332
+
333
+ totalPages = data.total_pages || 1;
334
+
335
+ if (currentPage === 1) {
336
+ document.getElementById('movies-container').innerHTML = '';
337
+ }
338
+
339
+ if (data.results && data.results.length > 0) {
340
+ displayMovies(data.results);
341
+ updateLoadMoreButton();
342
+ } else {
343
+ showNoResults();
344
+ }
345
+ } catch (error) {
346
+ console.error('Error fetching movies:', error);
347
+ showErrorState(error.message);
348
+ } finally {
349
+ isLoading = false;
350
+ }
351
+ }
352
+
353
+ // Afficher l'état de chargement
354
+ function showLoadingState() {
355
+ const container = document.getElementById('movies-container');
356
+ container.innerHTML = `
357
+ <div class="flex justify-center items-center py-12 col-span-full">
358
+ <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary loading-spinner"></div>
359
+ </div>
360
+ `;
361
+ }
362
+
363
+ // Afficher les films
364
+ function displayMovies(movies) {
365
+ const container = document.getElementById('movies-container');
366
+
367
+ movies.forEach(movie => {
368
+ const movieCard = document.createElement('div');
369
+ movieCard.className = 'movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer';
370
+
371
+ // Utiliser l'image originale en haute qualité si disponible
372
+ const posterPath = movie.poster_path
373
+ ? `https://image.tmdb.org/t/p/w500${movie.poster_path}`
374
+ : 'https://via.placeholder.com/500x750?text=Affiche+non+disponible';
375
+
376
+ movieCard.innerHTML = `
377
+ <div onclick="showMovieDetails(${movie.id})">
378
+ <div class="movie-poster w-full rounded-t-lg overflow-hidden ${!movie.poster_path ? 'placeholder-poster' : ''}">
379
+ <img src="${posterPath}"
380
+ alt="${movie.title || 'Titre inconnu'}"
381
+ class="w-full h-full object-cover"
382
+ onerror="this.src='https://via.placeholder.com/500x750?text=Image+non+chargée'; this.classList.add('placeholder-poster')">
383
+ </div>
384
+ <div class="p-4">
385
+ <h3 class="text-lg font-semibold text-white truncate">${movie.title || 'Titre inconnu'}</h3>
386
+ <div class="flex items-center mt-2">
387
+ <span class="text-yellow-400 text-sm">
388
+ <i class="fas fa-star"></i> ${movie.vote_average ? movie.vote_average.toFixed(1) : 'N/A'}
389
+ </span>
390
+ <span class="text-gray-400 text-sm ml-auto">${movie.release_date ? movie.release_date.substring(0, 4) : 'N/A'}</span>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ `;
395
+
396
+ container.appendChild(movieCard);
397
+ });
398
+ }
399
+
400
+ // Afficher un message d'erreur
401
+ function showErrorState(errorMessage) {
402
+ const container = document.getElementById('movies-container');
403
+ container.innerHTML = `
404
+ <div class="col-span-full py-6 px-4 error-message rounded-lg">
405
+ <div class="flex items-center">
406
+ <i class="fas fa-exclamation-triangle text-red-500 text-xl mr-3"></i>
407
+ <div>
408
+ <h3 class="text-lg font-medium text-white">Erreur lors du chargement des films</h3>
409
+ <p class="text-gray-300 mt-1">${errorMessage || 'Veuillez réessayer plus tard'}</p>
410
+ <button onclick="retryLoading()" class="mt-3 px-4 py-2 bg-primary text-white rounded-full hover:bg-secondary transition text-sm">
411
+ <i class="fas fa-sync-alt mr-2"></i> Réessayer
412
+ </button>
413
+ </div>
414
+ </div>
415
+ </div>
416
+ `;
417
+
418
+ document.getElementById('load-more-container').classList.add('hidden');
419
+ }
420
+
421
+ // Afficher un message quand aucun résultat n'est trouvé
422
+ function showNoResults() {
423
+ const container = document.getElementById('movies-container');
424
+ container.innerHTML = `
425
+ <div class="col-span-full text-center py-12">
426
+ <i class="fas fa-film text-4xl text-gray-500 mb-4"></i>
427
+ <h3 class="text-xl text-white">Aucun film trouvé</h3>
428
+ <p class="text-gray-400 mt-2">Essayez avec d'autres critères de recherche</p>
429
+ </div>
430
+ `;
431
+
432
+ document.getElementById('load-more-container').classList.add('hidden');
433
+ }
434
+
435
+ // Réessayer le chargement
436
+ function retryLoading() {
437
+ currentPage = 1;
438
+ loadMovies();
439
+ }
440
+
441
+ // Mettre à jour le bouton "Voir plus"
442
+ function updateLoadMoreButton() {
443
+ const loadMoreContainer = document.getElementById('load-more-container');
444
+
445
+ if (currentPage >= totalPages) {
446
+ loadMoreContainer.innerHTML = `
447
+ <p class="text-gray-400">Vous avez atteint la fin des résultats</p>
448
+ `;
449
+ } else {
450
+ loadMoreContainer.classList.remove('hidden');
451
+ }
452
+ }
453
+
454
+ // Filtrer les films
455
+ function filterMovies(filter) {
456
+ currentFilter = filter;
457
+ currentGenre = null;
458
+ currentSearch = '';
459
+ currentPage = 1;
460
+ document.getElementById('search-input').value = '';
461
+ loadMovies();
462
+
463
+ // Mettre à jour les boutons actifs
464
+ document.querySelectorAll('button').forEach(btn => {
465
+ if (btn.textContent.toLowerCase().includes(filter.replace('_', ' '))) {
466
+ btn.classList.remove('bg-gray-700');
467
+ btn.classList.add('bg-primary');
468
+ } else {
469
+ btn.classList.remove('bg-primary');
470
+ btn.classList.add('bg-gray-700');
471
+ }
472
+ });
473
+ }
474
+
475
+ // Filtrer par genre
476
+ function filterByGenre(genreId) {
477
+ currentGenre = genreId;
478
+ currentSearch = '';
479
+ currentPage = 1;
480
+ document.getElementById('search-input').value = '';
481
+ loadMovies();
482
+
483
+ // Mettre à jour les boutons actifs
484
+ document.querySelectorAll('.genre-btn').forEach(btn => {
485
+ btn.classList.remove('bg-primary');
486
+ if (btn.onclick.toString().includes(genreId.toString())) {
487
+ btn.classList.add('bg-primary');
488
+ }
489
+ });
490
+ }
491
+
492
+ // Rechercher des films
493
+ function searchMovies() {
494
+ const query = document.getElementById('search-input').value.trim();
495
+ if (query) {
496
+ currentSearch = query;
497
+ currentGenre = null;
498
+ currentPage = 1;
499
+ loadMovies();
500
+ }
501
+ }
502
+
503
+ // Charger plus de films
504
+ function loadMoreMovies() {
505
+ if (currentPage < totalPages) {
506
+ currentPage++;
507
+ loadMovies();
508
+ }
509
+ }
510
+
511
+ // Afficher les détails du film
512
+ async function showMovieDetails(movieId) {
513
+ try {
514
+ const movie = await fetchAPI(`/movie/${movieId}`);
515
+
516
+ // Remplir la modal
517
+ const modalPoster = document.querySelector('#modal-poster img');
518
+ modalPoster.src = movie.poster_path
519
+ ? `https://image.tmdb.org/t/p/w500${movie.poster_path}`
520
+ : 'https://via.placeholder.com/500x750?text=Affiche+non+disponible';
521
+
522
+ modalPoster.onerror = function() {
523
+ this.src = 'https://via.placeholder.com/500x750?text=Image+non+chargée';
524
+ };
525
+
526
+ document.getElementById('modal-title').textContent = movie.title || 'Titre inconnu';
527
+ document.getElementById('modal-rating').textContent = `${movie.vote_average ? movie.vote_average.toFixed(1) : 'N/A'}/10`;
528
+ document.getElementById('modal-year').textContent = movie.release_date ? movie.release_date.substring(0, 4) : 'N/A';
529
+ document.getElementById('modal-runtime').textContent = movie.runtime ? `${movie.runtime} min` : '';
530
+ document.getElementById('modal-overview').textContent = movie.overview || 'Aucun synopsis disponible.';
531
+
532
+ // Afficher les genres
533
+ const genresContainer = document.getElementById('modal-genres');
534
+ genresContainer.innerHTML = '';
535
+ if (movie.genres && movie.genres.length > 0) {
536
+ movie.genres.forEach(genre => {
537
+ const genreBadge = document.createElement('span');
538
+ genreBadge.className = 'bg-gray-700 text-white text-xs px-2 py-1 rounded';
539
+ genreBadge.textContent = genre.name;
540
+ genresContainer.appendChild(genreBadge);
541
+ });
542
+ } else {
543
+ genresContainer.innerHTML = '<span class="text-gray-400 text-sm">Aucun genre spécifié</span>';
544
+ }
545
+
546
+ // Lien pour regarder (exemple)
547
+ const watchBtn = document.getElementById('watch-now-btn');
548
+ watchBtn.href = `https://www.themoviedb.org/movie/${movieId}`;
549
+ watchBtn.style.display = movieId ? 'inline-flex' : 'none';
550
+
551
+ // Afficher la modal
552
+ document.getElementById('movie-modal').classList.remove('hidden');
553
+ } catch (error) {
554
+ console.error('Error fetching movie details:', error);
555
+ alert('Erreur lors du chargement des détails du film: ' + (error.message || 'Veuillez réessayer'));
556
+ }
557
+ }
558
+
559
+ // Fermer la modal
560
+ function closeModal() {
561
+ document.getElementById('movie-modal').classList.add('hidden');
562
+ }
563
+ </script>
564
+ <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/cinestream" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
565
+ </html>
prompts.txt ADDED
@@ -0,0 +1,6 @@
 
 
 
 
 
 
 
1
+ https://huggingface.co/spaces/docto41/cinefutur:: intgée serveur des films en automatique
2
+ je veux des vrais film des vrais image de film
3
+ affichier les image origine des filme
4
+ CORRIGER ERREUR DE CHARGEMENT DES FILMS
5
+ corriger l'erreur 401
6
+ RECONFIGURE LE SITE AFIN DE CORRIGER LES ERREUR 401