Hugging Face's logo

Spaces:
docto41
/
cin-plus
Running

App Files Community
docto41 commited on
Commit
5896b0e
·
verified ·
1 Parent(s): 5f69100

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +480 -1150
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>CinéFlix - 52,652 Films en Streaming</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
@@ -13,60 +13,45 @@
13
  font-family: 'Poppins', sans-serif;
14
  background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
15
  color: white;
16
- overflow-x: hidden;
17
  }
18
 
19
- .hero-gradient {
20
- background: linear-gradient(to right, rgba(0,0,0,0.9), rgba(0,0,0,0.3));
21
- }
22
-
23
- .movie-card {
24
  transition: all 0.3s ease;
25
- transform: scale(0.95);
26
- }
27
-
28
- .movie-card:hover {
29
- transform: scale(1);
30
- box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
31
- z-index: 10;
32
- }
33
-
34
- .glow {
35
- box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
36
  }
37
 
38
- .progress-bar {
39
- height: 4px;
40
- background: rgba(255, 255, 255, 0.3);
 
41
  }
42
 
43
- .progress-fill {
44
- height: 100%;
45
- background: #e50914;
46
- width: 0%;
47
- transition: width 0.1s linear;
48
  }
49
 
50
- .video-container {
51
- perspective: 1000px;
52
  }
53
 
54
- .video-wrapper {
55
- transform-style: preserve-3d;
56
- transition: transform 0.5s;
57
  }
58
 
59
- .video-wrapper:hover {
60
- transform: rotateY(10deg) rotateX(5deg);
61
  }
62
 
63
- @keyframes float {
64
- 0%, 100% { transform: translateY(0); }
65
- 50% { transform: translateY(-10px); }
66
  }
67
 
68
- .floating {
69
- animation: float 6s ease-in-out infinite;
 
 
70
  }
71
 
72
  .blur-bg {
@@ -74,135 +59,15 @@
74
  background: rgba(0, 0, 0, 0.5);
75
  }
76
 
77
- .genre-tag {
78
- transition: all 0.3s ease;
79
- }
80
-
81
- .genre-tag:hover {
82
- transform: translateY(-3px);
83
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
84
- }
85
-
86
- .scroll-container {
87
- scroll-behavior: smooth;
88
- }
89
-
90
- .scroll-container::-webkit-scrollbar {
91
- height: 6px;
92
- }
93
-
94
- .scroll-container::-webkit-scrollbar-track {
95
- background: rgba(255, 255, 255, 0.1);
96
- }
97
-
98
- .scroll-container::-webkit-scrollbar-thumb {
99
  background: rgba(255, 255, 255, 0.3);
100
- border-radius: 3px;
101
- }
102
-
103
- .search-box {
104
- transition: all 0.3s ease;
105
  }
106
 
107
- .search-box:focus-within {
108
- transform: scale(1.05);
109
- box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
110
- }
111
-
112
- .filter-btn {
113
- transition: all 0.2s ease;
114
- }
115
-
116
- .filter-btn.active {
117
- background-color: #e50914;
118
- transform: scale(1.1);
119
- }
120
-
121
- @keyframes pulse {
122
- 0%, 100% { opacity: 0.6; }
123
- 50% { opacity: 1; }
124
- }
125
-
126
- .loading {
127
- animation: pulse 1.5s infinite;
128
- }
129
-
130
- .page-btn {
131
- transition: all 0.2s ease;
132
- }
133
-
134
- .page-btn:hover:not(.disabled) {
135
- background-color: #e50914;
136
- transform: scale(1.05);
137
- }
138
-
139
- .movie-card-enhanced {
140
- transition: all 0.3s ease;
141
- background: linear-gradient(135deg, rgba(15, 12, 41, 0.8), rgba(48, 43, 99, 0.8));
142
- border: 1px solid rgba(255, 255, 255, 0.1);
143
- }
144
-
145
- .movie-card-enhanced:hover {
146
- transform: translateY(-10px) scale(1.02);
147
- box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
148
- border-color: rgba(229, 9, 20, 0.5);
149
- }
150
-
151
- .movie-counter {
152
- text-shadow: 0 0 10px rgba(229, 9, 20, 0.7);
153
- }
154
-
155
- /* Nouveaux styles pour le mode lecture */
156
- .server-btn {
157
- transition: all 0.2s ease;
158
- border: 1px solid rgba(255, 255, 255, 0.2);
159
- }
160
-
161
- .server-btn:hover {
162
- background-color: #e50914;
163
- transform: translateY(-2px);
164
- border-color: transparent;
165
- }
166
-
167
- .server-btn.active {
168
- background-color: #e50914;
169
- border-color: transparent;
170
- }
171
-
172
- .quality-badge {
173
- position: absolute;
174
- top: 10px;
175
- right: 10px;
176
- background-color: rgba(0, 0, 0, 0.7);
177
- padding: 3px 8px;
178
- border-radius: 4px;
179
- font-size: 12px;
180
- font-weight: bold;
181
- }
182
-
183
- .server-quality {
184
- font-size: 11px;
185
- opacity: 0.8;
186
- }
187
-
188
- .watch-fullscreen-btn {
189
- position: absolute;
190
- bottom: 20px;
191
- right: 20px;
192
- background-color: rgba(0, 0, 0, 0.7);
193
- border-radius: 50%;
194
- width: 40px;
195
- height: 40px;
196
- display: flex;
197
- align-items: center;
198
- justify-content: center;
199
- cursor: pointer;
200
- transition: all 0.3s ease;
201
- }
202
-
203
- .watch-fullscreen-btn:hover {
204
- background-color: #e50914;
205
- transform: scale(1.1);
206
  }
207
  </style>
208
  </head>
@@ -212,24 +77,12 @@
212
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
213
  <div class="flex items-center space-x-2">
214
  <i class="fas fa-film text-red-500 text-2xl"></i>
215
- <span class="text-xl font-bold bg-gradient-to-r from-red-500 to-purple-600 bg-clip-text text-transparent">CinéFlix</span>
216
- <span class="text-xs bg-red-500 px-2 py-1 rounded-full movie-counter">52,652 Films</span>
217
- </div>
218
- <div class="hidden md:flex space-x-6">
219
- <a href="#" class="hover:text-red-400 transition">Accueil</a>
220
- <a href="#" class="hover:text-red-400 transition">Nouveautés</a>
221
- <a href="#" class="hover:text-red-400 transition">Séries</a>
222
- <a href="#" class="hover:text-red-400 transition">Top 100</a>
223
- <a href="#" class="hover:text-red-400 transition">Ma Liste</a>
224
  </div>
225
  <div class="flex items-center space-x-4">
226
- <div class="search-box relative">
227
- <input type="text" id="searchInput" placeholder="Rechercher..." class="bg-gray-800 rounded-full pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500 w-40 md:w-64 transition-all duration-300">
228
- <i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i>
229
- </div>
230
- <button class="p-2 rounded-full hover:bg-gray-700 transition">
231
- <i class="fas fa-bell"></i>
232
- </button>
233
  <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center cursor-pointer hover:bg-purple-600 transition">
234
  <i class="fas fa-user"></i>
235
  </div>
@@ -238,171 +91,335 @@
238
  </nav>
239
 
240
  <!-- Hero Section -->
241
- <section class="relative h-screen flex items-center">
242
- <div class="absolute inset-0 overflow-hidden">
243
- <video id="heroVideo" autoplay muted loop class="w-full h-full object-cover">
244
- <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
245
- </video>
246
- <div class="absolute inset-0 hero-gradient"></div>
247
- </div>
248
-
249
- <div class="container mx-auto px-4 relative z-10 mt-16">
250
- <div class="max-w-2xl">
251
- <h1 class="text-5xl md:text-6xl font-bold mb-4 text-shadow-lg">Dune: Part Two</h1>
252
- <div class="flex space-x-4 mb-6">
253
- <span class="px-3 py-1 bg-red-500 rounded-full text-sm">HD</span>
254
- <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">4K</span>
255
- <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Science-Fiction</span>
256
- <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Aventure</span>
257
- </div>
258
- <p class="text-lg mb-8 text-gray-300">Paul Atreides s'unit avec Chani et les Fremen pour venger la trahison de sa famille et empêcher un terrible futur que lui seul peut prévoir.</p>
259
- <div class="flex space-x-4">
260
- <button class="px-6 py-3 bg-red-600 hover:bg-red-700 rounded-full flex items-center space-x-2 transition transform hover:scale-105 glow" onclick="playMovie(moviesDatabase[0])">
261
- <i class="fas fa-play"></i>
262
- <span>Regarder</span>
263
- </button>
264
- <button class="px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-full flex items-center justify-center space-x-2 transition transform hover:scale-105" onclick="showMovieDetails(moviesDatabase[0])">
265
- <i class="fas fa-info-circle"></i>
266
- <span>Plus d'infos</span>
267
- </button>
268
  </div>
269
  </div>
270
  </div>
271
-
272
- <!-- Barre de progression -->
273
- <div class="absolute bottom-0 left-0 right-0 h-1 bg-gray-800">
274
- <div id="progressBar" class="h-full bg-red-600" style="width: 0%"></div>
275
- </div>
276
  </section>
277
 
278
- <!-- Contenu principal -->
279
- <div class="container mx-auto px-4 py-16">
280
- <!-- Filtres -->
281
- <div class="mb-8 p-4 rounded-lg blur-bg">
282
- <div class="flex flex-wrap gap-3 justify-center">
283
- <button class="filter-btn px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700" data-year="all">Tous</button>
284
- <button class="filter-btn px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700" data-year="2025">2025</button>
285
- <button class="filter-btn px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700" data-year="2024">2024</button>
286
- <button class="filter-btn px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700" data-year="2023">2023</button>
287
- <button class="filter-btn px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700" data-genre="action">Action</button>
288
- <button class="filter-btn px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700" data-genre="comédie">Comédie</button>
289
- <button class="filter-btn px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700" data-genre="drame">Drame</button>
290
- <button class="filter-btn px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700" data-genre="science-fiction">Sci-Fi</button>
291
- <button class="filter-btn px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700" data-quality="4k">4K Ultra HD</button>
292
- <button class="filter-btn px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700" data-quality="hd">HD</button>
 
 
 
 
 
 
 
 
 
293
  </div>
294
  </div>
295
 
296
- <!-- Résultats de recherche -->
297
- <div id="searchResults" class="hidden mb-16">
298
  <h2 class="text-2xl font-bold mb-6 flex items-center">
299
  <span class="w-1 h-8 bg-red-500 mr-3"></span>
300
- Résultats de recherche
301
- <span id="resultCount" class="ml-auto text-sm text-gray-400"></span>
302
  </h2>
303
- <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6" id="resultsContainer">
304
- <!-- Les résultats seront ajoutés ici par JavaScript -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
305
  </div>
306
- <div class="flex justify-center mt-8 space-x-2" id="paginationControls">
307
- <!-- Contrôles de pagination -->
 
 
 
308
  </div>
309
  </div>
310
 
311
- <!-- Nouveautés 2025 -->
312
- <section class="mb-16" id="new2025">
313
  <h2 class="text-2xl font-bold mb-6 flex items-center">
