|
|
<?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> |
