Hugging Face's logo

Spaces:
docto41
/
ia-boot
Running

App Files Community
docto41 commited on
Commit
0258815
·
verified ·
1 Parent(s): 0f2e718

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +222 -142
  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>StreamFlix - Films et Séries en Streaming</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>
@@ -47,7 +47,7 @@
47
  <nav class="fixed w-full z-50 bg-gradient-to-b from-black to-transparent px-4 py-3">
48
  <div class="max-w-7xl mx-auto flex items-center justify-between">
49
  <div class="flex items-center">
50
- <span class="text-red-600 font-bold text-2xl mr-10">STREAMFLIX</span>
51
  <div class="hidden md:flex space-x-6">
52
  <a href="#" class="text-white hover:text-gray-300">Accueil</a>
53
  <a href="#" class="text-white hover:text-gray-300">Séries</a>
@@ -76,21 +76,21 @@
76
  <!-- Hero Section -->
77
  <section class="relative h-screen">
78
  <div class="absolute inset-0 bg-black/50 z-10 hero-gradient"></div>
79
- <img src="https://image.tmdb.org/t/p/original/9dKCd55IuTT5QRs989m9Qlb7d2B.jpg" alt="Film Hero" class="w-full h-full object-cover">
80
 
81
- <div class="absolute bottom-0 left-0 z-20 p-16 w-full md:w-2/3">
82
- <h1 class="text-4xl md:text-6xl font-bold mb-4">The Witcher</h1>
83
- <div class="flex space-x-4 mb-6">
84
  <span class="text-green-500 font-semibold">97% Match</span>
85
  <span>2023</span>
86
  <span class="border border-gray-400 px-1">HD</span>
87
  </div>
88
- <p class="text-lg mb-6">Geralt de Riv, un chasseur de monstres mutant, parcourt le continent en quête de sa place dans un monde où les humains se révèlent souvent plus vicieux que les bêtes.</p>
89
  <div class="flex space-x-4">
90
- <button class="bg-white text-black px-6 py-2 rounded flex items-center hover:bg-opacity-80">
91
  <i class="fas fa-play mr-2"></i> Lecture
92
  </button>
93
- <button class="bg-gray-600/70 text-white px-6 py-2 rounded flex items-center hover:bg-opacity-50">
94
  <i class="fas fa-info-circle mr-2"></i> Plus d'infos
95
  </button>
96
  </div>
@@ -105,17 +105,25 @@
105
  <h2 class="text-xl font-bold mb-4">Tendances actuelles</h2>
106
  <div class="relative">
107
  <div class="flex overflow-x-auto scroll-hide space-x-4 pb-4" id="trending">
108
- <!-- Films will be loaded here -->
 
 
 
 
109
  </div>
110
  </div>
111
  </section>
112
 
113
- <!-- Popular on StreamFlix -->
114
  <section class="px-4">
115
- <h2 class="text-xl font-bold mb-4">Populaire sur StreamFlix</h2>
116
  <div class="relative">
117
  <div class="flex overflow-x-auto scroll-hide space-x-4 pb-4" id="popular">
118
- <!-- Films will be loaded here -->
 
 
 
 
119
  </div>
120
  </div>
121
  </section>
@@ -125,7 +133,11 @@
125
  <h2 class="text-xl font-bold mb-4">Continuer à regarder</h2>
126
  <div class="relative">
127
  <div class="flex overflow-x-auto scroll-hide space-x-4 pb-4" id="continue">
128
- <!-- Films will be loaded here -->
 
 
 
 
129
  </div>
130
  </div>
131
  </section>
@@ -135,7 +147,11 @@
135
  <h2 class="text-xl font-bold mb-4">Nouveautés</h2>
136
  <div class="relative">
137
  <div class="flex overflow-x-auto scroll-hide space-x-4 pb-4" id="new-releases">
138
- <!-- Films will be loaded here -->
 
 
 
 
139
  </div>
140
  </div>
141
  </section>
@@ -147,7 +163,7 @@
147
  <div class="max-w-7xl mx-auto">
148
  <div class="flex flex-col md:flex-row justify-between">
