Hugging Face's logo

Spaces:
docto41
/
serveur
Running

App Files Community
docto41 commited on
Commit
dbb1e6e
·
verified ·
1 Parent(s): c2be4be

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +148 -28
  2. prompts.txt +2 -1
index.html CHANGED
@@ -38,6 +38,17 @@
38
  outline: none;
39
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
40
  }
 
 
 
 
 
 
 
 
 
 
 
41
  </style>
42
  </head>
43
  <body class="bg-gray-900 text-gray-100 min-h-screen">
@@ -80,7 +91,7 @@
80
  </div>
81
  <p class="text-gray-300 mb-6">Paul Atreides s'unit avec Chani et les Fremen pour se venger de ceux qui ont détruit sa famille. Alors qu'il affronte un choix entre l'amour de sa vie et le destin de l'univers, il doit empêcher un terrible futur que lui seul peut prévoir.</p>
82
  <div class="flex space-x-4">
83
- <button class="bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded-full font-semibold flex items-center">
84
  <i class="fas fa-play mr-2"></i> Regarder
85
  </button>
86
  <button class="bg-gray-700 hover:bg-gray-600 text-white px-6 py-2 rounded-full font-semibold">
@@ -114,7 +125,7 @@
114
  <span>3h</span>
115
  </div>
116
  <div class="mt-3 flex justify-between">
117
- <button class="text-red-400 hover:text-red-300 text-sm font-semibold">
118
  <i class="fas fa-play mr-1"></i> Regarder
119
  </button>
120
  <button class="text-gray-400 hover:text-white">
@@ -139,7 +150,7 @@
139
  <span>2h56m</span>
140
  </div>
141
  <div class="mt-3 flex justify-between">
142
- <button class="text-red-400 hover:text-red-300 text-sm font-semibold">
143
  <i class="fas fa-play mr-1"></i> Regarder
144
  </button>
145
  <button class="text-gray-400 hover:text-white">
@@ -164,7 +175,7 @@
164
  <span>2h21m</span>
165
  </div>
166
  <div class="mt-3 flex justify-between">
167
- <button class="text-red-400 hover:text-red-300 text-sm font-semibold">
168
  <i class="fas fa-play mr-1"></i> Regarder
169
  </button>
170
  <button class="text-gray-400 hover:text-white">
@@ -189,7 +200,7 @@
189
  <span>3h26m</span>
190
  </div>
191
  <div class="mt-3 flex justify-between">
192
- <button class="text-red-400 hover:text-red-300 text-sm font-semibold">
193
  <i class="fas fa-play mr-1"></i> Regarder
194
  </button>
195
  <button class="text-gray-400 hover:text-white">
@@ -214,7 +225,7 @@
214
  <span>1h54m</span>
215
  </div>
216
  <div class="mt-3 flex justify-between">
217
- <button class="text-red-400 hover:text-red-300 text-sm font-semibold">
218
  <i class="fas fa-play mr-1"></i> Regarder
219
  </button>
220
  <button class="text-gray-400 hover:text-white">
@@ -231,7 +242,7 @@
231
  <h2 class="text-2xl font-bold mb-6">Serveurs de streaming disponibles</h2>
232
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
233
  <!-- Streaming Option 1 -->
234
- <div class="streaming-option bg-gray-700 rounded-lg p-4 flex flex-col items-center cursor-pointer hover:bg-gray-600">
235
  <div class="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center mb-3">
236
  <i class="fas fa-play text-white text-2xl"></i>
237
  </div>
@@ -243,7 +254,7 @@
243
  </div>
244
 
245
  <!-- Streaming Option 2 -->
246
- <div class="streaming-option bg-gray-700 rounded-lg p-4 flex flex-col items-center cursor-pointer hover:bg-gray-600">
247
  <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mb-3">
248
  <i class="fas fa-server text-white text-2xl"></i>
249
  </div>
@@ -255,7 +266,7 @@
255
  </div>
256
 
257
  <!-- Streaming Option 3 -->
