Hugging Face's logo

Spaces:
docto41
/
streamhubpro
Running

App Files Community
docto41 commited on
Commit
a94b378
·
verified ·
1 Parent(s): a6567ea

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1413 -19
  3. prompts.txt +4 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Streamhubpro
3
- emoji: 😻
4
- colorFrom: green
5
- colorTo: blue
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: streamhubpro
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: pink
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,1413 @@
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>StreamHub Pro - Plateforme de Streaming Automatisée</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>
10
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Roboto:wght@300;400;500;700&display=swap');
11
+
12
+ :root {
13
+ --primary: #00f0ff;
14
+ --secondary: #ff00f0;
15
+ --dark: #0a0a1a;
16
+ --light: #f0f0ff;
17
+ }
18
+
19
+ body {
20
+ font-family: 'Roboto', sans-serif;
21
+ background-color: var(--dark);
22
+ color: var(--light);
23
+ overflow-x: hidden;
24
+ }
25
+
26
+ .font-orbitron {
27
+ font-family: 'Orbitron', sans-serif;
28
+ }
29
+
30
+ .glow-text {
31
+ text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary);
32
+ }
33
+
34
+ .glow-box {
35
+ box-shadow: 0 0 15px var(--primary), 0 0 30px rgba(0, 240, 255, 0.3);
36
+ }
37
+
38
+ .pulse {
39
+ animation: pulse 2s infinite;
40
+ }
41
+
42
+ @keyframes pulse {
43
+ 0% { opacity: 1; }
44
+ 50% { opacity: 0.7; }
45
+ 100% { opacity: 1; }
46
+ }
47
+
48
+ .holographic {
49
+ background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(255, 0, 240, 0.1));
50
+ backdrop-filter: blur(10px);
51
+ border: 1px solid rgba(255, 255, 255, 0.1);
52
+ }
53
+
54
+ .neon-border {
55
+ position: relative;
56
+ }
57
+
58
+ .neon-border::before {
59
+ content: '';
60
+ position: absolute;
61
+ top: 0;
62
+ left: 0;
63
+ right: 0;
64
+ bottom: 0;
65
+ border: 2px solid transparent;
66
+ border-radius: inherit;
67
+ background: linear-gradient(135deg, var(--primary), var(--secondary)) border-box;
68
+ -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
69
+ -webkit-mask-composite: destination-out;
70
+ mask-composite: exclude;
71
+ pointer-events: none;
72
+ }
73
+
74
+ .scanline {
75
+ position: relative;
76
+ overflow: hidden;
77
+ }
78
+
79
+ .scanline::after {
80
+ content: '';
81
+ position: absolute;
82
+ top: 0;
83
+ left: 0;
84
+ right: 0;
85
+ height: 2px;
86
+ background: rgba(0, 240, 255, 0.3);
87
+ animation: scan 8s linear infinite;
88
+ }
89
+
90
+ @keyframes scan {
91
+ 0% { top: -2px; }
92
+ 100% { top: 100%; }
93
+ }
94
+
95
+ .matrix-fall {
96
+ position: absolute;
97
+ top: 0;
98
+ left: 0;
99
+ right: 0;
100
+ bottom: 0;
101
+ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><rect width="1" height="1" fill="rgba(0,240,255,0.1)"/></svg>');
102
+ opacity: 0.05;
103
+ pointer-events: none;
104
+ }
105
+
106
+ .movie-card {
107
+ transition: all 0.3s ease;
108
+ transform-style: preserve-3d;
109
+ }
110
+
111
+ .movie-card:hover {
112
+ transform: translateY(-10px) scale(1.03) rotateX(5deg);
113
+ z-index: 10;
114
+ }
115
+
116
+ .player-container {
117
+ aspect-ratio: 16/9;
118
+ background: linear-gradient(135deg, #0a0a1a, #0a0a2a);
119
+ }
120
+
121
+ .quality-badge {
122
+ position: absolute;
123
+ top: 10px;
124
+ right: 10px;
125
+ font-size: 12px;
126
+ padding: 2px 6px;
127
+ border-radius: 4px;
128
+ font-weight: bold;
129
+ }
130
+
131
+ .PM4 { background: linear-gradient(135deg, #ff0000, #ff6600); }
132
+ .EMB { background: linear-gradient(135deg, #00ff00, #00cc00); }
133
+ .HD { background: linear-gradient(135deg, #0066ff, #0033cc); }
134
+ .UHD { background: linear-gradient(135deg, #cc00ff, #9900cc); }
135
+
136
+ .loading-dots::after {
137
+ content: '.';
138
+ animation: dots 1.5s steps(5, end) infinite;
139
+ }
140
+
141
+ @keyframes dots {
142
+ 0%, 20% { content: '.'; }
143
+ 40% { content: '..'; }
144
+ 60% { content: '...'; }
145
+ 80%, 100% { content: ''; }
146
+ }
147
+
148
+ .grid-stack {
149
+ display: grid;
150
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
151
+ gap: 20px;
152
+ }
153
+
154
+ @media (max-width: 768px) {
155
+ .grid-stack {
156
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
157
+ gap: 15px;
158
+ }
159
+ }
160
+
161
+ .floating-nav {
162
+ animation: float 6s ease-in-out infinite;
163
+ }
164
+
165
+ @keyframes float {
166
+ 0% { transform: translateY(0px); }
167
+ 50% { transform: translateY(-10px); }
168
+ 100% { transform: translateY(0px); }
169
+ }
170
+
171
+ /* Animation de chargement */
172
+ @keyframes spin {
173
+ 0% { transform: rotate(0deg); }
174
+ 100% { transform: rotate(360deg); }
175
+ }
176
+
177
+ .loader {
178
+ border: 4px solid rgba(0, 240, 255, 0.3);
179
+ border-radius: 50%;
180
+ border-top: 4px solid var(--primary);
181
+ width: 40px;
182
+ height: 40px;
183
+ animation: spin 1s linear infinite;
184
+ }
185
+
186
+ /* Auto-play animation */
187
+ .autoplay-indicator {
188
+ position: absolute;
189
+ bottom: 20px;
190
+ left: 20px;
191
+ background: rgba(0, 0, 0, 0.7);
192
+ padding: 5px 10px;
193
+ border-radius: 20px;
194
+ display: flex;
195
+ align-items: center;
196
+ z-index: 10;
197
+ }
198
+
199
+ .autoplay-indicator i {
200
+ margin-right: 5px;
201
+ color: var(--primary);
202
+ }
203
+
204
+ /* Server status indicators */
205
+ .server-status {
206
+ display: inline-block;
207
+ width: 10px;
208
+ height: 10px;
209
+ border-radius: 50%;
210
+ margin-right: 5px;
211
+ }
212
+
213
+ .server-online {
214
+ background-color: #00ff00;
215
+ box-shadow: 0 0 10px #00ff00;
216
+ }
217
+
218
+ .server-offline {
219
+ background-color: #ff0000;
220
+ }
221
+
222
+ .server-busy {
223
+ background-color: #ffff00;
224
+ box-shadow: 0 0 10px #ffff00;
225
+ }
226
+
227
+ /* Server selection panel */
228
+ .server-panel {
229
+ max-height: 300px;
230
+ overflow-y: auto;
231
+ scrollbar-width: thin;
232
+ scrollbar-color: var(--primary) var(--dark);
233
+ }
234
+
235
+ .server-panel::-webkit-scrollbar {
236
+ width: 6px;
237
+ }
238
+
239
+ .server-panel::-webkit-scrollbar-track {
240
+ background: var(--dark);
241
+ }
242
+
243
+ .server-panel::-webkit-scrollbar-thumb {
244
+ background-color: var(--primary);
245
+ border-radius: 6px;
246
+ }
247
+
248
+ /* Server card */
249
+ .server-card {
250
+ transition: all 0.2s ease;
251
+ }
252
+
253
+ .server-card:hover {
254
+ transform: translateX(5px);
255
+ }
256
+
257
+ .server-card.selected {
258
+ border-left: 3px solid var(--primary);
259
+ background: rgba(0, 240, 255, 0.1);
260
+ }
261
+ </style>
262
+ <!-- Video.js pour le lecteur vidéo -->
263
+ <link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
264
+ <!-- YouTube API -->
265
+ <script src="https://www.youtube.com/iframe_api"></script>
266
+ </head>
267
+ <body class="relative">
268
+ <!-- Effet Matrix en arrière-plan -->
269
+ <div class="matrix-fall"></div>
270
+
271
+ <!-- Barre de chargement initiale -->
272
+ <div id="init-loader" class="fixed inset-0 z-50 flex flex-col items-center justify-center bg-black bg-opacity-90 transition-opacity duration-1000">
273
+ <div class="text-4xl md:text-6xl font-orbitron mb-8 glow-text">
274
+ <span class="text-primary">STREAM</span><span class="text-secondary">HUB</span> <span class="text-primary">PRO</span>
275
+ </div>
276
+ <div class="w-3/4 md:w-1/2 h-2 bg-gray-800 rounded-full overflow-hidden">
277
+ <div id="progress-bar" class="h-full bg-gradient-to-r from-secondary to-primary" style="width: 0%"></div>
278
+ </div>
279
+ <div class="mt-4 text-lg font-orbitron">
280
+ Initialisation des serveurs robotisés <span class="loading-dots"></span>
281
+ </div>
282
+ <div class="mt-2 text-sm opacity-70">
283
+ <span id="server-count">0</span>/12 serveurs connectés
284
+ </div>
285
+ </div>
286
+
287
+ <!-- Interface principale -->
288
+ <div id="main-interface" class="hidden min-h-screen">
289
+ <!-- En-tête holographique -->
290
+ <header class="holographic sticky top-0 z-40">
291
+ <div class="container mx-auto px-4 py-3 flex items-center justify-between">
292
+ <div class="flex items-center space-x-4">
293
+ <div class="text-2xl md:text-3xl font-orbitron glow-text">
294
+ <span class="text-primary">STREAM</span><span class="text-secondary">HUB</span> <span class="text-primary">PRO</span>
295
+ </div>
296
+ <div class="hidden md:block text-sm bg-black bg-opacity-50 px-3 py-1 rounded-full">
297
+ <span class="text-primary" id="total-movies">0</span> contenus disponibles
298
+ </div>
299
+ </div>
300
+
301
+ <div class="flex items-center space-x-4">
302
+ <div class="relative group">
303
+ <button class="px-4 py-2 bg-black bg-opacity-50 rounded-full flex items-center space-x-2 hover:bg-opacity-70 transition">
304
+ <i class="fas fa-server text-primary"></i>
305
+ <span>Serveurs</span>
306
+ </button>
307
+ <div class="absolute right-0 mt-2 w-64 bg-black bg-opacity-90 rounded-lg shadow-lg hidden group-hover:block z-50">
308
+ <div class="p-3 font-orbitron text-sm border-b border-gray-700">
309
+ Statut des serveurs
310
+ </div>
311
+ <div id="server-status-list" class="max-h-60 overflow-y-auto">
312
+ <!-- Les serveurs seront ajoutés dynamiquement ici -->
313
+ </div>
314
+ </div>
315
+ </div>
316
+
317
+ <div class="relative group">
318
+ <button class="px-4 py-2 bg-black bg-opacity-50 rounded-full flex items-center space-x-2 hover:bg-opacity-70 transition">
319
+ <i class="fas fa-user text-primary"></i>
320
+ <span>Profil</span>
321
+ </button>
322
+ <div class="absolute right-0 mt-2 w-48 bg-black bg-opacity-90 rounded-lg shadow-lg hidden group-hover:block z-50">
323
+ <div class="py-1">
324
+ <a href="#" class="block px-4 py-2 hover:bg-primary hover:bg-opacity-20">Mon compte</a>
325
+ <a href="#" class="block px-4 py-2 hover:bg-primary hover:bg-opacity-20">Paramètres</a>
326
+ <a href="#" class="block px-4 py-2 hover:bg-primary hover:bg-opacity-20">Déconnexion</a>
327
+ </div>
328
+ </div>
329
+ </div>
330
+
331
+ <div class="relative">
332
+ <button id="search-toggle" class="w-10 h-10 flex items-center justify-center rounded-full bg-black bg-opacity-50 hover:bg-opacity-70 transition">
333
+ <i class="fas fa-search text-primary"></i>
334
+ </button>
335
+ </div>
336
+ </div>
337
+ </div>
338
+
339
+ <!-- Barre de recherche avancée -->
340
+ <div id="search-bar" class="hidden container mx-auto px-4 pb-4">
341
+ <div class="relative">
342
+ <input id="search-input" type="text" placeholder="Rechercher des films, séries..."
343
+ class="w-full bg-black bg-opacity-50 border border-primary border-opacity-30 rounded-full px-6 py-3 text-white focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50">
344
+ <button id="search-button" class="absolute right-3 top-3 bg-primary text-black rounded-full w-8 h-8 flex items-center justify-center">
345
+ <i class="fas fa-arrow-right"></i>
346
+ </button>
347
+ </div>
348
+
349
+ <div class="flex flex-wrap gap-3 mt-3">
350
+ <select id="genre-filter" class="bg-black bg-opacity-50 border border-primary border-opacity-30 rounded-full px-4 py-2 text-white focus:outline-none text-sm">
351
+ <option value="">Tous les genres</option>
352
+ </select>
353
+
354
+ <select id="year-filter" class="bg-black bg-opacity-50 border border-primary border-opacity-30 rounded-full px-4 py-2 text-white focus:outline-none text-sm">
355
+ <option value="">Toutes les années</option>
356
+ </select>
357
+
358
+ <select id="quality-filter" class="bg-black bg-opacity-50 border border-primary border-opacity-30 rounded-full px-4 py-2 text-white focus:outline-none text-sm">
359
+ <option value="">Toutes les qualités</option>
360
+ <option value="PM4">PM4</option>
361
+ <option value="EMB">EMB</option>
362
+ <option value="HD">HD</option>
363
+ <option value="UHD">UHD</option>
364
+ </select>
365
+
366
+ <select id="language-filter" class="bg-black bg-opacity-50 border border-primary border-opacity-30 rounded-full px-4 py-2 text-white focus:outline-none text-sm">
367
+ <option value="">Toutes les langues</option>
368
+ <option value="fr">Français</option>
369
+ <option value="en">Anglais</option>
370
+ <option value="vostfr">VOSTFR</option>
371
+ </select>
372
+ </div>
373
+ </div>
374
+ </header>
375
+
376
+ <!-- Contenu principal -->
377
+ <main class="container mx-auto px-4 py-6 relative">
378
+ <!-- Lecteur principal -->
379
+ <div id="player-section" class="mb-8 glow-box rounded-xl overflow-hidden neon-border hidden">
380
+ <div class="player-container relative">
381
+ <div id="youtube-player"></div>
382
+ <div id="autoplay-indicator" class="autoplay-indicator hidden">
383
+ <i class="fas fa-play"></i>
384
+ <span>Lecture automatique dans <span id="countdown">5</span>s</span>
385
+ </div>
386
+ </div>
387
+
388
+ <div class="bg-black bg-opacity-70 p-4 flex items-center justify-between">
389
+ <div class="flex items-center space-x-4">
390
+ <button id="play-button" class="w-10 h-10 rounded-full bg-primary bg-opacity-20 hover:bg-opacity-40 flex items-center justify-center">
391
+ <i class="fas fa-play text-primary"></i>
392
+ </button>
393
+ <div class="text-sm">
394
+ <div id="now-playing-title" class="font-orbitron">Aucun contenu sélectionné</div>
395
+ <div id="now-playing-quality" class="opacity-70 text-xs">Prêt à diffuser</div>
396
+ </div>
397
+ </div>
398
+
399
+ <div class="flex items-center space-x-3">
400
+ <button id="server-button" class="w-8 h-8 rounded-full bg-black bg-opacity-50 hover:bg-opacity-70 flex items-center justify-center">
401
+ <i class="fas fa-server text-primary"></i>
402
+ </button>
403
+ <button id="subtitles-button" class="w-8 h-8 rounded-full bg-black bg-opacity-50 hover:bg-opacity-70 flex items-center justify-center">
404
+ <i class="fas fa-closed-captioning text-primary"></i>
405
+ </button>
406
+ <button id="settings-button" class="w-8 h-8 rounded-full bg-black bg-opacity-50 hover:bg-opacity-70 flex items-center justify-center">
407
+ <i class="fas fa-cog text-primary"></i>
408
+ </button>
409
+ <button id="fullscreen-button" class="w-8 h-8 rounded-full bg-black bg-opacity-50 hover:bg-opacity-70 flex items-center justify-center">
410
+ <i class="fas fa-expand text-primary"></i>
411
+ </button>
412
+ </div>
413
+ </div>
414
+ </div>
415
+
416
+ <!-- Navigation flottante -->
417
+ <div class="floating-nav sticky top-20 z-30 mb-6 bg-black bg-opacity-70 rounded-full px-4 py-2 flex justify-center space-x-1 md:space-x-4">
418
+ <button data-category="popular" class="px-3 md:px-4 py-1 rounded-full bg-primary text-black font-medium text-sm">Tendance</button>
419
+ <button data-category="now_playing" class="px-3 md:px-4 py-1 rounded-full hover:bg-white hover:bg-opacity-10 text-sm">Nouveautés</button>
420
+ <button data-category="top_rated" class="px-3 md:px-4 py-1 rounded-full hover:bg-white hover:bg-opacity-10 text-sm">Populaire</button>
421
+ <button data-category="upcoming" class="px-3 md:px-4 py-1 rounded-full hover:bg-white hover:bg-opacity-10 text-sm">Prochainement</button>
422
+ <button id="random-movie" class="px-3 md:px-4 py-1 rounded-full hover:bg-white hover:bg-opacity-10 text-sm">Aléatoire</button>
423
+ <button data-category="watchlist" class="px-3 md:px-4 py-1 rounded-full hover:bg-white hover:bg-opacity-10 text-sm">Ma liste</button>
424
+ </div>
425
+
426
+ <!-- Sections de films -->
427
+ <div id="movies-container" class="space-y-10">
428
+ <!-- Les films seront chargés ici dynamiquement -->
429
+ <div class="flex justify-center items-center py-20">
430
+ <div class="loader"></div>
431
+ </div>
432
+ </div>
433
+ </main>
434
+
435
+ <!-- Pied de page -->
436
+ <footer class="bg-black bg-opacity-70 mt-20 py-8">
437
+ <div class="container mx-auto px-4">
438
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
439
+ <div>
440
+ <h3 class="font-orbitron text-lg mb-4">StreamHub Pro</h3>
441
+ <p class="text-sm opacity-70">Plateforme de streaming automatisée avec 12 serveurs robotisés pour une expérience optimale.</p>
442
+ </div>
443
+
444
+ <div>
445
+ <h3 class="font-orbitron text-lg mb-4">Navigation</h3>
446
+ <ul class="space-y-2">
447
+ <li><a href="#" class="text-sm hover:text-primary transition">Accueil</a></li>
448
+ <li><a href="#" class="text-sm hover:text-primary transition">Nouveautés</a></li>
449
+ <li><a href="#" class="text-sm hover:text-primary transition">Tendances</a></li>
450
+ <li><a href="#" class="text-sm hover:text-primary transition">Ma liste</a></li>
451
+ </ul>
452
+ </div>
453
+
454
+ <div>
455
+ <h3 class="font-orbitron text-lg mb-4">Serveurs</h3>
456
+ <ul class="space-y-2">
457
+ <li><a href="#" class="text-sm hover:text-primary transition">Statut des serveurs</a></li>
458
+ <li><a href="#" class="text-sm hover:text-primary transition">Serveurs Français</a></li>
459
+ <li><a href="#" class="text-sm hover:text-primary transition">Serveurs Internationaux</a></li>
460
+ <li><a href="#" class="text-sm hover:text-primary transition">Serveurs Premium</a></li>
461
+ </ul>
462
+ </div>
463
+
464
+ <div>
465
+ <h3 class="font-orbitron text-lg mb-4">Contact</h3>
466
+ <div class="flex space-x-4 mb-4">
467
+ <a href="#" class="w-8 h-8 rounded-full bg-primary bg-opacity-20 hover:bg-opacity-40 flex items-center justify-center">
468
+ <i class="fab fa-twitter"></i>
469
+ </a>
470
+ <a href="#" class="w-8 h-8 rounded-full bg-primary bg-opacity-20 hover:bg-opacity-40 flex items-center justify-center">
471
+ <i class="fab fa-facebook-f"></i>
472
+ </a>
473
+ <a href="#" class="w-8 h-8 rounded-full bg-primary bg-opacity-20 hover:bg-opacity-40 flex items-center justify-center">
474
+ <i class="fab fa-instagram"></i>
475
+ </a>
476
+ <a href="#" class="w-8 h-8 rounded-full bg-primary bg-opacity-20 hover:bg-opacity-40 flex items-center justify-center">
477
+ <i class="fab fa-discord"></i>
478
+ </a>
479
+ </div>
480
+ <p class="text-xs opacity-50">© 2024 StreamHub Pro. Tous droits réservés.</p>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ </footer>
485
+ </div>
486
+
487
+ <!-- Panneau latéral pour les détails du film -->
488
+ <div id="movie-details" class="fixed top-0 right-0 h-full w-full md:w-1/3 bg-black bg-opacity-90 backdrop-blur-lg transform translate-x-full transition-transform duration-300 z-50 overflow-y-auto">
489
+ <div class="p-6">
490
+ <button id="close-details" class="absolute top-4 right-4 w-10 h-10 rounded-full bg-primary bg-opacity-20 hover:bg-opacity-40 flex items-center justify-center">
491
+ <i class="fas fa-times"></i>
492
+ </button>
493
+
494
+ <div class="mt-8">
495
+ <div class="relative pb-[150%] rounded-lg overflow-hidden mb-6">
496
+ <img id="detail-poster" src="" alt="Film détaillé" class="absolute h-full w-full object-cover">
497
+ </div>
498
+
499
+ <h2 id="detail-title" class="text-2xl md:text-3xl font-orbitron mb-2"></h2>
500
+ <div class="flex items-center space-x-4 mb-4">
501
+ <span id="detail-year" class="text-sm opacity-80"></span>
502
+ <span id="detail-rating" class="flex items-center text-sm">
503
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
504
+ </span>
505
+ <span id="detail-quality" class="px-2 py-1 rounded-full text-xs font-bold"></span>
506
+ </div>
507
+
508
+ <div class="mb-6">
509
+ <h3 class="font-orbitron text-lg mb-2">Synopsis</h3>
510
+ <p id="detail-synopsis" class="text-sm opacity-90"></p>
511
+ </div>
512
+
513
+ <div class="mb-6">
514
+ <h3 class="font-orbitron text-lg mb-2">Informations</h3>
515
+ <div class="grid grid-cols-2 gap-4 text-sm">
516
+ <div>
517
+ <p class="opacity-70">Réalisateur:</p>
518
+ <p id="detail-director" class="opacity-90"></p>
519
+ </div>
520
+ <div>
521
+ <p class="opacity-70">Acteurs:</p>
522
+ <p id="detail-actors" class="opacity-90"></p>
523
+ </div>
524
+ <div>
525
+ <p class="opacity-70">Genre:</p>
526
+ <p id="detail-genre" class="opacity-90"></p>
527
+ </div>
528
+ <div>
529
+ <p class="opacity-70">Durée:</p>
530
+ <p id="detail-duration" class="opacity-90"></p>
531
+ </div>
532
+ </div>
533
+ </div>
534
+
535
+ <div class="mb-6">
536
+ <h3 class="font-orbitron text-lg mb-2">Serveurs disponibles</h3>
537
+ <div id="server-panel" class="server-panel bg-black bg-opacity-50 rounded-lg p-3">
538
+ <!-- Les serveurs seront ajoutés dynamiquement ici -->
539
+ </div>
540
+ </div>
541
+
542
+ <button id="play-movie-btn" class="w-full py-3 bg-primary text-black rounded-lg font-orbitron flex items-center justify-center space-x-2 hover:bg-opacity-90 transition">
543
+ <i class="fas fa-play"></i>
544
+ <span>Lire automatiquement</span>
545
+ </button>
546
+
547
+ <div class="mt-4 text-xs opacity-70">
548
+ <p>Les serveurs robotisés détectent automatiquement le meilleur flux disponible.</p>
549
+ </div>
550
+ </div>
551
+ </div>
552
+ </div>
553
+
554
+ <!-- Panneau de sélection des serveurs -->
555
+ <div id="server-selection" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden flex items-center justify-center">
556
+ <div class="bg-gray-900 rounded-xl w-full max-w-2xl max-h-[90vh] overflow-hidden neon-border">
557
+ <div class="p-4 border-b border-gray-800 flex justify-between items-center">
558
+ <h3 class="font-orbitron text-lg">Sélection du serveur</h3>
559
+ <button id="close-server-selection" class="w-8 h-8 rounded-full bg-black bg-opacity-50 hover:bg-opacity-70 flex items-center justify-center">
560
+ <i class="fas fa-times"></i>
561
+ </button>
562
+ </div>
563
+
564
+ <div class="p-4">
565
+ <div class="flex items-center mb-4">
566
+ <div class="relative flex-1">
567
+ <input type="text" id="server-search" placeholder="Rechercher un serveur..." class="w-full bg-black bg-opacity-50 border border-primary border-opacity-30 rounded-full px-4 py-2 text-white focus:outline-none text-sm">
568
+ <button class="absolute right-3 top-2">
569
+ <i class="fas fa-search text-primary text-sm"></i>
570
+ </button>
571
+ </div>
572
+ </div>
573
+
574
+ <div class="server-panel space-y-2">
575
+ <!-- Les serveurs seront ajoutés dynamiquement ici -->
576
+ </div>
577
+ </div>
578
+
579
+ <div class="p-4 border-t border-gray-800 flex justify-end">
580
+ <button id="confirm-server" class="px-4 py-2 bg-primary text-black rounded-lg font-orbitron hover:bg-opacity-90 transition">
581
+ Confirmer la sélection
582
+ </button>
583
+ </div>
584
+ </div>
585
+ </div>
586
+
587
+ <!-- Scripts -->
588
+ <script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
589
+ <script>
590
+ // Configuration de l'API TMDB
591
+ const API_KEY = 'fb437b10727a5a4eb8d9134e29c82ae0';
592
+ const BASE_URL = 'https://api.themoviedb.org/3';
593
+ const IMAGE_BASE_URL = 'https://image.tmdb.org/t/p/w500';
594
+ const LANGUAGE = 'fr-FR';
595
+
596
+ // Serveurs robotisés
597
+ const SERVERS = [
598
+ { id: 'fr1', name: 'Serveur Français #1', country: 'fr', status: 'online', type: 'premium', speed: 'high', languages: ['fr', 'vostfr'], quality: ['HD', 'UHD'] },
599
+ { id: 'fr2', name: 'Serveur Français #2', country: 'fr', status: 'online', type: 'standard', speed: 'medium', languages: ['fr'], quality: ['HD'] },
600
+ { id: 'fr3', name: 'Serveur Français #3', country: 'fr', status: 'online', type: 'premium', speed: 'high', languages: ['fr', 'vostfr'], quality: ['UHD'] },
601
+ { id: 'int1', name: 'Serveur International #1', country: 'us', status: 'online', type: 'premium', speed: 'high', languages: ['en', 'fr', 'vostfr'], quality: ['HD', 'UHD'] },
602
+ { id: 'int2', name: 'Serveur International #2', country: 'de', status: 'online', type: 'standard', speed: 'medium', languages: ['en', 'vostfr'], quality: ['HD'] },
603
+ { id: 'int3', name: 'Serveur International #3', country: 'uk', status: 'online', type: 'premium', speed: 'high', languages: ['en'], quality: ['UHD'] },
604
+ { id: 'auto1', name: 'Auto-Serveur #1', country: 'auto', status: 'online', type: 'auto', speed: 'high', languages: ['auto'], quality: ['auto'] },
605
+ { id: 'auto2', name: 'Auto-Serveur #2', country: 'auto', status: 'online', type: 'auto', speed: 'medium', languages: ['auto'], quality: ['auto'] },
606
+ { id: 'vostfr1', name: 'Serveur VOSTFR #1', country: 'fr', status: 'online', type: 'premium', speed: 'high', languages: ['vostfr'], quality: ['HD', 'UHD'] },
607
+ { id: 'vostfr2', name: 'Serveur VOSTFR #2', country: 'fr', status: 'online', type: 'standard', speed: 'medium', languages: ['vostfr'], quality: ['HD'] },
608
+ { id: 'fast1', name: 'Serveur Rapide #1', country: 'nl', status: 'online', type: 'premium', speed: 'very-high', languages: ['en', 'fr', 'vostfr'], quality: ['HD', 'UHD'] },
609
+ { id: 'fast2', name: 'Serveur Rapide #2', country: 'sg', status: 'online', type: 'premium', speed: 'very-high', languages: ['en', 'fr', 'vostfr'], quality: ['UHD'] }
610
+ ];
611
+
612
+ // Variables globales
613
+ let currentMovies = [];
614
+ let genres = [];
615
+ let currentCategory = 'popular';
616
+ let youtubePlayer;
617
+ let currentMovieDetails = null;
618
+ let autoplayTimeout;
619
+ let currentSourceIndex = 0;
620
+ let selectedServer = null;
621
+ let connectedServers = 0;
622
+
623
+ // Simulation du chargement initial
624
+ document.addEventListener('DOMContentLoaded', function() {
625
+ let progress = 0;
626
+ const progressBar = document.getElementById('progress-bar');
627
+ const serverCount = document.getElementById('server-count');
628
+ const initLoader = document.getElementById('init-loader');
629
+ const mainInterface = document.getElementById('main-interface');
630
+
631
+ // Simuler la connexion aux serveurs
632
+ const serverInterval = setInterval(() => {
633
+ connectedServers = Math.min(12, Math.floor(progress / 8.33));
634
+ serverCount.textContent = connectedServers;
635
+
636
+ if (connectedServers === 12) {
637
+ clearInterval(serverInterval);
638
+ }
639
+ }, 100);
640
+
641
+ const interval = setInterval(() => {
642
+ progress += Math.random() * 5;
643
+ if (progress > 100) progress = 100;
644
+
645
+ progressBar.style.width = `${progress}%`;
646
+
647
+ if (progress >= 100) {
648
+ clearInterval(interval);
649
+ setTimeout(() => {
650
+ initLoader.classList.add('opacity-0');
651
+ setTimeout(() => {
652
+ initLoader.classList.add('hidden');
653
+ mainInterface.classList.remove('hidden');
654
+
655
+ // Initialiser l'application après le chargement
656
+ initApp();
657
+ }, 1000);
658
+ }, 500);
659
+ }
660
+ }, 100);
661
+
662
+ // Gestion de la barre de recherche
663
+ const searchToggle = document.getElementById('search-toggle');
664
+ const searchBar = document.getElementById('search-bar');
665
+
666
+ searchToggle.addEventListener('click', function() {
667
+ searchBar.classList.toggle('hidden');
668
+ });
669
+
670
+ // Gestion des détails du film
671
+ const movieDetails = document.getElementById('movie-details');
672
+ const closeDetails = document.getElementById('close-details');
673
+
674
+ closeDetails.addEventListener('click', function() {
675
+ movieDetails.classList.remove('translate-x-0');
676
+ movieDetails.classList.add('translate-x-full');
677
+ });
678
+
679
+ // Gestion de la sélection des serveurs
680
+ const serverSelection = document.getElementById('server-selection');
681
+ const closeServerSelection = document.getElementById('close-server-selection');
682
+
683
+ closeServerSelection.addEventListener('click', function() {
684
+ serverSelection.classList.add('hidden');
685
+ });
686
+
687
+ document.getElementById('server-button').addEventListener('click', function() {
688
+ showServerSelection();
689
+ });
690
+
691
+ document.getElementById('confirm-server').addEventListener('click', function() {
692
+ if (selectedServer) {
693
+ // Mettre à jour l'interface avec le serveur sélectionné
694
+ serverSelection.classList.add('hidden');
695
+ }
696
+ });
697
+
698
+ // Initialiser YouTube Player
699
+ onYouTubeIframeAPIReady();
700
+ });
701
+
702
+ // Fonction appelée par l'API YouTube
703
+ function onYouTubeIframeAPIReady() {
704
+ youtubePlayer = new YT.Player('youtube-player', {
705
+ height: '100%',
706
+ width: '100%',
707
+ playerVars: {
708
+ 'autoplay': 0,
709
+ 'controls': 1,
710
+ 'rel': 0,
711
+ 'showinfo': 0,
712
+ 'modestbranding': 1
713
+ },
714
+ events: {
715
+ 'onReady': onPlayerReady,
716
+ 'onStateChange': onPlayerStateChange
717
+ }
718
+ });
719
+ }
720
+
721
+ function onPlayerReady(event) {
722
+ console.log('YouTube Player prêt');
723
+ }
724
+
725
+ function onPlayerStateChange(event) {
726
+ // Gérer les changements d'état du lecteur YouTube
727
+ }
728
+
729
+ // Initialiser l'application
730
+ async function initApp() {
731
+ try {
732
+ // Charger les genres de films
733
+ await loadGenres();
734
+
735
+ // Charger les films populaires par défaut
736
+ await loadMovies(currentCategory);
737
+
738
+ // Initialiser les serveurs
739
+ initServers();
740
+
741
+ // Configurer les écouteurs d'événements
742
+ setupEventListeners();
743
+ } catch (error) {
744
+ console.error('Erreur lors de l\'initialisation:', error);
745
+ }
746
+ }
747
+
748
+ // Initialiser les serveurs
749
+ function initServers() {
750
+ const serverStatusList = document.getElementById('server-status-list');
751
+
752
+ SERVERS.forEach(server => {
753
+ const serverItem = document.createElement('div');
754
+ serverItem.className = 'px-4 py-2 hover:bg-gray-800 flex items-center justify-between';
755
+
756
+ const serverInfo = document.createElement('div');
757
+ serverInfo.className = 'flex items-center';
758
+
759
+ const statusIndicator = document.createElement('span');
760
+ statusIndicator.className = `server-status server-${server.status}`;
761
+
762
+ const serverName = document.createElement('span');
763
+ serverName.className = 'ml-2';
764
+ serverName.textContent = server.name;
765
+
766
+ serverInfo.appendChild(statusIndicator);
767
+ serverInfo.appendChild(serverName);
768
+
769
+ const serverSpeed = document.createElement('span');
770
+ serverSpeed.className = 'text-xs opacity-70';
771
+ serverSpeed.textContent = server.speed === 'high' ? 'Rapide' : server.speed === 'very-high' ? 'Très rapide' : 'Moyen';
772
+
773
+ serverItem.appendChild(serverInfo);
774
+ serverItem.appendChild(serverSpeed);
775
+
776
+ serverStatusList.appendChild(serverItem);
777
+ });
778
+ }
779
+
780
+ // Afficher la sélection des serveurs
781
+ function showServerSelection() {
782
+ const serverSelection = document.getElementById('server-selection');
783
+ const serverPanel = serverSelection.querySelector('.server-panel');
784
+ serverPanel.innerHTML = '';
785
+
786
+ SERVERS.forEach(server => {
787
+ const serverCard = document.createElement('div');
788
+ serverCard.className = `server-card p-3 rounded-lg cursor-pointer flex items-center justify-between ${selectedServer?.id === server.id ? 'selected' : ''}`;
789
+ serverCard.dataset.id = server.id;
790
+
791
+ const serverInfo = document.createElement('div');
792
+ serverInfo.className = 'flex items-center';
793
+
794
+ const flagIcon = document.createElement('i');
795
+ flagIcon.className = `fas fa-${server.country === 'fr' ? 'flag' : 'globe'} mr-2 text-${server.type === 'premium' ? 'primary' : 'white'}`;
796
+
797
+ const serverName = document.createElement('span');
798
+ serverName.textContent = server.name;
799
+
800
+ serverInfo.appendChild(flagIcon);
801
+ serverInfo.appendChild(serverName);
802
+
803
+ const serverDetails = document.createElement('div');
804
+ serverDetails.className = 'flex items-center space-x-2';
805
+
806
+ const qualityBadge = document.createElement('span');
807
+ qualityBadge.className = 'text-xs px-2 py-1 rounded-full bg-gray-800';
808
+ qualityBadge.textContent = server.quality.includes('UHD') ? 'UHD' : 'HD';
809
+
810
+ const langBadge = document.createElement('span');
811
+ langBadge.className = 'text-xs px-2 py-1 rounded-full bg-gray-800';
812
+ langBadge.textContent = server.languages.includes('fr') ? 'FR' : server.languages.includes('vostfr') ? 'VOSTFR' : 'EN';
813
+
814
+ serverDetails.appendChild(qualityBadge);
815
+ serverDetails.appendChild(langBadge);
816
+
817
+ serverCard.appendChild(serverInfo);
818
+ serverCard.appendChild(serverDetails);
819
+
820
+ serverCard.addEventListener('click', () => {
821
+ document.querySelectorAll('.server-card').forEach(card => {
822
+ card.classList.remove('selected');
823
+ });
824
+ serverCard.classList.add('selected');
825
+ selectedServer = server;
826
+ });
827
+
828
+ serverPanel.appendChild(serverCard);
829
+ });
830
+
831
+ serverSelection.classList.remove('hidden');
832
+ }
833
+
834
+ // Charger les genres de films
835
+ async function loadGenres() {
836
+ try {
837
+ const response = await fetch(`${BASE_URL}/genre/movie/list?api_key=${API_KEY}&language=${LANGUAGE}`);
838
+ const data = await response.json();
839
+
840
+ genres = data.genres;
841
+
842
+ // Remplir le filtre des genres
843
+ const genreFilter = document.getElementById('genre-filter');
844
+ genres.forEach(genre => {
845
+ const option = document.createElement('option');
846
+ option.value = genre.id;
847
+ option.textContent = genre.name;
848
+ genreFilter.appendChild(option);
849
+ });
850
+
851
+ // Remplir le filtre des années (dernières 30 années)
852
+ const yearFilter = document.getElementById('year-filter');
853
+ const currentYear = new Date().getFullYear();
854
+ for (let year = currentYear; year >= currentYear - 30; year--) {
855
+ const option = document.createElement('option');
856
+ option.value = year;
857
+ option.textContent = year;
858
+ yearFilter.appendChild(option);
859
+ }
860
+ } catch (error) {
861
+ console.error('Erreur lors du chargement des genres:', error);
862
+ }
863
+ }
864
+
865
+ // Charger les films
866
+ async function loadMovies(category, page = 1, query = '') {
867
+ try {
868
+ let url;
869
+
870
+ if (query) {
871
+ // Recherche de films
872
+ url = `${BASE_URL}/search/movie?api_key=${API_KEY}&language=${LANGUAGE}&query=${encodeURIComponent(query)}&page=${page}`;
873
+ } else {
874
+ // Catégories normales
875
+ url = `${BASE_URL}/movie/${category}?api_key=${API_KEY}&language=${LANGUAGE}&page=${page}`;
876
+ }
877
+
878
+ // Appliquer les filtres
879
+ const genreFilter = document.getElementById('genre-filter').value;
880
+ const yearFilter = document.getElementById('year-filter').value;
881
+
882
+ if (genreFilter) {
883
+ url += `&with_genres=${genreFilter}`;
884
+ }
885
+
886
+ if (yearFilter) {
887
+ url += `&year=${yearFilter}`;
888
+ }
889
+
890
+ const response = await fetch(url);
891
+ const data = await response.json();
892
+
893
+ currentMovies = data.results;
894
+
895
+ // Mettre à jour le compteur de films
896
+ document.getElementById('total-movies').textContent = data.total_results.toLocaleString('fr-FR');
897
+
898
+ // Afficher les films
899
+ displayMovies(currentMovies);
900
+ } catch (error) {
901
+ console.error('Erreur lors du chargement des films:', error);
902
+ }
903
+ }
904
+
905
+ // Afficher les films
906
+ function displayMovies(movies) {
907
+ const moviesContainer = document.getElementById('movies-container');
908
+ moviesContainer.innerHTML = '';
909
+
910
+ if (movies.length === 0) {
911
+ moviesContainer.innerHTML = `
912
+ <div class="text-center py-20">
913
+ <i class="fas fa-film text-4xl text-primary mb-4"></i>
914
+ <h3 class="text-xl font-orbitron mb-2">Aucun film trouvé</h3>
915
+ <p class="opacity-80">Essayez de modifier vos critères de recherche</p>
916
+ </div>
917
+ `;
918
+ return;
919
+ }
920
+
921
+ const section = document.createElement('section');
922
+ section.className = 'scanline relative';
923
+
924
+ const title = document.createElement('div');
925
+ title.className = 'flex items-center justify-between mb-4';
926
+
927
+ const h2 = document.createElement('h2');
928
+ h2.className = 'text-xl md:text-2xl font-orbitron flex items-center';
929
+
930
+ const spanDot = document.createElement('span');
931
+ spanDot.className = 'w-3 h-3 rounded-full bg-primary mr-2 pulse';
932
+
933
+ const spanText = document.createElement('span');
934
+ spanText.className = 'glow-text';
935
+
936
+ if (currentCategory === 'popular') spanText.textContent = 'Tendance cette semaine';
937
+ else if (currentCategory === 'now_playing') spanText.textContent = 'Nouveautés exclusives';
938
+ else if (currentCategory === 'top_rated') spanText.textContent = 'Les mieux notés';
939
+ else if (currentCategory === 'upcoming') spanText.textContent = 'Prochainement';
940
+ else spanText.textContent = 'Résultats de recherche';
941
+
942
+ h2.appendChild(spanDot);
943
+ h2.appendChild(spanText);
944
+
945
+ const seeMore = document.createElement('a');
946
+ seeMore.href = '#';
947
+ seeMore.className = 'text-sm hover:text-primary flex items-center';
948
+ seeMore.innerHTML = 'Voir plus <i class="fas fa-chevron-right ml-1 text-xs"></i>';
949
+
950
+ title.appendChild(h2);
951
+ title.appendChild(seeMore);
952
+
953
+ const grid = document.createElement('div');
954
+ grid.className = 'grid-stack';
955
+
956
+ // Ajouter chaque film à la grille
957
+ movies.forEach(movie => {
958
+ const movieCard = createMovieCard(movie);
959
+ grid.appendChild(movieCard);
960
+ });
961
+
962
+ section.appendChild(title);
963
+ section.appendChild(grid);
964
+ moviesContainer.appendChild(section);
965
+ }
966
+
967
+ // Créer une carte de film
968
+ function createMovieCard(movie) {
969
+ const card = document.createElement('div');
970
+ card.className = 'movie-card rounded-lg overflow-hidden relative group neon-border';
971
+ card.dataset.id = movie.id;
972
+
973
+ const cardContent = document.createElement('div');
974
+ cardContent.className = 'relative pb-[150%] bg-gradient-to-br from-gray-900 to-gray-800';
975
+
976
+ const img = document.createElement('img');
977
+ img.src = movie.poster_path ? `${IMAGE_BASE_URL}${movie.poster_path}` : 'https://via.placeholder.com/500x750?text=Aucune+affiche';
978
+ img.alt = movie.title;
979
+ img.className = 'absolute h-full w-full object-cover group-hover:opacity-70 transition-opacity';
980
+
981
+ // Qualité aléatoire pour la démo
982
+ const qualities = ['PM4', 'EMB', 'HD', 'UHD'];
983
+ const randomQuality = qualities[Math.floor(Math.random() * qualities.length)];
984
+
985
+ const qualityBadge = document.createElement('div');
986
+ qualityBadge.className = `quality-badge ${randomQuality}`;
987
+ qualityBadge.textContent = randomQuality;
988
+
989
+ const overlay = document.createElement('div');
990
+ overlay.className = 'absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity';
991
+
992
+ const info = document.createElement('div');
993
+ info.className = 'absolute bottom-0 left-0 right-0 p-3 translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all';
994
+
995
+ const title = document.createElement('h3');
996
+ title.className = 'font-medium text-sm truncate';
997
+ title.textContent = movie.title;
998
+
999
+ const meta = document.createElement('div');
1000
+ meta.className = 'flex justify-between items-center mt-1 text-xs opacity-80';
1001
+
1002
+ const year = document.createElement('span');
1003
+ year.textContent = movie.release_date ? movie.release_date.split('-')[0] : 'N/A';
1004
+
1005
+ const rating = document.createElement('span');
1006
+ rating.className = 'flex items-center';
1007
+ rating.innerHTML = `<i class="fas fa-star text-yellow-400 mr-1"></i> ${movie.vote_average.toFixed(1)}`;
1008
+
1009
+ meta.appendChild(year);
1010
+ meta.appendChild(rating);
1011
+
1012
+ const playBtn = document.createElement('button');
1013
+ playBtn.className = 'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-12 h-12 bg-primary bg-opacity-90 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity';
1014
+ playBtn.innerHTML = '<i class="fas fa-play text-black"></i>';
1015
+
1016
+ info.appendChild(title);
1017
+ info.appendChild(meta);
1018
+
1019
+ cardContent.appendChild(img);
1020
+ cardContent.appendChild(qualityBadge);
1021
+ cardContent.appendChild(overlay);
1022
+ cardContent.appendChild(info);
1023
+ cardContent.appendChild(playBtn);
1024
+
1025
+ card.appendChild(cardContent);
1026
+
1027
+ // Ajouter les écouteurs d'événements
1028
+ card.addEventListener('click', () => showMovieDetails(movie.id));
1029
+ playBtn.addEventListener('click', (e) => {
1030
+ e.stopPropagation();
1031
+ playMovie(movie.id, randomQuality);
1032
+ });
1033
+
1034
+ return card;
1035
+ }
1036
+
1037
+ // Afficher les détails d'un film
1038
+ async function showMovieDetails(movieId) {
1039
+ try {
1040
+ const response = await fetch(`${BASE_URL}/movie/${movieId}?api_key=${API_KEY}&language=${LANGUAGE}&append_to_response=credits`);
1041
+ const movie = await response.json();
1042
+
1043
+ currentMovieDetails = movie;
1044
+
1045
+ // Mettre à jour les détails dans le panneau
1046
+ document.getElementById('detail-poster').src = movie.poster_path ?
1047
+ `${IMAGE_BASE_URL}${movie.poster_path}` :
1048
+ 'https://via.placeholder.com/500x750?text=Aucune+affiche';
1049
+
1050
+ document.getElementById('detail-title').textContent = movie.title;
1051
+ document.getElementById('detail-year').textContent = movie.release_date ? movie.release_date.split('-')[0] : 'N/A';
1052
+ document.getElementById('detail-rating').innerHTML = `<i class="fas fa-star text-yellow-400 mr-1"></i> ${movie.vote_average.toFixed(1)}`;
1053
+ document.getElementById('detail-synopsis').textContent = movie.overview || 'Aucun synopsis disponible';
1054
+
1055
+ // Réalisateur
1056
+ const director = movie.credits.crew.find(person => person.job === 'Director');
1057
+ document.getElementById('detail-director').textContent = director ? director.name : 'Inconnu';
1058
+
1059
+ // Acteurs principaux (5 premiers)
1060
+ const actors = movie.credits.cast.slice(0, 5).map(actor => actor.name).join(', ');
1061
+ document.getElementById('detail-actors').textContent = actors || 'Inconnu';
1062
+
1063
+ // Genres
1064
+ const movieGenres = movie.genres.map(genre => genre.name).join(', ');
1065
+ document.getElementById('detail-genre').textContent = movieGenres || 'Inconnu';
1066
+
1067
+ // Durée
1068
+ document.getElementById('detail-duration').textContent = movie.runtime ? `${Math.floor(movie.runtime / 60)}h ${movie.runtime % 60}min` : 'Inconnue';
1069
+
1070
+ // Options de serveurs
1071
+ const serverPanel = document.getElementById('server-panel');
1072
+ serverPanel.innerHTML = '';
1073
+
1074
+ // Filtrer les serveurs appropriés pour ce film
1075
+ const availableServers = SERVERS.filter(server => {
1076
+ // Dans une vraie application, vous filtreriez selon les capacités réelles du serveur
1077
+ return true;
1078
+ });
1079
+
1080
+ // Trier les serveurs par pertinence
1081
+ availableServers.sort((a, b) => {
1082
+ // Prioriser les serveurs français
1083
+ if (a.country === 'fr' && b.country !== 'fr') return -1;
1084
+ if (b.country === 'fr' && a.country !== 'fr') return 1;
1085
+
1086
+ // Prioriser les serveurs premium
1087
+ if (a.type === 'premium' && b.type !== 'premium') return -1;
1088
+ if (b.type === 'premium' && a.type !== 'premium') return 1;
1089
+
1090
+ // Prioriser les serveurs rapides
1091
+ if (a.speed === 'very-high' && b.speed !== 'very-high') return -1;
1092
+ if (b.speed === 'very-high' && a.speed !== 'very-high') return 1;
1093
+ if (a.speed === 'high' && b.speed === 'medium') return -1;
1094
+ if (b.speed === 'high' && a.speed === 'medium') return 1;
1095
+
1096
+ return 0;
1097
+ });
1098
+
1099
+ // Afficher les serveurs disponibles
1100
+ availableServers.forEach((server, index) => {
1101
+ const serverCard = document.createElement('div');
1102
+ serverCard.className = `server-card p-3 rounded-lg cursor-pointer flex items-center justify-between ${index === 0 ? 'selected' : ''}`;
1103
+ serverCard.dataset.id = server.id;
1104
+
1105
+ const serverInfo = document.createElement('div');
1106
+ serverInfo.className = 'flex items-center';
1107
+
1108
+ const statusIndicator = document.createElement('span');
1109
+ statusIndicator.className = `server-status server-${server.status} mr-2`;
1110
+
1111
+ const serverName = document.createElement('span');
1112
+ serverName.textContent = server.name;
1113
+
1114
+ serverInfo.appendChild(statusIndicator);
1115
+ serverInfo.appendChild(serverName);
1116
+
1117
+ const serverDetails = document.createElement('div');
1118
+ serverDetails.className = 'flex items-center space-x-2';
1119
+
1120
+ const qualityBadge = document.createElement('span');
1121
+ qualityBadge.className = 'text-xs px-2 py-1 rounded-full bg-gray-800';
1122
+ qualityBadge.textContent = server.quality.includes('UHD') ? 'UHD' : 'HD';
1123
+
1124
+ const langBadge = document.createElement('span');
1125
+ langBadge.className = 'text-xs px-2 py-1 rounded-full bg-gray-800';
1126
+ langBadge.textContent = server.languages.includes('fr') ? 'FR' : server.languages.includes('vostfr') ? 'VOSTFR' : 'EN';
1127
+
1128
+ serverDetails.appendChild(qualityBadge);
1129
+ serverDetails.appendChild(langBadge);
1130
+
1131
+ serverCard.appendChild(serverInfo);
1132
+ serverCard.appendChild(serverDetails);
1133
+
1134
+ serverCard.addEventListener('click', () => {
1135
+ document.querySelectorAll('.server-card').forEach(card => {
1136
+ card.classList.remove('selected');
1137
+ });
1138
+ serverCard.classList.add('selected');
1139
+ selectedServer = server;
1140
+ });
1141
+
1142
+ serverPanel.appendChild(serverCard);
1143
+ });
1144
+
1145
+ // Sélectionner le premier serveur par défaut
1146
+ if (availableServers.length > 0) {
1147
+ selectedServer = availableServers[0];
1148
+ }
1149
+
1150
+ // Afficher le panneau de détails
1151
+ const movieDetails = document.getElementById('movie-details');
1152
+ movieDetails.classList.remove('translate-x-full');
1153
+ movieDetails.classList.add('translate-x-0');
1154
+ } catch (error) {
1155
+ console.error('Erreur lors du chargement des détails du film:', error);
1156
+ }
1157
+ }
1158
+
1159
+ // Jouer un film
1160
+ async function playMovie(movieId, quality = 'HD') {
1161
+ try {
1162
+ // Afficher le lecteur
1163
+ const playerSection = document.getElementById('player-section');
1164
+ playerSection.classList.remove('hidden');
1165
+
1166
+ // Mettre à jour les informations du film en cours de lecture
1167
+ const movie = currentMovies.find(m => m.id == movieId) || currentMovieDetails;
1168
+
1169
+ document.getElementById('now-playing-title').textContent = movie.title;
1170
+ document.getElementById('now-playing-quality').textContent = `Lecture en ${quality} - ${movie.release_date ? movie.release_date.split('-')[0] : ''}`;
1171
+
1172
+ // Simuler une URL de streaming basée sur le serveur sélectionné
1173
+ let videoId;
1174
+ if (selectedServer) {
1175
+ // Dans une vraie application, vous utiliseriez l'API du serveur sélectionné
1176
+ videoId = getYouTubeVideoId(movie.title, selectedServer);
1177
+ } else {
1178
+ // Utiliser un serveur par défaut si aucun n'est sélectionné
1179
+ videoId = getYouTubeVideoId(movie.title);
1180
+ }
1181
+
1182
+ // Charger la vidéo YouTube
1183
+ youtubePlayer.loadVideoById({
1184
+ videoId: videoId,
1185
+ suggestedQuality: quality === 'UHD' ? 'highres' : 'hd720'
1186
+ });
1187
+
1188
+ // Faire défiler jusqu'au lecteur
1189
+ playerSection.scrollIntoView({ behavior: 'smooth' });
1190
+
1191
+ // Masquer les détails du film s'ils sont ouverts
1192
+ document.getElementById('movie-details').classList.add('translate-x-full');
1193
+
1194
+ // Démarrer le compte à rebours pour l'autoplay
1195
+ startAutoplayCountdown();
1196
+ } catch (error) {
1197
+ console.error('Erreur lors de la lecture du film:', error);
1198
+ alert('Erreur lors du chargement du film. Veuillez réessayer.');
1199
+ }
1200
+ }
1201
+
1202
+ // Simuler un ID YouTube basé sur le titre du film et le serveur sélectionné
1203
+ function getYouTubeVideoId(title, server = null) {
1204
+ // Dans une vraie application, vous feriez une recherche via l'API du serveur
1205
+ // Ceci est une simulation avec des vidéos publiques connues
1206
+
1207
+ const demoVideos = {
1208
+ 'Inception': 'YoHD9XIncD8',
1209
+ 'The Dark Knight': 'EXeTwQWrcwY',
1210
+ 'Interstellar': 'zSWdZVtXT7E',
1211
+ 'The Shawshank Redemption': '6hB3S9bIaco',
1212
+ 'Pulp Fiction': 's7EdQ4FqbhY',
1213
+ 'The Godfather': 'sY1S34973zA',
1214
+ 'Fight Club': 'qtRKdVHc-cE',
1215
+ 'Forrest Gump': 'bLvqoHBptjg',
1216
+ 'The Matrix': 'm8e-FF8MsqU',
1217
+ 'Léon': 'aNQqoExfQsg',
1218
+ 'Amélie': 'sECzJY07oK4',
1219
+ 'Intouchables': '34WIbmXkewU'
1220
+ };
1221
+
1222
+ // Si un serveur français est sélectionné, prioriser les films français
1223
+ if (server && server.country === 'fr') {
1224
+ const frenchMovies = {
1225
+ 'Léon': 'aNQqoExfQsg',
1226
+ 'Amélie': 'sECzJY07oK4',
1227
+ 'Intouchables': '34WIbmXkewU',
1228
+ 'Le Fabuleux Destin d\'Amélie Poulain': 'sECzJY07oK4',
1229
+ 'La Haine': 'yYqi9vc7RYY',
1230
+ 'Le Dîner de Cons': 'VKq9qNjQfQ0'
1231
+ };
1232
+
1233
+ for (const [key, value] of Object.entries(frenchMovies)) {
1234
+ if (title.toLowerCase().includes(key.toLowerCase())) {
1235
+ return value;
1236
+ }
1237
+ }
1238
+ }
1239
+
1240
+ // Trouver la correspondance la plus proche
1241
+ for (const [key, value] of Object.entries(demoVideos)) {
1242
+ if (title.toLowerCase().includes(key.toLowerCase())) {
1243
+ return value;
1244
+ }
1245
+ }
1246
+
1247
+ // Retourner une vidéo par défaut si aucune correspondance
1248
+ return 'dQw4w9WgXcQ'; // Rick Astley - Never Gonna Give You Up
1249
+ }
1250
+
1251
+ // Démarrer le compte à rebours pour l'autoplay
1252
+ function startAutoplayCountdown() {
1253
+ clearTimeout(autoplayTimeout);
1254
+
1255
+ const countdownElement = document.getElementById('countdown');
1256
+ const autoplayIndicator = document.getElementById('autoplay-indicator');
1257
+
1258
+ let seconds = 5;
1259
+ countdownElement.textContent = seconds;
1260
+ autoplayIndicator.classList.remove('hidden');
1261
+
1262
+ const interval = setInterval(() => {
1263
+ seconds--;
1264
+ countdownElement.textContent = seconds;
1265
+
1266
+ if (seconds <= 0) {
1267
+ clearInterval(interval);
1268
+ autoplayIndicator.classList.add('hidden');
1269
+ playNextMovie();
1270
+ }
1271
+ }, 1000);
1272
+ }
1273
+
1274
+ // Jouer le film suivant automatiquement
1275
+ function playNextMovie() {
1276
+ if (!currentMovies.length) return;
1277
+
1278
+ // Trouver l'index du film actuel
1279
+ const currentIndex = currentMovies.findIndex(m => m.id === currentMovieDetails?.id);
1280
+ let nextIndex = currentIndex + 1;
1281
+
1282
+ // Si c'est le dernier film, revenir au début
1283
+ if (nextIndex >= currentMovies.length) {
1284
+ nextIndex = 0;
1285
+ }
1286
+
1287
+ // Jouer le film suivant
1288
+ const nextMovie = currentMovies[nextIndex];
1289
+ const qualities = ['PM4', 'EMB', 'HD', 'UHD'];
1290
+ const randomQuality = qualities[Math.floor(Math.random() * qualities.length)];
1291
+
1292
+ playMovie(nextMovie.id, randomQuality);
1293
+ }
1294
+
1295
+ // Configurer les écouteurs d'événements
1296
+ function setupEventListeners() {
1297
+ // Navigation par catégorie
1298
+ document.querySelectorAll('[data-category]').forEach(btn => {
1299
+ btn.addEventListener('click', function() {
1300
+ currentCategory = this.dataset.category;
1301
+
1302
+ // Mettre à jour le style des boutons
1303
+ document.querySelectorAll('[data-category]').forEach(el => {
1304
+ if (el === this) {
1305
+ el.classList.remove('hover:bg-white', 'hover:bg-opacity-10');
1306
+ el.classList.add('bg-primary', 'text-black', 'font-medium');
1307
+ } else {
1308
+ el.classList.add('hover:bg-white', 'hover:bg-opacity-10');
1309
+ el.classList.remove('bg-primary', 'text-black', 'font-medium');
1310
+ }
1311
+ });
1312
+
1313
+ // Charger les films de cette catégorie
1314
+ loadMovies(currentCategory);
1315
+ });
1316
+ });
1317
+
1318
+ // Bouton de recherche
1319
+ document.getElementById('search-button').addEventListener('click', () => {
1320
+ const query = document.getElementById('search-input').value.trim();
1321
+ if (query) {
1322
+ loadMovies('', 1, query);
1323
+ }
1324
+ });
1325
+
1326
+ // Recherche lors de la pression sur Entrée
1327
+ document.getElementById('search-input').addEventListener('keypress', (e) => {
1328
+ if (e.key === 'Enter') {
1329
+ const query = document.getElementById('search-input').value.trim();
1330
+ if (query) {
1331
+ loadMovies('', 1, query);
1332
+ }
1333
+ }
1334
+ });
1335
+
1336
+ // Filtres
1337
+ document.getElementById('genre-filter').addEventListener('change', () => {
1338
+ loadMovies(currentCategory);
1339
+ });
1340
+
1341
+ document.getElementById('year-filter').addEventListener('change', () => {
1342
+ loadMovies(currentCategory);
1343
+ });
1344
+
1345
+ document.getElementById('quality-filter').addEventListener('change', () => {
1346
+ loadMovies(currentCategory);
1347
+ });
1348
+
1349
+ document.getElementById('language-filter').addEventListener('change', () => {
1350
+ loadMovies(currentCategory);
1351
+ });
1352
+
1353
+ // Film aléatoire
1354
+ document.getElementById('random-movie').addEventListener('click', async () => {
1355
+ try {
1356
+ // Charger une page aléatoire (1-500)
1357
+ const randomPage = Math.floor(Math.random() * 500) + 1;
1358
+ const response = await fetch(`${BASE_URL}/movie/popular?api_key=${API_KEY}&language=${LANGUAGE}&page=${randomPage}`);
1359
+ const data = await response.json();
1360
+
1361
+ if (data.results && data.results.length > 0) {
1362
+ // Choisir un film aléatoire
1363
+ const randomMovie = data.results[Math.floor(Math.random() * data.results.length)];
1364
+
1365
+ // Afficher les détails
1366
+ showMovieDetails(randomMovie.id);
1367
+ }
1368
+ } catch (error) {
1369
+ console.error('Erreur lors du chargement d\'un film aléatoire:', error);
1370
+ }
1371
+ });
1372
+
1373
+ // Bouton de lecture dans le panneau de détails
1374
+ document.getElementById('play-movie-btn').addEventListener('click', () => {
1375
+ if (currentMovieDetails) {
1376
+ const qualities = ['PM4', 'EMB', 'HD', 'UHD'];
1377
+ const randomQuality = qualities[Math.floor(Math.random() * qualities.length)];
1378
+ playMovie(currentMovieDetails.id, randomQuality);
1379
+ }
1380
+ });
1381
+
1382
+ // Contrôles du lecteur
1383
+ document.getElementById('play-button').addEventListener('click', () => {
1384
+ if (youtubePlayer.getPlayerState() === YT.PlayerState.PLAYING) {
1385
+ youtubePlayer.pauseVideo();
1386
+ document.getElementById('play-button').innerHTML = '<i class="fas fa-play text-primary"></i>';
1387
+ } else {
1388
+ youtubePlayer.playVideo();
1389
+ document.getElementById('play-button').innerHTML = '<i class="fas fa-pause text-primary"></i>';
1390
+ }
1391
+ });
1392
+
1393
+ document.getElementById('fullscreen-button').addEventListener('click', () => {
1394
+ youtubePlayer.getIframe().requestFullscreen();
1395
+ });
1396
+
1397
+ document.getElementById('settings-button').addEventListener('click', () => {
1398
+ alert('Paramètres du lecteur');
1399
+ });
1400
+
1401
+ document.getElementById('subtitles-button').addEventListener('click', () => {
1402
+ alert('Gestion des sous-titres');
1403
+ });
1404
+
1405
+ // Annuler l'autoplay si l'utilisateur interagit avec le lecteur
1406
+ document.getElementById('youtube-player').addEventListener('click', () => {
1407
+ clearTimeout(autoplayTimeout);
1408
+ document.getElementById('autoplay-indicator').classList.add('hidden');
1409
+ });
1410
+ }
1411
+ </script>
1412
+ <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/streamhubpro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1413
+ </html>
prompts.txt ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+ creer un tableaux de bord immense avec 978978574 films :Jeton d'accès en lecture à l'API eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmYjQzN2IxMDcyN2E1YTRlYjhkOTEzNGUyOWM4MmFlMCIsIm5iZiI6MTY4MDYzNzkxMC44NjUsInN1YiI6IjY0MmM3ZmQ2OGI5NTllMDBmNDRkNzNhMCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.Nhl261Ha3z0Ujg5vM1PpFoZBiTGjlXQ1g9VFPh6dVvs Clé d'API fb437b10727a5a4eb8d9134e29c82ae0 , avec les plus puissant des lecteur de films avec intégration des liens url part système robotisé le plus sophistiqué avec PM4 .EMB .HD ECT... avec version Français interfaces tres futuriste et tres animéé je veux pas de site d'exemple , je veux pas de site etc...
2
+ ajouté les server detecte url en automatique ,, je veux pas des url de d'exemple je veux pas des url de demonstration je veux les vrais url reel en automatique et afficher toutes les film en automatique
3
+ je veut les server autoplay robotisé en automatique avec les vrais et réél liens des film a regarder en autopilotage
4
+ ajouter 12 server sofistiqué robotiséé qui detect directement les liesn des films et demarre le lecteur automatique avec des servers version francais directement et d'autres version aussi