149
  <div class="mb-8">
150
- <h3 class="text-white text-2xl font-bold mb-4">STREAMFLIX</h3>
151
  <div class="flex space-x-4 text-2xl">
152
  <a href="#"><i class="fab fa-facebook"></i></a>
153
  <a href="#"><i class="fab fa-instagram"></i></a>
@@ -195,165 +211,173 @@
195
  </div>
196
  </div>
197
  <div class="border-t border-gray-800 mt-12 pt-8 text-center">
198
- <p>&copy; 2023 StreamFlix. Tous droits réservés.</p>
199
  </div>
200
  </div>
201
  </footer>
202
 
203
  <script>
204
- // Sample movie data
205
- const movies = [
206
- {
207
- id: 1,
208
- title: "Stranger Things",
209
- image: "https://image.tmdb.org/t/p/w500/x49FVwmViyGxflIbU3mH1dGVB3r.jpg",
210
- year: "2022",
211
- type: "Série",
212
- progress: 65
213
- },
214
- {
215
- id: 2,
216
- title: "The Mandalorian",
217
- image: "https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg",
218
- year: "2023",
219
- type: "Série",
220
- progress: 40
221
- },
222
- {
223
- id: 3,
224
- title: "Avatar 2",
225
- image: "https://image.tmdb.org/t/p/w500/94xxm5701CzlOdgDkggvSw9NtQX.jpg",
226
- year: "2022",
227
- type: "Film",
228
- progress: 0
229
- },
230
- {
231
- id: 4,
232
- title: "Oppenheimer",
233
- image: "https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1n2ua.jpg",
234
- year: "2023",
235
- type: "Film",
236
- progress: 0
237
- },
238
- {
239
- id: 5,
240
- title: "Peaky Blinders",
241
- image: "https://image.tmdb.org/t/p/w500/6PX0r5TRRU5y0jZ70y1OtbLYmoD.jpg",
242
- year: "2022",
243
- type: "Série",
244
- progress: 90
245
- },
246
- {
247
- id: 6,
248
- title: "Dune",
249
- image: "https://image.tmdb.org/t/p/w500/8gchj8DCl82B3vL3HZQ1Xe2dUwb.jpg",
250
- year: "2021",
251
- type: "Film",
252
- progress: 0
253
- },
254
- {
255
- id: 7,
256
- title: "The Last of Us",
257
- image: "https://image.tmdb.org/t/p/w500/uKvVjHNqB5VmOrdxqAt2F7J78ED.jpg",
258
- year: "2023",
259
- type: "Série",
260
- progress: 30
261
- },
262
- {
263
- id: 8,
264
- title: "John Wick 4",
265
- image: "https://image.tmdb.org/t/p/w500/vZloFAK7NmvMGKE7VkF5UHaz0I.jpg",
266
- year: "2023",
267
- type: "Film",
268
- progress: 0
269
  }
270
- ];
271
-
272
- // Function to create movie card
273
  function createMovieCard(movie, category) {
274
  const card = document.createElement('div');
275
  card.className = 'flex-none w-48 md:w-56 relative group film-card';
 
 
276
 
277
- let progressBar = '';
278
- if (movie.progress > 0) {
279
- progressBar = `
280
- <div class="absolute bottom-0 left-0 right-0 h-1 bg-gray-600">
281
- <div class="h-full bg-red-600" style="width: ${movie.progress}%"></div>
282
- </div>
283
- `;
284
- }
285
 
286
  card.innerHTML = `
287
  <div class="relative rounded overflow-hidden">
288
- <img src="${movie.image}" alt="${movie.title}" class="w-full h-auto rounded transition-transform duration-300 group-hover:scale-105">
 
 
289
  <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
290
  <div class="play-icon opacity-0 transform scale-90 transition-all duration-300 text-white text-4xl bg-red-600 rounded-full w-16 h-16 flex items-center justify-center">
291
  <i class="fas fa-play"></i>
292
  </div>
293
  </div>
294
- ${progressBar}
295
  </div>
296
  <div class="mt-2">
297
- <h3 class="font-semibold truncate">${movie.title}</h3>
298
  <div class="flex justify-between text-sm text-gray-400">
299
- <span>${movie.year}</span>
300
- <span>${movie.type}</span>
301
  </div>
302
  </div>
303
  `;
304
 
305
  card.addEventListener('click', () => {
306
- // Simulate loading
307
- const loading = document.createElement('div');
308
- loading.className = 'fixed inset-0 bg-black/90 z-50 flex items-center justify-center';
309
- loading.innerHTML = `
310
- <div class="text-center">
311
- <div class="loading-spinner inline-block w-16 h-16 border-4 border-red-600 border-t-transparent rounded-full mb-4"></div>
312
- <p class="text-white text-xl">Chargement du film...</p>
313
- </div>
314
- `;
315
- document.body.appendChild(loading);
316
 
317
- // After 3 seconds, redirect to player
318
- setTimeout(() => {
319
- document.body.removeChild(loading);
320
- window.open(`https://example.com/player/${movie.id}`, '_blank');
321
- }, 3000);
322
  });
323
 
324
  return card;
325
  }
