Hugging Face's logo

Spaces:
docto41
/
cin-auto
Running

App Files Community
cin-auto / index.html
docto41's picture
docto41
Add 2 files
da03f70 verified
Raw
History Blame Contribute Delete
34.8 kB
<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>CinéAuto Pro - Tous les films en autopilotage</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>
 .hero-gradient {
 background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
 }
 .film-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
 }
 .player-container {
 aspect-ratio: 16/9;
 }
 .blur-bg {
 background: rgba(0, 0, 0, 0.7);
 backdrop-filter: blur(10px);
 }
 .loading-spinner {
 border: 4px solid rgba(255, 255, 255, 0.3);
 border-radius: 50%;
 border-top: 4px solid #fff;
 width: 30px;
 height: 30px;
 animation: spin 1s linear infinite;
 }
 @keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
 }
 .fade-in {
 animation: fadeIn 0.5s ease-in;
 }
 @keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
 }
 .progress-bar {
 height: 4px;
 background-color: #4f46e5;
 width: 0%;
 transition: width 0.3s ease;
 }
 .tooltip {
 position: relative;
 display: inline-block;
 }
 .tooltip .tooltip-text {
 visibility: hidden;
 width: 200px;
 background-color: #1e293b;
 color: #fff;
 text-align: center;
 border-radius: 6px;
 padding: 5px;
 position: absolute;
 z-index: 1;
 bottom: 125%;
 left: 50%;
 transform: translateX(-50%);
 opacity: 0;
 transition: opacity 0.3s;
 }
 .tooltip:hover .tooltip-text {
 visibility: visible;
 opacity: 1;
 }
 .autoplay-settings {
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.5s ease-out;
 }
 .autoplay-settings.open {
 max-height: 500px;
 }
 .infinite-scroll-loader {
 display: none;
 padding: 20px 0;
 text-align: center;
 }
 .autoplay-controls {
 position: fixed;
 bottom: 20px;
 left: 50%;
 transform: translateX(-50%);
 background: rgba(30, 41, 59, 0.9);
 padding: 10px 20px;
 border-radius: 50px;
 z-index: 100;
 display: flex;
 gap: 15px;
 align-items: center;
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
 }
 .autoplay-indicator {
 position: absolute;
 top: -10px;
 right: -10px;
 background: #ef4444;
 color: white;
 border-radius: 50%;
 width: 20px;
 height: 20px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 12px;
 animation: pulse 1.5s infinite;
 }
 @keyframes pulse {
 0% { transform: scale(1); }
 50% { transform: scale(1.1); }
 100% { transform: scale(1); }
 }
 .current-playing {
 position: relative;
 border: 2px solid #ef4444;
 box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
 }
 </style>
</head>
<body class="font-sans bg-gray-900 text-white">
 <!-- Header/Navigation -->
 <header class="blur-bg shadow-sm sticky top-0 z-50">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="flex justify-between items-center h-16">
 <div class="flex items-center">
 <div class="flex-shrink-0 flex items-center">
 <i class="fas fa-film text-2xl text-red-500 mr-2"></i>
 <span class="text-xl font-bold">CinéAuto Pro</span>
 </div>
 </div>
 <div class="hidden md:block">
 <div class="ml-10 flex items-center space-x-4">
 <a href="#films" class="text-gray-300 hover:text-white px-3 py-2 font-medium">Tous les films</a>
 <a href="#genres" class="text-gray-300 hover:text-white px-3 py-2 font-medium">Genres</a>
 <a href="#tendances" class="text-gray-300 hover:text-white px-3 py-2 font-medium">Tendances</a>
 </div>
 </div>
 <div class="flex items-center space-x-4">
 <div class="relative">
 <input type="text" placeholder="Rechercher..." class="bg-gray-800 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 w-48 md:w-64">
 <button class="absolute right-3 top-2 text-gray-400 hover:text-white">
 <i class="fas fa-search"></i>
 </button>
 </div>
 </div>
 </div>
 </div>
 </header>
