Scribd
Upload
10 views34 pages

app code

The document outlines the structure and styles for a Premium Ad Viewing App, including a sign-in page, main app interface, and ad viewing functionalities. It features a responsive design with sections for video feeds, premium ads, and user profiles, along with interactive elements like buttons for watching ads. The app allows users to sign in via various methods and provides a dynamic interface for engaging with advertisements.

Uploaded by

digitaldailyofficialemail
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
10 views34 pages

app code

The document outlines the structure and styles for a Premium Ad Viewing App, including a sign-in page, main app interface, and ad viewing functionalities. It features a responsive design with sections for video feeds, premium ads, and user profiles, along with interactive elements like buttons for watching ads. The app allows users to sign in via various methods and provides a dynamic interface for engaging with advertisements.

Uploaded by

digitaldailyofficialemail
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 34

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premium Ad Viewing App</title>
<style>
:root {
--primary-color: #2c3e50;
--accent-color: #3498db;
--text-color: #333;
--background-color: #f5f6fa;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--background-color);
color: var(--text-color);
}

/* Sign In Page */
.sign-in-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 2rem;
background: linear-gradient(135deg, #2c3e50, #3498db);
}

.sign-in-box {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
width: 100%;
max-width: 400px;
}

.auth-button {
width: 100%;
padding: 12px;
margin: 8px 0;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
transition: all 0.3s ease;
}

/* Main App Container */


.app-container {
height: 100vh;
overflow: hidden;
}

/* Video Feed */
.video-feed {
padding: 1rem;
height: calc(100vh - 60px);
overflow-y: auto;
}

