* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

:root {
--primary: #1e40af; /* Deep blue */
--primary-light: #3b82f6;
--primary-dark: #1e3a8a;
--secondary: #06b6d4; /* Cyan */
--accent: #f59e0b; /* Amber */
--success: #10b981;
--danger: #ef4444;
--light: #f8fafc;
--dark: #1e293b;
--gray: #64748b;
--shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.15);
--gradient-primary: linear-gradient(135deg, #1e40af, #3b82f6);
--gradient-secondary: linear-gradient(135deg, #06b6d4, #0ea5e9);
--gradient-accent: linear-gradient(135deg, #f59e0b, #fbbf24);
}

body {
background-color: #f0f9ff;
color: var(--dark);
line-height: 1.6;
min-height: 100vh;
}

.container {
width: 90%;
max-width: 1300px;
margin: 0 auto;
padding: 0 20px;
}

/* Loading Screen */
#loadingScreen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradient-primary);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.5s;
}

.spinner {
width: 70px;
height: 70px;
border: 5px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
to
}

/* Header */
header {
background: var(--gradient-primary);
box-shadow: var(--shadow);
position: sticky;
top: 0;
z-index: 1000;
transition: all 0.3s;
}

.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
}

.logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}

.logo-icon {
background: white;
width: 45px;
height: 45px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
font-size: 22px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.logo-text {
color: white;
}

.logo-text h1 {
font-size: 26px;
font-weight: 800;
}

.logo-text span {
color: var(--accent);
}

.logo-text p {
font-size: 12px;
opacity: 0.9;
margin-top: -3px;
}

nav ul {
display: flex;
list-style: none;
gap: 25px;
}

nav a {
text-decoration: none;
color: rgba(255, 255, 255, 0.9);
font-weight: 600;
font-size: 16px;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 8px;
}

nav a:hover {
color: white;
transform: translateY(-2px);
}

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

.user-actions {
display: flex;
align-items: center;
gap: 15px;
}

.user-wallet {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border-radius: 50px;
padding: 10px 20px;
display: flex;
align-items: center;
gap: 10px;
color: white;
font-weight: 600;
}

.user-wallet i {
color: var(--accent);
}

.user-wallet span {
color: var(--accent);
font-weight: 800;
font-size: 18px;
}

.user-profile {
width: 45px;
height: 45px;
border-radius: 50%;
background: var(--gradient-accent);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
cursor: pointer;
border: 3px solid rgba(255, 255, 255, 0.3);
}

.btn {
background: var(--gradient-secondary);
color: white;
border: none;
padding: 12px 24px;
border-radius: 10px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s;
display: inline-flex;
align-items: center;
gap: 10px;
box-shadow: 0 5px 15px rgba(6, 182, 212, 0.3);
}

.btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(6, 182, 212, 0.4);
}

.btn-outline {
background: transparent;
border: 2px solid var(--secondary);
color: var(--secondary);
}

.btn-accent {
background: var(--gradient-accent);
box-shadow: 0 5px 15px rgba(245, 158, 11, 0.3);
}

.btn-accent:hover {
box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
}

/* Login/Register in Header */
.auth-buttons {
display: flex;
gap: 10px;
}

.auth-buttons .btn {
padding: 10px 20px;
font-size: 14px;
}

/* Main Content Area */
.content-area {
padding: 40px 0;
min-height: calc(100vh - 180px);
}

/* Hero Section (Shown when not logged in) */
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80');
background-size: cover;
background-position: center;
color: white;
padding: 100px 0;
text-align: center;
border-radius: 0 0 30px 30px;
margin-bottom: 60px;
}

.hero h2 {
font-size: 48px;
margin-bottom: 20px;
font-weight: 800;
}

.hero p {
font-size: 20px;
max-width: 700px;
margin: 0 auto 40px;
opacity: 0.9;
}

.hero-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}

/* Features Section */
.features {
padding: 60px 0;
}

.section-title {
text-align: center;
margin-bottom: 50px;
}

.section-title h2 {
font-size: 36px;
color: var(--primary);
margin-bottom: 15px;
position: relative;
display: inline-block;
padding-bottom: 15px;
}

.section-title h2::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: var(--gradient-primary);
border-radius: 2px;
}

.section-title p {
color: var(--gray);
max-width: 600px;
margin: 0 auto;
font-size: 18px;
}

.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 60px;
}

.feature-card {
background: white;
border-radius: 20px;
padding: 40px 30px;
text-align: center;
box-shadow: var(--shadow);
transition: all 0.3s;
border-top: 5px solid var(--primary);
}

