👨‍🏫 Tutorial How I built this Movie Website in a minute and monetize it ( pagkaperahan ) Adsterra/Monetag

Damn-YankeeS · Sep 23, 2025

Full Guide Step-by-Step (Tagalog Version + Monetize)

I already put some ads at nahihirapan na akong burahin kaya ito nalng example ko anyways mag tanong lang sa baba sasagot ako pag merong time

CHECK THIS CRAZY METHOD

You do not have permission to view the full content of this post. Log in or register now.

1.

Buksan mo ang Gemini AI.
I-click ang Canvas.
I-paste yung code na ibibigay ko sayo.
I-press ang Enter at hintayin hanggang mabasa ni Gemini yung code.

ITO PO YUNG CODE WAG NIYO GALAWIN NASA BABA !

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GeminiFlix</title>

<script src="You do not have permission to view the full content of this post. Log in or register now."></script>

<link rel="preconnect" href="You do not have permission to view the full content of this post. Log in or register now.">
<link rel="preconnect" href="You do not have permission to view the full content of this post. Log in or register now." crossorigin>
<link href="You do not have permission to view the full content of this post. Log in or register now." rel="stylesheet">

<script type='text/javascript' src='//pl27706575.revenuecpmgate.com/43/08/fd/4308fd0c92978073c8ed9c0d58c16d99.js'></script>
<style>
/* Custom styles to perfect the Netflix look */
body {
background-color: #141414;
font-family: 'Inter', sans-serif;
}
/* Hides the scrollbar but allows scrolling in movie rows */
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* Creates the fade-out effect at the bottom of the banner */
.banner-fade-bottom {
height: 7.4rem;
background-image: linear-gradient(180deg, transparent, rgba(37,37,37,.61), #141414);
}
/* Ensures the video player maintains a 16:9 aspect ratio */
#modal-video-container {
aspect-ratio: 16 / 9;
}
/* Styles for the scroll arrows on movie rows */
.scroll-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 0.5rem;
cursor: pointer;
z-index: 10;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 9999px; /* fully rounded */
width: 2.5rem; /* 40px */
height: 2.5rem; /* 40px */
}
.row-container:hover .scroll-arrow {
opacity: 1;
}
.scroll-arrow.left {
left: 0.5rem;
}
.scroll-arrow.right {
right: 0.5rem;
}
</style>
</head>
<body class="text-white">

<nav id="navbar" class="fixed top-0 left-0 right-0 z-50 p-4 transition-colors duration-500">
<div class="flex justify-between items-center">
<div>
<a href="#" class="text-2xl md:text-3xl font-extrabold text-red-600 no-underline hover

pacity-80 transition">
GeminiFlix
</a>
<p class="text-xs text-gray-400 mt-1">Created By : Damn-YankeeS - PhCorner Elites DevOps</p>
</div>
<img class="h-8 w-8 rounded" src="You do not have permission to view the full content of this post. Log in or register now." alt="Profile Avatar">
</div>
</nav>

<header id="banner" class="relative text-white object-cover bg-cover bg-center" style="height: 56.25vw; max-height: 800px;">
<div class="ml-8 pt-48 md

t-56 h-full">
<h1 id="banner-title" class="text-3xl md:text-6xl font-extrabold pb-2"></h1>
<div class="flex space-x-2 my-4">
<button id="banner-play-btn" class="bg-white text-black font-bold rounded px-6 md

x-8 py-2 hover:bg-gray-300 transition text-sm md:text-base flex items-center justify-center">
<svg xmlns="You do not have permission to view the full content of this post. Log in or register now." class="h-6 w-6 mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
</svg>
Play
</button>
<button id="banner-info-btn" class="bg-gray-500 bg-opacity-70 text-white font-bold rounded px-6 md

x-8 py-2 hover:bg-gray-600 transition text-sm md:text-base">
More Info
</button>
</div>
<p id="banner-description" class="w-full md:w-[45rem] max-w-sm md:max-w-md pt-2 text-xs md:text-sm h-24"></p>
</div>
<div class="absolute bottom-0 left-0 right-0 banner-fade-bottom"></div>
</header>

<main id="movie-rows" class="px-4 md

x-10 pb-16">

</main>

