| <?php |
| |
| session_start(); |
| if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in'] !== true) { |
| header('Location: ../../index.html'); |
| exit; |
| } |
|
|
| |
| $username = $_SESSION['username']; |
| $email = $_SESSION['email']; |
| $tier = $_SESSION['tier']; |
| $package = $_SESSION['package']; |
| $balance = $_SESSION['balance']; |
| $total_deposits = $_SESSION['total_deposits']; |
| $total_withdrawals = $_SESSION['total_withdrawals']; |
| $rewards = $_SESSION['rewards']; |
| $earnings = $total_deposits - $total_withdrawals; |
| ?> |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Japanese Motors 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: |
| --main-bg: |
| --text-white: |
| --text-gray: |
| --banner-gradient-start: |
| --banner-gradient-end: |
| --green-check: |
| --gray-check: |
| --yellow-button: |
| --purple-user: |
| --premium-bg: |
| --link-blue: |
| --award-yellow: |
| --transition-speed: 0.3s; |
| --card-bg: rgba(255, 255, 255, 0.05); |
| --primary: |
| --secondary: |
| --gray: |
| --warning: |
| --spacing-unit: 1rem; |
| --accent-primary: |
| --accent-secondary: |
| --shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.1); |
| --premium-gold: |
| } |
|
|
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| } |
|
|
| body { |
| background-color: var(--main-bg); |
| color: var(--text-white); |
| display: flex; |
| min-height: 100vh; |
| overflow-x: hidden; |
| } |
|
|
| .sidebar { |
| width: 220px; |
| background-color: var(--sidebar-bg); |
| padding: 20px 15px; |
| position: fixed; |
| height: 100vh; |
| overflow-y: auto; |
| z-index: 1000; |
| display: flex; |
| flex-direction: column; |
| transition: transform var(--transition-speed); |
| box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2); |
| } |
|
|
| .sidebar.collapsed { |
| transform: translateX(-100%); |
| } |
|
|
| .sidebar .logo { |
| display: flex; |
| align-items: center; |
| margin-bottom: 30px; |
| padding-bottom: 10px; |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
| } |
|
|
| .sidebar .logo img { |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| margin-right: 10px; |
| transition: transform 0.3s ease; |
| } |
|
|
| .sidebar .logo img:hover { |
| transform: scale(1.1); |
| } |
|
|
| .sidebar .logo-text { |
| font-size: 18px; |
| font-weight: bold; |
| color: var(--yellow-button); |
| } |
|
|
| .sidebar .logo-subtext { |
| font-size: 12px; |
| color: var(--text-gray); |
| } |
|
|
| .sidebar ul { |
| list-style: none; |
| flex: 1; |
| } |
|
|
| .sidebar ul li { |
| margin-bottom: 10px; |
| } |
|
|
| .sidebar ul li a { |
| display: flex; |
| align-items: center; |
| color: var(--text-gray); |
| text-decoration: none; |
| padding: 8px 10px; |
| border-radius: 6px; |
| transition: background var(--transition-speed), transform var(--transition-speed); |
| } |
|
|
| .sidebar ul li a:hover { |
| background-color: rgba(255, 255, 255, 0.1); |
| color: var(--text-white); |
| transform: translateX(5px); |
| } |
|
|
| .sidebar ul li a i { |
| margin-right: 10px; |
| width: 20px; |
| text-align: center; |
| transition: color var(--transition-speed); |
| } |
|
|
| .sidebar ul li a:hover i { |
| color: var(--yellow-button); |
| } |
|
|
| .sidebar .user-info { |
| display: flex; |
| align-items: center; |
| padding: 10px; |
| border-top: 1px solid rgba(255, 255, 255, 0.1); |
| margin-top: auto; |
| background: rgba(255, 255, 255, 0.03); |
| border-radius: 8px; |
| } |
|
|
| .sidebar .user-avatar { |
| background-color: var(--purple-user); |
| color: var(--text-white); |
| width: 30px; |
| height: 30px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: bold; |
| margin-right: 10px; |
| box-shadow: 0 0 5px rgba(168, 85, 247, 0.5); |
| } |
|
|
| .sidebar .user-text { |
| font-size: 14px; |
| } |
|
|
| .sidebar .user-status { |
| font-size: 12px; |
| color: var(--text-gray); |
| } |
|
|
| .main-content { |
| flex: 1; |
| margin-left: 220px; |
| padding: 20px; |
| transition: margin-left var(--transition-speed); |
| background: rgba(75, 85, 99, 0.9); |
| backdrop-filter: blur(5px); |
| } |
|
|
| .main-content.expanded { |
| margin-left: 0; |
| } |
|
|
| .topbar { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| margin-bottom: 40px; |
| padding: 10px 20px; |
| background: rgba(30, 41, 59, 0.8); |
| border-radius: 10px; |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
| } |
|
|
| .topbar .logo { |
| display: flex; |
| align-items: center; |
| } |
|
|
| .topbar .logo img { |
| width: 30px; |
| height: 30px; |
| margin-right: 10px; |
| } |
|
|
| .topbar .logo-text { |
| font-size: 18px; |
| font-weight: bold; |
| color: var(--yellow-button); |
| } |
|
|
| .topbar nav { |
| display: flex; |
| gap: 20px; |
| } |
|
|
| .topbar nav a { |
| color: var(--link-blue); |
| text-decoration: none; |
| font-weight: 500; |
| transition: color var(--transition-speed); |
| } |
|
|
| .topbar nav a:hover { |
| color: var(--primary); |
| } |
|
|
| .topbar .right { |
| display: flex; |
| align-items: center; |
| gap: 15px; |
| } |
|
|
| .topbar .toggle-btn { |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); |
| color: var(--text-white); |
| border: none; |
| border-radius: 50%; |
| width: 40px; |
| height: 40px; |
| font-size: 18px; |
| cursor: pointer; |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); |
| transition: transform var(--transition-speed), background var(--transition-speed); |
| } |
|
|
| .topbar .toggle-btn:hover { |
| transform: scale(1.1); |
| background: linear-gradient(90deg, #2a4494, #270a66); |
| } |
|
|
| .topbar .notification { |
| position: relative; |
| } |
|
|
| .topbar .notification i { |
| color: var(--text-gray); |
| font-size: 18px; |
| transition: color var(--transition-speed); |
| } |
|
|
| .topbar .notification i:hover { |
| color: var(--warning); |
| } |
|
|
| .topbar .notification .dot { |
| position: absolute; |
| top: -2px; |
| right: -2px; |
| width: 8px; |
| height: 8px; |
| background-color: |
| border-radius: 50%; |
| } |
|
|
| .topbar .user { |
| display: flex; |
| align-items: center; |
| gap: 5px; |
| } |
|
|
| .topbar .user-avatar { |
| background-color: var(--premium-bg); |
| color: |
| width: 25px; |
| height: 25px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: bold; |
| font-size: 12px; |
| box-shadow: 0 0 5px rgba(234, 179, 8, 0.5); |
| } |
|
|
| .topbar .user-name { |
| font-weight: 500; |
| color: var(--text-white); |
| } |
|
|
| .topbar .premium { |
| background-color: var(--premium-bg); |
| color: |
| padding: 2px 6px; |
| border-radius: 4px; |
| font-size: 12px; |
| font-weight: bold; |
| } |
|
|
| .topbar .logout i { |
| color: var(--text-gray); |
| font-size: 18px; |
| transition: color var(--transition-speed); |
| } |
|
|
| .topbar .logout i:hover { |
| color: |
| } |
|
|
| .banner { |
| max-width: 450px; |
| margin: 0 auto calc(var(--spacing-unit) * 2); |
| background: linear-gradient(135deg, #b035e9ff, #c4306dff, #ec094dff); |
| 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: |
| font-weight: 700; |
| animation: blink 1.5s infinite; |
| } |
|
|
| .banner p { |
| font-size: 0.95rem; |
| line-height: 1.6; |
| border-radius: 8px; |
| margin-bottom: calc(var(--spacing-unit) * 1); |
| color: black; |
| 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; |
| } |
|
|
| .packages-section h1 { |
| font-size: 24px; |
| margin-bottom: 10px; |
| color: var(--yellow-button); |
| text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); |
| } |
|
|
| .packages-section .subtitle { |
| font-size: 14px; |
| color: var(--text-gray); |
| margin-bottom: 30px; |
| } |
|
|
| .packages { |
| display: flex; |
| justify-content: center; |
| gap: 20px; |
| } |
|
|
| .package-card { |
| background-color: |
| border-radius: 12px; |
| padding: 20px; |
| width: 200px; |
| text-align: left; |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); |
| transition: transform var(--transition-speed), box-shadow var(--transition-speed); |
| } |
|
|
| .package-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); |
| } |
|
|
| .package-header { |
| display: flex; |
| align-items: center; |
| margin-bottom: 15px; |
| } |
|
|
| .package-header i { |
| color: var(--text-gray); |
| margin-right: 10px; |
| font-size: 18px; |
| } |
|
|
| .package-header .name { |
| font-size: 18px; |
| font-weight: bold; |
| color: var(--yellow-button); |
| } |
|
|
| .package-features { |
| list-style: none; |
| margin-bottom: 20px; |
| } |
|
|
| .package-features li { |
| display: flex; |
| align-items: center; |
| margin-bottom: 8px; |
| color: var(--text-gray); |
| font-size: 14px; |
| transition: color var(--transition-speed); |
| } |
|
|
| .package-features li:hover { |
| color: var(--text-white); |
| } |
|
|
| .package-features li i { |
| margin-right: 10px; |
| } |
|
|
| .package-features .checked i { |
| color: var(--green-check); |
| } |
|
|
| .package-features .unchecked i { |
| color: var(--gray-check); |
| } |
|
|
| .package-award { |
| font-size: 16px; |
| font-weight: bold; |
| color: var(--award-yellow); |
| margin-bottom: 10px; |
| text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); |
| } |
|
|
| .package-button { |
| background-color: var(--yellow-button); |
| color: |
| padding: 8px 16px; |
| border: none; |
| border-radius: 6px; |
| font-weight: bold; |
| cursor: pointer; |
| width: 100%; |
| transition: background var(--transition-speed), transform var(--transition-speed); |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); |
| } |
|
|
| .package-button:hover { |
| background-color: |
| transform: scale(1.05); |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); |
| } |
|
|
| .welcome { |
| display: flex; |
| align-items: center; |
| margin-bottom: 20px; |
| padding: 15px; |
| background: rgba(255, 255, 255, 0.05); |
| border-radius: 10px; |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
| } |
|
|
| .user-avatar { |
| width: 50px; |
| height: 50px; |
| border-radius: 50%; |
| background-color: var(--primary); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: var(--text-white); |
| font-size: 20px; |
| margin-right: 15px; |
| box-shadow: 0 0 10px rgba(67, 97, 238, 0.5); |
| } |
|
|
| .welcome-text h2 { |
| font-size: 18px; |
| margin-bottom: 5px; |
| color: var(--text-white); |
| } |
|
|
| .welcome-text p { |
| color: var(--gray); |
| font-size: 14px; |
| } |
|
|
| .balance-cards { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
| gap: 20px; |
| margin-bottom: 30px; |
| } |
|
|
| .card { |
| background-color: |
| border-radius: 12px; |
| padding: 20px; |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); |
| transition: transform var(--transition-speed); |
| } |
|
|
| .card:hover { |
| transform: translateY(-5px); |
| } |
|
|
| .card-title { |
| font-size: 16px; |
| color: var(--gray); |
| margin-bottom: 15px; |
| } |
|
|
| .meta-balance { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
|
|
| .balance-amount { |
| font-size: 28px; |
| font-weight: 700; |
| color: var(--primary); |
| text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); |
| } |
|
|
| .balance-actions { |
| display: flex; |
| gap: 10px; |
| } |
|
|
| .btn { |
| padding: 8px 15px; |
| border-radius: 5px; |
| border: none; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all var(--transition-speed); |
| } |
|
|
| .btn-primary { |
| background-color: var(--primary); |
| color: var(--text-white); |
| } |
|
|
| .btn-primary:hover { |
| background-color: var(--secondary); |
| transform: scale(1.05); |
| } |
|
|
| .btn-outline { |
| background-color: transparent; |
| border: 1px solid var(--primary); |
| color: var(--primary); |
| } |
|
|
| .btn-outline:hover { |
| background-color: var(--primary); |
| color: var(--text-white); |
| transform: scale(1.05); |
| } |
|
|
| .stats { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| gap: 20px; |
| margin-bottom: 30px; |
| } |
|
|
| .stat-card { |
| background-color: |
| border-radius: 12px; |
| padding: 20px; |
| text-align: center; |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); |
| transition: transform var(--transition-speed); |
| } |
|
|
| .stat-card:hover { |
| transform: translateY(-5px); |
| } |
|
|
| .stat-value { |
| font-size: 24px; |
| font-weight: 700; |
| margin: 10px 0; |
| color: var(--primary); |
| } |
|
|
| .stat-label { |
| color: var(--gray); |
| font-size: 14px; |
| } |
|
|
| .dashboard-cards { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); |
| gap: 20px; |
| margin-bottom: 30px; |
| } |
|
|
| .dashboard-card { |
| background-color: |
| border-radius: 12px; |
| padding: 20px; |
| color: var(--text-white); |
| text-align: center; |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); |
| transition: transform var(--transition-speed); |
| } |
|
|
| .dashboard-card:hover { |
| transform: translateY(-5px); |
| } |
|
|
| .dashboard-card h2 { |
| margin: 10px 0; |
| font-size: 22px; |
| color: var(--primary); |
| } |
|
|
| .dashboard-card p { |
| font-size: 14px; |
| color: var(--gray); |
| } |
|
|
| .dashboard-btn { |
| background: var(--yellow-button); |
| color: |
| padding: 8px 18px; |
| border: none; |
| border-radius: 6px; |
| cursor: pointer; |
| font-weight: bold; |
| margin-top: 10px; |
| transition: background var(--transition-speed), transform var(--transition-speed); |
| } |
|
|
| .dashboard-btn:hover { |
| background: |
| transform: scale(1.05); |
| } |
|
|
| .modal { |
| display: none; |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background-color: rgba(0, 0, 0, 0.5); |
| z-index: 2000; |
| justify-content: center; |
| align-items: center; |
| } |
|
|
| .modal-content { |
| background-color: var(--sidebar-bg); |
| padding: 30px; |
| border-radius: 10px; |
| width: 90%; |
| max-width: 500px; |
| color: var(--text-white); |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); |
| animation: fadeIn 0.3s ease; |
| } |
|
|
| @keyframes fadeIn { |
| from { opacity: 0; transform: scale(0.9); } |
| to { opacity: 1; transform: scale(1); } |
| } |
|
|
| .modal-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 20px; |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
| padding-bottom: 10px; |
| } |
|
|
| .close { |
| font-size: 24px; |
| cursor: pointer; |
| color: var(--gray); |
| transition: color var(--transition-speed); |
| } |
|
|
| .close:hover { |
| color: |
| } |
|
|
| .form-group { |
| margin-bottom: 20px; |
| } |
|
|
| .form-group label { |
| display: block; |
| margin-bottom: 5px; |
| font-weight: 600; |
| color: var(--text-white); |
| } |
|
|
| .form-group input, .form-group select { |
| width: 100%; |
| padding: 10px; |
| border: 1px solid var(--gray); |
| border-radius: 5px; |
| background: rgba(255, 255, 255, 0.1); |
| color: var(--text-white); |
| transition: border-color var(--transition-speed); |
| } |
|
|
| .form-group input:focus, .form-group select:focus { |
| border-color: var(--primary); |
| 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; |
| } |
|
|
| .topbar { |
| flex-direction: column; |
| gap: 15px; |
| } |
|
|
| .topbar nav { |
| flex-direction: column; |
| gap: 10px; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <!-- Toggle Button for Sidebar --> |
| <button class="toggle-btn" id="menuToggle" aria-label="Toggle navigation menu" style="position: fixed; top: 15px; right: 15px; z-index: 1100;">☰</button> |
| |
| <!-- Sidebar --> |
| <nav class="sidebar" id="sidebar"> |
| <div class="logo"> |
| <img src="https://via.placeholder.com/40?text=M" alt="Logo"> |
| <div> |
| <div class="logo-text">JMOTORS</div> |
| <div class="logo-subtext">Marketing Platform</div> |
| </div> |
| </div> |
| <ul> |
| <li><a href="index.php"><i class="fas fa-home"></i> Dashboard</a></li> |
| <li><a href="meta-uploads.php"><i class="fas fa-upload"></i> Meta Uploads</a></li> |
| <li><a href="transactions.php"><i class="fas fa-arrows-alt-h"></i> Transactions</a></li> |
| <li><a href="transfer.php"><i class="fas fa-exchange-alt"></i> Transfer</a></li> |
| <li><a href="daily-product.php"><i class="fas fa-shopping-cart"></i> Daily Product</a></li> |
| <li><a href="withdraw.php"><i class="fas fa-money-bill-wave"></i> Withdraw</a></li> |
| <li><a href="packages.php"><i class="fas fa-box"></i> Packages</a></li> |
| <li><a href="loan.php"><i class="fas fa-hand-holding-usd"></i> Loan</a></li> |
| <li><a href="recharge.php"><i class="fas fa-battery-full"></i> Recharge</a></li> |
| <li><a href="agent-approval.php"><i class="fas fa-user-check"></i> Agent Approval</a></li> |
| <li><a href="access-token.php"><i class="fas fa-key"></i> Access Token</a></li> |
| <li><a href="agent-claim.php"><i class="fas fa-tag"></i> Agent Claim</a></li> |
| <li><a href="team.php"><i class="fas fa-users"></i> Team</a></li> |
| <li><a href="profile.php"><i class="fas fa-user"></i> Profile</a></li> |
| <li><a href="settings.php"><i class="fas fa-cog"></i> Settings</a></li> |
| <li><a href="whatsapp-channel.php"><i class="fab fa-whatsapp"></i> Whatsapp Channel</a></li> |
| <li><a href="customer-care.php"><i class="fas fa-headset"></i> Customer Care</a></li> |
| </ul> |
| <div class="user-info"> |
| <div class="user-avatar"><?php echo substr($username, 0, 2); ?></div> |
| <div class="user-text"> |
| <?php echo $username; ?> <br> |
| <span class="user-status"><?php echo $tier; ?> - Marketer</span> |
| </div> |
| <i class="fas fa-ellipsis-h" style="margin-left: auto; color: var(--text-gray);"></i> |
| </div> |
| </nav> |
| |
| <!-- Main Content --> |
| <main class="main-content" id="mainContent"> |
| <!-- Topbar --> |
| <header class="topbar"> |
| <div class="logo"> |
| <img src="https://via.placeholder.com/30?text=M" alt="Jmotors"> |
| <div class="logo-text">Jmotors</div> |
| </div> |
| <nav> |
| <a href="transfer.php">Transfer</a> |
| <a href="loan.php">Loans</a> |
| <a href="daily-product.php">New Product</a> |
| </nav> |
| <div class="right"> |
| <div class="notification"> |
| <i class="fas fa-bell"></i> |
| <div class="dot"></div> |
| </div> |
| <div class="user"> |
| <div class="user-avatar"><?php echo substr($username, 0, 1); ?></div> |
| <span class="user-name"><?php echo $username; ?> v</span> |
| <span class="premium"><?php echo $tier; ?></span> |
| </div> |
| <div class="logout" id="logoutBtn"> |
| <i class="fas fa-sign-out-alt"></i> |
| </div> |
| </div> |
| </header> |
| |
| <!-- Welcome --> |
| <div class="welcome"> |
| <div class="user-avatar"> |
| <i class="fas fa-user"></i> |
| </div> |
| <div class="welcome-text"> |
| <h2>Welcome back, <?php echo $username; ?>!</h2> |
| <p>User | Meta Package: <?php echo $package; ?></p> |
| </div> |
| </div> |
| |
| <!-- Dynamic Content Area --> |
| <div id="dynamic-content"> |
| <div class="banner"> |
| <div class="title">Monday Giveaway Cashback! Only at Jmotors</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 Jmotors</div> |
| </div> |
| |
| <!-- Packages Section --> |
| <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-package="NOVA" data-amount="1000">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-package="SUPERIOR" data-amount="2500">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-package="GOLD" data-amount="5500">Purchase Now →</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Balance Cards --> |
| <div class="balance-cards"> |
| <div class="card"> |
| <div class="card-title">Meta Balance</div> |
| <div class="meta-balance"> |
| <div class="balance-amount" id="balance"><?php echo number_format($balance, 2); ?> KES</div> |
| <div class="balance-actions"> |
| <button class="btn btn-primary" id="depositBtn">Deposit</button> |
| <button class="btn btn-outline" id="withdrawBtn">Withdraw Now</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Stats --> |
| <div class="stats"> |
| <div class="stat-card"> |
| <div class="stat-label">Total Withdrawals</div> |
| <div class="stat-value" id="withdrawals"><?php echo number_format($total_withdrawals, 2); ?> KES</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-label">Total Deposits</div> |
| <div class="stat-value" id="deposits"><?php echo number_format($total_deposits, 2); ?> KES</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-label">Meta Earnings</div> |
| <div class="stat-value" id="earnings"><?php echo number_format($earnings, 2); ?> KES</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-label">Rewards</div> |
| <div class="stat-value" id="rewards"><?php echo number_format($rewards, 2); ?> KES</div> |
| </div> |
| </div> |
| |
| <!-- Dashboard Cards --> |
| <div class="dashboard-cards"> |
| <div class="dashboard-card"> |
| <h4>Welcome back, <?php echo $username; ?>!</h4> |
| <p>Meta Balance</p> |
| <h2 id="dashboard-balance"><?php echo number_format($balance, 2); ?> KES</h2> |
| <button class="dashboard-btn" id="redeemBtn">Redeem</button> |
| </div> |
| <div class="dashboard-card"> |
| <p>Total Deposits</p> |
| <h2 id="dashboard-deposits"><?php echo number_format($total_deposits, 2); ?> KES</h2> |
| <button class="dashboard-btn" id="dashboard-depositBtn">Deposit</button> |
| </div> |
| <div class="dashboard-card"> |
| <p>Total Withdrawals</p> |
| <h2 id="dashboard-withdrawals"><?php echo number_format($total_withdrawals, 2); ?> KES</h2> |
| <button class="dashboard-btn" id="dashboard-withdrawBtn">Withdraw</button> |
| </div> |
| <div class="dashboard-card"> |
| <p>Meta Earnings</p> |
| <h2 id="dashboard-earnings"><?php echo number_format($earnings, 2); ?> KES</h2> |
| </div> |
| <div class="dashboard-card"> |
| <p>Rewards</p> |
| <h2 id="dashboard-rewards"><?php echo number_format($rewards, 2); ?> KES</h2> |
| </div> |
| </div> |
| </main> |
| |
| <!-- Deposit Modal --> |
| <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"> |
| </div> |
| <div class="form-group"> |
| <label for="depositMethod">Payment Method</label> |
| <select id="depositMethod"> |
| <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> |
| |
| <!-- Withdraw Modal --> |
| <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"> |
| </div> |
| <div class="form-group"> |
| <label for="withdrawMethod">Withdrawal Method</label> |
| <select id="withdrawMethod"> |
| <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> |
| |
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const menuToggle = document.getElementById('menuToggle'); |
| const sidebar = document.getElementById('sidebar'); |
| const mainContent = document.getElementById('mainContent'); |
| const dynamicContent = document.getElementById('dynamic-content'); |
| const logoutBtn = document.getElementById('logoutBtn'); |
|
|
| |
| menuToggle.addEventListener('click', function() { |
| sidebar.classList.toggle('collapsed'); |
| mainContent.classList.toggle('expanded'); |
| menuToggle.innerHTML = sidebar.classList.contains('collapsed') ? '☰' : '×'; |
| }); |
|
|
| |
| logoutBtn.addEventListener('click', function() { |
| fetch('../../logout.php') |
| .then(response => response.json()) |
| .then(data => { |
| if (data.success) { |
| window.location.href = '../../../index.html'; |
| } |
| }) |
| .catch(error => console.error('Logout error:', error)); |
| }); |
|
|
| |
| function attachPackageListeners() { |
| document.querySelectorAll('.package-button').forEach(button => { |
| button.addEventListener('click', function() { |
| const package = this.getAttribute('data-package'); |
| const amount = parseFloat(this.getAttribute('data-amount')); |
| |
| if (confirm(`Are you sure you want to purchase the ${package} package for ${amount} KES?`)) { |
| fetch('../api/purchase.php', { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| }, |
| body: JSON.stringify({ |
| package: package, |
| amount: amount |
| }) |
| }) |
| .then(response => response.json()) |
| .then(data => { |
| if (data.success) { |
| alert(`Successfully purchased ${package} package!`); |
| |
| updateUserData(); |
| } else { |
| alert('Purchase failed: ' + data.message); |
| } |
| }) |
| .catch(error => { |
| console.error('Purchase error:', error); |
| alert('An error occurred during purchase.'); |
| }); |
| } |
| }); |
| }); |
| } |
|
|
| |
| function updateUserData() { |
| fetch('../../check_session.php') |
| .then(response => response.json()) |
| .then(data => { |
| if (data.logged_in) { |
| |
| document.getElementById('balance').textContent = data.balance.toLocaleString() + ' KES'; |
| document.getElementById('withdrawals').textContent = data.total_withdrawals.toLocaleString() + ' KES'; |
| document.getElementById('deposits').textContent = data.total_deposits.toLocaleString() + ' KES'; |
| document.getElementById('rewards').textContent = data.rewards.toLocaleString() + ' KES'; |
| document.getElementById('earnings').textContent = (data.total_deposits - data.total_withdrawals).toLocaleString() + ' KES'; |
| |
| document.getElementById('dashboard-balance').textContent = data.balance.toLocaleString() + ' KES'; |
| document.getElementById('dashboard-withdrawals').textContent = data.total_withdrawals.toLocaleString() + ' KES'; |
| document.getElementById('dashboard-deposits').textContent = data.total_deposits.toLocaleString() + ' KES'; |
| document.getElementById('dashboard-rewards').textContent = data.rewards.toLocaleString() + ' KES'; |
| document.getElementById('dashboard-earnings').textContent = (data.total_deposits - data.total_withdrawals).toLocaleString() + ' KES'; |
| |
| |
| document.querySelector('.user-text').innerHTML = `${data.username} <br><span class="user-status">${data.tier} - Marketer</span>`; |
| document.querySelectorAll('.user-avatar').forEach(el => { |
| el.textContent = data.username.charAt(0); |
| }); |
| document.querySelector('.user-name').textContent = `${data.username} v`; |
| document.querySelector('.premium').textContent = data.tier; |
| document.querySelector('.welcome-text h2').textContent = `Welcome back, ${data.username}!`; |
| document.querySelector('.welcome-text p').textContent = `User | Meta Package: ${data.package}`; |
| document.querySelector('.dashboard-card h4').textContent = `Welcome back, ${data.username}!`; |
| } else { |
| window.location.href = '../../index.php'; |
| } |
| }) |
| .catch(error => { |
| console.error('Session check error:', error); |
| }); |
| } |
|
|
| |
| attachPackageListeners(); |
|
|
| |
| 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', function() { |
| depositModal.style.display = 'flex'; |
| }); |
|
|
| dashboardDepositBtn.addEventListener('click', function() { |
| depositModal.style.display = 'flex'; |
| }); |
|
|
| closeDeposit.addEventListener('click', function() { |
| depositModal.style.display = 'none'; |
| }); |
|
|
| confirmDeposit.addEventListener('click', function() { |
| const amount = parseFloat(document.getElementById('depositAmount').value); |
| const method = document.getElementById('depositMethod').value; |
|
|
| if (!isNaN(amount) && amount > 0) { |
| fetch('../api/deposit.php', { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| }, |
| body: JSON.stringify({ |
| amount: amount, |
| method: method |
| }) |
| }) |
| .then(response => response.json()) |
| .then(data => { |
| if (data.success) { |
| depositModal.style.display = 'none'; |
| document.getElementById('depositAmount').value = ''; |
| alert(`Successfully deposited ${amount} KES via ${method}`); |
| updateUserData(); |
| } else { |
| alert('Deposit failed: ' + data.message); |
| } |
| }) |
| .catch(error => { |
| console.error('Deposit error:', error); |
| alert('An error occurred during deposit.'); |
| }); |
| } 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', function() { |
| withdrawModal.style.display = 'flex'; |
| }); |
|
|
| dashboardWithdrawBtn.addEventListener('click', function() { |
| withdrawModal.style.display = 'flex'; |
| }); |
|
|
| closeWithdraw.addEventListener('click', function() { |
| withdrawModal.style.display = 'none'; |
| }); |
|
|
| confirmWithdraw.addEventListener('click', function() { |
| const amount = parseFloat(document.getElementById('withdrawAmount').value); |
| const method = document.getElementById('withdrawMethod').value; |
|
|
| if (!isNaN(amount) && amount > 0) { |
| fetch('../api/withdraw.php', { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| }, |
| body: JSON.stringify({ |
| amount: amount, |
| method: method |
| }) |
| }) |
| .then(response => response.json()) |
| .then(data => { |
| if (data.success) { |
| withdrawModal.style.display = 'none'; |
| document.getElementById('withdrawAmount').value = ''; |
| alert(`Successfully withdrew ${amount} KES via ${method}`); |
| updateUserData(); |
| } else { |
| alert('Withdrawal failed: ' + data.message); |
| } |
| }) |
| .catch(error => { |
| console.error('Withdrawal error:', error); |
| alert('An error occurred during withdrawal.'); |
| }); |
| } else { |
| alert('Please enter a valid amount'); |
| } |
| }); |
|
|
| |
| const redeemBtn = document.getElementById('redeemBtn'); |
|
|
| redeemBtn.addEventListener('click', function() { |
| fetch('../api/redeem.php', { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| } |
| }) |
| .then(response => response.json()) |
| .then(data => { |
| if (data.success) { |
| alert("Rewards redeemed successfully!"); |
| updateUserData(); |
| } else { |
| alert("Redemption failed: " + data.message); |
| } |
| }) |
| .catch(error => { |
| console.error('Redemption error:', error); |
| alert('An error occurred during redemption.'); |
| }); |
| }); |
|
|
| |
| window.addEventListener('click', function(event) { |
| if (event.target === depositModal) { |
| depositModal.style.display = 'none'; |
| } |
| if (event.target === withdrawModal) { |
| withdrawModal.style.display = 'none'; |
| } |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
