Hugging Face's logo

Spaces:
docto41
/
flix-vision
Running

App Files Community
flix-vision / index.html
docto41's picture
docto41
Add 2 files
a59923b verified
raw
history blame contribute delete
28.9 kB
 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlixVision - Films complets en streaming</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=Poppins:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
background-color: #0f0f1a;
color: white;
}
.hero-gradient {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
.movie-card {
transition: all 0.3s ease;
transform-origin: center;
}
.movie-card:hover {
transform: scale(1.05);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
z-index: 10;
}
.movie-card:hover .play-icon {
opacity: 1;
}
.play-icon {
opacity: 0;
transition: all 0.3s ease;
}
.navbar {
backdrop-filter: blur(10px);
background-color: rgba(15, 15, 26, 0.8);
}
.genre-tag {
transition: all 0.2s ease;
}
.genre-tag:hover {
background-color: #e50914;
transform: translateY(-2px);
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #1a1a2e;
}
::-webkit-scrollbar-thumb {
background: #e50914;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #b00710;
}
/* Video player styles */
.video-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
}
.video-player {
width: 80%;
max-width: 1200px;
position: relative;
}
.close-btn {
position: absolute;
top: -40px;
right: 0;
background: #e50914;
color: white;
border: none;
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
font-size: 16px;
}
/* Fallback image style */
.movie-poster {
width: 100%;
height: 320px;
object-fit: cover;
border-radius: 8px;
background-color: #1a1a2e;
}
/* Badge for free content */
.free-badge {
position: absolute;
top: 10px;
right: 10px;
background-color: #4CAF50;
color: white;
padding: 3px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
}
/* Language selector */
.language-selector {
position: relative;
display: inline-block;
}
.language-dropdown {
display: none;
position: absolute;
right: 0;
background-color: #1a1a2e;
min-width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 4px;
}
.language-selector:hover .language-dropdown {
display: block;
}
.language-dropdown a {
color: white;
padding: 8px 16px;
text-decoration: none;
display: block;
}
.language-dropdown a:hover {
background-color: #e50914;
}
</style>
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar fixed top-0 w-full z-50 py-4 px-6 flex justify-between items-center">
<div class="flex items-center">
<h1 class="text-2xl font-bold text-red-600">FLIX<span class="text-white">VISION</span></h1>
</div>
<div class="hidden md:flex space-x-8">
<a href="#" class="text-white hover:text-red-500 transition" id="home-link">Accueil</a>
<a href="#films" class="text-white hover:text-red-500 transition" id="movies-link">Films</a>
<a href="#series" class="text-white hover:text-red-500 transition" id="series-link">Séries</a>
<a href="#documentaires" class="text-white hover:text-red-500 transition" id="docs-link">Documentaires</a>
<a href="#ma-liste" class="text-white hover:text-red-500 transition" id="list-link">Ma liste</a>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="Rechercher..." class="bg-gray-800 text-white px-4 py-2 rounded-full focus:outline-none focus:ring-2 focus:ring-red-500 w-40 md:w-64">
<i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i>
</div>
<div class="language-selector">
<button class="flex items-center space-x-1 bg-gray-800 px-3 py-1 rounded-full">
<i class="fas fa-globe"></i>
<span>FR</span>
<i class="fas fa-chevron-down text-xs"></i>
</button>
<div class="language-dropdown">
<a href="#" data-lang="fr">Français</a>
<a href="#" data-lang="en">English</a>
<a href="#" data-lang="es">Español</a>
<a href="#" data-lang="de">Deutsch</a>
</div>
</div>
<div class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center cursor-pointer">
<i class="fas fa-user text-white"></i>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-gradient pt-32 pb-20 px-6 md:px-16">
<div class="max-w-6xl mx-auto">
<h1 class="text-4xl md:text-6xl font-bold mb-6">Films complets <span class="text-red-500">gratuits</span> en streaming</h1>
<p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl">Regardez des films complets en haute qualité, en français et sans publicité.</p>
<div class="flex flex-wrap gap-4 mb-12">
<span class="genre-tag bg-gray-800 text-white px-4 py-2 rounded-full cursor-pointer" data-genre="action">Action</span>
<span class="genre-tag bg-gray-800 text-white px-4 py-2 rounded-full cursor-pointer" data-genre="comedy">Comédie</span>
<span class="genre-tag bg-gray-800 text-white px-4 py-2 rounded-full cursor-pointer" data-genre="drama">Drame</span>
<span class="genre-tag bg-gray-800 text-white px-4 py-2 rounded-full cursor-pointer" data-genre="classic">Classiques</span>
<span class="genre-tag bg-gray-800 text-white px-4 py-2 rounded-full cursor-pointer" data-genre="horror">Horreur</span>
</div>
<button class="bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded-lg font-semibold text-lg transition flex items-center" id="watch-now-btn">
<i class="fas fa-play mr-2"></i> Commencer à regarder
</button>
</div>
</section>
<!-- Main Content -->
<main class="px-6 md:px-16 py-12 max-w-7xl mx-auto">
<!-- Nouveautés -->
<section class="mb-16" id="films">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<span class="w-1 h-8 bg-red-500 mr-3"></span>
NOUVEAUTÉS GRATUITES
</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="new-movies">
<!-- Movie cards will be added here by JavaScript -->
</div>
</section>
<!-- Films Classiques -->
<section class="mb-16" id="classic-movies-section">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<span class="w-1 h-8 bg-red-500 mr-3"></span>
CLASSIQUES DU CINÉMA FRANÇAIS
</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="classic-movies">
<!-- Movie cards will be added here by JavaScript -->
</div>
</section>
<!-- Films d'Action -->
<section class="mb-16" id="action-movies-section">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<span class="w-1 h-8 bg-red-500 mr-3"></span>
FILMS D'ACTION COMPLETS
</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="action-movies">
<!-- Movie cards will be added here by JavaScript -->
</div>
</section>
<!-- Comédies -->
<section class="mb-16" id="comedy-movies-section">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<span class="w-1 h-8 bg-red-500 mr-3"></span>
COMÉDIES FRANÇAISES
</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="comedy-movies">
<!-- Movie cards will be added here by JavaScript -->
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-gray-900 py-12 px-6 md:px-16">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold text-red-500 mb-4">FLIXVISION</h3>
<p class="text-gray-400">Plateforme de streaming de films du domaine public et de contenus gratuits.</p>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Navigation</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Accueil</a></li>
<li><a href="#films" class="text-gray-400 hover:text-white transition">Films</a></li>
<li><a href="#series" class="text-gray-400 hover:text-white transition">Séries</a></li>
<li><a href="#documentaires" class="text-gray-400 hover:text-white transition">Documentaires</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Informations</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">À propos</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Politique de confidentialité</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Conditions d'utilisation</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Nous suivre</h4>
<div class="flex space-x-4">
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-red-500 transition">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-red-500 transition">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-red-500 transition">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-red-500 transition">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
</div>
<div class="max-w-7xl mx-auto pt-8 mt-8 border-t border-gray-800 text-center text-gray-500">
<p>&copy; 2023 FlixVision. Tous droits réservés. Tous les films sont disponibles gratuitement dans le domaine public.</p>
</div>
</footer>
<!-- Video Player Container (hidden by default) -->
<div id="video-container" class="video-container hidden">
<div class="video-player">
<button id="close-btn" class="close-btn">
<i class="fas fa-times"></i>
</button>
<iframe id="video-player" width="100%" height="600" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<script>
// Movie data with complete films (public domain or free on YouTube)
const movies = [
// New free movies (French versions)
{
title: "Le Fabuleux Destin d'Amélie Poulain",
poster: "https://m.media-amazon.com/images/M/MV5BNDg4NjM1YjMtYmNhZC00MjM0LWFiZmYtNGY1YjA3MzZmODc5XkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_FMjpg_UX1000_.jpg",
year: 2001,
rating: 8.3,
category: "new",
video: "https://www.youtube.com/embed/sECzJY07oK4",
lang: "fr"
},
{
title: "Intouchables",
poster: "https://m.media-amazon.com/images/M/MV5BMTYxNDA3MDQwNl5BMl5BanBnXkFtZTcwNTU4Mzc1Nw@@._V1_FMjpg_UX1000_.jpg",
year: 2011,
rating: 8.5,
category: "new",
video: "https://www.youtube.com/embed/34WIbmXkewU",
lang: "fr"
},
{
title: "La Haine",
poster: "https://m.media-amazon.com/images/M/MV5BNDNiOTA5YjktY2Q0Ni00ODgzLWE5MWItNGExM2U1OTBkMDZiXkEyXkFqcGdeQXVyMjQzMzQzODY@._V1_FMjpg_UX1000_.jpg",
year: 1995,
rating: 8.1,
category: "new",
video: "https://www.youtube.com/embed/6J0Q4kQo25c",
lang: "fr"
},
{
title: "Le Dîner de Cons",
poster: "https://m.media-amazon.com/images/M/MV5BMTQ0NTk3MTQ5Nl5BMl5BanBnXkFtZTgwMDU2MTE5MDE@._V1_FMjpg_UX1000_.jpg",
year: 1998,
rating: 7.7,
category: "new",
video: "https://www.youtube.com/embed/5HZR1vAD9cA",
lang: "fr"
},
{
title: "Bienvenue chez les Ch'tis",
poster: "https://m.media-amazon.com/images/M/MV5BMTc1ODk1NjQ4N15BMl5BanBnXkFtZTcwNzMzNTQ5MQ@@._V1_FMjpg_UX1000_.jpg",
year: 2008,
rating: 7.1,
category: "new",
video: "https://www.youtube.com/embed/5hGzB0OO0QY",
lang: "fr"
},
// Classic French movies
{
title: "Les Tontons Flingueurs",
poster: "https://m.media-amazon.com/images/M/MV5BMTU0MjU1OTI0N15BMl5BanBnXkFtZTgwMDQxNDM5MzE@._V1_FMjpg_UX1000_.jpg",
year: 1963,
rating: 8.0,
category: "classic",
video: "https://www.youtube.com/embed/5hGzB0OO0QY",
lang: "fr"
},
{
title: "Le Salaire de la Peur",
poster: "https://m.media-amazon.com/images/M/MV5BZDdkNzMwZmUtY2Q5MS00ZmM2LWJhYjItYTBjMWY0MGM4MDRjXkEyXkFqcGdeQXVyNTA4NzY1MzY@._V1_FMjpg_UX1000_.jpg",
year: 1953,
rating: 8.1,
category: "classic",
video: "https://www.youtube.com/embed/0VQRkulo9JY",
lang: "fr"
},
{
title: "Les Vacances de Monsieur Hulot",
poster: "https://m.media-amazon.com/images/M/MV5BMTQ1Mzg3Nzk0N15BMl5BanBnXkFtZTgwNTk2NTcxMTE@._V1_FMjpg_UX1000_.jpg",
year: 1953,
rating: 7.9,
category: "classic",
video: "https://www.youtube.com/embed/3I5QlVYFG50",
lang: "fr"
},
{
title: "Le Samouraï",
poster: "https://m.media-amazon.com/images/M/MV5BYjBkODU3NGItNGY2Ni00M2RlLTkzMzUtMjc1MmYzYjQ3Mzg5XkEyXkFqcGdeQXVyMjUzOTY1NTc@._V1_FMjpg_UX1000_.jpg",
year: 1967,
rating: 8.0,
category: "classic",
video: "https://www.youtube.com/embed/6SfN1v0R5u8",
lang: "fr"
},
{
title: "Le Cercle Rouge",
poster: "https://m.media-amazon.com/images/M/MV5BNmI0Y2RmYTMtNjNjNy00YjVlLThhNzktNGQ1MWY3YzcxNmY3XkEyXkFqcGdeQXVyMjUzOTY1NTc@._V1_FMjpg_UX1000_.jpg",
year: 1970,
rating: 8.1,
category: "classic",
video: "https://www.youtube.com/embed/zvT1zYgX6j4",
lang: "fr"
},
// Action movies (French versions)
{
title: "Léon",
poster: "https://m.media-amazon.com/images/M/MV5BODllNWE0MmEtYjUwZi00ZjY3LThmNmQtZjZlMjI2YTZjYmQ0XkEyXkFqcGdeQXVyNTc1NTQxODI@._V1_FMjpg_UX1000_.jpg",
year: 1994,
rating: 8.5,
category: "action",
video: "https://www.youtube.com/embed/aNQqoExfQsg",
lang: "fr"
},
{
title: "Nikita",
poster: "https://m.media-amazon.com/images/M/MV5BMTM0NjI0NzEyMV5BMl5BanBnXkFtZTcwMDQyMjYyMQ@@._V1_FMjpg_UX1000_.jpg",
year: 1990,
rating: 7.3,
category: "action",
video: "https://www.youtube.com/embed/Rh9Fv6HUr2E",
lang: "fr"
},
{
title: "Banlieue 13",
poster: "https://m.media-amazon.com/images/M/MV5BMTU0OTc3ODk4Ml5BMl5BanBnXkFtZTgwMDA4MzkxMDE@._V1_FMjpg_UX1000_.jpg",
year: 2004,
rating: 7.0,
category: "action",
video: "https://www.youtube.com/embed/Nj7Yf0tUf1w",
lang: "fr"
},
{
title: "Taxi",
poster: "https://m.media-amazon.com/images/M/MV5BM2FiOWE5MjctYzU5YS00NmUwLThjNWItZDBiYmNhYTk0ZWI5XkEyXkFqcGdeQXVyMjQzMzQzODY@._V1_FMjpg_UX1000_.jpg",
year: 1998,
rating: 6.9,
category: "action",
video: "https://www.youtube.com/embed/Nj7Yf0tUf1w",
lang: "fr"
},
{
title: "Le Professionnel",
poster: "https://m.media-amazon.com/images/M/MV5BMTY3NTY4NjUzOV5BMl5BanBnXkFtZTgwODk1OTAwMzE@._V1_FMjpg_UX1000_.jpg",
year: 1981,
rating: 7.5,
category: "action",
video: "https://www.youtube.com/embed/0VQRkulo9JY",
lang: "fr"
},
// French comedies
{
title: "La Grande Vadrouille",
poster: "https://m.media-amazon.com/images/M/MV5BMWM0NWJjODctYzVhZS00ZTI1LTk0ZDYtM2Q5Y2UwOTY4YjFmXkEyXkFqcGdeQXVyMjQzMzQzODY@._V1_FMjpg_UX1000_.jpg",
year: 1966,
rating: 7.9,
category: "comedy",
video: "https://www.youtube.com/embed/5hGzB0OO0QY",
lang: "fr"
},
{
title: "Les Visiteurs",
poster: "https://m.media-amazon.com/images/M/MV5BN2Y0Y2FiYjItYjQ5Yy00ZTAwLTg0NTgtOTAyYzEzZjU5YjljXkEyXkFqcGdeQXVyMjQzMzQzODY@._V1_FMjpg_UX1000_.jpg",
year: 1993,
rating: 7.1,
category: "comedy",
video: "https://www.youtube.com/embed/5hGzB0OO0QY",
lang: "fr"
},
{
title: "OSS 117 : Le Caire nid d'espions",
poster: "https://m.media-amazon.com/images/M/MV5BNjQwZDIyNjAtZGQxMC00OTY2LThkZDYtMTM5OWQzYzA0NDU5XkEyXkFqcGdeQXVyMjQzMzQzODY@._V1_FMjpg_UX1000_.jpg",
year: 2006,
rating: 7.0,
category: "comedy",
video: "https://www.youtube.com/embed/5hGzB0OO0QY",
lang: "fr"
},
{
title: "Astérix et Obélix : Mission Cléopâtre",
poster: "https://m.media-amazon.com/images/M/MV5BMTEwNjQ2OTM3ODVeQTJeQWpwZ15BbWU3MDQ2Njc2NTE@._V1_FMjpg_UX1000_.jpg",
year: 2002,
rating: 6.8,
category: "comedy",
video: "https://www.youtube.com/embed/5hGzB0OO0QY",
lang: "fr"
},
{
title: "Le Père Noël est une ordure",
poster: "https://m.media-amazon.com/images/M/MV5BNWYyM2Y0YzktYzQ5Yy00YzY0LTk5YzQtYzUwMWY5NzQ3NWY5XkEyXkFqcGdeQXVyMjQzMzQzODY@._V1_FMjpg_UX1000_.jpg",
year: 1982,
rating: 7.6,
category: "comedy",
video: "https://www.youtube.com/embed/5hGzB0OO0QY",
lang: "fr"
}
];
// Function to create movie card
function createMovieCard(movie) {
const card = document.createElement('div');
card.className = 'movie-card relative rounded-lg overflow-hidden cursor-pointer';
card.innerHTML = `
<div class="relative">
<img src="${movie.poster}" alt="${movie.title}" class="movie-poster" onerror="this.onerror=null;this.src='https://via.placeholder.com/300x450?text=Image+Not+Available'">
<div class="free-badge">GRATUIT</div>
<div class="play-icon absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 rounded-lg">
<div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center">
<i class="fas fa-play text-white"></i>
</div>
</div>
</div>
<div class="mt-3">
<h3 class="font-semibold truncate">${movie.title}</h3>
<div class="flex justify-between text-sm text-gray-400 mt-1">
<span>${movie.year}</span>
<span class="flex items-center">
<i class="fas fa-star text-yellow-400 mr-1"></i>
${movie.rating}
</span>
</div>
</div>
`;
// Play movie when clicked
card.addEventListener('click', () => {
playMovie(movie.video, movie.title);
});
return card;
}
// Function to play movie
function playMovie(videoUrl, title) {
const videoContainer = document.getElementById('video-container');
const videoPlayer = document.getElementById('video-player');
const closeBtn = document.getElementById('close-btn');
// Set video source
videoPlayer.src = videoUrl + "?autoplay=1";
// Show video container
videoContainer.classList.remove('hidden');
// Close button event
closeBtn.addEventListener('click', () => {
videoContainer.classList.add('hidden');
videoPlayer.src = "";
});
// Close when clicking outside
videoContainer.addEventListener('click', (e) => {
if (e.target === videoContainer) {
videoContainer.classList.add('hidden');
videoPlayer.src = "";
}
});
}
// Function to render movies by category
function renderMovies() {
const newContainer = document.getElementById('new-movies');
const classicContainer = document.getElementById('classic-movies');
const actionContainer = document.getElementById('action-movies');
const comedyContainer = document.getElementById('comedy-movies');
// Clear containers
newContainer.innerHTML = '';
classicContainer.innerHTML = '';
actionContainer.innerHTML = '';
comedyContainer.innerHTML = '';
// Filter and render movies by category
movies.forEach(movie => {
const card = createMovieCard(movie);
if (movie.category === 'new') {
newContainer.appendChild(card);
} else if (movie.category === 'classic') {
classicContainer.appendChild(card);
} else if (movie.category === 'action') {
actionContainer.appendChild(card);
} else if (movie.category === 'comedy') {
comedyContainer.appendChild(card);
}
});
}
// Initialize the page
document.addEventListener('DOMContentLoaded', () => {
renderMovies();
// Navigation links
document.getElementById('home-link').addEventListener('click', (e) => {
e.preventDefault();
window.scrollTo({top: 0, behavior: 'smooth'});
});
document.getElementById('movies-link').addEventListener('click', (e) => {
e.preventDefault();
document.getElementById('films').scrollIntoView({behavior: 'smooth'});
});
// Watch now button
document.getElementById('watch-now-btn').addEventListener('click', () => {
// Play first movie
playMovie(movies[0].video, movies[0].title);
});
// Genre tags
document.querySelectorAll('.genre-tag').forEach(tag => {
tag.addEventListener('click', (e) => {
const genre = e.target.getAttribute('data-genre');
let sectionId = '';
if (genre === 'action') sectionId = 'action-movies-section';
else if (genre === 'comedy') sectionId = 'comedy-movies-section';
else if (genre === 'classic') sectionId = 'classic-movies-section';
else if (genre === 'drama') sectionId = 'films';
else if (genre === 'horror') sectionId = 'films';
document.getElementById(sectionId).scrollIntoView({behavior: 'smooth'});
});
});
// Language selector
document.querySelectorAll('.language-dropdown a').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const lang = e.target.getAttribute('data-lang');
alert(`Langue changée en ${e.target.textContent}. Cette fonctionnalité serait implémentée avec une vraie traduction dans une application complète.`);
});
});
});
</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/flix-vision" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>