.video-card {
background: white;
border-radius: 10px;
margin-bottom: 1rem;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.video-player {
width: 100%;
aspect-ratio: 16/9;
background: #000;
}

.video-info {
padding: 1rem;
}

.progress-bar {
height: 4px;
background: #ddd;
margin-top: 0.5rem;
}

.progress {
height: 100%;
background: var(--accent-color);
width: 0;
transition: width 0.3s linear;
}

/* Bottom Navigation */
.bottom-nav {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
background: white;
display: flex;
justify-content: space-around;
align-items: center;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

.nav-item {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: var(--text-color);
padding: 0.5rem;
}

.nav-item.active {
color: var(--accent-color);
}

/* Premium Section */
.premium-container {
padding: 2rem;
text-align: center;
}

.premium-card {
background: white;
padding: 2rem;
border-radius: 10px;
margin: 1rem 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.upgrade-button {
background: var(--accent-color);
color: white;
padding: 1rem 2rem;
border: none;
border-radius: 25px;
font-size: 1.1rem;
cursor: pointer;
transition: transform 0.2s ease;
}

/* Profile Section */
.profile-container {
padding: 2rem;
}

.earnings-card {
background: white;
padding: 1.5rem;
border-radius: 10px;
margin-bottom: 1rem;
}

.settings-option {
padding: 1rem;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}

/* Achievement Notification */
.achievement-notification {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
background: white;
padding: 1rem 2rem;
border-radius: 25px;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
animation: slideIn 0.5s ease;
}

@keyframes slideIn {
from {
transform: translate(-50%, -100%);
opacity: 0;
}
to {
transform: translate(-50%, 0);
opacity: 1;
}
}

.fade-out {
opacity: 0;
transition: opacity 0.5s ease;
}
</style>
</head>
<body>
<div id="signInPage" class="sign-in-container">
<div class="sign-in-box">
<h2>Welcome Back</h2>
<button class="auth-button" style="background: #4285f4; color: white;">
Continue with Google
</button>
<button class="auth-button" style="background: #000; color: white;">
Continue with Apple
</button>
<button class="auth-button" style="background: #e4e6eb; color: #333;">
Continue with Email
</button>
</div>
</div>

<div id="mainApp" class="app-container" style="display: none;">


<div class="video-feed">
<!-- Video content will be dynamically loaded here -->
</div>

<nav class="bottom-nav">
<a href="#home" class="nav-item active">
<span>🏠</span>
<span>Home</span>
</a>
<a href="#premium" class="nav-item">
<span>⭐</span>
<span>Premium</span>
</a>
<a href="#profile" class="nav-item">
<span>👤</span>
<span>Profile</span>
</a>
</nav>
</div>
</body>
</html>
<script>
// Global variables
let totalEarnings = 0;
let adsWatched = 0;
</script>
<script>
// Add guest login button to sign-in box
const signInBox = document.querySelector('.sign-in-box');
const guestButton = document.createElement('button');
guestButton.className = 'auth-button';
guestButton.style.background = '#808080';
guestButton.style.color = 'white';
guestButton.textContent = 'Continue as Guest';
guestButton.addEventListener('click', () => {
document.getElementById('signInPage').style.display = 'none';
document.getElementById('mainApp').style.display = 'block';
});
signInBox.appendChild(guestButton);
</script>
<script>
// Handle home section content
const homeSection = document.querySelector('.video-feed');

// Create home section UI


function createHomeUI() {
homeSection.innerHTML = `
<div class="home-container" style="padding: 20px;">
<div class="welcome-banner" style="
background: linear-gradient(135deg, #2c3e50, #3498db);
color: white;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
text-align: center;
">
<h2>Welcome to Premium Ad Viewer</h2>
<p>Watch ads. Earn rewards. It's that simple.</p>
</div>

<div class="stats-container" style="


display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 20px;
">
<div class="stat-card" style="
background: white;
padding: 15px;
border-radius: 8px;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
">
<h3>Today's Earnings</h3>
<p style="font-size: 24px; color: #2ecc71;">$0.00</p>
</div>
<div class="stat-card" style="
background: white;
padding: 15px;
border-radius: 8px;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
">
<h3>Ads Watched</h3>
<p style="font-size: 24px; color: #3498db;">0</p>
</div>
</div>

<div class="available-ads" style="


background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
">
<h3 style="margin-bottom: 15px;">Available Ads</h3>
<div class="ad-list" style="
display: grid;
gap: 15px;
">
<div class="ad-item" style="
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
cursor: pointer;
">
<div>
<h4 style="margin: 0;">Premium Ad #1</h4>
<p style="margin: 5px 0; color: #666;">Duration:
30s</p>
</div>
<button style="
background: #3498db;
color: white;
border: none;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
">Watch Now</button>
</div>
<div class="ad-item" style="
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
cursor: pointer;
">
<div>
<h4 style="margin: 0;">Premium Ad #2</h4>
<p style="margin: 5px 0; color: #666;">Duration:
45s</p>
</div>
<button style="
background: #3498db;
color: white;
border: none;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
">Watch Now</button>
</div>
</div>
</div>
</div>
`;
}

// Initialize home UI when page loads


createHomeUI();

// Update home UI when home nav is clicked


document.querySelector('a[href="#home"]').addEventListener('click', (e) => {
e.preventDefault();
createHomeUI();
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premium Ad Viewing App</title>
<style>
:root {
--primary-color: #2c3e50;
--accent-color: #3498db;
--text-color: #333;
--background-color: #f5f6fa;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--background-color);
color: var(--text-color);
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.ad-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}

.ad-card {
background: white;
border-radius: 10px;
padding: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.ad-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}

.watch-btn {
background: var(--accent-color);
color: white;
border: none;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s ease;
}

.watch-btn:hover {
background: #2980b9;
}
</style>
</head>
<body>
<div class="container">
<h1>Premium Ads</h1>
<div class="ad-grid">
<div class="ad-card">
<div class="ad-header">
<h3>Premium Ad #1</h3>
<span>30s</span>
</div>
<button class="watch-btn">Watch Now</button>
</div>
<div class="ad-card">
<div class="ad-header">
<h3>Premium Ad #2</h3>
<span>45s</span>
</div>
<button class="watch-btn">Watch Now</button>
</div>
</div>
</div>
</body>
</html>
<script>
// Add interactivity to watch buttons
document.querySelectorAll('.watch-btn').forEach(button => {
button.addEventListener('click', function() {
const adTitle = this.parentElement.querySelector('h3').textContent;
const duration = this.parentElement.querySelector('span').textContent;
alert(`Starting ${adTitle}\nDuration: ${duration}`);
// Simulate ad watching
this.textContent = 'Watching...';
setTimeout(() => {
this.textContent = 'Watched ✓';
this.style.background = '#27ae60';
this.disabled = true;
}, 2000);
});
});

// Add more ad cards dynamically


const adGrid = document.querySelector('.ad-grid');
const addNewAdBtn = document.createElement('button');
addNewAdBtn.textContent = '+ Add New Ad';
addNewAdBtn.style.cssText = `
margin: 20px auto;
display: block;
padding: 10px 20px;
background: #34495e;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
`;

document.querySelector('.container').appendChild(addNewAdBtn);

let adCounter = 3;
addNewAdBtn.addEventListener('click', () => {
const newAd = document.createElement('div');
newAd.className = 'ad-card';
newAd.innerHTML = `
<div class="ad-header">
<h3>Premium Ad #${adCounter}</h3>
<span>${Math.floor(Math.random() * 30 + 30)}s</span>
</div>
<button class="watch-btn">Watch Now</button>
`;
adGrid.appendChild(newAd);
adCounter++;

// Add click handler to new button


newAd.querySelector('.watch-btn').addEventListener('click', function() {
const adTitle = this.parentElement.querySelector('h3').textContent;
const duration = this.parentElement.querySelector('span').textContent;
alert(`Starting ${adTitle}\nDuration: ${duration}`);
this.textContent = 'Watching...';
setTimeout(() => {
this.textContent = 'Watched ✓';
this.style.background = '#27ae60';
this.disabled = true;
}, 2000);
});
});
// Add hover effects
document.querySelectorAll('.ad-card').forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-5px)';
this.style.transition = 'transform 0.3s ease';
});

card.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0)';
});
});
</script>
<script>
// Create video player modal
const videoModal = document.createElement('div');
videoModal.style.cssText = `
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
`;

const videoPlayer = document.createElement('div');


videoPlayer.style.cssText = `
width: 80%;
max-width: 800px;
background: white;
padding: 20px;
border-radius: 10px;
position: relative;
`;

// Array of sample video ads


const sampleAds = [
{ title: "New Sports Car Ad", duration: 30 },
{ title: "Latest Smartphone Ad", duration: 30 },
{ title: "Vacation Resort Ad", duration: 30 },
{ title: "Food Delivery Service Ad", duration: 30 },
{ title: "Online Shopping Ad", duration: 30 },
{ title: "Gaming Console Ad", duration: 30 }
];

// Update watch button click handlers


document.querySelectorAll('.watch-btn').forEach(btn => {
btn.removeEventListener('click', null);
btn.addEventListener('click', function() {
const randomAd = sampleAds[Math.floor(Math.random() *
sampleAds.length)];
const adTitle = this.parentElement.querySelector('h3').textContent;

videoPlayer.innerHTML = `
<h3 style="margin-bottom: 15px">${randomAd.title}</h3>
<div style="background: #f0f0f0; height: 400px; display: flex;
align-items: center; justify-content: center;">
<p>Simulated Video Ad Playing</p>
</div>
<div style="margin-top: 15px">
<div class="progress-bar" style="height: 5px; background: #eee;
border-radius: 5px;">
<div class="progress" style="width: 0%; height: 100%;
background: #3498db; border-radius: 5px;"></div>
</div>
<p style="text-align: right; margin-top: 5px">Time remaining:
<span class="timer">30</span>s</p>
</div>
`;

videoModal.style.display = 'flex';
videoModal.appendChild(videoPlayer);
document.body.appendChild(videoModal);

let timeLeft = 30;


const timer = videoPlayer.querySelector('.timer');
const progressBar = videoPlayer.querySelector('.progress');

const countdown = setInterval(() => {


timeLeft--;
timer.textContent = timeLeft;
progressBar.style.width = `${((30 - timeLeft) / 30) * 100}%`;

if (timeLeft <= 0) {
clearInterval(countdown);
videoModal.style.display = 'none';
this.textContent = 'Watched ✓';
this.style.background = '#27ae60';
this.disabled = true;

// Update earnings (random amount between $0.10 and $0.50)


const earnings = (Math.random() * 0.4 + 0.1).toFixed(2);
alert(`Ad completed! You earned $${earnings}`);
}
}, 1000);
});
});

// Allow clicking outside video to close


videoModal.addEventListener('click', (e) => {
if (e.target === videoModal) {
videoModal.style.display = 'none';
}
});
</script>
<script>
// Initialize total earnings
let totalEarnings = 0;

// Create earnings display element


const earningsDisplay = document.createElement('div');
earningsDisplay.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
background: #27ae60;
color: white;
padding: 10px 20px;
border-radius: 5px;
font-weight: bold;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
`;
earningsDisplay.innerHTML = `Total Earnings: $<span id="earnings">0.00</span>`;
document.body.appendChild(earningsDisplay);

// Update the earnings display


function updateEarnings(amount) {
totalEarnings += parseFloat(amount);
document.getElementById('earnings').textContent = totalEarnings.toFixed(2);
}

// Modify the existing alert in the countdown interval to update total earnings
const originalAlert = alert;
window.alert = function(message) {
if (message.includes('You earned')) {
const amount = message.match(/\$([0-9.]+)/)[1];
updateEarnings(amount);
}
originalAlert(message);
};
</script>
<script>
// Create ads watched counter display
const adsWatchedDisplay = document.createElement('div');
adsWatchedDisplay.style.cssText = `
position: fixed;
top: 70px;
right: 20px;
background: #3498db;
color: white;
padding: 10px 20px;
border-radius: 5px;
font-weight: bold;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
`;
adsWatchedDisplay.innerHTML = `Ads Watched: <span id="adsWatched">0</span>`;
document.body.appendChild(adsWatchedDisplay);

// Update ads watched counter when an ad completes


const originalAlert = window.alert;
window.alert = function(message) {
if (message.includes('Ad completed!')) {
const adsWatchedCount = document.getElementById('adsWatched');
adsWatchedCount.textContent = parseInt(adsWatchedCount.textContent) +
1;
}
originalAlert(message);
};
</script>
<script>
// Track total earnings and ads watched
let totalEarnings = 0;
let adsWatched = 0;
// Create earnings display
const earningsDisplay = document.createElement('div');
earningsDisplay.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
background: #27ae60;
color: white;
padding: 10px 20px;
border-radius: 5px;
font-weight: bold;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
`;
earningsDisplay.innerHTML = `Total Earnings: $<span id="earnings">0.00</span>`;
document.body.appendChild(earningsDisplay);

// Create ads watched counter display


const adsWatchedDisplay = document.createElement('div');
adsWatchedDisplay.style.cssText = `
position: fixed;
top: 70px;
right: 20px;
background: #3498db;
color: white;
padding: 10px 20px;
border-radius: 5px;
font-weight: bold;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
`;
adsWatchedDisplay.innerHTML = `Ads Watched: <span id="adsWatched">0</span>`;
document.body.appendChild(adsWatchedDisplay);

// Override alert to track earnings and ads watched


const originalAlert = window.alert;
window.alert = function(message) {
if (message.includes('You earned')) {
const amount = parseFloat(message.match(/\$([0-9.]+)/)[1]);
totalEarnings += amount;
document.getElementById('earnings').textContent =
totalEarnings.toFixed(2);
}
if (message.includes('Ad completed!')) {
adsWatched++;
document.getElementById('adsWatched').textContent = adsWatched;
}
originalAlert.call(window, message);
};
</script>
<script>
// Add click handlers to watch buttons
document.querySelectorAll('.watch-btn').forEach(button => {
button.addEventListener('click', function() {
const adTitle = this.parentElement.querySelector('h3').textContent;
const duration = this.parentElement.querySelector('span').textContent;

// Start watching ad
this.textContent = 'Watching...';
this.disabled = true;
// Simulate ad completion after 2 seconds
setTimeout(() => {
// Calculate random earnings between $0.10 and $0.50
const earnings = (Math.random() * 0.4 + 0.1).toFixed(2);

// Update button state


this.textContent = 'Watched ✓';
this.style.background = '#27ae60';

// Show completion alerts


alert(`Ad completed! ${adTitle}`);
alert(`You earned $${earnings}!`);
}, 2000);
});
});

// Add new ad button functionality


const adGrid = document.querySelector('.ad-grid');
const addNewAdBtn = document.createElement('button');
addNewAdBtn.textContent = '+ Add New Ad';
addNewAdBtn.style.cssText = `
margin: 20px auto;
display: block;
padding: 10px 20px;
background: #34495e;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
`;