258
- <div class="streaming-option bg-gray-700 rounded-lg p-4 flex flex-col items-center cursor-pointer hover:bg-gray-600">
259
  <div class="w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center mb-3">
260
  <i class="fas fa-globe text-white text-2xl"></i>
261
  </div>
@@ -267,7 +278,7 @@
267
  </div>
268
 
269
  <!-- Streaming Option 4 -->
270
- <div class="streaming-option bg-gray-700 rounded-lg p-4 flex flex-col items-center cursor-pointer hover:bg-gray-600">
271
  <div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mb-3">
272
  <i class="fas fa-mobile-alt text-white text-2xl"></i>
273
  </div>
@@ -307,20 +318,23 @@
307
  <div class="mb-6">
308
  <h3 class="text-xl font-semibold mb-3">Serveurs disponibles</h3>
309
  <div class="flex flex-wrap gap-3">
310
- <button class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-full text-sm font-semibold flex items-center">
311
  <i class="fas fa-play mr-2"></i> Serveur 1 (HD)
312
  </button>
313
- <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full text-sm font-semibold flex items-center">
314
  <i class="fas fa-play mr-2"></i> Serveur 2 (4K)
315
  </button>
316
- <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-full text-sm font-semibold flex items-center">
317
  <i class="fas fa-play mr-2"></i> Serveur 3 (FR)
318
  </button>
 
 
 
319
  </div>
320
  </div>
321
 
322
  <div class="flex space-x-4">
323
- <button class="bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded-full font-semibold flex items-center">
324
  <i class="fas fa-play mr-2"></i> Regarder maintenant
325
  </button>
326
  <button class="bg-gray-700 hover:bg-gray-600 text-white px-6 py-2 rounded-full font-semibold">
@@ -332,6 +346,21 @@
332
  </div>
333
  </div>
334
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
335
  </main>
336
 
337
  <!-- Footer -->
@@ -441,10 +470,17 @@
441
  }
442
  ];
443
 
 
 
 
 
 
444
  // Function to open movie modal
445
  function openMovieModal(movieId) {
446
  const movie = movies.find(m => m.id === movieId);
447
  if (movie) {
 
 
448
  document.getElementById('modalTitle').textContent = movie.title;
449
  document.getElementById('modalRating').textContent = movie.rating;
450
  document.getElementById('modalYear').textContent = movie.year;
@@ -465,15 +501,104 @@
465
  document.body.style.overflow = 'auto';
466
  }
467
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
468
  // Event listeners
469
  document.addEventListener('DOMContentLoaded', () => {
470
- // Add click event to movie cards (simplified for demo)
471
  document.querySelectorAll('.movie-card').forEach((card, index) => {
472
  card.addEventListener('click', () => {
473
  openMovieModal(index + 1);
474
  });
475
  });
476
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
477
  // Close modal button
478
  document.getElementById('closeModal').addEventListener('click', closeModal);
479
 
@@ -484,21 +609,16 @@
484
  }
485
  });
486
 
487
- // Simulate server selection
488
- document.querySelectorAll('.streaming-option').forEach(option => {
489
- option.addEventListener('click', () => {
490
- // In a real app, this would connect to the selected server
491
- alert('Connexion au serveur en cours...');
492
- });
 
 
493
  });
494
  });
495
-
496
- // Simulate search functionality
497
- document.querySelector('.search-bar').addEventListener('input', (e) => {
498
- const searchTerm = e.target.value.toLowerCase();
499
- // In a real app, this would filter movies
500
- console.log(`Recherche de: ${searchTerm}`);
501
- });
502
  </script>
503
  <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/serveur" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
504
  </html>
 
38
  outline: none;
39
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
40
  }
41
+
42
+ /* Animation pour le chargement des serveurs */
43
+ @keyframes pulse {
44
+ 0% { opacity: 0.6; }
45
+ 50% { opacity: 1; }
46
+ 100% { opacity: 0.6; }
47
+ }
48
+
49
+ .server-loading {
50
+ animation: pulse 1.5s infinite;
51
+ }
52
  </style>
