r3hab/numerical-analysis
0
1<!DOCTYPE html>2<html lang="en">3 <head>4 <meta charset="UTF-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />6 <title>Movie Streamer</title>7 <style>8 * {9 margin: 0;10 padding: 0;11 box-sizing: border-box;12 }13 14 body {15 font-family: Arial, sans-serif;16 background-color: #1a1a1a;17 color: white;18 min-height: 100vh;19 display: flex;20 flex-direction: column;21 }22 23 .header {24 background-color: #2a2a2a;25 padding: 20px 0;26 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);27 }28 29 .header h1 {30 text-align: center;31 color: #007bff;32 font-size: 2rem;33 margin-bottom: 10px;34 }35 36 .container {37 max-width: 1200px;38 margin: 0 auto;39 padding: 20px;40 flex: 1;41 }42 43 .search-container {44 text-align: center;45 margin: 20px 0;46 }47 48 #searchInput {49 padding: 10px;50 width: 300px;51 border-radius: 5px;52 border: none;53 font-size: 16px;54 }55 56 #searchButton {57 padding: 10px 20px;58 background-color: #007bff;59 border: none;60 border-radius: 5px;61 color: white;62 cursor: pointer;63 margin-left: 10px;64 font-size: 16px;65 }66 67 .section-title {68 font-size: 24px;69 margin: 30px 0 20px 0;70 color: #fff;71 }72 73 .movie-grid {74 display: grid;75 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));76 gap: 20px;77 margin-top: 20px;78 }79 80 .movie-card {81 background-color: #2a2a2a;82 border-radius: 10px;83 overflow: hidden;84 cursor: pointer;85 transition: transform 0.3s;86 position: relative;87 }88 89 .movie-card:hover {90 transform: scale(1.05);91 }92 93 .movie-poster {94 width: 100%;95 height: 300px;96 object-fit: cover;97 }98 99 .movie-info {100 padding: 10px;101 }102 103 .movie-info h4 {104 margin-bottom: 8px;105 font-size: 16px;106 }107 108 .movie-info p {109 font-size: 14px;110 color: #ccc;111 line-height: 1.4;112 }113 114 .rating {115 color: #ffd700;116 margin-top: 8px;117 font-weight: bold;118 }119 120 .quick-play-button {121 position: absolute;122 bottom: 10px;123 right: 10px;124 background-color: #007bff;125 color: white;126 padding: 8px 15px;127 border-radius: 5px;128 font-size: 12px;129 opacity: 0;130 transition: opacity 0.3s;131 border: none;132 cursor: pointer;133 }134 135 .movie-card:hover .quick-play-button {136 opacity: 1;137 }138 139 .footer {140 background-color: #2a2a2a;141 padding: 20px;142 text-align: center;143 margin-top: 40px;144 }145 146 .footer p {147 color: #ccc;148 font-size: 14px;149 line-height: 1.6;150 }151 152 .footer a {153 color: #007bff;154 text-decoration: none;155 }156 157 .footer a:hover {158 text-decoration: underline;159 }160 161 @media (max-width: 768px) {162 .header h1 {163 font-size: 1.5rem;164 }165 166 .container {167 padding: 10px;168 }169 170 #searchInput {171 width: calc(100% - 20px);172 margin-bottom: 10px;173 }174 175 #searchButton {176 width: calc(100% - 20px);177 margin-left: 0;178 }179 180 .movie-grid {181 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));182 gap: 15px;183 }184 185 .movie-poster {186 height: 225px;187 }188 189 .movie-info h4 {190 font-size: 14px;191 }192 193 .movie-info p {194 font-size: 12px;195 }196 197 .section-title {198 font-size: 20px;199 margin: 20px 0 15px 0;200 }201 202 .quick-play-button {203 padding: 6px 12px;204 font-size: 10px;205 }206 }207 </style>208 </head>209 <body>210 <header class="header">211 <h1>SlimShadow Movies</h1>212 </header>213 214 <div class="container">215 <div class="search-container">216 <input217 type="text"218 id="searchInput"219 placeholder="Search for movies..."220 />221 <button id="searchButton">Search</button>222 </div>223 224 <h2 class="section-title">Trending Movies</h2>225 <div class="movie-grid" id="movieGrid"></div>226 </div>227 228 <footer class="footer">229 <p>230 © 2024 SlimShadow Organization. All rights reserved.231 </p>232 <p>233 This application is part of the SlimShadow Organization's suite of entertainment services.234 Movie data provided by <a href="https://www.themoviedb.org" target="_blank">TMDB</a>.235 </p>236 <p>237 For educational and demonstration purposes only. Not for commercial use.238 </p>239 </footer>240 241 <script>242 const TMDB_API_KEY = 'c8402e1c7b8bb9bcbf95b3fa3bad4d84';243 const CORS_PROXY = 'https://api.allorigins.win/raw?url=';244 const movieGrid = document.getElementById('movieGrid');245 const searchInput = document.getElementById('searchInput');246 const searchButton = document.getElementById('searchButton');247 248 async function getTrendingMovies() {249 try {250 const response = await fetch(251 `${CORS_PROXY}${encodeURIComponent(252 `https://api.themoviedb.org/3/trending/movie/day?api_key=${TMDB_API_KEY}`253 )}`254 );255 const data = await response.json();256 return data.results;257 } catch (error) {258 console.error('Error fetching trending movies:', error);259 }260 }261 262 async function searchMovies(query) {263 try {264 const response = await fetch(265 `${CORS_PROXY}${encodeURIComponent(266 `https://api.themoviedb.org/3/search/movie?api_key=${TMDB_API_KEY}&query=${query}`267 )}`268 );269 const data = await response.json();270 return data.results;271 } catch (error) {272 console.error('Error searching movies:', error);273 }274 }275 276 function displayMovies(movies) {277 movieGrid.innerHTML = '';278 movies.forEach((movie) => {279 const movieCard = document.createElement('div');280 movieCard.className = 'movie-card';281 movieCard.innerHTML = `282 <img class="movie-poster" 283 src="https://image.tmdb.org/t/p/w500${movie.poster_path || ''}" 284 onerror="this.src='https://via.placeholder.com/500x750?text=No+Poster'"285 alt="${movie.title}">286 <div class="movie-info">287 <h4>${movie.title}</h4>288 <p>${movie.overview ? movie.overview.substring(0, 80) + '...' : 'No description available'}</p>289 <div class="rating">★ ${movie.vote_average.toFixed(1)}</div>290 </div>291 <button class="quick-play-button" data-id="${movie.id}">Quick Play</button>292 `;293 294 movieCard.addEventListener('click', (e) => {295 if (!e.target.classList.contains('quick-play-button')) {296 openMovieDetails(movie.id);297 }298 });299 300 movieCard.querySelector('.quick-play-button').addEventListener('click', (e) => {301 e.stopPropagation();302 window.location.href = `movie.html?id=${movie.id}#moviePlayer`;303 });304 305 movieGrid.appendChild(movieCard);306 });307 }308 309 function openMovieDetails(movieId) {310 window.location.href = `movie.html?id=${movieId}`;311 }312 313 searchButton.addEventListener('click', async () => {314 const query = searchInput.value;315 if (query) {316 const movies = await searchMovies(query);317 displayMovies(movies);318 }319 });320 321 searchInput.addEventListener('keypress', async (e) => {322 if (e.key === 'Enter') {323 const query = searchInput.value;324 if (query) {325 const movies = await searchMovies(query);326 displayMovies(movies);327 }328 }329 });330 331 window.addEventListener('load', async () => {332 const trendingMovies = await getTrendingMovies();333 displayMovies(trendingMovies);334 });335 </script>336 </body>337</html>