document.querySelector('.container').appendChild(addNewAdBtn);

let adCounter = 3;
addNewAdBtn.addEventListener('click', () => {
const newAd = document.createElement('div');
newAd.className = 'ad-card';
newAd.innerHTML = `
<div class="ad-header">
<h3>Premium Ad #${adCounter}</h3>
<span>${Math.floor(Math.random() * 30 + 30)}s</span>
</div>
<button class="watch-btn">Watch Now</button>
`;
adGrid.appendChild(newAd);
adCounter++;

// Add click handler to new watch button


const newWatchBtn = newAd.querySelector('.watch-btn');
newWatchBtn.addEventListener('click', function() {
const adTitle = this.parentElement.querySelector('h3').textContent;
const duration = this.parentElement.querySelector('span').textContent;

this.textContent = 'Watching...';
this.disabled = true;

setTimeout(() => {
const earnings = (Math.random() * 0.4 + 0.1).toFixed(2);
this.textContent = 'Watched ✓';
this.style.background = '#27ae60';
alert(`Ad completed! ${adTitle}`);
alert(`You earned $${earnings}!`);
}, 2000);
});
});
</script>
<script>
// Handle premium section content and navigation
const premiumSection = document.createElement('div');
premiumSection.className = 'premium-section';
premiumSection.style.display = 'none';
premiumSection.innerHTML = `
<div class="premium-container" style="padding: 20px;">
<div class="premium-header" style="
background: linear-gradient(135deg, #8e44ad, #9b59b6);
color: white;
padding: 30px;
border-radius: 15px;
text-align: center;
margin-bottom: 30px;
transform: translateY(0);
transition: transform 0.3s ease;
">
<h2 style="margin: 0; font-size: 28px;">Premium Features</h2>
<p style="margin: 10px 0;">Unlock exclusive benefits and earn more!
</p>
</div>

<div class="premium-features" style="


display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 30px;
">
<div class="feature-card" style="
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
">
<h3>2x Earnings</h3>
<p>Double your earnings on every ad watched</p>
</div>
<div class="feature-card" style="
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
">
<h3>Exclusive Ads</h3>
<p>Access to high-paying premium advertisements</p>
</div>
<div class="feature-card" style="
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
">
<h3>Priority Support</h3>
<p>24/7 dedicated customer support</p>
</div>
</div>

<button id="upgradePremiumBtn" style="


background: #8e44ad;
color: white;
border: none;
padding: 15px 30px;
border-radius: 25px;
font-size: 18px;
cursor: pointer;
display: block;
margin: 0 auto;
transition: transform 0.3s ease, background 0.3s ease;
">Upgrade Now - $9.99/month</button>
</div>
`;

document.querySelector('.video-feed').appendChild(premiumSection);

// Add hover effects to feature cards


premiumSection.querySelectorAll('.feature-card').forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-10px)';
this.style.boxShadow = '0 8px 25px rgba(0,0,0,0.15)';
playHoverSound();
});

card.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0)';
this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.1)';
});
});

// Premium button hover effect


const upgradeBtn = premiumSection.querySelector('#upgradePremiumBtn');
upgradeBtn.addEventListener('mouseenter', function() {
this.style.transform = 'scale(1.05)';
this.style.background = '#9b59b6';
playHoverSound();
});

upgradeBtn.addEventListener('mouseleave', function() {
this.style.transform = 'scale(1)';
this.style.background = '#8e44ad';
});

// Add click handler for upgrade button


upgradeBtn.addEventListener('click', function() {
playClickSound();
this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
this.style.background = '#7f8c8d';

setTimeout(() => {
showConfetti();
this.innerHTML = '✨ Premium Activated! ✨';
this.style.background = '#27ae60';
}, 2000);
});

