Hugging Face's logo

Spaces:
docto41
/
cinestream-futuriste
Running

App Files Community
docto41 commited on
Commit
e66ec16
·
verified ·
1 Parent(s): 9a44b87

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1109 -19
  3. prompts.txt +4 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cinestream Futuriste
3
- emoji: 😻
4
- colorFrom: yellow
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: cinestream-futuriste
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1109 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CineStream - Streaming Futuriste</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
+ <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#00f0ff',
16
+ secondary: '#7b2cbf',
17
+ dark: '#0f172a',
18
+ neon: '#00f0ff',
19
+ cyber: '#ff00aa',
20
+ matrix: '#00ff88',
21
+ },
22
+ fontFamily: {
23
+ orbitron: ['Orbitron', 'sans-serif'],
24
+ inter: ['Inter', 'sans-serif'],
25
+ },
26
+ animation: {
27
+ 'neon-pulse': 'neonPulse 2s infinite',
28
+ 'float': 'float 6s ease-in-out infinite',
29
+ 'glow': 'glow 1.5s ease-in-out infinite alternate',
30
+ },
31
+ keyframes: {
32
+ neonPulse: {
33
+ '0%, 100%': { 'text-shadow': '0 0 10px #00f0ff, 0 0 20px #00f0ff, 0 0 30px #00f0ff' },
34
+ '50%': { 'text-shadow': '0 0 5px #00f0ff, 0 0 10px #00f0ff, 0 0 15px #00f0ff' }
35
+ },
36
+ float: {
37
+ '0%, 100%': { transform: 'translateY(0)' },
38
+ '50%': { transform: 'translateY(-20px)' }
39
+ },
40
+ glow: {
41
+ 'from': { 'box-shadow': '0 0 5px -5px #00f0ff' },
42
+ 'to': { 'box-shadow': '0 0 20px 5px #00f0ff' }
43
+ }
44
+ }
45
+ }
46
+ }
47
+ }
48
+ </script>
49
+ <style>
50
+ body {
51
+ background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
52
+ color: white;
53
+ min-height: 100vh;
54
+ overflow-x: hidden;
55
+ }
56
+
57
+ .cyber-border {
58
+ position: relative;
59
+ border: 2px solid transparent;
60
+ background-clip: padding-box;
61
+ border-radius: 12px;
62
+ }
63
+
64
+ .cyber-border::before {
65
+ content: '';
66
+ position: absolute;
67
+ top: -2px;
68
+ left: -2px;
69
+ right: -2px;
70
+ bottom: -2px;
71
+ z-index: -1;
72
+ background: linear-gradient(45deg, #00f0ff, #ff00aa, #00ff88);
73
+ border-radius: 12px;
74
+ animation: borderAnimation 4s linear infinite;
75
+ background-size: 300% 300%;
76
+ }
77
+
78
+ @keyframes borderAnimation {
79
+ 0% { background-position: 0% 50%; }
80
+ 50% { background-position: 100% 50%; }
81
+ 100% { background-position: 0% 50%; }
82
+ }
83
+
84
+ .cyber-card {
85
+ background: rgba(15, 23, 42, 0.7);
86
+ backdrop-filter: blur(10px);
87
+ border-radius: 12px;
88
+ transition: all 0.3s ease;
89
+ box-shadow: 0 10px 25px rgba(0, 240, 255, 0.1);
90
+ }
91
+
92
+ .cyber-card:hover {
93
+ transform: translateY(-10px) scale(1.02);
94
+ box-shadow: 0 15px 35px rgba(0, 240, 255, 0.3);
95
+ }
96
+
97
+ .movie-poster {
98
+ height: 400px;
99
+ object-fit: cover;
100
+ border-radius: 8px 8px 0 0;
101
+ }
102
+
103
+ .neon-text {
104
+ color: #00f0ff;
105
+ text-shadow: 0 0 10px #00f0ff, 0 0 20px #00f0ff;
106
+ }
107
+
108
+ .cyber-button {
109
+ background: linear-gradient(45deg, #00f0ff, #7b2cbf);
110
+ border: none;
111
+ color: white;
112
+ font-weight: bold;
113
+ transition: all 0.3s ease;
114
+ box-shadow: 0 5px 15px rgba(0, 240, 255, 0.4);
115
+ }
116
+
117
+ .cyber-button:hover {
118
+ transform: translateY(-3px);
119
+ box-shadow: 0 8px 20px rgba(0, 240, 255, 0.6);
120
+ }
121
+
122
+ .watch-now-btn {
123
+ background: linear-gradient(45deg, #ff00aa, #7b2cbf);
124
+ border: none;
125
+ color: white;
126
+ font-weight: bold;
127
+ text-transform: uppercase;
128
+ letter-spacing: 1px;
129
+ transition: all 0.3s ease;
130
+ box-shadow: 0 0 15px rgba(255, 0, 170, 0.5);
131
+ position: relative;
132
+ overflow: hidden;
133
+ }
134
+
135
+ .watch-now-btn::before {
136
+ content: '';
137
+ position: absolute;
138
+ top: 0;
139
+ left: -100%;
140
+ width: 100%;
141
+ height: 100%;
142
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
143
+ transition: 0.5s;
144
+ }
145
+
146
+ .watch-now-btn:hover {
147
+ transform: translateY(-3px);
148
+ box-shadow: 0 0 25px rgba(255, 0, 170, 0.8);
149
+ }
150
+
151
+ .watch-now-btn:hover::before {
152
+ left: 100%;
153
+ }
154
+
155
+ .server-btn {
156
+ position: relative;
157
+ overflow: hidden;
158
+ transition: all 0.3s ease;
159
+ border: 1px solid rgba(0, 240, 255, 0.3);
160
+ }
161
+
162
+ .server-btn::before {
163
+ content: '';
164
+ position: absolute;
165
+ top: 0;
166
+ left: -100%;
167
+ width: 100%;
168
+ height: 100%;
169
+ background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.2), transparent);
170
+ transition: all 0.5s ease;
171
+ }
172
+
173
+ .server-btn:hover::before {
174
+ left: 100%;
175
+ }
176
+
177
+ .server-btn.active {
178
+ background: rgba(0, 240, 255, 0.2);
179
+ border: 1px solid #00f0ff;
180
+ box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
181
+ }
182
+
183
+ .loading-spinner {
184
+ border: 4px solid rgba(0, 240, 255, 0.2);
185
+ border-top: 4px solid #00f0ff;
186
+ animation: spin 1s linear infinite;
187
+ }
188
+
189
+ @keyframes spin {
190
+ 0% { transform: rotate(0deg); }
191
+ 100% { transform: rotate(360deg); }
192
+ }
193
+
194
+ .video-container {
195
+ position: relative;
196
+ padding-bottom: 56.25%;
197
+ height: 0;
198
+ overflow: hidden;
199
+ border-radius: 12px;
200
+ }
201
+
202
+ .video-container iframe {
203
+ position: absolute;
204
+ top: 0;
205
+ left: 0;
206
+ width: 100%;
207
+ height: 100%;
208
+ border: none;
209
+ }
210
+
211
+ .streaming-window {
212
+ position: fixed;
213
+ top: 0;
214
+ left: 0;
215
+ width: 100%;
216
+ height: 100%;
217
+ background: rgba(0, 5, 15, 0.95);
218
+ z-index: 1000;
219
+ display: flex;
220
+ flex-direction: column;
221
+ backdrop-filter: blur(10px);
222
+ }
223
+
224
+ .streaming-header {
225
+ padding: 15px;
226
+ background: rgba(0, 10, 20, 0.8);
227
+ border-bottom: 1px solid rgba(0, 240, 255, 0.2);
228
+ display: flex;
229
+ justify-content: space-between;
230
+ align-items: center;
231
+ }
232
+
233
+ .streaming-content {
234
+ flex: 1;
235
+ display: flex;
236
+ justify-content: center;
237
+ align-items: center;
238
+ padding: 20px;
239
+ }
240
+
241
+ .streaming-controls {
242
+ padding: 15px;
243
+ background: rgba(0, 10, 20, 0.8);
244
+ border-top: 1px solid rgba(0, 240, 255, 0.2);
245
+ display: flex;
246
+ justify-content: space-between;
247
+ align-items: center;
248
+ }
249
+
250
+ .quality-btn {
251
+ padding: 8px 15px;
252
+ border-radius: 20px;
253
+ background: rgba(0, 240, 255, 0.1);
254
+ border: 1px solid rgba(0, 240, 255, 0.3);
255
+ color: white;
256
+ transition: all 0.3s ease;
257
+ }
258
+
259
+ .quality-btn:hover {
260
+ background: rgba(0, 240, 255, 0.2);
261
+ transform: translateY(-2px);
262
+ }
263
+
264
+ .quality-btn.active {
265
+ background: rgba(0, 240, 255, 0.3);
266
+ border: 1px solid #00f0ff;
267
+ box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
268
+ }
269
+
270
+ .nav-link {
271
+ position: relative;
272
+ padding: 8px 15px;
273
+ transition: all 0.3s ease;
274
+ }
275
+
276
+ .nav-link::after {
277
+ content: '';
278
+ position: absolute;
279
+ bottom: 0;
280
+ left: 0;
281
+ width: 0;
282
+ height: 2px;
283
+ background: #00f0ff;
284
+ transition: width 0.3s ease;
285
+ }
286
+
287
+ .nav-link:hover::after {
288
+ width: 100%;
289
+ }
290
+
291
+ .nav-link.active {
292
+ color: #00f0ff;
293
+ }
294
+
295
+ .nav-link.active::after {
296
+ width: 100%;
297
+ }
298
+
299
+ .search-input {
300
+ background: rgba(15, 23, 42, 0.7);
301
+ border: 1px solid rgba(0, 240, 255, 0.3);
302
+ color: white;
303
+ transition: all 0.3s ease;
304
+ }
305
+
306
+ .search-input:focus {
307
+ outline: none;
308
+ border-color: #00f0ff;
309
+ box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
310
+ }
311
+
312
+ .genre-btn {
313
+ padding: 8px 15px;
314
+ border-radius: 20px;
315
+ background: rgba(0, 240, 255, 0.1);
316
+ border: 1px solid rgba(0, 240, 255, 0.3);
317
+ color: white;
318
+ transition: all 0.3s ease;
319
+ }
320
+
321
+ .genre-btn:hover {
322
+ background: rgba(0, 240, 255, 0.2);
323
+ transform: translateY(-2px);
324
+ }
325
+
326
+ .genre-btn.active {
327
+ background: rgba(0, 240, 255, 0.3);
328
+ border: 1px solid #00f0ff;
329
+ box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
330
+ }
331
+
332
+ .placeholder-poster {
333
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
334
+ display: flex;
335
+ align-items: center;
336
+ justify-content: center;
337
+ }
338
+
339
+ .error-message {
340
+ background-color: rgba(239, 68, 68, 0.2);
341
+ border-left: 4px solid #ef4444;
342
+ }
343
+
344
+ .stream-loading {
345
+ display: flex;
346
+ flex-direction: column;
347
+ align-items: center;
348
+ justify-content: center;
349
+ gap: 20px;
350
+ }
351
+
352
+ .stream-loading-spinner {
353
+ width: 50px;
354
+ height: 50px;
355
+ border: 5px solid rgba(255, 255, 255, 0.1);
356
+ border-radius: 50%;
357
+ border-top-color: #00f0ff;
358
+ animation: spin 1s linear infinite;
359
+ }
360
+ </style>
361
+ </head>
362
+ <body class="min-h-screen">
363
+ <!-- Navigation Futuriste -->
364
+ <nav class="bg-gray-900 bg-opacity-90 backdrop-blur-md fixed w-full z-50 shadow-lg border-b border-gray-800">
365
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
366
+ <div class="flex items-center justify-between h-16">
367
+ <div class="flex items-center">
368
+ <div class="flex-shrink-0">
369
+ <span class="text-2xl font-bold neon-text font-orbitron">Cine<span class="text-cyber">Stream</span></span>
370
+ </div>
371
+ <div class="hidden md:block ml-10">
372
+ <div class="flex space-x-4">
373
+ <a href="#" class="nav-link active text-white">Accueil</a>
374
+ <a href="#" class="nav-link text-gray-300 hover:text-white">Films</a>
375
+ <a href="#" class="nav-link text-gray-300 hover:text-white">Séries</a>
376
+ <a href="#" class="nav-link text-gray-300 hover:text-white">Tendances</a>
377
+ <a href="#" class="nav-link text-gray-300 hover:text-white">Ma Liste</a>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ <div class="hidden md:block">
382
+ <div class="ml-4 flex items-center md:ml-6">
383
+ <div class="relative mx-4">
384
+ <input type="text" id="search-input" placeholder="Rechercher un film..."
385
+ class="search-input px-4 py-2 rounded-full w-64 focus:outline-none transition duration-200">
386
+ <button onclick="searchMovies()" class="absolute right-3 top-2 text-gray-400 hover:text-neon">
387
+ <i class="fas fa-search"></i>
388
+ </button>
389
+ </div>
390
+ <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
391
+ <i class="fas fa-user-circle text-xl"></i>
392
+ </button>
393
+ </div>
394
+ </div>
395
+ <div class="-mr-2 flex md:hidden">
396
+ <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
397
+ <i class="fas fa-bars"></i>
398
+ </button>
399
+ </div>
400
+ </div>
401
+ </div>
402
+ </nav>
403
+
404
+ <!-- Main Content -->
405
+ <main class="pt-24 pb-12">
406
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
407
+ <!-- Featured Section -->
408
+ <section class="mb-12">
409
+ <div class="flex justify-between items-center mb-6">
410
+ <h2 class="text-2xl font-bold text-white font-orbitron">
411
+ <span class="neon-text">FILMS POPULAIRES</span>
412
+ </h2>
413
+ <div class="flex space-x-2">
414
+ <button onclick="filterMovies('popular')" class="px-4 py-1 rounded-full text-sm bg-primary text-white font-orbitron">Populaires</button>
415
+ <button onclick="filterMovies('top_rated')" class="px-4 py-1 rounded-full text-sm bg-gray-700 text-white font-orbitron">Mieux notés</button>
416
+ <button onclick="filterMovies('upcoming')" class="px-4 py-1 rounded-full text-sm bg-gray-700 text-white font-orbitron">Prochainement</button>
417
+ </div>
418
+ </div>
419
+
420
+ <div id="movies-container" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
421
+ <!-- Movies will be loaded here -->
422
+ <div class="flex justify-center items-center py-12 col-span-full">
423
+ <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary loading-spinner"></div>
424
+ </div>
425
+ </div>
426
+
427
+ <div id="load-more-container" class="mt-8 flex justify-center">
428
+ <button onclick="loadMoreMovies()" class="px-6 py-3 cyber-button rounded-full hover:bg-secondary transition flex items-center font-orbitron">
429
+ <span>VOIR PLUS</span>
430
+ <i class="fas fa-chevron-down ml-2"></i>
431
+ </button>
432
+ </div>
433
+ </section>
434
+
435
+ <!-- Genres Section -->
436
+ <section class="mb-12">
437
+ <h2 class="text-2xl font-bold text-white font-orbitron mb-6">
438
+ <span class="neon-text">PAR GENRES</span>
439
+ </h2>
440
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
441
+ <button onclick="filterByGenre(28)" class="genre-btn">Action</button>
442
+ <button onclick="filterByGenre(12)" class="genre-btn">Aventure</button>
443
+ <button onclick="filterByGenre(16)" class="genre-btn">Animation</button>
444
+ <button onclick="filterByGenre(35)" class="genre-btn">Comédie</button>
445
+ <button onclick="filterByGenre(80)" class="genre-btn">Crime</button>
446
+ <button onclick="filterByGenre(18)" class="genre-btn">Drame</button>
447
+ </div>
448
+ </section>
449
+ </div>
450
+ </main>
451
+
452
+ <!-- Footer Futuriste -->
453
+ <footer class="bg-gray-900 text-gray-400 py-8 border-t border-gray-800">
454
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
455
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
456
+ <div>
457
+ <h3 class="text-white text-lg font-semibold mb-4 font-orbitron neon-text">CineStream</h3>
458
+ <p class="text-sm">La plateforme de streaming la plus avancée technologiquement.</p>
459
+ </div>
460
+ <div>
461
+ <h3 class="text-white text-lg font-semibold mb-4 font-orbitron">Navigation</h3>
462
+ <ul class="space-y-2 text-sm">
463
+ <li><a href="#" class="hover:text-neon transition">Accueil</a></li>
464
+ <li><a href="#" class="hover:text-neon transition">Films</a></li>
465
+ <li><a href="#" class="hover:text-neon transition">Séries</a></li>
466
+ <li><a href="#" class="hover:text-neon transition">Nouveautés</a></li>
467
+ </ul>
468
+ </div>
469
+ <div>
470
+ <h3 class="text-white text-lg font-semibold mb-4 font-orbitron">Légal</h3>
471
+ <ul class="space-y-2 text-sm">
472
+ <li><a href="#" class="hover:text-neon transition">Conditions d'utilisation</a></li>
473
+ <li><a href="#" class="hover:text-neon transition">Politique de confidentialité</a></li>
474
+ <li><a href="#" class="hover:text-neon transition">DMCA</a></li>
475
+ </ul>
476
+ </div>
477
+ <div>
478
+ <h3 class="text-white text-lg font-semibold mb-4 font-orbitron">Contact</h3>
479
+ <div class="flex space-x-4">
480
+ <a href="#" class="text-gray-400 hover:text-neon transition"><i class="fab fa-facebook-f"></i></a>
481
+ <a href="#" class="text-gray-400 hover:text-neon transition"><i class="fab fa-twitter"></i></a>
482
+ <a href="#" class="text-gray-400 hover:text-neon transition"><i class="fab fa-instagram"></i></a>
483
+ <a href="#" class="text-gray-400 hover:text-neon transition"><i class="fab fa-discord"></i></a>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ <div class="border-t border-gray-800 mt-8 pt-8 text-sm text-center">
488
+ <p>© 2023 CineStream. Tous droits réservés.</p>
489
+ </div>
490
+ </div>
491
+ </footer>
492
+
493
+ <!-- Movie Details Modal -->
494
+ <div id="movie-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
495
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
496
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
497
+ <div class="absolute inset-0 bg-gray-900 opacity-90 backdrop-blur-sm"></div>
498
+ </div>
499
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
500
+ <div class="inline-block align-bottom bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full cyber-border">
501
+ <div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
502
+ <div class="sm:flex sm:items-start">
503
+ <div id="modal-poster" class="flex-shrink-0 w-full sm:w-1/3 mb-4 sm:mb-0 sm:mr-6">
504
+ <img class="w-full rounded-lg shadow-lg" src="" alt="Movie Poster">
505
+ </div>
506
+ <div class="mt-3 text-center sm:mt-0 sm:text-left w-full sm:w-2/3">
507
+ <h3 id="modal-title" class="text-2xl leading-6 font-bold text-white mb-2 font-orbitron"></h3>
508
+ <div class="flex items-center mb-4">
509
+ <span id="modal-rating" class="bg-yellow-500 text-white text-xs font-semibold px-2 py-1 rounded mr-3"></span>
510
+ <span id="modal-year" class="text-gray-300 text-sm"></span>
511
+ <span id="modal-runtime" class="ml-3 text-gray-300 text-sm"></span>
512
+ </div>
513
+ <p id="modal-overview" class="text-gray-300 mb-4"></p>
514
+ <div id="modal-genres" class="flex flex-wrap gap-2 mb-4"></div>
515
+
516
+ <!-- Serveurs de streaming -->
517
+ <div class="mb-4">
518
+ <h4 class="text-sm font-semibold text-gray-400 mb-2 font-orbitron">CHOISIR UN SERVEUR :</h4>
519
+ <div class="server-list">
520
+ <button onclick="selectServer('hdvip')" class="server-btn active" data-server="hdvip">
521
+ <i class="fas fa-crown mr-1"></i> HD VIP
522
+ </button>
523
+ <button onclick="selectServer('streamlare')" class="server-btn inactive" data-server="streamlare">
524
+ <i class="fas fa-play-circle mr-1"></i> Streamlare
525
+ </button>
526
+ <button onclick="selectServer('streamtape')" class="server-btn inactive" data-server="streamtape">
527
+ <i class="fas fa-tape mr-1"></i> Streamtape
528
+ </button>
529
+ </div>
530
+ </div>
531
+
532
+ <div class="mt-4 flex flex-col sm:flex-row gap-3">
533
+ <button type="button" onclick="closeModal()" class="w-full sm:w-auto inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-700 text-base font-medium text-white hover:bg-gray-600 focus:outline-none">
534
+ Fermer
535
+ </button>
536
+ <button id="watch-now-btn" onclick="startStreaming()" class="w-full watch-now-btn inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white focus:outline-none">
537
+ <i class="fas fa-play mr-2"></i> REGARDER MAINTENANT
538
+ </button>
539
+ </div>
540
+ </div>
541
+ </div>
542
+ </div>
543
+ </div>
544
+ </div>
545
+ </div>
546
+
547
+ <!-- Streaming Window (hidden by default) -->
548
+ <div id="streaming-window" class="streaming-window hidden">
549
+ <div class="streaming-header">
550
+ <h3 id="streaming-title" class="text-xl font-bold text-white font-orbitron"></h3>
551
+ <button onclick="closeStreamingWindow()" class="text-gray-400 hover:text-neon">
552
+ <i class="fas fa-times text-xl"></i>
553
+ </button>
554
+ </div>
555
+ <div class="streaming-content">
556
+ <div id="streaming-player-container" class="w-full h-full" style="max-width: 1200px;">
557
+ <!-- Contenu du lecteur sera chargé ici -->
558
+ <div id="stream-loading" class="stream-loading w-full h-full">
559
+ <div class="stream-loading-spinner"></div>
560
+ <p class="text-gray-300">Chargement du flux vidéo...</p>
561
+ </div>
562
+ </div>
563
+ </div>
564
+ <div class="streaming-controls">
565
+ <div class="flex space-x-2">
566
+ <button onclick="changeQuality('720p')" class="quality-btn">720p</button>
567
+ <button onclick="changeQuality('1080p')" class="quality-btn active">1080p</button>
568
+ <button onclick="changeQuality('4k')" class="quality-btn">4K</button>
569
+ </div>
570
+ <div>
571
+ <button onclick="toggleFullscreen()" class="quality-btn">
572
+ <i class="fas fa-expand mr-1"></i> Plein écran
573
+ </button>
574
+ </div>
575
+ </div>
576
+ </div>
577
+
578
+ <script>
579
+ // Configuration
580
+ const API_KEY = 'c45a857c193f6302f2b5061c3b85e743'; // Clé API TMDB valide
581
+ const BASE_URL = 'https://api.themoviedb.org/3';
582
+
583
+ // Serveurs de streaming avec URLs de base fonctionnelles
584
+ const STREAMING_SERVERS = {
585
+ hdvip: {
586
+ name: 'Lecteur HD VIP',
587
+ url: 'https://database.gdriveplayer.us/player.php?tmdb=',
588
+ autoPlay: true,
589
+ requiresTMDB: true,
590
+ requiresIMDB: false
591
+ },
592
+ streamlare: {
593
+ name: 'Streamlare',
594
+ url: 'https://streamlare.com/e/',
595
+ autoPlay: true,
596
+ requiresTMDB: false,
597
+ requiresIMDB: true
598
+ },
599
+ streamtape: {
600
+ name: 'Streamtape',
601
+ url: 'https://streamtape.com/e/',
602
+ autoPlay: true,
603
+ requiresTMDB: false,
604
+ requiresIMDB: true
605
+ }
606
+ };
607
+
608
+ let currentPage = 1;
609
+ let currentFilter = 'popular';
610
+ let currentGenre = null;
611
+ let currentSearch = '';
612
+ let totalPages = 1;
613
+ let isLoading = false;
614
+ let currentMovieId = null;
615
+ let currentIMDBId = null;
616
+ let selectedServer = 'hdvip';
617
+
618
+ // Fonction utilitaire pour faire les requêtes API
619
+ async function fetchAPI(endpoint, params = {}) {
620
+ const url = new URL(`${BASE_URL}${endpoint}`);
621
+
622
+ // Ajouter les paramètres par défaut
623
+ const defaultParams = {
624
+ language: 'fr-FR',
625
+ page: currentPage,
626
+ api_key: API_KEY
627
+ };
628
+
629
+ // Fusionner les paramètres
630
+ const queryParams = {...defaultParams, ...params};
631
+
632
+ // Ajouter les paramètres à l'URL
633
+ Object.keys(queryParams).forEach(key => {
634
+ if (queryParams[key] !== undefined && queryParams[key] !== null) {
635
+ url.searchParams.append(key, queryParams[key]);
636
+ }
637
+ });
638
+
639
+ try {
640
+ const response = await fetch(url);
641
+
642
+ if (!response.ok) {
643
+ throw new Error(`Erreur HTTP: ${response.status}`);
644
+ }
645
+
646
+ return await response.json();
647
+ } catch (error) {
648
+ console.error('Erreur API:', error);
649
+ throw error;
650
+ }
651
+ }
652
+
653
+ // Charger les films au démarrage
654
+ document.addEventListener('DOMContentLoaded', function() {
655
+ loadMovies();
656
+
657
+ // Écouter la touche Entrée dans la recherche
658
+ document.getElementById('search-input').addEventListener('keypress', function(e) {
659
+ if (e.key === 'Enter') {
660
+ searchMovies();
661
+ }
662
+ });
663
+ });
664
+
665
+ // Charger les films
666
+ async function loadMovies() {
667
+ if (isLoading) return;
668
+
669
+ isLoading = true;
670
+ showLoadingState();
671
+
672
+ try {
673
+ let data;
674
+
675
+ if (currentSearch) {
676
+ data = await fetchAPI('/search/movie', {
677
+ query: currentSearch,
678
+ include_adult: false,
679
+ page: currentPage
680
+ });
681
+ } else if (currentGenre) {
682
+ data = await fetchAPI('/discover/movie', {
683
+ include_adult: false,
684
+ include_video: false,
685
+ sort_by: 'popularity.desc',
686
+ with_genres: currentGenre,
687
+ page: currentPage
688
+ });
689
+ } else {
690
+ data = await fetchAPI(`/movie/${currentFilter}`, {
691
+ page: currentPage
692
+ });
693
+ }
694
+
695
+ totalPages = data.total_pages || 1;
696
+
697
+ if (currentPage === 1) {
698
+ document.getElementById('movies-container').innerHTML = '';
699
+ }
700
+
701
+ if (data.results && data.results.length > 0) {
702
+ displayMovies(data.results);
703
+ updateLoadMoreButton();
704
+ } else {
705
+ showNoResults();
706
+ }
707
+ } catch (error) {
708
+ console.error('Error fetching movies:', error);
709
+ showErrorState(error.message);
710
+ } finally {
711
+ isLoading = false;
712
+ }
713
+ }
714
+
715
+ // Afficher l'état de chargement
716
+ function showLoadingState() {
717
+ const container = document.getElementById('movies-container');
718
+ container.innerHTML = `
719
+ <div class="flex justify-center items-center py-12 col-span-full">
720
+ <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary loading-spinner"></div>
721
+ </div>
722
+ `;
723
+ }
724
+
725
+ // Afficher les films avec boutons de streaming
726
+ function displayMovies(movies) {
727
+ const container = document.getElementById('movies-container');
728
+
729
+ movies.forEach(movie => {
730
+ const movieCard = document.createElement('div');
731
+ movieCard.className = 'cyber-card rounded-lg overflow-hidden hover:shadow-xl transition-all duration-300';
732
+
733
+ // Utiliser l'image originale en haute qualité si disponible
734
+ const posterPath = movie.poster_path
735
+ ? `https://image.tmdb.org/t/p/w500${movie.poster_path}`
736
+ : 'https://via.placeholder.com/500x750?text=Affiche+non+disponible';
737
+
738
+ movieCard.innerHTML = `
739
+ <div>
740
+ <div class="movie-poster w-full rounded-t-lg overflow-hidden ${!movie.poster_path ? 'placeholder-poster' : ''}">
741
+ <img src="${posterPath}"
742
+ alt="${movie.title || 'Titre inconnu'}"
743
+ class="w-full h-full object-cover"
744
+ onerror="this.src='https://via.placeholder.com/500x750?text=Image+non+chargée'; this.classList.add('placeholder-poster')">
745
+ </div>
746
+ <div class="p-4">
747
+ <h3 class="text-lg font-semibold text-white truncate">${movie.title || 'Titre inconnu'}</h3>
748
+ <div class="flex items-center mt-2">
749
+ <span class="text-yellow-400 text-sm">
750
+ <i class="fas fa-star"></i> ${movie.vote_average ? movie.vote_average.toFixed(1) : 'N/A'}
751
+ </span>
752
+ <span class="text-gray-400 text-sm ml-auto">${movie.release_date ? movie.release_date.substring(0, 4) : 'N/A'}</span>
753
+ </div>
754
+ <div class="mt-3 flex flex-col gap-2">
755
+ <button onclick="startAutoStreaming(${movie.id}, '${movie.title || 'Film'}')" class="w-full watch-now-btn px-3 py-2 rounded text-sm font-orbitron">
756
+ <i class="fas fa-play-circle mr-1"></i> REGARDER
757
+ </button>
758
+ <button onclick="showMovieDetails(${movie.id})" class="w-full px-3 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded text-sm">
759
+ <i class="fas fa-info-circle mr-1"></i> Détails
760
+ </button>
761
+ </div>
762
+ </div>
763
+ </div>
764
+ `;
765
+
766
+ container.appendChild(movieCard);
767
+ });
768
+ }
769
+
770
+ // Afficher un message d'erreur
771
+ function showErrorState(errorMessage) {
772
+ const container = document.getElementById('movies-container');
773
+ container.innerHTML = `
774
+ <div class="col-span-full py-6 px-4 error-message rounded-lg">
775
+ <div class="flex items-center">
776
+ <i class="fas fa-exclamation-triangle text-red-500 text-xl mr-3"></i>
777
+ <div>
778
+ <h3 class="text-lg font-medium text-white">Erreur lors du chargement des films</h3>
779
+ <p class="text-gray-300 mt-1">${errorMessage || 'Veuillez réessayer plus tard'}</p>
780
+ <button onclick="retryLoading()" class="mt-3 px-4 py-2 bg-primary text-white rounded-full hover:bg-secondary transition text-sm">
781
+ <i class="fas fa-sync-alt mr-2"></i> Réessayer
782
+ </button>
783
+ </div>
784
+ </div>
785
+ </div>
786
+ `;
787
+
788
+ document.getElementById('load-more-container').classList.add('hidden');
789
+ }
790
+
791
+ // Afficher un message quand aucun résultat n'est trouvé
792
+ function showNoResults() {
793
+ const container = document.getElementById('movies-container');
794
+ container.innerHTML = `
795
+ <div class="col-span-full text-center py-12">
796
+ <i class="fas fa-film text-4xl text-gray-500 mb-4"></i>
797
+ <h3 class="text-xl text-white">Aucun film trouvé</h3>
798
+ <p class="text-gray-400 mt-2">Essayez avec d'autres critères de recherche</p>
799
+ </div>
800
+ `;
801
+
802
+ document.getElementById('load-more-container').classList.add('hidden');
803
+ }
804
+
805
+ // Réessayer le chargement
806
+ function retryLoading() {
807
+ currentPage = 1;
808
+ loadMovies();
809
+ }
810
+
811
+ // Mettre à jour le bouton "Voir plus"
812
+ function updateLoadMoreButton() {
813
+ const loadMoreContainer = document.getElementById('load-more-container');
814
+
815
+ if (currentPage >= totalPages) {
816
+ loadMoreContainer.innerHTML = `
817
+ <p class="text-gray-400">Vous avez atteint la fin des résultats</p>
818
+ `;
819
+ } else {
820
+ loadMoreContainer.classList.remove('hidden');
821
+ }
822
+ }
823
+
824
+ // Filtrer les films
825
+ function filterMovies(filter) {
826
+ currentFilter = filter;
827
+ currentGenre = null;
828
+ currentSearch = '';
829
+ currentPage = 1;
830
+ document.getElementById('search-input').value = '';
831
+ loadMovies();
832
+
833
+ // Mettre à jour les boutons actifs
834
+ document.querySelectorAll('button').forEach(btn => {
835
+ if (btn.textContent.toLowerCase().includes(filter.replace('_', ' '))) {
836
+ btn.classList.remove('bg-gray-700');
837
+ btn.classList.add('bg-primary');
838
+ } else {
839
+ btn.classList.remove('bg-primary');
840
+ btn.classList.add('bg-gray-700');
841
+ }
842
+ });
843
+ }
844
+
845
+ // Filtrer par genre
846
+ function filterByGenre(genreId) {
847
+ currentGenre = genreId;
848
+ currentSearch = '';
849
+ currentPage = 1;
850
+ document.getElementById('search-input').value = '';
851
+ loadMovies();
852
+
853
+ // Mettre à jour les boutons actifs
854
+ document.querySelectorAll('.genre-btn').forEach(btn => {
855
+ btn.classList.remove('bg-primary', 'text-white');
856
+ if (btn.onclick.toString().includes(genreId.toString())) {
857
+ btn.classList.add('bg-primary', 'text-white');
858
+ }
859
+ });
860
+ }
861
+
862
+ // Rechercher des films
863
+ function searchMovies() {
864
+ const query = document.getElementById('search-input').value.trim();
865
+ if (query) {
866
+ currentSearch = query;
867
+ currentGenre = null;
868
+ currentPage = 1;
869
+ loadMovies();
870
+ }
871
+ }
872
+
873
+ // Charger plus de films
874
+ function loadMoreMovies() {
875
+ if (currentPage < totalPages) {
876
+ currentPage++;
877
+ loadMovies();
878
+ }
879
+ }
880
+
881
+ // Afficher les détails du film
882
+ async function showMovieDetails(movieId) {
883
+ try {
884
+ const movie = await fetchAPI(`/movie/${movieId}`);
885
+ currentMovieId = movieId;
886
+
887
+ // Récupérer l'ID IMDB si disponible
888
+ if (movie.imdb_id) {
889
+ currentIMDBId = movie.imdb_id;
890
+ } else {
891
+ // Si l'ID IMDB n'est pas disponible, essayer de le récupérer via l'API
892
+ const externalIds = await fetchAPI(`/movie/${movieId}/external_ids`);
893
+ currentIMDBId = externalIds.imdb_id || null;
894
+ }
895
+
896
+ // Remplir la modal
897
+ const modalPoster = document.querySelector('#modal-poster img');
898
+ modalPoster.src = movie.poster_path
899
+ ? `https://image.tmdb.org/t/p/w500${movie.poster_path}`
900
+ : 'https://via.placeholder.com/500x750?text=Affiche+non+disponible';
901
+
902
+ modalPoster.onerror = function() {
903
+ this.src = 'https://via.placeholder.com/500x750?text=Image+non+chargée';
904
+ };
905
+
906
+ document.getElementById('modal-title').textContent = movie.title || 'Titre inconnu';
907
+ document.getElementById('modal-rating').textContent = `${movie.vote_average ? movie.vote_average.toFixed(1) : 'N/A'}/10`;
908
+ document.getElementById('modal-year').textContent = movie.release_date ? movie.release_date.substring(0, 4) : 'N/A';
909
+ document.getElementById('modal-runtime').textContent = movie.runtime ? `${movie.runtime} min` : '';
910
+ document.getElementById('modal-overview').textContent = movie.overview || 'Aucun synopsis disponible.';
911
+
912
+ // Afficher les genres
913
+ const genresContainer = document.getElementById('modal-genres');
914
+ genresContainer.innerHTML = '';
915
+ if (movie.genres && movie.genres.length > 0) {
916
+ movie.genres.forEach(genre => {
917
+ const genreBadge = document.createElement('span');
918
+ genreBadge.className = 'bg-gray-700 text-white text-xs px-2 py-1 rounded';
919
+ genreBadge.textContent = genre.name;
920
+ genresContainer.appendChild(genreBadge);
921
+ });
922
+ } else {
923
+ genresContainer.innerHTML = '<span class="text-gray-400 text-sm">Aucun genre spécifié</span>';
924
+ }
925
+
926
+ // Afficher la modal
927
+ document.getElementById('movie-modal').classList.remove('hidden');
928
+ } catch (error) {
929
+ console.error('Error fetching movie details:', error);
930
+ alert('Erreur lors du chargement des détails du film: ' + (error.message || 'Veuillez réessayer'));
931
+ }
932
+ }
933
+
934
+ // Fermer la modal de détails
935
+ function closeModal() {
936
+ document.getElementById('movie-modal').classList.add('hidden');
937
+ }
938
+
939
+ // Sélectionner un serveur de streaming
940
+ function selectServer(serverId) {
941
+ selectedServer = serverId;
942
+
943
+ // Mettre à jour l'état des boutons
944
+ document.querySelectorAll('.server-btn').forEach(btn => {
945
+ if (btn.dataset.server === serverId) {
946
+ btn.classList.remove('inactive');
947
+ btn.classList.add('active');
948
+ } else {
949
+ btn.classList.remove('active');
950
+ btn.classList.add('inactive');
951
+ }
952
+ });
953
+ }
954
+
955
+ // Démarrer le streaming depuis la modal
956
+ function startStreaming() {
957
+ if (currentMovieId) {
958
+ const movieTitle = document.getElementById('modal-title').textContent;
959
+ startAutoStreaming(currentMovieId, movieTitle);
960
+ closeModal();
961
+ }
962
+ }
963
+
964
+ // Démarrer le streaming automatique dans une nouvelle fenêtre
965
+ async function startAutoStreaming(movieId, movieTitle) {
966
+ currentMovieId = movieId;
967
+
968
+ // Afficher la fenêtre de streaming
969
+ const streamingWindow = document.getElementById('streaming-window');
970
+ document.getElementById('streaming-title').textContent = movieTitle;
971
+
972
+ // Afficher l'état de chargement
973
+ const playerContainer = document.getElementById('streaming-player-container');
974
+ playerContainer.innerHTML = `
975
+ <div id="stream-loading" class="stream-loading w-full h-full">
976
+ <div class="stream-loading-spinner"></div>
977
+ <p class="text-gray-300">Chargement du flux vidéo...</p>
978
+ </div>
979
+ `;
980
+
981
+ // Afficher la fenêtre de streaming
982
+ streamingWindow.classList.remove('hidden');
983
+
984
+ // Récupérer les informations du film pour l'ID IMDB si nécessaire
985
+ let imdbId = currentIMDBId;
986
+ if (!imdbId && STREAMING_SERVERS[selectedServer].requiresIMDB) {
987
+ try {
988
+ const externalIds = await fetchAPI(`/movie/${movieId}/external_ids`);
989
+ imdbId = externalIds.imdb_id;
990
+ if (!imdbId) {
991
+ throw new Error("ID IMDB non disponible");
992
+ }
993
+ } catch (error) {
994
+ console.error("Erreur lors de la récupération de l'ID IMDB:", error);
995
+ playerContainer.innerHTML = `
996
+ <div class="flex flex-col items-center justify-center h-full text-red-400">
997
+ <i class="fas fa-exclamation-triangle text-4xl mb-4"></i>
998
+ <p class="text-lg">Impossible de trouver l'ID IMDB pour ce film</p>
999
+ <p class="text-sm text-gray-400 mt-2">Essayez avec un autre serveur</p>
1000
+ </div>
1001
+ `;
1002
+ return;
1003
+ }
1004
+ }
1005
+
1006
+ // Construire l'URL de streaming en fonction du serveur sélectionné
1007
+ let streamingUrl;
1008
+ const serverConfig = STREAMING_SERVERS[selectedServer];
1009
+
1010
+ if (serverConfig.requiresTMDB) {
1011
+ streamingUrl = serverConfig.url + movieId;
1012
+ } else if (serverConfig.requiresIMDB && imdbId) {
1013
+ streamingUrl = serverConfig.url + imdbId;
1014
+ } else {
1015
+ // Si aucun ID n'est disponible, utiliser TMDB par défaut
1016
+ streamingUrl = serverConfig.url + movieId;
1017
+ }
1018
+
1019
+ // Ajouter le paramètre de lecture automatique si pris en charge
1020
+ if (serverConfig.autoPlay) {
1021
+ streamingUrl += '/auto';
1022
+ }
1023
+
1024
+ // Créer l'iframe pour le lecteur vidéo
1025
+ const iframe = document.createElement('iframe');
1026
+ iframe.id = 'streaming-player';
1027
+ iframe.src = streamingUrl;
1028
+ iframe.setAttribute('allowfullscreen', '');
1029
+ iframe.setAttribute('scrolling', 'no');
1030
+ iframe.setAttribute('frameborder', '0');
1031
+ iframe.setAttribute('marginwidth', '0');
1032
+ iframe.setAttribute('marginheight', '0');
1033
+ iframe.style.width = '100%';
1034
+ iframe.style.height = '100%';
1035
+ iframe.style.border = 'none';
1036
+
1037
+ // Gestion des erreurs de chargement
1038
+ iframe.onerror = function() {
1039
+ playerContainer.innerHTML = `
1040
+ <div class="flex flex-col items-center justify-center h-full text-red-400">
1041
+ <i class="fas fa-exclamation-triangle text-4xl mb-4"></i>
1042
+ <p class="text-lg">Erreur lors du chargement du flux vidéo</p>
1043
+ <p class="text-sm text-gray-400 mt-2">Le serveur peut être temporairement indisponible</p>
1044
+ <button onclick="tryAlternativeServer()" class="mt-4 px-4 py-2 bg-primary text-white rounded hover:bg-secondary transition">
1045
+ <i class="fas fa-sync-alt mr-2"></i> Essayer un autre serveur
1046
+ </button>
1047
+ </div>
1048
+ `;
1049
+ };
1050
+
1051
+ // Remplacer le chargement par le lecteur
1052
+ playerContainer.innerHTML = '';
1053
+ playerContainer.appendChild(iframe);
1054
+
1055
+ // Mettre le focus sur la fenêtre de streaming
1056
+ streamingWindow.focus();
1057
+
1058
+ // Tentative de lecture automatique (peut être bloquée par le navigateur)
1059
+ setTimeout(() => {
1060
+ try {
1061
+ iframe.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
1062
+ } catch (e) {
1063
+ console.log("Auto-play blocked by browser");
1064
+ }
1065
+ }, 2000);
1066
+ }
1067
+
1068
+ // Essayer un autre serveur en cas d'erreur
1069
+ function tryAlternativeServer() {
1070
+ const servers = Object.keys(STREAMING_SERVERS);
1071
+ const currentIndex = servers.indexOf(selectedServer);
1072
+ const nextIndex = (currentIndex + 1) % servers.length;
1073
+
1074
+ selectedServer = servers[nextIndex];
1075
+ startAutoStreaming(currentMovieId, document.getElementById('streaming-title').textContent);
1076
+ }
1077
+
1078
+ // Fermer la fenêtre de streaming
1079
+ function closeStreamingWindow() {
1080
+ const playerContainer = document.getElementById('streaming-player-container');
1081
+ playerContainer.innerHTML = '';
1082
+ document.getElementById('streaming-window').classList.add('hidden');
1083
+ }
1084
+
1085
+ // Changer la qualité de streaming (simulé)
1086
+ function changeQuality(quality) {
1087
+ // En réalité, vous devriez mettre à jour la source du lecteur vidéo
1088
+ document.querySelectorAll('.quality-btn').forEach(btn => {
1089
+ btn.classList.remove('active');
1090
+ if (btn.textContent.includes(quality)) {
1091
+ btn.classList.add('active');
1092
+ }
1093
+ });
1094
+ }
1095
+
1096
+ // Basculer en plein écran
1097
+ function toggleFullscreen() {
1098
+ const playerContainer = document.getElementById('streaming-player-container');
1099
+ if (playerContainer.requestFullscreen) {
1100
+ playerContainer.requestFullscreen();
1101
+ } else if (playerContainer.webkitRequestFullscreen) {
1102
+ playerContainer.webkitRequestFullscreen();
1103
+ } else if (playerContainer.msRequestFullscreen) {
1104
+ playerContainer.msRequestFullscreen();
1105
+ }
1106
+ }
1107
+ </script>
1108
+ <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/cinestream-futuriste" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1109
+ </html>
prompts.txt ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+ je veux que vous corriger le probleme de serveur pour la lecture des films
2
+ AJOUTER DES SEVEURS AUTOMATIQUE POUR RAGARDER LES FILMS
3
+ MODIFIER LE SITE REFAIRE LA CONFIGURATION AVEC UNE INTERFACES PLUS FUTURISTE :: <!DOCTYPE html> <html lang="fr"> <head><script>window.huggingface={variables:{"SPACE_CREATOR_USER_ID":"681375e3264f6a6cf6562c83"}};</script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CineStream - Films avec streaming automatique</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <script> tailwind.config = { theme: { extend: { colors: { primary: '#6d28d9', secondary: '#8b5cf6', dark: '#1e1b4b', light: '#f5f3ff', }, fontFamily: { sans: ['Inter', 'sans-serif'], }, } } } </script> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); body { font-family: 'Inter', sans-serif; background-color: #0f172a; color: white; } .movie-card { transition: all 0.3s ease; } .movie-card:hover { transform: translateY(-10px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .movie-poster { height: 450px; object-fit: cover; } .loading-spinner { animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .gradient-text { background: linear-gradient(90deg, #8b5cf6, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; } .search-input:focus { box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.5); } .error-message { background-color: rgba(239, 68, 68, 0.2); border-left: 4px solid #ef4444; } .placeholder-poster { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); display: flex; align-items: center; justify-content: center; } /* Style pour le lecteur vidéo */ .video-container { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } /* Style pour les boutons de streaming */ .stream-btn { transition: all 0.2s ease; } .stream-btn:hover { transform: scale(1.05); } /* Style pour la fenêtre de streaming */ .streaming-window { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); z-index: 1000; display: flex; flex-direction: column; } .streaming-header { padding: 15px; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: space-between; align-items: center; } .streaming-content { flex: 1; display: flex; justify-content: center; align-items: center; } .streaming-controls { padding: 15px; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: space-between; align-items: center; } /* Style pour la sélection de serveur */ .server-list { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .server-btn { padding: 8px 12px; border-radius: 20px; font-size: 14px; cursor: pointer; transition: all 0.2s; } .server-btn.active { background-color: #6d28d9; color: white; } .server-btn.inactive { background-color: #334155; color: #94a3b8; } /* Animation de chargement du streaming */ .stream-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; } .stream-loading-spinner { width: 50px; height: 50px; border: 5px solid rgba(255, 255, 255, 0.1); border-radius: 50%; border-top-color: #6d28d9; animation: spin 1s linear infinite; } </style> </head> <body class="min-h-screen"> <!-- Navigation --> <nav class="bg-gray-900 bg-opacity-90 backdrop-blur-md fixed w-full z-50 shadow-lg"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex items-center justify-between h-16"> <div class="flex items-center"> <div class="flex-shrink-0"> <span class="text-2xl font-bold gradient-text">CineStream</span> </div> <div class="hidden md:block ml-10"> <div class="flex space-x-4"> <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium bg-primary">Accueil</a> <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Films</a> <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Séries</a> <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Tendances</a> </div> </div> </div> <div class="hidden md:block"> <div class="ml-4 flex items-center md:ml-6"> <div class="relative mx-4"> <input type="text" id="search-input" placeholder="Rechercher un film..." class="search-input bg-gray-800 text-white px-4 py-2 rounded-full w-64 focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-200"> <button onclick="searchMovies()" class="absolute right-3 top-2 text-gray-400 hover:text-white"> <i class="fas fa-search"></i> </button> </div> <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none"> <i class="fas fa-user-circle text-xl"></i> </button> </div> </div> <div class="-mr-2 flex md:hidden"> <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"> <i class="fas fa-bars"></i> </button> </div> </div> </div> </nav> <!-- Main Content --> <main class="pt-24 pb-12"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <!-- Featured Section --> <section class="mb-12"> <div class="flex justify-between items-center mb-6"> <h2 class="text-2xl font-bold text-white">Films populaires</h2> <div class="flex space-x-2"> <button onclick="filterMovies('popular')" class="px-4 py-1 rounded-full text-sm bg-primary text-white">Populaires</button> <button onclick="filterMovies('top_rated')" class="px-4 py-1 rounded-full text-sm bg-gray-700 text-white">Mieux notés</button> <button onclick="filterMovies('upcoming')" class="px-4 py-1 rounded-full text-sm bg-gray-700 text-white">Prochainement</button> </div> </div> <div id="movies-container" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> <!-- Movies will be loaded here --> <div class="flex justify-center items-center py-12 col-span-full"> <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary loading-spinner"></div> </div> </div> <div id="load-more-container" class="mt-8 flex justify-center"> <button onclick="loadMoreMovies()" class="px-6 py-2 bg-primary text-white rounded-full hover:bg-secondary transition flex items-center"> <span>Voir plus</span> <i class="fas fa-chevron-down ml-2"></i> </button> </div> </section> <!-- Genres Section --> <section class="mb-12"> <h2 class="text-2xl font-bold text-white mb-6">Par genres</h2> <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4"> <button onclick="filterByGenre(28)" class="genre-btn px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-full text-sm">Action</button> <button onclick="filterByGenre(12)" class="genre-btn px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-full text-sm">Aventure</button> <button onclick="filterByGenre(16)" class="genre-btn px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-full text-sm">Animation</button> <button onclick="filterByGenre(35)" class="genre-btn px-4 py-2 bg-yellow-600 hover:bg-yellow-700 text-white rounded-full text-sm">Comédie</button> <button onclick="filterByGenre(80)" class="genre-btn px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-full text-sm">Crime</button> <button onclick="filterByGenre(18)" class="genre-btn px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-full text-sm">Drame</button> </div> </section> </div> </main> <!-- Footer --> <footer class="bg-gray-900 text-gray-400 py-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> <div> <h3 class="text-white text-lg font-semibold mb-4">CineStream</h3> <p class="text-sm">La meilleure plateforme pour regarder des films avec streaming automatique.</p> </div> <div> <h3 class="text-white text-lg font-semibold mb-4">Navigation</h3> <ul class="space-y-2 text-sm"> <li><a href="#" class="hover:text-white">Accueil</a></li> <li><a href="#" class="hover:text-white">Films</a></li> <li><a href="#" class="hover:text-white">Séries</a></li> <li><a href="#" class="hover:text-white">Nouveautés</a></li> </ul> </div> <div> <h3 class="text-white text-lg font-semibold mb-4">Légal</h3> <ul class="space-y-2 text-sm"> <li><a href="#" class="hover:text-white">Conditions d'utilisation</a></li> <li><a href="#" class="hover:text-white">Politique de confidentialité</a></li> <li><a href="#" class="hover:text-white">DMCA</a></li> </ul> </div> <div> <h3 class="text-white text-lg font-semibold mb-4">Contact</h3> <div class="flex space-x-4"> <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-discord"></i></a> </div> </div> </div> <div class="border-t border-gray-800 mt-8 pt-8 text-sm text-center"> <p>© 2023 CineStream. Tous droits réservés.</p> </div> </div> </footer> <!-- Movie Details Modal --> <div id="movie-modal" class="fixed inset-0 z-50 hidden overflow-y-auto"> <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> <div class="fixed inset-0 transition-opacity" aria-hidden="true"> <div class="absolute inset-0 bg-gray-900 opacity-75"></div> </div> <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span> <div class="inline-block align-bottom bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full"> <div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <div class="sm:flex sm:items-start"> <div id="modal-poster" class="flex-shrink-0 w-full sm:w-1/3 mb-4 sm:mb-0 sm:mr-6"> <img class="w-full rounded-lg shadow-lg" src="" alt="Movie Poster"> </div> <div class="mt-3 text-center sm:mt-0 sm:text-left w-full sm:w-2/3"> <h3 id="modal-title" class="text-2xl leading-6 font-bold text-white mb-2"></h3> <div class="flex items-center mb-4"> <span id="modal-rating" class="bg-yellow-500 text-white text-xs font-semibold px-2 py-1 rounded mr-3"></span> <span id="modal-year" class="text-gray-300 text-sm"></span> <span id="modal-runtime" class="ml-3 text-gray-300 text-sm"></span> </div> <p id="modal-overview" class="text-gray-300 mb-4"></p> <div id="modal-genres" class="flex flex-wrap gap-2 mb-4"></div> <!-- Serveurs de streaming --> <div class="mb-4"> <h4 class="text-sm font-semibold text-gray-400 mb-2">CHOISIR UN SERVEUR :</h4> <div class="server-list"> <button onclick="selectServer('hdvip')" class="server-btn active" data-server="hdvip"> <i class="fas fa-crown mr-1"></i> HD VIP </button> <button onclick="selectServer('streamlare')" class="server-btn inactive" data-server="streamlare"> <i class="fas fa-play-circle mr-1"></i> Streamlare </button> <button onclick="selectServer('streamtape')" class="server-btn inactive" data-server="streamtape"> <i class="fas fa-tape mr-1"></i> Streamtape </button> <button onclick="selectServer('younetu')" class="server-btn inactive" data-server="younetu"> <i class="fas fa-film mr-1"></i> Younetu </button> <button onclick="selectServer('uptostream')" class="server-btn inactive" data-server="uptostream"> <i class="fas fa-cloud mr-1"></i> Uptostream </button> <button onclick="selectServer('vidsrc')" class="server-btn inactive" data-server="vidsrc"> <i class="fas fa-server mr-1"></i> VidSrc </button> </div> </div> <div class="mt-4"> <button type="button" onclick="closeModal()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-secondary focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"> Fermer </button> <button id="watch-now-btn" onclick="startStreaming()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"> <i class="fas fa-play mr-2"></i> Lecture auto </button> </div> </div> </div> </div> </div> </div> </div> <!-- Streaming Window (hidden by default) --> <div id="streaming-window" class="streaming-window hidden"> <div class="streaming-header"> <h3 id="streaming-title" class="text-xl font-bold text-white"></h3> <button onclick="closeStreamingWindow()" class="text-gray-400 hover:text-white"> <i class="fas fa-times text-xl"></i> </button> </div> <div class="streaming-content"> <div id="streaming-player-container" class="w-full h-full" style="max-width: 1200px;"> <!-- Contenu du lecteur sera chargé ici --> <div id="stream-loading" class="stream-loading w-full h-full"> <div class="stream-loading-spinner"></div> <p class="text-gray-300">Chargement du flux vidéo...</p> </div> </div> </div> <div class="streaming-controls"> <div class="flex space-x-2"> <button onclick="changeQuality('720p')" class="stream-btn px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded-full text-sm">720p</button> <button onclick="changeQuality('1080p')" class="stream-btn px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded-full text-sm">1080p</button> <button onclick="changeQuality('4k')" class="stream-btn px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded-full text-sm">4K</button> </div> <div> <button onclick="toggleFullscreen()" class="stream-btn px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded-full text-sm"> <i class="fas fa-expand mr-1"></i> Plein écran </button> </div> </div> </div> <script> // Configuration const API_KEY = 'c45a857c193f6302f2b5061c3b85e743'; // Clé API TMDB valide const BASE_URL = 'https://api.themoviedb.org/3'; // Serveurs de streaming avec URLs de base fonctionnelles const STREAMING_SERVERS = { hdvip: { name: 'Lecteur HD VIP', url: 'https://database.gdriveplayer.us/player.php?tmdb=', autoPlay: true, requiresTMDB: true, requiresIMDB: false }, streamlare: { name: 'Streamlare', url: 'https://streamlare.com/e/', autoPlay: true, requiresTMDB: false, requiresIMDB: true }, streamtape: { name: 'Streamtape', url: 'https://streamtape.com/e/', autoPlay: true, requiresTMDB: false, requiresIMDB: true }, younetu: { name: 'Younetu', url: 'https://younetu.com/embed/', autoPlay: true, requiresTMDB: false, requiresIMDB: true }, uptostream: { name: 'Uptostream', url: 'https://uptostream.com/iframe/', autoPlay: true, requiresTMDB: false, requiresIMDB: true }, vidsrc: { name: 'VidSrc', url: 'https://vidsrc.to/embed/movie/', autoPlay: true, requiresTMDB: true, requiresIMDB: false } }; let currentPage = 1; let currentFilter = 'popular'; let currentGenre = null; let currentSearch = ''; let totalPages = 1; let isLoading = false; let currentMovieId = null; let currentIMDBId = null; let selectedServer = 'hdvip'; // Fonction utilitaire pour faire les requêtes API async function fetchAPI(endpoint, params = {}) { const url = new URL(`${BASE_URL}${endpoint}`); // Ajouter les paramètres par défaut const defaultParams = { language: 'fr-FR', page: currentPage, api_key: API_KEY }; // Fusionner les paramètres const queryParams = {...defaultParams, ...params}; // Ajouter les paramètres à l'URL Object.keys(queryParams).forEach(key => { if (queryParams[key] !== undefined && queryParams[key] !== null) { url.searchParams.append(key, queryParams[key]); } }); try { const response = await fetch(url); if (!response.ok) { throw new Error(`Erreur HTTP: ${response.status}`); } return await response.json(); } catch (error) { console.error('Erreur API:', error); throw error; } } // Charger les films au démarrage document.addEventListener('DOMContentLoaded', function() { loadMovies(); // Écouter la touche Entrée dans la recherche document.getElementById('search-input').addEventListener('keypress', function(e) { if (e.key === 'Enter') { searchMovies(); } }); }); // Charger les films async function loadMovies() { if (isLoading) return; isLoading = true; showLoadingState(); try { let data; if (currentSearch) { data = await fetchAPI('/search/movie', { query: currentSearch, include_adult: false, page: currentPage }); } else if (currentGenre) { data = await fetchAPI('/discover/movie', { include_adult: false, include_video: false, sort_by: 'popularity.desc', with_genres: currentGenre, page: currentPage }); } else { data = await fetchAPI(`/movie/${currentFilter}`, { page: currentPage }); } totalPages = data.total_pages || 1; if (currentPage === 1) { document.getElementById('movies-container').innerHTML = ''; } if (data.results && data.results.length > 0) { displayMovies(data.results); updateLoadMoreButton(); } else { showNoResults(); } } catch (error) { console.error('Error fetching movies:', error); showErrorState(error.message); } finally { isLoading = false; } } // Afficher l'état de chargement function showLoadingState() { const container = document.getElementById('movies-container'); container.innerHTML = ` <div class="flex justify-center items-center py-12 col-span-full"> <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary loading-spinner"></div> </div> `; } // Afficher les films avec boutons de streaming function displayMovies(movies) { const container = document.getElementById('movies-container'); movies.forEach(movie => { const movieCard = document.createElement('div'); movieCard.className = 'movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300'; // Utiliser l'image originale en haute qualité si disponible const posterPath = movie.poster_path ? `https://image.tmdb.org/t/p/w500${movie.poster_path}` : 'https://via.placeholder.com/500x750?text=Affiche+non+disponible'; movieCard.innerHTML = ` <div> <div class="movie-poster w-full rounded-t-lg overflow-hidden ${!movie.poster_path ? 'placeholder-poster' : ''}"> <img src="${posterPath}" alt="${movie.title || 'Titre inconnu'}" class="w-full h-full object-cover" onerror="this.src='https://via.placeholder.com/500x750?text=Image+non+chargée'; this.classList.add('placeholder-poster')"> </div> <div class="p-4"> <h3 class="text-lg font-semibold text-white truncate">${movie.title || 'Titre inconnu'}</h3> <div class="flex items-center mt-2"> <span class="text-yellow-400 text-sm"> <i class="fas fa-star"></i> ${movie.vote_average ? movie.vote_average.toFixed(1) : 'N/A'} </span> <span class="text-gray-400 text-sm ml-auto">${movie.release_date ? movie.release_date.substring(0, 4) : 'N/A'}</span> </div> <div class="mt-3"> <button onclick="startAutoStreaming(${movie.id}, '${movie.title || 'Film'}')" class="w-full stream-btn px-3 py-2 bg-green-600 hover:bg-green-700 text-white rounded text-sm"> <i class="fas fa-play-circle mr-1"></i> Lecture auto </button> <button onclick="showMovieDetails(${movie.id})" class="w-full mt-2 px-3 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded text-sm"> <i class="fas fa-info-circle mr-1"></i> Détails </button> </div> </div> </div> `; container.appendChild(movieCard); }); } // Afficher un message d'erreur function showErrorState(errorMessage) { const container = document.getElementById('movies-container'); container.innerHTML = ` <div class="col-span-full py-6 px-4 error-message rounded-lg"> <div class="flex items-center"> <i class="fas fa-exclamation-triangle text-red-500 text-xl mr-3"></i> <div> <h3 class="text-lg font-medium text-white">Erreur lors du chargement des films</h3> <p class="text-gray-300 mt-1">${errorMessage || 'Veuillez réessayer plus tard'}</p> <button onclick="retryLoading()" class="mt-3 px-4 py-2 bg-primary text-white rounded-full hover:bg-secondary transition text-sm"> <i class="fas fa-sync-alt mr-2"></i> Réessayer </button> </div> </div> </div> `; document.getElementById('load-more-container').classList.add('hidden'); } // Afficher un message quand aucun résultat n'est trouvé function showNoResults() { const container = document.getElementById('movies-container'); container.innerHTML = ` <div class="col-span-full text-center py-12"> <i class="fas fa-film text-4xl text-gray-500 mb-4"></i> <h3 class="text-xl text-white">Aucun film trouvé</h3> <p class="text-gray-400 mt-2">Essayez avec d'autres critères de recherche</p> </div> `; document.getElementById('load-more-container').classList.add('hidden'); } // Réessayer le chargement function retryLoading() { currentPage = 1; loadMovies(); } // Mettre à jour le bouton "Voir plus" function updateLoadMoreButton() { const loadMoreContainer = document.getElementById('load-more-container'); if (currentPage >= totalPages) { loadMoreContainer.innerHTML = ` <p class="text-gray-400">Vous avez atteint la fin des résultats</p> `; } else { loadMoreContainer.classList.remove('hidden'); } } // Filtrer les films function filterMovies(filter) { currentFilter = filter; currentGenre = null; currentSearch = ''; currentPage = 1; document.getElementById('search-input').value = ''; loadMovies(); // Mettre à jour les boutons actifs document.querySelectorAll('button').forEach(btn => { if (btn.textContent.toLowerCase().includes(filter.replace('_', ' '))) { btn.classList.remove('bg-gray-700'); btn.classList.add('bg-primary'); } else { btn.classList.remove('bg-primary'); btn.classList.add('bg-gray-700'); } }); } // Filtrer par genre function filterByGenre(genreId) { currentGenre = genreId; currentSearch = ''; currentPage = 1; document.getElementById('search-input').value = ''; loadMovies(); // Mettre à jour les boutons actifs document.querySelectorAll('.genre-btn').forEach(btn => { btn.classList.remove('bg-primary'); if (btn.onclick.toString().includes(genreId.toString())) { btn.classList.add('bg-primary'); } }); } // Rechercher des films function searchMovies() { const query = document.getElementById('search-input').value.trim(); if (query) { currentSearch = query; currentGenre = null; currentPage = 1; loadMovies(); } } // Charger plus de films function loadMoreMovies() { if (currentPage < totalPages) { currentPage++; loadMovies(); } } // Afficher les détails du film async function showMovieDetails(movieId) { try { const movie = await fetchAPI(`/movie/${movieId}`); currentMovieId = movieId; // Récupérer l'ID IMDB si disponible if (movie.imdb_id) { currentIMDBId = movie.imdb_id; } else { // Si l'ID IMDB n'est pas disponible, essayer de le récupérer via l'API const externalIds = await fetchAPI(`/movie/${movieId}/external_ids`); currentIMDBId = externalIds.imdb_id || null; } // Remplir la modal const modalPoster = document.querySelector('#modal-poster img'); modalPoster.src = movie.poster_path ? `https://image.tmdb.org/t/p/w500${movie.poster_path}` : 'https://via.placeholder.com/500x750?text=Affiche+non+disponible'; modalPoster.onerror = function() { this.src = 'https://via.placeholder.com/500x750?text=Image+non+chargée'; }; document.getElementById('modal-title').textContent = movie.title || 'Titre inconnu'; document.getElementById('modal-rating').textContent = `${movie.vote_average ? movie.vote_average.toFixed(1) : 'N/A'}/10`; document.getElementById('modal-year').textContent = movie.release_date ? movie.release_date.substring(0, 4) : 'N/A'; document.getElementById('modal-runtime').textContent = movie.runtime ? `${movie.runtime} min` : ''; document.getElementById('modal-overview').textContent = movie.overview || 'Aucun synopsis disponible.'; // Afficher les genres const genresContainer = document.getElementById('modal-genres'); genresContainer.innerHTML = ''; if (movie.genres && movie.genres.length > 0) { movie.genres.forEach(genre => { const genreBadge = document.createElement('span'); genreBadge.className = 'bg-gray-700 text-white text-xs px-2 py-1 rounded'; genreBadge.textContent = genre.name; genresContainer.appendChild(genreBadge); }); } else { genresContainer.innerHTML = '<span class="text-gray-400 text-sm">Aucun genre spécifié</span>'; } // Afficher la modal document.getElementById('movie-modal').classList.remove('hidden'); } catch (error) { console.error('Error fetching movie details:', error); alert('Erreur lors du chargement des détails du film: ' + (error.message || 'Veuillez réessayer')); } } // Fermer la modal de détails function closeModal() { document.getElementById('movie-modal').classList.add('hidden'); } // Sélectionner un serveur de streaming function selectServer(serverId) { selectedServer = serverId; // Mettre à jour l'état des boutons document.querySelectorAll('.server-btn').forEach(btn => { if (btn.dataset.server === serverId) { btn.classList.remove('inactive'); btn.classList.add('active'); } else { btn.classList.remove('active'); btn.classList.add('inactive'); } }); } // Démarrer le streaming depuis la modal function startStreaming() { if (currentMovieId) { const movieTitle = document.getElementById('modal-title').textContent; startAutoStreaming(currentMovieId, movieTitle); closeModal(); } } // Démarrer le streaming automatique dans une nouvelle fenêtre async function startAutoStreaming(movieId, movieTitle) { currentMovieId = movieId; // Afficher la fenêtre de streaming const streamingWindow = document.getElementById('streaming-window'); document.getElementById('streaming-title').textContent = movieTitle; // Afficher l'état de chargement const playerContainer = document.getElementById('streaming-player-container'); playerContainer.innerHTML = ` <div id="stream-loading" class="stream-loading w-full h-full"> <div class="stream-loading-spinner"></div> <p class="text-gray-300">Chargement du flux vidéo...</p> </div> `; // Afficher la fenêtre de streaming streamingWindow.classList.remove('hidden'); // Récupérer les informations du film pour l'ID IMDB si nécessaire let imdbId = currentIMDBId; if (!imdbId && STREAMING_SERVERS[selectedServer].requiresIMDB) { try { const externalIds = await fetchAPI(`/movie/${movieId}/external_ids`); imdbId = externalIds.imdb_id; if (!imdbId) { throw new Error("ID IMDB non disponible"); } } catch (error) { console.error("Erreur lors de la récupération de l'ID IMDB:", error); playerContainer.innerHTML = ` <div class="flex flex-col items-center justify-center h-full text-red-400"> <i class="fas fa-exclamation-triangle text-4xl mb-4"></i> <p class="text-lg">Impossible de trouver l'ID IMDB pour ce film</p> <p class="text-sm text-gray-400 mt-2">Essayez avec un autre serveur</p> </div> `; return; } } // Construire l'URL de streaming en fonction du serveur sélectionné let streamingUrl; const serverConfig = STREAMING_SERVERS[selectedServer]; if (serverConfig.requiresTMDB) { streamingUrl = serverConfig.url + movieId; } else if (serverConfig.requiresIMDB && imdbId) { streamingUrl = serverConfig.url + imdbId; } else { // Si aucun ID n'est disponible, utiliser TMDB par défaut streamingUrl = serverConfig.url + movieId; } // Ajouter le paramètre de lecture automatique si pris en charge if (serverConfig.autoPlay) { streamingUrl += '/auto'; } // Créer l'iframe pour le lecteur vidéo const iframe = document.createElement('iframe'); iframe.id = 'streaming-player'; iframe.src = streamingUrl; iframe.setAttribute('allowfullscreen', ''); iframe.setAttribute('scrolling', 'no'); iframe.setAttribute('frameborder', '0'); iframe.setAttribute('marginwidth', '0'); iframe.setAttribute('marginheight', '0'); iframe.style.width = '100%'; iframe.style.height = '100%'; iframe.style.border = 'none'; // Gestion des erreurs de chargement iframe.onerror = function() { playerContainer.innerHTML = ` <div class="flex flex-col items-center justify-center h-full text-red-400"> <i class="fas fa-exclamation-triangle text-4xl mb-4"></i> <p class="text-lg">Erreur lors du chargement du flux vidéo</p> <p class="text-sm text-gray-400 mt-2">Le serveur peut être temporairement indisponible</p> <button onclick="tryAlternativeServer()" class="mt-4 px-4 py-2 bg-primary text-white rounded hover:bg-secondary transition"> <i class="fas fa-sync-alt mr-2"></i> Essayer un autre serveur </button> </div> `; }; // Remplacer le chargement par le lecteur playerContainer.innerHTML = ''; playerContainer.appendChild(iframe); // Mettre le focus sur la fenêtre de streaming streamingWindow.focus(); // Tentative de lecture automatique (peut être bloquée par le navigateur) setTimeout(() => { try { iframe.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*'); } catch (e) { console.log("Auto-play blocked by browser"); } }, 2000); } // Essayer un autre serveur en cas d'erreur function tryAlternativeServer() { const servers = Object.keys(STREAMING_SERVERS); const currentIndex = servers.indexOf(selectedServer); const nextIndex = (currentIndex + 1) % servers.length; selectedServer = servers[nextIndex]; startAutoStreaming(currentMovieId, document.getElementById('streaming-title').textContent); } // Fermer la fenêtre de streaming function closeStreamingWindow() { const playerContainer = document.getElementById('streaming-player-container'); playerContainer.innerHTML = ''; document.getElementById('streaming-window').classList.add('hidden'); } // Changer la qualité de streaming (simulé) function changeQuality(quality) { alert(`Qualité changée en ${quality}. Note: Ceci est une démonstration.`); // En réalité, vous devriez mettre à jour la source du lecteur vidéo } // Basculer en plein écran function toggleFullscreen() { const playerContainer = document.getElementById('streaming-player-container'); if (playerContainer.requestFullscreen) { playerContainer.requestFullscreen(); } else if (playerContainer.webkitRequestFullscreen) { playerContainer.webkitRequestFullscreen(); } else if (playerContainer.msRequestFullscreen) { playerContainer.msRequestFullscreen(); } } </script> <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/cinestream" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> </html>
4
+ afficher les boutons de regarder maintenant