314
- <span class="w-1 h-8 bg-red-500 mr-3"></span>
315
- Nouveautés 2025
316
- <span class="ml-auto text-sm text-gray-400">Autoplay: <span id="autoplayStatus" class="text-red-500 cursor-pointer">ON</span></span>
317
  </h2>
318
- <div class="relative">
319
- <div class="scroll-container overflow-x-auto flex space-x-6 pb-6" id="trending2025">
320
- <!-- Films 2025 seront ajoutés ici par JavaScript -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
321
  </div>
322
- <button class="scroll-btn absolute left-0 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-70 rounded-full w-10 h-10 flex items-center justify-center z-10 hover:bg-opacity-90 transition">
323
- <i class="fas fa-chevron-left"></i>
324
- </button>
325
- <button class="scroll-btn absolute right-0 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-70 rounded-full w-10 h-10 flex items-center justify-center z-10 hover:bg-opacity-90 transition">
326
- <i class="fas fa-chevron-right"></i>
327
- </button>
328
  </div>
329
- </section>
330
 
331
- <!-- Films populaires 2024 -->
332
- <section class="mb-16" id="popular2024">
333
  <h2 class="text-2xl font-bold mb-6 flex items-center">
334
  <span class="w-1 h-8 bg-purple-500 mr-3"></span>
335
- Blockbusters 2024
336
- </h2>
337
- <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6" id="popularContainer2024">
338
- <!-- Films 2024 seront ajoutés ici par JavaScript -->
339
- </div>
340
- </section>
341
-
342
- <!-- Meilleurs films 2023 -->
343
- <section class="mb-16" id="top2023">
344
- <h2 class="text-2xl font-bold mb-6 flex items-center">
345
- <span class="w-1 h-8 bg-blue-500 mr-3"></span>
346
- Meilleurs films 2023
347
  </h2>
348
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="top2023Container">
349
- <!-- Films 2023 seront ajoutés ici par JavaScript -->
350
- </div>
351
- </section>
352
-
353
- <!-- Genres -->
354
- <section class="mb-16">
355
- <h2 class="text-2xl font-bold mb-6 flex items-center">
356
- <span class="w-1 h-8 bg-green-500 mr-3"></span>
357
- Par Genre
358
- </h2>
359
- <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
360
- <div class="genre-tag bg-gradient-to-br from-red-500 to-red-700 p-6 rounded-lg text-center cursor-pointer hover:shadow-lg" data-genre="action">
361
- <i class="fas fa-bolt text-3xl mb-2"></i>
362
- <h3 class="font-semibold">Action</h3>
363
- </div>
364
- <div class="genre-tag bg-gradient-to-br from-blue-500 to-blue-700 p-6 rounded-lg text-center cursor-pointer hover:shadow-lg" data-genre="comédie">
365
- <i class="fas fa-laugh-beam text-3xl mb-2"></i>
366
- <h3 class="font-semibold">Comédie</h3>
367
- </div>
368
- <div class="genre-tag bg-gradient-to-br from-purple-500 to-purple-700 p-6 rounded-lg text-center cursor-pointer hover:shadow-lg" data-genre="romance">
369
- <i class="fas fa-heart text-3xl mb-2"></i>
370
- <h3 class="font-semibold">Romance</h3>
371
  </div>
372
- <div class="genre-tag bg-gradient-to-br from-yellow-500 to-yellow-700 p-6 rounded-lg text-center cursor-pointer hover:shadow-lg" data-genre="horreur">
373
- <i class="fas fa-ghost text-3xl mb-2"></i>
374
- <h3 class="font-semibold">Horreur</h3>
 
 
 
 
 
 
375
  </div>
376
- <div class="genre-tag bg-gradient-to-br from-green-500 to-green-700 p-6 rounded-lg text-center cursor-pointer hover:shadow-lg" data-genre="science-fiction">
377
- <i class="fas fa-rocket text-3xl mb-2"></i>
378
- <h3 class="font-semibold">Sci-Fi</h3>
 
 
 
 
 
 
379
  </div>
380
- <div class="genre-tag bg-gradient-to-br from-pink-500 to-pink-700 p-6 rounded-lg text-center cursor-pointer hover:shadow-lg" data-genre="fantastique">
381
- <i class="fas fa-magic text-3xl mb-2"></i>
382
- <h3 class="font-semibold">Fantastique</h3>
 
 
 
 
 
 
383
  </div>
384
  </div>
385
- </section>
386
-
387
- <!-- Tous les films -->
388
- <section class="mb-16 hidden" id="allMoviesSection">
389
- <h2 class="text-2xl font-bold mb-6 flex items-center">
390
- <span class="w-1 h-8 bg-gradient-to-br from-red-500 to-purple-600 mr-3"></span>
391
- Tous les films (52,652)
392
- </h2>
393
- <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6" id="allMoviesContainer">
394
- <!-- Tous les films seront chargés ici dynamiquement -->
395
- </div>
396
- <div class="flex justify-center mt-8 space-x-2" id="allMoviesPagination">
397
- <!-- Pagination pour tous les films -->
398
- </div>
399
- </section>
400
-
401
- <!-- Bouton pour charger tous les films -->
402
- <div class="text-center mb-16">
403
- <button id="loadAllMoviesBtn" class="px-6 py-3 bg-gradient-to-r from-purple-600 to-red-600 rounded-full font-semibold hover:from-purple-700 hover:to-red-700 transition transform hover:scale-105">
404
- <i class="fas fa-film mr-2"></i>Voir tous les films (52,652)
405
- </button>
406
  </div>
407
  </div>
408
 
@@ -413,874 +430,187 @@
413
  <div class="mb-8 md:mb-0">
414
  <div class="flex items-center space-x-2 mb-4">
415
  <i class="fas fa-film text-red-500 text-2xl"></i>
416
- <span class="text-xl font-bold bg-gradient-to-r from-red-500 to-purple-600 bg-clip-text text-transparent">CinéFlix</span>
417
  </div>
418
- <p class="text-gray-400 max-w-md">La plateforme ultime avec 52,652 films et séries à votre disposition. Regardez n'importe où, n'importe quand.</p>
419
  </div>
420
  <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
421
  <div>
422
  <h3 class="text-lg font-semibold mb-4">Navigation</h3>
423
- <ul class="space-y-2">
424
- <li><a href="#" class="text-gray-400 hover:text-white transition">Accueil</a></li>
425
- <li><a href="#" class="text-gray-400 hover:text-white transition">Films</li>
426
- <li><a href="#" class="text-gray-400 hover:text-white transition">Séries TV</a></li>
427
- <li><a href="#" class="text-gray-400 hover:text-white transition">Ma Liste</a></li>
428
- </ul>
429
- </div>
430
- <div>
431
- <h3 class="text-lg font-semibold mb-4">Légal</h3>
432
- <ul class="space-y-2">
433
- <li><a href="#" class="text-gray-400 hover:text-white transition">CGU</a></li>
434
- <li><a href="#" class="text-gray-400 hover:text-white transition">Confidentialité</a></li>
435
- <li><a href="#" class="text-gray-400 hover:text-white transition">Cookies</a></li>
436
- </ul>
437
- </div>
438
- <div>
439
- <h3 class="text-lg font-semibold mb-4">Nous suivre</h3>
440
- <div class="flex space-x-4">
441
- <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-500 transition">
442
- <i class="fab fa-facebook-f"></i>
443
- </a>
444
- <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-500 transition">
445
- <i class="fab fa-twitter"></i>
446
- </a>
447
- <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-500 transition">
448
- <i class="fab fa-instagram"></i>
449
- </a>
450
- <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-500 transition">
451
- <i class="fab fa-youtube"></i>
452
- </a>
453
- </div>
454
- </div>
455
- </div>
456
- </div>
457
- <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
458
- <p>© 2023 CinéFlix. Tous droits réservés.</p>
459
- </div>
460
- </div>
461
- </footer>
462
-
463
- <!-- Modal vidéo -->
464
- <div id="videoModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-90">
465
- <div class="relative w-full max-w-6xl">
466
- <button id="closeModal" class="absolute -top-12 right-0 text-white text-3xl hover:text-red-500 transition">
467
- <i class="fas fa-times"></i>
468
- </button>
469
- <div class="video-container">
470
- <div class="video-wrapper">
471
- <video id="modalVideo" controls class="w-full rounded-lg shadow-2xl">
472
- <!-- La source sera définie dynamiquement -->
473
- </video>
474
- <div class="watch-fullscreen-btn" onclick="openFullscreen()">
475
- <i class="fas fa-expand"></i>
476
- </div>
477
- </div>
478
- </div>
479
- <div class="mt-4 text-white">
480
- <h2 id="modalMovieTitle" class="text-2xl font-bold"></h2>
481
- <div class="flex items-center mt-2 space-x-4 text-sm text-gray-300">
482
- <span id="modalMovieYear"></span>
483
- <span id="modalMovieRating"></span>
484
- <span id="modalMovieDuration"></span>
485
- </div>
486
- <p id="modalMovieDesc" class="mt-4 text-gray-300"></p>
487
- </div>
488
- </div>
489
- </div>
490
-
491
- <!-- Modal lecture complète avec serveurs -->
492
- <div id="fullWatchModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-90 p-4">
493
- <div class="relative w-full max-w-5xl bg-gray-900 rounded-lg overflow-hidden">
494
- <button id="closeFullWatchModal" class="absolute top-4 right-4 text-white text-2xl hover:text-red-500 transition">
495
- <i class="fas fa-times"></i>
496
- </button>
497
- <div class="p-6">
498
- <h2 class="text-3xl font-bold mb-6 text-center" id="fullWatchTitle">Regarder <span id="fullWatchMovieTitle"></span> en streaming</h2>
499
-
500
- <div class="mb-8">
501
- <h3 class="text-xl font-semibold mb-4">Serveurs disponibles</h3>
502
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="serversContainer">
503
- <!-- Les serveurs seront ajoutés ici dynamiquement -->
504
- </div>
505
- </div>
506
-
507
- <div class="bg-gray-800 rounded-lg p-4">
508
- <h3 class="text-xl font-semibold mb-3">Comment regarder ?</h3>
509
- <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
510
- <div class="bg-gray-700 p-4 rounded-lg">
511
- <div class="flex items-center mb-2">
512
- <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center mr-3">
513
- <span class="text-white font-bold">1</span>
514
- </div>
515
- <h4 class="font-semibold">Choisissez un serveur</h4>
516
- </div>
517
- <p class="text-gray-300 text-sm">Sélectionnez un serveur parmi ceux disponibles ci-dessus.</p>
518
  </div>
519
- <div class="bg-gray-700 p-4 rounded-lg">
520
- <div class="flex items-center mb-2">
521
- <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center mr-3">
522
- <span class="text-white font-bold">2</span>
523
- </div>
524
- <h4 class="font-semibold">Cliquez sur "Regarder"</h4>
525
- </div>
526
- <p class="text-gray-300 text-sm">Le film commencera à se charger automatiquement.</p>
527
  </div>
528
- <div class="bg-gray-700 p-4 rounded-lg">
529
- <div class="flex items-center mb-2">
530
- <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center mr-3">
531
- <span class="text-white font-bold">3</span>
532
- </div>
533
- <h4 class="font-semibold">Profitez du film</h4>
 
 
 
 
 
 
534
  </div>
