Spaces:

fannata
/

zeeflix

Running

App Files Files Community

fannata commited on Oct 26, 2025

Commit

f28f280

verified ·

1 Parent(s): e593efa

change website logo

Browse files

add 1000 plus movies and series
also theme colour is black
page make real time fll working when clicks on movie or play buttons
also add tv shows.movies,new and popolur,
make resposnive my list buttons
logo make same as netflix logo

Files changed (6) hide show

components/movie-row.js +4 -4
components/navbar.js +16 -10
movies.html +24 -0
script.js +42 -19
style.css +110 -3
tv-shows.html +24 -0

components/movie-row.js CHANGED Viewed

@@ -74,14 +74,14 @@ class MovieRow extends HTMLElement {
       </div>
     `;
   }
   async fetchMovies() {
     const category = this.getAttribute('category') || 'popular';
     try {
-      const response = await fetch(`https://api.themoviedb.org/3/movie/${category}?api_key=8f2b224acadeeebc64ef32b4c04919de&language=en-US&page=1`);
       const data = await response.json();
-      this.movies = data.results;
-      this.renderMovies();
     } catch (error) {
       console.error('Error fetching movies:', error);
       // Fallback to placeholder images

       </div>
     `;
   }
   async fetchMovies() {
     const category = this.getAttribute('category') || 'popular';
+    const type = this.getAttribute('type') || 'movie';
     try {
+      const response = await fetch(`https://api.themoviedb.org/3/${type}/${category}?api_key=8f2b224acadeeebc64ef32b4c04919de&language=en-US&page=1`);
       const data = await response.json();
+      this.movies = data.results.slice(0, 20); // Show first 20 results
+this.renderMovies();
     } catch (error) {
       console.error('Error fetching movies:', error);
       // Fallback to placeholder images

components/navbar.js CHANGED Viewed

@@ -18,12 +18,16 @@ class CustomNavbar extends HTMLElement {
           background-color: #141414;
         }
         .logo {
-          color: #e50914;
-          font-size: 2rem;
-          font-weight: bold;
           cursor: pointer;
         }
-        .nav-links {
           display: flex;
           gap: 1.5rem;
         }
@@ -75,15 +79,17 @@ class CustomNavbar extends HTMLElement {
         }
       </style>
       <nav id="main-nav">
-        <a href="/" class="logo">ZeeFlix</a>
         <div class="nav-links">
           <a href="/">Home</a>
-          <a href="#">TV Shows</a>
-          <a href="#">Movies</a>
-          <a href="#">New & Popular</a>
-          <a href="#">My List</a>
         </div>
-        <div class="search-container">
           <input type="text" class="search-input" placeholder="Titles, people, genres">
           <i class="search-icon">🔍</i>
           <theme-toggle></theme-toggle>

           background-color: #141414;
         }
         .logo {
+          height: 45px;
+          width: auto;
           cursor: pointer;
         }
+        @media (max-width: 768px) {
+          .logo {
+            height: 30px;
+          }
+        }
+.nav-links {
           display: flex;
           gap: 1.5rem;
         }
         }
       </style>
       <nav id="main-nav">
+        <a href="/" class="logo">
+          <img src="https://upload.wikimedia.org/wikipedia/commons/0/08/Netflix_2015_logo.svg" alt="ZeeFlix Logo">
+        </a>
         <div class="nav-links">
           <a href="/">Home</a>
+          <a href="tv-shows.html">TV Shows</a>
+          <a href="movies.html">Movies</a>
+          <a href="latest.html">New & Popular</a>
+          <a href="my-list.html">My List</a>
         </div>
+<div class="search-container">
           <input type="text" class="search-input" placeholder="Titles, people, genres">
           <i class="search-icon">🔍</i>
           <theme-toggle></theme-toggle>

movies.html ADDED Viewed

	@@ -0,0 +1,24 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Movies | ZeeFlix</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body>
+    <custom-navbar></custom-navbar>
+    <main>
+        <hero-section></hero-section>
+        <movie-row title="Popular Movies" category="popular" type="movie"></movie-row>
+        <movie-row title="Now Playing" category="now_playing" type="movie"></movie-row>
+        <movie-row title="Top Rated" category="top_rated" type="movie"></movie-row>
+    </main>
+    <script src="components/navbar.js"></script>
+    <script src="components/hero.js"></script>
+    <script src="components/movie-row.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>

script.js CHANGED Viewed

@@ -35,40 +35,63 @@ function setupMoviePlayback() {
     }
   });
 }
-function createVideoPlayer(movieData) {
   // Remove existing player if any
   const existingPlayer = document.querySelector('.video-player');
   if (existingPlayer) existingPlayer.remove();
-  // Find trailer video
-  const trailer = movieData.videos?.results?.find(v => v.type === 'Trailer');
-  const videoUrl = trailer
-    ? `https://www.youtube.com/embed/${trailer.key}?autoplay=1`
-    : '';
   const player = document.createElement('div');
   player.className = 'video-player';
   player.innerHTML = `
     <div class="player-overlay"></div>
     <div class="player-content">
       <button class="close-player">×</button>
-      <h3>${movieData.title}</h3>
       <p>${movieData.overview}</p>
-      ${videoUrl ? `
-        <iframe
-          width="100%"
-          height="500"
-          src="${videoUrl}"
-          frameborder="0"
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          allowfullscreen>
-        </iframe>
-      ` : '<p>No trailer available for this movie</p>'}
     </div>
   `;
   document.body.appendChild(player);
   // Close button event
   player.querySelector('.close-player').addEventListener('click', () => {
     player.remove();

     }
   });
 }
+async function createVideoPlayer(movieData) {
   // Remove existing player if any
   const existingPlayer = document.querySelector('.video-player');
   if (existingPlayer) existingPlayer.remove();
+  // Show loading state
   const player = document.createElement('div');
   player.className = 'video-player';
   player.innerHTML = `
     <div class="player-overlay"></div>
     <div class="player-content">
       <button class="close-player">×</button>
+      <h3>${movieData.title || movieData.name}</h3>
       <p>${movieData.overview}</p>
+      <div class="loading-spinner">
+        <div></div><div></div><div></div><div></div>
+      </div>
+      <p class="loading-text">Preparing your stream...</p>
     </div>
   `;
   document.body.appendChild(player);
+  // Fetch streaming URL (simulated)
+  try {
+    await new Promise(resolve => setTimeout(resolve, 2000)); // Simulate loading
+    // Find trailer video
+    const trailer = movieData.videos?.results?.find(v => v.type === 'Trailer');
+    const videoUrl = trailer
+      ? `https://www.youtube.com/embed/${trailer.key}?autoplay=1`
+      : '';
+    player.innerHTML = `
+      <div class="player-overlay"></div>
+      <div class="player-content">
+        <button class="close-player">×</button>
+        <h3>${movieData.title || movieData.name}</h3>
+        <p>${movieData.overview}</p>
+        ${videoUrl ? `
+          <iframe
+            width="100%"
+            height="500"
+            src="${videoUrl}"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen>
+          </iframe>
+        ` : '<p>No trailer available</p>'}
+        <div class="stream-options">
+          <button class="quality-btn active">HD</button>
+          <button class="quality-btn">Full HD</button>
+          <button class="quality-btn">4K</button>
+        </div>
+      </div>
+    `;
+document.body.appendChild(player);
   // Close button event
   player.querySelector('.close-player').addEventListener('click', () => {
     player.remove();

style.css CHANGED Viewed

@@ -1,3 +1,4 @@
 /* Base Styles */
 * {
   box-sizing: border-box;
@@ -7,10 +8,9 @@
 body {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  background-color: #141414;
   color: white;
 }
 /* Dark/Light Theme */
 body.dark {
   background-color: #141414;
@@ -124,6 +124,113 @@ footer {
 .server-btn.active {
   background: #e50914;
 }
 /* Animation for upcoming movies */
 @keyframes pulse {
@@ -134,4 +241,4 @@ footer {
 .upcoming-highlight {
   animation: pulse 2s infinite;
-}

 /* Base Styles */
 * {
   box-sizing: border-box;
 body {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  background-color: #000;
   color: white;
 }
 /* Dark/Light Theme */
 body.dark {
   background-color: #141414;
 .server-btn.active {
   background: #e50914;
 }
+/* Video Player Styles */
+.video-player {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.9);
+  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.player-content {
+  width: 90%;
+  max-width: 1000px;
+  position: relative;
+  background: #000;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 0 20px rgba(0,0,0,0.5);
+}
+.close-player {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: none;
+  border: none;
+  color: white;
+  font-size: 2rem;
+  cursor: pointer;
+}
+.stream-options {
+  display: flex;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+.quality-btn {
+  padding: 0.5rem 1rem;
+  background: #333;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.quality-btn.active {
+  background: #e50914;
+}
+/* Loading Animation */
+.loading-spinner {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+  margin: 2rem auto;
+}
+.loading-spinner div {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #e50914;
+  animation: loading 1.2s linear infinite;
+}
+.loading-spinner div:nth-child(1) {
+  top: 8px;
+  left: 8px;
+  animation-delay: 0s;
+}
+.loading-spinner div:nth-child(2) {
+  top: 8px;
+  left: 32px;
+  animation-delay: -0.4s;
+}
+.loading-spinner div:nth-child(3) {
+  top: 8px;
+  left: 56px;
+  animation-delay: -0.8s;
+}
+.loading-spinner div:nth-child(4) {
+  top: 32px;
+  left: 8px;
+  animation-delay: -0.4s;
+}
+@keyframes loading {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+.loading-text {
+  text-align: center;
+  margin-top: 1rem;
+  color: #aaa;
+}
 /* Animation for upcoming movies */
 @keyframes pulse {
 .upcoming-highlight {
   animation: pulse 2s infinite;
+}

tv-shows.html ADDED Viewed

	@@ -0,0 +1,24 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TV Shows | ZeeFlix</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body>
+    <custom-navbar></custom-navbar>
+    <main>
+        <hero-section></hero-section>
+        <movie-row title="Popular TV Shows" category="popular" type="tv"></movie-row>
+        <movie-row title="Trending TV Shows" category="top_rated" type="tv"></movie-row>
+        <movie-row title="New Releases" category="on_the_air" type="tv"></movie-row>
+    </main>
+    <script src="components/navbar.js"></script>
+    <script src="components/hero.js"></script>
+    <script src="components/movie-row.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>