<!-- Hero Section with Featured Movie -->
 <section class="hero-gradient">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
 <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
 <div>
 <h1 class="text-4xl md:text-5xl font-bold mb-6">Découvrez notre collection complète</h1>
 <p class="text-xl text-gray-300 max-w-2xl mb-8">
 Plus de 10 000 films disponibles instantanément. Parcourez, découvrez et regardez vos films préférés en mode autopilotage.
 </p>
 <div class="flex flex-wrap gap-4">
 <button id="random-movie-btn" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 flex items-center">
 <i class="fas fa-play mr-2"></i> Film aléatoire
 </button>
 <button id="toggle-autoplay-btn" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 flex items-center">
 <i class="fas fa-robot mr-2"></i> Activer l'autopilotage
 </button>
 </div>
 </div>
 <div class="player-container bg-gray-800 rounded-xl overflow-hidden shadow-2xl relative">
 <div class="w-full h-full flex items-center justify-center">
 <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent z-10"></div>
 <img id="featured-movie-poster" src="https://image.tmdb.org/t/p/original/8Y43POKjjKDGI9MH89NW0NAzzp8.jpg" alt="Film vedette" class="absolute w-full h-full object-cover">
 <div class="absolute bottom-0 left-0 right-0 p-6 z-20">
 <h3 id="featured-movie-title" class="text-xl font-bold mb-1">Chargement...</h3>
 <p id="featured-movie-info" class="text-gray-300 text-sm">Découvrez notre sélection</p>
 <div class="progress-bar mt-2"></div>
 </div>
 <button class="bg-red-600 hover:bg-red-700 text-white rounded-full w-16 h-16 flex items-center justify-center z-20">
 <i class="fas fa-play text-xl"></i>
 </button>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Main Films Section -->
 <section id="films" class="py-12 bg-gray-900">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
 <div>
 <h2 class="text-3xl font-bold">Tous les films</h2>
 <p class="text-gray-400">Parcourez notre collection complète en autopilotage</p>
 </div>
 <div class="mt-4 md:mt-0 flex space-x-4">
 <div class="relative">
 <select id="sort-by" class="bg-gray-800 text-white px-4 py-2 rounded-lg appearance-none pr-8 focus:outline-none">
 <option value="popularity.desc">Populaires</option>
 <option value="vote_average.desc">Mieux notés</option>
 <option value="release_date.desc">Récents</option>
 <option value="revenue.desc">Box-office</option>
 </select>
 <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
 <i class="fas fa-chevron-down text-gray-400"></i>
 </div>
 </div>
 <div class="relative">
 <select id="genre-filter" class="bg-gray-800 text-white px-4 py-2 rounded-lg appearance-none pr-8 focus:outline-none">
 <option value="">Tous genres</option>
 <!-- Genres will be loaded by JS -->
 </select>
 <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
 <i class="fas fa-chevron-down text-gray-400"></i>
 </div>
 </div>
 </div>
 </div>
<!-- Films Grid -->
 <div id="film-grid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6">
 <!-- Films will be loaded here by JavaScript -->
 <div class="col-span-full flex justify-center py-12">
 <div class="loading-spinner"></div>
 </div>
 </div>
<!-- Infinite Scroll Loader -->
 <div id="infinite-scroll-loader" class="infinite-scroll-loader">
 <div class="loading-spinner"></div>
 <p class="mt-2 text-gray-400">Chargement des films...</p>
 </div>
 </div>
 </section>
<!-- Autoplay Controls -->
 <div id="autoplay-controls" class="autoplay-controls hidden">
 <div class="autoplay-indicator">
 <i class="fas fa-play"></i>
 </div>
 <button id="prev-movie-btn" class="text-white hover:text-red-400">
 <i class="fas fa-step-backward text-xl"></i>
 </button>
 <button id="play-pause-btn" class="text-white hover:text-red-400">
 <i class="fas fa-pause text-2xl"></i>
 </button>
 <button id="next-movie-btn" class="text-white hover:text-red-400">
 <i class="fas fa-step-forward text-xl"></i>
 </button>
 <div class="text-white text-sm">
 <span id="current-movie-title">Aucun film en cours</span>
 </div>
 <div class="flex items-center ml-4">
 <span class="text-gray-400 text-sm mr-2">Vitesse:</span>
 <select id="autoplay-speed" class="bg-gray-700 text-white text-sm px-2 py-1 rounded">
 <option value="5000">Lente</option>
 <option value="3000" selected>Normale</option>
 <option value="1500">Rapide</option>
 </select>
 </div>
 </div>