326
-
327
- // Initialize the page
328
- document.addEventListener('DOMContentLoaded', () => {
329
- // Load movies into sections
330
- const trendingSection = document.getElementById('trending');
331
- const popularSection = document.getElementById('popular');
332
- const continueSection = document.getElementById('continue');
333
- const newReleasesSection = document.getElementById('new-releases');
 
334
 
335
- // Shuffle movies for variety
336
- const shuffledMovies = [...movies].sort(() => 0.5 - Math.random());
337
 
338
- // Add movies to sections
339
- shuffledMovies.slice(0, 6).forEach(movie => {
340
- trendingSection.appendChild(createMovieCard(movie, 'trending'));
341
- });
342
 
343
- shuffledMovies.slice(2, 8).forEach(movie => {
344
- popularSection.appendChild(createMovieCard(movie, 'popular'));
345
- });
 
346
 
347
- // Only movies with progress > 0 for "Continue Watching"
348
- shuffledMovies.filter(movie => movie.progress > 0).slice(0, 5).forEach(movie => {
349
- continueSection.appendChild(createMovieCard(movie, 'continue'));
350
- });
 
351
 
352
- shuffledMovies.slice(4, 10).forEach(movie => {
353
- newReleasesSection.appendChild(createMovieCard(movie, 'new-releases'));
354
- });
355
 
356
- // Search functionality
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
357
  const searchBtn = document.getElementById('search-btn');
358
  const searchInput = document.getElementById('search-input');
359
 
@@ -364,12 +388,68 @@
364
  searchInput.focus();
365
  });
366
 
367
- searchInput.addEventListener('keypress', (e) => {
368
- if (e.key === 'Enter') {
369
- alert(`Recherche pour: ${searchInput.value}`);
370
- // In a real app, you would redirect to search results
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
371
  }
372
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
373
  });
374
  </script>
375
  <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/ia-boot" 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>MegaStream - Films et Séries en illimité</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>
 
47
  <nav class="fixed w-full z-50 bg-gradient-to-b from-black to-transparent px-4 py-3">
48
  <div class="max-w-7xl mx-auto flex items-center justify-between">
49
  <div class="flex items-center">
50
+ <span class="text-red-600 font-bold text-2xl mr-10">MEGASTREAM</span>
51
  <div class="hidden md:flex space-x-6">
52
  <a href="#" class="text-white hover:text-gray-300">Accueil</a>
53
  <a href="#" class="text-white hover:text-gray-300">Séries</a>
 
76
  <!-- Hero Section -->
77
  <section class="relative h-screen">
78
  <div class="absolute inset-0 bg-black/50 z-10 hero-gradient"></div>
79
+ <div id="hero-background" class="w-full h-full bg-cover bg-center"></div>
80
 
81
+ <div class="absolute bottom-0 left-0 z-20 p-16 w-full md:w-2/3" id="hero-content">
82
+ <h1 class="text-4xl md:text-6xl font-bold mb-4" id="hero-title">Chargement...</h1>
83
+ <div class="flex space-x-4 mb-6" id="hero-details">
84
  <span class="text-green-500 font-semibold">97% Match</span>
