| AGC Movie & TV Series

< Live Demo
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Netflix Style Movie SPA</title>
<style>
body{
  font-family: Arial, sans-serif;
  margin:0;
  background:#111;
  color:#fff;
}
header{
  padding:15px;
  background:#000;
  position:sticky;
  top:0;
}input{ width:100%; padding:10px; margin-top:10px; border:none; border-radius:5px; }

.tabs{ display:flex; gap:10px; margin-top:10px; } .tab{ padding:6px 12px; background:#222; border-radius:20px; cursor:pointer; } .tab.active{ background:red; }

.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; padding:15px; }

.card{ background:#222; border-radius:10px; overflow:hidden; cursor:pointer; transition:0.3s; } .card:hover{ transform:scale(1.05); } .card img{ width:100%; height:200px; object-fit:cover; } .card h4{ margin:8px; font-size:14px; }

/* DETAIL PAGE */ #detailPage{ display:none; padding:20px; } .backBtn{ padding:8px 12px; background:red; border:none; color:#fff; border-radius:5px; cursor:pointer; margin-bottom:15px; }

.detailHeader{ display:flex; gap:15px; flex-wrap:wrap; } .detailHeader img{ width:200px; border-radius:10px; } .meta h2{ margin:0; } .meta p{ margin:5px 0; color:#ccc; }

/* tabs detail */ .detailTabs{ display:flex; gap:10px; margin-top:15px; } .detailTab{ padding:6px 12px; background:#222; border-radius:20px; cursor:pointer; } .detailTab.active{ background:red; } .section{ margin-top:15px; display:none; } .section.active{ display:block; } </style>

</head>
<body><header>
  <h2>Netflix Style Movies</h2>
  <input type="text" id="search" placeholder="Search movies..." />  <div class="tabs">
    <div class="tab active" onclick="setCategory('All')">All</div>
    <div class="tab" onclick="setCategory('Movie')">Movie</div>
    <div class="tab" onclick="setCategory('TV Series')">TV Series</div>
  </div>
</header><!-- LIST --><div id="listPage">
  <div class="grid" id="grid"></div>
</div><!-- DETAIL --><div id="detailPage">
  <button class="backBtn" onclick="goBack()">⬅ Back</button>  <div class="detailHeader">
    <img id="dImg" />
    <div class="meta">
      <h2 id="dTitle"></h2>
      <p id="dYear"></p>
      <p id="dGenre"></p>
      <p id="dRating"></p>
      <p id="dDuration"></p>
      <p id="dDesc"></p>
    </div>
  </div>  <div class="detailTabs">
    <div class="detailTab active" onclick="showSection('trailer')">Trailer</div>
    <div class="detailTab" onclick="showSection('media')">Gambar/Media</div>
    <div class="detailTab" onclick="showSection('cast')">Aktor</div>
  </div>  <div id="trailer" class="section active">
    <p>▶ Trailer YouTube (placeholder)</p>
  </div>  <div id="media" class="section">
    <img src="https://picsum.photos/300/150" />
  </div>  <div id="cast" class="section">
    <p>Actor 1, Actor 2, Actor 3</p>
  </div>
</div><script>
const movies = [
  {
    id:1,
    title:"Avengers",
    slug:"avengers",
    type:"Movie",
    year:2012,
    genre:"Action, Sci-Fi",
    rating:"8.5",
    duration:"2h 23m",
    desc:"Superhero Marvel team",
    img:"https://picsum.photos/200/300?1"
  },
  {
    id:2,
    title:"Breaking Bad",
    slug:"breaking-bad",
    type:"TV Series",
    year:2008,
    genre:"Crime, Drama",
    rating:"9.5",
    duration:"5 Seasons",
    desc:"Chemistry teacher becomes drug lord",
    img:"https://picsum.photos/200/300?2"
  }
];

let currentCategory = "All";

function render(){
  const grid = document.getElementById("grid");
  const search = document.getElementById("search").value.toLowerCase();

  let data = movies.filter(m => m.title.toLowerCase().includes(search));

  if(currentCategory !== "All"){
    data = data.filter(m => m.type === currentCategory);
  }

  grid.innerHTML = data.map(m => `
    <div class="card" onclick="openDetail('${m.slug}')">
      <img src="${m.img}" />
      <h4>${m.title}</h4>
    </div>
  `).join("");
}

function setCategory(cat){
  currentCategory = cat;
  document.querySelectorAll(".tab").forEach(t=>t.classList.remove("active"));
  event.target.classList.add("active");
  render();
}

function openDetail(slug){
  const m = movies.find(x => x.slug === slug);
  if(!m) return;

  location.hash = slug;

  document.getElementById("listPage").style.display = "none";
  document.getElementById("detailPage").style.display = "block";

  document.getElementById("dImg").src = m.img;
  document.getElementById("dTitle").innerText = m.title;
  document.getElementById("dYear").innerText = "Year: " + m.year;
  document.getElementById("dGenre").innerText = "Genre: " + m.genre;
  document.getElementById("dRating").innerText = "Rating: " + m.rating;
  document.getElementById("dDuration").innerText = "Duration: " + m.duration;
  document.getElementById("dDesc").innerText = m.desc;
}

function goBack(){
  location.hash = "";
  document.getElementById("detailPage").style.display = "none";
  document.getElementById("listPage").style.display = "block";
}

function showSection(id){
  document.querySelectorAll(".section").forEach(s=>s.classList.remove("active"));
  document.querySelectorAll(".detailTab").forEach(t=>t.classList.remove("active"));

  document.getElementById(id).classList.add("active");
  event.target.classList.add("active");
}

function loadFromHash(){
  const slug = location.hash.replace("#","");
  if(slug){
    openDetail(slug);
  }
}

document.getElementById("search").addEventListener("input", render);
window.addEventListener("hashchange", loadFromHash);

render();
loadFromHash();
</script></body>
</html>
Watch Movies & TV Shows Anytime

No comments:

Watch Movies & TV Shows Anytime

Access Required

No comments:
