Sci-Fi Trailers | Metaverse Planet

/* İzole Tasarım Kuralları */
#scifi-app-container {
background-color: #141414;
color: #ffffff;
font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
padding-bottom: 50px;
box-sizing: border-box;
width: 100%;
overflow-x: hidden;
}

/* Vitrin (Hero Section) */
#scifi-app-container .scifi-hero {
position: relative;
width: 100%;
height: 70vh;
min-height: 500px;
background-color: #000;
background-size: cover;
background-position: top center;
margin-bottom: -30px;
display: flex;
align-items: flex-end;
}

#scifi-app-container .scifi-hero-overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(to top, #141414 0%, rgba(20,20,20,0.5) 40%, rgba(0,0,0,0.1) 100%);
}

#scifi-app-container .scifi-hero-content {
position: relative;
z-index: 2;
padding: 0 40px 100px 40px;
max-width: 800px;
}

/* Vitrin Puan Rozeti */
#scifi-app-container .scifi-hero-rating {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(0,0,0,0.6);
color: #ffd700;
padding: 5px 12px;
border-radius: 4px;
font-size: 1.1rem;
font-weight: bold;
margin-bottom: 15px;
border: 1px solid rgba(255, 215, 0, 0.3);
}

#scifi-app-container .scifi-hero-rating span { color: #fff; }

#scifi-app-container .scifi-hero-title {
font-size: 3.5rem;
margin: 0 0 15px 0;
font-weight: 800;
text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

#scifi-app-container .scifi-hero-overview {
font-size: 1.1rem;
line-height: 1.5;
margin-bottom: 25px;
color: #fff;
text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

#scifi-app-container .scifi-hero-play-btn {
background-color: #fff;
color: #000;
border: none;
padding: 10px 30px;
font-size: 1.2rem;
font-weight: bold;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s;
display: flex;
align-items: center;
gap: 10px;
}

#scifi-app-container .scifi-hero-play-btn:hover { background-color: rgba(255,255,255,0.7); }

/* Satır Başlıkları */
#scifi-app-container .scifi-row-title {
font-size: 1.4rem;
margin: 0 0 15px 0;
font-weight: bold;
color: #e5e5e5;
padding-left: 10px;
}

/* Kategori Satırları */
#scifi-app-container .scifi-row {
position: relative;
z-index: 3;
margin-bottom: 40px;
padding-left: 30px;
}

#scifi-app-container .scifi-row-posters {
display: flex;
gap: 15px;
overflow-y: hidden;
overflow-x: auto;
padding: 10px 0 20px 10px;
scroll-behavior: smooth;
-ms-overflow-style: none;
scrollbar-width: none;
}
#scifi-app-container .scifi-row-posters::-webkit-scrollbar { display: none; }

/* Grid Alanı */
#scifi-app-container .scifi-all-movies-section {
position: relative;
z-index: 3;
}

#scifi-app-container .scifi-movie-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 20px;
padding: 0 40px;
}

/* Film Kartları (Ortak) */
#scifi-app-container .scifi-movie-card,
#scifi-app-container .scifi-grid-card {
flex: 0 0 auto;
width: 200px;
position: relative;
border-radius: 5px;
overflow: hidden;
cursor: pointer;
transition: transform 0.3s ease;
background: #222;
aspect-ratio: 2 / 3;
}

#scifi-app-container .scifi-grid-card { width: 100%; }

#scifi-app-container .scifi-movie-card:hover,
#scifi-app-container .scifi-grid-card:hover {
transform: scale(1.08);
z-index: 10;
box-shadow: 0 5px 15px rgba(0,0,0,0.8);
}

#scifi-app-container .scifi-movie-poster {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

/* Afiş Üzerindeki Puan Rozeti */
#scifi-app-container .scifi-card-rating {
position: absolute;
top: 8px; right: 8px;
background: rgba(0, 0, 0, 0.75);
color: #fff;
padding: 4px 6px;
border-radius: 4px;
font-size: 0.85rem;
font-weight: bold;
display: flex;
align-items: center;
gap: 3px;
z-index: 5;
backdrop-filter: blur(2px);
}

#scifi-app-container .scifi-card-rating i {
color: #ffd700; font-style: normal;
}

/* Hover Play İkonu */
#scifi-app-container .scifi-play-overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 4;
}

#scifi-app-container .scifi-movie-card:hover .scifi-play-overlay,
#scifi-app-container .scifi-grid-card:hover .scifi-play-overlay { opacity: 1; }

#scifi-app-container .scifi-play-icon {
width: 45px; height: 45px;
border: 2px solid white; border-radius: 50%;
display: flex; justify-content: center; align-items: center;
background: rgba(0,0,0,0.5);
}

#scifi-app-container .scifi-play-icon::after {
content: ”; display: block;
border-style: solid; border-width: 8px 0 8px 14px;
border-color: transparent transparent transparent #fff; margin-left: 4px;
}

/* Load More Butonu */
#scifi-app-container .scifi-load-more-container {
text-align: center; margin-top: 40px; padding-bottom: 20px;
}

#scifi-app-container .scifi-load-more-btn {
background-color: transparent; color: #fff;
border: 2px solid #555; padding: 12px 40px;
font-size: 1.1rem; border-radius: 30px;
cursor: pointer; transition: all 0.3s ease;
}

#scifi-app-container .scifi-load-more-btn:hover {
border-color: #fff; background-color: rgba(255,255,255,0.1);
}

/* Modal (Popup) Tasarımı */
#scifi-app-container .scifi-modal {
display: none; position: fixed; z-index: 999999;
left: 0; top: 0; width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.95);
justify-content: center; align-items: center;
}

#scifi-app-container .scifi-modal-content {
position: relative; width: 90%; max-width: 1000px;
aspect-ratio: 16 / 9; background-color: #000;
border-radius: 8px; box-shadow: 0 0 30px rgba(0,0,0,0.8);
}

#scifi-app-container #scifi-video-container { width: 100%; height: 100%; }

#scifi-app-container .scifi-close-btn {
position: absolute; top: 20px; right: 40px;
color: #fff; font-size: 50px; font-weight: bold;
cursor: pointer; z-index: 1000000; transition: color 0.3s;
}

#scifi-app-container .scifi-close-btn:hover { color: #e50914; }
#scifi-app-container iframe { width: 100%; height: 100%; border: none; border-radius: 8px; }

