Spaces:

r3hab
/

numerical-analysis

Running

App Files Files Community

r3hab commited on Jan 26

Commit

1aa70e6

verified ·

1 Parent(s): 76f853a

Create movie.html

Browse files

Files changed (1) hide show

movie.html +291 -0

movie.html ADDED Viewed

	@@ -0,0 +1,291 @@

+<!DOCTYPE html>
+<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;
+        }
+        .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);
+        }
+        @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>
+    <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 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="https://vidsrc.in/embed/movie/${movie.id}"
+                           target="_blank"
+                           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>