85
  <span>2023</span>
86
  <span class="border border-gray-400 px-1">HD</span>
87
  </div>
88
+ <p class="text-lg mb-6" id="hero-description">Chargement de la description...</p>
89
  <div class="flex space-x-4">
90
+ <button class="bg-white text-black px-6 py-2 rounded flex items-center hover:bg-opacity-80" id="play-btn">
91
  <i class="fas fa-play mr-2"></i> Lecture
92
  </button>
93
+ <button class="bg-gray-600/70 text-white px-6 py-2 rounded flex items-center hover:bg-opacity-50" id="info-btn">
94
  <i class="fas fa-info-circle mr-2"></i> Plus d'infos
95
  </button>
96
  </div>
 
105
  <h2 class="text-xl font-bold mb-4">Tendances actuelles</h2>
106
  <div class="relative">
107
  <div class="flex overflow-x-auto scroll-hide space-x-4 pb-4" id="trending">
108
+ <div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div>
109
+ <div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div>
110
+ <div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div>
111
+ <div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div>
112
+ <div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div>
113
  </div>
114
  </div>
115
  </section>
116
 
117
+ <!-- Popular on MegaStream -->
118
  <section class="px-4">
119
+ <h2 class="text-xl font-bold mb-4">Populaire sur MegaStream</h2>
120
  <div class="relative">
121
  <div class="flex overflow-x-auto scroll-hide space-x-4 pb-4" id="popular">
122
+ <div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div>
123
+ <div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div>
124
+ <div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div>
125
+ <div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div>
126
+ <div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div>
127
  </div>
128
  </div>
129
  </section>
 
133
  <h2 class="text-xl font-bold mb-4">Continuer à regarder</h2>
134
  <div class="relative">
135
  <div class="flex overflow-x-auto scroll-hide space-x-4 pb-4" id="continue">
136
+ <div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div>
137
+ <div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div>
138
+ <div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div>
139
+ <div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div>
140
+ <div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div>
141
  </div>
142
  </div>
143
  </section>
 
147
  <h2 class="text-xl font-bold mb-4">Nouveautés</h2>
148
  <div class="relative">
149
  <div class="flex overflow-x-auto scroll-hide space-x-4 pb-4" id="new-releases">
150
+ <div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div>
151
+ <div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div>
152
+ <div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div>
153
+ <div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div>
154
+ <div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div>
155
  </div>
156
  </div>
157
  </section>
 
163
  <div class="max-w-7xl mx-auto">
164
  <div class="flex flex-col md:flex-row justify-between">
165
  <div class="mb-8">
166
+ <h3 class="text-white text-2xl font-bold mb-4">MEGASTREAM</h3>
167
  <div class="flex space-x-4 text-2xl">
168
  <a href="#"><i class="fab fa-facebook"></i></a>
169
  <a href="#"><i class="fab fa-instagram"></i></a>
 
211
  </div>
212
  </div>
213
  <div class="border-t border-gray-800 mt-12 pt-8 text-center">
214
+ <p>&copy; 2023 MegaStream. Tous droits réservés.</p>
215
  </div>
216
  </div>
217
  </footer>
218
 
219
  <script>
