Hugging Face's logo

Spaces:
docto41
/
nexusflix
Running

App Files Community
docto41 commited on
Commit
e6eea48
·
verified ·
1 Parent(s): d633cf3

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +85 -41
  2. prompts.txt +2 -1
index.html CHANGED
@@ -144,6 +144,18 @@
144
  0% { transform: translateX(-100%) rotate(30deg); }
145
  100% { transform: translateX(100%) rotate(30deg); }
146
  }
 
 
 
 
 
 
 
 
 
 
 
 
147
  </style>
148
  </head>
149
  <body class="min-h-screen gradient-bg">
@@ -281,18 +293,11 @@
281
  </div>
282
  </div>
283
 
284
- <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
285
- <!-- Popular movies will be loaded here -->
286
- <div id="popularMovies">
287
- <!-- Content will be loaded via JS -->
288
- </div>
289
  </div>
290
 
291
- <div class="mt-10 text-center">
292
- <button class="load-more bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-full font-medium transition">
293
- <i class="fas fa-sync-alt mr-2"></i> Load More
294
- </button>
295
- </div>
296
  </div>
297
  </section>
298
 
@@ -476,6 +481,8 @@
476
  // API Configuration
477
  const API_KEY = 'fb437b10727a5a4eb8d9134e29c82ae0';
478
  const BASE_URL = 'https://api.themoviedb.org/3';
 
 
479
 
480
  // Simulate loading
481
  document.addEventListener('DOMContentLoaded', function() {
@@ -489,6 +496,7 @@
489
  document.getElementById('loadingScreen').classList.add('hidden');
490
  document.getElementById('app').classList.remove('hidden');
491
  loadInitialData();
 
492
  }, 500);
493
  }
494
  document.getElementById('loadingBar').style.width = `${progress}%`;
@@ -539,36 +547,8 @@
539
  trendingContainer.appendChild(movieElement);
540
  });
541
 
542
- // Fetch popular movies
543
- const popularResponse = await axios.get(`${BASE_URL}/movie/popular`, {
544
- params: {
545
- api_key: API_KEY,
546
- language: 'en-US',
547
- page: 1
548
- }
549
- });
550
-
551
- const popularMovies = popularResponse.data.results.slice(0, 10);
552
- const popularContainer = document.getElementById('popularMovies');
553
-
554
- popularMovies.forEach(movie => {
555
- const movieElement = document.createElement('div');
556
- movieElement.className = 'movie-card rounded-lg overflow-hidden relative group';
557
- movieElement.innerHTML = `
558
- <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}" class="w-full h-72 object-cover">
559
- <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-3">
560
- <h3 class="text-white font-bold truncate">${movie.title}</h3>
561
- <div class="flex items-center mt-1">
562
- <span class="text-yellow-400 text-sm"><i class="fas fa-star mr-1"></i> ${movie.vote_average.toFixed(1)}</span>
563
- <span class="text-gray-300 text-sm ml-2">${movie.release_date.split('-')[0]}</span>
564
- </div>
565
- <button class="mt-2 play-btn w-full bg-blue-600 hover:bg-blue-700 text-white py-1 rounded text-sm font-medium transition" data-id="${movie.id}">
566
- <i class="fas fa-play mr-1"></i> Play
567
- </button>
568
- </div>
569
- `;
570
- popularContainer.appendChild(movieElement);
571
- });
572
 
573
  // Add event listeners for play buttons
574
  document.querySelectorAll('.play-btn, .play-button').forEach(btn => {
@@ -604,6 +584,69 @@
604
  }
605
  }
606
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
607
  // Open player with movie details
608
  async function openPlayer(movieId) {
609
  try {
@@ -624,7 +667,7 @@
624
 
625
  // Update player UI
626
  document.getElementById('playerMovieTitle').textContent = movie.title;
627
- document.getElementById('playerMovieDesc').textContent = movie.overview;
628
 
629
  // In a real app, you would fetch actual video sources from your backend
630
  // For demo purposes, we'll use a placeholder
@@ -634,6 +677,7 @@
634
 
635
  } catch (error) {
636
  console.error('Error opening player:', error);
 
637
  }
638
  }
639
 
 
144
  0% { transform: translateX(-100%) rotate(30deg); }
145
  100% { transform: translateX(100%) rotate(30deg); }
146
  }
147
+
148
+ .infinite-scroll {
149
+ display: flex;
150
+ flex-wrap: wrap;
151
+ gap: 1.5rem;
152
+ padding: 1rem 0;
153
+ }
154
+
155
+ .observer-target {
156
+ height: 20px;
157
+ width: 100%;
158
+ }
159
  </style>
160
  </head>
161
  <body class="min-h-screen gradient-bg">
 
293
  </div>
294
  </div>
295
 
296
+ <div class="infinite-scroll" id="popularMovies">
297
+ <!-- Popular movies will be loaded here automatically -->
 
 
 
298
  </div>
299
 
300
+ <div id="observerTarget" class="observer-target"></div>
 
 
 
 
301
  </div>
302
  </section>
303
 
 
481
  // API Configuration
482
  const API_KEY = 'fb437b10727a5a4eb8d9134e29c82ae0';
483
  const BASE_URL = 'https://api.themoviedb.org/3';
484
+ let currentPage = 1;
485
+ let isLoading = false;
486
 
487
  // Simulate loading
488
  document.addEventListener('DOMContentLoaded', function() {
 
496
  document.getElementById('loadingScreen').classList.add('hidden');
497
  document.getElementById('app').classList.remove('hidden');
498
  loadInitialData();
499
+ setupInfiniteScroll();
500
  }, 500);
501
  }
502
  document.getElementById('loadingBar').style.width = `${progress}%`;
 
547
  trendingContainer.appendChild(movieElement);
548
  });
549
 
550
+ // Load first page of popular movies
551
+ await loadMoreMovies();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
552
 
553
  // Add event listeners for play buttons
554
  document.querySelectorAll('.play-btn, .play-button').forEach(btn => {
 
584
  }
585
  }
586
 
587
+ // Setup infinite scroll observer
588
+ function setupInfiniteScroll() {
589
+ const observer = new IntersectionObserver((entries) => {
590
+ if (entries[0].isIntersecting && !isLoading) {
591
+ loadMoreMovies();
592
+ }
593
+ }, { threshold: 0.1 });
594
+
595
+ observer.observe(document.getElementById('observerTarget'));
596
+ }
597
+
598
+ // Load more movies automatically
599
+ async function loadMoreMovies() {
600
+ if (isLoading) return;
601
+
602
+ isLoading = true;
603
+ try {
604
+ const popularResponse = await axios.get(`${BASE_URL}/movie/popular`, {
605
+ params: {
606
+ api_key: API_KEY,
607
+ language: 'en-US',
608
+ page: currentPage
609
+ }
610
+ });
611
+
612
+ const popularMovies = popularResponse.data.results;
613
+ const popularContainer = document.getElementById('popularMovies');
614
+
615
+ popularMovies.forEach(movie => {
616
+ if (!movie.poster_path) return; // Skip movies without posters
617
+
618
+ const movieElement = document.createElement('div');
619
+ movieElement.className = 'movie-card w-full sm:w-48 rounded-lg overflow-hidden relative group';
620
+ movieElement.innerHTML = `
621
+ <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}" class="w-full h-72 object-cover">
622
+ <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-3">
623
+ <h3 class="text-white font-bold truncate">${movie.title}</h3>
624
+ <div class="flex items-center mt-1">
625
+ <span class="text-yellow-400 text-sm"><i class="fas fa-star mr-1"></i> ${movie.vote_average.toFixed(1)}</span>
626
+ <span class="text-gray-300 text-sm ml-2">${movie.release_date ? movie.release_date.split('-')[0] : 'N/A'}</span>
627
+ </div>
628
+ <button class="mt-2 play-btn w-full bg-blue-600 hover:bg-blue-700 text-white py-1 rounded text-sm font-medium transition" data-id="${movie.id}">
629
+ <i class="fas fa-play mr-1"></i> Play
630
+ </button>
631
+ </div>
632
+ `;
633
+ popularContainer.appendChild(movieElement);
634
+
635
+ // Add event listener to the new play button
636
+ movieElement.querySelector('.play-btn').addEventListener('click', function() {
637
+ const movieId = this.getAttribute('data-id');
638
+ openPlayer(movieId);
639
+ });
640
+ });
641
+
642
+ currentPage++;
643
+ } catch (error) {
644
+ console.error('Error loading more movies:', error);
645
+ } finally {
646
+ isLoading = false;
647
+ }
648
+ }
649
+
650
  // Open player with movie details
651
  async function openPlayer(movieId) {
652
  try {
 
667
 
668
  // Update player UI
669
  document.getElementById('playerMovieTitle').textContent = movie.title;
670
+ document.getElementById('playerMovieDesc').textContent = movie.overview || 'No description available.';
671
 
672
  // In a real app, you would fetch actual video sources from your backend
673
  // For demo purposes, we'll use a placeholder
 
677
 
678
  } catch (error) {
679
  console.error('Error opening player:', error);
680
+ document.getElementById('playerMovieDesc').textContent = 'Failed to load movie details.';
681
  }
682
  }
683
 
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- creer un site complet de movie avec des serveur et des lecteur tres puissant:: Jeton d'accès en lecture à l'API eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmYjQzN2IxMDcyN2E1YTRlYjhkOTEzNGUyOWM4MmFlMCIsIm5iZiI6MTY4MDYzNzkxMC44NjUsInN1YiI6IjY0MmM3ZmQ2OGI5NTllMDBmNDRkNzNhMCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.Nhl261Ha3z0Ujg5vM1PpFoZBiTGjlXQ1g9VFPh6dVvs Clé d'API fb437b10727a5a4eb8d9134e29c82ae0 en mode futuriste tres tres animé
 
 
1
+ creer un site complet de movie avec des serveur et des lecteur tres puissant:: Jeton d'accès en lecture à l'API eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmYjQzN2IxMDcyN2E1YTRlYjhkOTEzNGUyOWM4MmFlMCIsIm5iZiI6MTY4MDYzNzkxMC44NjUsInN1YiI6IjY0MmM3ZmQ2OGI5NTllMDBmNDRkNzNhMCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.Nhl261Ha3z0Ujg5vM1PpFoZBiTGjlXQ1g9VFPh6dVvs Clé d'API fb437b10727a5a4eb8d9134e29c82ae0 en mode futuriste tres tres animé
2
+ CHARGER TOUTES LES FILM AUTOMATIQUEMNT