|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>MetaWave Marketing Platform</title>
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
<style>
|
|
|
:root {
|
|
|
--sidebar-bg: #1e293b;
|
|
|
--main-bg: #f9fafb;
|
|
|
--text-dark: #1e293b;
|
|
|
--text-light: #64748b;
|
|
|
--accent-primary: #7c3aed;
|
|
|
--accent-secondary: #a855f7;
|
|
|
--success-green: #22c55e;
|
|
|
--warning-yellow: #f59e0b;
|
|
|
--premium-gold: #d97706;
|
|
|
--card-bg: #ffffff;
|
|
|
--shadow-light: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
|
--shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.1);
|
|
|
--transition-speed: 0.3s;
|
|
|
--spacing-unit: 1rem;
|
|
|
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
|
|
}
|
|
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
|
|
|
|
|
|
* {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
box-sizing: border-box;
|
|
|
font-family: var(--font-family);
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
|
|
|
color: var(--text-dark);
|
|
|
display: flex;
|
|
|
min-height: 100vh;
|
|
|
overflow-x: hidden;
|
|
|
}
|
|
|
|
|
|
.sidebar {
|
|
|
width: 260px;
|
|
|
background: var(--sidebar-bg);
|
|
|
padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5);
|
|
|
position: fixed;
|
|
|
height: 100vh;
|
|
|
overflow-y: auto;
|
|
|
z-index: 1000;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
box-shadow: var(--shadow-light);
|
|
|
transition: transform var(--transition-speed) ease;
|
|
|
}
|
|
|
|
|
|
.sidebar.collapsed {
|
|
|
transform: translateX(-100%);
|
|
|
}
|
|
|
|
|
|
.sidebar .logo {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: calc(var(--spacing-unit) * 2);
|
|
|
padding-bottom: var(--spacing-unit);
|
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
}
|
|
|
|
|
|
.sidebar .logo img {
|
|
|
width: 50px;
|
|
|
height: 50px;
|
|
|
border-radius: 50%;
|
|
|
margin-right: calc(var(--spacing-unit) * 0.75);
|
|
|
transition: transform var(--transition-speed) ease;
|
|
|
}
|
|
|
|
|
|
.sidebar .logo img:hover {
|
|
|
transform: scale(1.1);
|
|
|
}
|
|
|
|
|
|
.sidebar .logo-text {
|
|
|
font-size: 1.5rem;
|
|
|
font-weight: 700;
|
|
|
color: var(--premium-gold);
|
|
|
}
|
|
|
|
|
|
.sidebar .logo-subtext {
|
|
|
font-size: 0.75rem;
|
|
|
color: var(--text-light);
|
|
|
}
|
|
|
|
|
|
.sidebar ul {
|
|
|
list-style: none;
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
.sidebar ul li {
|
|
|
margin-bottom: calc(var(--spacing-unit) * 0.75);
|
|
|
}
|
|
|
|
|
|
.sidebar ul li a {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
color: var(--text-light);
|
|
|
text-decoration: none;
|
|
|
padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit);
|
|
|
border-radius: 8px;
|
|
|
transition: background var(--transition-speed), color var(--transition-speed);
|
|
|
}
|
|
|
|
|
|
.sidebar ul li a:hover {
|
|
|
background: rgba(255, 255, 255, 0.1);
|
|
|
color: var(--accent-primary);
|
|
|
}
|
|
|
|
|
|
.sidebar ul li a i {
|
|
|
margin-right: calc(var(--spacing-unit) * 0.75);
|
|
|
width: 20px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.sidebar .user-info {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding: var(--spacing-unit);
|
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
background: rgba(255, 255, 255, 0.05);
|
|
|
border-radius: 8px;
|
|
|
margin-top: calc(var(--spacing-unit) * 1.5);
|
|
|
}
|
|
|
|
|
|
.sidebar .user-avatar {
|
|
|
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
|
|
|
color: #ffffff;
|
|
|
width: 40px;
|
|
|
height: 40px;
|
|
|
border-radius: 50%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
font-weight: 700;
|
|
|
margin-right: calc(var(--spacing-unit) * 0.75);
|
|
|
box-shadow: 0 0 8px rgba(124, 58, 237, 0.3);
|
|
|
}
|
|
|
|
|
|
.sidebar .user-text {
|
|
|
font-size: 1rem;
|
|
|
}
|
|
|
|
|
|
.sidebar .user-status {
|
|
|
font-size: 0.75rem;
|
|
|
color: var(--text-light);
|
|
|
}
|
|
|
|
|
|
.main-content {
|
|
|
flex: 1;
|
|
|
margin-left: 260px;
|
|
|
padding: calc(var(--spacing-unit) * 1.5);
|
|
|
transition: margin-left var(--transition-speed) ease;
|
|
|
}
|
|
|
|
|
|
.main-content.expanded {
|
|
|
margin-left: 0;
|
|
|
}
|
|
|
|
|
|
.topbar {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
margin-bottom: calc(var(--spacing-unit) * 2);
|
|
|
padding: var(--spacing-unit);
|
|
|
background: var(--card-bg);
|
|
|
border-radius: 12px;
|
|
|
box-shadow: var(--shadow-light);
|
|
|
}
|
|
|
|
|
|
.topbar .logo {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.topbar .logo img {
|
|
|
width: 40px;
|
|
|
height: 40px;
|
|
|
margin-right: calc(var(--spacing-unit) * 0.75);
|
|
|
}
|
|
|
|
|
|
.topbar .logo-text {
|
|
|
font-size: 1.5rem;
|
|
|
font-weight: 700;
|
|
|
color: var(--accent-primary);
|
|
|
}
|
|
|
|
|
|
.topbar nav {
|
|
|
display: flex;
|
|
|
gap: calc(var(--spacing-unit) * 1.5);
|
|
|
}
|
|
|
|
|
|
.topbar nav a {
|
|
|
color: var(--text-dark);
|
|
|
text-decoration: none;
|
|
|
font-weight: 500;
|
|
|
transition: color var(--transition-speed);
|
|
|
}
|
|
|
|
|
|
.topbar nav a:hover {
|
|
|
color: var(--accent-secondary);
|
|
|
}
|
|
|
|
|
|
.topbar .right {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: calc(var(--spacing-unit) * 1.25);
|
|
|
}
|
|
|
|
|
|
.topbar .toggle-btn {
|
|
|
background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
|
|
|
color: #ffffff;
|
|
|
border: none;
|
|
|
border-radius: 50%;
|
|
|
width: 45px;
|
|
|
height: 45px;
|
|
|
font-size: 1.25rem;
|
|
|
cursor: pointer;
|
|
|
box-shadow: var(--shadow-light);
|
|
|
transition: transform var(--transition-speed), background var(--transition-speed);
|
|
|
}
|
|
|
|
|
|
.topbar .toggle-btn:hover {
|
|
|
transform: scale(1.1);
|
|
|
background: linear-gradient(90deg, #6b21a8, #9333ea);
|
|
|
}
|
|
|
|
|
|
.topbar .notification {
|
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.topbar .notification i {
|
|
|
color: var(--text-light);
|
|
|
font-size: 1.25rem;
|
|
|
transition: color var(--transition-speed);
|
|
|
}
|
|
|
|
|
|
.topbar .notification i:hover {
|
|
|
color: var(--warning-yellow);
|
|
|
}
|
|
|
|
|
|
.topbar .notification .dot {
|
|
|
position: absolute;
|
|
|
top: -2px;
|
|
|
right: -2px;
|
|
|
width: 8px;
|
|
|
height: 8px;
|
|
|
background-color: #ef4444;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
|
|
|
.topbar .user {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: calc(var(--spacing-unit) * 0.5);
|
|
|
}
|
|
|
|
|
|
.topbar .user-avatar {
|
|
|
background: var(--premium-gold);
|
|
|
color: #ffffff;
|
|
|
width: 30px;
|
|
|
height: 30px;
|
|
|
border-radius: 50%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
font-weight: 700;
|
|
|
font-size: 0.875rem;
|
|
|
box-shadow: 0 0 6px rgba(217, 119, 6, 0.4);
|
|
|
}
|
|
|
|
|
|
.topbar .user-name {
|
|
|
font-weight: 500;
|
|
|
color: var(--text-dark);
|
|
|
}
|
|
|
|
|
|
.topbar .premium {
|
|
|
background: var(--premium-gold);
|
|
|
color: #ffffff;
|
|
|
padding: 0.25rem 0.75rem;
|
|
|
border-radius: 4px;
|
|
|
font-size: 0.75rem;
|
|
|
font-weight: 700;
|
|
|
text-transform: uppercase;
|
|
|
}
|
|
|
|
|
|
.topbar .logout i {
|
|
|
color: var(--text-light);
|
|
|
font-size: 1.25rem;
|
|
|
transition: color var(--transition-speed);
|
|
|
}
|
|
|
|
|
|
.topbar .logout i:hover {
|
|
|
color: #dc2626;
|
|
|
}
|
|
|
|
|
|
.topbar .clock {
|
|
|
font-size: 0.9rem;
|
|
|
color: var(--text-light);
|
|
|
margin-left: calc(var(--spacing-unit) * 1.25);
|
|
|
}
|
|
|
|
|
|
.banner {
|
|
|
max-width: 450px;
|
|
|
margin: 0 auto calc(var(--spacing-unit) * 2);
|
|
|
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
|
|
|
border-radius: 12px;
|
|
|
padding: calc(var(--spacing-unit) * 1.5);
|
|
|
text-align: center;
|
|
|
box-shadow: var(--shadow-hover);
|
|
|
animation: fadeIn 0.5s ease;
|
|
|
}
|
|
|
|
|
|
@keyframes fadeIn {
|
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
|
to { opacity: 1; transform: translateY(0); }
|
|
|
}
|
|
|
|
|
|
@keyframes blink {
|
|
|
0% { opacity: 1; }
|
|
|
50% { opacity: 0.3; }
|
|
|
100% { opacity: 1; }
|
|
|
}
|
|
|
|
|
|
.banner .title {
|
|
|
font-size: 1.25rem;
|
|
|
margin-bottom: calc(var(--spacing-unit) * 1);
|
|
|
color: #ffffff;
|
|
|
font-weight: 700;
|
|
|
animation: blink 1.5s infinite;
|
|
|
}
|
|
|
|
|
|
.banner p {
|
|
|
font-size: 0.95rem;
|
|
|
line-height: 1.6;
|
|
|
margin-bottom: calc(var(--spacing-unit) * 1);
|
|
|
color: var(--premium-gold);
|
|
|
animation: blink 1.5s infinite;
|
|
|
}
|
|
|
|
|
|
.banner .footer {
|
|
|
font-size: 0.75rem;
|
|
|
color: rgba(255, 255, 255, 0.9);
|
|
|
font-style: italic;
|
|
|
animation: blink 1.5s infinite;
|
|
|
}
|
|
|
|
|
|
.packages-section {
|
|
|
text-align: center;
|
|
|
margin-bottom: calc(var(--spacing-unit) * 2);
|
|
|
}
|
|
|
|
|
|
.packages-section h1 {
|
|
|
font-size: 1.75rem;
|
|
|
margin-bottom: var(--spacing-unit);
|
|
|
color: var(--accent-primary);
|
|
|
}
|
|
|
|
|
|
.packages-section .subtitle {
|
|
|
font-size: 0.95rem;
|
|
|
color: var(--text-light);
|
|
|
margin-bottom: calc(var(--spacing-unit) * 1.5);
|
|
|
}
|
|
|
|
|
|
.packages {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
gap: var(--spacing-unit);
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
|
|
|
.package-card {
|
|
|
background: var(--card-bg);
|
|
|
border-radius: 10px;
|
|
|
padding: calc(var(--spacing-unit) * 1.25);
|
|
|
width: 220px;
|
|
|
text-align: left;
|
|
|
box-shadow: var(--shadow-light);
|
|
|
transition: transform var(--transition-speed), box-shadow var(--transition-speed);
|
|
|
}
|
|
|
|
|
|
.package-card:hover {
|
|
|
transform: translateY(-5px);
|
|
|
box-shadow: var(--shadow-hover);
|
|
|
}
|
|
|
|
|
|
.package-header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: calc(var(--spacing-unit) * 1);
|
|
|
}
|
|
|
|
|
|
.package-header i {
|
|
|
color: var(--text-light);
|
|
|
margin-right: calc(var(--spacing-unit) * 0.75);
|
|
|
font-size: 1.25rem;
|
|
|
}
|
|
|
|
|
|
.package-header .name {
|
|
|
font-size: 1.25rem;
|
|
|
font-weight: 700;
|
|
|
color: var(--accent-primary);
|
|
|
}
|
|
|
|
|
|
.package-features {
|
|
|
list-style: none;
|
|
|
margin-bottom: calc(var(--spacing-unit) * 1);
|
|
|
}
|
|
|
|
|
|
.package-features li {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: calc(var(--spacing-unit) * 0.5);
|
|
|
color: var(--text-dark);
|
|
|
font-size: 0.9rem;
|
|
|
}
|
|
|
|
|
|
.package-features li i {
|
|
|
margin-right: calc(var(--spacing-unit) * 0.75);
|
|
|
}
|
|
|
|
|
|
.package-features .checked i {
|
|
|
color: var(--success-green);
|
|
|
}
|
|
|
|
|
|
.package-features .unchecked i {
|
|
|
color: var(--text-light);
|
|
|
}
|
|
|
|
|
|
.package-award {
|
|
|
font-size: 1.1rem;
|
|
|
font-weight: 700;
|
|
|
color: var(--premium-gold);
|
|
|
margin-bottom: calc(var(--spacing-unit) * 0.75);
|
|
|
}
|
|
|
|
|
|
.package-button {
|
|
|
background: var(--premium-gold);
|
|
|
color: #ffffff;
|
|
|
padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1);
|
|
|
border: none;
|
|
|
border-radius: 6px;
|
|
|
font-weight: 600;
|
|
|
cursor: pointer;
|
|
|
width: 100%;
|
|
|
transition: background var(--transition-speed), transform var(--transition-speed);
|
|
|
}
|
|
|
|
|
|
.package-button:hover {
|
|
|
background: #b45309;
|
|
|
transform: translateY(-2px);
|
|
|
}
|
|
|
|
|
|
.welcome {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: calc(var(--spacing-unit) * 1.5);
|
|
|
padding: calc(var(--spacing-unit) * 0.75);
|
|
|
background: rgba(255, 255, 255, 0.9);
|
|
|
border-radius: 10px;
|
|
|
box-shadow: var(--shadow-light);
|
|
|
}
|
|
|
|
|
|
.user-avatar {
|
|
|
width: 50px;
|
|
|
height: 50px;
|
|
|
border-radius: 50%;
|
|
|
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
color: #ffffff;
|
|
|
font-size: 1.25rem;
|
|
|
margin-right: calc(var(--spacing-unit) * 1);
|
|
|
box-shadow: 0 0 8px rgba(124, 58, 237, 0.2);
|
|
|
}
|
|
|
|
|
|
.welcome-text h2 {
|
|
|
font-size: 1.25rem;
|
|
|
margin-bottom: 0.25rem;
|
|
|
color: var(--text-dark);
|
|
|
}
|
|
|
|
|
|
.welcome-text p {
|
|
|
color: var(--text-light);
|
|
|
font-size: 0.9rem;
|
|
|
}
|
|
|
|
|
|
.profile-summary {
|
|
|
background: var(--card-bg);
|
|
|
border-radius: 10px;
|
|
|
padding: calc(var(--spacing-unit) * 1.25);
|
|
|
box-shadow: var(--shadow-light);
|
|
|
margin-bottom: calc(var(--spacing-unit) * 2);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: var(--spacing-unit);
|
|
|
}
|
|
|
|
|
|
.profile-summary .avatar {
|
|
|
width: 60px;
|
|
|
height: 60px;
|
|
|
border-radius: 50%;
|
|
|
background: var(--premium-gold);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
font-size: 1.5rem;
|
|
|
color: #ffffff;
|
|
|
box-shadow: 0 0 6px rgba(217, 119, 6, 0.2);
|
|
|
}
|
|
|
|
|
|
.profile-summary .details h3 {
|
|
|
font-size: 1.25rem;
|
|
|
color: var(--text-dark);
|
|
|
}
|
|
|
|
|
|
.profile-summary .details p {
|
|
|
color: var(--text-light);
|
|
|
font-size: 0.9rem;
|
|
|
}
|
|
|
|
|
|
.balance-cards {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
|
gap: var(--spacing-unit);
|
|
|
margin-bottom: calc(var(--spacing-unit) * 2);
|
|
|
}
|
|
|
|
|
|
.card {
|
|
|
background: var(--card-bg);
|
|
|
border-radius: 10px;
|
|
|
padding: calc(var(--spacing-unit) * 1.25);
|
|
|
box-shadow: var(--shadow-light);
|
|
|
transition: transform var(--transition-speed);
|
|
|
}
|
|
|
|
|
|
.card:hover {
|
|
|
transform: translateY(-5px);
|
|
|
}
|
|
|
|
|
|
.card-title {
|
|
|
font-size: 1rem;
|
|
|
color: var(--text-light);
|
|
|
margin-bottom: calc(var(--spacing-unit) * 1);
|
|
|
}
|
|
|
|
|
|
.meta-balance {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.balance-amount {
|
|
|
font-size: 1.75rem;
|
|
|
font-weight: 700;
|
|
|
color: var(--accent-primary);
|
|
|
}
|
|
|
|
|
|
.balance-actions {
|
|
|
display: flex;
|
|
|
gap: calc(var(--spacing-unit) * 0.75);
|
|
|
}
|
|
|
|
|
|
.btn {
|
|
|
padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1);
|
|
|
border-radius: 6px;
|
|
|
border: none;
|
|
|
font-weight: 600;
|
|
|
cursor: pointer;
|
|
|
transition: background var(--transition-speed), transform var(--transition-speed);
|
|
|
}
|
|
|
|
|
|
.btn-primary {
|
|
|
background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
|
|
|
.btn-primary:hover {
|
|
|
background: linear-gradient(90deg, #6b21a8, #9333ea);
|
|
|
transform: translateY(-2px);
|
|
|
}
|
|
|
|
|
|
.btn-outline {
|
|
|
background: transparent;
|
|
|
border: 2px solid var(--accent-primary);
|
|
|
color: var(--accent-primary);
|
|
|
}
|
|
|
|
|
|
.btn-outline:hover {
|
|
|
background: var(--accent-primary);
|
|
|
color: #ffffff;
|
|
|
transform: translateY(-2px);
|
|
|
}
|
|
|
|
|
|
.stats {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
|
gap: var(--spacing-unit);
|
|
|
margin-bottom: calc(var(--spacing-unit) * 2);
|
|
|
}
|
|
|
|
|
|
.stat-card {
|
|
|
background: var(--card-bg);
|
|
|
border-radius: 10px;
|
|
|
padding: calc(var(--spacing-unit) * 1.25);
|
|
|
text-align: center;
|
|
|
box-shadow: var(--shadow-light);
|
|
|
transition: transform var(--transition-speed);
|
|
|
}
|
|
|
|
|
|
.stat-card:hover {
|
|
|
transform: translateY(-5px);
|
|
|
}
|
|
|
|
|
|
.stat-value {
|
|
|
font-size: 1.5rem;
|
|
|
font-weight: 700;
|
|
|
margin: calc(var(--spacing-unit) * 0.75) 0;
|
|
|
color: var(--accent-primary);
|
|
|
}
|
|
|
|
|
|
.stat-label {
|
|
|
color: var(--text-light);
|
|
|
font-size: 0.9rem;
|
|
|
}
|
|
|
|
|
|
.dashboard-cards {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
|
gap: var(--spacing-unit);
|
|
|
margin-bottom: calc(var(--spacing-unit) * 2);
|
|
|
}
|
|
|
|
|
|
.dashboard-card {
|
|
|
background: var(--card-bg);
|
|
|
border-radius: 10px;
|
|
|
padding: calc(var(--spacing-unit) * 1.25);
|
|
|
color: var(--text-dark);
|
|
|
text-align: center;
|
|
|
box-shadow: var(--shadow-light);
|
|
|
transition: transform var(--transition-speed);
|
|
|
}
|
|
|
|
|
|
.dashboard-card:hover {
|
|
|
transform: translateY(-5px);
|
|
|
}
|
|
|
|
|
|
.dashboard-card h2 {
|
|
|
margin: calc(var(--spacing-unit) * 0.75) 0;
|
|
|
font-size: 1.375rem;
|
|
|
color: var(--accent-primary);
|
|
|
}
|
|
|
|
|
|
.dashboard-card p {
|
|
|
font-size: 0.9rem;
|
|
|
color: var(--text-light);
|
|
|
}
|
|
|
|
|
|
.dashboard-btn {
|
|
|
background: var(--premium-gold);
|
|
|
color: #ffffff;
|
|
|
padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1);
|
|
|
border: none;
|
|
|
border-radius: 6px;
|
|
|
cursor: pointer;
|
|
|
font-weight: 600;
|
|
|
margin-top: calc(var(--spacing-unit) * 0.75);
|
|
|
transition: background var(--transition-speed), transform var(--transition-speed);
|
|
|
}
|
|
|
|
|
|
.dashboard-btn:hover {
|
|
|
background: #b45309;
|
|
|
transform: translateY(-2px);
|
|
|
}
|
|
|
|
|
|
.transaction-history {
|
|
|
display: none;
|
|
|
background: var(--card-bg);
|
|
|
border-radius: 10px;
|
|
|
padding: calc(var(--spacing-unit) * 1.25);
|
|
|
box-shadow: var(--shadow-light);
|
|
|
margin-top: var(--spacing-unit);
|
|
|
}
|
|
|
|
|
|
.transaction-history.active {
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.transaction-list {
|
|
|
list-style: none;
|
|
|
}
|
|
|
|
|
|
.transaction-list li {
|
|
|
padding: calc(var(--spacing-unit) * 0.5);
|
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
font-size: 0.9rem;
|
|
|
color: var(--text-dark);
|
|
|
}
|
|
|
|
|
|
.modal {
|
|
|
display: none;
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
z-index: 2000;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.modal-content {
|
|
|
background: var(--card-bg);
|
|
|
padding: calc(var(--spacing-unit) * 1.5);
|
|
|
border-radius: 10px;
|
|
|
width: 90%;
|
|
|
max-width: 500px;
|
|
|
color: var(--text-dark);
|
|
|
box-shadow: var(--shadow-hover);
|
|
|
animation: fadeIn 0.3s ease;
|
|
|
}
|
|
|
|
|
|
@keyframes fadeIn {
|
|
|
from { opacity: 0; transform: scale(0.95); }
|
|
|
to { opacity: 1; transform: scale(1); }
|
|
|
}
|
|
|
|
|
|
.modal-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-bottom: calc(var(--spacing-unit) * 1);
|
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
padding-bottom: var(--spacing-unit);
|
|
|
}
|
|
|
|
|
|
.close {
|
|
|
font-size: 1.5rem;
|
|
|
cursor: pointer;
|
|
|
color: var(--text-light);
|
|
|
transition: color var(--transition-speed);
|
|
|
}
|
|
|
|
|
|
.close:hover {
|
|
|
color: #dc2626;
|
|
|
}
|
|
|
|
|
|
.form-group {
|
|
|
margin-bottom: calc(var(--spacing-unit) * 1);
|
|
|
}
|
|
|
|
|
|
.form-group label {
|
|
|
display: block;
|
|
|
margin-bottom: 0.25rem;
|
|
|
font-weight: 500;
|
|
|
color: var(--text-dark);
|
|
|
}
|
|
|
|
|
|
.form-group input, .form-group select {
|
|
|
width: 100%;
|
|
|
padding: calc(var(--spacing-unit) * 0.5);
|
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
border-radius: 6px;
|
|
|
background: #f9fafb;
|
|
|
color: var(--text-dark);
|
|
|
font-size: 0.95rem;
|
|
|
transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
|
|
|
}
|
|
|
|
|
|
.form-group input:focus, .form-group select:focus {
|
|
|
border-color: var(--accent-primary);
|
|
|
box-shadow: 0 0 5px rgba(124, 58, 237, 0.2);
|
|
|
outline: none;
|
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
.sidebar {
|
|
|
transform: translateX(-100%);
|
|
|
}
|
|
|
|
|
|
.sidebar.active {
|
|
|
transform: translateX(0);
|
|
|
}
|
|
|
|
|
|
.main-content {
|
|
|
margin-left: 0;
|
|
|
}
|
|
|
|
|
|
.main-content.expanded {
|
|
|
margin-left: 0;
|
|
|
}
|
|
|
|
|
|
.packages {
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.balance-cards, .stats, .dashboard-cards {
|
|
|
grid-template-columns: 1fr;
|
|
|
}
|
|
|
|
|
|
.balance-actions {
|
|
|
flex-direction: column;
|
|
|
gap: var(--spacing-unit);
|
|
|
}
|
|
|
|
|
|
.topbar {
|
|
|
flex-direction: column;
|
|
|
gap: var(--spacing-unit);
|
|
|
}
|
|
|
|
|
|
.topbar nav {
|
|
|
flex-direction: column;
|
|
|
gap: calc(var(--spacing-unit) * 0.75);
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<button class="toggle-btn" id="menuToggle" aria-label="Toggle navigation menu" style="position: fixed; top: 1.5rem; right: 1.5rem; z-index: 1100;">☰</button>
|
|
|
|
|
|
<nav class="sidebar" id="sidebar" aria-label="Main navigation">
|
|
|
<div class="logo">
|
|
|
<img src="https://via.placeholder.com/50?text=MW" alt="MetaWave Logo">
|
|
|
<div>
|
|
|
<div class="logo-text">METAWAVE</div>
|
|
|
<div class="logo-subtext">Marketing Platform</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<ul>
|
|
|
<li><a href="#transactions" aria-label="Go to Transactions"><i class="fas fa-arrows-alt-h"></i> Transactions</a></li>
|
|
|
<li><a href="#transfer" aria-label="Go to Transfer"><i class="fas fa-exchange-alt"></i> Transfer</a></li>
|
|
|
<li><a href="#daily-product" aria-label="Go to Daily Product"><i class="fas fa-shopping-cart"></i> Daily Product</a></li>
|
|
|
<li><a href="#withdraw" aria-label="Go to Withdraw"><i class="fas fa-money-bill-wave"></i> Withdraw</a></li>
|
|
|
<li><a href="#packages" aria-label="Go to Packages"><i class="fas fa-box"></i> Packages</a></li>
|
|
|
<li><a href="#loan" aria-label="Go to Loan"><i class="fas fa-hand-holding-usd"></i> Loan</a></li>
|
|
|
<li><a href="#recharge" aria-label="Go to Recharge"><i class="fas fa-battery-full"></i> Recharge</a></li>
|
|
|
<li><a href="#agent-approval" aria-label="Go to Agent Approval"><i class="fas fa-user-check"></i> Agent Approval</a></li>
|
|
|
<li><a href="#access-token" aria-label="Go to Access Token"><i class="fas fa-key"></i> Access Token</a></li>
|
|
|
<li><a href="#agent-claim" aria-label="Go to Agent Claim"><i class="fas fa-tag"></i> Agent Claim</a></li>
|
|
|
<li><a href="#team" aria-label="Go to Team"><i class="fas fa-users"></i> Team</a></li>
|
|
|
<li><a href="#profile" aria-label="Go to Profile"><i class="fas fa-user"></i> Profile</a></li>
|
|
|
<li><a href="#settings" aria-label="Go to Settings"><i class="fas fa-cog"></i> Settings</a></li>
|
|
|
<li><a href="#whatsapp-channel" aria-label="Go to Whatsapp Channel"><i class="fab fa-whatsapp"></i> Whatsapp Channel</a></li>
|
|
|
<li><a href="#customer-care" aria-label="Go to Customer Care"><i class="fas fa-headset"></i> Customer Care</a></li>
|
|
|
</ul>
|
|
|
<div class="user-info">
|
|
|
<div class="user-avatar">Mi</div>
|
|
|
<div class="user-text">
|
|
|
Milly <br>
|
|
|
<span class="user-status">Dormant - Marketer</span>
|
|
|
</div>
|
|
|
<i class="fas fa-ellipsis-h" style="margin-left: auto; color: var(--text-light);"></i>
|
|
|
</div>
|
|
|
</nav>
|
|
|
|
|
|
<main class="main-content" id="mainContent" role="main">
|
|
|
<header class="topbar">
|
|
|
<div class="logo">
|
|
|
<img src="https://via.placeholder.com/40?text=MW" alt="MetaWave">
|
|
|
<div class="logo-text">MetaWave</div>
|
|
|
</div>
|
|
|
<nav>
|
|
|
<a href="#" aria-label="Go to Transfer">Transfer</a>
|
|
|
<a href="#" aria-label="Go to Loans">Loans</a>
|
|
|
<a href="#" aria-label="Go to New Product">New Product</a>
|
|
|
</nav>
|
|
|
<div class="right">
|
|
|
<div class="notification" aria-label="Notifications">
|
|
|
<i class="fas fa-bell"></i>
|
|
|
<div class="dot"></div>
|
|
|
</div>
|
|
|
<div class="user">
|
|
|
<div class="user-avatar">Mi</div>
|
|
|
<span class="user-name">Milly v</span>
|
|
|
<span class="premium">Premium</span>
|
|
|
</div>
|
|
|
<div class="logout" aria-label="Logout">
|
|
|
<i class="fas fa-sign-out-alt"></i>
|
|
|
</div>
|
|
|
<div class="clock" id="clock">01:42 PM EAT, September 08, 2025</div>
|
|
|
</div>
|
|
|
</header>
|
|
|
|
|
|
<div class="welcome">
|
|
|
<div class="user-avatar">
|
|
|
<i class="fas fa-user"></i>
|
|
|
</div>
|
|
|
<div class="welcome-text">
|
|
|
<h2>Welcome back, Milly!</h2>
|
|
|
<p>User | Meta Package: None</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="profile-summary">
|
|
|
<div class="avatar">Mi</div>
|
|
|
<div class="details">
|
|
|
<h3>Milly</h3>
|
|
|
<p>Joined: March 15, 2024 | Level: Beginner</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="dynamic-content">
|
|
|
<div class="banner">
|
|
|
<div class="title">Monday Giveaway Cashback! Only at MetaWave</div>
|
|
|
<p>
|
|
|
Buy the ♦ NOVA at KES 1,000.00 get Awarded Instantly KES 3,000.00. Buy the ♦ SUPERIOR at KES 2,500.00 get Awarded Instantly KES 7,500.00. Buy the ♦ GOLD at KES 5,500.00 get Awarded Instantly KES 16,500.00.
|
|
|
</p>
|
|
|
<div class="footer">♦ Fast payouts via M-Pesa ♦ Powered by MetaWave</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="packages-section">
|
|
|
<h1>Investment Packages</h1>
|
|
|
<div class="subtitle">Grow your funds with our automated investment solutions.</div>
|
|
|
<div class="packages">
|
|
|
<div class="package-card">
|
|
|
<div class="package-header">
|
|
|
<i class="fas fa-coins"></i>
|
|
|
<div class="name">NOVA 1,000.00 KES</div>
|
|
|
</div>
|
|
|
<ul class="package-features">
|
|
|
<li class="checked"><i class="fas fa-circle-check"></i> Auto Deposit</li>
|
|
|
<li class="unchecked"><i class="far fa-circle"></i> Auto Withdrawal</li>
|
|
|
<li class="unchecked"><i class="far fa-circle"></i> Instant Cashback</li>
|
|
|
</ul>
|
|
|
<div class="package-award">Award Returns 3,000.00 KES</div>
|
|
|
<button class="package-button" data-price="1000" data-return="3000">Purchase Now</button>
|
|
|
</div>
|
|
|
<div class="package-card">
|
|
|
<div class="package-header">
|
|
|
<i class="fas fa-coins"></i>
|
|
|
<div class="name">SUPERIOR 2,500.00 KES</div>
|
|
|
</div>
|
|
|
<ul class="package-features">
|
|
|
<li class="checked"><i class="fas fa-circle-check"></i> Auto Deposit</li>
|
|
|
<li class="unchecked"><i class="far fa-circle"></i> Auto Withdrawal</li>
|
|
|
<li class="unchecked"><i class="far fa-circle"></i> Instant Cashback</li>
|
|
|
</ul>
|
|
|
<div class="package-award">Award Returns 7,500.00 KES</div>
|
|
|
<button class="package-button" data-price="2500" data-return="7500">Purchase Now</button>
|
|
|
</div>
|
|
|
<div class="package-card">
|
|
|
<div class="package-header">
|
|
|
<i class="fas fa-coins"></i>
|
|
|
<div class="name">GOLD 5,500.00 KES</div>
|
|
|
</div>
|
|
|
<ul class="package-features">
|
|
|
<li class="checked"><i class="fas fa-circle-check"></i> Auto Deposit</li>
|
|
|
<li class="unchecked"><i class="far fa-circle"></i> Auto Withdrawal</li>
|
|
|
<li class="unchecked"><i class="far fa-circle"></i> Instant Cashback</li>
|
|
|
</ul>
|
|
|
<div class="package-award">Award Returns 16,500.00 KES</div>
|
|
|
<button class="package-button" data-price="5500" data-return="16500">Purchase Now</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="balance-cards">
|
|
|
<div class="card">
|
|
|
<div class="card-title">Meta Balance</div>
|
|
|
<div class="meta-balance">
|
|
|
<div class="balance-amount" id="balance">0 KES</div>
|
|
|
<div class="balance-actions">
|
|
|
<button class="btn btn-primary" id="depositBtn">Deposit</button>
|
|
|
<button class="btn btn-outline" id="withdrawBtn">Withdraw</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<button class="btn btn-outline" id="toggleHistory" style="margin-bottom: var(--spacing-unit);">Toggle Transaction History</button>
|
|
|
<div class="transaction-history" id="transactionHistory">
|
|
|
<h3>Transaction History</h3>
|
|
|
<ul class="transaction-list" id="transactionList">
|
|
|
<li>No transactions yet.</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
<div class="stats">
|
|
|
<div class="stat-card">
|
|
|
<div class="stat-label">Total Withdrawals</div>
|
|
|
<div class="stat-value" id="withdrawals">0 KES</div>
|
|
|
</div>
|
|
|
<div class="stat-card">
|
|
|
<div class="stat-label">Total Deposits</div>
|
|
|
<div class="stat-value" id="deposits">0 KES</div>
|
|
|
</div>
|
|
|
<div class="stat-card">
|
|
|
<div class="stat-label">Meta Earnings</div>
|
|
|
<div class="stat-value" id="earnings">0 KES</div>
|
|
|
</div>
|
|
|
<div class="stat-card">
|
|
|
<div class="stat-label">Rewards</div>
|
|
|
<div class="stat-value" id="rewards">0 KES</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="dashboard-cards">
|
|
|
<div class="dashboard-card">
|
|
|
<h4>Welcome back, Milly!</h4>
|
|
|
<p>Meta Balance</p>
|
|
|
<h2 id="dashboard-balance">0 KES</h2>
|
|
|
<button class="dashboard-btn" id="redeemBtn">Redeem</button>
|
|
|
</div>
|
|
|
<div class="dashboard-card">
|
|
|
<p>Total Deposits</p>
|
|
|
<h2 id="dashboard-deposits">0 KES</h2>
|
|
|
<button class="btn btn-primary" id="dashboard-depositBtn">Deposit</button>
|
|
|
</div>
|
|
|
<div class="dashboard-card">
|
|
|
<p>Total Withdrawals</p>
|
|
|
<h2 id="dashboard-withdrawals">0 KES</h2>
|
|
|
<button class="btn btn-primary" id="dashboard-withdrawBtn">Withdraw</button>
|
|
|
</div>
|
|
|
<div class="dashboard-card">
|
|
|
<p>Meta Earnings</p>
|
|
|
<h2 id="dashboard-earnings">0 KES</h2>
|
|
|
</div>
|
|
|
<div class="dashboard-card">
|
|
|
<p>Rewards</p>
|
|
|
<h2 id="dashboard-rewards">0 KES</h2>
|
|
|
</div>
|
|
|
</div>
|
|
|
</main>
|
|
|
|
|
|
<div class="modal" id="depositModal">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<h3>Deposit Funds</h3>
|
|
|
<span class="close" id="closeDeposit">×</span>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label for="depositAmount">Amount (KES)</label>
|
|
|
<input type="number" id="depositAmount" placeholder="Enter amount" aria-label="Deposit amount">
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label for="depositMethod">Payment Method</label>
|
|
|
<select id="depositMethod" aria-label="Payment method">
|
|
|
<option value="mpesa">M-Pesa</option>
|
|
|
<option value="card">Credit Card</option>
|
|
|
<option value="bank">Bank Transfer</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
<button class="btn btn-primary" style="width: 100%;" id="confirmDeposit">Confirm Deposit</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="modal" id="withdrawModal">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<h3>Withdraw Funds</h3>
|
|
|
<span class="close" id="closeWithdraw">×</span>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label for="withdrawAmount">Amount (KES)</label>
|
|
|
<input type="number" id="withdrawAmount" placeholder="Enter amount" aria-label="Withdraw amount">
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label for="withdrawMethod">Withdrawal Method</label>
|
|
|
<select id="withdrawMethod" aria-label="Withdrawal method">
|
|
|
<option value="mpesa">M-Pesa</option>
|
|
|
<option value="bank">Bank Transfer</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
<button class="btn btn-primary" style="width: 100%;" id="confirmWithdraw">Confirm Withdrawal</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="modal" id="logoutModal">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<h3>Confirm Logout</h3>
|
|
|
<span class="close" id="closeLogout">×</span>
|
|
|
</div>
|
|
|
<p>Are you sure you want to logout?</p>
|
|
|
<div style="display: flex; gap: var(--spacing-unit);">
|
|
|
<button class="btn btn-primary" id="confirmLogout" style="width: 100%;">Yes</button>
|
|
|
<button class="btn btn-outline" id="cancelLogout" style="width: 100%;">No</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
const menuToggle = document.getElementById('menuToggle');
|
|
|
const sidebar = document.getElementById('sidebar');
|
|
|
const mainContent = document.querySelector('.main-content');
|
|
|
const dynamicContent = document.getElementById('dynamic-content');
|
|
|
const clock = document.getElementById('clock');
|
|
|
const logoutIcon = document.querySelector('.logout');
|
|
|
const logoutModal = document.getElementById('logoutModal');
|
|
|
const closeLogout = document.getElementById('closeLogout');
|
|
|
const confirmLogout = document.getElementById('confirmLogout');
|
|
|
const cancelLogout = document.getElementById('cancelLogout');
|
|
|
|
|
|
menuToggle.addEventListener('click', function() {
|
|
|
sidebar.classList.toggle('collapsed');
|
|
|
mainContent.classList.toggle('expanded');
|
|
|
menuToggle.innerHTML = sidebar.classList.contains('collapsed') ? '☰' : '×';
|
|
|
});
|
|
|
|
|
|
const sections = {
|
|
|
'#transactions': '<h2>Transactions</h2><p>View your recent transactions here. Last updated: 01:42 PM EAT, September 08, 2025.</p>',
|
|
|
'#transfer': '<h2>Transfer</h2><p>Initiate a transfer to another account. Ensure funds are available.</p>',
|
|
|
'#daily-product': '<h2>Daily Product</h2><p>Check today\'s featured product for investment. Updated: 01:42 PM EAT, September 08, 2025.</p>',
|
|
|
'#withdraw': '<h2>Withdraw</h2><p>Withdraw your funds instantly via M-Pesa.</p>',
|
|
|
'#packages': '<div class="packages-section"><h1>Investment Packages</h1><div class="subtitle">Grow your funds with our automated investment solutions.</div><div class="packages"><div class="package-card"><div class="package-header"><i class="fas fa-coins"></i><div class="name">NOVA 1,000.00 KES</div></div><ul class="package-features"><li class="checked"><i class="fas fa-circle-check"></i> Auto Deposit</li><li class="unchecked"><i class="far fa-circle"></i> Auto Withdrawal</li><li class="unchecked"><i class="far fa-circle"></i> Instant Cashback</li></ul><div class="package-award">Award Returns 3,000.00 KES</div><button class="package-button" data-price="1000" data-return="3000">Purchase Now</button></div><div class="package-card"><div class="package-header"><i class="fas fa-coins"></i><div class="name">SUPERIOR 2,500.00 KES</div></div><ul class="package-features"><li class="checked"><i class="fas fa-circle-check"></i> Auto Deposit</li><li class="unchecked"><i class="far fa-circle"></i> Auto Withdrawal</li><li class="unchecked"><i class="far fa-circle"></i> Instant Cashback</li></ul><div class="package-award">Award Returns 7,500.00 KES</div><button class="package-button" data-price="2500" data-return="7500">Purchase Now</button></div><div class="package-card"><div class="package-header"><i class="fas fa-coins"></i><div class="name">GOLD 5,500.00 KES</div></div><ul class="package-features"><li class="checked"><i class="fas fa-circle-check"></i> Auto Deposit</li><li class="unchecked"><i class="far fa-circle"></i> Auto Withdrawal</li><li class="unchecked"><i class="far fa-circle"></i> Instant Cashback</li></ul><div class="package-award">Award Returns 16,500.00 KES</div><button class="package-button" data-price="5500" data-return="16500">Purchase Now</button></div></div></div>',
|
|
|
'#loan': '<h2>Loan</h2><p>Apply for a loan with flexible repayment options.</p>',
|
|
|
'#recharge': '<h2>Recharge</h2><p>Recharge your account for continued access.</p>',
|
|
|
'#agent-approval': '<h2>Agent Approval</h2><p>Review and approve agent requests.</p>',
|
|
|
'#access-token': '<h2>Access Token</h2><p>Manage your access tokens securely.</p>',
|
|
|
'#agent-claim': '<h2>Agent Claim</h2><p>Claim your agent rewards and bonuses.</p>',
|
|
|
'#team': '<h2>Team</h2><p>Manage your team members and roles.</p>',
|
|
|
'#profile': '<h2>Profile</h2><p>Update your personal information and settings. Last updated: 01:42 PM EAT, September 08, 2025.</p>',
|
|
|
'#settings': '<h2>Settings</h2><p>Customize your account preferences.</p>',
|
|
|
'#whatsapp-channel': '<h2>Whatsapp Channel</h2><p>Join our Whatsapp community for updates.</p>',
|
|
|
'#customer-care': '<h2>Customer Care</h2><p>Contact support for assistance. Available 24/7.</p>'
|
|
|
};
|
|
|
|
|
|
document.querySelectorAll('.sidebar ul li a').forEach(link => {
|
|
|
link.addEventListener('click', function(e) {
|
|
|
e.preventDefault();
|
|
|
const sectionId = this.getAttribute('href');
|
|
|
if (sections[sectionId]) {
|
|
|
dynamicContent.innerHTML = sections[sectionId];
|
|
|
document.querySelectorAll('.package-button').forEach(button => {
|
|
|
button.addEventListener('click', handlePurchase);
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
function updateClock() {
|
|
|
const now = new Date();
|
|
|
const options = { hour: '2-digit', minute: '2-digit', hour12: true, timeZone: 'Africa/Nairobi' };
|
|
|
const time = now.toLocaleTimeString('en-US', options);
|
|
|
const date = now.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
|
|
|
clock.textContent = `${time} EAT, ${date}`;
|
|
|
}
|
|
|
updateClock();
|
|
|
setInterval(updateClock, 1000);
|
|
|
|
|
|
function handlePurchase(e) {
|
|
|
const price = parseFloat(e.target.getAttribute('data-price'));
|
|
|
const reward = parseFloat(e.target.getAttribute('data-return'));
|
|
|
if (balance >= price) {
|
|
|
balance -= price;
|
|
|
rewards += reward;
|
|
|
const transaction = `Purchased ${e.target.closest('.package-card').querySelector('.name').textContent} at ${price} KES - Awarded ${reward} KES | ${new Date().toLocaleString('en-US', { timeZone: 'Africa/Nairobi' })}`;
|
|
|
addTransaction(transaction);
|
|
|
updateUI();
|
|
|
alert(`Successfully purchased ${e.target.closest('.package-card').querySelector('.name').textContent} with ${price} KES! Awarded ${reward} KES.`);
|
|
|
} else {
|
|
|
alert('Insufficient balance to purchase this package.');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
document.querySelectorAll('.package-button').forEach(button => {
|
|
|
button.addEventListener('click', handlePurchase);
|
|
|
});
|
|
|
|
|
|
const toggleHistory = document.getElementById('toggleHistory');
|
|
|
const transactionHistory = document.getElementById('transactionHistory');
|
|
|
const transactionList = document.getElementById('transactionList');
|
|
|
function addTransaction(text) {
|
|
|
const li = document.createElement('li');
|
|
|
li.textContent = text;
|
|
|
transactionList.insertBefore(li, transactionList.firstChild);
|
|
|
if (transactionList.children.length > 5) {
|
|
|
transactionList.removeChild(transactionList.lastChild);
|
|
|
}
|
|
|
}
|
|
|
toggleHistory.addEventListener('click', () => {
|
|
|
transactionHistory.classList.toggle('active');
|
|
|
});
|
|
|
|
|
|
let balance = 0;
|
|
|
let totalDeposits = 0;
|
|
|
let totalWithdrawals = 0;
|
|
|
let rewards = 0;
|
|
|
const balanceEl = document.getElementById('balance');
|
|
|
const depositsEl = document.getElementById('deposits');
|
|
|
const withdrawalsEl = document.getElementById('withdrawals');
|
|
|
const rewardsEl = document.getElementById('rewards');
|
|
|
const earningsEl = document.getElementById('earnings');
|
|
|
const dashboardBalanceEl = document.getElementById('dashboard-balance');
|
|
|
const dashboardDepositsEl = document.getElementById('dashboard-deposits');
|
|
|
const dashboardWithdrawalsEl = document.getElementById('dashboard-withdrawals');
|
|
|
const dashboardRewardsEl = document.getElementById('dashboard-rewards');
|
|
|
const dashboardEarningsEl = document.getElementById('dashboard-earnings');
|
|
|
|
|
|
const depositBtn = document.getElementById('depositBtn');
|
|
|
const dashboardDepositBtn = document.getElementById('dashboard-depositBtn');
|
|
|
const depositModal = document.getElementById('depositModal');
|
|
|
const closeDeposit = document.getElementById('closeDeposit');
|
|
|
const confirmDeposit = document.getElementById('confirmDeposit');
|
|
|
|
|
|
depositBtn.addEventListener('click', () => depositModal.style.display = 'flex');
|
|
|
dashboardDepositBtn.addEventListener('click', () => depositModal.style.display = 'flex');
|
|
|
closeDeposit.addEventListener('click', () => depositModal.style.display = 'none');
|
|
|
confirmDeposit.addEventListener('click', () => {
|
|
|
const amount = parseFloat(document.getElementById('depositAmount').value);
|
|
|
const method = document.getElementById('depositMethod').value;
|
|
|
if (!isNaN(amount) && amount > 0) {
|
|
|
totalDeposits += amount;
|
|
|
balance += amount;
|
|
|
rewards += amount * 0.1;
|
|
|
const transaction = `Deposited ${amount} KES via ${method} | ${new Date().toLocaleString('en-US', { timeZone: 'Africa/Nairobi' })}`;
|
|
|
addTransaction(transaction);
|
|
|
updateUI();
|
|
|
depositModal.style.display = 'none';
|
|
|
document.getElementById('depositAmount').value = '';
|
|
|
alert(`Successfully deposited ${amount} KES via ${method}`);
|
|
|
} else {
|
|
|
alert('Please enter a valid amount');
|
|
|
}
|
|
|
});
|
|
|
|
|
|
const withdrawBtn = document.getElementById('withdrawBtn');
|
|
|
const dashboardWithdrawBtn = document.getElementById('dashboard-withdrawBtn');
|
|
|
const withdrawModal = document.getElementById('withdrawModal');
|
|
|
const closeWithdraw = document.getElementById('closeWithdraw');
|
|
|
const confirmWithdraw = document.getElementById('confirmWithdraw');
|
|
|
|
|
|
withdrawBtn.addEventListener('click', () => withdrawModal.style.display = 'flex');
|
|
|
dashboardWithdrawBtn.addEventListener('click', () => withdrawModal.style.display = 'flex');
|
|
|
closeWithdraw.addEventListener('click', () => withdrawModal.style.display = 'none');
|
|
|
confirmWithdraw.addEventListener('click', () => {
|
|
|
const amount = parseFloat(document.getElementById('withdrawAmount').value);
|
|
|
const method = document.getElementById('withdrawMethod').value;
|
|
|
if (!isNaN(amount) && amount > 0) {
|
|
|
if (amount > balance) {
|
|
|
alert('Insufficient balance');
|
|
|
return;
|
|
|
}
|
|
|
totalWithdrawals += amount;
|
|
|
balance -= amount;
|
|
|
const transaction = `Withdrew ${amount} KES via ${method} | ${new Date().toLocaleString('en-US', { timeZone: 'Africa/Nairobi' })}`;
|
|
|
addTransaction(transaction);
|
|
|
updateUI();
|
|
|
withdrawModal.style.display = 'none';
|
|
|
document.getElementById('withdrawAmount').value = '';
|
|
|
alert(`Successfully withdrew ${amount} KES via ${method}`);
|
|
|
} else {
|
|
|
alert('Please enter a valid amount');
|
|
|
}
|
|
|
});
|
|
|
|
|
|
const redeemBtn = document.getElementById('redeemBtn');
|
|
|
redeemBtn.addEventListener('click', () => {
|
|
|
if (rewards > 0) {
|
|
|
balance += rewards;
|
|
|
const transaction = `Redeemed ${rewards} KES rewards | ${new Date().toLocaleString('en-US', { timeZone: 'Africa/Nairobi' })}`;
|
|
|
addTransaction(transaction);
|
|
|
rewards = 0;
|
|
|
updateUI();
|
|
|
alert("Rewards redeemed successfully!");
|
|
|
} else {
|
|
|
alert("No rewards available!");
|
|
|
}
|
|
|
});
|
|
|
|
|
|
window.addEventListener('click', (event) => {
|
|
|
if (event.target === depositModal) depositModal.style.display = 'none';
|
|
|
if (event.target === withdrawModal) withdrawModal.style.display = 'none';
|
|
|
if (event.target === logoutModal) logoutModal.style.display = 'none';
|
|
|
});
|
|
|
|
|
|
function updateUI() {
|
|
|
balanceEl.textContent = balance.toLocaleString() + ' KES';
|
|
|
depositsEl.textContent = totalDeposits.toLocaleString() + ' KES';
|
|
|
withdrawalsEl.textContent = totalWithdrawals.toLocaleString() + ' KES';
|
|
|
rewardsEl.textContent = rewards.toLocaleString() + ' KES';
|
|
|
earningsEl.textContent = (totalDeposits - totalWithdrawals).toLocaleString() + ' KES';
|
|
|
dashboardBalanceEl.textContent = balance.toLocaleString() + ' KES';
|
|
|
dashboardDepositsEl.textContent = totalDeposits.toLocaleString() + ' KES';
|
|
|
dashboardWithdrawalsEl.textContent = totalWithdrawals.toLocaleString() + ' KES';
|
|
|
dashboardRewardsEl.textContent = rewards.toLocaleString() + ' KES';
|
|
|
dashboardEarningsEl.textContent = (totalDeposits - totalWithdrawals).toLocaleString() + ' KES';
|
|
|
}
|
|
|
|
|
|
setTimeout(() => {
|
|
|
balance = 5250;
|
|
|
totalDeposits = 6450;
|
|
|
totalWithdrawals = 1200;
|
|
|
rewards = 1050;
|
|
|
updateUI();
|
|
|
addTransaction('Initial balance loaded: 5250 KES | 01:42 PM EAT, September 08, 2025');
|
|
|
}, 1000);
|
|
|
|
|
|
logoutIcon.addEventListener('click', () => logoutModal.style.display = 'flex');
|
|
|
closeLogout.addEventListener('click', () => logoutModal.style.display = 'none');
|
|
|
cancelLogout.addEventListener('click', () => logoutModal.style.display = 'none');
|
|
|
confirmLogout.addEventListener('click', () => {
|
|
|
alert('Logging out...');
|
|
|
logoutModal.style.display = 'none';
|
|
|
window.location.href = '/login';
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
