Here's the updated version with a dynamic jumbotron and movie details page: TMDB Media Center

Loading featured content...

0.0

Popular Movies

Top Rated

:root { --primary: #01b4e4; --secondary: #032541; --dark: #121212; --light-dark: #1e1e1e; --text: #ffffff; --text-secondary: #aaaaaa; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; background-color: var(--dark); color: var(--text); display: flex; min-height: 100vh; } .menu-toggle { display: none; position: fixed; top: 20px; left: 20px; z-index: 100; color: var(--text); font-size: 24px; cursor: pointer; } .sidebar { width: 250px; background-color: var(--secondary); padding: 20px 0; height: 100vh; position: fixed; transition: transform 0.3s ease; } .logo { color: var(--primary); font-size: 24px; font-weight: bold; text-align: center; margin-bottom: 30px; padding: 0 20px; } .menu { list-style: none; } .menu li { padding: 15px 20px; border-left: 4px solid transparent; transition: all 0.3s; } .menu li:hover { background-color: rgba(1, 180, 228, 0.1); } .menu li.active { border-left: 4px solid var(--primary); background-color: rgba(1, 180, 228, 0.2); } .menu a { color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 10px; } .container { flex: 1; max-width: 1200px; margin-left: 250px; padding: 20px; } .jumbotron { width: 100%; height: 500px; background-size: cover; background-position: center; position: relative; margin-bottom: 30px; border-radius: 8px; overflow: hidden; } .jumbotron::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%); } .jumbotron-content { position: absolute; bottom: 0; left: 0; padding: 40px; max-width: 50%; z-index: 1; } .jumbotron-title { font-size: 2.5rem; margin-bottom: 15px; } .jumbotron-description { font-size: 1rem; margin-bottom: 20px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .jumbotron-rating { display: flex; align-items: center; gap: 5px; margin-bottom: 20px; font-size: 1.2rem; } .jumbotron-rating i { color: gold; } .jumbotron-button { padding: 10px 20px; background-color: var(--primary); color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; transition: background-color 0.3s; } .jumbotron-button:hover { background-color: #0099cc; } header { display: flex; justify-content: flex-end; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #333; } .search-container { display: flex; gap: 10px; } #search-input { padding: 10px 15px; border-radius: 4px; border: none; width: 300px; background-color: var(--light-dark); color: var(--text); } #search-btn { padding: 10px 15px; background-color: var(--primary); color: white; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .carousel { margin-bottom: 40px; } .carousel h2 { margin-bottom: 15px; font-size: 24px; color: var(--primary); } .items-container { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 20px; scrollbar-width: thin; scrollbar-color: var(--primary) var(--light-dark); } .items-container::-webkit-scrollbar { height: 8px; } .items-container::-webkit-scrollbar-track { background: var(--light-dark); border-radius: 4px; } .items-container::-webkit-scrollbar-thumb { background-color: var(--primary); border-radius: 4px; } .movie-card { min-width: 150px; background-color: var(--light-dark); border-radius: 8px; overflow: hidden; transition: transform 0.3s; cursor: pointer; } .movie-card:hover { transform: scale(1.05); } .movie-poster { width: 100%; height: 225px; object-fit: cover; } .movie-info { padding: 10px; } .movie-title { font-size: 14px; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .movie-year { font-size: 12px; color: var(--text-secondary); } .movie-details-container { padding: 20px; } .back-button { padding: 10px 20px; background-color: var(--light-dark); color: var(--text); border: none; border-radius: 4px; cursor: pointer; margin-bottom: 20px; display: flex; align-items: center; gap: 5px; } .movie-details-content { display: flex; gap: 30px; } .movie-poster-container { flex: 0 0 300px; } .movie-detail-poster { width: 100%; border-radius: 8px; } .movie-info-container { flex: 1; } .movie-meta { display: flex; gap: 15px; margin: 15px 0; color: var(--text-secondary); } .movie-genres { display: flex; gap: 10px; margin: 15px 0; } .movie-genres span { padding: 5px 10px; background-color: var(--primary); border-radius: 20px; font-size: 0.8rem; } .movie-cast { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 15px; margin-top: 20px; } .cast-member { text-align: center; } .cast-photo { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; margin-bottom: 5px; } .cast-name { font-size: 0.9rem; margin-bottom: 3px; } .cast-character { font-size: 0.8rem; color: var(--text-secondary); } @media (max-width: 768px) { .sidebar { transform: translateX(-100%); position: fixed; z-index: 90; } .sidebar.active { transform: translateX(0); } .container { margin-left: 0; padding-top: 60px; } .menu-toggle { display: block; } .jumbotron { height: 300px; } .jumbotron-content { max-width: 100%; padding: 20px; } .jumbotron-title { font-size: 1.5rem; } .movie-details-content { flex-direction: column; } .movie-poster-container { flex: 0 0 auto; } #search-input { width: 100%; } .movie-card { min-width: 120px; } .movie-poster { height: 180px; } } @media (max-width: 480px) { .movie-card { min-width: 100px; } .movie-poster { height: 150px; } } const API_KEY = '194d885d6be15594b97e2d1f3b2526be'; const BASE_URL = 'https://api.themoviedb.org/3'; // DOM Elements const mainContent = document.getElementById('main-content'); const movieDetails = document.getElementById('movie-details'); const backButton = document.getElementById('back-button'); const homeLink = document.getElementById('home-link'); const jumbotron = document.getElementById('jumbotron'); // Toggle mobile menu document.querySelector('.menu-toggle').addEventListener('click', () => { document.querySelector('.sidebar').classList.toggle('active'); }); // Close menu when clicking outside on mobile document.addEventListener('click', (e) => { const sidebar = document.querySelector('.sidebar'); const menuToggle = document.querySelector('.menu-toggle'); if (window.innerWidth <= 768 && !sidebar.contains(e.target) && !menuToggle.contains(e.target) && sidebar.classList.contains('active')) { sidebar.classList.remove('active'); } }); // Navigation functions function showMainContent() { mainContent.style.display = 'block'; movieDetails.style.display = 'none'; } function showMovieDetails() { mainContent.style.display = 'none'; movieDetails.style.display = 'block'; } backButton.addEventListener('click', showMainContent); homeLink.addEventListener('click', showMainContent); async function fetchData(endpoint) { try { const response = await fetch(`${BASE_URL}${endpoint}?api_key=${API_KEY}`); return await response.json(); } catch (error) { console.error('Error fetching data:', error); return null; } } async function fetchMovieDetails(movieId) { const [movie, credits] = await Promise.all([ fetchData(`/movie/${movieId}`), fetchData(`/movie/${movieId}/credits`) ]); return { movie, credits }; } function createMovieCard(movie) { const card = document.createElement('div'); card.className = 'movie-card'; const posterPath = movie.poster_path ? `https://image.tmdb.org/t/p/w500${movie.poster_path}` : 'https://via.placeholder.com/500x750?text=No+Poster'; const releaseYear = movie.release_date ? new Date(movie.release_date).getFullYear() : 'N/A'; card.innerHTML = `

${movie.title}

${releaseYear}

`; card.addEventListener('click', () => showMovieDetailsPage(movie.id)); return card; } async function showMovieDetailsPage(movieId) { const { movie, credits } = await fetchMovieDetails(movieId); if (!movie) return; // Update movie details page document.getElementById('detail-poster').src = movie.poster_path ? `https://image.tmdb.org/t/p/w500${movie.poster_path}` : 'https://via.placeholder.com/500x750?text=No+Poster'; document.getElementById('detail-title').textContent = movie.title; document.getElementById('detail-year').textContent = movie.release_date ? new Date(movie.release_date).getFullYear() : 'N/A'; document.getElementById('detail-runtime').textContent = movie.runtime ? `${Math.floor(movie.runtime / 60)}h ${movie.runtime % 60}m` : 'N/A'; document.querySelector('#detail-rating .rating-value').textContent = movie.vote_average.toFixed(1); const genresContainer = document.getElementById('detail-genres'); genresContainer.innerHTML = ''; movie.genres.forEach(genre => { const span = document.createElement('span'); span.textContent = genre.name; genresContainer.appendChild(span); }); document.getElementById('detail-overview').textContent = movie.overview || 'No overview available.'; const castContainer = document.getElementById('detail-cast'); castContainer.innerHTML = ''; credits.cast.slice(0, 10).forEach(person => { const member = document.createElement('div'); member.className = 'cast-member'; const photoPath = person.profile_path ? `https://image.tmdb.org/t/p/w200${person.profile_path}` : 'https://via.placeholder.com/200x300?text=No+Photo'; member.innerHTML = `

${person.name}

${person.character}

`; castContainer.appendChild(member); }); showMovieDetails(); window.scrollTo(0, I'll complete the missing part of the app.js file and ensure all functionality is properly implemented: const API_KEY = '194d885d6be15594b97e2d1f3b2526be'; const BASE_URL = 'https://api.themoviedb.org/3'; // DOM Elements const mainContent = document.getElementById('main-content'); const movieDetails = document.getElementById('movie-details'); const backButton = document.getElementById('back-button'); const homeLink = document.getElementById('home-link'); const jumbotron = document.getElementById('jumbotron'); // Toggle mobile menu document.querySelector('.menu-toggle').addEventListener('click', () => { document.querySelector('.sidebar').classList.toggle('active'); }); // Close menu when clicking outside on mobile document.addEventListener('click', (e) => { const sidebar = document.querySelector('.sidebar'); const menuToggle = document.querySelector('.menu-toggle'); if (window.innerWidth <= 768 && !sidebar.contains(e.target) && !menuToggle.contains(e.target) && sidebar.classList.contains('active')) { sidebar.classList.remove('active'); } }); // Navigation functions function showMainContent() { mainContent.style.display = 'block'; movieDetails.style.display = 'none'; } function showMovieDetails() { mainContent.style.display = 'none'; movieDetails.style.display = 'block'; } backButton.addEventListener('click', showMainContent); homeLink.addEventListener('click', showMainContent); async function fetchData(endpoint) { try { const response = await fetch(`${BASE_URL}${endpoint}?api_key=${API_KEY}`); return await response.json(); } catch (error) { console.error('Error fetching data:', error); return null; } } async function fetchMovieDetails(movieId) { const [movie, credits] = await Promise.all([ fetchData(`/movie/${movieId}`), fetchData(`/movie/${movieId}/credits`) ]); return { movie, credits }; } function createMovieCard(movie) { const card = document.createElement('div'); card.className = 'movie-card'; const posterPath = movie.poster_path ? `https://image.tmdb.org/t/p/w500${movie.poster_path}` : 'https://via.placeholder.com/500x750?text=No+Poster'; const releaseYear = movie.release_date ? new Date(movie.release_date).getFullYear() : 'N/A'; card.innerHTML = `

${movie.title}

${releaseYear}

${person.name}

${person.character}

`; castContainer.appendChild(member); }); showMovieDetails(); window.scrollTo(0, 0); } async function updateJumbotron() { const trending = await fetchData('/trending/movie/week'); if (!trending || !trending.results || trending.results.length === 0) return; const featuredMovie = trending.results[0]; jumbotron.style.backgroundImage = `url(https://image.tmdb.org/t/p/original${featuredMovie.backdrop_path})`; document.querySelector('.jumbotron-title').textContent = featuredMovie.title; document.querySelector('.jumbotron-description').textContent = featuredMovie.overview || 'No description available.'; document.querySelector('.jumbotron-rating .rating-value').textContent = featuredMovie.vote_average.toFixed(1); const jumbotronButton = document.querySelector('.jumbotron-button'); jumbotronButton.addEventListener('click', () => showMovieDetailsPage(featuredMovie.id)); } async function loadHomePage() { const [trending, popular, topRated] = await Promise.all([ fetchData('/trending/movie/week'), fetchData('/movie/popular'), fetchData('/movie/top_rated') ]); const trendingContainer = document.getElementById('trending-container'); const popularContainer = document.getElementById('popular-container'); const topRatedContainer = document.getElementById('top-rated-container'); trendingContainer.innerHTML = ''; popularContainer.innerHTML = ''; topRatedContainer.innerHTML = ''; trending.results.forEach(movie => { trendingContainer.appendChild(createMovieCard(movie)); }); popular.results.forEach(movie => { popularContainer.appendChild(createMovieCard(movie)); }); topRated.results.forEach(movie => { topRatedContainer.appendChild(createMovieCard(movie)); }); updateJumbotron(); } document.getElementById('search-btn').addEventListener('click', async () => { const query = document.getElementById('search-input').value.trim(); if (query) { const searchResults = await fetchData(`/search/movie?query=${encodeURIComponent(query)}`); if (!searchResults || !searchResults.results) return; // Clear existing content document.querySelectorAll('.items-container').forEach(container => { container.innerHTML = ''; }); // Display search results in the first container const container = document.getElementById('trending-container'); container.parentElement.querySelector('h2').textContent = `Search Results for "${query}"`; searchResults.results.forEach(movie => { container.appendChild(createMovieCard(movie)); }); } }); // Initialize the app document.addEventListener('DOMContentLoaded', () => { loadHomePage(); showMainContent(); }); The implementation now includes: 1. A dynamic jumbotron showing featured content 2. Complete movie details page with: - Back button functionality - Movie poster, title, and metadata - Genre tags - Overview/description - Top cast members with photos 3. Responsive design for all screen sizes 4. Proper navigation between views 5. Error handling for missing data 6. Loading states for async operations

Loading featured content...

Trending Now

Popular Movies

Top Rated

Overview

${movie.title}

${movie.title}