|
|
<!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 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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
</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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<div class="col-span-full flex justify-center py-12"> |
|
|
<div class="loading-spinner"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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 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> |
|
|
|
|
|
const TMDB_API_KEY = '3fd2be6f0c70a2a598f084ddfb75487c'; |
|
|
const BASE_URL = 'https://api.themoviedb.org/3'; |
|
|
const IMAGE_BASE_URL = 'https://image.tmdb.org/t/p/'; |
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
|
|
|
genreSelect.innerHTML = '<option value="">Tous genres</option>' + |
|
|
genres.map(genre => |
|
|
`<option value="${genre.id}">${genre.name}</option>` |
|
|
).join(''); |
|
|
|
|
|
|
|
|
displayGenres(); |
|
|
|
|
|
|
|
|
loadRandomFeaturedMovie(); |
|
|
|
|
|
|
|
|
loadTrendingMovies(); |
|
|
} catch (error) { |
|
|
console.error('Erreur lors du chargement des genres:', error); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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(''); |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
async function loadRandomFeaturedMovie() { |
|
|
try { |
|
|
|
|
|
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) { |
|
|
|
|
|
const randomMovie = data.results[Math.floor(Math.random() * data.results.length)]; |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
async function loadMovies(page = 1, sortBy = 'popularity.desc', genre = '') { |
|
|
if (isLoading) return; |
|
|
|
|
|
isLoading = true; |
|
|
|
|
|
try { |
|
|
|
|
|
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'; |
|
|
} |
|
|
|
|
|
|
|
|
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}`; |
|
|
} |
|
|
|
|
|
|
|
|
const response = await fetch(url); |
|
|
const data = await response.json(); |
|
|
|
|
|
|
|
|
currentPage = data.page; |
|
|
totalPages = data.total_pages > 500 ? 500 : data.total_pages; |
|
|
|
|
|
|
|
|
if (page === 1) { |
|
|
allMovies = data.results; |
|
|
} else { |
|
|
allMovies = [...allMovies, ...data.results]; |
|
|
} |
|
|
|
|
|
|
|
|
if (page === 1) { |
|
|
displayMovies(data.results); |
|
|
} else { |
|
|
|
|
|
const newMovies = createMovieCards(data.results); |
|
|
filmGrid.innerHTML += newMovies; |
|
|
|
|
|
|
|
|
infiniteScrollLoader.style.display = 'none'; |
|
|
} |
|
|
|
|
|
|
|
|
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; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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(''); |
|
|
} |
|
|
|
|
|
|
|
|
function displayMovies(movies) { |
|
|
filmGrid.innerHTML = createMovieCards(movies); |
|
|
} |
|
|
|
|
|
|
|
|
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)); |
|
|
} |
|
|
} 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>'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function handleInfiniteScroll() { |
|
|
const { scrollTop, scrollHeight, clientHeight } = document.documentElement; |
|
|
|
|
|
|
|
|
if (scrollTop + clientHeight >= scrollHeight - 500 && !isLoading && currentPage < totalPages) { |
|
|
currentPage++; |
|
|
loadMovies(currentPage, currentSort, currentGenre); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
highlightCurrentMovie(); |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
|
|
|
|
|
|
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() { |
|
|
|
|
|
document.querySelectorAll('.film-card').forEach(card => { |
|
|
card.classList.remove('current-playing'); |
|
|
}); |
|
|
|
|
|
|
|
|
const currentCard = document.querySelector(`.film-card[data-movie-index="${currentMovieIndex}"]`); |
|
|
if (currentCard) { |
|
|
currentCard.classList.add('current-playing'); |
|
|
|
|
|
|
|
|
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(); |
|
|
|
|
|
|
|
|
if (!isAutoplayActive) { |
|
|
startAutoplay(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
loadGenres(); |
|
|
loadMovies(); |
|
|
|
|
|
|
|
|
window.addEventListener('scroll', handleInfiniteScroll); |
|
|
|
|
|
|
|
|
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> |