220
+ // Configuration de l'API TMDb
221
+ const API_KEY = '3fd2be6f0c70a2a598f084ddfb75487c'; // Clé API publique pour démo
222
+ const BASE_URL = 'https://api.themoviedb.org/3';
223
+ const IMG_URL = 'https://image.tmdb.org/t/p/original';
224
+
225
+ // Fonction pour charger les données depuis TMDb
226
+ async function fetchMovies(endpoint, params = {}) {
227
+ const url = new URL(`${BASE_URL}${endpoint}`);
228
+ url.searchParams.append('api_key', API_KEY);
229
+ url.searchParams.append('language', 'fr-FR');
230
+
231
+ // Ajouter les paramètres supplémentaires
232
+ Object.keys(params).forEach(key => {
233
+ url.searchParams.append(key, params[key]);
234
+ });
235
+
236
+ try {
237
+ const response = await fetch(url);
238
+ if (!response.ok) throw new Error('Erreur réseau');
239
+ return await response.json();
240
+ } catch (error) {
241
+ console.error('Erreur:', error);
242
+ return null;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
243
  }
244
+ }
245
+
246
+ // Fonction pour créer une carte de film
247
  function createMovieCard(movie, category) {
248
  const card = document.createElement('div');
249
  card.className = 'flex-none w-48 md:w-56 relative group film-card';
250
+ card.dataset.id = movie.id;
251
+ card.dataset.category = category;
252
 
253
+ // Vérifier si c'est un film ou une série
254
+ const isTvShow = category === 'tv';
255
+ const title = isTvShow ? movie.name : movie.title;
256
+ const year = isTvShow ?
257
+ (movie.first_air_date ? new Date(movie.first_air_date).getFullYear() : 'N/A') :
258
+ (movie.release_date ? new Date(movie.release_date).getFullYear() : 'N/A');
 
 
259
 
260
  card.innerHTML = `
261
  <div class="relative rounded overflow-hidden">
262
+ <img src="${movie.poster_path ? IMG_URL + movie.poster_path : 'https://via.placeholder.com/500x750?text=Image+non+disponible'}"
263
+ alt="${title}"
264
+ class="w-full h-auto rounded transition-transform duration-300 group-hover:scale-105">
265
  <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
266
  <div class="play-icon opacity-0 transform scale-90 transition-all duration-300 text-white text-4xl bg-red-600 rounded-full w-16 h-16 flex items-center justify-center">
267
  <i class="fas fa-play"></i>
268
  </div>
269
  </div>
 
270
  </div>
271
  <div class="mt-2">
272
+ <h3 class="font-semibold truncate">${title}</h3>
273
  <div class="flex justify-between text-sm text-gray-400">
274
+ <span>${year}</span>
275
+ <span>${isTvShow ? 'Série' : 'Film'}</span>
276
  </div>
277
  </div>
278
  `;
279
 
280
  card.addEventListener('click', () => {
281
+ // Mettre à jour le hero avec ce film/série
282
+ updateHeroContent(movie, isTvShow);
 
 
 
 
 
 
 
 
283
 
284
+ // Faire défiler vers le haut
285
+ window.scrollTo({top: 0, behavior: 'smooth'});
 
 
 
286
  });
287
 
288
  return card;
289
  }