535
- <p class="text-gray-300 text-sm">Utilisez les contrôles pour mettre en pause, avancer, etc.</p>
536
  </div>
537
  </div>
538
  </div>
539
-
540
- <div class="mt-6 text-center">
541
- <button id="watchNowBtn" class="px-6 py-3 bg-red-600 hover:bg-red-700 rounded-full font-semibold transition transform hover:scale-105 hidden">
542
- <i class="fas fa-play mr-2"></i>Regarder maintenant
543
- </button>
544
  </div>
545
  </div>
546
- </div>
547
- </div>
548
 
549
- <!-- Modal détails du film -->
550
- <div id="movieDetailsModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-90 p-4">
551
- <div class="relative w-full max-w-4xl bg-gray-900 rounded-lg overflow-hidden">
552
- <button id="closeDetailsModal" class="absolute top-4 right-4 text-white text-2xl hover:text-red-500 transition">
553
- <i class="fas fa-times"></i>
554
- </button>
555
- <div class="flex flex-col md:flex-row">
556
- <div class="w-full md:w-1/3">
557
- <img id="detailsMovieImage" src="" alt="" class="w-full h-auto object-cover">
 
 
558
  </div>
559
- <div class="w-full md:w-2/3 p-6">
560
- <h2 id="detailsMovieTitle" class="text-3xl font-bold mb-2"></h2>
561
- <div class="flex flex-wrap gap-2 mb-4">
562
- <span id="detailsMovieYear" class="px-3 py-1 bg-gray-800 rounded-full text-sm"></span>
563
- <span id="detailsMovieRating" class="px-3 py-1 bg-gray-800 rounded-full text-sm"></span>
564
- <span id="detailsMovieDuration" class="px-3 py-1 bg-gray-800 rounded-full text-sm"></span>
565
- <span id="detailsMovieQuality" class="px-3 py-1 bg-red-500 rounded-full text-sm"></span>
566
- </div>
567
- <div class="flex flex-wrap gap-2 mb-4" id="detailsMovieGenres">
568
- <!-- Les genres seront ajoutés ici -->
569
  </div>
570
- <p id="detailsMovieDesc" class="text-gray-300 mb-6"></p>
571
- <div class="flex space-x-4">
572
- <button id="playFromDetails" class="px-6 py-3 bg-red-600 hover:bg-red-700 rounded-full flex items-center space-x-2 transition transform hover:scale-105">
573
- <i class="fas fa-play"></i>
574
- <span>Regarder</span>
575
  </button>
576
- <button class="px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-full flex items-center space-x-2 transition transform hover:scale-105">
577
- <i class="fas fa-plus"></i>
578
- <span>Ma Liste</span>
 
 
579
  </button>
580
  </div>
581
  </div>
582
  </div>
583
  </div>
584
- </div>
585
-
586
- <script>
587
- // Base de données de films avec de vrais titres et affiches
588
- const moviesDatabase = [
589
- {
590
- id: 1,
591
- title: "Dune: Part Two",
592
- year: 2024,
593
- rating: "4.8/5",
594
- duration: "166 min",
595
- genres: ["Science-Fiction", "Aventure"],
596
- quality: "4K",
597
- description: "Paul Atreides s'unit avec Chani et les Fremen pour venger la trahison de sa famille et empêcher un terrible futur que lui seul peut prévoir.",
598
- image: "https://m.media-amazon.com/images/M/MV5BN2QyZGU4ZDctOWMzMy00NTc5LThlOGQtODRmNDE1ZWNhOThjXkEyXkFqcGdeQXVyMDM2NDM2MQ@@._V1_FMjpg_UX1000_.jpg",
599
- videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
600
- servers: [
601
- { name: "Server HD", url: "https://example.com/stream1", quality: "HD", ping: 45 },
602
- { name: "Server 4K", url: "https://example.com/stream2", quality: "4K", ping: 68 },
603
- { name: "Fast Server", url: "https://example.com/stream3", quality: "Full HD", ping: 32 },
604
- { name: "Premium Stream", url: "https://example.com/stream4", quality: "4K", ping: 52 },
605
- { name: "Euro Server", url: "https://example.com/stream5", quality: "HD", ping: 28 }
606
- ]
607
- },
608
- {
609
- id: 2,
610
- title: "Oppenheimer",
611
- year: 2023,
612
- rating: "4.7/5",
613
- duration: "180 min",
614
- genres: ["Drame", "Historique"],
615
- quality: "4K",
616
- description: "L'histoire du physicien J. Robert Oppenheimer et son rôle dans le développement de la bombe atomique pendant la Seconde Guerre mondiale.",
617
- image: "https://m.media-amazon.com/images/M/MV5BMDBmYTZjNjUtN2M1MS00MTQ2LTk2ODgtNzc2M2QyZGE5NTVjXkEyXkFqcGdeQXVyNzAwMjU2MTY@._V1_.jpg",
618
- videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
619
- servers: [
620
- { name: "Server HD", url: "https://example.com/stream1", quality: "HD", ping: 45 },
621
- { name: "Server 4K", url: "https://example.com/stream2", quality: "4K", ping: 68 },
622
- { name: "Fast Server", url: "https://example.com/stream3", quality: "Full HD", ping: 32 }
623
- ]
624
- },
625
- {
626
- id: 3,
627
- title: "The Batman",
628
- year: 2022,
629
- rating: "4.3/5",
630
- duration: "176 min",
631
- genres: ["Action", "Thriller"],
632
- quality: "HD",
633
- description: "Batman enquête sur la corruption qui sévit à Gotham City et affronte le Riddler, un tueur en série qui s'en prend à l'élite de la ville.",
634
- image: "https://m.media-amazon.com/images/M/MV5BMDdmMTBiNTYtMDIzNi00NGVlLWIzMDYtZTk3MTQ3NGQxZGEwXkEyXkFqcGdeQXVyMzMwOTU5MDk@._V1_.jpg",
635
- videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
636
- servers: [
637
- { name: "Server HD", url: "https://example.com/stream1", quality: "HD", ping: 45 },
638
- { name: "Fast Server", url: "https://example.com/stream3", quality: "Full HD", ping: 32 },
639
- { name: "Euro Server", url: "https://example.com/stream5", quality: "HD", ping: 28 }
640
- ]
641
- },
642
- {
643
- id: 4,
644
- title: "Avatar: The Way of Water",
645
- year: 2022,
646
- rating: "4.2/5",
647
- duration: "192 min",
648
- genres: ["Science-Fiction", "Aventure"],
649
- quality: "4K",
650
- description: "Jake Sully et Ney'tiri forment une famille et font tout pour rester ensemble. Cependant, ils doivent quitter leur foyer et explorer les différentes régions de Pandora.",
651
- image: "https://m.media-amazon.com/images/M/MV5BYjhiNjBlODctY2ZiOC00YjVlLWFlNzAtNTVhNzM1YjI1NzMxXkEyXkFqcGdeQXVyMjQxNTE1MDA@._V1_FMjpg_UX1000_.jpg",
652
- videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4",
653
- servers: [
654
- { name: "Server 4K", url: "https://example.com/stream2", quality: "4K", ping: 68 },
655
- { name: "Premium Stream", url: "https://example.com/stream4", quality: "4K", ping: 52 }
656
- ]
657
- },
658
- {
659
- id: 5,
660
- title: "Top Gun: Maverick",
661
- year: 2022,
662
- rating: "4.6/5",
663
- duration: "130 min",
664
- genres: ["Action", "Drame"],
665
- quality: "HD",
666
- description: "Après plus de trente ans de service, Pete 'Maverick' Mitchell est de retour pour former une nouvelle génération de pilotes d'élite.",
667
- image: "https://m.media-amazon.com/images/M/MV5BZWYzOGEwNTgtNWU3NS00ZTQ0LWJkODUtM2FjMWQzZTA0YTA4XkEyXkFqcGdeQXVyMjkwOTAyMDU@._V1_FMjpg_UX1000_.jpg",
668
- videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4",
669
- servers: [
670
- { name: "Server HD", url: "https://example.com/stream1", quality: "HD", ping: 45 },
671
- { name: "Fast Server", url: "https://example.com/stream3", quality: "Full HD", ping: 32 },
672
- { name: "Euro Server", url: "https://example.com/stream5", quality: "HD", ping: 28 }
673
- ]
674
- },
675
- {
676
- id: 6,
677
- title: "Spider-Man: No Way Home",
678
- year: 2021,
679
- rating: "4.5/5",
680
- duration: "148 min",
681
- genres: ["Action", "Aventure"],
682
- quality: "4K",
683
- description: "Peter Parker demande l'aide du Docteur Strange pour que le monde oublie qu'il est Spider-Man. Le sort tourne mal et déclenche l'arrivée de méchants venus d'autres univers.",
684
- image: "https://m.media-amazon.com/images/M/MV5BZWMyYzFjYTYtNTRjYi00OGExLWE2YzgtOGRmYjAxZTU3NzBiXkEyXkFqcGdeQXVyMzQ0MzA0NTM@._V1_FMjpg_UX1000_.jpg",
685
- videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4",
686
- servers: [
687
- { name: "Server HD", url: "https://example.com/stream1", quality: "HD", ping: 45 },
688
- { name: "Server 4K", url: "https://example.com/stream2", quality: "4K", ping: 68 },
689
- { name: "Fast Server", url: "https://example.com/stream3", quality: "Full HD", ping: 32 },
690
- { name: "Premium Stream", url: "https://example.com/stream4", quality: "4K", ping: 52 }
691
- ]
692
- },
693
- {
694
- id: 7,
695
- title: "Black Panther: Wakanda Forever",
696
- year: 2022,
697
- rating: "4.0/5",
698
- duration: "161 min",
699
- genres: ["Action", "Aventure"],
700
- quality: "HD",
701
- description: "Le peuple de Wakanda se bat pour protéger sa nation à la suite de la mort du roi T'Challa.",
702
- image: "https://m.media-amazon.com/images/M/MV5BNTM4NjIxNmEtYWE5NS00NDczLTkyNWQtYThhNmQyZGQzMjM0XkEyXkFqcGdeQXVyODk4OTc3MTY@._V1_FMjpg_UX1000_.jpg",
703
- videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4",
704
- servers: [
705
- { name: "Server HD", url: "https://example.com/stream1", quality: "HD", ping: 45 },
706
- { name: "Fast Server", url: "https://example.com/stream3", quality: "Full HD", ping: 32 },
707
- { name: "Euro Server", url: "https://example.com/stream5", quality: "HD", ping: 28 }
708
- ]
709
- },
710
- {
711
- id: 8,
712
- title: "Jurassic World: Dominion",
713
- year: 2022,
714
- rating: "3.8/5",
715
- duration: "147 min",
716
- genres: ["Action", "Aventure"],
717
- quality: "4K",
718
- description: "Quatre ans après la destruction d'Isla Nublar, les dinosaures vivent maintenant parmi les humains partout dans le monde.",
719
- image: "https://m.media-amazon.com/images/M/MV5BZjZjMzQ2ZmUtZWEyZC00NWJiLWFjM2UtMzhmYzZmZDcxMzllXkEyXkFqcGdeQXVyNTA1NjYyMDk@._V1_FMjpg_UX1000_.jpg",
720
- videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4",
721
- servers: [
722
- { name: "Server 4K", url: "https://example.com/stream2", quality: "4K", ping: 68 },
723
- { name: "Premium Stream", url: "https://example.com/stream4", quality: "4K", ping: 52 }
724
- ]
725
- },
726
- {
727
- id: 9,
728
- title: "The Super Mario Bros. Movie",
729
- year: 2023,
730
- rating: "4.1/5",
731
- duration: "92 min",
732
- genres: ["Animation", "Aventure"],
733
- quality: "HD",
734
- description: "Un plombier nommé Mario voyage à travers un labyrinthe souterrain avec son frère Luigi pour sauver une princesse capturée.",
735
- image: "https://m.media-amazon.com/images/M/MV5BOTJhNzlmNzctNTU5Yy00N2YwLThhMjQtZDM0YjEzN2Y0ZjNhXkEyXkFqcGdeQXVyMTEwMTQ4MzU5._V1_FMjpg_UX1000_.jpg",
736
- videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4",
737
- servers: [
738
- { name: "Server HD", url: "https://example.com/stream1", quality: "HD", ping: 45 },
739
- { name: "Fast Server", url: "https://example.com/stream3", quality: "Full HD", ping: 32 }
740
- ]
741
- },
742
- {
743
- id: 10,
744
- title: "Guardians of the Galaxy Vol. 3",
745
- year: 2023,
746
- rating: "4.4/5",
747
- duration: "150 min",
748
- genres: ["Action", "Comédie"],
749
- quality: "4K",
750
- description: "Les Gardiens de la Galaxie doivent protéger l'un des leurs tout en déjouant une menace qui pourrait mener à la disparition de l'équipe.",
751
- image: "https://m.media-amazon.com/images/M/MV5BMDgxOTdjMzYtZGQxMS00ZTAzLWI4Y2UtMTQzN2VlYjYyZWRiXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_FMjpg_UX1000_.jpg",
752
- videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4",
753
- servers: [
754
- { name: "Server HD", url: "https://example.com/stream1", quality: "HD", ping: 45 },
755
- { name: "Server 4K", url: "https://example.com/stream2", quality: "4K", ping: 68 },
756
- { name: "Fast Server", url: "https://example.com/stream3", quality: "Full HD", ping: 32 },
757
- { name: "Premium Stream", url: "https://example.com/stream4", quality: "4K", ping: 52 },
758
- { name: "Euro Server", url: "https://example.com/stream5", quality: "HD", ping: 28 }
759
- ]
760
- }
761
- ];
762
 
763
- // Générer plus de films pour atteindre 52,652
764
- const massiveMovieDatabase = [...moviesDatabase];
765
- const genres = ["Action", "Comédie", "Drame", "Science-Fiction", "Horreur", "Romance", "Thriller", "Fantastique", "Animation", "Aventure"];
766
- const qualities = ["HD", "4K", "Full HD", "Ultra HD"];
767
- const years = [2023, 2024, 2025];
768
- const serverNames = ["Server HD", "Server 4K", "Fast Server", "Premium Stream", "Euro Server", "US Server", "Asia Server"];
769
-
770
- for (let i = 11; i <= 52652; i++) {
771
- const yearIndex = i % 3;
772
- const genreIndex1 = i % genres.length;
773
- const genreIndex2 = (i + 1) % genres.length;
774
- const qualityIndex = i % qualities.length;
775
- const serverCount = Math.floor(Math.random() * 4) + 1;
776
- const servers = [];
777
-
778
- for (let j = 0; j < serverCount; j++) {
779
- const serverIndex = j % serverNames.length;
780
- servers.push({
781
- name: serverNames[serverIndex],
782
- url: `https://example.com/stream${i}${j}`,
783
- quality: qualities[Math.floor(Math.random() * qualities.length)],
784
- ping: Math.floor(Math.random() * 70) + 10
785
  });
786
- }
787
-
788
- massiveMovieDatabase.push({
789
- id: i + 1,
790
- title: `Film ${i + 1}`,
791
- year: years[yearIndex],
792
- rating: Math.floor(Math.random() * 5) + 1 + "/5",
793
- duration: Math.floor(Math.random() * 120) + 80 + " min",
794
- genres: [genres[genreIndex1], genres[genreIndex2]],
795
- quality: qualities[qualityIndex],
796
- description: `Description du film ${i + 1}. Un film ${genres[genreIndex1].toLowerCase()} avec des éléments ${genres[genreIndex2].toLowerCase()}.`,
797
- image: `https://source.unsplash.com/random/300x450/?movie,poster&sig=${i}`,
798
- videoUrl: `https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4`,
799
- servers: servers
800
- });
801
- }
802
-
803
- // Sélection des meilleurs films pour les sections spéciales
804
- const trending2025 = massiveMovieDatabase
805
- .filter(movie => movie.year === 2025)
806
- .sort(() => 0.5 - Math.random())
807
- .slice(0, 20);
808
-
809
- const popular2024 = massiveMovieDatabase
810
- .filter(movie => movie.year === 2024)
811
- .sort(() => 0.5 - Math.random())
812
- .slice(0, 12);
813
-
814
- const top2023 = massiveMovieDatabase
815
- .filter(movie => movie.year === 2023)
816
- .sort((a, b) => parseFloat(b.rating) - parseFloat(a.rating))
817
- .slice(0, 6);
818
-
819
- // Éléments DOM
820
- const trendingContainer2025 = document.getElementById('trending2025');
821
- const popularContainer2024 = document.getElementById('popularContainer2024');
822
- const top2023Container = document.getElementById('top2023Container');
823
- const allMoviesContainer = document.getElementById('allMoviesContainer');
824
- const heroVideo = document.getElementById('heroVideo');
825
- const progressBar = document.getElementById('progressBar');
826
- const videoModal = document.getElementById('videoModal');
827
- const modalVideo = document.getElementById('modalVideo');
828
- const closeModal = document.getElementById('closeModal');
829
- const scrollBtns = document.querySelectorAll('.scroll-btn');
830
- const autoplayStatus = document.getElementById('autoplayStatus');
831
- const searchInput = document.getElementById('searchInput');
832
- const searchResults = document.getElementById('searchResults');
833
- const resultsContainer = document.getElementById('resultsContainer');
834
- const resultCount = document.getElementById('resultCount');
835
- const paginationControls = document.getElementById('paginationControls');
836
- const filterBtns = document.querySelectorAll('.filter-btn');
837
- const genreTags = document.querySelectorAll('.genre-tag');
838
- const loadAllMoviesBtn = document.getElementById('loadAllMoviesBtn');
839
- const allMoviesSection = document.getElementById('allMoviesSection');
840
- const allMoviesPagination = document.getElementById('allMoviesPagination');
841
- const modalMovieTitle = document.getElementById('modalMovieTitle');
842
- const modalMovieYear = document.getElementById('modalMovieYear');
843
- const modalMovieRating = document.getElementById('modalMovieRating');
844
- const modalMovieDuration = document.getElementById('modalMovieDuration');
845
- const modalMovieDesc = document.getElementById('modalMovieDesc');
846
- const movieDetailsModal = document.getElementById('movieDetailsModal');
847
- const closeDetailsModal = document.getElementById('closeDetailsModal');
848
- const detailsMovieImage = document.getElementById('detailsMovieImage');
849
- const detailsMovieTitle = document.getElementById('detailsMovieTitle');
850
- const detailsMovieYear = document.getElementById('detailsMovieYear');
851
- const detailsMovieRating = document.getElementById('detailsMovieRating');
852
- const detailsMovieDuration = document.getElementById('detailsMovieDuration');
853
- const detailsMovieQuality = document.getElementById('detailsMovieQuality');
854
- const detailsMovieGenres = document.getElementById('detailsMovieGenres');
855
- const detailsMovieDesc = document.getElementById('detailsMovieDesc');
856
- const playFromDetails = document.getElementById('playFromDetails');
857
- const fullWatchModal = document.getElementById('fullWatchModal');
858
- const closeFullWatchModal = document.getElementById('closeFullWatchModal');
859
- const fullWatchMovieTitle = document.getElementById('fullWatchMovieTitle');
860
- const serversContainer = document.getElementById('serversContainer');
861
- const watchNowBtn = document.getElementById('watchNowBtn');
862
- const fullWatchTitle = document.getElementById('fullWatchTitle');
863
-
864
- // Variables globales
865
- let currentPage = 1;
866
- let currentSearchTerm = '';
867
- let currentFilter = 'all';
868
- let moviesPerPage = 24;
869
- let allMoviesCurrentPage = 1;
870
- let allMoviesPerPage = 100;
871
- let currentMovieDetails = null;
872
- let selectedServer = null;
873
-
874
- // Générer les cartes de film
875
- function generateMovieCard(movie, enhanced = false) {
876
- const card = document.createElement('div');
877
- card.className = enhanced ? 'movie-card-enhanced rounded-lg overflow-hidden cursor-pointer p-2' : 'movie-card rounded-lg overflow-hidden cursor-pointer';
878
- card.innerHTML = `
879
- <div class="relative group h-full">
880
- <img src="${movie.image}" alt="${movie.title}" class="w-full h-48 md:h-64 object-cover rounded-lg">
881
- <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition flex items-center justify-center">
882
- <button class="play-btn opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 w-12 h-12 bg-red-500 rounded-full flex items-center justify-center">
883
- <i class="fas fa-play"></i>
884
- </button>
885
- </div>
886
- <div class="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black to-transparent text-white">
887
- <h3 class="font-semibold truncate">${movie.title}</h3>
888
- <div class="flex justify-between text-xs text-gray-300 mt-1">
889
- <span>${movie.year}</span>
890
- <span>${movie.rating}</span>
891
- <span>${movie.quality}</span>
892
- </div>
893
- ${enhanced ? `<div class="flex flex-wrap gap-1 mt-2">
894
- ${movie.genres.map(genre => `<span class="px-2 py-1 bg-gray-800 rounded-full text-xs">${genre}</span>`).join('')}
895
- </div>` : ''}
896
- </div>
897
- </div>
898
- `;
899
-
900
- // Ajouter les événements
901
- card.querySelector('.play-btn').addEventListener('click', (e) => {
902
- e.stopPropagation();
903
- showFullWatchModal(movie);
904
- });
905
-
906
- card.addEventListener('click', () => {
907
- showMovieDetails(movie);
908
- });
909
-
910
- return card;
911
- }
912
-
913
- // Afficher le modal de lecture complète avec serveurs
914
- function showFullWatchModal(movie) {
915
- currentMovieDetails = movie;
916
- fullWatchMovieTitle.textContent = movie.title;
917
- fullWatchTitle.textContent = `Regarder ${movie.title} en streaming`;
918
-
919
- // Afficher les serveurs disponibles
920
- serversContainer.innerHTML = '';
921
- movie.servers.forEach((server, index) => {
922
- const serverBtn = document.createElement('button');
923
- serverBtn.className = `server-btn bg-gray-800 rounded-lg p-4 text-left transition ${index === 0 ? 'active' : ''}`;
924
- serverBtn.innerHTML = `
925
- <div class="flex items-center justify-between">
926
- <div>
927
- <h4 class="font-semibold">${server.name}</h4>
928
- <div class="server-quality mt-1">${server.quality} • Ping: ${server.ping}ms</div>
929
- </div>
930
- <i class="fas fa-check-circle ${index === 0 ? 'text-green-500' : 'text-gray-600'}"></i>
931
- </div>
932
- `;
933
 
934
- serverBtn.addEventListener('click', () => {
935
- document.querySelectorAll('.server-btn').forEach(btn => {
936
- btn.classList.remove('active');
937
- btn.querySelector('i').classList.remove('text-green-500');
938
- btn.querySelector('i').classList.add('text-gray-600');
 
 
 
939
  });
940
-
941
- serverBtn.classList.add('active');
942
- serverBtn.querySelector('i').classList.remove('text-gray-600');
943
- serverBtn.querySelector('i').classList.add('text-green-500');
944
-
945
- selectedServer = server;
946
- watchNowBtn.classList.remove('hidden');
947
  });
948
 
949
- serversContainer.appendChild(serverBtn);
950
- });
951
-
952
- // Sélectionner le premier serveur par défaut
953
- selectedServer = movie.servers[0];
954
- watchNowBtn.classList.remove('hidden');
955
-
956
- // Configurer le bouton "Regarder maintenant"
957
- watchNowBtn.onclick = () => {
958
- playMovie(movie, selectedServer);
959
- fullWatchModal.classList.add('hidden');
960
- };
961
-
962
- fullWatchModal.classList.remove('hidden');
963
- document.body.style.overflow = 'hidden';
964
- }
965
-
966
- // Jouer un film
967
- function playMovie(movie, server = null) {
968
- const videoUrl = server ? server.url : movie.videoUrl;
969
-
970
- modalVideo.src = videoUrl;
971
- modalMovieTitle.textContent = movie.title;
972
- modalMovieYear.textContent = movie.year;
973
- modalMovieRating.textContent = movie.rating;
974
- modalMovieDuration.textContent = movie.duration;
975
- modalMovieDesc.textContent = movie.description;
976
- videoModal.classList.remove('hidden');
977
- document.body.style.overflow = 'hidden';
978
-
979
- // Essayer la lecture automatique
980
- const playPromise = modalVideo.play();
981
-
982
- if (playPromise !== undefined) {
983
- playPromise.catch(error => {
984
- console.log("La lecture automatique a été empêchée:", error);
985
- });
986
- }
987
- }
988
-
989
- // Plein écran
990
- function openFullscreen() {
991
- if (modalVideo.requestFullscreen) {
992
- modalVideo.requestFullscreen();
993
- } else if (modalVideo.webkitRequestFullscreen) {
994
- modalVideo.webkitRequestFullscreen();
995
- } else if (modalVideo.msRequestFullscreen) {
996
- modalVideo.msRequestFullscreen();
997
- }
998
- }
999
-
1000
- // Afficher les détails d'un film
1001
- function showMovieDetails(movie) {
1002
- currentMovieDetails = movie;
1003
- detailsMovieImage.src = movie.image;
1004
- detailsMovieImage.alt = movie.title;
1005
- detailsMovieTitle.textContent = movie.title;
1006
- detailsMovieYear.textContent = movie.year;
1007
- detailsMovieRating.textContent = movie.rating;
1008
- detailsMovieDuration.textContent = movie.duration;
1009
- detailsMovieQuality.textContent = movie.quality;
1010
- detailsMovieDesc.textContent = movie.description;
1011
-
1012
- // Afficher les genres
1013
- detailsMovieGenres.innerHTML = '';
1014
- movie.genres.forEach(genre => {
1015
- const genreSpan = document.createElement('span');
1016
- genreSpan.className = 'px-3 py-1 bg-gray-800 rounded-full text-sm';
1017
- genreSpan.textContent = genre;
1018
- detailsMovieGenres.appendChild(genreSpan);
1019
- });
1020
-
1021
- movieDetailsModal.classList.remove('hidden');
1022
- document.body.style.overflow = 'hidden';
1023
- }
1024
-
1025
- // Fermer le modal vidéo
1026
- closeModal.addEventListener('click', () => {
1027
- videoModal.classList.add('hidden');
1028
- document.body.style.overflow = 'auto';
1029
- modalVideo.pause();
1030
- });
1031
-
1032
- // Fermer le modal des détails
1033
- closeDetailsModal.addEventListener('click', () => {
1034
- movieDetailsModal.classList.add('hidden');
1035
- document.body.style.overflow = 'auto';
1036
- });
1037
-
1038
- // Fermer le modal de lecture complète
1039
- closeFullWatchModal.addEventListener('click', () => {
1040
- fullWatchModal.classList.add('hidden');
1041
- document.body.style.overflow = 'auto';
1042
- });
1043
-
1044
- // Jouer depuis le modal des détails
1045
- playFromDetails.addEventListener('click', () => {
1046
- if (currentMovieDetails) {
1047
- movieDetailsModal.classList.add('hidden');
1048
- showFullWatchModal(currentMovieDetails);
1049
- }
1050
- });
1051
-
1052
- // Mettre à jour la barre de progression
1053
- function updateProgressBar() {
1054
- if (heroVideo.duration) {
1055
- const percent = (heroVideo.currentTime / heroVideo.duration) * 100;
1056
- progressBar.style.width = `${percent}%`;
1057
- }
1058
- }
1059
-
1060
- // Fonction de recherche
1061
- function searchMovies(term, page = 1) {
1062
- currentSearchTerm = term.toLowerCase();
1063
- currentPage = page;
1064
-
1065
- // Filtrer les films en fonction du terme de recherche
1066
- let filteredMovies = massiveMovieDatabase.filter(movie =>
1067
- movie.title.toLowerCase().includes(currentSearchTerm) ||
1068
- movie.genres.some(genre => genre.toLowerCase().includes(currentSearchTerm)) ||
1069
- movie.description.toLowerCase().includes(currentSearchTerm)
1070
- );
1071
-
1072
- // Appliquer le filtre supplémentaire si nécessaire
1073
- if (currentFilter !== 'all') {
1074
- filteredMovies = filteredMovies.filter(movie =>
1075
- movie.year.toString() === currentFilter ||
1076
- movie.genres.map(g => g.toLowerCase()).includes(currentFilter) ||
1077
- movie.quality.toLowerCase() === currentFilter
1078
- );
1079
- }
1080
-
1081
- // Mettre à jour le compteur de résultats
1082
- resultCount.textContent = `${filteredMovies.length} résultats`;
1083
-
1084
- // Pagination
1085
- const totalPages = Math.ceil(filteredMovies.length / moviesPerPage);
1086
- const startIndex = (page - 1) * moviesPerPage;
1087
- const paginatedMovies = filteredMovies.slice(startIndex, startIndex + moviesPerPage);
1088
-
1089
- // Afficher les résultats
1090
- resultsContainer.innerHTML = '';
1091
- paginatedMovies.forEach(movie => {
1092
- resultsContainer.appendChild(generateMovieCard(movie, true));
1093
- });
1094
-
1095
- // Afficher les contrôles de pagination
1096
- updatePaginationControls(totalPages, 'search');
1097
-
1098
- // Afficher la section des résultats
1099
- searchResults.classList.remove('hidden');
1100
- }
1101
-
1102
- // Mettre à jour les contrôles de pagination
1103
- function updatePaginationControls(totalPages, type = 'search') {
1104
- const container = type === 'search' ? paginationControls : allMoviesPagination;
1105
- container.innerHTML = '';
1106
-
1107
- if (totalPages <= 1) return;
1108
-
1109
- // Bouton Précédent
1110
- const prevBtn = document.createElement('button');
1111
- prevBtn.className = `page-btn px-4 py-2 rounded-full ${currentPage === 1 ? 'bg-gray-800 text-gray-500 disabled' : 'bg-gray-700 hover:bg-red-600'}`;
1112
- prevBtn.textContent = 'Précédent';
1113
- prevBtn.disabled = currentPage === 1;
1114
- prevBtn.addEventListener('click', () => {
1115
- if (type === 'search') {
1116
- searchMovies(currentSearchTerm, currentPage - 1);
1117
- } else {
1118
- loadAllMovies(allMoviesCurrentPage - 1);
1119
- }
1120
- });
1121
- container.appendChild(prevBtn);
1122
-
1123
- // Pages
1124
- const startPage = Math.max(1, currentPage - 2);
1125
- const endPage = Math.min(totalPages, currentPage + 2);
1126
-
1127
- for (let i = startPage; i <= endPage; i++) {
1128
- const pageBtn = document.createElement('button');
1129
- pageBtn.className = `page-btn px-4 py-2 rounded-full ${i === currentPage ? 'bg-red-600' : 'bg-gray-700 hover:bg-gray-600'}`;
1130
- pageBtn.textContent = i;
1131
- pageBtn.addEventListener('click', () => {
1132
- if (type === 'search') {
1133
- searchMovies(currentSearchTerm, i);
1134
- } else {
1135
- loadAllMovies(i);
1136
- }
1137
  });
1138
- container.appendChild(pageBtn);
1139
- }
1140
-
1141
- // Bouton Suivant
1142
- const nextBtn = document.createElement('button');
1143
- nextBtn.className = `page-btn px-4 py-2 rounded-full ${currentPage === totalPages ? 'bg-gray-800 text-gray-500 disabled' : 'bg-gray-700 hover:bg-red-600'}`;
1144
- nextBtn.textContent = 'Suivant';
1145
- nextBtn.disabled = currentPage === totalPages;
1146
- nextBtn.addEventListener('click', () => {
1147
- if (type === 'search') {
1148
- searchMovies(currentSearchTerm, currentPage + 1);
1149
- } else {
1150
- loadAllMovies(allMoviesCurrentPage + 1);
1151
- }
1152
- });
1153
- container.appendChild(nextBtn);
1154
- }
1155
-
1156
- // Charger tous les films avec pagination
1157
- function loadAllMovies(page = 1) {
1158
- allMoviesCurrentPage = page;
1159
- const startIndex = (page - 1) * allMoviesPerPage;
1160
- const paginatedMovies = massiveMovieDatabase.slice(startIndex, startIndex + allMoviesPerPage);
1161
- const totalPages = Math.ceil(massiveMovieDatabase.length / allMoviesPerPage);
1162
-
1163
- allMoviesContainer.innerHTML = '';
1164
- paginatedMovies.forEach(movie => {
1165
- allMoviesContainer.appendChild(generateMovieCard(movie, true));
1166
- });
1167
-
1168
- updatePaginationControls(totalPages, 'all');
1169
- }
1170
-
1171
- // Initialisation
1172
- document.addEventListener('DOMContentLoaded', () => {
1173
- // Charger les sections spéciales
1174
- trending2025.forEach(movie => {
1175
- trendingContainer2025.appendChild(generateMovieCard(movie));
1176
- });
1177
-
1178
- popular2024.forEach(movie => {
1179
- popularContainer2024.appendChild(generateMovieCard(movie));
1180
- });
1181
-
1182
- top2023.forEach(movie => {
1183
- top2023Container.appendChild(generateMovieCard(movie, true));
1184
- });
1185
-
1186
- // Configurer la barre de progression
1187
- heroVideo.addEventListener('timeupdate', updateProgressBar);
1188
-
1189
- // Essayer la lecture automatique
1190
- heroVideo.play().catch(e => {
1191
- console.log("La lecture automatique a été empêchée:", e);
1192
- autoplayStatus.textContent = 'OFF';
1193
- autoplayStatus.className = 'text-gray-400 cursor-pointer';
1194
- });
1195
-
1196
- // Configurer les boutons de défilement
1197
- scrollBtns.forEach(btn => {
1198
- btn.addEventListener('click', () => {
1199
- const container = btn.closest('.relative').querySelector('.scroll-container');
1200
- const scrollAmount = btn.querySelector('.fa-chevron-left') ? -300 : 300;
1201
- container.scrollBy({ left: scrollAmount, behavior: 'smooth' });
1202
  });
1203
- });
1204
-
1205
- // Toggle autoplay
1206
- autoplayStatus.addEventListener('click', () => {
1207
- if (heroVideo.paused) {
1208
- heroVideo.play();
1209
- autoplayStatus.textContent = 'ON';
1210
- autoplayStatus.className = 'text-red-500 cursor-pointer';
1211
- } else {
1212
- heroVideo.pause();
1213
- autoplayStatus.textContent = 'OFF';
1214
- autoplayStatus.className = 'text-gray-400 cursor-pointer';
1215
- }
1216
- });
1217
-
1218
- // Recherche
1219
- searchInput.addEventListener('input', (e) => {
1220
- const term = e.target.value.trim();
1221
- if (term.length > 2) {
1222
- searchMovies(term);
1223
- } else {
1224
- searchResults.classList.add('hidden');
1225
- }
1226
- });
1227
-
1228
- // Filtres
1229
- filterBtns.forEach(btn => {
1230
- btn.addEventListener('click', () => {
1231
- filterBtns.forEach(b => b.classList.remove('active'));
1232
- btn.classList.add('active');
1233
-
1234
- const filter = btn.dataset.year || btn.dataset.genre || btn.dataset.quality || 'all';
1235
- currentFilter = filter;
1236
-
1237
- if (currentSearchTerm) {
1238
- searchMovies(currentSearchTerm);
1239
  }
1240
- });
1241
- });
1242
-
1243
- // Filtres par genre
1244
- genreTags.forEach(tag => {
1245
- tag.addEventListener('click', () => {
1246
- const genre = tag.dataset.genre;
1247
- currentFilter = genre;
1248
- filterBtns.forEach(b => b.classList.remove('active'));
1249
- searchInput.value = '';
1250
- searchResults.classList.add('hidden');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1251
 
1252
- // Afficher les films de ce genre
1253
- const filteredMovies = massiveMovieDatabase.filter(movie =>
1254
- movie.genres.map(g => g.toLowerCase()).includes(genre)
1255
- );
1256
 
1257
- resultsContainer.innerHTML = '';
1258
- filteredMovies.slice(0, 24).forEach(movie => {
1259
- resultsContainer.appendChild(generateMovieCard(movie, true));
 
1260
  });
1261
 
1262
- resultCount.textContent = `${filteredMovies.length} films ${genre}`;
1263
- searchResults.classList.remove('hidden');
1264
- paginationControls.innerHTML = '';
1265
- });
1266
- });
1267
-
1268
- // Charger tous les films
1269
- loadAllMoviesBtn.addEventListener('click', () => {
1270
- allMoviesSection.classList.remove('hidden');
1271
- loadAllMoviesBtn.classList.add('hidden');
1272
- loadAllMovies();
1273
- });
1274
-
1275
- // Ajouter l'animation de flottement à des éléments aléatoires
1276
- const elements = document.querySelectorAll('.movie-card, .genre-tag');
1277
- elements.forEach(el => {
1278
- if (Math.random() > 0.7) {
1279
- el.classList.add('floating');
1280
- el.style.animationDelay = `${Math.random() * 5}s`;
1281
- }
1282
  });
1283
- });
1284
- </script>
1285
  <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/cin-plus" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1286
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Serveurs de Streaming - Regarder Films Gratuits</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
 
