|
<!DOCTYPE html> |
|
<html lang="fr"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>MegaStream - Films et Séries en illimité</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> |
|
:root { |
|
--primary: #e50914; |
|
--dark: #141414; |
|
--light: #f5f5f1; |
|
} |
|
|
|
body { |
|
background-color: var(--dark); |
|
color: var(--light); |
|
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; |
|
} |
|
|
|
.hero-gradient { |
|
background: linear-gradient(to top, rgba(20, 20, 20, 1) 0%, rgba(20, 20, 20, 0.6) 60%, rgba(20, 20, 20, 0.3) 100%); |
|
} |
|
|
|
.scroll-hide::-webkit-scrollbar { |
|
display: none; |
|
} |
|
|
|
.film-card:hover .play-icon { |
|
opacity: 1; |
|
transform: scale(1.1); |
|
} |
|
|
|
.loading-spinner { |
|
animation: spin 1s linear infinite; |
|
} |
|
|
|
@keyframes spin { |
|
0% { transform: rotate(0deg); } |
|
100% { transform: rotate(360deg); } |
|
} |
|
</style> |
|
</head> |
|
<body class="min-h-screen"> |
|
|
|
<nav class="fixed w-full z-50 bg-gradient-to-b from-black to-transparent px-4 py-3"> |
|
<div class="max-w-7xl mx-auto flex items-center justify-between"> |
|
<div class="flex items-center"> |
|
<span class="text-red-600 font-bold text-2xl mr-10">MEGASTREAM</span> |
|
<div class="hidden md:flex space-x-6"> |
|
<a href="#" class="text-white hover:text-gray-300">Accueil</a> |
|
<a href="#" class="text-white hover:text-gray-300">Séries</a> |
|
<a href="#" class="text-white hover:text-gray-300">Films</a> |
|
<a href="#" class="text-white hover:text-gray-300">Nouveautés</a> |
|
<a href="#" class="text-white hover:text-gray-300">Ma liste</a> |
|
</div> |
|
</div> |
|
<div class="flex items-center space-x-4"> |
|
<div class="relative"> |
|
<input type="text" placeholder="Rechercher..." class="bg-black/70 text-white px-4 py-1 rounded border border-gray-600 focus:outline-none focus:border-white w-0 opacity-0 transition-all duration-300" id="search-input"> |
|
<button class="text-white" id="search-btn"> |
|
<i class="fas fa-search"></i> |
|
</button> |
|
</div> |
|
<div class="hidden md:block text-white"> |
|
<i class="fas fa-bell"></i> |
|
</div> |
|
<div class="w-8 h-8 rounded bg-red-600 flex items-center justify-center text-white font-bold"> |
|
<i class="fas fa-user"></i> |
|
</div> |
|
</div> |
|
</div> |
|
</nav> |
|
|
|
|
|
<section class="relative h-screen"> |
|
<div class="absolute inset-0 bg-black/50 z-10 hero-gradient"></div> |
|
<div id="hero-background" class="w-full h-full bg-cover bg-center"></div> |
|
|
|
<div class="absolute bottom-0 left-0 z-20 p-16 w-full md:w-2/3" id="hero-content"> |
|
<h1 class="text-4xl md:text-6xl font-bold mb-4" id="hero-title">Chargement...</h1> |
|
<div class="flex space-x-4 mb-6" id="hero-details"> |
|
<span class="text-green-500 font-semibold">97% Match</span> |
|
<span>2023</span> |
|
<span class="border border-gray-400 px-1">HD</span> |
|
</div> |
|
<p class="text-lg mb-6" id="hero-description">Chargement de la description...</p> |
|
<div class="flex space-x-4"> |
|
<button class="bg-white text-black px-6 py-2 rounded flex items-center hover:bg-opacity-80" id="play-btn"> |
|
<i class="fas fa-play mr-2"></i> Lecture |
|
</button> |
|
<button class="bg-gray-600/70 text-white px-6 py-2 rounded flex items-center hover:bg-opacity-50" id="info-btn"> |
|
<i class="fas fa-info-circle mr-2"></i> Plus d'infos |
|
</button> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<main class="relative z-30 -mt-32"> |
|
<div class="space-y-12 pb-20"> |
|
|
|
<section class="px-4"> |
|
<h2 class="text-xl font-bold mb-4">Tendances actuelles</h2> |
|
<div class="relative"> |
|
<div class="flex overflow-x-auto scroll-hide space-x-4 pb-4" id="trending"> |
|
<div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div> |
|
<div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div> |
|
<div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div> |
|
<div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div> |
|
<div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="px-4"> |
|
<h2 class="text-xl font-bold mb-4">Populaire sur MegaStream</h2> |
|
<div class="relative"> |
|
<div class="flex overflow-x-auto scroll-hide space-x-4 pb-4" id="popular"> |
|
<div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div> |
|
<div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div> |
|
<div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div> |
|
<div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div> |
|
<div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="px-4"> |
|
<h2 class="text-xl font-bold mb-4">Continuer à regarder</h2> |
|
<div class="relative"> |
|
<div class="flex overflow-x-auto scroll-hide space-x-4 pb-4" id="continue"> |
|
<div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div> |
|
<div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div> |
|
<div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div> |
|
<div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div> |
|
<div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="px-4"> |
|
<h2 class="text-xl font-bold mb-4">Nouveautés</h2> |
|
<div class="relative"> |
|
<div class="flex overflow-x-auto scroll-hide space-x-4 pb-4" id="new-releases"> |
|
<div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div> |
|
<div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div> |
|
<div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div> |
|
<div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div> |
|
<div class="w-48 h-72 bg-gray-800 rounded animate-pulse"></div> |
|
</div> |
|
</div> |
|
</section> |
|
</div> |
|
</main> |
|
|
|
|
|
<footer class="bg-black text-gray-400 py-12 px-4"> |
|
<div class="max-w-7xl mx-auto"> |
|
<div class="flex flex-col md:flex-row justify-between"> |
|
<div class="mb-8"> |
|
<h3 class="text-white text-2xl font-bold mb-4">MEGASTREAM</h3> |
|
<div class="flex space-x-4 text-2xl"> |
|
<a href="#"><i class="fab fa-facebook"></i></a> |
|
<a href="#"><i class="fab fa-instagram"></i></a> |
|
<a href="#"><i class="fab fa-twitter"></i></a> |
|
<a href="#"><i class="fab fa-youtube"></i></a> |
|
</div> |
|
</div> |
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
|
<div> |
|
<h4 class="text-white mb-4">Navigation</h4> |
|
<ul class="space-y-2"> |
|
<li><a href="#" class="hover:text-white">Accueil</a></li> |
|
<li><a href="#" class="hover:text-white">Séries</a></li> |
|
<li><a href="#" class="hover:text-white">Films</a></li> |
|
<li><a href="#" class="hover:text-white">Nouveautés</a></li> |
|
</ul> |
|
</div> |
|
<div> |
|
<h4 class="text-white mb-4">Compte</h4> |
|
<ul class="space-y-2"> |
|
<li><a href="#" class="hover:text-white">Mon compte</a></li> |
|
<li><a href="#" class="hover:text-white">Abonnements</a></li> |
|
<li><a href="#" class="hover:text-white">Historique</a></li> |
|
<li><a href="#" class="hover:text-white">Liste de souhaits</a></li> |
|
</ul> |
|
</div> |
|
<div> |
|
<h4 class="text-white mb-4">Informations</h4> |
|
<ul class="space-y-2"> |
|
<li><a href="#" class="hover:text-white">À propos</a></li> |
|
<li><a href="#" class="hover:text-white">Contact</a></li> |
|
<li><a href="#" class="hover:text-white">Presse</a></li> |
|
<li><a href="#" class="hover:text-white">Carrières</a></li> |
|
</ul> |
|
</div> |
|
<div> |
|
<h4 class="text-white mb-4">Légal</h4> |
|
<ul class="space-y-2"> |
|
<li><a href="#" class="hover:text-white">Conditions</a></li> |
|
<li><a href="#" class="hover:text-white">Confidentialité</a></li> |
|
<li><a href="#" class="hover:text-white">Cookies</a></li> |
|
<li><a href="#" class="hover:text-white">RGPD</a></li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="border-t border-gray-800 mt-12 pt-8 text-center"> |
|
<p>© 2023 MegaStream. Tous droits réservés.</p> |
|
</div> |
|
</div> |
|
</footer> |
|
|
|
<script> |
|
|
|
const API_KEY = '3fd2be6f0c70a2a598f084ddfb75487c'; |
|
const BASE_URL = 'https://api.themoviedb.org/3'; |
|
const IMG_URL = 'https://image.tmdb.org/t/p/original'; |
|
|
|
|
|
async function fetchMovies(endpoint, params = {}) { |
|
const url = new URL(`${BASE_URL}${endpoint}`); |
|
url.searchParams.append('api_key', API_KEY); |
|
url.searchParams.append('language', 'fr-FR'); |
|
|
|
|
|
Object.keys(params).forEach(key => { |
|
url.searchParams.append(key, params[key]); |
|
}); |
|
|
|
try { |
|
const response = await fetch(url); |
|
if (!response.ok) throw new Error('Erreur réseau'); |
|
return await response.json(); |
|
} catch (error) { |
|
console.error('Erreur:', error); |
|
return null; |
|
} |
|
} |
|
|
|
|
|
function createMovieCard(movie, category) { |
|
const card = document.createElement('div'); |
|
card.className = 'flex-none w-48 md:w-56 relative group film-card'; |
|
card.dataset.id = movie.id; |
|
card.dataset.category = category; |
|
|
|
|
|
const isTvShow = category === 'tv'; |
|
const title = isTvShow ? movie.name : movie.title; |
|
const year = isTvShow ? |
|
(movie.first_air_date ? new Date(movie.first_air_date).getFullYear() : 'N/A') : |
|
(movie.release_date ? new Date(movie.release_date).getFullYear() : 'N/A'); |
|
|
|
card.innerHTML = ` |
|
<div class="relative rounded overflow-hidden"> |
|
<img src="${movie.poster_path ? IMG_URL + movie.poster_path : 'https://via.placeholder.com/500x750?text=Image+non+disponible'}" |
|
alt="${title}" |
|
class="w-full h-auto rounded transition-transform duration-300 group-hover:scale-105"> |
|
<div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"> |
|
<div class="play-icon opacity-0 transform scale-90 transition-all duration-300 text-white text-4xl bg-red-600 rounded-full w-16 h-16 flex items-center justify-center"> |
|
<i class="fas fa-play"></i> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="mt-2"> |
|
<h3 class="font-semibold truncate">${title}</h3> |
|
<div class="flex justify-between text-sm text-gray-400"> |
|
<span>${year}</span> |
|
<span>${isTvShow ? 'Série' : 'Film'}</span> |
|
</div> |
|
</div> |
|
`; |
|
|
|
card.addEventListener('click', () => { |
|
|
|
updateHeroContent(movie, isTvShow); |
|
|
|
|
|
window.scrollTo({top: 0, behavior: 'smooth'}); |
|
}); |
|
|
|
return card; |
|
} |
|
|
|
|
|
function updateHeroContent(movie, isTvShow = false) { |
|
const heroBg = document.getElementById('hero-background'); |
|
const heroTitle = document.getElementById('hero-title'); |
|
const heroDetails = document.getElementById('hero-details'); |
|
const heroDescription = document.getElementById('hero-description'); |
|
const playBtn = document.getElementById('play-btn'); |
|
const infoBtn = document.getElementById('info-btn'); |
|
|
|
|
|
heroBg.style.backgroundImage = `url(${movie.backdrop_path ? IMG_URL + movie.backdrop_path : 'https://via.placeholder.com/1920x1080?text=Image+non+disponible'})`; |
|
|
|
|
|
heroTitle.textContent = isTvShow ? movie.name : movie.title; |
|
|
|
|
|
const year = isTvShow ? |
|
(movie.first_air_date ? new Date(movie.first_air_date).getFullYear() : 'N/A') : |
|
(movie.release_date ? new Date(movie.release_date).getFullYear() : 'N/A'); |
|
|
|
heroDetails.innerHTML = ` |
|
<span class="text-green-500 font-semibold">${Math.round(movie.vote_average * 10)}% Match</span> |
|
<span>${year}</span> |
|
<span class="border border-gray-400 px-1">HD</span> |
|
`; |
|
|
|
|
|
heroDescription.textContent = movie.overview || 'Aucune description disponible.'; |
|
|
|
|
|
playBtn.dataset.id = movie.id; |
|
playBtn.dataset.type = isTvShow ? 'tv' : 'movie'; |
|
infoBtn.dataset.id = movie.id; |
|
infoBtn.dataset.type = isTvShow ? 'tv' : 'movie'; |
|
} |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', async () => { |
|
|
|
const trendingData = await fetchMovies('/trending/all/week'); |
|
if (trendingData) { |
|
const trendingSection = document.getElementById('trending'); |
|
trendingSection.innerHTML = ''; |
|
|
|
trendingData.results.slice(0, 10).forEach(movie => { |
|
const isTvShow = movie.media_type === 'tv'; |
|
trendingSection.appendChild(createMovieCard(movie, isTvShow ? 'tv' : 'movie')); |
|
}); |
|
|
|
|
|
if (trendingData.results.length > 0) { |
|
const firstItem = trendingData.results[0]; |
|
updateHeroContent(firstItem, firstItem.media_type === 'tv'); |
|
} |
|
} |
|
|
|
|
|
const popularData = await fetchMovies('/movie/popular'); |
|
if (popularData) { |
|
const popularSection = document.getElementById('popular'); |
|
popularSection.innerHTML = ''; |
|
|
|
popularData.results.slice(0, 10).forEach(movie => { |
|
popularSection.appendChild(createMovieCard(movie, 'movie')); |
|
}); |
|
} |
|
|
|
|
|
const tvPopularData = await fetchMovies('/tv/popular'); |
|
if (tvPopularData) { |
|
const continueSection = document.getElementById('continue'); |
|
continueSection.innerHTML = ''; |
|
|
|
tvPopularData.results.slice(0, 5).forEach(show => { |
|
continueSection.appendChild(createMovieCard(show, 'tv')); |
|
}); |
|
} |
|
|
|
|
|
const newReleasesData = await fetchMovies('/movie/now_playing'); |
|
if (newReleasesData) { |
|
const newReleasesSection = document.getElementById('new-releases'); |
|
newReleasesSection.innerHTML = ''; |
|
|
|
newReleasesData.results.slice(0, 10).forEach(movie => { |
|
newReleasesSection.appendChild(createMovieCard(movie, 'movie')); |
|
}); |
|
} |
|
|
|
|
|
const searchBtn = document.getElementById('search-btn'); |
|
const searchInput = document.getElementById('search-input'); |
|
|
|
searchBtn.addEventListener('click', () => { |
|
searchInput.classList.toggle('w-64'); |
|
searchInput.classList.toggle('opacity-100'); |
|
searchInput.classList.toggle('ml-2'); |
|
searchInput.focus(); |
|
}); |
|
|
|
searchInput.addEventListener('keypress', async (e) => { |
|
if (e.key === 'Enter' && searchInput.value.trim()) { |
|
|
|
const searchData = await fetchMovies('/search/multi', { |
|
query: searchInput.value.trim(), |
|
include_adult: false |
|
}); |
|
|
|
if (searchData && searchData.results.length > 0) { |
|
|
|
const modal = document.createElement('div'); |
|
modal.className = 'fixed inset-0 bg-black/90 z-50 p-8 overflow-y-auto'; |
|
modal.innerHTML = ` |
|
<div class="max-w-6xl mx-auto"> |
|
<div class="flex justify-between items-center mb-8"> |
|
<h2 class="text-2xl font-bold">Résultats pour "${searchInput.value.trim()}"</h2> |
|
<button class="text-white text-2xl" id="close-search">×</button> |
|
</div> |
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4" id="search-results"> |
|
<!-- Les résultats seront ajoutés ici --> |
|
</div> |
|
</div> |
|
`; |
|
|
|
document.body.appendChild(modal); |
|
|
|
|
|
const searchResults = document.getElementById('search-results'); |
|
searchData.results.forEach(item => { |
|
if (item.media_type === 'movie' || item.media_type === 'tv') { |
|
searchResults.appendChild(createMovieCard(item, item.media_type)); |
|
} |
|
}); |
|
|
|
|
|
document.getElementById('close-search').addEventListener('click', () => { |
|
document.body.removeChild(modal); |
|
}); |
|
} else { |
|
alert('Aucun résultat trouvé'); |
|
} |
|
} |
|
}); |
|
|
|
|
|
document.getElementById('play-btn').addEventListener('click', () => { |
|
const loading = document.createElement('div'); |
|
loading.className = 'fixed inset-0 bg-black/90 z-50 flex items-center justify-center'; |
|
loading.innerHTML = ` |
|
<div class="text-center"> |
|
<div class="loading-spinner inline-block w-16 h-16 border-4 border-red-600 border-t-transparent rounded-full mb-4"></div> |
|
<p class="text-white text-xl">Préparation de la lecture...</p> |
|
</div> |
|
`; |
|
document.body.appendChild(loading); |
|
|
|
|
|
setTimeout(() => { |
|
document.body.removeChild(loading); |
|
alert('Fonctionnalité de lecture en cours de développement. En production, cela ouvrirait le lecteur vidéo.'); |
|
}, 2000); |
|
}); |
|
}); |
|
</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/ia-boot" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |