Created
April 17, 2026 22:01
-
-
Save teswar/9e800abb9eeed10c8c2f9d636216aa0f to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>IMDb Listings</title> | |
| <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;700&display=swap" rel="stylesheet" /> | |
| <style> | |
| :root { | |
| --gold: #F5C518; | |
| --bg: #121212; | |
| --surface2: #252525; | |
| --border: #2a2a2a; | |
| --text: #e8e8e8; | |
| --text-muted: #888; | |
| --text-dim: #555; | |
| } | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: 'DM Sans', sans-serif; | |
| max-width: 860px; | |
| margin: 40px auto; | |
| padding: 0 20px 60px; | |
| } | |
| h1 { | |
| font-size: 13px; | |
| font-weight: 600; | |
| letter-spacing: 1.5px; | |
| text-transform: uppercase; | |
| color: var(--text-muted); | |
| margin-bottom: 16px; | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .movie-list { display: flex; flex-direction: column; } | |
| .movie-card { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| padding: 12px 14px; | |
| border-bottom: 1px solid var(--border); | |
| text-decoration: none; | |
| color: inherit; | |
| transition: background 0.15s; | |
| border-radius: 4px; | |
| } | |
| .movie-card:hover { background: var(--surface2); } | |
| .rank { | |
| font-size: 13px; | |
| color: var(--text-dim); | |
| width: 22px; | |
| text-align: right; | |
| flex-shrink: 0; | |
| } | |
| .poster { | |
| width: 54px; | |
| height: 78px; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| flex-shrink: 0; | |
| background: var(--surface2); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .poster img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| display: block; | |
| } | |
| .poster-fallback { | |
| font-size: 22px; | |
| color: var(--text-dim); | |
| } | |
| .info { flex: 1; display: flex; flex-direction: column; gap: 4px; } | |
| .title { | |
| font-size: 15px; | |
| font-weight: 600; | |
| color: var(--text); | |
| } | |
| .movie-card:hover .title { color: var(--gold); } | |
| .meta { | |
| display: flex; | |
| gap: 10px; | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| } | |
| .rating { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| flex-shrink: 0; | |
| } | |
| .star { color: var(--gold); font-size: 14px; } | |
| .rating-value { | |
| font-size: 14px; | |
| font-weight: 700; | |
| color: var(--text); | |
| } | |
| .rating-na { | |
| font-size: 12px; | |
| color: var(--text-dim); | |
| } | |
| .loading-state { | |
| text-align: center; | |
| padding: 40px; | |
| color: var(--text-muted); | |
| font-size: 13px; | |
| } | |
| .shimmer { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| padding: 12px 14px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .shimmer-box { | |
| background: linear-gradient(90deg, var(--surface2) 25%, #333 50%, var(--surface2) 75%); | |
| background-size: 200% 100%; | |
| animation: shimmer 1.4s infinite; | |
| border-radius: 4px; | |
| } | |
| @keyframes shimmer { | |
| 0% { background-position: 200% 0; } | |
| 100% { background-position: -200% 0; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>All Titles — 16 Listings</h1> | |
| <div class="movie-list" id="movieList"></div> | |
| <script> | |
| const OMDB_KEY = "aa9290ba"; | |
| const movies = [ | |
| { title: "Youth", display: "Youth", year: "2026", lang: "Tamil" }, | |
| { title: "Tu Yaa Main", display: "Tu Yaa Main", year: "2026", lang: "Hindi" }, | |
| { title: "Haal", display: "Haal", year: "2025", lang: "Malayalam" }, | |
| { title: "Euphoria", display: "Euphoria", year: "2019–2026", lang: "TV Series" }, | |
| { title: "Sarkeet", display: "Sarkeet", year: "2025", lang: "Malayalam" }, | |
| { title: "Madhura Kanakku", display: "Madhura Kanakku", year: "2025", lang: "Malayalam" }, | |
| { title: "O Romeo", display: "O\' Romeo", year: "2026", lang: "Hindi" }, | |
| { title: "Written and Directed by God", display: "Written & Directed by God",year: "2025", lang: "Malayalam" }, | |
| { title: "Rental Family", display: "Rental Family", year: "2025", lang: "Drama" }, | |
| { title: "A Brother and 7 Siblings", display: "A Brother And 7 Siblings", year: "2024", lang: "Indonesian" }, | |
| { title: "The Forge", display: "The Forge", year: "2024", lang: "Drama" }, | |
| { title: "Maamla Legal Hai", display: "Maamla Legal Hai", year: "2024–", lang: "Hindi TV Series" }, | |
| { title: "Radioactive Emergency", display: "Radioactive Emergency", year: "2026", lang: "Mini-Series" }, | |
| { title: "Aspirants", display: "Aspirants", year: "2021–", lang: "Hindi TV Series" }, | |
| { title: "Local Times", display: "Local Times", year: "2026", lang: "Tamil TV Series" }, | |
| { title: "Young Sherlock", display: "Young Sherlock", year: "2026–", lang: "British TV Series" }, | |
| ]; | |
| const container = document.getElementById("movieList"); | |
| for (let i = 0; i < movies.length; i++) { | |
| container.innerHTML += ` | |
| <div class="shimmer" id="placeholder-${i}"> | |
| <div class="shimmer-box" style="width:22px;height:16px;flex-shrink:0"></div> | |
| <div class="shimmer-box" style="width:54px;height:78px;flex-shrink:0"></div> | |
| <div style="flex:1;display:flex;flex-direction:column;gap:8px"> | |
| <div class="shimmer-box" style="width:55%;height:14px"></div> | |
| <div class="shimmer-box" style="width:30%;height:11px"></div> | |
| </div> | |
| <div class="shimmer-box" style="width:36px;height:16px"></div> | |
| </div>`; | |
| } | |
| async function fetchMovie(movie) { | |
| try { | |
| // 1. Exact title match | |
| const res = await fetch(`https://www.omdbapi.com/?y=${encodeURIComponent(movie.year)}&t=${encodeURIComponent(movie.title)}&apikey=${OMDB_KEY}`); | |
| const data = await res.json(); | |
| if (data.Response === "True") return data; | |
| // 2. Search and pick first result | |
| const searchRes = await fetch(`https://www.omdbapi.com/?y=${encodeURIComponent(movie.year)}&s=${encodeURIComponent(movie.title)}&apikey=${OMDB_KEY}`); | |
| const searchData = await searchRes.json(); | |
| if (searchData.Response === "True" && searchData.Search?.length > 0) { | |
| const firstId = searchData.Search[0].imdbID; | |
| const detailRes = await fetch(`https://www.omdbapi.com/?i=${firstId}&apikey=${OMDB_KEY}`); | |
| const detailData = await detailRes.json(); | |
| if (detailData.Response === "True") return detailData; | |
| } | |
| } catch(e) {} | |
| return null; | |
| } | |
| function renderCard(index, movie, omdbData) { | |
| const link = omdbData?.imdbID | |
| ? `https://www.imdb.com/title/${omdbData.imdbID}/` | |
| : `https://www.imdb.com/find/?q=${encodeURIComponent(movie.title)}`; | |
| const poster = omdbData?.Poster && omdbData.Poster !== "N/A" ? omdbData.Poster : null; | |
| const rating = omdbData?.imdbRating && omdbData.imdbRating !== "N/A" ? omdbData.imdbRating : null; | |
| return ` | |
| <a class="movie-card" href="${link}" target="_blank" rel="noopener"> | |
| <span class="rank">${index + 1}</span> | |
| <div class="poster"> | |
| ${poster | |
| ? `<img src="${poster}" alt="${movie.display}" loading="lazy" />` | |
| : `<span class="poster-fallback">🎬</span>`} | |
| </div> | |
| <div class="info"> | |
| <span class="title">${movie.display}</span> | |
| <div class="meta"> | |
| <span>${movie.year}</span> | |
| <span>${movie.lang}</span> | |
| </div> | |
| </div> | |
| <div class="rating"> | |
| ${rating | |
| ? `<span class="star">★</span><span class="rating-value">${rating}</span>` | |
| : `<span class="rating-na">—</span>`} | |
| </div> | |
| </a>`; | |
| } | |
| movies.forEach(async (movie, i) => { | |
| const omdbData = await fetchMovie(movie); | |
| const placeholder = document.getElementById(`placeholder-${i}`); | |
| if (placeholder) { | |
| const temp = document.createElement("div"); | |
| temp.innerHTML = renderCard(i, movie, omdbData); | |
| placeholder.replaceWith(temp.firstElementChild); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment