Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FLIPP Clone</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.8) 100%); | |
| } | |
| .movie-card:hover { | |
| transform: scale(1.05); | |
| transition: transform 0.3s ease; | |
| } | |
| .category-scroll::-webkit-scrollbar { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-white"> | |
| <!-- Navigation --> | |
| <nav class="flex justify-between items-center px-8 py-4 absolute w-full z-50"> | |
| <div class="text-red-600 text-4xl font-bold">FLIPP</div> | |
| <div class="flex space-x-6"> | |
| <a href="netflix.html?category=tv" class="hover:text-gray-300">TV</a> | |
| <a href="netflix.html?category=series" class="hover:text-gray-300">Séries</a> | |
| <a href="netflix.html?category=films" class="hover:text-gray-300">Films</a> | |
| <a href="netflix.html?category=nouveautes" class="hover:text-gray-300">Nouveautés</a> | |
| <a href="netflix.html?category=maListe" class="hover:text-gray-300">Ma liste</a> | |
| <a href="iptv-setup.html" class="hover:text-gray-300">Paramètre</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="hover:text-gray-300"> | |
| <i data-feather="search"></i> | |
| </button> | |
| <button class="hover:text-gray-300"> | |
| <i data-feather="bell"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative h-screen"> | |
| <img src="http://static.photos/movie/1200x630/1" alt="Featured Movie" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 hero-gradient"></div> | |
| <div class="absolute bottom-1/4 left-8 max-w-lg"> | |
| <h1 class="text-5xl font-bold mb-4">Stranger Things</h1> | |
| <p class="text-lg mb-6">Quand un jeune garçon disparaît, une petite ville découvre un mystère impliquant des expériences secrètes, des forces surnaturelles terrifiantes et une étrange petite fille.</p> | |
| <div class="flex space-x-4"> | |
| <button class="bg-white text-black px-8 py-2 rounded flex items-center" onclick="playStream('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')"> | |
| <i data-feather="play" class="mr-2"></i> Lecture | |
| </button> | |
| <button class="bg-gray-600 bg-opacity-50 text-white px-8 py-2 rounded flex items-center"> | |
| <i data-feather="info" class="mr-2"></i> Plus d'infos | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Category Sections --> | |
| <div class="py-8 px-8"> | |
| <!-- Films --> | |
| <div id="films" class="category-section"> | |
| <h2 class="text-2xl font-bold mb-6">Films</h2> | |
| <div class="flex space-x-4 overflow-x-auto category-scroll pb-4"> | |
| <div class="movie-card flex-shrink-0 w-64 h-36 bg-gray-800 rounded overflow-hidden cursor-pointer" onclick="playStream('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')"> | |
| <img src="http://static.photos/movie/640x360/2" alt="Film 1" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="movie-card flex-shrink-0 w-64 h-36 bg-gray-800 rounded overflow-hidden cursor-pointer" onclick="playStream('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')"> | |
| <img src="http://static.photos/movie/640x360/3" alt="Film 2" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Séries --> | |
| <div id="series" class="category-section hidden"> | |
| <h2 class="text-2xl font-bold mb-6">Séries</h2> | |
| <div class="flex space-x-4 overflow-x-auto category-scroll pb-4"> | |
| <div class="movie-card flex-shrink-0 w-64 h-36 bg-gray-800 rounded overflow-hidden cursor-pointer" onclick="playStream('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')"> | |
| <img src="http://static.photos/movie/640x360/4" alt="Série 1" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="movie-card flex-shrink-0 w-64 h-36 bg-gray-800 rounded overflow-hidden cursor-pointer" onclick="playStream('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')"> | |
| <img src="http://static.photos/movie/640x360/5" alt="Série 2" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- TV Live --> | |
| <div id="tv" class="category-section hidden"> | |
| <h2 class="text-2xl font-bold mb-6">TV Live</h2> | |
| <div class="flex space-x-4 overflow-x-auto category-scroll pb-4"> | |
| <div class="movie-card flex-shrink-0 w-64 h-36 bg-gray-800 rounded overflow-hidden cursor-pointer" onclick="playStream('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')"> | |
| <img src="http://static.photos/movie/640x360/6" alt="TV 1" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="movie-card flex-shrink-0 w-64 h-36 bg-gray-800 rounded overflow-hidden cursor-pointer" onclick="playStream('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')"> | |
| <img src="http://static.photos/movie/640x360/7" alt="TV 2" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Player Modal --> | |
| <div id="playerModal" class="fixed inset-0 bg-black bg-opacity-90 hidden items-center justify-center z-50"> | |
| <video id="videoPlayer" controls autoplay class="w-3/4 h-3/4 rounded bg-black"></video> | |
| <button onclick="closePlayer()" class="absolute top-4 right-4 text-white text-3xl">×</button> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // Navigation par catégorie | |
| function showCategory(cat){ | |
| document.querySelectorAll('.category-section').forEach(s => s.classList.add('hidden')); | |
| document.getElementById(cat).classList.remove('hidden'); | |
| } | |
| // Gestion des catégories depuis l'URL | |
| function handleCategoryFromUrl() { | |
| const urlParams = new URLSearchParams(window.location.search); | |
| const category = urlParams.get('category'); | |
| if (category) { | |
| showCategory(category); | |
| } | |
| } | |
| // Lecture flux HLS | |
| function playStream(url){ | |
| const video = document.getElementById('videoPlayer'); | |
| const modal = document.getElementById('playerModal'); | |
| modal.classList.remove('hidden'); | |
| if(Hls.isSupported()){ | |
| const hls = new Hls(); | |
| hls.loadSource(url); | |
| hls.attachMedia(video); | |
| hls.on(Hls.Events.MANIFEST_PARSED, function() { | |
| video.play(); | |
| }); | |
| } else { | |
| video.src = url; | |
| video.play(); | |
| } | |
| } | |
| function closePlayer(){ | |
| const modal = document.getElementById('playerModal'); | |
| const video = document.getElementById('videoPlayer'); | |
| video.pause(); | |
| modal.classList.add('hidden'); | |
| } | |
| // Initialisation au chargement de la page | |
| document.addEventListener('DOMContentLoaded', function() { | |
| handleCategoryFromUrl(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |