Spaces:

bishoy232
/

tic

Running

App Files Files Community

tic / index.html

bishoy232

Add 2 files

305745a verified about 1 year ago

raw

history blame contribute delete

55.3 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Ultimate Game Hub</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	/* ========== GLOBAL STYLES ========== */
	:root {
	--primary: #6c5ce7;
	--secondary: #a29bfe;
	--dark: #2d3436;
	--light: #f5f6fa;
	--success: #00b894;
	--danger: #d63031;
	--warning: #fdcb6e;
	}

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

	body {
	background: linear-gradient(135deg, #2d3436 0%, #000000 100%);
	color: var(--light);
	min-height: 100vh;
	overflow-x: hidden;
	}

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

	/* ========== HEADER STYLES ========== */
	header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	margin-bottom: 30px;
	}

	.logo {
	font-size: 28px;
	font-weight: 700;
	color: var(--primary);
	display: flex;
	align-items: center;
	cursor: pointer;
	}

	.logo i {
	margin-right: 10px;
	}

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

	/* ========== BUTTON STYLES ========== */
	.btn {
	padding: 10px 20px;
	border-radius: 30px;
	border: none;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	}

	.btn-primary {
	background-color: var(--primary);
	color: white;
	}

	.btn-primary:hover {
	background-color: #5649c0;
	transform: translateY(-2px);
	}

	.btn-secondary {
	background-color: var(--secondary);
	color: white;
	}

	.btn-secondary:hover {
	background-color: #8c7ae6;
	transform: translateY(-2px);
	}

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

	.btn-outline:hover {
	background-color: var(--primary);
	color: white;
	}

	/* ========== GAME CARDS ========== */
	.game-modes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	margin-bottom: 40px;
	}

	.game-card {
	background: rgba(255, 255, 255, 0.05);
	border-radius: 15px;
	padding: 30px;
	text-align: center;
	transition: all 0.3s ease;
	border: 1px solid rgba(255, 255, 255, 0.1);
	}

	.game-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
	border-color: var(--primary);
	}

	.game-icon {
	font-size: 50px;
	margin-bottom: 20px;
	color: var(--primary);
	}

	.game-title {
	font-size: 22px;
	margin-bottom: 15px;
	font-weight: 600;
	}

	.game-desc {
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 20px;
	line-height: 1.6;
	}

	/* ========== TRANSACTION SECTIONS ========== */
	.deposit-section, .withdraw-section {
	background: rgba(255, 255, 255, 0.03);
	border-radius: 15px;
	padding: 30px;
	margin-bottom: 40px;
	border: 1px dashed rgba(255, 255, 255, 0.1);
	}

	.section-title {
	font-size: 24px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
	}

	.section-title i {
	color: var(--primary);
	}

	.payment-methods {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	}

	.payment-card {
	background: rgba(255, 255, 255, 0.05);
	border-radius: 10px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	transition: all 0.3s ease;
	cursor: pointer;
	border: 1px solid transparent;
	}

	.payment-card:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--primary);
	}

	.payment-icon {
	font-size: 40px;
	}

	.payment-name {
	font-weight: 600;
	}

	/* ========== ADMIN STYLES ========== */
	.admin-login {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 1000;
	}

	.admin-btn {
	background-color: var(--dark);
	color: white;
	border: none;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	transition: all 0.3s ease;
	}

	.admin-btn:hover {
	background-color: var(--primary);
	transform: scale(1.1);
	}

	.admin-panel {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	}

	.admin-form {
	background-color: var(--dark);
	padding: 40px;
	border-radius: 10px;
	width: 100%;
	max-width: 400px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	}

	.admin-form h2 {
	text-align: center;
	margin-bottom: 30px;
	color: var(--primary);
	}

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

	.form-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	}

	.form-control {
	width: 100%;
	padding: 12px 15px;
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 5px;
	color: white;
	font-size: 16px;
	}

	.form-control:focus {
	outline: none;
	border-color: var(--primary);
	}

	.admin-actions {
	display: flex;
	gap: 15px;
	margin-top: 30px;
	}

	.admin-dashboard {
	display: none;
	width: 90%;
	max-width: 1200px;
	background-color: var(--dark);
	border-radius: 10px;
	padding: 30px;
	max-height: 90vh;
	overflow-y: auto;
	}

	.admin-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.admin-title {
	font-size: 24px;
	color: var(--primary);
	}

	.admin-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-bottom: 30px;
	}

	.stat-card {
	background: rgba(255, 255, 255, 0.05);
	border-radius: 10px;
	padding: 20px;
	text-align: center;
	}

	.stat-value {
	font-size: 28px;
	font-weight: 700;
	color: var(--primary);
	margin: 10px 0;
	}

	.stat-label {
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	}

	.admin-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
	}

	.admin-table th, .admin-table td {
	padding: 12px 15px;
	text-align: left;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.admin-table th {
	background-color: rgba(255, 255, 255, 0.05);
	color: var(--primary);
	font-weight: 600;
	}

	.admin-table tr:hover {
	background-color: rgba(255, 255, 255, 0.03);
	}

	.badge {
	padding: 5px 10px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	}

	.badge-success {
	background-color: rgba(0, 184, 148, 0.2);
	color: #00b894;
	}

	.badge-danger {
	background-color: rgba(214, 48, 49, 0.2);
	color: #d63031;
	}

	.badge-warning {
	background-color: rgba(253, 203, 110, 0.2);
	color: #fdcb6e;
	}

	/* ========== AUTHENTICATION STYLES ========== */
	.auth-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 70vh;
	}

	.auth-form {
	background: rgba(255, 255, 255, 0.05);
	border-radius: 15px;
	padding: 40px;
	width: 100%;
	max-width: 500px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	}

	.auth-form h2 {
	text-align: center;
	margin-bottom: 30px;
	color: var(--primary);
	}

	.auth-actions {
	display: flex;
	justify-content: space-between;
	margin-top: 30px;
	}

	.form-note {
	margin-top: 20px;
	text-align: center;
	color: rgba(255, 255, 255, 0.6);
	}

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

	.form-note a:hover {
	text-decoration: underline;
	}

	/* ========== WITHDRAW STYLES ========== */
	.withdraw-form {
	margin-top: 30px;
	}

	.balance-info {
	background: rgba(255, 255, 255, 0.05);
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

	.balance-amount {
	font-size: 24px;
	font-weight: 700;
	color: var(--primary);
	}

	/* ========== NAVIGATION TABS ========== */
	.nav-tabs {
	display: flex;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	margin-bottom: 30px;
	}

	.nav-tab {
	padding: 12px 20px;
	cursor: pointer;
	border-bottom: 3px solid transparent;
	transition: all 0.3s ease;
	font-weight: 600;
	}

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

	.nav-tab:hover:not(.active) {
	color: var(--secondary);
	}

	.tab-content {
	display: none;
	}

	.tab-content.active {
	display: block;
	}

	/* ========== RESPONSIVE STYLES ========== */
	@media (max-width: 768px) {
	.game-modes {
	grid-template-columns: 1fr;
	}

	.payment-methods {
	grid-template-columns: repeat(2, 1fr);
	}

	.admin-stats {
	grid-template-columns: repeat(2, 1fr);
	}

	.auth-form {
	padding: 30px 20px;
	}

	.nav-tabs {
	flex-wrap: wrap;
	}

	.nav-tab {
	flex: 1 0 auto;
	text-align: center;
	}
	}
	</style>
	</head>
	<body>
	<!-- ========== MAIN DASHBOARD ========== -->
	<div class="container" id="dashboardView">
	<header>
	<div class="logo" onclick="showView('dashboardView')">
	<i class="fas fa-gamepad"></i>
	<span>Ultimate Game Hub</span>
	</div>
	<div class="user-actions">
	<button class="btn btn-outline" onclick="showView('loginView')">
	<i class="fas fa-user"></i>
	Login
	</button>
	<button class="btn btn-primary" onclick="showView('depositView')">
	<i class="fas fa-wallet"></i>
	Deposit
	</button>
	</div>
	</header>

	<div class="game-modes">
	<div class="game-card">
	<div class="game-icon">
	<i class="fas fa-robot"></i>
	</div>
	<h3 class="game-title">Play vs AI</h3>
	<p class="game-desc">Challenge our intelligent AI opponent with adaptive difficulty that learns your play style.</p>
	<button class="btn btn-secondary" onclick="startGame('ai')">
	<i class="fas fa-play"></i>
	Play Now
	</button>
	</div>

	<div class="game-card">
	<div class="game-icon">
	<i class="fas fa-users"></i>
	</div>
	<h3 class="game-title">Player vs Player</h3>
	<p class="game-desc">Compete against real players from around the world in intense head-to-head matches.</p>
	<button class="btn btn-secondary" onclick="startGame('pvp')">
	<i class="fas fa-play"></i>
	Play Now
	</button>
	</div>

	<div class="game-card">
	<div class="game-icon">
	<i class="fas fa-trophy"></i>
	</div>
	<h3 class="game-title">Tournaments</h3>
	<p class="game-desc">Join competitive tournaments with amazing prizes and prove you're the best.</p>
	<button class="btn btn-secondary" onclick="showTournaments()">
	<i class="fas fa-play"></i>
	Join Now
	</button>
	</div>
	</div>

	<div class="deposit-section">
	<h2 class="section-title">
	<i class="fas fa-coins"></i>
	Deposit Points
	</h2>
	<p style="color: rgba(255, 255, 255, 0.7); margin-bottom: 20px;">Choose your preferred payment method to add points to your account:</p>

	<div class="payment-methods">
	<div class="payment-card">
	<div class="payment-icon" style="color: #e60000;">
	<i class="fas fa-money-bill-wave"></i>
	</div>
	<div class="payment-name">Vodafone Cash</div>
	<button class="btn btn-outline" style="padding: 8px 15px; font-size: 14px;" onclick="initiateDeposit('vodafone')">
	<i class="fas fa-plus"></i>
	Add Funds
	</button>
	</div>

	<div class="payment-card">
	<div class="payment-icon" style="color: #00aaff;">
	<i class="fas fa-mobile-alt"></i>
	</div>
	<div class="payment-name">Etisalat Cash</div>
	<button class="btn btn-outline" style="padding: 8px 15px; font-size: 14px;" onclick="initiateDeposit('etisalat')">
	<i class="fas fa-plus"></i>
	Add Funds
	</button>
	</div>

	<div class="payment-card">
	<div class="payment-icon" style="color: #ff6600;">
	<i class="fas fa-money-check-alt"></i>
	</div>
	<div class="payment-name">Orange Cash</div>
	<button class="btn btn-outline" style="padding: 8px 15px; font-size: 14px;" onclick="initiateDeposit('orange')">
	<i class="fas fa-plus"></i>
	Add Funds
	</button>
	</div>

	<div class="payment-card">
	<div class="payment-icon" style="color: #003087;">
	<i class="fab fa-paypal"></i>
	</div>
	<div class="payment-name">PayPal</div>
	<button class="btn btn-outline" style="padding: 8px 15px; font-size: 14px;" onclick="initiateDeposit('paypal')">
	<i class="fas fa-plus"></i>
	Add Funds
	</button>
	</div>

	<div class="payment-card">
	<div class="payment-icon" style="color: #0099e5;">
	<i class="fas fa-credit-card"></i>
	</div>
	<div class="payment-name">Payoneer</div>
	<button class="btn btn-outline" style="padding: 8px 15px; font-size: 14px;" onclick="initiateDeposit('payoneer')">
	<i class="fas fa-plus"></i>
	Add Funds
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- ========== LOGIN VIEW ========== -->
	<div class="container auth-container" id="loginView" style="display: none;">
	<div class="auth-form">
	<h2><i class="fas fa-sign-in-alt"></i> Login to Your Account</h2>
	<div class="form-group">
	<label for="loginEmail">Email Address</label>
	<input type="email" id="loginEmail" class="form-control" placeholder="Enter your email">
	</div>
	<div class="form-group">
	<label for="loginPassword">Password</label>
	<input type="password" id="loginPassword" class="form-control" placeholder="Enter your password">
	</div>
	<div class="form-group">
	<button class="btn btn-primary" style="width: 100%;" onclick="loginUser()">
	<i class="fas fa-sign-in-alt"></i> Login
	</button>
	</div>
	<div class="form-note">
	Don't have an account? <a href="javascript:void(0)" onclick="showView('registerView')">Register here</a>
	</div>
	<div class="form-note">
	<a href="javascript:void(0)" onclick="showView('dashboardView')">
	<i class="fas fa-arrow-left"></i> Back to Home
	</a>
	</div>
	</div>
	</div>

	<!-- ========== REGISTER VIEW ========== -->
	<div class="container auth-container" id="registerView" style="display: none;">
	<div class="auth-form">
	<h2><i class="fas fa-user-plus"></i> Create New Account</h2>
	<div class="form-group">
	<label for="registerName">Full Name</label>
	<input type="text" id="registerName" class="form-control" placeholder="Enter your full name">
	</div>
	<div class="form-group">
	<label for="registerEmail">Email Address</label>
	<input type="email" id="registerEmail" class="form-control" placeholder="Enter your email">
	</div>
	<div class="form-group">
	<label for="registerPassword">Password</label>
	<input type="password" id="registerPassword" class="form-control" placeholder="Create a password">
	</div>
	<div class="form-group">
	<label for="registerConfirmPassword">Confirm Password</label>
	<input type="password" id="registerConfirmPassword" class="form-control" placeholder="Confirm your password">
	</div>
	<div class="form-group">
	<button class="btn btn-primary" style="width: 100%;" onclick="registerUser()">
	<i class="fas fa-user-plus"></i> Register
	</button>
	</div>
	<div class="form-note">
	Already have an account? <a href="javascript:void(0)" onclick="showView('loginView')">Login here</a>
	</div>
	<div class="form-note">
	<a href="javascript:void(0)" onclick="showView('dashboardView')">
	<i class="fas fa-arrow-left"></i> Back to Home
	</a>
	</div>
	</div>
	</div>

	<!-- ========== DEPOSIT VIEW ========== -->
	<div class="container" id="depositView" style="display: none;">
	<header>
	<div class="logo" onclick="showView('dashboardView')">
	<i class="fas fa-gamepad"></i>
	<span>Ultimate Game Hub</span>
	</div>
	<div class="user-actions">
	<button class="btn btn-outline" onclick="showView('withdrawView')">
	<i class="fas fa-money-bill-wave"></i>
	Withdraw
	</button>
	<button class="btn btn-primary" onclick="showView('dashboardView')">
	<i class="fas fa-home"></i>
	Dashboard
	</button>
	</div>
	</header>

	<div class="nav-tabs">
	<div class="nav-tab active" onclick="showTab('depositTab')">
	<i class="fas fa-coins"></i> Deposit
	</div>
	<div class="nav-tab" onclick="showTab('withdrawTab')">
	<i class="fas fa-money-bill-wave"></i> Withdraw
	</div>
	</div>

	<div class="tab-content active" id="depositTab">
	<div class="deposit-section">
	<h2 class="section-title">
	<i class="fas fa-coins"></i>
	Deposit Funds
	</h2>
	<p style="color: rgba(255, 255, 255, 0.7); margin-bottom: 20px;">Choose your preferred payment method to add points to your account:</p>

	<div class="payment-methods">
	<div class="payment-card">
	<div class="payment-icon" style="color: #e60000;">
	<i class="fas fa-money-bill-wave"></i>
	</div>
	<div class="payment-name">Vodafone Cash</div>
	<button class="btn btn-outline" style="padding: 8px 15px; font-size: 14px;" onclick="initiateDeposit('vodafone')">
	<i class="fas fa-plus"></i>
	Add Funds
	</button>
	</div>

	<div class="payment-card">
	<div class="payment-icon" style="color: #00aaff;">
	<i class="fas fa-mobile-alt"></i>
	</div>
	<div class="payment-name">Etisalat Cash</div>
	<button class="btn btn-outline" style="padding: 8px 15px; font-size: 14px;" onclick="initiateDeposit('etisalat')">
	<i class="fas fa-plus"></i>
	Add Funds
	</button>
	</div>

	<div class="payment-card">
	<div class="payment-icon" style="color: #ff6600;">
	<i class="fas fa-money-check-alt"></i>
	</div>
	<div class="payment-name">Orange Cash</div>
	<button class="btn btn-outline" style="padding: 8px 15px; font-size: 14px;" onclick="initiateDeposit('orange')">
	<i class="fas fa-plus"></i>
	Add Funds
	</button>
	</div>

	<div class="payment-card">
	<div class="payment-icon" style="color: #003087;">
	<i class="fab fa-paypal"></i>
	</div>
	<div class="payment-name">PayPal</div>
	<button class="btn btn-outline" style="padding: 8px 15px; font-size: 14px;" onclick="initiateDeposit('paypal')">
	<i class="fas fa-plus"></i>
	Add Funds
	</button>
	</div>

	<div class="payment-card">
	<div class="payment-icon" style="color: #0099e5;">
	<i class="fas fa-credit-card"></i>
	</div>
	<div class="payment-name">Payoneer</div>
	<button class="btn btn-outline" style="padding: 8px 15px; font-size: 14px;" onclick="initiateDeposit('payoneer')">
	<i class="fas fa-plus"></i>
	Add Funds
	</button>
	</div>
	</div>
	</div>
	</div>

	<div class="tab-content" id="withdrawTab">
	<div class="withdraw-section">
	<h2 class="section-title">
	<i class="fas fa-money-bill-wave"></i>
	Withdraw Funds
	</h2>

	<div class="balance-info">
	<div>
	<div style="color: rgba(255, 255, 255, 0.7); font-size: 14px;">Available Balance</div>
	<div class="balance-amount" id="userBalance">$0.00</div>
	</div>
	<div>
	<button class="btn btn-outline" onclick="showTransactionHistory()">
	<i class="fas fa-history"></i>
	Transaction History
	</button>
	</div>
	</div>

	<div class="withdraw-form">
	<div class="form-group">
	<label for="withdrawAmount">Amount to Withdraw</label>
	<input type="number" id="withdrawAmount" class="form-control" placeholder="Enter amount">
	</div>
	<div class="form-group">
	<label for="withdrawMethod">Payment Method</label>
	<select id="withdrawMethod" class="form-control">
	<option value="">Select payment method</option>
	<option value="vodafone">Vodafone Cash</option>
	<option value="etisalat">Etisalat Cash</option>
	<option value="orange">Orange Cash</option>
	<option value="paypal">PayPal</option>
	<option value="payoneer">Payoneer</option>
	</select>
	</div>
	<div class="form-group">
	<label for="withdrawAccount">Account Details</label>
	<input type="text" id="withdrawAccount" class="form-control" placeholder="Enter your account number">
	</div>
	<div class="form-group">
	<button class="btn btn-primary" style="width: 100%;" onclick="submitWithdrawal()">
	<i class="fas fa-paper-plane"></i> Request Withdrawal
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- ========== WITHDRAW VIEW ========== -->
	<div class="container" id="withdrawView" style="display: none;">
	<header>
	<div class="logo" onclick="showView('dashboardView')">
	<i class="fas fa-gamepad"></i>
	<span>Ultimate Game Hub</span>
	</div>
	<div class="user-actions">
	<button class="btn btn-outline" onclick="showView('depositView')">
	<i class="fas fa-coins"></i>
	Deposit
	</button>
	<button class="btn btn-primary" onclick="showView('dashboardView')">
	<i class="fas fa-home"></i>
	Dashboard
	</button>
	</div>
	</header>

	<div class="withdraw-section">
	<h2 class="section-title">
	<i class="fas fa-money-bill-wave"></i>
	Withdraw Funds
	</h2>

	<div class="balance-info">
	<div>
	<div style="color: rgba(255, 255, 255, 0.7); font-size: 14px;">Available Balance</div>
	<div class="balance-amount" id="userBalance2">$0.00</div>
	</div>
	<div>
	<button class="btn btn-outline" onclick="showTransactionHistory()">
	<i class="fas fa-history"></i>
	Transaction History
	</button>
	</div>
	</div>

	<div class="withdraw-form">
	<div class="form-group">
	<label for="withdrawAmount2">Amount to Withdraw</label>
	<input type="number" id="withdrawAmount2" class="form-control" placeholder="Enter amount">
	</div>
	<div class="form-group">
	<label for="withdrawMethod2">Payment Method</label>
	<select id="withdrawMethod2" class="form-control">
	<option value="">Select payment method</option>
	<option value="vodafone">Vodafone Cash</option>
	<option value="etisalat">Etisalat Cash</option>
	<option value="orange">Orange Cash</option>
	<option value="paypal">PayPal</option>
	<option value="payoneer">Payoneer</option>
	</select>
	</div>
	<div class="form-group">
	<label for="withdrawAccount2">Account Details</label>
	<input type="text" id="withdrawAccount2" class="form-control" placeholder="Enter your account number">
	</div>
	<div class="form-group">
	<button class="btn btn-primary" style="width: 100%;" onclick="submitWithdrawal()">
	<i class="fas fa-paper-plane"></i> Request Withdrawal
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- ========== ADMIN SECTION ========== -->
	<div class="admin-login">
	<button class="admin-btn" id="adminAccessBtn">
	<i class="fas fa-lock"></i>
	</button>
	</div>

	<div class="admin-panel" id="adminPanel">
	<div class="admin-form" id="adminLoginForm">
	<h2>Admin Login</h2>
	<div class="form-group">
	<label for="adminUsername">Username</label>
	<input type="text" id="adminUsername" class="form-control" placeholder="Enter admin username">
	</div>
	<div class="form-group">
	<label for="adminPassword">Password</label>
	<input type="password" id="adminPassword" class="form-control" placeholder="Enter password">
	</div>
	<div class="admin-actions">
	<button class="btn btn-primary" id="adminLoginBtn" onclick="adminLogin()">
	<i class="fas fa-sign-in-alt"></i>
	Login
	</button>
	<button class="btn btn-outline" id="adminCancelBtn">
	<i class="fas fa-times"></i>
	Cancel
	</button>
	</div>
	</div>

	<div class="admin-dashboard" id="adminDashboard">
	<div class="admin-header">
	<h2 class="admin-title">
	<i class="fas fa-tachometer-alt"></i>
	Admin Dashboard
	</h2>
	<button class="btn btn-outline" id="adminLogoutBtn" onclick="adminLogout()">
	<i class="fas fa-sign-out-alt"></i>
	Logout
	</button>
	</div>

	<div class="admin-stats">
	<div class="stat-card">
	<i class="fas fa-users"></i>
	<div class="stat-value" id="totalPlayers">0</div>
	<div class="stat-label">Total Players</div>
	</div>
	<div class="stat-card">
	<i class="fas fa-gamepad"></i>
	<div class="stat-value" id="activeGames">0</div>
	<div class="stat-label">Active Games</div>
	</div>
	<div class="stat-card">
	<i class="fas fa-coins"></i>
	<div class="stat-value" id="totalDeposits">$0</div>
	<div class="stat-label">Total Deposits</div>
	</div>
	<div class="stat-card">
	<i class="fas fa-trophy"></i>
	<div class="stat-value" id="ongoingTournaments">0</div>
	<div class="stat-label">Ongoing Tournaments</div>
	</div>
	</div>

	<h3 style="margin: 30px 0 15px; color: var(--primary);">
	<i class="fas fa-user-shield"></i>
	Admin Controls
	</h3>

	<table class="admin-table">
	<thead>
	<tr>
	<th>ID</th>
	<th>Action</th>
	<th>Description</th>
	<th>Status</th>
	<th>Action</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>1</td>
	<td>Manage Players</td>
	<td>View, edit, or ban player accounts</td>
	<td><span class="badge badge-success">Active</span></td>
	<td><button class="btn btn-outline" style="padding: 5px 10px; font-size: 12px;" onclick="managePlayers()">Access</button></td>
	</tr>
	<tr>
	<td>2</td>
	<td>Game Settings</td>
	<td>Adjust game parameters and rules</td>
	<td><span class="badge badge-success">Active</span></td>
	<td><button class="btn btn-outline" style="padding: 5px 10px; font-size: 12px;" onclick="gameSettings()">Access</button></td>
	</tr>
	<tr>
	<td>3</td>
	<td>Deposit Manager</td>
	<td>View and verify deposit requests</td>
	<td><span class="badge badge-warning">Pending</span></td>
	<td><button class="btn btn-outline" style="padding: 5px 10px; font-size: 12px;" onclick="depositManager()">Access</button></td>
	</tr>
	<tr>
	<td>4</td>
	<td>Tournament Setup</td>
	<td>Create and manage tournaments</td>
	<td><span class="badge badge-success">Active</span></td>
	<td><button class="btn btn-outline" style="padding: 5px 10px; font-size: 12px;" onclick="tournamentSetup()">Access</button></td>
	</tr>
	<tr>
	<td>5</td>
	<td>System Logs</td>
	<td>View system activity and logs</td>
	<td><span class="badge badge-danger">Disabled</span></td>
	<td><button class="btn btn-outline" style="padding: 5px 10px; font-size: 12px;" onclick="systemLogs()">Access</button></td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>

	<!-- ========== DATABASE INTEGRATION ========== -->
	<script>
	// ========== DATABASE CONFIGURATION ==========
	const DB_CONFIG = {
	host: 'sql313.infinityfree.com',
	username: 'if0_38631861',
	password: 'i8Eo18ziAz5ta',
	database: 'if0_38631861_tic',
	port: 3306
	};

	// Current user session
	let currentUser = null;
	let isAdminLoggedIn = false;

	// ========== DATABASE FUNCTIONS ==========
	// These functions would be replaced with actual AJAX calls to your PHP backend
	// that connects to the MySQL database in a real application

	async function dbQuery(query, params = []) {
	// In a real app, this would make an AJAX call to your backend API
	// For demo purposes, we're using localStorage to simulate a database

	console.log(`Executing query: ${query}`);
	console.log(`With params:`, params);

	// Simulate database delay
	await new Promise(resolve => setTimeout(resolve, 300));

	// For demo, we'll use localStorage as our "database"
	if (!localStorage.getItem('gamehub_db')) {
	localStorage.setItem('gamehub_db', JSON.stringify({
	users: [],
	transactions: [],
	games: [],
	tournaments: [],
	adminCredentials: {
	username: "admin",
	password: "admin123"
	}
	}));
	}

	const db = JSON.parse(localStorage.getItem('gamehub_db'));

	// Simple query simulation
	if (query.includes('SELECT * FROM users WHERE email = ?')) {
	const user = db.users.find(u => u.email === params[0]);
	return user ? [user] : [];
	}

	if (query.includes('INSERT INTO users')) {
	const newUser = {
	id: Date.now().toString(),
	name: params[0],
	email: params[1],
	password: params[2],
	balance: 0,
	createdAt: new Date().toISOString()
	};
	db.users.push(newUser);
	localStorage.setItem('gamehub_db', JSON.stringify(db));
	return { insertId: newUser.id };
	}

	if (query.includes('SELECT COUNT(*) as count FROM users')) {
	return [{ count: db.users.length }];
	}

	// Add more query simulations as needed

	return [];
	}

	// ========== USER AUTHENTICATION FUNCTIONS ==========
	async function registerUser() {
	const name = document.getElementById('registerName').value;
	const email = document.getElementById('registerEmail').value;
	const password = document.getElementById('registerPassword').value;
	const confirmPassword = document.getElementById('registerConfirmPassword').value;

	if (!name \|\| !email \|\| !password \|\| !confirmPassword) {
	alert('Please fill all fields to register');
	return;
	}

	if (password !== confirmPassword) {
	alert('Passwords do not match!');
	return;
	}

	try {
	// Check if user already exists
	const existingUser = await dbQuery(
	'SELECT * FROM users WHERE email = ?',
	[email]
	);

	if (existingUser.length > 0) {
	alert('User with this email already exists!');
	return;
	}

	// Create new user
	const result = await dbQuery(
	'INSERT INTO users (name, email, password) VALUES (?, ?, ?)',
	[name, email, password]
	);

	if (result.insertId) {
	alert(`Registration successful for ${name}! Redirecting to login...`);
	showView('loginView');
	} else {
	throw new Error('Registration failed');
	}
	} catch (error) {
	console.error('Registration error:', error);
	alert('Registration failed. Please try again.');
	}
	}

	async function loginUser() {
	const email = document.getElementById('loginEmail').value;
	const password = document.getElementById('loginPassword').value;

	if (!email \|\| !password) {
	alert('Please enter both email and password');
	return;
	}

	try {
	const users = await dbQuery(
	'SELECT * FROM users WHERE email = ? AND password = ?',
	[email, password]
	);

	if (users.length === 0) {
	alert('Invalid email or password');
	return;
	}

	currentUser = users[0];
	alert(`Welcome back ${currentUser.name}!`);
	showView('dashboardView');
	updateUserBalanceDisplay();
	} catch (error) {
	console.error('Login error:', error);
	alert('Login failed. Please try again.');
	}
	}

	function logoutUser() {
	currentUser = null;
	showView('dashboardView');
	}

	// ========== TRANSACTION FUNCTIONS ==========
	async function initiateDeposit(method) {
	if (!currentUser) {
	alert('Please login to deposit funds');
	showView('loginView');
	return;
	}

	const amount = prompt(`Enter amount to deposit via ${method}:`);
	if (!amount \|\| isNaN(amount) \|\| amount <= 0) {
	alert('Please enter a valid amount');
	return;
	}

	try {
	// In a real app, this would call your backend API
	const transaction = {
	id: Date.now().toString(),
	userId: currentUser.id,
	type: 'deposit',
	method,
	amount: parseFloat(amount),
	status: 'pending',
	createdAt: new Date().toISOString()
	};

	// Save to our simulated database
	const db = JSON.parse(localStorage.getItem('gamehub_db'));
	db.transactions.push(transaction);
	localStorage.setItem('gamehub_db', JSON.stringify(db));

	alert(`Deposit request for $${amount} via ${method} has been submitted for processing!`);
	} catch (error) {
	console.error('Deposit error:', error);
	alert('Deposit failed. Please try again.');
	}
	}

	async function submitWithdrawal() {
	if (!currentUser) {
	alert('Please login to withdraw funds');
	showView('loginView');
	return;
	}

	const amount = parseFloat(document.getElementById('withdrawAmount').value \|\|
	document.getElementById('withdrawAmount2').value);
	const method = document.getElementById('withdrawMethod').value \|\|
	document.getElementById('withdrawMethod2').value;
	const account = document.getElementById('withdrawAccount').value \|\|
	document.getElementById('withdrawAccount2').value;

	if (!amount \|\| isNaN(amount) \|\| amount <= 0) {
	alert('Please enter a valid amount');
	return;
	}

	if (!method) {
	alert('Please select a payment method');
	return;
	}

	if (!account) {
	alert('Please enter your account details');
	return;
	}

	try {
	// Check user balance (in real app, this would query the database)
	if (amount > currentUser.balance) {
	alert('Insufficient funds for this withdrawal');
	return;
	}

	// Create withdrawal transaction
	const transaction = {
	id: Date.now().toString(),
	userId: currentUser.id,
	type: 'withdrawal',
	method,
	amount,
	account,
	status: 'pending',
	createdAt: new Date().toISOString()
	};

	// Save to our simulated database
	const db = JSON.parse(localStorage.getItem('gamehub_db'));
	db.transactions.push(transaction);

	// Update user balance
	const userIndex = db.users.findIndex(u => u.id === currentUser.id);
	if (userIndex !== -1) {
	db.users[userIndex].balance -= amount;
	currentUser = db.users[userIndex];
	}

	localStorage.setItem('gamehub_db', JSON.stringify(db));
	updateUserBalanceDisplay();

	alert(`Withdrawal request for $${amount} via ${method} has been submitted!`);
	} catch (error) {
	console.error('Withdrawal error:', error);
	alert('Withdrawal failed. Please try again.');
	}
	}

	async function showTransactionHistory() {
	if (!currentUser) {
	alert('Please login to view transaction history');
	showView('loginView');
	return;
	}

	try {
	// In a real app, this would query the database
	const db = JSON.parse(localStorage.getItem('gamehub_db'));
	const userTransactions = db.transactions.filter(
	t => t.userId === currentUser.id
	);

	if (userTransactions.length === 0) {
	alert('No transactions found');
	return;
	}

	let history = 'Your Transaction History:\n\n';
	userTransactions.forEach(t => {
	history += `${new Date(t.createdAt).toLocaleString()} - ${t.type.toUpperCase()} (${t.method}): $${t.amount} - ${t.status}\n`;
	});

	alert(history);
	} catch (error) {
	console.error('Transaction history error:', error);
	alert('Failed to load transaction history.');
	}
	}

	// ========== GAME FUNCTIONS ==========
	function startGame(mode) {
	if (!currentUser) {
	alert('Please login to play games');
	showView('loginView');
	return;
	}

	alert(`Starting ${mode === 'ai' ? 'AI' : 'Player vs Player'} game...`);
	// In a real app, this would redirect to the game page or show a game modal
	}

	function showTournaments() {
	if (!currentUser) {
	alert('Please login to view tournaments');
	showView('loginView');
	return;
	}

	alert('Loading tournaments...');
	// In a real app, this would show a tournaments view
	}

	// ========== ADMIN FUNCTIONS ==========
	async function adminLogin() {
	const username = document.getElementById('adminUsername').value;
	const password = document.getElementById('adminPassword').value;

	try {
	// In a real app, this would verify against the database
	const db = JSON.parse(localStorage.getItem('gamehub_db'));
	if (username === db.adminCredentials.username &&
	password === db.adminCredentials.password) {

	isAdminLoggedIn = true;
	document.getElementById('adminLoginForm').style.display = 'none';
	document.getElementById('adminDashboard').style.display = 'block';
	updateAdminStats();
	} else {
	throw new Error('Invalid credentials');
	}
	} catch (error) {
	console.error('Admin login error:', error);
	alert('Invalid admin credentials!');
	}
	}

	function adminLogout() {
	isAdminLoggedIn = false;
	document.getElementById('adminPanel').style.display = 'none';
	document.getElementById('adminLoginForm').style.display = 'block';
	document.getElementById('adminDashboard').style.display = 'none';
	document.getElementById('adminUsername').value = '';
	document.getElementById('adminPassword').value = '';
	}

	async function updateAdminStats() {
	try {
	// In a real app, these would query the database
	const db = JSON.parse(localStorage.getItem('gamehub_db'));

	document.getElementById('totalPlayers').textContent = db.users.length;
	document.getElementById('activeGames').textContent = db.games.length;

	const totalDeposits = db.transactions
	.filter(t => t.type === 'deposit' && t.status === 'completed')
	.reduce((sum, t) => sum + t.amount, 0);

	document.getElementById('totalDeposits').textContent = `$${totalDeposits}`;
	document.getElementById('ongoingTournaments').textContent = db.tournaments.length;
	} catch (error) {
	console.error('Admin stats error:', error);
	}
	}

	function managePlayers() {
	alert('Player management system would open here');
	}

	function gameSettings() {
	alert('Game settings panel would open here');
	}

	function depositManager() {
	alert('Deposit management system would open here');
	}

	function tournamentSetup() {
	alert('Tournament setup panel would open here');
	}

	function systemLogs() {
	alert('System logs viewer would open here');
	}

	// ========== UTILITY FUNCTIONS ==========
	function updateUserBalanceDisplay() {
	if (currentUser) {
	document.getElementById('userBalance').textContent = `$${currentUser.balance.toFixed(2)}`;
	document.getElementById('userBalance2').textContent = `$${currentUser.balance.toFixed(2)}`;
	}
	}

	// ========== VIEW MANAGEMENT ==========
	function showView(viewId) {
	// Hide all views
	document.querySelectorAll('.container').forEach(view => {
	view.style.display = 'none';
	});

	// Show the selected view
	document.getElementById(viewId).style.display = 'block';

	// Reset tabs if showing deposit view
	if (viewId === 'depositView') {
	showTab('depositTab');
	}
	}

	function showTab(tabId) {
	// Hide all tab contents
	document.querySelectorAll('.tab-content').forEach(tab => {
	tab.classList.remove('active');
	});

	// Deactivate all tabs
	document.querySelectorAll('.nav-tab').forEach(tab => {
	tab.classList.remove('active');
	});

	// Show the selected tab content
	document.getElementById(tabId).classList.add('active');

	// Activate the clicked tab
	const tabButtons = document.querySelectorAll('.nav-tab');
	tabButtons.forEach(button => {
	if (button.textContent.includes(tabId.replace('Tab', ''))) {
	button.classList.add('active');
	}
	});
	}

	// ========== INITIALIZATION ==========
	document.addEventListener('DOMContentLoaded', function() {
	const adminAccessBtn = document.getElementById('adminAccessBtn');
	const adminPanel = document.getElementById('adminPanel');
	const adminCancelBtn = document.getElementById('adminCancelBtn');

	// Show admin panel
	adminAccessBtn.addEventListener('click', function() {
	adminPanel.style.display = 'flex';
	document.getElementById('adminLoginForm').style.display = 'block';
	document.getElementById('adminDashboard').style.display = 'none';
	});

	// Cancel admin login
	adminCancelBtn.addEventListener('click', function() {
	adminPanel.style.display = 'none';
	document.getElementById('adminUsername').value = '';
	document.getElementById('adminPassword').value = '';
	});

	// Initialize with dashboard view
	showView('dashboardView');
	});
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
	</html>