docto41 commited on
Commit
3f93762
·
verified ·
1 Parent(s): b1bb4c7

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +154 -14
  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>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>
@@ -77,6 +77,32 @@
77
  align-items: center;
78
  justify-content: center;
79
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
80
  </style>
81
  </head>
82
  <body class="min-h-screen">
@@ -170,7 +196,7 @@
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>
@@ -231,9 +257,60 @@
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>
@@ -246,12 +323,14 @@
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 = {}) {
@@ -360,13 +439,13 @@
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
@@ -374,7 +453,7 @@
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'}"
@@ -389,6 +468,14 @@
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
  `;
@@ -512,6 +599,7 @@
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');
@@ -543,11 +631,6 @@
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) {
@@ -556,10 +639,67 @@
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>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CineStream - Films avec streaming automatique</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>
 
77
  align-items: center;
78
  justify-content: center;
79
  }
80
+
81
+ /* Style pour le lecteur vidéo */
82
+ .video-container {
83
+ position: relative;
84
+ padding-bottom: 56.25%; /* 16:9 */
85
+ height: 0;
86
+ overflow: hidden;
87
+ }
88
+
89
+ .video-container iframe {
90
+ position: absolute;
91
+ top: 0;
92
+ left: 0;
93
+ width: 100%;
94
+ height: 100%;
95
+ border: none;
96
+ }
97
+
98
+ /* Style pour les boutons de streaming */
99
+ .stream-btn {
100
+ transition: all 0.2s ease;
101
+ }
102
+
103
+ .stream-btn:hover {
104
+ transform: scale(1.05);
105
+ }
106
  </style>
107
  </head>
108
  <body class="min-h-screen">
 
196
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
197
  <div>
198
  <h3 class="text-white text-lg font-semibold mb-4">CineStream</h3>
199
+ <p class="text-sm">La meilleure plateforme pour regarder des films avec streaming automatique.</p>
200
  </div>
201
  <div>
202
  <h3 class="text-white text-lg font-semibold mb-4">Navigation</h3>
 
257
  <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">
258
  Fermer
259
  </button>
260
+ <button id="watch-now-btn" onclick="startStreaming()" 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">
261
+ <i class="fas fa-play mr-2"></i> Regarder maintenant
262
+ </button>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+
271
+ <!-- Streaming Modal -->
272
+ <div id="streaming-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
273
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
274
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
275
+ <div class="absolute inset-0 bg-gray-900 opacity-90"></div>
276
+ </div>
277
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
278
+ <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-6xl sm:w-full">
279
+ <div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
280
+ <div class="sm:flex sm:items-start">
281
+ <div class="w-full">
282
+ <div class="flex justify-between items-center mb-4">
283
+ <h3 id="streaming-title" class="text-xl font-bold text-white"></h3>
284
+ <button onclick="closeStreamingModal()" class="text-gray-400 hover:text-white">
285
+ <i class="fas fa-times text-xl"></i>
286
+ </button>
287
+ </div>
288
+
289
+ <div class="video-container mb-4 rounded-lg overflow-hidden">
290
+ <iframe id="streaming-player" allowfullscreen></iframe>
291
+ </div>
292
+
293
+ <div class="flex flex-wrap gap-2 mb-4">
294
+ <button onclick="changeQuality('720p')" class="stream-btn px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded-full text-sm">720p</button>
295
+ <button onclick="changeQuality('1080p')" class="stream-btn px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded-full text-sm">1080p</button>
296
+ <button onclick="changeQuality('4k')" class="stream-btn px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded-full text-sm">4K</button>
297
+ </div>
298
+
299
+ <div class="flex justify-between items-center">
300
+ <div class="flex space-x-2">
301
+ <button onclick="toggleSubtitles()" class="stream-btn px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded-full text-sm">
302
+ <i class="fas fa-closed-captioning mr-1"></i> Sous-titres
303
+ </button>
304
+ <button onclick="toggleFullscreen()" class="stream-btn px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded-full text-sm">
305
+ <i class="fas fa-expand mr-1"></i> Plein écran
306
+ </button>
307
+ </div>
308
+
309
+ <div>
310
+ <button onclick="downloadMovie()" class="stream-btn px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white rounded-full text-sm">
311
+ <i class="fas fa-download mr-1"></i> Télécharger
312
+ </button>
313
+ </div>
314
  </div>
315
  </div>
316
  </div>
 
323
  // Configuration
324
  const API_KEY = 'c45a857c193f6302f2b5061c3b85e743'; // Clé API TMDB valide
325
  const BASE_URL = 'https://api.themoviedb.org/3';
326
+ const STREAMING_PROVIDER = 'https://vidsrc.to/embed/movie/'; // Service de streaming tiers
327
  let currentPage = 1;
328
  let currentFilter = 'popular';
329
  let currentGenre = null;
330
  let currentSearch = '';
331
  let totalPages = 1;
332
  let isLoading = false;
333
+ let currentMovieId = null;
334
 
335
  // Fonction utilitaire pour faire les requêtes API
336
  async function fetchAPI(endpoint, params = {}) {
 
439
  `;
440
  }
