Spaces:

docto41
/

flix-vision

Running

App Files Files Community

docto41 commited on May 5

Commit

577cbe6

verified ·

1 Parent(s): bc14bd9

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +518 -19
prompts.txt +2 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Flix Vision
-emoji: 🐢
-colorFrom: gray
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: flix-vision
+emoji: 🐳
+colorFrom: yellow
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,518 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FlixVision - Votre divertissement sans limites</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;
+        }
+    </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">Accueil</a>
+            <a href="#" class="text-white hover:text-red-500 transition">Films</a>
+            <a href="#" class="text-white hover:text-red-500 transition">Séries</a>
+            <a href="#" class="text-white hover:text-red-500 transition">Documentaires</a>
+            <a href="#" class="text-white hover:text-red-500 transition">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="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">Votre divertissement <span class="text-red-500">sans limites</span></h1>
+            <p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl">Des milliers de films, séries et documentaires à portée de main. Regardez ce que vous voulez, quand vous voulez, 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">Action</span>
+                <span class="genre-tag bg-gray-800 text-white px-4 py-2 rounded-full cursor-pointer">Aventure</span>
+                <span class="genre-tag bg-gray-800 text-white px-4 py-2 rounded-full cursor-pointer">Comédie</span>
+                <span class="genre-tag bg-gray-800 text-white px-4 py-2 rounded-full cursor-pointer">Drame</span>
+                <span class="genre-tag bg-gray-800 text-white px-4 py-2 rounded-full cursor-pointer">Science-fiction</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">
+                <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">
+        <!-- Trending Now -->
+        <section class="mb-16">
+            <h2 class="text-2xl font-bold mb-6 flex items-center">
+                <span class="w-1 h-8 bg-red-500 mr-3"></span>
+                TENDANCES ACTUELLES
+            </h2>
+            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="trending-movies">
+                <!-- Movie cards will be added here by JavaScript -->
+            </div>
+        </section>
+        <!-- Popular Movies -->
+        <section class="mb-16">
+            <h2 class="text-2xl font-bold mb-6 flex items-center">
+                <span class="w-1 h-8 bg-red-500 mr-3"></span>
+                FILMS POPULAIRES
+            </h2>
+            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="popular-movies">
+                <!-- Movie cards will be added here by JavaScript -->
+            </div>
+        </section>
+        <!-- TV Series -->
+        <section class="mb-16">
+            <h2 class="text-2xl font-bold mb-6 flex items-center">
+                <span class="w-1 h-8 bg-red-500 mr-3"></span>
+                SÉRIES TÉLÉVISÉES
+            </h2>
+            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="tv-series">
+                <!-- Movie cards will be added here by JavaScript -->
+            </div>
+        </section>
+        <!-- Documentaries -->
+        <section class="mb-16">
+            <h2 class="text-2xl font-bold mb-6 flex items-center">
+                <span class="w-1 h-8 bg-red-500 mr-3"></span>
+                DOCUMENTAIRES
+            </h2>
+            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="documentaries">
+                <!-- 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">Votre plateforme de streaming préférée avec des milliers de contenus disponibles sans publicité.</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="#" class="text-gray-400 hover:text-white transition">Films</a></li>
+                    <li><a href="#" class="text-gray-400 hover:text-white transition">Séries</a></li>
+                    <li><a href="#" 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.</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>
+            <video id="video-player" controls autoplay class="w-full">
+                Votre navigateur ne supporte pas la lecture de vidéos.
+            </video>
+        </div>
+    </div>
+    <script>
+        // Sample movie data with real movie posters from TMDB and trailer links
+        const movies = [
+            {
+                title: "John Wick 4",
+                poster: "https://image.tmdb.org/t/p/w500/vZloFAK7NmvMGKE7VkF5UHaz0I.jpg",
+                year: 2023,
+                rating: 8.1,
+                category: "trending",
+                trailer: "https://www.youtube.com/embed/qEVUtrk8_B4?autoplay=1"
+            },
+            {
+                title: "Avatar: La Voie de l'eau",
+                poster: "https://image.tmdb.org/t/p/w500/jlGmlFOcfo8n5tURmhC7YVd4Iyy.jpg",
+                year: 2022,
+                rating: 7.6,
+                category: "trending",
+                trailer: "https://www.youtube.com/embed/d9MyW72ELq0?autoplay=1"
+            },
+            {
+                title: "Oppenheimer",
+                poster: "https://image.tmdb.org/t/p/w500/8Gxv8gS8UQYivj7OUu5S0QSC0WI.jpg",
+                year: 2023,
+                rating: 8.5,
+                category: "trending",
+                trailer: "https://www.youtube.com/embed/uYPbbksJxIg?autoplay=1"
+            },
+            {
+                title: "Barbie",
+                poster: "https://image.tmdb.org/t/p/w500/iuFNMS8U5cb6xfzi51Dbkovj7vM.jpg",
+                year: 2023,
+                rating: 7.2,
+                category: "trending",
+                trailer: "https://www.youtube.com/embed/pBk4NYhWNMM?autoplay=1"
+            },
+            {
+                title: "Mission: Impossible 7",
+                poster: "https://image.tmdb.org/t/p/w500/NNxYkU70HPurnNCSiCjYAmacwm.jpg",
+                year: 2023,
+                rating: 7.7,
+                category: "trending",
+                trailer: "https://www.youtube.com/embed/avz06PDqDbM?autoplay=1"
+            },
+            {
+                title: "Les Gardiens de la Galaxie 3",
+                poster: "https://image.tmdb.org/t/p/w500/8oYtPHAhQld7kO5zIMaWevfmMq4.jpg",
+                year: 2023,
+                rating: 8.1,
+                category: "movies",
+                trailer: "https://www.youtube.com/embed/JqcncLPi9zw?autoplay=1"
+            },
+            {
+                title: "Spider-Man: Across the Spider-Verse",
+                poster: "https://image.tmdb.org/t/p/w500/4HodYYKEIsGOdinkGi2Ucz6X9i0.jpg",
+                year: 2023,
+                rating: 8.6,
+                category: "movies",
+                trailer: "https://www.youtube.com/embed/cqGjhVJWtEg?autoplay=1"
+            },
+            {
+                title: "The Batman",
+                poster: "https://image.tmdb.org/t/p/w500/AfP4fkyL5q9Xm8kujzDfaYf6Jkp.jpg",
+                year: 2022,
+                rating: 7.7,
+                category: "movies",
+                trailer: "https://www.youtube.com/embed/mqqft2x_Aa4?autoplay=1"
+            },
+            {
+                title: "Dune",
+                poster: "https://image.tmdb.org/t/p/w500/8L7Ld8XxxyxQyOw7QYJPIj4x6bL.jpg",
+                year: 2021,
+                rating: 7.9,
+                category: "movies",
+                trailer: "https://www.youtube.com/embed/8g18jFHCLXk?autoplay=1"
+            },
+            {
+                title: "Interstellar",
+                poster: "https://image.tmdb.org/t/p/w500/gEU2QniE6E77NI6lCU6MxlNBvIx.jpg",
+                year: 2014,
+                rating: 8.4,
+                category: "movies",
+                trailer: "https://www.youtube.com/embed/zSWdZVtXT7E?autoplay=1"
+            },
+            {
+                title: "Stranger Things",
+                poster: "https://image.tmdb.org/t/p/w500/49WJfeN0moxb9IPfGn8eoqFUmXM.jpg",
+                year: 2022,
+                rating: 8.7,
+                category: "series",
+                trailer: "https://www.youtube.com/embed/b9EkMc79ZSU?autoplay=1"
+            },
+            {
+                title: "The Last of Us",
+                poster: "https://image.tmdb.org/t/p/w500/uKvVjHNqB5VmOrdxqAt2F7J78ED.jpg",
+                year: 2023,
+                rating: 8.8,
+                category: "series",
+                trailer: "https://www.youtube.com/embed/uLtkt8BonwM?autoplay=1"
+            },
+            {
+                title: "The Mandalorian",
+                poster: "https://image.tmdb.org/t/p/w500/eU1i6eHXlzMOlEq0ku1Rzq7Y4wA.jpg",
+                year: 2023,
+                rating: 8.5,
+                category: "series",
+                trailer: "https://www.youtube.com/embed/eW7Twd85m2g?autoplay=1"
+            },
+            {
+                title: "House of the Dragon",
+                poster: "https://image.tmdb.org/t/p/w500/z2yahl2uefxDCl0nogcRBstwruJ.jpg",
+                year: 2022,
+                rating: 8.5,
+                category: "series",
+                trailer: "https://www.youtube.com/embed/DotnJ7tTA34?autoplay=1"
+            },
+            {
+                title: "The Witcher",
+                poster: "https://image.tmdb.org/t/p/w500/7vjaCdMw15FEbXyLQTVa04URsPm.jpg",
+                year: 2021,
+                rating: 8.0,
+                category: "series",
+                trailer: "https://www.youtube.com/embed/ndl1W4ltcmg?autoplay=1"
+            },
+            {
+                title: "Notre Planète",
+                poster: "https://image.tmdb.org/t/p/w500/hW0q5tqQztqj8xPmQK4vqZQEgBx.jpg",
+                year: 2019,
+                rating: 9.3,
+                category: "documentaries",
+                trailer: "https://www.youtube.com/embed/aETNYyrqNYE?autoplay=1"
+            },
+            {
+                title: "The Social Dilemma",
+                poster: "https://image.tmdb.org/t/p/w500/2QU6fDbXh6g3Tdw6XIB1TKVxqrQ.jpg",
+                year: 2020,
+                rating: 7.6,
+                category: "documentaries",
+                trailer: "https://www.youtube.com/embed/uaaC57tcci0?autoplay=1"
+            },
+            {
+                title: "Free Solo",
+                poster: "https://image.tmdb.org/t/p/w500/4QVBzI0R2qX5U3qAMV1DXh5xVf0.jpg",
+                year: 2018,
+                rating: 8.2,
+                category: "documentaries",
+                trailer: "https://www.youtube.com/embed/urRVZ4SW7WU?autoplay=1"
+            },
+            {
+                title: "My Octopus Teacher",
+                poster: "https://image.tmdb.org/t/p/w500/hv7dcqjH40lZQMmqmNsIhkV0VTF.jpg",
+                year: 2020,
+                rating: 8.1,
+                category: "documentaries",
+                trailer: "https://www.youtube.com/embed/3s0LTDhqe5A?autoplay=1"
+            },
+            {
+                title: "Seaspiracy",
+                poster: "https://image.tmdb.org/t/p/w500/xdmmd437QdjcCls8yCQxrH5YYM.jpg",
+                year: 2021,
+                rating: 8.2,
+                category: "documentaries",
+                trailer: "https://www.youtube.com/embed/1Q5CXN7soQg?autoplay=1"
+            }
+        ];
+        // 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="w-full h-64 md:h-80 object-cover rounded-lg">
+                    <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.trailer, movie.title);
+            });
+            return card;
+        }
+        // Function to play movie
+        function playMovie(trailerUrl, title) {
+            const videoContainer = document.getElementById('video-container');
+            const videoPlayer = document.getElementById('video-player');
+            const closeBtn = document.getElementById('close-btn');
+            // Set video source
+            videoPlayer.innerHTML = `
+                <source src="${trailerUrl}" type="video/mp4">
+                Votre navigateur ne supporte pas la lecture de vidéos.
+            `;
+            // Show video container
+            videoContainer.classList.remove('hidden');
+            // Close button event
+            closeBtn.addEventListener('click', () => {
+                videoContainer.classList.add('hidden');
+                videoPlayer.pause();
+            });
+            // Play video
+            videoPlayer.load();
+            videoPlayer.play();
+        }
+        // Function to render movies by category
+        function renderMovies() {
+            const trendingContainer = document.getElementById('trending-movies');
+            const popularContainer = document.getElementById('popular-movies');
+            const seriesContainer = document.getElementById('tv-series');
+            const docsContainer = document.getElementById('documentaries');
+            // Clear containers
+            trendingContainer.innerHTML = '';
+            popularContainer.innerHTML = '';
+            seriesContainer.innerHTML = '';
+            docsContainer.innerHTML = '';
+            // Filter and render movies by category
+            movies.forEach(movie => {
+                const card = createMovieCard(movie);
+                if (movie.category === 'trending') {
+                    trendingContainer.appendChild(card);
+                } else if (movie.category === 'movies') {
+                    popularContainer.appendChild(card);
+                } else if (movie.category === 'series') {
+                    seriesContainer.appendChild(card);
+                } else if (movie.category === 'documentaries') {
+                    docsContainer.appendChild(card);
+                }
+            });
+        }
+        // Initialize the page
+        document.addEventListener('DOMContentLoaded', () => {
+            renderMovies();
+        });
+    </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>

prompts.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ Votre divertissement sans limites Des milliers de films, séries et documentaires à portée de main. Regardez ce que vous voulez, quand vous voulez, sans publicité. :: AFFICHER LES VRAI AFFICHES DES FILMS ET ACTIVER LES FILMS DANS UNE NOUVEL FENERE EN BOUM
2	+ AFFICHER LES VRAIS IMAGE DU SISTE ET AJOUTER LES BOUTON PLAY POURQUE LES FILM DEMARRE DIRECTEMENT