Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Movie Streamer</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #1a1a1a; | |
| color: white; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .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; | |
| margin-bottom: 10px; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| flex: 1; | |
| } | |
| .search-container { | |
| text-align: center; | |
| margin: 20px 0; | |
| } | |
| #searchInput { | |
| padding: 10px; | |
| width: 300px; | |
| border-radius: 5px; | |
| border: none; | |
| font-size: 16px; | |
| } | |
| #searchButton { | |
| padding: 10px 20px; | |
| background-color: #007bff; | |
| border: none; | |
| border-radius: 5px; | |
| color: white; | |
| cursor: pointer; | |
| margin-left: 10px; | |
| font-size: 16px; | |
| } | |
| .section-title { | |
| font-size: 24px; | |
| margin: 30px 0 20px 0; | |
| color: #fff; | |
| } | |
| .movie-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 20px; | |
| margin-top: 20px; | |
| } | |
| .movie-card { | |
| background-color: #2a2a2a; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| cursor: pointer; | |
| transition: transform 0.3s; | |
| position: relative; | |
| } | |
| .movie-card:hover { | |
| transform: scale(1.05); | |
| } | |
| .movie-poster { | |
| width: 100%; | |
| height: 300px; | |
| object-fit: cover; | |
| } | |
| .movie-info { | |
| padding: 10px; | |
| } | |
| .movie-info h4 { | |
| margin-bottom: 8px; | |
| font-size: 16px; | |
| } | |
| .movie-info p { | |
| font-size: 14px; | |
| color: #ccc; | |
| line-height: 1.4; | |
| } | |
| .rating { | |
| color: #ffd700; | |
| margin-top: 8px; | |
| 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; | |
| text-align: center; | |
| margin-top: 40px; | |
| } | |
| .footer p { | |
| color: #ccc; | |
| font-size: 14px; | |
| line-height: 1.6; | |
| } | |
| .footer a { | |
| color: #007bff; | |
| text-decoration: none; | |
| } | |
| .footer a:hover { | |
| text-decoration: underline; | |
| } | |
| @media (max-width: 768px) { | |
| .header h1 { | |
| font-size: 1.5rem; | |
| } | |
| .container { | |
| padding: 10px; | |
| } | |
| #searchInput { | |
| width: calc(100% - 20px); | |
| margin-bottom: 10px; | |
| } | |
| #searchButton { | |
| width: calc(100% - 20px); | |
| margin-left: 0; | |
| } | |
| .movie-grid { | |
| grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); | |
| gap: 15px; | |
| } | |
| .movie-poster { | |
| height: 225px; | |
| } | |
| .movie-info h4 { | |
| font-size: 14px; | |
| } | |
| .movie-info p { | |
| font-size: 12px; | |
| } | |
| .section-title { | |
| font-size: 20px; | |
| margin: 20px 0 15px 0; | |
| } | |
| .quick-play-button { | |
| padding: 6px 12px; | |
| font-size: 10px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <h1>SlimShadow Movies</h1> | |
| </header> | |
| <div class="container"> | |
| <div class="search-container"> | |
| <input | |
| type="text" | |
| id="searchInput" | |
| placeholder="Search for movies..." | |
| /> | |
| <button id="searchButton">Search</button> | |
| </div> | |
| <h2 class="section-title">Trending Movies</h2> | |
| <div class="movie-grid" id="movieGrid"></div> | |
| </div> | |
| <footer class="footer"> | |
| <p> | |
| © 2024 SlimShadow Organization. All rights reserved. | |
| </p> | |
| <p> | |
| This application is part of the SlimShadow Organization's suite of entertainment services. | |
| Movie data provided by <a href="https://www.themoviedb.org" target="_blank">TMDB</a>. | |
| </p> | |
| <p> | |
| For educational and demonstration purposes only. Not for commercial use. | |
| </p> | |
| </footer> | |
| <script> | |
| const TMDB_API_KEY = 'c8402e1c7b8bb9bcbf95b3fa3bad4d84'; | |
| const CORS_PROXY = 'https://api.allorigins.win/raw?url='; | |
| const movieGrid = document.getElementById('movieGrid'); | |
| const searchInput = document.getElementById('searchInput'); | |
| const searchButton = document.getElementById('searchButton'); | |
| async function getTrendingMovies() { | |
| try { | |
| const response = await fetch( | |
| `${CORS_PROXY}${encodeURIComponent( | |
| `https://api.themoviedb.org/3/trending/movie/day?api_key=${TMDB_API_KEY}` | |
| )}` | |
| ); | |
| const data = await response.json(); | |
| return data.results; | |
| } catch (error) { | |
| console.error('Error fetching trending movies:', error); | |
| } | |
| } | |
| async function searchMovies(query) { | |
| try { | |
| const response = await fetch( | |
| `${CORS_PROXY}${encodeURIComponent( | |
| `https://api.themoviedb.org/3/search/movie?api_key=${TMDB_API_KEY}&query=${query}` | |
| )}` | |
| ); | |
| const data = await response.json(); | |
| return data.results; | |
| } catch (error) { | |
| console.error('Error searching movies:', error); | |
| } | |
| } | |
| function displayMovies(movies) { | |
| movieGrid.innerHTML = ''; | |
| movies.forEach((movie) => { | |
| const movieCard = document.createElement('div'); | |
| movieCard.className = 'movie-card'; | |
| movieCard.innerHTML = ` | |
| <img class="movie-poster" | |
| src="https://image.tmdb.org/t/p/w500${movie.poster_path || ''}" | |
| onerror="this.src='https://via.placeholder.com/500x750?text=No+Poster'" | |
| alt="${movie.title}"> | |
| <div class="movie-info"> | |
| <h4>${movie.title}</h4> | |
| <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', (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); | |
| }); | |
| } | |
| function openMovieDetails(movieId) { | |
| window.location.href = `movie.html?id=${movieId}`; | |
| } | |
| searchButton.addEventListener('click', async () => { | |
| const query = searchInput.value; | |
| if (query) { | |
| const movies = await searchMovies(query); | |
| displayMovies(movies); | |
| } | |
| }); | |
| searchInput.addEventListener('keypress', async (e) => { | |
| if (e.key === 'Enter') { | |
| const query = searchInput.value; | |
| if (query) { | |
| const movies = await searchMovies(query); | |
| displayMovies(movies); | |
| } | |
| } | |
| }); | |
| window.addEventListener('load', async () => { | |
| const trendingMovies = await getTrendingMovies(); | |
| displayMovies(trendingMovies); | |
| }); | |
| </script> | |
| </body> | |
| </html> |