Hugging Face's logo

Spaces:
docto41
/
cin-verse
Running

App Files Community
cin-verse / index.html
docto41's picture
docto41
Add 2 files
36711f4 verified
raw
history blame contribute delete
20.7 kB
 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CinéVerse - Films populaires</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.movie-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.movie-card:hover {
transform: scale(1.05);
box-shadow: 0 10px 25px rgba(220, 38, 38, 0.3);
}
.scroll-container {
height: calc(100vh - 200px);
overflow-y: auto;
}
.scroll-container::-webkit-scrollbar {
width: 8px;
}
.scroll-container::-webkit-scrollbar-track {
background: #1a202c;
}
.scroll-container::-webkit-scrollbar-thumb {
background: #e53e3e;
border-radius: 4px;
}
.loading-spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.streaming-option {
transition: all 0.3s ease;
}
.streaming-option:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body class="bg-gray-900 text-white">
<header class="bg-black py-6 shadow-lg sticky top-0 z-50">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
<div class="flex items-center space-x-2">
<i class="fas fa-film text-3xl text-red-500"></i>
<h1 class="text-2xl font-bold">CinéVerse</h1>
</div>
<div class="relative w-full md:w-1/3">
<input type="text" id="searchInput" placeholder="Rechercher un film..." class="w-full bg-gray-800 rounded-full py-2 px-4 text-white focus:outline-none focus:ring-2 focus:ring-red-500">
<button id="searchButton" class="absolute right-3 top-2 text-gray-400 hover:text-white">
<i class="fas fa-search"></i>
</button>
</div>
<div class="flex space-x-4">
<button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-md font-medium">
<i class="fas fa-user mr-2"></i>Connexion
</button>
</div>
</div>
</div>
</header>
<main class="container mx-auto px-4 py-8">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 space-y-4 md:space-y-0">
<h2 class="text-2xl font-bold" id="sectionTitle">Films populaires</h2>
<div class="flex flex-wrap gap-2">
<button class="genre-btn bg-red-600 hover:bg-red-700 px-4 py-2 rounded-md" data-id="28">Action</button>
<button class="genre-btn bg-red-600 hover:bg-red-700 px-4 py-2 rounded-md" data-id="35">Comédie</button>
<button class="genre-btn bg-red-600 hover:bg-red-700 px-4 py-2 rounded-md" data-id="18">Drame</button>
<button class="genre-btn bg-red-600 hover:bg-red-700 px-4 py-2 rounded-md" data-id="27">Horreur</button>
<button class="genre-btn bg-red-600 hover:bg-red-700 px-4 py-2 rounded-md" data-id="10749">Romance</button>
</div>
</div>
<div id="loading" class="flex justify-center items-center py-20">
<i class="fas fa-spinner loading-spinner text-4xl text-red-500"></i>
</div>
<div class="scroll-container hidden" id="moviesContainer">
<div id="moviesGrid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6">
<!-- Les films seront chargés ici via JavaScript -->
</div>
<div class="flex justify-center mt-8 mb-4">
<button id="loadMore" class="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-md font-medium hidden">
Charger plus de films
</button>
</div>
</div>
</main>
<!-- Template pour la page de détails du film (caché par défaut) -->
<div id="movieDetailsTemplate" class="hidden fixed inset-0 bg-black bg-opacity-90 z-50 overflow-y-auto">
<div class="container mx-auto px-4 py-12">
<button onclick="closeMovieDetails()" class="absolute top-4 right-4 text-3xl text-white hover:text-red-500">
<i class="fas fa-times"></i>
</button>
<div class="flex flex-col lg:flex-row gap-8">
<div class="lg:w-1/3">
<img id="detailPoster" src="" alt="Affiche du film" class="w-full rounded-lg shadow-xl">
</div>
<div class="lg:w-2/3">
<h1 id="detailTitle" class="text-3xl font-bold mb-2"></h1>
<div class="flex items-center space-x-4 mb-4">
<span id="detailYear" class="text-gray-400"></span>
<span id="detailRuntime" class="text-gray-400"></span>
<span id="detailRating" class="flex items-center text-yellow-400">
<i class="fas fa-star mr-1"></i>
<span></span>
</span>
</div>
<p id="detailOverview" class="text-lg mb-6"></p>
<div class="mb-8">
<h2 class="text-xl font-semibold mb-4">Où regarder</h2>
<div id="streamingOptions" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
<!-- Les options de streaming seront ajoutées ici -->
</div>
<p class="text-gray-400 mt-4 text-sm">* Les liens pointent vers des plateformes légales de streaming</p>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-black py-8 mt-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">CinéVerse</h3>
<p class="text-gray-400">Votre destination pour découvrir les meilleurs films et où les regarder légalement.</p>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Liens utiles</h4>
<ul class="space-y-2 text-gray-400">
<li><a href="#" class="hover:text-red-500">À propos</a></li>
<li><a href="#" class="hover:text-red-500">Contact</a></li>
<li><a href="#" class="hover:text-red-500">Politique de confidentialité</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Plateformes</h4>
<ul class="space-y-2 text-gray-400">
<li><a href="https://www.netflix.com" target="_blank" class="hover:text-red-500">Netflix</a></li>
<li><a href="https://www.primevideo.com" target="_blank" class="hover:text-red-500">Amazon Prime</a></li>
<li><a href="https://www.disneyplus.com" target="_blank" class="hover:text-red-500">Disney+</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Réseaux sociaux</h4>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-red-500 text-xl"><i class="fab fa-facebook"></i></a>
<a href="#" class="text-gray-400 hover:text-red-500 text-xl"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-red-500 text-xl"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-6 text-center text-gray-400">
<p>Ce site utilise l'API TMDB mais n'est pas affilié à TMDB.</p>
<p class="mt-2">Les films présentés sont protégés par des droits d'auteur.</p>
</div>
</div>
</footer>
<script>
// Configuration de base
const API_KEY = '3fd2be6f0c70a2a598f084ddfb75487c'; // Clé API TMDB publique pour démo
const BASE_URL = 'https://api.themoviedb.org/3';
const IMAGE_BASE_URL = 'https://image.tmdb.org/t/p/w500';
const FRENCH_LANGUAGE = 'fr-FR';
let currentPage = 1;
let currentGenre = '';
let currentSearch = '';
document.addEventListener('DOMContentLoaded', function() {
// Éléments du DOM
const moviesGrid = document.getElementById('moviesGrid');
const loadingElement = document.getElementById('loading');
const moviesContainer = document.getElementById('moviesContainer');
const loadMoreButton = document.getElementById('loadMore');
const searchInput = document.getElementById('searchInput');
const searchButton = document.getElementById('searchButton');
const sectionTitle = document.getElementById('sectionTitle');
const genreButtons = document.querySelectorAll('.genre-btn');
// Charger les films populaires au démarrage
fetchPopularMovies();
// Écouteurs d'événements
loadMoreButton.addEventListener('click', loadMoreMovies);
searchButton.addEventListener('click', searchMovies);
searchInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') searchMovies();
});
// Écouteurs pour les boutons de genre
genreButtons.forEach(button => {
button.addEventListener('click', function() {
currentGenre = this.dataset.id;
currentSearch = '';
currentPage = 1;
sectionTitle.textContent = this.textContent;
fetchMoviesByGenre(currentGenre);
});
});
// Fonction pour charger les films populaires
async function fetchPopularMovies() {
try {
const response = await fetch(`${BASE_URL}/movie/popular?api_key=${API_KEY}&language=${FRENCH_LANGUAGE}&page=${currentPage}`);
const data = await response.json();
displayMovies(data.results);
} catch (error) {
console.error('Erreur:', error);
loadingElement.innerHTML = '<p class="text-red-500">Erreur lors du chargement des films. Veuillez réessayer.</p>';
}
}
// Fonction pour charger les films par genre
async function fetchMoviesByGenre(genreId) {
try {
loadingElement.classList.remove('hidden');
moviesContainer.classList.add('hidden');
loadMoreButton.classList.add('hidden');
moviesGrid.innerHTML = '';
const response = await fetch(`${BASE_URL}/discover/movie?api_key=${API_KEY}&language=${FRENCH_LANGUAGE}&sort_by=popularity.desc&page=${currentPage}&with_genres=${genreId}`);
const data = await response.json();
displayMovies(data.results);
} catch (error) {
console.error('Erreur:', error);
loadingElement.innerHTML = '<p class="text-red-500">Erreur lors du chargement des films. Veuillez réessayer.</p>';
}
}
// Fonction pour rechercher des films
async function searchMovies() {
const query = searchInput.value.trim();
if (query === '') return;
currentSearch = query;
currentGenre = '';
currentPage = 1;
sectionTitle.textContent = `Résultats pour "${query}"`;
try {
loadingElement.classList.remove('hidden');
moviesContainer.classList.add('hidden');
loadMoreButton.classList.add('hidden');
moviesGrid.innerHTML = '';
const response = await fetch(`${BASE_URL}/search/movie?api_key=${API_KEY}&language=${FRENCH_LANGUAGE}&query=${encodeURIComponent(query)}&page=${currentPage}`);
const data = await response.json();
displayMovies(data.results);
} catch (error) {
console.error('Erreur:', error);
loadingElement.innerHTML = '<p class="text-red-500">Erreur lors de la recherche. Veuillez réessayer.</p>';
}
}
// Fonction pour charger plus de films
async function loadMoreMovies() {
currentPage++;
try {
loadMoreButton.disabled = true;
loadMoreButton.innerHTML = '<i class="fas fa-spinner loading-spinner mr-2"></i> Chargement...';
let response;
if (currentSearch) {
response = await fetch(`${BASE_URL}/search/movie?api_key=${API_KEY}&language=${FRENCH_LANGUAGE}&query=${encodeURIComponent(currentSearch)}&page=${currentPage}`);
} else if (currentGenre) {
response = await fetch(`${BASE_URL}/discover/movie?api_key=${API_KEY}&language=${FRENCH_LANGUAGE}&sort_by=popularity.desc&page=${currentPage}&with_genres=${currentGenre}`);
} else {
response = await fetch(`${BASE_URL}/movie/popular?api_key=${API_KEY}&language=${FRENCH_LANGUAGE}&page=${currentPage}`);
}
const data = await response.json();
appendMovies(data.results);
loadMoreButton.disabled = false;
loadMoreButton.innerHTML = 'Charger plus de films';
} catch (error) {
console.error('Erreur:', error);
loadMoreButton.innerHTML = 'Erreur - Réessayer';
}
}
// Fonction pour afficher les films
function displayMovies(movies) {
if (movies.length === 0) {
loadingElement.innerHTML = '<p class="text-red-500">Aucun film trouvé.</p>';
return;
}
moviesGrid.innerHTML = '';
appendMovies(movies);
loadingElement.classList.add('hidden');
moviesContainer.classList.remove('hidden');
if (movies.length >= 20) {
loadMoreButton.classList.remove('hidden');
} else {
loadMoreButton.classList.add('hidden');
}
}
// Fonction pour ajouter des films à la grille
function appendMovies(movies) {
movies.forEach(movie => {
const movieCard = document.createElement('div');
movieCard.className = 'movie-card bg-gray-800 rounded-lg overflow-hidden cursor-pointer';
// Vérifier si le film a une affiche
const posterPath = movie.poster_path ?
`${IMAGE_BASE_URL}${movie.poster_path}` :
'https://via.placeholder.com/500x750?text=Affiche+non+disponible';
// Formater la date de sortie
const releaseDate = movie.release_date ?
new Date(movie.release_date).getFullYear() :
'Date inconnue';
// Créer la carte de film
movieCard.innerHTML = `
<div onclick="showMovieDetails(${movie.id})">
<img src="${posterPath}" alt="${movie.title}" class="w-full h-64 sm:h-80 object-cover">
<div class="p-4">
<h3 class="font-bold truncate">${movie.title}</h3>
<div class="flex justify-between items-center mt-2 text-sm text-gray-400">
<span>${releaseDate}</span>
<span class="flex items-center">
<i class="fas fa-star text-yellow-400 mr-1"></i>
${movie.vote_average ? movie.vote_average.toFixed(1) : 'N/A'}
</span>
</div>
</div>
</div>
`;
moviesGrid.appendChild(movieCard);
});
}
});
// Fonction pour afficher les détails du film dans une modale
async function showMovieDetails(movieId) {
try {
// Afficher le loader
const detailsTemplate = document.getElementById('movieDetailsTemplate');
detailsTemplate.classList.remove('hidden');
detailsTemplate.innerHTML = `
<div class="flex justify-center items-center h-full">
<i class="fas fa-spinner loading-spinner text-4xl text-red-500"></i>
</div>
`;
// Récupérer les détails du film
const movieResponse = await fetch(`https://api.themoviedb.org/3/movie/${movieId}?api_key=3fd2be6f0c70a2a598f084ddfb75487c&language=fr-FR`);
const movieData = await movieResponse.json();
// Récupérer les options de streaming (simulé car l'API watch providers nécessite une clé premium)
// Dans une application réelle, vous utiliseriez: /movie/{movie_id}/watch/providers
const streamingOptions = [
{ provider_name: "Netflix", logo_path: "/9A1JSVmSxsyaBK4SUFsYVqbAYfW.jpg", link: `https://www.netflix.com/search?q=${encodeURIComponent(movieData.title)}` },
{ provider_name: "Amazon Prime", logo_path: "/5NyLm42TmCqCMOZFvH4fcoSNKEW.jpg", link: `https://www.primevideo.com/search/ref=atv_nb_sr?phrase=${encodeURIComponent(movieData.title)}` },
{ provider_name: "Disney+", logo_path: "/drg0fW8CQ5icOq2PZ3mzAfpXvDF.jpg", link: `https://www.disneyplus.com/fr-fr/search?q=${encodeURIComponent(movieData.title)}` },
{ provider_name: "Canal+", logo_path: "/sVBEF7q7LqjHAWSnKwDbzmr2EMY.jpg", link: `https://www.canalplus.com/recherche/?q=${encodeURIComponent(movieData.title)}` }
];
// Afficher les détails
detailsTemplate.innerHTML = `
<div class="container mx-auto px-4 py-12">
<button onclick="closeMovieDetails()" class="absolute top-4 right-4 text-3xl text-white hover:text-red-500">
<i class="fas fa-times"></i>
</button>
<div class="flex flex-col lg:flex-row gap-8">
<div class="lg:w-1/3">
<img id="detailPoster" src="${movieData.poster_path ? 'https://image.tmdb.org/t/p/w500' + movieData.poster_path : 'https://via.placeholder.com/500x750?text=Affiche+non+disponible'}" alt="${movieData.title}" class="w-full rounded-lg shadow-xl">
</div>
<div class="lg:w-2/3">
<h1 id="detailTitle" class="text-3xl font-bold mb-2">${movieData.title}</h1>
<div class="flex items-center space-x-4 mb-4">
<span id="detailYear" class="text-gray-400">
</html>