Sci-Fi Wars | Random Sci-Fi Movie Battle & Generator

Sci-Fi Wars Element

/* Scoped CSS: Sadece bu bileşeni etkiler */
#scifi-wrapper {
–sf-primary: #e50914;
–sf-secondary: #007bff;
–sf-dark-bg: #0a0a0a;
–sf-card-bg: #141414;

font-family: ‘Montserrat’, sans-serif;
background-color: var(–sf-dark-bg);
coloration: #fff;
place: relative;
width: 100%;
padding: 50px 0;
box-sizing: border-box;
overflow: hidden;
background-image: radial-gradient(circle at heart, #1a1a1a 0%, #000 100%);
}

#scifi-wrapper * { box-sizing: border-box; }

/* HEADER */
#scifi-wrapper .sf-header { text-align: heart; margin-bottom: 40px; }

#scifi-wrapper .sf-logo {
font-family: ‘Bebas Neue’, sans-serif;
font-size: 3.5rem;
background: linear-gradient(to proper, var(–sf-secondary), #fff, var(–sf-primary));
-webkit-background-clip: textual content;
-webkit-text-fill-color: clear;
letter-spacing: 4px;
show: inline-block;
filter: drop-shadow(0 0 10px rgba(255,255,255,0.2));
}

#scifi-wrapper .sf-subtitle {
coloration: #aaa;
font-size: 0.9rem;
letter-spacing: 1.5px;
margin-top: 5px;
font-weight: 300;
}
#scifi-wrapper .sf-subtitle sturdy { coloration: #fff; font-weight: 700; }

/* ARENA */
#scifi-wrapper .arena-container {
show: flex;
justify-content: heart;
align-items: stretch;
width: 95%;
max-width: 1200px;
margin: 0 auto;
place: relative;
hole: 20px;
}

/* CARDS */
#scifi-wrapper .fighter-side {
flex: 1;
background: var(–sf-card-bg);
border-radius: 12px;
padding: 0;
show: flex;
flex-direction: column;
align-items: heart;
min-height: 600px; /* İçerik arttığı için biraz uzattım */
place: relative;
transition: all 0.5s ease;
border: 1px strong #333;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
overflow: hidden;
}

#scifi-wrapper .fighter-content {
width: 100%;
top: 100%;
show: flex;
flex-direction: column;
align-items: heart;
}

/* PLACEHOLDER */
#scifi-wrapper .placeholder-state {
show: flex;
flex-direction: column;
align-items: heart;
justify-content: heart;
top: 100%;
width: 100%;
padding: 40px;
coloration: rgba(255,255,255,0.3);
text-align: heart;
}

#scifi-wrapper .placeholder-icon {
font-size: 4rem;
margin-bottom: 20px;
border: 3px dashed rgba(255,255,255,0.2);
width: 100px;
top: 100px;
border-radius: 50%;
show: flex;
align-items: heart;
justify-content: heart;
}

/* VS BUTTON */
#scifi-wrapper .vs-container {
place: absolute;
left: 50%;
high: 50%;
remodel: translate(-50%, -50%);
z-index: 50;
}

#scifi-wrapper .vs-btn {
width: 100px;
top: 100px;
background: #000;
coloration: #fff;
border-radius: 50%;
show: flex;
align-items: heart;
justify-content: heart;
font-family: ‘Bebas Neue’, sans-serif;
font-size: 3.5rem;
cursor: pointer;
border: 4px strong #fff;
animation: sf-pulse 2s infinite;
transition: all 0.3s ease;
define: none;
}

#scifi-wrapper .vs-btn:hover {
remodel: scale(1.1);
background: #fff;
coloration: #000;
box-shadow: 0 0 30px rgba(255,255,255,0.6);
animation: none;
}

@keyframes sf-pulse {
0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
70% { box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* MOVIE INFO STYLES */
#scifi-wrapper .poster-container {
width: 100%;
aspect-ratio: 2 / 3;
overflow: hidden;
place: relative;
border-bottom: 1px strong #333;
}

#scifi-wrapper .poster-container img {
width: 100%;
top: 100%;
object-fit: cowl;
show: block;
}

#scifi-wrapper .movie-details {
padding: 20px;
text-align: heart;
width: 100%;
background: linear-gradient(to high, rgba(0,0,0,1), rgba(20,20,20,0));
flex-grow: 1;
show: flex;
flex-direction: column;
justify-content: flex-start;
}

#scifi-wrapper .movie-title {
font-family: ‘Bebas Neue’, sans-serif;
font-size: 2rem;
margin: 5px 0;
line-height: 1;
coloration: #fff;
}