(function() {
const API_KEY = ‘acf82a9ff23ceffb8be4567f0a4803d1’;
const BASE_URL = ‘https://api.themoviedb.org/3’;
const IMG_URL_POSTER = ‘https://image.tmdb.org/t/p/w300’;
const IMG_URL_BACKDROP = ‘https://image.tmdb.org/t/p/original’;

// Gösterilen filmlerin hafızada tutulduğu havuz (Tekrarları önlemek için)
const globalMovieIds = new Set();

// Kategoriler ve Sayfa Yükleme Durumları
const categories = [
{ id: ‘trending’, title: “Trending Sci-Fi”, query: `/discover/movie?api_key=${API_KEY}&with_genres=878&language=en-US&sort_by=popularity.desc`, page: 1, isLoading: false, hasMore: true },
{ id: ‘top_rated’, title: “Top Rated Sci-Fi”, query: `/discover/movie?api_key=${API_KEY}&with_genres=878&language=en-US&sort_by=vote_average.desc&vote_count.gte=1000`, page: 1, isLoading: false, hasMore: true },
{ id: ‘space’, title: “Space & Aliens”, query: `/discover/movie?api_key=${API_KEY}&with_genres=878&with_keywords=3386|9882|9951&language=en-US&sort_by=popularity.desc`, page: 1, isLoading: false, hasMore: true },
{ id: ‘ai’, title: “A.I. & Robots”, query: `/discover/movie?api_key=${API_KEY}&with_genres=878&with_keywords=310|4183|14544&language=en-US&sort_by=popularity.desc`, page: 1, isLoading: false, hasMore: true },
{ id: ‘cyberpunk’, title: “Cyberpunk & Dystopia”, query: `/discover/movie?api_key=${API_KEY}&with_genres=878&with_keywords=2095|4565&language=en-US&sort_by=popularity.desc`, page: 1, isLoading: false, hasMore: true }
];

let isHeroSet = false;
let gridCurrentPage = 1;
let gridIsLoading = false;

const heroElement = document.getElementById(‘scifi-hero’);
const heroContent = document.getElementById(‘scifi-hero-content’);
const rowsContainer = document.getElementById(‘scifi-rows-container’);
const gridElement = document.getElementById(‘scifi-movie-grid’);
const modal = document.getElementById(‘scifi-trailer-modal’);
const videoContainer = document.getElementById(‘scifi-video-container’);
const closeModalBtn = document.getElementById(‘scifi-close-modal’);
const loadMoreBtn = document.getElementById(‘scifi-load-more-btn’);

async function initApp() {
// Kategoriler için DOM elementlerini oluştur ve ilk verileri çek
categories.forEach(category => buildRowContainer(category));
// Alttaki Grid’i başlat
await fetchGridMovies(gridCurrentPage);
}

// Kategori Satırını ve Scroll Olayını Hazırla
function buildRowContainer(category) {
const rowDiv = document.createElement(‘div’);
rowDiv.classList.add(‘scifi-row’);

const titleObj = document.createElement(‘h2’);
titleObj.classList.add(‘scifi-row-title’);
titleObj.innerText = category.title;

const postersDiv = document.createElement(‘div’);
postersDiv.classList.add(‘scifi-row-posters’);

// Yatay Sonsuz Kaydırma Tetikleyicisi
postersDiv.addEventListener(‘scroll’, () => {
const { scrollLeft, scrollWidth, clientWidth } = postersDiv;
if (scrollLeft + clientWidth >= scrollWidth – 400) { // Sona yaklaşınca tetikle
fetchCategoryData(category, postersDiv);
}
});

rowDiv.appendChild(titleObj);
rowDiv.appendChild(postersDiv);
rowsContainer.appendChild(rowDiv);

// İlk sayfayı çek
fetchCategoryData(category, postersDiv);
}

// Yatay Kategoriler İçin Veri Çekme (Tekrarsız)
async function fetchCategoryData(category, container) {
if (category.isLoading || !category.hasMore) return;
category.isLoading = true;

try {
const response = await fetch(`${BASE_URL}${category.query}&page=${category.page}`);
const data = await response.json();

if (data.results.length === 0 || category.page >= data.total_pages) {
category.hasMore = false;
}

let movies = data.results;

// Hero Alanı (Sadece ilk filmi al ve havuzdan düş)
if (!isHeroSet && category.id === ‘trending’ && movies.length > 0) {
setHeroSection(movies[0]);
globalMovieIds.add(movies[0].id);
movies = movies.slice(1);
isHeroSet = true;
}

// Sadece daha önce gösterilmeyen filmleri filtrele
const uniqueMovies = movies.filter(movie => !globalMovieIds.has(movie.id));

uniqueMovies.forEach(movie => {
globalMovieIds.add(movie.id); // Havuza ekle
if (!movie.poster_path) return;
const card = createMovieCard(movie, ‘scifi-movie-card’);
container.appendChild(card);
});

category.page++;
} catch (error) {
console.error(`Error fetching category ${category.title}:`, error);
} finally {
category.isLoading = false;
}
}

// Tüm Filmler (Grid) Alanı İçin Veri Çekme (Tekrarsız)
async function fetchGridMovies(page) {
if (gridIsLoading) return;
gridIsLoading = true;
loadMoreBtn.innerText=”Loading…”;
loadMoreBtn.disabled = true;

try {
const response = await fetch(`${BASE_URL}/discover/movie?api_key=${API_KEY}&with_genres=878&language=en-US&sort_by=vote_count.desc&page=${page}`);
const data = await response.json();

const uniqueMovies = data.results.filter(movie => !globalMovieIds.has(movie.id));

uniqueMovies.forEach(movie => {
globalMovieIds.add(movie.id);
if (!movie.poster_path) return;
const card = createMovieCard(movie, ‘scifi-grid-card’);
gridElement.appendChild(card);
});

// Eğer gelen 20 filmin hepsi zaten yatay kategorilerde gösterilmişse, otomatik sonraki sayfayı çek
if (uniqueMovies.length === 0 && data.results.length > 0) {
gridCurrentPage++;
gridIsLoading = false;
return fetchGridMovies(gridCurrentPage);
}

loadMoreBtn.innerText=”Load More”;
loadMoreBtn.disabled = false;
} catch (error) {
console.error(‘Error fetching grid movies:’, error);
loadMoreBtn.innerText=”Error Loading Data”;
} finally {
gridIsLoading = false;
}
}

function createMovieCard(movie, className) {
const card = document.createElement(‘div’);
card.classList.add(className);

const rating = movie.vote_average ? movie.vote_average.toFixed(1) : ‘N/A’;

card.innerHTML = `

`;
card.addEventListener(‘click’, () => fetchTrailer(movie.id));
return card;
}

async function fetchTrailer(movieId) {
try {
const response = await fetch(`${BASE_URL}/movie/${movieId}/videos?api_key=${API_KEY}&language=en-US`);
const data = await response.json();
const trailer = data.results.find(video => video.type === ‘Trailer’ && video.site === ‘YouTube’);

if (trailer) {
openModal(trailer.key);
} else {
alert(‘Trailer not found for this movie.’);
}
} catch (error) {
console.error(‘Error fetching trailer:’, error);
}
}

function setHeroSection(movie) {
if (!movie.backdrop_path) return;

const rating = movie.vote_average ? movie.vote_average.toFixed(1) : ‘N/A’;

heroElement.style.backgroundImage = `url(‘${IMG_URL_BACKDROP + movie.backdrop_path}’)`;
heroContent.innerHTML = `

${movie.title}

${movie.overview.substring(0, 180)}…

▶ Play Trailer

`;

document.getElementById(‘hero-play-btn’).addEventListener(‘click’, () => fetchTrailer(movie.id));
}

function openModal(videoKey) {
videoContainer.innerHTML = “;
modal.style.display = ‘flex’;
}

function closeModal() {
modal.style.display = ‘none’;
videoContainer.innerHTML = ”;
}

closeModalBtn.addEventListener(‘click’, closeModal);
window.addEventListener(‘click’, (event) => {
if (event.target === modal) closeModal();
});

loadMoreBtn.addEventListener(‘click’, () => {
gridCurrentPage++;
fetchGridMovies(gridCurrentPage);
});

initApp();
})();

This content was originally published on %Watch the Best Sci-Fi Movie Trailers% by YourSiteName.

Source link