13
  font-family: 'Poppins', sans-serif;
14
  background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
15
  color: white;
 
16
  }
17
 
18
+ .server-card {
 
 
 
 
19
  transition: all 0.3s ease;
20
+ background: rgba(30, 30, 60, 0.6);
21
+ border: 1px solid rgba(255, 255, 255, 0.1);
 
 
 
 
 
 
 
 
 
22
  }
23
 
24
+ .server-card:hover {
25
+ transform: translateY(-5px);
26
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
27
+ border-color: rgba(229, 9, 20, 0.5);
28
  }
29
 
30
+ .server-card.active {
31
+ background: rgba(229, 9, 20, 0.2);
32
+ border-color: #e50914;
 
 
33
  }
34
 
35
+ .ping-excellent {
36
+ color: #4ade80;
37
  }
38
 
39
+ .ping-good {
40
+ color: #a3e635;
 
41
  }
42
 
43
+ .ping-average {
44
+ color: #facc15;
45
  }
46
 
47
+ .ping-bad {
48
+ color: #f87171;
 
49
  }
50
 
51
+ .quality-badge {
52
+ background: rgba(0, 0, 0, 0.7);
53
+ border-radius: 4px;
54
+ font-weight: bold;
55
  }
56
 
57
  .blur-bg {
 
59
  background: rgba(0, 0, 0, 0.5);
60
  }
