Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CineMatch - Movie Recommender</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #0f172a; | |
| color: #e2e8f0; | |
| } | |
| .movie-card { | |
| transition: all 0.3s ease; | |
| transform-style: preserve-3d; | |
| perspective: 1000px; | |
| } | |
| .movie-card:hover { | |
| transform: translateY(-10px) scale(1.02); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5); | |
| } | |
| .movie-poster { | |
| transition: all 0.5s ease; | |
| } | |
| .movie-poster:hover { | |
| transform: rotateY(15deg); | |
| } | |
| .genre-chip { | |
| transition: all 0.2s ease; | |
| } | |
| .genre-chip:hover { | |
| transform: scale(1.05); | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease forwards; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="min-h-screen"> | |
| <!-- Header --> | |
| <header class="bg-gradient-to-r from-blue-900 to-indigo-900 py-6 px-4 shadow-lg"> | |
| <div class="container mx-auto flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-film text-3xl text-blue-400 mr-3"></i> | |
| <h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-300 to-indigo-200"> | |
| CineMatch | |
| </h1> | |
| </div> | |
| <div class="relative w-full md:w-96"> | |
| <input type="text" id="search-input" placeholder="Search for movies..." | |
| class="w-full py-2 px-4 pr-10 rounded-full bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <button id="search-btn" class="absolute right-3 top-2 text-gray-400 hover:text-blue-400"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Hero Section --> | |
| <section class="mb-12 text-center"> | |
| <h2 class="text-4xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500"> | |
| Discover Your Next Favorite Movie | |
| </h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> | |
| Our AI-powered recommendation system analyzes your preferences to suggest perfect movies tailored just for you. | |
| </p> | |
| </section> | |
| <!-- Recommendation Controls --> | |
| <section class="mb-12 bg-gray-800 rounded-xl p-6 shadow-lg"> | |
| <h3 class="text-2xl font-semibold mb-6 text-blue-300 flex items-center"> | |
| <i class="fas fa-sliders-h mr-3"></i> Recommendation Preferences | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Genre Selection --> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <h4 class="text-lg font-medium mb-3 text-gray-200">Select Genres</h4> | |
| <div class="flex flex-wrap gap-2" id="genre-container"> | |
| <!-- Genres will be added here by JavaScript --> | |
| </div> | |
| </div> | |
| <!-- Decade Selection --> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <h4 class="text-lg font-medium mb-3 text-gray-200">Release Decade</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="decade-btn px-3 py-1 rounded-full bg-gray-600 hover:bg-blue-600 text-sm" data-decade="2020">2020s</button> | |
| <button class="decade-btn px-3 py-1 rounded-full bg-gray-600 hover:bg-blue-600 text-sm" data-decade="2010">2010s</button> | |
| <button class="decade-btn px-3 py-1 rounded-full bg-gray-600 hover:bg-blue-600 text-sm" data-decade="2000">2000s</button> | |
| <button class="decade-btn px-3 py-1 rounded-full bg-gray-600 hover:bg-blue-600 text-sm" data-decade="1990">1990s</button> | |
| <button class="decade-btn px-3 py-1 rounded-full bg-gray-600 hover:bg-blue-600 text-sm" data-decade="1980">1980s</button> | |
| </div> | |
| </div> | |
| <!-- Rating Selection --> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <h4 class="text-lg font-medium mb-3 text-gray-200">Minimum Rating</h4> | |
| <div class="flex items-center"> | |
| <input type="range" id="rating-slider" min="0" max="10" step="0.5" value="7" class="w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer"> | |
| <span id="rating-value" class="ml-3 text-blue-400 font-medium">7.0</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-center"> | |
| <button id="recommend-btn" class="px-8 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-full font-medium hover:from-blue-500 hover:to-indigo-500 transition-all flex items-center"> | |
| <i class="fas fa-magic mr-2"></i> Get Recommendations | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Recommendations Section --> | |
| <section> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-2xl font-semibold text-blue-300 flex items-center"> | |
| <i class="fas fa-star mr-3"></i> Recommended For You | |
| </h3> | |
| <div class="flex items-center"> | |
| <span class="text-sm text-gray-400 mr-2">Sort by:</span> | |
| <select id="sort-select" class="bg-gray-800 text-white rounded px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"> | |
| <option value="relevance">Relevance</option> | |
| <option value="rating">Rating</option> | |
| <option value="year">Release Year</option> | |
| <option value="popularity">Popularity</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div id="recommendations-container" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> | |
| <!-- Recommendations will be loaded here --> | |
| <div class="text-center py-10 text-gray-500"> | |
| <i class="fas fa-film text-5xl mb-4 opacity-30"></i> | |
| <p>Select your preferences and click "Get Recommendations" to see your personalized movie suggestions.</p> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center" id="load-more-container"> | |
| <button id="load-more-btn" class="px-6 py-2 border border-blue-500 text-blue-400 rounded-full hover:bg-blue-900 transition-all hidden"> | |
| Load More <i class="fas fa-chevron-down ml-1"></i> | |
| </button> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 py-8 px-4 border-t border-gray-800"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h2 class="text-xl font-bold text-blue-400 flex items-center"> | |
| <i class="fas fa-film mr-2"></i> CineMatch | |
| </h2> | |
| <p class="text-gray-400 text-sm mt-1">Your personal movie recommendation engine</p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-blue-400"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400"><i class="fab fa-github"></i></a> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center text-gray-500 text-sm"> | |
| <p>© 2023 CineMatch. All movie data is provided by TMDB API.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Sample movie data (in a real app, this would come from an API) | |
| const movieDatabase = [ | |
| { | |
| id: 1, | |
| title: "Inception", | |
| year: 2010, | |
| rating: 8.8, | |
| genres: ["Sci-Fi", "Action", "Thriller"], | |
| poster: "https://image.tmdb.org/t/p/w500/9gk7adHYeDvHkCSEqAvQNLV5Uge.jpg", | |
| overview: "A thief who steals corporate secrets through the use of dream-sharing technology is given the inverse task of planting an idea into the mind of a C.E.O.", | |
| popularity: 89.5 | |
| }, | |
| { | |
| id: 2, | |
| title: "The Shawshank Redemption", | |
| year: 1994, | |
| rating: 9.3, | |
| genres: ["Drama"], | |
| poster: "https://image.tmdb.org/t/p/w500/q6y0Go1tsGEsmtFryDOJo3dEmqu.jpg", | |
| overview: "Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.", | |
| popularity: 92.1 | |
| }, | |
| { | |
| id: 3, | |
| title: "The Dark Knight", | |
| year: 2008, | |
| rating: 9.0, | |
| genres: ["Action", "Crime", "Drama"], | |
| poster: "https://image.tmdb.org/t/p/w500/qJ2tW6WMUDux911r6m7haRef0WH.jpg", | |
| overview: "When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, Batman must accept one of the greatest psychological and physical tests of his ability to fight injustice.", | |
| popularity: 95.3 | |
| }, | |
| { | |
| id: 4, | |
| title: "Pulp Fiction", | |
| year: 1994, | |
| rating: 8.9, | |
| genres: ["Crime", "Drama"], | |
| poster: "https://image.tmdb.org/t/p/w500/d5iIlFn5s0ImszYzBPb8JPIfbXD.jpg", | |
| overview: "The lives of two mob hitmen, a boxer, a gangster and his wife, and a pair of diner bandits intertwine in four tales of violence and redemption.", | |
| popularity: 87.2 | |
| }, | |
| { | |
| id: 5, | |
| title: "Parasite", | |
| year: 2019, | |
| rating: 8.5, | |
| genres: ["Drama", "Thriller"], | |
| poster: "https://image.tmdb.org/t/p/w500/7IiTTgloJzvGI1TAYymCfbfl3vT.jpg", | |
| overview: "Greed and class discrimination threaten the newly formed symbiotic relationship between the wealthy Park family and the destitute Kim clan.", | |
| popularity: 84.9 | |
| }, | |
| { | |
| id: 6, | |
| title: "Interstellar", | |
| year: 2014, | |
| rating: 8.6, | |
| genres: ["Sci-Fi", "Drama"], | |
| poster: "https://image.tmdb.org/t/p/w500/gEU2QniE6E77NI6lCU6MxlNBvIx.jpg", | |
| overview: "A team of explorers travel through a wormhole in space in an attempt to ensure humanity's survival.", | |
| popularity: 88.7 | |
| }, | |
| { | |
| id: 7, | |
| title: "The Godfather", | |
| year: 1972, | |
| rating: 9.2, | |
| genres: ["Crime", "Drama"], | |
| poster: "https://image.tmdb.org/t/p/w500/3bhkrj58Vtu7enYsRolD1fZdja1.jpg", | |
| overview: "The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son.", | |
| popularity: 91.8 | |
| }, | |
| { | |
| id: 8, | |
| title: "Fight Club", | |
| year: 1999, | |
| rating: 8.8, | |
| genres: ["Drama"], | |
| poster: "https://image.tmdb.org/t/p/w500/pB8BM7pdSp6B6Ih7QZ4DrQ3PmJK.jpg", | |
| overview: "An insomniac office worker and a devil-may-care soapmaker form an underground fight club that evolves into something much, much more.", | |
| popularity: 86.4 | |
| } | |
| ]; | |
| // All available genres from our sample data | |
| const allGenres = [...new Set(movieDatabase.flatMap(movie => movie.genres))]; | |
| // DOM elements | |
| const genreContainer = document.getElementById('genre-container'); | |
| const recommendBtn = document.getElementById('recommend-btn'); | |
| const recommendationsContainer = document.getElementById('recommendations-container'); | |
| const ratingSlider = document.getElementById('rating-slider'); | |
| const ratingValue = document.getElementById('rating-value'); | |
| const decadeBtns = document.querySelectorAll('.decade-btn'); | |
| const sortSelect = document.getElementById('sort-select'); | |
| const loadMoreBtn = document.getElementById('load-more-btn'); | |
| const searchInput = document.getElementById('search-input'); | |
| const searchBtn = document.getElementById('search-btn'); | |
| // State | |
| let selectedGenres = []; | |
| let selectedDecade = null; | |
| let currentMinRating = 7; | |
| let currentSort = 'relevance'; | |
| let currentPage = 1; | |
| let moviesPerPage = 4; | |
| let currentSearchTerm = ''; | |
| // Initialize the app | |
| function init() { | |
| renderGenreButtons(); | |
| setupEventListeners(); | |
| updateRatingDisplay(); | |
| } | |
| // Render genre selection buttons | |
| function renderGenreButtons() { | |
| genreContainer.innerHTML = ''; | |
| allGenres.forEach(genre => { | |
| const button = document.createElement('button'); | |
| button.className = 'genre-chip px-3 py-1 rounded-full bg-gray-600 hover:bg-blue-600 text-sm'; | |
| button.textContent = genre; | |
| button.dataset.genre = genre; | |
| genreContainer.appendChild(button); | |
| }); | |
| } | |
| // Set up event listeners | |
| function setupEventListeners() { | |
| // Genre selection | |
| genreContainer.addEventListener('click', function(e) { | |
| if (e.target.classList.contains('genre-chip')) { | |
| const genre = e.target.dataset.genre; | |
| if (selectedGenres.includes(genre)) { | |
| selectedGenres = selectedGenres.filter(g => g !== genre); | |
| e.target.classList.remove('bg-blue-600', 'glow'); | |
| e.target.classList.add('bg-gray-600'); | |
| } else { | |
| selectedGenres.push(genre); | |
| e.target.classList.remove('bg-gray-600'); | |
| e.target.classList.add('bg-blue-600', 'glow'); | |
| } | |
| } | |
| }); | |
| // Decade selection | |
| decadeBtns.forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| if (selectedDecade === this.dataset.decade) { | |
| selectedDecade = null; | |
| this.classList.remove('bg-blue-600', 'glow'); | |
| this.classList.add('bg-gray-600'); | |
| } else { | |
| selectedDecade = this.dataset.decade; | |
| decadeBtns.forEach(b => { | |
| b.classList.remove('bg-blue-600', 'glow'); | |
| b.classList.add('bg-gray-600'); | |
| }); | |
| this.classList.remove('bg-gray-600'); | |
| this.classList.add('bg-blue-600', 'glow'); | |
| } | |
| }); | |
| }); | |
| // Rating slider | |
| ratingSlider.addEventListener('input', function() { | |
| currentMinRating = parseFloat(this.value); | |
| updateRatingDisplay(); | |
| }); | |
| // Recommend button | |
| recommendBtn.addEventListener('click', function() { | |
| currentPage = 1; | |
| getRecommendations(); | |
| }); | |
| // Sort selection | |
| sortSelect.addEventListener('change', function() { | |
| currentSort = this.value; | |
| getRecommendations(); | |
| }); | |
| // Load more button | |
| loadMoreBtn.addEventListener('click', function() { | |
| currentPage++; | |
| getRecommendations(true); | |
| }); | |
| // Search functionality | |
| searchBtn.addEventListener('click', function() { | |
| currentSearchTerm = searchInput.value.trim(); | |
| currentPage = 1; | |
| getRecommendations(); | |
| }); | |
| searchInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| currentSearchTerm = searchInput.value.trim(); | |
| currentPage = 1; | |
| getRecommendations(); | |
| } | |
| }); | |
| } | |
| // Update rating display | |
| function updateRatingDisplay() { | |
| ratingValue.textContent = currentMinRating.toFixed(1); | |
| } | |
| // Get recommendations based on current filters | |
| function getRecommendations(append = false) { | |
| // Filter movies based on selected criteria | |
| let filteredMovies = [...movieDatabase]; | |
| // Apply genre filter if any genres selected | |
| if (selectedGenres.length > 0) { | |
| filteredMovies = filteredMovies.filter(movie => | |
| movie.genres.some(genre => selectedGenres.includes(genre)) | |
| ); | |
| } | |
| // Apply decade filter if selected | |
| if (selectedDecade) { | |
| const decadeStart = parseInt(selectedDecade); | |
| const decadeEnd = decadeStart + 9; | |
| filteredMovies = filteredMovies.filter(movie => | |
| movie.year >= decadeStart && movie.year <= decadeEnd | |
| ); | |
| } | |
| // Apply rating filter | |
| filteredMovies = filteredMovies.filter(movie => | |
| movie.rating >= currentMinRating | |
| ); | |
| // Apply search filter if there's a search term | |
| if (currentSearchTerm) { | |
| const searchTerm = currentSearchTerm.toLowerCase(); | |
| filteredMovies = filteredMovies.filter(movie => | |
| movie.title.toLowerCase().includes(searchTerm) || | |
| movie.overview.toLowerCase().includes(searchTerm) | |
| ); | |
| } | |
| // Sort movies based on current sort option | |
| switch (currentSort) { | |
| case 'rating': | |
| filteredMovies.sort((a, b) => b.rating - a.rating); | |
| break; | |
| case 'year': | |
| filteredMovies.sort((a, b) => b.year - a.year); | |
| break; | |
| case 'popularity': | |
| filteredMovies.sort((a, b) => b.popularity - a.popularity); | |
| break; | |
| default: // 'relevance' | |
| // In a real app, this would use a more sophisticated algorithm | |
| filteredMovies.sort((a, b) => { | |
| // Simple relevance score based on rating and popularity | |
| const scoreA = (a.rating * 0.7) + (a.popularity * 0.3); | |
| const scoreB = (b.rating * 0.7) + (b.popularity * 0.3); | |
| return scoreB - scoreA; | |
| }); | |
| } | |
| // Pagination | |
| const startIdx = (currentPage - 1) * moviesPerPage; | |
| const endIdx = startIdx + moviesPerPage; | |
| const paginatedMovies = filteredMovies.slice(0, endIdx); | |
| // Show/hide load more button | |
| if (filteredMovies.length > endIdx) { | |
| loadMoreBtn.classList.remove('hidden'); | |
| } else { | |
| loadMoreBtn.classList.add('hidden'); | |
| } | |
| // Render recommendations | |
| if (append) { | |
| renderMovies(paginatedMovies, true); | |
| } else { | |
| renderMovies(paginatedMovies); | |
| } | |
| } | |
| // Render movies to the UI | |
| function renderMovies(movies, append = false) { | |
| if (!append) { | |
| recommendationsContainer.innerHTML = ''; | |
| if (movies.length === 0) { | |
| const noResults = document.createElement('div'); | |
| noResults.className = 'text-center py-10 text-gray-500 col-span-full'; | |
| noResults.innerHTML = ` | |
| <i class="fas fa-film text-5xl mb-4 opacity-30"></i> | |
| <p>No movies match your criteria. Try adjusting your filters.</p> | |
| `; | |
| recommendationsContainer.appendChild(noResults); | |
| loadMoreBtn.classList.add('hidden'); | |
| return; | |
| } | |
| } | |
| movies.slice((currentPage - 1) * moviesPerPage).forEach((movie, index) => { | |
| const movieCard = document.createElement('div'); | |
| movieCard.className = `movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg fade-in`; | |
| movieCard.style.animationDelay = `${index * 0.1}s`; | |
| movieCard.innerHTML = ` | |
| <div class="relative"> | |
| <img src="${movie.poster}" alt="${movie.title}" class="w-full h-80 object-cover movie-poster"> | |
| <div class="absolute top-2 right-2 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded"> | |
| ${movie.rating.toFixed(1)} | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-xl font-semibold mb-1">${movie.title}</h3> | |
| <div class="flex justify-between items-center text-sm text-gray-400 mb-3"> | |
| <span>${movie.year}</span> | |
| <div class="flex space-x-1"> | |
| ${movie.genres.map(genre => | |
| `<span class="px-2 py-1 bg-gray-700 rounded-full text-xs">${genre}</span>` | |
| ).join('')} | |
| </div> | |
| </div> | |
| <p class="text-gray-300 text-sm mb-4 line-clamp-3">${movie.overview}</p> | |
| <button class="w-full py-2 bg-blue-600 hover:bg-blue-700 rounded text-sm font-medium transition-colors"> | |
| <i class="fas fa-plus mr-1"></i> Add to Watchlist | |
| </button> | |
| </div> | |
| `; | |
| recommendationsContainer.appendChild(movieCard); | |
| }); | |
| } | |
| // Initialize the app | |
| init(); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Infinity07/ab-tu-dekh-2-o" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |