Spaces:
Running
Running
Add 2 files
Browse files- index.html +411 -401
- prompts.txt +3 -1
index.html
CHANGED
@@ -3,491 +3,501 @@
|
|
3 |
<head>
|
4 |
<meta charset="UTF-8">
|
5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6 |
-
<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 |
-
.gradient
|
11 |
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
|
12 |
}
|
13 |
.movie-card:hover {
|
14 |
transform: translateY(-5px);
|
15 |
-
box-shadow: 0 10px 25px -5px rgba(
|
16 |
}
|
17 |
-
.
|
18 |
-
|
19 |
}
|
20 |
-
.
|
21 |
-
|
22 |
}
|
23 |
-
|
24 |
-
|
25 |
-
100% { width: 100%; }
|
26 |
}
|
27 |
-
.
|
28 |
-
animation: pulse
|
29 |
}
|
30 |
@keyframes pulse {
|
31 |
-
0% { opacity: 0.6; }
|
32 |
50% { opacity: 1; }
|
33 |
-
100% { opacity: 0.6; }
|
34 |
}
|
35 |
</style>
|
36 |
</head>
|
37 |
-
<body class="gradient
|
38 |
-
<!-- Header
|
39 |
-
<header class="bg-
|
40 |
<div class="container mx-auto px-4 py-3">
|
41 |
<div class="flex justify-between items-center">
|
42 |
-
<div class="flex items-center space-x-
|
43 |
-
<div class="
|
44 |
-
<
|
45 |
-
|
46 |
-
|
47 |
-
|
48 |
-
<i class="fas fa-database mr-1"></i> AUTO-DB v4.2
|
49 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
50 |
</div>
|
51 |
|
52 |
<div class="flex items-center space-x-4">
|
53 |
-
<div class="
|
54 |
-
<
|
|
|
55 |
</div>
|
56 |
<div class="flex items-center space-x-2">
|
57 |
-
<div class="h-2 w-2 rounded-full bg-green-500
|
58 |
-
<span class="text-xs text-gray-400">
|
59 |
</div>
|
60 |
-
<button class="px-4 py-2 bg-gradient-to-r from-
|
61 |
-
<i class="fas fa-
|
62 |
</button>
|
63 |
</div>
|
64 |
</div>
|
65 |
</div>
|
66 |
</header>
|
67 |
|
68 |
-
<!--
|
69 |
-
<
|
70 |
-
<div class="
|
71 |
-
|
72 |
-
|
73 |
-
|
74 |
-
|
|
|
|
|
|
|
|
|
|
|
75 |
</div>
|
76 |
-
<
|
77 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
78 |
</div>
|
79 |
</div>
|
80 |
</div>
|
|
|
81 |
|
82 |
-
|
83 |
-
|
84 |
-
|
85 |
-
|
86 |
-
|
87 |
-
|
88 |
-
|
89 |
-
|
90 |
-
|
91 |
-
<
|
92 |
-
|
93 |
-
</select>
|
94 |
-
</div>
|
95 |
-
<div>
|
96 |
-
<label class="block text-sm text-gray-400 mb-1">Films par page</label>
|
97 |
-
<select id="perPage" class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-sm">
|
98 |
-
<option value="100">100</option>
|
99 |
-
<option value="500" selected>500</option>
|
100 |
-
<option value="1000">1 000</option>
|
101 |
-
<option value="5000">5 000</option>
|
102 |
-
</select>
|
103 |
</div>
|
104 |
-
|
105 |
-
|
106 |
-
|
107 |
-
|
108 |
-
|
109 |
-
|
110 |
-
|
111 |
-
</select>
|
112 |
</div>
|
113 |
-
<
|
114 |
-
|
115 |
-
<
|
116 |
-
|
117 |
-
<
|
118 |
-
|
119 |
-
|
120 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
121 |
</div>
|
122 |
<div>
|
123 |
-
<
|
124 |
-
<
|
125 |
-
|
126 |
-
</
|
127 |
</div>
|
128 |
</div>
|
129 |
</div>
|
130 |
|
131 |
-
<!--
|
132 |
-
<
|
133 |
-
<div class="
|
134 |
-
<
|
135 |
-
<
|
136 |
-
<i class="fas fa-server mr-2"></i> <span id="activeServers">72</span>
|
137 |
-
</div>
|
138 |
</div>
|
139 |
-
<div class="
|
140 |
-
|
141 |
-
<div class="text-2xl font-bold text-blue-400 flex items-center">
|
142 |
-
<i class="fas fa-film mr-2"></i> 8,542
|
143 |
-
</div>
|
144 |
</div>
|
145 |
-
|
146 |
-
|
147 |
-
|
148 |
-
|
149 |
-
</
|
|
|
150 |
</div>
|
151 |
-
<div class="
|
152 |
-
|
153 |
-
<div class="text-2xl font-bold text-yellow-400 flex items-center">
|
154 |
-
<i class="fas fa-bolt mr-2"></i> 42ms
|
155 |
-
</div>
|
156 |
</div>
|
157 |
-
</
|
158 |
|
159 |
-
|
160 |
-
|
161 |
-
|
162 |
-
|
163 |
</div>
|
164 |
-
<div class="
|
165 |
-
|
166 |
-
<i class="fas fa-circle-notch fa-spin mr-2"></i> Chargement automatique en cours...
|
167 |
-
</div>
|
168 |
</div>
|
169 |
-
</
|
170 |
-
</div>
|
171 |
|
172 |
-
|
173 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
174 |
<div class="container mx-auto px-4">
|
175 |
-
<div class="
|
176 |
-
<
|
177 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
178 |
</div>
|
179 |
</div>
|
180 |
</footer>
|
181 |
|
182 |
<script>
|
183 |
-
// Configuration
|
184 |
-
const
|
185 |
-
|
186 |
-
|
187 |
-
|
188 |
-
|
189 |
-
|
190 |
-
|
191 |
-
|
192 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
193 |
};
|
194 |
|
195 |
-
//
|
196 |
-
|
197 |
-
|
198 |
-
|
199 |
-
|
200 |
-
|
201 |
-
|
202 |
-
|
203 |
-
|
204 |
-
|
205 |
-
|
206 |
-
|
207 |
-
|
208 |
-
|
209 |
-
|
210 |
-
|
211 |
-
"https://cdn3.megastream.net",
|
212 |
-
"https://europe-server.megastream.pro",
|
213 |
-
"https://asia-cdn.megastream.live",
|
214 |
-
"https://us-west.streamhub.io",
|
215 |
-
"https://eu-central.videohost.net",
|
216 |
-
"https://asia-east.streamnode.com"
|
217 |
-
];
|
218 |
-
this.titlesPrefix = [
|
219 |
-
"Le", "La", "Les", "Le Secret de", "L'Histoire de", "Le Retour de",
|
220 |
-
"Le Dernier", "Le Grand", "La Guerre des", "Les Aventures de",
|
221 |
-
"Le Mystère de", "La Quête du", "Le Trésor de", "La Malédiction du",
|
222 |
-
"La Légende de", "Le Royaume des", "La Chute du", "L'Empire de"
|
223 |
-
];
|
224 |
-
this.titlesMain = [
|
225 |
-
"Temps", "Rêves", "Destin", "Pouvoir", "Royaume", "Étoiles",
|
226 |
-
"Océan", "Montagne", "Sorcier", "Guerrier", "Dragon", "Phénix",
|
227 |
-
"Légende", "Prophétie", "Trésor", "Malédiction", "Secret",
|
228 |
-
"Aventure", "Voyage", "Mystère", "Ennemi", "Allié", "Épée",
|
229 |
-
"Couronne", "Mirroir", "Portail", "Temple", "Pyramide", "Galaxie",
|
230 |
-
"Samouraï", "Chevalier", "Viking", "Espion", "Détective", "Pirate"
|
231 |
-
];
|
232 |
-
this.tmdbPosters = [
|
233 |
-
"8Vt6mWEReuy4Of61Lnj5Xj704m8", "8Gxv8gSFCU0XGDykEGv7zR1n2ua",
|
234 |
-
"seyWFgGInaLqW7nOZvu0ZD95Gin", "jRXYjXNq0Cs2TcJjLkki24MLp7u",
|
235 |
-
"jTrXwK56EoLHHsQaM6xzf6jQHxP", "uJYYizSuA9Y3DC0qDYYy0sh9U6E",
|
236 |
-
"udDclJoHjfjb8Ekgsd4FDteOkCU", "gEU2QniE6E77NI6lCU6MxlNBvIx",
|
237 |
-
"9gk7adHYeDvHkCSEqAvQNLV5Uge", "qJ2tW6WMUDux911r6m7haRef0WH",
|
238 |
-
"d5iIlFn5s0ImszYzBPb8JPIfbXD", "iVZ3JAzAeqkQIlQgj0jB6Q5GMyX",
|
239 |
-
"7WsyChQLEftFiDOVTGkvovghF1", "6XYLiMZHAQ3CRpkwT9f7wFQoOp",
|
240 |
-
"zq8Cl3PNMTkXGX8RW3beVjWXUx", "h8gHn0OzBoaefsYseUByqsmEDC",
|
241 |
-
"7RyHsO4yDXtBv1zUU3mTpHeQ0d5", "vZloFAK7NmvMGKE7VkF5UHaz0I"
|
242 |
-
];
|
243 |
-
this.languages = ["FR", "EN", "ES", "DE", "IT", "JA", "KO", "ZH", "RU"];
|
244 |
-
this.qualities = ["HD", "Full HD", "4K", "HDR", "Dolby Vision"];
|
245 |
-
this.audioTracks = ["Français", "Anglais", "Espagnol", "Allemand", "Japonais"];
|
246 |
-
this.subtitles = ["Français", "Anglais", "Espagnol", "Allemand", "Arabe", "Chinois"];
|
247 |
-
}
|
248 |
|
249 |
-
|
250 |
-
|
251 |
-
|
252 |
-
|
253 |
-
|
254 |
-
|
255 |
-
|
256 |
-
|
257 |
-
|
258 |
-
|
259 |
-
|
260 |
-
|
261 |
-
|
262 |
-
|
263 |
-
|
264 |
-
|
265 |
-
|
266 |
-
|
267 |
-
|
268 |
-
|
269 |
-
|
270 |
-
|
271 |
-
const subtitleCount = Math.floor(Math.random() * 5);
|
272 |
-
const subtitles = [];
|
273 |
-
for (let i = 0; i < subtitleCount; i++) {
|
274 |
-
const sub = this.subtitles[Math.floor(Math.random() * this.subtitles.length)];
|
275 |
-
if (!subtitles.includes(sub)) subtitles.push(sub);
|
276 |
-
}
|
277 |
-
|
278 |
-
return {
|
279 |
-
id: id,
|
280 |
-
title: title,
|
281 |
-
year: this.years[Math.floor(Math.random() * this.years.length)],
|
282 |
-
rating: this.ratings[Math.floor(Math.random() * this.ratings.length)],
|
283 |
-
duration: this.durations[Math.floor(Math.random() * this.durations.length)],
|
284 |
-
genres: genres,
|
285 |
-
poster: `https://image.tmdb.org/t/p/w500/${this.tmdbPosters[Math.floor(Math.random() * this.tmdbPosters.length)]}.jpg`,
|
286 |
-
server: this.servers[Math.floor(Math.random() * this.servers.length)],
|
287 |
-
views: Math.floor(Math.random() * 1000000),
|
288 |
-
language: language,
|
289 |
-
quality: quality,
|
290 |
-
audioTracks: audioTracks,
|
291 |
-
subtitles: subtitles,
|
292 |
-
addedDate: new Date(Date.now() - Math.floor(Math.random() * 1000 * 60 * 60 * 24 * 365 * 3)), // Dans les 3 dernières années
|
293 |
-
lastUpdated: new Date()
|
294 |
-
};
|
295 |
-
}
|
296 |
|
297 |
-
|
298 |
-
|
299 |
-
|
300 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
301 |
}
|
302 |
-
|
303 |
-
}
|
304 |
-
}
|
305 |
|
306 |
-
|
307 |
-
|
308 |
-
|
309 |
-
|
310 |
-
|
311 |
-
|
312 |
-
function updateCounters() {
|
313 |
-
document.getElementById('movieCount').textContent = autoSystemConfig.totalMovies.toLocaleString();
|
314 |
-
document.getElementById('totalMovies').textContent = autoSystemConfig.totalMovies.toLocaleString();
|
315 |
-
document.getElementById('activeServers').textContent = autoSystemConfig.activeServers;
|
316 |
-
document.getElementById('footerActiveServers').textContent = autoSystemConfig.activeServers;
|
317 |
-
|
318 |
-
// Mettre à jour la date de dernière mise à jour
|
319 |
-
const now = new Date();
|
320 |
-
const diff = Math.floor((now - autoSystemConfig.lastUpdate) / 1000);
|
321 |
-
|
322 |
-
if (diff < 60) {
|
323 |
-
document.getElementById('lastUpdate').textContent = "à l'instant";
|
324 |
-
} else if (diff < 3600) {
|
325 |
-
document.getElementById('lastUpdate').textContent = `il y a ${Math.floor(diff / 60)} min`;
|
326 |
-
} else if (diff < 86400) {
|
327 |
-
document.getElementById('lastUpdate').textContent = `il y a ${Math.floor(diff / 3600)} h`;
|
328 |
-
} else {
|
329 |
-
document.getElementById('lastUpdate').textContent = `le ${autoSystemConfig.lastUpdate.toLocaleDateString()}`;
|
330 |
-
}
|
331 |
}
|
332 |
|
333 |
-
//
|
334 |
-
function
|
335 |
const card = document.createElement('div');
|
336 |
-
card.className = 'movie-card bg-
|
337 |
card.innerHTML = `
|
338 |
<div class="relative">
|
339 |
-
<img src="${movie.
|
340 |
-
|
341 |
-
|
342 |
-
|
343 |
-
|
344 |
-
${movie.views.toLocaleString()} vues
|
345 |
</div>
|
346 |
-
<div class="absolute
|
347 |
-
|
348 |
-
|
349 |
-
|
350 |
-
|
351 |
-
|
|
|
|
|
|
|
|
|
352 |
</button>
|
353 |
</div>
|
354 |
</div>
|
355 |
-
<div class="p-3">
|
356 |
-
<h3 class="font-bold truncate">${movie.title}</h3>
|
357 |
-
<div class="flex justify-between text-sm text-gray-400 mt-1">
|
358 |
-
<span>${movie.year}</span>
|
359 |
-
<span>${movie.duration}</span>
|
360 |
-
</div>
|
361 |
-
<div class="flex flex-wrap gap-1 mt-2">
|
362 |
-
${movie.genres.map(genre => `<span class="text-xs bg-slate-700/50 text-gray-300 px-2 py-0.5 rounded-full">${genre}</span>`).join('')}
|
363 |
-
</div>
|
364 |
-
<div class="mt-2 flex items-center text-xs text-gray-400">
|
365 |
-
<i class="fas fa-language mr-1"></i> ${movie.language}
|
366 |
-
<span class="mx-2">|</span>
|
367 |
-
<i class="fas fa-headphones mr-1"></i> ${movie.audioTracks.length}
|
368 |
-
<span class="mx-2">|</span>
|
369 |
-
<i class="fas fa-closed-captioning mr-1"></i> ${movie.subtitles.length}
|
370 |
-
</div>
|
371 |
-
</div>
|
372 |
`;
|
373 |
-
card.addEventListener('click', () => playAutoMovie(movie.id));
|
374 |
-
return card;
|
375 |
-
}
|
376 |
|
377 |
-
|
378 |
-
|
379 |
-
|
380 |
-
currentMovies[Math.floor(Math.random() * currentMovies.length)];
|
381 |
-
|
382 |
-
const server = movie.server;
|
383 |
-
const quality = document.getElementById('quality').value;
|
384 |
-
const movieUrl = `${server}/watch/${movieId}?title=${encodeURIComponent(movie.title)}&year=${movie.year}&quality=${quality}`;
|
385 |
-
|
386 |
-
// Ouvrir dans une nouvelle fenêtre avec des paramètres de sécurité
|
387 |
-
const features = 'width=1280,height=720,menubar=no,toolbar=no,location=no,resizable=yes,scrollbars=yes';
|
388 |
-
window.open(movieUrl, '_blank', features);
|
389 |
-
|
390 |
-
// Enregistrer la vue dans le système (simulé)
|
391 |
-
movie.views++;
|
392 |
-
console.log(`Film #${movieId} "${movie.title}" joué depuis ${server} en ${quality}`);
|
393 |
}
|
394 |
|
395 |
-
//
|
396 |
-
function
|
397 |
-
|
398 |
-
|
399 |
-
|
400 |
-
|
401 |
-
|
402 |
-
|
403 |
-
|
404 |
|
405 |
-
//
|
406 |
-
|
407 |
-
|
408 |
-
|
409 |
-
|
410 |
-
|
411 |
-
|
412 |
-
|
413 |
-
|
414 |
-
if (autoSystemConfig.currentPage === 1) {
|
415 |
-
movieGrid.innerHTML = '';
|
416 |
-
}
|
417 |
-
|
418 |
-
// Simuler la génération de films par lots
|
419 |
-
const loadBatch = () => {
|
420 |
-
const batchSize = 50;
|
421 |
-
const end = Math.min(loaded + batchSize, totalToLoad);
|
422 |
-
|
423 |
-
// Générer un lot de films
|
424 |
-
const newMovies = autoDB.generateBatch(startId + loaded, end - loaded);
|
425 |
-
currentMovies = currentMovies.concat(newMovies);
|
426 |
-
|
427 |
-
// Ajouter les films à la grille
|
428 |
-
newMovies.forEach(movie => {
|
429 |
-
movieGrid.appendChild(createAutoMovieCard(movie));
|
430 |
-
});
|
431 |
-
|
432 |
-
// Mettre à jour les compteurs
|
433 |
-
loaded = end;
|
434 |
-
loadedCount.textContent = (autoSystemConfig.currentPage - 1) * autoSystemConfig.moviesPerPage + loaded;
|
435 |
-
totalLoaded.textContent = (autoSystemConfig.currentPage - 1) * autoSystemConfig.moviesPerPage + loaded;
|
436 |
-
|
437 |
-
// Continuer ou terminer le chargement
|
438 |
-
if (loaded < totalToLoad) {
|
439 |
-
setTimeout(loadBatch, autoSystemConfig.loadingSpeed);
|
440 |
-
} else {
|
441 |
-
isLoading = false;
|
442 |
-
loadingMore.style.display = 'none';
|
443 |
-
autoSystemConfig.currentPage++;
|
444 |
-
|
445 |
-
// Mettre à jour la date de dernière mise à jour
|
446 |
-
autoSystemConfig.lastUpdate = new Date();
|
447 |
-
updateCounters();
|
448 |
-
|
449 |
-
// Configurer le chargement automatique au scroll
|
450 |
-
setupAutoScroll();
|
451 |
}
|
452 |
-
};
|
|
|
|
|
|
|
|
|
453 |
|
454 |
-
//
|
455 |
-
|
456 |
}
|
457 |
|
458 |
-
//
|
459 |
-
function
|
460 |
-
|
461 |
-
const
|
462 |
-
|
463 |
-
|
464 |
-
|
465 |
-
|
466 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
467 |
}
|
468 |
-
|
469 |
-
// Initialisation du système
|
470 |
-
document.addEventListener('DOMContentLoaded', () => {
|
471 |
-
updateCounters();
|
472 |
-
|
473 |
-
// Configurer le bouton de génération
|
474 |
-
document.getElementById('generateBtn').addEventListener('click', () => {
|
475 |
-
autoSystemConfig.moviesPerPage = parseInt(document.getElementById('perPage').value);
|
476 |
-
autoSystemConfig.currentPage = 1;
|
477 |
-
currentMovies = [];
|
478 |
-
loadAutoMovies();
|
479 |
-
});
|
480 |
-
|
481 |
-
// Démarrer le chargement automatique
|
482 |
-
loadAutoMovies();
|
483 |
-
|
484 |
-
// Simuler des mises à jour périodiques de la base de données
|
485 |
-
setInterval(() => {
|
486 |
-
autoSystemConfig.totalMovies += Math.floor(Math.random() * 100);
|
487 |
-
autoSystemConfig.activeServers = 72 + Math.floor(Math.random() * 5) - 2;
|
488 |
-
updateCounters();
|
489 |
-
}, 60000); // Toutes les minutes
|
490 |
-
});
|
491 |
</script>
|
492 |
<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/mega-academy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
493 |
</html>
|
|
|
3 |
<head>
|
4 |
<meta charset="UTF-8">
|
5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6 |
+
<title>CineVerse - Plateforme de Streaming Premium</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 |
+
.dark-gradient {
|
11 |
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
|
12 |
}
|
13 |
.movie-card:hover {
|
14 |
transform: translateY(-5px);
|
15 |
+
box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.3);
|
16 |
}
|
17 |
+
.player-container {
|
18 |
+
aspect-ratio: 16/9;
|
19 |
}
|
20 |
+
.blur-effect {
|
21 |
+
backdrop-filter: blur(10px);
|
22 |
}
|
23 |
+
.genre-chip:hover {
|
24 |
+
transform: scale(1.05);
|
|
|
25 |
}
|
26 |
+
.loading-pulse {
|
27 |
+
animation: pulse 1.5s infinite;
|
28 |
}
|
29 |
@keyframes pulse {
|
30 |
+
0%, 100% { opacity: 0.6; }
|
31 |
50% { opacity: 1; }
|
|
|
32 |
}
|
33 |
</style>
|
34 |
</head>
|
35 |
+
<body class="dark-gradient min-h-screen text-gray-100">
|
36 |
+
<!-- Header -->
|
37 |
+
<header class="bg-gray-900/80 border-b border-gray-800 sticky top-0 z-50 blur-effect">
|
38 |
<div class="container mx-auto px-4 py-3">
|
39 |
<div class="flex justify-between items-center">
|
40 |
+
<div class="flex items-center space-x-4">
|
41 |
+
<div class="flex items-center">
|
42 |
+
<div class="h-10 w-10 bg-indigo-600 rounded-lg flex items-center justify-center mr-3">
|
43 |
+
<i class="fas fa-film text-white"></i>
|
44 |
+
</div>
|
45 |
+
<h1 class="text-2xl font-bold bg-gradient-to-r from-indigo-400 to-purple-500 bg-clip-text text-transparent">CineVerse</h1>
|
|
|
46 |
</div>
|
47 |
+
<nav class="hidden md:flex space-x-6">
|
48 |
+
<a href="#" class="text-indigo-400 font-medium">Accueil</a>
|
49 |
+
<a href="#" class="hover:text-indigo-400 transition">Films</a>
|
50 |
+
<a href="#" class="hover:text-indigo-400 transition">Séries</a>
|
51 |
+
<a href="#" class="hover:text-indigo-400 transition">Nouveautés</a>
|
52 |
+
<a href="#" class="hover:text-indigo-400 transition">Ma liste</a>
|
53 |
+
</nav>
|
54 |
</div>
|
55 |
|
56 |
<div class="flex items-center space-x-4">
|
57 |
+
<div class="relative hidden md:block">
|
58 |
+
<input type="text" placeholder="Rechercher..." class="bg-gray-800/70 border border-gray-700 rounded-full py-2 px-4 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 w-64">
|
59 |
+
<i class="fas fa-search absolute left-3 top-2.5 text-gray-500"></i>
|
60 |
</div>
|
61 |
<div class="flex items-center space-x-2">
|
62 |
+
<div class="h-2 w-2 rounded-full bg-green-500 loading-pulse"></div>
|
63 |
+
<span class="text-xs text-gray-400 hidden sm:inline">Serveurs: <span class="text-green-400">12 actifs</span></span>
|
64 |
</div>
|
65 |
+
<button class="px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 rounded-lg text-sm font-medium">
|
66 |
+
<i class="fas fa-crown mr-1"></i> Premium
|
67 |
</button>
|
68 |
</div>
|
69 |
</div>
|
70 |
</div>
|
71 |
</header>
|
72 |
|
73 |
+
<!-- Hero Section -->
|
74 |
+
<section class="relative h-96 md:h-screen max-h-[700px] overflow-hidden">
|
75 |
+
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/90 via-gray-900/30 to-transparent z-10"></div>
|
76 |
+
<img src="https://image.tmdb.org/t/p/original/8GnWDLn2A7mnFUs0iqAWjqAM9lX.jpg" alt="Hero Banner" class="w-full h-full object-cover">
|
77 |
+
|
78 |
+
<div class="absolute bottom-0 left-0 z-20 p-8 md:p-16 w-full">
|
79 |
+
<div class="container mx-auto">
|
80 |
+
<h2 class="text-3xl md:text-5xl font-bold mb-4">Dernier Film Ajouté</h2>
|
81 |
+
<div class="flex items-center space-x-4 mb-4">
|
82 |
+
<span class="bg-indigo-600 text-white px-3 py-1 rounded-full text-sm">2023</span>
|
83 |
+
<span class="bg-yellow-500 text-yellow-900 px-3 py-1 rounded-full text-sm">8.4/10</span>
|
84 |
+
<span class="bg-green-500 text-green-900 px-3 py-1 rounded-full text-sm">4K HDR</span>
|
85 |
</div>
|
86 |
+
<p class="text-gray-300 mb-6 max-w-2xl">Un film captivant avec une histoire palpitante et des effets spéciaux à couper le souffle. Disponible maintenant en streaming exclusif.</p>
|
87 |
+
<div class="flex space-x-4">
|
88 |
+
<button class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 rounded-lg font-medium flex items-center">
|
89 |
+
<i class="fas fa-play mr-2"></i> Regarder
|
90 |
+
</button>
|
91 |
+
<button class="px-6 py-3 bg-gray-800/70 hover:bg-gray-700/70 rounded-lg font-medium flex items-center">
|
92 |
+
<i class="fas fa-info-circle mr-2"></i> Plus d'infos
|
93 |
+
</button>
|
94 |
</div>
|
95 |
</div>
|
96 |
</div>
|
97 |
+
</section>
|
98 |
|
99 |
+
<!-- Main Content -->
|
100 |
+
<main class="container mx-auto px-4 py-8">
|
101 |
+
<!-- Streaming Player (hidden by default) -->
|
102 |
+
<div id="moviePlayer" class="hidden mb-12 bg-gray-900 rounded-xl overflow-hidden shadow-2xl">
|
103 |
+
<div class="player-container w-full bg-black relative">
|
104 |
+
<iframe id="streamFrame" class="w-full h-full" frameborder="0" allowfullscreen allow="autoplay"></iframe>
|
105 |
+
<div class="absolute top-0 left-0 right-0 bg-gradient-to-b from-black/70 to-transparent p-4 flex justify-between items-center">
|
106 |
+
<h3 id="playerTitle" class="text-xl font-bold truncate max-w-xs md:max-w-md">Titre du Film</h3>
|
107 |
+
<button id="closePlayer" class="bg-red-600 hover:bg-red-700 text-white p-2 rounded-full">
|
108 |
+
<i class="fas fa-times"></i>
|
109 |
+
</button>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
110 |
</div>
|
111 |
+
</div>
|
112 |
+
<div class="p-6 bg-gray-800">
|
113 |
+
<div class="flex flex-wrap gap-3 mb-4">
|
114 |
+
<span id="playerYear" class="text-sm bg-blue-600 px-3 py-1 rounded-full">2023</span>
|
115 |
+
<span id="playerRating" class="text-sm bg-yellow-600 px-3 py-1 rounded-full">8.4/10</span>
|
116 |
+
<span id="playerQuality" class="text-sm bg-green-600 px-3 py-1 rounded-full">4K HDR</span>
|
117 |
+
<span id="playerDuration" class="text-sm bg-purple-600 px-3 py-1 rounded-full">2h 15m</span>
|
|
|
118 |
</div>
|
119 |
+
<p id="playerOverview" class="text-gray-300 mb-6">Description du film qui donne envie de regarder immédiatement avec tous les détails importants.</p>
|
120 |
+
<div class="mb-6">
|
121 |
+
<h4 class="font-bold mb-3 text-gray-400">Serveurs Disponibles</h4>
|
122 |
+
<div class="flex flex-wrap gap-3" id="serverList">
|
123 |
+
<button class="server-btn px-4 py-2 bg-gray-700 hover:bg-indigo-600 rounded-lg text-sm" data-server="vidsrc">
|
124 |
+
<i class="fas fa-server mr-1"></i> VidSrc (HD)
|
125 |
+
</button>
|
126 |
+
<button class="server-btn px-4 py-2 bg-gray-700 hover:bg-indigo-600 rounded-lg text-sm" data-server="superembed">
|
127 |
+
<i class="fas fa-server mr-1"></i> SuperEmbed (4K)
|
128 |
+
</button>
|
129 |
+
<button class="server-btn px-4 py-2 bg-gray-700 hover:bg-indigo-600 rounded-lg text-sm" data-server="vidsrcnet">
|
130 |
+
<i class="fas fa-server mr-1"></i> VidSrcNet (Multi-lang)
|
131 |
+
</button>
|
132 |
+
</div>
|
133 |
</div>
|
134 |
<div>
|
135 |
+
<h4 class="font-bold mb-3 text-gray-400">Genres</h4>
|
136 |
+
<div class="flex flex-wrap gap-2" id="playerGenres">
|
137 |
+
<!-- Filled by JavaScript -->
|
138 |
+
</div>
|
139 |
</div>
|
140 |
</div>
|
141 |
</div>
|
142 |
|
143 |
+
<!-- Content Sections -->
|
144 |
+
<section class="mb-12">
|
145 |
+
<div class="flex justify-between items-center mb-6">
|
146 |
+
<h2 class="text-2xl font-bold">Tendances du Moment</h2>
|
147 |
+
<a href="#" class="text-indigo-400 text-sm hover:underline">Voir plus</a>
|
|
|
|
|
148 |
</div>
|
149 |
+
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4" id="trendingMovies">
|
150 |
+
<!-- Filled by JavaScript -->
|
|
|
|
|
|
|
151 |
</div>
|
152 |
+
</section>
|
153 |
+
|
154 |
+
<section class="mb-12">
|
155 |
+
<div class="flex justify-between items-center mb-6">
|
156 |
+
<h2 class="text-2xl font-bold">Nouveaux Films Ajoutés</h2>
|
157 |
+
<a href="#" class="text-indigo-400 text-sm hover:underline">Voir plus</a>
|
158 |
</div>
|
159 |
+
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4" id="newMovies">
|
160 |
+
<!-- Filled by JavaScript -->
|
|
|
|
|
|
|
161 |
</div>
|
162 |
+
</section>
|
163 |
|
164 |
+
<section class="mb-12">
|
165 |
+
<div class="flex justify-between items-center mb-6">
|
166 |
+
<h2 class="text-2xl font-bold">Top Films 2023</h2>
|
167 |
+
<a href="#" class="text-indigo-400 text-sm hover:underline">Voir plus</a>
|
168 |
</div>
|
169 |
+
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4" id="topMovies">
|
170 |
+
<!-- Filled by JavaScript -->
|
|
|
|
|
171 |
</div>
|
172 |
+
</section>
|
|
|
173 |
|
174 |
+
<!-- Server Status -->
|
175 |
+
<section class="bg-gray-800/50 rounded-xl p-6 mb-12">
|
176 |
+
<h2 class="text-2xl font-bold mb-6">Statut des Serveurs</h2>
|
177 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4" id="serverStatus">
|
178 |
+
<!-- Filled by JavaScript -->
|
179 |
+
</div>
|
180 |
+
</section>
|
181 |
+
</main>
|
182 |
+
|
183 |
+
<!-- Footer -->
|
184 |
+
<footer class="bg-gray-900/80 border-t border-gray-800 py-12">
|
185 |
<div class="container mx-auto px-4">
|
186 |
+
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
187 |
+
<div>
|
188 |
+
<h3 class="text-xl font-bold mb-4 flex items-center">
|
189 |
+
<div class="h-8 w-8 bg-indigo-600 rounded-lg flex items-center justify-center mr-2">
|
190 |
+
<i class="fas fa-film text-white"></i>
|
191 |
+
</div>
|
192 |
+
CineVerse
|
193 |
+
</h3>
|
194 |
+
<p class="text-gray-400 text-sm">La plateforme de streaming premium avec le plus grand catalogue de films et séries en qualité HD/4K.</p>
|
195 |
+
</div>
|
196 |
+
<div>
|
197 |
+
<h4 class="font-bold mb-4 text-gray-300">Navigation</h4>
|
198 |
+
<ul class="space-y-2">
|
199 |
+
<li><a href="#" class="text-gray-400 hover:text-indigo-400 transition">Accueil</a></li>
|
200 |
+
<li><a href="#" class="text-gray-400 hover:text-indigo-400 transition">Films</a></li>
|
201 |
+
<li><a href="#" class="text-gray-400 hover:text-indigo-400 transition">Séries</a></li>
|
202 |
+
<li><a href="#" class="text-gray-400 hover:text-indigo-400 transition">Nouveautés</a></li>
|
203 |
+
<li><a href="#" class="text-gray-400 hover:text-indigo-400 transition">Ma liste</a></li>
|
204 |
+
</ul>
|
205 |
+
</div>
|
206 |
+
<div>
|
207 |
+
<h4 class="font-bold mb-4 text-gray-300">Informations</h4>
|
208 |
+
<ul class="space-y-2">
|
209 |
+
<li><a href="#" class="text-gray-400 hover:text-indigo-400 transition">À propos</a></li>
|
210 |
+
<li><a href="#" class="text-gray-400 hover:text-indigo-400 transition">FAQ</a></li>
|
211 |
+
<li><a href="#" class="text-gray-400 hover:text-indigo-400 transition">Serveurs</a></li>
|
212 |
+
<li><a href="#" class="text-gray-400 hover:text-indigo-400 transition">Contact</a></li>
|
213 |
+
<li><a href="#" class="text-gray-400 hover:text-indigo-400 transition">CGU</a></li>
|
214 |
+
</ul>
|
215 |
+
</div>
|
216 |
+
<div>
|
217 |
+
<h4 class="font-bold mb-4 text-gray-300">Réseaux Sociaux</h4>
|
218 |
+
<div class="flex space-x-4">
|
219 |
+
<a href="#" class="h-10 w-10 bg-gray-700 hover:bg-blue-600 rounded-full flex items-center justify-center">
|
220 |
+
<i class="fab fa-facebook-f"></i>
|
221 |
+
</a>
|
222 |
+
<a href="#" class="h-10 w-10 bg-gray-700 hover:bg-pink-600 rounded-full flex items-center justify-center">
|
223 |
+
<i class="fab fa-instagram"></i>
|
224 |
+
</a>
|
225 |
+
<a href="#" class="h-10 w-10 bg-gray-700 hover:bg-blue-400 rounded-full flex items-center justify-center">
|
226 |
+
<i class="fab fa-twitter"></i>
|
227 |
+
</a>
|
228 |
+
<a href="#" class="h-10 w-10 bg-gray-700 hover:bg-red-600 rounded-full flex items-center justify-center">
|
229 |
+
<i class="fab fa-youtube"></i>
|
230 |
+
</a>
|
231 |
+
</div>
|
232 |
+
<div class="mt-6">
|
233 |
+
<h5 class="font-bold mb-2 text-gray-300">Abonnez-vous à notre newsletter</h5>
|
234 |
+
<div class="flex">
|
235 |
+
<input type="email" placeholder="Votre email" class="bg-gray-700 text-white px-4 py-2 rounded-l-lg focus:outline-none focus:ring-1 focus:ring-indigo-500 w-full">
|
236 |
+
<button class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-r-lg">
|
237 |
+
<i class="fas fa-paper-plane"></i>
|
238 |
+
</button>
|
239 |
+
</div>
|
240 |
+
</div>
|
241 |
+
</div>
|
242 |
+
</div>
|
243 |
+
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
|
244 |
+
<p>© 2023 CineVerse. Tous droits réservés. Ce site utilise l'API TMDB mais n'est pas affilié à TMDB.</p>
|
245 |
+
<p class="mt-2">Serveurs: VidSrc, SuperEmbed, VidSrcNet, VidSrc.to</p>
|
246 |
</div>
|
247 |
</div>
|
248 |
</footer>
|
249 |
|
250 |
<script>
|
251 |
+
// Configuration
|
252 |
+
const config = {
|
253 |
+
tmdbApiKey: '8a9dc81b4d94cbe6a5a6e0c3e7a9a8e4', // Public TMDB API key (limited)
|
254 |
+
tmdbBaseUrl: 'https://api.themoviedb.org/3',
|
255 |
+
streamingServers: {
|
256 |
+
vidsrc: {
|
257 |
+
name: "VidSrc",
|
258 |
+
url: "https://vidsrc.me/embed/{tmdb_id}",
|
259 |
+
quality: "HD",
|
260 |
+
languages: ["fr", "en"],
|
261 |
+
status: "online"
|
262 |
+
},
|
263 |
+
superembed: {
|
264 |
+
name: "SuperEmbed",
|
265 |
+
url: "https://multiembed.mov/?video_id={tmdb_id}&tmdb=1",
|
266 |
+
quality: "4K",
|
267 |
+
languages: ["fr", "en", "es"],
|
268 |
+
status: "online"
|
269 |
+
},
|
270 |
+
vidsrcnet: {
|
271 |
+
name: "VidSrcNet",
|
272 |
+
url: "https://vidsrc.net/embed/{tmdb_id}",
|
273 |
+
quality: "HD",
|
274 |
+
languages: ["fr", "en", "es", "de"],
|
275 |
+
status: "online"
|
276 |
+
},
|
277 |
+
vidsrcto: {
|
278 |
+
name: "VidSrc.to",
|
279 |
+
url: "https://vidsrc.to/embed/movie/{tmdb_id}",
|
280 |
+
quality: "HD",
|
281 |
+
languages: ["fr", "en"],
|
282 |
+
status: "online"
|
283 |
+
}
|
284 |
+
},
|
285 |
+
genres: [
|
286 |
+
{id: 28, name: "Action"},
|
287 |
+
{id: 12, name: "Aventure"},
|
288 |
+
{id: 16, name: "Animation"},
|
289 |
+
{id: 35, name: "Comédie"},
|
290 |
+
{id: 80, name: "Crime"},
|
291 |
+
{id: 18, name: "Drame"},
|
292 |
+
{id: 10751, name: "Familial"},
|
293 |
+
{id: 14, name: "Fantastique"},
|
294 |
+
{id: 36, name: "Histoire"},
|
295 |
+
{id: 27, name: "Horreur"},
|
296 |
+
{id: 10402, name: "Musique"},
|
297 |
+
{id: 9648, name: "Mystère"},
|
298 |
+
{id: 10749, name: "Romance"},
|
299 |
+
{id: 878, name: "Science-Fiction"},
|
300 |
+
{id: 10770, name: "Téléfilm"},
|
301 |
+
{id: 53, name: "Thriller"},
|
302 |
+
{id: 10752, name: "Guerre"},
|
303 |
+
{id: 37, name: "Western"}
|
304 |
+
]
|
305 |
};
|
306 |
|
307 |
+
// DOM Elements
|
308 |
+
const moviePlayer = document.getElementById('moviePlayer');
|
309 |
+
const streamFrame = document.getElementById('streamFrame');
|
310 |
+
const closePlayer = document.getElementById('closePlayer');
|
311 |
+
const playerTitle = document.getElementById('playerTitle');
|
312 |
+
const playerYear = document.getElementById('playerYear');
|
313 |
+
const playerRating = document.getElementById('playerRating');
|
314 |
+
const playerQuality = document.getElementById('playerQuality');
|
315 |
+
const playerDuration = document.getElementById('playerDuration');
|
316 |
+
const playerOverview = document.getElementById('playerOverview');
|
317 |
+
const playerGenres = document.getElementById('playerGenres');
|
318 |
+
const serverList = document.getElementById('serverList');
|
319 |
+
const trendingMovies = document.getElementById('trendingMovies');
|
320 |
+
const newMovies = document.getElementById('newMovies');
|
321 |
+
const topMovies = document.getElementById('topMovies');
|
322 |
+
const serverStatus = document.getElementById('serverStatus');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
323 |
|
324 |
+
// Initialize the app
|
325 |
+
document.addEventListener('DOMContentLoaded', () => {
|
326 |
+
// Load sample data (in a real app, you would fetch from API)
|
327 |
+
loadSampleMovies();
|
328 |
+
renderServerStatus();
|
329 |
+
|
330 |
+
// Close player event
|
331 |
+
closePlayer.addEventListener('click', () => {
|
332 |
+
moviePlayer.classList.add('hidden');
|
333 |
+
streamFrame.src = '';
|
334 |
+
});
|
335 |
+
|
336 |
+
// Server button events
|
337 |
+
document.querySelectorAll('.server-btn').forEach(btn => {
|
338 |
+
btn.addEventListener('click', function() {
|
339 |
+
const server = this.dataset.server;
|
340 |
+
// In a real app, you would change the stream source here
|
341 |
+
alert(`Changement vers le serveur: ${server}`);
|
342 |
+
});
|
343 |
+
});
|
344 |
+
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
345 |
|
346 |
+
// Load sample movies
|
347 |
+
function loadSampleMovies() {
|
348 |
+
const sampleMovies = [
|
349 |
+
{
|
350 |
+
id: 569094,
|
351 |
+
title: "Spider-Man: Across the Spider-Verse",
|
352 |
+
poster_path: "/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg",
|
353 |
+
vote_average: 8.4,
|
354 |
+
release_date: "2023-06-02",
|
355 |
+
genre_ids: [16, 28, 12, 878],
|
356 |
+
overview: "Miles Morales revient pour une nouvelle aventure époustouflante dans le Spider-Verse."
|
357 |
+
},
|
358 |
+
{
|
359 |
+
id: 385687,
|
360 |
+
title: "Fast X",
|
361 |
+
poster_path: "/fiVW06jE7z9YnO4trhaMEdclSiC.jpg",
|
362 |
+
vote_average: 7.3,
|
363 |
+
release_date: "2023-05-19",
|
364 |
+
genre_ids: [28, 80, 53],
|
365 |
+
overview: "La famille Dom Toretto affronte son ennemi le plus redoutable dans ce nouveau chapitre."
|
366 |
+
},
|
367 |
+
{
|
368 |
+
id: 447365,
|
369 |
+
title: "Guardians of the Galaxy Vol. 3",
|
370 |
+
poster_path: "/r2J02Z2OpNTctfOSN1Ydgii51I3.jpg",
|
371 |
+
vote_average: 8.1,
|
372 |
+
release_date: "2023-05-05",
|
373 |
+
genre_ids: [12, 28, 878],
|
374 |
+
overview: "Les Gardiens de la Galaxie doivent protéger l'un des leurs dans cette aventure émouvante."
|
375 |
+
},
|
376 |
+
{
|
377 |
+
id: 502356,
|
378 |
+
title: "The Super Mario Bros. Movie",
|
379 |
+
poster_path: "/qNBAXBIQlnOThrVvA6mA2B5ggV6.jpg",
|
380 |
+
vote_average: 7.8,
|
381 |
+
release_date: "2023-04-05",
|
382 |
+
genre_ids: [16, 12, 10751, 14, 35],
|
383 |
+
overview: "L'aventure animée de Mario et Luigi dans le Royaume Champignon."
|
384 |
+
},
|
385 |
+
{
|
386 |
+
id: 667538,
|
387 |
+
title: "Transformers: Rise of the Beasts",
|
388 |
+
poster_path: "/gPbM0MKgbAKbxA88b00BE2V98lz.jpg",
|
389 |
+
vote_average: 7.5,
|
390 |
+
release_date: "2023-06-09",
|
391 |
+
genre_ids: [28, 12, 878],
|
392 |
+
overview: "Les Autobots affrontent une nouvelle menace terrifiante venue de l'espace."
|
393 |
+
},
|
394 |
+
{
|
395 |
+
id: 298618,
|
396 |
+
title: "The Flash",
|
397 |
+
poster_path: "/rktDFPbfHfUbArZ6OOOKsXcv0Bm.jpg",
|
398 |
+
vote_average: 6.9,
|
399 |
+
release_date: "2023-06-16",
|
400 |
+
genre_ids: [28, 12, 878],
|
401 |
+
overview: "Barry Allen utilise ses pouvoirs pour voyager dans le temps et changer le passé."
|
402 |
}
|
403 |
+
];
|
|
|
|
|
404 |
|
405 |
+
// Render movies to all sections (in a real app, you would have different data for each)
|
406 |
+
sampleMovies.forEach(movie => {
|
407 |
+
trendingMovies.appendChild(createMovieCard(movie));
|
408 |
+
newMovies.appendChild(createMovieCard(movie));
|
409 |
+
topMovies.appendChild(createMovieCard(movie));
|
410 |
+
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
411 |
}
|
412 |
|
413 |
+
// Create movie card element
|
414 |
+
function createMovieCard(movie) {
|
415 |
const card = document.createElement('div');
|
416 |
+
card.className = 'movie-card bg-gray-800/70 rounded-lg overflow-hidden transition-all duration-300 cursor-pointer hover:shadow-lg';
|
417 |
card.innerHTML = `
|
418 |
<div class="relative">
|
419 |
+
<img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}"
|
420 |
+
class="w-full h-64 md:h-80 object-cover"
|
421 |
+
onerror="this.src='https://via.placeholder.com/500x750?text=Poster+Non+Disponible'">
|
422 |
+
<div class="absolute top-2 right-2 bg-yellow-500 text-yellow-900 px-2 py-1 rounded-full text-xs font-bold">
|
423 |
+
${movie.vote_average.toFixed(1)}
|
|
|
424 |
</div>
|
425 |
+
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-4">
|
426 |
+
<h3 class="font-bold text-white mb-2">${movie.title}</h3>
|
427 |
+
<div class="flex flex-wrap gap-1 mb-3">
|
428 |
+
${movie.genre_ids.slice(0, 2).map(genreId => {
|
429 |
+
const genre = config.genres.find(g => g.id === genreId);
|
430 |
+
return genre ? `<span class="text-xs bg-gray-900/70 text-gray-300 px-2 py-0.5 rounded-full">${genre.name}</span>` : '';
|
431 |
+
}).join('')}
|
432 |
+
</div>
|
433 |
+
<button class="w-full py-2 bg-indigo-600 hover:bg-indigo-700 rounded text-sm font-medium flex items-center justify-center">
|
434 |
+
<i class="fas fa-play mr-2"></i> Regarder
|
435 |
</button>
|
436 |
</div>
|
437 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
438 |
`;
|
|
|
|
|
|
|
439 |
|
440 |
+
// Add click event to play movie
|
441 |
+
card.addEventListener('click', () => playMovie(movie));
|
442 |
+
return card;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
443 |
}
|
444 |
|
445 |
+
// Play movie function
|
446 |
+
function playMovie(movie) {
|
447 |
+
// Set player content
|
448 |
+
playerTitle.textContent = movie.title;
|
449 |
+
playerYear.textContent = new Date(movie.release_date).getFullYear();
|
450 |
+
playerRating.textContent = `${movie.vote_average.toFixed(1)}/10`;
|
451 |
+
playerQuality.textContent = "HD";
|
452 |
+
playerDuration.textContent = "2h 15m";
|
453 |
+
playerOverview.textContent = movie.overview;
|
454 |
|
455 |
+
// Set genres
|
456 |
+
playerGenres.innerHTML = '';
|
457 |
+
movie.genre_ids.slice(0, 3).forEach(genreId => {
|
458 |
+
const genre = config.genres.find(g => g.id === genreId);
|
459 |
+
if (genre) {
|
460 |
+
const span = document.createElement('span');
|
461 |
+
span.className = 'genre-chip text-xs bg-gray-700 text-gray-300 px-3 py-1 rounded-full transition-transform';
|
462 |
+
span.textContent = genre.name;
|
463 |
+
playerGenres.appendChild(span);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
464 |
}
|
465 |
+
});
|
466 |
+
|
467 |
+
// Show player
|
468 |
+
moviePlayer.classList.remove('hidden');
|
469 |
+
window.scrollTo({ top: 0, behavior: 'smooth' });
|
470 |
|
471 |
+
// In a real app, you would set the streamFrame.src to the actual stream URL
|
472 |
+
// streamFrame.src = `https://vidsrc.me/embed/${movie.id}`;
|
473 |
}
|
474 |
|
475 |
+
// Render server status
|
476 |
+
function renderServerStatus() {
|
477 |
+
for (const [key, server] of Object.entries(config.streamingServers)) {
|
478 |
+
const statusItem = document.createElement('div');
|
479 |
+
statusItem.className = 'bg-gray-800/50 rounded-lg p-4 flex items-center';
|
480 |
+
statusItem.innerHTML = `
|
481 |
+
<div class="mr-4">
|
482 |
+
<div class="h-12 w-12 rounded-full ${server.status === 'online' ? 'bg-green-500/20' : 'bg-red-500/20'} flex items-center justify-center">
|
483 |
+
<i class="fas fa-server ${server.status === 'online' ? 'text-green-400' : 'text-red-400'}"></i>
|
484 |
+
</div>
|
485 |
+
</div>
|
486 |
+
<div>
|
487 |
+
<h3 class="font-bold">${server.name}</h3>
|
488 |
+
<div class="flex items-center mt-1">
|
489 |
+
<div class="h-2 w-2 rounded-full ${server.status === 'online' ? 'bg-green-500' : 'bg-red-500'} mr-2"></div>
|
490 |
+
<span class="text-xs ${server.status === 'online' ? 'text-green-400' : 'text-red-400'}">${server.status === 'online' ? 'En ligne' : 'Hors ligne'}</span>
|
491 |
+
</div>
|
492 |
+
<div class="text-xs text-gray-400 mt-2">
|
493 |
+
<i class="fas fa-bolt mr-1"></i> ${server.quality} •
|
494 |
+
<i class="fas fa-language ml-2 mr-1"></i> ${server.languages.join(', ')}
|
495 |
+
</div>
|
496 |
+
</div>
|
497 |
+
`;
|
498 |
+
serverStatus.appendChild(statusItem);
|
499 |
+
}
|
500 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
501 |
</script>
|
502 |
<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/mega-academy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
503 |
</html>
|
prompts.txt
CHANGED
@@ -6,4 +6,6 @@ Your Cart Introduction to AI Beginner $19.99 Subtotal: $19.99 Tax: $2.00 Tota
|
|
6 |
activer tout en automatique
|
7 |
creer un générateur de site de films streaming a regarder de suite avec plus de 5025200 boutons cliquable automatiques des film qui s'ouvre dans une nouvel fenetre quand on cique sure chaque bouton je veux des vrais film reel en automatique pas de site d exemple , avec sont propre database de plus de 9726000 film complet directement pret a l'emploi les film je les veux tous en francais , avec des tres belle affiche reel des film et leur affiche d'origine , avec des serveurs de base de donnée avec leur lien d'origine
|
8 |
robotiser toutes en systeme automatique
|
9 |
-
activer la base de données des film en automatique
|
|
|
|
|
|
6 |
activer tout en automatique
|
7 |
creer un générateur de site de films streaming a regarder de suite avec plus de 5025200 boutons cliquable automatiques des film qui s'ouvre dans une nouvel fenetre quand on cique sure chaque bouton je veux des vrais film reel en automatique pas de site d exemple , avec sont propre database de plus de 9726000 film complet directement pret a l'emploi les film je les veux tous en francais , avec des tres belle affiche reel des film et leur affiche d'origine , avec des serveurs de base de donnée avec leur lien d'origine
|
8 |
robotiser toutes en systeme automatique
|
9 |
+
activer la base de données des film en automatique
|
10 |
+
je veux que le site posséde sont vrais serveur de lient de film a jours
|
11 |
+
https://huggingface.co/spaces/docto41/cin-verse
|