Spaces:
Running
Running
Add 2 files
Browse files- index.html +154 -14
- 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
|
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
|
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 |
-
<
|
235 |
-
<i class="fas fa-play mr-2"></i> Regarder
|
236 |
-
</
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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
|
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
|
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">​</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
|