Name: reelpay
Price: 30 USD
Availability: InStock
Rating: 5.0 (71 reviews)

Reelpay

It Is Not Required To Copyrights

Live Demo Like Add to Wishlist

Screenshots

Item Description

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ReelPay - Watch Reels, Earn Money</title> <style> :root { --bg: #0b132b; --card: #1f2a44; --accent: #4f86f7; --text: #eef3fb; --muted: #a8b4cc; --danger: #ff6b6b; } * { box-sizing: border-box; } body { margin: 0; font-family: Inter, system-ui, sans-serif; background: linear-gradient(180deg, #091126 0%, #121c32 100%); color: var(--text); } header { padding: 28px 24px 12px; display: flex; justify-content: space-between; align-items: center; gap: 16px; } header h1 { margin: 0; font-size: 1.6rem; } header p { margin: 4px 0 0; color: var(--muted); } .container { max-width: 1100px; margin: 0 auto; padding: 0 20px 40px; } .hero { display: grid; gap: 20px; grid-template-columns: 1.5fr 1fr; align-items: start; } .panel, .cards { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 24px; padding: 24px; } .panel h2 { margin: 0 0 12px; } .stats { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 20px 0; } .stat { background: rgba(255,255,255,.04); padding: 18px; border-radius: 18px; } .stat h3 { margin: 0 0 6px; font-size: .95rem; color: var(--muted); } .stat p { margin: 0; font-size: 1.35rem; font-weight: 700; } .btn { border: none; color: #fff; background: var(--accent); padding: 14px 20px; border-radius: 14px; cursor: pointer; font-size: 1rem; transition: transform .16s ease, background .16s ease; } .btn:hover { transform: translateY(-1px); background: #3d6ae7; } .btn.danger { background: var(--danger); } .reel-list { display: grid; gap: 18px; } .reel { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: center; background: rgba(255,255,255,.04); padding: 18px; border-radius: 18px; } .reel img { width: 100%; border-radius: 16px; object-fit: cover; height: 110px; } .reel-info h3 { margin: 0 0 8px; font-size: 1.05rem; } .reel-info p { margin: 0 0 10px; color: var(--muted); } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(79,134,247,.14); color: #d6e4ff; font-size: .88rem; } .banner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; align-items: center; margin-top: 14px; } .banner p { margin: 0; color: #cbd4e6; } .modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: none; justify-content: center; align-items: center; padding: 20px; } .modal.active { display: flex; } .modal-card { width: min(550px, 100%); background: #111827; border-radius: 24px; padding: 24px; box-shadow: 0 20px 50px rgba(0,0,0,.35); } .modal-card h2 { margin: 0 0 14px; } .modal-card p { color: var(--muted); line-height: 1.6; } .close-btn { position: absolute; top: 18px; right: 20px; width: 42px; height: 42px; background: rgba(255,255,255,.08); border: none; border-radius: 50%; color: #fff; cursor: pointer; } @media (max-width: 820px) { .hero { grid-template-columns: 1fr; } .reel { grid-template-columns: 1fr; } header { flex-direction: column; align-items: flex-start; } } </style> </head> <body> <div class="container"> <header> <div> <h1>ReelPay</h1> <p>Watch short reels, unlock earnings, and stay subscribed to cash out.</p> </div> <button class="btn" id="subscribeButton">Subscribe now</button> </header> <section class="hero"> <div class="panel"> <h2>Welcome back!</h2> <p>Subscribe to start earning money for every qualified reel watch session.</p> <div class="stats"> <div class="stat"> <h3>Wallet</h3> <p id="walletBalance">$0.00</p> </div> <div class="stat"> <h3>Today</h3> <p id="todayEarned">$0.00</p> </div> <div class="stat"> <h3>Status</h3> <p id="statusText">Free Trial</p> </div> <div class="stat"> <h3>Reels watched</h3> <p id="watchedCount">0</p> </div> </div> <div class="banner"> <div> <p><strong>Subscription</strong>: $7.99 / month</p> <p>Validates your earnings and unlocks premium reels.</p> </div> <button class="btn" id="earnButton">Start Watching</button> </div> </div> <div class="cards"> <h2>Featured Reels</h2> <div class="reel-list" id="reelList"> <article class="reel"> <img src="https://images.unsplash.com/photo-1519125323398-675f0ddb6308?auto=format&fit=crop&w=500&q=80" alt="Reel thumbnail"> <div class="reel-info"> <h3>Morning Motivation</h3> <p>Watch the full 30-second reel to earn rewards.</p> <span class="badge">Earn $0.25</span> <div style="margin-top: 12px;"> <button class="btn" onclick="watchReel('Morning Motivation', 0.25)">Watch now</button> </div> </div> </article> <article class="reel"> <img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=500&q=80" alt="Reel thumbnail"> <div class="reel-info"> <h3>Quick Fitness Tip</h3> <p>Learn a short move and earn instantly when subscribed.</p> <span class="badge">Earn $0.30</span> <div style="margin-top: 12px;"> <button class="btn" onclick="watchReel('Quick Fitness Tip', 0.30)">Watch now</button> </div> </div> </article> <article class="reel"> <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=500&q=80" alt="Reel thumbnail"> <div class="reel-info"> <h3>Business Growth Hacks</h3> <p>Complete this reel to add money to your wallet.</p> <span class="badge">Earn $0.40</span> <div style="margin-top: 12px;"> <button class="btn" onclick="watchReel('Business Growth Hacks', 0.40)">Watch now</button> </div> </div> </article> </div> </div> </section> </div> <div class="modal" id="modal"> <div class="modal-card"> <button class="close-btn" onclick="closeModal()">×</button> <h2 id="modalTitle">Watch Reel</h2> <p id="modalText">You're ready to watch a reel and earn money once your subscription is active.</p> <div style="margin-top: 18px; display: flex; justify-content: flex-end; gap: 12px;"> <button class="btn danger" onclick="closeModal()">Close</button> <button class="btn" id="confirmWatch">Play Reel</button> </div> </div> </div> <script> let subscribed = false; let wallet = 0; let today = 0; let watched = 0; let selectedReel = null; const walletBalance = document.getElementById('walletBalance'); const todayEarned = document.getElementById('todayEarned'); const watchedCount = document.getElementById('watchedCount'); const statusText = document.getElementById('statusText'); const subscribeButton = document.getElementById('subscribeButton'); const modal = document.getElementById('modal'); const modalTitle = document.getElementById('modalTitle'); const modalText = document.getElementById('modalText'); const confirmWatch = document.getElementById('confirmWatch'); function updateDashboard() { walletBalance.textContent = `$${wallet.toFixed(2)}`; todayEarned.textContent = `$${today.toFixed(2)}`; watchedCount.textContent = watched; statusText.textContent = subscribed ? 'Subscribed' : 'Free Tier'; subscribeButton.textContent = subscribed ? 'Subscribed' : 'Subscribe now'; subscribeButton.disabled = subscribed; } function toggleSubscription() { if (!subscribed) { subscribed = true; wallet += 1.50; // welcome bonus on subscribe today += 1.50; alert('Subscription activated! You earned a $1.50 welcome bonus.'); } updateDashboard(); } function watchReel(title, reward) { selectedReel = { title, reward }; modalTitle.textContent = title; modalText.textContent = subscribed ? `Complete the short reel to earn $${reward.toFixed(2)}.` : 'You need an active subscription to earn. Subscribe now to unlock rewards.'; confirmWatch.textContent = subscribed ? 'Complete Reel' : 'Subscribe First'; modal.classList.add('active'); } function closeModal() { modal.classList.remove('active'); } confirmWatch.addEventListener('click', () => { if (!subscribed) { toggleSubscription(); closeModal(); return; } if (!selectedReel) return; wallet += selectedReel.reward; today += selectedReel.reward; watched += 1; alert(`Great job! You earned $${selectedReel.reward.toFixed(2)} for watching ${selectedReel.title}.`); selectedReel = null; updateDashboard(); closeModal(); }); subscribeButton.addEventListener('click', toggleSubscription); updateDashboard(); </script> </body> </html>

Features

<!DOCTYPE html>

<head>

<title>ReelPay - Watch Reels, Earn Money</title>

<style>

:root {

--bg: #0b132b;

--card: #1f2a44;

--accent: #4f86f7;

--text: #eef3fb;

--muted: #a8b4cc;

--danger: #ff6b6b;

}

* { box-sizing: border-box; }

body {

margin: 0;

font-family: Inter, system-ui, sans-serif;

background: linear-gradient(180deg, #091126 0%, #121c32 100%);

color: var(--text);

}

header {

padding: 28px 24px 12px;

display: flex;

justify-content: space-between;

align-items: center;

gap: 16px;

}

header h1 { margin: 0; font-size: 1.6rem; }

header p { margin: 4px 0 0; color: var(--muted); }

.container {

max-width: 1100px;

margin: 0 auto;

padding: 0 20px 40px;

}

.hero {

display: grid;

gap: 20px;

grid-template-columns: 1.5fr 1fr;

align-items: start;

}

.panel, .cards { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 24px; padding: 24px; }

.panel h2 { margin: 0 0 12px; }

.stats { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 20px 0; }

.stat { background: rgba(255,255,255,.04); padding: 18px; border-radius: 18px; }

.stat h3 { margin: 0 0 6px; font-size: .95rem; color: var(--muted); }

.stat p { margin: 0; font-size: 1.35rem; font-weight: 700; }

.btn {

border: none;

color: #fff;

background: var(--accent);

padding: 14px 20px;

border-radius: 14px;

cursor: pointer;

font-size: 1rem;

transition: transform .16s ease, background .16s ease;

}

.btn:hover { transform: translateY(-1px); background: #3d6ae7; }

.btn.danger { background: var(--danger); }

.reel-list { display: grid; gap: 18px; }

.reel { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: center; background: rgba(255,255,255,.04); padding: 18px; border-radius: 18px; }

.reel img { width: 100%; border-radius: 16px; object-fit: cover; height: 110px; }

.reel-info h3 { margin: 0 0 8px; font-size: 1.05rem; }

.reel-info p { margin: 0 0 10px; color: var(--muted); }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(79,134,247,.14); color: #d6e4ff; font-size: .88rem; }

.banner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; align-items: center; margin-top: 14px; }

.banner p { margin: 0; color: #cbd4e6; }

.modal {

position: fixed;

inset: 0;

background: rgba(0,0,0,.7);

display: none;

justify-content: center;

align-items: center;

padding: 20px;

}

.modal.active { display: flex; }

.modal-card {

width: min(550px, 100%);

background: #111827;

border-radius: 24px;

padding: 24px;

box-shadow: 0 20px 50px rgba(0,0,0,.35);

}

.modal-card h2 { margin: 0 0 14px; }

.modal-card p { color: var(--muted); line-height: 1.6; }

.close-btn { position: absolute; top: 18px; right: 20px; width: 42px; height: 42px; background: rgba(255,255,255,.08); border: none; border-radius: 50%; color: #fff; cursor: pointer; }

@media (max-width: 820px) {

.hero { grid-template-columns: 1fr; }

.reel { grid-template-columns: 1fr; }

header { flex-direction: column; align-items: flex-start; }

}

</style>

</head>

<body>

<div>

<h1>ReelPay</h1>

<p>Watch short reels, unlock earnings, and stay subscribed to cash out.</p>

</div>

<button class="btn" id="subscribeButton">Subscribe now</button>

</header>

<h2>Welcome back!</h2>

<p>Subscribe to start earning money for every qualified reel watch session.</p>

<h3>Wallet</h3>

</div>

<h3>Today</h3>

</div>

<h3>Status</h3>

<p id="statusText">Free Trial</p>

</div>

<h3>Reels watched</h3>

</div>

<div>

<p><strong>Subscription</strong>: $7.99 / month</p>

<p>Validates your earnings and unlocks premium reels.</p>

</div>

<button class="btn" id="earnButton">Start Watching</button>

</div>

<h2>Featured Reels</h2>

<h3>Morning Motivation</h3>

<p>Watch the full 30-second reel to earn rewards.</p>

<button class="btn" onclick="watchReel('Morning Motivation', 0.25)">Watch now</button>

</div>

</article>

<h3>Quick Fitness Tip</h3>

<p>Learn a short move and earn instantly when subscribed.</p>

<button class="btn" onclick="watchReel('Quick Fitness Tip', 0.30)">Watch now</button>

</div>

</article>

<h3>Business Growth Hacks</h3>

<p>Complete this reel to add money to your wallet.</p>

<button class="btn" onclick="watchReel('Business Growth Hacks', 0.40)">Watch now</button>

</div>

</article>

</div>

</section>

</div>

<h2 id="modalTitle">Watch Reel</h2>

<p id="modalText">You're ready to watch a reel and earn money once your subscription is active.</p>

<button class="btn danger" onclick="closeModal()">Close</button>

</div>

let subscribed = false;

let wallet = 0;

let today = 0;

let watched = 0;

let selectedReel = null;

const walletBalance = document.getElementById('walletBalance');

const todayEarned = document.getElementById('todayEarned');

const watchedCount = document.getElementById('watchedCount');

const statusText = document.getElementById('statusText');

const subscribeButton = document.getElementById('subscribeButton');

const modal = document.getElementById('modal');

const modalTitle = document.getElementById('modalTitle');

const modalText = document.getElementById('modalText');

const confirmWatch = document.getElementById('confirmWatch');

function updateDashboard() {

walletBalance.textContent = `$${wallet.toFixed(2)}`;

todayEarned.textContent = `$${today.toFixed(2)}`;

watchedCount.textContent = watched;

statusText.textContent = subscribed ? 'Subscribed' : 'Free Tier';

subscribeButton.textContent = subscribed ? 'Subscribed' : 'Subscribe now';

subscribeButton.disabled = subscribed;

}

function toggleSubscription() {

if (!subscribed) {

subscribed = true;

wallet += 1.50; // welcome bonus on subscribe

today += 1.50;

alert('Subscription activated! You earned a $1.50 welcome bonus.');

}

updateDashboard();

}

function watchReel(title, reward) {

selectedReel = { title, reward };

modalTitle.textContent = title;

modalText.textContent = subscribed

? `Complete the short reel to earn $${reward.toFixed(2)}.`

: 'You need an active subscription to earn. Subscribe now to unlock rewards.';

confirmWatch.textContent = subscribed ? 'Complete Reel' : 'Subscribe First';

modal.classList.add('active');

}

function closeModal() {

modal.classList.remove('active');

}

confirmWatch.addEventListener('click', () => {

if (!subscribed) {

toggleSubscription();

closeModal();

return;

}

if (!selectedReel) return;

wallet += selectedReel.reward;

today += selectedReel.reward;

watched += 1;

alert(`Great job! You earned $${selectedReel.reward.toFixed(2)} for watching ${selectedReel.title}.`);

selectedReel = null;

updateDashboard();

closeModal();

});

subscribeButton.addEventListener('click', toggleSubscription);

updateDashboard();

</script>

</body>

</html>

You have to login to leave a review!

All Reviews

What type of support is included?
Verified source code
Free support included
Download code immediately after purchase
Quality guarantee for your satisfaction
Support: info@sellanycode.com

You have to purchase this item to get support!

You have to login to ask a question!

All Questions

No Question!

$ 30

Verified source code
Live Chat or Email support
100% Satisfaction guarantee
Join 32951+ buyers which trust us!
Download code immediately after purchase

Information

Category	Game Templates / Unity
First Release	29 June 2026
Platforms	Unity 2023
Files included	.html
Framework HTML/CSS	Blueprint
Framework Javascript	YUI
Software version	PHP 8
File Size	30 MB
Database version	MySQL 5.x
Frameworks	Unity