Hugging Face's logo

Spaces:
docto41
/
cin-plus
Running

App Files Community
docto41 commited on
Commit
4a87d38
·
verified ·
1 Parent(s): 9da21e5

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +307 -52
  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éStream - 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>
@@ -63,6 +63,42 @@
63
  input:checked + .autoplay-slider:before {
64
  transform: translateX(26px);
65
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
66
  </style>
67
  </head>
68
  <body>
@@ -71,11 +107,11 @@
71
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
72
  <div class="flex items-center space-x-4">
73
  <i class="fas fa-film text-red-500 text-2xl"></i>
74
- <span class="text-xl font-bold">CinéStream</span>
75
  <div class="hidden md:flex space-x-6 ml-10">
76
  <a href="#" class="hover:text-gray-300">Accueil</a>
77
- <a href="#" class="hover:text-gray-300">Films</a>
78
- <a href="#" class="hover:text-gray-300">Séries</a>
79
  <a href="#" class="hover:text-gray-300">Nouveautés</a>
80
  </div>
81
  </div>
@@ -102,16 +138,17 @@
102
  alt="Dune"
103
  class="w-full h-[70vh] object-cover">
104
  <div class="container mx-auto px-4 relative z-20 mt-[-150px]">
105
- <h1 class="text-4xl md:text-5xl font-bold mb-4">Dune : Partie Deux</h1>
106
  <div class="flex items-center space-x-4 mb-6">
107
  <span class="text-green-500 font-semibold">97% Match</span>
108
  <span>2024</span>
109
  <span class="border px-2">4K Ultra HD</span>
110
  <span>2h 46m</span>
 
111
  </div>
112
  <p class="max-w-2xl text-lg mb-6">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>
113
  <div class="flex space-x-4">
114
- <button class="px-6 py-3 bg-white text-black rounded flex items-center font-semibold hover:bg-opacity-80">
115
  <i class="fas fa-play mr-2"></i> Lecture
116
  </button>
117
  <button class="px-6 py-3 bg-gray-600 bg-opacity-70 rounded flex items-center font-semibold hover:bg-opacity-50">
@@ -124,20 +161,22 @@
124
  <!-- Films Section -->
125
  <div class="container mx-auto px-4 py-8">
126
  <div class="mb-10">
127
- <h2 class="text-2xl font-bold mb-6">Nouveaux films ajoutés</h2>
128
  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
129
  <!-- Film 1 -->
130
  <div class="film-card relative rounded overflow-hidden group">
131
  <img src="https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQH2CZjjYVvJ.jpg"
132
  alt="Oppenheimer"
133
  class="w-full h-auto object-cover rounded">
 
 
134
  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300">
135
- <div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300">
136
  <i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i>
137
  </div>
138
  </div>
139
  <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
140
- <h3 class="font-semibold">Oppenheimer</h3>
141
  <div class="flex justify-between text-xs text-gray-300">
142
  <span>2023</span>
143
  <span>3h</span>
@@ -150,13 +189,15 @@
150
  <img src="https://image.tmdb.org/t/p/w500/kDp1vUBnMpe8ak4rjgl3cLELqjU.jpg"
151
  alt="Killers of the Flower Moon"
152
  class="w-full h-auto object-cover rounded">
 
 
153
  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300">
154
- <div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300">
155
  <i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i>
156
  </div>
157
  </div>
158
  <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
159
- <h3 class="font-semibold">Killers of the Flower Moon</h3>
160
  <div class="flex justify-between text-xs text-gray-300">
161
  <span>2023</span>
162
  <span>3h 26m</span>
@@ -169,13 +210,15 @@
169
  <img src="https://image.tmdb.org/t/p/w500/8Vt6mWRCeplUPZQoKvXvxQyFsVu.jpg"
170
  alt="The Marvels"
171
  class="w-full h-auto object-cover rounded">
 
 
172
  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300">
173
- <div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300">
174
  <i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i>
175
  </div>
176
  </div>
177
  <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
178
- <h3 class="font-semibold">The Marvels</h3>
179
  <div class="flex justify-between text-xs text-gray-300">
180
  <span>2023</span>
181
  <span>1h 45m</span>
@@ -188,13 +231,15 @@
188
  <img src="https://image.tmdb.org/t/p/w500/4m1Au3YkjqsxF8iwQy0fPYSxE0h.jpg"
189
  alt="Napoleon"
190
  class="w-full h-auto object-cover rounded">
 
 
191
  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300">
192
- <div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300">
193
  <i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i>
194
  </div>
195
  </div>
196
  <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
197
- <h3 class="font-semibold">Napoléon</h3>
198
  <div class="flex justify-between text-xs text-gray-300">
199
  <span>2023</span>
200
  <span>2h 38m</span>
@@ -207,13 +252,15 @@
207
  <img src="https://image.tmdb.org/t/p/w500/1X7l9L2FVaxbZluYrGq4h8QZQpM.jpg"
208
  alt="Wonka"
209
  class="w-full h-auto object-cover rounded">
 
 
210
  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300">
211
- <div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300">
212
  <i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i>
213
  </div>
214
  </div>
215
  <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
216
- <h3 class="font-semibold">Wonka</h3>
217
  <div class="flex justify-between text-xs text-gray-300">
218
  <span>2023</span>
219
  <span>1h 56m</span>
@@ -225,20 +272,22 @@
225
 
226
  <!-- Recommandations -->
227
  <div class="mb-10">
228
- <h2 class="text-2xl font-bold mb-6">Recommandations pour vous</h2>
229
  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
230
  <!-- Film 6 -->
231
  <div class="film-card relative rounded overflow-hidden group">
232
  <img src="https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1nBua.jpg"
233
  alt="Poor Things"
234
  class="w-full h-auto object-cover rounded">
 
 
235
  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300">
236
- <div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300">
237
  <i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i>
238
  </div>
239
  </div>
240
  <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
241
- <h3 class="font-semibold">Poor Things</h3>
242
  <div class="flex justify-between text-xs text-gray-300">
243
  <span>2023</span>
244
  <span>2h 21m</span>
@@ -251,13 +300,15 @@
251
  <img src="https://image.tmdb.org/t/p/w500/4HodYYKEIsGOdinkGi2Ucz6X9i0.jpg"
252
  alt="The Boy and the Heron"
253
  class="w-full h-auto object-cover rounded">
 
 
254
  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300">
255
- <div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300">
256
  <i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i>
257
  </div>
258
  </div>
259
  <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
260
- <h3 class="font-semibold">Le Garçon et le Héron</h3>
261
  <div class="flex justify-between text-xs text-gray-300">
262
  <span>2023</span>
263
  <span>2h 4m</span>
@@ -270,13 +321,15 @@
270
  <img src="https://image.tmdb.org/t/p/w500/1XDDXPXGiI8g7Gf0rwQUdWJ6q2S.jpg"
271
  alt="The Hunger Games: The Ballad of Songbirds & Snakes"
272
  class="w-full h-auto object-cover rounded">
 
 
273
  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300">
274
- <div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300">
275
  <i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i>
276
  </div>
277
  </div>
278
  <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
279
- <h3 class="font-semibold">Hunger Games : La Ballade...</h3>
280
  <div class="flex justify-between text-xs text-gray-300">
281
  <span>2023</span>
282
  <span>2h 37m</span>
@@ -289,13 +342,15 @@
289
  <img src="https://image.tmdb.org/t/p/w500/5mzr6JZbrqnqD8rCEvPhuCE5Fw2.jpg"
290
  alt="The Iron Claw"
291
  class="w-full h-auto object-cover rounded">
 
 
292
  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300">
293
- <div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300">
294
  <i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i>
295
  </div>
296
  </div>
297
  <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
298
- <h3 class="font-semibold">The Iron Claw</h3>
299
  <div class="flex justify-between text-xs text-gray-300">
300
  <span>2023</span>
301
  <span>2h 12m</span>
@@ -308,13 +363,15 @@
308
  <img src="https://image.tmdb.org/t/p/w500/1e2yX2LFT7xRSEiir9bsIc3UR1K.jpg"
309
  alt="Aquaman and the Lost Kingdom"
310
  class="w-full h-auto object-cover rounded">
 
 
311
  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300">
312
- <div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300">
313
  <i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i>
314
  </div>
315
  </div>
316
  <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
317
- <h3 class="font-semibold">Aquaman 2</h3>
318
  <div class="flex justify-between text-xs text-gray-300">
319
  <span>2023</span>
320
  <span>2h 4m</span>
@@ -332,17 +389,17 @@
332
  <div class="mb-8 md:mb-0">
333
  <div class="flex items-center space-x-2 mb-4">
334
  <i class="fas fa-film text-red-500 text-2xl"></i>
335
- <span class="text-xl font-bold">CinéStream</span>
336
  </div>
337
- <p class="text-gray-400 max-w-md">La meilleure plateforme pour découvrir des films du monde entier.</p>
338
  </div>
339
  <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
340
  <div>
341
  <h3 class="text-lg font-semibold mb-4">Navigation</h3>
342
  <ul class="space-y-2">
343
  <li><a href="#" class="text-gray-400 hover:text-white">Accueil</a></li>
344
- <li><a href="#" class="text-gray-400 hover:text-white">Films</a></li>
345
- <li><a href="#" class="text-gray-400 hover:text-white">Séries</a></li>
346
  <li><a href="#" class="text-gray-400 hover:text-white">Nouveautés</a></li>
347
  </ul>
348
  </div>
@@ -371,7 +428,7 @@
371
  </div>
372
  </div>
373
  <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
374
- <p>© 2023 CinéStream. Tous droits réservés.</p>
375
  </div>
376
  </div>
377
  </footer>
@@ -384,22 +441,32 @@
384
  </button>
385
  <div class="aspect-w-16 aspect-h-9">
386
  <video id="moviePlayer" controls autoplay class="w-full rounded-lg">
387
- <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
388
  Votre navigateur ne supporte pas la lecture de vidéos.
389
  </video>
390
  </div>
 
 
 
 
 
 
 
 
 
391
  <div class="mt-4 text-white">
392
- <h2 class="text-2xl font-bold">Dune : Partie Deux (2024)</h2>
393
  <div class="flex items-center mt-2 space-x-4 text-sm text-gray-300">
394
- <span>4K UHD</span>
395
- <span>2h 46m</span>
396
- <span>Science-Fiction</span>
 
397
  </div>
398
  <div class="flex space-x-4 mt-4">
399
  <button class="px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700">
400
  <i class="fas fa-closed-captioning mr-2"></i>Sous-titres
401
  </button>
402
- <button class="px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700">
403
  <i class="fas fa-cog mr-2"></i>Qualité
404
  </button>
405
  <button class="px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700" onclick="openFullscreen()">
@@ -411,23 +478,126 @@
411
  </div>
412
 
413
  <script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
414
  // Initialisation
415
  document.addEventListener('DOMContentLoaded', function() {
416
- // Play buttons
417
- const playButtons = document.querySelectorAll('.play-icon, .bg-white');
418
- playButtons.forEach(button => {
419
- button.addEventListener('click', function() {
420
- document.getElementById('playerModal').classList.remove('hidden');
421
- document.getElementById('moviePlayer').play();
422
- document.body.style.overflow = 'hidden';
423
- });
424
- });
425
-
426
  // Close player
427
  document.getElementById('closePlayer').addEventListener('click', function() {
428
- document.getElementById('playerModal').classList.add('hidden');
429
- document.getElementById('moviePlayer').pause();
430
- document.body.style.overflow = 'auto';
431
  });
432
 
433
  // Fullscreen
@@ -456,6 +626,91 @@
456
  }
457
  });
