hasil pencarian Script AGC Movie Tv Series
kode Script membuat halaman AGC Movie Tv Series terbaru!
Salin dan tempel kode Script AGC Movie Tv Series ini di blog kamu,lihat kode script di bawah..
klik untuk menyalin
👇
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AGC Movie & TV Series</title>
<style>
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:#0b1023;color:#e5e7eb;}
.wrap{max-width:1200px;margin:0 auto;padding:16px;}
h1{text-align:center;margin:24px 0;color:#22d3ee;}
.search-filter{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px;}
.search-filter input, .search-filter select{flex:1;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#0f172a;color:#e5e7eb;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;}
.card{background:#0f172a;border-radius:16px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .2s;}
.card:hover{transform:translateY(-4px);}
.card img{width:100%;display:block;}
.card-body{padding:12px;}
.card-body h2{font-size:16px;margin:0 0 6px;color:#38bdf8;}
.card-body p{font-size:13px;margin:4px 0;color:#94a3b8;}
.card-body .genre{font-size:11px;background:rgba(34,211,238,.12);color:#22d3ee;padding:2px 6px;border-radius:8px;margin-right:4px;display:inline-block;}
.card-body .btn{margin-top:8px;padding:6px 10px;border:none;border-radius:10px;background:#22d3ee;color:#0f172a;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;display:inline-block;font-size:12px;}
.load-more{display:block;margin:16px auto;padding:10px 20px;border:none;border-radius:12px;background:#22d3ee;color:#0f172a;font-weight:600;cursor:pointer;font-size:14px;}
</style>
</head>
<body>
<div class="wrap">
<h1>AGC Movie & TV Series</h1>
<div class="search-filter">
<input type="text" id="search" placeholder="Cari judul...">
<select id="filter-type"><option value="all">Semua</option><option value="movie">Movie</option><option value="series">TV Series</option></select>
<select id="filter-genre"><option value="all">Semua Genre</option></select>
</div>
<div class="grid" id="grid"></div>
<button class="load-more" id="loadMoreBtn">Muat Lebih Banyak</button>
</div>
<script>
let data = [], currentIndex = 0, pageSize = 12;
// Ganti URL berikut dengan raw GitHub JSON Anda
fetch('https://raw.githubusercontent.com/USERNAME/REPO/main/data.json')
.then(r=>r.json())
.then(j=>{ data=j; initGenres(); renderGrid(data); });
function initGenres(){
const genres = new Set();
data.forEach(d=>d.genre.forEach(g=>genres.add(g)));
const sel = document.getElementById('filter-genre');
Array.from(genres).sort().forEach(g=>{ let opt=document.createElement('option'); opt.value=g; opt.textContent=g; sel.appendChild(opt); });
}
function renderGrid(items, reset=true){
const grid = document.getElementById('grid');
if(reset) grid.innerHTML='';
const slice = items.slice(currentIndex,currentIndex+pageSize);
slice.forEach(d=>{
const card = document.createElement('div'); card.className='card';
card.innerHTML=`
<img src="${d.poster||'https://via.placeholder.com/300x450?text=No+Image'}" alt="${d.title}">
<div class="card-body">
<h2>${d.title}</h2>
<p>Year: ${d.year||'-'} | Duration: ${d.duration||'-'}</p>
<p>Rating: ${d.rating||'-'}</p>
<div>${(d.genre||[]).map(g=>'<span class="genre">'+g+'</span>').join('')}</div>
<a href="${d.link||'#'}" target="_blank" class="btn">Lihat Detail</a>
</div>
`;
grid.appendChild(card);
});
currentIndex += pageSize;
document.getElementById('loadMoreBtn').style.display = (currentIndex<items.length) ? 'block':'none';
}
function applyFilter(){
const s = document.getElementById('search').value.toLowerCase();
const t = document.getElementById('filter-type').value;
const g = document.getElementById('filter-genre').value;
currentIndex = 0;
const filtered = data.filter(d=>{
let ok = true;
if(s && !d.title.toLowerCase().includes(s)) ok=false;
if(t!=='all' && d.type!==t) ok=false;
if(g!=='all' && !d.genre.includes(g)) ok=false;
return ok;
});
renderGrid(filtered);
}
document.getElementById('search').addEventListener('input', applyFilter);
document.getElementById('filter-type').addEventListener('change', applyFilter);
document.getElementById('filter-genre').addEventListener('change', applyFilter);
document.getElementById('loadMoreBtn').addEventListener('click',()=>{
const s = document.getElementById('search').value.toLowerCase();
const t = document.getElementById('filter-type').value;
const g = document.getElementById('filter-genre').value;
const filtered = data.filter(d=>{
let ok = true;
if(s && !d.title.toLowerCase().includes(s)) ok=false;
if(t!=='all' && d.type!==t) ok=false;
if(g!=='all' && !d.genre.includes(g)) ok=false;
return ok;
});
renderGrid(filtered,false);
});
</script>
</body>
</html>
Komentar untuk Script AGC Movie Tv Series
Posting Komentar