.feature-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}

.feature-card i {
font-size: 50px;
color: var(--primary);
margin-bottom: 25px;
}

.feature-card h3 {
font-size: 24px;
margin-bottom: 15px;
color: var(--dark);
}

.feature-card p {
color: var(--gray);
font-size: 16px;
}

/* How It Works */
.how-it-works {
background: var(--gradient-primary);
color: white;
padding: 80px 0;
border-radius: 30px;
margin-bottom: 60px;
}

.steps {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 30px;
margin-top: 50px;
}

.step {
flex: 1;
min-width: 250px;
text-align: center;
padding: 30px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
}

.step-number {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 800;
margin: 0 auto 20px;
}

.step h3 {
font-size: 22px;
margin-bottom: 15px;
}

/* Dashboard Overview (Shown when logged in) */
.dashboard-overview {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
margin-bottom: 40px;
}

.dashboard-card {
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: var(--shadow);
transition: all 0.3s;
position: relative;
overflow: hidden;
}

.dashboard-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}

.dashboard-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: var(--gradient-primary);
}

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

.card-header h3 {
font-size: 20px;
color: var(--dark);
}

.card-icon {
width: 50px;
height: 50px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: white;
}

.icon-primary {
background: var(--gradient-primary);
}

.icon-secondary {
background: var(--gradient-secondary);
}

.icon-accent {
background: var(--gradient-accent);
}

.wallet-balance {
font-size: 42px;
font-weight: 800;
color: var(--primary);
margin-bottom: 10px;
}

.wallet-balance span {
font-size: 18px;
color: var(--gray);
}

.wallet-stats {
display: flex;
justify-content: space-between;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #e2e8f0;
}

.stat-item {
text-align: center;
}

.stat-value {
font-size: 22px;
font-weight: 700;
color: var(--primary);
}

.stat-label {
font-size: 14px;
color: var(--gray);
margin-top: 5px;
}

/* Ads Section */
.ads-section {
margin-bottom: 40px;
}

.ads-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 25px;
}

.ad-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: var(--shadow);
transition: all 0.3s;
border: 1px solid #e2e8f0;
}

.ad-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}

.ad-header {
background: var(--gradient-primary);
color: white;
padding: 15px;
display: flex;
align-items: center;
justify-content: space-between;
}

.ad-reward {
background: rgba(255, 255, 255, 0.2);
padding: 5px 15px;
border-radius: 50px;
font-weight: 700;
font-size: 14px;
}

.ad-content {
padding: 20px;
}

.ad-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 10px;
color: var(--dark);
}

.ad-description {
color: var(--gray);
font-size: 14px;
margin-bottom: 20px;
line-height: 1.5;
}

.ad-timer {
background: #f1f5f9;
border-radius: 10px;
padding: 15px;
text-align: center;
margin-bottom: 20px;
}

.timer-text {
font-size: 14px;
color: var(--gray);
margin-bottom: 5px;
}

.timer-display {
font-size: 24px;
font-weight: 800;
color: var(--primary);
font-family: 'Courier New', monospace;
}

.ad-action {
width: 100%;
}

/* Purchase Section */
.purchase-section {
margin-bottom: 40px;
}

.purchase-tabs {
display: flex;
background: white;
border-radius: 15px;
padding: 10px;
margin-bottom: 25px;
box-shadow: var(--shadow);
}

.tab {
flex: 1;
text-align: center;
padding: 15px;
border-radius: 10px;
cursor: pointer;
font-weight: 600;
color: var(--gray);
transition: all 0.3s;
}

.tab.active {
background: var(--gradient-primary);
color: white;
box-shadow: 0 5px 15px rgba(30, 64, 175, 0.3);
}

.purchase-form {
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: var(--shadow);
}

.form-group {
margin-bottom: 25px;
}

.form-label {
display: block;
margin-bottom: 10px;
font-weight: 600;
color: var(--dark);
font-size: 16px;
}

.form-control {
width: 100%;
padding: 15px 20px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 16px;
transition: all 0.3s;
background: #f8fafc;
}

.form-control:focus {
outline: none;
border-color: var(--primary-light);
background: white;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.network-logos {
display: flex;
gap: 15px;
margin-top: 10px;
flex-wrap: wrap;
}

.network-logo {
width: 70px;
height: 70px;
border-radius: 10px;
background: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
border: 2px solid #e2e8f0;
padding: 10px;
}

.network-logo:hover {
transform: translateY(-5px);
border-color: var(--primary);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.network-logo.active {
border-color: var(--primary);
background: rgba(30, 64, 175, 0.05);
}

.network-logo img {
width: 100%;
height: 30px;
object-fit: contain;
margin-bottom: 5px;
}

.network-logo span {
font-size: 12px;
font-weight: 600;
color: var(--dark);
}

.data-plans {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
margin-top: 10px;
}

.plan-option {
border: 2px solid #e2e8f0;
border-radius: 10px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
background: white;
}

.plan-option:hover {
border-color: var(--primary);
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.plan-option.selected {
border-color: var(--primary);
background: rgba(30, 64, 175, 0.05);
box-shadow: 0 5px 15px rgba(30, 64, 175, 0.1);
}

.plan-name {
font-size: 16px;
font-weight: 700;
margin-bottom: 5px;
color: var(--dark);
}

.plan-price {
color: var(--primary);
font-weight: 800;
font-size: 18px;
}

.plan-validity {
font-size: 12px;
color: var(--gray);
margin-top: 5px;
}

.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}

/* Login/Register Modal */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 2000;
align-items: center;
justify-content: center;
padding: 20px;
}

.modal.active {
display: flex;
animation: fadeIn 0.3s;
}

@keyframes fadeIn {
from
to
}

.modal-content {
background: white;
border-radius: 25px;
width: 100%;
max-width: 500px;
overflow: hidden;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
animation: slideUp 0.4s;
}

@keyframes slideUp {
from
to
}

.modal-header {
background: var(--gradient-primary);
color: white;
padding: 25px 30px;
display: flex;
justify-content: space-between;
align-items: center;
}

.modal-header h2 {
font-size: 24px;
}

.modal-close {
background: rgba(255, 255, 255, 0.2);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
}

.modal-close:hover {
background: rgba(255, 255, 255, 0.3);
transform: rotate(90deg);
}

.modal-body {
padding: 30px;
}

/* Auth Tabs */
.auth-tabs {
display: flex;
margin-bottom: 30px;
border-bottom: 2px solid #e2e8f0;
}

.auth-tab {
flex: 1;
text-align: center;
padding: 15px;
font-weight: 700;
color: var(--gray);
cursor: pointer;
transition: all 0.3s;
border-bottom: 3px solid transparent;
}

.auth-tab.active {
color: var(--primary);
border-bottom-color: var(--primary);
}

.auth-form {
display: none;
}

.auth-form.active {
display: block;
animation: fadeIn 0.5s;
}

.auth-title {
font-size: 24px;
color: var(--dark);
margin-bottom: 10px;
text-align: center;
}

.auth-subtitle {
color: var(--gray);
text-align: center;
margin-bottom: 30px;
}

.form-footer {
text-align: center;
margin-top: 25px;
color: var(--gray);
}

.form-footer a {
color: var(--primary);
text-decoration: none;
font-weight: 600;
}

/* Profile Modal */
.profile-info {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
}

.profile-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
background: var(--gradient-accent);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 40px;
font-weight: 700;
margin-bottom: 20px;
border: 5px solid #f0f9ff;
}

.profile-name {
font-size: 24px;
font-weight: 700;
color: var(--dark);
margin-bottom: 5px;
}

.profile-email {
color: var(--gray);
font-size: 16px;
}

/* Notification */
.notification {
position: fixed;
top: 100px;
right: 30px;
background: white;
border-radius: 15px;
padding: 20px 25px;
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
gap: 15px;
z-index: 3000;
transform: translateX(400px);
transition: transform 0.5s;
border-left: 5px solid var(--success);
max-width: 350px;
}

.notification.active {
transform: translateX(0);
}

.notification-icon {
width: 45px;
height: 45px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: white;
}

.notification-success {
background: var(--success);
}

.notification-warning {
background: var(--accent);
}

.notification-error {
background: var(--danger);
}

/* Footer */
footer {
background: var(--dark);
color: white;
padding: 60px 0 30px;
margin-top: 60px;
}

.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-bottom: 40px;
}

.footer-column h3 {
font-size: 20px;
margin-bottom: 25px;
color: white;
position: relative;
padding-bottom: 10px;
}

.footer-column h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 3px;
background: var(--secondary);
border-radius: 2px;
}

.footer-column ul {
list-style: none;
}

.footer-column ul li {
margin-bottom: 15px;
}

.footer-column ul li a {
color: #cbd5e1;
text-decoration: none;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 10px;
}