441
 
442
+ // Afficher les films avec boutons de streaming
443
  function displayMovies(movies) {
444
  const container = document.getElementById('movies-container');
445
 
446
  movies.forEach(movie => {
447
  const movieCard = document.createElement('div');
448
+ movieCard.className = 'movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300';
449
 
450
  // Utiliser l'image originale en haute qualité si disponible
451
  const posterPath = movie.poster_path
 
453
  : 'https://via.placeholder.com/500x750?text=Affiche+non+disponible';
454
 
455
  movieCard.innerHTML = `
456
+ <div>
457
  <div class="movie-poster w-full rounded-t-lg overflow-hidden ${!movie.poster_path ? 'placeholder-poster' : ''}">
458
  <img src="${posterPath}"
459
  alt="${movie.title || 'Titre inconnu'}"
 
468
  </span>
469
  <span class="text-gray-400 text-sm ml-auto">${movie.release_date ? movie.release_date.substring(0, 4) : 'N/A'}</span>
470
  </div>
471
+ <div class="mt-3">
472
+ <button onclick="startStreamingFromCard(${movie.id}, '${movie.title || 'Film'}')" class="w-full stream-btn px-3 py-2 bg-green-600 hover:bg-green-700 text-white rounded text-sm">
473
+ <i class="fas fa-play mr-1"></i> Regarder
474
+ </button>
475
+ <button onclick="showMovieDetails(${movie.id})" class="w-full mt-2 px-3 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded text-sm">
476
+ <i class="fas fa-info-circle mr-1"></i> Détails
477
+ </button>
478
+ </div>
479
  </div>
480
  </div>
481
  `;
 
599
  async function showMovieDetails(movieId) {
600
  try {
601
  const movie = await fetchAPI(`/movie/${movieId}`);
602
+ currentMovieId = movieId;
603
 
604
  // Remplir la modal
605
  const modalPoster = document.querySelector('#modal-poster img');
 
631
  genresContainer.innerHTML = '<span class="text-gray-400 text-sm">Aucun genre spécifié</span>';
632
  }
633
 
 
 
 
 
 
634
  // Afficher la modal
635
  document.getElementById('movie-modal').classList.remove('hidden');
636
  } catch (error) {
 
639
  }
640
  }
641
 
642
+ // Fermer la modal de détails
643
  function closeModal() {
644
  document.getElementById('movie-modal').classList.add('hidden');
645
  }
646
+
647
+ // Démarrer le streaming depuis la modal
648
+ function startStreaming() {
649
+ if (currentMovieId) {
650
+ const movieTitle = document.getElementById('modal-title').textContent;
651
+ startStreamingFromCard(currentMovieId, movieTitle);
652
+ closeModal();
653
+ }
654
+ }
655
+
656
+ // Démarrer le streaming depuis une carte de film
657
+ function startStreamingFromCard(movieId, movieTitle) {
658
+ currentMovieId = movieId;
659
+ document.getElementById('streaming-title').textContent = movieTitle;
660
+
661
+ // Configurer le lecteur vidéo avec le service de streaming tiers
662
+ const player = document.getElementById('streaming-player');
663
+ player.src = `${STREAMING_PROVIDER}${movieId}`;
664
+
665
+ // Afficher la modal de streaming
666
+ document.getElementById('streaming-modal').classList.remove('hidden');
667
+ }
668
+
669
+ // Fermer la modal de streaming
670
+ function closeStreamingModal() {
671
+ const player = document.getElementById('streaming-player');
672
+ player.src = '';
673
+ document.getElementById('streaming-modal').classList.add('hidden');
674
+ }
675
+
676
+ // Changer la qualité de streaming (simulé)
677
+ function changeQuality(quality) {
678
+ alert(`Qualité changée en ${quality}. Note: Ceci est une démonstration.`);
679
+ // En réalité, vous devriez mettre à jour la source du lecteur vidéo
680
+ }
681
+
682
+ // Basculer les sous-titres (simulé)
683
+ function toggleSubtitles() {
684
+ alert("Fonctionnalité de sous-titres activée. Note: Ceci est une démonstration.");
685
+ }
686
+
687
+ // Basculer en plein écran
688
+ function toggleFullscreen() {
689
+ const player = document.getElementById('streaming-player');
690
+ if (player.requestFullscreen) {
691
+ player.requestFullscreen();
692
+ } else if (player.webkitRequestFullscreen) {
693
+ player.webkitRequestFullscreen();
694
+ } else if (player.msRequestFullscreen) {
695
+ player.msRequestFullscreen();
696
+ }
697
+ }
698
+
699
+ // Télécharger le film (simulé)
700
+ function downloadMovie() {
701
+ alert("Option de téléchargement. Note: Ceci est une démonstration.");
702
+ }
703
  </script>
704
  <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>
705
  </html>
prompts.txt CHANGED
@@ -3,4 +3,5 @@ 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
 
 
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
7
+ je veux regarder les film en automatique activer les boutons regarder en automatique