458
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
459
  </script>
460
  <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>
461
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CinéStream - Films en Streaming VF</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>
 
63
  input:checked + .autoplay-slider:before {
64
  transform: translateX(26px);
65
  }
66
+
67
+ .server-btn {
68
+ transition: all 0.3s ease;
69
+ }
70
+
71
+ .server-btn:hover {
72
+ transform: translateY(-2px);
73
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
74
+ }
75
+
76
+ .server-btn.active {
77
+ background-color: #e50914;
78
+ border-color: #e50914;
79
+ }
80
+
81
+ .quality-badge {
82
+ position: absolute;
83
+ top: 8px;
84
+ right: 8px;
85
+ background: rgba(0, 0, 0, 0.7);
86
+ padding: 2px 6px;
87
+ border-radius: 4px;
88
+ font-size: 12px;
89
+ font-weight: bold;
90
+ }
91
+
92
+ .lang-badge {
93
+ position: absolute;
94
+ top: 8px;
95
+ left: 8px;
96
+ background: rgba(0, 0, 0, 0.7);
97
+ padding: 2px 6px;
98
+ border-radius: 4px;
99
+ font-size: 12px;
100
+ font-weight: bold;
101
+ }
102
  </style>
103
  </head>
104
  <body>
 
107
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
108
  <div class="flex items-center space-x-4">