.footer-column ul li a:hover {
color: white;
transform: translateX(5px);
}

.social-icons {
display: flex;
gap: 15px;
margin-top: 20px;
}

.social-icons a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
background: #334155;
border-radius: 50%;
color: white;
text-decoration: none;
font-size: 18px;
transition: all 0.3s;
}

.social-icons a:hover {
background: var(--primary);
transform: translateY(-5px);
}

.copyright {
text-align: center;
padding-top: 30px;
border-top: 1px solid #334155;
color: #94a3b8;
font-size: 14px;
}

/* Responsive */
@media (max-width: 1024px) {
.dashboard-overview {
grid-template-columns: 1fr;
}

.form-row {
grid-template-columns: 1fr;
}
}

@media (max-width: 768px) {
.header-container {
flex-direction: column;
gap: 20px;
}

nav ul {
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}

.user-actions {
width: 100%;
justify-content: center;
}

.hero h2 {
font-size: 36px;
}

.hero p {
font-size: 18px;
}

.steps {
flex-direction: column;
}

.auth-buttons {
flex-direction: column;
width: 100%;
}

.auth-buttons .btn {
width: 100%;
}
}

@media (max-width: 480px) {
.container {
padding: 0 15px;
}

.hero {
padding: 60px 0;
}

.hero h2 {
font-size: 28px;
}

.modal-content {
margin: 10px;
}
}

NaijaRewards

Earn & Pay for Utilities

 

Login


Register

₦0

U

// ==================== // ENHANCED USER ACCOUNT SYSTEM // ==================== const UserAccountSystem = { currentUser: null, walletBalance: 0, totalEarned: 0, totalSpent: 0, adsViewed: 0, transactions: [], earningsChart: null,

// Initialize the app init: function() { this.checkLoginStatus(); this.setupEventListeners(); this.setupNavigation(); this.renderHomepage();

// Hide loading screen after 2 seconds setTimeout(() => { document.getElementById('loadingScreen').style.opacity = '0'; setTimeout(() => { document.getElementById('loadingScreen').style.display = 'none'; }, 500); }, 2000); },

// Check if user is logged in checkLoginStatus: function() { const savedUser = localStorage.getItem('naijarewards_logged_in_user'); const savedData = localStorage.getItem('naijarewards_user_data');

if (savedUser && savedData) { this.currentUser = JSON.parse(savedUser); const userData = JSON.parse(savedData);

// Load user stats this.walletBalance = userData.walletBalance || 0; this.totalEarned = userData.totalEarned || 0; this.totalSpent = userData.totalSpent || 0; this.adsViewed = userData.adsViewed || 0; this.transactions = userData.transactions || [];

this.showLoggedInState(); } else { this.showLoggedOutState(); } },

// Show logged in state showLoggedInState: function() { // Update UI document.getElementById('authButtons').style.display = 'none'; document.getElementById('loggedInUser').style.display = 'flex'; document.getElementById('dashboardSection').style.display = 'block';

// Update user info document.getElementById('userInitial').textContent = this.currentUser.firstName.charAt(0); document.getElementById('walletBalance').textContent = '₦' + this.walletBalance.toLocaleString(); document.getElementById('dashboardBalance').textContent = '₦' + this.walletBalance.toLocaleString(); document.getElementById('formWalletBalance').textContent = '₦' + this.walletBalance.toLocaleString(); document.getElementById('totalEarned').textContent = '₦' + this.totalEarned.toLocaleString(); document.getElementById('totalSpent').textContent = '₦' + this.totalSpent.toLocaleString(); document.getElementById('adsViewed').textContent = this.adsViewed;

// Load dashboard content this.loadAds(); this.renderPurchaseForm(); this.initEarningsChart(); },

// Show logged out state showLoggedOutState: function() { document.getElementById('authButtons').style.display = 'flex'; document.getElementById('loggedInUser').style.display = 'none'; document.getElementById('dashboardSection').style.display = 'none'; },

// Setup event listeners setupEventListeners: function() { // Header auth buttons document.getElementById('loginBtnHeader').addEventListener('click', () => { this.showAuthModal('login'); });

document.getElementById('registerBtnHeader').addEventListener('click', () => { this.showAuthModal('register'); });

// Get started button document.getElementById('getStartedBtn').addEventListener('click', () => { if (!this.currentUser) { this.showAuthModal('register'); } else { this.showNotification('Info', 'You are already logged in!', 'warning'); } });