61
 
62
+ .progress-bar {
63
+ height: 4px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
64
  background: rgba(255, 255, 255, 0.3);
 
 
 
 
 
65
  }
66
 
67
+ .progress-fill {
68
+ height: 100%;
69
+ background: #e50914;
70
+ transition: width 0.3s ease;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
71
  }
72
  </style>
73
  </head>
 
77
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
78
  <div class="flex items-center space-x-2">
79
  <i class="fas fa-film text-red-500 text-2xl"></i>
80
+ <span class="text-xl font-bold bg-gradient-to-r from-red-500 to-purple-600 bg-clip-text text-transparent">StreamServeurs</span>
 
 
 
 
 
 
 
 
81
  </div>
82
  <div class="flex items-center space-x-4">
83
+ <a href="#" class="px-4 py-2 bg-red-600 rounded-full text-sm font-semibold hover:bg-red-700 transition">
84
+ <i class="fas fa-home mr-2"></i>Accueil
85
+ </a>
 
 
 
 
86
  <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center cursor-pointer hover:bg-purple-600 transition">
87
  <i class="fas fa-user"></i>
88
  </div>
 
91
  </nav>
92
 
93
  <!-- Hero Section -->
94
+ <section class="relative pt-24 pb-16">
95
+ <div class="container mx-auto px-4">
96
+ <div class="max-w-4xl mx-auto text-center">
97
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Serveurs de Streaming Gratuits</h1>
98
+ <p class="text-xl text-gray-300 mb-8">Accédez à des milliers de films en HD via nos serveurs optimisés. Choisissez le meilleur serveur pour une expérience sans interruption.</p>
99
+ <div class="flex flex-wrap justify-center gap-4">
100
+ <div class="px-4 py-2 bg-gray-800 rounded-full flex items-center">
101
+ <i class="fas fa-bolt text-yellow-400 mr-2"></i>
102
+ <span>Serveurs Rapides</span>
103
+ </div>
104
+ <div class="px-4 py-2 bg-gray-800 rounded-full flex items-center">
105
+ <i class="fas fa-shield-alt text-green-400 mr-2"></i>
106
+ <span>Sécurisé</span>
107
+ </div>
108
+ <div class="px-4 py-2 bg-gray-800 rounded-full flex items-center">
109
+ <i class="fas fa-globe text-blue-400 mr-2"></i>
110
+ <span>Global</span>
111
+ </div>
 
 
 
 
 
 
 
 
 
112
  </div>
113
  </div>
114
  </div>
 
 
 
 
 
115
  </section>
116
 
117
+ <!-- Main Content -->
118
+ <div class="container mx-auto px-4 py-12">
119
+ <!-- Film Selection -->
120
+ <div class="mb-12 p-6 rounded-xl blur-bg">
121
+ <div class="flex flex-col md:flex-row items-center gap-6">
122
+ <img src="https://m.media-amazon.com/images/M/MV5BN2QyZGU4ZDctOWMzMy00NTc5LThlOGQtODRmNDE1ZWNhOThjXkEyXkFqcGdeQXVyMDM2NDM2MQ@@._V1_FMjpg_UX1000_.jpg"
123
+ alt="Dune: Part Two"
124
+ class="w-32 h-48 object-cover rounded-lg shadow-lg">
125
+ <div class="flex-1">
126
+ <h2 class="text-2xl font-bold mb-2">Dune: Part Two (2024)</h2>
127
+ <div class="flex flex-wrap gap-2 mb-4">
128
+ <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Science-Fiction</span>
129
+ <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Aventure</span>
130
+ <span class="px-3 py-1 bg-red-500 rounded-full text-sm">4K</span>
131
+ <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">166 min</span>
132
+ </div>
133
+ <p class="text-gray-300 mb-4">Paul Atreides s'unit avec Chani et les Fremen pour venger la trahison de sa famille et empêcher un terrible futur que lui seul peut prévoir.</p>
134
+ <div class="flex items-center">
135
+ <div class="w-full bg-gray-800 rounded-full h-2.5 mr-4">
136
+ <div class="bg-yellow-400 h-2.5 rounded-full" style="width: 85%"></div>
137
+ </div>
138
+ <span class="text-sm font-semibold">8.5/10</span>
139
+ </div>
140
+ </div>
141
  </div>
142
  </div>
143
 
144
+ <!-- Serveurs disponibles -->
145
+ <div class="mb-8">
146
  <h2 class="text-2xl font-bold mb-6 flex items-center">
147
  <span class="w-1 h-8 bg-red-500 mr-3"></span>
148
+ Serveurs disponibles (12)
149
+ <span class="ml-auto text-sm text-gray-400">Tri: <span class="text-white cursor-pointer">Ping <i class="fas fa-sort-down ml-1"></i></span></span>
150
  </h2>