<!-- Footer -->
 <footer class="bg-gray-950 text-gray-400 py-12">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
 <div>
 <div class="flex items-center mb-4">
 <i class="fas fa-film text-2xl text-red-500 mr-2"></i>
 <span class="text-xl font-bold text-white">CinéAuto Pro</span>
 </div>
 <p class="mb-4">
 La plus grande collection de films en ligne avec autopilotage.
 </p>
 <div class="flex space-x-4">
 <a href="#" class="text-gray-400 hover:text-white">
 <i class="fab fa-facebook-f"></i>
 </a>
 <a href="#" class="text-gray-400 hover:text-white">
 <i class="fab fa-twitter"></i>
 </a>
 <a href="#" class="text-gray-400 hover:text-white">
 <i class="fab fa-instagram"></i>
 </a>
 </div>
 </div>
<div>
 <h4 class="text-lg font-semibold text-white mb-4">Navigation</h4>
 <ul class="space-y-2">
 <li><a href="#" class="hover:text-white">Accueil</a></li>
 <li><a href="#films" class="hover:text-white">Tous les films</a></li>
 <li><a href="#genres" class="hover:text-white">Genres</a></li>
 <li><a href="#tendances" class="hover:text-white">Tendances</a></li>
 </ul>
 </div>
<div>
 <h4 class="text-lg font-semibold text-white mb-4">Legal</h4>
 <ul class="space-y-2">
 <li><a href="#" class="hover:text-white">Conditions générales</a></li>
 <li><a href="#" class="hover:text-white">Confidentialité</a></li>
 <li><a href="#" class="hover:text-white">Cookies</a></li>
 </ul>
 </div>
<div>
 <h4 class="text-lg font-semibold text-white mb-4">À propos</h4>
 <p>
 Ce site utilise l'API TMDb mais n'est pas approuvé ou certifié par TMDb.
 </p>
 <button class="mt-4 text-blue-400 hover:text-blue-300 flex items-center">
 <i class="fas fa-envelope mr-2"></i> Nous contacter
 </button>
 </div>
 </div>
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-sm">
 <p>© 2023 CinéAuto Pro. Données fournies par TMDb.</p>
 </div>
 </div>
 </footer>
<script>
 // Configuration
 const TMDB_API_KEY = '3fd2be6f0c70a2a598f084ddfb75487c'; // Clé API publique TMDb
 const BASE_URL = 'https://api.themoviedb.org/3';
 const IMAGE_BASE_URL = 'https://image.tmdb.org/t/p/';
// Variables d'état
 let currentPage = 1;
 let totalPages = 1;
 let currentSort = 'popularity.desc';
 let currentGenre = '';
 let genres = [];
 let isLoading = false;
 let trendingTimeWindow = 'day';
 let allMovies = [];
 let currentMovieIndex = 0;
 let autoplayInterval;
 let isAutoplayActive = false;
 let autoplaySpeed = 3000; // 3 secondes par défaut
// Éléments DOM
 const filmGrid = document.getElementById('film-grid');
 const sortSelect = document.getElementById('sort-by');
 const genreSelect = document.getElementById('genre-filter');
 const featuredMoviePoster = document.getElementById('featured-movie-poster');
 const featuredMovieTitle = document.getElementById('featured-movie-title');
 const featuredMovieInfo = document.getElementById('featured-movie-info');
 const infiniteScrollLoader = document.getElementById('infinite-scroll-loader');
 const genresGrid = document.getElementById('genres-grid');
 const trendingMovies = document.getElementById('trending-movies');
 const trendingDayBtn = document.getElementById('trending-day');
 const trendingWeekBtn = document.getElementById('trending-week');
 const autoplayControls = document.getElementById('autoplay-controls');
 const toggleAutoplayBtn = document.getElementById('toggle-autoplay-btn');
 const playPauseBtn = document.getElementById('play-pause-btn');
 const prevMovieBtn = document.getElementById('prev-movie-btn');
 const nextMovieBtn = document.getElementById('next-movie-btn');
 const currentMovieTitle = document.getElementById('current-movie-title');
 const autoplaySpeedSelect = document.getElementById('autoplay-speed');
 const randomMovieBtn = document.getElementById('random-movie-btn');
// Charger les genres
 async function loadGenres() {
 try {
 const response = await fetch(`${BASE_URL}/genre/movie/list?api_key=${TMDB_API_KEY}&language=fr-FR`);
 const data = await response.json();
 genres = data.genres;
// Remplir le select des genres
 genreSelect.innerHTML = '<option value="">Tous genres</option>' +
genres.map(genre =>
`<option value="${genre.id}">${genre.name}</option>`
 ).join('');
// Afficher les genres dans la section dédiée
 displayGenres();
// Charger un film vedette aléatoire
 loadRandomFeaturedMovie();
// Charger les films tendance
 loadTrendingMovies();
 } catch (error) {
 console.error('Erreur lors du chargement des genres:', error);
 }
 }
// Afficher les genres dans la section dédiée
 function displayGenres() {
 genresGrid.innerHTML = genres.map(genre => `
 <a href="#films" class="genre-card bg-gray-700 hover:bg-gray-600 rounded-lg p-6 text-center transition duration-300 cursor-pointer" data-genre-id="${genre.id}">
 <i class="fas fa-film text-3xl mb-2 text-red-500"></i>
 <h3 class="font-bold">${genre.name}</h3>
 </a>
 `).join('');
// Ajouter des écouteurs d'événements aux cartes de genre
 document.querySelectorAll('.genre-card').forEach(card => {
 card.addEventListener('click', function() {
 currentGenre = this.getAttribute('data-genre-id');
 genreSelect.value = currentGenre;
 currentPage = 1;
 filmGrid.innerHTML = '<div class="col-span-full flex justify-center py-12"><div class="loading-spinner"></div></div>';
 loadMovies(currentPage, currentSort, currentGenre);
 });
 });
 }
// Charger un film vedette aléatoire
 async function loadRandomFeaturedMovie() {
 try {
 // Charger les films populaires
 const response = await fetch(`${BASE_URL}/movie/popular?api_key=${TMDB_API_KEY}&language=fr-FR&page=${Math.floor(Math.random() * 10) + 1}`);
 const data = await response.json();
if (data.results && data.results.length > 0) {
 // Choisir un film aléatoire
 const randomMovie = data.results[Math.floor(Math.random() * data.results.length)];
// Mettre à jour l'interface
 featuredMoviePoster.src = IMAGE_BASE_URL + 'original' + randomMovie.poster_path;
 featuredMovieTitle.textContent = randomMovie.title;
const year = randomMovie.release_date ? new Date(randomMovie.release_date).getFullYear() : '';
 const rating = randomMovie.vote_average ? randomMovie.vote_average.toFixed(1) : '';
 featuredMovieInfo.textContent = `${year} • Note: ${rating}/10`;
 }
 } catch (error) {
 console.error('Erreur lors du chargement du film vedette:', error);
 }
 }
// Charger les films
 async function loadMovies(page = 1, sortBy = 'popularity.desc', genre = '') {
 if (isLoading) return;
isLoading = true;
try {
 // Afficher le loader uniquement pour la première page
 if (page === 1) {
 filmGrid.innerHTML = '<div class="col-span-full flex justify-center py-12"><div class="loading-spinner"></div></div>';
 } else {
 infiniteScrollLoader.style.display = 'block';
 }
// Construire l'URL
 let url = `${BASE_URL}/discover/movie?api_key=${TMDB_API_KEY}&language=fr-FR&sort_by=${sortBy}&page=${page}`;
if (genre) {
 url += `&with_genres=${genre}`;
 }
// Faire la requête
 const response = await fetch(url);
 const data = await response.json();
// Mettre à jour les informations de pagination
 currentPage = data.page;
 totalPages = data.total_pages > 500 ? 500 : data.total_pages; // L'API limite à 500 pages
// Stocker tous les films pour l'autopilotage
 if (page === 1) {
 allMovies = data.results;
 } else {
 allMovies = [...allMovies, ...data.results];
 }
// Afficher les films
 if (page === 1) {
 displayMovies(data.results);
 } else {
 // Ajouter les nouveaux films à la fin
 const newMovies = createMovieCards(data.results);
 filmGrid.innerHTML += newMovies;
// Masquer le loader
 infiniteScrollLoader.style.display = 'none';
 }
// Si l'autopilotage est actif, redémarrer avec la nouvelle liste
 if (isAutoplayActive) {
 stopAutoplay();
 startAutoplay();
 }
 } catch (error) {
 console.error('Erreur lors du chargement des films:', error);
 filmGrid.innerHTML = '<div class="col-span-full text-center py-12 text-red-400">Erreur lors du chargement des films. Veuillez réessayer.</div>';
 } finally {
 isLoading = false;
 }
 }
// Créer des cartes de films
 function createMovieCards(movies) {
 if (!movies || movies.length === 0) {
 return '<div class="col-span-full text-center py-12">Aucun film trouvé avec ces critères.</div>';
 }
return movies.map((movie, index) => `
 <div class="film-card bg-gray-800 rounded-lg overflow-hidden shadow-md transition duration-300 fade-in ${index === currentMovieIndex && isAutoplayActive ? 'current-playing' : ''}" data-movie-id="${movie.id}" data-movie-index="${index}">
 <div class="relative pb-[150%]">
 ${movie.poster_path ?
`<img src="${IMAGE_BASE_URL}w500${movie.poster_path}" alt="${movie.title}" class="absolute h-full w-full object-cover">` :
 `<div class="absolute h-full w-full bg-gray-700 flex items-center justify-center">
 <i class="fas fa-film text-4xl text-gray-500"></i>
 </div>`
 }
 <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
 ${movie.release_date ?
`<span class="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">${new Date(movie.release_date).getFullYear()}</span>` :
''
 }
 </div>
 <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 bg-black bg-opacity-60 transition duration-300">
 <button class="bg-red-600 hover:bg-red-700 text-white rounded-full w-12 h-12 flex items-center justify-center">
 <i class="fas fa-play"></i>
 </button>
 </div>
 </div>
 <div class="p-4">
 <h3 class="font-bold text-white mb-1 truncate">${movie.title}</h3>
 <div class="flex items-center text-gray-400 text-sm">
 ${movie.release_date ?
`<span>${new Date(movie.release_date).getFullYear()}</span>` :
'<span>Date inconnue</span>'
 }
 ${movie.vote_average ?
`<span class="mx-2">•</span>
 <span class="flex items-center">
 <i class="fas fa-star text-yellow-400 mr-1"></i>
 ${movie.vote_average.toFixed(1)}
 </span>` :
''
 }
 </div>
 </div>
 </div>
 `).join('');
 }
// Afficher les films dans la grille
 function displayMovies(movies) {
 filmGrid.innerHTML = createMovieCards(movies);
 }
// Charger les films tendance
 async function loadTrendingMovies() {
 try {
 trendingMovies.innerHTML = '<div class="col-span-full flex justify-center py-12"><div class="loading-spinner"></div></div>';
const response = await fetch(`${BASE_URL}/trending/movie/${trendingTimeWindow}?api_key=${TMDB_API_KEY}&language=fr-FR`);
 const data = await response.json();
if (data.results && data.results.length > 0) {
 trendingMovies.innerHTML = createMovieCards(data.results.slice(0, 10)); // Afficher les 10 premiers
 }
 } catch (error) {
 console.error('Erreur lors du chargement des films tendance:', error);
 trendingMovies.innerHTML = '<div class="col-span-full text-center py-12 text-red-400">Erreur lors du chargement des tendances.</div>';
 }
 }
// Gestionnaire de défilement infini
 function handleInfiniteScroll() {
 const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
// Vérifier si l'utilisateur est proche du bas de la page
 if (scrollTop + clientHeight >= scrollHeight - 500 && !isLoading && currentPage < totalPages) {
 currentPage++;
 loadMovies(currentPage, currentSort, currentGenre);
 }
 }
// Fonctions pour l'autopilotage
 function startAutoplay() {
 if (allMovies.length === 0) return;
isAutoplayActive = true;
 toggleAutoplayBtn.innerHTML = '<i class="fas fa-stop mr-2"></i> Arrêter l\'autopilotage';
 toggleAutoplayBtn.classList.remove('bg-red-600');
 toggleAutoplayBtn.classList.add('bg-red-800');
 autoplayControls.classList.remove('hidden');
// Mettre en surbrillance le film en cours
 highlightCurrentMovie();
// Démarrer l'intervalle
 autoplayInterval = setInterval(() => {
 nextMovie();
 }, autoplaySpeed);
 }