// Auth modal document.getElementById('closeAuthModal').addEventListener('click', () => { this.hideAuthModal(); });

// Auth tab switching document.querySelectorAll('.auth-tab').forEach(tab => { tab.addEventListener('click', (e) => { document.querySelectorAll('.auth-tab').forEach(t => t.classList.remove('active')); e.target.classList.add('active');

document.querySelectorAll('.auth-form').forEach(form => form.classList.remove('active')); document.getElementById(e.target.dataset.tab + 'Form').classList.add('active');

document.getElementById('modalTitle').textContent = e.target.dataset.tab === 'login' ? 'Welcome Back' : 'Join NaijaRewards'; }); });

// Switch between login/register document.getElementById('switchToRegister').addEventListener('click', (e) => { e.preventDefault(); document.querySelectorAll('.auth-tab').forEach(t => t.classList.remove('active')); document.querySelectorAll('.auth-tab')[1].classList.add('active');

document.querySelectorAll('.auth-form').forEach(form => form.classList.remove('active')); document.getElementById('registerForm').classList.add('active'); document.getElementById('modalTitle').textContent = 'Join NaijaRewards'; });

document.getElementById('switchToLogin').addEventListener('click', (e) => { e.preventDefault(); document.querySelectorAll('.auth-tab').forEach(t => t.classList.remove('active')); document.querySelectorAll('.auth-tab')[0].classList.add('active');

document.querySelectorAll('.auth-form').forEach(form => form.classList.remove('active')); document.getElementById('loginForm').classList.add('active'); document.getElementById('modalTitle').textContent = 'Welcome Back'; });

// Auth form submissions document.getElementById('loginForm').addEventListener('submit', (e) => { e.preventDefault(); this.handleLogin(); });

document.getElementById('registerForm').addEventListener('submit', (e) => { e.preventDefault(); this.handleRegister(); });

// Profile modal document.getElementById('userProfileBtn').addEventListener('click', () => { this.showProfileModal(); });

document.getElementById('closeProfileModal').addEventListener('click', () => { this.hideProfileModal(); });

// Logout document.getElementById('logoutBtn').addEventListener('click', () => { this.handleLogout(); });

// Quick action buttons document.getElementById('quickEarnBtn').addEventListener('click', () => { document.getElementById('adsSection').scrollIntoView(); });

document.getElementById('quickBuyBtn').addEventListener('click', () => { document.getElementById('purchaseSection').scrollIntoView(); });

// Purchase form document.getElementById('purchaseForm').addEventListener('submit', (e) => { e.preventDefault(); this.handlePurchase(); });

// Purchase tab switching document.querySelectorAll('.purchase-tabs .tab').forEach(tab => { tab.addEventListener('click', (e) => { this.currentPurchaseTab = e.target.dataset.tab; document.querySelectorAll('.purchase-tabs .tab').forEach(t => t.classList.remove('active')); e.target.classList.add('active'); this.renderPurchaseForm(); }); }); },

// Setup navigation setupNavigation: function() { document.querySelectorAll('nav a').forEach(link => { link.addEventListener('click', (e) => { e.preventDefault(); const section = e.target.id.replace('nav', '').toLowerCase(); this.scrollToSection(section); }); }); },

// Render homepage renderHomepage: function() { // Nothing needed here for now },

// Show auth modal showAuthModal: function(tab = 'login') { document.getElementById('authModal').classList.add('active');

// Set active tab document.querySelectorAll('.auth-tab').forEach(t => t.classList.remove('active')); document.querySelectorAll('.auth-tab').forEach(t => { if (t.dataset.tab === tab) { t.classList.add('active'); } });

document.querySelectorAll('.auth-form').forEach(form => form.classList.remove('active')); document.getElementById(tab + 'Form').classList.add('active');

document.getElementById('modalTitle').textContent = tab === 'login' ? 'Welcome Back' : 'Join NaijaRewards'; },

// Hide auth modal hideAuthModal: function() { document.getElementById('authModal').classList.remove('active');

// Clear form fields document.getElementById('loginForm').reset(); document.getElementById('registerForm').reset(); },

// Scroll to section scrollToSection: function(section) { const sections = { home: '.hero', features: '.features', howitworks: '.how-it-works', networks: '.purchase-section', contact: 'footer' };

if (sections[section]) { const element = document.querySelector(sections[section]); if (element) { element.scrollIntoView(); } } },

// Handle login handleLogin: function() { const email = document.getElementById('loginEmail').value; const password = document.getElementById('loginPassword').value;

