|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Films Français à Voir Absolument</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=Montserrat:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Montserrat', sans-serif; |
|
|
background-color: #f8f9fa; |
|
|
} |
|
|
|
|
|
.film-card { |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.film-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.french-flag { |
|
|
background: linear-gradient(90deg, #0055A4 33%, #FFFFFF 33%, #FFFFFF 66%, #EF4135 66%); |
|
|
} |
|
|
|
|
|
.search-input:focus { |
|
|
outline: none; |
|
|
box-shadow: 0 0 0 2px #3b82f6; |
|
|
} |
|
|
|
|
|
.filter-btn.active { |
|
|
background-color: #3b82f6; |
|
|
color: white; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100"> |
|
|
|
|
|
<header class="bg-white shadow-md"> |
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex items-center mb-4 md:mb-0"> |
|
|
<div class="french-flag w-10 h-10 rounded-full mr-3"></div> |
|
|
<h1 class="text-2xl font-bold text-gray-800">CinéFrançais</h1> |
|
|
</div> |
|
|
<div class="relative w-full md:w-1/3"> |
|
|
<input type="text" placeholder="Rechercher un film..." |
|
|
class="search-input w-full px-4 py-2 rounded-full border border-gray-300 focus:border-blue-500"> |
|
|
<button class="absolute right-3 top-2 text-gray-500"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="container mx-auto px-4 py-8"> |
|
|
|
|
|
<div class="mb-8 bg-white p-4 rounded-lg shadow-sm"> |
|
|
<h2 class="text-lg font-semibold mb-4 text-gray-700">Filtrer par :</h2> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<button class="filter-btn active px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-blue-500 hover:text-white transition"> |
|
|
Tous |
|
|
</button> |
|
|
<button class="filter-btn px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-blue-500 hover:text-white transition" data-genre="drame"> |
|
|
Drame |
|
|
</button> |
|
|
<button class="filter-btn px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-blue-500 hover:text-white transition" data-genre="comedie"> |
|
|
Comédie |
|
|
</button> |
|
|
<button class="filter-btn px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-blue-500 hover:text-white transition" data-genre="policier"> |
|
|
Policier |
|
|
</button> |
|
|
<button class="filter-btn px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-blue-500 hover:text-white transition" data-genre="historique"> |
|
|
Historique |
|
|
</button> |
|
|
<button class="filter-btn px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-blue-500 hover:text-white transition" data-genre="romance"> |
|
|
Romance |
|
|
</button> |
|
|
<button class="filter-btn px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-blue-500 hover:text-white transition" data-genre="fantastique"> |
|
|
Fantastique |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="films-container"> |
|
|
|
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-8"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row justify-between"> |
|
|
<div class="mb-6 md:mb-0"> |
|
|
<h2 class="text-xl font-bold mb-4">CinéFrançais</h2> |
|
|
<p class="text-gray-400">La meilleure sélection de films français à voir absolument.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Contact</h3> |
|
|
<p class="text-gray-400 mb-2"><i class="fas fa-envelope mr-2"></i> contact@cinefrancais.fr</p> |
|
|
<p class="text-gray-400"><i class="fas fa-phone mr-2"></i> +33 1 23 45 67 89</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> |
|
|
<p>© 2023 CinéFrançais. Tous droits réservés.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const films = [ |
|
|
{ |
|
|
id: 1, |
|
|
titre: "Intouchables", |
|
|
annee: 2011, |
|
|
realisateur: "Olivier Nakache, Éric Toledano", |
|
|
genre: ["comedie", "drame"], |
|
|
duree: "1h52", |
|
|
note: 4.8, |
|
|
description: "Après un accident de parapente, Philippe, riche aristocrate, engage comme aide à domicile Driss, un jeune de banlieue tout juste sorti de prison.", |
|
|
image: "https://fr.web.img6.acsta.net/medias/nmedia/18/86/98/92/19870792.jpg", |
|
|
streaming: true |
|
|
}, |
|
|
{ |
|
|
id: 2, |
|
|
titre: "Le Fabuleux Destin d'Amélie Poulain", |
|
|
annee: 2001, |
|
|
realisateur: "Jean-Pierre Jeunet", |
|
|
genre: ["romance", "comedie"], |
|
|
duree: "2h02", |
|
|
note: 4.7, |
|
|
description: "Amélie, une serveuse dans un café de Montmartre, décide de changer la vie des gens autour d'elle tout en cherchant le bonheur pour elle-même.", |
|
|
image: "https://fr.web.img5.acsta.net/medias/nmedia/18/35/91/67/20350723.jpg", |
|
|
streaming: true |
|
|
}, |
|
|
{ |
|
|
id: 3, |
|
|
titre: "La Haine", |
|
|
annee: 1995, |
|
|
realisateur: "Mathieu Kassovitz", |
|
|
genre: ["drame", "policier"], |
|
|
duree: "1h38", |
|
|
note: 4.6, |
|
|
description: "24 heures dans la vie de trois jeunes de banlieue après une nuit d'émeutes provoquée par le passage à tabac d'un adolescent par la police.", |
|
|
image: "https://fr.web.img6.acsta.net/medias/nmedia/18/65/60/65/19161098.jpg", |
|
|
streaming: true |
|
|
}, |
|
|
{ |
|
|
id: 4, |
|
|
titre: "Le Dîner de Cons", |
|
|
annee: 1998, |
|
|
realisateur: "Francis Veber", |
|
|
genre: ["comedie"], |
|
|
duree: "1h20", |
|
|
note: 4.5, |
|
|
description: "Chaque mercredi, Pierre organise un dîner de cons. Ce soir, il pense avoir trouvé le champion toutes catégories en la personne de François Pignon.", |
|
|
image: "https://fr.web.img6.acsta.net/medias/nmedia/18/36/02/52/18624141.jpg", |
|
|
streaming: true |
|
|
}, |
|
|
{ |
|
|
id: 5, |
|
|
titre: "Un Prophète", |
|
|
annee: 2009, |
|
|
realisateur: "Jacques Audiard", |
|
|
genre: ["drame", "policier"], |
|
|
duree: "2h35", |
|
|
note: 4.6, |
|
|
description: "Condamné à six ans de prison, Malik El Djebena, illettré de 19 ans, apprend à survivre en devenant le protégé d'un parrain corse.", |
|
|
image: "https://fr.web.img6.acsta.net/medias/nmedia/18/67/93/21/18958594.jpg", |
|
|
streaming: false |
|
|
}, |
|
|
{ |
|
|
id: 6, |
|
|
titre: "Les Visiteurs", |
|
|
annee: 1993, |
|
|
realisateur: "Jean-Marie Poiré", |
|
|
genre: ["comedie", "fantastique"], |
|
|
duree: "1h47", |
|
|
note: 4.4, |
|
|
description: "En l'an 1123, le comte Godefroy de Montmirail et son écuyer Jacquouille sont projetés dans le XXe siècle à cause d'une potion ratée.", |
|
|
image: "https://fr.web.img6.acsta.net/medias/nmedia/18/65/03/10/18908544.jpg", |
|
|
streaming: true |
|
|
}, |
|
|
{ |
|
|
id: 7, |
|
|
titre: "Amour", |
|
|
annee: 2012, |
|
|
realisateur: "Michael Haneke", |
|
|
genre: ["drame"], |
|
|
duree: "2h07", |
|
|
note: 4.3, |
|
|
description: "Georges et Anne, un couple de professeurs de musique retraités, voient leur vie bouleversée quand Anne est victime d'un accident vasculaire cérébral.", |
|
|
image: "https://fr.web.img5.acsta.net/medias/nmedia/18/88/01/04/19892586.jpg", |
|
|
streaming: false |
|
|
}, |
|
|
{ |
|
|
id: 8, |
|
|
titre: "Le Prénom", |
|
|
annee: 2012, |
|
|
realisateur: "Alexandre de La Patellière, Matthieu Delaporte", |
|
|
genre: ["comedie"], |
|
|
duree: "1h49", |
|
|
note: 4.2, |
|
|
description: "Vincent annonce à son ami d'enfance qu'il va appeler son futur fils Adolphe, déclenchant une violente dispute lors d'un dîner entre amis.", |
|
|
image: "https://fr.web.img6.acsta.net/medias/nmedia/18/85/99/60/19782365.jpg", |
|
|
streaming: true |
|
|
}, |
|
|
{ |
|
|
id: 9, |
|
|
titre: "La Grande Vadrouille", |
|
|
annee: 1966, |
|
|
realisateur: "Gérard Oury", |
|
|
genre: ["comedie", "historique"], |
|
|
duree: "2h12", |
|
|
note: 4.5, |
|
|
description: "Pendant la Seconde Guerre mondiale, deux civils français aident des aviateurs britanniques à fuir la France occupée.", |
|
|
image: "https://fr.web.img6.acsta.net/medias/nmedia/18/36/26/93/18696995.jpg", |
|
|
streaming: true |
|
|
}, |
|
|
{ |
|
|
id: 10, |
|
|
titre: "Caché", |
|
|
annee: 2005, |
|
|
realisateur: "Michael Haneke", |
|
|
genre: ["drame", "policier"], |
|
|
duree: "1h57", |
|
|
note: 4.1, |
|
|
description: "Un couple parisien reçoit des cassettes vidéo anonymes les filmant devant chez eux, ainsi que des dessins énigmatiques.", |
|
|
image: "https://fr.web.img6.acsta.net/medias/nmedia/18/35/18/37/18361593.jpg", |
|
|
streaming: false |
|
|
}, |
|
|
{ |
|
|
id: 11, |
|
|
titre: "Bienvenue chez les Ch'tis", |
|
|
annee: 2008, |
|
|
realisateur: "Dany Boon", |
|
|
genre: ["comedie"], |
|
|
duree: "1h46", |
|
|
note: 4.3, |
|
|
description: "Un directeur de bureau de poste est muté dans le Nord de la France où il découvre les particularités locales et leurs habitants.", |
|
|
image: "https://fr.web.img6.acsta.net/medias/nmedia/18/63/97/89/18949561.jpg", |
|
|
streaming: true |
|
|
}, |
|
|
{ |
|
|
id: 12, |
|
|
titre: "Le Chant du Loup", |
|
|
annee: 2019, |
|
|
realisateur: "Antonin Baudry", |
|
|
genre: ["drame", "policier"], |
|
|
duree: "1h55", |
|
|
note: 4.0, |
|
|
description: "Un sous-marin nucléaire français est pris dans un engrenage qui pourrait déclencher une troisième guerre mondiale.", |
|
|
image: "https://fr.web.img6.acsta.net/pictures/19/02/19/12/25/5782433.jpg", |
|
|
streaming: true |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
displayFilms(films); |
|
|
|
|
|
|
|
|
const searchInput = document.querySelector('.search-input'); |
|
|
searchInput.addEventListener('input', function() { |
|
|
const searchTerm = this.value.toLowerCase(); |
|
|
const filteredFilms = films.filter(film => |
|
|
film.titre.toLowerCase().includes(searchTerm) || |
|
|
film.realisateur.toLowerCase().includes(searchTerm) |
|
|
); |
|
|
displayFilms(filteredFilms); |
|
|
}); |
|
|
|
|
|
|
|
|
const filterButtons = document.querySelectorAll('.filter-btn'); |
|
|
filterButtons.forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
|
|
|
filterButtons.forEach(btn => btn.classList.remove('active')); |
|
|
|
|
|
this.classList.add('active'); |
|
|
|
|
|
const genre = this.dataset.genre; |
|
|
if (!genre) { |
|
|
displayFilms(films); |
|
|
} else { |
|
|
const filteredFilms = films.filter(film => |
|
|
film.genre.includes(genre) |
|
|
); |
|
|
displayFilms(filteredFilms); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function displayFilms(filmsToDisplay) { |
|
|
const container = document.getElementById('films-container'); |
|
|
container.innerHTML = ''; |
|
|
|
|
|
if (filmsToDisplay.length === 0) { |
|
|
container.innerHTML = ` |
|
|
<div class="col-span-full text-center py-10"> |
|
|
<i class="fas fa-film text-5xl text-gray-400 mb-4"></i> |
|
|
<h3 class="text-xl font-semibold text-gray-700">Aucun film trouvé</h3> |
|
|
<p class="text-gray-500">Essayez avec d'autres critères de recherche</p> |
|
|
</div> |
|
|
`; |
|
|
return; |
|
|
} |
|
|
|
|
|
filmsToDisplay.forEach(film => { |
|
|
const filmCard = document.createElement('div'); |
|
|
filmCard.className = 'film-card bg-white rounded-lg overflow-hidden'; |
|
|
filmCard.innerHTML = ` |
|
|
<div class="relative"> |
|
|
<img src="${film.image}" alt="${film.titre}" class="w-full h-64 object-cover"> |
|
|
${film.streaming ? ` |
|
|
<div class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
<i class="fas fa-play mr-1"></i> Streaming |
|
|
</div> |
|
|
` : ''} |
|
|
<div class="absolute bottom-2 left-2 bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
${film.annee} |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-bold text-gray-800 mb-1">${film.titre}</h3> |
|
|
<p class="text-sm text-gray-600 mb-2">${film.realisateur}</p> |
|
|
<div class="flex items-center mb-3"> |
|
|
${Array(Math.floor(film.note)).fill().map(() => |
|
|
`<i class="fas fa-star text-yellow-400 mr-1"></i>` |
|
|
).join('')} |
|
|
${film.note % 1 >= 0.5 ? |
|
|
`<i class="fas fa-star-half-alt text-yellow-400 mr-1"></i>` : |
|
|
'' |
|
|
} |
|
|
<span class="text-gray-500 text-sm ml-1">${film.note.toFixed(1)}</span> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-1 mb-3"> |
|
|
${film.genre.map(g => |
|
|
`<span class="text-xs px-2 py-1 bg-gray-200 text-gray-700 rounded-full">${g.charAt(0).toUpperCase() + g.slice(1)}</span>` |
|
|
).join('')} |
|
|
</div> |
|
|
<p class="text-sm text-gray-700 mb-4 line-clamp-2">${film.description}</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-sm text-gray-500">${film.duree}</span> |
|
|
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition"> |
|
|
${film.streaming ? 'Regarder' : 'Plus d\'infos'} |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
container.appendChild(filmCard); |
|
|
}); |
|
|
} |
|
|
</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/vgt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
