|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>StreamCiné - Films Complets en HD</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> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Roboto', sans-serif; |
|
|
background-color: #0a0a0a; |
|
|
color: white; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.film-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 10px 25px -5px rgba(0, 179, 255, 0.3); |
|
|
} |
|
|
|
|
|
.video-player { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(0, 0, 0, 0.95); |
|
|
z-index: 9999; |
|
|
display: none; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.video-container { |
|
|
width: 90%; |
|
|
max-width: 1200px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.close-player { |
|
|
position: absolute; |
|
|
top: -40px; |
|
|
right: 0; |
|
|
color: white; |
|
|
font-size: 30px; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.close-player:hover { |
|
|
color: #ff3e3e; |
|
|
} |
|
|
|
|
|
.vf-badge { |
|
|
position: absolute; |
|
|
top: 10px; |
|
|
right: 10px; |
|
|
background: linear-gradient(45deg, #00a2ff, #00ff9d); |
|
|
color: black; |
|
|
font-weight: bold; |
|
|
padding: 3px 8px; |
|
|
border-radius: 4px; |
|
|
font-size: 12px; |
|
|
z-index: 2; |
|
|
} |
|
|
|
|
|
.hd-badge { |
|
|
position: absolute; |
|
|
top: 10px; |
|
|
left: 10px; |
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
color: white; |
|
|
font-weight: bold; |
|
|
padding: 3px 8px; |
|
|
border-radius: 4px; |
|
|
font-size: 12px; |
|
|
border: 1px solid #00a2ff; |
|
|
z-index: 2; |
|
|
} |
|
|
|
|
|
.new-badge { |
|
|
position: absolute; |
|
|
top: 50px; |
|
|
right: 10px; |
|
|
background: linear-gradient(45deg, #ff3e3e, #ff00aa); |
|
|
color: white; |
|
|
font-weight: bold; |
|
|
padding: 3px 8px; |
|
|
border-radius: 4px; |
|
|
font-size: 12px; |
|
|
z-index: 2; |
|
|
} |
|
|
|
|
|
|
|
|
.main-player { |
|
|
width: 100%; |
|
|
height: 70vh; |
|
|
background: #000; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.main-player iframe { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
|
|
|
|
|
|
.search-box { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.search-box:focus-within { |
|
|
box-shadow: 0 0 0 2px #00a2ff; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes spin { |
|
|
to { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
.loading-spinner { |
|
|
display: inline-block; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border: 4px solid rgba(255, 255, 255, 0.3); |
|
|
border-radius: 50%; |
|
|
border-top-color: #00a2ff; |
|
|
animation: spin 1s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
|
|
|
.category-btn.active { |
|
|
background: #00a2ff; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
|
|
|
.pagination-btn.active { |
|
|
background: #00a2ff; |
|
|
color: white; |
|
|
border-color: #00a2ff; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900"> |
|
|
|
|
|
<nav class="fixed w-full z-50 bg-black bg-opacity-90 backdrop-blur-md border-b border-gray-800"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex items-center justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<span class="text-2xl font-bold text-white">STREAM<span class="text-blue-400">CINÉ</span></span> |
|
|
</div> |
|
|
<div class="hidden md:block ml-10"> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#accueil" class="text-white hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium">Accueil</a> |
|
|
<a href="#films" class="text-white hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium">Films</a> |
|
|
<a href="#series" class="text-white hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium">Séries</a> |
|
|
<a href="#nouveautes" class="text-blue-400 px-3 py-2 rounded-md text-sm font-medium">Nouveautés</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-4 flex items-center md:ml-6"> |
|
|
<div class="relative search-box"> |
|
|
<input type="text" placeholder="Rechercher un film..." class="bg-gray-800 text-white px-4 py-2 rounded-full text-sm focus:outline-none w-64"> |
|
|
<button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-blue-400"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
</div> |
|
|
<button class="ml-4 bg-blue-500 text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-blue-600"> |
|
|
<i class="fas fa-user mr-1"></i> Connexion |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="-mr-2 flex md:hidden"> |
|
|
<button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"> |
|
|
<span class="sr-only">Ouvrir menu</span> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-gray-900"> |
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
|
|
<a href="#accueil" class="text-white block px-3 py-2 rounded-md text-base font-medium">Accueil</a> |
|
|
<a href="#films" class="text-white block px-3 py-2 rounded-md text-base font-medium">Films</a> |
|
|
<a href="#series" class="text-white block px-3 py-2 rounded-md text-base font-medium">Séries</a> |
|
|
<a href="#nouveautes" class="text-blue-400 block px-3 py-2 rounded-md text-base font-medium">Nouveautés</a> |
|
|
</div> |
|
|
<div class="pt-4 pb-3 border-t border-gray-700 px-4"> |
|
|
<div class="relative mb-4 search-box"> |
|
|
<input type="text" placeholder="Rechercher un film..." class="bg-gray-800 text-white px-4 py-2 rounded-full text-sm focus:outline-none w-full"> |
|
|
<button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-blue-400"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
</div> |
|
|
<button class="w-full bg-blue-500 text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-blue-600"> |
|
|
<i class="fas fa-user mr-1"></i> Connexion |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="accueil" class="pt-16 pb-10"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="main-player rounded-xl overflow-hidden shadow-2xl mb-8"> |
|
|
<iframe id="featured-movie" src="https://www.youtube.com/embed/EXeTwQWrcwY?autoplay=1&mute=1&controls=0&showinfo=0&rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
|
|
</div> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold text-white">Film en vedette</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 bg-gray-800 text-white rounded-full text-sm hover:bg-gray-700">HD</button> |
|
|
<button class="px-3 py-1 bg-gray-800 text-white rounded-full text-sm hover:bg-gray-700">VF</button> |
|
|
<button class="px-3 py-1 bg-blue-500 text-white rounded-full text-sm hover:bg-blue-600"> |
|
|
<i class="fas fa-expand mr-1"></i> Plein écran |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<h1 class="text-3xl md:text-4xl font-bold text-white mb-2">Dune : Partie Deux (2024)</h1> |
|
|
<div class="flex items-center text-gray-400 mb-4"> |
|
|
<span class="text-yellow-400 mr-2"><i class="fas fa-star"></i> 8.7</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>2h 46min</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>Science-fiction, Aventure</span> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-6 max-w-3xl"> |
|
|
Paul Atreides s'unit avec Chani et les Fremen pour se venger des conspirateurs qui ont détruit sa famille. Alors qu'il fait face à un choix entre l'amour de sa vie et le destin de l'univers, il doit empêcher un terrible futur que lui seul peut prévoir. |
|
|
</p> |
|
|
<div class="flex space-x-4"> |
|
|
<button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-full font-bold flex items-center"> |
|
|
<i class="fas fa-play mr-2"></i> Regarder maintenant |
|
|
</button> |
|
|
<button class="bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-full font-bold flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Ma liste |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="nouveautes" class="py-10 bg-gray-800"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold text-white">Nouveautés</h2> |
|
|
<a href="#" class="text-blue-400 text-sm hover:underline">Voir tout</a> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="nouveautes-grid"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="films" class="py-10 bg-gray-900"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold text-white">Films Populaires</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="category-btn px-3 py-1 bg-gray-800 text-white rounded-full text-sm hover:bg-gray-700 active" data-category="all">Tous</button> |
|
|
<button class="category-btn px-3 py-1 bg-gray-800 text-white rounded-full text-sm hover:bg-gray-700" data-category="action">Action</button> |
|
|
<button class="category-btn px-3 py-1 bg-gray-800 text-white rounded-full text-sm hover:bg-gray-700" data-category="sf">SF</button> |
|
|
<button class="category-btn px-3 py-1 bg-gray-800 text-white rounded-full text-sm hover:bg-gray-700" data-category="drame">Drame</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="films-grid"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="flex justify-center mt-10 space-x-2"> |
|
|
<button class="pagination-btn px-4 py-2 border border-gray-700 rounded-full text-sm hover:bg-gray-800">Précédent</button> |
|
|
<button class="pagination-btn px-4 py-2 border border-gray-700 rounded-full text-sm hover:bg-gray-800 active">1</button> |
|
|
<button class="pagination-btn px-4 py-2 border border-gray-700 rounded-full text-sm hover:bg-gray-800">2</button> |
|
|
<button class="pagination-btn px-4 py-2 border border-gray-700 rounded-full text-sm hover:bg-gray-800">3</button> |
|
|
<button class="pagination-btn px-4 py-2 border border-gray-700 rounded-full text-sm hover:bg-gray-800">Suivant</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div class="video-player" id="video-player"> |
|
|
<div class="video-container"> |
|
|
<span class="close-player" id="close-player"><i class="fas fa-times"></i></span> |
|
|
<iframe id="movie-player" class="w-full aspect-video" frameborder="0" allowfullscreen allow="autoplay"></iframe> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
|
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const filmsData = [ |
|
|
{ |
|
|
id: 1, |
|
|
titre: "Dune : Partie Deux", |
|
|
annee: 2024, |
|
|
duree: "2h46min", |
|
|
genres: ["Science-fiction", "Aventure"], |
|
|
description: "Paul Atreides s'unit avec Chani et les Fremen pour se venger des conspirateurs qui ont détruit sa famille.", |
|
|
note: "8.7", |
|
|
image: "https://image.tmdb.org/t/p/w500/8b8R8l88Qje9dn9OE8PY05Hav3f.jpg", |
|
|
video: "https://www.youtube.com/embed/EXeTwQWrcwY?autoplay=1", |
|
|
vf: true, |
|
|
hd: true, |
|
|
nouveau: true, |
|
|
category: "sf" |
|
|
}, |
|
|
{ |
|
|
id: 2, |
|
|
titre: "Furiosa : Une Saga Mad Max", |
|
|
annee: 2024, |
|
|
duree: "2h28min", |
|
|
genres: ["Action", "Science-fiction"], |
|
|
description: "L'histoire de la jeune Furiosa avant sa rencontre avec Max Rockatansky.", |
|
|
note: "8.1", |
|
|
image: "https://image.tmdb.org/t/p/w500/6XxP7L1RGRfGVrHxzzAqH6XyKrJ.jpg", |
|
|
video: "https://www.youtube.com/embed/XJMuhwVlca4?autoplay=1", |
|
|
vf: true, |
|
|
hd: true, |
|
|
nouveau: true, |
|
|
category: "action" |
|
|
}, |
|
|
{ |
|
|
id: 3, |
|
|
titre: "Deadpool & Wolverine", |
|
|
annee: 2024, |
|
|
duree: "2h07min", |
|
|
genres: ["Action", "Comédie"], |
|
|
description: "Deadpool change l'histoire du MCU avec Wolverine dans une aventure multiverselle.", |
|
|
note: "8.9", |
|
|
image: "https://image.tmdb.org/t/p/w500/uxBHXaoOvAwy4NpPpP7nNx2rXYQ.jpg", |
|
|
video: "https://www.youtube.com/embed/avb5Tqrlx1U?autoplay=1", |
|
|
vf: true, |
|
|
hd: true, |
|
|
nouveau: true, |
|
|
category: "action" |
|
|
}, |
|
|
{ |
|
|
id: 4, |
|
|
titre: "Gladiator 2", |
|
|
annee: 2024, |
|
|
duree: "2h38min", |
|
|
genres: ["Action", "Drame"], |
|
|
description: "Suite du film culte Gladiator, suivant les aventures de Lucius, le neveu de Commodus.", |
|
|
note: "8.3", |
|
|
image: "https://image.tmdb.org/t/p/w500/pgqgaUx1cJb5oZQQAivhSlbWXGE.jpg", |
|
|
video: "https://www.youtube.com/embed/wws5KZ5wJ2Y?autoplay=1", |
|
|
vf: true, |
|
|
hd: true, |
|
|
nouveau: false, |
|
|
category: "action" |
|
|
}, |
|
|
{ |
|
|
id: 5, |
|
|
titre: "Joker : Folie à Deux", |
|
|
annee: 2024, |
|
|
duree: "2h22min", |
|
|
genres: ["Drame", "Thriller"], |
|
|
description: "Arthur Fleck rencontre Harley Quinn dans cet opus musical qui explore leur relation toxique.", |
|
|
note: "8.5", |
|
|
image: "https://image.tmdb.org/t/p/w500/x2Vf8bY92PJq2pWevVx7lXfXqAB.jpg", |
|
|
video: "https://www.youtube.com/embed/xy8aJw1vYHo?autoplay=1", |
|
|
vf: true, |
|
|
hd: true, |
|
|
nouveau: false, |
|
|
category: "drame" |
|
|
}, |
|
|
{ |
|
|
id: 6, |
|
|
titre: "The Batman", |
|
|
annee: 2022, |
|
|
duree: "2h56min", |
|
|
genres: ["Action", "Thriller"], |
|
|
description: "Batman enquête sur le milieu criminel de Gotham City alors qu'un tueur s'en prend à l'élite corrompue.", |
|
|
note: "7.8", |
|
|
image: "https://image.tmdb.org/t/p/w500/seyWFgGInaLqW7nOZvu0V95aox8.jpg", |
|
|
video: "https://www.youtube.com/embed/mqqft2x_Aa4?autoplay=1", |
|
|
vf: true, |
|
|
hd: true, |
|
|
nouveau: false, |
|
|
category: "action" |
|
|
}, |
|
|
{ |
|
|
id: 7, |
|
|
titre: "Avatar : La Voie de l'Eau", |
|
|
annee: 2022, |
|
|
duree: "3h12min", |
|
|
genres: ["Science-fiction", "Aventure"], |
|
|
description: "Jake Sully et Ney'tiri forment une famille sur Pandora mais doivent quitter leur foyer.", |
|
|
note: "7.6", |
|
|
image: "https://image.tmdb.org/t/p/w500/jRXYjXNq0Cs2TcJjLkki24MLp7u.jpg", |
|
|
video: "https://www.youtube.com/embed/a8Gx8wiNbs8?autoplay=1", |
|
|
vf: true, |
|
|
hd: true, |
|
|
nouveau: false, |
|
|
category: "sf" |
|
|
}, |
|
|
{ |
|
|
id: 8, |
|
|
titre: "Oppenheimer", |
|
|
annee: 2023, |
|
|
duree: "3h", |
|
|
genres: ["Drame", "Historique"], |
|
|
description: "L'histoire du physicien J. Robert Oppenheimer et son rôle dans le développement de la bombe atomique.", |
|
|
note: "8.4", |
|
|
image: "https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1nuhua.jpg", |
|
|
video: "https://www.youtube.com/embed/uYPbbksJxIg?autoplay=1", |
|
|
vf: true, |
|
|
hd: true, |
|
|
nouveau: false, |
|
|
category: "drame" |
|
|
}, |
|
|
{ |
|
|
id: 9, |
|
|
titre: "Top Gun : Maverick", |
|
|
annee: 2022, |
|
|
duree: "2h11min", |
|
|
genres: ["Action", "Drame"], |
|
|
description: "Trente ans de service, Maverick est toujours là, repoussant les limites comme pilote d'essai.", |
|
|
note: "8.3", |
|
|
image: "https://image.tmdb.org/t/p/w500/jTrXwK56EoLHHsQaM2kra45E4ek.jpg", |
|
|
video: "https://www.youtube.com/embed/giXco2jaZ_4?autoplay=1", |
|
|
vf: true, |
|
|
hd: true, |
|
|
nouveau: false, |
|
|
category: "action" |
|
|
}, |
|
|
{ |
|
|
id: 10, |
|
|
titre: "Interstellar", |
|
|
annee: 2014, |
|
|
duree: "2h49min", |
|
|
genres: ["Science-fiction", "Drame"], |
|
|
description: "Une équipe d'explorateurs voyage à travers un trou de ver pour sauver l'humanité.", |
|
|
note: "8.4", |
|
|
image: "https://image.tmdb.org/t/p/w500/gEU2QniE6E77NI6lCU6MxlNBvIx.jpg", |
|
|
video: "https://www.youtube.com/embed/zSWdZVtXT7E?autoplay=1", |
|
|
vf: true, |
|
|
hd: true, |
|
|
nouveau: false, |
|
|
category: "sf" |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
const videoPlayer = document.getElementById('video-player'); |
|
|
const moviePlayer = document.getElementById('movie-player'); |
|
|
const closePlayer = document.getElementById('close-player'); |
|
|
|
|
|
|
|
|
function openVideoPlayer(videoUrl) { |
|
|
moviePlayer.src = videoUrl; |
|
|
videoPlayer.style.display = 'flex'; |
|
|
document.body.style.overflow = 'hidden'; |
|
|
} |
|
|
|
|
|
|
|
|
closePlayer.addEventListener('click', () => { |
|
|
moviePlayer.src = ''; |
|
|
videoPlayer.style.display = 'none'; |
|
|
document.body.style.overflow = 'auto'; |
|
|
}); |
|
|
|
|
|
|
|
|
videoPlayer.addEventListener('click', (e) => { |
|
|
if (e.target === videoPlayer) { |
|
|
moviePlayer.src = ''; |
|
|
videoPlayer.style.display = 'none'; |
|
|
document.body.style.overflow = 'auto'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function genererFilmsGrid(films, targetElement, limit = null) { |
|
|
const filmsToShow = limit ? films.slice(0, limit) : films; |
|
|
targetElement.innerHTML = ''; |
|
|
|
|
|
filmsToShow.forEach(film => { |
|
|
const filmElement = document.createElement('div'); |
|
|
filmElement.className = 'film-card group relative rounded-xl overflow-hidden transition-all duration-300 hover:z-10'; |
|
|
filmElement.innerHTML = ` |
|
|
<div class="relative aspect-[2/3] rounded-xl overflow-hidden cursor-pointer"> |
|
|
${film.vf ? '<span class="vf-badge">VF</span>' : ''} |
|
|
${film.hd ? '<span class="hd-badge">HD</span>' : ''} |
|
|
${film.nouveau ? '<span class="new-badge">NOUVEAU</span>' : ''} |
|
|
<img src="${film.image}" alt="${film.titre}" class="w-full h-full object-cover group-hover:opacity-70 transition-all duration-300" loading="lazy"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-300"></div> |
|
|
<div class="absolute bottom-0 left-0 right-0 p-4 translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300"> |
|
|
<h3 class="text-white font-bold text-lg mb-1">${film.titre}</h3> |
|
|
<div class="flex items-center text-sm text-gray-300 mb-2"> |
|
|
<span>${film.annee}</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>${film.duree}</span> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2 mb-3"> |
|
|
${film.genres.map(genre => `<span class="px-2 py-1 bg-gray-800 text-white text-xs rounded-full">${genre}</span>`).join('')} |
|
|
</div> |
|
|
<p class="text-gray-300 text-sm line-clamp-2">${film.description}</p> |
|
|
</div> |
|
|
<div class="absolute top-3 left-3 px-2 py-1 bg-black bg-opacity-70 text-yellow-400 text-sm font-bold rounded-full flex items-center"> |
|
|
<i class="fas fa-star mr-1"></i> |
|
|
${film.note} |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3"> |
|
|
<h3 class="text-white font-medium truncate">${film.titre}</h3> |
|
|
<div class="flex items-center text-sm text-gray-400"> |
|
|
<span>${film.annee}</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-2"> |
|
|
<button class="watch-btn w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-full text-sm font-bold transition-all duration-300 flex items-center justify-center" data-video="${film.video}"> |
|
|
<i class="fas fa-play mr-2"></i> Regarder |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
targetElement.appendChild(filmElement); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.watch-btn').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
const videoUrl = this.getAttribute('data-video'); |
|
|
openVideoPlayer(videoUrl); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function filterFilms(category) { |
|
|
const filmsGrid = document.getElementById('films-grid'); |
|
|
|
|
|
if (category === 'all') { |
|
|
genererFilmsGrid(filmsData, filmsGrid); |
|
|
} else { |
|
|
const filteredFilms = filmsData.filter(film => film.category === category); |
|
|
genererFilmsGrid(filteredFilms, filmsGrid); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('.category-btn').forEach(btn => { |
|
|
if (btn.dataset.category === category) { |
|
|
btn.classList.add('active'); |
|
|
} else { |
|
|
btn.classList.remove('active'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
|
|
|
const nouveautes = filmsData.filter(film => film.nouveau); |
|
|
genererFilmsGrid(nouveautes, document.getElementById('nouveautes-grid'), 5); |
|
|
|
|
|
|
|
|
genererFilmsGrid(filmsData, document.getElementById('films-grid')); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.category-btn').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
const category = this.dataset.category; |
|
|
filterFilms(category); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
document.querySelectorAll('.film-card').forEach(card => { |
|
|
card.style.opacity = '1'; |
|
|
}); |
|
|
}, 300); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('keydown', function(e) { |
|
|
if (e.key === 'Escape' && videoPlayer.style.display === 'flex') { |
|
|
moviePlayer.src = ''; |
|
|
videoPlayer.style.display = 'none'; |
|
|
document.body.style.overflow = 'auto'; |
|
|
} |
|
|
}); |
|
|
</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-futur" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