// Simple validation if (!email || !password) { this.showNotification('Error', 'Please fill in all fields', 'error'); return; }

// Check if user exists const users = JSON.parse(localStorage.getItem('naijarewards_users') || '[]'); const user = users.find(u => u.email === email && u.password === password);

if (user) { // Login successful this.currentUser = user;

// Load user data let userData = JSON.parse(localStorage.getItem(`naijarewards_user_$');

// Initialize if new user if (!userData.walletBalance) { userData = { walletBalance: 500, totalEarned: 500, totalSpent: 0, adsViewed: 0, transactions: [ ] }; }

// Set user stats this.walletBalance = userData.walletBalance; this.totalEarned = userData.totalEarned; this.totalSpent = userData.totalSpent; this.adsViewed = userData.adsViewed; this.transactions = userData.transactions;

// Save login state localStorage.setItem('naijarewards_logged_in_user', JSON.stringify(this.currentUser)); localStorage.setItem('naijarewards_user_data', JSON.stringify(userData));

// Update UI this.hideAuthModal(); this.showLoggedInState();

this.showNotification('Success', 'Login successful! Welcome back!', 'success'); } else { this.showNotification('Error', 'Invalid email or password', 'error'); } },

// Handle register handleRegister: function() { const firstName = document.getElementById('registerFirstName').value; const lastName = document.getElementById('registerLastName').value; const email = document.getElementById('registerEmail').value; const phone = document.getElementById('registerPhone').value; const password = document.getElementById('registerPassword').value; const confirmPassword = document.getElementById('registerConfirmPassword').value;

// Validation if (!firstName || !lastName || !email || !phone || !password || !confirmPassword) { this.showNotification('Error', 'Please fill in all fields', 'error'); return; }

if (password !== confirmPassword) { this.showNotification('Error', 'Passwords do not match', 'error'); return; }

if (!/^0[7-9][0-9]$/.test(phone)) { this.showNotification('Error', 'Please enter a valid Nigerian phone number', 'error'); return; }

if (!this.validateEmail(email)) { this.showNotification('Error', 'Please enter a valid email address', 'error'); return; }

// Check if user already exists let users = JSON.parse(localStorage.getItem('naijarewards_users') || '[]'); if (users.find(u => u.email === email)) { this.showNotification('Error', 'User with this email already exists', 'error'); return; }

// Create new user const newUser = { id: Date.now(), firstName, lastName, email, phone, password, memberSince: new Date().toLocaleDateString('en-US', ), createdAt: new Date().toISOString() };

// Add to users list users.push(newUser); localStorage.setItem('naijarewards_users', JSON.stringify(users));

// Create user data const userData = { walletBalance: 500, totalEarned: 500, totalSpent: 0, adsViewed: 0, transactions: [ ] };

// Save user data localStorage.setItem(`naijarewards_user_$`, JSON.stringify(userData));

// Auto login this.currentUser = newUser; this.walletBalance = 500; this.totalEarned = 500; this.totalSpent = 0; this.adsViewed = 0; this.transactions = userData.transactions;

// Save login state localStorage.setItem('naijarewards_logged_in_user', JSON.stringify(this.currentUser)); localStorage.setItem('naijarewards_user_data', JSON.stringify(userData));

// Update UI this.hideAuthModal(); this.showLoggedInState();

this.showNotification('Success', 'Account created successfully! ₦500 welcome bonus added to your wallet.', 'success'); },

// Handle logout handleLogout: function() { // Clear login state localStorage.removeItem('naijarewards_logged_in_user'); localStorage.removeItem('naijarewards_user_data');

// Reset state this.currentUser = null; this.walletBalance = 0; this.totalEarned = 0; this.totalSpent = 0; this.adsViewed = 0; this.transactions = [];

// Update UI this.hideProfileModal(); this.showLoggedOutState();

this.showNotification('Success', 'Logged out successfully', 'success'); },

// Show profile modal showProfileModal: function() { if (!this.currentUser) return;

document.getElementById('profileModal').classList.add('active'); document.getElementById('profileName').textContent = `$`; document.getElementById('profileEmail').textContent = this.currentUser.email; document.getElementById('profileAvatar').textContent = this.currentUser.firstName.charAt(0); document.getElementById('profilePhone').textContent = this.currentUser.phone; document.getElementById('memberSince').textContent = this.currentUser.memberSince || '2023'; document.getElementById('profileTotalEarned').textContent = '₦' + this.totalEarned.toLocaleString(); document.getElementById('profileTotalSpent').textContent = '₦' + this.totalSpent.toLocaleString(); document.getElementById('profileAdsViewed').textContent = this.adsViewed; },

