Hugging Face's logo

Spaces:
docto41
/
ia-boot
Running

App Files Community
ia-boot / index.html
docto41's picture
docto41
Add 2 files
0258815 verified
Raw
History Blame Contribute Delete
23.4 kB
<!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">
 <!-- Navigation -->
 <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>
<!-- Hero Section -->
 <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>
<!-- Content Sections -->
 <main class="relative z-30 -mt-32">
 <div class="space-y-12 pb-20">
 <!-- Trending Now -->
 <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>
<!-- Popular on MegaStream -->
 <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>
<!-- Continue Watching -->
 <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>
<!-- New Releases -->
 <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 -->
 <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>&copy; 2023 MegaStream. Tous droits réservés.</p>
 </div>
 </div>
 </footer>
<script>
 // Configuration de l'API TMDb
 const API_KEY = '3fd2be6f0c70a2a598f084ddfb75487c'; // Clé API publique pour démo
 const BASE_URL = 'https://api.themoviedb.org/3';
 const IMG_URL = 'https://image.tmdb.org/t/p/original';
// Fonction pour charger les données depuis TMDb
 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');
// Ajouter les paramètres supplémentaires
 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;
 }
 }
// Fonction pour créer une carte de film
 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;
// Vérifier si c'est un film ou une série
 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', () => {
 // Mettre à jour le hero avec ce film/série
 updateHeroContent(movie, isTvShow);
// Faire défiler vers le haut
 window.scrollTo({top: 0, behavior: 'smooth'});
 });
return card;
 }
// Mettre à jour la section hero
 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');
// Mettre à jour l'image de fond
 heroBg.style.backgroundImage = `url(${movie.backdrop_path ? IMG_URL + movie.backdrop_path : 'https://via.placeholder.com/1920x1080?text=Image+non+disponible'})`;
// Mettre à jour le titre
 heroTitle.textContent = isTvShow ? movie.name : movie.title;
// Mettre à jour les détails
 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>
 `;
// Mettre à jour la description
 heroDescription.textContent = movie.overview || 'Aucune description disponible.';
// Mettre à jour les boutons
 playBtn.dataset.id = movie.id;
 playBtn.dataset.type = isTvShow ? 'tv' : 'movie';
 infoBtn.dataset.id = movie.id;
 infoBtn.dataset.type = isTvShow ? 'tv' : 'movie';
 }
// Initialiser la page
 document.addEventListener('DOMContentLoaded', async () => {
 // Charger les films tendance
 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'));
 });
// Mettre à jour le hero avec le premier film/série
 if (trendingData.results.length > 0) {
 const firstItem = trendingData.results[0];
 updateHeroContent(firstItem, firstItem.media_type === 'tv');
 }
 }
// Charger les films populaires
 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'));
 });
 }
// Charger les séries populaires pour "Continuer à regarder"
 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'));
 });
 }
// Charger les nouvelles sorties
 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'));
 });
 }
// Gestion de la recherche
 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()) {
 // Rechercher des films et séries
 const searchData = await fetchMovies('/search/multi', {
 query: searchInput.value.trim(),
 include_adult: false
 });
if (searchData && searchData.results.length > 0) {
 // Créer une modal pour afficher les résultats
 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">&times;</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);
// Ajouter les résultats
 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));
 }
 });
// Fermer la modal
 document.getElementById('close-search').addEventListener('click', () => {
 document.body.removeChild(modal);
 });
 } else {
 alert('Aucun résultat trouvé');
 }
 }
 });
// Gestion du bouton play
 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);
// Simuler le chargement du lecteur
 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>