<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Movies Land</title>
<style>
*{box-sizing:border-box}
body{margin:0;background:#0b0b11;color:#fff;font-family:Tahoma,Arial}
header{background:#181820;padding:18px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;border-bottom:2px solid #e50914}
.logo{color:#ff3038;font-size:23px;font-weight:bold;direction:ltr}
nav a{color:white;text-decoration:none;margin:5px;font-size:13px}
.hero{text-align:center;padding:35px 15px;background:linear-gradient(135deg,#59121b,#15151e)}
.hero h1{font-size:29px}
.hero p{color:#ddd;line-height:2}
.search{display:flex;max-width:500px;margin:20px auto}
.search input{flex:1;min-width:0;padding:13px;border:0;border-radius:0 8px 8px 0}
button{font-family:inherit;cursor:pointer}
.search button,.redbtn{background:#e50914;color:white;border:0;padding:12px 16px;border-radius:7px}
.section{padding:22px 5%}
.section h2{border-right:4px solid #e50914;padding-right:12px}
.movies{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.movie{background:#1b1b24;border:1px solid #292932;border-radius:10px;overflow:hidden;cursor:pointer}
.movie:hover{border-color:#e50914}
.poster{height:225px;position:relative;background:linear-gradient(145deg,#63212d,#171720);display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;overflow:hidden}
.poster img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.poster .fallback{font-size:18px;font-weight:bold;direction:ltr}
.info{padding:11px}
.info h3{font-size:14px;line-height:1.8}
.info p{font-size:11px;color:#bbb;direction:ltr;text-align:right}
.tag{display:inline-block;background:#34343f;padding:5px 7px;border-radius:5px;font-size:11px}
.details{width:100%;margin-top:12px;padding:10px;background:#30303b;color:white;border:0;border-radius:5px}
#detail{display:none;padding:20px 5%}
.back{background:#30303b;color:white;border:0;padding:11px;border-radius:6px;margin-bottom:18px}
.layout{display:grid;grid-template-columns:135px minmax(0,1fr);gap:16px}
#bigPoster{width:100%;border-radius:8px;background:#252530}
#title{font-size:21px;line-height:1.7}
.meta{font-size:13px;color:#ddd;line-height:2.6}
.desc{font-size:13px;color:#bbb;line-height:2}
.redbtn{margin-top:10px}
#player{display:none;margin-top:20px;background:#191920;padding:15px;border-radius:9px}
#player iframe{width:100%;aspect-ratio:16/9;border:0}
.notice{font-size:12px;color:#aaa;line-height:2}
footer{text-align:center;padding:25px;background:#181820;color:#aaa;line-height:2;margin-top:30px}
@media(min-width:650px){.movies{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:950px){.movies{grid-template-columns:repeat(4,minmax(0,1fr))}}
</style>
</head>
<body>
<header>
<div class="logo">MOVIES LAND</div>
<nav>
<a href="#" onclick="home();return false">خانه</a>
<a href="#films">فیلم‌ها</a>
<a href="#series">سریال‌ها</a>
</nav>
</header>
<div id="main">
<section class="hero">
<h1>🎬 به سرزمین فیلم خوش آمدی</h1>
<p>فیلم و سریال موردعلاقه‌ات رو پیدا کن</p>
<div class="search">
<input id="query" placeholder="جست‌وجوی فارسی یا انگلیسی">
<button onclick="searchTitles()">جست‌وجو</button>
</div>
</section>
<section class="section" id="films">
<h2>🎬 فیلم‌ها</h2>
<div class="movies" id="filmList"></div>
</section>
<section class="section" id="series">
<h2>📺 سریال‌ها و انیمه‌ها</h2>
<div class="movies" id="seriesList"></div>
<p id="empty" style="display:none">عنوانی پیدا نشد.</p>
</section>
</div>
<section id="detail">
<button class="back" onclick="home()">← برگشت به فهرست</button>
<div class="layout">
<img id="bigPoster" alt="پوستر اثر">
<div>
<h2 id="title"></h2>
<div class="meta">
⭐ امتیاز: <span id="rating"></span><br>
🎭 ژانر: <span id="genre"></span><br>
📌 نوع: <span id="type"></span><br>
📅 سال: <span id="year"></span>
</div>
<p id="desc" class="desc"></p>
<button class="redbtn" onclick="playTrailer()">▶ تماشای تریلر</button>
<p class="notice">برای فیلم کامل باید منبع پخش مجاز اضافه شود.</p>
</div>
</div>
<div id="player">
<h3>تریلر اثر</h3>
<iframe id="trailerFrame"
title="تریلر"
allow="accelerometer; autoplay; encrypted-media; picture-in-picture"
allowfullscreen></iframe>
<button class="back" onclick="stopTrailer()">توقف ویدئو</button>
</div>
</section>
<footer>
<div class="logo">MOVIES LAND</div>
<p>دنیای فیلم و سریال 🎥</p>
<p>امتیازهای این نسخه تقریبی‌اند و ممکن است دقیق نباشند.</p>
</footer>
<script>
const titles = [
["Breaking Bad","بریکینگ بد","سریال","جنایی، درام",2008,9.5,"Breaking Bad"],
["Interstellar","میان‌ستاره‌ای","فیلم","علمی‌تخیلی، درام",2014,8.7,"Interstellar"],
["Backrooms","بک‌رومز","فیلم","ترسناک، رازآلود",2026,null,"Backrooms"],
["The Bad Guys","بچه‌های بد","انیمیشن","کمدی، ماجراجویی",2022,6.8,"The Bad Guys"],
["The Walking Dead","مردگان متحرک","سریال","ترسناک، بقا، درام",2010,8.1,"The Walking Dead"],
["Reacher","ریچر","سریال","اکشن، جنایی",2022,8.0,"Reacher"],
["The Witcher","ویچر","سریال","فانتزی، ماجراجویی",2019,7.9,"The Witcher"],
["The Angry Birds Movie","انگری بردز","انیمیشن","کمدی، ماجراجویی",2016,6.3,"The Angry Birds Movie"],
["Cars","ماشین‌ها ۱","انیمیشن","ماجراجویی، کمدی",2006,7.2,"Cars 2006"],
["Cars 2","ماشین‌ها ۲","انیمیشن","ماجراجویی، کمدی",2011,6.2,"Cars 2"],
["Avengers: Infinity War","انتقام‌جویان: جنگ ابدیت","فیلم","اکشن، علمی‌تخیلی",2018,8.4,"Avengers Infinity War"],
["Avengers: Endgame","انتقام‌جویان: پایان بازی","فیلم","اکشن، علمی‌تخیلی",2019,8.4,"Avengers Endgame"],
["Tulsa King","پادشاه تولسا","سریال","جنایی، درام",2022,7.9,"Tulsa King"],
["Marshals","مارشال‌ها","سریال","جنایی، درام",2026,null,"Marshals TV series"],
["Mouse","موش","سریال","جنایی، رازآلود",2021,8.6,"Mouse South Korean TV series"],
["The Penguin","پنگوئن","سریال","جنایی، درام",2024,8.6,"The Penguin TV series"],
["Spy x Family","جاسوس و خانواده","انیمه","کمدی، اکشن",2022,8.3,"Spy x Family"],
["Death Note","دفترچه مرگ","انیمه","رازآلود، روان‌شناختی",2006,8.9,"Death Note anime"],
["Stranger Things","اتفاقات عجیب","سریال","علمی‌تخیلی، ترسناک",2016,8.6,"Stranger Things"],
["Slaughterhouse","کشتارگاه","فیلم","ترسناک",null,null,"Slaughterhouse film"],
["Ratatouille","موش سرآشپز","انیمیشن","کمدی، خانوادگی",2007,8.1,"Ratatouille"],
["Avatar","آواتار","فیلم","علمی‌تخیلی، ماجراجویی",2009,7.9,"Avatar 2009"],
["The Dark Knight","شوالیه تاریکی","فیلم","اکشن، جنایی",2008,9.0,"The Dark Knight"],
["Dune: Part Two","تلماسه: بخش دوم","فیلم","علمی‌تخیلی، ماجراجویی",2024,8.5,"Dune Part Two"],
["Spider-Man: Into the Spider-Verse","مرد عنکبوتی: به درون دنیای عنکبوتی","انیمیشن","اکشن، ماجراجویی",2018,8.4,"Spider-Man Into the Spider-Verse"],
["The Mandalorian","مندلورین","سریال","علمی‌تخیلی، ماجراجویی",2019,8.6,"The Mandalorian"],
["Jumanji","جومانجی","فیلم","کمدی، ماجراجویی",1995,7.1,"Jumanji 1995"],
["Coco","کوکو","انیمیشن","موسیقی، خانوادگی",2017,8.4,"Coco 2017"]
];
const items = titles.map((t,i)=>({
id:i+1,
title:t[0], fa:t[1], type:t[2], genre:t[3],
year:t[4], rating:t[5], wiki:t[6],
poster:"", description:"",
loaded:false
}));
let selected=null;
function card(x){
return `<article class="movie" onclick="details(${x.id})">
<div class="poster" id="poster-${x.id}">
<div class="fallback">${x.title}</div>
</div>
<div class="info">
<h3>${x.fa}</h3>
<p>${x.title}</p>
<span class="tag">${x.type}</span>
<button class="details" onclick="event.stopPropagation();details(${x.id})">مشاهده اطلاعات</button>
</div></article>`;
}
function render(list){
document.getElementById("filmList").innerHTML=
list.filter(x=>x.type==="فیلم"||x.type==="انیمیشن").map(card).join("");
document.getElementById("seriesList").innerHTML=
list.filter(x=>x.type==="سریال"||x.type==="انیمه").map(card).join("");
document.getElementById("empty").style.display=list.length?"none":"block";
list.forEach(loadPoster);
}
async function loadPoster(x){
if(x.loaded)return;
x.loaded=true;
try{
const url="https://en.wikipedia.org/api/rest_v1/page/summary/"+encodeURIComponent(x.wiki);
const response=await fetch(url);
if(!response.ok)throw new Error("No image");
const info=await response.json();
x.description=info.extract||"اطلاعات بیشتری در این نسخه موجود نیست.";
x.poster=info.thumbnail?info.thumbnail.source:"";
if(x.poster){
const box=document.getElementById("poster-"+x.id);
if(box){
const img=document.createElement("img");
img.src=x.poster;
img.alt=x.fa;
img.onerror=()=>img.remove();
box.prepend(img);
}
}
}catch(e){
/* اگر تصویر پیدا نشد، کارت با پس‌زمینه و عنوان باقی می‌ماند. */
}
}
function searchTitles(){
const q=document.getElementById("query").value.trim().toLowerCase();
render(items.filter(x=>(x.title+" "+x.fa+" "+x.genre).toLowerCase().includes(q)));
}
document.getElementById("query").addEventListener("keydown",e=>{
if(e.key==="Enter")searchTitles();
});
function details(id){
selected=items.find(x=>x.id===id);
document.getElementById("main").style.display="none";
document.getElementById("detail").style.display="block";
document.getElementById("title").textContent=selected.fa+" ("+selected.title+")";
document.getElementById("rating").textContent=selected.rating==null?"نامشخص":selected.rating+"/10 (تقریبی)";
document.getElementById("genre").textContent=selected.genre;
document.getElementById("type").textContent=selected.type;
document.getElementById("year").textContent=selected.year||"نامشخص";
document.getElementById("desc").textContent=selected.description||"خلاصه داستان هنوز بارگذاری نشده است.";
document.getElementById("bigPoster").style.display=selected.poster?"block":"none";
document.getElementById("bigPoster").src=selected.poster||"";
stopTrailer();
if(!selected.loaded)loadPoster(selected);
window.scrollTo(0,0);
}
function playTrailer(){
if(!selected)return;
const query=encodeURIComponent(selected.title+" official trailer");
document.getElementById("trailerFrame").src=
"https://www.youtube-nocookie.com/embed?listType=search&list="+query;
document.getElementById("player").style.display="block";
document.getElementById("player").scrollIntoView({behavior:"smooth"});
}
function stopTrailer(){
document.getElementById("trailerFrame").src="";
document.getElementById("player").style.display="none";
}
function home(){
stopTrailer();
document.getElementById("detail").style.display="none";
document.getElementById("main").style.display="block";
window.scrollTo(0,0);
}
render(items);
</script>
</body>
</html>