Update 2.html

2.html

@@ -83,6 +83,7 @@
         overflow: hidden;
         cursor: pointer;
         transition: transform 0.3s;
+        position: relative;
       }
 
       .movie-card:hover {
@@ -116,6 +117,25 @@
         font-weight: bold;
       }
 
+      .quick-play-button {
+        position: absolute;
+        bottom: 10px;
+        right: 10px;
+        background-color: #007bff;
+        color: white;
+        padding: 8px 15px;
+        border-radius: 5px;
+        font-size: 12px;
+        opacity: 0;
+        transition: opacity 0.3s;
+        border: none;
+        cursor: pointer;
+      }
+
+      .movie-card:hover .quick-play-button {
+        opacity: 1;
+      }
+
       .footer {
         background-color: #2a2a2a;
         padding: 20px;
@@ -138,7 +158,6 @@
         text-decoration: underline;
       }
 
-      /* Mobile Responsiveness */
       @media (max-width: 768px) {
         .header h1 {
           font-size: 1.5rem;
@@ -179,6 +198,11 @@
           font-size: 20px;
           margin: 20px 0 15px 0;
         }
+
+        .quick-play-button {
+          padding: 6px 12px;
+          font-size: 10px;
+        }
       }
     </style>
   </head>
@@ -221,7 +245,6 @@
       const searchInput = document.getElementById('searchInput');
       const searchButton = document.getElementById('searchButton');
 
-      // Get trending movies
       async function getTrendingMovies() {
         try {
           const response = await fetch(
@@ -236,7 +259,6 @@
         }
       }
 
-      // Search movies
       async function searchMovies(query) {
         try {
           const response = await fetch(
@@ -251,7 +273,6 @@
         }
       }
 
-      // Display movies
       function displayMovies(movies) {
         movieGrid.innerHTML = '';
         movies.forEach((movie) => {
@@ -267,19 +288,28 @@
                 <p>${movie.overview ? movie.overview.substring(0, 80) + '...' : 'No description available'}</p>
                 <div class="rating">★ ${movie.vote_average.toFixed(1)}</div>
             </div>
+            <button class="quick-play-button" data-id="${movie.id}">Quick Play</button>
           `;
 
-          movieCard.addEventListener('click', () => openMovieDetails(movie.id));
+          movieCard.addEventListener('click', (e) => {
+            if (!e.target.classList.contains('quick-play-button')) {
+              openMovieDetails(movie.id);
+            }
+          });
+          
+          movieCard.querySelector('.quick-play-button').addEventListener('click', (e) => {
+            e.stopPropagation();
+            window.location.href = `movie.html?id=${movie.id}#moviePlayer`;
+          });
+
           movieGrid.appendChild(movieCard);
         });
       }
 
-      // Open movie details in a new tab
       function openMovieDetails(movieId) {
-        window.open(`movie.html?id=${movieId}`, '_blank');
+        window.location.href = `movie.html?id=${movieId}`;
       }
 
-      // Event listeners
       searchButton.addEventListener('click', async () => {
         const query = searchInput.value;
         if (query) {
@@ -298,7 +328,6 @@
         }
       });
 
-      // Load trending movies on page load
       window.addEventListener('load', async () => {
         const trendingMovies = await getTrendingMovies();
         displayMovies(trendingMovies);