#scifi-wrapper .movie-meta {
coloration: #aaa;
font-size: 0.8rem;
margin-bottom: 10px;
font-weight: daring;
}

/* Yeni Eklenen Açıklama ve Forged Stilleri */
#scifi-wrapper .movie-overview {
font-size: 0.85rem;
coloration: #ddd;
line-height: 1.4;
margin: 10px 0;
show: -webkit-box;
-webkit-line-clamp: 3; /* 3 satırda kes */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

#scifi-wrapper .movie-cast-info {
font-size: 0.75rem;
coloration: #888;
margin-bottom: 15px;
text-align: heart;
line-height: 1.4;
}
#scifi-wrapper .movie-cast-info sturdy { coloration: #fff; }

#scifi-wrapper .score-display {
font-size: 3.5rem;
font-family: ‘Bebas Neue’, sans-serif;
font-weight: daring;
margin: 5px 0 15px 0;
opacity: 0;
remodel: scale(0.5);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
text-shadow: 0 0 20px currentColor;
}

#scifi-wrapper .trailer-btn {
background: clear;
border: 1px strong rgba(255,255,255,0.4);
coloration: #fff;
padding: 8px 25px;
font-size: 0.75rem;
cursor: pointer;
font-family: ‘Montserrat’, sans-serif;
text-transform: uppercase;
margin-top: auto;
transition: 0.3s;
letter-spacing: 1px;
}
#scifi-wrapper .trailer-btn:hover { background: #fff; coloration: #000; box-shadow: 0 0 15px rgba(255,255,255,0.5); }

/* WINNER / LOSER Logic */
#scifi-wrapper .winner-active {
border: 2px strong #ffd700;
box-shadow: 0 0 40px rgba(255, 215, 0, 0.3);
z-index: 10;
}
#scifi-wrapper .winner-active .score-display { coloration: #ffd700; opacity: 1; remodel: scale(1); }

#scifi-wrapper .loser-active {
filter: grayscale(100%) opacity(0.5);
remodel: scale(0.98);
}
#scifi-wrapper .loser-active .score-display { opacity: 1; remodel: scale(1); }

#scifi-wrapper .winner-badge {
place: absolute;
high: 20px;
proper: 20px;
background: #ffd700;
coloration: #000;
padding: 5px 15px;
font-family: ‘Bebas Neue’, sans-serif;
font-size: 1.5rem;
remodel: rotate(10deg);
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
z-index: 20;
animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn { from { remodel: scale(0) rotate(0deg); } to { remodel: scale(1) rotate(10deg); } }

/* MODAL */
#scifi-modal { show: none; place: fastened; z-index: 10000; left: 0; high: 0; width: 100%; top: 100%; background-color: rgba(0,0,0,0.9); backdrop-filter: blur(5px); }
#scifi-modal-content { place: absolute; high: 50%; left: 50%; remodel: translate(-50%, -50%); width: 80%; max-width: 900px; aspect-ratio: 16/9; background: #000; box-shadow: 0 0 50px rgba(255,255,255,0.1); }
#scifi-close { place: absolute; high: 20px; proper: 40px; coloration: #fff; font-size: 40px; cursor: pointer; }

@media (max-width: 768px) {
#scifi-wrapper .arena-container { flex-direction: column; hole: 40px; }
#scifi-wrapper .vs-container { place: relative; high: auto; left: auto; remodel: none; margin: -20px auto; }
#scifi-wrapper .fighter-side { width: 100%; min-height: auto; }
}

SCI-FI WARS

Press VS to provoke the Final Sci-Fi Battle

FIGHTER 1

Ready for knowledge…

FIGHTER 2

Ready for knowledge…

const sfApiKey = ’25ec2c68c8aa9357786e0be45ac80de3′;
let sfIsBattling = false;

async operate startSciFiWar() {
if (sfIsBattling) return;
sfIsBattling = true;

const btn = doc.getElementById(‘sf-vs-btn’);
const leftSide = doc.getElementById(‘sf-left’);
const rightSide = doc.getElementById(‘sf-right’);
const leftContent = doc.getElementById(‘content-left’);
const rightContent = doc.getElementById(‘content-right’);

// RESETLEME
btn.fashion.remodel = “scale(0.8) rotate(360deg)”;
btn.disabled = true;
btn.fashion.opacity = “0.7”;

leftSide.classList.take away(‘winner-active’, ‘loser-active’);
rightSide.classList.take away(‘winner-active’, ‘loser-active’);
doc.querySelectorAll(‘.winner-badge’).forEach(el => el.take away());

leftContent.innerHTML = getLoadingHTML(“Scanning Sector 1…”);
rightContent.innerHTML = getLoadingHTML(“Scanning Sector 2…”);

strive {
setTimeout(async () => {
let m1, m2;
do {
m1 = await getSfMovie();
m2 = await getSfMovie();
} whereas (m1.id === m2.id);

renderSfFighter(m1, ‘left’, leftContent);
renderSfFighter(m2, ‘proper’, rightContent);

btn.innerText = “VS”;
btn.fashion.remodel = “scale(1)”;
btn.fashion.opacity = “1”;

setTimeout(() => {
decideSfWinner(m1, m2);
sfIsBattling = false;
btn.disabled = false;
btn.innerText = “AGAIN”;
btn.fashion.fontSize = “1.5rem”;
}, 800);
}, 500);

} catch (err) {
console.error(err);
leftContent.innerHTML = `

Error

`;
rightContent.innerHTML = `

Error

`;
sfIsBattling = false;
btn.disabled = false;
}
}

operate getLoadingHTML(textual content) {
return `

${textual content}

@keyframes spin { 100% { remodel:rotate(360deg); } }
`;
}

async operate getSfMovie() {
const web page = Math.ground(Math.random() * 40) + 1;
const url = `https://api.themoviedb.org/3/uncover/film?api_key=${sfApiKey}&with_genres=878&vote_average.gte=6.5&vote_count.gte=500&include_adult=false&web page=${web page}`;
const res = await fetch(url);
const knowledge = await res.json();

if (!knowledge.outcomes || knowledge.outcomes.size === 0) return getSfMovie();

const film = knowledge.outcomes[Math.floor(Math.random() * data.results.length)];
// forged ve movies için detay çekiyoruz
const element = await fetch(`https://api.themoviedb.org/3/film/${film.id}?api_key=${sfApiKey}&append_to_response=movies,credit`).then(r=>r.json());
return element;
}

operate renderSfFighter(film, aspect, container) {
const 12 months = film.release_date ? film.release_date.cut up(‘-‘)[0] : ”;
const director = film.credit.crew.discover(c => c.job === ‘Director’)?.identify || ‘Unknown’;
const trailer = film.movies.outcomes.discover(v => v.web site === ‘YouTube’ && v.kind === ‘Trailer’);

// GÜNCELLEME 2: Oyuncu listesini al (ilk 3 kişi)
const forged = film.credit.forged.slice(0, 3).map(c => c.identify).be a part of(‘, ‘);

const trailerHtml = trailer
? `Watch Trailer`
: `No Trailer`;

const posterSrc = film.poster_path
? `https://picture.tmdb.org/t/p/w780${film.poster_path}`
: ‘https://by way of.placeholder.com/500×750?textual content=No+Picture’;

// GÜNCELLEME 3: Yeni HTML Yapısı (Özet ve Forged ile)
container.innerHTML = `

${film.title}

${12 months} • ${film.runtime}m

${film.vote_average.toFixed(1)}

${film.overview}

Director: ${director}
Stars: ${forged}

${trailerHtml}

`;
}

operate decideSfWinner(m1, m2) {
const leftSide = doc.getElementById(‘sf-left’);
const rightSide = doc.getElementById(‘sf-right’);

doc.getElementById(‘sf-score-left’).fashion.opacity = ‘1’;
doc.getElementById(‘sf-score-left’).fashion.remodel = ‘scale(1)’;
doc.getElementById(‘sf-score-right’).fashion.opacity = ‘1’;
doc.getElementById(‘sf-score-right’).fashion.remodel = ‘scale(1)’;

if (m1.vote_average > m2.vote_average) {
leftSide.classList.add(‘winner-active’);
rightSide.classList.add(‘loser-active’);
addSfBadge(leftSide);
} else if (m2.vote_average > m1.vote_average) {
rightSide.classList.add(‘winner-active’);
leftSide.classList.add(‘loser-active’);
addSfBadge(rightSide);
}
}

operate addSfBadge(factor) {
const badge = doc.createElement(‘div’);
badge.className=”winner-badge”;
badge.innerText=”WINNER”;
factor.appendChild(badge);
}

operate openSfTrailer(key) {
const modal = doc.getElementById(‘scifi-modal’);
const content material = doc.getElementById(‘scifi-modal-content’);
content material.innerHTML = “;
modal.fashion.show = ‘block’;
}
operate closeSfTrailer() {
const modal = doc.getElementById(‘scifi-modal’);
doc.getElementById(‘scifi-modal-content’).innerHTML = ”;
modal.fashion.show = ‘none’;
}
doc.getElementById(‘scifi-modal’).onclick = operate(e) {
if(e.goal === this) closeSfTrailer();
}

This content material was initially revealed on %Sci-Fi Wars | Random Sci-Fi Film Battle & Generator% by YourSiteName.

Source link