109
  <i class="fas fa-film text-red-500 text-2xl"></i>
110
+ <span class="text-xl font-bold">CinéStream VF</span>
111
  <div class="hidden md:flex space-x-6 ml-10">
112
  <a href="#" class="hover:text-gray-300">Accueil</a>
113
+ <a href="#" class="hover:text-gray-300">Films VF</a>
114
+ <a href="#" class="hover:text-gray-300">Séries VF</a>
115
  <a href="#" class="hover:text-gray-300">Nouveautés</a>
116
  </div>
117
  </div>
 
138
  alt="Dune"
139
  class="w-full h-[70vh] object-cover">
140
  <div class="container mx-auto px-4 relative z-20 mt-[-150px]">
141
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Dune : Partie Deux (VF)</h1>
142
  <div class="flex items-center space-x-4 mb-6">
143
  <span class="text-green-500 font-semibold">97% Match</span>
144
  <span>2024</span>
145
  <span class="border px-2">4K Ultra HD</span>
146
  <span>2h 46m</span>
147
+ <span class="bg-blue-500 px-2 rounded">VF</span>
148
  </div>
149
  <p class="max-w-2xl text-lg mb-6">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>
150
  <div class="flex space-x-4">
151
+ <button class="px-6 py-3 bg-white text-black rounded flex items-center font-semibold hover:bg-opacity-80" onclick="playMovie('dune2')">
152
  <i class="fas fa-play mr-2"></i> Lecture
153
  </button>
154
  <button class="px-6 py-3 bg-gray-600 bg-opacity-70 rounded flex items-center font-semibold hover:bg-opacity-50">
 
161
  <!-- Films Section -->
162
  <div class="container mx-auto px-4 py-8">
163
  <div class="mb-10">
164
+ <h2 class="text-2xl font-bold mb-6">Nouveaux films VF ajoutés</h2>
165
  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
166
  <!-- Film 1 -->
167
  <div class="film-card relative rounded overflow-hidden group">
168
  <img src="https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQH2CZjjYVvJ.jpg"
169
  alt="Oppenheimer"
170
  class="w-full h-auto object-cover rounded">
171
+ <span class="quality-badge">4K</span>
172
+ <span class="lang-badge">VF</span>
173
  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300">
174
+ <div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300" onclick="playMovie('oppenheimer')">
175
  <i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i>
176
  </div>
177
  </div>
178
  <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
179
+ <h3 class="font-semibold">Oppenheimer (VF)</h3>
180
  <div class="flex justify-between text-xs text-gray-300">
181
  <span>2023</span>
182
  <span>3h</span>
 
189
  <img src="https://image.tmdb.org/t/p/w500/kDp1vUBnMpe8ak4rjgl3cLELqjU.jpg"
190
  alt="Killers of the Flower Moon"
191
  class="w-full h-auto object-cover rounded">
192
+ <span class="quality-badge">1080p</span>
193
+ <span class="lang-badge">VF</span>
194
  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300">
195
+ <div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300" onclick="playMovie('killers')">
196
  <i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i>
197
  </div>
198
  </div>
199
  <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
200
+ <h3 class="font-semibold">Killers of the Flower Moon (VF)</h3>
201
  <div class="flex justify-between text-xs text-gray-300">
202
  <span>2023</span>
203
  <span>3h 26m</span>
 
210
  <img src="https://image.tmdb.org/t/p/w500/8Vt6mWRCeplUPZQoKvXvxQyFsVu.jpg"
211
  alt="The Marvels"
212
  class="w-full h-auto object-cover rounded">
213
+ <span class="quality-badge">1080p</span>
214
+ <span class="lang-badge">VF</span>
215
  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300">
216
+ <div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300" onclick="playMovie('marvels')">
217
  <i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i>
218
  </div>
219
  </div>
220
  <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
221
+ <h3 class="font-semibold">The Marvels (VF)</h3>
222
  <div class="flex justify-between text-xs text-gray-300">
223
  <span>2023</span>
224
  <span>1h 45m</span>
 
231
  <img src="https://image.tmdb.org/t/p/w500/4m1Au3YkjqsxF8iwQy0fPYSxE0h.jpg"
232
  alt="Napoleon"
233
  class="w-full h-auto object-cover rounded">
234
+ <span class="quality-badge">720p</span>
235
+ <span class="lang-badge">VF</span>
236
  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300">
237
+ <div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300" onclick="playMovie('napoleon')">
238
  <i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i>
239
  </div>
240
  </div>
241
  <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
242
+ <h3 class="font-semibold">Napoléon (VF)</h3>
243
  <div class="flex justify-between text-xs text-gray-300">
244
  <span>2023</span>
245
  <span>2h 38m</span>
 
252
  <img src="https://image.tmdb.org/t/p/w500/1X7l9L2FVaxbZluYrGq4h8QZQpM.jpg"
253
  alt="Wonka"
254
  class="w-full h-auto object-cover rounded">
255
+ <span class="quality-badge">1080p</span>
256
+ <span class="lang-badge">VF</span>
257
  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300">
258
+ <div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300" onclick="playMovie('wonka')">
259
  <i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i>
260
  </div>
261
  </div>
262
  <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
263
+ <h3 class="font-semibold">Wonka (VF)</h3>
264
  <div class="flex justify-between text-xs text-gray-300">
265
  <span>2023</span>
266
  <span>1h 56m</span>
 
272
 
273
  <!-- Recommandations -->
274
  <div class="mb-10">
275
+ <h2 class="text-2xl font-bold mb-6">Recommandations VF pour vous</h2>
276
  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
277
  <!-- Film 6 -->
278
  <div class="film-card relative rounded overflow-hidden group">
279
  <img src="https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1nBua.jpg"
280
  alt="Poor Things"
281
  class="w-full h-auto object-cover rounded">
282
+ <span class="quality-badge">1080p</span>
283
+ <span class="lang-badge">VF</span>
284
  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300">
285
+ <div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300" onclick="playMovie('poorthings')">
286
  <i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i>
287
  </div>
288
  </div>
289
  <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
290
+ <h3 class="font-semibold">Poor Things (VF)</h3>
291
  <div class="flex justify-between text-xs text-gray-300">
292
  <span>2023</span>
293
  <span>2h 21m</span>
 
300
  <img src="https://image.tmdb.org/t/p/w500/4HodYYKEIsGOdinkGi2Ucz6X9i0.jpg"
301
  alt="The Boy and the Heron"
302
  class="w-full h-auto object-cover rounded">
303
+ <span class="quality-badge">720p</span>
304
+ <span class="lang-badge">VF</span>
305
  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300">
306
+ <div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300" onclick="playMovie('boyheron')">
307
  <i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i>
308
  </div>
309
  </div>
310
  <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
311
+ <h3 class="font-semibold">Le Garçon et le Héron (VF)</h3>
312
  <div class="flex justify-between text-xs text-gray-300">
313
  <span>2023</span>
314
  <span>2h 4m</span>
 
321
  <img src="https://image.tmdb.org/t/p/w500/1XDDXPXGiI8g7Gf0rwQUdWJ6q2S.jpg"
322
  alt="The Hunger Games: The Ballad of Songbirds & Snakes"
323
  class="w-full h-auto object-cover rounded">
324
+ <span class="quality-badge">1080p</span>
325
+ <span class="lang-badge">VF</span>
326
  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300">
327
+ <div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300" onclick="playMovie('hungergames')">
328
  <i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i>
329
  </div>
330
  </div>
331
  <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
332
+ <h3 class="font-semibold">Hunger Games : La Ballade... (VF)</h3>
333
  <div class="flex justify-between text-xs text-gray-300">
334
  <span>2023</span>
335
  <span>2h 37m</span>
 
342
  <img src="https://image.tmdb.org/t/p/w500/5mzr6JZbrqnqD8rCEvPhuCE5Fw2.jpg"
343
  alt="The Iron Claw"
344
  class="w-full h-auto object-cover rounded">
345
+ <span class="quality-badge">720p</span>
346
+ <span class="lang-badge">VF</span>
347
  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300">
348
+ <div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300" onclick="playMovie('ironclaw')">
349
  <i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i>
350
  </div>
351
  </div>
352
  <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
353
+ <h3 class="font-semibold">The Iron Claw (VF)</h3>
354
  <div class="flex justify-between text-xs text-gray-300">
355
  <span>2023</span>
356
  <span>2h 12m</span>
 
363
  <img src="https://image.tmdb.org/t/p/w500/1e2yX2LFT7xRSEiir9bsIc3UR1K.jpg"
364
  alt="Aquaman and the Lost Kingdom"
365
  class="w-full h-auto object-cover rounded">
366
+ <span class="quality-badge">4K</span>
367
+ <span class="lang-badge">VF</span>
368
  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300">