53
  </head>
54
  <body class="bg-gray-900 text-gray-100 min-h-screen">
 
91
  </div>
92
  <p class="text-gray-300 mb-6">Paul Atreides s'unit avec Chani et les Fremen pour se venger de ceux qui ont détruit sa famille. Alors qu'il affronte un choix entre l'amour de sa vie et le destin de l'univers, il doit empêcher un terrible futur que lui seul peut prévoir.</p>
93
  <div class="flex space-x-4">
94
+ <button id="featuredPlayBtn" class="bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded-full font-semibold flex items-center">
95
  <i class="fas fa-play mr-2"></i> Regarder
96
  </button>
97
  <button class="bg-gray-700 hover:bg-gray-600 text-white px-6 py-2 rounded-full font-semibold">
 
125
  <span>3h</span>
126
  </div>
127
  <div class="mt-3 flex justify-between">
128
+ <button class="play-movie-btn text-red-400 hover:text-red-300 text-sm font-semibold" data-movie-id="1">
129
  <i class="fas fa-play mr-1"></i> Regarder
130
  </button>
131
  <button class="text-gray-400 hover:text-white">
 
150
  <span>2h56m</span>
151
  </div>
152
  <div class="mt-3 flex justify-between">
153
+ <button class="play-movie-btn text-red-400 hover:text-red-300 text-sm font-semibold" data-movie-id="2">
154
  <i class="fas fa-play mr-1"></i> Regarder
155
  </button>
156
  <button class="text-gray-400 hover:text-white">
 
175
  <span>2h21m</span>
176
  </div>
177
  <div class="mt-3 flex justify-between">
178
+ <button class="play-movie-btn text-red-400 hover:text-red-300 text-sm font-semibold" data-movie-id="3">
179
  <i class="fas fa-play mr-1"></i> Regarder
180
  </button>
181
  <button class="text-gray-400 hover:text-white">
 
200
  <span>3h26m</span>
201
  </div>
202
  <div class="mt-3 flex justify-between">
203
+ <button class="play-movie-btn text-red-400 hover:text-red-300 text-sm font-semibold" data-movie-id="4">
204
  <i class="fas fa-play mr-1"></i> Regarder
205
  </button>
206
  <button class="text-gray-400 hover:text-white">
 
225
  <span>1h54m</span>
226
  </div>
227
  <div class="mt-3 flex justify-between">
228
+ <button class="play-movie-btn text-red-400 hover:text-red-300 text-sm font-semibold" data-movie-id="5">
229
  <i class="fas fa-play mr-1"></i> Regarder
230
  </button>
231
  <button class="text-gray-400 hover:text-white">
 
242
  <h2 class="text-2xl font-bold mb-6">Serveurs de streaming disponibles</h2>
243
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
244
  <!-- Streaming Option 1 -->
245
+ <div class="streaming-option bg-gray-700 rounded-lg p-4 flex flex-col items-center cursor-pointer hover:bg-gray-600" data-server="premium">
246
  <div class="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center mb-3">
247
  <i class="fas fa-play text-white text-2xl"></i>
248
  </div>
 
254
  </div>
255
 
256
  <!-- Streaming Option 2 -->
257
+ <div class="streaming-option bg-gray-700 rounded-lg p-4 flex flex-col items-center cursor-pointer hover:bg-gray-600" data-server="rapide">
258
  <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mb-3">
259
  <i class="fas fa-server text-white text-2xl"></i>
260
  </div>
 
266
  </div>
267
 
268
  <!-- Streaming Option 3 -->
269
+ <div class="streaming-option bg-gray-700 rounded-lg p-4 flex flex-col items-center cursor-pointer hover:bg-gray-600" data-server="international">
270
  <div class="w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center mb-3">
271
  <i class="fas fa-globe text-white text-2xl"></i>
272
  </div>
 
278
  </div>
279
 
280
  <!-- Streaming Option 4 -->