290
+
291
+ // Mettre à jour la section hero
292
+ function updateHeroContent(movie, isTvShow = false) {
293
+ const heroBg = document.getElementById('hero-background');
294
+ const heroTitle = document.getElementById('hero-title');
295
+ const heroDetails = document.getElementById('hero-details');
296
+ const heroDescription = document.getElementById('hero-description');
297
+ const playBtn = document.getElementById('play-btn');
298
+ const infoBtn = document.getElementById('info-btn');
299
 
300
+ // Mettre à jour l'image de fond
301
+ heroBg.style.backgroundImage = `url(${movie.backdrop_path ? IMG_URL + movie.backdrop_path : 'https://via.placeholder.com/1920x1080?text=Image+non+disponible'})`;
302
 
303
+ // Mettre à jour le titre
304
+ heroTitle.textContent = isTvShow ? movie.name : movie.title;
 
 
305
 
306
+ // Mettre à jour les détails
307
+ const year = isTvShow ?
308
+ (movie.first_air_date ? new Date(movie.first_air_date).getFullYear() : 'N/A') :
309
+ (movie.release_date ? new Date(movie.release_date).getFullYear() : 'N/A');
310
 
311
+ heroDetails.innerHTML = `
312
+ <span class="text-green-500 font-semibold">${Math.round(movie.vote_average * 10)}% Match</span>
313
+ <span>${year}</span>
314
+ <span class="border border-gray-400 px-1">HD</span>
315
+ `;
316
 
317
+ // Mettre à jour la description
318
+ heroDescription.textContent = movie.overview || 'Aucune description disponible.';
 
319
 
320
+ // Mettre à jour les boutons
321
+ playBtn.dataset.id = movie.id;
322
+ playBtn.dataset.type = isTvShow ? 'tv' : 'movie';
323
+ infoBtn.dataset.id = movie.id;
324
+ infoBtn.dataset.type = isTvShow ? 'tv' : 'movie';
325
+ }
326
+
327
+ // Initialiser la page
328
+ document.addEventListener('DOMContentLoaded', async () => {
329
+ // Charger les films tendance
330
+ const trendingData = await fetchMovies('/trending/all/week');
331
+ if (trendingData) {
332
+ const trendingSection = document.getElementById('trending');
333
+ trendingSection.innerHTML = '';
334
+
335
+ trendingData.results.slice(0, 10).forEach(movie => {
336
+ const isTvShow = movie.media_type === 'tv';
337
+ trendingSection.appendChild(createMovieCard(movie, isTvShow ? 'tv' : 'movie'));
338
+ });
339
+
340
+ // Mettre à jour le hero avec le premier film/série
341
+ if (trendingData.results.length > 0) {
342
+ const firstItem = trendingData.results[0];
343
+ updateHeroContent(firstItem, firstItem.media_type === 'tv');
344
+ }
345
+ }
346
+
347
+ // Charger les films populaires
348
+ const popularData = await fetchMovies('/movie/popular');
349
+ if (popularData) {
350
+ const popularSection = document.getElementById('popular');
351
+ popularSection.innerHTML = '';
352
+
353
+ popularData.results.slice(0, 10).forEach(movie => {
354
+ popularSection.appendChild(createMovieCard(movie, 'movie'));
355
+ });
356
+ }
357
+
358
+ // Charger les séries populaires pour "Continuer à regarder"
359
+ const tvPopularData = await fetchMovies('/tv/popular');
360
+ if (tvPopularData) {
361
+ const continueSection = document.getElementById('continue');
362
+ continueSection.innerHTML = '';
363
+
364
+ tvPopularData.results.slice(0, 5).forEach(show => {
365
+ continueSection.appendChild(createMovieCard(show, 'tv'));
366
+ });
367
+ }
368
+
369
+ // Charger les nouvelles sorties
370
+ const newReleasesData = await fetchMovies('/movie/now_playing');
371
+ if (newReleasesData) {
372
+ const newReleasesSection = document.getElementById('new-releases');
373
+ newReleasesSection.innerHTML = '';
374
+
375
+ newReleasesData.results.slice(0, 10).forEach(movie => {
376
+ newReleasesSection.appendChild(createMovieCard(movie, 'movie'));
377
+ });
378
+ }
379
+
380
+ // Gestion de la recherche
381
  const searchBtn = document.getElementById('search-btn');
382
  const searchInput = document.getElementById('search-input');
383
 
 
388
  searchInput.focus();
389
  });
390
 
391
+ searchInput.addEventListener('keypress', async (e) => {
392
+ if (e.key === 'Enter' && searchInput.value.trim()) {
393
+ // Rechercher des films et séries
394
+ const searchData = await fetchMovies('/search/multi', {
395
+ query: searchInput.value.trim(),
396
+ include_adult: false
397
+ });
398
+
399
+ if (searchData && searchData.results.length > 0) {
400
+ // Créer une modal pour afficher les résultats
401
+ const modal = document.createElement('div');
402
+ modal.className = 'fixed inset-0 bg-black/90 z-50 p-8 overflow-y-auto';
403
+ modal.innerHTML = `
404
+ <div class="max-w-6xl mx-auto">
405
+ <div class="flex justify-between items-center mb-8">
406
+ <h2 class="text-2xl font-bold">Résultats pour "${searchInput.value.trim()}"</h2>
407
+ <button class="text-white text-2xl" id="close-search">&times;</button>
408
+ </div>
409
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4" id="search-results">
410
+ <!-- Les résultats seront ajoutés ici -->
411
+ </div>
412
+ </div>
413
+ `;
414
+
415
+ document.body.appendChild(modal);
416
+
417
+ // Ajouter les résultats
418
+ const searchResults = document.getElementById('search-results');
419
+ searchData.results.forEach(item => {
420
+ if (item.media_type === 'movie' || item.media_type === 'tv') {
421
+ searchResults.appendChild(createMovieCard(item, item.media_type));
422
+ }
423
+ });
424
+
425
+ // Fermer la modal
426
+ document.getElementById('close-search').addEventListener('click', () => {
427
+ document.body.removeChild(modal);
428
+ });
429
+ } else {
430
+ alert('Aucun résultat trouvé');
431
+ }
432
  }
433
  });