369
+ <div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300" onclick="playMovie('aquaman2')">
370
  <i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i>
371
  </div>
372
  </div>
373
  <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
374
+ <h3 class="font-semibold">Aquaman 2 (VF)</h3>
375
  <div class="flex justify-between text-xs text-gray-300">
376
  <span>2023</span>
377
  <span>2h 4m</span>
 
389
  <div class="mb-8 md:mb-0">
390
  <div class="flex items-center space-x-2 mb-4">
391
  <i class="fas fa-film text-red-500 text-2xl"></i>
392
+ <span class="text-xl font-bold">CinéStream VF</span>
393
  </div>
394
+ <p class="text-gray-400 max-w-md">La meilleure plateforme pour regarder des films en VF directement en streaming.</p>
395
  </div>
396
  <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
397
  <div>
398
  <h3 class="text-lg font-semibold mb-4">Navigation</h3>
399
  <ul class="space-y-2">
400
  <li><a href="#" class="text-gray-400 hover:text-white">Accueil</a></li>
401
+ <li><a href="#" class="text-gray-400 hover:text-white">Films VF</a></li>
402
+ <li><a href="#" class="text-gray-400 hover:text-white">Séries VF</a></li>
403
  <li><a href="#" class="text-gray-400 hover:text-white">Nouveautés</a></li>
404
  </ul>
405
  </div>
 
428
  </div>
429
  </div>
430
  <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
431
+ <p>© 2023 CinéStream VF. Tous droits réservés.</p>
432
  </div>
433
  </div>
434
  </footer>
 
441
  </button>
442
  <div class="aspect-w-16 aspect-h-9">
443
  <video id="moviePlayer" controls autoplay class="w-full rounded-lg">
444
+ <!-- La source sera dynamiquement changée par JavaScript -->
445
  Votre navigateur ne supporte pas la lecture de vidéos.
446
  </video>
447
  </div>
448
+
449
+ <!-- Serveurs de streaming -->
450
+ <div class="mt-4 bg-gray-900 p-4 rounded-lg">
451
+ <h3 class="text-lg font-semibold mb-3">Serveurs VF disponibles</h3>
452
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3" id="serverList">
453
+ <!-- Les serveurs seront ajoutés dynamiquement -->
454
+ </div>
455
+ </div>
456
+
457
  <div class="mt-4 text-white">
458
+ <h2 class="text-2xl font-bold" id="movieTitle">Titre du film</h2>
459
  <div class="flex items-center mt-2 space-x-4 text-sm text-gray-300">
460
+ <span id="movieQuality">4K UHD</span>
461
+ <span id="movieDuration">2h 46m</span>
462
+ <span id="movieGenre">Science-Fiction</span>
463
+ <span class="bg-blue-500 px-2 rounded">VF</span>
464
  </div>
465
  <div class="flex space-x-4 mt-4">
466
  <button class="px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700">
467
  <i class="fas fa-closed-captioning mr-2"></i>Sous-titres
468
  </button>
469
+ <button class="px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700" id="qualityBtn">
470
  <i class="fas fa-cog mr-2"></i>Qualité
471
  </button>
472
  <button class="px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700" onclick="openFullscreen()">
 
478
  </div>
479
 
480
  <script>