151
+
152
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="serversContainer">
153
+ <!-- Serveur 1 -->
154
+ <div class="server-card rounded-lg overflow-hidden p-4 cursor-pointer active">
155
+ <div class="flex justify-between items-start mb-3">
156
+ <h3 class="font-bold text-lg">Server Premium #1</h3>
157
+ <span class="quality-badge px-2 py-1 text-xs">4K UHD</span>
158
+ </div>
159
+ <div class="flex items-center mb-2">
160
+ <i class="fas fa-server text-gray-400 mr-2"></i>
161
+ <span class="text-sm">France</span>
162
+ </div>
163
+ <div class="flex items-center mb-2">
164
+ <i class="fas fa-tachometer-alt text-gray-400 mr-2"></i>
165
+ <span class="text-sm ping-excellent">Ping: 28ms</span>
166
+ </div>
167
+ <div class="flex items-center mb-4">
168
+ <i class="fas fa-users text-gray-400 mr-2"></i>
169
+ <span class="text-sm">Charge: <span class="text-green-400">Faible</span></span>
170
+ </div>
171
+ <div class="progress-bar rounded-full mb-2">
172
+ <div class="progress-fill rounded-full" style="width: 25%"></div>
173
+ </div>
174
+ <div class="flex justify-between text-xs text-gray-400 mb-4">
175
+ <span>Débit: 12.4 Mbps</span>
176
+ <span>Stable</span>
177
+ </div>
178
+ <button class="w-full py-2 bg-red-600 hover:bg-red-700 rounded-full font-semibold transition">
179
+ <i class="fas fa-play mr-2"></i>Regarder
180
+ </button>
181
+ </div>
182
+
183
+ <!-- Serveur 2 -->
184
+ <div class="server-card rounded-lg overflow-hidden p-4 cursor-pointer">
185
+ <div class="flex justify-between items-start mb-3">
186
+ <h3 class="font-bold text-lg">FastStream EU</h3>
187
+ <span class="quality-badge px-2 py-1 text-xs">1080p</span>
188
+ </div>
189
+ <div class="flex items-center mb-2">
190
+ <i class="fas fa-server text-gray-400 mr-2"></i>
191
+ <span class="text-sm">Allemagne</span>
192
+ </div>
193
+ <div class="flex items-center mb-2">
194
+ <i class="fas fa-tachometer-alt text-gray-400 mr-2"></i>
195
+ <span class="text-sm ping-good">Ping: 42ms</span>
196
+ </div>
197
+ <div class="flex items-center mb-4">
198
+ <i class="fas fa-users text-gray-400 mr-2"></i>
199
+ <span class="text-sm">Charge: <span class="text-yellow-400">Moyenne</span></span>
200
+ </div>
201
+ <div class="progress-bar rounded-full mb-2">
202
+ <div class="progress-fill rounded-full" style="width: 55%"></div>
203
+ </div>
204
+ <div class="flex justify-between text-xs text-gray-400 mb-4">
205
+ <span>Débit: 8.7 Mbps</span>
206
+ <span>Stable</span>
207
+ </div>
208
+ <button class="w-full py-2 bg-red-600 hover:bg-red-700 rounded-full font-semibold transition">
209
+ <i class="fas fa-play mr-2"></i>Regarder
210
+ </button>
211
+ </div>
212
+
213
+ <!-- Serveur 3 -->
214
+ <div class="server-card rounded-lg overflow-hidden p-4 cursor-pointer">
215
+ <div class="flex justify-between items-start mb-3">
216
+ <h3 class="font-bold text-lg">Global HD</h3>
217
+ <span class="quality-badge px-2 py-1 text-xs">720p</span>
218
+ </div>
219
+ <div class="flex items-center mb-2">
220
+ <i class="fas fa-server text-gray-400 mr-2"></i>
221
+ <span class="text-sm">États-Unis</span>
222
+ </div>
223
+ <div class="flex items-center mb-2">
224
+ <i class="fas fa-tachometer-alt text-gray-400 mr-2"></i>
225
+ <span class="text-sm ping-average">Ping: 78ms</span>
226
+ </div>
227
+ <div class="flex items-center mb-4">
228
+ <i class="fas fa-users text-gray-400 mr-2"></i>
229
+ <span class="text-sm">Charge: <span class="text-orange-400">Élevée</span></span>
230
+ </div>
231
+ <div class="progress-bar rounded-full mb-2">
232
+ <div class="progress-fill rounded-full" style="width: 80%"></div>
233
+ </div>
234
+ <div class="flex justify-between text-xs text-gray-400 mb-4">
235
+ <span>Débit: 5.2 Mbps</span>
236
+ <span>Variable</span>
237
+ </div>
238
+ <button class="w-full py-2 bg-red-600 hover:bg-red-700 rounded-full font-semibold transition">
239
+ <i class="fas fa-play mr-2"></i>Regarder
240
+ </button>
241
+ </div>
242
+
243
+ <!-- Serveur 4 -->
244
+ <div class="server-card rounded-lg overflow-hidden p-4 cursor-pointer">
245
+ <div class="flex justify-between items-start mb-3">
246
+ <h3 class="font-bold text-lg">StreamFox Premium</h3>
247
+ <span class="quality-badge px-2 py-1 text-xs">4K UHD</span>
248
+ </div>
249
+ <div class="flex items-center mb-2">
250
+ <i class="fas fa-server text-gray-400 mr-2"></i>
251
+ <span class="text-sm">Canada</span>
252
+ </div>
253
+ <div class="flex items-center mb-2">
254
+ <i class="fas fa-tachometer-alt text-gray-400 mr-2"></i>
255
+ <span class="text-sm ping-excellent">Ping: 32ms</span>
256
+ </div>
257
+ <div class="flex items-center mb-4">
258
+ <i class="fas fa-users text-gray-400 mr-2"></i>
259
+ <span class="text-sm">Charge: <span class="text-green-400">Faible</span></span>
260
+ </div>
261
+ <div class="progress-bar rounded-full mb-2">
262
+ <div class="progress-fill rounded-full" style="width: 30%"></div>
263
+ </div>
264
+ <div class="flex justify-between text-xs text-gray-400 mb-4">
265
+ <span>Débit: 11.8 Mbps</span>
266
+ <span>Très stable</span>
267
+ </div>
268
+ <button class="w-full py-2 bg-red-600 hover:bg-red-700 rounded-full font-semibold transition">
269
+ <i class="fas fa-play mr-2"></i>Regarder
270
+ </button>
271
+ </div>
272
+
273
+ <!-- Serveur 5 -->
274
+ <div class="server-card rounded-lg overflow-hidden p-4 cursor-pointer">
275
+ <div class="flex justify-between items-start mb-3">
276
+ <h3 class="font-bold text-lg">MovieHub #2</h3>
277
+ <span class="quality-badge px-2 py-1 text-xs">1080p</span>
278
+ </div>
279
+ <div class="flex items-center mb-2">
280
+ <i class="fas fa-server text-gray-400 mr-2"></i>
281
+ <span class="text-sm">Royaume-Uni</span>
282
+ </div>
283
+ <div class="flex items-center mb-2">
284
+ <i class="fas fa-tachometer-alt text-gray-400 mr-2"></i>
285
+ <span class="text-sm ping-good">Ping: 48ms</span>
286
+ </div>
287
+ <div class="flex items-center mb-4">
288
+ <i class="fas fa-users text-gray-400 mr-2"></i>
289
+ <span class="text-sm">Charge: <span class="text-yellow-400">Moyenne</span></span>
290
+ </div>
291
+ <div class="progress-bar rounded-full mb-2">
292
+ <div class="progress-fill rounded-full" style="width: 60%"></div>
293
+ </div>
294
+ <div class="flex justify-between text-xs text-gray-400 mb-4">
295
+ <span>Débit: 7.9 Mbps</span>
296
+ <span>Stable</span>
297
+ </div>
298
+ <button class="w-full py-2 bg-red-600 hover:bg-red-700 rounded-full font-semibold transition">
299
+ <i class="fas fa-play mr-2"></i>Regarder
300
+ </button>
301
+ </div>
302
+
303
+ <!-- Serveur 6 -->
304
+ <div class="server-card rounded-lg overflow-hidden p-4 cursor-pointer">
305
+ <div class="flex justify-between items-start mb-3">
306
+ <h3 class="font-bold text-lg">AsiaStream #1</h3>
307
+ <span class="quality-badge px-2 py-1 text-xs">720p</span>
308
+ </div>
309
+ <div class="flex items-center mb-2">
310
+ <i class="fas fa-server text-gray-400 mr-2"></i>
311
+ <span class="text-sm">Japon</span>
312
+ </div>
313
+ <div class="flex items-center mb-2">
314
+ <i class="fas fa-tachometer-alt text-gray-400 mr-2"></i>
315
+ <span class="text-sm ping-bad">Ping: 112ms</span>
316
+ </div>
317
+ <div class="flex items-center mb-4">
318
+ <i class="fas fa-users text-gray-400 mr-2"></i>
319
+ <span class="text-sm">Charge: <span class="text-red-400">Saturée</span></span>
320
+ </div>
321
+ <div class="progress-bar rounded-full mb-2">
322
+ <div class="progress-fill rounded-full" style="width: 95%"></div>
323
+ </div>
324
+ <div class="flex justify-between text-xs text-gray-400 mb-4">
325
+ <span>Débit: 3.1 Mbps</span>
326
+ <span>Instable</span>
327
+ </div>
328
+ <button class="w-full py-2 bg-red-600 hover:bg-red-700 rounded-full font-semibold transition">
329
+ <i class="fas fa-play mr-2"></i>Regarder
330
+ </button>
331
+ </div>
332
  </div>
333
+
334
+ <div class="flex justify-center mt-8">
335
+ <button class="px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-full font-semibold transition">
336
+ <i class="fas fa-sync-alt mr-2"></i>Actualiser les serveurs
337
+ </button>
338
  </div>
339
  </div>
340
 
341
+ <!-- Guide d'utilisation -->
342
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 mb-12">
343
  <h2 class="text-2xl font-bold mb-6 flex items-center">
344
+ <span class="w-1 h-8 bg-blue-500 mr-3"></span>
345
+ Comment utiliser nos serveurs ?
 
346
  </h2>
347
+
348
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
349
+ <div class="bg-gray-800 p-6 rounded-lg">
350
+ <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center mb-4">
351
+ <span class="text-white font-bold text-xl">1</span>
352
+ </div>
353
+ <h3 class="font-bold text-lg mb-2">Choisissez un serveur</h3>
354
+ <p class="text-gray-300">Sélectionnez le serveur avec le meilleur ping et la meilleure qualité pour votre connexion.</p>
355
+ </div>
356
+
357
+ <div class="bg-gray-800 p-6 rounded-lg">
358
+ <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center mb-4">
359
+ <span class="text-white font-bold text-xl">2</span>
360
+ </div>
361
+ <h3 class="font-bold text-lg mb-2">Cliquez sur "Regarder"</h3>
362
+ <p class="text-gray-300">Le lecteur vidéo s'ouvrira automatiquement avec le film sélectionné.</p>
363
+ </div>
364
+
365
+ <div class="bg-gray-800 p-6 rounded-lg">
366
+ <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center mb-4">
367
+ <span class="text-white font-bold text-xl">3</span>
368
+ </div>
369
+ <h3 class="font-bold text-lg mb-2">Profitez du film</h3>
370
+ <p class="text-gray-300">Utilisez les contrôles du lecteur pour mettre en pause, avancer ou ajuster la qualité.</p>
371
  </div>
 
 
 
 
 
 
372
  </div>
373
+ </div>
374
 
375
+ <!-- FAQ -->
376
+ <div class="mb-12">
377
  <h2 class="text-2xl font-bold mb-6 flex items-center">
378
  <span class="w-1 h-8 bg-purple-500 mr-3"></span>
379
+ Questions fréquentes
 
 
 
 
 
 
 
 
 
 
 
380
  </h2>
381
+
382
+ <div class="space-y-4">
383
+ <div class="bg-gray-800 rounded-lg overflow-hidden">
384
+ <button class="faq-question w-full text-left p-4 hover:bg-gray-700 transition flex justify-between items-center">
385
+ <span class="font-semibold">Les serveurs sont-ils vraiment gratuits ?</span>
386
+ <i class="fas fa-chevron-down transition-transform"></i>
387
+ </button>
388
+ <div class="faq-answer p-4 hidden">
389
+ <p class="text-gray-300">Oui, tous nos serveurs sont entièrement gratuits. Nous maintenons ce service grâce à des publicités non intrusives.</p>
390
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
391
  </div>