434
+
435
+ // Gestion du bouton play
436
+ document.getElementById('play-btn').addEventListener('click', () => {
437
+ const loading = document.createElement('div');
438
+ loading.className = 'fixed inset-0 bg-black/90 z-50 flex items-center justify-center';
439
+ loading.innerHTML = `
440
+ <div class="text-center">
441
+ <div class="loading-spinner inline-block w-16 h-16 border-4 border-red-600 border-t-transparent rounded-full mb-4"></div>
442
+ <p class="text-white text-xl">Préparation de la lecture...</p>
443
+ </div>
444
+ `;
445
+ document.body.appendChild(loading);
446
+
447
+ // Simuler le chargement du lecteur
448
+ setTimeout(() => {
449
+ document.body.removeChild(loading);
450
+ alert('Fonctionnalité de lecture en cours de développement. En production, cela ouvrirait le lecteur vidéo.');
451
+ }, 2000);
452
+ });
453
  });
454
  </script>
455
  <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/ia-boot" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
prompts.txt CHANGED
@@ -5,4 +5,5 @@ je veux creer le plis imense marketp ajouter bouton paypal , stripe , avec mes
5
  je veux creer le plus gigantesque marché de INTELIGENCES ARTIFICIEL AVEC PLUS DE 990099 BOUTONS D ASSISANT IA dans toutes les domaine de services, je veux q'uon affiche toutes les boutons directement et que chaque boutons cliqué s'ouvre dans une nouvel fenetre je veux que toi soit gré en automatique et aussi ,: je veux un tableau de bord gigantesque ajouter bouton paypal , stripe , avec mes information pour etre payer , ajouter panier d'achat , obligatio de sabonner pour utiliser le site gratuitement ajouter tableau de bord avec les information de paiement paypal, stripe, avec bouton stripe ,bouton paypal etc.. plus panier d'achat pour les information de paiement pour recevoir mes paement je veux acces et toute produit pour moi seul les autre devront payer un abonnement : [email protected] : Admin270574@ et [email protected] : Admin270574@ avec une interface futiriste
6
  je veux ouvrir chaque bouton cliquer s'ouvre dans une nouvel fenetre
7
  ouvrer les bouton en automatique dans une nouvel page
8
- createur de site de films de streaming en 10 seconde
 
 
5
  je veux creer le plus gigantesque marché de INTELIGENCES ARTIFICIEL AVEC PLUS DE 990099 BOUTONS D ASSISANT IA dans toutes les domaine de services, je veux q'uon affiche toutes les boutons directement et que chaque boutons cliqué s'ouvre dans une nouvel fenetre je veux que toi soit gré en automatique et aussi ,: je veux un tableau de bord gigantesque ajouter bouton paypal , stripe , avec mes information pour etre payer , ajouter panier d'achat , obligatio de sabonner pour utiliser le site gratuitement ajouter tableau de bord avec les information de paiement paypal, stripe, avec bouton stripe ,bouton paypal etc.. plus panier d'achat pour les information de paiement pour recevoir mes paement je veux acces et toute produit pour moi seul les autre devront payer un abonnement : [email protected] : Admin270574@ et [email protected] : Admin270574@ avec une interface futiriste
6
  je veux ouvrir chaque bouton cliquer s'ouvre dans une nouvel fenetre
7
  ouvrer les bouton en automatique dans une nouvel page
8
+ createur de site de films de streaming en 10 seconde
9
+ je veux pas des site d'exemple je veux des vrais film avec une database de 9789789 film complet en automatique