Sci-Fi Trailers | Metaverse Planet

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

/* Vitrin (Hero Part) */
#scifi-app-container .scifi-hero {
place: relative;
width: 100%;
peak: 70vh;
min-height: 500px;
background-color: #000;
background-size: cowl;
background-position: prime heart;
margin-bottom: -30px;
show: flex;
align-items: flex-end;
}

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

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

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

#scifi-app-container .scifi-hero-rating span { coloration: #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;
coloration: #fff;
text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

#scifi-app-container .scifi-hero-play-btn {
background-color: #fff;
coloration: #000;
border: none;
padding: 10px 30px;
font-size: 1.2rem;
font-weight: daring;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s;
show: flex;
align-items: heart;
hole: 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: daring;
coloration: #e5e5e5;
padding-left: 10px;
}

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

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

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

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

/* Movie Kartları (Ortak) */
#scifi-app-container .scifi-movie-card,
#scifi-app-container .scifi-grid-card {
flex: 0 0 auto;
width: 200px;
place: relative;
border-radius: 5px;
overflow: hidden;
cursor: pointer;
transition: rework 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 {
rework: 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%;
peak: 100%;
object-fit: cowl;
show: block;
}

/* Afiş Üzerindeki Puan Rozeti */
#scifi-app-container .scifi-card-rating {
place: absolute;
prime: 8px; proper: 8px;
background: rgba(0, 0, 0, 0.75);
coloration: #fff;
padding: 4px 6px;
border-radius: 4px;
font-size: 0.85rem;
font-weight: daring;
show: flex;
align-items: heart;
hole: 3px;
z-index: 5;
backdrop-filter: blur(2px);
}

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

/* Hover Play İkonu */
#scifi-app-container .scifi-play-overlay {
place: absolute;
prime: 0; left: 0; width: 100%; peak: 100%;
background: rgba(0, 0, 0, 0.4);
show: flex;
justify-content: heart;
align-items: heart;
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; peak: 45px;
border: 2px strong white; border-radius: 50%;
show: flex; justify-content: heart; align-items: heart;
background: rgba(0,0,0,0.5);
}

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

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

#scifi-app-container .scifi-load-more-btn {
background-color: clear; coloration: #fff;
border: 2px strong #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 {
show: none; place: mounted; z-index: 999999;
left: 0; prime: 0; width: 100%; peak: 100%;
background-color: rgba(0, 0, 0, 0.95);
justify-content: heart; align-items: heart;
}

#scifi-app-container .scifi-modal-content {
place: 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%; peak: 100%; }

#scifi-app-container .scifi-close-btn {
place: absolute; prime: 20px; proper: 40px;
coloration: #fff; font-size: 50px; font-weight: daring;
cursor: pointer; z-index: 1000000; transition: coloration 0.3s;
}

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

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

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

// Kategoriler ve Sayfa Yükleme Durumları
const classes = [
{ 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 = doc.getElementById(‘scifi-hero’);
const heroContent = doc.getElementById(‘scifi-hero-content’);
const rowsContainer = doc.getElementById(‘scifi-rows-container’);
const gridElement = doc.getElementById(‘scifi-movie-grid’);
const modal = doc.getElementById(‘scifi-trailer-modal’);
const videoContainer = doc.getElementById(‘scifi-video-container’);
const closeModalBtn = doc.getElementById(‘scifi-close-modal’);
const loadMoreBtn = doc.getElementById(‘scifi-load-more-btn’);

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

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

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

const postersDiv = doc.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(class, postersDiv);
}
});

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

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

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

strive {
const response = await fetch(`${BASE_URL}${class.question}&web page=${class.web page}`);
const knowledge = await response.json();

if (knowledge.outcomes.size === 0 || class.web page >= knowledge.total_pages) {
class.hasMore = false;
}

let films = knowledge.outcomes;

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

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

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

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

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

strive {
const response = await fetch(`${BASE_URL}/uncover/film?api_key=${API_KEY}&with_genres=878&language=en-US&sort_by=vote_count.desc&web page=${web page}`);
const knowledge = await response.json();

const uniqueMovies = knowledge.outcomes.filter(film => !globalMovieIds.has(film.id));

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

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

loadMoreBtn.innerText=”Load Extra”;
loadMoreBtn.disabled = false;
} catch (error) {
console.error(‘Error fetching grid films:’, error);
loadMoreBtn.innerText=”Error Loading Knowledge”;
} lastly {
gridIsLoading = false;
}
}

operate createMovieCard(film, className) {
const card = doc.createElement(‘div’);
card.classList.add(className);

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

card.innerHTML = `

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

async operate fetchTrailer(movieId) {
strive {
const response = await fetch(`${BASE_URL}/film/${movieId}/movies?api_key=${API_KEY}&language=en-US`);
const knowledge = await response.json();
const trailer = knowledge.outcomes.discover(video => video.sort === ‘Trailer’ && video.website === ‘YouTube’);

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

operate setHeroSection(film) {
if (!film.backdrop_path) return;

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

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

${film.title}

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

▶ Play Trailer

`;

doc.getElementById(‘hero-play-btn’).addEventListener(‘click on’, () => fetchTrailer(film.id));
}

operate openModal(videoKey) {
videoContainer.innerHTML = “;
modal.fashion.show = ‘flex’;
}

operate closeModal() {
modal.fashion.show = ‘none’;
videoContainer.innerHTML = ”;
}

closeModalBtn.addEventListener(‘click on’, closeModal);
window.addEventListener(‘click on’, (occasion) => {
if (occasion.goal === modal) closeModal();
});

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

initApp();
})();

This content material was initially revealed on %Watch the Finest Sci-Fi Film Trailers% by YourSiteName.

Source link