// Sound effects
function playHoverSound() {
const hoverSound = new
Audio('data:audio/wav;base64,UklGRjIAAABXQVZFZm10IBIAAAABAAEAQB8AAEAfAAABAAgAAABmYW
N0BAAAAAAAAABkYXRhAAAAAA==');
hoverSound.volume = 0.2;
hoverSound.play().catch(() => {});
}

function playClickSound() {
const clickSound = new
Audio('data:audio/wav;base64,UklGRjIAAABXQVZFZm10IBIAAAABAAEAQB8AAEAfAAABAAgAAABmYW
N0BAAAAAAAAABkYXRhAAAAAA==');
clickSound.volume = 0.3;
clickSound.play().catch(() => {});
}

// Confetti animation
function showConfetti() {
const confettiCount = 200;
const colors = ['#9b59b6', '#3498db', '#e74c3c', '#2ecc71', '#f1c40f'];

for(let i = 0; i < confettiCount; i++) {


const confetti = document.createElement('div');
confetti.style.cssText = `
position: fixed;
width: 10px;
height: 10px;
background: ${colors[Math.floor(Math.random() * colors.length)]};
left: ${Math.random() * 100}vw;
top: -10px;
pointer-events: none;
transform: rotate(${Math.random() * 360}deg);
`;

document.body.appendChild(confetti);

const animation = confetti.animate([


{ transform: `translate(0, 0) rotate(0deg)` },
{ transform: `translate(${Math.random() * 200 - 100}px, $
{window.innerHeight}px) rotate(${Math.random() * 360}deg)` }
], {
duration: Math.random() * 2000 + 1000,
easing: 'cubic-bezier(.37,0,.63,1)'
});

animation.onfinish = () => confetti.remove();


}
}
// Navigation handling
document.querySelector('a[href="#premium"]').addEventListener('click',
function(e) {
e.preventDefault();
document.querySelectorAll('.nav-item').forEach(item =>
item.classList.remove('active'));
this.classList.add('active');

document.querySelector('.home-container').style.display = 'none';
premiumSection.style.display = 'block';

// Entrance animation
premiumSection.querySelector('.premium-header').style.transform =
'translateY(-20px)';
setTimeout(() => {
premiumSection.querySelector('.premium-header').style.transform =
'translateY(0)';
}, 100);
});

document.querySelector('a[href="#home"]').addEventListener('click', function(e)
{
e.preventDefault();
document.querySelectorAll('.nav-item').forEach(item =>
item.classList.remove('active'));
this.classList.add('active');

premiumSection.style.display = 'none';
document.querySelector('.home-container').style.display = 'block';
});
</script>
<script>
// Create profile section
const profileSection = document.createElement('div');
profileSection.className = 'profile-section';
profileSection.style.display = 'none';
profileSection.innerHTML = `
<div class="profile-container" style="padding: 20px;">
<div class="profile-header" style="
background: linear-gradient(135deg, #2c3e50, #34495e);
color: white;
padding: 30px;
border-radius: 15px;
text-align: center;
margin-bottom: 30px;
">
<div class="profile-avatar" style="
width: 100px;
height: 100px;
background: #95a5a6;
border-radius: 50%;
margin: 0 auto 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
color: white;
">👤</div>
<h2 style="margin: 0;">Guest User</h2>
<p style="margin: 10px 0; opacity: 0.8;">Member since ${new
Date().toLocaleDateString()}</p>
</div>

<div class="profile-stats" style="


display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-bottom: 30px;
">
<div class="stat-card" style="
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
text-align: center;
">
<h3>Total Earnings</h3>
<p style="font-size: 24px; color: #27ae60;">$<span
id="profileEarnings">0.00</span></p>
</div>
<div class="stat-card" style="
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
text-align: center;
">
<h3>Ads Watched</h3>
<p style="font-size: 24px; color: #3498db;"><span
id="profileAdsWatched">0</span></p>
</div>
</div>

<div class="profile-settings" style="


background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
">
<h3 style="margin-bottom: 15px;">Settings</h3>
<div class="setting-item" style="
padding: 15px 0;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
">
<span>Notifications</span>
<label class="switch" style="
position: relative;
display: inline-block;
width: 50px;
height: 24px;
">
<input type="checkbox" style="opacity: 0; width: 0; height:
0;">
<span style="
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 24px;
"></span>
</label>
</div>
<div class="setting-item" style="
padding: 15px 0;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
">
<span>Dark Mode</span>
<label class="switch" style="
position: relative;
display: inline-block;
width: 50px;
height: 24px;
">
<input type="checkbox" style="opacity: 0; width: 0; height:
0;">
<span style="
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 24px;
"></span>
</label>
</div>
</div>
</div>
`;

document.querySelector('.video-feed').appendChild(profileSection);

// Add profile navigation handler


document.querySelector('a[href="#profile"]').addEventListener('click',
function(e) {
e.preventDefault();
document.querySelectorAll('.nav-item').forEach(item =>
item.classList.remove('active'));
this.classList.add('active');

document.querySelector('.home-container').style.display = 'none';
premiumSection.style.display = 'none';
profileSection.style.display = 'block';
// Update profile stats with current values
document.getElementById('profileEarnings').textContent =
totalEarnings.toFixed(2);
document.getElementById('profileAdsWatched').textContent = adsWatched;
});
</script>
<script>
// Dark mode functionality
const darkModeToggle = document.querySelector('.switch
input[type="checkbox"]');

// Check for saved dark mode preference


if (localStorage.getItem('darkMode') === 'enabled') {
document.body.classList.add('dark-mode');
darkModeToggle.checked = true;
}

// Add dark mode styles


const darkModeStyles = document.createElement('style');
darkModeStyles.textContent = `
body.dark-mode {
background: #1a1a1a;
color: #fff;
}

body.dark-mode .welcome-banner,
body.dark-mode .premium-header {
background: linear-gradient(135deg, #1a1a1a, #2c3e50);
}

body.dark-mode .stat-card,
body.dark-mode .feature-card,
body.dark-mode .ad-card,
body.dark-mode .setting-item {
background: #2c2c2c;
color: #fff;
border-color: #3a3a3a;
}

body.dark-mode .bottom-nav {
background: #2c2c2c;
}

body.dark-mode .nav-item {
color: #fff;
}

body.dark-mode .nav-item.active {
background: #3a3a3a;
}
`;
document.head.appendChild(darkModeStyles);

// Toggle dark mode


darkModeToggle.addEventListener('change', function() {
if (this.checked) {
document.body.classList.add('dark-mode');
localStorage.setItem('darkMode', 'enabled');
} else {
document.body.classList.remove('dark-mode');
localStorage.setItem('darkMode', 'disabled');
}
});
</script>
<script>
// Add dark mode toggle to profile settings
const profileSection = document.querySelector('.profile-section');
if (profileSection) {
const darkModeOption = document.createElement('div');
darkModeOption.className = 'setting-item';
darkModeOption.style.cssText = `
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
border-bottom: 1px solid #eee;
transition: background-color 0.3s ease;
`;

darkModeOption.innerHTML = `
<div>
<h3 style="margin: 0;">Dark Mode</h3>
<p style="margin: 5px 0 0; font-size: 0.9em; color: #666;">Switch
to dark theme</p>
</div>
<label class="switch" style="
position: relative;
display: inline-block;
width: 60px;
height: 34px;
">
<input type="checkbox" id="darkModeToggle" style="
opacity: 0;
width: 0;
height: 0;
">
<span class="slider" style="
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
"></span>
</label>
`;

// Add the dark mode option to profile settings


const settingsContainer = profileSection.querySelector('.settings-
container');
if (settingsContainer) {
settingsContainer.appendChild(darkModeOption);
}

// Initialize dark mode state


const darkModeToggle = document.getElementById('darkModeToggle');
if (localStorage.getItem('darkMode') === 'enabled') {
document.body.classList.add('dark-mode');
darkModeToggle.checked = true;
}

// Add toggle functionality


darkModeToggle.addEventListener('change', function() {
if (this.checked) {
document.body.classList.add('dark-mode');
localStorage.setItem('darkMode', 'enabled');
} else {
document.body.classList.remove('dark-mode');
localStorage.setItem('darkMode', 'disabled');
}
});
}
</script>
<script>
// Add dark mode styles for various components
const darkModeStyles = document.createElement('style');
darkModeStyles.textContent = `
.dark-mode .ad-card {
background: #2c3e50;
color: #fff;
}

.dark-mode .watch-btn {
background: #34495e;
color: #fff;
}

.dark-mode .watch-btn:disabled {
background: #27ae60;
}

.dark-mode .premium-container .premium-header {


background: linear-gradient(135deg, #6c3483, #8e44ad);
}

.dark-mode .feature-card {
background: #2c3e50;
color: #fff;
}

.dark-mode .premium-features .feature-card {


background: #34495e;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.dark-mode .welcome-banner {
background: linear-gradient(135deg, #1a252f, #2980b9);
}

.dark-mode .stat-card {
background: #2c3e50;
color: #fff;
}
.dark-mode .settings-container {
background: #2c3e50;
color: #fff;
}

.dark-mode .video-modal {
background: rgba(0, 0, 0, 0.9);
}

.dark-mode .video-container {
background: #2c3e50;
}

.dark-mode .bottom-nav {
background: #2c3e50;
}

.dark-mode .nav-item {
color: #fff;
}

.dark-mode .nav-item.active {
background: #34495e;
}
`;
document.head.appendChild(darkModeStyles);
</script>
<script>
// Additional dark mode styles for remaining elements
const additionalDarkModeStyles = document.createElement('style');
additionalDarkModeStyles.textContent = `
.dark-mode .ad-card {
background: #34495e;
color: #fff;
}

.dark-mode .ad-header {
background: #2c3e50;
color: #fff;
}

.dark-mode .watch-btn {
background: #3498db;
color: #fff;
}

.dark-mode .watch-btn:disabled {
background: #27ae60;
color: #fff;
}

.dark-mode #addNewAdBtn {
background: #2c3e50;
color: #fff;
}

.dark-mode .sign-in-box {
background: #2c3e50;
color: #fff;
}

.dark-mode .auth-button {
border: 1px solid rgba(255,255,255,0.2);
}

.dark-mode .earnings-display,
.dark-mode .ads-watched-display {
background: #34495e;
color: #fff;
}

.dark-mode .video-feed {
background: #1a252f;
}
`;
document.head.appendChild(additionalDarkModeStyles);
</script>
<script>
// Handle profile section content
const profileSection = document.createElement('div');
profileSection.className = 'profile-section';
profileSection.style.display = 'none';
profileSection.innerHTML = `
<div class="profile-container" style="padding: 20px;">
<div class="profile-header" style="
background: linear-gradient(135deg, #2c3e50, #34495e);
color: white;
padding: 30px;
border-radius: 15px;
text-align: center;
margin-bottom: 30px;
">
<h2 style="margin: 0; font-size: 28px;">My Profile</h2>
<p style="margin: 10px 0;">View your stats and achievements</p>
</div>

<div class="profile-stats" style="


display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
">
<div class="stat-card" style="
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
text-align: center;
">
<h3>Total Earnings</h3>
<p>$<span id="profileEarnings">0.00</span></p>
</div>
<div class="stat-card" style="
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
text-align: center;
">
<h3>Ads Watched</h3>
<p><span id="profileAdsWatched">0</span></p>
</div>
</div>
</div>
`;

// Add sections to video feed


const videoFeed = document.querySelector('.video-feed');
videoFeed.appendChild(profileSection);

// Navigation handling
document.querySelectorAll('.nav-item').forEach(navItem => {
navItem.addEventListener('click', function(e) {
e.preventDefault();

// Remove active class from all nav items


document.querySelectorAll('.nav-item').forEach(item => {
item.classList.remove('active');
});

// Add active class to clicked item


this.classList.add('active');

// Hide all sections


document.querySelector('.home-container')?.style.setProperty('display',
'none');
document.querySelector('.premium-
section')?.style.setProperty('display', 'none');
document.querySelector('.profile-
section')?.style.setProperty('display', 'none');

// Show selected section


const section = this.getAttribute('href').substring(1);
if (section === 'home') {
document.querySelector('.home-
container').style.setProperty('display', 'block');
} else if (section === 'premium') {
document.querySelector('.premium-
section').style.setProperty('display', 'block');
} else if (section === 'profile') {
document.querySelector('.profile-
section').style.setProperty('display', 'block');
// Update profile stats
document.getElementById('profileEarnings').textContent =
totalEarnings.toFixed(2);
document.getElementById('profileAdsWatched').textContent =
adsWatched;
}
});
});

// Add dark mode styles for new sections


const darkModeStyles = document.createElement('style');
darkModeStyles.textContent = `
.dark-mode .profile-section .stat-card,
.dark-mode .premium-section .feature-card {
background: #34495e;
color: #fff;
}

.dark-mode .profile-header,
.dark-mode .premium-header {
background: linear-gradient(135deg, #2c3e50, #34495e);
}
`;
document.head.appendChild(darkModeStyles);
</script>
<script>
// Add achievement system
const achievements = {
firstAd: { name: 'First Steps', description: 'Watch your first ad', reward:
0.50, unlocked: false },
tenAds: { name: 'Getting Started', description: 'Watch 10 ads', reward:
2.00, unlocked: false },
fiftyAds: { name: 'Ad Enthusiast', description: 'Watch 50 ads', reward:
5.00, unlocked: false },
hundredDollars: { name: 'Big Earner', description: 'Earn $100 total',
reward: 10.00, unlocked: false }
};

// Create achievements panel


const achievementsPanel = document.createElement('div');
achievementsPanel.style.cssText = `
position: fixed;
left: 20px;
top: 20px;
background: white;
padding: 15px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
max-width: 300px;
display: none;
`;
achievementsPanel.innerHTML = `
<h3 style="margin-top: 0;">Achievements</h3>
<div id="achievementsList"></div>
`;
document.body.appendChild(achievementsPanel);

// Add achievements toggle button


const achievementsBtn = document.createElement('button');
achievementsBtn.textContent = '🏆';
achievementsBtn.style.cssText = `
position: fixed;
left: 20px;
top: 20px;
background: #f39c12;
color: white;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
cursor: pointer;
font-size: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
`;
document.body.appendChild(achievementsBtn);

// Toggle achievements panel


achievementsBtn.addEventListener('click', () => {
achievementsPanel.style.display = achievementsPanel.style.display ===
'none' ? 'block' : 'none';
});

// Add referral system


const referralCode = Math.random().toString(36).substring(2, 8).toUpperCase();
const referralBonus = 5.00;

// Create referral card


const referralCard = document.createElement('div');
referralCard.style.cssText = `
background: linear-gradient(135deg, #e67e22, #f39c12);
color: white;
padding: 20px;
border-radius: 10px;
margin: 20px;
text-align: center;
`;
referralCard.innerHTML = `
<h3>Refer & Earn</h3>
<p>Share your code and earn $${referralBonus.toFixed(2)} when friends join!
</p>
<div style="
background: rgba(255,255,255,0.1);
padding: 10px;
border-radius: 5px;
margin: 10px 0;
font-size: 20px;
font-weight: bold;
">${referralCode}</div>
<button id="copyRefCode" style="
background: white;
color: #e67e22;
border: none;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
">Copy Code</button>
`;
document.querySelector('.premium-features').appendChild(referralCard);

// Copy referral code functionality


document.getElementById('copyRefCode').addEventListener('click', () => {
navigator.clipboard.writeText(referralCode);
document.getElementById('copyRefCode').textContent = 'Copied!';
setTimeout(() => {
document.getElementById('copyRefCode').textContent = 'Copy Code';
}, 2000);
});

// Add daily rewards system


const dailyReward = {
day1: { amount: 0.25, claimed: false },
day2: { amount: 0.50, claimed: false },
day3: { amount: 0.75, claimed: false },
day4: { amount: 1.00, claimed: false },
day5: { amount: 1.50, claimed: false },
day6: { amount: 2.00, claimed: false },
day7: { amount: 5.00, claimed: false }
};

// Create daily rewards popup


const dailyRewardsPopup = document.createElement('div');
dailyRewardsPopup.style.cssText = `
position: fixed;
bottom: 80px;
right: 20px;
background: white;
padding: 15px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
display: none;
`;
dailyRewardsPopup.innerHTML = `
<h3 style="margin-top: 0;">Daily Rewards</h3>
<p>Come back daily to earn more!</p>
<button id="claimDaily" style="
background: #27ae60;
color: white;
border: none;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
width: 100%;
">Claim Reward</button>
`;
document.body.appendChild(dailyRewardsPopup);

// Show daily rewards on startup


setTimeout(() => {
dailyRewardsPopup.style.display = 'block';
}, 2000);

// Handle daily reward claim


document.getElementById('claimDaily').addEventListener('click', () => {
const today = new Date().getDay();
const reward = dailyReward[`day${today + 1}`].amount;
alert(`Daily Reward Claimed! +$${reward.toFixed(2)}`);
updateEarnings(reward);
dailyRewardsPopup.style.display = 'none';
});

// Check achievements after each ad


function checkAchievements() {
if (!achievements.firstAd.unlocked && adsWatched >= 1) {
unlockAchievement('firstAd');
}
if (!achievements.tenAds.unlocked && adsWatched >= 10) {
unlockAchievement('tenAds');
}
if (!achievements.fiftyAds.unlocked && adsWatched >= 50) {
unlockAchievement('fiftyAds');
}
if (!achievements.hundredDollars.unlocked && totalEarnings >= 100) {
unlockAchievement('hundredDollars');
}
}

function unlockAchievement(achievementId) {
const achievement = achievements[achievementId];
achievement.unlocked = true;
updateEarnings(achievement.reward);

const notification = document.createElement('div');


notification.style.cssText = `
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
background: #2ecc71;
color: white;
padding: 15px 30px;
border-radius: 30px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
animation: slideDown 0.5s ease, fadeOut 0.5s ease 2.5s forwards;
z-index: 1000;
`;
notification.innerHTML = `
🏆 Achievement Unlocked: ${achievement.name}<br>
Reward: $${achievement.reward.toFixed(2)}
`;
document.body.appendChild(notification);

setTimeout(() => notification.remove(), 3000);


}

// Add achievement checking to existing ad completion code


const originalAlert = window.alert;
window.alert = function(message) {
if (message.includes('Ad completed!')) {
checkAchievements();
}
originalAlert.call(window, message);
};
</script>
<script>
// Initialize achievements object
const achievements = {
firstAd: {
name: 'First Ad Watched',
unlocked: false,
reward: 1.00
},
tenAds: {
name: '10 Ads Watched',
unlocked: false,
reward: 5.00
},
fiftyAds: {
name: '50 Ads Watched',
unlocked: false,
reward: 20.00
},
hundredDollars: {
name: '$100 Earned',
unlocked: false,
reward: 50.00
}
};

// Check achievements function


function checkAchievements() {
if (!achievements.firstAd.unlocked && adsWatched >= 1) {
unlockAchievement('firstAd');
}
if (!achievements.tenAds.unlocked && adsWatched >= 10) {
unlockAchievement('tenAds');
}
if (!achievements.fiftyAds.unlocked && adsWatched >= 50) {
unlockAchievement('fiftyAds');
}
if (!achievements.hundredDollars.unlocked && totalEarnings >= 100) {
unlockAchievement('hundredDollars');
}
}

// Override alert to check achievements


const originalAlert = window.alert;
window.alert = function(message) {
if (message.includes('Ad completed!')) {
checkAchievements();
}
originalAlert.call(window, message);
};
</script>
<script>
// Initialize achievements with better structure and animations
const achievements = {
firstAd: {
name: 'First Steps',
description: 'Watch your first ad',
unlocked: false,
reward: 1.00,
icon: '🎯'
},
tenAds: {
name: 'Getting Started',
description: 'Watch 10 ads',
unlocked: false,
reward: 5.00,
icon: '⭐'
},
fiftyAds: {
name: 'Ad Enthusiast',
description: 'Watch 50 ads',
unlocked: false,
reward: 20.00,
icon: '🌟'
},
hundredDollars: {
name: 'Big Earner',
description: 'Earn $100 total',
unlocked: false,
reward: 50.00,
icon: '💰'
},
dailyStreak: {
name: 'Consistency is Key',
description: 'Watch ads 7 days in a row',
unlocked: false,
reward: 10.00,
icon: '🔥'
}
};

// Create achievement notification system


const achievementSound = new
Audio('https://assets.mixkit.co/sfx/preview/mixkit-achievement-bell-600.mp3');
const notificationContainer = document.createElement('div');
notificationContainer.style.cssText = `
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
`;
document.body.appendChild(notificationContainer);

function showAchievementNotification(achievement) {
const notification = document.createElement('div');
notification.style.cssText = `
background: linear-gradient(135deg, #2c3e50, #3498db);
color: white;
padding: 15px 25px;
border-radius: 10px;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
animation: slideIn 0.5s ease, glow 2s infinite;
opacity: 0;
transform: translateY(-20px);
`;

notification.innerHTML = `
<div style="font-size: 2em;">${achievement.icon}</div>
<div>
<h3 style="margin: 0; font-size: 1.2em;">Achievement Unlocked!</h3>
<p style="margin: 5px 0;">${achievement.name}</p>
<p style="margin: 0; color: #2ecc71;">+$$
{achievement.reward.toFixed(2)}</p>
</div>
`;

notificationContainer.appendChild(notification);

// Add CSS animation


const keyframes = `
@keyframes slideIn {
0% { opacity: 0; transform: translateY(-20px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes glow {
0% { box-shadow: 0 4px 15px rgba(52, 152, 219, 0.2); }
50% { box-shadow: 0 4px 25px rgba(52, 152, 219, 0.4); }
100% { box-shadow: 0 4px 15px rgba(52, 152, 219, 0.2); }
}
`;
const style = document.createElement('style');
style.textContent = keyframes;
document.head.appendChild(style);

// Animate in
requestAnimationFrame(() => {
notification.style.opacity = '1';
notification.style.transform = 'translateY(0)';
});

// Play sound
achievementSound.play();

// Remove after animation


setTimeout(() => {
notification.style.opacity = '0';
notification.style.transform = 'translateY(-20px)';
setTimeout(() => notification.remove(), 500);
}, 4000);
}

function unlockAchievement(achievementId) {
const achievement = achievements[achievementId];
if (!achievement.unlocked) {
achievement.unlocked = true;
totalEarnings += achievement.reward;
document.getElementById('earnings').textContent =
totalEarnings.toFixed(2);
showAchievementNotification(achievement);

// Save progress
localStorage.setItem('achievements', JSON.stringify(achievements));
localStorage.setItem('totalEarnings', totalEarnings);
}
}

// Load saved progress


const savedAchievements = localStorage.getItem('achievements');
if (savedAchievements) {
Object.assign(achievements, JSON.parse(savedAchievements));
}

// Check achievements with improved logic


function checkAchievements() {
if (!achievements.firstAd.unlocked && adsWatched >= 1) {
unlockAchievement('firstAd');
}
if (!achievements.tenAds.unlocked && adsWatched >= 10) {
unlockAchievement('tenAds');
}
if (!achievements.fiftyAds.unlocked && adsWatched >= 50) {
unlockAchievement('fiftyAds');
}
if (!achievements.hundredDollars.unlocked && totalEarnings >= 100) {
unlockAchievement('hundredDollars');
}

// Check daily streak


const today = new Date().toDateString();
const lastWatch = localStorage.getItem('lastWatchDate');
if (today !== lastWatch) {
localStorage.setItem('lastWatchDate', today);
const streak = (parseInt(localStorage.getItem('watchStreak') || 0) +
1);
localStorage.setItem('watchStreak', streak);

if (streak >= 7 && !achievements.dailyStreak.unlocked) {


unlockAchievement('dailyStreak');
}
}
}
</script>

You might also like