function stopAutoplay() {
 isAutoplayActive = false;
 toggleAutoplayBtn.innerHTML = '<i class="fas fa-robot mr-2"></i> Activer l\'autopilotage';
 toggleAutoplayBtn.classList.add('bg-red-600');
 toggleAutoplayBtn.classList.remove('bg-red-800');
if (autoplayInterval) {
 clearInterval(autoplayInterval);
 }
// Retirer la surbrillance du film en cours
 document.querySelectorAll('.film-card').forEach(card => {
 card.classList.remove('current-playing');
 });
 }
function toggleAutoplay() {
 if (isAutoplayActive) {
 stopAutoplay();
 autoplayControls.classList.add('hidden');
 } else {
 startAutoplay();
 }
 }
function nextMovie() {
 if (allMovies.length === 0) return;
currentMovieIndex = (currentMovieIndex + 1) % allMovies.length;
 highlightCurrentMovie();
 scrollToCurrentMovie();
 }
function prevMovie() {
 if (allMovies.length === 0) return;
currentMovieIndex = (currentMovieIndex - 1 + allMovies.length) % allMovies.length;
 highlightCurrentMovie();
 scrollToCurrentMovie();
 }
function highlightCurrentMovie() {
 // Retirer la surbrillance de tous les films
 document.querySelectorAll('.film-card').forEach(card => {
 card.classList.remove('current-playing');
 });
// Ajouter la surbrillance au film actuel
 const currentCard = document.querySelector(`.film-card[data-movie-index="${currentMovieIndex}"]`);
 if (currentCard) {
 currentCard.classList.add('current-playing');
// Mettre à jour le titre dans les contrôles
 const movie = allMovies[currentMovieIndex];
 currentMovieTitle.textContent = movie.title;
 }
 }
function scrollToCurrentMovie() {
 const currentCard = document.querySelector(`.film-card[data-movie-index="${currentMovieIndex}"]`);
 if (currentCard) {
 currentCard.scrollIntoView({
 behavior: 'smooth',
 block: 'center'
 });
 }
 }
function playRandomMovie() {
 if (allMovies.length === 0) return;
currentMovieIndex = Math.floor(Math.random() * allMovies.length);
 highlightCurrentMovie();
 scrollToCurrentMovie();
// Si l'autopilotage n'est pas actif, le démarrer
 if (!isAutoplayActive) {
 startAutoplay();
 }
 }
// Gestionnaires d'événements
 sortSelect.addEventListener('change', () => {
 currentSort = sortSelect.value;
 currentPage = 1;
 loadMovies(currentPage, currentSort, currentGenre);
 });
genreSelect.addEventListener('change', () => {
 currentGenre = genreSelect.value;
 currentPage = 1;
 loadMovies(currentPage, currentSort, currentGenre);
 });
trendingDayBtn.addEventListener('click', () => {
 trendingTimeWindow = 'day';
 trendingDayBtn.classList.add('bg-red-600');
 trendingDayBtn.classList.remove('bg-gray-800');
 trendingWeekBtn.classList.add('bg-gray-800');
 trendingWeekBtn.classList.remove('bg-red-600');
 loadTrendingMovies();
 });
trendingWeekBtn.addEventListener('click', () => {
 trendingTimeWindow = 'week';
 trendingWeekBtn.classList.add('bg-red-600');
 trendingWeekBtn.classList.remove('bg-gray-800');
 trendingDayBtn.classList.add('bg-gray-800');
 trendingDayBtn.classList.remove('bg-red-600');
 loadTrendingMovies();
 });
toggleAutoplayBtn.addEventListener('click', toggleAutoplay);
 playPauseBtn.addEventListener('click', toggleAutoplay);
 prevMovieBtn.addEventListener('click', prevMovie);
 nextMovieBtn.addEventListener('click', nextMovie);
 randomMovieBtn.addEventListener('click', playRandomMovie);
autoplaySpeedSelect.addEventListener('change', () => {
 autoplaySpeed = parseInt(autoplaySpeedSelect.value);
if (isAutoplayActive) {
 stopAutoplay();
 startAutoplay();
 }
 });
// Initialisation
 document.addEventListener('DOMContentLoaded', () => {
 loadGenres();
 loadMovies();
// Configurer le défilement infini
 window.addEventListener('scroll', handleInfiniteScroll);
// Smooth scrolling for anchor links
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 anchor.addEventListener('click', function (e) {
 e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
 behavior: 'smooth'
 });
 });
 });
 });
 </script>
<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/cin-auto" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>