Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Movie Details - SlimShadow Movies</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #1a1a1a; | |
| color: white; | |
| min-height: 100vh; | |
| } | |
| .header { | |
| background-color: #2a2a2a; | |
| padding: 20px 0; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); | |
| } | |
| .header h1 { | |
| text-align: center; | |
| color: #007bff; | |
| font-size: 2rem; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| .movie-details { | |
| display: grid; | |
| grid-template-columns: 300px 1fr; | |
| gap: 30px; | |
| margin-top: 30px; | |
| } | |
| .poster img { | |
| width: 100%; | |
| border-radius: 10px; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); | |
| } | |
| .info h2 { | |
| font-size: 2.5rem; | |
| margin-bottom: 10px; | |
| color: #fff; | |
| } | |
| .meta { | |
| display: flex; | |
| gap: 20px; | |
| margin-bottom: 20px; | |
| color: #ccc; | |
| } | |
| .rating { | |
| color: #ffd700; | |
| font-weight: bold; | |
| } | |
| .overview { | |
| font-size: 1.1rem; | |
| line-height: 1.6; | |
| margin-bottom: 30px; | |
| } | |
| .section { | |
| margin-bottom: 30px; | |
| } | |
| .section h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 15px; | |
| color: #007bff; | |
| } | |
| .cast-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); | |
| gap: 20px; | |
| } | |
| .cast-card { | |
| background-color: #2a2a2a; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| .cast-card img { | |
| width: 100%; | |
| height: 225px; | |
| object-fit: cover; | |
| } | |
| .cast-info { | |
| padding: 10px; | |
| } | |
| .cast-info h4 { | |
| margin-bottom: 5px; | |
| } | |
| .cast-info p { | |
| color: #ccc; | |
| font-size: 0.9rem; | |
| } | |
| .watch-button { | |
| display: inline-block; | |
| background-color: #007bff; | |
| color: white; | |
| padding: 12px 24px; | |
| border-radius: 5px; | |
| text-decoration: none; | |
| font-weight: bold; | |
| margin-top: 20px; | |
| transition: background-color 0.3s; | |
| cursor: pointer; | |
| } | |
| .watch-button:hover { | |
| background-color: #0056b3; | |
| } | |
| .photos-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 20px; | |
| margin-top: 20px; | |
| } | |
| .photo-item img { | |
| width: 100%; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: transform 0.3s; | |
| } | |
| .photo-item img:hover { | |
| transform: scale(1.05); | |
| } | |
| .video-container { | |
| margin-top: 50px; | |
| padding: 20px; | |
| background-color: #000; | |
| border-radius: 10px; | |
| } | |
| .video-wrapper { | |
| position: relative; | |
| padding-bottom: 56.25%; /* 16:9 aspect ratio */ | |
| height: 0; | |
| overflow: hidden; | |
| max-width: 100%; | |
| border-radius: 8px; | |
| } | |
| .video-wrapper iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| @media (max-width: 768px) { | |
| .movie-details { | |
| grid-template-columns: 1fr; | |
| } | |
| .poster { | |
| max-width: 300px; | |
| margin: 0 auto; | |
| } | |
| .cast-grid { | |
| grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); | |
| } | |
| .info h2 { | |
| font-size: 2rem; | |
| } | |
| .meta { | |
| flex-wrap: wrap; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <h1>SlimShadow Movies</h1> | |
| </header> | |
| <div class="container"> | |
| <div id="movieContent"></div> | |
| <div class="video-container" id="moviePlayer"> | |
| <div class="video-wrapper"> | |
| <iframe id="movieFrame" allowfullscreen></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const TMDB_API_KEY = 'c8402e1c7b8bb9bcbf95b3fa3bad4d84'; | |
| const CORS_PROXY = 'https://api.allorigins.win/raw?url='; | |
| async function getMovieDetails(movieId) { | |
| try { | |
| const [movieData, credits, images] = await Promise.all([ | |
| fetch(`${CORS_PROXY}${encodeURIComponent( | |
| `https://api.themoviedb.org/3/movie/${movieId}?api_key=${TMDB_API_KEY}` | |
| )}`).then(res => res.json()), | |
| fetch(`${CORS_PROXY}${encodeURIComponent( | |
| `https://api.themoviedb.org/3/movie/${movieId}/credits?api_key=${TMDB_API_KEY}` | |
| )}`).then(res => res.json()), | |
| fetch(`${CORS_PROXY}${encodeURIComponent( | |
| `https://api.themoviedb.org/3/movie/${movieId}/images?api_key=${TMDB_API_KEY}` | |
| )}`).then(res => res.json()) | |
| ]); | |
| displayMovieDetails(movieData, credits, images); | |
| } catch (error) { | |
| console.error('Error fetching movie details:', error); | |
| } | |
| } | |
| function displayMovieDetails(movie, credits, images) { | |
| const content = document.getElementById('movieContent'); | |
| const movieFrame = document.getElementById('movieFrame'); | |
| // Set up the video player | |
| movieFrame.src = `https://vidsrc.in/embed/movie/${movie.id}`; | |
| const revenue = new Intl.NumberFormat('en-US', { | |
| style: 'currency', | |
| currency: 'USD' | |
| }).format(movie.revenue); | |
| const budget = new Intl.NumberFormat('en-US', { | |
| style: 'currency', | |
| currency: 'USD' | |
| }).format(movie.budget); | |
| content.innerHTML = ` | |
| <div class="movie-details"> | |
| <div class="poster"> | |
| <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" | |
| alt="${movie.title}" | |
| onerror="this.src='https://via.placeholder.com/500x750?text=No+Poster'"> | |
| <a href="#moviePlayer" class="watch-button">Watch Movie</a> | |
| </div> | |
| <div class="info"> | |
| <h2>${movie.title}</h2> | |
| <div class="meta"> | |
| <span>${movie.release_date.split('-')[0]}</span> | |
| <span>${movie.runtime} min</span> | |
| <span class="rating">★ ${movie.vote_average.toFixed(1)}</span> | |
| </div> | |
| <p class="overview">${movie.overview}</p> | |
| <div class="section"> | |
| <h3>Movie Info</h3> | |
| <p><strong>Status:</strong> ${movie.status}</p> | |
| <p><strong>Budget:</strong> ${budget}</p> | |
| <p><strong>Revenue:</strong> ${revenue}</p> | |
| <p><strong>Genres:</strong> ${movie.genres.map(g => g.name).join(', ')}</p> | |
| </div> | |
| <div class="section"> | |
| <h3>Cast</h3> | |
| <div class="cast-grid"> | |
| ${credits.cast.slice(0, 6).map(actor => ` | |
| <div class="cast-card"> | |
| <img src="https://image.tmdb.org/t/p/w185${actor.profile_path}" | |
| alt="${actor.name}" | |
| onerror="this.src='https://via.placeholder.com/185x278?text=No+Image'"> | |
| <div class="cast-info"> | |
| <h4>${actor.name}</h4> | |
| <p>${actor.character}</p> | |
| </div> | |
| </div> | |
| `).join('')} | |
| </div> | |
| </div> | |
| <div class="section"> | |
| <h3>Photos</h3> | |
| <div class="photos-grid"> | |
| ${images.backdrops.slice(0, 6).map(image => ` | |
| <div class="photo-item"> | |
| <img src="https://image.tmdb.org/t/p/w500${image.file_path}" | |
| alt="Movie still" | |
| loading="lazy"> | |
| </div> | |
| `).join('')} | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| // Get movie ID from URL parameters | |
| const urlParams = new URLSearchParams(window.location.search); | |
| const movieId = urlParams.get('id'); | |
| if (movieId) { | |
| getMovieDetails(movieId); | |
| } | |
| </script> | |
| </body> | |
| </html> |