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>