<div id="modal-overlay" class="hidden fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 p-4">
<div id="modal-container" class="relative bg-zinc-900 w-full max-w-4xl rounded-lg shadow-lg overflow-hidden">
<button id="modal-close-btn" class="absolute top-3 right-3 text-white bg-black bg-opacity-50 rounded-full h-8 w-8 flex items-center justify-center z-20 hover:bg-opacity-75 transition">
<svg xmlns="You do not have permission to view the full content of this post. Log in or register now." class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<div id="modal-video-container" class="w-full bg-black">
<iframe id="youtube-player" class="w-full h-full" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<div id="no-trailer-message" class="hidden w-full h-full flex items-center justify-center text-lg">Trailer not available</div>
</div>
<div id="modal-details" class="p-6">
<h2 id="modal-title" class="text-2xl font-bold"></h2>
<p id="modal-description" class="text-sm mt-2 text-zinc-300"></p>
<div id="watch-providers" class="mt-4">
<h3 class="text-lg font-semibold">Watch Now On:</h3>
<div id="providers-list" class="flex flex-wrap gap-4 mt-2"></div>
<p id="no-providers-message" class="hidden text-zinc-400 mt-2">Streaming information not available for this region.</p>
</div>
</div>
</div>
</div>
<script>
// --- CONFIGURATION ---
const API_KEY = 'bea92ea47a50fb9e1cd25ca8443c5718'; // Restored API key
const IMAGE_BASE_URL = 'You do not have permission to view the full content of this post. Log in or register now.
const ADSTERRA_URL = 'You do not have permission to view the full content of this post. Log in or register now.
// API endpoints for different movie categories
const requests = {
fetchNetflixOriginals: /discover/tv?api_key=${API_KEY}&with_networks=213,
fetchTrending: /trending/all/week?api_key=${API_KEY}&language=en-US,
fetchTopRated: /movie/top_rated?api_key=${API_KEY}&language=en-US,
fetchActionMovies: /discover/movie?api_key=${API_KEY}&with_genres=28,
fetchComedyMovies: /discover/movie?api_key=${API_KEY}&with_genres=35,
fetchHorrorMovies: /discover/movie?api_key=${API_KEY}&with_genres=27,
fetchRomanceMovies: /discover/movie?api_key=${API_KEY}&with_genres=10749,
fetchSciFiMovies: /discover/movie?api_key=${API_KEY}&with_genres=878,
fetchThrillerMovies: /discover/movie?api_key=${API_KEY}&with_genres=53,
fetchAnimationMovies: /discover/movie?api_key=${API_KEY}&with_genres=16,
fetchTvShows: /discover/tv?api_key=${API_KEY}&with_genres=10759,
fetchDocumentaries: /discover/movie?api_key=${API_KEY}&with_genres=99,
};
// --- DOM ELEMENT SELECTORS ---
const movieRowsContainer = document.getElementById('movie-rows');
const modalOverlay = document.getElementById('modal-overlay');
const modalCloseBtn = document.getElementById('modal-close-btn');
const youtubePlayer = document.getElementById('youtube-player');