392
+
393
+ <div class="bg-gray-800 rounded-lg overflow-hidden">
394
+ <button class="faq-question w-full text-left p-4 hover:bg-gray-700 transition flex justify-between items-center">
395
+ <span class="font-semibold">Comment choisir le meilleur serveur ?</span>
396
+ <i class="fas fa-chevron-down transition-transform"></i>
397
+ </button>
398
+ <div class="faq-answer p-4 hidden">
399
+ <p class="text-gray-300">Privilégiez les serveurs avec un ping faible (moins de 50ms) et une charge faible ou moyenne pour une meilleure expérience.</p>
400
+ </div>
401
  </div>
402
+
403
+ <div class="bg-gray-800 rounded-lg overflow-hidden">
404
+ <button class="faq-question w-full text-left p-4 hover:bg-gray-700 transition flex justify-between items-center">
405
+ <span class="font-semibold">Pourquoi certains serveurs sont lents ?</span>
406
+ <i class="fas fa-chevron-down transition-transform"></i>
407
+ </button>
408
+ <div class="faq-answer p-4 hidden">
409
+ <p class="text-gray-300">La vitesse dépend de votre localisation, de la charge du serveur et de votre connexion internet. Essayez différents serveurs pour trouver le plus rapide.</p>
410
+ </div>
411
  </div>
412
+
413
+ <div class="bg-gray-800 rounded-lg overflow-hidden">
414
+ <button class="faq-question w-full text-left p-4 hover:bg-gray-700 transition flex justify-between items-center">
415
+ <span class="font-semibold">Comment signaler un serveur qui ne fonctionne pas ?</span>
416
+ <i class="fas fa-chevron-down transition-transform"></i>
417
+ </button>
418
+ <div class="faq-answer p-4 hidden">
419
+ <p class="text-gray-300">Cliquez sur le bouton "Signaler un problème" sous le serveur concerné. Notre équipe le vérifiera dans les plus brefs délais.</p>
420
+ </div>
421
  </div>
422
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
423
  </div>
424
  </div>
425
 
 
430
  <div class="mb-8 md:mb-0">
431
  <div class="flex items-center space-x-2 mb-4">
432
  <i class="fas fa-film text-red-500 text-2xl"></i>
433
+ <span class="text-xl font-bold bg-gradient-to-r from-red-500 to-purple-600 bg-clip-text text-transparent">StreamServeurs</span>
434
  </div>
435
+ <p class="text-gray-400 max-w-md">La plateforme ultime pour regarder des films en streaming gratuit via des serveurs optimisés partout dans le monde.</p>
436
  </div>
437
  <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
438
  <div>
439
  <h3 class="text-lg font-semibold mb-4">Navigation</h3>
440
+ <ul class="space-y-2">
441
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Accueil</a></li>
442
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Serveurs</a></li>
443
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Films Populaires</a></li>
444
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Nouveautés</a></li>
445
+ </ul>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
446
  </div>
447
+ <div>
448
+ <h3 class="text-lg font-semibold mb-4">Légal</h3>
449
+ <ul class="space-y-2">
450
+ <li><a href="#" class="text-gray-400 hover:text-white transition">CGU</a></li>
451
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Confidentialité</a></li>
452
+ <li><a href="#" class="text-gray-400 hover:text-white transition">DMCA</a></li>
453
+ </ul>
 
454
  </div>
455
+ <div>
456
+ <h3 class="text-lg font-semibold mb-4">Nous suivre</h3>
457
+ <div class="flex space-x-4">
458
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-500 transition">
459
+ <i class="fab fa-telegram"></i>
460
+ </a>
461
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-500 transition">
462
+ <i class="fab fa-discord"></i>
463
+ </a>
464
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-500 transition">
465
+ <i class="fab fa-twitter"></i>
466
+ </a>
467
  </div>
 
468
  </div>
469
  </div>
470
  </div>
471
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
472
+ <p>© 2023 StreamServeurs. Ce site ne stocke aucun fichier sur son serveur.</p>
 
 
 
473
  </div>
474
  </div>
475
+ </footer>
 
476
 
477
+ <!-- Modal Lecteur Vidéo -->
478
+ <div id="videoModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-90 p-4">
479
+ <div class="relative w-full max-w-6xl">
480
+ <button id="closeModal" class="absolute -top-12 right-0 text-white text-3xl hover:text-red-500 transition">
481
+ <i class="fas fa-times"></i>
482
+ </button>
483
+ <div class="aspect-w-16 aspect-h-9">
484
+ <video id="player" controls class="w-full rounded-lg shadow-2xl">
485
+ <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
486
+ Votre navigateur ne supporte pas la lecture de vidéos.
487
+ </video>
488
  </div>
489
+ <div class="mt-4 text-white">
490
+ <h2 class="text-2xl font-bold">Dune: Part Two (2024)</h2>
491
+ <div class="flex items-center mt-2 space-x-4 text-sm text-gray-300">
492
+ <span>4K UHD</span>
493
+ <span>166 min</span>
494
+ <span>Science-Fiction</span>
 
 
 
 
495
  </div>
496
+ <div class="flex space-x-4 mt-4">
497
+ <button class="px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700 transition">
498
+ <i class="fas fa-closed-captioning mr-2"></i>Sous-titres
 
 
499
  </button>
500
+ <button class="px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700 transition">
501
+ <i class="fas fa-cog mr-2"></i>Qualité
502
+ </button>
503
+ <button class="px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700 transition" onclick="openFullscreen()">
504
+ <i class="fas fa-expand mr-2"></i>Plein écran
505
  </button>
506
  </div>
507
  </div>
508
  </div>
509
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
510
 
511
+ <script>
512
+ // Initialisation
513
+ document.addEventListener('DOMContentLoaded', function() {
514
+ // Sélection des serveurs
515
+ const serverCards = document.querySelectorAll('.server-card');
516
+ serverCards.forEach(card => {
517
+ card.addEventListener('click', function() {
518
+ serverCards.forEach(c => c.classList.remove('active'));
519
+ this.classList.add('active');
520
+ });
 
 
 
 
 
 
 
 
 
 
 
 
521
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
522
 
523
+ // Boutons "Regarder"
524
+ const watchButtons = document.querySelectorAll('.server-card button');
525
+ watchButtons.forEach(button => {
526
+ button.addEventListener('click', function(e) {
527
+ e.stopPropagation();
528
+ document.getElementById('videoModal').classList.remove('hidden');
529
+ document.getElementById('player').play();
530
+ document.body.style.overflow = 'hidden';
531
  });
 
 
 
 
 
 
 
532
  });
533
 
534
+ // FAQ
535
+ const faqQuestions = document.querySelectorAll('.faq-question');
536
+ faqQuestions.forEach(question => {
537
+ question.addEventListener('click', function() {
538
+ const answer = this.nextElementSibling;
539
+ const icon = this.querySelector('i');
540
+
541
+ answer.classList.toggle('hidden');
542
+ icon.classList.toggle('rotate-180');
543
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
544
  });
545
+
546
+ // Fermer le modal
547
+ document.getElementById('closeModal').addEventListener('click', function() {
548
+ document.getElementById('videoModal').classList.add('hidden');
549
+ document.getElementById('player').pause();
550
+ document.body.style.overflow = 'auto';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
551
  });
552
+
553
+ // Plein écran
554
+ function openFullscreen() {
555
+ const elem = document.getElementById('player');
556
+ if (elem.requestFullscreen) {
557
+ elem.requestFullscreen();
558
+ } else if (elem.webkitRequestFullscreen) {
559
+ elem.webkitRequestFullscreen();
560
+ } else if (elem.msRequestFullscreen) {
561
+ elem.msRequestFullscreen();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
562
  }
563
+ }
564
+
565
+ // Simuler le chargement des serveurs
566
+ setTimeout(() => {
567
+ const loadingServer = document.createElement('div');
568
+ loadingServer.className = 'server-card rounded-lg overflow-hidden p-4 cursor-pointer';
569
+ loadingServer.innerHTML = `
570
+ <div class="flex justify-between items-start mb-3">
571
+ <h3 class="font-bold text-lg">Nouveau Serveur FR</h3>
572
+ <span class="quality-badge px-2 py-1 text-xs">1080p</span>
573
+ </div>
574
+ <div class="flex items-center mb-2">
575
+ <i class="fas fa-server text-gray-400 mr-2"></i>
576
+ <span class="text-sm">France</span>
577
+ </div>
578
+ <div class="flex items-center mb-2">
579
+ <i class="fas fa-tachometer-alt text-gray-400 mr-2"></i>
580
+ <span class="text-sm ping-excellent">Ping: 24ms</span>
581
+ </div>
582
+ <div class="flex items-center mb-4">
583
+ <i class="fas fa-users text-gray-400 mr-2"></i>
584
+ <span class="text-sm">Charge: <span class="text-green-400">Faible</span></span>
585
+ </div>
586
+ <div class="progress-bar rounded-full mb-2">
587
+ <div class="progress-fill rounded-full" style="width: 20%"></div>
588
+ </div>
589
+ <div class="flex justify-between text-xs text-gray-400 mb-4">
590
+ <span>Débit: 14.2 Mbps</span>
591
+ <span>Très stable</span>
592
+ </div>
593
+ <button class="w-full py-2 bg-red-600 hover:bg-red-700 rounded-full font-semibold transition">
594
+ <i class="fas fa-play mr-2"></i>Regarder
595
+ </button>
596
+ `;
597
 
598
+ document.getElementById('serversContainer').appendChild(loadingServer);
 
 
 
599
 
600
+ // Ajouter l'événement click
601
+ loadingServer.addEventListener('click', function() {
602
+ serverCards.forEach(c => c.classList.remove('active'));
603
+ this.classList.add('active');
604
  });
605
 
606
+ loadingServer.querySelector('button').addEventListener('click', function(e) {
607
+ e.stopPropagation();
608
+ document.getElementById('videoModal').classList.remove('hidden');
609
+ document.getElementById('player').play();
610
+ document.body.style.overflow = 'hidden';
611
+ });
612
+ }, 3000);
 
 
 
 
 
 
 
 
 
 
 
 
 
613
  });
614
+ </script>
 
615
  <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/cin-plus" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
616
  </html>
prompts.txt CHANGED
@@ -1,4 +1,5 @@
1
  https://huggingface.co/spaces/docto41/cin-flix . Avec lecture en automatique et une tresbelle interface animé
2
  ajouter une grosse base de liens des films de 52652 liens url des film complet a regarder de 2023 à 2025
3
  mettre les vrai titres des films avec leur image original et activer les bouton play
4
- activer mode lecture du film complet avec toutes les liens des serveur gratuite
 
 
1
  https://huggingface.co/spaces/docto41/cin-flix . Avec lecture en automatique et une tresbelle interface animé
2
  ajouter une grosse base de liens des films de 52652 liens url des film complet a regarder de 2023 à 2025
3
  mettre les vrai titres des films avec leur image original et activer les bouton play
4
+ activer mode lecture du film complet avec toutes les liens des serveur gratuite
5
+ je veux des serveur pour regarder les film