// Hide profile modal hideProfileModal: function() { document.getElementById('profileModal').classList.remove('active'); },

// Load ads loadAds: function() { const adsContainer = document.getElementById('adsContainer'); if (!adsContainer) return;

const ads = [ , , , ];

adsContainer.innerHTML = '';

ads.forEach(ad => { const adCard = document.createElement('div'); adCard.className = 'ad-card'; adCard.innerHTML = `

`;

adCard.querySelector('.ad-action').addEventListener('click', () => { this.watchAd(ad.id, ad.reward, ad.title); });

adsContainer.appendChild(adCard); }); },

// Watch ad watchAd: function(adId, reward, title) { if (!this.currentUser) { this.showNotification('Error', 'Please login to watch ads', 'error'); this.showAuthModal('login'); return; }

this.showNotification('Info', `Watching ad: $`, 'warning');

// Simulate ad watching setTimeout(() => { // Add earnings this.walletBalance += reward; this.totalEarned += reward; this.adsViewed++;

// Add transaction this.addTransaction('earning', title, reward, 'completed');

// Update UI this.updateWalletDisplay();

// Save data this.saveUserData();

this.showNotification('Success', `You earned ₦$ from watching the ad!`, 'success'); }, 3000); },

// Render purchase form renderPurchaseForm: function() { const networkLogosContainer = document.getElementById('networkLogos'); const amountSection = document.getElementById('amountSection');

if (!networkLogosContainer || !amountSection) return;

// Networks data const networks = [ , , , ];

// Render network logos networkLogosContainer.innerHTML = ''; networks.forEach(network => { const networkLogo = document.createElement('div'); networkLogo.className = `network-logo`; networkLogo.dataset.network = network.id; networkLogo.innerHTML = ` $ `;

networkLogo.addEventListener('click', () => { document.querySelectorAll('.network-logo').forEach(n => n.classList.remove('active')); networkLogo.classList.add('active'); });

networkLogosContainer.appendChild(networkLogo); });

// Select first network by default if (networkLogosContainer.firstElementChild) { networkLogosContainer.firstElementChild.classList.add('active'); }

// Render amount section based on tab const currentTab = document.querySelector('.purchase-tabs .tab.active').dataset.tab;