// --- CORE FUNCTIONS ---
async function fetchData(endpoint) {
try {
const response = await fetch(https://api.themoviedb.org/3${endpoint});
if (!response.ok) throw new Error(HTTP error! status: ${response.status});
const data = await response.json();
return data.results;
} catch (error) {
console.error("Error fetching data:", error);
if (API_KEY === 'YOUR_TMDB_API_KEY') {
console.warn('Please replace "YOUR_TMDB_API_KEY" with your actual TMDB API key in the script section.');
}
return [];
}
}
async function fetchMovieDetails(movieId, mediaType) {
const type = mediaType === 'tv' ? 'tv' : 'movie';
try {
const url =

https://api.themoviedb.org/3/${type}/${movieId}?api_key=${API_KEY}&language=en-US&append_to_response=videos,watch/providers

;
const response = await fetch(url);
if (!response.ok) throw new Error('Failed to fetch details');
return await response.json();
} catch (error) {
console.error("Error fetching movie details:", error);
return null;
}
}
function truncate(string, n) {
return string?.length > n ? string.substr(0, n - 1) + '...' : string;
}
// Updated function to include scroll arrows
function createMovieRow(title, movies, isLargeRow = false) {
const row = document.createElement('div');
row.className = 'my-8';

const rowTitle = document.createElement('h2');
rowTitle.className = 'text-xl md:text-2xl font-bold mb-2';
rowTitle.textContent = title;
row.appendChild(rowTitle);
const rowContainer = document.createElement('div');
rowContainer.className = 'relative row-container';
row.appendChild(rowContainer);
const postersContainer = document.createElement('div');
postersContainer.className = 'flex overflow-y-hidden overflow-x-scroll p-2 -ml-2 scrollbar-hide';
rowContainer.appendChild(postersContainer);
movies.forEach(movie => {
const imagePath = isLargeRow ? movie.poster_path : movie.backdrop_path;
if (!imagePath) return;
const poster = document.createElement('img');
poster.src = ${IMAGE_BASE_URL}${imagePath};
poster.alt = movie.name || movie.title;
poster.loading = 'lazy';
poster.dataset.movieId = movie.id;
poster.dataset.mediaType = movie.media_type || (isLargeRow ? 'tv' : 'movie');
poster.className =

object-contain transition-transform duration-300 hover:scale-105 md:hover:scale-110 cursor-pointer ${isLargeRow ? 'max-h-60' : 'max-h-28'} mr-3 rounded

;

poster.addEventListener('click', handlePosterClick);
postersContainer.appendChild(poster);
});
// Add scroll arrows
const leftArrow = document.createElement('button');
leftArrow.className = 'scroll-arrow left';
leftArrow.innerHTML = '<svg xmlns="You do not have permission to view the full content of this post. Log in or register now." class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>';
leftArrow.addEventListener('click', () => {
postersContainer.scrollBy({ left: -window.innerWidth * 0.8, behavior: 'smooth' });
});
rowContainer.appendChild(leftArrow);
const rightArrow = document.createElement('button');
rightArrow.className = 'scroll-arrow right';
rightArrow.innerHTML = '<svg xmlns="You do not have permission to view the full content of this post. Log in or register now." class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>';
rightArrow.addEventListener('click', () => {
postersContainer.scrollBy({ left: window.innerWidth * 0.8, behavior: 'smooth' });
});
rowContainer.appendChild(rightArrow);
movieRowsContainer.appendChild(row);
}

// --- EVENT HANDLERS & MODAL LOGIC ---
async function handlePosterClick(event) {
window.open(ADSTERRA_URL, '_blank'); // Open ad on any movie click
const { movieId, mediaType } = event.target.dataset;
const details = await fetchMovieDetails(movieId, mediaType);
if (details) {
displayModalWithDetails(details);
}
}
function displayModalWithDetails(details) {
document.getElementById('modal-title').textContent = details.name || details.title;
document.getElementById('modal-description').textContent = details.overview;

const trailer = details.videos?.results.find(video => video.site === 'YouTube' && video.type === 'Trailer');
const noTrailerMessage = document.getElementById('no-trailer-message');
if (trailer) {
youtubePlayer.src = https://www.youtube.com/embed/${trailer.key}?autoplay=1&controls=0&rel=0;
youtubePlayer.classList.remove('hidden');
noTrailerMessage.classList.add('hidden');
} else {
youtubePlayer.src = '';
youtubePlayer.classList.add('hidden');
noTrailerMessage.classList.remove('hidden');
}
const providersList = document.getElementById('providers-list');
const noProvidersMessage = document.getElementById('no-providers-message');
providersList.innerHTML = '';

const providers = details['watch/providers']?.results?.US?.flatrate;
if (providers && providers.length > 0) {
providers.forEach(provider => {
const providerLink = document.createElement('a');
const movieTitle = details.name || details.title;
providerLink.href = https://www.google.com/search?q=Watch ${encodeURIComponent(movieTitle)} on ${encodeURIComponent(provider.provider_name)};
providerLink.target = '_blank';
providerLink.rel = 'noopener noreferrer';
const providerLogo = document.createElement('img');
providerLogo.src = ${IMAGE_BASE_URL}${provider.logo_path};
providerLogo.title = Watch on ${provider.provider_name};
providerLogo.className = 'h-10 w-10 rounded-lg transition-transform hover:scale-110';

providerLink.appendChild(providerLogo);
providersList.appendChild(providerLink);
});
noProvidersMessage.classList.add('hidden');
} else {
noProvidersMessage.classList.remove('hidden');
}
modalOverlay.classList.remove('hidden');
}

function closeModal() {
modalOverlay.classList.add('hidden');
youtubePlayer.src = '';
}
// --- INITIALIZATION ---

document.addEventListener('DOMContentLoaded', async () => {
const bannerMovies = await fetchData(requests.fetchNetflixOriginals);
if(bannerMovies.length === 0) return;
const bannerMovie = bannerMovies[Math.floor(Math.random() * bannerMovies.length)];
if (bannerMovie) {
document.getElementById('banner').style.backgroundImage = url('${IMAGE_BASE_URL}${bannerMovie.backdrop_path}');
document.getElementById('banner-title').textContent = bannerMovie.name || bannerMovie.title || bannerMovie.original_name;
document.getElementById('banner-description').textContent = truncate(bannerMovie.overview, 150);
const bannerPlayButton = document.getElementById('banner-play-btn');
const bannerMoreInfoButton = document.getElementById('banner-info-btn');

const showBannerModal = async () => {
window.open(ADSTERRA_URL, '_blank'); // Open ad on banner play/info click
const details = await fetchMovieDetails(bannerMovie.id, bannerMovie.media_type || 'tv');
if (details) {
displayModalWithDetails(details);
}
};
bannerPlayButton?.addEventListener('click', showBannerModal);
bannerMoreInfoButton?.addEventListener('click', showBannerModal);
}
const allRows = [
{ title: "GeminiFlix Originals", endpoint: requests.fetchNetflixOriginals, isLarge: true },
{ title: "Trending Now", endpoint: requests.fetchTrending },
{ title: "Top Rated", endpoint: requests.fetchTopRated },
{ title: "Action & Adventure", endpoint: requests.fetchTvShows },
{ title: "Action Movies", endpoint: requests.fetchActionMovies },
{ title: "Animation", endpoint: requests.fetchAnimationMovies },
{ title: "Comedy Movies", endpoint: requests.fetchComedyMovies },
{ title: "Horror Movies", endpoint: requests.fetchHorrorMovies },
{ title: "Thriller Movies", endpoint: requests.fetchThrillerMovies },
{ title: "Romance Movies", endpoint: requests.fetchRomanceMovies },
{ title: "Sci-Fi Movies", endpoint: requests.fetchSciFiMovies },
{ title: "Documentaries", endpoint: requests.fetchDocumentaries },
];

Promise.all(allRows.map(row => fetchData(row.endpoint))).then(results => {
results.forEach((movies, index) => {
const rowConfig = allRows[index];
if (movies && movies.length > 0) {
createMovieRow(rowConfig.title, movies, rowConfig.isLarge);
}
});
});
modalCloseBtn.addEventListener('click', closeModal);
modalOverlay.addEventListener('click', (event) => {
if (event.target === modalOverlay) closeModal();
});
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape' && !modalOverlay.classList.contains('hidden')) {
closeModal();
}
});
});

// --- UI EFFECTS ---
window.addEventListener('scroll', () => {
const navbar = document.getElementById('navbar');
if (window.scrollY > 100) {
navbar.style.backgroundColor = '#141414';
} else {
navbar.style.backgroundColor = 'transparent';
}
});
</script>
</body>
</html>

2.

Punta sa TMDb website (The Movie Database).
Gumawa ng free account.
I-search “paano makakuha ng TMDb API key” (madali lang).
Kopyahin yung API key (ingat, wag mong i-share sa iba).

3.

Balik ka sa Gemini.
Sabihin mo in English yung prompt:

“This is my TMDb API, please include this inside the code.”

Click to expand...
I-paste yung API key mo.
Note: Wag baguhin ang ibang part ng code.

4.

Kapag tapos na si Gemini magbigay ng final code, kopyahin ito.
Buksan ang Notepad o kahit anong text editor.
I-paste yung code tapos i-save bilang:

<span><span><span>index.html</span></span><span><br></span></span>
Ilagay sa empty folder (walang laman kundi index.html).

5.

Punta sa Netlify.
Gumawa ng free account.
Pag-login, piliin ang Deploy Project / New Site from Folder.
I-upload yung folder na may laman na index.html.
Hintayin ilang segundo hanggang maging live.

6.

Punta sa You do not have permission to view the full content of this post. Log in or register now.
Kung wala ka pang account, mag-register ka You do not have permission to view the full content of this post. Log in or register now. (mas maganda kung bago pa ang account mo).
Pag nakapag-login ka na, i-register yung website mo (yung link na binigay ni Netlify).
Explore mo yung Adsterra dashboard para makuha yung Direct Link.
Balik ka ulit sa Gemini at gamitin itong prompt:

“This is my Adsterra direct link, please include this in the code.”

Click to expand...
I-paste ang direct link para maisama sa code.

7.