481
+ // Base de données des films et serveurs
482
+ const moviesDatabase = {
483
+ 'dune2': {
484
+ title: 'Dune : Partie Deux (VF)',
485
+ quality: '4K UHD',
486
+ duration: '2h 46m',
487
+ genre: 'Science-Fiction',
488
+ servers: [
489
+ { name: 'Serveur VF 1', url: 'https://example.com/stream/dune2/vf1', quality: '4K' },
490
+ { name: 'Serveur VF 2', url: 'https://example.com/stream/dune2/vf2', quality: '1080p' },
491
+ { name: 'Serveur VF 3', url: 'https://example.com/stream/dune2/vf3', quality: '720p' },
492
+ { name: 'Serveur VF 4', url: 'https://example.com/stream/dune2/vf4', quality: '1080p' }
493
+ ]
494
+ },
495
+ 'oppenheimer': {
496
+ title: 'Oppenheimer (VF)',
497
+ quality: '4K UHD',
498
+ duration: '3h',
499
+ genre: 'Drame Historique',
500
+ servers: [
501
+ { name: 'Serveur VF 1', url: 'https://example.com/stream/oppenheimer/vf1', quality: '4K' },
502
+ { name: 'Serveur VF 2', url: 'https://example.com/stream/oppenheimer/vf2', quality: '1080p' }
503
+ ]
504
+ },
505
+ 'killers': {
506
+ title: 'Killers of the Flower Moon (VF)',
507
+ quality: '1080p',
508
+ duration: '3h 26m',
509
+ genre: 'Drame',
510
+ servers: [
511
+ { name: 'Serveur VF 1', url: 'https://example.com/stream/killers/vf1', quality: '1080p' },
512
+ { name: 'Serveur VF 2', url: 'https://example.com/stream/killers/vf2', quality: '720p' }
513
+ ]
514
+ },
515
+ 'marvels': {
516
+ title: 'The Marvels (VF)',
517
+ quality: '1080p',
518
+ duration: '1h 45m',
519
+ genre: 'Action',
520
+ servers: [
521
+ { name: 'Serveur VF 1', url: 'https://example.com/stream/marvels/vf1', quality: '1080p' },
522
+ { name: 'Serveur VF 2', url: 'https://example.com/stream/marvels/vf2', quality: '720p' },
523
+ { name: 'Serveur VF 3', url: 'https://example.com/stream/marvels/vf3', quality: '1080p' }
524
+ ]
525
+ },
526
+ 'napoleon': {
527
+ title: 'Napoléon (VF)',
528
+ quality: '720p',
529
+ duration: '2h 38m',
530
+ genre: 'Historique',
531
+ servers: [
532
+ { name: 'Serveur VF 1', url: 'https://example.com/stream/napoleon/vf1', quality: '720p' },
533
+ { name: 'Serveur VF 2', url: 'https://example.com/stream/napoleon/vf2', quality: '1080p' }
534
+ ]
535
+ },
536
+ 'wonka': {
537
+ title: 'Wonka (VF)',
538
+ quality: '1080p',
539
+ duration: '1h 56m',
540
+ genre: 'Fantaisie',
541
+ servers: [
542
+ { name: 'Serveur VF 1', url: 'https://example.com/stream/wonka/vf1', quality: '1080p' },
543
+ { name: 'Serveur VF 2', url: 'https://example.com/stream/wonka/vf2', quality: '720p' }
544
+ ]
545
+ },
546
+ 'poorthings': {
547
+ title: 'Poor Things (VF)',
548
+ quality: '1080p',
549
+ duration: '2h 21m',
550
+ genre: 'Drame',
551
+ servers: [
552
+ { name: 'Serveur VF 1', url: 'https://example.com/stream/poorthings/vf1', quality: '1080p' }
553
+ ]
554
+ },
555
+ 'boyheron': {
556
+ title: 'Le Garçon et le Héron (VF)',
557
+ quality: '720p',
558
+ duration: '2h 4m',
559
+ genre: 'Animation',
560
+ servers: [
561
+ { name: 'Serveur VF 1', url: 'https://example.com/stream/boyheron/vf1', quality: '720p' },
562
+ { name: 'Serveur VF 2', url: 'https://example.com/stream/boyheron/vf2', quality: '1080p' }
563
+ ]
564
+ },
565
+ 'hungergames': {
566
+ title: 'Hunger Games : La Ballade... (VF)',
567
+ quality: '1080p',
568
+ duration: '2h 37m',
569
+ genre: 'Action',
570
+ servers: [
571
+ { name: 'Serveur VF 1', url: 'https://example.com/stream/hungergames/vf1', quality: '1080p' },
572
+ { name: 'Serveur VF 2', url: 'https://example.com/stream/hungergames/vf2', quality: '720p' }
573
+ ]
574
+ },
575
+ 'ironclaw': {
576
+ title: 'The Iron Claw (VF)',
577
+ quality: '720p',
578
+ duration: '2h 12m',
579
+ genre: 'Drame',
580
+ servers: [
581
+ { name: 'Serveur VF 1', url: 'https://example.com/stream/ironclaw/vf1', quality: '720p' }
582
+ ]
583
+ },
584
+ 'aquaman2': {
585
+ title: 'Aquaman 2 (VF)',
586
+ quality: '4K UHD',
587
+ duration: '2h 4m',
588
+ genre: 'Action',
589
+ servers: [
590
+ { name: 'Serveur VF 1', url: 'https://example.com/stream/aquaman2/vf1', quality: '4K' },
591
+ { name: 'Serveur VF 2', url: 'https://example.com/stream/aquaman2/vf2', quality: '1080p' }
592
+ ]
593
+ }
594
+ };
595
+
596
  // Initialisation
597
  document.addEventListener('DOMContentLoaded', function() {
 
 
 
 
 
 
 
 
 
 
598
  // Close player
599
  document.getElementById('closePlayer').addEventListener('click', function() {
600
+ closePlayer();
 
 
601
  });
602
 
603
  // Fullscreen
 
626
  }
627
  });
628
  });
629
+
630
+ // Fonction pour jouer un film
631
+ function playMovie(movieId) {
632
+ const movie = moviesDatabase[movieId];
633
+ if (!movie) return;
634
+
635
+ // Mettre à jour les infos du film
636
+ document.getElementById('movieTitle').textContent = movie.title;
637
+ document.getElementById('movieQuality').textContent = movie.quality;
638
+ document.getElementById('movieDuration').textContent = movie.duration;
639
+ document.getElementById('movieGenre').textContent = movie.genre;
640
+
641
+ // Générer les boutons des serveurs
642
+ const serverList = document.getElementById('serverList');
643
+ serverList.innerHTML = '';
644
+
645
+ movie.servers.forEach((server, index) => {
646
+ const serverBtn = document.createElement('button');
647
+ serverBtn.className = 'server-btn bg-gray-800 hover:bg-gray-700 border border-gray-700 rounded-lg p-2 text-sm flex flex-col items-center';
648
+ if (index === 0) {
649
+ serverBtn.classList.add('active');
650
+ }
651
+
652
+ serverBtn.innerHTML = `
653
+ <span class="font-medium">${server.name}</span>
654
+ <span class="text-xs text-gray-400 mt-1">${server.quality}</span>
655
+ `;
656
+
657
+ serverBtn.addEventListener('click', function() {
658
+ // Enlever la classe active de tous les boutons
659
+ document.querySelectorAll('.server-btn').forEach(btn => {
660
+ btn.classList.remove('active');
661
+ });
662
+
663
+ // Ajouter la classe active au bouton cliqué
664
+ this.classList.add('active');
665
+
666
+ // Charger la vidéo depuis le serveur sélectionné
667
+ loadVideo(server.url);
668
+ });
669
+
670
+ serverList.appendChild(serverBtn);
671
+ });
672
+
673
+ // Ouvrir le modal
674
+ document.getElementById('playerModal').classList.remove('hidden');
675
+ document.body.style.overflow = 'hidden';
676
+
677
+ // Charger le premier serveur par défaut
678
+ if (movie.servers.length > 0) {
679
+ loadVideo(movie.servers[0].url);
680
+ }
681
+ }
682
+
683
+ // Fonction pour charger une vidéo
684
+ function loadVideo(url) {
685
+ const player = document.getElementById('moviePlayer');
686
+ player.src = url;
687
+ player.load();
688
+ player.play().catch(e => {
689
+ console.error('Erreur de lecture automatique:', e);
690
+ // Afficher un bouton de lecture si la lecture automatique échoue
691
+ const playBtn = document.createElement('button');
692
+ playBtn.className = 'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-red-500 hover:bg-red-600 text-white rounded-full p-4';
693
+ playBtn.innerHTML = '<i class="fas fa-play text-xl"></i>';
694
+ playBtn.onclick = function() {
695
+ player.play();
696
+ this.remove();
697
+ };
698
+
699
+ const playerContainer = player.parentElement;
700
+ const existingBtn = playerContainer.querySelector('button');
701
+ if (!existingBtn) {
702
+ playerContainer.appendChild(playBtn);
703
+ }
704
+ });
705
+ }
706
+
707
+ // Fonction pour fermer le lecteur
708
+ function closePlayer() {
709
+ const player = document.getElementById('moviePlayer');
710
+ player.pause();
711
+ document.getElementById('playerModal').classList.add('hidden');
712
+ document.body.style.overflow = 'auto';
713
+ }
714
  </script>
715
  <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>
716
  </html>
prompts.txt CHANGED
@@ -3,4 +3,5 @@ ajouter une grosse base de liens des films de 52652 liens url des film complet
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
6
- je veux voir les vrai film réel pas des simulation je veux regarder les film en reel et en autoplay
 
 
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
6
+ je veux voir les vrai film réel pas des simulation je veux regarder les film en reel et en autoplay
7
+ ajouter les serveur des films a regarder directement en francais