|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>NEOFLIX - Cinéma Quantique</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=Orbitron:wght@400;700;900&family=Rajdhani:wght@500;700&display=swap'); |
|
|
|
|
|
:root { |
|
|
--neon-blue: #0ff0fc; |
|
|
--neon-pink: #ff00ff; |
|
|
--neon-purple: #9d00ff; |
|
|
--dark-space: #0a0a1a; |
|
|
--matrix-green: #00ff41; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Rajdhani', 'Orbitron', sans-serif; |
|
|
background-color: var(--dark-space); |
|
|
color: white; |
|
|
overflow-x: hidden; |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
.neon-text { |
|
|
text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue); |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
} |
|
|
|
|
|
.neon-border { |
|
|
box-shadow: 0 0 10px var(--neon-blue), inset 0 0 10px var(--neon-blue); |
|
|
border: 1px solid var(--neon-blue); |
|
|
} |
|
|
|
|
|
.neon-button { |
|
|
transition: all 0.3s ease-out; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.neon-button:hover { |
|
|
box-shadow: 0 0 15px var(--neon-blue), 0 0 25px var(--neon-pink); |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.neon-button::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -50%; |
|
|
left: -50%; |
|
|
width: 200%; |
|
|
height: 200%; |
|
|
background: linear-gradient( |
|
|
to bottom right, |
|
|
rgba(255, 255, 255, 0.3) 0%, |
|
|
rgba(255, 255, 255, 0) 60% |
|
|
); |
|
|
transform: rotate(30deg); |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.neon-button:hover::before { |
|
|
left: 100%; |
|
|
} |
|
|
|
|
|
.glow { |
|
|
animation: glow 2s infinite alternate; |
|
|
} |
|
|
|
|
|
@keyframes glow { |
|
|
from { |
|
|
box-shadow: 0 0 5px var(--neon-blue); |
|
|
} |
|
|
to { |
|
|
box-shadow: 0 0 20px var(--neon-blue), 0 0 30px var(--neon-pink); |
|
|
} |
|
|
} |
|
|
|
|
|
.holographic-card { |
|
|
background: rgba(10, 10, 26, 0.7); |
|
|
backdrop-filter: blur(10px); |
|
|
border-radius: 15px; |
|
|
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.holographic-card::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient( |
|
|
90deg, |
|
|
transparent, |
|
|
rgba(255, 255, 255, 0.1), |
|
|
transparent |
|
|
); |
|
|
transition: 0.5s; |
|
|
} |
|
|
|
|
|
.holographic-card:hover { |
|
|
transform: translateY(-10px) scale(1.03); |
|
|
box-shadow: 0 0 20px var(--neon-pink), 0 0 40px rgba(255, 0, 255, 0.3); |
|
|
} |
|
|
|
|
|
.holographic-card:hover::before { |
|
|
left: 100%; |
|
|
} |
|
|
|
|
|
.scanline { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient( |
|
|
to bottom, |
|
|
rgba(255, 255, 255, 0) 0%, |
|
|
rgba(255, 255, 255, 0.1) 50%, |
|
|
rgba(255, 255, 255, 0) 100% |
|
|
); |
|
|
background-size: 100% 6px; |
|
|
animation: scanline 6s linear infinite; |
|
|
pointer-events: none; |
|
|
z-index: 9999; |
|
|
mix-blend-mode: overlay; |
|
|
} |
|
|
|
|
|
@keyframes scanline { |
|
|
0% { |
|
|
background-position: 0 0; |
|
|
} |
|
|
100% { |
|
|
background-position: 0 100vh; |
|
|
} |
|
|
} |
|
|
|
|
|
.matrix-fall { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><text x="10" y="20" font-family="monospace" font-size="16" fill="rgba(0,255,255,0.05)">0</text><text x="30" y="40" font-family="monospace" font-size="16" fill="rgba(0,255,255,0.05)">1</text><text x="50" y="60" font-family="monospace" font-size="16" fill="rgba(0,255,255,0.05)">0</text><text x="70" y="80" font-family="monospace" font-size="16" fill="rgba(0,255,255,0.05)">1</text></svg>'); |
|
|
opacity: 0.3; |
|
|
animation: matrixFall 100s linear infinite; |
|
|
pointer-events: none; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
@keyframes matrixFall { |
|
|
0% { |
|
|
background-position: 0 0; |
|
|
} |
|
|
100% { |
|
|
background-position: 0 1000px; |
|
|
} |
|
|
} |
|
|
|
|
|
.robot-voice { |
|
|
position: relative; |
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
border-left: 3px solid var(--neon-blue); |
|
|
padding: 1rem; |
|
|
margin: 1rem 0; |
|
|
border-radius: 0 8px 8px 0; |
|
|
} |
|
|
|
|
|
.robot-voice::before { |
|
|
content: "🤖"; |
|
|
position: absolute; |
|
|
left: -30px; |
|
|
top: 10px; |
|
|
font-size: 1.2rem; |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { |
|
|
opacity: 0.5; |
|
|
} |
|
|
50% { |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
opacity: 0.5; |
|
|
} |
|
|
} |
|
|
|
|
|
.loading-bar { |
|
|
height: 4px; |
|
|
background: linear-gradient(90deg, #0ff0fc, #ff00ff); |
|
|
animation: loading 2s infinite; |
|
|
position: relative; |
|
|
border-radius: 2px; |
|
|
} |
|
|
|
|
|
@keyframes loading { |
|
|
0% { width: 0%; left: 0; } |
|
|
50% { width: 100%; left: 0; } |
|
|
100% { width: 0%; left: 100%; } |
|
|
} |
|
|
|
|
|
.loading-more { |
|
|
display: none; |
|
|
text-align: center; |
|
|
padding: 30px 0; |
|
|
color: var(--neon-blue); |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.cyberpunk-input { |
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
border: 1px solid var(--neon-blue); |
|
|
color: white; |
|
|
padding: 12px 20px; |
|
|
border-radius: 30px; |
|
|
font-family: 'Rajdhani', sans-serif; |
|
|
font-weight: 500; |
|
|
transition: all 0.3s; |
|
|
box-shadow: 0 0 10px rgba(15, 240, 252, 0.3); |
|
|
} |
|
|
|
|
|
.cyberpunk-input:focus { |
|
|
outline: none; |
|
|
box-shadow: 0 0 15px var(--neon-blue), 0 0 25px rgba(255, 0, 255, 0.5); |
|
|
border-color: var(--neon-pink); |
|
|
} |
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #0ff0fc, #ff00ff); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.cyberpunk-select { |
|
|
appearance: none; |
|
|
background: rgba(0, 0, 0, 0.7) url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230ff0fc'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e") no-repeat; |
|
|
background-position: right 10px center; |
|
|
border: 1px solid var(--neon-blue); |
|
|
color: white; |
|
|
padding: 10px 40px 10px 15px; |
|
|
border-radius: 30px; |
|
|
font-family: 'Rajdhani', sans-serif; |
|
|
font-weight: 500; |
|
|
transition: all 0.3s; |
|
|
box-shadow: 0 0 10px rgba(15, 240, 252, 0.3); |
|
|
} |
|
|
|
|
|
.cyberpunk-select:focus { |
|
|
outline: none; |
|
|
box-shadow: 0 0 15px var(--neon-blue); |
|
|
} |
|
|
|
|
|
.flicker { |
|
|
animation: flicker 5s infinite alternate; |
|
|
} |
|
|
|
|
|
@keyframes flicker { |
|
|
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { |
|
|
opacity: 1; |
|
|
} |
|
|
20%, 22%, 24%, 55% { |
|
|
opacity: 0.5; |
|
|
} |
|
|
} |
|
|
|
|
|
.auto-play-indicator { |
|
|
position: absolute; |
|
|
bottom: 20px; |
|
|
left: 20px; |
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
padding: 5px 10px; |
|
|
border-radius: 20px; |
|
|
font-size: 0.8rem; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
.auto-play-indicator i { |
|
|
margin-right: 5px; |
|
|
color: var(--neon-blue); |
|
|
} |
|
|
|
|
|
.video-placeholder { |
|
|
position: relative; |
|
|
width: 100%; |
|
|
height: 0; |
|
|
padding-bottom: 56.25%; |
|
|
background: linear-gradient(135deg, #0a0a1a, #1a1a3a); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.video-placeholder::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient( |
|
|
45deg, |
|
|
rgba(15, 240, 252, 0.1) 0%, |
|
|
rgba(255, 0, 255, 0.1) 50%, |
|
|
rgba(15, 240, 252, 0.1) 100% |
|
|
); |
|
|
animation: gradientMove 8s linear infinite; |
|
|
background-size: 200% 200%; |
|
|
} |
|
|
|
|
|
@keyframes gradientMove { |
|
|
0% { |
|
|
background-position: 0% 50%; |
|
|
} |
|
|
50% { |
|
|
background-position: 100% 50%; |
|
|
} |
|
|
100% { |
|
|
background-position: 0% 50%; |
|
|
} |
|
|
} |
|
|
|
|
|
.genre-tag { |
|
|
display: inline-block; |
|
|
background: rgba(15, 240, 252, 0.2); |
|
|
color: var(--neon-blue); |
|
|
padding: 3px 10px; |
|
|
border-radius: 20px; |
|
|
font-size: 0.7rem; |
|
|
margin-right: 5px; |
|
|
margin-bottom: 5px; |
|
|
border: 1px solid var(--neon-blue); |
|
|
} |
|
|
|
|
|
.floating-notification { |
|
|
position: fixed; |
|
|
bottom: 100px; |
|
|
right: 30px; |
|
|
background: rgba(0, 0, 0, 0.9); |
|
|
border-left: 4px solid var(--neon-blue); |
|
|
padding: 15px; |
|
|
border-radius: 5px; |
|
|
box-shadow: 0 0 20px rgba(15, 240, 252, 0.5); |
|
|
transform: translateX(120%); |
|
|
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); |
|
|
z-index: 1000; |
|
|
max-width: 300px; |
|
|
} |
|
|
|
|
|
.floating-notification.show { |
|
|
transform: translateX(0); |
|
|
} |
|
|
|
|
|
.floating-notification i { |
|
|
margin-right: 10px; |
|
|
color: var(--neon-blue); |
|
|
} |
|
|
|
|
|
.progress-ring { |
|
|
position: relative; |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
} |
|
|
|
|
|
.progress-ring__circle { |
|
|
transform: rotate(-90deg); |
|
|
transform-origin: 50% 50%; |
|
|
} |
|
|
|
|
|
.progress-ring__circle--background { |
|
|
stroke: rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.progress-ring__circle--progress { |
|
|
stroke: var(--neon-blue); |
|
|
transition: stroke-dashoffset 0.3s; |
|
|
} |
|
|
|
|
|
.progress-text { |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
font-size: 0.7rem; |
|
|
font-weight: bold; |
|
|
color: var(--neon-blue); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="relative overflow-x-hidden"> |
|
|
<div class="scanline"></div> |
|
|
<div class="matrix-fall"></div> |
|
|
|
|
|
|
|
|
<nav class="bg-black bg-opacity-90 backdrop-filter backdrop-blur-lg z-50 fixed w-full border-b border-gray-800"> |
|
|
<div class="container mx-auto px-4 sm:px-6 py-3 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="neon-border rounded-full w-10 h-10 flex items-center justify-center glow"> |
|
|
<i class="fas fa-robot text-xl text-cyan-400"></i> |
|
|
</div> |
|
|
<h1 class="text-2xl font-bold neon-text"> |
|
|
<span class="gradient-text">NEO</span><span class="text-pink-500">FLIX</span> |
|
|
</h1> |
|
|
</div> |
|
|
|
|
|
<div class="hidden lg:flex items-center space-x-6"> |
|
|
<a href="#" class="text-white hover:text-cyan-400 transition flex items-center"> |
|
|
<i class="fas fa-home mr-2"></i> Accueil |
|
|
</a> |
|
|
<a href="#" class="text-white hover:text-cyan-400 transition flex items-center"> |
|
|
<i class="fas fa-film mr-2"></i> Films |
|
|
</a> |
|
|
<a href="#" class="text-white hover:text-cyan-400 transition flex items-center"> |
|
|
<i class="fas fa-tv mr-2"></i> Séries |
|
|
</a> |
|
|
<a href="#" class="text-white hover:text-cyan-400 transition flex items-center"> |
|
|
<i class="fas fa-bolt mr-2"></i> Nouveautés |
|
|
</a> |
|
|
<a href="#" class="text-white hover:text-cyan-400 transition flex items-center"> |
|
|
<i class="fas fa-bookmark mr-2"></i> Ma Liste |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative hidden md:block"> |
|
|
<input type="text" placeholder="Recherche vocale..." |
|
|
class="cyberpunk-input pl-4 pr-10 w-40 md:w-56"> |
|
|
<i class="fas fa-microphone absolute right-3 top-3 text-cyan-400"></i> |
|
|
</div> |
|
|
<div class="w-9 h-9 rounded-full bg-gradient-to-r from-cyan-400 to-pink-500 flex items-center justify-center cursor-pointer hover:rotate-12 transition-transform"> |
|
|
<i class="fas fa-user-astronaut text-sm"></i> |
|
|
</div> |
|
|
<button class="lg:hidden text-white focus:outline-none"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="relative pt-32 pb-20 px-4 sm:px-6"> |
|
|
<div class="absolute inset-0 bg-gradient-to-b from-cyan-900 to-transparent opacity-20 z-0"></div> |
|
|
<div class="container mx-auto flex flex-col lg:flex-row items-center relative z-10"> |
|
|
<div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10"> |
|
|
<div class="robot-voice mb-6"> |
|
|
<p class="text-cyan-300">SYSTÈME: Chargement de la vidéo sélectionnée... Lecture automatique activée.</p> |
|
|
</div> |
|
|
|
|
|
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 neon-text leading-tight"> |
|
|
<span class="gradient-text">DÉCOUVREZ</span> <span class="text-pink-500" id="movieCount">Chargement...</span> FILMS |
|
|
</h2> |
|
|
|
|
|
<p class="text-gray-300 mb-8 text-lg"> |
|
|
Plongez dans notre bibliothèque quantique de films en français. Technologie de lecture automatique IA activée pour une expérience sans interruption. |
|
|
</p> |
|
|
|
|
|
<div class="flex flex-wrap gap-3 mb-8"> |
|
|
<span class="genre-tag">Science-Fiction</span> |
|
|
<span class="genre-tag">Cyberpunk</span> |
|
|
<span class="genre-tag">IA</span> |
|
|
<span class="genre-tag">Futuriste</span> |
|
|
<span class="genre-tag">16K</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-wrap gap-3"> |
|
|
<button class="neon-button bg-cyan-500 text-black px-6 py-3 rounded-full font-bold flex items-center"> |
|
|
<i class="fas fa-play mr-2"></i> Regarder |
|
|
</button> |
|
|
<button class="neon-button neon-border text-white px-6 py-3 rounded-full font-bold flex items-center"> |
|
|
<i class="fas fa-info-circle mr-2"></i> Plus d'infos |
|
|
</button> |
|
|
<button class="neon-button bg-pink-500 text-black px-6 py-3 rounded-full font-bold flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Ma Liste |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 flex flex-wrap items-center gap-4"> |
|
|
<div class="flex items-center text-cyan-400"> |
|
|
<i class="fas fa-star mr-2"></i> |
|
|
<span>4.8/5</span> |
|
|
</div> |
|
|
<div class="flex items-center text-pink-400"> |
|
|
<i class="fas fa-eye mr-2"></i> |
|
|
<span>12.4M vues</span> |
|
|
</div> |
|
|
<div class="flex items-center text-green-400"> |
|
|
<i class="fas fa-robot mr-2"></i> |
|
|
<span>IA Recommandé</span> |
|
|
</div> |
|
|
<div class="flex items-center text-purple-400"> |
|
|
<i class="fas fa-bolt mr-2"></i> |
|
|
<span>Auto-Play</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="lg:w-1/2 relative mt-10 lg:mt-0"> |
|
|
<div class="neon-border rounded-xl overflow-hidden relative glow h-full" style="aspect-ratio: 16/9;"> |
|
|
<div id="featuredVideo" class="video-placeholder"> |
|
|
<div class="text-center z-10"> |
|
|
<div class="loading-bar mb-4 mx-auto" style="width: 200px;"></div> |
|
|
<p class="text-cyan-400 text-xl">Chargement du film vedette...</p> |
|
|
<div class="progress-ring mx-auto mt-4"> |
|
|
<svg class="progress-ring__circle" width="50" height="50"> |
|
|
<circle class="progress-ring__circle--background" stroke-width="4" fill="transparent" r="20" cx="25" cy="25"/> |
|
|
<circle class="progress-ring__circle--progress" stroke-width="4" fill="transparent" r="20" cx="25" cy="25" stroke-dasharray="125.6" stroke-dashoffset="62.8"/> |
|
|
</svg> |
|
|
<div class="progress-text">50%</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="auto-play-indicator"> |
|
|
<i class="fas fa-robot"></i> |
|
|
<span>Lecture Auto: Activée</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="absolute -bottom-6 -right-6 bg-gray-900 bg-opacity-80 rounded-full p-4 neon-border hidden lg:block"> |
|
|
<i class="fas fa-brain text-2xl text-pink-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 px-4 sm:px-6 bg-black bg-opacity-50 relative"> |
|
|
<div class="container mx-auto"> |
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8 gap-4"> |
|
|
<h3 class="text-2xl sm:text-3xl font-bold neon-text"> |
|
|
<i class="fas fa-robot text-cyan-400 mr-2"></i> |
|
|
<span>RECOMMANDATIONS</span> <span class="text-pink-500">IA</span> |
|
|
</h3> |
|
|
|
|
|
<div class="flex items-center gap-4"> |
|
|
<div class="flex items-center text-cyan-400"> |
|
|
<span class="mr-2">En direct</span> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500 pulse"></div> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<select class="cyberpunk-select"> |
|
|
<option>Trier par: Pertinence IA</option> |
|
|
<option>Popularité</option> |
|
|
<option>Date de sortie</option> |
|
|
<option>Note des utilisateurs</option> |
|
|
<option>Durée</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="robot-voice mb-8"> |
|
|
<p class="text-cyan-300">SYSTÈME IA: Analyse de vos préférences terminée. Chargement des recommandations personnalisées basées sur notre base de données quantique.</p> |
|
|
</div> |
|
|
|
|
|
<div id="moviesContainer" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 sm:gap-6"> |
|
|
|
|
|
<div class="col-span-full text-center py-10"> |
|
|
<div class="loading-bar mb-4 mx-auto" style="width: 200px;"></div> |
|
|
<p class="text-cyan-400 text-lg">Chargement des films...</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="loadingMore" class="loading-more"> |
|
|
<div class="loading-bar mb-4 mx-auto" style="width: 200px;"></div> |
|
|
<p class="text-cyan-400">Chargement automatique des films...</p> |
|
|
<div class="progress-ring mx-auto mt-4"> |
|
|
<svg class="progress-ring__circle" width="40" height="40"> |
|
|
<circle class="progress-ring__circle--background" stroke-width="3" fill="transparent" r="16" cx="20" cy="20"/> |
|
|
<circle class="progress-ring__circle--progress" stroke-width="3" fill="transparent" r="16" cx="20" cy="20" stroke-dasharray="100.48" stroke-dashoffset="50.24"/> |
|
|
</svg> |
|
|
<div class="progress-text">50%</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 px-4 sm:px-6 relative"> |
|
|
<div class="container mx-auto"> |
|
|
<h3 class="text-2xl sm:text-3xl font-bold neon-text mb-8 text-center"> |
|
|
<i class="fas fa-atom text-pink-500 mr-2"></i> |
|
|
<span>CATÉGORIES</span> <span class="text-cyan-400">QUANTIQUES</span> |
|
|
</h3> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6"> |
|
|
|
|
|
<div class="holographic-card group text-center p-6"> |
|
|
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-r from-cyan-400 to-pink-500 flex items-center justify-center neon-border"> |
|
|
<i class="fas fa-space-shuttle text-xl"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold mb-2">Science-Fiction</h4> |
|
|
<p class="text-gray-400 text-sm">12,456,789 films</p> |
|
|
<div class="mt-4"> |
|
|
<button class="text-cyan-400 text-sm flex items-center justify-center mx-auto"> |
|
|
Explorer <i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="holographic-card group text-center p-6"> |
|
|
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-r from-pink-500 to-purple-500 flex items-center justify-center neon-border"> |
|
|
<i class="fas fa-robot text-xl"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold mb-2">Cyberpunk</h4> |
|
|
<p class="text-gray-400 text-sm">8,765,432 films</p> |
|
|
<div class="mt-4"> |
|
|
<button class="text-cyan-400 text-sm flex items-center justify-center mx-auto"> |
|
|
Explorer <i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="holographic-card group text-center p-6"> |
|
|
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center neon-border"> |
|
|
<i class="fas fa-brain text-xl"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold mb-2">IA & Robots</h4> |
|
|
<p class="text-gray-400 text-sm">6,543,210 films</p> |
|
|
<div class="mt-4"> |
|
|
<button class="text-cyan-400 text-sm flex items-center justify-center mx-auto"> |
|
|
Explorer <i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="holographic-card group text-center p-6"> |
|
|
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-r from-blue-500 to-green-500 flex items-center justify-center neon-border"> |
|
|
<i class="fas fa-vr-cardboard text-xl"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold mb-2">Réalité Virtuelle</h4> |
|
|
<p class="text-gray-400 text-sm">5,678,901 films</p> |
|
|
<div class="mt-4"> |
|
|
<button class="text-cyan-400 text-sm flex items-center justify-center mx-auto"> |
|
|
Explorer <i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="holographic-card group text-center p-6"> |
|
|
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-r from-green-500 to-yellow-500 flex items-center justify-center neon-border"> |
|
|
<i class="fas fa-dna text-xl"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold mb-2">Bio-Tech</h4> |
|
|
<p class="text-gray-400 text-sm">4,321,098 films</p> |
|
|
<div class="mt-4"> |
|
|
<button class="text-cyan-400 text-sm flex items-center justify-center mx-auto"> |
|
|
Explorer <i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-10"> |
|
|
<button class="neon-button neon-border text-white px-8 py-3 rounded-full font-bold flex items-center mx-auto"> |
|
|
<i class="fas fa-chevron-circle-down mr-2"></i> Voir toutes les catégories |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 px-4 sm:px-6 bg-gradient-to-r from-cyan-900 to-purple-900 relative overflow-hidden"> |
|
|
<div class="absolute inset-0 bg-black opacity-40"></div> |
|
|
<div class="container mx-auto relative z-10"> |
|
|
<div class="text-center mb-12"> |
|
|
<h3 class="text-3xl sm:text-4xl font-bold neon-text mb-4"> |
|
|
<span class="gradient-text">ABONNEMENT</span> <span class="text-pink-500">PREMIUM</span> |
|
|
</h3> |
|
|
<p class="text-gray-300 max-w-3xl mx-auto text-lg"> |
|
|
Passez à la vitesse supérieure avec notre abonnement quantique. Accès illimité à tous les films en 16K, réalité virtuelle et avantages exclusifs. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> |
|
|
|
|
|
<div class="holographic-card p-8 text-center relative"> |
|
|
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-cyan-400 to-pink-500"></div> |
|
|
<h4 class="text-xl font-bold mb-4">BASIQUE</h4> |
|
|
<div class="text-4xl font-bold mb-6 gradient-text">9.99€<span class="text-sm text-gray-400">/mois</span></div> |
|
|
<ul class="space-y-3 mb-8 text-gray-300"> |
|
|
<li class="flex items-center justify-center"> |
|
|
<i class="fas fa-check-circle text-green-400 mr-2"></i> Accès à tous les films |
|
|
</li> |
|
|
<li class="flex items-center justify-center"> |
|
|
<i class="fas fa-check-circle text-green-400 mr-2"></i> Qualité 4K |
|
|
</li> |
|
|
<li class="flex items-center justify-center"> |
|
|
<i class="fas fa-times-circle text-red-400 mr-2"></i> Réalité Virtuelle |
|
|
</li> |
|
|
<li class="flex items-center justify-center"> |
|
|
<i class="fas fa-times-circle text-red-400 mr-2"></i> Téléchargements |
|
|
</li> |
|
|
</ul> |
|
|
<button class="neon-button neon-border text-white px-6 py-3 rounded-full font-bold w-full"> |
|
|
Choisir cette offre |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="holographic-card p-8 text-center relative transform scale-105 shadow-lg" style="z-index: 2;"> |
|
|
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-pink-500 to-purple-500"></div> |
|
|
<div class="absolute top-4 right-4 bg-pink-500 text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
POPULAIRE |
|
|
</div> |
|
|
<h4 class="text-xl font-bold mb-4">QUANTIQUE</h4> |
|
|
<div class="text-4xl font-bold mb-6 gradient-text">14.99€<span class="text-sm text-gray-400">/mois</span></div> |
|
|
<ul class="space-y-3 mb-8 text-gray-300"> |
|
|
<li class="flex items-center justify-center"> |
|
|
<i class="fas fa-check-circle text-green-400 mr-2"></i> Accès à tous les films |
|
|
</li> |
|
|
<li class="flex items-center justify-center"> |
|
|
<i class="fas fa-check-circle text-green-400 mr-2"></i> Qualité 8K |
|
|
</li> |
|
|
<li class="flex items-center justify-center"> |
|
|
<i class="fas fa-check-circle text-green-400 mr-2"></i> Réalité Virtuelle |
|
|
</li> |
|
|
<li class="flex items-center justify-center"> |
|
|
<i class="fas fa-times-circle text-red-400 mr-2"></i> Téléchargements |
|
|
</li> |
|
|
</ul> |
|
|
<button class="neon-button bg-gradient-to-r from-cyan-400 to-pink-500 text-black px-6 py-3 rounded-full font-bold w-full"> |
|
|
Choisir cette offre |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="holographic-card p-8 text-center relative"> |
|
|
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 to-blue-500"></div> |
|
|
<h4 class="text-xl font-bold mb-4">PREMIUM</h4> |
|
|
<div class="text-4xl font-bold mb-6 gradient-text">19.99€<span class="text-sm text-gray-400">/mois</span></div> |
|
|
<ul class="space-y-3 mb-8 text-gray-300"> |
|
|
<li class="flex items-center justify-center"> |
|
|
<i class="fas fa-check-circle text-green-400 mr-2"></i> Accès à tous les films |
|
|
</li> |
|
|
<li class="flex items-center justify-center"> |
|
|
<i class="fas fa-check-circle text-green-400 mr-2"></i> Qualité 16K |
|
|
</li> |
|
|
<li class="flex items-center justify-center"> |
|
|
<i class="fas fa-check-circle text-green-400 mr-2"></i> Réalité Virtuelle |
|
|
</li> |
|
|
<li class="flex items-center justify-center"> |
|
|
<i class="fas fa-check-circle text-green-400 mr-2"></i> Téléchargements |
|
|
</li> |
|
|
</ul> |
|
|
<button class="neon-button neon-border text-white px-6 py-3 rounded-full font-bold w-full"> |
|
|
Choisir cette offre |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-black bg-opacity-90 py-12 px-4 sm:px-6 relative border-t border-gray-800"> |
|
|
<div class="container mx-auto"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h4 class="text-xl font-bold neon-text mb-4 flex items-center"> |
|
|
<div class="neon-border rounded-full w-8 h-8 flex items-center justify-center mr-2"> |
|
|
<i class="fas fa-robot text-sm"></i> |
|
|
</div> |
|
|
NEOFLIX |
|
|
</h4> |
|
|
<p class="text-gray-400 mb-4"> |
|
|
Le futur du cinéma en français. Des millions de films disponibles en streaming automatique avec technologie IA quantique. |
|
|
</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-cyan-400 transition"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-cyan-400 transition"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-cyan-400 transition"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-cyan-400 transition"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-cyan-400 transition"> |
|
|
<i class="fab fa-tiktok"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h5 class="text-lg font-bold text-cyan-400 mb-4">Navigation</h5> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2 text-cyan-400"></i> Accueil</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2 text-cyan-400"></i> Films</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2 text-cyan-400"></i> Séries</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2 text-cyan-400"></i> Nouveautés</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2 text-cyan-400"></i> Ma Liste</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h5 class="text-lg font-bold text-pink-500 mb-4">Technologie</h5> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2 text-pink-400"></i> Lecteur Auto</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2 text-pink-400"></i> IA Recommandations</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2 text-pink-400"></i> Holographie</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2 text-pink-400"></i> 16K Quantique</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2 text-pink-400"></i> Audio Spatial</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h5 class="text-lg font-bold text-cyan-400 mb-4">Assistance IA</h5> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="bg-cyan-500 bg-opacity-20 rounded-full p-2 mr-3"> |
|
|
<i class="fas fa-robot text-cyan-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-300">Notre assistant IA est disponible 24/7 pour vous aider.</p> |
|
|
<button class="text-cyan-400 text-sm mt-2 flex items-center"> |
|
|
Parler à l'IA <i class="fas fa-comment-dots ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-pink-500 bg-opacity-20 rounded-full p-2 mr-3"> |
|
|
<i class="fas fa-bell text-pink-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-300">Activez les notifications pour les nouveaux films.</p> |
|
|
<button class="text-pink-400 text-sm mt-2 flex items-center"> |
|
|
Activer <i class="fas fa-toggle-on ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4"> |
|
|
<h6 class="text-sm font-bold text-gray-400 mb-2">TÉLÉCHARGER L'APP</h6> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="bg-gray-800 text-white px-3 py-2 rounded flex items-center text-xs"> |
|
|
<i class="fab fa-apple mr-1"></i> App Store |
|
|
</button> |
|
|
<button class="bg-gray-800 text-white px-3 py-2 rounded flex items-center text-xs"> |
|
|
<i class="fab fa-google-play mr-1"></i> Play Store |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-500 mb-4 md:mb-0">© 2024 NEOFLIX - Tous droits réservés</p> |
|
|
<div class="flex flex-wrap justify-center gap-4"> |
|
|
<a href="#" class="text-gray-500 hover:text-cyan-400 transition">Confidentialité</a> |
|
|
<a href="#" class="text-gray-500 hover:text-cyan-400 transition">Conditions</a> |
|
|
<a href="#" class="text-gray-500 hover:text-cyan-400 transition">Cookies</a> |
|
|
<a href="#" class="text-gray-500 hover:text-cyan-400 transition">Mentions légales</a> |
|
|
<a href="#" class="text-gray-500 hover:text-cyan-400 transition">Paramètres</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div class="fixed bottom-6 right-6 z-50"> |
|
|
<div class="relative"> |
|
|
<div class="w-14 h-14 rounded-full bg-gradient-to-r from-cyan-400 to-pink-500 flex items-center justify-center shadow-lg cursor-pointer neon-border glow hover:rotate-12 transition-transform" id="iaButton"> |
|
|
<i class="fas fa-robot text-2xl"></i> |
|
|
</div> |
|
|
<div class="absolute -top-2 -right-2 bg-red-500 rounded-full w-5 h-5 flex items-center justify-center text-xs animate-ping"> |
|
|
<span class="absolute">3</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="absolute bottom-20 right-0 w-80 bg-gray-900 rounded-lg shadow-xl neon-border hidden transform origin-bottom-right transition-all duration-300 scale-0" id="iaConsole"> |
|
|
<div class="p-4 border-b border-gray-800 flex justify-between items-center"> |
|
|
<h6 class="font-bold text-cyan-400 flex items-center"> |
|
|
<i class="fas fa-robot mr-2"></i> CONSOLE IA |
|
|
</h6> |
|
|
<button class="text-gray-400 hover:text-white" id="closeIaConsole"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-4 max-h-60 overflow-y-auto" id="iaChat"> |
|
|
<div class="text-cyan-300 text-sm mb-2 flex"> |
|
|
<div class="mr-2">🤖</div> |
|
|
<div>Bonjour! Je suis votre assistant IA. Comment puis-je vous aider?</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded p-3 mb-3"> |
|
|
<div class="flex"> |
|
|
<div class="mr-2 text-cyan-400">></div> |
|
|
<div>Rechercher des films cyberpunk</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded p-3 mb-3"> |
|
|
<div class="flex"> |
|
|
<div class="mr-2 text-pink-400">IA:</div> |
|
|
<div>J'ai trouvé 8,765,432 films cyberpunk. <a href="#" class="text-cyan-400">Voir résultats</a></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-3 border-t border-gray-800 flex"> |
|
|
<input type="text" placeholder="Parlez à l'IA..." class="flex-grow bg-gray-800 text-white px-3 py-2 rounded-l focus:outline-none"> |
|
|
<button class="bg-cyan-500 text-black px-3 py-2 rounded-r"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="floating-notification" id="autoPlayNotification"> |
|
|
<i class="fas fa-robot"></i> |
|
|
<span>Chargement automatique activé. 5 nouveaux films ajoutés.</span> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const TMDB_API_KEY = 'fb437b10727a5a4eb8d9134e29c82ae0'; |
|
|
const TMDB_BASE_URL = 'https://api.themoviedb.org/3'; |
|
|
const TMDB_IMAGE_BASE = 'https://image.tmdb.org/t/p/w500'; |
|
|
|
|
|
|
|
|
let currentPage = 1; |
|
|
let totalMovies = 0; |
|
|
let isLoading = false; |
|
|
let loadedMoviesCount = 0; |
|
|
|
|
|
|
|
|
document.getElementById('iaButton').addEventListener('click', function() { |
|
|
const console = document.getElementById('iaConsole'); |
|
|
console.classList.toggle('hidden'); |
|
|
console.classList.toggle('scale-0'); |
|
|
console.classList.toggle('scale-100'); |
|
|
|
|
|
|
|
|
if (!console.classList.contains('hidden')) { |
|
|
showNotification("Assistant IA activé. Posez-moi vos questions!"); |
|
|
} |
|
|
}); |
|
|
|
|
|
document.getElementById('closeIaConsole').addEventListener('click', function() { |
|
|
const console = document.getElementById('iaConsole'); |
|
|
console.classList.add('hidden'); |
|
|
console.classList.remove('scale-100'); |
|
|
console.classList.add('scale-0'); |
|
|
}); |
|
|
|
|
|
|
|
|
function showNotification(message) { |
|
|
const notification = document.getElementById('autoPlayNotification'); |
|
|
notification.querySelector('span').textContent = message; |
|
|
notification.classList.add('show'); |
|
|
|
|
|
setTimeout(() => { |
|
|
notification.classList.remove('show'); |
|
|
}, 5000); |
|
|
} |
|
|
|
|
|
|
|
|
function formatNumber(num) { |
|
|
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); |
|
|
} |
|
|
|
|
|
|
|
|
function simulateProgress(element, duration = 2000) { |
|
|
const circle = element.querySelector('.progress-ring__circle--progress'); |
|
|
const text = element.querySelector('.progress-text'); |
|
|
const radius = circle.r.baseVal.value; |
|
|
const circumference = radius * 2 * Math.PI; |
|
|
|
|
|
circle.style.strokeDasharray = circumference; |
|
|
circle.style.strokeDashoffset = circumference; |
|
|
|
|
|
let progress = 0; |
|
|
const interval = setInterval(() => { |
|
|
progress += 1; |
|
|
const offset = circumference - (progress / 100) * circumference; |
|
|
circle.style.strokeDashoffset = offset; |
|
|
text.textContent = `${progress}%`; |
|
|
|
|
|
if (progress >= 100) { |
|
|
clearInterval(interval); |
|
|
} |
|
|
}, duration / 100); |
|
|
} |
|
|
|
|
|
|
|
|
async function fetchPopularMovies(page = 1) { |
|
|
try { |
|
|
isLoading = true; |
|
|
document.getElementById('loadingMore').style.display = 'flex'; |
|
|
|
|
|
|
|
|
const progressElements = document.querySelectorAll('.progress-ring'); |
|
|
progressElements.forEach(el => simulateProgress(el)); |
|
|
|
|
|
const response = await fetch(`${TMDB_BASE_URL}/movie/popular?api_key=${TMDB_API_KEY}&language=fr-FR&page=${page}`); |
|
|
const data = await response.json(); |
|
|
|
|
|
if (page === 1) { |
|
|
totalMovies = data.total_results; |
|
|
document.getElementById('movieCount').textContent = formatNumber(totalMovies); |
|
|
|
|
|
|
|
|
if (data.results.length > 0) { |
|
|
loadFeaturedMovie(data.results[0]); |
|
|
} |
|
|
} |
|
|
|
|
|
return data.results; |
|
|
} catch (error) { |
|
|
console.error('Erreur lors du chargement des films:', error); |
|
|
showNotification("Erreur de connexion au serveur quantique. Réessayez..."); |
|
|
return []; |
|
|
} finally { |
|
|
isLoading = false; |
|
|
document.getElementById('loadingMore').style.display = 'none'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function loadFeaturedMovie(movie) { |
|
|
const featuredVideo = document.getElementById('featuredVideo'); |
|
|
|
|
|
|
|
|
featuredVideo.style.opacity = '0'; |
|
|
setTimeout(() => { |
|
|
if (movie.backdrop_path) { |
|
|
featuredVideo.innerHTML = ` |
|
|
<img src="${TMDB_IMAGE_BASE}${movie.backdrop_path}" alt="${movie.title}" class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent flex flex-col justify-end p-6"> |
|
|
<h3 class="text-2xl sm:text-3xl font-bold">${movie.title}</h3> |
|
|
<div class="flex flex-wrap gap-2 my-2"> |
|
|
${movie.genre_ids.slice(0, 3).map(id => { |
|
|
const genre = getGenreName(id); |
|
|
return `<span class="genre-tag">${genre}</span>`; |
|
|
}).join('')} |
|
|
</div> |
|
|
<p class="text-gray-300 text-sm sm:text-base">${movie.overview ? movie.overview.substring(0, 150) + '...' : 'Description non disponible'}</p> |
|
|
</div> |
|
|
`; |
|
|
} else { |
|
|
featuredVideo.innerHTML = ` |
|
|
<div class="w-full h-full bg-gray-800 flex items-center justify-center"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-film text-4xl text-cyan-400 mb-2"></i> |
|
|
<p class="text-cyan-400 text-xl">${movie.title}</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
featuredVideo.style.opacity = '1'; |
|
|
}, 500); |
|
|
|
|
|
|
|
|
loadedMoviesCount++; |
|
|
if (loadedMoviesCount % 5 === 0) { |
|
|
showNotification(`Chargement automatique: ${loadedMoviesCount} films chargés`); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function getGenreName(id) { |
|
|
const genres = { |
|
|
28: 'Action', |
|
|
12: 'Aventure', |
|
|
16: 'Animation', |
|
|
35: 'Comédie', |
|
|
80: 'Crime', |
|
|
99: 'Documentaire', |
|
|
18: 'Drame', |
|
|
10751: 'Familial', |
|
|
14: 'Fantastique', |
|
|
36: 'Histoire', |
|
|
27: 'Horreur', |
|
|
10402: 'Musique', |
|
|
9648: 'Mystère', |
|
|
10749: 'Romance', |
|
|
878: 'Science-Fiction', |
|
|
10770: 'Téléfilm', |
|
|
53: 'Thriller', |
|
|
10752: 'Guerre', |
|
|
37: 'Western' |
|
|
}; |
|
|
return genres[id] || 'Inconnu'; |
|
|
} |
|
|
|
|
|
|
|
|
function displayMovies(movies) { |
|
|
const moviesContainer = document.getElementById('moviesContainer'); |
|
|
|
|
|
|
|
|
if (currentPage === 1) { |
|
|
moviesContainer.innerHTML = ''; |
|
|
} |
|
|
|
|
|
movies.forEach(movie => { |
|
|
const movieCard = document.createElement('div'); |
|
|
movieCard.className = 'holographic-card group'; |
|
|
movieCard.innerHTML = ` |
|
|
<div class="relative overflow-hidden rounded-lg" style="aspect-ratio: 2/3;"> |
|
|
${movie.poster_path ? |
|
|
`<img src="${TMDB_IMAGE_BASE}${movie.poster_path}" alt="${movie.title}" |
|
|
class="w-full h-full object-cover group-hover:opacity-70 transition duration-300" |
|
|
loading="lazy">` : |
|
|
`<div class="w-full h-full bg-gray-800 flex items-center justify-center"> |
|
|
<i class="fas fa-film text-4xl text-cyan-400"></i> |
|
|
</div>` |
|
|
} |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-4"> |
|
|
<h4 class="text-white font-bold mb-2 text-sm sm:text-base">${movie.title}</h4> |
|
|
<div class="flex justify-between text-xs text-gray-300"> |
|
|
<span>${movie.release_date ? movie.release_date.substring(0, 4) : 'N/A'}</span> |
|
|
<span class="text-cyan-400"><i class="fas fa-star"></i> ${movie.vote_average.toFixed(1)}</span> |
|
|
</div> |
|
|
<button class="mt-3 neon-button bg-cyan-500 text-black text-xs py-1 px-3 rounded-full font-bold w-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"> |
|
|
<i class="fas fa-play mr-1"></i> Regarder |
|
|
</button> |
|
|
</div> |
|
|
<div class="absolute top-2 right-2 bg-black bg-opacity-70 rounded-full p-1.5 text-xs text-cyan-400"> |
|
|
<i class="fas fa-play"></i> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
moviesContainer.appendChild(movieCard); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
movieCard.style.opacity = '1'; |
|
|
movieCard.style.transform = 'translateY(0)'; |
|
|
}, 100); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
async function loadMoreMovies() { |
|
|
if (isLoading) return; |
|
|
|
|
|
currentPage++; |
|
|
const movies = await fetchPopularMovies(currentPage); |
|
|
displayMovies(movies); |
|
|
|
|
|
|
|
|
if (document.getElementById('iaChat')) { |
|
|
const iaMessage = document.createElement('div'); |
|
|
iaMessage.className = 'text-green-300 text-sm mb-2 flex'; |
|
|
iaMessage.innerHTML = ` |
|
|
<div class="mr-2">🤖</div> |
|
|
<div>${movies.length} films supplémentaires chargés automatiquement.</div> |
|
|
`; |
|
|
document.getElementById('iaChat').appendChild(iaMessage); |
|
|
document.getElementById('iaChat').scrollTop = document.getElementById('iaChat').scrollHeight; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
const { scrollTop, scrollHeight, clientHeight } = document.documentElement; |
|
|
|
|
|
|
|
|
if (scrollTop + clientHeight >= scrollHeight - 200) { |
|
|
loadMoreMovies(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', async () => { |
|
|
|
|
|
setTimeout(() => { |
|
|
showNotification("Bienvenue sur NEOFLIX! Chargement des films en cours..."); |
|
|
}, 1000); |
|
|
|
|
|
|
|
|
const loadingMessages = [ |
|
|
"Connexion au serveur quantique...", |
|
|
"Analyse des préférences utilisateur...", |
|
|
"Optimisation de l'expérience de visionnage...", |
|
|
"Chargement des données cinématographiques..." |
|
|
]; |
|
|
|
|
|
let currentMessage = 0; |
|
|
const robotVoice = document.querySelector('.robot-voice'); |
|
|
|
|
|
const loadingInterval = setInterval(() => { |
|
|
robotVoice.innerHTML = `<p class="text-cyan-300">SYSTÈME IA: ${loadingMessages[currentMessage]}</p>`; |
|
|
currentMessage = (currentMessage + 1) % loadingMessages.length; |
|
|
}, 2000); |
|
|
|
|
|
|
|
|
const movies = await fetchPopularMovies(); |
|
|
displayMovies(movies); |
|
|
|
|
|
|
|
|
clearInterval(loadingInterval); |
|
|
robotVoice.innerHTML = `<p class="text-green-400">SYSTÈME IA: Chargement terminé. ${movies.length} films chargés avec succès.</p>`; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
if (document.getElementById('iaChat')) { |
|
|
const iaMessage = document.createElement('div'); |
|
|
iaMessage.className = 'text-cyan-300 text-sm mb-2 flex'; |
|
|
iaMessage.innerHTML = ` |
|
|
<div class="mr-2">🤖</div> |
|
|
<div>Votre expérience cinématographique est prête! Que souhaitez-vous regarder aujourd'hui?</div> |
|
|
`; |
|
|
document.getElementById('iaChat').appendChild(iaMessage); |
|
|
document.getElementById('iaChat').scrollTop = document.getElementById('iaChat').scrollHeight; |
|
|
} |
|
|
}, 3000); |
|
|
}); |
|
|
</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/neoflix" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