Pag na-update na yung code at na-redeploy sa Netlify,
Boom! Naka-live na ang website mo kasama na yung monetization via Adsterra.

Tips:

Laging i-check sa Netlify live site kung gumagana yung API at Adsterra ads.
Mas madali kang maka-earn kung may traffic yung website (share mo sa social media o SEO).
Huwag ipakita sa iba ang API key mo para safe.

POST NIYO SA FB #movieclips #netflix #series wala ng iba pa wag lagyan ng title

pa Support po salamat!

Johnskie12 · Sep 23, 2025

Maraming salamat sa tutorial bossing

Damn-YankeeS · Sep 23, 2025

Johnskie12 said:
Maraming salamat sa tutorial bossing

welcome sir as always

mi-rae · Sep 23, 2025

salamat bossing, ma try nga :KannaPls:

Damn-YankeeS · Sep 23, 2025

mi-rae said:
salamat bossing, ma try nga

[Hidden content]

bagong method palang yan hehe sa pag gawa ng movie site na pinaka easy lang talaga no coding na, at tsaka yung adsterra naka bili na ako ng motor aerox nga lang haha

darkemo07 · Sep 23, 2025

bilis ng tut mo paps ah. para sa mga newbie na gusto automatic agad

parang pounder style yung sa adsterra DL?

Damn-YankeeS · Sep 23, 2025

darkemo07 said:
bilis ng tut mo paps ah. para sa mga newbie na gusto automatic agad

bigay na natin paps habang maaga pa hindi pa halata sa mga indiano HAHAHA! pag meron nag clone nyan malalaman din naman

darkemo07 said:
bilis ng tut mo paps ah. para sa mga newbie na gusto automatic agad

parang pounder style yung sa adsterra DL?

Oo nasa code na yan matic na yan paps , ang gagawin nalng nila is konin nila mismo yung direct link nila sa adsterra para ma include sa code at matic na yan mag realod every 10 seconds kung hindi ginagalaw at automatic din yan mag close dpende sa ADs

PaRzIbAl · Sep 23, 2025

salamat lods keep sharing

Damn-YankeeS · Sep 23, 2025

PaRzIbAl said:
salamat lods keep sharing

welcome always paps

ryzen9 · Sep 23, 2025

Thank you for sharing nito boss

frenchplayer · Sep 23, 2025

maraming salamat po dito

PHC_HARLEY QUINN · Sep 23, 2025

trailer lang lalabas nito paps?

Prof-Ling · Sep 24, 2025

Damn-YankeeS said:
bagong method palang yan hehe sa pag gawa ng movie site na pinaka easy lang talaga no coding na, at tsaka yung adsterra naka bili na ako ng motor aerox nga lang haha

wag mo i-lang lang yun aerox, hahaha. di yan biro, pero congrats

Damn-YankeeS · Sep 24, 2025

Prof-Ling said:
wag mo i-lang lang yun aerox, hahaha. di yan biro, pero congrats

Ty bro

DrJake · Sep 24, 2025

May emoji yung source code mo bossing, kelangan ba yun palitan?

ClintML · Sep 24, 2025

Pakipaste sa pastebin boss yung code, nagiging emoji kasi yung iba. thanks dito!

frenchplayer · Sep 24, 2025

sir sa website na sample mo po,ang lalabastalaga puro trailer lang di talaga mapapanuod ng buo ang movie?

Damn-YankeeS · Sep 24, 2025

guys update ako mamaya malakas pa ang alon salamat

Nokubi Nana · Sep 24, 2025

Pa bm lods, mukhang ayos to ah, gawin ko mamaya pag uwi galing work hahaha

Damn-YankeeS · Sep 24, 2025

edit ko yan mamaya grabi ang alon

OptiShen said:
Pakipaste sa pastebin boss yung code, nagiging emoji kasi yung iba. thanks dito!

opo sir update ako mamaya ahh

👨‍🏫 Tutorial How I built this Movie Website in a minute and monetize it ( pagkaperahan ) Adsterra/Monetag

Full Guide Step-by-Step (Tagalog Version + Monetize)​

1.​

2.​

3.​

4.​

5.​

6.​

7.​

Forum Veteran

Honorary Poster

Eternal Poster

Eternal Poster

Forum Veteran

Eternal Poster

About this Thread

Trending Topics

Online now

Forum statistics

Full Guide Step-by-Step (Tagalog Version + Monetize)

1.

2.

3.

4.

5.

6.

7.