281
+ <div class="streaming-option bg-gray-700 rounded-lg p-4 flex flex-col items-center cursor-pointer hover:bg-gray-600" data-server="mobile">
282
  <div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mb-3">
283
  <i class="fas fa-mobile-alt text-white text-2xl"></i>
284
  </div>
 
318
  <div class="mb-6">
319
  <h3 class="text-xl font-semibold mb-3">Serveurs disponibles</h3>
320
  <div class="flex flex-wrap gap-3">
321
+ <button class="server-btn bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-full text-sm font-semibold flex items-center" data-server="premium">
322
  <i class="fas fa-play mr-2"></i> Serveur 1 (HD)
323
  </button>
324
+ <button class="server-btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full text-sm font-semibold flex items-center" data-server="rapide">
325
  <i class="fas fa-play mr-2"></i> Serveur 2 (4K)
326
  </button>
327
+ <button class="server-btn bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-full text-sm font-semibold flex items-center" data-server="international">
328
  <i class="fas fa-play mr-2"></i> Serveur 3 (FR)
329
  </button>
330
+ <button class="server-btn bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-full text-sm font-semibold flex items-center" data-server="mobile">
331
+ <i class="fas fa-play mr-2"></i> Serveur Mobile
332
+ </button>
333
  </div>
334
  </div>
335
 
336
  <div class="flex space-x-4">
337
+ <button id="modalPlayBtn" class="bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded-full font-semibold flex items-center">
338
  <i class="fas fa-play mr-2"></i> Regarder maintenant
339
  </button>
340
  <button class="bg-gray-700 hover:bg-gray-600 text-white px-6 py-2 rounded-full font-semibold">
 
346
  </div>
347
  </div>
348
  </div>
349
+
350
+ <!-- Server Loading Modal -->
351
+ <div id="serverLoadingModal" class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden flex items-center justify-center p-4">
352
+ <div class="bg-gray-800 rounded-xl p-8 max-w-md w-full text-center">
353
+ <div class="loading-spinner border-4 border-gray-300 border-t-red-500 rounded-full w-16 h-16 mx-auto mb-6"></div>
354
+ <h3 class="text-xl font-bold mb-2">Connexion au serveur</h3>
355
+ <p id="serverLoadingText" class="text-gray-300 mb-6">Connexion au serveur Premium en cours...</p>
356
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
357
+ <div id="loadingProgress" class="bg-red-600 h-2.5 rounded-full" style="width: 0%"></div>
358
+ </div>
359
+ <button id="cancelServerBtn" class="mt-6 text-gray-400 hover:text-white text-sm">
360
+ <i class="fas fa-times mr-1"></i> Annuler
361
+ </button>
362
+ </div>
363
+ </div>
364
  </main>
365
 
366
  <!-- Footer -->
 
470
  }
471
  ];
472
 
473
+ // Current selected movie and server
474
+ let currentMovie = null;
475
+ let currentServer = null;
476
+ let loadingInterval = null;
477
+
478
  // Function to open movie modal