if (currentTab === 'data') { // Data plans const dataPlans = [ , , , ];

amountSection.innerHTML = `

`;

const plansContainer = document.getElementById('dataPlansContainer'); dataPlans.forEach((plan, index) => { const planOption = document.createElement('div'); planOption.className = `plan-option $`; planOption.dataset.price = plan.price; planOption.innerHTML = `

`;

planOption.addEventListener('click', () => { document.querySelectorAll('.plan-option').forEach(p => p.classList.remove('selected')); planOption.classList.add('selected'); });

plansContainer.appendChild(planOption); }); } else { // Amount input for other tabs amountSection.innerHTML = ` `; } },

// Handle purchase handlePurchase: function() { if (!this.currentUser) { this.showNotification('Error', 'Please login to make a purchase', 'error'); this.showAuthModal('login'); return; }

const phoneNumber = document.getElementById('phoneNumber').value;

if (!phoneNumber) { this.showNotification('Error', 'Please enter a phone number', 'error'); return; }

if (!/^0[7-9][0-9]$/.test(phoneNumber)) { this.showNotification('Error', 'Please enter a valid Nigerian phone number', 'error'); return; }

// Get selected network const selectedNetwork = document.querySelector('.network-logo.active'); if (!selectedNetwork) { this.showNotification('Error', 'Please select a network', 'error'); return; }

const networkName = selectedNetwork.querySelector('span').textContent;

// Get amount let amount = 0; let description = ''; const currentTab = document.querySelector('.purchase-tabs .tab.active').dataset.tab;

if (currentTab === 'data') { const selectedPlan = document.querySelector('.plan-option.selected'); if (!selectedPlan) { this.showNotification('Error', 'Please select a data plan', 'error'); return; }

amount = parseInt(selectedPlan.dataset.price); const planName = selectedPlan.querySelector('.plan-name').textContent; description = `$`; } else { const customAmount = document.getElementById('customAmount'); if (!customAmount || !customAmount.value || parseInt(customAmount.value) < 500) { this.showNotification('Error', 'Minimum purchase amount is ₦500', 'error'); return; } amount = parseInt(customAmount.value); // Tab names const tabNames = { airtime: 'Airtime', tv: 'TV Subscription', bills: 'Bill Payment' }; description = `$`; } // Check wallet balance if (this.walletBalance < amount) { this.showNotification('Error', 'Insufficient wallet balance. Please earn more money by watching ads.', 'error'); return; } // Confirm purchase if (confirm(`Confirm purchase:\n\n$\n\nProceed with payment?`)) { // Process purchase this.walletBalance -= amount; this.totalSpent += amount; // Add transaction this.addTransaction('purchase', description, -amount, 'completed'); // Update UI this.updateWalletDisplay(); // Save data this.saveUserData(); // Clear form document.getElementById('phoneNumber').value = ''; const customAmount = document.getElementById('customAmount'); if (customAmount) customAmount.value = ''; this.showNotification('Success', `Purchase successful! ₦$ deducted from your wallet.`, 'success'); } }, // Add transaction addTransaction: function(type, description, amount, status) { const transaction = { id: Date.now(), type, description, amount, date: this.getDateString(), status }; this.transactions.unshift(transaction); }, // Update wallet display updateWalletDisplay: function() { document.getElementById('walletBalance').textContent = '₦' + this.walletBalance.toLocaleString(); document.getElementById('dashboardBalance').textContent = '₦' + this.walletBalance.toLocaleString(); document.getElementById('formWalletBalance').textContent = '₦' + this.walletBalance.toLocaleString(); document.getElementById('totalEarned').textContent = '₦' + this.totalEarned.toLocaleString(); document.getElementById('totalSpent').textContent = '₦' + this.totalSpent.toLocaleString(); document.getElementById('adsViewed').textContent = this.adsViewed; }, // Save user data saveUserData: function() { if (!this.currentUser) return; const userData = { walletBalance: this.walletBalance, totalEarned: this.totalEarned, totalSpent: this.totalSpent, adsViewed: this.adsViewed, transactions: this.transactions }; // Save to localStorage localStorage.setItem('naijarewards_user_data', JSON.stringify(userData)); localStorage.setItem(`naijarewards_user_$`, JSON.stringify(userData)); }, // Initialize earnings chart initEarningsChart: function() { const ctx = document.getElementById('earningsChart'); if (!ctx) return; ctx.getContext('2d'); // Generate sample data const labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; const earningsData = [150, 230, 180, 300, 250, 400, 350]; const spendingData = [100, 150, 80, 200, 150, 300, 250]; if (this.earningsChart) { this.earningsChart.destroy(); } this.earningsChart = new Chart(ctx, { type: 'line', data: { labels: labels, datasets: [ { label: 'Earnings', data: earningsData, borderColor: '#10b981', backgroundColor: 'rgba(16, 185, 129, 0.1)', borderWidth: 3, fill: true, tension: 0.4 }, { label: 'Spending', data: spendingData, borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.1)', borderWidth: 3, fill: true, tension: 0.4 } ] }, options: { responsive: true, plugins: { legend: { position: 'top', }, tooltip: { mode: 'index', intersect: false, callbacks: { label: function(context) { return `$`; } } } }, scales: { y: { beginAtZero: true, ticks: { callback: function(value) { return '₦' + value; } } } } } }); }, // Show notification showNotification: function(title, message, type) { const notification = document.getElementById('notification'); const notificationTitle = document.getElementById('notificationTitle'); const notificationMessage = document.getElementById('notificationMessage'); const notificationIcon = notification.querySelector('.notification-icon'); // Set notification content notificationTitle.textContent = title; notificationMessage.textContent = message; // Set notification type notificationIcon.className = 'notification-icon'; if (type === 'success') { notificationIcon.classList.add('notification-success'); notificationIcon.innerHTML = ''; notification.style.borderLeftColor = 'var(--success)'; } else if (type === 'warning') { notificationIcon.classList.add('notification-warning'); notificationIcon.innerHTML = ''; notification.style.borderLeftColor = 'var(--accent)'; } else { notificationIcon.classList.add('notification-error'); notificationIcon.innerHTML = ''; notification.style.borderLeftColor = 'var(--danger)'; }

// Show notification notification.classList.add('active');

// Hide notification after 5 seconds setTimeout(() => { notification.classList.remove('active'); }, 5000); },

// Helper to get date string getDateString: function() { const date = new Date(); return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }); },

// Validate email validateEmail: function(email) { const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return re.test(email); } };

// Initialize the app UserAccountSystem.init();