479
  function openMovieModal(movieId) {
480
  const movie = movies.find(m => m.id === movieId);
481
  if (movie) {
482
+ currentMovie = movie;
483
+
484
  document.getElementById('modalTitle').textContent = movie.title;
485
  document.getElementById('modalRating').textContent = movie.rating;
486
  document.getElementById('modalYear').textContent = movie.year;
 
501
  document.body.style.overflow = 'auto';
502
  }
503
 
504
+ // Function to connect to server
505
+ function connectToServer(serverType) {
506
+ currentServer = serverType;
507
+
508
+ // Update loading text based on server type
509
+ let serverName = "";
510
+ switch(serverType) {
511
+ case "premium":
512
+ serverName = "Premium (4K)";
513
+ break;
514
+ case "rapide":
515
+ serverName = "Rapide (Full HD)";
516
+ break;
517
+ case "international":
518
+ serverName = "International (Multi-langues)";
519
+ break;
520
+ case "mobile":
521
+ serverName = "Mobile Optimisé";
522
+ break;
523
+ default:
524
+ serverName = "Serveur";
525
+ }
526
+
527
+ document.getElementById('serverLoadingText').textContent = `Connexion au serveur ${serverName} en cours...`;
528
+ document.getElementById('serverLoadingModal').classList.remove('hidden');
529
+
530
+ // Simulate loading progress
531
+ let progress = 0;
532
+ document.getElementById('loadingProgress').style.width = '0%';
533
+
534
+ loadingInterval = setInterval(() => {
535
+ progress += Math.floor(Math.random() * 10) + 5;
536
+ if (progress > 100) progress = 100;
537
+ document.getElementById('loadingProgress').style.width = `${progress}%`;
538
+
539
+ if (progress >= 100) {
540
+ clearInterval(loadingInterval);
541
+ setTimeout(() => {
542
+ document.getElementById('serverLoadingModal').classList.add('hidden');
543
+ alert(`Vous regardez maintenant "${currentMovie.title}" sur le serveur ${serverName}`);
544
+ }, 500);
545
+ }
546
+ }, 300);
547
+ }
548
+
549
+ // Function to cancel server connection
550
+ function cancelServerConnection() {
551
+ clearInterval(loadingInterval);
552
+ document.getElementById('serverLoadingModal').classList.add('hidden');
553
+ }
554
+
555
  // Event listeners
556
  document.addEventListener('DOMContentLoaded', () => {
557
+ // Add click event to movie cards
558
  document.querySelectorAll('.movie-card').forEach((card, index) => {
559
  card.addEventListener('click', () => {
560
  openMovieModal(index + 1);
561
  });
562
  });
563
 
564
+ // Play buttons on movie cards
565
+ document.querySelectorAll('.play-movie-btn').forEach(btn => {
566
+ btn.addEventListener('click', (e) => {
567
+ e.stopPropagation();
568
+ const movieId = parseInt(btn.getAttribute('data-movie-id'));
569
+ openMovieModal(movieId);
570
+ setTimeout(() => {
571
+ connectToServer("premium"); // Default to premium server
572
+ }, 300);
573
+ });
574
+ });
575
+
576
+ // Featured movie play button
577
+ document.getElementById('featuredPlayBtn').addEventListener('click', () => {
578
+ connectToServer("premium");
579
+ });
580
+
581
+ // Modal play button
582
+ document.getElementById('modalPlayBtn').addEventListener('click', () => {
583
+ connectToServer("premium");
584
+ });
585
+
586
+ // Server buttons in modal
587
+ document.querySelectorAll('.server-btn').forEach(btn => {
588
+ btn.addEventListener('click', () => {
589
+ const serverType = btn.getAttribute('data-server');
590
+ connectToServer(serverType);
591
+ });
592
+ });
593
+
594
+ // Streaming options in server section
595
+ document.querySelectorAll('.streaming-option').forEach(option => {
596
+ option.addEventListener('click', () => {
597
+ const serverType = option.getAttribute('data-server');
598
+ connectToServer(serverType);
599
+ });
600
+ });
601
+
602
  // Close modal button
603
  document.getElementById('closeModal').addEventListener('click', closeModal);
604
 
 
609
  }
610
  });
611
 
612
+ // Cancel server button
613
+ document.getElementById('cancelServerBtn').addEventListener('click', cancelServerConnection);
614
+
615
+ // Simulate search functionality
616
+ document.querySelector('.search-bar').addEventListener('input', (e) => {
617
+ const searchTerm = e.target.value.toLowerCase();
618
+ // In a real app, this would filter movies
619
+ console.log(`Recherche de: ${searchTerm}`);
620
  });
621
  });
 
 
 
 
 
 
 
622
  </script>
623
  <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/serveur" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
624
  </html>
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- je veux un base de donné de film avec des serveur des film en automatique a
 
 
1
+ je veux un base de donné de film avec des serveur des film en automatique a
2
+ ACTIVER TOUTES LES BOUTONS DES SERVEUR QUI NE FONCTIONNE PAS